@signalflare-ai/ui 1.2.0 → 1.4.0

package/dist/data-grid-DrguJq_H.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-DrguJq_H.js","names":[],"sources":["../src/components/data-grid/features.ts","../src/components/data-grid/data-grid.tsx"],"sourcesContent":["import {\n  columnFilteringFeature,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n  tableFeatures,\n} from \"@tanstack/react-table\";\n\n/**\n * The TanStack Table v9 feature set used by DataGrid.\n *\n * v9 is modular/tree-shakeable: features must be opted into explicitly via\n * `_features` rather than being bundled into `useReactTable` like v8. This set\n * mirrors the capabilities the v8 DataGrid relied on: sorting, filtering,\n * pagination, row selection, column visibility, and column resizing/sizing.\n */\nexport const dataGridFeatures = tableFeatures({\n  columnFilteringFeature,\n  columnResizingFeature,\n  columnSizingFeature,\n  columnVisibilityFeature,\n  rowPaginationFeature,\n  rowSelectionFeature,\n  rowSortingFeature,\n});\n\n/** The precise feature-set type, used to parameterize `Table<TFeatures, TData>`. */\nexport type DataGridFeatures = typeof dataGridFeatures;\n","\"use client\";\n\nimport {\n  CaretDownIcon,\n  CaretUpIcon,\n  CaretUpDownIcon,\n  ColumnsIcon,\n  FadersHorizontalIcon,\n} from \"@phosphor-icons/react\";\nimport {\n  createFilteredRowModel,\n  createPaginatedRowModel,\n  createSortedRowModel,\n  filterFns,\n  flexRender,\n  sortFns,\n  useTable,\n  type ColumnDef,\n  type ColumnVisibilityState,\n  type PaginationState,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n  type TableState,\n} from \"@tanstack/react-table\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Button } from \"../button\";\nimport { Checkbox } from \"../checkbox\";\nimport { DropdownMenu } from \"../dropdown\";\nimport { Empty } from \"../empty\";\nimport { Filters } from \"../filters\";\nimport { Loader } from \"../loader\";\nimport { Pagination } from \"../pagination\";\nimport { Table } from \"../table\";\nimport { dataGridFeatures, type DataGridFeatures } from \"./features\";\nimport type {\n  DataGridProps,\n  DataGridContextValue,\n  DataGridToolbarProps,\n  DataGridContentProps,\n  DataGridPaginationProps,\n  DataGridColumnToggleProps,\n  DataGridEmptyProps,\n} from \"./types\";\n\n// ============================================================================\n// Variants\n// ============================================================================\n\n/** DataGrid layout variant definitions */\nexport const SF_DATA_GRID_VARIANTS = {\n  layout: {\n    auto: {\n      classes: \"\",\n      description: \"Auto column sizing - columns resize based on content\",\n    },\n    fixed: {\n      classes: \"table-fixed\",\n      description: \"Fixed column sizing - columns have equal width\",\n    },\n  },\n} as const;\n\n/** Default variants for DataGrid */\nexport const SF_DATA_GRID_DEFAULT_VARIANTS = {\n  layout: \"auto\",\n} as const;\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst DataGridContext = createContext<DataGridContextValue | null>(null);\nconst DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100];\n\nfunction useDataGridContext<TData extends RowData>() {\n  const context = useContext(DataGridContext);\n  if (!context) {\n    throw new Error(\n      \"DataGrid compound components must be used within a DataGrid\"\n    );\n  }\n  return context as DataGridContextValue<TData>;\n}\n\n// ============================================================================\n// Sort Icon Component\n// ============================================================================\n\nfunction SortIcon({ sorted }: { sorted: false | \"asc\" | \"desc\" }) {\n  if (sorted === \"asc\") {\n    return <CaretUpIcon className=\"size-3.5 text-sf-brand\" />;\n  }\n  if (sorted === \"desc\") {\n    return <CaretDownIcon className=\"size-3.5 text-sf-brand\" />;\n  }\n  return <CaretUpDownIcon className=\"size-3.5 text-sf-subtle\" />;\n}\n\n// ============================================================================\n// DataGrid Toolbar\n// ============================================================================\n\n/**\n * Toolbar component for DataGrid.\n * Shows filters, column visibility toggle, and custom actions.\n */\nfunction DataGridToolbar({ className, children }: DataGridToolbarProps) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 border-b border-sf-line p-3\",\n        className\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nDataGridToolbar.displayName = \"DataGrid.Toolbar\";\n\n// ============================================================================\n// DataGrid Column Toggle\n// ============================================================================\n\n/**\n * Column visibility toggle dropdown.\n * Shows checkboxes for each hideable column.\n */\nfunction DataGridColumnToggle({\n  className,\n  trigger,\n  label = \"Columns\",\n}: DataGridColumnToggleProps) {\n  const { table } = useDataGridContext();\n\n  const hideableColumns = useMemo(() => {\n    return table\n      .getAllColumns()\n      .filter(\n        (col) =>\n          col.getCanHide() &&\n          (col.columnDef.enableHiding !== false || col.getCanHide())\n      );\n  }, [table]);\n\n  if (hideableColumns.length === 0) return null;\n\n  return (\n    <DropdownMenu>\n      <DropdownMenu.Trigger>\n        {trigger ?? (\n          <Button variant=\"secondary\" size=\"sm\" className={className}>\n            <ColumnsIcon className=\"mr-1.5 size-4\" />\n            {label}\n          </Button>\n        )}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content className=\"w-48\">\n        <div className=\"flex flex-col gap-1 p-1\">\n          {hideableColumns.map((column) => (\n            <label\n              key={column.id}\n              className=\"flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-sf-tint\"\n            >\n              <Checkbox\n                checked={column.getIsVisible()}\n                onCheckedChange={(checked) =>\n                  column.toggleVisibility(!!checked)\n                }\n              />\n              <span className=\"flex-1\">\n                {typeof column.columnDef.header === \"string\"\n                  ? column.columnDef.header\n                  : column.id}\n              </span>\n            </label>\n          ))}\n          {hideableColumns.length > 0 && (\n            <>\n              <div className=\"my-1 h-px bg-sf-line\" />\n              <DropdownMenu.Item\n                onClick={() =>\n                  hideableColumns.forEach((col) => col.toggleVisibility(true))\n                }\n              >\n                Show all\n              </DropdownMenu.Item>\n              <DropdownMenu.Item\n                onClick={() =>\n                  hideableColumns.forEach((col) => col.toggleVisibility(false))\n                }\n              >\n                Hide all\n              </DropdownMenu.Item>\n            </>\n          )}\n        </div>\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  );\n}\n\nDataGridColumnToggle.displayName = \"DataGrid.ColumnToggle\";\n\n// ============================================================================\n// DataGrid Content\n// ============================================================================\n\n/**\n * Main table content component.\n * Renders the table with headers, rows, and cells.\n */\nfunction DataGridContent({ className }: DataGridContentProps) {\n  const {\n    table,\n    loading,\n    loadingRows,\n    enableColumnResizing,\n    virtualized,\n    estimatedRowHeight = 44,\n    overscan = 8,\n    maxHeight,\n  } = useDataGridContext();\n\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const rows = table.getRowModel().rows;\n\n  const virtualizer = useVirtualizer({\n    count: rows.length,\n    getScrollElement: () => scrollRef.current,\n    estimateSize: () => estimatedRowHeight,\n    overscan,\n    // Disable measurement work entirely when not virtualizing.\n    enabled: Boolean(virtualized),\n    getItemKey: (index) => rows[index]?.id ?? index,\n  });\n\n  if (loading) {\n    return (\n      <div className=\"p-4\">\n        <div className=\"space-y-2\">\n          {Array.from({ length: loadingRows ?? 5 }).map((_, i) => (\n            <Loader key={i} className=\"h-10 w-full\" />\n          ))}\n        </div>\n      </div>\n    );\n  }\n\n  const renderCells = (row: (typeof rows)[number]) =>\n    row.getVisibleCells().map((cell) => (\n      <Table.Cell\n        key={cell.id}\n        className={\n          (cell.column.columnDef as unknown as Record<string, unknown>)\n            .cellClassName as string\n        }\n        style={\n          enableColumnResizing ? { width: cell.column.getSize() } : undefined\n        }\n      >\n        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n      </Table.Cell>\n    ));\n\n  const headerRows = table.getHeaderGroups().map((headerGroup) => (\n    <Table.Row key={headerGroup.id}>\n      {headerGroup.headers.map((header) => {\n        const canSort = header.column.getCanSort();\n        const sorted = header.column.getIsSorted();\n        const canResize = enableColumnResizing && header.column.getCanResize();\n        const isResizing = header.column.getIsResizing();\n\n        return (\n          <Table.Head\n            key={header.id}\n            className={cn(\n              \"bg-sf-base relative group\",\n              canSort && \"cursor-pointer select-none hover:bg-sf-overlay\",\n              (header.column.columnDef as unknown as Record<string, unknown>)\n                .headerClassName as string\n            )}\n            style={canResize ? { width: header.getSize() } : undefined}\n            onClick={canSort ? () => header.column.toggleSorting() : undefined}\n          >\n            <div className=\"flex items-center gap-1.5\">\n              {header.isPlaceholder\n                ? null\n                : flexRender(\n                    header.column.columnDef.header,\n                    header.getContext()\n                  )}\n              {canSort && <SortIcon sorted={sorted} />}\n            </div>\n            {canResize && (\n              <Table.ResizeHandle\n                onMouseDown={header.getResizeHandler()}\n                onTouchStart={header.getResizeHandler()}\n                onDoubleClick={() => header.column.resetSize()}\n                className={cn(isResizing && \"visible bg-sf-brand/20\")}\n              />\n            )}\n          </Table.Head>\n        );\n      })}\n    </Table.Row>\n  ));\n\n  const tableElement = (\n    <Table className={className}>\n      <Table.Header>{headerRows}</Table.Header>\n      <Table.Body>\n        {rows.map((row) => (\n          <Table.Row\n            key={row.id}\n            variant={row.getIsSelected() ? \"selected\" : \"default\"}\n            className={cn(\n              row.getIsSelected() && \"bg-sf-tint\",\n              \"hover:bg-sf-overlay\"\n            )}\n          >\n            {renderCells(row)}\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table>\n  );\n\n  if (!virtualized) return tableElement;\n\n  // Virtualized: render only the visible window of rows inside a bounded\n  // scroll container, using spacer rows to preserve total scroll height and\n  // keep semantic <table> markup (sticky headers, column resizing intact).\n  const virtualRows = virtualizer.getVirtualItems();\n  const totalSize = virtualizer.getTotalSize();\n  const colSpan = table.getVisibleLeafColumns().length;\n  const paddingTop = virtualRows[0]?.start ?? 0;\n  const paddingBottom = totalSize - (virtualRows.at(-1)?.end ?? 0);\n\n  return (\n    <div\n      ref={scrollRef}\n      className=\"relative overflow-auto\"\n      style={{\n        maxHeight: typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight,\n      }}\n    >\n      <Table className={className}>\n        <Table.Header className=\"sticky top-0 z-10\">{headerRows}</Table.Header>\n        <Table.Body>\n          {paddingTop > 0 && (\n            <tr aria-hidden=\"true\">\n              {/* oxlint-disable-next-line control-has-associated-label */}\n              <td colSpan={colSpan} style={{ height: paddingTop }} />\n            </tr>\n          )}\n          {virtualRows.map((virtualRow) => {\n            const row = rows[virtualRow.index];\n            if (!row) return null;\n            return (\n              <Table.Row\n                key={row.id}\n                data-index={virtualRow.index}\n                ref={virtualizer.measureElement}\n                variant={row.getIsSelected() ? \"selected\" : \"default\"}\n                className={cn(\n                  row.getIsSelected() && \"bg-sf-tint\",\n                  \"hover:bg-sf-overlay\"\n                )}\n              >\n                {renderCells(row)}\n              </Table.Row>\n            );\n          })}\n          {paddingBottom > 0 && (\n            <tr aria-hidden=\"true\">\n              {/* oxlint-disable-next-line control-has-associated-label */}\n              <td colSpan={colSpan} style={{ height: paddingBottom }} />\n            </tr>\n          )}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nDataGridContent.displayName = \"DataGrid.Content\";\n\n// ============================================================================\n// DataGrid Pagination\n// ============================================================================\n\n/**\n * Pagination controls for DataGrid.\n * Wraps the Pagination component with table state.\n */\nfunction DataGridPagination({ className }: DataGridPaginationProps) {\n  const {\n    table,\n    pageSize: _pageSize,\n    pageIndex: _pageIndex,\n    totalCount,\n    manualPagination,\n  } = useDataGridContext();\n\n  // Get pagination state\n  const paginationState = table.state.pagination;\n  const currentPageIndex = paginationState.pageIndex;\n  const currentPageSize = paginationState.pageSize;\n\n  // Calculate row range\n  const startRow = currentPageIndex * currentPageSize + 1;\n  const endRow = Math.min(\n    (currentPageIndex + 1) * currentPageSize,\n    manualPagination ? totalCount : table.getCoreRowModel().rows.length\n  );\n\n  if (table.getPageCount() <= 1 && !manualPagination) return null;\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-between border-t border-sf-line p-3\",\n        className\n      )}\n    >\n      <div className=\"text-sm text-sf-subtle\">\n        Showing {startRow}–{endRow} of{\" \"}\n        {manualPagination ? totalCount : table.getCoreRowModel().rows.length}\n      </div>\n      <Pagination\n        page={currentPageIndex + 1}\n        setPage={(page) => table.setPageIndex(page - 1)}\n        perPage={currentPageSize}\n        totalCount={\n          manualPagination ? totalCount : table.getCoreRowModel().rows.length\n        }\n        text={({ pageShowingRange, totalCount: total }) =>\n          `Showing ${pageShowingRange} of ${total}`\n        }\n      />\n    </div>\n  );\n}\n\nDataGridPagination.displayName = \"DataGrid.Pagination\";\n\n// ============================================================================\n// DataGrid Empty\n// ============================================================================\n\n/**\n * Empty state component for DataGrid.\n * Shown when there are no rows to display.\n */\nfunction DataGridEmpty({\n  className,\n  children,\n  title = \"No results\",\n  description = \"No data to display.\",\n}: DataGridEmptyProps) {\n  const { table } = useDataGridContext();\n\n  // Only show if there are no rows\n  if (table.getCoreRowModel().rows.length > 0) return null;\n\n  return (\n    <div className={cn(\"p-8\", className)}>\n      {children ?? (\n        <Empty\n          icon={<FadersHorizontalIcon className=\"size-10 text-sf-subtle\" />}\n          title={title}\n          description={description}\n        />\n      )}\n    </div>\n  );\n}\n\nDataGridEmpty.displayName = \"DataGrid.Empty\";\n\n// ============================================================================\n// DataGrid Root\n// ============================================================================\n\n/**\n * DataGrid root component.\n * Sets up the react-table instance and provides context to child components.\n */\nfunction DataGridRoot<TData extends RowData>({\n  data,\n  columns,\n  sorting: controlledSorting,\n  onSortingChange,\n  enableSorting = true,\n  columnVisibility: controlledColumnVisibility,\n  onColumnVisibilityChange,\n  enableColumnVisibility = true,\n  rowSelection: controlledRowSelection,\n  onRowSelectionChange,\n  enableRowSelection,\n  pageSize = 10,\n  pageIndex = 0,\n  onPaginationChange,\n  totalCount,\n  manualPagination = false,\n  pageSizeOptions: _pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,\n  filters,\n  onFiltersChange,\n  filterFields,\n  enableFiltering,\n  layout: _layout = SF_DATA_GRID_DEFAULT_VARIANTS.layout,\n  className,\n  tableClassName,\n  emptyState,\n  loading,\n  loadingRows,\n  toolbar,\n  showToolbar = true,\n  showPagination = true,\n  pagination: customPagination,\n  enableColumnResizing,\n  columnResizeMode = \"onEnd\",\n  virtualized = false,\n  estimatedRowHeight = 44,\n  overscan = 8,\n  maxHeight,\n  children,\n}: DataGridProps<TData> & { children?: ReactNode }) {\n  // TanStack Table v9 (beta) owns uncontrolled state internally via its atom\n  // store. We only pass a `state` slice for the values a consumer explicitly\n  // controls via props; everything else is seeded with `initialState` so the\n  // table mutates its own atoms. This avoids calling React setState during\n  // TanStack's render flush (the \"setState while rendering\" warning that the\n  // old controlled-mirror pattern triggered under v9-beta reactivity).\n\n  // Controlled vs uncontrolled detection (a slice is controlled only when the\n  // consumer passes the value prop). Pagination is controlled in manual mode,\n  // where the consumer drives `pageIndex`/`pageSize` (e.g. server pagination).\n  const isSortingControlled = controlledSorting !== undefined;\n  const isColumnVisibilityControlled = controlledColumnVisibility !== undefined;\n  const isRowSelectionControlled = controlledRowSelection !== undefined;\n  const isPaginationControlled = manualPagination;\n\n  // Build the controlled `state` slice (only the props the consumer drives).\n  const controlledState: Partial<TableState<DataGridFeatures>> = {};\n  if (isSortingControlled) {\n    controlledState.sorting = controlledSorting;\n  }\n  if (isColumnVisibilityControlled) {\n    controlledState.columnVisibility = controlledColumnVisibility;\n  }\n  if (isRowSelectionControlled) {\n    controlledState.rowSelection = controlledRowSelection;\n  }\n  if (isPaginationControlled) {\n    controlledState.pagination = { pageIndex, pageSize };\n  }\n\n  // Change handlers. A handler is only attached to `useTable` when the slice is\n  // controlled (consumer drives the prop) or a consumer callback exists.\n  //\n  // - Controlled: notify the consumer; they update the prop which flows back in\n  //   via `state`. We do NOT touch the table's own atom.\n  // - Uncontrolled + callback: TanStack does not self-update once a handler is\n  //   attached, so we advance the table's own atom via its setter AND notify the\n  //   consumer. Using the table setter (not React setState) keeps this out of\n  //   React's render pass, avoiding the v9-beta \"setState while rendering\" warn.\n  const handleSortingChange = (\n    updater: SortingState | ((old: SortingState) => SortingState)\n  ) => {\n    const next =\n      typeof updater === \"function\" ? updater(table.state.sorting) : updater;\n    if (!isSortingControlled) {\n      table.setSorting(next);\n    }\n    onSortingChange?.(next);\n  };\n\n  const handleColumnVisibilityChange = (\n    updater:\n      | ColumnVisibilityState\n      | ((old: ColumnVisibilityState) => ColumnVisibilityState)\n  ) => {\n    const current = table.state.columnVisibility ?? {};\n    const next = typeof updater === \"function\" ? updater(current) : updater;\n    if (!isColumnVisibilityControlled) {\n      table.setColumnVisibility(next);\n    }\n    onColumnVisibilityChange?.(next);\n  };\n\n  const handleRowSelectionChange = (\n    updater: RowSelectionState | ((old: RowSelectionState) => RowSelectionState)\n  ) => {\n    const current = table.state.rowSelection ?? {};\n    const next = typeof updater === \"function\" ? updater(current) : updater;\n    if (!isRowSelectionControlled) {\n      table.setRowSelection(next);\n    }\n    onRowSelectionChange?.(next);\n  };\n\n  const handlePaginationChange = (\n    updater: PaginationState | ((old: PaginationState) => PaginationState)\n  ) => {\n    const current = table.state.pagination ?? { pageIndex, pageSize };\n    const next = typeof updater === \"function\" ? updater(current) : updater;\n    // Manual (controlled) pagination: the consumer drives pageIndex/pageSize via\n    // props, so just notify. Auto pagination: advance the table's own atom and\n    // notify any consumer callback.\n    if (!isPaginationControlled) {\n      table.setPagination(next);\n    }\n    onPaginationChange?.({\n      pageIndex: next.pageIndex,\n      pageSize: next.pageSize,\n    });\n  };\n\n  // Create table instance (TanStack Table v9: modular features + row models)\n  const table = useTable({\n    features: dataGridFeatures,\n    rowModels: {\n      sortedRowModel: createSortedRowModel(sortFns),\n      filteredRowModel: createFilteredRowModel(filterFns),\n      paginatedRowModel: createPaginatedRowModel(),\n    },\n    data,\n    columns: columns as ColumnDef<typeof dataGridFeatures, TData, unknown>[],\n    initialState: {\n      pagination: { pageIndex, pageSize },\n    },\n    state: controlledState,\n    // Only attach change handlers when the slice is controlled or the consumer\n    // wants notifications. Attaching a handler tells TanStack the caller owns\n    // the update, so for purely uncontrolled slices we omit it and let the\n    // table manage its own atom (which also avoids setState-during-render).\n    ...(isSortingControlled || onSortingChange\n      ? { onSortingChange: handleSortingChange }\n      : {}),\n    ...(isColumnVisibilityControlled || onColumnVisibilityChange\n      ? { onColumnVisibilityChange: handleColumnVisibilityChange }\n      : {}),\n    ...(isRowSelectionControlled || onRowSelectionChange\n      ? { onRowSelectionChange: handleRowSelectionChange }\n      : {}),\n    ...(isPaginationControlled || onPaginationChange\n      ? { onPaginationChange: handlePaginationChange }\n      : {}),\n    enableSorting,\n    enableRowSelection: enableRowSelection !== false,\n    enableColumnResizing,\n    columnResizeMode,\n    manualPagination,\n    pageCount: manualPagination\n      ? Math.ceil((totalCount ?? data.length) / pageSize)\n      : undefined,\n    enableMultiRowSelection: true,\n  });\n\n  // Provide context to children\n  const contextValue: DataGridContextValue<TData> = {\n    table,\n    pageSize,\n    pageIndex,\n    totalCount: totalCount ?? data.length,\n    manualPagination,\n    loading,\n    loadingRows,\n    enableColumnResizing,\n    columnResizeMode,\n    virtualized,\n    estimatedRowHeight,\n    overscan,\n    maxHeight,\n  };\n\n  return (\n    <DataGridContext.Provider value={contextValue as DataGridContextValue}>\n      <div\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-lg border border-sf-line bg-sf-base\",\n          className\n        )}\n      >\n        {children || (\n          // Auto mode - DataGrid renders everything based on props\n          <>\n            {/* Toolbar */}\n            {showToolbar && (\n              <DataGridToolbar>\n                {toolbar ?? (\n                  <>\n                    {enableFiltering && filterFields && (\n                      <Filters\n                        filters={filters ?? []}\n                        fields={filterFields}\n                        onChange={onFiltersChange ?? (() => {})}\n                        size=\"sm\"\n                      />\n                    )}\n                    <div className=\"ml-auto flex items-center gap-2\">\n                      {enableColumnVisibility && <DataGridColumnToggle />}\n                    </div>\n                  </>\n                )}\n              </DataGridToolbar>\n            )}\n\n            {/* Table content */}\n            <div\n              className={cn(\n                \"flex-1\",\n                // When virtualized, DataGridContent owns its own bounded\n                // scroll container, so the wrapper must not scroll too.\n                !virtualized && \"overflow-auto\"\n              )}\n            >\n              <DataGridContent className={tableClassName} />\n              <DataGridEmpty>{emptyState}</DataGridEmpty>\n            </div>\n\n            {/* Pagination */}\n            {showPagination && (customPagination ?? <DataGridPagination />)}\n          </>\n        )}\n      </div>\n    </DataGridContext.Provider>\n  );\n}\n\nDataGridRoot.displayName = \"DataGrid\";\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport const DataGrid = Object.assign(DataGridRoot, {\n  Toolbar: DataGridToolbar,\n  Content: DataGridContent,\n  Pagination: DataGridPagination,\n  ColumnToggle: DataGridColumnToggle,\n  Empty: DataGridEmpty,\n});\n\nexport type {\n  DataGridProps,\n  DataGridColumn,\n  DataGridToolbarProps,\n  DataGridContentProps,\n  DataGridPaginationProps,\n  DataGridColumnToggleProps,\n  DataGridEmptyProps,\n} from \"./types\";\n"],"mappings":"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"}

package/dist/{date-picker--ox89RBy.js → date-picker-O34AqG3f.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { jsx } from "react/jsx-runtime";
 import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
 import { DayPicker } from "react-day-picker";
@@ -54,4 +54,4 @@ DatePicker.displayName = "DatePicker";
 //#endregion
 export { DatePicker as t };
 
-//# sourceMappingURL=date-picker--ox89RBy.js.map
+//# sourceMappingURL=date-picker-O34AqG3f.js.map

package/dist/{date-picker--ox89RBy.js.map → date-picker-O34AqG3f.js.map}

@@ -1 +1 @@
-{"version":3,"file":"date-picker--ox89RBy.js","names":[],"sources":["../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import { CaretLeftIcon, CaretRightIcon } from \"@phosphor-icons/react\";\nimport {\n  DayPicker,\n  type CustomComponents,\n  type PropsBase,\n  type PropsSingle,\n  type PropsSingleRequired,\n  type PropsMulti,\n  type PropsMultiRequired,\n  type PropsRange,\n  type PropsRangeRequired,\n} from \"react-day-picker\";\n\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Custom Chevron component using Phosphor icons\n */\nconst Chevron: CustomComponents[\"Chevron\"] = ({ orientation, ...props }) => {\n  const Icon = orientation === \"left\" ? CaretLeftIcon : CaretRightIcon;\n  return <Icon size={16} {...props} />;\n};\n\n/** Base props shared across all DatePicker modes */\ntype BaseProps = Omit<PropsBase, \"classNames\"> & {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Custom class names for internal elements */\n  classNames?: PropsBase[\"classNames\"];\n};\n\n/** Single date selection (optional) */\ntype SingleProps = BaseProps &\n  Omit<PropsSingle, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsSingle[\"onSelect\"];\n  };\n\n/** Single date selection (required) */\ntype SingleRequiredProps = BaseProps &\n  Omit<PropsSingleRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsSingleRequired[\"onSelect\"];\n  };\n\n/** Multiple date selection (optional) */\ntype MultipleProps = BaseProps &\n  Omit<PropsMulti, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsMulti[\"onSelect\"];\n  };\n\n/** Multiple date selection (required) */\ntype MultipleRequiredProps = BaseProps &\n  Omit<PropsMultiRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsMultiRequired[\"onSelect\"];\n  };\n\n/** Date range selection (optional) */\ntype RangeProps = BaseProps &\n  Omit<PropsRange, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsRange[\"onSelect\"];\n  };\n\n/** Date range selection (required) */\ntype RangeRequiredProps = BaseProps &\n  Omit<PropsRangeRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsRangeRequired[\"onSelect\"];\n  };\n\n/**\n * DatePicker props - discriminated union based on `mode`.\n * Uses `onChange` instead of `onSelect` for SignalFlare consistency.\n * Full type inference is preserved via the discriminated union.\n */\nexport type DatePickerProps =\n  | SingleProps\n  | SingleRequiredProps\n  | MultipleProps\n  | MultipleRequiredProps\n  | RangeProps\n  | RangeRequiredProps;\n\n/**\n * DatePicker — a date selection calendar.\n *\n * Built on [react-day-picker](https://daypicker.dev) with SignalFlare styling.\n * Supports three selection modes: single, multiple, and range.\n *\n * @example\n * ```tsx\n * // Single date selection\n * const [date, setDate] = useState<Date>();\n * <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n *\n * // Multiple date selection\n * const [dates, setDates] = useState<Date[]>([]);\n * <DatePicker mode=\"multiple\" selected={dates} onChange={setDates} max={5} />\n *\n * // Date range selection\n * const [range, setRange] = useState<DateRange>();\n * <DatePicker mode=\"range\" selected={range} onChange={setRange} numberOfMonths={2} />\n * ```\n */\nexport function DatePicker({\n  className,\n  classNames,\n  onChange,\n  ...props\n}: DatePickerProps) {\n  return (\n    <DayPicker\n      showOutsideDays\n      animate\n      {...props}\n      onSelect={onChange as never}\n      classNames={{\n        ...classNames,\n        root: cn(\n          \"rdp-root select-none rounded-xl bg-sf-base p-3\",\n          classNames?.root,\n          className\n        ),\n      }}\n      components={{\n        Chevron,\n        ...props.components,\n      }}\n    />\n  );\n}\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":";;;;;;;;;AAkBA,IAAM,WAAwC,EAAE,aAAa,GAAG,YAAY;AAE1E,QAAO,oBADM,gBAAgB,SAAS,gBAAgB,gBAC/C;EAAM,MAAM;EAAI,GAAI;EAAS,CAAA;;;;;;;;;;;;;;;;;;;;;;;AAiFtC,SAAgB,WAAW,EACzB,WACA,YACA,UACA,GAAG,SACe;AAClB,QACE,oBAAC,WAAD;EACE,iBAAA;EACA,SAAA;EACA,GAAI;EACJ,UAAU;EACV,YAAY;GACV,GAAG;GACH,MAAM,GACJ,kDACA,YAAY,MACZ,UACD;GACF;EACD,YAAY;GACV;GACA,GAAG,MAAM;GACV;EACD,CAAA;;AAIN,WAAW,cAAc"}
+{"version":3,"file":"date-picker-O34AqG3f.js","names":[],"sources":["../src/components/date-picker/date-picker.tsx"],"sourcesContent":["import { CaretLeftIcon, CaretRightIcon } from \"@phosphor-icons/react\";\nimport {\n  DayPicker,\n  type CustomComponents,\n  type PropsBase,\n  type PropsSingle,\n  type PropsSingleRequired,\n  type PropsMulti,\n  type PropsMultiRequired,\n  type PropsRange,\n  type PropsRangeRequired,\n} from \"react-day-picker\";\n\nimport { cn } from \"../../utils/cn\";\n\n/**\n * Custom Chevron component using Phosphor icons\n */\nconst Chevron: CustomComponents[\"Chevron\"] = ({ orientation, ...props }) => {\n  const Icon = orientation === \"left\" ? CaretLeftIcon : CaretRightIcon;\n  return <Icon size={16} {...props} />;\n};\n\n/** Base props shared across all DatePicker modes */\ntype BaseProps = Omit<PropsBase, \"classNames\"> & {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Custom class names for internal elements */\n  classNames?: PropsBase[\"classNames\"];\n};\n\n/** Single date selection (optional) */\ntype SingleProps = BaseProps &\n  Omit<PropsSingle, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsSingle[\"onSelect\"];\n  };\n\n/** Single date selection (required) */\ntype SingleRequiredProps = BaseProps &\n  Omit<PropsSingleRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsSingleRequired[\"onSelect\"];\n  };\n\n/** Multiple date selection (optional) */\ntype MultipleProps = BaseProps &\n  Omit<PropsMulti, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsMulti[\"onSelect\"];\n  };\n\n/** Multiple date selection (required) */\ntype MultipleRequiredProps = BaseProps &\n  Omit<PropsMultiRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsMultiRequired[\"onSelect\"];\n  };\n\n/** Date range selection (optional) */\ntype RangeProps = BaseProps &\n  Omit<PropsRange, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsRange[\"onSelect\"];\n  };\n\n/** Date range selection (required) */\ntype RangeRequiredProps = BaseProps &\n  Omit<PropsRangeRequired, \"onSelect\" | \"classNames\"> & {\n    onChange?: PropsRangeRequired[\"onSelect\"];\n  };\n\n/**\n * DatePicker props - discriminated union based on `mode`.\n * Uses `onChange` instead of `onSelect` for SignalFlare consistency.\n * Full type inference is preserved via the discriminated union.\n */\nexport type DatePickerProps =\n  | SingleProps\n  | SingleRequiredProps\n  | MultipleProps\n  | MultipleRequiredProps\n  | RangeProps\n  | RangeRequiredProps;\n\n/**\n * DatePicker — a date selection calendar.\n *\n * Built on [react-day-picker](https://daypicker.dev) with SignalFlare styling.\n * Supports three selection modes: single, multiple, and range.\n *\n * @example\n * ```tsx\n * // Single date selection\n * const [date, setDate] = useState<Date>();\n * <DatePicker mode=\"single\" selected={date} onChange={setDate} />\n *\n * // Multiple date selection\n * const [dates, setDates] = useState<Date[]>([]);\n * <DatePicker mode=\"multiple\" selected={dates} onChange={setDates} max={5} />\n *\n * // Date range selection\n * const [range, setRange] = useState<DateRange>();\n * <DatePicker mode=\"range\" selected={range} onChange={setRange} numberOfMonths={2} />\n * ```\n */\nexport function DatePicker({\n  className,\n  classNames,\n  onChange,\n  ...props\n}: DatePickerProps) {\n  return (\n    <DayPicker\n      showOutsideDays\n      animate\n      {...props}\n      onSelect={onChange as never}\n      classNames={{\n        ...classNames,\n        root: cn(\n          \"rdp-root select-none rounded-xl bg-sf-base p-3\",\n          classNames?.root,\n          className\n        ),\n      }}\n      components={{\n        Chevron,\n        ...props.components,\n      }}\n    />\n  );\n}\n\nDatePicker.displayName = \"DatePicker\";\n"],"mappings":";;;;;;;;;AAkBA,IAAM,WAAwC,EAAE,aAAa,GAAG,YAAY;CAE1E,OAAO,oBADM,gBAAgB,SAAS,gBAAgB,gBAC/C;EAAM,MAAM;EAAI,GAAI;CAAQ,CAAA;AACrC;;;;;;;;;;;;;;;;;;;;;;AAgFA,SAAgB,WAAW,EACzB,WACA,YACA,UACA,GAAG,SACe;CAClB,OACE,oBAAC,WAAD;EACE,iBAAA;EACA,SAAA;EACA,GAAI;EACJ,UAAU;EACV,YAAY;GACV,GAAG;GACH,MAAM,GACJ,kDACA,YAAY,MACZ,SACF;EACF;EACA,YAAY;GACV;GACA,GAAG,MAAM;EACX;CACD,CAAA;AAEL;AAEA,WAAW,cAAc"}

package/dist/{date-range-picker-DVa7QBqE.js → date-range-picker-YKYvum_r.js}

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
+import { t as cn } from "./cn-CmAOpn49.js";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CaretLeftIcon, CaretRightIcon, GlobeHemisphereWestIcon } from "@phosphor-icons/react";
@@ -56,15 +56,6 @@ function dateRangePickerVariants({ size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.
 function getSizeConfig(size) {
 	return SF_DATE_RANGE_PICKER_VARIANTS.size[size];
 }
-var DateRangeCellMode = /* @__PURE__ */ function(DateRangeCellMode) {
-	DateRangeCellMode[DateRangeCellMode["OUT_OF_RANGE"] = 0] = "OUT_OF_RANGE";
-	DateRangeCellMode[DateRangeCellMode["ENABLED"] = 1] = "ENABLED";
-	DateRangeCellMode[DateRangeCellMode["SELECTED_START_NODE"] = 2] = "SELECTED_START_NODE";
-	DateRangeCellMode[DateRangeCellMode["SELECTED_END_NODE"] = 3] = "SELECTED_END_NODE";
-	DateRangeCellMode[DateRangeCellMode["SELECTED"] = 4] = "SELECTED";
-	DateRangeCellMode[DateRangeCellMode["SELECTED_OUT_OF_RANGE"] = 5] = "SELECTED_OUT_OF_RANGE";
-	return DateRangeCellMode;
-}(DateRangeCellMode || {});
 var DAYS_OF_WEEK = [
 	"Su",
 	"Mo",
@@ -190,7 +181,7 @@ function DateRangePicker({ onStartDateChange, onEndDateChange, size = SF_DATE_RA
 						children: Array.from({ length: 42 }).map((_, index) => /* @__PURE__ */ jsx(DateRangeDayCell, {
 							date: getDateFromIndex(viewingMonth, 0, index),
 							size,
-							mode: startDate && endDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && getDateFromIndex(viewingMonth, 0, index) <= endDate && index > getNumberOfDaysInMonth(viewingMonth, 0) + getMonthsStartingDay(viewingMonth, 0) - 1 || startDate && endDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && getDateFromIndex(viewingMonth, 0, index) <= endDate && index < getMonthsStartingDay(viewingMonth, 0) ? DateRangeCellMode.SELECTED_OUT_OF_RANGE : index < getMonthsStartingDay(viewingMonth, 0) ? DateRangeCellMode.OUT_OF_RANGE : index > getNumberOfDaysInMonth(viewingMonth, 0) + getMonthsStartingDay(viewingMonth, 0) - 1 ? DateRangeCellMode.OUT_OF_RANGE : isDateEqual(getDateFromIndex(viewingMonth, 0, index), startDate) ? DateRangeCellMode.SELECTED_START_NODE : isDateEqual(getDateFromIndex(viewingMonth, 0, index), endDate) ? DateRangeCellMode.SELECTED_END_NODE : startDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && endDate && getDateFromIndex(viewingMonth, 0, index) <= endDate ? DateRangeCellMode.SELECTED : startDate && !endDate && hoveringDate && hoveringDate > startDate && getDateFromIndex(viewingMonth, 0, index) <= hoveringDate && getDateFromIndex(viewingMonth, 0, index) > startDate ? DateRangeCellMode.SELECTED : DateRangeCellMode.ENABLED,
+							mode: startDate && endDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && getDateFromIndex(viewingMonth, 0, index) <= endDate && index > getNumberOfDaysInMonth(viewingMonth, 0) + getMonthsStartingDay(viewingMonth, 0) - 1 || startDate && endDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && getDateFromIndex(viewingMonth, 0, index) <= endDate && index < getMonthsStartingDay(viewingMonth, 0) ? 5 : index < getMonthsStartingDay(viewingMonth, 0) ? 0 : index > getNumberOfDaysInMonth(viewingMonth, 0) + getMonthsStartingDay(viewingMonth, 0) - 1 ? 0 : isDateEqual(getDateFromIndex(viewingMonth, 0, index), startDate) ? 2 : isDateEqual(getDateFromIndex(viewingMonth, 0, index), endDate) ? 3 : startDate && getDateFromIndex(viewingMonth, 0, index) >= startDate && endDate && getDateFromIndex(viewingMonth, 0, index) <= endDate ? 4 : startDate && !endDate && hoveringDate && hoveringDate > startDate && getDateFromIndex(viewingMonth, 0, index) <= hoveringDate && getDateFromIndex(viewingMonth, 0, index) > startDate ? 4 : 1,
 							onClick: (date) => {
 								if (!startDate || date < startDate) {
 									handleStartDateChange(date);
@@ -228,7 +219,7 @@ function DateRangePicker({ onStartDateChange, onEndDateChange, size = SF_DATE_RA
 						children: Array.from({ length: 42 }).map((_, index) => /* @__PURE__ */ jsx(DateRangeDayCell, {
 							date: getDateFromIndex(viewingMonth, 1, index),
 							size,
-							mode: startDate && endDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && getDateFromIndex(viewingMonth, 1, index) <= endDate && index > getNumberOfDaysInMonth(viewingMonth, 1) + getMonthsStartingDay(viewingMonth, 1) - 1 || startDate && endDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && getDateFromIndex(viewingMonth, 1, index) <= endDate && index < getMonthsStartingDay(viewingMonth, 1) ? DateRangeCellMode.SELECTED_OUT_OF_RANGE : index < getMonthsStartingDay(viewingMonth, 1) ? DateRangeCellMode.OUT_OF_RANGE : index > getNumberOfDaysInMonth(viewingMonth, 1) + getMonthsStartingDay(viewingMonth, 1) - 1 ? DateRangeCellMode.OUT_OF_RANGE : isDateEqual(getDateFromIndex(viewingMonth, 1, index), startDate) ? DateRangeCellMode.SELECTED_START_NODE : isDateEqual(getDateFromIndex(viewingMonth, 1, index), endDate) ? DateRangeCellMode.SELECTED_END_NODE : startDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && endDate && getDateFromIndex(viewingMonth, 1, index) <= endDate ? DateRangeCellMode.SELECTED : startDate && !endDate && hoveringDate && hoveringDate > startDate && getDateFromIndex(viewingMonth, 1, index) <= hoveringDate && getDateFromIndex(viewingMonth, 1, index) > startDate ? DateRangeCellMode.SELECTED : DateRangeCellMode.ENABLED,
+							mode: startDate && endDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && getDateFromIndex(viewingMonth, 1, index) <= endDate && index > getNumberOfDaysInMonth(viewingMonth, 1) + getMonthsStartingDay(viewingMonth, 1) - 1 || startDate && endDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && getDateFromIndex(viewingMonth, 1, index) <= endDate && index < getMonthsStartingDay(viewingMonth, 1) ? 5 : index < getMonthsStartingDay(viewingMonth, 1) ? 0 : index > getNumberOfDaysInMonth(viewingMonth, 1) + getMonthsStartingDay(viewingMonth, 1) - 1 ? 0 : isDateEqual(getDateFromIndex(viewingMonth, 1, index), startDate) ? 2 : isDateEqual(getDateFromIndex(viewingMonth, 1, index), endDate) ? 3 : startDate && getDateFromIndex(viewingMonth, 1, index) >= startDate && endDate && getDateFromIndex(viewingMonth, 1, index) <= endDate ? 4 : startDate && !endDate && hoveringDate && hoveringDate > startDate && getDateFromIndex(viewingMonth, 1, index) <= hoveringDate && getDateFromIndex(viewingMonth, 1, index) > startDate ? 4 : 1,
 							onClick: (date) => {
 								if (!startDate || date < startDate) {
 									handleStartDateChange(date);
@@ -259,42 +250,41 @@ function DateRangeDayCell({ date, mode, size = SF_DATE_RANGE_PICKER_DEFAULT_VARI
 	}, []);
 	const getBackgroundColor = useCallback(() => {
 		switch (mode) {
-			case DateRangeCellMode.OUT_OF_RANGE: return "bg-transparent";
-			case DateRangeCellMode.ENABLED: return "bg-transparent";
-			case DateRangeCellMode.SELECTED_START_NODE: return "!bg-sf-contrast rounded-tl-[5px] rounded-bl-[5px]";
-			case DateRangeCellMode.SELECTED_END_NODE: return "!bg-sf-contrast rounded-tr-[5px] rounded-br-[5px]";
-			case DateRangeCellMode.SELECTED: return "bg-sf-interact";
-			case DateRangeCellMode.SELECTED_OUT_OF_RANGE: return "bg-sf-fill";
+			case 0: return "bg-transparent";
+			case 1: return "bg-transparent";
+			case 2: return "!bg-sf-contrast rounded-tl-[5px] rounded-bl-[5px]";
+			case 3: return "!bg-sf-contrast rounded-tr-[5px] rounded-br-[5px]";
+			case 4: return "bg-sf-interact";
+			case 5: return "bg-sf-fill";
 		}
 	}, [mode]);
 	const getTextColor = useCallback(() => {
 		switch (mode) {
-			case DateRangeCellMode.OUT_OF_RANGE:
-			case DateRangeCellMode.SELECTED_OUT_OF_RANGE: return "!text-sf-strong";
-			case DateRangeCellMode.SELECTED_START_NODE:
-			case DateRangeCellMode.SELECTED_END_NODE: return "!text-sf-inverse";
+			case 0:
+			case 5: return "!text-sf-strong";
+			case 2:
+			case 3: return "!text-sf-inverse";
 			default: return "text-sf-default";
 		}
 	}, [mode]);
-	const getAriaLabel = useCallback(() => {
-		const dateStr = date.toLocaleDateString("en-US", {
-			weekday: "long",
-			month: "long",
-			day: "numeric",
-			year: "numeric"
-		});
-		switch (mode) {
-			case DateRangeCellMode.SELECTED_START_NODE: return `${dateStr}, selected as start date`;
-			case DateRangeCellMode.SELECTED_END_NODE: return `${dateStr}, selected as end date`;
-			case DateRangeCellMode.SELECTED: return `${dateStr}, within selected range`;
-			default: return dateStr;
-		}
-	}, [date, mode]);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": getAriaLabel(),
+		"aria-label": useCallback(() => {
+			const dateStr = date.toLocaleDateString("en-US", {
+				weekday: "long",
+				month: "long",
+				day: "numeric",
+				year: "numeric"
+			});
+			switch (mode) {
+				case 2: return `${dateStr}, selected as start date`;
+				case 3: return `${dateStr}, selected as end date`;
+				case 4: return `${dateStr}, within selected range`;
+				default: return dateStr;
+			}
+		}, [date, mode])(),
 		id: date.toDateString(),
-		className: cn(sizeConfig.cellHeight, sizeConfig.cellWidth, sizeConfig.textSize, "cursor-pointer text-center text-sf-default transition-all duration-[50]", `leading-[${sizeConfig.cellHeight.replace("h-[", "").replace("]", "")}]`, mode !== DateRangeCellMode.OUT_OF_RANGE && mode !== DateRangeCellMode.SELECTED_OUT_OF_RANGE ? "hover:bg-sf-interact" : "", getBackgroundColor(), getTextColor()),
+		className: cn(sizeConfig.cellHeight, sizeConfig.cellWidth, sizeConfig.textSize, "cursor-pointer text-center text-sf-default transition-all duration-[50]", `leading-[${sizeConfig.cellHeight.replace("h-[", "").replace("]", "")}]`, mode !== 0 && mode !== 5 ? "hover:bg-sf-interact" : "", getBackgroundColor(), getTextColor()),
 		onClick: () => onClick?.(date),
 		onMouseOver: () => isHoveringDate?.(date),
 		onFocus: () => isHoveringDate?.(date),
@@ -344,4 +334,4 @@ function DateRangeFooter({ timezone, size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANT
 //#endregion
 export { DateRangePicker as t };
 
-//# sourceMappingURL=date-range-picker-DVa7QBqE.js.map
+//# sourceMappingURL=date-range-picker-YKYvum_r.js.map

package/dist/{date-range-picker-DVa7QBqE.js.map → date-range-picker-YKYvum_r.js.map}

@@ -1 +1 @@
-{"version":3,"file":"date-range-picker-DVa7QBqE.js","names":[],"sources":["../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n  CaretLeftIcon,\n  CaretRightIcon,\n  GlobeHemisphereWestIcon,\n} from \"@phosphor-icons/react\";\nimport { useCallback, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */\nexport const SF_DATE_RANGE_PICKER_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"p-3 gap-2\",\n      cellHeight: \"h-[22px]\",\n      cellWidth: \"w-6\",\n      calendarWidth: \"w-[168px]\",\n      textSize: \"text-xs\",\n      iconSize: 14,\n      description: \"Compact calendar for tight spaces\",\n    },\n    base: {\n      classes: \"p-4 gap-2.5\",\n      cellHeight: \"h-[26px]\",\n      cellWidth: \"w-7\",\n      calendarWidth: \"w-[196px]\",\n      textSize: \"text-sm\",\n      iconSize: 16,\n      description: \"Default calendar size\",\n    },\n    lg: {\n      classes: \"p-5 gap-3\",\n      cellHeight: \"h-[32px]\",\n      cellWidth: \"w-9\",\n      calendarWidth: \"w-[252px]\",\n      textSize: \"text-base\",\n      iconSize: 18,\n      description: \"Large calendar for prominent date selection\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"bg-sf-overlay\",\n      description: \"Default calendar appearance\",\n    },\n    subtle: {\n      classes: \"bg-sf-base\",\n      description: \"Subtle calendar with minimal background\",\n    },\n  },\n} as const;\n\nexport const SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_DATE_RANGE_PICKER_VARIANTS\nexport type SFDateRangePickerSize =\n  keyof typeof SF_DATE_RANGE_PICKER_VARIANTS.size;\nexport type SFDateRangePickerVariant =\n  keyof typeof SF_DATE_RANGE_PICKER_VARIANTS.variant;\n\nexport interface SFDateRangePickerVariantsProps {\n  /**\n   * Calendar size.\n   * - `\"sm\"` — Compact calendar for tight spaces\n   * - `\"base\"` — Default calendar size\n   * - `\"lg\"` — Large calendar for prominent date selection\n   * @default \"base\"\n   */\n  size?: SFDateRangePickerSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard appearance with overlay background\n   * - `\"subtle\"` — Minimal background\n   * @default \"default\"\n   */\n  variant?: SFDateRangePickerVariant;\n}\n\nexport function dateRangePickerVariants({\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n}: SFDateRangePickerVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-fit flex-col rounded-xl select-none\",\n    // Apply variant and size styles\n    SF_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes,\n    SF_DATE_RANGE_PICKER_VARIANTS.size[size].classes\n  );\n}\n\n// Helper to get size config\nfunction getSizeConfig(size: SFDateRangePickerSize) {\n  return SF_DATE_RANGE_PICKER_VARIANTS.size[size];\n}\n\nenum DateRangeCellMode {\n  OUT_OF_RANGE,\n  ENABLED,\n  SELECTED_START_NODE,\n  SELECTED_END_NODE,\n  SELECTED,\n  SELECTED_OUT_OF_RANGE,\n}\n\nconst DAYS_OF_WEEK = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"] as const;\n\n/**\n * DateRangePicker component props.\n *\n * Dual-calendar date range selector with hover preview, timezone display, and reset support.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   onStartDateChange={(d) => setStart(d)}\n *   onEndDateChange={(d) => setEnd(d)}\n *   timezone=\"New York, NY, USA (GMT-4)\"\n * />\n *\n * // Compact variant\n * <DateRangePicker\n *   size=\"sm\"\n *   variant=\"subtle\"\n *   onStartDateChange={setStart}\n *   onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport interface DateRangePickerProps extends SFDateRangePickerVariantsProps {\n  /** Callback fired when start date changes. Receives `null` on reset. */\n  onStartDateChange: (date: Date | null) => void;\n  /** Callback fired when end date changes. Receives `null` on reset. */\n  onEndDateChange: (date: Date | null) => void;\n  /**\n   * Display timezone string shown in the footer.\n   * @default \"New York, NY, USA (GMT-4)\"\n   */\n  timezone?: string;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * DateRangePicker — dual-calendar date range selector.\n *\n * Renders two side-by-side month calendars with click-to-select start/end dates,\n * hover preview of the range, a timezone footer, and a reset button.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   onStartDateChange={setStart}\n *   onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport function DateRangePicker({\n  onStartDateChange,\n  onEndDateChange,\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n  timezone = \"New York, NY, USA (GMT-4)\",\n  className,\n}: DateRangePickerProps) {\n  const [startDate, setStartDate] = useState<Date | null>(null);\n  const [endDate, setEndDate] = useState<Date | null>(null);\n  const [viewingMonth, setViewingMonth] = useState<Date>(new Date());\n  const [hoveringDate, setHoveringDate] = useState<Date | null>(null);\n\n  const sizeConfig = getSizeConfig(size);\n\n  const handleStartDateChange = (date: Date | null) => {\n    setStartDate(date);\n    onStartDateChange(date); // Pass the updated startDate to the parent component\n  };\n\n  const handleEndDateChange = (date: Date | null) => {\n    setEndDate(date);\n    onEndDateChange(date); // Pass the updated endDate to the parent component\n  };\n\n  const getMonthName = useCallback((date: Date, monthOffset?: number) => {\n    const copyDate = new Date(date);\n    copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n    return copyDate.toLocaleString(\"default\", { month: \"long\" });\n  }, []);\n\n  const getDateYear = useCallback((date: Date, monthOffset?: number) => {\n    const copyDate = new Date(date);\n    copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n    return copyDate.getFullYear();\n  }, []);\n\n  const getMonthsStartingDay = useCallback(\n    (date: Date, monthOffset?: number) => {\n      const copyDate = new Date(date);\n      copyDate.setDate(1);\n      copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n      return copyDate.getDay();\n    },\n    []\n  );\n\n  const getNumberOfDaysInMonth = useCallback(\n    (date: Date, monthOffset?: number) => {\n      const copyDate = new Date(date);\n      copyDate.setDate(1);\n      copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n      copyDate.setMonth(copyDate.getMonth() + 1);\n      copyDate.setDate(0);\n      return copyDate.getDate();\n    },\n    []\n  );\n\n  const adjustMonth = useCallback((monthOffset: number) => {\n    setViewingMonth((prev) => {\n      const newDate = new Date(prev);\n      newDate.setMonth(newDate.getMonth() + monthOffset);\n      return newDate;\n    });\n  }, []);\n\n  const getDateFromIndex = useCallback(\n    (date: Date, monthOffset: number, index: number) => {\n      const startingDay = getMonthsStartingDay(date, monthOffset);\n\n      if (index < startingDay) {\n        // Get the last day of the previous month\n        const previousMonth = new Date(date);\n        previousMonth.setMonth(previousMonth.getMonth() + monthOffset);\n        previousMonth.setDate(1);\n        previousMonth.setDate(previousMonth.getDate() - (startingDay - index));\n        return previousMonth;\n      } else if (\n        index >\n        getNumberOfDaysInMonth(date, monthOffset) + startingDay - 1\n      ) {\n        // Get the first day of the next month\n        const nextMonth = new Date(date);\n        nextMonth.setMonth(nextMonth.getMonth() + monthOffset);\n        nextMonth.setMonth(nextMonth.getMonth() + 1);\n        nextMonth.setDate(\n          index - getNumberOfDaysInMonth(date, monthOffset) - startingDay + 1\n        );\n        return nextMonth;\n      } else {\n        // Get the current month's date\n        const newDate = new Date(date);\n        newDate.setMonth(newDate.getMonth() + monthOffset);\n        newDate.setDate(index - startingDay + 1);\n        return newDate;\n      }\n    },\n    [getMonthsStartingDay, getNumberOfDaysInMonth]\n  );\n\n  const isDateEqual = useCallback((date1: Date | null, date2: Date | null) => {\n    if (!date1 || !date2) return false;\n    return date1.toDateString() === date2.toDateString();\n  }, []);\n\n  return (\n    <div className={cn(dateRangePickerVariants({ size, variant }), className)}>\n      <div className=\"flex gap-4\">\n        <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n          <button\n            type=\"button\"\n            aria-label=\"Previous month\"\n            className=\"absolute top-0 left-0 cursor-pointer rounded bg-sf-interact/85 p-1.5 hover:bg-sf-interact\"\n            onClick={() => adjustMonth(-1)}\n          >\n            <CaretLeftIcon size={sizeConfig.iconSize} />\n          </button>\n\n          <DateRangeMonthHeader\n            month={getMonthName(viewingMonth)}\n            year={getDateYear(viewingMonth)}\n            size={size}\n            updateCurrentMonth={(dateString) => {\n              setViewingMonth(new Date(dateString));\n            }}\n          />\n\n          <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n            {Array.from({ length: 42 }).map((_, index) => (\n              <DateRangeDayCell\n                key={index}\n                date={getDateFromIndex(viewingMonth, 0, index)}\n                size={size}\n                mode={\n                  // After current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n                    index >\n                      getNumberOfDaysInMonth(viewingMonth, 0) +\n                        getMonthsStartingDay(viewingMonth, 0) -\n                        1) ||\n                  // Before current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n                    index < getMonthsStartingDay(viewingMonth, 0))\n                    ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n                    : // Before current month range\n                      index < getMonthsStartingDay(viewingMonth, 0)\n                      ? DateRangeCellMode.OUT_OF_RANGE\n                      : // After current month range\n                        index >\n                          getNumberOfDaysInMonth(viewingMonth, 0) +\n                            getMonthsStartingDay(viewingMonth, 0) -\n                            1\n                        ? DateRangeCellMode.OUT_OF_RANGE\n                        : // Selected start date\n                          isDateEqual(\n                              getDateFromIndex(viewingMonth, 0, index),\n                              startDate\n                            )\n                          ? DateRangeCellMode.SELECTED_START_NODE\n                          : // Selected end date\n                            isDateEqual(\n                                getDateFromIndex(viewingMonth, 0, index),\n                                endDate\n                              )\n                            ? DateRangeCellMode.SELECTED_END_NODE\n                            : // Selected date range\n                              startDate &&\n                                getDateFromIndex(viewingMonth, 0, index) >=\n                                  startDate &&\n                                endDate &&\n                                getDateFromIndex(viewingMonth, 0, index) <=\n                                  endDate\n                              ? DateRangeCellMode.SELECTED\n                              : // Hovering past a starting date and no end date selected\n                                startDate &&\n                                  !endDate &&\n                                  hoveringDate &&\n                                  hoveringDate > startDate &&\n                                  getDateFromIndex(viewingMonth, 0, index) <=\n                                    hoveringDate &&\n                                  getDateFromIndex(viewingMonth, 0, index) >\n                                    startDate\n                                ? DateRangeCellMode.SELECTED\n                                : // Default to enabled date\n                                  DateRangeCellMode.ENABLED\n                }\n                onClick={(date) => {\n                  if (!startDate || date < startDate) {\n                    handleStartDateChange(date);\n                    setHoveringDate(date);\n                  } else {\n                    handleEndDateChange(date);\n                  }\n                }}\n                isHoveringDate={(date) => {\n                  if (startDate && !endDate && date > startDate) {\n                    setHoveringDate(date);\n                  }\n                }}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n          <button\n            type=\"button\"\n            aria-label=\"Next month\"\n            className=\"absolute top-0 right-0 cursor-pointer rounded bg-sf-interact/85 p-1.5 hover:bg-sf-interact\"\n            onClick={() => adjustMonth(1)}\n          >\n            <CaretRightIcon size={sizeConfig.iconSize} />\n          </button>\n\n          <DateRangeMonthHeader\n            month={getMonthName(viewingMonth, 1)}\n            year={getDateYear(viewingMonth, 1)}\n            size={size}\n            updateCurrentMonth={(dateString) => {\n              const date = new Date(dateString);\n              date.setMonth(date.getMonth() - 1);\n              setViewingMonth(date);\n            }}\n          />\n\n          <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n            {Array.from({ length: 42 }).map((_, index) => (\n              <DateRangeDayCell\n                key={index}\n                date={getDateFromIndex(viewingMonth, 1, index)}\n                size={size}\n                mode={\n                  // After current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n                    index >\n                      getNumberOfDaysInMonth(viewingMonth, 1) +\n                        getMonthsStartingDay(viewingMonth, 1) -\n                        1) ||\n                  // Before current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n                    index < getMonthsStartingDay(viewingMonth, 1))\n                    ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n                    : // Before current month range\n                      index < getMonthsStartingDay(viewingMonth, 1)\n                      ? DateRangeCellMode.OUT_OF_RANGE\n                      : // After current month range\n                        index >\n                          getNumberOfDaysInMonth(viewingMonth, 1) +\n                            getMonthsStartingDay(viewingMonth, 1) -\n                            1\n                        ? DateRangeCellMode.OUT_OF_RANGE\n                        : // Selected start date\n                          isDateEqual(\n                              getDateFromIndex(viewingMonth, 1, index),\n                              startDate\n                            )\n                          ? DateRangeCellMode.SELECTED_START_NODE\n                          : // Selected end date\n                            isDateEqual(\n                                getDateFromIndex(viewingMonth, 1, index),\n                                endDate\n                              )\n                            ? DateRangeCellMode.SELECTED_END_NODE\n                            : // Selected date range\n                              startDate &&\n                                getDateFromIndex(viewingMonth, 1, index) >=\n                                  startDate &&\n                                endDate &&\n                                getDateFromIndex(viewingMonth, 1, index) <=\n                                  endDate\n                              ? DateRangeCellMode.SELECTED\n                              : // Hovering past a starting date and no end date selected\n                                startDate &&\n                                  !endDate &&\n                                  hoveringDate &&\n                                  hoveringDate > startDate &&\n                                  getDateFromIndex(viewingMonth, 1, index) <=\n                                    hoveringDate &&\n                                  getDateFromIndex(viewingMonth, 1, index) >\n                                    startDate\n                                ? DateRangeCellMode.SELECTED\n                                : // Default to enabled date\n                                  DateRangeCellMode.ENABLED\n                }\n                onClick={(date) => {\n                  if (!startDate || date < startDate) {\n                    handleStartDateChange(date);\n                    setHoveringDate(date);\n                  } else {\n                    handleEndDateChange(date);\n                  }\n                }}\n                isHoveringDate={(date) => {\n                  if (startDate && !endDate && date > startDate) {\n                    setHoveringDate(date);\n                  }\n                }}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <DateRangeFooter\n        timezone={timezone}\n        size={size}\n        reset={() => {\n          handleStartDateChange(null);\n          handleEndDateChange(null);\n        }}\n      />\n    </div>\n  );\n}\n\nfunction DateRangeDayCell({\n  date,\n  mode,\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  onClick,\n  isHoveringDate,\n}: {\n  date: Date;\n  mode?: DateRangeCellMode;\n  size?: SFDateRangePickerSize;\n  onClick?: (date: Date) => void;\n  isHoveringDate?: (date: Date) => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  const getDateNumberFromDate = useCallback((date: Date) => {\n    return date.getDate();\n  }, []);\n\n  const getBackgroundColor = useCallback(() => {\n    switch (mode) {\n      case DateRangeCellMode.OUT_OF_RANGE:\n        return \"bg-transparent\";\n      case DateRangeCellMode.ENABLED:\n        return \"bg-transparent\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n        return \"!bg-sf-contrast rounded-tl-[5px] rounded-bl-[5px]\";\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!bg-sf-contrast rounded-tr-[5px] rounded-br-[5px]\";\n      case DateRangeCellMode.SELECTED:\n        return \"bg-sf-interact\";\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"bg-sf-fill\";\n    }\n  }, [mode]);\n\n  const getTextColor = useCallback(() => {\n    switch (mode) {\n      case DateRangeCellMode.OUT_OF_RANGE:\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"!text-sf-strong\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!text-sf-inverse\";\n      default:\n        return \"text-sf-default\";\n    }\n  }, [mode]);\n\n  const getAriaLabel = useCallback(() => {\n    const dateStr = date.toLocaleDateString(\"en-US\", {\n      weekday: \"long\",\n      month: \"long\",\n      day: \"numeric\",\n      year: \"numeric\",\n    });\n    switch (mode) {\n      case DateRangeCellMode.SELECTED_START_NODE:\n        return `${dateStr}, selected as start date`;\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return `${dateStr}, selected as end date`;\n      case DateRangeCellMode.SELECTED:\n        return `${dateStr}, within selected range`;\n      default:\n        return dateStr;\n    }\n  }, [date, mode]);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={getAriaLabel()}\n      id={date.toDateString()}\n      className={cn(\n        sizeConfig.cellHeight,\n        sizeConfig.cellWidth,\n        sizeConfig.textSize,\n        \"cursor-pointer text-center text-sf-default transition-all duration-[50]\",\n        `leading-[${sizeConfig.cellHeight.replace(\"h-[\", \"\").replace(\"]\", \"\")}]`,\n        mode !== DateRangeCellMode.OUT_OF_RANGE &&\n          mode !== DateRangeCellMode.SELECTED_OUT_OF_RANGE\n          ? \"hover:bg-sf-interact\"\n          : \"\",\n        getBackgroundColor(),\n        getTextColor()\n      )}\n      onClick={() => onClick?.(date)}\n      onMouseOver={() => isHoveringDate?.(date)}\n      onFocus={() => isHoveringDate?.(date)}\n    >\n      {getDateNumberFromDate(date)}\n    </button>\n  );\n}\n\nfunction DateRangeMonthHeader({\n  month,\n  year,\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  updateCurrentMonth,\n}: {\n  month?: string;\n  year?: number;\n  size?: SFDateRangePickerSize;\n  updateCurrentMonth?: (dateString: string) => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div>\n      <div className=\"mb-3 text-center\">\n        <input\n          key={`${month}-${year}`}\n          aria-label=\"Edit month and year\"\n          defaultValue={`${month} ${year}`}\n          className={cn(\n            \"w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-sf-default transition-all duration-200 focus:outline-none\",\n            sizeConfig.textSize\n          )}\n          onBlur={(e) => {\n            if (e.currentTarget.value.length === 0) return;\n            updateCurrentMonth?.(e.currentTarget.value);\n          }}\n        />\n      </div>\n\n      <div className=\"mt-2 grid grid-cols-7 gap-1\">\n        {DAYS_OF_WEEK.map((day) => (\n          <div\n            key={day}\n            className={cn(\n              \"h-[22px] text-center text-sf-subtle\",\n              sizeConfig.cellWidth,\n              sizeConfig.textSize\n            )}\n          >\n            {day}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction DateRangeFooter({\n  timezone,\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  reset,\n}: {\n  timezone?: string;\n  size?: SFDateRangePickerSize;\n  reset?: () => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 text-sf-strong\",\n        sizeConfig.textSize\n      )}\n    >\n      <GlobeHemisphereWestIcon size={sizeConfig.iconSize} />\n      <span className=\"flex-1\">Timezone: {timezone}</span>\n      <button\n        type=\"button\"\n        onClick={reset}\n        className=\"cursor-pointer font-semibold text-sf-default underline underline-offset-2\"\n      >\n        Reset Dates\n      </button>\n    </div>\n  );\n}\n\n// Default export for backwards compatibility\n/**\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport default DateRangePicker;\n"],"mappings":"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"}
+{"version":3,"file":"date-range-picker-YKYvum_r.js","names":[],"sources":["../src/components/date-range-picker/date-range-picker.tsx"],"sourcesContent":["import {\n  CaretLeftIcon,\n  CaretRightIcon,\n  GlobeHemisphereWestIcon,\n} from \"@phosphor-icons/react\";\nimport { useCallback, useState } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\n\n/** DateRangePicker size and variant definitions mapping names to their Tailwind classes. */\nexport const SF_DATE_RANGE_PICKER_VARIANTS = {\n  size: {\n    sm: {\n      classes: \"p-3 gap-2\",\n      cellHeight: \"h-[22px]\",\n      cellWidth: \"w-6\",\n      calendarWidth: \"w-[168px]\",\n      textSize: \"text-xs\",\n      iconSize: 14,\n      description: \"Compact calendar for tight spaces\",\n    },\n    base: {\n      classes: \"p-4 gap-2.5\",\n      cellHeight: \"h-[26px]\",\n      cellWidth: \"w-7\",\n      calendarWidth: \"w-[196px]\",\n      textSize: \"text-sm\",\n      iconSize: 16,\n      description: \"Default calendar size\",\n    },\n    lg: {\n      classes: \"p-5 gap-3\",\n      cellHeight: \"h-[32px]\",\n      cellWidth: \"w-9\",\n      calendarWidth: \"w-[252px]\",\n      textSize: \"text-base\",\n      iconSize: 18,\n      description: \"Large calendar for prominent date selection\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"bg-sf-overlay\",\n      description: \"Default calendar appearance\",\n    },\n    subtle: {\n      classes: \"bg-sf-base\",\n      description: \"Subtle calendar with minimal background\",\n    },\n  },\n} as const;\n\nexport const SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\n// Derived types from SF_DATE_RANGE_PICKER_VARIANTS\nexport type SFDateRangePickerSize =\n  keyof typeof SF_DATE_RANGE_PICKER_VARIANTS.size;\nexport type SFDateRangePickerVariant =\n  keyof typeof SF_DATE_RANGE_PICKER_VARIANTS.variant;\n\nexport interface SFDateRangePickerVariantsProps {\n  /**\n   * Calendar size.\n   * - `\"sm\"` — Compact calendar for tight spaces\n   * - `\"base\"` — Default calendar size\n   * - `\"lg\"` — Large calendar for prominent date selection\n   * @default \"base\"\n   */\n  size?: SFDateRangePickerSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard appearance with overlay background\n   * - `\"subtle\"` — Minimal background\n   * @default \"default\"\n   */\n  variant?: SFDateRangePickerVariant;\n}\n\nexport function dateRangePickerVariants({\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n}: SFDateRangePickerVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"flex w-fit flex-col rounded-xl select-none\",\n    // Apply variant and size styles\n    SF_DATE_RANGE_PICKER_VARIANTS.variant[variant].classes,\n    SF_DATE_RANGE_PICKER_VARIANTS.size[size].classes\n  );\n}\n\n// Helper to get size config\nfunction getSizeConfig(size: SFDateRangePickerSize) {\n  return SF_DATE_RANGE_PICKER_VARIANTS.size[size];\n}\n\nenum DateRangeCellMode {\n  OUT_OF_RANGE,\n  ENABLED,\n  SELECTED_START_NODE,\n  SELECTED_END_NODE,\n  SELECTED,\n  SELECTED_OUT_OF_RANGE,\n}\n\nconst DAYS_OF_WEEK = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"] as const;\n\n/**\n * DateRangePicker component props.\n *\n * Dual-calendar date range selector with hover preview, timezone display, and reset support.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   onStartDateChange={(d) => setStart(d)}\n *   onEndDateChange={(d) => setEnd(d)}\n *   timezone=\"New York, NY, USA (GMT-4)\"\n * />\n *\n * // Compact variant\n * <DateRangePicker\n *   size=\"sm\"\n *   variant=\"subtle\"\n *   onStartDateChange={setStart}\n *   onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport interface DateRangePickerProps extends SFDateRangePickerVariantsProps {\n  /** Callback fired when start date changes. Receives `null` on reset. */\n  onStartDateChange: (date: Date | null) => void;\n  /** Callback fired when end date changes. Receives `null` on reset. */\n  onEndDateChange: (date: Date | null) => void;\n  /**\n   * Display timezone string shown in the footer.\n   * @default \"New York, NY, USA (GMT-4)\"\n   */\n  timezone?: string;\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n}\n\n/**\n * DateRangePicker — dual-calendar date range selector.\n *\n * Renders two side-by-side month calendars with click-to-select start/end dates,\n * hover preview of the range, a timezone footer, and a reset button.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   onStartDateChange={setStart}\n *   onEndDateChange={setEnd}\n * />\n * ```\n *\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport function DateRangePicker({\n  onStartDateChange,\n  onEndDateChange,\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  variant = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.variant,\n  timezone = \"New York, NY, USA (GMT-4)\",\n  className,\n}: DateRangePickerProps) {\n  const [startDate, setStartDate] = useState<Date | null>(null);\n  const [endDate, setEndDate] = useState<Date | null>(null);\n  const [viewingMonth, setViewingMonth] = useState<Date>(new Date());\n  const [hoveringDate, setHoveringDate] = useState<Date | null>(null);\n\n  const sizeConfig = getSizeConfig(size);\n\n  const handleStartDateChange = (date: Date | null) => {\n    setStartDate(date);\n    onStartDateChange(date); // Pass the updated startDate to the parent component\n  };\n\n  const handleEndDateChange = (date: Date | null) => {\n    setEndDate(date);\n    onEndDateChange(date); // Pass the updated endDate to the parent component\n  };\n\n  const getMonthName = useCallback((date: Date, monthOffset?: number) => {\n    const copyDate = new Date(date);\n    copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n    return copyDate.toLocaleString(\"default\", { month: \"long\" });\n  }, []);\n\n  const getDateYear = useCallback((date: Date, monthOffset?: number) => {\n    const copyDate = new Date(date);\n    copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n    return copyDate.getFullYear();\n  }, []);\n\n  const getMonthsStartingDay = useCallback(\n    (date: Date, monthOffset?: number) => {\n      const copyDate = new Date(date);\n      copyDate.setDate(1);\n      copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n      return copyDate.getDay();\n    },\n    []\n  );\n\n  const getNumberOfDaysInMonth = useCallback(\n    (date: Date, monthOffset?: number) => {\n      const copyDate = new Date(date);\n      copyDate.setDate(1);\n      copyDate.setMonth(copyDate.getMonth() + (monthOffset || 0));\n      copyDate.setMonth(copyDate.getMonth() + 1);\n      copyDate.setDate(0);\n      return copyDate.getDate();\n    },\n    []\n  );\n\n  const adjustMonth = useCallback((monthOffset: number) => {\n    setViewingMonth((prev) => {\n      const newDate = new Date(prev);\n      newDate.setMonth(newDate.getMonth() + monthOffset);\n      return newDate;\n    });\n  }, []);\n\n  const getDateFromIndex = useCallback(\n    (date: Date, monthOffset: number, index: number) => {\n      const startingDay = getMonthsStartingDay(date, monthOffset);\n\n      if (index < startingDay) {\n        // Get the last day of the previous month\n        const previousMonth = new Date(date);\n        previousMonth.setMonth(previousMonth.getMonth() + monthOffset);\n        previousMonth.setDate(1);\n        previousMonth.setDate(previousMonth.getDate() - (startingDay - index));\n        return previousMonth;\n      } else if (\n        index >\n        getNumberOfDaysInMonth(date, monthOffset) + startingDay - 1\n      ) {\n        // Get the first day of the next month\n        const nextMonth = new Date(date);\n        nextMonth.setMonth(nextMonth.getMonth() + monthOffset);\n        nextMonth.setMonth(nextMonth.getMonth() + 1);\n        nextMonth.setDate(\n          index - getNumberOfDaysInMonth(date, monthOffset) - startingDay + 1\n        );\n        return nextMonth;\n      } else {\n        // Get the current month's date\n        const newDate = new Date(date);\n        newDate.setMonth(newDate.getMonth() + monthOffset);\n        newDate.setDate(index - startingDay + 1);\n        return newDate;\n      }\n    },\n    [getMonthsStartingDay, getNumberOfDaysInMonth]\n  );\n\n  const isDateEqual = useCallback((date1: Date | null, date2: Date | null) => {\n    if (!date1 || !date2) return false;\n    return date1.toDateString() === date2.toDateString();\n  }, []);\n\n  return (\n    <div className={cn(dateRangePickerVariants({ size, variant }), className)}>\n      <div className=\"flex gap-4\">\n        <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n          <button\n            type=\"button\"\n            aria-label=\"Previous month\"\n            className=\"absolute top-0 left-0 cursor-pointer rounded bg-sf-interact/85 p-1.5 hover:bg-sf-interact\"\n            onClick={() => adjustMonth(-1)}\n          >\n            <CaretLeftIcon size={sizeConfig.iconSize} />\n          </button>\n\n          <DateRangeMonthHeader\n            month={getMonthName(viewingMonth)}\n            year={getDateYear(viewingMonth)}\n            size={size}\n            updateCurrentMonth={(dateString) => {\n              setViewingMonth(new Date(dateString));\n            }}\n          />\n\n          <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n            {Array.from({ length: 42 }).map((_, index) => (\n              <DateRangeDayCell\n                key={index}\n                date={getDateFromIndex(viewingMonth, 0, index)}\n                size={size}\n                mode={\n                  // After current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n                    index >\n                      getNumberOfDaysInMonth(viewingMonth, 0) +\n                        getMonthsStartingDay(viewingMonth, 0) -\n                        1) ||\n                  // Before current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 0, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 0, index) <= endDate &&\n                    index < getMonthsStartingDay(viewingMonth, 0))\n                    ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n                    : // Before current month range\n                      index < getMonthsStartingDay(viewingMonth, 0)\n                      ? DateRangeCellMode.OUT_OF_RANGE\n                      : // After current month range\n                        index >\n                          getNumberOfDaysInMonth(viewingMonth, 0) +\n                            getMonthsStartingDay(viewingMonth, 0) -\n                            1\n                        ? DateRangeCellMode.OUT_OF_RANGE\n                        : // Selected start date\n                          isDateEqual(\n                              getDateFromIndex(viewingMonth, 0, index),\n                              startDate\n                            )\n                          ? DateRangeCellMode.SELECTED_START_NODE\n                          : // Selected end date\n                            isDateEqual(\n                                getDateFromIndex(viewingMonth, 0, index),\n                                endDate\n                              )\n                            ? DateRangeCellMode.SELECTED_END_NODE\n                            : // Selected date range\n                              startDate &&\n                                getDateFromIndex(viewingMonth, 0, index) >=\n                                  startDate &&\n                                endDate &&\n                                getDateFromIndex(viewingMonth, 0, index) <=\n                                  endDate\n                              ? DateRangeCellMode.SELECTED\n                              : // Hovering past a starting date and no end date selected\n                                startDate &&\n                                  !endDate &&\n                                  hoveringDate &&\n                                  hoveringDate > startDate &&\n                                  getDateFromIndex(viewingMonth, 0, index) <=\n                                    hoveringDate &&\n                                  getDateFromIndex(viewingMonth, 0, index) >\n                                    startDate\n                                ? DateRangeCellMode.SELECTED\n                                : // Default to enabled date\n                                  DateRangeCellMode.ENABLED\n                }\n                onClick={(date) => {\n                  if (!startDate || date < startDate) {\n                    handleStartDateChange(date);\n                    setHoveringDate(date);\n                  } else {\n                    handleEndDateChange(date);\n                  }\n                }}\n                isHoveringDate={(date) => {\n                  if (startDate && !endDate && date > startDate) {\n                    setHoveringDate(date);\n                  }\n                }}\n              />\n            ))}\n          </div>\n        </div>\n        <div className={cn(\"relative\", sizeConfig.calendarWidth)}>\n          <button\n            type=\"button\"\n            aria-label=\"Next month\"\n            className=\"absolute top-0 right-0 cursor-pointer rounded bg-sf-interact/85 p-1.5 hover:bg-sf-interact\"\n            onClick={() => adjustMonth(1)}\n          >\n            <CaretRightIcon size={sizeConfig.iconSize} />\n          </button>\n\n          <DateRangeMonthHeader\n            month={getMonthName(viewingMonth, 1)}\n            year={getDateYear(viewingMonth, 1)}\n            size={size}\n            updateCurrentMonth={(dateString) => {\n              const date = new Date(dateString);\n              date.setMonth(date.getMonth() - 1);\n              setViewingMonth(date);\n            }}\n          />\n\n          <div className=\"grid grid-cols-7 gap-0 gap-y-0.5\">\n            {Array.from({ length: 42 }).map((_, index) => (\n              <DateRangeDayCell\n                key={index}\n                date={getDateFromIndex(viewingMonth, 1, index)}\n                size={size}\n                mode={\n                  // After current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n                    index >\n                      getNumberOfDaysInMonth(viewingMonth, 1) +\n                        getMonthsStartingDay(viewingMonth, 1) -\n                        1) ||\n                  // Before current month range\n                  (startDate &&\n                    endDate &&\n                    getDateFromIndex(viewingMonth, 1, index) >= startDate &&\n                    getDateFromIndex(viewingMonth, 1, index) <= endDate &&\n                    index < getMonthsStartingDay(viewingMonth, 1))\n                    ? DateRangeCellMode.SELECTED_OUT_OF_RANGE\n                    : // Before current month range\n                      index < getMonthsStartingDay(viewingMonth, 1)\n                      ? DateRangeCellMode.OUT_OF_RANGE\n                      : // After current month range\n                        index >\n                          getNumberOfDaysInMonth(viewingMonth, 1) +\n                            getMonthsStartingDay(viewingMonth, 1) -\n                            1\n                        ? DateRangeCellMode.OUT_OF_RANGE\n                        : // Selected start date\n                          isDateEqual(\n                              getDateFromIndex(viewingMonth, 1, index),\n                              startDate\n                            )\n                          ? DateRangeCellMode.SELECTED_START_NODE\n                          : // Selected end date\n                            isDateEqual(\n                                getDateFromIndex(viewingMonth, 1, index),\n                                endDate\n                              )\n                            ? DateRangeCellMode.SELECTED_END_NODE\n                            : // Selected date range\n                              startDate &&\n                                getDateFromIndex(viewingMonth, 1, index) >=\n                                  startDate &&\n                                endDate &&\n                                getDateFromIndex(viewingMonth, 1, index) <=\n                                  endDate\n                              ? DateRangeCellMode.SELECTED\n                              : // Hovering past a starting date and no end date selected\n                                startDate &&\n                                  !endDate &&\n                                  hoveringDate &&\n                                  hoveringDate > startDate &&\n                                  getDateFromIndex(viewingMonth, 1, index) <=\n                                    hoveringDate &&\n                                  getDateFromIndex(viewingMonth, 1, index) >\n                                    startDate\n                                ? DateRangeCellMode.SELECTED\n                                : // Default to enabled date\n                                  DateRangeCellMode.ENABLED\n                }\n                onClick={(date) => {\n                  if (!startDate || date < startDate) {\n                    handleStartDateChange(date);\n                    setHoveringDate(date);\n                  } else {\n                    handleEndDateChange(date);\n                  }\n                }}\n                isHoveringDate={(date) => {\n                  if (startDate && !endDate && date > startDate) {\n                    setHoveringDate(date);\n                  }\n                }}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n\n      <DateRangeFooter\n        timezone={timezone}\n        size={size}\n        reset={() => {\n          handleStartDateChange(null);\n          handleEndDateChange(null);\n        }}\n      />\n    </div>\n  );\n}\n\nfunction DateRangeDayCell({\n  date,\n  mode,\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  onClick,\n  isHoveringDate,\n}: {\n  date: Date;\n  mode?: DateRangeCellMode;\n  size?: SFDateRangePickerSize;\n  onClick?: (date: Date) => void;\n  isHoveringDate?: (date: Date) => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  const getDateNumberFromDate = useCallback((date: Date) => {\n    return date.getDate();\n  }, []);\n\n  const getBackgroundColor = useCallback(() => {\n    switch (mode) {\n      case DateRangeCellMode.OUT_OF_RANGE:\n        return \"bg-transparent\";\n      case DateRangeCellMode.ENABLED:\n        return \"bg-transparent\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n        return \"!bg-sf-contrast rounded-tl-[5px] rounded-bl-[5px]\";\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!bg-sf-contrast rounded-tr-[5px] rounded-br-[5px]\";\n      case DateRangeCellMode.SELECTED:\n        return \"bg-sf-interact\";\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"bg-sf-fill\";\n    }\n  }, [mode]);\n\n  const getTextColor = useCallback(() => {\n    switch (mode) {\n      case DateRangeCellMode.OUT_OF_RANGE:\n      case DateRangeCellMode.SELECTED_OUT_OF_RANGE:\n        return \"!text-sf-strong\";\n      case DateRangeCellMode.SELECTED_START_NODE:\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return \"!text-sf-inverse\";\n      default:\n        return \"text-sf-default\";\n    }\n  }, [mode]);\n\n  const getAriaLabel = useCallback(() => {\n    const dateStr = date.toLocaleDateString(\"en-US\", {\n      weekday: \"long\",\n      month: \"long\",\n      day: \"numeric\",\n      year: \"numeric\",\n    });\n    switch (mode) {\n      case DateRangeCellMode.SELECTED_START_NODE:\n        return `${dateStr}, selected as start date`;\n      case DateRangeCellMode.SELECTED_END_NODE:\n        return `${dateStr}, selected as end date`;\n      case DateRangeCellMode.SELECTED:\n        return `${dateStr}, within selected range`;\n      default:\n        return dateStr;\n    }\n  }, [date, mode]);\n\n  return (\n    <button\n      type=\"button\"\n      aria-label={getAriaLabel()}\n      id={date.toDateString()}\n      className={cn(\n        sizeConfig.cellHeight,\n        sizeConfig.cellWidth,\n        sizeConfig.textSize,\n        \"cursor-pointer text-center text-sf-default transition-all duration-[50]\",\n        `leading-[${sizeConfig.cellHeight.replace(\"h-[\", \"\").replace(\"]\", \"\")}]`,\n        mode !== DateRangeCellMode.OUT_OF_RANGE &&\n          mode !== DateRangeCellMode.SELECTED_OUT_OF_RANGE\n          ? \"hover:bg-sf-interact\"\n          : \"\",\n        getBackgroundColor(),\n        getTextColor()\n      )}\n      onClick={() => onClick?.(date)}\n      onMouseOver={() => isHoveringDate?.(date)}\n      onFocus={() => isHoveringDate?.(date)}\n    >\n      {getDateNumberFromDate(date)}\n    </button>\n  );\n}\n\nfunction DateRangeMonthHeader({\n  month,\n  year,\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  updateCurrentMonth,\n}: {\n  month?: string;\n  year?: number;\n  size?: SFDateRangePickerSize;\n  updateCurrentMonth?: (dateString: string) => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div>\n      <div className=\"mb-3 text-center\">\n        <input\n          key={`${month}-${year}`}\n          aria-label=\"Edit month and year\"\n          defaultValue={`${month} ${year}`}\n          className={cn(\n            \"w-full rounded-md border-none bg-transparent py-1.5 text-center font-semibold text-sf-default transition-all duration-200 focus:outline-none\",\n            sizeConfig.textSize\n          )}\n          onBlur={(e) => {\n            if (e.currentTarget.value.length === 0) return;\n            updateCurrentMonth?.(e.currentTarget.value);\n          }}\n        />\n      </div>\n\n      <div className=\"mt-2 grid grid-cols-7 gap-1\">\n        {DAYS_OF_WEEK.map((day) => (\n          <div\n            key={day}\n            className={cn(\n              \"h-[22px] text-center text-sf-subtle\",\n              sizeConfig.cellWidth,\n              sizeConfig.textSize\n            )}\n          >\n            {day}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction DateRangeFooter({\n  timezone,\n  size = SF_DATE_RANGE_PICKER_DEFAULT_VARIANTS.size,\n  reset,\n}: {\n  timezone?: string;\n  size?: SFDateRangePickerSize;\n  reset?: () => void;\n}) {\n  const sizeConfig = getSizeConfig(size);\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center gap-2 text-sf-strong\",\n        sizeConfig.textSize\n      )}\n    >\n      <GlobeHemisphereWestIcon size={sizeConfig.iconSize} />\n      <span className=\"flex-1\">Timezone: {timezone}</span>\n      <button\n        type=\"button\"\n        onClick={reset}\n        className=\"cursor-pointer font-semibold text-sf-default underline underline-offset-2\"\n      >\n        Reset Dates\n      </button>\n    </div>\n  );\n}\n\n// Default export for backwards compatibility\n/**\n * @deprecated Use {@link DatePicker} with `mode=\"range\"` instead.\n */\nexport default DateRangePicker;\n"],"mappings":"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"}

package/dist/{dialog-Bv1oSFOd.js → dialog-DYqu4aDO.js}

@@ -1,6 +1,6 @@
 "use client";
-import { t as cn } from "./cn-YROP2_ox.js";
-import { t as Surface } from "./surface-DGwRlC0o.js";
+import { t as cn } from "./cn-CmAOpn49.js";
+import { t as Surface } from "./surface-CWdSFVUx.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/dialog/dialog.tsx
@@ -101,4 +101,4 @@ var Dialog$1 = Object.assign(DialogContent, {
 //#endregion
 export { DialogTitle as a, DialogRoot as i, DialogClose as n, DialogTrigger as o, DialogDescription as r, Dialog$1 as t };
 
-//# sourceMappingURL=dialog-Bv1oSFOd.js.map
+//# sourceMappingURL=dialog-DYqu4aDO.js.map

package/dist/{dialog-Bv1oSFOd.js.map → dialog-DYqu4aDO.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dialog-Bv1oSFOd.js","names":[],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Surface } from \"../surface\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const SF_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"sm:min-w-96\",\n      description: \"Default dialog width\",\n    },\n    sm: {\n      classes: \"min-w-72\",\n      description: \"Small dialog for simple confirmations\",\n    },\n    lg: {\n      classes: \"min-w-[32rem]\",\n      description: \"Large dialog for complex content\",\n    },\n    xl: {\n      classes: \"min-w-[48rem]\",\n      description: \"Extra large dialog for detailed views\",\n    },\n  },\n} as const;\n\nexport const SF_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport const SF_DIALOG_STYLING = {\n  dimensions: {\n    sm: {\n      width: 350,\n      titleSize: 20,\n      descSize: 16,\n      padding: 16,\n      gap: 8,\n      buttonSize: \"sm\",\n    },\n    base: {\n      width: 384,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    lg: {\n      width: 512,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    xl: {\n      width: 768,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n  },\n  baseTokens: {\n    background: \"color-surface\",\n    text: \"text-color-surface\",\n    borderRadius: 12,\n    shadow: \"shadow-m\",\n  },\n  backdrop: {\n    background: \"color-surface-secondary\",\n    opacity: 0.8,\n  },\n  header: {\n    title: { fontWeight: 600, color: \"text-color-surface\" },\n    closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n  },\n  description: {\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  buttons: {\n    primary: { background: \"color-primary\", text: \"white\" },\n    secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n  },\n} as const;\n\n// Derived types from SF_DIALOG_VARIANTS\nexport type SFDialogSize = keyof typeof SF_DIALOG_VARIANTS.size;\n\nexport interface SFDialogVariantsProps {\n  /**\n   * Dialog width.\n   * - `\"sm\"` — Small (min 288px) for simple confirmations\n   * - `\"base\"` — Default (min 384px)\n   * - `\"lg\"` — Large (min 512px) for complex content\n   * - `\"xl\"` — Extra large (min 768px) for detailed views\n   * @default \"base\"\n   */\n  size?: SFDialogSize;\n}\n\nexport function dialogVariants({\n  size = SF_DIALOG_DEFAULT_VARIANTS.size,\n}: SFDialogVariantsProps = {}) {\n  return cn(\n    // Base styles (includes default padding)\n    \"shadow-m fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-sf-elevated text-sf-default p-6 duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n    // Apply size from SF_DIALOG_VARIANTS\n    SF_DIALOG_VARIANTS.size[size].classes\n  );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n *   <Dialog>\n *     <Dialog.Title>Confirm Action</Dialog.Title>\n *     <Dialog.Description>Are you sure?</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nexport type DialogProps = SFDialogVariantsProps & {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Dialog content (typically Title, Description, Close, and action buttons). */\n  children: ReactNode;\n  /** Inline styles. */\n  style?: CSSProperties;\n};\n\n/**\n * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n *   <Dialog>\n *     <Dialog.Title>Delete Item</Dialog.Title>\n *     <Dialog.Description>This action cannot be undone.</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = SF_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n  return (\n    <DialogBase.Portal>\n      <DialogBase.Backdrop className=\"fixed inset-0 bg-sf-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <Surface\n        as={DialogBase.Popup}\n        className={cn(dialogVariants({ size }), className)}\n        style={\n          {\n            transitionProperty: \"scale, opacity\",\n            transitionTimingFunction:\n              \"var(--default-transition-timing-function)\",\n            \"--tw-shadow\":\n              \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </Surface>\n    </DialogBase.Portal>\n  );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\n\nexport type DialogRootProps = BaseDialogRootProps;\n\nfunction DialogRoot({ children, ...props }: DialogRootProps) {\n  return <DialogBase.Root {...props}>{children}</DialogBase.Root>;\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Trigger\n>;\n\nexport type DialogTriggerProps = BaseDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n  return <DialogBase.Trigger {...props}>{children}</DialogBase.Trigger>;\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogBase.Title\n      className={cn(\"text-xl font-semibold text-sf-default\", className)}\n      {...props}\n    />\n  );\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogBase.Description\n      className={cn(\"text-sm text-sf-subtle\", className)}\n      {...props}\n    />\n  );\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n  return <DialogBase.Close {...props}>{children}</DialogBase.Close>;\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n});\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"mappings":";;;;;;;AAOA,IAAa,qBAAqB,EAChC,MAAM;CACJ,MAAM;EACJ,SAAS;EACT,aAAa;EACd;CACD,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACD,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACD,IAAI;EACF,SAAS;EACT,aAAa;EACd;CACF,EACF;AAED,IAAa,6BAA6B,EACxC,MAAM,QACP;AA4ED,SAAgB,eAAe,EAC7B,OAAO,2BAA2B,SACT,EAAE,EAAE;AAC7B,QAAO,GAEL,wUAEA,mBAAmB,KAAK,MAAM,QAC/B;;;;;;;;;;;;;;;;;;AA2CH,SAAS,cAAc,EACrB,WACA,UACA,OACA,OAAO,2BAA2B,QACpB;AACd,QACE,qBAAC,OAAW,QAAZ,EAAA,UAAA,CACE,oBAAC,OAAW,UAAZ,EAAqB,WAAU,gIAAiI,CAAA,EAChK,oBAAC,SAAD;EACE,IAAI,OAAW;EACf,WAAW,GAAG,eAAe,EAAE,MAAM,CAAC,EAAE,UAAU;EAClD,OACE;GACE,oBAAoB;GACpB,0BACE;GACF,eACE;GACF,GAAG;GACJ;EAGF;EACO,CAAA,CACQ,EAAA,CAAA;;AAYxB,SAAS,WAAW,EAAE,UAAU,GAAG,SAA0B;AAC3D,QAAO,oBAAC,OAAW,MAAZ;EAAiB,GAAI;EAAQ;EAA2B,CAAA;;AAGjE,WAAW,cAAc;AAYzB,SAAS,cAAc,EAAE,UAAU,GAAG,SAA6B;AACjE,QAAO,oBAAC,OAAW,SAAZ;EAAoB,GAAI;EAAQ;EAA8B,CAAA;;AAGvE,cAAc,cAAc;AAU5B,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAW,OAAZ;EACE,WAAW,GAAG,yCAAyC,UAAU;EACjE,GAAI;EACJ,CAAA;;AAIN,YAAY,cAAc;AAY1B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAW,aAAZ;EACE,WAAW,GAAG,0BAA0B,UAAU;EAClD,GAAI;EACJ,CAAA;;AAIN,kBAAkB,cAAc;AAUhC,SAAS,YAAY,EAAE,UAAU,GAAG,SAA2B;AAC7D,QAAO,oBAAC,OAAW,OAAZ;EAAkB,GAAI;EAAQ;EAA4B,CAAA;;AAGnE,YAAY,cAAc;AAM1B,IAAM,WAAS,OAAO,OAAO,eAAe;CAC1C,MAAM;CACN,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;CACR,CAAC"}
+{"version":3,"file":"dialog-DYqu4aDO.js","names":[],"sources":["../src/components/dialog/dialog.tsx"],"sourcesContent":["import { Dialog as DialogBase } from \"@base-ui/react/dialog\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\n\nimport { cn } from \"../../utils/cn\";\nimport { Surface } from \"../surface\";\n\n/** Dialog size variant definitions mapping sizes to their minimum widths. */\nexport const SF_DIALOG_VARIANTS = {\n  size: {\n    base: {\n      classes: \"sm:min-w-96\",\n      description: \"Default dialog width\",\n    },\n    sm: {\n      classes: \"min-w-72\",\n      description: \"Small dialog for simple confirmations\",\n    },\n    lg: {\n      classes: \"min-w-[32rem]\",\n      description: \"Large dialog for complex content\",\n    },\n    xl: {\n      classes: \"min-w-[48rem]\",\n      description: \"Extra large dialog for detailed views\",\n    },\n  },\n} as const;\n\nexport const SF_DIALOG_DEFAULT_VARIANTS = {\n  size: \"base\",\n} as const;\n\nexport const SF_DIALOG_STYLING = {\n  dimensions: {\n    sm: {\n      width: 350,\n      titleSize: 20,\n      descSize: 16,\n      padding: 16,\n      gap: 8,\n      buttonSize: \"sm\",\n    },\n    base: {\n      width: 384,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    lg: {\n      width: 512,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n    xl: {\n      width: 768,\n      titleSize: 20,\n      descSize: 16,\n      padding: 24,\n      gap: 16,\n      buttonSize: \"base\",\n    },\n  },\n  baseTokens: {\n    background: \"color-surface\",\n    text: \"text-color-surface\",\n    borderRadius: 12,\n    shadow: \"shadow-m\",\n  },\n  backdrop: {\n    background: \"color-surface-secondary\",\n    opacity: 0.8,\n  },\n  header: {\n    title: { fontWeight: 600, color: \"text-color-surface\" },\n    closeIcon: { name: \"ph-x\", size: 20, color: \"text-color-muted\" },\n  },\n  description: {\n    fontWeight: 400,\n    color: \"text-color-muted\",\n  },\n  buttons: {\n    primary: { background: \"color-primary\", text: \"white\" },\n    secondary: { ring: \"color-border\", text: \"text-color-surface\" },\n  },\n} as const;\n\n// Derived types from SF_DIALOG_VARIANTS\nexport type SFDialogSize = keyof typeof SF_DIALOG_VARIANTS.size;\n\nexport interface SFDialogVariantsProps {\n  /**\n   * Dialog width.\n   * - `\"sm\"` — Small (min 288px) for simple confirmations\n   * - `\"base\"` — Default (min 384px)\n   * - `\"lg\"` — Large (min 512px) for complex content\n   * - `\"xl\"` — Extra large (min 768px) for detailed views\n   * @default \"base\"\n   */\n  size?: SFDialogSize;\n}\n\nexport function dialogVariants({\n  size = SF_DIALOG_DEFAULT_VARIANTS.size,\n}: SFDialogVariantsProps = {}) {\n  return cn(\n    // Base styles (includes default padding)\n    \"shadow-m fixed top-1/2 left-1/2 w-full sm:w-auto max-w-[calc(100vw-2rem)] sm:max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl bg-sf-elevated text-sf-default p-6 duration-150 data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-90 data-starting-style:opacity-0\",\n    // Apply size from SF_DIALOG_VARIANTS\n    SF_DIALOG_VARIANTS.size[size].classes\n  );\n}\n\n/**\n * Dialog component props — the modal content panel.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Open</Button>} />\n *   <Dialog>\n *     <Dialog.Title>Confirm Action</Dialog.Title>\n *     <Dialog.Description>Are you sure?</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button {...p}>Cancel</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nexport type DialogProps = SFDialogVariantsProps & {\n  /** Additional CSS classes merged via `cn()`. */\n  className?: string;\n  /** Dialog content (typically Title, Description, Close, and action buttons). */\n  children: ReactNode;\n  /** Inline styles. */\n  style?: CSSProperties;\n};\n\n/**\n * Modal dialog overlay with backdrop. Compound component with `Dialog.Root`,\n * `Dialog.Trigger`, `Dialog.Title`, `Dialog.Description`, and `Dialog.Close`.\n *\n * @example\n * ```tsx\n * <Dialog.Root>\n *   <Dialog.Trigger render={(p) => <Button {...p}>Delete</Button>} />\n *   <Dialog>\n *     <Dialog.Title>Delete Item</Dialog.Title>\n *     <Dialog.Description>This action cannot be undone.</Dialog.Description>\n *     <Dialog.Close render={(p) => <Button variant=\"destructive\" {...p}>Delete</Button>} />\n *   </Dialog>\n * </Dialog.Root>\n * ```\n */\nfunction DialogContent({\n  className,\n  children,\n  style,\n  size = SF_DIALOG_DEFAULT_VARIANTS.size,\n}: DialogProps) {\n  return (\n    <DialogBase.Portal>\n      <DialogBase.Backdrop className=\"fixed inset-0 bg-sf-overlay opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <Surface\n        as={DialogBase.Popup}\n        className={cn(dialogVariants({ size }), className)}\n        style={\n          {\n            transitionProperty: \"scale, opacity\",\n            transitionTimingFunction:\n              \"var(--default-transition-timing-function)\",\n            \"--tw-shadow\":\n              \"0 20px 25px -5px rgb(0 0 0 / 0.03), 0 8px 10px -6px rgb(0 0 0 / 0.03)\",\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </Surface>\n    </DialogBase.Portal>\n  );\n}\n\n// ============================================================================\n// Dialog Root\n// ============================================================================\n\ntype BaseDialogRootProps = ComponentPropsWithoutRef<typeof DialogBase.Root>;\n\nexport type DialogRootProps = BaseDialogRootProps;\n\nfunction DialogRoot({ children, ...props }: DialogRootProps) {\n  return <DialogBase.Root {...props}>{children}</DialogBase.Root>;\n}\n\nDialogRoot.displayName = \"Dialog.Root\";\n\n// ============================================================================\n// Dialog Trigger\n// ============================================================================\n\ntype BaseDialogTriggerProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Trigger\n>;\n\nexport type DialogTriggerProps = BaseDialogTriggerProps;\n\nfunction DialogTrigger({ children, ...props }: DialogTriggerProps) {\n  return <DialogBase.Trigger {...props}>{children}</DialogBase.Trigger>;\n}\n\nDialogTrigger.displayName = \"Dialog.Trigger\";\n\n// ============================================================================\n// Dialog Title\n// ============================================================================\n\ntype BaseDialogTitleProps = ComponentPropsWithoutRef<typeof DialogBase.Title>;\n\nexport type DialogTitleProps = BaseDialogTitleProps;\n\nfunction DialogTitle({ className, ...props }: DialogTitleProps) {\n  return (\n    <DialogBase.Title\n      className={cn(\"text-xl font-semibold text-sf-default\", className)}\n      {...props}\n    />\n  );\n}\n\nDialogTitle.displayName = \"Dialog.Title\";\n\n// ============================================================================\n// Dialog Description\n// ============================================================================\n\ntype BaseDialogDescriptionProps = ComponentPropsWithoutRef<\n  typeof DialogBase.Description\n>;\n\nexport type DialogDescriptionProps = BaseDialogDescriptionProps;\n\nfunction DialogDescription({ className, ...props }: DialogDescriptionProps) {\n  return (\n    <DialogBase.Description\n      className={cn(\"text-sm text-sf-subtle\", className)}\n      {...props}\n    />\n  );\n}\n\nDialogDescription.displayName = \"Dialog.Description\";\n\n// ============================================================================\n// Dialog Close\n// ============================================================================\n\ntype BaseDialogCloseProps = ComponentPropsWithoutRef<typeof DialogBase.Close>;\n\nexport type DialogCloseProps = BaseDialogCloseProps;\n\nfunction DialogClose({ children, ...props }: DialogCloseProps) {\n  return <DialogBase.Close {...props}>{children}</DialogBase.Close>;\n}\n\nDialogClose.displayName = \"Dialog.Close\";\n\n// ============================================================================\n// Compound Component Export\n// ============================================================================\n\nconst Dialog = Object.assign(DialogContent, {\n  Root: DialogRoot,\n  Trigger: DialogTrigger,\n  Title: DialogTitle,\n  Description: DialogDescription,\n  Close: DialogClose,\n});\n\nexport {\n  Dialog,\n  DialogRoot,\n  DialogTrigger,\n  DialogTitle,\n  DialogDescription,\n  DialogClose,\n};\n"],"mappings":";;;;;;;AAOA,IAAa,qBAAqB,EAChC,MAAM;CACJ,MAAM;EACJ,SAAS;EACT,aAAa;CACf;CACA,IAAI;EACF,SAAS;EACT,aAAa;CACf;CACA,IAAI;EACF,SAAS;EACT,aAAa;CACf;CACA,IAAI;EACF,SAAS;EACT,aAAa;CACf;AACF,EACF;AAEA,IAAa,6BAA6B,EACxC,MAAM,OACR;AA4EA,SAAgB,eAAe,EAC7B,OAAO,2BAA2B,SACT,CAAC,GAAG;CAC7B,OAAO,GAEL,wUAEA,mBAAmB,KAAK,MAAM,OAChC;AACF;;;;;;;;;;;;;;;;;AA0CA,SAAS,cAAc,EACrB,WACA,UACA,OACA,OAAO,2BAA2B,QACpB;CACd,OACE,qBAAC,OAAW,QAAZ,EAAA,UAAA,CACE,oBAAC,OAAW,UAAZ,EAAqB,WAAU,+HAAgI,CAAA,GAC/J,oBAAC,SAAD;EACE,IAAI,OAAW;EACf,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EACjD,OACE;GACE,oBAAoB;GACpB,0BACE;GACF,eACE;GACF,GAAG;EACL;EAGD;CACM,CAAA,CACQ,EAAA,CAAA;AAEvB;AAUA,SAAS,WAAW,EAAE,UAAU,GAAG,SAA0B;CAC3D,OAAO,oBAAC,OAAW,MAAZ;EAAiB,GAAI;EAAQ;CAA0B,CAAA;AAChE;AAEA,WAAW,cAAc;AAYzB,SAAS,cAAc,EAAE,UAAU,GAAG,SAA6B;CACjE,OAAO,oBAAC,OAAW,SAAZ;EAAoB,GAAI;EAAQ;CAA6B,CAAA;AACtE;AAEA,cAAc,cAAc;AAU5B,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;CAC9D,OACE,oBAAC,OAAW,OAAZ;EACE,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,YAAY,cAAc;AAY1B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;CAC1E,OACE,oBAAC,OAAW,aAAZ;EACE,WAAW,GAAG,0BAA0B,SAAS;EACjD,GAAI;CACL,CAAA;AAEL;AAEA,kBAAkB,cAAc;AAUhC,SAAS,YAAY,EAAE,UAAU,GAAG,SAA2B;CAC7D,OAAO,oBAAC,OAAW,OAAZ;EAAkB,GAAI;EAAQ;CAA2B,CAAA;AAClE;AAEA,YAAY,cAAc;AAM1B,IAAM,WAAS,OAAO,OAAO,eAAe;CAC1C,MAAM;CACN,SAAS;CACT,OAAO;CACP,aAAa;CACb,OAAO;AACT,CAAC"}