@cerberus-design/react 0.13.2 → 0.14.0

package/build/legacy/context/tabs.cjs

@@ -26,41 +26,70 @@ __export(tabs_exports, {
   useTabsContext: () => useTabsContext
 });
 module.exports = __toCommonJS(tabs_exports);
+var import_tabs = require("@ark-ui/react/tabs");
 var import_recipes = require("@cerberus/styled-system/recipes");
 var import_react = require("react");
+
+// src/utils/localStorage.ts
+function getLocalStorage(key, defaultValue) {
+  const value = window.localStorage.getItem(key);
+  if (value) {
+    return value;
+  }
+  return defaultValue;
+}
+function setLocalStorage(key, value) {
+  const stringValue = typeof value === "string" ? value : JSON.stringify(value);
+  window.localStorage.setItem(key, stringValue);
+}
+
+// src/context/tabs.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var TabsContext = (0, import_react.createContext)(null);
 function Tabs(props) {
-  const { cache, active, id, palette } = props;
-  const [activeTab, setActiveTab] = (0, import_react.useState)(() => cache ? "" : active ?? "");
-  const tabsList = (0, import_react.useRef)([]);
-  const uuid = (0, import_react.useMemo)(() => {
-    return id ? `cerberus-tabs-${id}` : "cerberus-tabs";
-  }, [id]);
+  const { cache, defaultValue, palette, uuid, ...arkProps } = props;
+  const [activeTab, setActiveTab] = (0, import_react.useState)(
+    () => cache ? "" : defaultValue
+  );
+  const styles = (0, import_recipes.tabs)({ palette });
+  const cacheKey = (0, import_react.useMemo)(
+    () => uuid ? `cerberus-tabs-${uuid}` : "cerberus-tabs",
+    [uuid]
+  );
+  const handleValueChange = (0, import_react.useCallback)(
+    (details) => {
+      if (cache) {
+        setLocalStorage(cacheKey, details.value);
+      }
+      setActiveTab(details.value);
+    },
+    [cache]
+  );
+  (0, import_react.useEffect)(() => {
+    if (cache && !activeTab) {
+      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? "");
+      setActiveTab(cachedTab);
+    }
+  }, [cache, defaultValue, activeTab]);
   const value = (0, import_react.useMemo)(
     () => ({
-      tabs: tabsList,
-      id: uuid,
       active: activeTab,
-      styles: (0, import_recipes.tabs)({ palette }),
-      onTabUpdate: setActiveTab
+      styles
     }),
-    [activeTab, setActiveTab, palette, uuid, tabsList]
+    [activeTab, palette, styles]
   );
-  (0, import_react.useEffect)(() => {
-    if (cache) {
-      const cachedTab = window.localStorage.getItem(uuid);
-      setActiveTab(
-        cache ? cachedTab || (props.active ?? "") : props.active ?? ""
-      );
-    }
-  }, [cache, active, uuid]);
-  (0, import_react.useEffect)(() => {
-    if (cache && activeTab) {
-      window.localStorage.setItem(uuid, activeTab);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tabs.Tabs.Root,
+    {
+      ...arkProps,
+      "aria-busy": !activeTab,
+      className: styles.root,
+      defaultValue,
+      onValueChange: handleValueChange,
+      value: activeTab,
+      children: props.children
     }
-  }, [activeTab, cache]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContext.Provider, { value, children: props.children });
+  ) });
 }
 function useTabsContext() {
   const context = (0, import_react.useContext)(TabsContext);

package/build/legacy/context/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n  type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The ref for the tabs.\n   */\n  tabs: MutableRefObject<HTMLButtonElement[]>\n  /**\n   * The id of the tabs component.\n   */\n  id: string\n  /**\n   * The active tab id.\n   */\n  active: string\n  /**\n   * The styles for the tabs.\n   */\n  styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n  /**\n   * Called when the active tab is updated.\n   */\n  onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page.\n   */\n  id?: string\n  /**\n   * The default active tab id.\n   */\n  active?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @see https://cerberus.digitalu.design/react/tabs\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabList description=\"Button details\">\n *    <Tab id=\"overview\">Overview</Tab>\n *    <Tab id=\"guidelines\">Guidelines</Tab>\n *  </TabList>\n *  <TabPanels>\n *    <TabPanel id=\"overview\">Overview content</TabPanel>\n *    <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n *  </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(\n  props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n  const { cache, active, id, palette } = props\n  const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n  const tabsList = useRef<HTMLButtonElement[]>([])\n  const uuid = useMemo(() => {\n    return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n  }, [id])\n\n  const value = useMemo(\n    () => ({\n      tabs: tabsList,\n      id: uuid,\n      active: activeTab,\n      styles: tabs({ palette }),\n      onTabUpdate: setActiveTab,\n    }),\n    [activeTab, setActiveTab, palette, uuid, tabsList],\n  )\n\n  // Get the active tab from local storage\n  useEffect(() => {\n    if (cache) {\n      const cachedTab = window.localStorage.getItem(uuid)\n      setActiveTab(\n        cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n      )\n    }\n  }, [cache, active, uuid])\n\n  // Update the active tab in local storage\n  useEffect(() => {\n    if (cache && activeTab) {\n      window.localStorage.setItem(uuid, activeTab)\n    }\n  }, [activeTab, cache])\n\n  return (\n    <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n  )\n}\n\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,qBAA4C;AAE5C,mBASO;AAwGH;AA1EG,IAAM,kBAAc,4BAAuC,IAAI;AAmC/D,SAAS,KACd,OACa;AACb,QAAM,EAAE,OAAO,QAAQ,IAAI,QAAQ,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,eAAW,qBAA4B,CAAC,CAAC;AAC/C,QAAM,WAAO,sBAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,YAAQ,qBAAK,EAAE,QAAQ,CAAC;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,SAAS,MAAM,QAAQ;AAAA,EACnD;AAGA,8BAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,8BAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,4CAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAMO,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../src/context/tabs.tsx","../../../src/utils/localStorage.ts"],"sourcesContent":["'use client'\n\nimport { Tabs as ArkTabs } from '@ark-ui/react/tabs'\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n} from 'react'\nimport { getLocalStorage, setLocalStorage } from '../utils/localStorage'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module Tabs\n */\n\nexport interface TabsContextValue {\n  /**\n   * The styles for the tabs.\n   */\n  styles: {\n    list: Pretty<string>\n    trigger: Pretty<string>\n    content: Pretty<string>\n    indicator: Pretty<string>\n  }\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProviderBaseProps extends ArkTabs.RootProps {\n  /**\n   * A unique identifier for the Tabs component. Typically used when there are\n   * multiple Tabs components on the same page and you want to uniquely cache\n   * the active tab state.\n   */\n  uuid?: string\n  /**\n   * The default tab to display when the component is first rendered.\n   */\n  defaultValue?: string\n  /**\n   * Whether to cache the active tab state in local storage.\n   */\n  cache?: boolean\n}\n\nexport type TabsProviderProps = TabsProviderBaseProps & TabsVariantProps\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)\n * @example\n * ```tsx\n * <Tabs cache>\n *  <TabsList>\n *    <Tab value=\"overview\">Overview</Tab>\n *    <Tab value=\"guidelines\">Guidelines</Tab>\n *  </TabsList>\n *  <TabPanel value=\"overview\">Overview content</TabPanel>\n *  <TabPanel value=\"guidelines\">Guidelines content</TabPanel>\n * </Tabs>\n * ```\n */\nexport function Tabs(props: PropsWithChildren<TabsProviderProps>): JSX.Element {\n  const { cache, defaultValue, palette, uuid, ...arkProps } = props\n  const [activeTab, setActiveTab] = useState<string | undefined>(() =>\n    cache ? '' : defaultValue,\n  )\n  const styles = tabs({ palette })\n\n  const cacheKey = useMemo(\n    () => (uuid ? `cerberus-tabs-${uuid}` : 'cerberus-tabs'),\n    [uuid],\n  )\n\n  const handleValueChange = useCallback(\n    (details: { value: string }) => {\n      if (cache) {\n        setLocalStorage(cacheKey, details.value)\n      }\n      setActiveTab(details.value)\n    },\n    [cache],\n  )\n\n  useEffect(() => {\n    if (cache && !activeTab) {\n      const cachedTab = getLocalStorage(cacheKey, defaultValue ?? '')\n      setActiveTab(cachedTab)\n    }\n  }, [cache, defaultValue, activeTab])\n\n  const value = useMemo(\n    () => ({\n      active: activeTab,\n      styles,\n    }),\n    [activeTab, palette, styles],\n  )\n\n  return (\n    <TabsContext.Provider value={value}>\n      <ArkTabs.Root\n        {...arkProps}\n        aria-busy={!activeTab}\n        className={styles.root}\n        defaultValue={defaultValue}\n        onValueChange={handleValueChange}\n        value={activeTab}\n      >\n        {props.children}\n      </ArkTabs.Root>\n    </TabsContext.Provider>\n  )\n}\n\n/**\n * Used to access the tabs context.\n * @returns The tabs context.\n */\nexport function useTabsContext(): TabsContextValue {\n  const context = useContext(TabsContext)\n  if (!context) {\n    throw new Error('useTabsContext must be used within a Tabs Provider.')\n  }\n  return context\n}\n","'use client'\n\n/**\n * A utility function to get a value from local storage.\n * @param key The key to get from local storage.\n * @param defaultValue The fallback value if the key is not found.\n * @returns key or defaultValue\n */\nexport function getLocalStorage<T extends string>(\n  key: string,\n  defaultValue: T,\n): T {\n  const value = window.localStorage.getItem(key)\n  if (value) {\n    return value as T\n  }\n  return defaultValue\n}\n\n/**\n * A utility function to set a value in local storage.\n * @param key The key to set in local storage.\n * @param value The value to set in local storage.\n */\nexport function setLocalStorage<T>(key: string, value: T): void {\n  const stringValue = typeof value === 'string' ? value : JSON.stringify(value)\n  window.localStorage.setItem(key, stringValue)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,kBAAgC;AAChC,qBAA4C;AAE5C,mBAQO;;;ACLA,SAAS,gBACd,KACA,cACG;AACH,QAAM,QAAQ,OAAO,aAAa,QAAQ,GAAG;AAC7C,MAAI,OAAO;AACT,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAOO,SAAS,gBAAmB,KAAa,OAAgB;AAC9D,QAAM,cAAc,OAAO,UAAU,WAAW,QAAQ,KAAK,UAAU,KAAK;AAC5E,SAAO,aAAa,QAAQ,KAAK,WAAW;AAC9C;;;ADiFM;AA3EC,IAAM,kBAAc,4BAAuC,IAAI;AAoC/D,SAAS,KAAK,OAA0D;AAC7E,QAAM,EAAE,OAAO,cAAc,SAAS,MAAM,GAAG,SAAS,IAAI;AAC5D,QAAM,CAAC,WAAW,YAAY,QAAI;AAAA,IAA6B,MAC7D,QAAQ,KAAK;AAAA,EACf;AACA,QAAM,aAAS,qBAAK,EAAE,QAAQ,CAAC;AAE/B,QAAM,eAAW;AAAA,IACf,MAAO,OAAO,iBAAiB,IAAI,KAAK;AAAA,IACxC,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,YAA+B;AAC9B,UAAI,OAAO;AACT,wBAAgB,UAAU,QAAQ,KAAK;AAAA,MACzC;AACA,mBAAa,QAAQ,KAAK;AAAA,IAC5B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,8BAAU,MAAM;AACd,QAAI,SAAS,CAAC,WAAW;AACvB,YAAM,YAAY,gBAAgB,UAAU,gBAAgB,EAAE;AAC9D,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,OAAO,cAAc,SAAS,CAAC;AAEnC,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,MACR;AAAA,IACF;AAAA,IACA,CAAC,WAAW,SAAS,MAAM;AAAA,EAC7B;AAEA,SACE,4CAAC,YAAY,UAAZ,EAAqB,OACpB;AAAA,IAAC,YAAAA,KAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,aAAW,CAAC;AAAA,MACZ,WAAW,OAAO;AAAA,MAClB;AAAA,MACA,eAAe;AAAA,MACf,OAAO;AAAA,MAEN,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAMO,SAAS,iBAAmC;AACjD,QAAM,cAAU,yBAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":["ArkTabs"]}

package/build/legacy/hooks/useDate.cjs

@@ -22,6 +22,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var useDate_exports = {};
 __export(useDate_exports, {
   DateFormats: () => DateFormats,
+  formatISOToMilitary: () => formatISOToMilitary,
   formatMilitaryDate: () => formatMilitaryDate,
   formatMilitaryToISO: () => formatMilitaryToISO,
   useDate: () => useDate
@@ -87,6 +88,12 @@ function formatMilitaryDate(input) {
   }
   return [day, month, year].filter(Boolean).join(" ");
 }
+function formatISOToMilitary(date) {
+  const [year, month, day] = date.split("-");
+  const monthIndex = parseInt(month, 10) - 1;
+  const monthStr = MONTHS[monthIndex];
+  return `${day} ${monthStr} ${year}`;
+}
 var DateFormats = {
   get ISO() {
     return "YYYY-MM-DD";
@@ -115,6 +122,7 @@ var MONTHS = [
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DateFormats,
+  formatISOToMilitary,
   formatMilitaryDate,
   formatMilitaryToISO,
   useDate

package/build/legacy/hooks/useDate.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useDate.ts"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useCallback,\n  ChangeEvent,\n  useMemo,\n  type InputHTMLAttributes,\n} from 'react'\n\nexport interface UseDateBase {\n  /**\n   * The format of the date input\n   */\n  format?: string\n  /**\n   * The callback to run when the date input changes\n   */\n  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']\n}\n\nexport interface UseDateOptions extends UseDateBase {\n  /**\n   * The initial value of the date input\n   */\n  initialValue?: string\n}\n\nexport interface UseDateReturn extends UseDateBase {\n  /**\n   * The ISO formatted date string\n   */\n  ISO: string\n  /**\n   * The value of the date input\n   */\n  value: string\n}\n\n/**\n * A hook for formatting and validating date inputs. The date format defaults to US Military format.\n * @example\n * ```tsx\n * const MyComponent = () => {\n *  const date = useDate({ initialValue: '01 JAN 2024' })\n *  return <input onChange={date.onChange} type=\"text\" value={date.value} />\n * }\n */\nexport function useDate(options?: UseDateOptions): UseDateReturn {\n  const initialValue = options?.initialValue ?? ''\n  const format = options?.format ?? DateFormats.USMilitary\n  const onChange = options?.onChange\n  const [value, setValue] = useState(initialValue)\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = formatMilitaryDate(e.currentTarget.value)\n      if (onChange) onChange(e)\n      setValue(newValue)\n    },\n    [onChange],\n  )\n\n  return useMemo(\n    () => ({\n      format,\n      value,\n      ISO: formatMilitaryToISO(value),\n      onChange: handleChange,\n    }),\n    [format, value, handleChange],\n  )\n}\n\n// helpers\n\n/**\n * Converts a string in US Military format to ISO format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in ISO format (YYYY-MM-DD)\n */\nexport function formatMilitaryToISO(input: string) {\n  const [day, month, year] = input.split(' ')\n  const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n  const monthNum = monthIndex + 1\n  return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(\n    2,\n    '0',\n  )}`\n}\n\n/**\n * Converts a string to US Military format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in US Military format (DD MMM YYYY)\n */\nexport function formatMilitaryDate(input: string): string {\n  let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')\n  let day = ''\n  let month = ''\n  let year = ''\n\n  // Format day\n  if (formatted.length >= 2) {\n    day = formatted.replace(/[^0-9]/g, '').slice(0, 2)\n    const dayNum = parseInt(day, 10)\n    if (dayNum > 31) day = '31'\n    else if (dayNum === 0) day = '01'\n    formatted = formatted.slice(2)\n  }\n\n  // Format month\n  if (formatted.length >= 3) {\n    month = formatted.slice(0, 3)\n    const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n    if (monthIndex !== -1) {\n      month = MONTHS[monthIndex]\n    } else {\n      month = month.replace(/[^A-Z]/g, '')\n    }\n    formatted = formatted.slice(3)\n  }\n\n  // Format year\n  if (formatted.length > 0) {\n    year = formatted.slice(0, 4)\n  }\n\n  return [day, month, year].filter(Boolean).join(' ')\n}\n\n/**\n * Date formatting options\n * @example\n * ```tsx\n * const date = new Date()\n * const formatted = date.format(DateFormats.USMilitary)\n */\nexport const DateFormats = {\n  get ISO() {\n    return 'YYYY-MM-DD'\n  },\n  get USMilitary() {\n    return 'DD MMM YYYY'\n  },\n  get Months() {\n    return MONTHS\n  },\n}\n\nconst MONTHS = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AAwCA,SAAS,QAAQ,SAAyC;AAC/D,QAAM,gBAAe,mCAAS,iBAAgB;AAC9C,QAAM,UAAS,mCAAS,WAAU,YAAY;AAC9C,QAAM,WAAW,mCAAS;AAC1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAE/C,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,WAAW,mBAAmB,EAAE,cAAc,KAAK;AACzD,UAAI,SAAU,UAAS,CAAC;AACxB,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK,oBAAoB,KAAK;AAAA,MAC9B,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY;AAAA,EAC9B;AACF;AASO,SAAS,oBAAoB,OAAe;AACjD,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,MAAM,MAAM,GAAG;AAC1C,QAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAM,WAAW,aAAa;AAC9B,SAAO,GAAG,QAAQ,MAAM,IAAI,SAAS,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI;AAAA,IACtE;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAOO,SAAS,mBAAmB,OAAuB;AACxD,MAAI,YAAY,MAAM,YAAY,EAAE,QAAQ,cAAc,EAAE;AAC5D,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAGX,MAAI,UAAU,UAAU,GAAG;AACzB,UAAM,UAAU,QAAQ,WAAW,EAAE,EAAE,MAAM,GAAG,CAAC;AACjD,UAAM,SAAS,SAAS,KAAK,EAAE;AAC/B,QAAI,SAAS,GAAI,OAAM;AAAA,aACd,WAAW,EAAG,OAAM;AAC7B,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,UAAU,GAAG;AACzB,YAAQ,UAAU,MAAM,GAAG,CAAC;AAC5B,UAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAI,eAAe,IAAI;AACrB,cAAQ,OAAO,UAAU;AAAA,IAC3B,OAAO;AACL,cAAQ,MAAM,QAAQ,WAAW,EAAE;AAAA,IACrC;AACA,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,SAAS,GAAG;AACxB,WAAO,UAAU,MAAM,GAAG,CAAC;AAAA,EAC7B;AAEA,SAAO,CAAC,KAAK,OAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpD;AASO,IAAM,cAAc;AAAA,EACzB,IAAI,MAAM;AACR,WAAO;AAAA,EACT;AAAA,EACA,IAAI,aAAa;AACf,WAAO;AAAA,EACT;AAAA,EACA,IAAI,SAAS;AACX,WAAO;AAAA,EACT;AACF;AAEA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}
+{"version":3,"sources":["../../../src/hooks/useDate.ts"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useCallback,\n  ChangeEvent,\n  useMemo,\n  type InputHTMLAttributes,\n} from 'react'\n\nexport interface UseDateBase {\n  /**\n   * The format of the date input\n   */\n  format?: string\n  /**\n   * The callback to run when the date input changes\n   */\n  onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']\n}\n\nexport interface UseDateOptions extends UseDateBase {\n  /**\n   * The initial value of the date input\n   */\n  initialValue?: string\n}\n\nexport interface UseDateReturn extends UseDateBase {\n  /**\n   * The ISO formatted date string\n   */\n  ISO: string\n  /**\n   * The value of the date input\n   */\n  value: string\n}\n\n/**\n * A hook for formatting and validating date inputs. The date format defaults to US Military format.\n * @example\n * ```tsx\n * const MyComponent = () => {\n *  const date = useDate({ initialValue: '01 JAN 2024' })\n *  return <input onChange={date.onChange} type=\"text\" value={date.value} />\n * }\n */\nexport function useDate(options?: UseDateOptions): UseDateReturn {\n  const initialValue = options?.initialValue ?? ''\n  const format = options?.format ?? DateFormats.USMilitary\n  const onChange = options?.onChange\n  const [value, setValue] = useState(initialValue)\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const newValue = formatMilitaryDate(e.currentTarget.value)\n      if (onChange) onChange(e)\n      setValue(newValue)\n    },\n    [onChange],\n  )\n\n  return useMemo(\n    () => ({\n      format,\n      value,\n      ISO: formatMilitaryToISO(value),\n      onChange: handleChange,\n    }),\n    [format, value, handleChange],\n  )\n}\n\n// helpers\n\n/**\n * Converts a string in US Military format to ISO format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in ISO format (YYYY-MM-DD)\n */\nexport function formatMilitaryToISO(input: string) {\n  const [day, month, year] = input.split(' ')\n  const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n  const monthNum = monthIndex + 1\n  return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(\n    2,\n    '0',\n  )}`\n}\n\n/**\n * Converts a string to US Military format. Used within the `useDate` hook.\n * @param input The string to format\n * @returns The formatted string in US Military format (DD MMM YYYY)\n */\nexport function formatMilitaryDate(input: string): string {\n  let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')\n  let day = ''\n  let month = ''\n  let year = ''\n\n  // Format day\n  if (formatted.length >= 2) {\n    day = formatted.replace(/[^0-9]/g, '').slice(0, 2)\n    const dayNum = parseInt(day, 10)\n    if (dayNum > 31) day = '31'\n    else if (dayNum === 0) day = '01'\n    formatted = formatted.slice(2)\n  }\n\n  // Format month\n  if (formatted.length >= 3) {\n    month = formatted.slice(0, 3)\n    const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))\n    if (monthIndex !== -1) {\n      month = MONTHS[monthIndex]\n    } else {\n      month = month.replace(/[^A-Z]/g, '')\n    }\n    formatted = formatted.slice(3)\n  }\n\n  // Format year\n  if (formatted.length > 0) {\n    year = formatted.slice(0, 4)\n  }\n\n  return [day, month, year].filter(Boolean).join(' ')\n}\n\n/**\n * Formats a date string to US Military format.\n * @param date The date string to format (i.e., '2024-01-01')\n * @returns The formatted date string in US Military format (DD MMM YYYY)\n */\nexport function formatISOToMilitary(date: string): string {\n  const [year, month, day] = date.split('-')\n  const monthIndex = parseInt(month, 10) - 1\n  const monthStr = MONTHS[monthIndex]\n  return `${day} ${monthStr} ${year}`\n}\n\n/**\n * Date formatting options\n * @example\n * ```tsx\n * const date = new Date()\n * const formatted = date.format(DateFormats.USMilitary)\n */\nexport const DateFormats = {\n  get ISO() {\n    return 'YYYY-MM-DD'\n  },\n  get USMilitary() {\n    return 'DD MMM YYYY'\n  },\n  get Months() {\n    return MONTHS\n  },\n}\n\nconst MONTHS = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n]\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AAwCA,SAAS,QAAQ,SAAyC;AAC/D,QAAM,gBAAe,mCAAS,iBAAgB;AAC9C,QAAM,UAAS,mCAAS,WAAU,YAAY;AAC9C,QAAM,WAAW,mCAAS;AAC1B,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,YAAY;AAE/C,QAAM,mBAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,WAAW,mBAAmB,EAAE,cAAc,KAAK;AACzD,UAAI,SAAU,UAAS,CAAC;AACxB,eAAS,QAAQ;AAAA,IACnB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK,oBAAoB,KAAK;AAAA,MAC9B,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,QAAQ,OAAO,YAAY;AAAA,EAC9B;AACF;AASO,SAAS,oBAAoB,OAAe;AACjD,QAAM,CAAC,KAAK,OAAO,IAAI,IAAI,MAAM,MAAM,GAAG;AAC1C,QAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAM,WAAW,aAAa;AAC9B,SAAO,GAAG,QAAQ,MAAM,IAAI,SAAS,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,IAAI;AAAA,IACtE;AAAA,IACA;AAAA,EACF,CAAC;AACH;AAOO,SAAS,mBAAmB,OAAuB;AACxD,MAAI,YAAY,MAAM,YAAY,EAAE,QAAQ,cAAc,EAAE;AAC5D,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,MAAI,OAAO;AAGX,MAAI,UAAU,UAAU,GAAG;AACzB,UAAM,UAAU,QAAQ,WAAW,EAAE,EAAE,MAAM,GAAG,CAAC;AACjD,UAAM,SAAS,SAAS,KAAK,EAAE;AAC/B,QAAI,SAAS,GAAI,OAAM;AAAA,aACd,WAAW,EAAG,OAAM;AAC7B,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,UAAU,GAAG;AACzB,YAAQ,UAAU,MAAM,GAAG,CAAC;AAC5B,UAAM,aAAa,OAAO,UAAU,CAAC,MAAM,EAAE,WAAW,KAAK,CAAC;AAC9D,QAAI,eAAe,IAAI;AACrB,cAAQ,OAAO,UAAU;AAAA,IAC3B,OAAO;AACL,cAAQ,MAAM,QAAQ,WAAW,EAAE;AAAA,IACrC;AACA,gBAAY,UAAU,MAAM,CAAC;AAAA,EAC/B;AAGA,MAAI,UAAU,SAAS,GAAG;AACxB,WAAO,UAAU,MAAM,GAAG,CAAC;AAAA,EAC7B;AAEA,SAAO,CAAC,KAAK,OAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACpD;AAOO,SAAS,oBAAoB,MAAsB;AACxD,QAAM,CAAC,MAAM,OAAO,GAAG,IAAI,KAAK,MAAM,GAAG;AACzC,QAAM,aAAa,SAAS,OAAO,EAAE,IAAI;AACzC,QAAM,WAAW,OAAO,UAAU;AAClC,SAAO,GAAG,GAAG,IAAI,QAAQ,IAAI,IAAI;AACnC;AASO,IAAM,cAAc;AAAA,EACzB,IAAI,MAAM;AACR,WAAO;AAAA,EACT;AAAA,EACA,IAAI,aAAa;AACf,WAAO;AAAA,EACT;AAAA,EACA,IAAI,SAAS;AACX,WAAO;AAAA,EACT;AACF;AAEA,IAAM,SAAS;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}