@quadrokit/ui 0.1.0 → 0.2.2

package/README.md

@@ -9,7 +9,7 @@ Shared **React** UI for QuadroKit templates: Tailwind **preset**, global **CSS v
 
    ```ts
    import preset from '@quadrokit/ui/tailwind-preset';
-   export default { presets: [preset], content: [/* your files */, '../../node_modules/@quadrokit/ui/src/**/*.{ts,tsx}'] };
+   export default { presets: [preset], content: [/* your files */, '../../node_modules/@quadrokit/ui/dist/**/*.{mjs,js,ts,tsx}'] };
    ```
 
 3. Import styles once (e.g. in `main.tsx`):

package/dist/components/button.d.ts

@@ -0,0 +1,12 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ButtonHTMLAttributes } from 'react';
+declare const variants: (props?: ({
+    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof variants> {
+    asChild?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/components/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/components/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAIjD,QAAA,MAAM,QAAQ;;;8EAwBb,CAAA;AAED,MAAM,WAAW,WACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,YAAY,CAAC,OAAO,QAAQ,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,MAAM,2GAKlB,CAAA"}

package/dist/components/button.mjs

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { forwardRef } from 'react';
+import { cn } from '../lib/utils.mjs';
+const variants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+            ghost: 'hover:bg-accent hover:text-accent-foreground',
+            destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2',
+            sm: 'h-8 rounded-md px-3 text-xs',
+            lg: 'h-10 rounded-md px-8',
+            icon: 'h-9 w-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+    },
+});
+export const Button = forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return _jsx(Comp, { className: cn(variants({ variant, size, className })), ref: ref, ...props });
+});
+Button.displayName = 'Button';

package/dist/components/card.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from 'react';
+export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CardTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const CardDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const CardContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=card.d.ts.map

package/dist/components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C,eAAO,MAAM,IAAI,2HAWhB,CAAA;AAGD,eAAO,MAAM,UAAU,2HAItB,CAAA;AAGD,eAAO,MAAM,SAAS,mIAQrB,CAAA;AAGD,eAAO,MAAM,eAAe,uIAK1B,CAAA;AAGF,eAAO,MAAM,WAAW,2HAIvB,CAAA"}

package/dist/components/card.mjs

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../lib/utils.mjs';
+export const Card = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('rounded-xl border border-border bg-card text-card-foreground shadow-sm', className), ...props })));
+Card.displayName = 'Card';
+export const CardHeader = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('flex flex-col space-y-1.5 p-6', className), ...props })));
+CardHeader.displayName = 'CardHeader';
+export const CardTitle = forwardRef(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn('font-semibold leading-none tracking-tight', className), ...props })));
+CardTitle.displayName = 'CardTitle';
+export const CardDescription = forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+CardDescription.displayName = 'CardDescription';
+export const CardContent = forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn('p-6 pt-0', className), ...props })));
+CardContent.displayName = 'CardContent';

package/dist/components/input.d.ts

@@ -0,0 +1,5 @@
+import type { InputHTMLAttributes } from 'react';
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../src/components/input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAIhD,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;CAAG;AAE5E,eAAO,MAAM,KAAK,yGAcjB,CAAA"}

package/dist/components/input.mjs

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../lib/utils.mjs';
+export const Input = forwardRef(({ className, type, ...props }, ref) => {
+    return (_jsx("input", { type: type, className: cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', className), ref: ref, ...props }));
+});
+Input.displayName = 'Input';

package/dist/components/label.d.ts

@@ -0,0 +1,3 @@
+import type { LabelHTMLAttributes } from 'react';
+export declare const Label: import("react").ForwardRefExoticComponent<LabelHTMLAttributes<HTMLLabelElement> & import("react").RefAttributes<HTMLLabelElement>>;
+//# sourceMappingURL=label.d.ts.map

package/dist/components/label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/components/label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAIhD,eAAO,MAAM,KAAK,oIAYjB,CAAA"}

package/dist/components/label.mjs

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { cn } from '../lib/utils.mjs';
+export const Label = forwardRef(({ className, ...props }, ref) => (
+// biome-ignore lint/a11y/noLabelWithoutControl: shadcn-style primitive; use htmlFor at call sites
+_jsx("label", { ref: ref, className: cn('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className), ...props })));
+Label.displayName = 'Label';

package/dist/components/theme-toolbar.d.ts

@@ -0,0 +1,2 @@
+export declare function ThemeToolbar(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=theme-toolbar.d.ts.map

package/dist/components/theme-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toolbar.d.ts","sourceRoot":"","sources":["../../src/components/theme-toolbar.tsx"],"names":[],"mappings":"AAIA,wBAAgB,YAAY,4CAyC3B"}

package/dist/components/theme-toolbar.mjs

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTheme } from '../theme/theme-provider.mjs';
+import { quadroThemes, themeLabels } from '../theme/themes.mjs';
+import { Button } from './button.mjs';
+export function ThemeToolbar() {
+    const { preset, setPreset, colorMode, setColorMode, resolvedMode } = useTheme();
+    return (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card/60 p-2 text-sm backdrop-blur", children: [_jsx("span", { className: "text-muted-foreground px-1", children: "Theme" }), quadroThemes.map((t) => (_jsx(Button, { type: "button", size: "sm", variant: preset === t ? 'default' : 'outline', onClick: () => setPreset(t), children: themeLabels[t] }, t))), _jsx("span", { className: "mx-2 hidden h-4 w-px bg-border sm:inline-block" }), _jsx("span", { className: "text-muted-foreground px-1", children: "Mode" }), [
+                ['light', 'Light'],
+                ['dark', 'Dark'],
+                ['system', 'System'],
+            ].map(([m, label]) => (_jsx(Button, { type: "button", size: "sm", variant: colorMode === m ? 'default' : 'ghost', onClick: () => setColorMode(m), children: label }, m))), _jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: resolvedMode === 'dark' ? 'Dark' : 'Light' })] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { Button, type ButtonProps } from './components/button.js';
+export { Card, CardContent, CardDescription, CardHeader, CardTitle, } from './components/card.js';
+export { Input, type InputProps } from './components/input.js';
+export { Label } from './components/label.js';
+export { ThemeToolbar } from './components/theme-toolbar.js';
+export { cn } from './lib/utils.js';
+export { type ColorMode, ThemeProvider, useTheme, } from './theme/theme-provider.js';
+export { type QuadroThemePreset, quadroThemes, themeLabels, } from './theme/themes.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,EACL,IAAI,EACJ,WAAW,EACX,eAAe,EACf,UAAU,EACV,SAAS,GACV,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AAC5D,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAA;AACnC,OAAO,EACL,KAAK,SAAS,EACd,aAAa,EACb,QAAQ,GACT,MAAM,2BAA2B,CAAA;AAClC,OAAO,EACL,KAAK,iBAAiB,EACtB,YAAY,EACZ,WAAW,GACZ,MAAM,mBAAmB,CAAA"}

package/dist/index.mjs

@@ -0,0 +1,8 @@
+export { Button } from './components/button.mjs';
+export { Card, CardContent, CardDescription, CardHeader, CardTitle, } from './components/card.mjs';
+export { Input } from './components/input.mjs';
+export { Label } from './components/label.mjs';
+export { ThemeToolbar } from './components/theme-toolbar.mjs';
+export { cn } from './lib/utils.mjs';
+export { ThemeProvider, useTheme, } from './theme/theme-provider.mjs';
+export { quadroThemes, themeLabels, } from './theme/themes.mjs';

package/dist/lib/utils.d.ts

@@ -0,0 +1,3 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/utils.mjs

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/tailwind-preset.d.ts

@@ -0,0 +1,4 @@
+import type { Config } from 'tailwindcss';
+declare const preset: Partial<Config>;
+export default preset;
+//# sourceMappingURL=tailwind-preset.d.ts.map

package/dist/tailwind-preset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-preset.d.ts","sourceRoot":"","sources":["../src/tailwind-preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA8C3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind-preset.mjs

@@ -0,0 +1,48 @@
+const preset = {
+    darkMode: 'class',
+    theme: {
+        extend: {
+            borderRadius: {
+                lg: 'var(--radius)',
+                md: 'calc(var(--radius) - 2px)',
+                sm: 'calc(var(--radius) - 4px)',
+            },
+            colors: {
+                border: 'hsl(var(--border) / <alpha-value>)',
+                input: 'hsl(var(--input) / <alpha-value>)',
+                ring: 'hsl(var(--ring) / <alpha-value>)',
+                background: 'hsl(var(--background) / <alpha-value>)',
+                foreground: 'hsl(var(--foreground) / <alpha-value>)',
+                primary: {
+                    DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
+                    foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
+                },
+                secondary: {
+                    DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
+                    foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
+                },
+                destructive: {
+                    DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
+                    foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
+                },
+                muted: {
+                    DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+                    foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
+                },
+                accent: {
+                    DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+                    foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
+                },
+                popover: {
+                    DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
+                    foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
+                },
+                card: {
+                    DEFAULT: 'hsl(var(--card) / <alpha-value>)',
+                    foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
+                },
+            },
+        },
+    },
+};
+export default preset;

package/dist/theme/theme-provider.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import type { QuadroThemePreset } from './themes.js';
+export type ColorMode = 'light' | 'dark' | 'system';
+interface ThemeContextValue {
+    preset: QuadroThemePreset;
+    setPreset: (p: QuadroThemePreset) => void;
+    colorMode: ColorMode;
+    setColorMode: (m: ColorMode) => void;
+    resolvedMode: 'light' | 'dark';
+}
+export declare function ThemeProvider({ children, defaultPreset, defaultColorMode, }: {
+    children: ReactNode;
+    defaultPreset?: QuadroThemePreset;
+    defaultColorMode?: ColorMode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};
+//# sourceMappingURL=theme-provider.d.ts.map

package/dist/theme/theme-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAEpD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEnD,UAAU,iBAAiB;IACzB,MAAM,EAAE,iBAAiB,CAAA;IACzB,SAAS,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACzC,SAAS,EAAE,SAAS,CAAA;IACpB,YAAY,EAAE,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,YAAY,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B;AAyBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,aAAuB,EACvB,gBAA2B,GAC5B,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,aAAa,CAAC,EAAE,iBAAiB,CAAA;IACjC,gBAAgB,CAAC,EAAE,SAAS,CAAA;CAC7B,2CAwCA;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}

package/dist/theme/theme-provider.mjs

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+const ThemeContext = createContext(null);
+const STORAGE_KEY = 'quadrokit:theme';
+const MODE_KEY = 'quadrokit:color-mode';
+function readStored(key, fallback) {
+    if (typeof window === 'undefined') {
+        return fallback;
+    }
+    try {
+        const raw = localStorage.getItem(key);
+        return raw ? JSON.parse(raw) : fallback;
+    }
+    catch {
+        return fallback;
+    }
+}
+function applyDom(preset, resolved) {
+    const root = document.documentElement;
+    root.dataset.quadroTheme = preset;
+    root.classList.toggle('dark', resolved === 'dark');
+}
+export function ThemeProvider({ children, defaultPreset = 'ocean', defaultColorMode = 'system', }) {
+    const [preset, setPresetState] = useState(() => readStored(STORAGE_KEY, defaultPreset));
+    const [colorMode, setColorModeState] = useState(() => readStored(MODE_KEY, defaultColorMode));
+    const [systemDark, setSystemDark] = useState(false);
+    useEffect(() => {
+        const mq = window.matchMedia('(prefers-color-scheme: dark)');
+        const sync = () => setSystemDark(mq.matches);
+        sync();
+        mq.addEventListener('change', sync);
+        return () => mq.removeEventListener('change', sync);
+    }, []);
+    const resolvedMode = colorMode === 'system' ? (systemDark ? 'dark' : 'light') : colorMode;
+    useEffect(() => {
+        applyDom(preset, resolvedMode);
+    }, [preset, resolvedMode]);
+    const setPreset = useCallback((p) => {
+        setPresetState(p);
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(p));
+    }, []);
+    const setColorMode = useCallback((m) => {
+        setColorModeState(m);
+        localStorage.setItem(MODE_KEY, JSON.stringify(m));
+    }, []);
+    const value = useMemo(() => ({ preset, setPreset, colorMode, setColorMode, resolvedMode }), [preset, setPreset, colorMode, setColorMode, resolvedMode]);
+    return _jsx(ThemeContext.Provider, { value: value, children: children });
+}
+export function useTheme() {
+    const ctx = useContext(ThemeContext);
+    if (!ctx) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return ctx;
+}

package/dist/theme/themes.d.ts

@@ -0,0 +1,4 @@
+export declare const quadroThemes: readonly ["ocean", "forest", "sunset", "mono"];
+export type QuadroThemePreset = (typeof quadroThemes)[number];
+export declare const themeLabels: Record<QuadroThemePreset, string>;
+//# sourceMappingURL=themes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/theme/themes.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,gDAAiD,CAAA;AAC1E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAE7D,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAKzD,CAAA"}

package/dist/theme/themes.mjs

@@ -0,0 +1,7 @@
+export const quadroThemes = ['ocean', 'forest', 'sunset', 'mono'];
+export const themeLabels = {
+    ocean: 'Ocean',
+    forest: 'Forest',
+    sunset: 'Sunset',
+    mono: 'Mono',
+};

package/package.json

@@ -1,23 +1,30 @@
 {
   "name": "@quadrokit/ui",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "private": false,
   "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
-    "**/*.css"
+    "./dist/styles.css"
   ],
   "exports": {
     ".": {
-      "types": "./src/index.ts",
-      "import": "./src/index.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
     },
-    "./styles.css": "./src/styles.css",
+    "./styles.css": "./dist/styles.css",
     "./tailwind-preset": {
-      "types": "./tailwind-preset.ts",
-      "import": "./tailwind-preset.ts"
+      "types": "./dist/tailwind-preset.d.ts",
+      "import": "./dist/tailwind-preset.mjs"
     }
   },
+  "files": [
+    "dist"
+  ],
   "scripts": {
+    "build": "tsc -p tsconfig.build.json && bun ../../scripts/rename-dist-js-to-mjs.ts dist && cp src/styles.css dist/styles.css",
+    "prepublishOnly": "bun run build",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {

package/src/components/button.tsx

@@ -1,45 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import type { ButtonHTMLAttributes } from 'react'
-import { forwardRef } from 'react'
-import { cn } from '../lib/utils.js'
-
-const variants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-9 px-4 py-2',
-        sm: 'h-8 rounded-md px-3 text-xs',
-        lg: 'h-10 rounded-md px-8',
-        icon: 'h-9 w-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof variants> {
-  asChild?: boolean
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button'
-    return <Comp className={cn(variants({ variant, size, className }))} ref={ref} {...props} />
-  }
-)
-Button.displayName = 'Button'

package/src/components/card.tsx

@@ -1,50 +0,0 @@
-import type { HTMLAttributes } from 'react'
-import { forwardRef } from 'react'
-import { cn } from '../lib/utils.js'
-
-export const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'rounded-xl border border-border bg-card text-card-foreground shadow-sm',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Card.displayName = 'Card'
-
-export const CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  )
-)
-CardHeader.displayName = 'CardHeader'
-
-export const CardTitle = forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3
-      ref={ref}
-      className={cn('font-semibold leading-none tracking-tight', className)}
-      {...props}
-    />
-  )
-)
-CardTitle.displayName = 'CardTitle'
-
-export const CardDescription = forwardRef<
-  HTMLParagraphElement,
-  HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-))
-CardDescription.displayName = 'CardDescription'
-
-export const CardContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  )
-)
-CardContent.displayName = 'CardContent'

package/src/components/input.tsx

@@ -1,22 +0,0 @@
-import type { InputHTMLAttributes } from 'react'
-import { forwardRef } from 'react'
-import { cn } from '../lib/utils.js'
-
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Input.displayName = 'Input'

package/src/components/label.tsx

@@ -1,18 +0,0 @@
-import type { LabelHTMLAttributes } from 'react'
-import { forwardRef } from 'react'
-import { cn } from '../lib/utils.js'
-
-export const Label = forwardRef<HTMLLabelElement, LabelHTMLAttributes<HTMLLabelElement>>(
-  ({ className, ...props }, ref) => (
-    // biome-ignore lint/a11y/noLabelWithoutControl: shadcn-style primitive; use htmlFor at call sites
-    <label
-      ref={ref}
-      className={cn(
-        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Label.displayName = 'Label'

package/src/components/theme-toolbar.tsx

@@ -1,46 +0,0 @@
-import { useTheme } from '../theme/theme-provider.js'
-import { type QuadroThemePreset, quadroThemes, themeLabels } from '../theme/themes.js'
-import { Button } from './button.js'
-
-export function ThemeToolbar() {
-  const { preset, setPreset, colorMode, setColorMode, resolvedMode } = useTheme()
-
-  return (
-    <div className="flex flex-wrap items-center gap-2 rounded-lg border border-border bg-card/60 p-2 text-sm backdrop-blur">
-      <span className="text-muted-foreground px-1">Theme</span>
-      {quadroThemes.map((t: QuadroThemePreset) => (
-        <Button
-          key={t}
-          type="button"
-          size="sm"
-          variant={preset === t ? 'default' : 'outline'}
-          onClick={() => setPreset(t)}
-        >
-          {themeLabels[t]}
-        </Button>
-      ))}
-      <span className="mx-2 hidden h-4 w-px bg-border sm:inline-block" />
-      <span className="text-muted-foreground px-1">Mode</span>
-      {(
-        [
-          ['light', 'Light'],
-          ['dark', 'Dark'],
-          ['system', 'System'],
-        ] as const
-      ).map(([m, label]) => (
-        <Button
-          key={m}
-          type="button"
-          size="sm"
-          variant={colorMode === m ? 'default' : 'ghost'}
-          onClick={() => setColorMode(m)}
-        >
-          {label}
-        </Button>
-      ))}
-      <span className="ml-auto text-xs text-muted-foreground">
-        {resolvedMode === 'dark' ? 'Dark' : 'Light'}
-      </span>
-    </div>
-  )
-}

package/src/index.ts

@@ -1,22 +0,0 @@
-export { Button, type ButtonProps } from './components/button.js'
-export {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from './components/card.js'
-export { Input, type InputProps } from './components/input.js'
-export { Label } from './components/label.js'
-export { ThemeToolbar } from './components/theme-toolbar.js'
-export { cn } from './lib/utils.js'
-export {
-  type ColorMode,
-  ThemeProvider,
-  useTheme,
-} from './theme/theme-provider.js'
-export {
-  type QuadroThemePreset,
-  quadroThemes,
-  themeLabels,
-} from './theme/themes.js'

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/src/theme/theme-provider.tsx

@@ -1,101 +0,0 @@
-import {
-  createContext,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
-import type { QuadroThemePreset } from './themes.js'
-
-export type ColorMode = 'light' | 'dark' | 'system'
-
-interface ThemeContextValue {
-  preset: QuadroThemePreset
-  setPreset: (p: QuadroThemePreset) => void
-  colorMode: ColorMode
-  setColorMode: (m: ColorMode) => void
-  resolvedMode: 'light' | 'dark'
-}
-
-const ThemeContext = createContext<ThemeContextValue | null>(null)
-
-const STORAGE_KEY = 'quadrokit:theme'
-const MODE_KEY = 'quadrokit:color-mode'
-
-function readStored<T>(key: string, fallback: T): T {
-  if (typeof window === 'undefined') {
-    return fallback
-  }
-  try {
-    const raw = localStorage.getItem(key)
-    return raw ? (JSON.parse(raw) as T) : fallback
-  } catch {
-    return fallback
-  }
-}
-
-function applyDom(preset: QuadroThemePreset, resolved: 'light' | 'dark') {
-  const root = document.documentElement
-  root.dataset.quadroTheme = preset
-  root.classList.toggle('dark', resolved === 'dark')
-}
-
-export function ThemeProvider({
-  children,
-  defaultPreset = 'ocean',
-  defaultColorMode = 'system',
-}: {
-  children: ReactNode
-  defaultPreset?: QuadroThemePreset
-  defaultColorMode?: ColorMode
-}) {
-  const [preset, setPresetState] = useState<QuadroThemePreset>(() =>
-    readStored(STORAGE_KEY, defaultPreset)
-  )
-  const [colorMode, setColorModeState] = useState<ColorMode>(() =>
-    readStored(MODE_KEY, defaultColorMode)
-  )
-  const [systemDark, setSystemDark] = useState(false)
-
-  useEffect(() => {
-    const mq = window.matchMedia('(prefers-color-scheme: dark)')
-    const sync = () => setSystemDark(mq.matches)
-    sync()
-    mq.addEventListener('change', sync)
-    return () => mq.removeEventListener('change', sync)
-  }, [])
-
-  const resolvedMode: 'light' | 'dark' =
-    colorMode === 'system' ? (systemDark ? 'dark' : 'light') : colorMode
-
-  useEffect(() => {
-    applyDom(preset, resolvedMode)
-  }, [preset, resolvedMode])
-
-  const setPreset = useCallback((p: QuadroThemePreset) => {
-    setPresetState(p)
-    localStorage.setItem(STORAGE_KEY, JSON.stringify(p))
-  }, [])
-
-  const setColorMode = useCallback((m: ColorMode) => {
-    setColorModeState(m)
-    localStorage.setItem(MODE_KEY, JSON.stringify(m))
-  }, [])
-
-  const value = useMemo(
-    () => ({ preset, setPreset, colorMode, setColorMode, resolvedMode }),
-    [preset, setPreset, colorMode, setColorMode, resolvedMode]
-  )
-
-  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-}
-
-export function useTheme(): ThemeContextValue {
-  const ctx = useContext(ThemeContext)
-  if (!ctx) {
-    throw new Error('useTheme must be used within ThemeProvider')
-  }
-  return ctx
-}

package/src/theme/themes.ts

@@ -1,9 +0,0 @@
-export const quadroThemes = ['ocean', 'forest', 'sunset', 'mono'] as const
-export type QuadroThemePreset = (typeof quadroThemes)[number]
-
-export const themeLabels: Record<QuadroThemePreset, string> = {
-  ocean: 'Ocean',
-  forest: 'Forest',
-  sunset: 'Sunset',
-  mono: 'Mono',
-}

package/tailwind-preset.ts

@@ -1,51 +0,0 @@
-import type { Config } from 'tailwindcss'
-
-const preset: Partial<Config> = {
-  darkMode: 'class',
-  theme: {
-    extend: {
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-      colors: {
-        border: 'hsl(var(--border) / <alpha-value>)',
-        input: 'hsl(var(--input) / <alpha-value>)',
-        ring: 'hsl(var(--ring) / <alpha-value>)',
-        background: 'hsl(var(--background) / <alpha-value>)',
-        foreground: 'hsl(var(--foreground) / <alpha-value>)',
-        primary: {
-          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
-          foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
-          foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
-          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
-        },
-        popover: {
-          DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
-          foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
-        },
-      },
-    },
-  },
-}
-
-export default preset

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "compilerOptions": {
-    "rootDir": "src",
-    "noEmit": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"]
-}