@timmbr/ui 1.17.7 → 1.19.0

package/dist/components/Calendar/subcomponents/CalendarMonthYearPickers.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cn } from '@timmbr/utils';
+import { ChevronLeft, ChevronRight, ChevronDown } from '@timmbr/icons';
+
+const MONTH_LABELS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+const cellButton = "inline-flex h-10 w-full items-center justify-center rounded-[2px] text-body-3 font-medium text-foreground transition-colors hover:bg-grey-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40 dark:hover:bg-grey-800";
+const selectedCell = "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground dark:hover:bg-primary";
+const navButton = "inline-flex size-9 shrink-0 items-center justify-center rounded-[2px] text-foreground transition-colors hover:bg-grey-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40 dark:hover:bg-grey-800";
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function isBeforeMonth(a, b) {
+  return a.getFullYear() < b.getFullYear() || a.getFullYear() === b.getFullYear() && a.getMonth() < b.getMonth();
+}
+function isAfterMonth(a, b) {
+  return a.getFullYear() > b.getFullYear() || a.getFullYear() === b.getFullYear() && a.getMonth() > b.getMonth();
+}
+function decadeStart(year) {
+  return Math.floor(year / 12) * 12;
+}
+function CalendarMonthPicker({
+  displayMonth,
+  startMonth,
+  endMonth,
+  onSelectMonth,
+  onOpenYears,
+  onYearChange,
+  className
+}) {
+  const year = displayMonth.getFullYear();
+  const selectedMonth = displayMonth.getMonth();
+  const canPrevYear = !startMonth || !isBeforeMonth(new Date(year - 1, 11, 1), startOfMonth(startMonth));
+  const canNextYear = !endMonth || !isAfterMonth(new Date(year + 1, 0, 1), startOfMonth(endMonth));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "calendar-month-picker",
+      className: cn("flex w-full min-w-[17.5rem] flex-col gap-3", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-9 w-full items-center justify-center px-9", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Previous year",
+              className: cn(navButton, "absolute left-0 top-0"),
+              disabled: !canPrevYear,
+              onClick: () => onYearChange(year - 1),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "inline-flex h-9 items-center justify-center gap-1 rounded-[2px] px-1.5 text-body-3 font-semibold text-foreground transition-colors hover:bg-grey-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary dark:hover:bg-grey-800",
+              "aria-label": `Choose year, currently ${year}`,
+              onClick: onOpenYears,
+              children: [
+                year,
+                /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-70", "aria-hidden": true })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Next year",
+              className: cn(navButton, "absolute right-0 top-0"),
+              disabled: !canNextYear,
+              onClick: () => onYearChange(year + 1),
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": true })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Choose month", className: "grid grid-cols-3 gap-1", children: MONTH_LABELS.map((label, monthIndex) => {
+          const candidate = new Date(year, monthIndex, 1);
+          const disabled = startMonth !== void 0 && isBeforeMonth(candidate, startOfMonth(startMonth)) || endMonth !== void 0 && isAfterMonth(candidate, startOfMonth(endMonth));
+          const selected = monthIndex === selectedMonth;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-selected": selected,
+              disabled,
+              className: cn(cellButton, selected && selectedCell),
+              onClick: () => onSelectMonth(candidate),
+              children: label
+            },
+            label
+          );
+        }) })
+      ]
+    }
+  );
+}
+function CalendarYearPicker({
+  displayMonth,
+  startMonth,
+  endMonth,
+  onSelectYear,
+  onDecadeChange,
+  className
+}) {
+  const selectedYear = displayMonth.getFullYear();
+  const start = decadeStart(selectedYear);
+  const years = Array.from({ length: 12 }, (_, index) => start + index);
+  const minYear = startMonth?.getFullYear();
+  const maxYear = endMonth?.getFullYear();
+  const canPrev = minYear === void 0 || start - 12 >= minYear;
+  const canNext = maxYear === void 0 || start + 12 <= maxYear;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "calendar-year-picker",
+      className: cn("flex w-full min-w-[17.5rem] flex-col gap-3", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex h-9 w-full items-center justify-center px-9", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Previous years",
+              className: cn(navButton, "absolute left-0 top-0"),
+              disabled: !canPrev,
+              onClick: () => onDecadeChange(start - 12),
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": true })
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-body-3 font-semibold text-foreground select-none", children: [
+            years[0],
+            " – ",
+            years[years.length - 1]
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Next years",
+              className: cn(navButton, "absolute right-0 top-0"),
+              disabled: !canNext,
+              onClick: () => onDecadeChange(start + 12),
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": true })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { role: "grid", "aria-label": "Choose year", className: "grid grid-cols-3 gap-1", children: years.map((year) => {
+          const disabled = minYear !== void 0 && year < minYear || maxYear !== void 0 && year > maxYear;
+          const selected = year === selectedYear;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "gridcell",
+              "aria-selected": selected,
+              disabled,
+              className: cn(cellButton, selected && selectedCell),
+              onClick: () => onSelectYear(year),
+              children: year
+            },
+            year
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+export { CalendarMonthPicker, CalendarYearPicker };

package/dist/components/DataTable/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,UAAU,EAGV,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAc/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,EACjD,IAAI,EACJ,OAAO,EACP,OAAO,EACP,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAkC,EAClC,SAAiB,EACjB,QAAQ,EACR,UAAU,EACV,YAAmB,EACnB,mBAA0B,EAC1B,MAAM,EAAE,UAAU,GACnB,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,qBA+L/B;yBAlNe,SAAS;;;AAsNzB,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,UAAU,EAGV,KAAK,SAAS,EACf,MAAM,uBAAuB,CAAC;AAc/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,wBAAgB,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,EACjD,IAAI,EACJ,OAAO,EACP,OAAO,EACP,eAAe,EACf,YAAY,EACZ,oBAAoB,EACpB,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAkC,EAClC,SAAiB,EACjB,QAAQ,EACR,UAAU,EACV,YAAmB,EACnB,mBAA0B,EAC1B,MAAM,EAAE,UAAU,GACnB,EAAE,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,qBAgN/B;yBAnOe,SAAS;;;AAuOzB,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/DataTable/DataTable.js

@@ -128,6 +128,18 @@ function DataTable({
         ) }) : table.getRowModel().rows.length > 0 ? table.getRowModel().rows.map((row, index) => {
           const isSelected = row.getIsSelected();
           const cells = row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+          const rowInteraction = onRowClick ? {
+            tabIndex: 0,
+            onClick: () => onRowClick(row),
+            onKeyDown: (event) => {
+              if (event.target !== event.currentTarget) return;
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                onRowClick(row);
+              }
+            }
+          } : {};
+          const rowFocusClass = onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:bg-grey-50 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring dark:focus-visible:bg-grey-900";
           if (shouldAnimate) {
             return /* @__PURE__ */ jsx(
               motion.tr,
@@ -142,9 +154,9 @@ function DataTable({
                 },
                 className: cn(
                   "border-b border-grey-200 dark:border-grey-800 transition-colors data-[state=selected]:bg-primary/5 hover:bg-grey-50/80 dark:hover:bg-grey-900/60",
-                  onRowClick && "cursor-pointer"
+                  rowFocusClass
                 ),
-                onClick: () => onRowClick?.(row),
+                ...rowInteraction,
                 children: cells
               },
               row.id
@@ -154,8 +166,8 @@ function DataTable({
             TableRow,
             {
               "data-state": isSelected ? "selected" : void 0,
-              className: cn(onRowClick && "cursor-pointer"),
-              onClick: () => onRowClick?.(row),
+              className: cn(rowFocusClass),
+              ...rowInteraction,
               children: cells
             },
             row.id

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { DatePickerProps } from './DatePicker.types';
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/DatePicker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,2FAyOtB,CAAC"}

package/dist/components/DatePicker/DatePicker.helpers.d.ts

@@ -0,0 +1,8 @@
+import type { DateRange } from '@daypicker/react';
+export type DatePickerMode = 'single' | 'multiple' | 'range';
+export declare function formatDateValue(date: Date, dateFormat?: string): string;
+export declare function formatSelectionLabel(mode: DatePickerMode, selected: Date | Date[] | DateRange | undefined, dateFormat?: string): string;
+export declare function hasSelection(mode: DatePickerMode, selected: Date | Date[] | DateRange | undefined): boolean;
+export declare function shouldCloseOnSelect(mode: DatePickerMode, next: Date | Date[] | DateRange | undefined): boolean;
+export declare function clearSelection(mode: DatePickerMode): Date | Date[] | DateRange | undefined;
+//# sourceMappingURL=DatePicker.helpers.d.ts.map

package/dist/components/DatePicker/DatePicker.helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.helpers.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAElD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;AAI7D,wBAAgB,eAAe,CAAC,IAAI,EAAE,IAAI,EAAE,UAAU,SAAoB,GAAG,MAAM,CAGlF;AAED,wBAAgB,oBAAoB,CAClC,IAAI,EAAE,cAAc,EACpB,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,SAAS,GAAG,SAAS,EAC/C,UAAU,SAAoB,GAC7B,MAAM,CAuBR;AAED,wBAAgB,YAAY,CAC1B,IAAI,EAAE,cAAc,EACpB,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,SAAS,GAAG,SAAS,GAC9C,OAAO,CAST;AAED,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,cAAc,EACpB,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,SAAS,GAAG,SAAS,GAC1C,OAAO,CAOT;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG,SAAS,GAAG,SAAS,CAG1F"}

package/dist/components/DatePicker/DatePicker.helpers.js

@@ -0,0 +1,51 @@
+import { isValid, format } from 'date-fns';
+
+const defaultDateFormat = "PPP";
+function formatDateValue(date, dateFormat = defaultDateFormat) {
+  if (!isValid(date)) return "";
+  return format(date, dateFormat);
+}
+function formatSelectionLabel(mode, selected, dateFormat = defaultDateFormat) {
+  if (!selected) return "";
+  if (mode === "single" && selected instanceof Date) {
+    return formatDateValue(selected, dateFormat);
+  }
+  if (mode === "multiple" && Array.isArray(selected)) {
+    if (selected.length === 0) return "";
+    if (selected.length === 1) return formatDateValue(selected[0], dateFormat);
+    return `${formatDateValue(selected[0], dateFormat)} +${selected.length - 1}`;
+  }
+  if (mode === "range" && selected && typeof selected === "object" && !Array.isArray(selected)) {
+    const range = selected;
+    const from = range.from ? formatDateValue(range.from, dateFormat) : "";
+    const to = range.to ? formatDateValue(range.to, dateFormat) : "";
+    if (from && to) return `${from} – ${to}`;
+    if (from) return `${from} – …`;
+    return "";
+  }
+  return "";
+}
+function hasSelection(mode, selected) {
+  if (!selected) return false;
+  if (mode === "single") return selected instanceof Date && isValid(selected);
+  if (mode === "multiple") return Array.isArray(selected) && selected.length > 0;
+  if (mode === "range" && typeof selected === "object" && !Array.isArray(selected)) {
+    const range = selected;
+    return Boolean(range.from || range.to);
+  }
+  return false;
+}
+function shouldCloseOnSelect(mode, next) {
+  if (mode === "single") return next instanceof Date;
+  if (mode === "range" && next && typeof next === "object" && !Array.isArray(next)) {
+    const range = next;
+    return Boolean(range.from && range.to);
+  }
+  return false;
+}
+function clearSelection(mode) {
+  if (mode === "multiple") return [];
+  return void 0;
+}
+
+export { clearSelection, formatDateValue, formatSelectionLabel, hasSelection, shouldCloseOnSelect };

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,236 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { X, Calendar, AlertCircle, Info } from '@timmbr/icons';
+import { resolveMotion } from '../../types/motion.js';
+import { inputWrapperVariants } from '../Input/Input.styles.js';
+import { formatSelectionLabel, hasSelection, shouldCloseOnSelect, clearSelection } from './DatePicker.helpers.js';
+import { datePickerValueVariants } from './DatePicker.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover.js';
+import { Calendar as Calendar$1 } from '../Calendar/Calendar.js';
+
+const DatePicker = React.forwardRef(
+  (props, ref) => {
+    const {
+      label,
+      ariaLabel,
+      id: customId,
+      placeholder = "Pick a date",
+      helperText,
+      error,
+      className,
+      containerClassName,
+      style,
+      motion,
+      disabled,
+      clearable,
+      dateFormat,
+      open: openProp,
+      onOpenChange,
+      modal = false,
+      popoverAlign = "start",
+      popoverSide,
+      calendarProps,
+      variant,
+      size,
+      selected,
+      onSelect,
+      mode: modeProp,
+      numberOfMonths,
+      defaultMonth,
+      startMonth,
+      endMonth,
+      hidden,
+      captionLayout,
+      navLayout,
+      ...calendarRest
+    } = props;
+    const mode = modeProp ?? "single";
+    const generatedId = React.useId();
+    const triggerId = customId ?? generatedId;
+    const isError = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : void 0;
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const open = openProp ?? uncontrolledOpen;
+    const setOpen = React.useCallback(
+      (next) => {
+        if (openProp === void 0) {
+          setUncontrolledOpen(next);
+        }
+        onOpenChange?.(next);
+      },
+      [onOpenChange, openProp]
+    );
+    const displayValue = formatSelectionLabel(mode, selected, dateFormat);
+    const isEmpty = !hasSelection(mode, selected);
+    const resolvedNumberOfMonths = numberOfMonths ?? (mode === "range" ? 2 : 1);
+    const handleSelect = React.useCallback(
+      (value) => {
+        if (mode === "single") {
+          onSelect?.(
+            value
+          );
+        } else if (mode === "multiple") {
+          onSelect?.(
+            value
+          );
+        } else {
+          onSelect?.(
+            value
+          );
+        }
+        if (shouldCloseOnSelect(mode, value)) {
+          setOpen(false);
+        }
+      },
+      [mode, onSelect, setOpen]
+    );
+    const handleClear = React.useCallback(
+      (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const cleared = clearSelection(mode);
+        handleSelect(cleared);
+      },
+      [handleSelect, mode]
+    );
+    const required = "required" in props ? props.required : void 0;
+    const calendarModeProps = mode === "multiple" ? {
+      mode: "multiple",
+      selected,
+      onSelect: handleSelect,
+      required,
+      min: props.mode === "multiple" ? props.min : void 0,
+      max: props.mode === "multiple" ? props.max : void 0
+    } : mode === "range" ? {
+      mode: "range",
+      selected,
+      onSelect: handleSelect,
+      required,
+      min: props.mode === "range" ? props.min : void 0,
+      max: props.mode === "range" ? props.max : void 0
+    } : {
+      mode: "single",
+      selected,
+      onSelect: handleSelect,
+      required
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex w-full flex-col gap-1.5 font-sans", containerClassName),
+        style,
+        children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: triggerId,
+              className: "text-body-3 font-semibold tracking-wide text-foreground select-none",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal, children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref,
+                type: "button",
+                id: triggerId,
+                "aria-label": ariaLabel ?? (label ? void 0 : placeholder),
+                "aria-haspopup": "dialog",
+                "aria-expanded": open,
+                "aria-invalid": isError ? "true" : void 0,
+                disabled,
+                "data-slot": "datepicker-trigger",
+                className: cn(
+                  inputWrapperVariants({
+                    variant,
+                    size,
+                    isError,
+                    isDisabled: disabled
+                  }),
+                  "justify-between gap-2 text-left cursor-pointer select-none",
+                  "focus-visible:border-primary focus-visible:ring-1 focus-visible:ring-primary",
+                  !shouldAnimate && "transition-none",
+                  motionClass,
+                  className
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: datePickerValueVariants({
+                        empty: isEmpty
+                      }),
+                      children: isEmpty ? placeholder : displayValue
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
+                    clearable && !isEmpty && !disabled ? /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        role: "button",
+                        tabIndex: 0,
+                        "aria-label": "Clear date",
+                        className: "inline-flex rounded-[2px] p-0.5 transition-colors hover:bg-grey-100 hover:text-foreground dark:hover:bg-grey-800",
+                        onClick: handleClear,
+                        onKeyDown: (event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            handleClear(event);
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+                      }
+                    ) : null,
+                    /* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4 shrink-0 opacity-70", "aria-hidden": true })
+                  ] })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                align: popoverAlign,
+                side: popoverSide,
+                motion,
+                className: "w-auto min-w-[17.5rem] max-w-[calc(100vw-2rem)] border border-grey-200 p-3 dark:border-grey-700",
+                children: /* @__PURE__ */ jsx(
+                  Calendar$1,
+                  {
+                    ...calendarRest,
+                    startMonth,
+                    endMonth,
+                    hidden,
+                    captionLayout,
+                    navLayout,
+                    ...calendarModeProps,
+                    ...calendarProps,
+                    motion,
+                    numberOfMonths: calendarProps?.numberOfMonths ?? resolvedNumberOfMonths,
+                    defaultMonth: calendarProps?.defaultMonth ?? defaultMonth,
+                    className: cn("shadow-none", calendarProps?.className)
+                  }
+                )
+              }
+            )
+          ] }),
+          errorMessage ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-body-3 text-destructive", role: "alert", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0" }),
+            errorMessage
+          ] }) : helperText ? /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-body-3 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Info, { className: "h-3.5 w-3.5 shrink-0 opacity-70" }),
+            helperText
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

package/dist/components/DatePicker/DatePicker.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const datePickerValueVariants: (props?: ({
+    empty?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=DatePicker.styles.d.ts.map

package/dist/components/DatePicker/DatePicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,uBAAuB;;8EAUlC,CAAC"}

package/dist/components/DatePicker/DatePicker.styles.js

@@ -0,0 +1,15 @@
+import { cva } from 'class-variance-authority';
+
+const datePickerValueVariants = cva("flex-1 truncate text-left", {
+  variants: {
+    empty: {
+      true: "text-muted-foreground",
+      false: "text-foreground"
+    }
+  },
+  defaultVariants: {
+    empty: true
+  }
+});
+
+export { datePickerValueVariants };

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,67 @@
+import type * as React from 'react';
+import type { DateRange } from '@daypicker/react';
+import type { InputVariants } from '../Input/Input.styles';
+import type { MotionProp } from '../../types/motion';
+import type { CalendarProps, CalendarMultipleProps, CalendarRangeProps, CalendarSingleProps, CaptionLayout, NavLayout } from '../Calendar/Calendar.types';
+type PopoverAlign = 'start' | 'center' | 'end';
+type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
+type DatePickerFieldProps = Pick<InputVariants, 'variant' | 'size'> & {
+    label?: string;
+    ariaLabel?: string;
+    id?: string;
+    placeholder?: string;
+    /** Supporting text below the field when there is no error. */
+    helperText?: string;
+    /** Field-level error. String message or boolean invalid state. */
+    error?: string | boolean;
+    className?: string;
+    containerClassName?: string;
+    style?: React.CSSProperties;
+    motion?: MotionProp;
+    /**
+     * Disables the trigger. Calendar day matchers use `calendarProps.disabled`
+     * (same DayPicker `disabled` matchers as Calendar).
+     */
+    disabled?: boolean;
+    clearable?: boolean;
+    dateFormat?: string;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    popoverAlign?: PopoverAlign;
+    popoverSide?: PopoverSide;
+    /**
+     * Extra Calendar props. Use `calendarProps.disabled` / `hidden` for day
+     * matchers so they do not collide with field `disabled`.
+     */
+    calendarProps?: Omit<CalendarProps, 'selected' | 'onSelect' | 'mode' | 'motion'>;
+    /** Caption chrome. Defaults to Calendar's `'label'` (in-popover month/year). */
+    captionLayout?: CaptionLayout;
+    /** Nav button placement. Defaults to `'around'` via Calendar. */
+    navLayout?: NavLayout;
+    /** Earliest navigable month. */
+    startMonth?: Date;
+    /** Latest navigable month. */
+    endMonth?: Date;
+    /** Day matchers that hide days from the grid. */
+    hidden?: CalendarSingleProps['hidden'];
+};
+type CalendarFieldOmit = keyof DatePickerFieldProps | 'motion' | 'disabled';
+export type DatePickerSingleProps = DatePickerFieldProps & Omit<CalendarSingleProps, CalendarFieldOmit> & {
+    mode?: 'single';
+    selected?: Date;
+    onSelect?: (date: Date | undefined) => void;
+};
+export type DatePickerMultipleProps = DatePickerFieldProps & Omit<CalendarMultipleProps, CalendarFieldOmit> & {
+    mode: 'multiple';
+    selected?: Date[];
+    onSelect?: (dates: Date[] | undefined) => void;
+};
+export type DatePickerRangeProps = DatePickerFieldProps & Omit<CalendarRangeProps, CalendarFieldOmit> & {
+    mode: 'range';
+    selected?: DateRange;
+    onSelect?: (range: DateRange | undefined) => void;
+};
+export type DatePickerProps = DatePickerSingleProps | DatePickerMultipleProps | DatePickerRangeProps;
+export {};
+//# sourceMappingURL=DatePicker.types.d.ts.map

package/dist/components/DatePicker/DatePicker.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.types.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.types.ts"],"names":[],"mappings":"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"}

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,5 @@
+export * from './DatePicker';
+export * from './DatePicker.types';
+export * from './DatePicker.styles';
+export * from './DatePicker.helpers';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/components/Rating/Rating.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import type { RatingProps } from './Rating.types';
-/** Read-only average rating: "4.5 ★ (817)". */
+/** Read-only average rating: "4.5 ★ (817)", or a row of stars with `display="stars"`. */
 export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Rating.d.ts.map