jvdm-ui 1.0.5

package/dist/client/theme-toggle.js

@@ -0,0 +1,126 @@
+"use client";
+"use client";
+
+// src/atoms/icon/svg/index.tsx
+import { jsx } from "react/jsx-runtime";
+var SIZES = {
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-5 w-5",
+  xl: "h-6 w-6",
+  "2xl": "h-8 w-8"
+};
+function Svg({ size = "md", className = "", children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: `${SIZES[size]} shrink-0 ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+
+// src/atoms/icon/moon-icon/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MoonIcon(p) {
+  return /* @__PURE__ */ jsx2(Svg, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "M20 14.2A8.2 8.2 0 0 1 9.8 4a8.2 8.2 0 1 0 10.2 10.2Z" }) });
+}
+
+// src/atoms/icon/sun-icon/index.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function SunIcon(p) {
+  return /* @__PURE__ */ jsxs(Svg, { ...p, children: [
+    /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx3("path", { d: "M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4" })
+  ] });
+}
+
+// src/atoms/button/button-style.ts
+var VARIANTS = {
+  primary: "bg-accent font-medium text-on-accent hover:bg-accent-ink",
+  secondary: "border border-line-strong hover:bg-raised",
+  ghost: "text-ink-muted hover:bg-raised hover:text-ink-soft",
+  danger: "border border-danger/50 text-danger hover:bg-danger-soft"
+};
+var SIZES2 = {
+  sm: "gap-2 px-3 py-2 text-xs",
+  md: "gap-2 px-4 py-3 text-sm",
+  lg: "gap-2 px-4 py-4 text-base",
+  icon: "h-10 w-10 shrink-0",
+  "icon-sm": "h-8 w-8 shrink-0"
+};
+var BASE = "inline-flex touch-manipulation select-none items-center justify-center rounded-md transition-[background-color,border-color,color,box-shadow,transform] duration-(--duration-fast) ease-out active:scale-95 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent focus-visible:ring-2 focus-visible:ring-accent/30 disabled:pointer-events-none disabled:opacity-50";
+function buttonClass({
+  variant = "secondary",
+  size = "md",
+  className = ""
+} = {}) {
+  return `${BASE} ${VARIANTS[variant]} ${SIZES2[size]} ${className}`;
+}
+
+// src/atoms/icon-button/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function IconButton({
+  label,
+  variant = "ghost",
+  size = "icon",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      ...props,
+      "aria-label": label,
+      title: label,
+      className: buttonClass({ variant, size, className })
+    }
+  );
+}
+
+// src/tokens/theme.ts
+import { useState } from "react";
+var KEY = "jvdm-ui.theme";
+function stored() {
+  const value = localStorage.getItem(KEY);
+  return value === "dark" || value === "light" ? value : null;
+}
+function systemTheme() {
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function useTheme() {
+  const [theme, setTheme] = useState(() => stored() ?? systemTheme());
+  function toggle() {
+    const next = theme === "dark" ? "light" : "dark";
+    document.documentElement.dataset.theme = next;
+    localStorage.setItem(KEY, next);
+    setTheme(next);
+  }
+  return { theme, toggle };
+}
+
+// src/atoms/theme-toggle/locales.ts
+var NAME = { dark: "dark", light: "light" };
+var THEME_TOGGLE = {
+  label: (theme) => `Switch to ${NAME[theme === "dark" ? "light" : "dark"]} theme`
+};
+
+// src/atoms/theme-toggle/index.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ThemeToggle({ label = THEME_TOGGLE.label }) {
+  const { theme, toggle } = useTheme();
+  const text = label(theme);
+  return /* @__PURE__ */ jsx5(IconButton, { label: text, size: "icon-sm", onClick: toggle, children: theme === "dark" ? /* @__PURE__ */ jsx5(SunIcon, { size: "lg" }) : /* @__PURE__ */ jsx5(MoonIcon, { size: "lg" }) });
+}
+export {
+  ThemeToggle
+};
+//# sourceMappingURL=theme-toggle.js.map

package/dist/client/theme-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/atoms/icon/svg/index.tsx","../../src/atoms/icon/moon-icon/index.tsx","../../src/atoms/icon/sun-icon/index.tsx","../../src/atoms/button/button-style.ts","../../src/atoms/icon-button/index.tsx","../../src/tokens/theme.ts","../../src/atoms/theme-toggle/locales.ts","../../src/atoms/theme-toggle/index.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\nconst SIZES: Record<IconSize, string> = {\n  sm: \"h-3 w-3\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n  xl: \"h-6 w-6\",\n  \"2xl\": \"h-8 w-8\",\n};\n\nexport type Props = { size?: IconSize; className?: string };\n\nexport function Svg({ size = \"md\", className = \"\", children }: Props & { children: ReactNode }) {\n  return (\n    <svg\n      className={`${SIZES[size]} shrink-0 ${className}`}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      {children}\n    </svg>\n  );\n}\n","import { Svg, type Props } from \"../svg\";\n\nexport function MoonIcon(p: Props) {\n  return (\n    <Svg {...p}>\n      <path d=\"M20 14.2A8.2 8.2 0 0 1 9.8 4a8.2 8.2 0 1 0 10.2 10.2Z\" />\n    </Svg>\n  );\n}\n","import { Svg, type Props } from \"../svg\";\n\nexport function SunIcon(p: Props) {\n  return (\n    <Svg {...p}>\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path d=\"M12 2.5v2M12 19.5v2M4.6 4.6l1.4 1.4M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4\" />\n    </Svg>\n  );\n}\n","export type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\" | \"icon-sm\";\n\nconst VARIANTS: Record<ButtonVariant, string> = {\n  primary: \"bg-accent font-medium text-on-accent hover:bg-accent-ink\",\n  secondary: \"border border-line-strong hover:bg-raised\",\n  ghost: \"text-ink-muted hover:bg-raised hover:text-ink-soft\",\n  danger: \"border border-danger/50 text-danger hover:bg-danger-soft\",\n};\n\nconst SIZES: Record<ButtonSize, string> = {\n  sm: \"gap-2 px-3 py-2 text-xs\",\n  md: \"gap-2 px-4 py-3 text-sm\",\n  lg: \"gap-2 px-4 py-4 text-base\",\n  icon: \"h-10 w-10 shrink-0\",\n  \"icon-sm\": \"h-8 w-8 shrink-0\",\n};\n\nconst BASE =\n  \"inline-flex touch-manipulation select-none items-center justify-center rounded-md transition-[background-color,border-color,color,box-shadow,transform] duration-(--duration-fast) ease-out active:scale-95\" +\n  \" focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent focus-visible:ring-2 focus-visible:ring-accent/30\" +\n  \" disabled:pointer-events-none disabled:opacity-50\";\n\nexport type ButtonOptions = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  className?: string;\n};\n\nexport function buttonClass({\n  variant = \"secondary\",\n  size = \"md\",\n  className = \"\",\n}: ButtonOptions = {}) {\n  return `${BASE} ${VARIANTS[variant]} ${SIZES[size]} ${className}`;\n}\n","import type { ComponentProps } from \"react\";\n\nimport { buttonClass, type ButtonVariant } from \"../button\";\n\nexport type IconButtonSize = \"icon\" | \"icon-sm\";\n\nexport function IconButton({\n  label,\n  variant = \"ghost\",\n  size = \"icon\",\n  className,\n  ...props\n}: {\n  label: string;\n  variant?: ButtonVariant;\n  size?: IconButtonSize;\n} & Omit<ComponentProps<\"button\">, \"aria-label\" | \"size\">) {\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      aria-label={label}\n      title={label}\n      className={buttonClass({ variant, size, className })}\n    />\n  );\n}\n","\"use client\";\n\nimport { useState } from \"react\";\n\nexport type Theme = \"dark\" | \"light\";\n\nconst KEY = \"jvdm-ui.theme\";\n\nfunction stored(): Theme | null {\n  const value = localStorage.getItem(KEY);\n  return value === \"dark\" || value === \"light\" ? value : null;\n}\n\nfunction systemTheme(): Theme {\n  return window.matchMedia(\"(prefers-color-scheme: light)\").matches ? \"light\" : \"dark\";\n}\n\nexport function applyStoredTheme() {\n  const theme = stored();\n  if (theme) document.documentElement.dataset.theme = theme;\n}\n\nexport function useTheme() {\n  const [theme, setTheme] = useState<Theme>(() => stored() ?? systemTheme());\n\n  function toggle() {\n    const next: Theme = theme === \"dark\" ? \"light\" : \"dark\";\n    document.documentElement.dataset.theme = next;\n    localStorage.setItem(KEY, next);\n    setTheme(next);\n  }\n\n  return { theme, toggle };\n}\n","import type { Theme } from \"../../tokens\";\n\nconst NAME: Record<Theme, string> = { dark: \"dark\", light: \"light\" };\n\nexport const THEME_TOGGLE = {\n  label: (theme: Theme) => `Switch to ${NAME[theme === \"dark\" ? \"light\" : \"dark\"]} theme`,\n};\n","\"use client\";\n\nimport { MoonIcon, SunIcon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\nimport { useTheme, type Theme } from \"../../tokens\";\nimport { THEME_TOGGLE as T } from \"./locales\";\n\nexport function ThemeToggle({ label = T.label }: { label?: (theme: Theme) => string }) {\n  const { theme, toggle } = useTheme();\n  const text = label(theme);\n\n  return (\n    <IconButton label={text} size=\"icon-sm\" onClick={toggle}>\n      {theme === \"dark\" ? <SunIcon size=\"lg\" /> : <MoonIcon size=\"lg\" />}\n    </IconButton>\n  );\n}\n"],"mappings":"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","names":["jsx","jsx","SIZES","jsx","jsx"]}

package/dist/client/theme.d.ts

@@ -0,0 +1,8 @@
+type Theme = "dark" | "light";
+declare function applyStoredTheme(): void;
+declare function useTheme(): {
+    theme: Theme;
+    toggle: () => void;
+};
+
+export { type Theme, applyStoredTheme, useTheme };

package/dist/client/theme.js

@@ -0,0 +1,32 @@
+"use client";
+"use client";
+
+// src/tokens/theme.ts
+import { useState } from "react";
+var KEY = "jvdm-ui.theme";
+function stored() {
+  const value = localStorage.getItem(KEY);
+  return value === "dark" || value === "light" ? value : null;
+}
+function systemTheme() {
+  return window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function applyStoredTheme() {
+  const theme = stored();
+  if (theme) document.documentElement.dataset.theme = theme;
+}
+function useTheme() {
+  const [theme, setTheme] = useState(() => stored() ?? systemTheme());
+  function toggle() {
+    const next = theme === "dark" ? "light" : "dark";
+    document.documentElement.dataset.theme = next;
+    localStorage.setItem(KEY, next);
+    setTheme(next);
+  }
+  return { theme, toggle };
+}
+export {
+  applyStoredTheme,
+  useTheme
+};
+//# sourceMappingURL=theme.js.map

package/dist/client/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tokens/theme.ts"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\n\nexport type Theme = \"dark\" | \"light\";\n\nconst KEY = \"jvdm-ui.theme\";\n\nfunction stored(): Theme | null {\n  const value = localStorage.getItem(KEY);\n  return value === \"dark\" || value === \"light\" ? value : null;\n}\n\nfunction systemTheme(): Theme {\n  return window.matchMedia(\"(prefers-color-scheme: light)\").matches ? \"light\" : \"dark\";\n}\n\nexport function applyStoredTheme() {\n  const theme = stored();\n  if (theme) document.documentElement.dataset.theme = theme;\n}\n\nexport function useTheme() {\n  const [theme, setTheme] = useState<Theme>(() => stored() ?? systemTheme());\n\n  function toggle() {\n    const next: Theme = theme === \"dark\" ? \"light\" : \"dark\";\n    document.documentElement.dataset.theme = next;\n    localStorage.setItem(KEY, next);\n    setTheme(next);\n  }\n\n  return { theme, toggle };\n}\n"],"mappings":";;;;AAEA,SAAS,gBAAgB;AAIzB,IAAM,MAAM;AAEZ,SAAS,SAAuB;AAC9B,QAAM,QAAQ,aAAa,QAAQ,GAAG;AACtC,SAAO,UAAU,UAAU,UAAU,UAAU,QAAQ;AACzD;AAEA,SAAS,cAAqB;AAC5B,SAAO,OAAO,WAAW,+BAA+B,EAAE,UAAU,UAAU;AAChF;AAEO,SAAS,mBAAmB;AACjC,QAAM,QAAQ,OAAO;AACrB,MAAI,MAAO,UAAS,gBAAgB,QAAQ,QAAQ;AACtD;AAEO,SAAS,WAAW;AACzB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB,MAAM,OAAO,KAAK,YAAY,CAAC;AAEzE,WAAS,SAAS;AAChB,UAAM,OAAc,UAAU,SAAS,UAAU;AACjD,aAAS,gBAAgB,QAAQ,QAAQ;AACzC,iBAAa,QAAQ,KAAK,IAAI;AAC9B,aAAS,IAAI;AAAA,EACf;AAEA,SAAO,EAAE,OAAO,OAAO;AACzB;","names":[]}

package/dist/client/time-picker.d.ts

@@ -0,0 +1,10 @@
+import * as react from 'react';
+import { ComponentProps } from 'react';
+
+declare function TimePicker({ value, defaultValue, onValueChange, className, ...props }: Omit<ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}): react.JSX.Element;
+
+export { TimePicker };

package/dist/client/time-picker.js

@@ -0,0 +1,140 @@
+"use client";
+"use client";
+
+// src/atoms/time-picker/index.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/atoms/icon/svg/index.tsx
+import { jsx } from "react/jsx-runtime";
+var SIZES = {
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-5 w-5",
+  xl: "h-6 w-6",
+  "2xl": "h-8 w-8"
+};
+function Svg({ size = "md", className = "", children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: `${SIZES[size]} shrink-0 ${className}`,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children
+    }
+  );
+}
+
+// src/atoms/icon/chevron-icon/index.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ChevronIcon(p) {
+  return /* @__PURE__ */ jsx2(Svg, { ...p, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
+}
+
+// src/atoms/time-picker/locales.ts
+var locales = {
+  choose: "Choose a time",
+  hours: "Hours",
+  minutes: "Minutes"
+};
+
+// src/atoms/time-picker/index.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var CONTROL = "w-full min-w-0 rounded-md border border-line-strong bg-field px-4 py-3 text-base text-ink transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none focus:border-accent focus:ring-2 focus:ring-accent/30 sm:text-sm";
+var HOURS = Array.from({ length: 24 }, (_, index) => String(index).padStart(2, "0"));
+var MINUTES = Array.from({ length: 12 }, (_, index) => String(index * 5).padStart(2, "0"));
+function TimePicker({
+  value,
+  defaultValue = "",
+  onValueChange,
+  className = "",
+  ...props
+}) {
+  const [selected, setSelected] = useState(value ?? defaultValue);
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const [selectedHour, selectedMinute] = (selected || "09:00").split(":");
+  useEffect(() => {
+    function handleDocument(event) {
+      if (!ref.current?.contains(event.target)) setOpen(false);
+    }
+    function handleKey(event) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", handleDocument);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleDocument);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, []);
+  function choose(hour, minute) {
+    const next = `${hour}:${minute}`;
+    setSelected(next);
+    onValueChange?.(next);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `time-picker-root relative w-full ${open ? "time-picker-root-open" : ""}`,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            ...props,
+            "aria-label": props["aria-label"] ?? locales.choose,
+            className: `${CONTROL} cursor-pointer ${className}`,
+            onClick: () => setOpen(true),
+            readOnly: true,
+            value: selected
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          ChevronIcon,
+          {
+            className: "pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-ink-muted",
+            size: "md"
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs("div", { className: "fixed right-4 bottom-4 left-4 z-20 grid max-h-[min(28rem,calc(100dvh-2rem))] grid-cols-2 gap-4 rounded-xl border border-line bg-surface p-4 text-ink shadow-modal sm:absolute sm:top-full sm:right-0 sm:bottom-auto sm:left-auto sm:mt-2 sm:w-64 sm:rounded-lg sm:shadow-popover", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "mb-2 text-2xs tracking-caps text-ink-dim uppercase", children: locales.hours }),
+            /* @__PURE__ */ jsx3("div", { className: "flex max-h-60 flex-col gap-1 overflow-y-auto overscroll-contain sm:max-h-52", children: HOURS.map((hour) => /* @__PURE__ */ jsx3(
+              "button",
+              {
+                className: `min-h-11 rounded-sm px-3 py-2 text-left text-sm transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${hour === selectedHour ? "bg-accent text-on-accent hover:bg-accent-ink" : "text-ink-soft"}`,
+                onClick: () => choose(hour, selectedMinute),
+                type: "button",
+                children: hour
+              },
+              hour
+            )) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx3("p", { className: "mb-2 text-2xs tracking-caps text-ink-dim uppercase", children: locales.minutes }),
+            /* @__PURE__ */ jsx3("div", { className: "flex max-h-60 flex-col gap-1 overflow-y-auto overscroll-contain sm:max-h-52", children: MINUTES.map((minute) => /* @__PURE__ */ jsx3(
+              "button",
+              {
+                className: `min-h-11 rounded-sm px-3 py-2 text-left text-sm transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${minute === selectedMinute ? "bg-accent text-on-accent hover:bg-accent-ink" : "text-ink-soft"}`,
+                onClick: () => choose(selectedHour, minute),
+                type: "button",
+                children: minute
+              },
+              minute
+            )) })
+          ] })
+        ] }) : null
+      ]
+    }
+  );
+}
+export {
+  TimePicker
+};
+//# sourceMappingURL=time-picker.js.map

package/dist/client/time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/atoms/time-picker/index.tsx","../../src/atoms/icon/svg/index.tsx","../../src/atoms/icon/chevron-icon/index.tsx","../../src/atoms/time-picker/locales.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ComponentProps } from \"react\";\n\nimport { ChevronIcon } from \"../icon\";\nimport { locales } from \"./locales\";\n\nconst CONTROL =\n  \"w-full min-w-0 rounded-md border border-line-strong bg-field px-4 py-3 text-base text-ink transition-[background-color,border-color,box-shadow] duration-(--duration-fast) ease-out outline-none focus:border-accent focus:ring-2 focus:ring-accent/30 sm:text-sm\";\nconst HOURS = Array.from({ length: 24 }, (_, index) => String(index).padStart(2, \"0\"));\nconst MINUTES = Array.from({ length: 12 }, (_, index) => String(index * 5).padStart(2, \"0\"));\n\nexport function TimePicker({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  className = \"\",\n  ...props\n}: Omit<ComponentProps<\"input\">, \"type\" | \"value\" | \"defaultValue\" | \"onChange\"> & {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n}) {\n  const [selected, setSelected] = useState(value ?? defaultValue);\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const [selectedHour, selectedMinute] = (selected || \"09:00\").split(\":\");\n\n  useEffect(() => {\n    function handleDocument(event: MouseEvent) {\n      if (!ref.current?.contains(event.target as Node)) setOpen(false);\n    }\n    function handleKey(event: KeyboardEvent) {\n      if (event.key === \"Escape\") setOpen(false);\n    }\n    document.addEventListener(\"mousedown\", handleDocument);\n    document.addEventListener(\"keydown\", handleKey);\n    return () => {\n      document.removeEventListener(\"mousedown\", handleDocument);\n      document.removeEventListener(\"keydown\", handleKey);\n    };\n  }, []);\n\n  function choose(hour: string, minute: string) {\n    const next = `${hour}:${minute}`;\n    setSelected(next);\n    onValueChange?.(next);\n  }\n\n  return (\n    <div\n      className={`time-picker-root relative w-full ${open ? \"time-picker-root-open\" : \"\"}`}\n      ref={ref}\n    >\n      <input\n        {...props}\n        aria-label={props[\"aria-label\"] ?? locales.choose}\n        className={`${CONTROL} cursor-pointer ${className}`}\n        onClick={() => setOpen(true)}\n        readOnly\n        value={selected}\n      />\n      <ChevronIcon\n        className=\"pointer-events-none absolute top-1/2 right-4 -translate-y-1/2 text-ink-muted\"\n        size=\"md\"\n      />\n      {open ? (\n        <div className=\"fixed right-4 bottom-4 left-4 z-20 grid max-h-[min(28rem,calc(100dvh-2rem))] grid-cols-2 gap-4 rounded-xl border border-line bg-surface p-4 text-ink shadow-modal sm:absolute sm:top-full sm:right-0 sm:bottom-auto sm:left-auto sm:mt-2 sm:w-64 sm:rounded-lg sm:shadow-popover\">\n          <div>\n            <p className=\"mb-2 text-2xs tracking-caps text-ink-dim uppercase\">{locales.hours}</p>\n            <div className=\"flex max-h-60 flex-col gap-1 overflow-y-auto overscroll-contain sm:max-h-52\">\n              {HOURS.map((hour) => (\n                <button\n                  className={`min-h-11 rounded-sm px-3 py-2 text-left text-sm transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${hour === selectedHour ? \"bg-accent text-on-accent hover:bg-accent-ink\" : \"text-ink-soft\"}`}\n                  key={hour}\n                  onClick={() => choose(hour, selectedMinute)}\n                  type=\"button\"\n                >\n                  {hour}\n                </button>\n              ))}\n            </div>\n          </div>\n          <div>\n            <p className=\"mb-2 text-2xs tracking-caps text-ink-dim uppercase\">{locales.minutes}</p>\n            <div className=\"flex max-h-60 flex-col gap-1 overflow-y-auto overscroll-contain sm:max-h-52\">\n              {MINUTES.map((minute) => (\n                <button\n                  className={`min-h-11 rounded-sm px-3 py-2 text-left text-sm transition-colors duration-(--duration-fast) ease-out hover:bg-raised focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${minute === selectedMinute ? \"bg-accent text-on-accent hover:bg-accent-ink\" : \"text-ink-soft\"}`}\n                  key={minute}\n                  onClick={() => choose(selectedHour, minute)}\n                  type=\"button\"\n                >\n                  {minute}\n                </button>\n              ))}\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n","import type { ReactNode } from \"react\";\n\nexport type IconSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\nconst SIZES: Record<IconSize, string> = {\n  sm: \"h-3 w-3\",\n  md: \"h-4 w-4\",\n  lg: \"h-5 w-5\",\n  xl: \"h-6 w-6\",\n  \"2xl\": \"h-8 w-8\",\n};\n\nexport type Props = { size?: IconSize; className?: string };\n\nexport function Svg({ size = \"md\", className = \"\", children }: Props & { children: ReactNode }) {\n  return (\n    <svg\n      className={`${SIZES[size]} shrink-0 ${className}`}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      {children}\n    </svg>\n  );\n}\n","import { Svg, type Props } from \"../svg\";\n\nexport function ChevronIcon(p: Props) {\n  return (\n    <Svg {...p}>\n      <path d=\"m6 9 6 6 6-6\" />\n    </Svg>\n  );\n}\n","export const locales = {\n  choose: \"Choose a time\",\n  hours: \"Hours\",\n  minutes: \"Minutes\",\n};\n"],"mappings":"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","names":["jsx","jsx"]}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Theme, applyStoredTheme, useTheme } from './tokens/index.js';
+export { AccessIcon, AlertIcon, Avatar, AvatarSize, BackIcon, Badge, BadgeTone, BoxIcon, BuildingIcon, Button, ButtonOptions, ButtonSize, ButtonVariant, CONTROL, CONTROL_SIZES, CalendarIcon, CarIcon, Card, CardPadding, Checkbox, ChevronIcon, CloseIcon, Combobox, ComboboxOption, ControlSize, DashboardIcon, DatePicker, DateTimePicker, Divider, EyeIcon, EyeOffIcon, FaceIcon, FactoryIcon, FileUpload, FormAlert, FunnelIcon, GavelIcon, IconButton, IconButtonSize, IconSize, Input, InstagramIcon, Kbd, Label, Link, LinkTone, LogoutIcon, MailIcon, MoonIcon, MoreIcon, MultiSelect, MultiSelectOption, NumberInput, PasswordInput, PencilIcon, PhoneIcon, PinInput, PlansIcon, PlusIcon, ProgressBar, ProgressTone, Props, Radio, RangeDatePicker, SearchIcon, Segmented, SegmentedOption, Select, ShieldCheckIcon, Skeleton, Slider, Spinner, SpinnerSize, StaffIcon, StudentsIcon, SunIcon, Svg, Switch, Textarea, ThemeToggle, Thumb, TimePicker, TrashIcon, WhatsappIcon, buttonClass } from './atoms/index.js';
+export { Accordion, AccordionItem, Banner, BannerTone, Breadcrumb, Callout, CalloutTone, CardTitle, CodeBlock, CommandItem, CommandMenu, ConfirmDialog, Crumb, Drawer, DropdownMenu, Empty, Field, FilterBar, Gallery, ImagePreview, LoadError, Menu, MenuAlign, MenuItemOptions, MenuItemTone, MetricCard, Modal, PageHeader, Pagination, Snackbar, SnackbarStack, StatCard, Step, Stepper, Tab, Tabs, Toast, ToastTone, Tooltip, TooltipSide, TreeNode, TreeView, menuItemClass } from './molecules/index.js';
+export { AreaChart, AreaPoint, Bar, BarChart, Column, DataTable, DonutChart, DonutDatum, GRID_ROW, KanbanBoard, KanbanCard, KanbanColumn, LineChart, Sparkline, Timeline, TimelineItem } from './organisms/index.js';
+import 'react';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { applyStoredTheme, useTheme } from './chunk-CGDYSB4G.js';
+export { Accordion, Banner, Breadcrumb, Callout, CardTitle, CommandMenu, Drawer, DropdownMenu, Empty, Field, FilterBar, Gallery, ImagePreview, LoadError, Menu, MetricCard, PageHeader, Pagination, SnackbarStack, StatCard, Stepper, Tabs, Toast, Tooltip, TreeView, menuItemClass } from './chunk-AHE2576G.js';
+export { AreaChart, BarChart, DataTable, DonutChart, GRID_ROW, KanbanBoard, LineChart, Sparkline, Timeline } from './chunk-JYNDKPAH.js';
+export { AccessIcon, AlertIcon, Avatar, BackIcon, Badge, BoxIcon, BuildingIcon, Button, CONTROL, CONTROL_SIZES, CalendarIcon, CarIcon, Card, Checkbox, ChevronIcon, CloseIcon, Combobox, DashboardIcon, DateTimePicker, Divider, EyeIcon, EyeOffIcon, FaceIcon, FactoryIcon, FormAlert, FunnelIcon, GavelIcon, IconButton, Input, InstagramIcon, Kbd, Label, Link, LogoutIcon, MailIcon, MoonIcon, MoreIcon, PasswordInput, PencilIcon, PhoneIcon, PlansIcon, PlusIcon, ProgressBar, Radio, RangeDatePicker, SearchIcon, Segmented, Select, ShieldCheckIcon, Skeleton, Slider, Spinner, StaffIcon, StudentsIcon, SunIcon, Svg, Switch, Textarea, ThemeToggle, Thumb, TrashIcon, WhatsappIcon, buttonClass } from './chunk-WWOXGKLF.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}