@sableui/react 0.6.2 → 0.7.1

package/dist/components/context-menu/context-menu.meta.js

@@ -0,0 +1,138 @@
+// src/components/context-menu/context-menu.meta.ts
+var contextMenuMeta = {
+  name: "ContextMenu",
+  summary: "Right-click menu over Base UI ContextMenu \u2014 opens on the native contextmenu event or long press and positions at the pointer. Shares Menu's roving focus, typeahead, ARIA menu/menuitem wiring, collision-aware positioning, and Esc/outside dismissal.",
+  status: "stable",
+  keywords: [
+    "context menu",
+    "right click",
+    "overflow",
+    "menu"
+  ],
+  usage: {
+    description: "Use ContextMenu for actions that are specific to the object or area the user invoked.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for secondary object actions such as rename, duplicate, move, or delete."
+      },
+      {
+        guidance: "do",
+        description: "Group destructive or uncommon actions away from frequent safe actions."
+      },
+      {
+        guidance: "dont",
+        description: "Do not make ContextMenu the only way to access a primary or required action."
+      },
+      {
+        guidance: "dont",
+        description: "Do not rely on it for touch. There is no right-click on a touchscreen \u2014 the long-press fallback is discoverable by nobody, so anything in here needs a visible route too."
+      }
+    ],
+    anatomy: [
+      {
+        name: "ContextMenuTrigger",
+        required: true,
+        description: "The target area or element that opens the menu."
+      },
+      {
+        name: "ContextMenuContent",
+        required: true,
+        description: "The menu surface."
+      },
+      {
+        name: "ContextMenuItem",
+        required: true,
+        description: "One actionable command."
+      },
+      {
+        name: "ContextMenuSeparator",
+        required: false,
+        description: "A divider between command groups."
+      },
+      {
+        name: "ContextMenuGroup",
+        required: false,
+        description: "A semantic group of related commands."
+      },
+      {
+        name: "ContextMenuGroupLabel",
+        required: false,
+        description: "An optional label for a command group."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Menu",
+      "OverflowMenu"
+    ]
+  },
+  props: [
+    {
+      name: "ContextMenu (Root)",
+      type: "Base UI ContextMenu.Root props (open, defaultOpen, onOpenChange, orientation, loopFocus)",
+      default: "\u2014",
+      description: "Groups all parts and controls open state. Renders no element. Uncontrolled by default."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "ContextMenuTrigger",
+      type: "Base UI ContextMenu.Trigger props + className + render",
+      description: "The right-clickable area that opens the menu on contextmenu (right click) or long press. Renders a <div>."
+    },
+    {
+      name: "ContextMenuContent",
+      type: "Base UI Popup props + { side, align, sideOffset, className }",
+      description: "Portal + Positioner + Popup. Positions at the pointer. side is which side of the anchor the popup renders against (auto-flips on collision), align its alignment along that side, sideOffset the gap in px. Defaults to side='bottom', align='start', sideOffset=6."
+    },
+    {
+      name: "ContextMenuItem",
+      type: 'Base UI ContextMenu.Item props + variant?: "default" | "destructive" + className (disabled, closeOnClick, onClick)',
+      description: 'An interactive row. Lays out as a flex row, so a leading Icon sits inline before the label. Highlights via data-[highlighted]; dims via data-[disabled], and disabled items are skipped by keyboard focus. variant="destructive" marks a destructive command (Delete, Remove) and keeps its destructive ink while highlighted; never fake it with a text-destructive class, which the highlight repaints.'
+    },
+    {
+      name: "ContextMenuSeparator",
+      type: "Base UI Separator props + className",
+      description: "Hairline rule between item runs."
+    },
+    {
+      name: "ContextMenuGroup",
+      type: "Base UI ContextMenu.Group props + className",
+      description: "Groups related items under an accessible label auto-associated with the group."
+    },
+    {
+      name: "ContextMenuGroupLabel",
+      type: "Base UI ContextMenu.GroupLabel props + className",
+      description: "The label for a ContextMenuGroup. Auto-associated with the group it sits in."
+    }
+  ],
+  tokensUsed: [
+    "popover",
+    "popover-foreground",
+    "border",
+    "accent",
+    "accent-foreground",
+    "muted-foreground"
+  ],
+  a11y: [
+    "Base UI provides role=menu/menuitem, roving tabindex, arrow-key navigation, and typeahead.",
+    "Opens on right click (contextmenu) or long press; Esc and outside-press dismiss and restore focus.",
+    "Animate open/close via data-[starting-style]/data-[ending-style] attributes.",
+    "ContextMenuGroupLabel is auto-associated with its ContextMenuGroup for screen readers."
+  ],
+  examples: [
+    {
+      label: "Basic",
+      code: '<ContextMenu><ContextMenuTrigger className="rounded-md border border-dashed border-border p-8 text-center text-body-sm text-muted-foreground">Right-click here</ContextMenuTrigger><ContextMenuContent><ContextMenuItem>Cut</ContextMenuItem><ContextMenuItem>Copy</ContextMenuItem><ContextMenuItem>Paste</ContextMenuItem><ContextMenuSeparator /><ContextMenuItem variant="destructive">Delete</ContextMenuItem></ContextMenuContent></ContextMenu>'
+    },
+    {
+      label: "Grouped",
+      code: '<ContextMenu><ContextMenuTrigger className="rounded-md border border-dashed border-border p-8">Right-click here</ContextMenuTrigger><ContextMenuContent><ContextMenuGroup><ContextMenuGroupLabel>Layout</ContextMenuGroupLabel><ContextMenuItem>Move up</ContextMenuItem><ContextMenuItem>Move down</ContextMenuItem></ContextMenuGroup><ContextMenuSeparator /><ContextMenuItem>Duplicate</ContextMenuItem></ContextMenuContent></ContextMenu>'
+    }
+  ]
+};
+export {
+  contextMenuMeta
+};

package/dist/components/context-menu/index.js

@@ -0,0 +1,23 @@
+// src/components/context-menu/index.ts
+import {
+  ContextMenu,
+  ContextMenuPortal,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuGroup,
+  ContextMenuGroupLabel
+} from "./context-menu.js";
+import { contextMenuMeta } from "./context-menu.meta.js";
+export {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuGroupLabel,
+  ContextMenuItem,
+  ContextMenuPortal,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+  contextMenuMeta
+};

package/dist/components/data-table/data-table.js

@@ -0,0 +1,142 @@
+"use client";
+
+// src/components/data-table/data-table.tsx
+import { useMemo, useState } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button/button.js";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "../table/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ALIGN = {
+  start: "text-start",
+  center: "text-center",
+  // End-aligned columns are the numeric ones: tabular figures keep the
+  // digits on one grid down the column.
+  end: "text-end tabular-nums"
+};
+function DataTable({
+  columns,
+  data,
+  rowKey,
+  onRowClick,
+  isRowSelected,
+  defaultSort,
+  empty = "No results.",
+  caption,
+  className
+}) {
+  const [sort, setSort] = useState(defaultSort ?? null);
+  function toggleSort(key) {
+    setSort((prev) => {
+      if (prev?.key !== key) return { key, direction: "asc" };
+      if (prev.direction === "asc") return { key, direction: "desc" };
+      return null;
+    });
+  }
+  const rows = useMemo(() => {
+    if (!sort) return data;
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col) return data;
+    const getValue = col.sortValue ?? ((row) => row[col.key]);
+    return [...data].sort((a, b) => {
+      const va = getValue(a);
+      const vb = getValue(b);
+      let c = 0;
+      if (va == null && vb == null) c = 0;
+      else if (va == null) c = 1;
+      else if (vb == null) c = -1;
+      else if (va < vb) c = -1;
+      else if (va > vb) c = 1;
+      return sort.direction === "asc" ? c : -c;
+    });
+  }, [data, sort, columns]);
+  return /* @__PURE__ */ jsxs(Table, { className, children: [
+    caption ? /* @__PURE__ */ jsx(TableCaption, { children: caption }) : null,
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => {
+      const active = sort?.key === col.key;
+      return /* @__PURE__ */ jsx(
+        TableHead,
+        {
+          "aria-sort": active ? sort.direction === "asc" ? "ascending" : "descending" : void 0,
+          className: cn(col.align && ALIGN[col.align], col.className),
+          children: col.sortable ? (
+            // The negative inline margin cancels Button's padding so
+            // the label stays on the column's text edge; the header's
+            // own type and ink win over Button's action tier. In an
+            // end-aligned column the chevron leads, so the LABEL is
+            // what sits on the numbers' edge.
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "xs",
+                onClick: () => toggleSort(col.key),
+                className: cn(
+                  "-mx-2 gap-1 text-label-md text-muted-foreground hover:text-foreground",
+                  col.align === "end" && "flex-row-reverse"
+                ),
+                children: [
+                  col.header,
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      name: active && sort.direction === "desc" ? "chevron-down" : "chevron-up",
+                      className: cn("text-xs", !active && "opacity-60")
+                    }
+                  )
+                ]
+              }
+            )
+          ) : col.header
+        },
+        col.key
+      );
+    }) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        colSpan: columns.length,
+        className: cn(
+          "text-center text-muted-foreground",
+          typeof empty === "string" && "py-8"
+        ),
+        children: empty
+      }
+    ) }) : rows.map((row, i) => /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        "data-selected": isRowSelected?.(row) ? "" : void 0,
+        onClick: onRowClick ? () => onRowClick(row) : void 0,
+        tabIndex: onRowClick ? 0 : void 0,
+        onKeyDown: onRowClick ? (e) => {
+          if (e.target !== e.currentTarget) return;
+          if (e.key !== "Enter" && e.key !== " ") return;
+          e.preventDefault();
+          onRowClick(row);
+        } : void 0,
+        className: onRowClick ? "cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring" : void 0,
+        children: columns.map((col) => /* @__PURE__ */ jsx(
+          TableCell,
+          {
+            className: cn(col.align && ALIGN[col.align], col.className),
+            children: col.cell ? col.cell(row) : row[col.key]
+          },
+          col.key
+        ))
+      },
+      rowKey ? rowKey(row, i) : i
+    )) })
+  ] });
+}
+DataTable.displayName = "DataTable";
+export {
+  DataTable
+};

package/dist/components/data-table/data-table.meta.js

@@ -0,0 +1,146 @@
+// src/components/data-table/data-table.meta.ts
+var dataTableMeta = {
+  name: "DataTable",
+  summary: "A data-driven table over the Table primitives \u2014 a columns def + data array with built-in client-side sorting (click a sortable header to cycle asc \u2192 desc \u2192 none), optional row click / selection, and an empty state. For server data or paging, sort/page the data and pair with Pagination.",
+  keywords: [
+    "data table",
+    "table",
+    "sortable",
+    "columns",
+    "rows",
+    "empty state",
+    "pagination",
+    "list"
+  ],
+  usage: {
+    description: "Use DataTable when a data array and column definition should render a sortable, semantic table with optional row actions and an empty state. Use the lower-level Table parts for hand-authored markup or highly custom row layouts.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Put a table that fills a card in <CardContent flush>. The table runs edge to edge and its first and last columns inset to the card padding on their own; do not hand-set pl-6 / pr-6 on columns."
+      },
+      {
+        guidance: "do",
+        description: "Provide stable rowKey values for dynamic data so selection and sorting do not jump."
+      },
+      {
+        guidance: "do",
+        description: "Use sortable only on columns where ordering is obvious and useful."
+      },
+      {
+        guidance: "do",
+        description: "Pair server-side datasets with Pagination and pass already-sorted/paged rows."
+      },
+      {
+        guidance: "dont",
+        description: "Make every row clickable and also fill it with competing buttons. Choose a clear row interaction model."
+      },
+      {
+        guidance: "dont",
+        description: "Use DataTable for heterogeneous cards or timeline content. A list or card layout will scan better."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Columns",
+        required: true,
+        description: "Definitions for headers, cell renderers, sorting, alignment, and classes."
+      },
+      {
+        name: "Rows",
+        required: true,
+        description: "The data array rendered through the column definitions."
+      },
+      {
+        name: "Empty state",
+        required: false,
+        description: "Content spanning all columns when the row array is empty."
+      },
+      {
+        name: "Caption",
+        required: false,
+        description: "Accessible table caption rendered by the underlying Table."
+      }
+    ]
+  },
+  related: {
+    components: ["Table", "Pagination", "EmptyState", "Badge"],
+    patterns: ["DashboardPage", "ListDetailPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "columns",
+      type: "DataTableColumn<Row>[]",
+      description: "Column defs: { key, header, cell?, sortValue?, sortable?, align?, className? }. cell defaults to row[key]; sortValue defaults to row[key]. When cell renders a formatted string (e.g. a date), pass sortValue returning the underlying value (e.g. date.getTime()) so the column sorts by the real value, not the rendered text."
+    },
+    {
+      name: "data",
+      type: "Row[]",
+      description: "The rows to render."
+    },
+    {
+      name: "rowKey",
+      type: "(row, index) => string | number",
+      default: "index",
+      description: "Stable React key per row."
+    },
+    {
+      name: "onRowClick",
+      type: "(row) => void",
+      description: "Row click handler \u2014 makes rows pointer-interactive."
+    },
+    {
+      name: "isRowSelected",
+      type: "(row) => boolean",
+      description: "Mark a row visually selected (data-selected). Derive it from a stable id (row.id === selectedId), not the row index, so selection survives re-sorts."
+    },
+    {
+      name: "defaultSort",
+      type: '{ key: string; direction: "asc" | "desc" }',
+      description: "Initial sort column + direction."
+    },
+    {
+      name: "empty",
+      type: "ReactNode",
+      default: '"No results."',
+      description: "Rendered spanning all columns when data is empty. Pass an EmptyState for the full treatment (icon, title, next step)."
+    },
+    {
+      name: "caption",
+      type: "ReactNode",
+      description: "Bottom table caption."
+    }
+  ],
+  tokensUsed: ["muted-foreground", "foreground", "ring"],
+  a11y: [
+    "Sorted columns set aria-sort=ascending/descending on the header cell.",
+    "Sortable headers are real <button>s with a focus-visible ring, keyboard-operable.",
+    "Inherits the Table's scrollable frame and semantic <table>/<th>/<td> structure."
+  ],
+  examples: [
+    {
+      label: "Sortable columns",
+      code: '<DataTable data={users} columns={[{ key: "name", header: "Name", sortable: true }, { key: "role", header: "Role" }, { key: "joined", header: "Joined", sortable: true, sortValue: (u) => u.joinedAt, cell: (u) => formatDate(u.joinedAt) }]} />'
+    },
+    {
+      label: "Clickable rows",
+      code: "<DataTable data={posts} columns={cols} onRowClick={(p) => navigate(`/post/${p.id}`)} rowKey={(p) => p.id} />"
+    },
+    {
+      label: "Rich status column",
+      code: '<DataTable data={deployments} rowKey={(row) => row.id} columns={[{ key: "name", header: "Name", sortable: true }, { key: "status", header: "Status", cell: (row) => <Badge appearance="plain" tone={row.status === "failed" ? "destructive" : row.status === "building" ? "warning" : "success"} dot>{row.statusLabel}</Badge> }, { key: "owner", header: "Owner", cell: (row) => <Entity className="[--entity-px:0] [--entity-py:0]" leading={<Avatar src={row.owner.avatar} alt={row.owner.name} fallback={row.owner.initials} size="sm" />} title={row.owner.name} /> }]} />'
+    },
+    {
+      label: "In a card, edge to edge",
+      code: '<Card><CardHeader><CardTitle>Deployments</CardTitle></CardHeader><CardContent flush><DataTable data={deployments} rowKey={(row) => row.id} columns={[{ key: "project", header: "Project", sortable: true }, { key: "duration", header: "Duration", align: "end" }]} /></CardContent></Card>'
+    },
+    {
+      label: "Empty state",
+      code: '<DataTable data={[]} columns={[{ key: "name", header: "Name" }, { key: "status", header: "Status" }]} empty={<EmptyState icon={<Icon name="search" />} title="No deployments" description="Try a different filter or create a deployment." action={<Button>Create deployment</Button>} />} />'
+    }
+  ]
+};
+export {
+  dataTableMeta
+};

package/dist/components/data-table/index.js

@@ -0,0 +1,9 @@
+// src/components/data-table/index.ts
+import {
+  DataTable
+} from "./data-table.js";
+import { dataTableMeta } from "./data-table.meta.js";
+export {
+  DataTable,
+  dataTableMeta
+};

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,196 @@
+"use client";
+
+// src/components/date-picker/date-picker.tsx
+import {
+  format,
+  setHours,
+  setMilliseconds,
+  setMinutes,
+  setSeconds
+} from "date-fns";
+import { useId, useState } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useDensity, useTypeTier } from "../../lib/density.js";
+import { FIELD_INVALID, FIELD_SHELL, MOBILE_FIELD_TIER } from "../../lib/field-shell.js";
+import { Calendar } from "../calendar/calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger
+} from "../select/select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function rangeMatchers(minDate, maxDate) {
+  const matchers = [];
+  if (minDate) matchers.push({ before: minDate });
+  if (maxDate) matchers.push({ after: maxDate });
+  return matchers.length ? matchers : void 0;
+}
+var HOURS = Array.from({ length: 24 }, (_, h) => h);
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+function parseDefaultTime(time) {
+  const match = /^(\d{1,2}):(\d{1,2})$/.exec(time);
+  if (!match) return [0, 0];
+  return [
+    Math.min(23, Math.max(0, Number(match[1]))),
+    Math.min(59, Math.max(0, Number(match[2])))
+  ];
+}
+function atTime(date, hours, minutes) {
+  return setMilliseconds(setSeconds(setMinutes(setHours(date, hours), minutes), 0), 0);
+}
+function DatePicker(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    onChange,
+    granularity = "day",
+    minuteStep = 5,
+    defaultTime = "00:00",
+    placeholder,
+    disabled,
+    minDate,
+    maxDate,
+    className,
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired
+  } = props;
+  const timeLabelId = useId();
+  const tier = useTypeTier();
+  const density = useDensity();
+  const [open, setOpen] = useState(false);
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const controlled = "value" in props;
+  const value = controlled ? valueProp : uncontrolled;
+  const withTime = granularity === "minute";
+  function commit(next) {
+    if (!controlled) setUncontrolled(next);
+    onValueChange?.(next);
+    onChange?.(next);
+  }
+  const [defaultHours, defaultMinutes] = parseDefaultTime(defaultTime);
+  const hours = value?.getHours() ?? defaultHours;
+  const minutes = value?.getMinutes() ?? defaultMinutes;
+  const step = Math.max(1, Math.floor(minuteStep));
+  const steps = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
+  const minuteOptions = steps.includes(minutes) ? steps : [...steps, minutes].sort((a, b) => a - b);
+  function handleDay(next) {
+    if (!withTime) {
+      commit(next);
+      setOpen(false);
+      return;
+    }
+    commit(next ? atTime(next, hours, minutes) : void 0);
+  }
+  function timeBase() {
+    return atTime(value ?? /* @__PURE__ */ new Date(), hours, minutes);
+  }
+  function handleHour(next) {
+    if (next == null) return;
+    commit(setHours(timeBase(), Number(next)));
+  }
+  function handleMinute(next) {
+    if (next == null) return;
+    commit(setMinutes(timeBase(), Number(next)));
+  }
+  const label = value ? (
+    // 24-hour, matching the hour / minute Selects below — the trigger
+    // and the row that sets it must not show the same time two ways.
+    format(value, withTime ? "MMM d, yyyy 'at' HH:mm" : "PP")
+  ) : placeholder ?? (withTime ? "Pick date & time" : "Pick a date");
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        render: (
+          // The field shell, not an outline Button: in a form a date sits
+          // beside Inputs and Selects, and has to be the same shape they
+          // are (soft-square field radius, input border, card surface) —
+          // an outline Button is a pill in most themes. CommandMenuTrigger
+          // is the same move: a button wearing the field.
+          // design-lint-disable-next-line raw-button -- a field-shaped trigger (FIELD_SHELL, like CommandMenuTrigger), not a button-shaped action
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              id,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": ariaDescribedBy,
+              "aria-invalid": ariaInvalid,
+              "aria-required": ariaRequired,
+              disabled,
+              className: cn(
+                "inline-flex h-(--control-md) items-center gap-2 ps-3 pe-3 text-start text-foreground",
+                // Select's type: the density tier, plus the 16px phone tier
+                // its form-row neighbours take (lib/field-shell).
+                tier.body,
+                density === "comfortable" && MOBILE_FIELD_TIER,
+                FIELD_SHELL,
+                FIELD_INVALID,
+                className
+              ),
+              children: [
+                /* @__PURE__ */ jsx(Icon, { name: "calendar", className: "shrink-0 text-sm text-muted-foreground" }),
+                /* @__PURE__ */ jsx("span", { className: cn("truncate", !value && "text-muted-foreground"), children: label })
+              ]
+            }
+          )
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-auto p-3", children: [
+      /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          bare: true,
+          mode: "single",
+          selected: value,
+          onSelect: handleDay,
+          disabled: rangeMatchers(minDate, maxDate),
+          defaultMonth: value ?? minDate,
+          startMonth: minDate,
+          endMonth: maxDate
+        }
+      ),
+      withTime && // One group named "Time" holding the two Selects, rather than a
+      // <label> — a label names one control, and this names a pair.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "group",
+          "aria-labelledby": timeLabelId,
+          className: "mt-3 flex items-center gap-2 border-t border-border pt-3",
+          children: [
+            /* @__PURE__ */ jsx("span", { id: timeLabelId, className: "text-label-md text-muted-foreground", children: "Time" }),
+            /* @__PURE__ */ jsxs("div", { className: "ms-auto flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxs(Select, { value: pad(hours), onValueChange: handleHour, children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": "Hour", className: "w-18" }),
+                /* @__PURE__ */ jsx(SelectContent, { children: HOURS.map((h) => /* @__PURE__ */ jsx(SelectItem, { value: pad(h), children: pad(h) }, h)) })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: ":" }),
+              /* @__PURE__ */ jsxs(Select, { value: pad(minutes), onValueChange: handleMinute, children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { "aria-label": "Minute", className: "w-18" }),
+                /* @__PURE__ */ jsx(SelectContent, { children: minuteOptions.map((m) => /* @__PURE__ */ jsx(SelectItem, { value: pad(m), children: pad(m) }, m)) })
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker,
+  rangeMatchers
+};