@llui/components 0.0.2 → 0.0.4

package/dist/styles/theme.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Theme token types — documents the CSS custom properties available
+ * in theme.css for TypeScript consumers.
+ *
+ * Override any token via Tailwind 4 `@theme` in your CSS:
+ * ```css
+ * @theme {
+ *   --color-primary: #8b5cf6;
+ *   --radius-lg: 1rem;
+ * }
+ * ```
+ */
+export interface ThemeTokens {
+    '--color-surface': string;
+    '--color-surface-muted': string;
+    '--color-surface-hover': string;
+    '--color-surface-active': string;
+    '--color-border': string;
+    '--color-border-hover': string;
+    '--color-border-focus': string;
+    '--color-text': string;
+    '--color-text-muted': string;
+    '--color-text-inverted': string;
+    '--color-primary': string;
+    '--color-primary-hover': string;
+    '--color-primary-active': string;
+    '--color-destructive': string;
+    '--color-destructive-hover': string;
+    '--radius-sm': string;
+    '--radius-md': string;
+    '--radius-lg': string;
+    '--radius-xl': string;
+    '--space-1': string;
+    '--space-2': string;
+    '--space-3': string;
+    '--space-4': string;
+    '--space-6': string;
+    '--space-8': string;
+    '--shadow-sm': string;
+    '--shadow-md': string;
+    '--shadow-lg': string;
+    '--duration-fast': string;
+    '--duration-normal': string;
+    '--z-popover': string;
+    '--z-dialog': string;
+    '--z-tooltip': string;
+}
+export type ThemeToken = keyof ThemeTokens;
+//# sourceMappingURL=theme.d.ts.map

package/dist/styles/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/styles/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,WAAW;IAE1B,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,uBAAuB,EAAE,MAAM,CAAA;IAC/B,wBAAwB,EAAE,MAAM,CAAA;IAGhC,gBAAgB,EAAE,MAAM,CAAA;IACxB,sBAAsB,EAAE,MAAM,CAAA;IAC9B,sBAAsB,EAAE,MAAM,CAAA;IAG9B,cAAc,EAAE,MAAM,CAAA;IACtB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,uBAAuB,EAAE,MAAM,CAAA;IAG/B,iBAAiB,EAAE,MAAM,CAAA;IACzB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,wBAAwB,EAAE,MAAM,CAAA;IAGhC,qBAAqB,EAAE,MAAM,CAAA;IAC7B,2BAA2B,EAAE,MAAM,CAAA;IAGnC,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IAGrB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IAGnB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IACrB,aAAa,EAAE,MAAM,CAAA;IAGrB,iBAAiB,EAAE,MAAM,CAAA;IACzB,mBAAmB,EAAE,MAAM,CAAA;IAG3B,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,aAAa,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,MAAM,UAAU,GAAG,MAAM,WAAW,CAAA"}

package/dist/styles/theme.js

@@ -0,0 +1,13 @@
+/**
+ * Theme token types — documents the CSS custom properties available
+ * in theme.css for TypeScript consumers.
+ *
+ * Override any token via Tailwind 4 `@theme` in your CSS:
+ * ```css
+ * @theme {
+ *   --color-primary: #8b5cf6;
+ *   --radius-lg: 1rem;
+ * }
+ * ```
+ */
+export {};

package/dist/styles/utils/cx.d.ts

@@ -0,0 +1,4 @@
+export type ClassValue = string | false | null | undefined;
+/** Concatenate class strings, filtering falsy values. */
+export declare function cx(...classes: ClassValue[]): string;
+//# sourceMappingURL=cx.d.ts.map

package/dist/styles/utils/cx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cx.d.ts","sourceRoot":"","sources":["../../../src/styles/utils/cx.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAA;AAE1D,yDAAyD;AACzD,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,UAAU,EAAE,GAAG,MAAM,CASnD"}

package/dist/styles/utils/cx.js

@@ -0,0 +1,12 @@
+/** Concatenate class strings, filtering falsy values. */
+export function cx(...classes) {
+    let result = '';
+    for (const c of classes) {
+        if (c) {
+            if (result)
+                result += ' ';
+            result += c;
+        }
+    }
+    return result;
+}

package/dist/styles/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { cx, type ClassValue } from './cx';
+export { createVariants, type VariantConfig, type VariantProps, type VariantRecord, } from './variants';
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAC1C,OAAO,EACL,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,aAAa,GACnB,MAAM,YAAY,CAAA"}

package/dist/styles/utils/index.js

@@ -0,0 +1,2 @@
+export { cx } from './cx';
+export { createVariants, } from './variants';

package/dist/styles/utils/variants.d.ts

@@ -0,0 +1,18 @@
+export type VariantRecord = Record<string, Record<string, string>>;
+export interface VariantConfig<V extends VariantRecord> {
+    base: string;
+    variants: V;
+    defaultVariants?: {
+        [K in keyof V]?: keyof V[K];
+    };
+    compoundVariants?: Array<{
+        [K in keyof V]?: keyof V[K];
+    } & {
+        class: string;
+    }>;
+}
+export type VariantProps<V extends VariantRecord> = {
+    [K in keyof V]?: keyof V[K];
+};
+export declare function createVariants<V extends VariantRecord>(config: VariantConfig<V>): (props?: VariantProps<V>) => string;
+//# sourceMappingURL=variants.d.ts.map

package/dist/styles/utils/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../../src/styles/utils/variants.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;AAElE,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,aAAa;IACpD,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,CAAA;IACX,eAAe,CAAC,EAAE;SAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;KAAE,CAAA;IACjD,gBAAgB,CAAC,EAAE,KAAK,CAAC;SAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;KAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC9E;AAED,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,aAAa,IAAI;KACjD,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CAC5B,CAAA;AAED,wBAAgB,cAAc,CAAC,CAAC,SAAS,aAAa,EACpD,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,GACvB,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,MAAM,CA0BrC"}

package/dist/styles/utils/variants.js

@@ -0,0 +1,25 @@
+import { cx } from './cx';
+export function createVariants(config) {
+    return (props = {}) => {
+        const resolved = {};
+        for (const key of Object.keys(config.variants)) {
+            resolved[key] =
+                props[key] ?? config.defaultVariants?.[key];
+        }
+        const parts = [config.base];
+        for (const [key, value] of Object.entries(resolved)) {
+            if (value != null && config.variants[key]?.[value]) {
+                parts.push(config.variants[key][value]);
+            }
+        }
+        if (config.compoundVariants) {
+            for (const compound of config.compoundVariants) {
+                const { class: cls, ...conditions } = compound;
+                const match = Object.entries(conditions).every(([k, v]) => resolved[k] === v);
+                if (match)
+                    parts.push(cls);
+            }
+        }
+        return cx(...parts);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@llui/components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -236,23 +236,244 @@
     "./patterns/confirm-dialog": {
       "import": "./dist/patterns/confirm-dialog.js",
       "types": "./dist/patterns/confirm-dialog.d.ts"
+    },
+    "./styles/theme.css": "./dist/styles/theme.css",
+    "./styles/theme-dark.css": "./dist/styles/theme-dark.css",
+    "./styles": {
+      "import": "./dist/styles/index.js",
+      "types": "./dist/styles/index.d.ts"
+    },
+    "./styles/accordion": {
+      "import": "./dist/styles/classes/accordion.js",
+      "types": "./dist/styles/classes/accordion.d.ts"
+    },
+    "./styles/switch": {
+      "import": "./dist/styles/classes/switch.js",
+      "types": "./dist/styles/classes/switch.d.ts"
+    },
+    "./styles/checkbox": {
+      "import": "./dist/styles/classes/checkbox.js",
+      "types": "./dist/styles/classes/checkbox.d.ts"
+    },
+    "./styles/dialog": {
+      "import": "./dist/styles/classes/dialog.js",
+      "types": "./dist/styles/classes/dialog.d.ts"
+    },
+    "./styles/tabs": {
+      "import": "./dist/styles/classes/tabs.js",
+      "types": "./dist/styles/classes/tabs.d.ts"
+    },
+    "./styles/toggle": {
+      "import": "./dist/styles/classes/toggle.js",
+      "types": "./dist/styles/classes/toggle.d.ts"
+    },
+    "./styles/radio-group": {
+      "import": "./dist/styles/classes/radio-group.js",
+      "types": "./dist/styles/classes/radio-group.d.ts"
+    },
+    "./styles/angle-slider": {
+      "import": "./dist/styles/classes/angle-slider.js",
+      "types": "./dist/styles/classes/angle-slider.d.ts"
+    },
+    "./styles/async-list": {
+      "import": "./dist/styles/classes/async-list.js",
+      "types": "./dist/styles/classes/async-list.d.ts"
+    },
+    "./styles/avatar": {
+      "import": "./dist/styles/classes/avatar.js",
+      "types": "./dist/styles/classes/avatar.d.ts"
+    },
+    "./styles/carousel": {
+      "import": "./dist/styles/classes/carousel.js",
+      "types": "./dist/styles/classes/carousel.d.ts"
+    },
+    "./styles/cascade-select": {
+      "import": "./dist/styles/classes/cascade-select.js",
+      "types": "./dist/styles/classes/cascade-select.d.ts"
+    },
+    "./styles/clipboard": {
+      "import": "./dist/styles/classes/clipboard.js",
+      "types": "./dist/styles/classes/clipboard.d.ts"
+    },
+    "./styles/collapsible": {
+      "import": "./dist/styles/classes/collapsible.js",
+      "types": "./dist/styles/classes/collapsible.d.ts"
+    },
+    "./styles/color-picker": {
+      "import": "./dist/styles/classes/color-picker.js",
+      "types": "./dist/styles/classes/color-picker.d.ts"
+    },
+    "./styles/combobox": {
+      "import": "./dist/styles/classes/combobox.js",
+      "types": "./dist/styles/classes/combobox.d.ts"
+    },
+    "./styles/context-menu": {
+      "import": "./dist/styles/classes/context-menu.js",
+      "types": "./dist/styles/classes/context-menu.d.ts"
+    },
+    "./styles/date-input": {
+      "import": "./dist/styles/classes/date-input.js",
+      "types": "./dist/styles/classes/date-input.d.ts"
+    },
+    "./styles/date-picker": {
+      "import": "./dist/styles/classes/date-picker.js",
+      "types": "./dist/styles/classes/date-picker.d.ts"
+    },
+    "./styles/drawer": {
+      "import": "./dist/styles/classes/drawer.js",
+      "types": "./dist/styles/classes/drawer.d.ts"
+    },
+    "./styles/editable": {
+      "import": "./dist/styles/classes/editable.js",
+      "types": "./dist/styles/classes/editable.d.ts"
+    },
+    "./styles/file-upload": {
+      "import": "./dist/styles/classes/file-upload.js",
+      "types": "./dist/styles/classes/file-upload.d.ts"
+    },
+    "./styles/floating-panel": {
+      "import": "./dist/styles/classes/floating-panel.js",
+      "types": "./dist/styles/classes/floating-panel.d.ts"
+    },
+    "./styles/hover-card": {
+      "import": "./dist/styles/classes/hover-card.js",
+      "types": "./dist/styles/classes/hover-card.d.ts"
+    },
+    "./styles/image-cropper": {
+      "import": "./dist/styles/classes/image-cropper.js",
+      "types": "./dist/styles/classes/image-cropper.d.ts"
+    },
+    "./styles/listbox": {
+      "import": "./dist/styles/classes/listbox.js",
+      "types": "./dist/styles/classes/listbox.d.ts"
+    },
+    "./styles/marquee": {
+      "import": "./dist/styles/classes/marquee.js",
+      "types": "./dist/styles/classes/marquee.d.ts"
+    },
+    "./styles/menu": {
+      "import": "./dist/styles/classes/menu.js",
+      "types": "./dist/styles/classes/menu.d.ts"
+    },
+    "./styles/navigation-menu": {
+      "import": "./dist/styles/classes/navigation-menu.js",
+      "types": "./dist/styles/classes/navigation-menu.d.ts"
+    },
+    "./styles/number-input": {
+      "import": "./dist/styles/classes/number-input.js",
+      "types": "./dist/styles/classes/number-input.d.ts"
+    },
+    "./styles/pagination": {
+      "import": "./dist/styles/classes/pagination.js",
+      "types": "./dist/styles/classes/pagination.d.ts"
+    },
+    "./styles/password-input": {
+      "import": "./dist/styles/classes/password-input.js",
+      "types": "./dist/styles/classes/password-input.d.ts"
+    },
+    "./styles/pin-input": {
+      "import": "./dist/styles/classes/pin-input.js",
+      "types": "./dist/styles/classes/pin-input.d.ts"
+    },
+    "./styles/popover": {
+      "import": "./dist/styles/classes/popover.js",
+      "types": "./dist/styles/classes/popover.d.ts"
+    },
+    "./styles/presence": {
+      "import": "./dist/styles/classes/presence.js",
+      "types": "./dist/styles/classes/presence.d.ts"
+    },
+    "./styles/progress": {
+      "import": "./dist/styles/classes/progress.js",
+      "types": "./dist/styles/classes/progress.d.ts"
+    },
+    "./styles/qr-code": {
+      "import": "./dist/styles/classes/qr-code.js",
+      "types": "./dist/styles/classes/qr-code.d.ts"
+    },
+    "./styles/rating-group": {
+      "import": "./dist/styles/classes/rating-group.js",
+      "types": "./dist/styles/classes/rating-group.d.ts"
+    },
+    "./styles/scroll-area": {
+      "import": "./dist/styles/classes/scroll-area.js",
+      "types": "./dist/styles/classes/scroll-area.d.ts"
+    },
+    "./styles/select": {
+      "import": "./dist/styles/classes/select.js",
+      "types": "./dist/styles/classes/select.d.ts"
+    },
+    "./styles/signature-pad": {
+      "import": "./dist/styles/classes/signature-pad.js",
+      "types": "./dist/styles/classes/signature-pad.d.ts"
+    },
+    "./styles/slider": {
+      "import": "./dist/styles/classes/slider.js",
+      "types": "./dist/styles/classes/slider.d.ts"
+    },
+    "./styles/splitter": {
+      "import": "./dist/styles/classes/splitter.js",
+      "types": "./dist/styles/classes/splitter.d.ts"
+    },
+    "./styles/steps": {
+      "import": "./dist/styles/classes/steps.js",
+      "types": "./dist/styles/classes/steps.d.ts"
+    },
+    "./styles/tags-input": {
+      "import": "./dist/styles/classes/tags-input.js",
+      "types": "./dist/styles/classes/tags-input.d.ts"
+    },
+    "./styles/time-picker": {
+      "import": "./dist/styles/classes/time-picker.js",
+      "types": "./dist/styles/classes/time-picker.d.ts"
+    },
+    "./styles/timer": {
+      "import": "./dist/styles/classes/timer.js",
+      "types": "./dist/styles/classes/timer.d.ts"
+    },
+    "./styles/toast": {
+      "import": "./dist/styles/classes/toast.js",
+      "types": "./dist/styles/classes/toast.d.ts"
+    },
+    "./styles/toc": {
+      "import": "./dist/styles/classes/toc.js",
+      "types": "./dist/styles/classes/toc.d.ts"
+    },
+    "./styles/toggle-group": {
+      "import": "./dist/styles/classes/toggle-group.js",
+      "types": "./dist/styles/classes/toggle-group.d.ts"
+    },
+    "./styles/tooltip": {
+      "import": "./dist/styles/classes/tooltip.js",
+      "types": "./dist/styles/classes/tooltip.d.ts"
+    },
+    "./styles/tour": {
+      "import": "./dist/styles/classes/tour.js",
+      "types": "./dist/styles/classes/tour.d.ts"
+    },
+    "./styles/tree-view": {
+      "import": "./dist/styles/classes/tree-view.js",
+      "types": "./dist/styles/classes/tree-view.d.ts"
     }
   },
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
+    "build": "tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/theme.css src/styles/theme-dark.css dist/styles/",
     "check": "tsc --noEmit -p tsconfig.check.json",
     "lint": "eslint src",
     "test": "vitest run"
   },
   "peerDependencies": {
-    "@llui/dom": "^0.0.2"
+    "@llui/dom": "^0.0.3"
   },
   "devDependencies": {
     "@llui/dom": "workspace:*",
     "typescript": "^6.0.0",
     "vitest": "^4.1.2"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/styles/theme.css",
+    "./dist/styles/theme-dark.css"
+  ],
   "dependencies": {
     "@floating-ui/dom": "^1.7.6"
   },