### Install and Start Development Server

Source: https://github.com/artginzburg/css-clamper/blob/main/docs/maintain.md

Run these commands to install dependencies and start the development server in watch mode for local testing.

```sh
pnpm i

pnpm start
```

--------------------------------

### Install css-clamper

Source: https://github.com/artginzburg/css-clamper/blob/main/ReadMe.md

Install the package via npm.

```sh
npm install css-clamper
```

--------------------------------

### Extend Viewport Limits with clampify()

Source: https://github.com/artginzburg/css-clamper/blob/main/ReadMe.md

Use extendMinViewport and extendMaxViewport to scale sizes linearly beyond the standard 320px to 1920px range. This example shows how to calculate extended font sizes.

```javascript
const fontSizeExtended = clampify(
  '16px',
  '24px',
  undefined, // assumed 320px
  undefined, // assumed 1920px
  '120px', // extendMinViewport
  '2120px', // extendMaxViewport
);
// Would output the same as this:
const fontSizeExtendedManually = clampify('15px', '25px', '120px', '2120px');
```

--------------------------------

### Generate responsive sizes with clampify

Source: https://github.com/artginzburg/css-clamper/blob/main/ReadMe.md

Use clampify to generate a responsive clamp() string. The function accepts min and max sizes as strings with units.

```js
import { clampify } from 'css-clamper';

const fontSizeResponsive = clampify('16px', '1.5rem');
//=> clamp(1rem, 0.9rem + 0.5vw, 1.5rem)
```

```js
const fontSizeMobileToTablet = clampify(
  '16px',
  '1.5rem',
  // By default, viewport is from 320 to 1920 pixels. Here's the override:
  '320px',
  '768px',
);
//=> clamp(1rem, 0.643rem + 1.79vw, 1.5rem)
```

--------------------------------

### Link Local Package for Manual Testing

Source: https://github.com/artginzburg/css-clamper/blob/main/docs/maintain.md

Link the local css-clamper package into another project to test changes. Ensure you are in the project root when linking.

```sh
pnpm link ./packages/css-clamper

cd packages/css-clamper

pnpm i

pnpm dev
```

--------------------------------

### Configure custom viewport limits

Source: https://github.com/artginzburg/css-clamper/blob/main/ReadMe.md

Use createClamper to generate a reusable function with custom default viewport boundaries.

```js
// config/css-clamper.js
import { createClamper } from 'css-clamper';

export const clamper = createClamper('390px', '1512px');
```

--------------------------------

### Create pre-configured clampers with createClamper

Source: https://context7.com/artginzburg/css-clamper/llms.txt

Factory function to generate a clamper with fixed viewport limits, ideal for design system configurations.

```javascript
import { createClamper } from 'css-clamper';

// Create a clamper with custom viewport limits (Figma layout dimensions)
const clamper = createClamper('390px', '1512px');

// Use it just like clampify but with predefined viewport limits
const fontSize = clamper('18px', '30px');
const spacing = clamper('1rem', '2rem');

// Create an extended clamper for scaling Figma layouts to standard viewports
const clamperExtended = createClamper(
  '390px',   // Figma mobile layout width
  '1512px',  // Figma desktop layout width
  '320px',   // Target minimum viewport (standard mobile)
  '1920px'   // Target maximum viewport (standard desktop)
);

// The sizes will be linearly scaled to support 320px-1920px range
// while maintaining the original proportions from the Figma layouts
const heading = clamperExtended('18px', '30px');
// On 390px viewport: font-size = 18px
// On 1512px viewport: font-size = 30px
// On 320px viewport: font-size ≈ 17px (scaled down)
// On 1920px viewport: font-size ≈ 34px (scaled up)

// Usage in a design system configuration
// config/css-clamper.js
export const figmaClamper = createClamper('390px', '1512px');
export const figmaClamperExtended = createClamper('390px', '1512px', '320px', '1920px');

// Usage in components
import { figmaClamper } from '../config/css-clamper';

const Card = styled.div`
  padding: ${figmaClamper('16px', '24px')};
  border-radius: ${figmaClamper('8px', '12px')};
`;
```

--------------------------------

### Generate responsive clamp values with clampify

Source: https://context7.com/artginzburg/css-clamper/llms.txt

Use clampify to generate CSS clamp() strings based on min/max sizes and optional viewport constraints.

```javascript
import { clampify } from 'css-clamper';

// Basic usage with pixel values
const fontSize = clampify('16px', '24px');
// Returns: 'clamp(1rem, 0.9rem + 0.5vw, 1.5rem)'

// Using rem values
const headingSize = clampify('1rem', '1.5rem');
// Returns: 'clamp(1rem, 0.9rem + 0.5vw, 1.5rem)'

// Custom viewport limits (mobile to tablet only)
const mobileToTablet = clampify('16px', '1.5rem', '320px', '768px');
// Returns: 'clamp(1rem, 0.643rem + 1.79vw, 1.5rem)'

// Inverted responsiveness (max size on min viewport)
const invertedSize = clampify('16px', '5px');
// Returns: 'clamp(0.313rem, 1.137rem + -0.69vw, 1rem)'

// Negative values for margins or positioning
const negativeMargin = clampify('-16px', '0px');
// Returns: 'clamp(-1rem, -1.2rem + 1vw, 0rem)'

// Extended viewport scaling (Figma layout to standard viewport)
const extendedSize = clampify(
  '16px',          // minSize at minViewport
  '24px',          // maxSize at maxViewport
  undefined,       // minViewport (default 320px)
  undefined,       // maxViewport (default 1920px)
  '120px',         // extendMinViewport
  '2120px'         // extendMaxViewport
);
// Equivalent to: clampify('15px', '25px', '120px', '2120px')

// Usage with styled-components
const StyledHeading = styled.h1`
  font-size: ${clampify('24px', '48px')};
  padding: ${clampify('16px', '32px')};
  margin-bottom: ${clampify('1rem', '2rem')};
`;
```

--------------------------------

### Create a Clamper with Extended Viewport Limits

Source: https://github.com/artginzburg/css-clamper/blob/main/ReadMe.md

Create a reusable clamper function that supports extended viewport limits. This is useful when your initial design layout (e.g., Figma) uses non-standard widths but you want to support a broader range of devices.

```javascript
export const clamperExtended = createClamper(
  '390px', // Figma layout width for mobile
  '1512px', // Figma layout width for desktop
  '320px', // extendMinViewport — desired supported width for mobile
  '1920px', // extendMaxViewport — desired supported width for desktop
);
```

--------------------------------

### Stop Linking Local Package

Source: https://github.com/artginzburg/css-clamper/blob/main/docs/maintain.md

Execute this command in your project root to unlink the locally linked css-clamper package.

```sh
pnpm unlink css-clamper
```

--------------------------------

### Define absolute unit values with AbsoluteUnitValue

Source: https://context7.com/artginzburg/css-clamper/llms.txt

TypeScript type for validating CSS absolute units (px or rem).

```typescript
import type { AbsoluteUnitValue } from 'css-clamper';

// Valid AbsoluteUnitValue examples
const pixelValue: AbsoluteUnitValue = '16px';
const remValue: AbsoluteUnitValue = '1.5rem';
const negativeValue: AbsoluteUnitValue = '-24px';

// Type-safe function using AbsoluteUnitValue
function createResponsiveStyle(
  minSize: AbsoluteUnitValue,
  maxSize: AbsoluteUnitValue
): string {
  return clampify(minSize, maxSize);
}

// Usage
const responsivePadding = createResponsiveStyle('1rem', '2rem');
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.