@locus-ui/components 0.0.16 → 0.1.0

package/dist/components/theme/theme-context.js

@@ -0,0 +1,52 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_context_exports = {};
+__export(theme_context_exports, {
+  ThemeContext: () => ThemeContext,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(theme_context_exports);
+var React = __toESM(require("react"));
+const ThemeContext = React.createContext(
+  void 0
+);
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("`useTheme` must be used within a `Theme`");
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeContext,
+  useTheme
+});
+//# sourceMappingURL=theme-context.js.map

package/dist/components/theme/theme-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/theme/theme-context.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ThemePropsDefs } from \"./theme.props\";\n\nexport type ThemeAppearance = (typeof ThemePropsDefs.appearance.values)[number];\nexport type ThemeRadius = (typeof ThemePropsDefs.radius.values)[number];\nexport type ThemeRoundness = (typeof ThemePropsDefs.roundness.values)[number];\nexport type ThemeSpacing = (typeof ThemePropsDefs.spacing.values)[number];\n\ninterface ThemeChangeHandlers {\n  onAppearanceChange?: (appearance: ThemeAppearance) => void;\n  onRadiusChange?: (radius: ThemeRadius) => void;\n  onRoundnessChange?: (roundness: ThemeRoundness) => void;\n  onSpacingChange?: (spacing: ThemeSpacing) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n  appearance: ThemeAppearance;\n  radius: ThemeRadius;\n  roundness: ThemeRoundness;\n  spacing: ThemeSpacing;\n}\n\ninterface ThemeContextProps extends ThemeContextValue, ThemeChangeHandlers {}\n\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(\n  undefined\n);\n\nfunction useTheme() {\n  const context = React.useContext(ThemeContext);\n  if (!context) {\n    throw new Error(\"`useTheme` must be used within a `Theme`\");\n  }\n  return context;\n}\n\nexport { ThemeContext, ThemeContextProps, useTheme };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AAwBvB,MAAM,eAAe,MAAM;AAAA,EACzB;AACF;AAEA,SAAS,WAAW;AAClB,QAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0CAA0C;AAAA,EAC5D;AACA,SAAO;AACT;","names":[]}

package/dist/components/theme/theme-context.mjs

@@ -0,0 +1,17 @@
+"use client";
+import * as React from "react";
+const ThemeContext = React.createContext(
+  void 0
+);
+function useTheme() {
+  const context = React.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("`useTheme` must be used within a `Theme`");
+  }
+  return context;
+}
+export {
+  ThemeContext,
+  useTheme
+};
+//# sourceMappingURL=theme-context.mjs.map

package/dist/components/theme/theme-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/theme/theme-context.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ThemePropsDefs } from \"./theme.props\";\n\nexport type ThemeAppearance = (typeof ThemePropsDefs.appearance.values)[number];\nexport type ThemeRadius = (typeof ThemePropsDefs.radius.values)[number];\nexport type ThemeRoundness = (typeof ThemePropsDefs.roundness.values)[number];\nexport type ThemeSpacing = (typeof ThemePropsDefs.spacing.values)[number];\n\ninterface ThemeChangeHandlers {\n  onAppearanceChange?: (appearance: ThemeAppearance) => void;\n  onRadiusChange?: (radius: ThemeRadius) => void;\n  onRoundnessChange?: (roundness: ThemeRoundness) => void;\n  onSpacingChange?: (spacing: ThemeSpacing) => void;\n}\n\ninterface ThemeContextValue extends ThemeChangeHandlers {\n  appearance: ThemeAppearance;\n  radius: ThemeRadius;\n  roundness: ThemeRoundness;\n  spacing: ThemeSpacing;\n}\n\ninterface ThemeContextProps extends ThemeContextValue, ThemeChangeHandlers {}\n\nconst ThemeContext = React.createContext<ThemeContextValue | undefined>(\n  undefined\n);\n\nfunction useTheme() {\n  const context = React.useContext(ThemeContext);\n  if (!context) {\n    throw new Error(\"`useTheme` must be used within a `Theme`\");\n  }\n  return context;\n}\n\nexport { ThemeContext, ThemeContextProps, useTheme };\n"],"mappings":";AAEA,YAAY,WAAW;AAwBvB,MAAM,eAAe,MAAM;AAAA,EACzB;AACF;AAEA,SAAS,WAAW;AAClB,QAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,0CAA0C;AAAA,EAC5D;AACA,SAAO;AACT;","names":[]}

package/dist/components/theme/theme-control.d.mts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const ThemeControlPosition: readonly ["tl", "top", "tr", "left", "center", "right", "bl", "bottom", "br"];
+interface ThemeControlProps {
+    position?: (typeof ThemeControlPosition)[number];
+}
+declare function ThemeControl({ position }: ThemeControlProps): react_jsx_runtime.JSX.Element;
+
+export { ThemeControl };

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

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const ThemeControlPosition: readonly ["tl", "top", "tr", "left", "center", "right", "bl", "bottom", "br"];
+interface ThemeControlProps {
+    position?: (typeof ThemeControlPosition)[number];
+}
+declare function ThemeControl({ position }: ThemeControlProps): react_jsx_runtime.JSX.Element;
+
+export { ThemeControl };

package/dist/components/theme/theme-control.js

@@ -0,0 +1,156 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_control_exports = {};
+__export(theme_control_exports, {
+  ThemeControl: () => ThemeControl
+});
+module.exports = __toCommonJS(theme_control_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_panel = require("../panel");
+var import_portal = require("../portal");
+var import_select = require("../select");
+var import_theme_context = require("./theme-context");
+const ThemeControlPosition = [
+  "tl",
+  "top",
+  "tr",
+  "left",
+  "center",
+  "right",
+  "bl",
+  "bottom",
+  "br"
+];
+function ThemeControl({ position = "bottom" }) {
+  const {
+    appearance,
+    onAppearanceChange,
+    radius,
+    onRadiusChange,
+    roundness,
+    onRoundnessChange,
+    spacing,
+    onSpacingChange
+  } = (0, import_theme_context.useTheme)();
+  const [visible, setVisible] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    function handleKeyDown(event) {
+      if (event.altKey && event.code === "KeyT") {
+        event.preventDefault();
+        setVisible(!visible);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [visible]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal.Root, { open: visible, onOpenChange: setVisible, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.Portal.Content, { position, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_panel.Panel,
+    {
+      variant: "outlined",
+      m: "4",
+      p: "4",
+      className: "flex flex-col gap-2 border-[rgba(var(--border-color), 0.6)]",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_select.Select.Root,
+          {
+            variant: "solid",
+            value: appearance,
+            onValueChange: (change) => onAppearanceChange?.(change),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Label, { position: "inside", children: "Theme Settings" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Trigger, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.Select.Content, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "light", children: "Light" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "dark", children: "Dark" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_select.Select.Root,
+          {
+            variant: "solid",
+            value: radius,
+            onValueChange: (change) => onRadiusChange?.(change),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Label, { position: "inside", children: "Radius" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Trigger, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.Select.Content, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "none", children: "None" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "xl", children: "XL" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "full", children: "FULL" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_select.Select.Root,
+          {
+            variant: "solid",
+            value: roundness,
+            onValueChange: (change) => onRoundnessChange?.(change),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Trigger, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.Select.Content, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "1", children: "1" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "2", children: "2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "3", children: "3" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "4", children: "4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "5", children: "5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "6", children: "6" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_select.Select.Root,
+          {
+            variant: "solid",
+            value: spacing,
+            onValueChange: (change) => onSpacingChange?.(change),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Label, { position: "inside", children: "Spacing" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Trigger, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_select.Select.Content, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_select.Select.Item, { value: "xl", children: "XL" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeControl
+});
+//# sourceMappingURL=theme-control.js.map

package/dist/components/theme/theme-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/theme/theme-control.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Panel } from \"../panel\";\nimport { Portal } from \"../portal\";\nimport { Select } from \"../select\";\nimport { useTheme } from \"./theme-context\";\n\nconst ThemeControlPosition = [\n  \"tl\",\n  \"top\",\n  \"tr\",\n  \"left\",\n  \"center\",\n  \"right\",\n  \"bl\",\n  \"bottom\",\n  \"br\",\n] as const;\n\ninterface ThemeControlProps {\n  position?: (typeof ThemeControlPosition)[number];\n}\n\nexport function ThemeControl({ position = \"bottom\" }: ThemeControlProps) {\n  const {\n    appearance,\n    onAppearanceChange,\n    radius,\n    onRadiusChange,\n    roundness,\n    onRoundnessChange,\n    spacing,\n    onSpacingChange,\n  } = useTheme();\n\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.altKey && event.code === \"KeyT\") {\n        event.preventDefault();\n        setVisible(!visible);\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [visible]);\n\n  return (\n    <Portal.Root open={visible} onOpenChange={setVisible}>\n      <Portal.Content position={position}>\n        <Panel\n          variant=\"outlined\"\n          m=\"4\"\n          p=\"4\"\n          className=\"flex flex-col gap-2 border-[rgba(var(--border-color), 0.6)]\"\n        >\n          <Select.Root\n            variant=\"solid\"\n            value={appearance}\n            onValueChange={(change) => onAppearanceChange?.(change as any)}\n          >\n            <Select.Label position=\"inside\">Theme Settings</Select.Label>\n\n            <Select.Trigger />\n\n            <Select.Content>\n              <Select.Item value=\"light\">Light</Select.Item>\n              <Select.Item value=\"dark\">Dark</Select.Item>\n            </Select.Content>\n          </Select.Root>\n\n          <Select.Root\n            variant=\"solid\"\n            value={radius}\n            onValueChange={(change) => onRadiusChange?.(change as any)}\n          >\n            <Select.Label position=\"inside\">Radius</Select.Label>\n\n            <Select.Trigger />\n\n            <Select.Content>\n              <Select.Item value=\"none\">None</Select.Item>\n              <Select.Item value=\"xs\">XS</Select.Item>\n              <Select.Item value=\"sm\">SM</Select.Item>\n              <Select.Item value=\"md\">MD</Select.Item>\n              <Select.Item value=\"lg\">LG</Select.Item>\n              <Select.Item value=\"xl\">XL</Select.Item>\n              <Select.Item value=\"full\">FULL</Select.Item>\n            </Select.Content>\n          </Select.Root>\n\n          <Select.Root\n            variant=\"solid\"\n            value={roundness}\n            onValueChange={(change) => onRoundnessChange?.(change as any)}\n          >\n            <Select.Label className=\"min-w-40!\" position=\"inside\">\n              Roundness\n            </Select.Label>\n\n            <Select.Trigger />\n\n            <Select.Content>\n              <Select.Item value=\"1\">1</Select.Item>\n              <Select.Item value=\"2\">2</Select.Item>\n              <Select.Item value=\"3\">3</Select.Item>\n              <Select.Item value=\"4\">4</Select.Item>\n              <Select.Item value=\"5\">5</Select.Item>\n              <Select.Item value=\"6\">6</Select.Item>\n            </Select.Content>\n          </Select.Root>\n\n          <Select.Root\n            variant=\"solid\"\n            value={spacing}\n            onValueChange={(change) => onSpacingChange?.(change as any)}\n          >\n            <Select.Label position=\"inside\">Spacing</Select.Label>\n\n            <Select.Trigger />\n\n            <Select.Content>\n              <Select.Item value=\"xs\">XS</Select.Item>\n              <Select.Item value=\"sm\">SM</Select.Item>\n              <Select.Item value=\"md\">MD</Select.Item>\n              <Select.Item value=\"lg\">LG</Select.Item>\n              <Select.Item value=\"xl\">XL</Select.Item>\n            </Select.Content>\n          </Select.Root>\n        </Panel>\n      </Portal.Content>\n    </Portal.Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/theme/theme-control.mjs

@@ -0,0 +1,132 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Panel } from "../panel";
+import { Portal } from "../portal";
+import { Select } from "../select";
+import { useTheme } from "./theme-context";
+const ThemeControlPosition = [
+  "tl",
+  "top",
+  "tr",
+  "left",
+  "center",
+  "right",
+  "bl",
+  "bottom",
+  "br"
+];
+function ThemeControl({ position = "bottom" }) {
+  const {
+    appearance,
+    onAppearanceChange,
+    radius,
+    onRadiusChange,
+    roundness,
+    onRoundnessChange,
+    spacing,
+    onSpacingChange
+  } = useTheme();
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    function handleKeyDown(event) {
+      if (event.altKey && event.code === "KeyT") {
+        event.preventDefault();
+        setVisible(!visible);
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [visible]);
+  return /* @__PURE__ */ jsx(Portal.Root, { open: visible, onOpenChange: setVisible, children: /* @__PURE__ */ jsx(Portal.Content, { position, children: /* @__PURE__ */ jsxs(
+    Panel,
+    {
+      variant: "outlined",
+      m: "4",
+      p: "4",
+      className: "flex flex-col gap-2 border-[rgba(var(--border-color), 0.6)]",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Select.Root,
+          {
+            variant: "solid",
+            value: appearance,
+            onValueChange: (change) => onAppearanceChange?.(change),
+            children: [
+              /* @__PURE__ */ jsx(Select.Label, { position: "inside", children: "Theme Settings" }),
+              /* @__PURE__ */ jsx(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs(Select.Content, { children: [
+                /* @__PURE__ */ jsx(Select.Item, { value: "light", children: "Light" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "dark", children: "Dark" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Select.Root,
+          {
+            variant: "solid",
+            value: radius,
+            onValueChange: (change) => onRadiusChange?.(change),
+            children: [
+              /* @__PURE__ */ jsx(Select.Label, { position: "inside", children: "Radius" }),
+              /* @__PURE__ */ jsx(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs(Select.Content, { children: [
+                /* @__PURE__ */ jsx(Select.Item, { value: "none", children: "None" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "xl", children: "XL" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "full", children: "FULL" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Select.Root,
+          {
+            variant: "solid",
+            value: roundness,
+            onValueChange: (change) => onRoundnessChange?.(change),
+            children: [
+              /* @__PURE__ */ jsx(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+              /* @__PURE__ */ jsx(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs(Select.Content, { children: [
+                /* @__PURE__ */ jsx(Select.Item, { value: "1", children: "1" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "2", children: "2" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "3", children: "3" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "4", children: "4" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "5", children: "5" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "6", children: "6" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Select.Root,
+          {
+            variant: "solid",
+            value: spacing,
+            onValueChange: (change) => onSpacingChange?.(change),
+            children: [
+              /* @__PURE__ */ jsx(Select.Label, { position: "inside", children: "Spacing" }),
+              /* @__PURE__ */ jsx(Select.Trigger, {}),
+              /* @__PURE__ */ jsxs(Select.Content, { children: [
+                /* @__PURE__ */ jsx(Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ jsx(Select.Item, { value: "xl", children: "XL" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) }) });
+}
+export {
+  ThemeControl
+};
+//# sourceMappingURL=theme-control.mjs.map

package/dist/components/theme/theme-control.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/theme/theme-control.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Panel } from \"../panel\";\nimport { Portal } from \"../portal\";\nimport { Select } from \"../select\";\nimport { useTheme } from \"./theme-context\";\n\nconst ThemeControlPosition = [\n  \"tl\",\n  \"top\",\n  \"tr\",\n  \"left\",\n  \"center\",\n  \"right\",\n  \"bl\",\n  \"bottom\",\n  \"br\",\n] as const;\n\ninterface ThemeControlProps {\n  position?: (typeof ThemeControlPosition)[number];\n}\n\nexport function ThemeControl({ position = \"bottom\" }: ThemeControlProps) {\n  const {\n    appearance,\n    onAppearanceChange,\n    radius,\n    onRadiusChange,\n    roundness,\n    onRoundnessChange,\n    spacing,\n    onSpacingChange,\n  } = useTheme();\n\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    function handleKeyDown(event: KeyboardEvent) {\n      if (event.altKey && event.code === \"KeyT\") {\n        event.preventDefault();\n        setVisible(!visible);\n      }\n    }\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [visible]);\n\n  return (\n    <Portal.Root open={visible} onOpenChange={setVisible}>\n      <Portal.Content position={position}>\n        <Panel\n          variant=\"outlined\"\n          m=\"4\"\n          p=\"4\"\n          className=\"flex flex-col gap-2 border-[rgba(var(--border-color), 0.6)]\"\n        >\n          <Select.Root\n            variant=\"solid\"\n            value={appearance}\n            onValueChange={(change) => onAppearanceChange?.(change as any)}\n          >\n            <Select.Label position=\"inside\">Theme Settings</Select.Label>\n\n            <Select.Trigger />\n\n            <Select.Content>\n              <Select.Item value=\"light\">Light</Select.Item>\n              <Select.Item value=\"dark\">Dark</Select.Item>\n            </Select.Content>\n          </Select.Root>\n\n          <Select.Root\n            variant=\"solid\"\n            value={radius}\n            onValueChange={(change) => onRadiusChange?.(change as any)}\n          >\n            <Select.Label position=\"inside\">Radius</Select.Label>\n\n            <Select.Trigger />\n\n            <Select.Content>\n              <Select.Item value=\"none\">None</Select.Item>\n              <Select.Item value=\"xs\">XS</Select.Item>\n              <Select.Item value=\"sm\">SM</Select.Item>\n              <Select.Item value=\"md\">MD</Select.Item>\n              <Select.Item value=\"lg\">LG</Select.Item>\n              <Select.Item value=\"xl\">XL</Select.Item>\n              <Select.Item value=\"full\">FULL</Select.Item>\n            </Select.Content>\n          </Select.Root>\n\n          <Select.Root\n            variant=\"solid\"\n            value={roundness}\n            onValueChange={(change) => onRoundnessChange?.(change as any)}\n          >\n            <Select.Label className=\"min-w-40!\" position=\"inside\">\n              Roundness\n            </Select.Label>\n\n            <Select.Trigger />\n\n            <Select.Content>\n              <Select.Item value=\"1\">1</Select.Item>\n              <Select.Item value=\"2\">2</Select.Item>\n              <Select.Item value=\"3\">3</Select.Item>\n              <Select.Item value=\"4\">4</Select.Item>\n              <Select.Item value=\"5\">5</Select.Item>\n              <Select.Item value=\"6\">6</Select.Item>\n            </Select.Content>\n          </Select.Root>\n\n          <Select.Root\n            variant=\"solid\"\n            value={spacing}\n            onValueChange={(change) => onSpacingChange?.(change as any)}\n          >\n            <Select.Label position=\"inside\">Spacing</Select.Label>\n\n            <Select.Trigger />\n\n            <Select.Content>\n              <Select.Item value=\"xs\">XS</Select.Item>\n              <Select.Item value=\"sm\">SM</Select.Item>\n              <Select.Item value=\"md\">MD</Select.Item>\n              <Select.Item value=\"lg\">LG</Select.Item>\n              <Select.Item value=\"xl\">XL</Select.Item>\n            </Select.Content>\n          </Select.Root>\n        </Panel>\n      </Portal.Content>\n    </Portal.Root>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/theme/theme.d.mts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GetProps } from '../../utils/get-props.mjs';
+import { ThemePropsDefs } from './theme.props.mjs';
+import '../../props/prop-def.mjs';
+
+type ThemeProps = GetProps<typeof ThemePropsDefs> & React.HTMLAttributes<HTMLDivElement>;
+declare const Theme: React.ForwardRefExoticComponent<{} & {
+    radius?: "none" | "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    roundness?: "inherit" | "1" | "2" | "3" | "4" | "5" | "6" | undefined;
+    spacing?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    appearance?: "inherit" | "dark" | "light" | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+export { Theme, type ThemeProps };

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { GetProps } from '../../utils/get-props.js';
+import { ThemePropsDefs } from './theme.props.js';
+import '../../props/prop-def.js';
+
+type ThemeProps = GetProps<typeof ThemePropsDefs> & React.HTMLAttributes<HTMLDivElement>;
+declare const Theme: React.ForwardRefExoticComponent<{} & {
+    radius?: "none" | "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "full" | undefined;
+    roundness?: "inherit" | "1" | "2" | "3" | "4" | "5" | "6" | undefined;
+    spacing?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    appearance?: "inherit" | "dark" | "light" | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+export { Theme, type ThemeProps };

package/dist/components/theme/theme.js

@@ -0,0 +1,132 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_exports = {};
+__export(theme_exports, {
+  Theme: () => Theme
+});
+module.exports = __toCommonJS(theme_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+var import_theme_context = require("./theme-context");
+const Theme = React.forwardRef((props, ref) => {
+  const context = React.useContext(import_theme_context.ThemeContext);
+  const isRoot = context === void 0;
+  if (isRoot) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeRoot, { ...props, ref });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeSub, { ...props, ref });
+});
+Theme.displayName = "Theme";
+const ThemeRoot = React.forwardRef((props, ref) => {
+  const {
+    appearance: themeAppearance,
+    radius: themeRadius,
+    roundness: themeRoundness,
+    spacing: themeSpacing,
+    children,
+    ...rest
+  } = props;
+  const [appearance, setAppearance] = React.useState(
+    themeAppearance ?? "light"
+  );
+  const [radius, setRadius] = React.useState(themeRadius ?? "md");
+  const [roundness, setRoundness] = React.useState(
+    themeRoundness ?? "3"
+  );
+  const [spacing, setSpacing] = React.useState(themeSpacing ?? "md");
+  const value = React.useMemo(
+    () => ({
+      appearance,
+      radius,
+      roundness,
+      spacing,
+      onAppearanceChange: setAppearance,
+      onRadiusChange: setRadius,
+      onRoundnessChange: setRoundness,
+      onSpacingChange: setSpacing
+    }),
+    [appearance, radius, roundness, spacing]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme_context.ThemeContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      "data-appearance": appearance,
+      "data-theme-radius": radius,
+      "data-theme-roundness": roundness,
+      "data-theme-spacing": spacing,
+      ...rest,
+      children
+    }
+  ) });
+});
+ThemeRoot.displayName = "ThemeRoot";
+const ThemeSub = React.forwardRef((props, ref) => {
+  const context = React.useContext(import_theme_context.ThemeContext);
+  const {
+    appearance,
+    radius,
+    roundness,
+    spacing,
+    onAppearanceChange,
+    onRadiusChange,
+    onRoundnessChange,
+    onSpacingChange,
+    children,
+    ...rest
+  } = props;
+  const contextProps = {
+    appearance: appearance ?? context.appearance,
+    radius: radius ?? context.radius,
+    roundness: roundness ?? context.roundness,
+    spacing: spacing ?? context.spacing,
+    onAppearanceChange: context.onAppearanceChange,
+    onRadiusChange: context.onRadiusChange,
+    onRoundnessChange: context.onRoundnessChange,
+    onSpacingChange: context.onSpacingChange
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_theme_context.ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      "data-appearance": appearance,
+      "data-theme-radius": radius,
+      "data-theme-roundness": roundness,
+      "data-theme-spacing": spacing,
+      ...rest,
+      className: "flex",
+      children
+    }
+  ) });
+});
+ThemeSub.displayName = "ThemeSub";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Theme
+});
+//# sourceMappingURL=theme.js.map

package/dist/components/theme/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { GetProps } from \"../../utils/get-props\";\nimport {\n  ThemeAppearance,\n  ThemeContext,\n  ThemeContextProps,\n  ThemeRadius,\n  ThemeRoundness,\n} from \"./theme-context\";\nimport { ThemePropsDefs } from \"./theme.props\";\n\nexport type ThemeProps = GetProps<typeof ThemePropsDefs> &\n  React.HTMLAttributes<HTMLDivElement>;\n\nconst Theme = React.forwardRef<HTMLDivElement, ThemeProps>((props, ref) => {\n  const context = React.useContext(ThemeContext);\n  const isRoot = context === undefined;\n\n  if (isRoot) return <ThemeRoot {...props} ref={ref} />;\n\n  return <ThemeSub {...props} ref={ref} />;\n});\nTheme.displayName = \"Theme\";\n\nconst ThemeRoot = React.forwardRef<HTMLDivElement, ThemeProps>((props, ref) => {\n  const {\n    appearance: themeAppearance,\n    radius: themeRadius,\n    roundness: themeRoundness,\n    spacing: themeSpacing,\n\n    children,\n    ...rest\n  } = props;\n\n  const [appearance, setAppearance] = React.useState<ThemeAppearance>(\n    themeAppearance ?? \"light\"\n  );\n  const [radius, setRadius] = React.useState<ThemeRadius>(themeRadius ?? \"md\");\n  const [roundness, setRoundness] = React.useState<ThemeRoundness>(\n    themeRoundness ?? \"3\"\n  );\n  const [spacing, setSpacing] = React.useState(themeSpacing ?? \"md\");\n\n  const value = React.useMemo(\n    () => ({\n      appearance,\n      radius,\n      roundness,\n      spacing,\n      onAppearanceChange: setAppearance,\n      onRadiusChange: setRadius,\n      onRoundnessChange: setRoundness,\n      onSpacingChange: setSpacing,\n    }),\n    [appearance, radius, roundness, spacing]\n  );\n\n  return (\n    <ThemeContext.Provider value={value}>\n      <div\n        ref={ref}\n        data-appearance={appearance}\n        data-theme-radius={radius}\n        data-theme-roundness={roundness}\n        data-theme-spacing={spacing}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  );\n});\nThemeRoot.displayName = \"ThemeRoot\";\n\nconst ThemeSub = React.forwardRef<\n  HTMLDivElement,\n  Partial<ThemeContextProps> &\n    React.HTMLAttributes<HTMLDivElement> & { isRoot?: boolean }\n>((props, ref) => {\n  const context = React.useContext(ThemeContext)!;\n\n  const {\n    appearance,\n    radius,\n    roundness,\n    spacing,\n    onAppearanceChange,\n    onRadiusChange,\n    onRoundnessChange,\n    onSpacingChange,\n\n    children,\n    ...rest\n  } = props;\n\n  const contextProps: ThemeContextProps = {\n    appearance: appearance ?? context.appearance,\n    radius: radius ?? context.radius,\n    roundness: roundness ?? context.roundness,\n    spacing: spacing ?? context.spacing,\n\n    onAppearanceChange: context.onAppearanceChange,\n    onRadiusChange: context.onRadiusChange,\n    onRoundnessChange: context.onRoundnessChange,\n    onSpacingChange: context.onSpacingChange,\n  };\n\n  return (\n    <ThemeContext.Provider value={contextProps}>\n      <div\n        ref={ref}\n        data-appearance={appearance}\n        data-theme-radius={radius}\n        data-theme-roundness={roundness}\n        data-theme-spacing={spacing}\n        {...rest}\n        className=\"flex\"\n      >\n        {children}\n      </div>\n    </ThemeContext.Provider>\n  );\n});\nThemeSub.displayName = \"ThemeSub\";\n\nexport { Theme };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBqB;AAlBrB,YAAuB;AAEvB,2BAMO;AAMP,MAAM,QAAQ,MAAM,WAAuC,CAAC,OAAO,QAAQ;AACzE,QAAM,UAAU,MAAM,WAAW,iCAAY;AAC7C,QAAM,SAAS,YAAY;AAE3B,MAAI,OAAQ,QAAO,4CAAC,aAAW,GAAG,OAAO,KAAU;AAEnD,SAAO,4CAAC,YAAU,GAAG,OAAO,KAAU;AACxC,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,YAAY,MAAM,WAAuC,CAAC,OAAO,QAAQ;AAC7E,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,SAAS;AAAA,IAET;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,YAAY,aAAa,IAAI,MAAM;AAAA,IACxC,mBAAmB;AAAA,EACrB;AACA,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAsB,eAAe,IAAI;AAC3E,QAAM,CAAC,WAAW,YAAY,IAAI,MAAM;AAAA,IACtC,kBAAkB;AAAA,EACpB;AACA,QAAM,CAAC,SAAS,UAAU,IAAI,MAAM,SAAS,gBAAgB,IAAI;AAEjE,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAoB;AAAA,MACpB,gBAAgB;AAAA,MAChB,mBAAmB;AAAA,MACnB,iBAAiB;AAAA,IACnB;AAAA,IACA,CAAC,YAAY,QAAQ,WAAW,OAAO;AAAA,EACzC;AAEA,SACE,4CAAC,kCAAa,UAAb,EAAsB,OACrB;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,mBAAiB;AAAA,MACjB,qBAAmB;AAAA,MACnB,wBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACnB,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,UAAU,cAAc;AAExB,MAAM,WAAW,MAAM,WAIrB,CAAC,OAAO,QAAQ;AAChB,QAAM,UAAU,MAAM,WAAW,iCAAY;AAE7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IAEA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,eAAkC;AAAA,IACtC,YAAY,cAAc,QAAQ;AAAA,IAClC,QAAQ,UAAU,QAAQ;AAAA,IAC1B,WAAW,aAAa,QAAQ;AAAA,IAChC,SAAS,WAAW,QAAQ;AAAA,IAE5B,oBAAoB,QAAQ;AAAA,IAC5B,gBAAgB,QAAQ;AAAA,IACxB,mBAAmB,QAAQ;AAAA,IAC3B,iBAAiB,QAAQ;AAAA,EAC3B;AAEA,SACE,4CAAC,kCAAa,UAAb,EAAsB,OAAO,cAC5B;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,mBAAiB;AAAA,MACjB,qBAAmB;AAAA,MACnB,wBAAsB;AAAA,MACtB,sBAAoB;AAAA,MACnB,GAAG;AAAA,MACJ,WAAU;AAAA,MAET;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,SAAS,cAAc;","names":[]}