@openuidev/react-ui 0.9.16

package/dist/components/TextCallout/stories/TextCallout.stories.js

@@ -0,0 +1,53 @@
+import { TextCallout } from "../TextCallout";
+const meta = {
+    title: "Components/TextCallout",
+    component: TextCallout,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { TextCallout } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    tags: ["!dev", "autodocs"],
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["neutral", "info", "warning", "success", "danger"],
+            description: "The visual style variant of the callout",
+            table: {
+                category: "Appearance",
+                type: { summary: "CalloutVariant" },
+                defaultValue: { summary: "neutral" },
+            },
+        },
+        title: {
+            control: "text",
+            description: "The title of the callout",
+            table: {
+                category: "Content",
+                defaultValue: { summary: "Important Information" },
+                type: { summary: "React.ReactNode" },
+            },
+        },
+        description: {
+            control: "text",
+            description: "The description text of the callout",
+            table: {
+                category: "Content",
+                defaultValue: { summary: "This is a neutral callout with some important information." },
+                type: { summary: "React.ReactNode" },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        title: "Important Information",
+        description: "This is a neutral callout with some important information.",
+        variant: "neutral",
+    },
+};
+//# sourceMappingURL=TextCallout.stories.js.map

package/dist/components/TextCallout/stories/TextCallout.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextCallout.stories.js","sourceRoot":"","sources":["../../../../src/components/TextCallout/stories/TextCallout.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAE/D,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,iEAAiE;aAC7E;SACF;KACF;IACD,IAAI,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;IAC1B,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC;YAC5D,WAAW,EAAE,yCAAyC;YACtD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,IAAI,EAAE,EAAE,OAAO,EAAE,gBAAgB,EAAE;gBACnC,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACrC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0BAA0B;YACvC,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;gBACnB,YAAY,EAAE,EAAE,OAAO,EAAE,uBAAuB,EAAE;gBAClD,IAAI,EAAE,EAAE,OAAO,EAAE,iBAAiB,EAAE;aACrC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,qCAAqC;YAClD,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;gBACnB,YAAY,EAAE,EAAE,OAAO,EAAE,4DAA4D,EAAE;gBACvF,IAAI,EAAE,EAAE,OAAO,EAAE,iBAAiB,EAAE;aACrC;SACF;KACF;CACiC,CAAC;AAErC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,uBAAuB;QAC9B,WAAW,EAAE,4DAA4D;QACzE,OAAO,EAAE,SAAS;KACnB;CACF,CAAC"}

package/dist/components/TextCallout/textCallout.css

@@ -0,0 +1 @@
+.openui-text-callout{width:100%;display:flex;flex-direction:row;gap:var(--openui-space-xs, 6px);padding:0 16px 0 16px;box-sizing:border-box}.openui-text-callout-neutral{border-left:2px solid var(--openui-border-interactive-selected, oklch(9.7% 0 0deg));color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg))}.openui-text-callout-neutral .openui-text-callout-content-title{color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg))}.openui-text-callout-info{border-left:2px solid var(--openui-border-info-emphasis, oklch(54.6% 0.215 262.881deg));color:var(--openui-text-info-primary, oklch(42.4% 0.181 265.638deg))}.openui-text-callout-warning{border-left:2px solid var(--openui-border-alert-emphasis, oklch(68.1% 0.142 75.834deg));color:var(--openui-text-alert-primary, oklch(47.6% 0.103 61.907deg))}.openui-text-callout-success{border-left:2px solid var(--openui-border-success-emphasis, oklch(62.7% 0.17 149.214deg));color:var(--openui-text-success-primary, oklch(44.8% 0.108 151.328deg))}.openui-text-callout-danger{border-left:2px solid var(--openui-border-danger-emphasis, oklch(57.7% 0.215 27.325deg));color:var(--openui-text-danger-primary, oklch(50.5% 0.19 27.518deg))}.openui-text-callout-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:var(--openui-space-3xs, 2px)}.openui-text-callout-icon-inner{width:16px;height:16px;display:flex;align-items:center;justify-content:center}.openui-text-callout-content{display:flex;flex-direction:column}.openui-text-callout-content-title{font:var(--openui-text-body-default-heavy);letter-spacing:var(--openui-text-body-default-heavy-letter-spacing)}.openui-text-callout-content-description{font:var(--openui-text-body-default);letter-spacing:var(--openui-text-body-default-letter-spacing);color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg))}

package/dist/components/TextContent/TextContent.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from "react";
+export type TextContentVariant = "clear" | "card" | "sunk";
+export interface TextContentProps {
+    children: ReactNode;
+    variant?: TextContentVariant;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const TextContent: (props: TextContentProps) => import("react/jsx-runtime").JSX.Element;
+export { TextContent };
+//# sourceMappingURL=TextContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextContent.d.ts","sourceRoot":"","sources":["../../../src/components/TextContent/TextContent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAQD,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAQ3C,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/TextContent/TextContent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const variants = {
+    clear: "text-content-clear",
+    card: "text-content-card",
+    sunk: "text-content-sunk",
+};
+const TextContent = (props) => {
+    const { children, variant = "sunk", className, style } = props;
+    return (_jsx("div", { className: clsx("text-content", variants[variant], className), style: style, children: children }));
+};
+export { TextContent };
+//# sourceMappingURL=TextContent.js.map

package/dist/components/TextContent/TextContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextContent.js","sourceRoot":"","sources":["../../../src/components/TextContent/TextContent.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAYxB,MAAM,QAAQ,GAAuC;IACnD,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,mBAAmB;IACzB,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAE/D,OAAO,CACL,cAAK,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,YAC7E,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/TextContent/dependencies.d.ts

@@ -0,0 +1,3 @@
+declare const dependencies: string[];
+export default dependencies;
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/components/TextContent/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../../src/components/TextContent/dependencies.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAkB,CAAC;AACrC,eAAe,YAAY,CAAC"}

package/dist/components/TextContent/dependencies.js

@@ -0,0 +1,3 @@
+const dependencies = ["TextContent"];
+export default dependencies;
+//# sourceMappingURL=dependencies.js.map

package/dist/components/TextContent/dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../src/components/TextContent/dependencies.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,aAAa,CAAC,CAAC;AACrC,eAAe,YAAY,CAAC"}

package/dist/components/TextContent/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./TextContent";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TextContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextContent/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/TextContent/index.js

@@ -0,0 +1,2 @@
+export * from "./TextContent";
+//# sourceMappingURL=index.js.map

package/dist/components/TextContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TextContent/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/TextContent/stories/TextContent.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { TextContent } from "../TextContent";
+declare const meta: Meta<typeof TextContent>;
+export default meta;
+type Story = StoryObj<typeof TextContent>;
+export declare const Default: Story;
+//# sourceMappingURL=TextContent.stories.d.ts.map

package/dist/components/TextContent/stories/TextContent.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextContent.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/TextContent/stories/TextContent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAgDlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC"}

package/dist/components/TextContent/stories/TextContent.stories.js

@@ -0,0 +1,58 @@
+import { TextContent } from "../TextContent";
+const meta = {
+    title: "Components/TextContent",
+    component: TextContent,
+    tags: ["!dev", "autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { TextContent } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: ["clear", "card", "sunk"],
+            description: "Visual style variant of the text content",
+            table: {
+                category: "Appearance",
+                type: { summary: "string" },
+                defaultValue: { summary: "sunk" },
+            },
+        },
+        children: {
+            control: "text",
+            description: "Content to be displayed",
+            table: {
+                category: "Content",
+                type: { summary: "string | ReactNode" },
+            },
+        },
+        className: {
+            control: false,
+            description: "Additional CSS class name for custom styling",
+            table: {
+                category: "Styling",
+                type: { summary: "string" },
+            },
+        },
+        style: {
+            control: false,
+            description: "Additional CSS style for custom styling",
+            table: {
+                category: "Styling",
+                type: { summary: "CSSProperties" },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        children: "Hi There Welcome to OpenUI UI",
+        variant: "sunk",
+    },
+};
+//# sourceMappingURL=TextContent.stories.js.map

package/dist/components/TextContent/stories/TextContent.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextContent.stories.js","sourceRoot":"","sources":["../../../../src/components/TextContent/stories/TextContent.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,iEAAiE;aAC7E;SACF;KACF;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC;YAClC,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;aAClC;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,yBAAyB;YACtC,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,EAAE,OAAO,EAAE,oBAAoB,EAAE;aACxC;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;aAC5B;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,yCAAyC;YACtD,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,EAAE,OAAO,EAAE,eAAe,EAAE;aACnC;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,QAAQ,EAAE,+BAA+B;QACzC,OAAO,EAAE,MAAM;KAChB;CACF,CAAC"}

package/dist/components/TextContent/textContent.css

@@ -0,0 +1 @@
+.text-content{box-sizing:border-box;color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg));border:1px solid}.text-content-sunk{padding:var(--openui-space-m, 12px);background:var(--openui-sunk, oklch(9.7% 0 0deg / 0.04));border-radius:var(--openui-radius-m, 8px);border-color:var(--openui-border-default, oklch(9.7% 0 0deg / 0.06))}.text-content-card{padding:var(--openui-space-m, 12px);border-radius:var(--openui-radius-m, 8px);border-color:var(--openui-border-default, oklch(9.7% 0 0deg / 0.06))}.text-content-clear{border-color:rgba(0,0,0,0)}

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,84 @@
+import React from "react";
+import { Theme, ThemeMode } from "./types";
+/**
+ * Props for the {@link ThemeProvider} component.
+ */
+export type ThemeProps = {
+    /** Active color scheme. @default "light" */
+    mode?: ThemeMode;
+    /** Application content rendered inside the theme context. */
+    children?: React.ReactNode;
+    /**
+     * Partial overrides for **light** mode, merged onto the built-in light
+     * defaults.  Omitted keys fall back to the built-in defaults.
+     * Preferred over the deprecated `theme` prop.
+     */
+    lightTheme?: Theme;
+    /**
+     * Partial overrides for **dark** mode, merged onto the built-in dark
+     * defaults.  When omitted, `lightTheme` overrides are applied to both modes
+     * so a single set of brand customizations "just works".
+     */
+    darkTheme?: Theme;
+    /**
+     * @deprecated Use `lightTheme` instead. Kept for backward compatibility;
+     * mapped to `lightTheme` internally. If both `theme` and `lightTheme` are
+     * provided, `lightTheme` wins.
+     */
+    theme?: Theme;
+    /**
+     * CSS selector where `--openui-*` custom properties are injected.
+     * Change this when mounting multiple independent theme scopes.
+     * @default "body"
+     */
+    cssSelector?: string;
+};
+type ThemeContextType = {
+    theme: Theme;
+    mode: ThemeMode;
+    portalThemeClassName: string;
+};
+/**
+ * React context that carries the resolved theme, active mode, and a CSS class
+ * name for portals. Consumed via {@link useTheme}.
+ */
+export declare const ThemeContext: React.Context<ThemeContextType>;
+/**
+ * Access the current theme, mode, and portal class name from the nearest
+ * {@link ThemeProvider}.
+ *
+ * @returns An object with:
+ *  - `theme` – the fully resolved {@link Theme} object
+ *  - `mode` – `"light"` or `"dark"`
+ *  - `portalThemeClassName` – a unique CSS class name to apply on portal
+ *     containers so they inherit the same `--openui-*` custom properties
+ *
+ * Falls back to the default light theme when no provider is present.
+ *
+ * @example
+ * ```tsx
+ * const { theme, mode, portalThemeClassName } = useTheme();
+ * ```
+ */
+export declare const useTheme: () => ThemeContextType;
+/**
+ * Injects the OpenUI design-token CSS custom properties (`--openui-*`) into the
+ * DOM and provides theme context to all descendant components.
+ *
+ * Supports automatic scoping when nested inside another ThemeProvider: the inner
+ * provider wraps its children in a `<div>` with `display: contents` and injects
+ * a scoped style rule instead of targeting `body`.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider
+ *   mode="dark"
+ *   lightTheme={createTheme({ interactiveAccentDefault: "oklch(0.6 0.2 260)" })}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export declare const ThemeProvider: ({ mode, children, lightTheme, darkTheme, theme: deprecatedTheme, cssSelector, }: ThemeProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ThemeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAG3C;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,EAAE,SAAS,CAAC;IAChB,oBAAoB,EAAE,MAAM,CAAC;CAC9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,YAAY,iCAIvB,CAAC;AAEH;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,QAAQ,wBAAiC,CAAC;AA0DvD;;;;;;;;;;;;;;;;;GAiBG;AAEH,eAAO,MAAM,aAAa,GAAI,iFAO3B,UAAU,4CA0GZ,CAAC"}

package/dist/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId, useInsertionEffect, useMemo } from "react";
+import { defaultDarkTheme, defaultLightTheme } from "./defaultTheme";
+import { themeToCssVars } from "./utils";
+/**
+ * React context that carries the resolved theme, active mode, and a CSS class
+ * name for portals. Consumed via {@link useTheme}.
+ */
+export const ThemeContext = createContext({
+    theme: defaultLightTheme,
+    mode: "light",
+    portalThemeClassName: "",
+});
+/**
+ * Access the current theme, mode, and portal class name from the nearest
+ * {@link ThemeProvider}.
+ *
+ * @returns An object with:
+ *  - `theme` – the fully resolved {@link Theme} object
+ *  - `mode` – `"light"` or `"dark"`
+ *  - `portalThemeClassName` – a unique CSS class name to apply on portal
+ *     containers so they inherit the same `--openui-*` custom properties
+ *
+ * Falls back to the default light theme when no provider is present.
+ *
+ * @example
+ * ```tsx
+ * const { theme, mode, portalThemeClassName } = useTheme();
+ * ```
+ */
+export const useTheme = () => useContext(ThemeContext);
+const themes = {
+    light: defaultLightTheme,
+    dark: defaultDarkTheme,
+};
+// ---------------------------------------------------------------------------
+// Internal context for nesting detection
+// ---------------------------------------------------------------------------
+const OPENUI_THEME_SENTINEL = Symbol("openui-theme-provider");
+const InternalContext = createContext(null);
+// ---------------------------------------------------------------------------
+// Dev-mode warning deduplication
+// ---------------------------------------------------------------------------
+const _devWarned = new Set();
+function warnOnce(key, message) {
+    if (_devWarned.has(key))
+        return;
+    _devWarned.add(key);
+    console.warn(message);
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function cssSafeId(id) {
+    return id.replace(/[^a-zA-Z0-9-_]/g, "");
+}
+const _knownThemeKeys = new Set(Object.keys(defaultLightTheme));
+function validateThemeObject(themeObj, propName) {
+    for (const [key, value] of Object.entries(themeObj)) {
+        if (value !== undefined && typeof value !== "string" && !Array.isArray(value)) {
+            warnOnce(`non-string:${propName}:${key}`, `[OpenUI] ${propName} key "${key}" has a non-string value (${typeof value}). All theme values should be strings.`);
+        }
+        if (!_knownThemeKeys.has(key)) {
+            warnOnce(`unknown-key:${propName}:${key}`, `[OpenUI] ${propName} contains unknown key "${key}". It will be ignored. Use createTheme() for typo detection with suggestions.`);
+        }
+    }
+}
+/**
+ * Injects the OpenUI design-token CSS custom properties (`--openui-*`) into the
+ * DOM and provides theme context to all descendant components.
+ *
+ * Supports automatic scoping when nested inside another ThemeProvider: the inner
+ * provider wraps its children in a `<div>` with `display: contents` and injects
+ * a scoped style rule instead of targeting `body`.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider
+ *   mode="dark"
+ *   lightTheme={createTheme({ interactiveAccentDefault: "oklch(0.6 0.2 260)" })}
+ * >
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export const ThemeProvider = ({ mode = "light", children, lightTheme, darkTheme, theme: deprecatedTheme, cssSelector = "body", }) => {
+    const id = cssSafeId(useId());
+    const parent = useContext(InternalContext);
+    const isNested = parent != null;
+    const effectiveCssSelector = cssSelector || "body";
+    const hasExplicitSelector = effectiveCssSelector !== "body";
+    // Resolve the deprecated `theme` prop → `lightTheme` takes precedence
+    const userLightTheme = lightTheme ?? deprecatedTheme ?? {};
+    const userDarkTheme = darkTheme;
+    // ---------------------------------------------------------------------------
+    // Dev-mode warnings
+    // ---------------------------------------------------------------------------
+    if (typeof process !== "undefined" && process.env?.["NODE_ENV"] !== "production") {
+        if (deprecatedTheme !== undefined && lightTheme !== undefined) {
+            warnOnce("theme+lightTheme", '[OpenUI] Both "theme" and "lightTheme" were passed to ThemeProvider. "lightTheme" takes precedence. Remove the deprecated "theme" prop.');
+        }
+        if (deprecatedTheme !== undefined && lightTheme === undefined) {
+            warnOnce("deprecated-theme", '[OpenUI] The "theme" prop on ThemeProvider is deprecated. Use "lightTheme" instead.');
+        }
+        validateThemeObject(userLightTheme, "lightTheme");
+        if (userDarkTheme) {
+            validateThemeObject(userDarkTheme, "darkTheme");
+        }
+        // if (isNested && !hasExplicitSelector) {
+        //   warnOnce(
+        //     "nested-global",
+        //     '[OpenUI] A nested ThemeProvider is targeting "body". The inner provider will auto-scope to avoid overwriting the parent. Pass an explicit cssSelector to opt out.',
+        //   );
+        // }
+    }
+    // ---------------------------------------------------------------------------
+    // Theme resolution
+    // ---------------------------------------------------------------------------
+    const resolvedLightTheme = useMemo(() => ({ ...themes.light, ...userLightTheme }), [userLightTheme]);
+    const resolvedDarkTheme = useMemo(() => {
+        const overrides = userDarkTheme ?? userLightTheme;
+        return { ...themes.dark, ...overrides };
+    }, [userDarkTheme, userLightTheme]);
+    const activeTheme = mode === "light" ? resolvedLightTheme : resolvedDarkTheme;
+    const cssVarsString = useMemo(() => themeToCssVars(activeTheme), [activeTheme]);
+    const portalClassName = `openui-theme-portal-${id}`;
+    const scopedClassName = `openui-theme-${id}`;
+    const contextValue = useMemo(() => ({ theme: activeTheme, mode, portalThemeClassName: portalClassName }), [activeTheme, mode, portalClassName]);
+    const internalValue = useMemo(() => ({
+        [OPENUI_THEME_SENTINEL]: true,
+        theme: activeTheme,
+        mode,
+        portalThemeClassName: portalClassName,
+    }), [activeTheme, mode, portalClassName]);
+    // ---------------------------------------------------------------------------
+    // Style injection via useInsertionEffect (Step 4)
+    // ---------------------------------------------------------------------------
+    const useAutoScope = isNested && !hasExplicitSelector;
+    const styleSelector = useAutoScope ? `.${scopedClassName}` : effectiveCssSelector;
+    useInsertionEffect(() => {
+        const style = document.createElement("style");
+        style.setAttribute("data-openui-theme", id);
+        style.textContent = `${styleSelector}, .${portalClassName} { ${cssVarsString} }`;
+        document.head.appendChild(style);
+        return () => style.remove();
+    }, [cssVarsString, styleSelector, portalClassName, id]);
+    // ---------------------------------------------------------------------------
+    // Render
+    // ---------------------------------------------------------------------------
+    return (_jsx(InternalContext.Provider, { value: internalValue, children: _jsx(ThemeContext.Provider, { value: contextValue, children: useAutoScope ? (_jsx("div", { className: scopedClassName, style: { display: "contents" }, children: children })) : (children) }) }));
+};
+//# sourceMappingURL=ThemeProvider.js.map

package/dist/components/ThemeProvider/ThemeProvider.js.map

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

package/dist/components/ThemeProvider/defaultTheme.d.ts

@@ -0,0 +1,17 @@
+import { Theme } from "./types";
+/**
+ * The built-in light theme. Combines the neutral-swatch light color palette,
+ * shared layout and typography tokens, and light-mode shadow values.
+ *
+ * Used as the base when `ThemeProvider` is rendered with `mode="light"`.
+ */
+export declare const defaultLightTheme: Theme;
+/**
+ * The built-in dark theme. Uses the neutral-swatch dark color palette with
+ * inverted surface lightness, higher shadow opacity, and shared layout /
+ * typography tokens.
+ *
+ * Used as the base when `ThemeProvider` is rendered with `mode="dark"`.
+ */
+export declare const defaultDarkTheme: Theme;
+//# sourceMappingURL=defaultTheme.d.ts.map

package/dist/components/ThemeProvider/defaultTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultTheme.d.ts","sourceRoot":"","sources":["../../../src/components/ThemeProvider/defaultTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAwC,KAAK,EAAmB,MAAM,SAAS,CAAC;AAudvF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAK9B,CAAC;AAEH;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAK7B,CAAC"}