@fabio.caffarello/react-design-system 3.8.0 → 3.9.0

package/dist/granular/ui/components/Tabs/TabsContext.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as o, useContext as e } from "react";
+const n = o(void 0);
+function r() {
+  const t = e(n);
+  if (t === void 0)
+    throw new Error("useTabsContext must be used within a Tabs component");
+  return t;
+}
+function u() {
+  return e(n);
+}
+export {
+  n as TabsContext,
+  r as useTabsContext,
+  u as useTabsContextOptional
+};
+//# sourceMappingURL=TabsContext.js.map

package/dist/granular/ui/components/Tabs/TabsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsContext.js","sources":["../../../../../src/ui/components/Tabs/TabsContext.tsx"],"sourcesContent":["\"use client\";\n\n/* eslint-disable react-refresh/only-export-components */\nimport { createContext, useContext } from \"react\";\n\nexport interface TabsContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  activationMode?: \"automatic\" | \"manual\";\n}\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\n/**\n * Hook to access Tabs context\n *\n * @throws Error if used outside of Tabs component\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext);\n\n  if (context === undefined) {\n    throw new Error(\"useTabsContext must be used within a Tabs component\");\n  }\n\n  return context;\n}\n\n/**\n * Hook to access Tabs context (optional, returns undefined if not in Tabs)\n */\nexport function useTabsContextOptional(): TabsContextValue | undefined {\n  return useContext(TabsContext);\n}\n\nexport { TabsContext };\n"],"names":["TabsContext","createContext","useTabsContext","context","useContext","useTabsContextOptional"],"mappings":";;AAYA,MAAMA,IAAcC,EAA4C,MAAS;AAOlE,SAASC,IAAmC;AACjD,QAAMC,IAAUC,EAAWJ,CAAW;AAEtC,MAAIG,MAAY;AACd,UAAM,IAAI,MAAM,qDAAqD;AAGvE,SAAOA;AACT;AAKO,SAASE,IAAuD;AACrE,SAAOD,EAAWJ,CAAW;AAC/B;"}

package/dist/granular/ui/components/Tabs/TabsList.js

@@ -0,0 +1,84 @@
+"use client";
+var I = Object.defineProperty, z = Object.defineProperties;
+var S = Object.getOwnPropertyDescriptors;
+var c = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, w = Object.prototype.propertyIsEnumerable;
+var y = (e, t, n) => t in e ? I(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, k = (e, t) => {
+  for (var n in t || (t = {}))
+    h.call(t, n) && y(e, n, t[n]);
+  if (c)
+    for (var n of c(t))
+      w.call(t, n) && y(e, n, t[n]);
+  return e;
+}, D = (e, t) => z(e, S(t));
+var b = (e, t) => {
+  var n = {};
+  for (var r in e)
+    h.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
+  if (e != null && c)
+    for (var r of c(e))
+      t.indexOf(r) < 0 && w.call(e, r) && (n[r] = e[r]);
+  return n;
+};
+import { jsx as T } from "react/jsx-runtime";
+import { useTabsContext as j } from "./TabsContext.js";
+import { useRef as q, useEffect as H } from "react";
+import { cn as u } from "../../utils/cn.js";
+import { getSpacingClass as m } from "../../tokens/spacing.js";
+import { getRadiusClass as K } from "../../tokens/radius.js";
+function Q(N) {
+  var d = N, {
+    children: e,
+    className: t = "",
+    variant: n = "default",
+    orientation: r
+  } = d, A = b(d, [
+    "children",
+    "className",
+    "variant",
+    "orientation"
+  ]);
+  var p;
+  const { orientation: C } = j(), f = (p = r != null ? r : C) != null ? p : "horizontal", g = q(null);
+  H(() => {
+    const a = g.current;
+    if (!a) return;
+    const x = (l) => {
+      var v;
+      const o = Array.from(
+        a.querySelectorAll(
+          '[role="tab"]:not([disabled])'
+        )
+      ), i = o.findIndex(
+        (R) => R === document.activeElement
+      );
+      if (i === -1) return;
+      let s = i;
+      f === "horizontal" ? l.key === "ArrowRight" ? (l.preventDefault(), s = (i + 1) % o.length) : l.key === "ArrowLeft" && (l.preventDefault(), s = (i - 1 + o.length) % o.length) : l.key === "ArrowDown" ? (l.preventDefault(), s = (i + 1) % o.length) : l.key === "ArrowUp" && (l.preventDefault(), s = (i - 1 + o.length) % o.length), l.key === "Home" ? (l.preventDefault(), s = 0) : l.key === "End" && (l.preventDefault(), s = o.length - 1), s !== i && ((v = o[s]) == null || v.focus());
+    };
+    return a.addEventListener("keydown", x), () => a.removeEventListener("keydown", x);
+  }, [f]);
+  const E = n === "compact" && f === "vertical" ? "flex" : "inline-flex", L = f === "vertical" ? u("flex-col", m("xs", "gap")) : u("flex-row", m("xs", "gap"));
+  return /* @__PURE__ */ T(
+    "div",
+    D(k({
+      ref: g,
+      role: "tablist",
+      "aria-orientation": f,
+      className: u(
+        E,
+        L,
+        m("xs", "p"),
+        "bg-surface-muted",
+        K("md"),
+        t
+      )
+    }, A), {
+      children: e
+    })
+  );
+}
+export {
+  Q as TabsList
+};
+//# sourceMappingURL=TabsList.js.map

package/dist/granular/ui/components/Tabs/TabsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsList.js","sources":["../../../../../src/ui/components/Tabs/TabsList.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTabsContext } from \"./TabsContext\";\nimport { useRef, useEffect, type HTMLAttributes, type ReactNode } from \"react\";\nimport { cn } from \"../../utils\";\nimport { getRadiusClass, getSpacingClass } from \"../../tokens\";\n\nexport interface TabsListProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"orientation\"\n> {\n  children: ReactNode;\n  variant?: \"default\" | \"compact\";\n  /**\n   * Override orientation set on the `Tabs` provider. When omitted,\n   * inherits from context (default \"horizontal\"). Controls keyboard\n   * navigation axis (ArrowLeft/Right vs ArrowUp/Down), flex direction,\n   * and `aria-orientation`.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\n/**\n * TabsList Component\n *\n * Container for tab triggers.\n * Manages keyboard navigation between tabs.\n * Must be used within a Tabs component.\n *\n * Orientation precedence: local `orientation` prop > Tabs context > \"horizontal\".\n */\nexport function TabsList({\n  children,\n  className = \"\",\n  variant = \"default\",\n  orientation: orientationProp,\n  ...props\n}: TabsListProps) {\n  const { orientation: contextOrientation } = useTabsContext();\n  const orientation = orientationProp ?? contextOrientation ?? \"horizontal\";\n  const listRef = useRef<HTMLDivElement>(null);\n\n  // Handle keyboard navigation at list level\n  useEffect(() => {\n    const list = listRef.current;\n    if (!list) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      const triggers = Array.from(\n        list.querySelectorAll<HTMLButtonElement>(\n          '[role=\"tab\"]:not([disabled])',\n        ),\n      );\n      const currentIndex = triggers.findIndex(\n        (trigger) => trigger === document.activeElement,\n      );\n\n      if (currentIndex === -1) return;\n\n      let nextIndex = currentIndex;\n\n      if (orientation === \"horizontal\") {\n        if (e.key === \"ArrowRight\") {\n          e.preventDefault();\n          nextIndex = (currentIndex + 1) % triggers.length;\n        } else if (e.key === \"ArrowLeft\") {\n          e.preventDefault();\n          nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;\n        }\n      } else {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          nextIndex = (currentIndex + 1) % triggers.length;\n        } else if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;\n        }\n      }\n\n      if (e.key === \"Home\") {\n        e.preventDefault();\n        nextIndex = 0;\n      } else if (e.key === \"End\") {\n        e.preventDefault();\n        nextIndex = triggers.length - 1;\n      }\n\n      if (nextIndex !== currentIndex) {\n        triggers[nextIndex]?.focus();\n      }\n    };\n\n    list.addEventListener(\"keydown\", handleKeyDown);\n    return () => list.removeEventListener(\"keydown\", handleKeyDown);\n  }, [orientation]);\n\n  // Determine display class based on variant and orientation\n  // For compact vertical, use 'flex' instead of 'inline-flex' to allow full width\n  const displayClass =\n    variant === \"compact\" && orientation === \"vertical\"\n      ? \"flex\"\n      : \"inline-flex\";\n\n  const orientationClasses =\n    orientation === \"vertical\"\n      ? cn(\"flex-col\", getSpacingClass(\"xs\", \"gap\"))\n      : cn(\"flex-row\", getSpacingClass(\"xs\", \"gap\"));\n\n  return (\n    <div\n      ref={listRef}\n      role=\"tablist\"\n      aria-orientation={orientation}\n      className={cn(\n        displayClass,\n        orientationClasses,\n        getSpacingClass(\"xs\", \"p\"),\n        \"bg-surface-muted\",\n        getRadiusClass(\"md\"),\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"names":["TabsList","_a","_b","children","className","variant","orientationProp","props","__objRest","contextOrientation","useTabsContext","orientation","listRef","useRef","useEffect","list","handleKeyDown","e","triggers","currentIndex","trigger","nextIndex","displayClass","orientationClasses","cn","getSpacingClass","jsx","__spreadProps","__spreadValues","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BO,SAASA,EAASC,GAMP;AANO,MAAAC,IAAAD,GACvB;AAAA,cAAAE;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,SAAAC,IAAU;AAAA,IACV,aAAaC;AAAA,MAJUJ,GAKpBK,IAAAC,EALoBN,GAKpB;AAAA,IAJH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;;AAGA,QAAM,EAAE,aAAaO,EAAA,IAAuBC,EAAA,GACtCC,KAAcV,IAAAK,KAAA,OAAAA,IAAmBG,MAAnB,OAAAR,IAAyC,cACvDW,IAAUC,EAAuB,IAAI;AAG3C,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAOH,EAAQ;AACrB,QAAI,CAACG,EAAM;AAEX,UAAMC,IAAgB,CAACC,MAAqB;;AAC1C,YAAMC,IAAW,MAAM;AAAA,QACrBH,EAAK;AAAA,UACH;AAAA,QAAA;AAAA,MACF,GAEII,IAAeD,EAAS;AAAA,QAC5B,CAACE,MAAYA,MAAY,SAAS;AAAA,MAAA;AAGpC,UAAID,MAAiB,GAAI;AAEzB,UAAIE,IAAYF;AAEhB,MAAIR,MAAgB,eACdM,EAAE,QAAQ,gBACZA,EAAE,eAAA,GACFI,KAAaF,IAAe,KAAKD,EAAS,UACjCD,EAAE,QAAQ,gBACnBA,EAAE,eAAA,GACFI,KAAaF,IAAe,IAAID,EAAS,UAAUA,EAAS,UAG1DD,EAAE,QAAQ,eACZA,EAAE,eAAA,GACFI,KAAaF,IAAe,KAAKD,EAAS,UACjCD,EAAE,QAAQ,cACnBA,EAAE,eAAA,GACFI,KAAaF,IAAe,IAAID,EAAS,UAAUA,EAAS,SAI5DD,EAAE,QAAQ,UACZA,EAAE,eAAA,GACFI,IAAY,KACHJ,EAAE,QAAQ,UACnBA,EAAE,eAAA,GACFI,IAAYH,EAAS,SAAS,IAG5BG,MAAcF,OAChBlB,IAAAiB,EAASG,CAAS,MAAlB,QAAApB,EAAqB;AAAA,IAEzB;AAEA,WAAAc,EAAK,iBAAiB,WAAWC,CAAa,GACvC,MAAMD,EAAK,oBAAoB,WAAWC,CAAa;AAAA,EAChE,GAAG,CAACL,CAAW,CAAC;AAIhB,QAAMW,IACJjB,MAAY,aAAaM,MAAgB,aACrC,SACA,eAEAY,IACJZ,MAAgB,aACZa,EAAG,YAAYC,EAAgB,MAAM,KAAK,CAAC,IAC3CD,EAAG,YAAYC,EAAgB,MAAM,KAAK,CAAC;AAEjD,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,KAAKhB;AAAA,MACL,MAAK;AAAA,MACL,oBAAkBD;AAAA,MAClB,WAAWa;AAAA,QACTF;AAAA,QACAC;AAAA,QACAE,EAAgB,MAAM,GAAG;AAAA,QACzB;AAAA,QACAI,EAAe,IAAI;AAAA,QACnBzB;AAAA,MAAA;AAAA,OAEEG,IAZL;AAAA,MAcE,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/Tabs/TabsProvider.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as v } from "react/jsx-runtime";
+import { useState as f, useCallback as p } from "react";
+import { TabsContext as x } from "./TabsContext.js";
+function j({
+  defaultValue: e,
+  value: r,
+  onValueChange: t,
+  orientation: i = "horizontal",
+  activationMode: c = "automatic",
+  children: l
+}) {
+  const [n, u] = f(
+    e || ""
+  ), o = r !== void 0, a = o ? r : n, m = p(
+    (s) => {
+      o || u(s), t == null || t(s);
+    },
+    [o, t]
+  ), d = {
+    value: a,
+    onValueChange: m,
+    orientation: i,
+    activationMode: c
+  };
+  return /* @__PURE__ */ v(x.Provider, { value: d, children: l });
+}
+export {
+  j as TabsProvider
+};
+//# sourceMappingURL=TabsProvider.js.map

package/dist/granular/ui/components/Tabs/TabsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsProvider.js","sources":["../../../../../src/ui/components/Tabs/TabsProvider.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useCallback, type ReactNode } from \"react\";\nimport { TabsContext, type TabsContextValue } from \"./TabsContext\";\n\nexport interface TabsProviderProps {\n  defaultValue?: string;\n  value?: string;\n  onValueChange?: (value: string) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  activationMode?: \"automatic\" | \"manual\";\n  children: ReactNode;\n}\n\n/**\n * TabsProvider Component\n *\n * Provides Tabs context to children.\n * Manages active tab state and handles controlled/uncontrolled modes.\n */\nexport function TabsProvider({\n  defaultValue,\n  value: controlledValue,\n  onValueChange,\n  orientation = \"horizontal\",\n  activationMode = \"automatic\",\n  children,\n}: TabsProviderProps) {\n  const [uncontrolledValue, setUncontrolledValue] = useState<string>(\n    defaultValue || \"\",\n  );\n\n  const isControlled = controlledValue !== undefined;\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const handleValueChange = useCallback(\n    (newValue: string) => {\n      if (!isControlled) {\n        setUncontrolledValue(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange],\n  );\n\n  const contextValue: TabsContextValue = {\n    value,\n    onValueChange: handleValueChange,\n    orientation,\n    activationMode,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>{children}</TabsContext.Provider>\n  );\n}\n"],"names":["TabsProvider","defaultValue","controlledValue","onValueChange","orientation","activationMode","children","uncontrolledValue","setUncontrolledValue","useState","isControlled","value","handleValueChange","useCallback","newValue","contextValue","TabsContext"],"mappings":";;;;AAoBO,SAASA,EAAa;AAAA,EAC3B,cAAAC;AAAA,EACA,OAAOC;AAAA,EACP,eAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AACF,GAAsB;AACpB,QAAM,CAACC,GAAmBC,CAAoB,IAAIC;AAAA,IAChDR,KAAgB;AAAA,EAAA,GAGZS,IAAeR,MAAoB,QACnCS,IAAQD,IAAeR,IAAkBK,GAEzCK,IAAoBC;AAAA,IACxB,CAACC,MAAqB;AACpB,MAAKJ,KACHF,EAAqBM,CAAQ,GAE/BX,KAAA,QAAAA,EAAgBW;AAAA,IAClB;AAAA,IACA,CAACJ,GAAcP,CAAa;AAAA,EAAA,GAGxBY,IAAiC;AAAA,IACrC,OAAAJ;AAAA,IACA,eAAeC;AAAA,IACf,aAAAR;AAAA,IACA,gBAAAC;AAAA,EAAA;AAGF,2BACGW,EAAY,UAAZ,EAAqB,OAAOD,GAAe,UAAAT,GAAS;AAEzD;"}

package/dist/granular/ui/components/Tabs/TabsTrigger.js

@@ -0,0 +1,103 @@
+"use client";
+var S = Object.defineProperty, j = Object.defineProperties;
+var C = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var h = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
+var p = (t, o, r) => o in t ? S(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r, b = (t, o) => {
+  for (var r in o || (o = {}))
+    h.call(o, r) && p(t, r, o[r]);
+  if (s)
+    for (var r of s(o))
+      x.call(o, r) && p(t, r, o[r]);
+  return t;
+}, k = (t, o) => j(t, C(o));
+var A = (t, o) => {
+  var r = {};
+  for (var n in t)
+    h.call(t, n) && o.indexOf(n) < 0 && (r[n] = t[n]);
+  if (t != null && s)
+    for (var n of s(t))
+      o.indexOf(n) < 0 && x.call(t, n) && (r[n] = t[n]);
+  return r;
+};
+import { jsx as E } from "react/jsx-runtime";
+import { useTabsContext as R } from "./TabsContext.js";
+import { cn as g } from "../../utils/cn.js";
+import { getRadiusClass as V } from "../../tokens/radius.js";
+import { getTypographyWeight as $, getTypographySize as z } from "../../tokens/typography.js";
+import { getSpacingClass as T } from "../../tokens/spacing.js";
+function B(H) {
+  var l = H, {
+    value: t,
+    children: o,
+    disabled: r = !1,
+    className: n = "",
+    onClick: c,
+    onKeyDown: f
+  } = l, a = A(l, [
+    "value",
+    "children",
+    "disabled",
+    "className",
+    "onClick",
+    "onKeyDown"
+  ]);
+  const {
+    value: w,
+    onValueChange: u,
+    orientation: I,
+    activationMode: m
+  } = R(), i = w === t, d = (e) => {
+    r || ((m === "automatic" || i) && u(t), c == null || c(e));
+  }, v = (e) => {
+    var y;
+    m === "automatic" && !r && !i && u(t), (y = a.onFocus) == null || y.call(a, e);
+  }, F = (e) => {
+    if (!r && !(e.key === "ArrowRight" || e.key === "ArrowLeft" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End")) {
+      if (m === "manual" && (e.key === "Enter" || e.key === " ")) {
+        e.preventDefault(), u(t);
+        return;
+      }
+      f == null || f(e);
+    }
+  };
+  return /* @__PURE__ */ E(
+    "button",
+    k(b({
+      type: "button",
+      role: "tab",
+      "aria-selected": i,
+      "aria-controls": `tabpanel-${t}`,
+      id: `tab-${t}`,
+      tabIndex: r ? -1 : i ? 0 : -1,
+      disabled: r,
+      onClick: d,
+      onFocus: v,
+      onKeyDown: F,
+      className: g(
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        T("sm", "px"),
+        T("xs", "py"),
+        z("bodySmall"),
+        $("label"),
+        "transition-colors",
+        "focus:outline-none",
+        "focus:ring-2",
+        "focus:ring-line-focus",
+        "focus:ring-offset-2",
+        V("sm"),
+        i ? g("bg-surface-brand-strong", "text-fg-inverse") : g("text-fg-secondary", "hover:bg-surface-active"),
+        r ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+        n
+      )
+    }, a), {
+      children: o
+    })
+  );
+}
+export {
+  B as TabsTrigger
+};
+//# sourceMappingURL=TabsTrigger.js.map

package/dist/granular/ui/components/Tabs/TabsTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsTrigger.js","sources":["../../../../../src/ui/components/Tabs/TabsTrigger.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTabsContext } from \"./TabsContext\";\nimport type { HTMLAttributes, ReactNode, KeyboardEvent } from \"react\";\nimport {\n  getRadiusClass,\n  getSpacingClass,\n  getTypographySize,\n  getTypographyWeight,\n} from \"../../tokens\";\nimport { cn } from \"../../utils\";\n\nexport interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  value: string;\n  children: ReactNode;\n  disabled?: boolean;\n}\n\n/**\n * TabsTrigger Component\n *\n * Individual tab trigger button.\n * Must be used within a TabsList component.\n */\nexport function TabsTrigger({\n  value,\n  children,\n  disabled = false,\n  className = \"\",\n  onClick,\n  onKeyDown,\n  ...props\n}: TabsTriggerProps) {\n  const {\n    value: activeValue,\n    onValueChange,\n    orientation: _orientation,\n    activationMode,\n  } = useTabsContext();\n\n  const isActive = activeValue === value;\n\n  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n    if (activationMode === \"automatic\" || isActive) {\n      onValueChange(value);\n    }\n    onClick?.(e);\n  };\n\n  const handleFocus = (e: React.FocusEvent<HTMLButtonElement>) => {\n    // In automatic mode, activate tab on focus\n    if (activationMode === \"automatic\" && !disabled && !isActive) {\n      onValueChange(value);\n    }\n    props.onFocus?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    // Let parent handle arrow keys, Home, End\n    if (\n      e.key === \"ArrowRight\" ||\n      e.key === \"ArrowLeft\" ||\n      e.key === \"ArrowDown\" ||\n      e.key === \"ArrowUp\" ||\n      e.key === \"Home\" ||\n      e.key === \"End\"\n    ) {\n      // These are handled by TabsList\n      return;\n    }\n\n    // Handle Enter/Space for manual activation\n    if (activationMode === \"manual\" && (e.key === \"Enter\" || e.key === \" \")) {\n      e.preventDefault();\n      onValueChange(value);\n      return;\n    }\n\n    onKeyDown?.(e);\n  };\n\n  return (\n    <button\n      type=\"button\"\n      role=\"tab\"\n      aria-selected={isActive}\n      aria-controls={`tabpanel-${value}`}\n      id={`tab-${value}`}\n      tabIndex={disabled ? -1 : isActive ? 0 : -1}\n      disabled={disabled}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDown}\n      className={cn(\n        \"inline-flex\",\n        \"items-center\",\n        \"justify-center\",\n        getSpacingClass(\"sm\", \"px\"),\n        getSpacingClass(\"xs\", \"py\"),\n        getTypographySize(\"bodySmall\"),\n        getTypographyWeight(\"label\"),\n        \"transition-colors\",\n        \"focus:outline-none\",\n        \"focus:ring-2\",\n        \"focus:ring-line-focus\",\n        \"focus:ring-offset-2\",\n        getRadiusClass(\"sm\"),\n        isActive\n          ? cn(\"bg-surface-brand-strong\", \"text-fg-inverse\")\n          : cn(\"text-fg-secondary\", \"hover:bg-surface-active\"),\n        disabled ? \"opacity-50 cursor-not-allowed\" : \"cursor-pointer\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["TabsTrigger","_a","_b","value","children","disabled","className","onClick","onKeyDown","props","__objRest","activeValue","onValueChange","_orientation","activationMode","useTabsContext","isActive","handleClick","handleFocus","handleKeyDown","jsx","__spreadProps","__spreadValues","cn","getSpacingClass","getTypographySize","getTypographyWeight","getRadiusClass"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,SAASA,EAAYC,GAQP;AARO,MAAAC,IAAAD,GAC1B;AAAA,WAAAE;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,SAAAC;AAAA,IACA,WAAAC;AAAA,MAN0BN,GAOvBO,IAAAC,EAPuBR,GAOvB;AAAA,IANH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGA,QAAM;AAAA,IACJ,OAAOS;AAAA,IACP,eAAAC;AAAA,IACA,aAAaC;AAAA,IACb,gBAAAC;AAAA,EAAA,IACEC,EAAA,GAEEC,IAAWL,MAAgBR,GAE3Bc,IAAc,CAAC,MAA2C;AAC9D,IAAIZ,OACAS,MAAmB,eAAeE,MACpCJ,EAAcT,CAAK,GAErBI,KAAA,QAAAA,EAAU;AAAA,EACZ,GAEMW,IAAc,CAAC,MAA2C;;AAE9D,IAAIJ,MAAmB,eAAe,CAACT,KAAY,CAACW,KAClDJ,EAAcT,CAAK,IAErBF,IAAAQ,EAAM,YAAN,QAAAR,EAAA,KAAAQ,GAAgB;AAAA,EAClB,GAEMU,IAAgB,CAAC,MAAwC;AAC7D,QAAI,CAAAd,KAIF,IAAE,QAAQ,gBACV,EAAE,QAAQ,eACV,EAAE,QAAQ,eACV,EAAE,QAAQ,aACV,EAAE,QAAQ,UACV,EAAE,QAAQ,QAOZ;AAAA,UAAIS,MAAmB,aAAa,EAAE,QAAQ,WAAW,EAAE,QAAQ,MAAM;AACvE,UAAE,eAAA,GACFF,EAAcT,CAAK;AACnB;AAAA,MACF;AAEA,MAAAK,KAAA,QAAAA,EAAY;AAAA;AAAA,EACd;AAEA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAAC,EAAAC,EAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAeN;AAAA,MACf,iBAAe,YAAYb,CAAK;AAAA,MAChC,IAAI,OAAOA,CAAK;AAAA,MAChB,UAAUE,IAAW,KAAKW,IAAW,IAAI;AAAA,MACzC,UAAAX;AAAA,MACA,SAASY;AAAA,MACT,SAASC;AAAA,MACT,WAAWC;AAAA,MACX,WAAWI;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACAC,EAAgB,MAAM,IAAI;AAAA,QAC1BA,EAAgB,MAAM,IAAI;AAAA,QAC1BC,EAAkB,WAAW;AAAA,QAC7BC,EAAoB,OAAO;AAAA,QAC3B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAC,EAAe,IAAI;AAAA,QACnBX,IACIO,EAAG,2BAA2B,iBAAiB,IAC/CA,EAAG,qBAAqB,yBAAyB;AAAA,QACrDlB,IAAW,kCAAkC;AAAA,QAC7CC;AAAA,MAAA;AAAA,OAEEG,IA/BL;AAAA,MAiCE,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/granular/ui/components/TimePicker/TimePicker.js

@@ -0,0 +1,216 @@
+"use client";
+import { jsx as s, jsxs as v } from "react/jsx-runtime";
+import { useState as x, useCallback as E, useEffect as O } from "react";
+import { Clock as U } from "lucide-react";
+import q from "../../primitives/Input/Input.js";
+import F from "../Popover/Popover.js";
+import { Button as o } from "../../primitives/Button/Button.js";
+import { getSpacingClass as u } from "../../tokens/spacing.js";
+function X({
+  value: A,
+  defaultValue: H,
+  format: r = "24h",
+  onChange: c,
+  disabled: l = !1,
+  label: I,
+  error: b = !1,
+  helperText: z,
+  className: y = ""
+}) {
+  const [T, P] = x(H || ""), [i, S] = x(12), [m, N] = x(0), [a, $] = x("AM"), d = A !== void 0, h = d ? A : T, k = E(
+    (e) => {
+      if (!e) return { hours: 12, minutes: 0, amPm: "AM" };
+      if (r === "24h") {
+        const [t, n] = e.split(":").map(Number);
+        return { hours: t || 12, minutes: n || 0, amPm: "AM" };
+      } else {
+        const t = e.match(/(\d+):(\d+)\s*(AM|PM)/i);
+        return t ? {
+          hours: parseInt(t[1]),
+          minutes: parseInt(t[2]),
+          amPm: t[3].toUpperCase()
+        } : { hours: 12, minutes: 0, amPm: "AM" };
+      }
+    },
+    [r]
+  ), p = (e, t, n) => {
+    if (r === "24h")
+      return `${String(e).padStart(2, "0")}:${String(t).padStart(2, "0")}`;
+    {
+      const M = n === "PM" && e !== 12 ? e + 12 : n === "AM" && e === 12 ? 0 : e;
+      return `${String(M === 0 ? 12 : M > 12 ? M - 12 : M).padStart(2, "0")}:${String(t).padStart(2, "0")} ${n || "AM"}`;
+    }
+  };
+  O(() => {
+    if (h) {
+      const e = k(h);
+      S(e.hours), N(e.minutes), $(e.amPm);
+    }
+  }, [h, k]);
+  const f = (e) => {
+    const t = r === "24h" ? Math.max(0, Math.min(23, e)) : Math.max(1, Math.min(12, e));
+    S(t);
+    const n = p(
+      t,
+      m,
+      r === "12h" ? a : void 0
+    );
+    d || P(n), c == null || c(n);
+  }, w = (e) => {
+    const t = Math.max(0, Math.min(59, e));
+    N(t);
+    const n = p(
+      i,
+      t,
+      r === "12h" ? a : void 0
+    );
+    d || P(n), c == null || c(n);
+  }, g = () => {
+    const e = a === "AM" ? "PM" : "AM";
+    $(e);
+    const t = p(i, m, e);
+    d || P(t), c == null || c(t);
+  }, V = () => {
+    if (r === "24h")
+      f((i + 1) % 24);
+    else {
+      const e = i === 12 ? 1 : i + 1;
+      f(e);
+    }
+  }, j = () => {
+    if (r === "24h")
+      f(i === 0 ? 23 : i - 1);
+    else {
+      const e = i === 1 ? 12 : i - 1;
+      f(e);
+    }
+  }, B = () => {
+    w((m + 1) % 60);
+  }, D = () => {
+    w(m === 0 ? 59 : m - 1);
+  }, C = /* @__PURE__ */ s("div", { className: `${u("base", "p")} min-w-48`, children: /* @__PURE__ */ v(
+    "div",
+    {
+      className: `flex items-center justify-center ${u("base", "gap")}`,
+      children: [
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: `flex flex-col items-center ${u("sm", "gap")}`,
+            children: [
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: V,
+                  disabled: l,
+                  "aria-label": "Increment hours",
+                  children: "↑"
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "text-2xl font-mono font-semibold w-12 text-center", children: String(i).padStart(2, "0") }),
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: j,
+                  disabled: l,
+                  "aria-label": "Decrement hours",
+                  children: "↓"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: "text-2xl font-semibold", children: ":" }),
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: `flex flex-col items-center ${u("sm", "gap")}`,
+            children: [
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: B,
+                  disabled: l,
+                  "aria-label": "Increment minutes",
+                  children: "↑"
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "text-2xl font-mono font-semibold w-12 text-center", children: String(m).padStart(2, "0") }),
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: D,
+                  disabled: l,
+                  "aria-label": "Decrement minutes",
+                  children: "↓"
+                }
+              )
+            ]
+          }
+        ),
+        r === "12h" && /* @__PURE__ */ v(
+          "div",
+          {
+            className: `flex flex-col ${u("sm", "gap")} ${u("sm", "ml")}`,
+            children: [
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: a === "AM" ? "primary" : "outline",
+                  size: "sm",
+                  onClick: () => g(),
+                  disabled: l,
+                  children: "AM"
+                }
+              ),
+              /* @__PURE__ */ s(
+                o,
+                {
+                  variant: a === "PM" ? "primary" : "outline",
+                  size: "sm",
+                  onClick: () => g(),
+                  disabled: l,
+                  children: "PM"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+  return /* @__PURE__ */ s("div", { className: y, children: /* @__PURE__ */ s(
+    F,
+    {
+      trigger: /* @__PURE__ */ s(
+        q,
+        {
+          label: I,
+          value: h || p(i, m, r === "12h" ? a : void 0),
+          readOnly: !0,
+          disabled: l,
+          error: b,
+          helperText: z,
+          leftIcon: /* @__PURE__ */ s(U, { className: "h-4 w-4" }),
+          className: "cursor-pointer"
+        }
+      ),
+      placement: "bottom-start",
+      showCloseButton: !0,
+      title: "Select Time",
+      children: C
+    }
+  ) });
+}
+export {
+  X as default
+};
+//# sourceMappingURL=TimePicker.js.map

package/dist/granular/ui/components/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","sources":["../../../../../src/ui/components/TimePicker/TimePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, useEffect, useCallback } from \"react\";\nimport { Clock } from \"lucide-react\";\nimport Input from \"../../primitives/Input/Input\";\nimport Popover from \"../Popover/Popover\";\nimport Button from \"../../primitives/Button/Button\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport type TimeFormat = \"12h\" | \"24h\";\n\nexport interface TimePickerProps {\n  value?: string; // Format: \"HH:mm\" for 24h or \"hh:mm AM/PM\" for 12h\n  defaultValue?: string;\n  format?: TimeFormat;\n  onChange?: (value: string) => void;\n  disabled?: boolean;\n  label?: string;\n  error?: boolean;\n  helperText?: string;\n  className?: string;\n}\n\n/**\n * TimePicker Component\n *\n * A time picker component for selecting time values.\n * Supports 12h and 24h formats.\n * Follows Atomic Design principles as a Molecule component.\n *\n * @example\n * ```tsx\n * <TimePicker\n *   value=\"14:30\"\n *   format=\"24h\"\n *   onChange={(value) => console.log(value)}\n * />\n * ```\n */\nexport default function TimePicker({\n  value: controlledValue,\n  defaultValue,\n  format = \"24h\",\n  onChange,\n  disabled = false,\n  label,\n  error = false,\n  helperText,\n  className = \"\",\n}: TimePickerProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue || \"\");\n  const [hours, setHours] = useState(12);\n  const [minutes, setMinutes] = useState(0);\n  const [amPm, setAmPm] = useState<\"AM\" | \"PM\">(\"AM\");\n\n  const isControlled = controlledValue !== undefined;\n  const currentValue = isControlled ? controlledValue : internalValue;\n\n  // Parse time value\n  const parseTime = useCallback(\n    (timeStr: string) => {\n      if (!timeStr) return { hours: 12, minutes: 0, amPm: \"AM\" as const };\n\n      if (format === \"24h\") {\n        const [h, m] = timeStr.split(\":\").map(Number);\n        return { hours: h || 12, minutes: m || 0, amPm: \"AM\" as const };\n      } else {\n        const match = timeStr.match(/(\\d+):(\\d+)\\s*(AM|PM)/i);\n        if (match) {\n          return {\n            hours: parseInt(match[1]),\n            minutes: parseInt(match[2]),\n            amPm: match[3].toUpperCase() as \"AM\" | \"PM\",\n          };\n        }\n        return { hours: 12, minutes: 0, amPm: \"AM\" as const };\n      }\n    },\n    [format],\n  );\n\n  // Format time value\n  const formatTime = (h: number, m: number, ap?: \"AM\" | \"PM\"): string => {\n    if (format === \"24h\") {\n      return `${String(h).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")}`;\n    } else {\n      const displayHours =\n        ap === \"PM\" && h !== 12 ? h + 12 : ap === \"AM\" && h === 12 ? 0 : h;\n      return `${String(displayHours === 0 ? 12 : displayHours > 12 ? displayHours - 12 : displayHours).padStart(2, \"0\")}:${String(m).padStart(2, \"0\")} ${ap || \"AM\"}`;\n    }\n  };\n\n  // Initialize from value\n  useEffect(() => {\n    if (currentValue) {\n      const parsed = parseTime(currentValue);\n      setHours(parsed.hours);\n      setMinutes(parsed.minutes);\n      setAmPm(parsed.amPm);\n    }\n  }, [currentValue, parseTime]);\n\n  const handleHoursChange = (newHours: number) => {\n    const validHours =\n      format === \"24h\"\n        ? Math.max(0, Math.min(23, newHours))\n        : Math.max(1, Math.min(12, newHours));\n\n    setHours(validHours);\n    const newValue = formatTime(\n      validHours,\n      minutes,\n      format === \"12h\" ? amPm : undefined,\n    );\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const handleMinutesChange = (newMinutes: number) => {\n    const validMinutes = Math.max(0, Math.min(59, newMinutes));\n    setMinutes(validMinutes);\n    const newValue = formatTime(\n      hours,\n      validMinutes,\n      format === \"12h\" ? amPm : undefined,\n    );\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const handleAmPmToggle = () => {\n    const newAmPm = amPm === \"AM\" ? \"PM\" : \"AM\";\n    setAmPm(newAmPm);\n    const newValue = formatTime(hours, minutes, newAmPm);\n\n    if (!isControlled) {\n      setInternalValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const incrementHours = () => {\n    if (format === \"24h\") {\n      handleHoursChange((hours + 1) % 24);\n    } else {\n      const newHours = hours === 12 ? 1 : hours + 1;\n      handleHoursChange(newHours);\n    }\n  };\n\n  const decrementHours = () => {\n    if (format === \"24h\") {\n      handleHoursChange(hours === 0 ? 23 : hours - 1);\n    } else {\n      const newHours = hours === 1 ? 12 : hours - 1;\n      handleHoursChange(newHours);\n    }\n  };\n\n  const incrementMinutes = () => {\n    handleMinutesChange((minutes + 1) % 60);\n  };\n\n  const decrementMinutes = () => {\n    handleMinutesChange(minutes === 0 ? 59 : minutes - 1);\n  };\n\n  const timePickerContent = (\n    <div className={`${getSpacingClass(\"base\", \"p\")} min-w-48`}>\n      <div\n        className={`flex items-center justify-center ${getSpacingClass(\"base\", \"gap\")}`}\n      >\n        {/* Hours */}\n        <div\n          className={`flex flex-col items-center ${getSpacingClass(\"sm\", \"gap\")}`}\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={incrementHours}\n            disabled={disabled}\n            aria-label=\"Increment hours\"\n          >\n            ↑\n          </Button>\n          <div className=\"text-2xl font-mono font-semibold w-12 text-center\">\n            {String(hours).padStart(2, \"0\")}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={decrementHours}\n            disabled={disabled}\n            aria-label=\"Decrement hours\"\n          >\n            ↓\n          </Button>\n        </div>\n\n        <div className=\"text-2xl font-semibold\">:</div>\n\n        {/* Minutes */}\n        <div\n          className={`flex flex-col items-center ${getSpacingClass(\"sm\", \"gap\")}`}\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={incrementMinutes}\n            disabled={disabled}\n            aria-label=\"Increment minutes\"\n          >\n            ↑\n          </Button>\n          <div className=\"text-2xl font-mono font-semibold w-12 text-center\">\n            {String(minutes).padStart(2, \"0\")}\n          </div>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={decrementMinutes}\n            disabled={disabled}\n            aria-label=\"Decrement minutes\"\n          >\n            ↓\n          </Button>\n        </div>\n\n        {/* AM/PM for 12h format */}\n        {format === \"12h\" && (\n          <div\n            className={`flex flex-col ${getSpacingClass(\"sm\", \"gap\")} ${getSpacingClass(\"sm\", \"ml\")}`}\n          >\n            <Button\n              variant={amPm === \"AM\" ? \"primary\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => handleAmPmToggle()}\n              disabled={disabled}\n            >\n              AM\n            </Button>\n            <Button\n              variant={amPm === \"PM\" ? \"primary\" : \"outline\"}\n              size=\"sm\"\n              onClick={() => handleAmPmToggle()}\n              disabled={disabled}\n            >\n              PM\n            </Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={className}>\n      <Popover\n        trigger={\n          <Input\n            label={label}\n            value={\n              currentValue ||\n              formatTime(hours, minutes, format === \"12h\" ? amPm : undefined)\n            }\n            readOnly\n            disabled={disabled}\n            error={error}\n            helperText={helperText}\n            leftIcon={<Clock className=\"h-4 w-4\" />}\n            className=\"cursor-pointer\"\n          />\n        }\n        placement=\"bottom-start\"\n        showCloseButton\n        title=\"Select Time\"\n      >\n        {timePickerContent}\n      </Popover>\n    </div>\n  );\n}\n"],"names":["TimePicker","controlledValue","defaultValue","format","onChange","disabled","label","error","helperText","className","internalValue","setInternalValue","useState","hours","setHours","minutes","setMinutes","amPm","setAmPm","isControlled","currentValue","parseTime","useCallback","timeStr","h","m","match","formatTime","ap","displayHours","useEffect","parsed","handleHoursChange","newHours","validHours","newValue","handleMinutesChange","newMinutes","validMinutes","handleAmPmToggle","newAmPm","incrementHours","decrementHours","incrementMinutes","decrementMinutes","timePickerContent","getSpacingClass","jsxs","jsx","Button","Popover","Input","Clock"],"mappings":"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"}