@glob-ui/date-picker 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Martínez E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,17 @@
-# Temporary Holding Version
+# @glob-ui/date-picker
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A date field. The trigger shows the value and opens a calendar in a popover, for one day or a range, with optional presets.
+
+## Install
+
+```bash
+pnpm add @glob-ui/date-picker
+```
+
+## Documentation
+
+Full docs, examples and the accessibility table: [Date picker](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/date-picker.mdx).
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { DateRange } from '@glob-ui/calendar';
+
+interface DatePickerPreset {
+    label: string;
+    /** A single day ("YYYY-MM-DD") for single mode, or a range for range mode. */
+    value: string | DateRange;
+}
+interface DatePickerBaseProps {
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    min?: string;
+    max?: string;
+    isDateDisabled?: (iso: string) => boolean;
+    /** Months shown side by side (stacked on small screens). Default 1, or 2 in range mode. */
+    numberOfMonths?: 1 | 2;
+    /** Buttons next to the calendar (above it on small screens). Selecting one closes the picker. */
+    presets?: DatePickerPreset[];
+    placeholder?: string;
+    disabled?: boolean;
+    /** Shows an X that clears the value. Default true. */
+    clearable?: boolean;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "ghost" | "outline";
+    className?: string;
+    id?: string;
+    name?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+}
+interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode?: "single";
+    /** "YYYY-MM-DD", or null for none. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (iso: string | null) => void;
+    allowDeselect?: boolean;
+}
+interface DatePickerRangeProps extends DatePickerBaseProps {
+    mode: "range";
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+}
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+/** A date field. The value is an ISO date ("YYYY-MM-DD") or a range of them, and the calendar opens in a popover. */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { DatePicker, type DatePickerPreset, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps };

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { DateRange } from '@glob-ui/calendar';
+
+interface DatePickerPreset {
+    label: string;
+    /** A single day ("YYYY-MM-DD") for single mode, or a range for range mode. */
+    value: string | DateRange;
+}
+interface DatePickerBaseProps {
+    locale?: string;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    min?: string;
+    max?: string;
+    isDateDisabled?: (iso: string) => boolean;
+    /** Months shown side by side (stacked on small screens). Default 1, or 2 in range mode. */
+    numberOfMonths?: 1 | 2;
+    /** Buttons next to the calendar (above it on small screens). Selecting one closes the picker. */
+    presets?: DatePickerPreset[];
+    placeholder?: string;
+    disabled?: boolean;
+    /** Shows an X that clears the value. Default true. */
+    clearable?: boolean;
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "ghost" | "outline";
+    className?: string;
+    id?: string;
+    name?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+}
+interface DatePickerSingleProps extends DatePickerBaseProps {
+    mode?: "single";
+    /** "YYYY-MM-DD", or null for none. */
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (iso: string | null) => void;
+    allowDeselect?: boolean;
+}
+interface DatePickerRangeProps extends DatePickerBaseProps {
+    mode: "range";
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+}
+type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;
+/** A date field. The value is an ISO date ("YYYY-MM-DD") or a range of them, and the calendar opens in a popover. */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { DatePicker, type DatePickerPreset, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps };

package/dist/index.js

@@ -0,0 +1,217 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DatePicker: () => DatePicker
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/date-picker.tsx
+var import_react = require("react");
+var import_utils = require("@glob-ui/utils");
+var import_hooks = require("@glob-ui/hooks");
+var import_calendar = require("@glob-ui/calendar");
+var import_popover = require("@glob-ui/popover");
+var import_slot = require("@glob-ui/slot");
+var import_jsx_runtime = require("react/jsx-runtime");
+var sizeClasses = { sm: "h-8 text-xs", md: "h-10 text-sm", lg: "h-12 text-base" };
+var variantClasses = {
+  default: "border-glob-border bg-glob-surface",
+  ghost: "border-transparent bg-transparent hover:bg-glob-surface-hover",
+  outline: "border-glob-border bg-transparent hover:bg-glob-surface-hover"
+};
+function formatValue(value, isRange, locale) {
+  const format = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  if (!isRange) return typeof value === "string" ? format.format((0, import_calendar.parseISODate)(value)) : null;
+  const range = value;
+  if (!(range == null ? void 0 : range.from)) return null;
+  const from = format.format((0, import_calendar.parseISODate)(range.from));
+  if (!range.to) return `${from} \u2013 \u2026`;
+  const to = (0, import_calendar.parseISODate)(range.to);
+  const fromDate = (0, import_calendar.parseISODate)(range.from);
+  const withRange = format;
+  return typeof withRange.formatRange === "function" ? withRange.formatRange(fromDate, to) : `${from} \u2013 ${format.format(to)}`;
+}
+var DatePicker = (0, import_react.forwardRef)((props, ref) => {
+  var _a;
+  const {
+    mode = "single",
+    locale: localeProp,
+    weekStartsOn,
+    min,
+    max,
+    isDateDisabled,
+    numberOfMonths,
+    presets,
+    placeholder,
+    disabled = false,
+    clearable = true,
+    size = "md",
+    variant = "default",
+    className,
+    id,
+    name,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    value,
+    defaultValue,
+    onChange,
+    allowDeselect = false
+  } = props;
+  const isRange = mode === "range";
+  const locale = (0, import_calendar.useResolvedLocale)(localeProp);
+  const baseId = (0, import_react.useId)();
+  const triggerId = id != null ? id : `${baseId}-trigger`;
+  const valueId = `${baseId}-value`;
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const triggerRef = (0, import_react.useRef)(null);
+  const mergedRef = (0, import_react.useMemo)(() => (0, import_slot.composeRefs)(ref, triggerRef), [ref]);
+  const [single, setSingle] = (0, import_hooks.useControllableState)(
+    isRange ? void 0 : value,
+    defaultValue != null ? defaultValue : null,
+    isRange ? void 0 : onChange
+  );
+  const [range, setRange] = (0, import_hooks.useControllableState)(
+    isRange ? value : void 0,
+    defaultValue != null ? defaultValue : { from: null, to: null },
+    isRange ? onChange : void 0
+  );
+  const current = isRange ? range : single;
+  const text = formatValue(current, isRange, locale);
+  const hasValue = isRange ? range.from !== null : single !== null;
+  const months = numberOfMonths != null ? numberOfMonths : isRange ? 2 : 1;
+  function closeAndFocus() {
+    var _a2;
+    setOpen(false);
+    (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
+  }
+  function applyPreset(preset) {
+    if (isRange) {
+      setRange(typeof preset.value === "string" ? { from: preset.value, to: preset.value } : preset.value);
+    } else {
+      setSingle(typeof preset.value === "string" ? preset.value : preset.value.from);
+    }
+    closeAndFocus();
+  }
+  function clear() {
+    var _a2;
+    if (isRange) setRange({ from: null, to: null });
+    else setSingle(null);
+    (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
+  }
+  const hiddenValue = isRange ? range.from && range.to ? `${range.from}/${range.to}` : "" : single != null ? single : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_popover.Popover, { open, onOpenChange: setOpen, placement: "bottom-start", offset: 6, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_popover.PopoverTrigger,
+        {
+          ref: mergedRef,
+          id: triggerId,
+          type: "button",
+          disabled,
+          "data-invalid": ariaInvalid === true || ariaInvalid === "true" ? "true" : void 0,
+          "aria-describedby": ariaDescribedBy,
+          "aria-labelledby": [ariaLabelledBy, valueId].filter(Boolean).join(" "),
+          "aria-label": ariaLabel,
+          className: (0, import_utils.cn)(
+            "flex w-full cursor-pointer items-center justify-between gap-2 rounded-glob-md border px-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50 data-[invalid=true]:border-glob-danger",
+            sizeClasses[size],
+            variantClasses[variant],
+            // Room for the clear button, which sits beside the trigger (never inside it).
+            hasValue && clearable && "pr-16",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: valueId, className: (0, import_utils.cn)("truncate", text === null && "text-glob-text-secondary"), children: (_a = text != null ? text : placeholder) != null ? _a : isRange ? "Pick a date range" : "Pick a date" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "h-4 w-4 shrink-0 text-glob-text-secondary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 2v4M8 2v4M3 10h18" })
+            ] })
+          ]
+        }
+      ),
+      clearable && hasValue && !disabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear date",
+          onClick: clear,
+          className: "absolute right-9 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-glob-sm text-glob-text-secondary hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring",
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "h-3.5 w-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.PopoverContent, { className: "w-fit p-3", "aria-labelledby": void 0, "aria-label": isRange ? "Choose a date range" : "Choose a date", children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-3 sm:flex-row", children: [
+        presets && presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "group", "aria-label": "Presets", className: "flex flex-wrap gap-1 sm:w-36 sm:flex-col", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => applyPreset(preset),
+            className: "rounded-glob-sm px-2 py-1.5 text-left text-sm text-glob-text transition-colors hover:bg-glob-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring",
+            children: preset.label
+          },
+          preset.label
+        )) }),
+        isRange ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_calendar.Calendar,
+          {
+            mode: "range",
+            value: range,
+            onChange: (next) => {
+              setRange(next);
+              if (next.to) closeAndFocus();
+            },
+            locale: localeProp,
+            weekStartsOn,
+            min,
+            max,
+            isDateDisabled,
+            numberOfMonths: months
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_calendar.Calendar,
+          {
+            mode: "single",
+            value: single,
+            onChange: (next) => setSingle(next),
+            onSelectDay: () => closeAndFocus(),
+            allowDeselect,
+            locale: localeProp,
+            weekStartsOn,
+            min,
+            max,
+            isDateDisabled,
+            numberOfMonths: months
+          }
+        )
+      ] }) })
+    ] }),
+    name !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name, value: hiddenValue })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/date-picker.tsx"],"sourcesContent":["export { DatePicker } from \"./date-picker\"\nexport type { DatePickerProps, DatePickerSingleProps, DatePickerRangeProps, DatePickerPreset } from \"./date-picker\"\n","\"use client\"\n\nimport { forwardRef, useId, useMemo, useRef, useState } from \"react\"\nimport { cn } from \"@glob-ui/utils\"\nimport { useControllableState } from \"@glob-ui/hooks\"\nimport { Calendar, parseISODate, useResolvedLocale, type DateRange } from \"@glob-ui/calendar\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@glob-ui/popover\"\nimport { composeRefs } from \"@glob-ui/slot\"\n\nexport interface DatePickerPreset {\n  label: string\n  /** A single day (\"YYYY-MM-DD\") for single mode, or a range for range mode. */\n  value: string | DateRange\n}\n\ninterface DatePickerBaseProps {\n  locale?: string\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  min?: string\n  max?: string\n  isDateDisabled?: (iso: string) => boolean\n  /** Months shown side by side (stacked on small screens). Default 1, or 2 in range mode. */\n  numberOfMonths?: 1 | 2\n  /** Buttons next to the calendar (above it on small screens). Selecting one closes the picker. */\n  presets?: DatePickerPreset[]\n  placeholder?: string\n  disabled?: boolean\n  /** Shows an X that clears the value. Default true. */\n  clearable?: boolean\n  size?: \"sm\" | \"md\" | \"lg\"\n  variant?: \"default\" | \"ghost\" | \"outline\"\n  className?: string\n  id?: string\n  name?: string\n  \"aria-invalid\"?: boolean | \"true\" | \"false\"\n  \"aria-describedby\"?: string\n  \"aria-labelledby\"?: string\n  \"aria-label\"?: string\n}\n\nexport interface DatePickerSingleProps extends DatePickerBaseProps {\n  mode?: \"single\"\n  /** \"YYYY-MM-DD\", or null for none. */\n  value?: string | null\n  defaultValue?: string | null\n  onChange?: (iso: string | null) => void\n  allowDeselect?: boolean\n}\n\nexport interface DatePickerRangeProps extends DatePickerBaseProps {\n  mode: \"range\"\n  value?: DateRange\n  defaultValue?: DateRange\n  onChange?: (range: DateRange) => void\n}\n\nexport type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps\n\nconst sizeClasses = { sm: \"h-8 text-xs\", md: \"h-10 text-sm\", lg: \"h-12 text-base\" }\nconst variantClasses = {\n  default: \"border-glob-border bg-glob-surface\",\n  ghost: \"border-transparent bg-transparent hover:bg-glob-surface-hover\",\n  outline: \"border-glob-border bg-transparent hover:bg-glob-surface-hover\",\n}\n\n/** The text shown in the trigger: \"Nov 9, 2026\", or \"Nov 3 – Nov 9, 2026\" for a range. */\nfunction formatValue(value: string | DateRange | null, isRange: boolean, locale: string): string | null {\n  const format = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" })\n  if (!isRange) return typeof value === \"string\" ? format.format(parseISODate(value)) : null\n  const range = value as DateRange | null\n  if (!range?.from) return null\n  const from = format.format(parseISODate(range.from))\n  if (!range.to) return `${from} – …`\n  const to = parseISODate(range.to)\n  const fromDate = parseISODate(range.from)\n  // formatRange collapses shared parts (\"Nov 3 – 9, 2026\"); fall back to two dates where it is missing.\n  const withRange = format as Intl.DateTimeFormat & { formatRange?: (a: Date, b: Date) => string }\n  return typeof withRange.formatRange === \"function\" ? withRange.formatRange(fromDate, to) : `${from} – ${format.format(to)}`\n}\n\n/** A date field. The value is an ISO date (\"YYYY-MM-DD\") or a range of them, and the calendar opens in a popover. */\nconst DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>((props, ref) => {\n  const {\n    mode = \"single\",\n    locale: localeProp,\n    weekStartsOn,\n    min,\n    max,\n    isDateDisabled,\n    numberOfMonths,\n    presets,\n    placeholder,\n    disabled = false,\n    clearable = true,\n    size = \"md\",\n    variant = \"default\",\n    className,\n    id,\n    name,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel,\n    value,\n    defaultValue,\n    onChange,\n    allowDeselect = false,\n  } = props as DatePickerProps & { allowDeselect?: boolean }\n  const isRange = mode === \"range\"\n  // Same HTML on the server and during hydration; the browser locale takes over after (see useResolvedLocale).\n  const locale = useResolvedLocale(localeProp)\n  const baseId = useId()\n  const triggerId = id ?? `${baseId}-trigger`\n  const valueId = `${baseId}-value`\n  const [open, setOpen] = useState(false)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const mergedRef = useMemo(() => composeRefs<HTMLButtonElement>(ref, triggerRef), [ref])\n\n  const [single, setSingle] = useControllableState<string | null>(\n    isRange ? undefined : (value as string | null | undefined),\n    (defaultValue as string | null | undefined) ?? null,\n    isRange ? undefined : (onChange as ((next: string | null) => void) | undefined)\n  )\n  const [range, setRange] = useControllableState<DateRange>(\n    isRange ? (value as DateRange | undefined) : undefined,\n    (defaultValue as DateRange | undefined) ?? { from: null, to: null },\n    isRange ? (onChange as ((next: DateRange) => void) | undefined) : undefined\n  )\n\n  const current: string | DateRange | null = isRange ? range : single\n  const text = formatValue(current, isRange, locale)\n  const hasValue = isRange ? range.from !== null : single !== null\n  const months = numberOfMonths ?? (isRange ? 2 : 1)\n\n  /** Closes the calendar and gives focus back to the trigger. */\n  function closeAndFocus() {\n    setOpen(false)\n    triggerRef.current?.focus()\n  }\n\n  function applyPreset(preset: DatePickerPreset) {\n    if (isRange) {\n      setRange(typeof preset.value === \"string\" ? { from: preset.value, to: preset.value } : preset.value)\n    } else {\n      setSingle(typeof preset.value === \"string\" ? preset.value : preset.value.from)\n    }\n    closeAndFocus()\n  }\n\n  function clear() {\n    if (isRange) setRange({ from: null, to: null })\n    else setSingle(null)\n    triggerRef.current?.focus()\n  }\n\n  const hiddenValue = isRange ? (range.from && range.to ? `${range.from}/${range.to}` : \"\") : (single ?? \"\")\n\n  return (\n    <div className=\"relative w-full\">\n      {/* One Popover for the trigger and the content: they share its context. */}\n      <Popover open={open} onOpenChange={setOpen} placement=\"bottom-start\" offset={6}>\n        {/* PopoverTrigger renders the button and forwards these props (no asChild: the registry transform rewrites it). */}\n        <PopoverTrigger\n          ref={mergedRef}\n            id={triggerId}\n            type=\"button\"\n            disabled={disabled}\n            data-invalid={ariaInvalid === true || ariaInvalid === \"true\" ? \"true\" : undefined}\n            aria-describedby={ariaDescribedBy}\n            // The name includes the shown value, so it contains the visible text (WCAG 2.5.3).\n            aria-labelledby={[ariaLabelledBy, valueId].filter(Boolean).join(\" \")}\n            aria-label={ariaLabel}\n            className={cn(\n              \"flex w-full cursor-pointer items-center justify-between gap-2 rounded-glob-md border px-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50 data-[invalid=true]:border-glob-danger\",\n              sizeClasses[size],\n              variantClasses[variant],\n              // Room for the clear button, which sits beside the trigger (never inside it).\n              hasValue && clearable && \"pr-16\",\n              className\n            )}\n          >\n            <span id={valueId} className={cn(\"truncate\", text === null && \"text-glob-text-secondary\")}>\n              {text ?? placeholder ?? (isRange ? \"Pick a date range\" : \"Pick a date\")}\n            </span>\n            <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"h-4 w-4 shrink-0 text-glob-text-secondary\">\n              <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" />\n              <path d=\"M16 2v4M8 2v4M3 10h18\" />\n            </svg>\n        </PopoverTrigger>\n\n      {clearable && hasValue && !disabled && (\n        <button\n          type=\"button\"\n          aria-label=\"Clear date\"\n          onClick={clear}\n          className=\"absolute right-9 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-glob-sm text-glob-text-secondary hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring\"\n        >\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"h-3.5 w-3.5\">\n            <path d=\"M18 6L6 18M6 6l12 12\" />\n          </svg>\n        </button>\n      )}\n\n        {/* Named explicitly: the Popover's default name points at its own trigger id, which Field may replace. */}\n        <PopoverContent className=\"w-fit p-3\" aria-labelledby={undefined} aria-label={isRange ? \"Choose a date range\" : \"Choose a date\"}>\n          {open && (\n            <div className=\"flex flex-col gap-3 sm:flex-row\">\n              {presets && presets.length > 0 && (\n                <div role=\"group\" aria-label=\"Presets\" className=\"flex flex-wrap gap-1 sm:w-36 sm:flex-col\">\n                  {presets.map((preset) => (\n                    <button\n                      key={preset.label}\n                      type=\"button\"\n                      onClick={() => applyPreset(preset)}\n                      className=\"rounded-glob-sm px-2 py-1.5 text-left text-sm text-glob-text transition-colors hover:bg-glob-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring\"\n                    >\n                      {preset.label}\n                    </button>\n                  ))}\n                </div>\n              )}\n              {isRange ? (\n                <Calendar\n                  mode=\"range\"\n                  value={range}\n                  onChange={(next) => {\n                    setRange(next)\n                    // The range is complete once `to` is set.\n                    if (next.to) closeAndFocus()\n                  }}\n                  locale={localeProp}\n                  weekStartsOn={weekStartsOn}\n                  min={min}\n                  max={max}\n                  isDateDisabled={isDateDisabled}\n                  numberOfMonths={months as 1 | 2}\n                />\n              ) : (\n                <Calendar\n                  mode=\"single\"\n                  value={single}\n                  onChange={(next) => setSingle(next)}\n                  onSelectDay={() => closeAndFocus()}\n                  allowDeselect={allowDeselect}\n                  locale={localeProp}\n                  weekStartsOn={weekStartsOn}\n                  min={min}\n                  max={max}\n                  isDateDisabled={isDateDisabled}\n                  numberOfMonths={months as 1 | 2}\n                />\n              )}\n            </div>\n          )}\n        </PopoverContent>\n      </Popover>\n\n      {name !== undefined && <input type=\"hidden\" name={name} value={hiddenValue} />}\n    </div>\n  )\n})\nDatePicker.displayName = \"DatePicker\"\n\nexport { DatePicker }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAA6D;AAC7D,mBAAmB;AACnB,mBAAqC;AACrC,sBAA0E;AAC1E,qBAAwD;AACxD,kBAA4B;AA8KhB;AA3HZ,IAAM,cAAc,EAAE,IAAI,eAAe,IAAI,gBAAgB,IAAI,iBAAiB;AAClF,IAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX;AAGA,SAAS,YAAY,OAAkC,SAAkB,QAA+B;AACtG,QAAM,SAAS,IAAI,KAAK,eAAe,QAAQ,EAAE,WAAW,SAAS,CAAC;AACtE,MAAI,CAAC,QAAS,QAAO,OAAO,UAAU,WAAW,OAAO,WAAO,8BAAa,KAAK,CAAC,IAAI;AACtF,QAAM,QAAQ;AACd,MAAI,EAAC,+BAAO,MAAM,QAAO;AACzB,QAAM,OAAO,OAAO,WAAO,8BAAa,MAAM,IAAI,CAAC;AACnD,MAAI,CAAC,MAAM,GAAI,QAAO,GAAG,IAAI;AAC7B,QAAM,SAAK,8BAAa,MAAM,EAAE;AAChC,QAAM,eAAW,8BAAa,MAAM,IAAI;AAExC,QAAM,YAAY;AAClB,SAAO,OAAO,UAAU,gBAAgB,aAAa,UAAU,YAAY,UAAU,EAAE,IAAI,GAAG,IAAI,WAAM,OAAO,OAAO,EAAE,CAAC;AAC3H;AAGA,IAAM,iBAAa,yBAA+C,CAAC,OAAO,QAAQ;AAjFlF;AAkFE,QAAM;AAAA,IACJ,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,oBAAoB;AAAA,IACpB,mBAAmB;AAAA,IACnB,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI;AACJ,QAAM,UAAU,SAAS;AAEzB,QAAM,aAAS,mCAAkB,UAAU;AAC3C,QAAM,aAAS,oBAAM;AACrB,QAAM,YAAY,kBAAM,GAAG,MAAM;AACjC,QAAM,UAAU,GAAG,MAAM;AACzB,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,KAAK;AACtC,QAAM,iBAAa,qBAAiC,IAAI;AACxD,QAAM,gBAAY,sBAAQ,UAAM,yBAA+B,KAAK,UAAU,GAAG,CAAC,GAAG,CAAC;AAEtF,QAAM,CAAC,QAAQ,SAAS,QAAI;AAAA,IAC1B,UAAU,SAAa;AAAA,IACtB,sCAA8C;AAAA,IAC/C,UAAU,SAAa;AAAA,EACzB;AACA,QAAM,CAAC,OAAO,QAAQ,QAAI;AAAA,IACxB,UAAW,QAAkC;AAAA,IAC5C,sCAA0C,EAAE,MAAM,MAAM,IAAI,KAAK;AAAA,IAClE,UAAW,WAAuD;AAAA,EACpE;AAEA,QAAM,UAAqC,UAAU,QAAQ;AAC7D,QAAM,OAAO,YAAY,SAAS,SAAS,MAAM;AACjD,QAAM,WAAW,UAAU,MAAM,SAAS,OAAO,WAAW;AAC5D,QAAM,SAAS,0CAAmB,UAAU,IAAI;AAGhD,WAAS,gBAAgB;AAvI3B,QAAAA;AAwII,YAAQ,KAAK;AACb,KAAAA,MAAA,WAAW,YAAX,gBAAAA,IAAoB;AAAA,EACtB;AAEA,WAAS,YAAY,QAA0B;AAC7C,QAAI,SAAS;AACX,eAAS,OAAO,OAAO,UAAU,WAAW,EAAE,MAAM,OAAO,OAAO,IAAI,OAAO,MAAM,IAAI,OAAO,KAAK;AAAA,IACrG,OAAO;AACL,gBAAU,OAAO,OAAO,UAAU,WAAW,OAAO,QAAQ,OAAO,MAAM,IAAI;AAAA,IAC/E;AACA,kBAAc;AAAA,EAChB;AAEA,WAAS,QAAQ;AArJnB,QAAAA;AAsJI,QAAI,QAAS,UAAS,EAAE,MAAM,MAAM,IAAI,KAAK,CAAC;AAAA,QACzC,WAAU,IAAI;AACnB,KAAAA,MAAA,WAAW,YAAX,gBAAAA,IAAoB;AAAA,EACtB;AAEA,QAAM,cAAc,UAAW,MAAM,QAAQ,MAAM,KAAK,GAAG,MAAM,IAAI,IAAI,MAAM,EAAE,KAAK,KAAO,0BAAU;AAEvG,SACE,6CAAC,SAAI,WAAU,mBAEb;AAAA,iDAAC,0BAAQ,MAAY,cAAc,SAAS,WAAU,gBAAe,QAAQ,GAE3E;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACH,IAAI;AAAA,UACJ,MAAK;AAAA,UACL;AAAA,UACA,gBAAc,gBAAgB,QAAQ,gBAAgB,SAAS,SAAS;AAAA,UACxE,oBAAkB;AAAA,UAElB,mBAAiB,CAAC,gBAAgB,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,UACnE,cAAY;AAAA,UACZ,eAAW;AAAA,YACT;AAAA,YACA,YAAY,IAAI;AAAA,YAChB,eAAe,OAAO;AAAA;AAAA,YAEtB,YAAY,aAAa;AAAA,YACzB;AAAA,UACF;AAAA,UAEA;AAAA,wDAAC,UAAK,IAAI,SAAS,eAAW,iBAAG,YAAY,SAAS,QAAQ,0BAA0B,GACrF,sCAAQ,gBAAR,YAAwB,UAAU,sBAAsB,eAC3D;AAAA,YACA,6CAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,WAAU,6CACtG;AAAA,0DAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI;AAAA,cAChD,4CAAC,UAAK,GAAE,yBAAwB;AAAA,eAClC;AAAA;AAAA;AAAA,MACJ;AAAA,MAED,aAAa,YAAY,CAAC,YACzB;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,cAAW;AAAA,UACX,SAAS;AAAA,UACT,WAAU;AAAA,UAEV,sDAAC,SAAI,eAAY,QAAO,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,WAAU,eACtG,sDAAC,UAAK,GAAE,wBAAuB,GACjC;AAAA;AAAA,MACF;AAAA,MAIA,4CAAC,iCAAe,WAAU,aAAY,mBAAiB,QAAW,cAAY,UAAU,wBAAwB,iBAC7G,kBACC,6CAAC,SAAI,WAAU,mCACZ;AAAA,mBAAW,QAAQ,SAAS,KAC3B,4CAAC,SAAI,MAAK,SAAQ,cAAW,WAAU,WAAU,4CAC9C,kBAAQ,IAAI,CAAC,WACZ;AAAA,UAAC;AAAA;AAAA,YAEC,MAAK;AAAA,YACL,SAAS,MAAM,YAAY,MAAM;AAAA,YACjC,WAAU;AAAA,YAET,iBAAO;AAAA;AAAA,UALH,OAAO;AAAA,QAMd,CACD,GACH;AAAA,QAED,UACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,UAAU,CAAC,SAAS;AAClB,uBAAS,IAAI;AAEb,kBAAI,KAAK,GAAI,eAAc;AAAA,YAC7B;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAgB;AAAA;AAAA,QAClB,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,UAAU,CAAC,SAAS,UAAU,IAAI;AAAA,YAClC,aAAa,MAAM,cAAc;AAAA,YACjC;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,gBAAgB;AAAA;AAAA,QAClB;AAAA,SAEJ,GAEJ;AAAA,OACF;AAAA,IAEC,SAAS,UAAa,4CAAC,WAAM,MAAK,UAAS,MAAY,OAAO,aAAa;AAAA,KAC9E;AAEJ,CAAC;AACD,WAAW,cAAc;","names":["_a"]}

package/dist/index.mjs

@@ -0,0 +1,191 @@
+"use client"
+
+// src/date-picker.tsx
+import { forwardRef, useId, useMemo, useRef, useState } from "react";
+import { cn } from "@glob-ui/utils";
+import { useControllableState } from "@glob-ui/hooks";
+import { Calendar, parseISODate, useResolvedLocale } from "@glob-ui/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "@glob-ui/popover";
+import { composeRefs } from "@glob-ui/slot";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sizeClasses = { sm: "h-8 text-xs", md: "h-10 text-sm", lg: "h-12 text-base" };
+var variantClasses = {
+  default: "border-glob-border bg-glob-surface",
+  ghost: "border-transparent bg-transparent hover:bg-glob-surface-hover",
+  outline: "border-glob-border bg-transparent hover:bg-glob-surface-hover"
+};
+function formatValue(value, isRange, locale) {
+  const format = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+  if (!isRange) return typeof value === "string" ? format.format(parseISODate(value)) : null;
+  const range = value;
+  if (!(range == null ? void 0 : range.from)) return null;
+  const from = format.format(parseISODate(range.from));
+  if (!range.to) return `${from} \u2013 \u2026`;
+  const to = parseISODate(range.to);
+  const fromDate = parseISODate(range.from);
+  const withRange = format;
+  return typeof withRange.formatRange === "function" ? withRange.formatRange(fromDate, to) : `${from} \u2013 ${format.format(to)}`;
+}
+var DatePicker = forwardRef((props, ref) => {
+  var _a;
+  const {
+    mode = "single",
+    locale: localeProp,
+    weekStartsOn,
+    min,
+    max,
+    isDateDisabled,
+    numberOfMonths,
+    presets,
+    placeholder,
+    disabled = false,
+    clearable = true,
+    size = "md",
+    variant = "default",
+    className,
+    id,
+    name,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    value,
+    defaultValue,
+    onChange,
+    allowDeselect = false
+  } = props;
+  const isRange = mode === "range";
+  const locale = useResolvedLocale(localeProp);
+  const baseId = useId();
+  const triggerId = id != null ? id : `${baseId}-trigger`;
+  const valueId = `${baseId}-value`;
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef(null);
+  const mergedRef = useMemo(() => composeRefs(ref, triggerRef), [ref]);
+  const [single, setSingle] = useControllableState(
+    isRange ? void 0 : value,
+    defaultValue != null ? defaultValue : null,
+    isRange ? void 0 : onChange
+  );
+  const [range, setRange] = useControllableState(
+    isRange ? value : void 0,
+    defaultValue != null ? defaultValue : { from: null, to: null },
+    isRange ? onChange : void 0
+  );
+  const current = isRange ? range : single;
+  const text = formatValue(current, isRange, locale);
+  const hasValue = isRange ? range.from !== null : single !== null;
+  const months = numberOfMonths != null ? numberOfMonths : isRange ? 2 : 1;
+  function closeAndFocus() {
+    var _a2;
+    setOpen(false);
+    (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
+  }
+  function applyPreset(preset) {
+    if (isRange) {
+      setRange(typeof preset.value === "string" ? { from: preset.value, to: preset.value } : preset.value);
+    } else {
+      setSingle(typeof preset.value === "string" ? preset.value : preset.value.from);
+    }
+    closeAndFocus();
+  }
+  function clear() {
+    var _a2;
+    if (isRange) setRange({ from: null, to: null });
+    else setSingle(null);
+    (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
+  }
+  const hiddenValue = isRange ? range.from && range.to ? `${range.from}/${range.to}` : "" : single != null ? single : "";
+  return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, placement: "bottom-start", offset: 6, children: [
+      /* @__PURE__ */ jsxs(
+        PopoverTrigger,
+        {
+          ref: mergedRef,
+          id: triggerId,
+          type: "button",
+          disabled,
+          "data-invalid": ariaInvalid === true || ariaInvalid === "true" ? "true" : void 0,
+          "aria-describedby": ariaDescribedBy,
+          "aria-labelledby": [ariaLabelledBy, valueId].filter(Boolean).join(" "),
+          "aria-label": ariaLabel,
+          className: cn(
+            "flex w-full cursor-pointer items-center justify-between gap-2 rounded-glob-md border px-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50 data-[invalid=true]:border-glob-danger",
+            sizeClasses[size],
+            variantClasses[variant],
+            // Room for the clear button, which sits beside the trigger (never inside it).
+            hasValue && clearable && "pr-16",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx("span", { id: valueId, className: cn("truncate", text === null && "text-glob-text-secondary"), children: (_a = text != null ? text : placeholder) != null ? _a : isRange ? "Pick a date range" : "Pick a date" }),
+            /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "h-4 w-4 shrink-0 text-glob-text-secondary", children: [
+              /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+              /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+            ] })
+          ]
+        }
+      ),
+      clearable && hasValue && !disabled && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear date",
+          onClick: clear,
+          className: "absolute right-9 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-glob-sm text-glob-text-secondary hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring",
+          children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-fit p-3", "aria-labelledby": void 0, "aria-label": isRange ? "Choose a date range" : "Choose a date", children: open && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row", children: [
+        presets && presets.length > 0 && /* @__PURE__ */ jsx("div", { role: "group", "aria-label": "Presets", className: "flex flex-wrap gap-1 sm:w-36 sm:flex-col", children: presets.map((preset) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => applyPreset(preset),
+            className: "rounded-glob-sm px-2 py-1.5 text-left text-sm text-glob-text transition-colors hover:bg-glob-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring",
+            children: preset.label
+          },
+          preset.label
+        )) }),
+        isRange ? /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "range",
+            value: range,
+            onChange: (next) => {
+              setRange(next);
+              if (next.to) closeAndFocus();
+            },
+            locale: localeProp,
+            weekStartsOn,
+            min,
+            max,
+            isDateDisabled,
+            numberOfMonths: months
+          }
+        ) : /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            value: single,
+            onChange: (next) => setSingle(next),
+            onSelectDay: () => closeAndFocus(),
+            allowDeselect,
+            locale: localeProp,
+            weekStartsOn,
+            min,
+            max,
+            isDateDisabled,
+            numberOfMonths: months
+          }
+        )
+      ] }) })
+    ] }),
+    name !== void 0 && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: hiddenValue })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+export {
+  DatePicker
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/date-picker.tsx"],"sourcesContent":["\"use client\"\n\nimport { forwardRef, useId, useMemo, useRef, useState } from \"react\"\nimport { cn } from \"@glob-ui/utils\"\nimport { useControllableState } from \"@glob-ui/hooks\"\nimport { Calendar, parseISODate, useResolvedLocale, type DateRange } from \"@glob-ui/calendar\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@glob-ui/popover\"\nimport { composeRefs } from \"@glob-ui/slot\"\n\nexport interface DatePickerPreset {\n  label: string\n  /** A single day (\"YYYY-MM-DD\") for single mode, or a range for range mode. */\n  value: string | DateRange\n}\n\ninterface DatePickerBaseProps {\n  locale?: string\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n  min?: string\n  max?: string\n  isDateDisabled?: (iso: string) => boolean\n  /** Months shown side by side (stacked on small screens). Default 1, or 2 in range mode. */\n  numberOfMonths?: 1 | 2\n  /** Buttons next to the calendar (above it on small screens). Selecting one closes the picker. */\n  presets?: DatePickerPreset[]\n  placeholder?: string\n  disabled?: boolean\n  /** Shows an X that clears the value. Default true. */\n  clearable?: boolean\n  size?: \"sm\" | \"md\" | \"lg\"\n  variant?: \"default\" | \"ghost\" | \"outline\"\n  className?: string\n  id?: string\n  name?: string\n  \"aria-invalid\"?: boolean | \"true\" | \"false\"\n  \"aria-describedby\"?: string\n  \"aria-labelledby\"?: string\n  \"aria-label\"?: string\n}\n\nexport interface DatePickerSingleProps extends DatePickerBaseProps {\n  mode?: \"single\"\n  /** \"YYYY-MM-DD\", or null for none. */\n  value?: string | null\n  defaultValue?: string | null\n  onChange?: (iso: string | null) => void\n  allowDeselect?: boolean\n}\n\nexport interface DatePickerRangeProps extends DatePickerBaseProps {\n  mode: \"range\"\n  value?: DateRange\n  defaultValue?: DateRange\n  onChange?: (range: DateRange) => void\n}\n\nexport type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps\n\nconst sizeClasses = { sm: \"h-8 text-xs\", md: \"h-10 text-sm\", lg: \"h-12 text-base\" }\nconst variantClasses = {\n  default: \"border-glob-border bg-glob-surface\",\n  ghost: \"border-transparent bg-transparent hover:bg-glob-surface-hover\",\n  outline: \"border-glob-border bg-transparent hover:bg-glob-surface-hover\",\n}\n\n/** The text shown in the trigger: \"Nov 9, 2026\", or \"Nov 3 – Nov 9, 2026\" for a range. */\nfunction formatValue(value: string | DateRange | null, isRange: boolean, locale: string): string | null {\n  const format = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" })\n  if (!isRange) return typeof value === \"string\" ? format.format(parseISODate(value)) : null\n  const range = value as DateRange | null\n  if (!range?.from) return null\n  const from = format.format(parseISODate(range.from))\n  if (!range.to) return `${from} – …`\n  const to = parseISODate(range.to)\n  const fromDate = parseISODate(range.from)\n  // formatRange collapses shared parts (\"Nov 3 – 9, 2026\"); fall back to two dates where it is missing.\n  const withRange = format as Intl.DateTimeFormat & { formatRange?: (a: Date, b: Date) => string }\n  return typeof withRange.formatRange === \"function\" ? withRange.formatRange(fromDate, to) : `${from} – ${format.format(to)}`\n}\n\n/** A date field. The value is an ISO date (\"YYYY-MM-DD\") or a range of them, and the calendar opens in a popover. */\nconst DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>((props, ref) => {\n  const {\n    mode = \"single\",\n    locale: localeProp,\n    weekStartsOn,\n    min,\n    max,\n    isDateDisabled,\n    numberOfMonths,\n    presets,\n    placeholder,\n    disabled = false,\n    clearable = true,\n    size = \"md\",\n    variant = \"default\",\n    className,\n    id,\n    name,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-label\": ariaLabel,\n    value,\n    defaultValue,\n    onChange,\n    allowDeselect = false,\n  } = props as DatePickerProps & { allowDeselect?: boolean }\n  const isRange = mode === \"range\"\n  // Same HTML on the server and during hydration; the browser locale takes over after (see useResolvedLocale).\n  const locale = useResolvedLocale(localeProp)\n  const baseId = useId()\n  const triggerId = id ?? `${baseId}-trigger`\n  const valueId = `${baseId}-value`\n  const [open, setOpen] = useState(false)\n  const triggerRef = useRef<HTMLButtonElement | null>(null)\n  const mergedRef = useMemo(() => composeRefs<HTMLButtonElement>(ref, triggerRef), [ref])\n\n  const [single, setSingle] = useControllableState<string | null>(\n    isRange ? undefined : (value as string | null | undefined),\n    (defaultValue as string | null | undefined) ?? null,\n    isRange ? undefined : (onChange as ((next: string | null) => void) | undefined)\n  )\n  const [range, setRange] = useControllableState<DateRange>(\n    isRange ? (value as DateRange | undefined) : undefined,\n    (defaultValue as DateRange | undefined) ?? { from: null, to: null },\n    isRange ? (onChange as ((next: DateRange) => void) | undefined) : undefined\n  )\n\n  const current: string | DateRange | null = isRange ? range : single\n  const text = formatValue(current, isRange, locale)\n  const hasValue = isRange ? range.from !== null : single !== null\n  const months = numberOfMonths ?? (isRange ? 2 : 1)\n\n  /** Closes the calendar and gives focus back to the trigger. */\n  function closeAndFocus() {\n    setOpen(false)\n    triggerRef.current?.focus()\n  }\n\n  function applyPreset(preset: DatePickerPreset) {\n    if (isRange) {\n      setRange(typeof preset.value === \"string\" ? { from: preset.value, to: preset.value } : preset.value)\n    } else {\n      setSingle(typeof preset.value === \"string\" ? preset.value : preset.value.from)\n    }\n    closeAndFocus()\n  }\n\n  function clear() {\n    if (isRange) setRange({ from: null, to: null })\n    else setSingle(null)\n    triggerRef.current?.focus()\n  }\n\n  const hiddenValue = isRange ? (range.from && range.to ? `${range.from}/${range.to}` : \"\") : (single ?? \"\")\n\n  return (\n    <div className=\"relative w-full\">\n      {/* One Popover for the trigger and the content: they share its context. */}\n      <Popover open={open} onOpenChange={setOpen} placement=\"bottom-start\" offset={6}>\n        {/* PopoverTrigger renders the button and forwards these props (no asChild: the registry transform rewrites it). */}\n        <PopoverTrigger\n          ref={mergedRef}\n            id={triggerId}\n            type=\"button\"\n            disabled={disabled}\n            data-invalid={ariaInvalid === true || ariaInvalid === \"true\" ? \"true\" : undefined}\n            aria-describedby={ariaDescribedBy}\n            // The name includes the shown value, so it contains the visible text (WCAG 2.5.3).\n            aria-labelledby={[ariaLabelledBy, valueId].filter(Boolean).join(\" \")}\n            aria-label={ariaLabel}\n            className={cn(\n              \"flex w-full cursor-pointer items-center justify-between gap-2 rounded-glob-md border px-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50 data-[invalid=true]:border-glob-danger\",\n              sizeClasses[size],\n              variantClasses[variant],\n              // Room for the clear button, which sits beside the trigger (never inside it).\n              hasValue && clearable && \"pr-16\",\n              className\n            )}\n          >\n            <span id={valueId} className={cn(\"truncate\", text === null && \"text-glob-text-secondary\")}>\n              {text ?? placeholder ?? (isRange ? \"Pick a date range\" : \"Pick a date\")}\n            </span>\n            <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"h-4 w-4 shrink-0 text-glob-text-secondary\">\n              <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" />\n              <path d=\"M16 2v4M8 2v4M3 10h18\" />\n            </svg>\n        </PopoverTrigger>\n\n      {clearable && hasValue && !disabled && (\n        <button\n          type=\"button\"\n          aria-label=\"Clear date\"\n          onClick={clear}\n          className=\"absolute right-9 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-glob-sm text-glob-text-secondary hover:bg-glob-surface-hover hover:text-glob-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring\"\n        >\n          <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" className=\"h-3.5 w-3.5\">\n            <path d=\"M18 6L6 18M6 6l12 12\" />\n          </svg>\n        </button>\n      )}\n\n        {/* Named explicitly: the Popover's default name points at its own trigger id, which Field may replace. */}\n        <PopoverContent className=\"w-fit p-3\" aria-labelledby={undefined} aria-label={isRange ? \"Choose a date range\" : \"Choose a date\"}>\n          {open && (\n            <div className=\"flex flex-col gap-3 sm:flex-row\">\n              {presets && presets.length > 0 && (\n                <div role=\"group\" aria-label=\"Presets\" className=\"flex flex-wrap gap-1 sm:w-36 sm:flex-col\">\n                  {presets.map((preset) => (\n                    <button\n                      key={preset.label}\n                      type=\"button\"\n                      onClick={() => applyPreset(preset)}\n                      className=\"rounded-glob-sm px-2 py-1.5 text-left text-sm text-glob-text transition-colors hover:bg-glob-surface-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring\"\n                    >\n                      {preset.label}\n                    </button>\n                  ))}\n                </div>\n              )}\n              {isRange ? (\n                <Calendar\n                  mode=\"range\"\n                  value={range}\n                  onChange={(next) => {\n                    setRange(next)\n                    // The range is complete once `to` is set.\n                    if (next.to) closeAndFocus()\n                  }}\n                  locale={localeProp}\n                  weekStartsOn={weekStartsOn}\n                  min={min}\n                  max={max}\n                  isDateDisabled={isDateDisabled}\n                  numberOfMonths={months as 1 | 2}\n                />\n              ) : (\n                <Calendar\n                  mode=\"single\"\n                  value={single}\n                  onChange={(next) => setSingle(next)}\n                  onSelectDay={() => closeAndFocus()}\n                  allowDeselect={allowDeselect}\n                  locale={localeProp}\n                  weekStartsOn={weekStartsOn}\n                  min={min}\n                  max={max}\n                  isDateDisabled={isDateDisabled}\n                  numberOfMonths={months as 1 | 2}\n                />\n              )}\n            </div>\n          )}\n        </PopoverContent>\n      </Popover>\n\n      {name !== undefined && <input type=\"hidden\" name={name} value={hiddenValue} />}\n    </div>\n  )\n})\nDatePicker.displayName = \"DatePicker\"\n\nexport { DatePicker }\n"],"mappings":"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","names":["_a"]}

package/package.json

@@ -1,6 +1,71 @@
 {
   "name": "@glob-ui/date-picker",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "dependencies": {
+    "@glob-ui/calendar": "0.2.0",
+    "@glob-ui/hooks": "0.2.0",
+    "@glob-ui/popover": "0.2.0",
+    "@glob-ui/slot": "0.2.0",
+    "@glob-ui/utils": "0.2.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "A date field. The trigger shows the value and opens a calendar in a popover, for one day or a range, with optional presets.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "date-picker"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/date-picker"
+  },
+  "homepage": "https://github.com/kevin-martineze/GlobUI#readme",
+  "bugs": {
+    "url": "https://github.com/kevin-martineze/GlobUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --no-clean"
+  }
 }