@graphprotocol/gds-css 0.0.1

package/README.md

@@ -0,0 +1,80 @@
+# @graphprotocol/gds-css
+
+Tailwind preset for The Graph Design System that includes design tokens, custom utilities, and custom variants.
+
+> **Note:** You do not need to install this package or follow these instructions in a React project. Instead, use [`@graphprotocol/gds-react`](https://github.com/graphprotocol/gds/tree/main/packages/react), which includes this package as a dependency.
+
+## Installation
+
+```bash
+pnpm add @graphprotocol/gds-css
+```
+
+## Setup
+
+1. [Set up Tailwind CSS](https://tailwindcss.com/docs/installation) in your project if you haven't already (ideally using Vite).
+
+2. Add the following to your main CSS file:
+
+   ```diff
+   - @import 'tailwindcss';
+   + @import '@graphprotocol/gds-css';
+   + @plugin '@graphprotocol/gds-css/tailwind-plugin';
+   ```
+
+   Tailwind is already imported by `@graphprotocol/gds-css`, so you don't need the `@import 'tailwindcss'` line.
+
+3. [Register source paths](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources) relative to your CSS file:
+
+   ```diff
+     @import '@graphprotocol/gds-css';
+     @plugin '@graphprotocol/gds-css/tailwind-plugin';
+   + @source '../src';
+   ```
+
+   `@graphprotocol/gds-css` disables Tailwind's default content scanning as an optimization measure, so you must explicitly register your source paths using `@source` directives. Make sure to include all paths where Tailwind classes are used.
+
+4. That's it, you're ready to use GDS utilities in your markup! Optional recommended steps:
+   - If you use VS Code (or a fork like Cursor), install the [Tailwind CSS IntelliSense extension](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss).
+   - If you use Prettier, install [`prettier-plugin-tailwindcss`](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) and add it to your config.
+
+## What's Included
+
+### Design Tokens
+
+- **Colors**: Primitive color scales like brand, space, starfield, solar, sonja, and galactic, as well as semantic color tokens like `text-default`, `bg-muted`, `border-subtle`, etc.
+- **Border Radii**: Numbers instead of t-shirt sizes (e.g. `rounded-4`)
+- **Breakpoints**: Two custom breakpoints in addition to Tailwind's core ones (`xs` and `2xs`)
+- [**Typography**](https://github.com/graphprotocol/gds/blob/main/packages/css/styles/typography.css): Font families, weights, sizes, line heights, etc.
+- [**See all**](https://github.com/graphprotocol/gds/blob/main/packages/css/styles/theme.css)
+
+### Color Schemes
+
+Even though GDS is dark by default, all semantic color tokens support both dark and light modes using CSS `light-dark()`:
+
+```html
+<div class="bg-canvas text-default">This text is light on a dark background.</div>
+
+<div class="gds-light">
+  <div class="bg-canvas text-default">This text is dark on a light background.</div>
+
+  <div class="gds-dark">
+    <div class="bg-canvas text-default">This text is light on a dark background.</div>
+  </div>
+</div>
+
+<div class="gds-system">
+  <div class="bg-canvas text-default">
+    This text is light on a dark background when the system is dark, and dark on a light background
+    when the system is light.
+  </div>
+</div>
+```
+
+### Tailwind Extensions
+
+TODO: Document custom utilities and variants
+
+## License
+
+MIT

package/dist/component-registry.d.ts

@@ -0,0 +1,90 @@
+import { type DeepRecord } from '@graphprotocol/gds-utils';
+import type { CSSPropDefinition, CSSPropType } from './css-props/types.ts';
+export type CSSPropsConfig = Record<string, CSSPropDefinition>;
+type CSSProp<T extends CSSPropDefinition = CSSPropDefinition> = T & {
+    readonly name: string;
+    readonly kebabName: string;
+    readonly initialValue: CSSPropType<T>;
+};
+type CSSProps<P extends CSSPropsConfig> = {
+    readonly [K in keyof P]: P[K] & CSSProp<P[K]>;
+};
+type VarsConfig = Record<string, VarCSS>;
+type VarCSS = string | DeepRecord<string>;
+export declare class GDSComponent<P extends CSSPropsConfig = CSSPropsConfig, A extends boolean = boolean> {
+    readonly name: string;
+    readonly kebabName: string;
+    readonly className: string;
+    readonly containerName: string | null;
+    readonly addonCompatible: A;
+    readonly cssProps: CSSProps<P>;
+    readonly vars: VarsConfig | undefined;
+    constructor(name: string, config?: {
+        containerName?: string | null | undefined;
+        addonCompatible?: A | undefined;
+        cssProps?: P | undefined;
+        vars?: VarsConfig | undefined;
+    });
+    getCSSPropByName<T extends keyof P & string>(name: T): CSSProps<P>[T];
+    findCSSPropByKebabName(kebabName: string): CSSProps<P>[Extract<keyof P, string>] | undefined;
+}
+/** Type to validate CSS prop definitions. */
+type ValidateCSSPropDefinition<P> = P extends {
+    type: 'values';
+    values: readonly unknown[];
+} ? P['values'] extends readonly [unknown, ...unknown[]] ? P extends {
+    defaultValue?: unknown;
+} ? P['defaultValue'] extends P['values'][number] ? P : never : P : never : P;
+/** Type to validate all CSS props in an object. */
+type ValidateCSSPropsConfig<P extends Record<string, unknown>> = {
+    [K in keyof P]: ValidateCSSPropDefinition<P[K]>;
+};
+/** Type to validate that vars don't conflict with cssProps names. */
+type ValidateVarsConfig<P extends CSSPropsConfig, V extends VarsConfig> = {} extends P ? V : {
+    [K in keyof V]: K extends keyof P ? `Var "${K & string}" conflicts with cssProps. Choose a different name.` : V[K];
+};
+/** Helper function to create a `GDSComponent` instance with proper type inference. */
+export declare function createComponent<const P extends CSSPropsConfig, const V extends VarsConfig, const A extends boolean>(name: string, config?: ConstructorParameters<typeof GDSComponent<P>>[1] & {
+    addonCompatible?: A;
+    cssProps?: ValidateCSSPropsConfig<P>;
+    vars?: ValidateVarsConfig<P, V>;
+}): GDSComponent<P, A>;
+/** Helper type to extract the CSS props config type from a `GDSComponent` instance. */
+export type ComponentCSSPropsConfig<C extends GDSComponent> = C extends GDSComponent<infer P> ? P : never;
+/**
+ * Helper type to extract CSS props types from components created with `createComponent`. Props
+ * without a `defaultValue` are required, while those with a `defaultValue` are optional. Explicitly
+ * includes `undefined` in the type to work with `exactOptionalPropertyTypes`.
+ */
+export type ComponentCSSProps<C extends GDSComponent> = {
+    [K in keyof ComponentCSSPropsConfig<C> as string extends K ? never : 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K] ? never : K]: CSSPropType<ComponentCSSPropsConfig<C>[K]>;
+} & {
+    [K in keyof ComponentCSSPropsConfig<C> as string extends K ? never : 'defaultValue' extends keyof ComponentCSSPropsConfig<C>[K] ? K : never]?: CSSPropType<ComponentCSSPropsConfig<C>[K]> | undefined;
+};
+/**
+ * Combined props type for GDS components. Includes CSS props and, for addon-compatible components,
+ * a hidden prop to mark them as such.
+ */
+export type GDSComponentProps<C extends GDSComponent> = ComponentCSSProps<C> & (C extends GDSComponent<CSSPropsConfig, true> ? {
+    __addonCompatible?: undefined;
+} : {
+    __addonCompatible?: never;
+});
+/** Register multiple components at once. */
+export declare function registerComponents(components: GDSComponent[]): void;
+/**
+ * Get a registered component by its kebab-case name.
+ *
+ * @param kebabName - The kebab-case name of the component.
+ * @returns The component if found, `undefined` otherwise.
+ */
+export declare function getRegisteredComponent(kebabName: string): GDSComponent<CSSPropsConfig, boolean> | undefined;
+/**
+ * Get all registered components.
+ *
+ * @param includeDummy - If true, don't filter out the dummy component.
+ * @returns Array of registered components.
+ */
+export declare function getRegisteredComponents(includeDummy?: boolean): GDSComponent<CSSPropsConfig, boolean>[];
+export {};
+//# sourceMappingURL=component-registry.d.ts.map

package/dist/component-registry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-registry.d.ts","sourceRoot":"","sources":["../src/component-registry.ts"],"names":[],"mappings":"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"}

package/dist/component-registry.js

@@ -0,0 +1,93 @@
+import { objectEntries } from 'ts-extras';
+import { camelToKebab } from '@graphprotocol/gds-utils';
+export class GDSComponent {
+    name;
+    kebabName;
+    className;
+    containerName;
+    addonCompatible;
+    cssProps;
+    vars;
+    constructor(name, config) {
+        this.name = name;
+        this.kebabName = camelToKebab(name);
+        this.className = `gds-${this.kebabName}`;
+        this.containerName = config?.containerName !== undefined ? config.containerName : this.className;
+        this.addonCompatible = (config?.addonCompatible ?? false);
+        this.cssProps = Object.freeze(Object.fromEntries(objectEntries(config?.cssProps ?? {}).map(([propName, prop]) => {
+            const initialValue = prop.defaultValue ??
+                (() => {
+                    switch (prop.type) {
+                        case 'values':
+                            return (prop.values[0] ?? '');
+                        case 'string':
+                            return '';
+                        case 'number':
+                            return 0;
+                        case 'length':
+                            return '0px';
+                        case 'color':
+                            return 'current';
+                    }
+                })();
+            return [
+                propName,
+                {
+                    ...prop,
+                    name: propName,
+                    kebabName: camelToKebab(propName),
+                    initialValue,
+                },
+            ];
+        })));
+        this.vars = config?.vars;
+    }
+    getCSSPropByName(name) {
+        const prop = this.cssProps[name];
+        if (!prop) {
+            throw new Error(`Unknown CSS prop "${name}" for component "${this.name}"`);
+        }
+        return prop;
+    }
+    findCSSPropByKebabName(kebabName) {
+        for (const key in this.cssProps) {
+            if (this.cssProps[key].kebabName === kebabName) {
+                return this.cssProps[key];
+            }
+        }
+        return undefined;
+    }
+}
+/** Helper function to create a `GDSComponent` instance with proper type inference. */
+export function createComponent(name, config) {
+    return new GDSComponent(name, config);
+}
+const componentRegistry = new Map();
+/** Register multiple components at once. */
+export function registerComponents(components) {
+    for (const component of components) {
+        componentRegistry.set(component.kebabName, component);
+    }
+}
+/**
+ * Get a registered component by its kebab-case name.
+ *
+ * @param kebabName - The kebab-case name of the component.
+ * @returns The component if found, `undefined` otherwise.
+ */
+export function getRegisteredComponent(kebabName) {
+    return componentRegistry.get(kebabName);
+}
+/**
+ * Get all registered components.
+ *
+ * @param includeDummy - If true, don't filter out the dummy component.
+ * @returns Array of registered components.
+ */
+export function getRegisteredComponents(includeDummy = false) {
+    const components = [...componentRegistry.values()];
+    return includeDummy
+        ? components
+        : components.filter((component) => component.kebabName !== 'dummy');
+}
+//# sourceMappingURL=component-registry.js.map

package/dist/component-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-registry.js","sourceRoot":"","sources":["../src/component-registry.ts"],"names":[],"mappings":"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"}

package/dist/css-props/getCSSPropRawValue.d.ts

@@ -0,0 +1,4 @@
+import type { CSSPropDefinition, CSSPropType } from './types.ts';
+/** Converts a CSS prop value to its raw string representation for CSS custom properties. */
+export declare function getCSSPropRawValue<P extends CSSPropDefinition>(prop: P, value: CSSPropType<P>): string;
+//# sourceMappingURL=getCSSPropRawValue.d.ts.map

package/dist/css-props/getCSSPropRawValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCSSPropRawValue.d.ts","sourceRoot":"","sources":["../../src/css-props/getCSSPropRawValue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,iBAAiB,EAEjB,WAAW,EAEZ,MAAM,YAAY,CAAA;AAEnB,4FAA4F;AAC5F,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,iBAAiB,EAC5D,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GACpB,MAAM,CAoCR"}

package/dist/css-props/getCSSPropRawValue.js

@@ -0,0 +1,41 @@
+import cssesc from 'cssesc';
+import { twToRem } from "../utils/index.js";
+/** Converts a CSS prop value to its raw string representation for CSS custom properties. */
+export function getCSSPropRawValue(prop, value) {
+    switch (prop.type) {
+        case 'values': {
+            const valuesValue = value;
+            // Prefix the value with `gds-` because cssnano (which Next.js uses) incorrectly minifies `--gds-prop-variant: white` to `--gds-prop-variant: #fff`
+            return `gds-${valuesValue}`;
+        }
+        case 'string': {
+            return `'${cssesc(String(value))}'`;
+        }
+        case 'number': {
+            return String(value);
+        }
+        case 'length': {
+            const lengthValue = value;
+            if (typeof lengthValue === 'number') {
+                return `${twToRem(lengthValue)}rem`;
+            }
+            else {
+                return lengthValue;
+            }
+        }
+        case 'color': {
+            const colorValue = value;
+            const [color, opacity] = colorValue.split('/');
+            const colorVariable = color === 'current'
+                ? 'currentcolor'
+                : color === 'transparent'
+                    ? 'transparent'
+                    : `var(--color-${color})`;
+            if (opacity && opacity !== '100') {
+                return `color-mix(in oklab, ${colorVariable} ${opacity}%, transparent)`;
+            }
+            return colorVariable;
+        }
+    }
+}
+//# sourceMappingURL=getCSSPropRawValue.js.map

package/dist/css-props/getCSSPropRawValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCSSPropRawValue.js","sourceRoot":"","sources":["../../src/css-props/getCSSPropRawValue.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAA;AAE3B,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAS3C,4FAA4F;AAC5F,MAAM,UAAU,kBAAkB,CAChC,IAAO,EACP,KAAqB;IAErB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,MAAM,WAAW,GAAG,KAAqB,CAAA;YACzC,mJAAmJ;YACnJ,OAAO,OAAO,WAAW,EAAE,CAAA;QAC7B,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAA;QACrC,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO,MAAM,CAAC,KAAK,CAAC,CAAA;QACtB,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,MAAM,WAAW,GAAG,KAAsB,CAAA;YAC1C,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE,CAAC;gBACpC,OAAO,GAAG,OAAO,CAAC,WAAW,CAAC,KAAK,CAAA;YACrC,CAAC;iBAAM,CAAC;gBACN,OAAO,WAAW,CAAA;YACpB,CAAC;QACH,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,MAAM,UAAU,GAAG,KAAqB,CAAA;YACxC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;YAC9C,MAAM,aAAa,GACjB,KAAK,KAAK,SAAS;gBACjB,CAAC,CAAC,cAAc;gBAChB,CAAC,CAAC,KAAK,KAAK,aAAa;oBACvB,CAAC,CAAC,aAAa;oBACf,CAAC,CAAC,eAAe,KAAK,GAAG,CAAA;YAC/B,IAAI,OAAO,IAAI,OAAO,KAAK,KAAK,EAAE,CAAC;gBACjC,OAAO,uBAAuB,aAAa,IAAI,OAAO,iBAAiB,CAAA;YACzE,CAAC;YACD,OAAO,aAAa,CAAA;QACtB,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/css-props/index.d.ts

@@ -0,0 +1,5 @@
+export * from './types.ts';
+export { getCSSPropRawValue } from './getCSSPropRawValue.ts';
+export { parseCSSPropValue } from './parseCSSPropValue.ts';
+export { registerCSSProps } from './registerCSSProps.ts';
+//# sourceMappingURL=index.d.ts.map

package/dist/css-props/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/css-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/css-props/index.js

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export { getCSSPropRawValue } from "./getCSSPropRawValue.js";
+export { parseCSSPropValue } from "./parseCSSPropValue.js";
+export { registerCSSProps } from "./registerCSSProps.js";
+//# sourceMappingURL=index.js.map

package/dist/css-props/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/css-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/css-props/parseCSSPropValue.d.ts

@@ -0,0 +1,7 @@
+import type { CSSPropDefinition, CSSPropType } from './types.ts';
+/**
+ * Parses a raw CSS prop value back to its typed representation. This is the inverse of
+ * `getCSSPropRawValue`.
+ */
+export declare function parseCSSPropValue<P extends CSSPropDefinition>(prop: P, rawValue: string): CSSPropType<P>;
+//# sourceMappingURL=parseCSSPropValue.d.ts.map

package/dist/css-props/parseCSSPropValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseCSSPropValue.d.ts","sourceRoot":"","sources":["../../src/css-props/parseCSSPropValue.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,iBAAiB,EAIjB,WAAW,EAEZ,MAAM,YAAY,CAAA;AAEnB;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,iBAAiB,EAC3D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,MAAM,GACf,WAAW,CAAC,CAAC,CAAC,CA4DhB"}

package/dist/css-props/parseCSSPropValue.js

@@ -0,0 +1,70 @@
+import { parseNumber } from '@graphprotocol/gds-utils';
+import { cssUnescape, pxToTw } from "../utils/index.js";
+/**
+ * Parses a raw CSS prop value back to its typed representation. This is the inverse of
+ * `getCSSPropRawValue`.
+ */
+export function parseCSSPropValue(prop, rawValue) {
+    switch (prop.type) {
+        case 'values': {
+            // Remove the `gds-` prefix added by `getCSSPropRawValue`
+            const value = rawValue.replace(/^(gds-)?/, '');
+            // Check if it looks like a boolean
+            if (value === 'true')
+                return true;
+            if (value === 'false')
+                return false;
+            // Check if it looks like a number
+            const numberValue = parseNumber(value);
+            if (numberValue !== null) {
+                return numberValue;
+            }
+            // Otherwise it's a string
+            return value;
+        }
+        case 'string': {
+            return cssUnescape(rawValue.slice(1, -1));
+        }
+        case 'number': {
+            const numberValue = parseNumber(rawValue);
+            return (numberValue ?? 0);
+        }
+        case 'length': {
+            // Check if it's in pixels and convert to Tailwind units
+            if (/^\d+(?:\.\d+)?px$/.test(rawValue)) {
+                const numberValue = parseNumber(rawValue.slice(0, -2)); // Remove 'px'
+                return pxToTw(numberValue ?? 0);
+            }
+            // Otherwise keep as-is (e.g., "1rem", "100%")
+            return rawValue;
+        }
+        case 'color': {
+            if (rawValue === 'currentcolor') {
+                return 'current';
+            }
+            if (rawValue === 'transparent') {
+                return 'transparent';
+            }
+            // Check for `color-mix()` (color with opacity)
+            const colorMixMatch = rawValue.match(/^color-mix\(in oklab, (.+) (\d+)%, transparent\)$/);
+            if (colorMixMatch) {
+                const [, colorVar, opacity] = colorMixMatch;
+                if (colorVar && opacity) {
+                    const varMatch = colorVar.match(/^var\(--color-(.+)\)$/);
+                    if (varMatch && varMatch[1]) {
+                        const color = varMatch[1];
+                        return `${color}/${opacity}`;
+                    }
+                }
+            }
+            // Check for simple color variable
+            const varMatch = rawValue.match(/^var\(--color-(.+)\)$/);
+            if (varMatch && varMatch[1]) {
+                return varMatch[1];
+            }
+            // Fallback - shouldn't normally happen
+            return rawValue;
+        }
+    }
+}
+//# sourceMappingURL=parseCSSPropValue.js.map

package/dist/css-props/parseCSSPropValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseCSSPropValue.js","sourceRoot":"","sources":["../../src/css-props/parseCSSPropValue.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAEtD,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAWvD;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAC/B,IAAO,EACP,QAAgB;IAEhB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,yDAAyD;YACzD,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAA;YAC9C,mCAAmC;YACnC,IAAI,KAAK,KAAK,MAAM;gBAAE,OAAO,IAA6C,CAAA;YAC1E,IAAI,KAAK,KAAK,OAAO;gBAAE,OAAO,KAA8C,CAAA;YAC5E,kCAAkC;YAClC,MAAM,WAAW,GAAG,WAAW,CAAC,KAAK,CAAC,CAAA;YACtC,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;gBACzB,OAAO,WAAoD,CAAA;YAC7D,CAAC;YACD,0BAA0B;YAC1B,OAAO,KAA8C,CAAA;QACvD,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,OAAO,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAA2C,CAAA;QACrF,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAA;YACzC,OAAO,CAAC,WAAW,IAAI,CAAC,CAA2C,CAAA;QACrE,CAAC;QACD,KAAK,QAAQ,CAAC,CAAC,CAAC;YACd,wDAAwD;YACxD,IAAI,mBAAmB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvC,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA,CAAC,cAAc;gBACrE,OAAO,MAAM,CAAC,WAAW,IAAI,CAAC,CAA2C,CAAA;YAC3E,CAAC;YACD,8CAA8C;YAC9C,OAAO,QAA2C,CAAA;QACpD,CAAC;QACD,KAAK,OAAO,CAAC,CAAC,CAAC;YACb,IAAI,QAAQ,KAAK,cAAc,EAAE,CAAC;gBAChC,OAAO,SAAkD,CAAA;YAC3D,CAAC;YACD,IAAI,QAAQ,KAAK,aAAa,EAAE,CAAC;gBAC/B,OAAO,aAAsD,CAAA;YAC/D,CAAC;YACD,+CAA+C;YAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC,KAAK,CAAC,mDAAmD,CAAC,CAAA;YACzF,IAAI,aAAa,EAAE,CAAC;gBAClB,MAAM,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,aAAa,CAAA;gBAC3C,IAAI,QAAQ,IAAI,OAAO,EAAE,CAAC;oBACxB,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;oBACxD,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;wBAC5B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;wBACzB,OAAO,GAAG,KAAK,IAAI,OAAO,EAAoC,CAAA;oBAChE,CAAC;gBACH,CAAC;YACH,CAAC;YACD,kCAAkC;YAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAA;YACxD,IAAI,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC5B,OAAO,QAAQ,CAAC,CAAC,CAAmC,CAAA;YACtD,CAAC;YACD,uCAAuC;YACvC,OAAO,QAA0B,CAAA;QACnC,CAAC;IACH,CAAC;AACH,CAAC"}

package/dist/css-props/registerCSSProps.d.ts

@@ -0,0 +1,7 @@
+import type { PluginAPI } from '../types.ts';
+/**
+ * Registers CSS Props functionality in the Tailwind plugin. This includes custom properties,
+ * utilities, and variants for prop-based styling.
+ */
+export declare function registerCSSProps(api: PluginAPI): void;
+//# sourceMappingURL=registerCSSProps.d.ts.map

package/dist/css-props/registerCSSProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registerCSSProps.d.ts","sourceRoot":"","sources":["../../src/css-props/registerCSSProps.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAI5C;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,SAAS,QAgQ9C"}