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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePattern.js","sources":["../../../../../src/ui/components/DataTablePattern/DataTablePattern.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useMemo } from \"react\";\nimport { Table } from \"../../components\";\nimport { Pagination, SearchInput } from \"../../components\";\nimport { Container } from \"../../layouts/Container/Container\";\nimport { Stack } from \"../../layouts/Stack/Stack\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\nimport type { TableColumn } from \"../../components/Table/TableTypes\";\n\n// Extended TableColumn type for DataTablePattern (supports accessor and header for backward compatibility)\nexport interface DataTableColumn<T = unknown> extends Omit<\n  TableColumn<T>,\n  \"key\" | \"label\"\n> {\n  key?: keyof T | string;\n  label?: string;\n  // Legacy support\n  accessor?: keyof T | string | ((row: T) => unknown);\n  header?: string;\n}\n\nexport interface DataTablePatternProps<T = unknown> {\n  /**\n   * Table columns configuration\n   * Supports both TableColumn format (key, label) and legacy format (accessor, header)\n   */\n  columns: DataTableColumn<T>[];\n  /**\n   * Table data rows\n   */\n  data: T[];\n  /**\n   * Search placeholder text\n   * @default \"Search...\"\n   */\n  searchPlaceholder?: string;\n  /**\n   * Enable search functionality\n   * @default true\n   */\n  enableSearch?: boolean;\n  /**\n   * Items per page\n   * @default 10\n   */\n  itemsPerPage?: number;\n  /**\n   * Enable pagination\n   * @default true\n   */\n  enablePagination?: boolean;\n  /**\n   * Action buttons to display above the table\n   */\n  actions?: React.ReactNode;\n  /**\n   * Callback when row is clicked\n   */\n  onRowClick?: (row: T, index: number) => void;\n  /**\n   * Loading state\n   */\n  loading?: boolean;\n  /**\n   * Empty state message\n   */\n  emptyMessage?: string;\n}\n\n/**\n * DataTablePattern - A complete data table pattern combining Table, Pagination, Search, and Actions\n *\n * This pattern solves the common UX problem of displaying searchable, paginated data tables\n * with actions. It combines multiple components into a cohesive solution.\n *\n * @example\n * ```tsx\n * <DataTablePattern\n *   columns={columns}\n *   data={data}\n *   enableSearch\n *   enablePagination\n *   actions={<Button>Export</Button>}\n * />\n * ```\n */\nexport function DataTablePattern<\n  T extends Record<string, unknown> = Record<string, unknown>,\n>({\n  columns,\n  data,\n  searchPlaceholder = \"Search...\",\n  enableSearch = true,\n  itemsPerPage = 10,\n  enablePagination = true,\n  actions,\n  onRowClick,\n  loading = false,\n  emptyMessage = \"No data available\",\n}: DataTablePatternProps<T>) {\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [currentPage, setCurrentPage] = useState(1);\n\n  // Convert columns to Table format (key/label from accessor/header if needed)\n  const tableColumns: TableColumn<T>[] = useMemo(() => {\n    return columns.map((column) => {\n      // If using legacy format (accessor/header), convert to key/label\n      if (column.accessor || column.header) {\n        const key =\n          column.key ||\n          (typeof column.accessor === \"string\"\n            ? column.accessor\n            : String(column.accessor));\n        const label = column.label || column.header || \"\";\n        return {\n          ...column,\n          key: key as keyof T | string,\n          label,\n        } as TableColumn<T>;\n      }\n      // Otherwise use as-is (already in TableColumn format)\n      return column as TableColumn<T>;\n    });\n  }, [columns]);\n\n  // Filter data based on search query\n  const filteredData = useMemo(() => {\n    if (!searchQuery.trim()) return data;\n\n    const query = searchQuery.toLowerCase();\n    return data.filter((row) => {\n      return tableColumns.some((column) => {\n        const value = (row as Record<string, unknown>)[String(column.key)];\n        return String(value).toLowerCase().includes(query);\n      });\n    });\n  }, [data, searchQuery, tableColumns]);\n\n  // Paginate filtered data\n  const paginatedData = useMemo(() => {\n    if (!enablePagination) return filteredData;\n\n    const startIndex = (currentPage - 1) * itemsPerPage;\n    const endIndex = startIndex + itemsPerPage;\n    return filteredData.slice(startIndex, endIndex);\n  }, [filteredData, currentPage, itemsPerPage, enablePagination]);\n\n  const totalPages = enablePagination\n    ? Math.ceil(filteredData.length / itemsPerPage)\n    : 1;\n\n  const handlePageChange = (page: number) => {\n    setCurrentPage(page);\n  };\n\n  const handleSearchChange = (value: string) => {\n    setSearchQuery(value);\n    setCurrentPage(1); // Reset to first page on search\n  };\n\n  return (\n    <Container maxWidth=\"full\" paddingX=\"base\" paddingY=\"base\">\n      <Stack spacing=\"md\">\n        {/* Header with Search and Actions */}\n        <div\n          className={`flex items-center justify-between ${getSpacingClass(\"base\", \"gap\")}`}\n        >\n          {enableSearch && (\n            <div className=\"flex-1 max-w-md\">\n              <SearchInput\n                placeholder={searchPlaceholder}\n                value={searchQuery}\n                onSearch={handleSearchChange}\n              />\n            </div>\n          )}\n          {actions && (\n            <div className={`flex ${getSpacingClass(\"sm\", \"gap\")}`}>\n              {actions}\n            </div>\n          )}\n        </div>\n\n        {/* Table */}\n        <Table\n          columns={tableColumns}\n          data={paginatedData}\n          loading={loading}\n          emptyMessage={emptyMessage}\n          onRowClick={\n            onRowClick\n              ? (row) => {\n                  // Find the index of the row in filteredData (not paginated) for accurate index\n                  const globalIndex = filteredData.findIndex((r) => r === row);\n                  onRowClick(\n                    row,\n                    globalIndex >= 0\n                      ? globalIndex\n                      : paginatedData.findIndex((r) => r === row),\n                  );\n                }\n              : undefined\n          }\n        />\n\n        {/* Pagination */}\n        {enablePagination && totalPages > 1 && (\n          <div className=\"flex justify-center\">\n            <Pagination\n              currentPage={currentPage}\n              totalPages={totalPages}\n              onPageChange={handlePageChange}\n            />\n          </div>\n        )}\n\n        {/* Results count */}\n        {enableSearch && (\n          <div className=\"text-sm text-fg-secondary text-center\">\n            Showing {paginatedData.length} of {filteredData.length} results\n          </div>\n        )}\n      </Stack>\n    </Container>\n  );\n}\n"],"names":["DataTablePattern","columns","data","searchPlaceholder","enableSearch","itemsPerPage","enablePagination","actions","onRowClick","loading","emptyMessage","searchQuery","setSearchQuery","useState","currentPage","setCurrentPage","tableColumns","useMemo","column","key","label","__spreadProps","__spreadValues","filteredData","query","row","value","paginatedData","startIndex","endIndex","totalPages","handlePageChange","page","handleSearchChange","jsx","Container","jsxs","Stack","getSpacingClass","SearchInput","Table","globalIndex","r","Pagination"],"mappings":"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"}

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

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as r, jsxs as B } from "react/jsx-runtime";
+import { useState as I, useRef as P, useEffect as v } from "react";
+import { createPortal as F } from "react-dom";
+import { DatePickerProvider as E } from "./DatePickerProvider.js";
+import { DatePickerInput as $ } from "./DatePickerInput.js";
+import { DatePickerCalendar as h } from "./DatePickerCalendar.js";
+import { getZIndexClass as X } from "../../tokens/z-index.js";
+import { getRadiusClass as Y } from "../../tokens/radius.js";
+import { getShadowClass as Z } from "../../tokens/shadows.js";
+function d({
+  children: i,
+  mode: e = "single",
+  value: l,
+  defaultValue: c,
+  onValueChange: a,
+  minDate: t,
+  maxDate: p,
+  disabledDates: o,
+  placeholder: u,
+  format: L,
+  showCalendarButton: O = !0,
+  "aria-label": R,
+  className: j = ""
+}) {
+  const [n, f] = I(!1), m = P(null), w = P(null);
+  return v(() => {
+    if (!n) return;
+    const s = (k) => {
+      var C, b, x, y;
+      const g = k.target, N = (b = (C = m.current) == null ? void 0 : C.contains(g)) != null ? b : !1, S = (y = (x = w.current) == null ? void 0 : x.contains(g)) != null ? y : !1;
+      !N && !S && f(!1);
+    };
+    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+  }, [n]), v(() => {
+    if (!n) return;
+    const s = (k) => {
+      k.key === "Escape" && f(!1);
+    };
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [n]), i ? /* @__PURE__ */ r(
+    E,
+    {
+      mode: e,
+      value: l,
+      defaultValue: c,
+      onValueChange: a,
+      minDate: t,
+      maxDate: p,
+      disabledDates: o,
+      children: i
+    }
+  ) : /* @__PURE__ */ r("div", { ref: m, className: `relative ${j}`, children: /* @__PURE__ */ B(
+    E,
+    {
+      mode: e,
+      value: l,
+      defaultValue: c,
+      onValueChange: a,
+      minDate: t,
+      maxDate: p,
+      disabledDates: o,
+      children: [
+        /* @__PURE__ */ r(
+          $,
+          {
+            placeholder: u,
+            format: L,
+            showCalendarButton: O,
+            "aria-label": R,
+            onFocus: () => f(!0)
+          }
+        ),
+        n && /* @__PURE__ */ r(D, { containerRef: m, popupRef: w, children: /* @__PURE__ */ r(h, {}) })
+      ]
+    }
+  ) });
+}
+function D({
+  children: i,
+  containerRef: e,
+  popupRef: l
+}) {
+  const c = P(null), a = l || c, [t, p] = I(null);
+  if (v(() => {
+    if (e != null && e.current) {
+      const u = e.current.getBoundingClientRect();
+      p({
+        top: u.bottom + window.scrollY + 8,
+        left: u.left + window.scrollX
+      });
+    }
+  }, [e]), !t)
+    return null;
+  const o = /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      className: `
+        fixed ${X("popover")}
+        bg-surface-overlay
+        ${Y("lg")}
+        ${Z("xl")}
+        border border-line-default
+      `,
+      role: "dialog",
+      "aria-modal": "false",
+      "aria-label": "Date picker calendar",
+      style: {
+        top: `${t.top}px`,
+        left: `${t.left}px`
+      },
+      children: i
+    }
+  );
+  return typeof window != "undefined" ? F(o, document.body) : o;
+}
+d.Input = $;
+d.Calendar = h;
+d.Popup = D;
+const T = d;
+export {
+  d as DatePickerComponent,
+  T as default
+};
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../../../src/ui/components/DatePicker/DatePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  useState,\n  useRef,\n  useEffect,\n  type ReactNode,\n  type RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { DatePickerProvider } from \"./DatePickerProvider\";\nimport { DatePickerInput } from \"./DatePickerInput\";\nimport { DatePickerCalendar } from \"./DatePickerCalendar\";\nimport { getRadiusClass, getShadowClass, getZIndexClass } from \"../../tokens\";\n\nexport interface DatePickerProps {\n  children?: ReactNode;\n  mode?: \"single\" | \"range\";\n  value?: Date | { start: Date | null; end: Date | null };\n  defaultValue?: Date | { start: Date | null; end: Date | null };\n  onValueChange?: (\n    value: Date | { start: Date | null; end: Date | null } | null,\n  ) => void;\n  minDate?: Date;\n  maxDate?: Date;\n  disabledDates?: Date[];\n  placeholder?: string;\n  format?: string;\n  showCalendarButton?: boolean;\n  \"aria-label\"?: string;\n  className?: string;\n}\n\n/**\n * DatePicker Component\n *\n * A flexible date picker component with single date and range selection.\n * Supports keyboard navigation and basic localization.\n *\n * @example\n * ```tsx\n * // Single date\n * <DatePicker\n *   value={selectedDate}\n *   onValueChange={setSelectedDate}\n * />\n *\n * // Date range\n * <DatePicker\n *   mode=\"range\"\n *   value={{ start: rangeStart, end: rangeEnd }}\n *   onValueChange={setRange}\n * />\n *\n * // Compound components\n * <DatePicker>\n *   <DatePicker.Input />\n *   <DatePicker.Calendar />\n * </DatePicker>\n * ```\n */\nfunction DatePickerComponent({\n  children,\n  mode = \"single\",\n  value,\n  defaultValue,\n  onValueChange,\n  minDate,\n  maxDate,\n  disabledDates,\n  placeholder,\n  format,\n  showCalendarButton = true,\n  \"aria-label\": ariaLabel,\n  className = \"\",\n}: DatePickerProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  // Close calendar when clicking outside\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      const target = event.target as Node;\n\n      // Check if click is outside both container and popup\n      const clickedInsideContainer =\n        containerRef.current?.contains(target) ?? false;\n      const clickedInsidePopup = popupRef.current?.contains(target) ?? false;\n\n      // Close if clicked outside both container and popup\n      if (!clickedInsideContainer && !clickedInsidePopup) {\n        setIsOpen(false);\n      }\n    };\n\n    // Use mousedown instead of click to catch the event before it bubbles\n    document.addEventListener(\"mousedown\", handleClickOutside);\n    return () => document.removeEventListener(\"mousedown\", handleClickOutside);\n  }, [isOpen]);\n\n  // Close on Escape key\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleEscape = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        setIsOpen(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleEscape);\n    return () => document.removeEventListener(\"keydown\", handleEscape);\n  }, [isOpen]);\n\n  // If children provided, use compound component API\n  if (children) {\n    return (\n      <DatePickerProvider\n        mode={mode}\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onValueChange}\n        minDate={minDate}\n        maxDate={maxDate}\n        disabledDates={disabledDates}\n      >\n        {children}\n      </DatePickerProvider>\n    );\n  }\n\n  // Otherwise, use simplified API\n  return (\n    <div ref={containerRef} className={`relative ${className}`}>\n      <DatePickerProvider\n        mode={mode}\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={onValueChange}\n        minDate={minDate}\n        maxDate={maxDate}\n        disabledDates={disabledDates}\n      >\n        <DatePickerInput\n          placeholder={placeholder}\n          format={format}\n          showCalendarButton={showCalendarButton}\n          aria-label={ariaLabel}\n          onFocus={() => setIsOpen(true)}\n        />\n        {isOpen && (\n          <DatePickerPopup containerRef={containerRef} popupRef={popupRef}>\n            <DatePickerCalendar />\n          </DatePickerPopup>\n        )}\n      </DatePickerProvider>\n    </div>\n  );\n}\n\n// Popup component for calendar\nfunction DatePickerPopup({\n  children,\n  containerRef,\n  popupRef: externalPopupRef,\n}: {\n  children: ReactNode;\n  containerRef?: RefObject<HTMLDivElement | null>;\n  popupRef?: RefObject<HTMLDivElement | null>;\n}) {\n  const internalPopupRef = useRef<HTMLDivElement>(null);\n  const popupRef = externalPopupRef || internalPopupRef;\n  const [position, setPosition] = useState<{\n    top: number;\n    left: number;\n  } | null>(null);\n\n  // Calculate position relative to container\n  useEffect(() => {\n    if (containerRef?.current) {\n      const containerRect = containerRef.current.getBoundingClientRect();\n\n      setPosition({\n        top: containerRect.bottom + window.scrollY + 8,\n        left: containerRect.left + window.scrollX,\n      });\n    }\n  }, [containerRef]);\n\n  if (!position) {\n    return null; // Wait for position calculation\n  }\n\n  const popup = (\n    <div\n      ref={popupRef}\n      className={`\n        fixed ${getZIndexClass(\"popover\")}\n        bg-surface-overlay\n        ${getRadiusClass(\"lg\")}\n        ${getShadowClass(\"xl\")}\n        border border-line-default\n      `}\n      role=\"dialog\"\n      aria-modal=\"false\"\n      aria-label=\"Date picker calendar\"\n      style={{\n        top: `${position.top}px`,\n        left: `${position.left}px`,\n      }}\n    >\n      {children}\n    </div>\n  );\n\n  // Portal rendering for better z-index handling\n  if (typeof window !== \"undefined\") {\n    return createPortal(popup, document.body);\n  }\n\n  return popup;\n}\n\n// Compound components\nDatePickerComponent.Input = DatePickerInput;\nDatePickerComponent.Calendar = DatePickerCalendar;\nDatePickerComponent.Popup = DatePickerPopup;\n\n// Type declaration for compound components\nexport interface DatePickerComponentType extends React.FC<DatePickerProps> {\n  Input: typeof DatePickerInput;\n  Calendar: typeof DatePickerCalendar;\n  Popup: typeof DatePickerPopup;\n}\n\n// Cast to include compound components and export as DatePicker\nconst DatePicker: DatePickerComponentType =\n  DatePickerComponent as DatePickerComponentType;\n\nexport { DatePickerComponent };\nexport default DatePicker;\n"],"names":["DatePickerComponent","children","mode","value","defaultValue","onValueChange","minDate","maxDate","disabledDates","placeholder","format","showCalendarButton","ariaLabel","className","isOpen","setIsOpen","useState","containerRef","useRef","popupRef","useEffect","handleClickOutside","event","target","clickedInsideContainer","_b","_a","clickedInsidePopup","_d","_c","handleEscape","e","jsx","DatePickerProvider","jsxs","DatePickerInput","DatePickerPopup","DatePickerCalendar","externalPopupRef","internalPopupRef","position","setPosition","containerRect","popup","getZIndexClass","getRadiusClass","getShadowClass","createPortal","DatePicker"],"mappings":"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"}

package/dist/granular/ui/components/DatePicker/DatePickerCalendar.js

@@ -0,0 +1,294 @@
+"use client";
+var te = Object.defineProperty, re = Object.defineProperties;
+var ne = Object.getOwnPropertyDescriptors;
+var w = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, I = Object.prototype.propertyIsEnumerable;
+var T = (t, r, a) => r in t ? te(t, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[r] = a, C = (t, r) => {
+  for (var a in r || (r = {}))
+    A.call(r, a) && T(t, a, r[a]);
+  if (w)
+    for (var a of w(r))
+      I.call(r, a) && T(t, a, r[a]);
+  return t;
+}, E = (t, r) => re(t, ne(r));
+var P = (t, r) => {
+  var a = {};
+  for (var l in t)
+    A.call(t, l) && r.indexOf(l) < 0 && (a[l] = t[l]);
+  if (t != null && w)
+    for (var l of w(t))
+      r.indexOf(l) < 0 && I.call(t, l) && (a[l] = t[l]);
+  return a;
+};
+import { jsxs as v, jsx as u } from "react/jsx-runtime";
+import { useState as j, useRef as se, useEffect as q } from "react";
+import { ChevronLeft as ae, ChevronRight as le } from "lucide-react";
+import { useDatePickerContext as ie } from "./DatePickerContext.js";
+import { Button as J } from "../../primitives/Button/Button.js";
+import { getSpacingClass as g } from "../../tokens/spacing.js";
+import { getRadiusClass as oe } from "../../tokens/radius.js";
+function ue(t) {
+  return new Date(t.getFullYear(), t.getMonth() + 1, 0).getDate();
+}
+function ce(t) {
+  return new Date(t.getFullYear(), t.getMonth(), 1).getDay();
+}
+function c(t, r) {
+  return !t || !r ? !1 : t.getFullYear() === r.getFullYear() && t.getMonth() === r.getMonth() && t.getDate() === r.getDate();
+}
+function D(t, r) {
+  return t.getFullYear() === r.getFullYear() && t.getMonth() === r.getMonth();
+}
+function fe(t, r, a) {
+  if (!r || !a) return !1;
+  const l = t.getTime();
+  return l >= r.getTime() && l <= a.getTime();
+}
+function K(t, r, a, l) {
+  return !!(r && t < r || a && t > a || l != null && l.some((M) => c(t, M)));
+}
+const ge = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], me = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+function Me(M) {
+  var Y = M, {
+    month: t,
+    onMonthChange: r,
+    className: a = ""
+  } = Y, l = P(Y, [
+    "month",
+    "onMonthChange",
+    "className"
+  ]);
+  const {
+    selectedDate: f,
+    selectedRange: i,
+    mode: h,
+    onDateChange: z,
+    onRangeChange: y,
+    minDate: x,
+    maxDate: S,
+    disabledDates: d
+  } = ie(), [o, b] = j(
+    t || f || (i == null ? void 0 : i.start) || /* @__PURE__ */ new Date()
+  ), F = se(null), [m, H] = j(() => {
+    const e = /* @__PURE__ */ new Date(), n = t || f || (i == null ? void 0 : i.start) || e;
+    return f && D(f, n) ? f : D(e, n) ? e : new Date(n.getFullYear(), n.getMonth(), 1);
+  });
+  q(() => {
+    t && b(t);
+  }, [t]), q(() => {
+    if (!F.current) return;
+    const e = F.current.querySelector(
+      `[data-date="${m.toISOString()}"]`
+    );
+    e && e.focus();
+  }, [m]);
+  const L = (() => {
+    if (D(m, o)) return m;
+    const e = /* @__PURE__ */ new Date();
+    return D(e, o) ? e : new Date(o.getFullYear(), o.getMonth(), 1);
+  })(), R = ue(o), W = ce(o), p = [];
+  for (let e = 0; e < W; e++)
+    p.push(null);
+  for (let e = 1; e <= R; e++)
+    p.push(
+      new Date(o.getFullYear(), o.getMonth(), e)
+    );
+  const k = (e) => {
+    if (!K(e, x, S, d)) {
+      if (h === "single")
+        z(e);
+      else if (h === "range") {
+        const n = i || { start: null, end: null };
+        !n.start || n.start && n.end ? y({ start: e, end: null }) : n.start && !n.end && (e < n.start ? y({ start: e, end: n.start }) : y({ start: n.start, end: e }));
+      }
+    }
+  }, B = () => {
+    const e = new Date(
+      o.getFullYear(),
+      o.getMonth() - 1,
+      1
+    );
+    b(e), r == null || r(e);
+  }, U = () => {
+    const e = new Date(
+      o.getFullYear(),
+      o.getMonth() + 1,
+      1
+    );
+    b(e), r == null || r(e);
+  }, G = (e, n) => {
+    let s = null;
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault(), s = new Date(
+          n.getFullYear(),
+          n.getMonth(),
+          n.getDate() - 1
+        );
+        break;
+      case "ArrowRight":
+        e.preventDefault(), s = new Date(
+          n.getFullYear(),
+          n.getMonth(),
+          n.getDate() + 1
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault(), s = new Date(
+          n.getFullYear(),
+          n.getMonth(),
+          n.getDate() - 7
+        );
+        break;
+      case "ArrowDown":
+        e.preventDefault(), s = new Date(
+          n.getFullYear(),
+          n.getMonth(),
+          n.getDate() + 7
+        );
+        break;
+      case "Home":
+        e.preventDefault(), s = new Date(n.getFullYear(), n.getMonth(), 1);
+        break;
+      case "End":
+        e.preventDefault(), s = new Date(n.getFullYear(), n.getMonth() + 1, 0);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), k(n);
+        return;
+    }
+    s && (D(s, o) || b(new Date(s.getFullYear(), s.getMonth(), 1)), H(s));
+  }, N = [];
+  for (let e = 0; e < p.length; e += 7)
+    N.push(p.slice(e, e + 7));
+  return /* @__PURE__ */ v(
+    "div",
+    E(C({
+      ref: F,
+      className: `${g("base", "p")} ${a}`
+    }, l), {
+      children: [
+        /* @__PURE__ */ v(
+          "div",
+          {
+            className: `flex items-center justify-between ${g("base", "mb")}`,
+            children: [
+              /* @__PURE__ */ u(
+                J,
+                {
+                  variant: "iconOnly",
+                  size: "sm",
+                  onClick: B,
+                  "aria-label": "Previous month",
+                  children: /* @__PURE__ */ u(ae, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ v("div", { className: "text-sm font-semibold", children: [
+                me[o.getMonth()],
+                " ",
+                o.getFullYear()
+              ] }),
+              /* @__PURE__ */ u(
+                J,
+                {
+                  variant: "iconOnly",
+                  size: "sm",
+                  onClick: U,
+                  "aria-label": "Next month",
+                  children: /* @__PURE__ */ u(le, { className: "h-4 w-4" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ v("div", { role: "grid", "aria-label": "Calendar", children: [
+          /* @__PURE__ */ u(
+            "div",
+            {
+              role: "row",
+              className: `grid grid-cols-7 ${g("xs", "gap")} ${g("sm", "mb")}`,
+              children: ge.map((e) => /* @__PURE__ */ u(
+                "div",
+                {
+                  role: "columnheader",
+                  className: `text-center text-xs font-medium text-fg-tertiary ${g("xs", "py")}`,
+                  children: e
+                },
+                e
+              ))
+            }
+          ),
+          N.map((e, n) => /* @__PURE__ */ u(
+            "div",
+            {
+              role: "row",
+              className: `grid grid-cols-7 ${g("xs", "gap")}`,
+              children: e.map((s, Q) => {
+                if (!s)
+                  return /* @__PURE__ */ u(
+                    "div",
+                    {
+                      role: "gridcell",
+                      className: "aspect-square"
+                    },
+                    `empty-${n}-${Q}`
+                  );
+                const $ = h === "single" ? c(s, f) : c(s, (i == null ? void 0 : i.start) || null) || c(s, (i == null ? void 0 : i.end) || null), V = h === "range" && i ? fe(s, i.start, i.end) : !1, O = K(
+                  s,
+                  x,
+                  S,
+                  d
+                ), X = c(s, /* @__PURE__ */ new Date()), Z = c(s, m), _ = c(s, L);
+                return /* @__PURE__ */ u(
+                  "button",
+                  {
+                    role: "gridcell",
+                    type: "button",
+                    "data-date": s.toISOString(),
+                    tabIndex: _ ? 0 : -1,
+                    onClick: () => k(s),
+                    onKeyDown: (ee) => G(ee, s),
+                    className: `
+                aspect-square
+                text-sm
+                ${oe("md")}
+                transition-colors
+                focus:outline-none
+                focus:ring-2
+                focus:ring-offset-1
+                ${O ? "text-fg-disabled cursor-not-allowed opacity-50" : $ ? "bg-surface-brand-strong text-fg-inverse font-semibold" : V ? "bg-surface-brand-muted text-fg-brand-emphasis" : X ? "border-2 border-line-brand font-semibold" : Z ? "bg-surface-brand-muted" : "hover:bg-surface-active"}
+              `,
+                    "aria-label": s.toDateString(),
+                    "aria-selected": $,
+                    "aria-disabled": O,
+                    children: s.getDate()
+                  },
+                  s.toISOString()
+                );
+              })
+            },
+            `week-${n}`
+          ))
+        ] })
+      ]
+    })
+  );
+}
+export {
+  Me as DatePickerCalendar
+};
+//# sourceMappingURL=DatePickerCalendar.js.map

package/dist/granular/ui/components/DatePicker/DatePickerCalendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerCalendar.js","sources":["../../../../../src/ui/components/DatePicker/DatePickerCalendar.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport Button from \"../../primitives/Button/Button\";\nimport { getRadiusClass } from \"../../tokens\";\nimport { getSpacingClass } from \"../../tokens/spacing\";\n\nexport interface DatePickerCalendarProps extends HTMLAttributes<HTMLDivElement> {\n  month?: Date; // Current month to display\n  onMonthChange?: (month: Date) => void;\n}\n\n// Helper functions for date manipulation (without date-fns dependency)\nfunction getDaysInMonth(date: Date): number {\n  return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();\n}\n\nfunction getFirstDayOfMonth(date: Date): number {\n  return new Date(date.getFullYear(), date.getMonth(), 1).getDay();\n}\n\nfunction isSameDay(date1: Date | null, date2: Date | null): boolean {\n  if (!date1 || !date2) return false;\n  return (\n    date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth() &&\n    date1.getDate() === date2.getDate()\n  );\n}\n\nfunction isSameMonth(date1: Date, date2: Date): boolean {\n  return (\n    date1.getFullYear() === date2.getFullYear() &&\n    date1.getMonth() === date2.getMonth()\n  );\n}\n\nfunction isDateInRange(\n  date: Date,\n  start: Date | null,\n  end: Date | null,\n): boolean {\n  if (!start || !end) return false;\n  const time = date.getTime();\n  return time >= start.getTime() && time <= end.getTime();\n}\n\nfunction isDateDisabled(\n  date: Date,\n  minDate?: Date,\n  maxDate?: Date,\n  disabledDates?: Date[],\n): boolean {\n  if (minDate && date < minDate) return true;\n  if (maxDate && date > maxDate) return true;\n  if (disabledDates?.some((d) => isSameDay(date, d))) return true;\n  return false;\n}\n\nconst WEEKDAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nconst MONTHS = [\n  \"January\",\n  \"February\",\n  \"March\",\n  \"April\",\n  \"May\",\n  \"June\",\n  \"July\",\n  \"August\",\n  \"September\",\n  \"October\",\n  \"November\",\n  \"December\",\n];\n\nexport function DatePickerCalendar({\n  month: controlledMonth,\n  onMonthChange,\n  className = \"\",\n  ...props\n}: DatePickerCalendarProps) {\n  const {\n    selectedDate,\n    selectedRange,\n    mode,\n    onDateChange,\n    onRangeChange,\n    minDate,\n    maxDate,\n    disabledDates,\n  } = useDatePickerContext();\n\n  const [currentMonth, setCurrentMonth] = useState<Date>(\n    controlledMonth || selectedDate || selectedRange?.start || new Date(),\n  );\n  const calendarRef = useRef<HTMLDivElement>(null);\n\n  // Initial focusedDate: prefer selectedDate if in currentMonth, else today\n  // if in currentMonth, else first of currentMonth. Always non-null so\n  // exactly one cell has tabIndex=0 — required for canonical grid roving\n  // tabindex (Tab enters once, arrows navigate within).\n  const [focusedDate, setFocusedDate] = useState<Date>(() => {\n    const today = new Date();\n    const initialMonth =\n      controlledMonth || selectedDate || selectedRange?.start || today;\n    if (selectedDate && isSameMonth(selectedDate, initialMonth)) {\n      return selectedDate;\n    }\n    if (isSameMonth(today, initialMonth)) {\n      return today;\n    }\n    return new Date(initialMonth.getFullYear(), initialMonth.getMonth(), 1);\n  });\n\n  // Update current month if controlled\n  useEffect(() => {\n    if (controlledMonth) {\n      setCurrentMonth(controlledMonth);\n    }\n  }, [controlledMonth]);\n\n  // Roving tabindex: when focusedDate changes (via arrow keys or initial\n  // mount), move the DOM focus to the matching cell. Without this, axe\n  // sees a correct grid structure but the keyboard experience is broken\n  // — arrow keys change only the state, not the actual focus.\n  useEffect(() => {\n    if (!calendarRef.current) return;\n    const cell = calendarRef.current.querySelector<HTMLElement>(\n      `[data-date=\"${focusedDate.toISOString()}\"]`,\n    );\n    if (cell) cell.focus();\n  }, [focusedDate]);\n\n  // Effective focused date for tabIndex assignment: if focusedDate is not\n  // in currentMonth (e.g. user clicked Prev/Next via mouse), still keep\n  // exactly one cell with tabIndex=0 so Tab can re-enter the grid. Pick a\n  // sensible fallback in the visible month.\n  const effectiveFocusedDate = (() => {\n    if (isSameMonth(focusedDate, currentMonth)) return focusedDate;\n    const today = new Date();\n    if (isSameMonth(today, currentMonth)) return today;\n    return new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1);\n  })();\n\n  const daysInMonth = getDaysInMonth(currentMonth);\n  const firstDay = getFirstDayOfMonth(currentMonth);\n  const days: (Date | null)[] = [];\n\n  // Add empty cells for days before the first day of the month\n  for (let i = 0; i < firstDay; i++) {\n    days.push(null);\n  }\n\n  // Add all days of the month\n  for (let day = 1; day <= daysInMonth; day++) {\n    days.push(\n      new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day),\n    );\n  }\n\n  const handleDateClick = (date: Date) => {\n    if (isDateDisabled(date, minDate, maxDate, disabledDates)) return;\n\n    if (mode === \"single\") {\n      onDateChange(date);\n    } else if (mode === \"range\") {\n      const currentRange = selectedRange || { start: null, end: null };\n      if (!currentRange.start || (currentRange.start && currentRange.end)) {\n        // Start new range\n        onRangeChange({ start: date, end: null });\n      } else if (currentRange.start && !currentRange.end) {\n        // Complete range\n        if (date < currentRange.start) {\n          onRangeChange({ start: date, end: currentRange.start });\n        } else {\n          onRangeChange({ start: currentRange.start, end: date });\n        }\n      }\n    }\n  };\n\n  const handlePreviousMonth = () => {\n    const newMonth = new Date(\n      currentMonth.getFullYear(),\n      currentMonth.getMonth() - 1,\n      1,\n    );\n    setCurrentMonth(newMonth);\n    onMonthChange?.(newMonth);\n  };\n\n  const handleNextMonth = () => {\n    const newMonth = new Date(\n      currentMonth.getFullYear(),\n      currentMonth.getMonth() + 1,\n      1,\n    );\n    setCurrentMonth(newMonth);\n    onMonthChange?.(newMonth);\n  };\n\n  const handleKeyDown = (\n    e: KeyboardEvent<HTMLButtonElement | HTMLDivElement>,\n    date: Date,\n  ) => {\n    let newDate: Date | null = null;\n\n    switch (e.key) {\n      case \"ArrowLeft\":\n        e.preventDefault();\n        newDate = new Date(\n          date.getFullYear(),\n          date.getMonth(),\n          date.getDate() - 1,\n        );\n        break;\n      case \"ArrowRight\":\n        e.preventDefault();\n        newDate = new Date(\n          date.getFullYear(),\n          date.getMonth(),\n          date.getDate() + 1,\n        );\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        newDate = new Date(\n          date.getFullYear(),\n          date.getMonth(),\n          date.getDate() - 7,\n        );\n        break;\n      case \"ArrowDown\":\n        e.preventDefault();\n        newDate = new Date(\n          date.getFullYear(),\n          date.getMonth(),\n          date.getDate() + 7,\n        );\n        break;\n      case \"Home\":\n        e.preventDefault();\n        newDate = new Date(date.getFullYear(), date.getMonth(), 1);\n        break;\n      case \"End\":\n        e.preventDefault();\n        newDate = new Date(date.getFullYear(), date.getMonth() + 1, 0);\n        break;\n      case \"Enter\":\n      case \" \":\n        e.preventDefault();\n        handleDateClick(date);\n        return;\n    }\n\n    if (newDate) {\n      // Adjust month if needed\n      if (!isSameMonth(newDate, currentMonth)) {\n        setCurrentMonth(new Date(newDate.getFullYear(), newDate.getMonth(), 1));\n      }\n      setFocusedDate(newDate);\n    }\n  };\n\n  // Chunk days into rows of 7 (one per week). The previous implementation\n  // rendered all ~35 day cells as direct children of a single CSS grid div,\n  // which made role=\"grid\" structurally invalid (grid must contain rows;\n  // rows must contain gridcells). Each week is now a role=\"row\".\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < days.length; i += 7) {\n    weeks.push(days.slice(i, i + 7));\n  }\n\n  return (\n    <div\n      ref={calendarRef}\n      className={`${getSpacingClass(\"base\", \"p\")} ${className}`}\n      {...props}\n    >\n      {/* Header with month navigation — sits OUTSIDE the role=\"grid\" so\n          the grid's direct children are only rows. */}\n      <div\n        className={`flex items-center justify-between ${getSpacingClass(\"base\", \"mb\")}`}\n      >\n        <Button\n          variant=\"iconOnly\"\n          size=\"sm\"\n          onClick={handlePreviousMonth}\n          aria-label=\"Previous month\"\n        >\n          <ChevronLeft className=\"h-4 w-4\" />\n        </Button>\n        <div className=\"text-sm font-semibold\">\n          {MONTHS[currentMonth.getMonth()]} {currentMonth.getFullYear()}\n        </div>\n        <Button\n          variant=\"iconOnly\"\n          size=\"sm\"\n          onClick={handleNextMonth}\n          aria-label=\"Next month\"\n        >\n          <ChevronRight className=\"h-4 w-4\" />\n        </Button>\n      </div>\n\n      <div role=\"grid\" aria-label=\"Calendar\">\n        {/* Weekday header row */}\n        <div\n          role=\"row\"\n          className={`grid grid-cols-7 ${getSpacingClass(\"xs\", \"gap\")} ${getSpacingClass(\"sm\", \"mb\")}`}\n        >\n          {WEEKDAYS.map((day) => (\n            <div\n              key={day}\n              role=\"columnheader\"\n              className={`text-center text-xs font-medium text-fg-tertiary ${getSpacingClass(\"xs\", \"py\")}`}\n            >\n              {day}\n            </div>\n          ))}\n        </div>\n\n        {/* Calendar grid — one role=\"row\" per week, role=\"gridcell\" per day.\n            The buttons carry role=\"gridcell\" explicitly: the explicit role\n            overrides the implicit button role, so aria-selected (allowed on\n            gridcell, prohibited on button) becomes valid. */}\n        {weeks.map((week, weekIdx) => (\n          <div\n            role=\"row\"\n            key={`week-${weekIdx}`}\n            className={`grid grid-cols-7 ${getSpacingClass(\"xs\", \"gap\")}`}\n          >\n            {week.map((date, dayIdx) => {\n              if (!date) {\n                return (\n                  <div\n                    role=\"gridcell\"\n                    key={`empty-${weekIdx}-${dayIdx}`}\n                    className=\"aspect-square\"\n                  />\n                );\n              }\n\n              const isSelected =\n                mode === \"single\"\n                  ? isSameDay(date, selectedDate)\n                  : isSameDay(date, selectedRange?.start || null) ||\n                    isSameDay(date, selectedRange?.end || null);\n\n              const isInRange =\n                mode === \"range\" && selectedRange\n                  ? isDateInRange(date, selectedRange.start, selectedRange.end)\n                  : false;\n\n              const isDisabled = isDateDisabled(\n                date,\n                minDate,\n                maxDate,\n                disabledDates,\n              );\n              const isToday = isSameDay(date, new Date());\n              const isFocused = isSameDay(date, focusedDate);\n              // Roving tabindex: exactly one cell has tabIndex=0 per render,\n              // and it is the effective focused cell. Other cells are\n              // tabIndex=-1 (programmatically focusable via arrows, but\n              // skipped by Tab). When focusedDate is outside currentMonth\n              // (mouse-driven Prev/Next month nav), effectiveFocusedDate\n              // picks a fallback so the grid never loses its single tab stop.\n              const isTabStop = isSameDay(date, effectiveFocusedDate);\n\n              return (\n                <button\n                  key={date.toISOString()}\n                  role=\"gridcell\"\n                  type=\"button\"\n                  data-date={date.toISOString()}\n                  tabIndex={isTabStop ? 0 : -1}\n                  onClick={() => handleDateClick(date)}\n                  onKeyDown={(e) => handleKeyDown(e, date)}\n                  className={`\n                aspect-square\n                text-sm\n                ${getRadiusClass(\"md\")}\n                transition-colors\n                focus:outline-none\n                focus:ring-2\n                focus:ring-offset-1\n                ${\n                  isDisabled\n                    ? \"text-fg-disabled cursor-not-allowed opacity-50\"\n                    : isSelected\n                      ? \"bg-surface-brand-strong text-fg-inverse font-semibold\"\n                      : isInRange\n                        ? \"bg-surface-brand-muted text-fg-brand-emphasis\"\n                        : isToday\n                          ? \"border-2 border-line-brand font-semibold\"\n                          : isFocused\n                            ? \"bg-surface-brand-muted\"\n                            : \"hover:bg-surface-active\"\n                }\n              `}\n                  aria-label={date.toDateString()}\n                  aria-selected={isSelected}\n                  aria-disabled={isDisabled}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":["getDaysInMonth","date","getFirstDayOfMonth","isSameDay","date1","date2","isSameMonth","isDateInRange","start","end","time","isDateDisabled","minDate","maxDate","disabledDates","d","WEEKDAYS","MONTHS","DatePickerCalendar","_a","_b","controlledMonth","onMonthChange","className","props","__objRest","selectedDate","selectedRange","mode","onDateChange","onRangeChange","useDatePickerContext","currentMonth","setCurrentMonth","useState","calendarRef","useRef","focusedDate","setFocusedDate","today","initialMonth","useEffect","cell","effectiveFocusedDate","daysInMonth","firstDay","days","i","day","handleDateClick","currentRange","handlePreviousMonth","newMonth","handleNextMonth","handleKeyDown","newDate","weeks","jsxs","__spreadProps","__spreadValues","getSpacingClass","jsx","Button","ChevronLeft","ChevronRight","week","weekIdx","dayIdx","isSelected","isInRange","isDisabled","isToday","isFocused","isTabStop","e","getRadiusClass"],"mappings":"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"}

package/dist/granular/ui/components/DatePicker/DatePickerContext.js

@@ -0,0 +1,16 @@
+"use client";
+import { useContext as e, createContext as o } from "react";
+const n = o(void 0);
+function c() {
+  const t = e(n);
+  if (!t)
+    throw new Error(
+      "DatePicker components must be used within a DatePicker component"
+    );
+  return t;
+}
+export {
+  n as DatePickerContext,
+  c as useDatePickerContext
+};
+//# sourceMappingURL=DatePickerContext.js.map

package/dist/granular/ui/components/DatePicker/DatePickerContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerContext.js","sources":["../../../../../src/ui/components/DatePicker/DatePickerContext.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\n\nexport interface DatePickerContextValue {\n  selectedDate: Date | null;\n  selectedRange: { start: Date | null; end: Date | null } | null;\n  mode: \"single\" | \"range\";\n  onDateChange: (date: Date | null) => void;\n  onRangeChange: (range: { start: Date | null; end: Date | null }) => void;\n  minDate?: Date;\n  maxDate?: Date;\n  disabledDates?: Date[];\n  locale?: Locale;\n}\n\nexport const DatePickerContext = createContext<\n  DatePickerContextValue | undefined\n>(undefined);\n\nexport function useDatePickerContext(): DatePickerContextValue {\n  const context = useContext(DatePickerContext);\n  if (!context) {\n    throw new Error(\n      \"DatePicker components must be used within a DatePicker component\",\n    );\n  }\n  return context;\n}\n\nexport function useDatePickerContextOptional():\n  | DatePickerContextValue\n  | undefined {\n  return useContext(DatePickerContext);\n}\n\n// Locale type - will be provided by date-fns\nexport interface Locale {\n  code?: string;\n  localize?: unknown;\n  formatLong?: unknown;\n  format?: unknown;\n  match?: unknown;\n  options?: unknown;\n}\n"],"names":["DatePickerContext","createContext","useDatePickerContext","context","useContext"],"mappings":";;AAgBO,MAAMA,IAAoBC,EAE/B,MAAS;AAEJ,SAASC,IAA+C;AAC7D,QAAMC,IAAUC,EAAWJ,CAAiB;AAC5C,MAAI,CAACG;AACH,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAGJ,SAAOA;AACT;"}

package/dist/granular/ui/components/DatePicker/DatePickerInput.js

@@ -0,0 +1,119 @@
+"use client";
+var P = Object.defineProperty, V = Object.defineProperties;
+var j = Object.getOwnPropertyDescriptors;
+var y = Object.getOwnPropertySymbols;
+var C = Object.prototype.hasOwnProperty, N = Object.prototype.propertyIsEnumerable;
+var D = (e, t, n) => t in e ? P(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, S = (e, t) => {
+  for (var n in t || (t = {}))
+    C.call(t, n) && D(e, n, t[n]);
+  if (y)
+    for (var n of y(t))
+      N.call(t, n) && D(e, n, t[n]);
+  return e;
+}, b = (e, t) => V(e, j(t));
+var k = (e, t) => {
+  var n = {};
+  for (var a in e)
+    C.call(e, a) && t.indexOf(a) < 0 && (n[a] = e[a]);
+  if (e != null && y)
+    for (var a of y(e))
+      t.indexOf(a) < 0 && N.call(e, a) && (n[a] = e[a]);
+  return n;
+};
+import { jsx as f } from "react/jsx-runtime";
+import { useState as v, useRef as z, useEffect as E } from "react";
+import { Calendar as Y } from "lucide-react";
+import { useDatePickerContext as _ } from "./DatePickerContext.js";
+import q from "../../primitives/Input/Input.js";
+import { Button as A } from "../../primitives/Button/Button.js";
+function p(e, t = "yyyy-MM-dd") {
+  const n = e.getFullYear(), a = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
+  return t.replace("yyyy", String(n)).replace("MM", a).replace("dd", r).replace("MM/dd/yyyy", `${a}/${r}/${n}`).replace("dd/MM/yyyy", `${r}/${a}/${n}`);
+}
+function w(e) {
+  if (!e) return null;
+  const t = e.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+  if (t) {
+    const [, r, c, l] = t, s = new Date(parseInt(r), parseInt(c) - 1, parseInt(l));
+    if (!isNaN(s.getTime())) return s;
+  }
+  const n = e.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  if (n) {
+    const [, r, c, l] = n, s = new Date(parseInt(l), parseInt(r) - 1, parseInt(c));
+    if (!isNaN(s.getTime())) return s;
+  }
+  const a = e.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+  if (a) {
+    const [, r, c, l] = a, s = new Date(parseInt(l), parseInt(c) - 1, parseInt(r));
+    if (!isNaN(s.getTime())) return s;
+  }
+  return null;
+}
+function W(s) {
+  var g = s, {
+    placeholder: e = "Select date",
+    format: t = "yyyy-MM-dd",
+    showCalendarButton: n = !0,
+    "aria-label": a,
+    onFocus: r,
+    className: c = ""
+  } = g, l = k(g, [
+    "placeholder",
+    "format",
+    "showCalendarButton",
+    "aria-label",
+    "onFocus",
+    "className"
+  ]);
+  const { selectedDate: m, selectedRange: i, mode: u, onDateChange: x } = _(), [h, o] = v(""), [F, I] = v(!1), M = z(null);
+  E(() => {
+    u === "single" && m ? o(p(m, t)) : u === "range" && i ? i.start && i.end ? o(
+      `${p(i.start, t)} - ${p(i.end, t)}`
+    ) : i.start ? o(p(i.start, t)) : o("") : o("");
+  }, [m, i, u, t]);
+  const B = (d) => {
+    const $ = d.target.value;
+    if (o($), u === "single") {
+      const O = w($);
+      x(O);
+    }
+  }, R = () => {
+    if (I(!1), h && u === "single") {
+      const d = w(h);
+      d && o(p(d, t));
+    }
+  }, T = () => {
+    var d;
+    (d = M.current) == null || d.focus();
+  };
+  return /* @__PURE__ */ f("div", b(S({ className: `relative ${c}` }, l), { children: /* @__PURE__ */ f(
+    q,
+    {
+      ref: M,
+      type: "text",
+      value: h,
+      onChange: B,
+      onFocus: () => {
+        I(!0), r == null || r();
+      },
+      onBlur: R,
+      placeholder: e,
+      "aria-label": a || e,
+      rightIcon: n ? /* @__PURE__ */ f(
+        A,
+        {
+          variant: "iconOnly",
+          size: "sm",
+          onClick: T,
+          "aria-label": "Open calendar",
+          type: "button",
+          children: /* @__PURE__ */ f(Y, { className: "h-4 w-4" })
+        }
+      ) : void 0
+    }
+  ) }));
+}
+export {
+  W as DatePickerInput
+};
+//# sourceMappingURL=DatePickerInput.js.map