@refine-studio/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,31 @@
+import { type ReactNode } from 'react';
+import { type ThemeSettings } from './theme';
+interface ThemeContextValue extends ThemeSettings {
+    resolvedMode: 'dark' | 'light';
+    setTheme: (settings: Partial<ThemeSettings>) => void;
+}
+interface ThemeProviderProps extends Partial<ThemeSettings> {
+    children: ReactNode;
+    storageKey?: string | false;
+}
+interface ThemeScriptOptions extends Partial<ThemeSettings> {
+    /**
+     * A key that holds `true` for dark or `false` for light. Its choice moves to `storageKey` once, then the key is removed.
+     */
+    legacyStorageKey?: string;
+    storageKey?: string | false;
+}
+/**
+ * Returns an inline `<script>` body for the page head that applies the stored or the system theme before the first paint.
+ * Pass the same `storageKey`, `mode` and `density` as to `ThemeProvider`.
+ */
+export declare const themeScript: ({ density, legacyStorageKey, mode, storageKey, }?: ThemeScriptOptions) => string;
+/**
+ * Owns the document theme: applies mode and density to `<html>`, follows the OS in `system` mode, and persists changes under `storageKey`.
+ */
+export declare const ThemeProvider: ({ children, density, mode, storageKey, }: ThemeProviderProps) => import("react").JSX.Element;
+/**
+ * Returns the current theme and its setter; throws outside a `ThemeProvider`.
+ */
+export declare const useTheme: () => ThemeContextValue;
+export {};

package/dist/theme/theme-provider.js

@@ -0,0 +1,115 @@
+"use client";
+import { DEFAULT_THEME, DENSITIES, MODES, applyTheme } from "./theme.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useEffect, useState, useSyncExternalStore } from "react";
+// src/theme/theme-provider.tsx
+var ThemeContext = createContext(null);
+var DEFAULT_STORAGE_KEY = "refine-ui-theme";
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+/**
+* Reads the stored theme once on mount, keeping only the values `MODES` and `DENSITIES` allow.
+*/
+var readStoredTheme = (storageKey) => {
+	if (!storageKey || typeof window === "undefined") return {};
+	try {
+		const stored = JSON.parse(window.localStorage.getItem(storageKey) ?? "{}");
+		const settings = {};
+		const storedMode = MODES.find((value) => {
+			return value === stored?.mode;
+		});
+		const storedDensity = DENSITIES.find((value) => {
+			return value === stored?.density;
+		});
+		if (storedMode) settings.mode = storedMode;
+		if (storedDensity) settings.density = storedDensity;
+		return settings;
+	} catch {
+		return {};
+	}
+};
+/**
+* Returns an inline `<script>` body for the page head that applies the stored or the system theme before the first paint.
+* Pass the same `storageKey`, `mode` and `density` as to `ThemeProvider`.
+*/
+var themeScript = ({ density = DEFAULT_THEME.density, legacyStorageKey, mode = DEFAULT_THEME.mode, storageKey = DEFAULT_STORAGE_KEY } = {}) => {
+	return `(function(key,legacyKey,mode,density,modes,densities,darkQuery){var stored={};try{var storage=window.localStorage;if(key){var legacy=legacyKey&&storage.getItem(key)===null?storage.getItem(legacyKey):null;if(legacy==='true'||legacy==='false')storage.setItem(key,JSON.stringify({mode:legacy==='true'?'dark':'light'}));if(legacyKey)storage.removeItem(legacyKey);stored=JSON.parse(storage.getItem(key)||'{}')||{};}}catch(error){}if(modes.indexOf(stored.mode)>-1)mode=stored.mode;if(densities.indexOf(stored.density)>-1)density=stored.density;if(mode==='system')mode=window.matchMedia(darkQuery).matches?'dark':'light';var root=document.documentElement;root.classList.toggle('dark',mode==='dark');root.classList.toggle('light',mode==='light');root.dataset.density=density;})(${[
+		storageKey,
+		legacyStorageKey ?? null,
+		mode,
+		density,
+		MODES,
+		DENSITIES,
+		DARK_QUERY
+	].map((value) => {
+		return JSON.stringify(value).replace(/</g, "\\u003c");
+	}).join(",")});`;
+};
+/**
+* Subscribes to changes of the operating system's colour preference.
+*/
+var subscribeToSystemMode = (onChange) => {
+	const query = window.matchMedia(DARK_QUERY);
+	query.addEventListener("change", onChange);
+	return () => {
+		query.removeEventListener("change", onChange);
+	};
+};
+/**
+* Owns the document theme: applies mode and density to `<html>`, follows the OS in `system` mode, and persists changes under `storageKey`.
+*/
+var ThemeProvider = ({ children, density = DEFAULT_THEME.density, mode = DEFAULT_THEME.mode, storageKey = DEFAULT_STORAGE_KEY }) => {
+	const [settings, setSettings] = useState(() => {
+		return {
+			density,
+			mode,
+			...readStoredTheme(storageKey)
+		};
+	});
+	const systemMode = useSyncExternalStore(subscribeToSystemMode, () => {
+		return window.matchMedia(DARK_QUERY).matches ? "dark" : "light";
+	}, () => {
+		return "light";
+	});
+	const resolvedMode = settings.mode === "system" ? systemMode : settings.mode;
+	useEffect(() => {
+		applyTheme(document.documentElement, {
+			...settings,
+			mode: resolvedMode
+		});
+		if (storageKey) window.localStorage.setItem(storageKey, JSON.stringify(settings));
+	}, [
+		resolvedMode,
+		settings,
+		storageKey
+	]);
+	/**
+	* Merges a partial theme into the current one.
+	*/
+	const setTheme = (nextSettings) => {
+		setSettings((current) => {
+			return {
+				...current,
+				...nextSettings
+			};
+		});
+	};
+	return /* @__PURE__ */ jsx(ThemeContext, {
+		value: {
+			...settings,
+			resolvedMode,
+			setTheme
+		},
+		children
+	});
+};
+/**
+* Returns the current theme and its setter; throws outside a `ThemeProvider`.
+*/
+var useTheme = () => {
+	const context = use(ThemeContext);
+	if (!context) throw new Error("useTheme must be used inside a ThemeProvider.");
+	return context;
+};
+export { ThemeProvider, themeScript, useTheme };
+
+//# sourceMappingURL=theme-provider.js.map

package/dist/theme/theme-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-provider.js","names":[],"sources":["../../src/theme/theme-provider.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type ReactNode, use, useEffect, useState, useSyncExternalStore } from 'react';\n\nimport { applyTheme, DEFAULT_THEME, DENSITIES, MODES, type ThemeSettings } from './theme';\n\ninterface ThemeContextValue extends ThemeSettings {\n  resolvedMode: 'dark' | 'light';\n  setTheme: (settings: Partial<ThemeSettings>) => void;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | null>(null);\n\nconst DEFAULT_STORAGE_KEY = 'refine-ui-theme';\nconst DARK_QUERY = '(prefers-color-scheme: dark)';\n\ninterface ThemeProviderProps extends Partial<ThemeSettings> {\n  children: ReactNode;\n  storageKey?: string | false;\n}\n\n/**\n * Reads the stored theme once on mount, keeping only the values `MODES` and `DENSITIES` allow.\n */\nconst readStoredTheme = (storageKey: string | false) => {\n  if (!storageKey || typeof window === 'undefined') return {};\n\n  try {\n    const stored = JSON.parse(window.localStorage.getItem(storageKey) ?? '{}') as Record<string, unknown> | null;\n    const settings: Partial<ThemeSettings> = {};\n    const storedMode = MODES.find((value) => {\n      return value === stored?.mode;\n    });\n    const storedDensity = DENSITIES.find((value) => {\n      return value === stored?.density;\n    });\n    if (storedMode) settings.mode = storedMode;\n    if (storedDensity) settings.density = storedDensity;\n\n    return settings;\n  } catch {\n    // A corrupted entry falls back to the defaults rather than breaking the app.\n    return {};\n  }\n};\n\ninterface ThemeScriptOptions extends Partial<ThemeSettings> {\n  /**\n   * A key that holds `true` for dark or `false` for light. Its choice moves to `storageKey` once, then the key is removed.\n   */\n  legacyStorageKey?: string;\n  storageKey?: string | false;\n}\n\n/**\n * Returns an inline `<script>` body for the page head that applies the stored or the system theme before the first paint.\n * Pass the same `storageKey`, `mode` and `density` as to `ThemeProvider`.\n */\nexport const themeScript = ({\n  density = DEFAULT_THEME.density,\n  legacyStorageKey,\n  mode = DEFAULT_THEME.mode,\n  storageKey = DEFAULT_STORAGE_KEY,\n}: ThemeScriptOptions = {}) => {\n  const args = [storageKey, legacyStorageKey ?? null, mode, density, MODES, DENSITIES, DARK_QUERY]\n    .map((value) => {\n      return JSON.stringify(value).replace(/</g, '\\\\u003c');\n    })\n    .join(',');\n\n  return `(function(key,legacyKey,mode,density,modes,densities,darkQuery){var stored={};try{var storage=window.localStorage;if(key){var legacy=legacyKey&&storage.getItem(key)===null?storage.getItem(legacyKey):null;if(legacy==='true'||legacy==='false')storage.setItem(key,JSON.stringify({mode:legacy==='true'?'dark':'light'}));if(legacyKey)storage.removeItem(legacyKey);stored=JSON.parse(storage.getItem(key)||'{}')||{};}}catch(error){}if(modes.indexOf(stored.mode)>-1)mode=stored.mode;if(densities.indexOf(stored.density)>-1)density=stored.density;if(mode==='system')mode=window.matchMedia(darkQuery).matches?'dark':'light';var root=document.documentElement;root.classList.toggle('dark',mode==='dark');root.classList.toggle('light',mode==='light');root.dataset.density=density;})(${args});`;\n};\n\n/**\n * Subscribes to changes of the operating system's colour preference.\n */\nconst subscribeToSystemMode = (onChange: () => void) => {\n  const query = window.matchMedia(DARK_QUERY);\n  query.addEventListener('change', onChange);\n\n  return () => {\n    query.removeEventListener('change', onChange);\n  };\n};\n\n/**\n * Owns the document theme: applies mode and density to `<html>`, follows the OS in `system` mode, and persists changes under `storageKey`.\n */\nexport const ThemeProvider = ({\n  children,\n  density = DEFAULT_THEME.density,\n  mode = DEFAULT_THEME.mode,\n  storageKey = DEFAULT_STORAGE_KEY,\n}: ThemeProviderProps) => {\n  const [settings, setSettings] = useState<ThemeSettings>(() => {\n    return {\n      density,\n      mode,\n      ...readStoredTheme(storageKey),\n    };\n  });\n  const systemMode = useSyncExternalStore(\n    subscribeToSystemMode,\n    () => {\n      return window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light';\n    },\n    () => {\n      return 'light' as const;\n    },\n  );\n  const resolvedMode = settings.mode === 'system' ? systemMode : settings.mode;\n\n  useEffect(() => {\n    applyTheme(document.documentElement, {\n      ...settings,\n      mode: resolvedMode,\n    });\n    if (storageKey) window.localStorage.setItem(storageKey, JSON.stringify(settings));\n  }, [resolvedMode, settings, storageKey]);\n\n  /**\n   * Merges a partial theme into the current one.\n   */\n  const setTheme = (nextSettings: Partial<ThemeSettings>) => {\n    setSettings((current) => {\n      return {\n        ...current,\n        ...nextSettings,\n      };\n    });\n  };\n\n  return <ThemeContext value={{ ...settings, resolvedMode, setTheme }}>{children}</ThemeContext>;\n};\n\n/**\n * Returns the current theme and its setter; throws outside a `ThemeProvider`.\n */\nexport const useTheme = () => {\n  const context = use(ThemeContext);\n  if (!context) throw new Error('useTheme must be used inside a ThemeProvider.');\n\n  return context;\n};\n"],"mappings":";;;;;AAWA,IAAM,eAAe,cAAwC,IAAI;AAEjE,IAAM,sBAAsB;AAC5B,IAAM,aAAa;;;;AAUnB,IAAM,mBAAmB,eAA+B;CACtD,IAAI,CAAC,cAAc,OAAO,WAAW,aAAa,OAAO,CAAC;CAE1D,IAAI;EACF,MAAM,SAAS,KAAK,MAAM,OAAO,aAAa,QAAQ,UAAU,KAAK,IAAI;EACzE,MAAM,WAAmC,CAAC;EAC1C,MAAM,aAAa,MAAM,MAAM,UAAU;GACvC,OAAO,UAAU,QAAQ;EAC3B,CAAC;EACD,MAAM,gBAAgB,UAAU,MAAM,UAAU;GAC9C,OAAO,UAAU,QAAQ;EAC3B,CAAC;EACD,IAAI,YAAY,SAAS,OAAO;EAChC,IAAI,eAAe,SAAS,UAAU;EAEtC,OAAO;CACT,QAAQ;EAEN,OAAO,CAAC;CACV;AACF;;;;;AAcA,IAAa,eAAe,EAC1B,UAAU,cAAc,SACxB,kBACA,OAAO,cAAc,MACrB,aAAa,wBACS,CAAC,MAAM;CAO7B,OAAO,qwBANM;EAAC;EAAY,oBAAoB;EAAM;EAAM;EAAS;EAAO;EAAW;CAAU,CAAC,CAC7F,KAAK,UAAU;EACd,OAAO,KAAK,UAAU,KAAK,CAAC,CAAC,QAAQ,MAAM,SAAS;CACtD,CAAC,CAAC,CACD,KAAK,GAEowB,EAAK;AACnxB;;;;AAKA,IAAM,yBAAyB,aAAyB;CACtD,MAAM,QAAQ,OAAO,WAAW,UAAU;CAC1C,MAAM,iBAAiB,UAAU,QAAQ;CAEzC,aAAa;EACX,MAAM,oBAAoB,UAAU,QAAQ;CAC9C;AACF;;;;AAKA,IAAa,iBAAiB,EAC5B,UACA,UAAU,cAAc,SACxB,OAAO,cAAc,MACrB,aAAa,0BACW;CACxB,MAAM,CAAC,UAAU,eAAe,eAA8B;EAC5D,OAAO;GACL;GACA;GACA,GAAG,gBAAgB,UAAU;EAC/B;CACF,CAAC;CACD,MAAM,aAAa,qBACjB,6BACM;EACJ,OAAO,OAAO,WAAW,UAAU,CAAC,CAAC,UAAU,SAAS;CAC1D,SACM;EACJ,OAAO;CACT,CACF;CACA,MAAM,eAAe,SAAS,SAAS,WAAW,aAAa,SAAS;CAExE,gBAAgB;EACd,WAAW,SAAS,iBAAiB;GACnC,GAAG;GACH,MAAM;EACR,CAAC;EACD,IAAI,YAAY,OAAO,aAAa,QAAQ,YAAY,KAAK,UAAU,QAAQ,CAAC;CAClF,GAAG;EAAC;EAAc;EAAU;CAAU,CAAC;;;;CAKvC,MAAM,YAAY,iBAAyC;EACzD,aAAa,YAAY;GACvB,OAAO;IACL,GAAG;IACH,GAAG;GACL;EACF,CAAC;CACH;CAEA,OAAO,oBAAC,cAAD;EAAc,OAAO;GAAE,GAAG;GAAU;GAAc;EAAS;EAAI;CAAuB,CAAA;AAC/F;;;;AAKA,IAAa,iBAAiB;CAC5B,MAAM,UAAU,IAAI,YAAY;CAChC,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,+CAA+C;CAE7E,OAAO;AACT"}

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

@@ -0,0 +1,12 @@
+import type { ComponentProps } from 'react';
+import type { Density } from './theme';
+interface ThemeScopeProps extends ComponentProps<'div'> {
+    asChild?: boolean;
+    density?: Density;
+    mode?: 'dark' | 'light' | 'on-gem';
+}
+/**
+ * Re-themes one subtree — a dark sidebar in a light app, a brand panel on the gem gradient, a compact table — without touching the document theme.
+ */
+export declare const ThemeScope: ({ asChild, className, density, mode, ...props }: ThemeScopeProps) => import("react").JSX.Element;
+export {};

package/dist/theme/theme-scope.js

@@ -0,0 +1,22 @@
+import { cn } from "../lib/cn.js";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+// src/theme/theme-scope.tsx
+/**
+* Re-themes one subtree — a dark sidebar in a light app, a brand panel on the gem gradient, a compact table — without touching the document theme.
+*/
+var ThemeScope = ({ asChild = false, className, density, mode, ...props }) => {
+	const Component = asChild ? Slot.Root : "div";
+	return /* @__PURE__ */ jsx(Component, {
+		className: cn(mode, {
+			"bg-background text-foreground": mode === "dark" || mode === "light",
+			"bg-gem-gradient": mode === "on-gem"
+		}, className),
+		"data-density": density,
+		"data-slot": "theme-scope",
+		...props
+	});
+};
+export { ThemeScope };
+
+//# sourceMappingURL=theme-scope.js.map

package/dist/theme/theme-scope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-scope.js","names":[],"sources":["../../src/theme/theme-scope.tsx"],"sourcesContent":["import { Slot } from 'radix-ui';\nimport type { ComponentProps } from 'react';\n\nimport { cn } from '../lib/cn';\nimport type { Density } from './theme';\n\ninterface ThemeScopeProps extends ComponentProps<'div'> {\n  asChild?: boolean;\n  density?: Density;\n  mode?: 'dark' | 'light' | 'on-gem';\n}\n\n/**\n * Re-themes one subtree — a dark sidebar in a light app, a brand panel on the gem gradient, a compact table — without touching the document theme.\n */\nexport const ThemeScope = ({ asChild = false, className, density, mode, ...props }: ThemeScopeProps) => {\n  const Component = asChild ? Slot.Root : 'div';\n\n  return (\n    <Component\n      className={cn(\n        mode,\n        {\n          'bg-background text-foreground': mode === 'dark' || mode === 'light',\n          'bg-gem-gradient': mode === 'on-gem',\n        },\n        className,\n      )}\n      data-density={density}\n      data-slot=\"theme-scope\"\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAeA,IAAa,cAAc,EAAE,UAAU,OAAO,WAAW,SAAS,MAAM,GAAG,YAA6B;CACtG,MAAM,YAAY,UAAU,KAAK,OAAO;CAExC,OACE,oBAAC,WAAD;EACE,WAAW,GACT,MACA;GACE,iCAAiC,SAAS,UAAU,SAAS;GAC7D,mBAAmB,SAAS;EAC9B,GACA,SACF;EACA,gBAAc;EACd,aAAU;EACV,GAAI;CACL,CAAA;AAEL"}

package/dist/theme/theme.d.ts

@@ -0,0 +1,20 @@
+export declare const MODES: readonly ["light", "dark", "system"];
+export declare const DENSITIES: readonly ["compact", "comfortable", "spacious"];
+export type Mode = (typeof MODES)[number];
+export type Density = (typeof DENSITIES)[number];
+export interface ThemeSettings {
+    density: Density;
+    mode: Mode;
+}
+export declare const DEFAULT_THEME: {
+    density: "comfortable";
+    mode: "system";
+};
+/**
+ * Resolves `system` to the colour mode the operating system currently prefers, and passes `light` and `dark` through.
+ */
+export declare const resolveMode: (mode: Mode) => "light" | "dark";
+/**
+ * Writes the theme onto an element as a `light`/`dark` class and a `data-density` attribute.
+ */
+export declare const applyTheme: (element: HTMLElement, settings: Partial<ThemeSettings>) => void;

package/dist/theme/theme.js

@@ -0,0 +1,37 @@
+// src/theme/theme.ts
+var MODES = [
+	"light",
+	"dark",
+	"system"
+];
+var DENSITIES = [
+	"compact",
+	"comfortable",
+	"spacious"
+];
+var DEFAULT_THEME = {
+	density: "comfortable",
+	mode: "system"
+};
+/**
+* Resolves `system` to the colour mode the operating system currently prefers, and passes `light` and `dark` through.
+*/
+var resolveMode = (mode) => {
+	if (mode !== "system") return mode;
+	if (typeof window === "undefined") return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+/**
+* Writes the theme onto an element as a `light`/`dark` class and a `data-density` attribute.
+*/
+var applyTheme = (element, settings) => {
+	if (settings.mode) {
+		const resolvedMode = resolveMode(settings.mode);
+		element.classList.toggle("dark", resolvedMode === "dark");
+		element.classList.toggle("light", resolvedMode === "light");
+	}
+	if (settings.density) element.dataset.density = settings.density;
+};
+export { DEFAULT_THEME, DENSITIES, MODES, applyTheme, resolveMode };
+
+//# sourceMappingURL=theme.js.map

package/dist/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":[],"sources":["../../src/theme/theme.ts"],"sourcesContent":["export const MODES = ['light', 'dark', 'system'] as const;\nexport const DENSITIES = ['compact', 'comfortable', 'spacious'] as const;\n\nexport type Mode = (typeof MODES)[number];\nexport type Density = (typeof DENSITIES)[number];\n\nexport interface ThemeSettings {\n  density: Density;\n  mode: Mode;\n}\n\nexport const DEFAULT_THEME = {\n  density: 'comfortable',\n  mode: 'system',\n} satisfies ThemeSettings;\n\n/**\n * Resolves `system` to the colour mode the operating system currently prefers, and passes `light` and `dark` through.\n */\nexport const resolveMode = (mode: Mode) => {\n  if (mode !== 'system') return mode;\n  if (typeof window === 'undefined') return 'light';\n\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n};\n\n/**\n * Writes the theme onto an element as a `light`/`dark` class and a `data-density` attribute.\n */\nexport const applyTheme = (element: HTMLElement, settings: Partial<ThemeSettings>) => {\n  if (settings.mode) {\n    const resolvedMode = resolveMode(settings.mode);\n    element.classList.toggle('dark', resolvedMode === 'dark');\n    element.classList.toggle('light', resolvedMode === 'light');\n  }\n\n  if (settings.density) element.dataset.density = settings.density;\n};\n"],"mappings":";AAAA,IAAa,QAAQ;CAAC;CAAS;CAAQ;AAAQ;AAC/C,IAAa,YAAY;CAAC;CAAW;CAAe;AAAU;AAU9D,IAAa,gBAAgB;CAC3B,SAAS;CACT,MAAM;AACR;;;;AAKA,IAAa,eAAe,SAAe;CACzC,IAAI,SAAS,UAAU,OAAO;CAC9B,IAAI,OAAO,WAAW,aAAa,OAAO;CAE1C,OAAO,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAAU,SAAS;AAC9E;;;;AAKA,IAAa,cAAc,SAAsB,aAAqC;CACpF,IAAI,SAAS,MAAM;EACjB,MAAM,eAAe,YAAY,SAAS,IAAI;EAC9C,QAAQ,UAAU,OAAO,QAAQ,iBAAiB,MAAM;EACxD,QAAQ,UAAU,OAAO,SAAS,iBAAiB,OAAO;CAC5D;CAEA,IAAI,SAAS,SAAS,QAAQ,QAAQ,UAAU,SAAS;AAC3D"}

package/package.json

@@ -1,6 +1,94 @@
 {
   "name": "@refine-studio/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Refine UI: the design system the Diamonds use to build internal tools.",
+  "license": "MIT",
+  "homepage": "https://ui.refine.studio",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/refine-studio/refine-ui.git"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "vite build && tsc -p tsconfig.build.json && node scripts/copy-styles.js",
+    "build-storybook": "storybook build -o storybook-static",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "test": "vitest run",
+    "prepack": "pnpm run build"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "tailwindcss": ">=4.1"
+  },
+  "packageManager": "pnpm@11.25.0",
+  "dependencies": {
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "lucide-react": "1.61.0",
+    "radix-ui": "1.8.1",
+    "sonner": "2.0.8",
+    "tailwind-merge": "3.7.0",
+    "tw-animate-css": "1.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "10.0.1",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
+    "@storybook/addon-a11y": "10.6.4",
+    "@storybook/addon-docs": "10.6.4",
+    "@storybook/react-vite": "10.6.4",
+    "@tailwindcss/vite": "4.3.3",
+    "@testing-library/react": "16.3.3",
+    "@testing-library/user-event": "14.6.8",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@types/three": "0.186.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "eslint": "10.13.0",
+    "eslint-plugin-react-hooks": "7.1.1",
+    "eslint-plugin-storybook": "10.6.4",
+    "globals": "17.13.0",
+    "jsdom": "30.1.3",
+    "prettier": "3.9.10",
+    "prettier-plugin-tailwindcss": "0.8.1",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "storybook": "10.6.4",
+    "tailwindcss": "4.3.3",
+    "three": "0.186.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.72.0",
+    "vite": "8.3.5",
+    "vitest": "5.0.5"
+  }
+}