@choco-vanille/ui 1.20.3 → 1.21.0

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

@@ -1,129 +1,176 @@
-import { jsxs as F, jsx as a } from "react/jsx-runtime";
-import K from "../calendar/Calendar.js";
-import '../../../ui-kit78.css';import '../../../ui-kit106.css';import '../../../ui-kit89.css';import '../../../ui-kit58.css';import '../../../ui-kit2.css';import '../../../ui-kit96.css';import '../../../ui-kit94.css';import '../../../ui-kit56.css';import '../../../ui-kit45.css';import '../../../ui-kit102.css';import '../../../ui-kit34.css';import '../../../ui-kit.css';/* empty css                                         */
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { memo as R, useId as Y, useMemo as $ } from "react";
+import { DateField as q, DateInput as K, DateSegment as V } from "react-aria-components";
+import X from "../calendar/Calendar.js";
+import '../../../ui-kit82.css';import '../../../ui-kit96.css';import '../../../ui-kit2.css';import '../../../ui-kit108.css';import '../../../ui-kit103.css';import '../../../ui-kit80.css';import '../../../ui-kit47.css';import '../../../ui-kit107.css';import '../../../ui-kit23.css';import '../../../ui-kit.css';/* empty css                                         */
 /* empty css                                                 */
 /* empty css                                                                                */
 /* empty css                                                 */
 /* empty css                                                      */
 /* empty css                                                                                     */
 /* empty css                                                                                   */
-import O from "../text-field/TextField.js";
-import "../text-field/styles/TextField.css.js";
+import m from "../../overlay/popover/Popover.js";
+import "../../overlay/popover/components/content/styles/PopoverContent.css.js";
+import G from "../../actions/icon-button/IconButton.js";
+import "../../actions/icon-button/styles/IconButton.css.js";
+import v from "../../layout/flex/Flex.js";
+import "../../layout/flex/styles/Flex.css.js";
+import J from "../_shared/components/form-label/FormLabel.js";
+import Q from "../_shared/components/helper-text/HelperText.js";
+import "../text-field/components/text-field-start-icon/TextFieldStartIcon.js";
 /* empty css                                             */
-/* empty css                                                               */
-/* empty css                                                                   */
 /* empty css                                                                                          */
+import U from "../text-field/components/text-field-end-action/TextFieldEndAction.js";
 /* empty css                                                                                          */
-import n from "../../overlay/popover/Popover.js";
-import "../../overlay/popover/components/content/styles/PopoverContent.css.js";
-import R from "../../actions/icon-button/IconButton.js";
-import "../../actions/icon-button/styles/IconButton.css.js";
-import { useDatePicker as j } from "./hooks/useDatePicker.hook.js";
-import { DATE_PICKER_STYLES as c } from "./styles/DatePicker.css.js";
-import A from "../../../resources/asset/CalendarIcon.svg.js";
-import { cn as d } from "../../../utils/cn.js";
-import { memo as B, useRef as _, useMemo as z, useCallback as r } from "react";
-const L = B(
+import { TEXT_FIELD_STYLES as W } from "../text-field/styles/TextField.css.js";
+import { fieldSizeToActionSize as Z } from "../text-field/constants/index.js";
+import { useDatePicker as ee } from "./hooks/useDatePicker.hook.js";
+import { DATE_PICKER_STYLES as r } from "./styles/DatePicker.css.js";
+import oe from "../../../resources/asset/CalendarIcon.svg.js";
+import { vars as re } from "../../../theme/contract.css.js";
+import { cn as I } from "../../../utils/cn.js";
+const te = R(
   ({
-    value: u,
-    defaultValue: f,
-    onChange: h,
-    calendarProps: C,
-    id: D,
-    disabled: o,
-    "aria-label": g,
-    "aria-labelledby": b,
-    calendarAriaLabel: y = "Calendar",
-    onKeyDown: l,
-    ...i
+    id: S,
+    value: C,
+    defaultValue: E,
+    onChange: y,
+    calendarProps: T,
+    calendarAriaLabel: x = "Calendar",
+    label: t,
+    error: a,
+    helperText: d,
+    required: s,
+    showRequiredIndicator: F = !0,
+    disabled: i,
+    size: p = "md",
+    fontSize: c = "md",
+    width: f,
+    "aria-label": N,
+    "aria-labelledby": P,
+    "aria-describedby": w
   }) => {
-    const {
-      selectedDate: t,
-      inputValue: I,
-      open: m,
-      inputId: k,
-      handleInputChange: N,
-      handleInputKeyDown: p,
-      handleCalendarSelect: v,
-      setOpen: w
-    } = j({ value: u, defaultValue: f, onChange: h, id: D }), s = _(null), M = z(
-      () => t ?? /* @__PURE__ */ new Date(),
-      [t]
-    ), P = r(
-      (e) => {
-        p(e), l?.(e);
-      },
-      [p, l]
-    ), S = r(
-      (e) => {
-        e.preventDefault();
-      },
-      []
-    ), T = r(
-      (e) => {
-        e.preventDefault();
-      },
-      []
-    ), { className: x, ...E } = C ?? {};
-    return /* @__PURE__ */ F(
-      n,
+    const A = Y(), h = S ?? A, u = t ? `${h}-label` : void 0, g = `${h}-helper`, D = !!a, b = !!(a || d), {
+      selectedDate: n,
+      calendarValue: B,
+      open: L,
+      setOpen: M,
+      handleFieldChange: _,
+      handleCalendarSelect: j
+    } = ee({ value: C, defaultValue: E, onChange: y }), k = $(() => n ?? /* @__PURE__ */ new Date(), [n]), { className: z, ...O } = T ?? {}, H = (o) => o.preventDefault();
+    return /* @__PURE__ */ l(
+      v,
       {
-        open: m,
-        onOpenChange: w,
+        flexDirection: "column",
+        gap: "xs",
+        width: "100%",
+        alignItems: "start",
+        style: f !== void 0 ? { width: f } : void 0,
         children: [
-          /* @__PURE__ */ a(
-            O,
+          t && /* @__PURE__ */ e(
+            J,
+            {
+              id: u,
+              disabled: i,
+              required: s && F,
+              fontSize: c,
+              children: t
+            }
+          ),
+          /* @__PURE__ */ l(
+            m,
             {
-              ...i,
-              ref: s,
-              id: k,
-              type: "date",
-              disabled: o,
-              value: I,
-              onChange: N,
-              onKeyDown: P,
-              onClick: S,
-              className: d(c.input, i.className),
-              "aria-label": g,
-              "aria-labelledby": b,
-              "aria-haspopup": "dialog",
-              endAction: /* @__PURE__ */ a(n.Trigger, { children: /* @__PURE__ */ a(
-                R,
-                {
-                  icon: A,
-                  "aria-label": "Open calendar",
-                  variant: "ghost",
-                  color: "primary",
-                  size: "sm",
-                  type: "button",
-                  disabled: o,
-                  onMouseDown: T
-                }
-              ) })
+              open: L,
+              onOpenChange: M,
+              children: [
+                /* @__PURE__ */ l(
+                  v,
+                  {
+                    position: "relative",
+                    width: "100%",
+                    gap: "none",
+                    children: [
+                      /* @__PURE__ */ e(
+                        q,
+                        {
+                          className: r.root,
+                          value: B,
+                          onChange: _,
+                          isDisabled: i,
+                          isRequired: s,
+                          isInvalid: D,
+                          "aria-label": N,
+                          "aria-labelledby": P ?? u,
+                          "aria-describedby": [w, b ? g : void 0].filter(Boolean).join(" ") || void 0,
+                          children: /* @__PURE__ */ e(
+                            K,
+                            {
+                              className: ({ isInvalid: o }) => I(
+                                W.recipe({
+                                  size: p,
+                                  hasError: o,
+                                  hasStartIcon: !1,
+                                  hasEndAction: !0
+                                }),
+                                r.input
+                              ),
+                              style: { fontSize: re.fontSize[c] },
+                              children: (o) => /* @__PURE__ */ e(
+                                V,
+                                {
+                                  segment: o,
+                                  className: r.segment
+                                }
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ e(U, { children: /* @__PURE__ */ e(m.Trigger, { children: /* @__PURE__ */ e(
+                        G,
+                        {
+                          icon: oe,
+                          "aria-label": "Open calendar",
+                          variant: "ghost",
+                          color: "primary",
+                          size: Z[p],
+                          type: "button",
+                          disabled: i,
+                          onMouseDown: H
+                        }
+                      ) }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  m.Content,
+                  {
+                    side: "bottom",
+                    align: "end",
+                    padding: "none",
+                    "aria-label": x,
+                    children: /* @__PURE__ */ e(
+                      X,
+                      {
+                        mode: "single",
+                        selected: n,
+                        onSelect: j,
+                        defaultMonth: k,
+                        className: I(r.calendar, z),
+                        ...O
+                      }
+                    )
+                  }
+                )
+              ]
             }
           ),
-          /* @__PURE__ */ a(
-            n.Content,
+          b && /* @__PURE__ */ e(
+            Q,
             {
-              side: "bottom",
-              align: "end",
-              padding: "none",
-              "aria-label": y,
-              initialFocus: !1,
-              finalFocus: s,
-              children: /* @__PURE__ */ a(
-                K,
-                {
-                  mode: "single",
-                  selected: t,
-                  onSelect: v,
-                  disabled: o,
-                  className: d(c.calendar, x),
-                  ...E,
-                  defaultMonth: M,
-                  autoFocus: m
-                }
-              )
+              id: g,
+              hasError: D,
+              children: a ?? d
             }
           )
         ]
@@ -131,8 +178,8 @@ const L = B(
     );
   }
 );
-L.displayName = "DatePicker";
+te.displayName = "DatePicker";
 export {
-  L as default
+  te as default
 };
 //# sourceMappingURL=DatePicker.js.map

package/dist/components/forms/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { Calendar } from '@components/forms/calendar'\nimport { TextField } from '@components/forms/text-field'\nimport { Popover } from '@components/overlay/popover'\nimport { IconButton } from '@components/actions/icon-button'\nimport { useDatePicker } from '@components/forms/date-picker/hooks/useDatePicker.hook.ts'\nimport { DATE_PICKER_STYLES } from '@components/forms/date-picker/styles/DatePicker.css.ts'\nimport CalendarIcon from '@resources/asset/CalendarIcon.svg?react'\nimport { cn } from '@utils/cn.ts'\nimport type { DatePickerProps } from '@components/forms/date-picker/types/DatePicker.props.ts'\nimport { memo, useCallback, useMemo, useRef } from 'react'\n\n/**\n * A date picker that combines a native `type=\"date\"` text field with a\n * calendar popover.\n *\n * - Typing a valid `YYYY-MM-DD` date updates the calendar and calls `onChange`.\n * - Selecting a day in the calendar updates the input and closes the popover.\n * - Invalid or incomplete typed values are kept in the input but do not update\n *   the selected date until they become valid.\n * - Opening the popover focuses the selected day (or today), and closing it\n *   returns focus to the input.\n *\n * @example\n * ```tsx\n * const [date, setDate] = useState<Date | undefined>()\n * <DatePicker label=\"Pick a date\" value={date} onChange={setDate} />\n * ```\n */\nconst DatePicker = memo(\n    ({\n        value,\n        defaultValue,\n        onChange,\n        calendarProps,\n        id,\n        disabled,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        calendarAriaLabel = 'Calendar',\n        onKeyDown,\n        ...textFieldProps\n    }: DatePickerProps) => {\n        const {\n            selectedDate,\n            inputValue,\n            open,\n            inputId,\n            handleInputChange,\n            handleInputKeyDown,\n            handleCalendarSelect,\n            setOpen,\n        } = useDatePicker({ value, defaultValue, onChange, id })\n\n        const inputRef = useRef<HTMLInputElement>(null)\n        const calendarDefaultMonth = useMemo(\n            () => selectedDate ?? new Date(),\n            [selectedDate],\n        )\n\n        const handleKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLInputElement>) => {\n                handleInputKeyDown(event)\n                onKeyDown?.(event)\n            },\n            [handleInputKeyDown, onKeyDown],\n        )\n\n        const handleInputClick = useCallback(\n            (event: React.MouseEvent<HTMLInputElement>) => {\n                // Stops mobile browsers from opening their native date picker.\n                event.preventDefault()\n            },\n            [],\n        )\n\n        const handleCalendarButtonMouseDown = useCallback(\n            (event: React.MouseEvent<HTMLButtonElement>) => {\n                event.preventDefault()\n            },\n            [],\n        )\n\n        const { className: calendarClassName, ...restCalendarProps } =\n            calendarProps ?? {}\n\n        return (\n            <Popover\n                open={open}\n                onOpenChange={setOpen}\n            >\n                <TextField\n                    {...textFieldProps}\n                    ref={inputRef}\n                    id={inputId}\n                    type={'date'}\n                    disabled={disabled}\n                    value={inputValue}\n                    onChange={handleInputChange}\n                    onKeyDown={handleKeyDown}\n                    onClick={handleInputClick}\n                    className={cn(DATE_PICKER_STYLES.input, textFieldProps.className)}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-haspopup={'dialog'}\n                    endAction={\n                        <Popover.Trigger>\n                            <IconButton\n                                icon={CalendarIcon}\n                                aria-label={'Open calendar'}\n                                variant={'ghost'}\n                                color={'primary'}\n                                size={'sm'}\n                                type={'button'}\n                                disabled={disabled}\n                                onMouseDown={handleCalendarButtonMouseDown}\n                            />\n                        </Popover.Trigger>\n                    }\n                />\n\n                <Popover.Content\n                    side={'bottom'}\n                    align={'end'}\n                    padding={'none'}\n                    aria-label={calendarAriaLabel}\n                    initialFocus={false}\n                    finalFocus={inputRef}\n                >\n                    <Calendar\n                        mode={'single'}\n                        selected={selectedDate}\n                        onSelect={handleCalendarSelect}\n                        disabled={disabled}\n                        className={cn(DATE_PICKER_STYLES.calendar, calendarClassName)}\n                        {...restCalendarProps}\n                        defaultMonth={calendarDefaultMonth}\n                        autoFocus={open}\n                    />\n                </Popover.Content>\n            </Popover>\n        )\n    },\n)\n\nDatePicker.displayName = 'DatePicker'\n\nexport default DatePicker\n"],"names":["DatePicker","memo","value","defaultValue","onChange","calendarProps","id","disabled","ariaLabel","ariaLabelledBy","calendarAriaLabel","onKeyDown","textFieldProps","selectedDate","inputValue","open","inputId","handleInputChange","handleInputKeyDown","handleCalendarSelect","setOpen","useDatePicker","inputRef","useRef","calendarDefaultMonth","useMemo","handleKeyDown","useCallback","event","handleInputClick","handleCalendarButtonMouseDown","calendarClassName","restCalendarProps","jsxs","Popover","jsx","TextField","cn","DATE_PICKER_STYLES","IconButton","CalendarIcon","Calendar"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/forms/date-picker/DatePicker.tsx"],"sourcesContent":["import { memo, useId, useMemo, type MouseEvent } from 'react'\r\nimport { DateField, DateInput, DateSegment } from 'react-aria-components'\r\n\r\nimport { Calendar } from '@components/forms/calendar'\r\nimport { Popover } from '@components/overlay/popover'\r\nimport { IconButton } from '@components/actions/icon-button'\r\nimport { Flex } from '@components/layout/flex'\r\nimport FormLabel from '@components/forms/_shared/components/form-label/FormLabel.tsx'\r\nimport HelperText from '@components/forms/_shared/components/helper-text/HelperText.tsx'\r\nimport { TextFieldEndAction } from '@components/forms/text-field/components/index.ts'\r\nimport { TEXT_FIELD_STYLES } from '@components/forms/text-field/styles/TextField.css.ts'\r\nimport { fieldSizeToActionSize } from '@components/forms/text-field/constants'\r\nimport { useDatePicker } from '@components/forms/date-picker/hooks/useDatePicker.hook.ts'\r\nimport { DATE_PICKER_STYLES } from '@components/forms/date-picker/styles/DatePicker.css.ts'\r\nimport type { DatePickerProps } from '@components/forms/date-picker/types/DatePicker.props.ts'\r\nimport CalendarIcon from '@resources/asset/CalendarIcon.svg?react'\r\nimport { vars } from '@theme/contract.css.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * A date field with segmented day, month and year inputs and a calendar popover.\r\n *\r\n * Built on React Aria's `DateField`, which provides segment-by-segment typing,\r\n * arrow-key stepping, locale-aware ordering and screen-reader semantics. The\r\n * look comes from the design system's TextField styles.\r\n *\r\n * - Typing a complete, valid date updates the calendar and calls `onChange`.\r\n * - Picking a day in the calendar updates the segments and closes the popover.\r\n *\r\n * @example\r\n * ```tsx\r\n * const [date, setDate] = useState<Date | undefined>()\r\n * <DatePicker label=\"Start date\" value={date} onChange={setDate} />\r\n * ```\r\n */\r\nconst DatePicker = memo(\r\n    ({\r\n        id,\r\n        value,\r\n        defaultValue,\r\n        onChange,\r\n        calendarProps,\r\n        calendarAriaLabel = 'Calendar',\r\n        label,\r\n        error,\r\n        helperText,\r\n        required,\r\n        showRequiredIndicator = true,\r\n        disabled,\r\n        size = 'md',\r\n        fontSize = 'md',\r\n        width,\r\n        'aria-label': ariaLabel,\r\n        'aria-labelledby': ariaLabelledBy,\r\n        'aria-describedby': ariaDescribedBy,\r\n    }: DatePickerProps) => {\r\n        const generatedId = useId()\r\n        const inputId = id ?? generatedId\r\n        const labelId = label ? `${inputId}-label` : undefined\r\n        const helperId = `${inputId}-helper`\r\n        const hasError = Boolean(error)\r\n        const showHelper = Boolean(error || helperText)\r\n\r\n        const {\r\n            selectedDate,\r\n            calendarValue,\r\n            open,\r\n            setOpen,\r\n            handleFieldChange,\r\n            handleCalendarSelect,\r\n        } = useDatePicker({ value, defaultValue, onChange })\r\n\r\n        const calendarDefaultMonth = useMemo(() => selectedDate ?? new Date(), [selectedDate])\r\n\r\n        const { className: calendarClassName, ...restCalendarProps } = calendarProps ?? {}\r\n\r\n        // Keep focus in the date segments when the calendar button is pressed.\r\n        const preventFocusSteal = (event: MouseEvent<HTMLButtonElement>) => event.preventDefault()\r\n\r\n        return (\r\n            <Flex\r\n                flexDirection={'column'}\r\n                gap={'xs'}\r\n                width={'100%'}\r\n                alignItems={'start'}\r\n                style={width !== undefined ? { width } : undefined}\r\n            >\r\n                {label && (\r\n                    <FormLabel\r\n                        id={labelId}\r\n                        disabled={disabled}\r\n                        required={required && showRequiredIndicator}\r\n                        fontSize={fontSize}\r\n                    >\r\n                        {label}\r\n                    </FormLabel>\r\n                )}\r\n\r\n                <Popover\r\n                    open={open}\r\n                    onOpenChange={setOpen}\r\n                >\r\n                    <Flex\r\n                        position={'relative'}\r\n                        width={'100%'}\r\n                        gap={'none'}\r\n                    >\r\n                        <DateField\r\n                            className={DATE_PICKER_STYLES.root}\r\n                            value={calendarValue}\r\n                            onChange={handleFieldChange}\r\n                            isDisabled={disabled}\r\n                            isRequired={required}\r\n                            isInvalid={hasError}\r\n                            aria-label={ariaLabel}\r\n                            aria-labelledby={ariaLabelledBy ?? labelId}\r\n                            aria-describedby={\r\n                                [ariaDescribedBy, showHelper ? helperId : undefined]\r\n                                    .filter(Boolean)\r\n                                    .join(' ') || undefined\r\n                            }\r\n                        >\r\n                            <DateInput\r\n                                className={({ isInvalid }) =>\r\n                                    cn(\r\n                                        TEXT_FIELD_STYLES.recipe({\r\n                                            size,\r\n                                            hasError: isInvalid,\r\n                                            hasStartIcon: false,\r\n                                            hasEndAction: true,\r\n                                        }),\r\n                                        DATE_PICKER_STYLES.input,\r\n                                    )\r\n                                }\r\n                                style={{ fontSize: vars.fontSize[fontSize] }}\r\n                            >\r\n                                {(segment) => (\r\n                                    <DateSegment\r\n                                        segment={segment}\r\n                                        className={DATE_PICKER_STYLES.segment}\r\n                                    />\r\n                                )}\r\n                            </DateInput>\r\n                        </DateField>\r\n\r\n                        <TextFieldEndAction>\r\n                            <Popover.Trigger>\r\n                                <IconButton\r\n                                    icon={CalendarIcon}\r\n                                    aria-label={'Open calendar'}\r\n                                    variant={'ghost'}\r\n                                    color={'primary'}\r\n                                    size={fieldSizeToActionSize[size]}\r\n                                    type={'button'}\r\n                                    disabled={disabled}\r\n                                    onMouseDown={preventFocusSteal}\r\n                                />\r\n                            </Popover.Trigger>\r\n                        </TextFieldEndAction>\r\n                    </Flex>\r\n\r\n                    <Popover.Content\r\n                        side={'bottom'}\r\n                        align={'end'}\r\n                        padding={'none'}\r\n                        aria-label={calendarAriaLabel}\r\n                    >\r\n                        <Calendar\r\n                            mode={'single'}\r\n                            selected={selectedDate}\r\n                            onSelect={handleCalendarSelect}\r\n                            defaultMonth={calendarDefaultMonth}\r\n                            className={cn(DATE_PICKER_STYLES.calendar, calendarClassName)}\r\n                            {...restCalendarProps}\r\n                        />\r\n                    </Popover.Content>\r\n                </Popover>\r\n\r\n                {showHelper && (\r\n                    <HelperText\r\n                        id={helperId}\r\n                        hasError={hasError}\r\n                    >\r\n                        {error ?? helperText}\r\n                    </HelperText>\r\n                )}\r\n            </Flex>\r\n        )\r\n    },\r\n)\r\n\r\nDatePicker.displayName = 'DatePicker'\r\n\r\nexport default DatePicker\r\n"],"names":["DatePicker","memo","id","value","defaultValue","onChange","calendarProps","calendarAriaLabel","label","error","helperText","required","showRequiredIndicator","disabled","size","fontSize","width","ariaLabel","ariaLabelledBy","ariaDescribedBy","generatedId","useId","inputId","labelId","helperId","hasError","showHelper","selectedDate","calendarValue","open","setOpen","handleFieldChange","handleCalendarSelect","useDatePicker","calendarDefaultMonth","useMemo","calendarClassName","restCalendarProps","preventFocusSteal","event","jsxs","Flex","jsx","FormLabel","Popover","DateField","DATE_PICKER_STYLES","DateInput","isInvalid","cn","TEXT_FIELD_STYLES","vars","segment","DateSegment","TextFieldEndAction","IconButton","CalendarIcon","fieldSizeToActionSize","Calendar","HelperText"],"mappings":"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"}

package/dist/components/forms/date-picker/hooks/useDatePicker.hook.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),i=require("../utils/datePicker.utils.cjs"),w=require("../constants/index.cjs"),y=({value:s,defaultValue:d,onChange:D,id:p})=>{const n=s!==void 0,S=t.useId(),g=p??S,[T,f]=t.useState(d),[k,l]=t.useState(i.formatDateToString(d)),[I,u]=t.useState(!1),c=n?s:T;t.useEffect(()=>{n&&(f(s),l(i.formatDateToString(s)))},[n,s]);const a=t.useCallback(e=>{n||(f(e),l(i.formatDateToString(e))),D?.(e)},[n,D]),C=t.useCallback(e=>{const o=e.target.value;if(l(o),o===""){c!==void 0&&a(void 0);return}const r=i.parseStringToDate(o);r&&r.getTime()!==c?.getTime()&&a(r)},[c,a]),b=t.useCallback(e=>{a(e),u(!1)},[a]),m=t.useCallback(e=>{const o=w.KEYS_THAT_OPEN_NATIVE_PICKER.has(e.key),r=e.key==="ArrowDown"&&e.altKey;(o||r)&&(e.preventDefault(),u(!0))},[]);return{selectedDate:c,inputValue:k,open:I,inputId:g,handleInputChange:C,handleInputKeyDown:m,handleCalendarSelect:b,setOpen:u}};exports.useDatePicker=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),d=require("../utils/datePicker.utils.cjs"),f=({value:n,defaultValue:i,onChange:o})=>{const u=n!==void 0,[D,k]=t.useState(i),[C,c]=t.useState(!1),l=u?n:D,a=l?.getTime(),b=t.useMemo(()=>d.toCalendarDate(a===void 0?void 0:new Date(a)),[a]),s=t.useCallback(e=>{k(e),o?.(e)},[o]),m=t.useCallback(e=>{const r=d.toJsDate(e);r?.getTime()!==a&&s(r)},[a,s]),S=t.useCallback(e=>{c(!1),s(e)},[s]);return{selectedDate:l,calendarValue:b,open:C,setOpen:c,handleFieldChange:m,handleCalendarSelect:S}};exports.useDatePicker=f;
 //# sourceMappingURL=useDatePicker.hook.cjs.map

package/dist/components/forms/date-picker/hooks/useDatePicker.hook.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDatePicker.hook.cjs","sources":["../../../../../src/components/forms/date-picker/hooks/useDatePicker.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useState } from 'react'\r\n\r\nimport { formatDateToString, parseStringToDate } from '@components/forms/date-picker/utils/datePicker.utils.ts'\r\nimport type { UseDatePickerOptions, UseDatePickerReturn } from '@components/forms/date-picker/types'\r\nimport { KEYS_THAT_OPEN_NATIVE_PICKER } from '@components/forms/date-picker/constants'\r\n\r\n/**\r\n * Manages state and interactions for the DatePicker component.\r\n *\r\n * Supports both controlled and uncontrolled modes, keeps the native date input\r\n * in sync with the calendar selection, and only commits valid `YYYY-MM-DD`\r\n * values to `onChange`.\r\n */\r\nexport const useDatePicker = ({\r\n    value,\r\n    defaultValue,\r\n    onChange,\r\n    id,\r\n}: UseDatePickerOptions): UseDatePickerReturn => {\r\n    const isControlled = value !== undefined\r\n    const generatedId = useId()\r\n    const inputId = id ?? generatedId\r\n\r\n    const [selectedDate, setSelectedDate] = useState<Date | undefined>(defaultValue)\r\n    const [inputValue, setInputValue] = useState(formatDateToString(defaultValue))\r\n    const [open, setOpen] = useState(false)\r\n\r\n    const resolvedDate = isControlled ? value : selectedDate\r\n\r\n    useEffect(() => {\r\n        if (isControlled) {\r\n            setSelectedDate(value)\r\n            setInputValue(formatDateToString(value))\r\n        }\r\n    }, [isControlled, value])\r\n\r\n    const updateDate = useCallback(\r\n        (date: Date | undefined) => {\r\n            if (!isControlled) {\r\n                setSelectedDate(date)\r\n                setInputValue(formatDateToString(date))\r\n            }\r\n            onChange?.(date)\r\n        },\r\n        [isControlled, onChange],\r\n    )\r\n\r\n    const handleInputChange = useCallback(\r\n        (event: React.ChangeEvent<HTMLInputElement>) => {\r\n            const newValue = event.target.value\r\n            setInputValue(newValue)\r\n\r\n            if (newValue === '') {\r\n                if (resolvedDate !== undefined) {\r\n                    updateDate(undefined)\r\n                }\r\n                return\r\n            }\r\n\r\n            const parsed = parseStringToDate(newValue)\r\n            if (parsed && parsed.getTime() !== resolvedDate?.getTime()) {\r\n                updateDate(parsed)\r\n            }\r\n        },\r\n        [resolvedDate, updateDate],\r\n    )\r\n\r\n    const handleCalendarSelect = useCallback(\r\n        (date: Date | undefined) => {\r\n            updateDate(date)\r\n            setOpen(false)\r\n        },\r\n        [updateDate],\r\n    )\r\n\r\n    const handleInputKeyDown = useCallback(\r\n        (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n            const isSpace = KEYS_THAT_OPEN_NATIVE_PICKER.has(event.key)\r\n            const isAltArrowDown = event.key === 'ArrowDown' && event.altKey\r\n\r\n            if (isSpace || isAltArrowDown) {\r\n                event.preventDefault()\r\n                setOpen(true)\r\n            }\r\n        },\r\n        [],\r\n    )\r\n\r\n    return {\r\n        selectedDate: resolvedDate,\r\n        inputValue,\r\n        open,\r\n        inputId,\r\n        handleInputChange,\r\n        handleInputKeyDown,\r\n        handleCalendarSelect,\r\n        setOpen,\r\n    }\r\n}\r\n"],"names":["useDatePicker","value","defaultValue","onChange","id","isControlled","generatedId","useId","inputId","selectedDate","setSelectedDate","useState","inputValue","setInputValue","formatDateToString","open","setOpen","resolvedDate","useEffect","updateDate","useCallback","date","handleInputChange","event","newValue","parsed","parseStringToDate","handleCalendarSelect","handleInputKeyDown","isSpace","KEYS_THAT_OPEN_NATIVE_PICKER","isAltArrowDown"],"mappings":"wLAaaA,EAAgB,CAAC,CAC1B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,GAAAC,CACJ,IAAiD,CAC7C,MAAMC,EAAeJ,IAAU,OACzBK,EAAcC,EAAAA,MAAA,EACdC,EAAUJ,GAAME,EAEhB,CAACG,EAAcC,CAAe,EAAIC,EAAAA,SAA2BT,CAAY,EACzE,CAACU,EAAYC,CAAa,EAAIF,EAAAA,SAASG,EAAAA,mBAAmBZ,CAAY,CAAC,EACvE,CAACa,EAAMC,CAAO,EAAIL,EAAAA,SAAS,EAAK,EAEhCM,EAAeZ,EAAeJ,EAAQQ,EAE5CS,EAAAA,UAAU,IAAM,CACRb,IACAK,EAAgBT,CAAK,EACrBY,EAAcC,EAAAA,mBAAmBb,CAAK,CAAC,EAE/C,EAAG,CAACI,EAAcJ,CAAK,CAAC,EAExB,MAAMkB,EAAaC,EAAAA,YACdC,GAA2B,CACnBhB,IACDK,EAAgBW,CAAI,EACpBR,EAAcC,EAAAA,mBAAmBO,CAAI,CAAC,GAE1ClB,IAAWkB,CAAI,CACnB,EACA,CAAChB,EAAcF,CAAQ,CAAA,EAGrBmB,EAAoBF,EAAAA,YACrBG,GAA+C,CAC5C,MAAMC,EAAWD,EAAM,OAAO,MAG9B,GAFAV,EAAcW,CAAQ,EAElBA,IAAa,GAAI,CACbP,IAAiB,QACjBE,EAAW,MAAS,EAExB,MACJ,CAEA,MAAMM,EAASC,EAAAA,kBAAkBF,CAAQ,EACrCC,GAAUA,EAAO,QAAA,IAAcR,GAAc,WAC7CE,EAAWM,CAAM,CAEzB,EACA,CAACR,EAAcE,CAAU,CAAA,EAGvBQ,EAAuBP,EAAAA,YACxBC,GAA2B,CACxBF,EAAWE,CAAI,EACfL,EAAQ,EAAK,CACjB,EACA,CAACG,CAAU,CAAA,EAGTS,EAAqBR,EAAAA,YACtBG,GAAiD,CAC9C,MAAMM,EAAUC,EAAAA,6BAA6B,IAAIP,EAAM,GAAG,EACpDQ,EAAiBR,EAAM,MAAQ,aAAeA,EAAM,QAEtDM,GAAWE,KACXR,EAAM,eAAA,EACNP,EAAQ,EAAI,EAEpB,EACA,CAAA,CAAC,EAGL,MAAO,CACH,aAAcC,EACd,WAAAL,EACA,KAAAG,EACA,QAAAP,EACA,kBAAAc,EACA,mBAAAM,EACA,qBAAAD,EACA,QAAAX,CAAA,CAER"}
+{"version":3,"file":"useDatePicker.hook.cjs","sources":["../../../../../src/components/forms/date-picker/hooks/useDatePicker.hook.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\r\nimport type { DateValue } from '@internationalized/date'\r\n\r\nimport { toCalendarDate, toJsDate } from '@components/forms/date-picker/utils/datePicker.utils.ts'\r\nimport type { UseDatePickerOptions, UseDatePickerReturn } from '@components/forms/date-picker/types'\r\n\r\n/**\r\n * Manages the selected date for the DatePicker. Typing is handled by React Aria's\r\n * date field, while the calendar popover writes through the same value.\r\n *\r\n * Supports controlled (`value`) and uncontrolled (`defaultValue`) modes. The\r\n * internal date is always mirrored, so switching back to uncontrolled keeps the\r\n * last known date.\r\n */\r\nexport const useDatePicker = ({\r\n    value,\r\n    defaultValue,\r\n    onChange,\r\n}: UseDatePickerOptions): UseDatePickerReturn => {\r\n    const isControlled = value !== undefined\r\n    const [uncontrolledDate, setUncontrolledDate] = useState<Date | undefined>(defaultValue)\r\n    const [open, setOpen] = useState(false)\r\n\r\n    const selectedDate = isControlled ? value : uncontrolledDate\r\n    const selectedTime = selectedDate?.getTime()\r\n\r\n    const calendarValue = useMemo(\r\n        () => toCalendarDate(selectedTime === undefined ? undefined : new Date(selectedTime)),\r\n        [selectedTime],\r\n    )\r\n\r\n    const updateDate = useCallback(\r\n        (date: Date | undefined) => {\r\n            setUncontrolledDate(date)\r\n            onChange?.(date)\r\n        },\r\n        [onChange],\r\n    )\r\n\r\n    const handleFieldChange = useCallback(\r\n        (next: DateValue | null) => {\r\n            const date = toJsDate(next)\r\n            if (date?.getTime() === selectedTime) {return}\r\n\r\n            updateDate(date)\r\n        },\r\n        [selectedTime, updateDate],\r\n    )\r\n\r\n    const handleCalendarSelect = useCallback(\r\n        (date: Date | undefined) => {\r\n            setOpen(false)\r\n            updateDate(date)\r\n        },\r\n        [updateDate],\r\n    )\r\n\r\n    return {\r\n        selectedDate,\r\n        calendarValue,\r\n        open,\r\n        setOpen,\r\n        handleFieldChange,\r\n        handleCalendarSelect,\r\n    }\r\n}\r\n"],"names":["useDatePicker","value","defaultValue","onChange","isControlled","uncontrolledDate","setUncontrolledDate","useState","open","setOpen","selectedDate","selectedTime","calendarValue","useMemo","toCalendarDate","updateDate","useCallback","date","handleFieldChange","next","toJsDate","handleCalendarSelect"],"mappings":"oJAcaA,EAAgB,CAAC,CAC1B,MAAAC,EACA,aAAAC,EACA,SAAAC,CACJ,IAAiD,CAC7C,MAAMC,EAAeH,IAAU,OACzB,CAACI,EAAkBC,CAAmB,EAAIC,EAAAA,SAA2BL,CAAY,EACjF,CAACM,EAAMC,CAAO,EAAIF,EAAAA,SAAS,EAAK,EAEhCG,EAAeN,EAAeH,EAAQI,EACtCM,EAAeD,GAAc,QAAA,EAE7BE,EAAgBC,EAAAA,QAClB,IAAMC,EAAAA,eAAeH,IAAiB,OAAY,OAAY,IAAI,KAAKA,CAAY,CAAC,EACpF,CAACA,CAAY,CAAA,EAGXI,EAAaC,EAAAA,YACdC,GAA2B,CACxBX,EAAoBW,CAAI,EACxBd,IAAWc,CAAI,CACnB,EACA,CAACd,CAAQ,CAAA,EAGPe,EAAoBF,EAAAA,YACrBG,GAA2B,CACxB,MAAMF,EAAOG,EAAAA,SAASD,CAAI,EACtBF,GAAM,QAAA,IAAcN,GAExBI,EAAWE,CAAI,CACnB,EACA,CAACN,EAAcI,CAAU,CAAA,EAGvBM,EAAuBL,EAAAA,YACxBC,GAA2B,CACxBR,EAAQ,EAAK,EACbM,EAAWE,CAAI,CACnB,EACA,CAACF,CAAU,CAAA,EAGf,MAAO,CACH,aAAAL,EACA,cAAAE,EACA,KAAAJ,EACA,QAAAC,EACA,kBAAAS,EACA,qBAAAG,CAAA,CAER"}

package/dist/components/forms/date-picker/hooks/useDatePicker.hook.d.ts

@@ -1,9 +1,10 @@
 import { UseDatePickerOptions, UseDatePickerReturn } from '../types';
 /**
- * Manages state and interactions for the DatePicker component.
+ * Manages the selected date for the DatePicker. Typing is handled by React Aria's
+ * date field, while the calendar popover writes through the same value.
  *
- * Supports both controlled and uncontrolled modes, keeps the native date input
- * in sync with the calendar selection, and only commits valid `YYYY-MM-DD`
- * values to `onChange`.
+ * Supports controlled (`value`) and uncontrolled (`defaultValue`) modes. The
+ * internal date is always mirrored, so switching back to uncontrolled keeps the
+ * last known date.
  */
-export declare const useDatePicker: ({ value, defaultValue, onChange, id, }: UseDatePickerOptions) => UseDatePickerReturn;
+export declare const useDatePicker: ({ value, defaultValue, onChange, }: UseDatePickerOptions) => UseDatePickerReturn;

package/dist/components/forms/date-picker/hooks/useDatePicker.hook.js

@@ -1,56 +1,40 @@
-import { useId as k, useState as p, useEffect as y, useCallback as c } from "react";
-import { formatDateToString as d, parseStringToDate as C } from "../utils/datePicker.utils.js";
-import { KEYS_THAT_OPEN_NATIVE_PICKER as K } from "../constants/index.js";
-const N = ({
-  value: t,
-  defaultValue: f,
-  onChange: u,
-  id: m
+import { useState as d, useMemo as g, useCallback as n } from "react";
+import { toCalendarDate as h, toJsDate as k } from "../utils/datePicker.utils.js";
+const b = ({
+  value: s,
+  defaultValue: i,
+  onChange: a
 }) => {
-  const o = t !== void 0, I = k(), S = m ?? I, [T, D] = p(f), [g, i] = p(d(f)), [w, l] = p(!1), a = o ? t : T;
-  y(() => {
-    o && (D(t), i(d(t)));
-  }, [o, t]);
-  const s = c(
+  const m = s !== void 0, [u, D] = d(i), [p, c] = d(!1), l = m ? s : u, t = l?.getTime(), f = g(
+    () => h(t === void 0 ? void 0 : new Date(t)),
+    [t]
+  ), o = n(
     (e) => {
-      o || (D(e), i(d(e))), u?.(e);
+      D(e), a?.(e);
     },
-    [o, u]
-  ), A = c(
+    [a]
+  ), C = n(
     (e) => {
-      const n = e.target.value;
-      if (i(n), n === "") {
-        a !== void 0 && s(void 0);
-        return;
-      }
-      const r = C(n);
-      r && r.getTime() !== a?.getTime() && s(r);
+      const r = k(e);
+      r?.getTime() !== t && o(r);
     },
-    [a, s]
-  ), E = c(
+    [t, o]
+  ), T = n(
     (e) => {
-      s(e), l(!1);
+      c(!1), o(e);
     },
-    [s]
-  ), h = c(
-    (e) => {
-      const n = K.has(e.key), r = e.key === "ArrowDown" && e.altKey;
-      (n || r) && (e.preventDefault(), l(!0));
-    },
-    []
+    [o]
   );
   return {
-    selectedDate: a,
-    inputValue: g,
-    open: w,
-    inputId: S,
-    handleInputChange: A,
-    handleInputKeyDown: h,
-    handleCalendarSelect: E,
-    setOpen: l
+    selectedDate: l,
+    calendarValue: f,
+    open: p,
+    setOpen: c,
+    handleFieldChange: C,
+    handleCalendarSelect: T
   };
 };
 export {
-  N as useDatePicker
+  b as useDatePicker
 };
 //# sourceMappingURL=useDatePicker.hook.js.map

package/dist/components/forms/date-picker/hooks/useDatePicker.hook.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDatePicker.hook.js","sources":["../../../../../src/components/forms/date-picker/hooks/useDatePicker.hook.ts"],"sourcesContent":["import { useCallback, useEffect, useId, useState } from 'react'\r\n\r\nimport { formatDateToString, parseStringToDate } from '@components/forms/date-picker/utils/datePicker.utils.ts'\r\nimport type { UseDatePickerOptions, UseDatePickerReturn } from '@components/forms/date-picker/types'\r\nimport { KEYS_THAT_OPEN_NATIVE_PICKER } from '@components/forms/date-picker/constants'\r\n\r\n/**\r\n * Manages state and interactions for the DatePicker component.\r\n *\r\n * Supports both controlled and uncontrolled modes, keeps the native date input\r\n * in sync with the calendar selection, and only commits valid `YYYY-MM-DD`\r\n * values to `onChange`.\r\n */\r\nexport const useDatePicker = ({\r\n    value,\r\n    defaultValue,\r\n    onChange,\r\n    id,\r\n}: UseDatePickerOptions): UseDatePickerReturn => {\r\n    const isControlled = value !== undefined\r\n    const generatedId = useId()\r\n    const inputId = id ?? generatedId\r\n\r\n    const [selectedDate, setSelectedDate] = useState<Date | undefined>(defaultValue)\r\n    const [inputValue, setInputValue] = useState(formatDateToString(defaultValue))\r\n    const [open, setOpen] = useState(false)\r\n\r\n    const resolvedDate = isControlled ? value : selectedDate\r\n\r\n    useEffect(() => {\r\n        if (isControlled) {\r\n            setSelectedDate(value)\r\n            setInputValue(formatDateToString(value))\r\n        }\r\n    }, [isControlled, value])\r\n\r\n    const updateDate = useCallback(\r\n        (date: Date | undefined) => {\r\n            if (!isControlled) {\r\n                setSelectedDate(date)\r\n                setInputValue(formatDateToString(date))\r\n            }\r\n            onChange?.(date)\r\n        },\r\n        [isControlled, onChange],\r\n    )\r\n\r\n    const handleInputChange = useCallback(\r\n        (event: React.ChangeEvent<HTMLInputElement>) => {\r\n            const newValue = event.target.value\r\n            setInputValue(newValue)\r\n\r\n            if (newValue === '') {\r\n                if (resolvedDate !== undefined) {\r\n                    updateDate(undefined)\r\n                }\r\n                return\r\n            }\r\n\r\n            const parsed = parseStringToDate(newValue)\r\n            if (parsed && parsed.getTime() !== resolvedDate?.getTime()) {\r\n                updateDate(parsed)\r\n            }\r\n        },\r\n        [resolvedDate, updateDate],\r\n    )\r\n\r\n    const handleCalendarSelect = useCallback(\r\n        (date: Date | undefined) => {\r\n            updateDate(date)\r\n            setOpen(false)\r\n        },\r\n        [updateDate],\r\n    )\r\n\r\n    const handleInputKeyDown = useCallback(\r\n        (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n            const isSpace = KEYS_THAT_OPEN_NATIVE_PICKER.has(event.key)\r\n            const isAltArrowDown = event.key === 'ArrowDown' && event.altKey\r\n\r\n            if (isSpace || isAltArrowDown) {\r\n                event.preventDefault()\r\n                setOpen(true)\r\n            }\r\n        },\r\n        [],\r\n    )\r\n\r\n    return {\r\n        selectedDate: resolvedDate,\r\n        inputValue,\r\n        open,\r\n        inputId,\r\n        handleInputChange,\r\n        handleInputKeyDown,\r\n        handleCalendarSelect,\r\n        setOpen,\r\n    }\r\n}\r\n"],"names":["useDatePicker","value","defaultValue","onChange","id","isControlled","generatedId","useId","inputId","selectedDate","setSelectedDate","useState","inputValue","setInputValue","formatDateToString","open","setOpen","resolvedDate","useEffect","updateDate","useCallback","date","handleInputChange","event","newValue","parsed","parseStringToDate","handleCalendarSelect","handleInputKeyDown","isSpace","KEYS_THAT_OPEN_NATIVE_PICKER","isAltArrowDown"],"mappings":";;;AAaO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AACJ,MAAiD;AAC7C,QAAMC,IAAeJ,MAAU,QACzBK,IAAcC,EAAA,GACdC,IAAUJ,KAAME,GAEhB,CAACG,GAAcC,CAAe,IAAIC,EAA2BT,CAAY,GACzE,CAACU,GAAYC,CAAa,IAAIF,EAASG,EAAmBZ,CAAY,CAAC,GACvE,CAACa,GAAMC,CAAO,IAAIL,EAAS,EAAK,GAEhCM,IAAeZ,IAAeJ,IAAQQ;AAE5C,EAAAS,EAAU,MAAM;AACZ,IAAIb,MACAK,EAAgBT,CAAK,GACrBY,EAAcC,EAAmBb,CAAK,CAAC;AAAA,EAE/C,GAAG,CAACI,GAAcJ,CAAK,CAAC;AAExB,QAAMkB,IAAaC;AAAA,IACf,CAACC,MAA2B;AACxB,MAAKhB,MACDK,EAAgBW,CAAI,GACpBR,EAAcC,EAAmBO,CAAI,CAAC,IAE1ClB,IAAWkB,CAAI;AAAA,IACnB;AAAA,IACA,CAAChB,GAAcF,CAAQ;AAAA,EAAA,GAGrBmB,IAAoBF;AAAA,IACtB,CAACG,MAA+C;AAC5C,YAAMC,IAAWD,EAAM,OAAO;AAG9B,UAFAV,EAAcW,CAAQ,GAElBA,MAAa,IAAI;AACjB,QAAIP,MAAiB,UACjBE,EAAW,MAAS;AAExB;AAAA,MACJ;AAEA,YAAMM,IAASC,EAAkBF,CAAQ;AACzC,MAAIC,KAAUA,EAAO,QAAA,MAAcR,GAAc,aAC7CE,EAAWM,CAAM;AAAA,IAEzB;AAAA,IACA,CAACR,GAAcE,CAAU;AAAA,EAAA,GAGvBQ,IAAuBP;AAAA,IACzB,CAACC,MAA2B;AACxB,MAAAF,EAAWE,CAAI,GACfL,EAAQ,EAAK;AAAA,IACjB;AAAA,IACA,CAACG,CAAU;AAAA,EAAA,GAGTS,IAAqBR;AAAA,IACvB,CAACG,MAAiD;AAC9C,YAAMM,IAAUC,EAA6B,IAAIP,EAAM,GAAG,GACpDQ,IAAiBR,EAAM,QAAQ,eAAeA,EAAM;AAE1D,OAAIM,KAAWE,OACXR,EAAM,eAAA,GACNP,EAAQ,EAAI;AAAA,IAEpB;AAAA,IACA,CAAA;AAAA,EAAC;AAGL,SAAO;AAAA,IACH,cAAcC;AAAA,IACd,YAAAL;AAAA,IACA,MAAAG;AAAA,IACA,SAAAP;AAAA,IACA,mBAAAc;AAAA,IACA,oBAAAM;AAAA,IACA,sBAAAD;AAAA,IACA,SAAAX;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useDatePicker.hook.js","sources":["../../../../../src/components/forms/date-picker/hooks/useDatePicker.hook.ts"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react'\r\nimport type { DateValue } from '@internationalized/date'\r\n\r\nimport { toCalendarDate, toJsDate } from '@components/forms/date-picker/utils/datePicker.utils.ts'\r\nimport type { UseDatePickerOptions, UseDatePickerReturn } from '@components/forms/date-picker/types'\r\n\r\n/**\r\n * Manages the selected date for the DatePicker. Typing is handled by React Aria's\r\n * date field, while the calendar popover writes through the same value.\r\n *\r\n * Supports controlled (`value`) and uncontrolled (`defaultValue`) modes. The\r\n * internal date is always mirrored, so switching back to uncontrolled keeps the\r\n * last known date.\r\n */\r\nexport const useDatePicker = ({\r\n    value,\r\n    defaultValue,\r\n    onChange,\r\n}: UseDatePickerOptions): UseDatePickerReturn => {\r\n    const isControlled = value !== undefined\r\n    const [uncontrolledDate, setUncontrolledDate] = useState<Date | undefined>(defaultValue)\r\n    const [open, setOpen] = useState(false)\r\n\r\n    const selectedDate = isControlled ? value : uncontrolledDate\r\n    const selectedTime = selectedDate?.getTime()\r\n\r\n    const calendarValue = useMemo(\r\n        () => toCalendarDate(selectedTime === undefined ? undefined : new Date(selectedTime)),\r\n        [selectedTime],\r\n    )\r\n\r\n    const updateDate = useCallback(\r\n        (date: Date | undefined) => {\r\n            setUncontrolledDate(date)\r\n            onChange?.(date)\r\n        },\r\n        [onChange],\r\n    )\r\n\r\n    const handleFieldChange = useCallback(\r\n        (next: DateValue | null) => {\r\n            const date = toJsDate(next)\r\n            if (date?.getTime() === selectedTime) {return}\r\n\r\n            updateDate(date)\r\n        },\r\n        [selectedTime, updateDate],\r\n    )\r\n\r\n    const handleCalendarSelect = useCallback(\r\n        (date: Date | undefined) => {\r\n            setOpen(false)\r\n            updateDate(date)\r\n        },\r\n        [updateDate],\r\n    )\r\n\r\n    return {\r\n        selectedDate,\r\n        calendarValue,\r\n        open,\r\n        setOpen,\r\n        handleFieldChange,\r\n        handleCalendarSelect,\r\n    }\r\n}\r\n"],"names":["useDatePicker","value","defaultValue","onChange","isControlled","uncontrolledDate","setUncontrolledDate","useState","open","setOpen","selectedDate","selectedTime","calendarValue","useMemo","toCalendarDate","updateDate","useCallback","date","handleFieldChange","next","toJsDate","handleCalendarSelect"],"mappings":";;AAcO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACJ,MAAiD;AAC7C,QAAMC,IAAeH,MAAU,QACzB,CAACI,GAAkBC,CAAmB,IAAIC,EAA2BL,CAAY,GACjF,CAACM,GAAMC,CAAO,IAAIF,EAAS,EAAK,GAEhCG,IAAeN,IAAeH,IAAQI,GACtCM,IAAeD,GAAc,QAAA,GAE7BE,IAAgBC;AAAA,IAClB,MAAMC,EAAeH,MAAiB,SAAY,SAAY,IAAI,KAAKA,CAAY,CAAC;AAAA,IACpF,CAACA,CAAY;AAAA,EAAA,GAGXI,IAAaC;AAAA,IACf,CAACC,MAA2B;AACxB,MAAAX,EAAoBW,CAAI,GACxBd,IAAWc,CAAI;AAAA,IACnB;AAAA,IACA,CAACd,CAAQ;AAAA,EAAA,GAGPe,IAAoBF;AAAA,IACtB,CAACG,MAA2B;AACxB,YAAMF,IAAOG,EAASD,CAAI;AAC1B,MAAIF,GAAM,QAAA,MAAcN,KAExBI,EAAWE,CAAI;AAAA,IACnB;AAAA,IACA,CAACN,GAAcI,CAAU;AAAA,EAAA,GAGvBM,IAAuBL;AAAA,IACzB,CAACC,MAA2B;AACxB,MAAAR,EAAQ,EAAK,GACbM,EAAWE,CAAI;AAAA,IACnB;AAAA,IACA,CAACF,CAAU;AAAA,EAAA;AAGf,SAAO;AAAA,IACH,cAAAL;AAAA,IACA,eAAAE;AAAA,IACA,MAAAJ;AAAA,IACA,SAAAC;AAAA,IACA,mBAAAS;AAAA,IACA,sBAAAG;AAAA,EAAA;AAER;"}

package/dist/components/forms/date-picker/styles/DatePicker.css.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit22.css');;/* empty css                                */var e={input:"_6hs4r90",content:"_6hs4r91",calendar:"_6hs4r92"};exports.DATE_PICKER_STYLES=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../../ui-kit44.css');require('../../../../ui-kit.css');;/* empty css                                              */;/* empty css                                */var r={root:"_6hs4r90",input:"_6hs4r91",segment:"_6hs4r92",calendar:"_6hs4r93"};exports.DATE_PICKER_STYLES=r;
 //# sourceMappingURL=DatePicker.css.cjs.map

package/dist/components/forms/date-picker/styles/DatePicker.css.d.ts

@@ -1,12 +1,10 @@
-/**
- * Hides the browser-native calendar picker icon on date inputs so the
- * custom IconButton trigger is the only visible way to open the calendar
- * popover.
- */
 export declare const DATE_PICKER_STYLES: {
+    /** Positions the end action (calendar trigger) over the date field. */
+    root: string;
+    /** The bordered box around the segments. Border and size come from the TextField recipe. */
     input: string;
-    /** Removes the popover content padding so the calendar sits flush. */
-    content: string;
+    /** A single editable date segment (day, month, year) or a literal separator. */
+    segment: string;
     /** Removes the calendar border when rendered inside the date picker popover. */
     calendar: string;
 };

package/dist/components/forms/date-picker/styles/DatePicker.css.js

@@ -1,6 +1,7 @@
-import '../../../../ui-kit22.css';/* empty css                              */
-var t = { input: "_6hs4r90", content: "_6hs4r91", calendar: "_6hs4r92" };
+import '../../../../ui-kit44.css';import '../../../../ui-kit.css';/* empty css                                            */
+/* empty css                              */
+var _ = { root: "_6hs4r90", input: "_6hs4r91", segment: "_6hs4r92", calendar: "_6hs4r93" };
 export {
-  t as DATE_PICKER_STYLES
+  _ as DATE_PICKER_STYLES
 };
 //# sourceMappingURL=DatePicker.css.js.map

package/dist/components/forms/date-picker/styles/DatePicker.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"DatePicker.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/forms/date-picker/types/DatePicker.props.d.ts

@@ -1,6 +1,6 @@
 import { CalendarProps } from '../../calendar';
 import { TextFieldProps } from '../../text-field';
-export type DatePickerProps = Omit<TextFieldProps, 'type' | 'value' | 'defaultValue' | 'onChange'> & {
+export type DatePickerProps = Pick<TextFieldProps, 'id' | 'label' | 'error' | 'helperText' | 'required' | 'showRequiredIndicator' | 'disabled' | 'size' | 'fontSize' | 'width' | 'aria-label' | 'aria-labelledby' | 'aria-describedby'> & {
     /** The currently selected date (controlled). */
     value?: Date;
     /** The default selected date (uncontrolled). */

package/dist/components/forms/date-picker/types/index.d.ts

@@ -1,3 +1,4 @@
+import { CalendarDate, DateValue } from '@internationalized/date';
 export type UseDatePickerOptions = {
     /** The currently selected date (controlled). */
     value?: Date;
@@ -5,24 +6,18 @@ export type UseDatePickerOptions = {
     defaultValue?: Date;
     /** Called when the selected date changes. */
     onChange?: (date: Date | undefined) => void;
-    /** Explicit id for the input; falls back to a generated id. */
-    id?: string;
 };
 export type UseDatePickerReturn = {
     /** Resolved selected date. */
     selectedDate: Date | undefined;
-    /** Current value of the date input. */
-    inputValue: string;
+    /** Selected date as a React Aria calendar value (`null` when empty). */
+    calendarValue: CalendarDate | null;
     /** Whether the calendar popover is open. */
     open: boolean;
-    /** Stable id for the input element. */
-    inputId: string;
-    /** Update the input value while parsing valid dates. */
-    handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    /** Intercept keys that would open the native date picker. */
-    handleInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Open or close the calendar popover. */
+    setOpen: (open: boolean) => void;
+    /** Receives the value committed by the segmented field. */
+    handleFieldChange: (value: DateValue | null) => void;
     /** Select a date from the calendar and close the popover. */
     handleCalendarSelect: (date: Date | undefined) => void;
-    /** Toggle the popover open state. */
-    setOpen: (open: boolean) => void;
 };

package/dist/components/forms/date-picker/utils/datePicker.utils.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=/^\d{4}-\d{2}-\d{2}$/,i=t=>{if(!t||Number.isNaN(t.getTime()))return"";const r=t.getFullYear(),n=String(t.getMonth()+1).padStart(2,"0"),o=String(t.getDate()).padStart(2,"0");return`${r}-${n}-${o}`},g=t=>{if(!t||!a.test(t))return;const[r,n,o]=t.split("-").map(Number),e=new Date(r,n-1,o);if(!Number.isNaN(e.getTime())&&!(e.getFullYear()!==r||e.getMonth()!==n-1||e.getDate()!==o))return e};exports.formatDateToString=i;exports.parseStringToDate=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@internationalized/date"),o=e=>!e||Number.isNaN(e.getTime())?null:new t.CalendarDate(e.getFullYear(),e.getMonth()+1,e.getDate()),r=e=>e?e.toDate(t.getLocalTimeZone()):void 0;exports.toCalendarDate=o;exports.toJsDate=r;
 //# sourceMappingURL=datePicker.utils.cjs.map