@trsys-tech/matrix-library 1.0.2 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/date-picker/DatePicker.d.ts +24 -1
- package/dist/components/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DateRangePicker.d.ts +23 -1
- package/dist/components/date-picker/DateRangePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DesktopDatePicker.d.ts +23 -2
- package/dist/components/date-picker/DesktopDatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DesktopDateRangePicker.d.ts +25 -3
- package/dist/components/date-picker/DesktopDateRangePicker.d.ts.map +1 -1
- package/dist/components/date-picker/DesktopTimePicker.d.ts +17 -0
- package/dist/components/date-picker/DesktopTimePicker.d.ts.map +1 -1
- package/dist/components/date-picker/MobileDatePicker.d.ts +24 -3
- package/dist/components/date-picker/MobileDatePicker.d.ts.map +1 -1
- package/dist/components/date-picker/MobileDateRangePicker.d.ts +27 -4
- package/dist/components/date-picker/MobileDateRangePicker.d.ts.map +1 -1
- package/dist/components/date-picker/MobileTimePicker.d.ts +17 -0
- package/dist/components/date-picker/MobileTimePicker.d.ts.map +1 -1
- package/dist/components/date-picker/TimePicker.d.ts +22 -0
- package/dist/components/date-picker/TimePicker.d.ts.map +1 -1
- package/dist/components/date-picker/TimePickerContent.d.ts +24 -0
- package/dist/components/date-picker/TimePickerContent.d.ts.map +1 -1
- package/dist/components/date-picker/dateValue.d.ts +44 -0
- package/dist/components/date-picker/dateValue.d.ts.map +1 -0
- package/dist/components/form-date-picker/FormDatePicker.d.ts +32 -4
- package/dist/components/form-date-picker/FormDatePicker.d.ts.map +1 -1
- package/dist/components/form-date-range-picker/FormDateRangePicker.d.ts +34 -4
- package/dist/components/form-date-range-picker/FormDateRangePicker.d.ts.map +1 -1
- package/dist/components/form-time-picker/FormTimePicker.d.ts +34 -0
- package/dist/components/form-time-picker/FormTimePicker.d.ts.map +1 -1
- package/dist/datepicker.es.js.map +1 -1
- package/dist/daterangepicker.es.js.map +1 -1
- package/dist/datevalue.es.js +44 -0
- package/dist/datevalue.es.js.map +1 -0
- package/dist/desktopdatepicker.es.js +40 -35
- package/dist/desktopdatepicker.es.js.map +1 -1
- package/dist/desktopdaterangepicker.es.js +50 -45
- package/dist/desktopdaterangepicker.es.js.map +1 -1
- package/dist/desktoptimepicker.es.js.map +1 -1
- package/dist/formdatepicker.es.js.map +1 -1
- package/dist/formdaterangepicker.es.js.map +1 -1
- package/dist/formtimepicker.es.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/mobiledatepicker.es.js +46 -41
- package/dist/mobiledatepicker.es.js.map +1 -1
- package/dist/mobiledaterangepicker.es.js +74 -69
- package/dist/mobiledaterangepicker.es.js.map +1 -1
- package/dist/mobiletimepicker.es.js.map +1 -1
- package/dist/timepicker.es.js.map +1 -1
- package/dist/timepickercontent.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-date-range-picker/FormDateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"FormDateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-date-range-picker/FormDateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE1F,OAAO,EAAmB,KAAK,aAAa,EAAE,KAAK,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AAEhH;;;;;;GAMG;AACH,KAAK,wBAAwB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,gBAAgB,CAAC,YAAY,EAAE,aAAa,GAAG,SAAS,CAAC,IAAI,IAAI,CAC7I,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE;QACV,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1G,gBAAgB,CAAC,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAChH,eAAe,CAAC,EAAE,oBAAoB,CAAC;KACxC,CAAC;CACH,CAAC;AAEJ;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,mBAAmB,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,gBAAgB,CAAC,YAAY,EAAE,aAAa,GAAG,SAAS,CAAC,SAC7H,wBAAwB,CAAC,YAAY,EAAE,KAAK,CAAC,4CAiCrD,CAAC;AACF,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,CAAC"}
|
|
@@ -2,19 +2,53 @@ import { FormItem } from '../form/Form';
|
|
|
2
2
|
import { SlotProps } from '@radix-ui/react-slot';
|
|
3
3
|
import { Control, ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
|
|
4
4
|
import { TimePickerProps } from '../date-picker/TimePicker';
|
|
5
|
+
/**
|
|
6
|
+
* Props for FormTimePicker.
|
|
7
|
+
*
|
|
8
|
+
* The bound field value should be a Time object or undefined.
|
|
9
|
+
* In 12-hour mode, include ampm in the stored value.
|
|
10
|
+
* In 24-hour mode, omit ampm and use hour values from 0-23.
|
|
11
|
+
*/
|
|
5
12
|
type FormTimePickerProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<ControllerProps<TFieldValues, TName>, "render"> & React.ComponentProps<typeof FormItem> & {
|
|
13
|
+
/** Label rendered above the picker. */
|
|
6
14
|
label: string;
|
|
15
|
+
/** React Hook Form control instance. */
|
|
7
16
|
control: Control<TFieldValues>;
|
|
17
|
+
/** Shows the required asterisk next to the label. */
|
|
8
18
|
required?: boolean;
|
|
19
|
+
/** Keeps the field readable while preventing edits. */
|
|
9
20
|
readOnly?: boolean;
|
|
21
|
+
/** Enables 24-hour mode and hides the AM/PM selector when true. */
|
|
10
22
|
is24HourMode?: boolean;
|
|
23
|
+
/** Props forwarded to the form shell and underlying TimePicker. */
|
|
11
24
|
slotProps?: {
|
|
12
25
|
formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;
|
|
13
26
|
formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;
|
|
14
27
|
formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>;
|
|
28
|
+
/** Props forwarded to the underlying TimePicker. */
|
|
15
29
|
timepickerProps?: Partial<TimePickerProps>;
|
|
16
30
|
};
|
|
17
31
|
};
|
|
32
|
+
/**
|
|
33
|
+
* React Hook Form wrapper around TimePicker.
|
|
34
|
+
*
|
|
35
|
+
* Binds a Time object to the shared time picker and renders the label,
|
|
36
|
+
* validation message, and disabled/read-only handling.
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* const form = useForm<{ reminder?: { hour: number; minute: number; ampm?: "AM" | "PM" } }>({
|
|
40
|
+
* defaultValues: { reminder: { hour: 9, minute: 30, ampm: "AM" } },
|
|
41
|
+
* });
|
|
42
|
+
*
|
|
43
|
+
* <FormTimePicker control={form.control} name="reminder" label="Reminder time" />
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* const form = useForm<{ shiftStart?: { hour: number; minute: number } }>({
|
|
47
|
+
* defaultValues: { shiftStart: { hour: 14, minute: 0 } },
|
|
48
|
+
* });
|
|
49
|
+
*
|
|
50
|
+
* <FormTimePicker control={form.control} name="shiftStart" label="Shift start" is24HourMode />
|
|
51
|
+
*/
|
|
18
52
|
declare const FormTimePicker: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormTimePickerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
|
|
19
53
|
export { FormTimePicker, type FormTimePickerProps };
|
|
20
54
|
//# sourceMappingURL=FormTimePicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-time-picker/FormTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAc,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAExE,KAAK,mBAAmB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CACtG,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE;QACV,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1G,gBAAgB,CAAC,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAChH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;KAC5C,CAAC;CACH,CAAC;AAEJ,QAAA,MAAM,cAAc,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,SAAS,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,4CAkC/I,CAAC;AACF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"FormTimePicker.d.ts","sourceRoot":"","sources":["../../../src/components/form-time-picker/FormTimePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA0B,QAAQ,EAA0B,MAAM,cAAc,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACnF,OAAO,EAAc,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAExE;;;;;;GAMG;AACH,KAAK,mBAAmB,CAAC,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,IAAI,IAAI,CACtG,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,QAAQ,CACT,GACC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,GAAG;IACtC,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mEAAmE;IACnE,SAAS,CAAC,EAAE;QACV,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAChG,gBAAgB,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QAC1G,gBAAgB,CAAC,EAAE,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;QAChH,oDAAoD;QACpD,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAC;KAC5C,CAAC;CACH,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,cAAc,GAAI,YAAY,SAAS,WAAW,EAAE,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,SAAS,mBAAmB,CAAC,YAAY,EAAE,KAAK,CAAC,4CAkC/I,CAAC;AACF,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datepicker.es.js","sources":["../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { DesktopDatePicker, DesktopDatePickerProps } from \"./DesktopDatePicker\";\r\nimport { MobileDatePicker, MobileDatePickerProps } from \"./MobileDatePicker\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\n\r\ntype DatePickerProps = DesktopDatePickerProps & MobileDatePickerProps & {};\r\n\r\nconst DatePicker: React.FC<DatePickerProps> = props => {\r\n const isMobile = useIsMobile();\r\n\r\n return isMobile ? <MobileDatePicker {...props} /> : <DesktopDatePicker {...props} />;\r\n};\r\n\r\nexport {
|
|
1
|
+
{"version":3,"file":"datepicker.es.js","sources":["../src/components/date-picker/DatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\nimport { DesktopDatePicker, DesktopDatePickerProps } from \"./DesktopDatePicker\";\r\nimport { MobileDatePicker, MobileDatePickerProps } from \"./MobileDatePicker\";\r\nimport { type DateOnlyString, type DateValue } from \"./dateValue\";\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\n\r\n/**\r\n * Props for the responsive single-date picker.\r\n *\r\n * Inherits the desktop and mobile single-date picker props and keeps the same\r\n * public value contract: pass a Date or a YYYY-MM-DD string to selected and\r\n * receive a YYYY-MM-DD string from onSelect.\r\n */\r\ntype DatePickerProps = DesktopDatePickerProps & MobileDatePickerProps & {};\r\n\r\n/**\r\n * Responsive single-date picker.\r\n *\r\n * Renders the mobile dialog picker on mobile screens and the desktop popover\r\n * picker on larger screens.\r\n *\r\n * @example\r\n * const [invoiceDate, setInvoiceDate] = React.useState<string | undefined>(\"2025-12-24\");\r\n *\r\n * <DatePicker\r\n * selected={invoiceDate}\r\n * onSelect={setInvoiceDate}\r\n * placeholder=\"Pick an invoice date\"\r\n * />\r\n */\r\nconst DatePicker: React.FC<DatePickerProps> = props => {\r\n const isMobile = useIsMobile();\r\n\r\n return isMobile ? <MobileDatePicker {...props} /> : <DesktopDatePicker {...props} />;\r\n};\r\n\r\nexport {\r\n DatePicker,\r\n DesktopDatePicker,\r\n MobileDatePicker,\r\n type DatePickerProps,\r\n type DesktopDatePickerProps,\r\n type MobileDatePickerProps,\r\n type DateOnlyString,\r\n type DateValue,\r\n};\r\n"],"names":["DatePicker","props","useIsMobile","MobileDatePicker","jsx","DesktopDatePicker"],"mappings":";;;;AAgCA,MAAMA,IAAwC,CAAAC,MAC3BC,EAAA,sBAEEC,GAAA,EAAkB,GAAGF,GAAO,IAAK,gBAAAG,EAACC,GAAA,EAAmB,GAAGJ,EAAA,CAAO;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"daterangepicker.es.js","sources":["../src/components/date-picker/DateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\nimport { MobileDateRangePicker, MobileDateRangePickerProps } from \"./MobileDateRangePicker\";\r\nimport { DesktopDateRangePicker, DesktopDateRangePickerProps } from \"./DesktopDateRangePicker\";\r\n\r\ntype DateRangePickerProps = DesktopDateRangePickerProps & MobileDateRangePickerProps & {};\r\n\r\nconst DateRangePicker: React.FC<DateRangePickerProps> = props => {\r\n const isMobile = useIsMobile();\r\n\r\n return isMobile ? <MobileDateRangePicker {...props} /> : <DesktopDateRangePicker {...props} />;\r\n};\r\n\r\nexport {\r\n DateRangePicker,\r\n DesktopDateRangePicker,\r\n MobileDateRangePicker,\r\n type DateRangePickerProps,\r\n type DesktopDateRangePickerProps,\r\n type MobileDateRangePickerProps,\r\n};\r\n"],"names":["DateRangePicker","props","useIsMobile","MobileDateRangePicker","jsx","DesktopDateRangePicker"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"daterangepicker.es.js","sources":["../src/components/date-picker/DateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { useIsMobile } from \"../../lib/hooks/use-mobile\";\r\nimport { MobileDateRangePicker, MobileDateRangePickerProps } from \"./MobileDateRangePicker\";\r\nimport { DesktopDateRangePicker, DesktopDateRangePickerProps } from \"./DesktopDateRangePicker\";\r\nimport { type DateOnlyRange, type DateRangeValue } from \"./dateValue\";\r\n\r\n/**\r\n * Props for the responsive date-range picker.\r\n *\r\n * Inherits the desktop and mobile range picker props and keeps the same public\r\n * value contract: pass Date objects or YYYY-MM-DD strings and receive a\r\n * { from, to } object with YYYY-MM-DD values from onSelect.\r\n */\r\ntype DateRangePickerProps = DesktopDateRangePickerProps & MobileDateRangePickerProps & {};\r\n\r\n/**\r\n * Responsive date-range picker.\r\n *\r\n * Renders the mobile dialog picker on mobile screens and the desktop popover\r\n * picker on larger screens.\r\n *\r\n * @example\r\n * const [billingRange, setBillingRange] = React.useState<{ from?: string; to?: string } | undefined>({\r\n * from: \"2025-12-01\",\r\n * to: \"2025-12-31\",\r\n * });\r\n *\r\n * <DateRangePicker selected={billingRange} onSelect={setBillingRange} />\r\n */\r\nconst DateRangePicker: React.FC<DateRangePickerProps> = props => {\r\n const isMobile = useIsMobile();\r\n\r\n return isMobile ? <MobileDateRangePicker {...props} /> : <DesktopDateRangePicker {...props} />;\r\n};\r\n\r\nexport {\r\n DateRangePicker,\r\n DesktopDateRangePicker,\r\n MobileDateRangePicker,\r\n type DateRangePickerProps,\r\n type DesktopDateRangePickerProps,\r\n type MobileDateRangePickerProps,\r\n type DateOnlyRange,\r\n type DateRangeValue,\r\n};\r\n"],"names":["DateRangePicker","props","useIsMobile","MobileDateRangePicker","jsx","DesktopDateRangePicker"],"mappings":";;;;AAgCA,MAAMA,IAAkD,CAAAC,MACrCC,EAAA,sBAEEC,GAAA,EAAuB,GAAGF,GAAO,IAAK,gBAAAG,EAACC,GAAA,EAAwB,GAAGJ,EAAA,CAAO;"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { format as m } from "./format.es.js";
|
|
2
|
+
const f = /^(\d{4})-(\d{2})-(\d{2})$/, i = (t) => !Number.isNaN(t.getTime()), d = (t) => {
|
|
3
|
+
if (!t) return;
|
|
4
|
+
if (t instanceof Date)
|
|
5
|
+
return i(t) ? new Date(t) : void 0;
|
|
6
|
+
const r = f.exec(t);
|
|
7
|
+
if (!r) return;
|
|
8
|
+
const [, o, e, s] = r, n = new Date(Number(o), Number(e) - 1, Number(s));
|
|
9
|
+
if (!(!i(n) || n.getFullYear() !== Number(o) || n.getMonth() !== Number(e) - 1 || n.getDate() !== Number(s)))
|
|
10
|
+
return n;
|
|
11
|
+
}, a = (t) => {
|
|
12
|
+
if (!(!t || !i(t)))
|
|
13
|
+
return m(t, "yyyy-MM-dd");
|
|
14
|
+
}, c = (t) => {
|
|
15
|
+
if (typeof t == "number") {
|
|
16
|
+
const r = new Date(t);
|
|
17
|
+
return i(r) ? r : void 0;
|
|
18
|
+
}
|
|
19
|
+
return d(t);
|
|
20
|
+
}, u = (t) => {
|
|
21
|
+
if (!t) return;
|
|
22
|
+
const r = d(t.from), o = d(t.to);
|
|
23
|
+
if (!(!r && !o))
|
|
24
|
+
return { from: r, to: o };
|
|
25
|
+
}, y = (t, r) => {
|
|
26
|
+
const o = c(t), e = c(r);
|
|
27
|
+
if (!(!o && !e))
|
|
28
|
+
return { from: o, to: e };
|
|
29
|
+
}, N = (t) => {
|
|
30
|
+
if (!t) return;
|
|
31
|
+
const r = a(t.from), o = a(t.to);
|
|
32
|
+
if (!(!r && !o))
|
|
33
|
+
return { from: r, to: o };
|
|
34
|
+
};
|
|
35
|
+
export {
|
|
36
|
+
f as DATE_ONLY_PATTERN,
|
|
37
|
+
d as toCalendarDate,
|
|
38
|
+
c as toCalendarDateFromKey,
|
|
39
|
+
u as toCalendarDateRange,
|
|
40
|
+
y as toCalendarDateRangeFromKeys,
|
|
41
|
+
N as toDateOnlyRange,
|
|
42
|
+
a as toDateOnlyString
|
|
43
|
+
};
|
|
44
|
+
//# sourceMappingURL=datevalue.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"datevalue.es.js","sources":["../src/components/date-picker/dateValue.ts"],"sourcesContent":["import { format } from \"date-fns\";\r\nimport { DateRange } from \"react-day-picker\";\r\n\r\n/**\r\n * Public value accepted by single-date pickers.\r\n * Pass either a native Date or a date-only string in YYYY-MM-DD format.\r\n */\r\ntype DateValue = Date | string;\r\n\r\n/**\r\n * Date-only value returned by single-date pickers.\r\n * Example: \"2025-12-24\".\r\n */\r\ntype DateOnlyString = string;\r\n\r\ntype DateSelectionKey = number | string | undefined;\r\n\r\n/**\r\n * Public value accepted by date-range pickers.\r\n * Each edge of the range can be a native Date or a YYYY-MM-DD string.\r\n */\r\ntype DateRangeValue = {\r\n /** Inclusive start date for the range. */\r\n from?: DateValue;\r\n /** Inclusive end date for the range. */\r\n to?: DateValue;\r\n};\r\n\r\n/**\r\n * Date-only range returned by range pickers and form wrappers.\r\n */\r\ntype DateOnlyRange = {\r\n /** Inclusive start date in YYYY-MM-DD format. */\r\n from?: DateOnlyString;\r\n /** Inclusive end date in YYYY-MM-DD format. */\r\n to?: DateOnlyString;\r\n};\r\n\r\n/**\r\n * Regular expression used to validate date-only strings.\r\n * Matches values like \"2025-12-24\".\r\n */\r\nconst DATE_ONLY_PATTERN = /^(\\d{4})-(\\d{2})-(\\d{2})$/;\r\n\r\nconst isValidDate = (value: Date) => !Number.isNaN(value.getTime());\r\n\r\nconst toCalendarDate = (value?: DateValue): Date | undefined => {\r\n if (!value) return undefined;\r\n\r\n if (value instanceof Date) {\r\n return isValidDate(value) ? new Date(value) : undefined;\r\n }\r\n\r\n const match = DATE_ONLY_PATTERN.exec(value);\r\n if (!match) return undefined;\r\n\r\n const [, year, month, day] = match;\r\n const parsedDate = new Date(Number(year), Number(month) - 1, Number(day));\r\n\r\n if (\r\n !isValidDate(parsedDate) ||\r\n parsedDate.getFullYear() !== Number(year) ||\r\n parsedDate.getMonth() !== Number(month) - 1 ||\r\n parsedDate.getDate() !== Number(day)\r\n ) {\r\n return undefined;\r\n }\r\n\r\n return parsedDate;\r\n};\r\n\r\nconst toDateOnlyString = (value?: Date): DateOnlyString | undefined => {\r\n if (!value || !isValidDate(value)) return undefined;\r\n\r\n return format(value, \"yyyy-MM-dd\");\r\n};\r\n\r\nconst toCalendarDateFromKey = (value?: DateSelectionKey): Date | undefined => {\r\n if (typeof value === \"number\") {\r\n const parsedDate = new Date(value);\r\n return isValidDate(parsedDate) ? parsedDate : undefined;\r\n }\r\n\r\n return toCalendarDate(value);\r\n};\r\n\r\nconst toCalendarDateRange = (value?: DateRangeValue): DateRange | undefined => {\r\n if (!value) return undefined;\r\n\r\n const from = toCalendarDate(value.from);\r\n const to = toCalendarDate(value.to);\r\n\r\n if (!from && !to) return undefined;\r\n\r\n return { from, to };\r\n};\r\n\r\nconst toCalendarDateRangeFromKeys = (fromKey?: DateSelectionKey, toKey?: DateSelectionKey): DateRange | undefined => {\r\n const from = toCalendarDateFromKey(fromKey);\r\n const to = toCalendarDateFromKey(toKey);\r\n\r\n if (!from && !to) return undefined;\r\n\r\n return { from, to };\r\n};\r\n\r\nconst toDateOnlyRange = (value?: DateRange): DateOnlyRange | undefined => {\r\n if (!value) return undefined;\r\n\r\n const from = toDateOnlyString(value.from);\r\n const to = toDateOnlyString(value.to);\r\n\r\n if (!from && !to) return undefined;\r\n\r\n return { from, to };\r\n};\r\n\r\nexport {\r\n DATE_ONLY_PATTERN,\r\n toCalendarDate,\r\n toCalendarDateFromKey,\r\n toDateOnlyString,\r\n toCalendarDateRange,\r\n toCalendarDateRangeFromKeys,\r\n toDateOnlyRange,\r\n type DateOnlyRange,\r\n type DateOnlyString,\r\n type DateRangeValue,\r\n type DateSelectionKey,\r\n type DateValue,\r\n};\r\n"],"names":["DATE_ONLY_PATTERN","isValidDate","value","toCalendarDate","match","year","month","day","parsedDate","toDateOnlyString","format","toCalendarDateFromKey","toCalendarDateRange","from","to","toCalendarDateRangeFromKeys","fromKey","toKey","toDateOnlyRange"],"mappings":";AA0CA,MAAMA,IAAoB,6BAEpBC,IAAc,CAACC,MAAgB,CAAC,OAAO,MAAMA,EAAM,SAAS,GAE5DC,IAAiB,CAACD,MAAwC;AAC9D,MAAI,CAACA,EAAO;AAEZ,MAAIA,aAAiB;AACnB,WAAOD,EAAYC,CAAK,IAAI,IAAI,KAAKA,CAAK,IAAI;AAGhD,QAAME,IAAQJ,EAAkB,KAAKE,CAAK;AAC1C,MAAI,CAACE,EAAO;AAEZ,QAAM,GAAGC,GAAMC,GAAOC,CAAG,IAAIH,GACvBI,IAAa,IAAI,KAAK,OAAOH,CAAI,GAAG,OAAOC,CAAK,IAAI,GAAG,OAAOC,CAAG,CAAC;AAExE,MACE,GAACN,EAAYO,CAAU,KACvBA,EAAW,kBAAkB,OAAOH,CAAI,KACxCG,EAAW,eAAe,OAAOF,CAAK,IAAI,KAC1CE,EAAW,QAAA,MAAc,OAAOD,CAAG;AAKrC,WAAOC;AACT,GAEMC,IAAmB,CAACP,MAA6C;AACrE,MAAI,GAACA,KAAS,CAACD,EAAYC,CAAK;AAEhC,WAAOQ,EAAOR,GAAO,YAAY;AACnC,GAEMS,IAAwB,CAACT,MAA+C;AAC5E,MAAI,OAAOA,KAAU,UAAU;AAC7B,UAAMM,IAAa,IAAI,KAAKN,CAAK;AACjC,WAAOD,EAAYO,CAAU,IAAIA,IAAa;AAAA,EAChD;AAEA,SAAOL,EAAeD,CAAK;AAC7B,GAEMU,IAAsB,CAACV,MAAkD;AAC7E,MAAI,CAACA,EAAO;AAEZ,QAAMW,IAAOV,EAAeD,EAAM,IAAI,GAChCY,IAAKX,EAAeD,EAAM,EAAE;AAElC,MAAI,GAACW,KAAQ,CAACC;AAEd,WAAO,EAAE,MAAAD,GAAM,IAAAC,EAAA;AACjB,GAEMC,IAA8B,CAACC,GAA4BC,MAAoD;AACnH,QAAMJ,IAAOF,EAAsBK,CAAO,GACpCF,IAAKH,EAAsBM,CAAK;AAEtC,MAAI,GAACJ,KAAQ,CAACC;AAEd,WAAO,EAAE,MAAAD,GAAM,IAAAC,EAAA;AACjB,GAEMI,IAAkB,CAAChB,MAAiD;AACxE,MAAI,CAACA,EAAO;AAEZ,QAAMW,IAAOJ,EAAiBP,EAAM,IAAI,GAClCY,IAAKL,EAAiBP,EAAM,EAAE;AAEpC,MAAI,GAACW,KAAQ,CAACC;AAEd,WAAO,EAAE,MAAAD,GAAM,IAAAC,EAAA;AACjB;"}
|
|
@@ -1,64 +1,69 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { Calendar as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { Calendar as
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { jsxs as m, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import * as v from "react";
|
|
3
|
+
import { Calendar as C } from "@trsys-tech/matrix-icons";
|
|
4
|
+
import { cn as k } from "./utils.es.js";
|
|
5
|
+
import { Calendar as M } from "./calendar.es.js";
|
|
6
|
+
import { toCalendarDate as P, toDateOnlyString as N } from "./datevalue.es.js";
|
|
7
|
+
import { Button as O } from "./button.es.js";
|
|
8
|
+
import { Popover as S, PopoverTrigger as j, PopoverContent as $ } from "./popover.es.js";
|
|
9
|
+
import { format as n } from "./format.es.js";
|
|
10
|
+
const q = ({
|
|
11
|
+
formatStr: a,
|
|
12
|
+
selected: d,
|
|
13
|
+
placeholder: s,
|
|
14
|
+
className: l,
|
|
14
15
|
calendarClassName: i,
|
|
15
|
-
closeOnSelect:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
closeOnSelect: x = !0,
|
|
17
|
+
onSelect: p,
|
|
18
|
+
onDayClick: c,
|
|
19
|
+
disabled: u,
|
|
20
|
+
disabledDates: f,
|
|
21
|
+
...y
|
|
20
22
|
}) => {
|
|
21
|
-
const [
|
|
22
|
-
|
|
23
|
+
const [b, o] = v.useState(!1), t = P(d), h = (r, w, D) => {
|
|
24
|
+
c?.(r, w, D), x && o(!1);
|
|
25
|
+
}, g = (r) => {
|
|
26
|
+
p?.(N(r));
|
|
23
27
|
};
|
|
24
|
-
return /* @__PURE__ */
|
|
25
|
-
/* @__PURE__ */ e(
|
|
26
|
-
|
|
28
|
+
return /* @__PURE__ */ m(S, { open: b, onOpenChange: o, children: [
|
|
29
|
+
/* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ m(
|
|
30
|
+
O,
|
|
27
31
|
{
|
|
28
32
|
variant: "text",
|
|
29
|
-
className:
|
|
33
|
+
className: k(
|
|
30
34
|
"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300",
|
|
31
|
-
|
|
35
|
+
l
|
|
32
36
|
),
|
|
33
37
|
"data-placeholder": t ? void 0 : "",
|
|
34
|
-
"aria-label": t ? `Selected date: ${
|
|
35
|
-
disabled: p,
|
|
38
|
+
"aria-label": t ? `Selected date: ${n(t, a ?? "yyyy/MM/dd")}` : "Pick a date",
|
|
36
39
|
"aria-haspopup": "dialog",
|
|
40
|
+
disabled: u,
|
|
37
41
|
type: "button",
|
|
38
42
|
children: [
|
|
39
|
-
t ?
|
|
40
|
-
/* @__PURE__ */ e(
|
|
43
|
+
t ? n(t, a ?? "yyyy/MM/dd") : /* @__PURE__ */ e("span", { children: s ?? "Pick a date" }),
|
|
44
|
+
/* @__PURE__ */ e(C, { className: "mtx-mr-2 mtx-ms-auto" })
|
|
41
45
|
]
|
|
42
46
|
}
|
|
43
47
|
) }),
|
|
44
|
-
/* @__PURE__ */ e(
|
|
45
|
-
|
|
48
|
+
/* @__PURE__ */ e($, { className: "mtx-w-auto mtx-p-0", children: /* @__PURE__ */ e(
|
|
49
|
+
M,
|
|
46
50
|
{
|
|
47
51
|
defaultMonth: t,
|
|
48
52
|
startMonth: new Date(2e3, 0, 1),
|
|
49
53
|
endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
|
|
50
|
-
...
|
|
54
|
+
...y,
|
|
51
55
|
mode: "single",
|
|
52
56
|
selected: t,
|
|
53
57
|
captionLayout: "dropdown-years",
|
|
54
58
|
className: i,
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
onSelect: g,
|
|
60
|
+
onDayClick: h,
|
|
61
|
+
disabled: f
|
|
57
62
|
}
|
|
58
63
|
) })
|
|
59
64
|
] });
|
|
60
65
|
};
|
|
61
66
|
export {
|
|
62
|
-
|
|
67
|
+
q as DesktopDatePicker
|
|
63
68
|
};
|
|
64
69
|
//# sourceMappingURL=desktopdatepicker.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler, Matcher } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = Omit<PropsBase, \"disabled\"> &\r\n Omit<PropsSingle, \"mode\" | \"disabled\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?:
|
|
1
|
+
{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler, Matcher, OnSelectHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { DateOnlyString, DateValue, toCalendarDate, toDateOnlyString } from \"./dateValue\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\n/**\r\n * Props for the desktop-only single-date picker.\r\n *\r\n * Inherits the single-date calendar props from react-day-picker, but normalizes\r\n * the public value contract to Date | YYYY-MM-DD on input and YYYY-MM-DD on output.\r\n */\r\ntype DesktopDatePickerProps = Omit<PropsBase, \"disabled\"> &\r\n Omit<PropsSingle, \"mode\" | \"disabled\" | \"selected\" | \"onSelect\"> & {\r\n /** Display format used in the trigger and accessibility label. */\r\n formatStr?: string;\r\n /** Placeholder shown when no date is selected. */\r\n placeholder?: string;\r\n /** Class name forwarded to the calendar content. */\r\n calendarClassName?: string;\r\n /** Current value as a native Date or a YYYY-MM-DD string. */\r\n selected?: DateValue;\r\n /** Called with a YYYY-MM-DD string when the user selects a date. */\r\n onSelect?: (date: DateOnlyString | undefined) => void;\r\n /** Prevents clearing the selection when true. */\r\n required?: boolean;\r\n /** Closes the popover immediately after a day is picked. */\r\n closeOnSelect?: boolean;\r\n /** Disables the trigger button. */\r\n disabled?: boolean;\r\n /** Dates disabled in the calendar. */\r\n disabledDates?: Matcher | Matcher[];\r\n };\r\n\r\n/**\r\n * Desktop-only single-date picker rendered in a popover.\r\n * Use this component when you want the desktop experience regardless of screen size.\r\n */\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n closeOnSelect = true,\r\n onSelect,\r\n onDayClick,\r\n disabled,\r\n disabledDates,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const selectedDate = toCalendarDate(selected);\r\n\r\n const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n onDayClick?.(date, modifiers, e);\r\n if (closeOnSelect) setIsOpen(false);\r\n };\r\n\r\n const handleSelect: OnSelectHandler<Date | undefined> = date => {\r\n onSelect?.(toDateOnlyString(date));\r\n };\r\n\r\n return (\r\n <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n className,\r\n )}\r\n data-placeholder={!selectedDate ? \"\" : undefined}\r\n aria-label={selectedDate ? `Selected date: ${format(selectedDate, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n aria-haspopup=\"dialog\"\r\n disabled={disabled}\r\n type=\"button\"\r\n >\r\n {selectedDate ? format(selectedDate, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n <CalendarIcon className=\"mtx-mr-2 mtx-ms-auto\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"mtx-w-auto mtx-p-0\">\r\n <Calendar\r\n defaultMonth={selectedDate}\r\n startMonth={new Date(2000, 0, 1)}\r\n endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n {...props}\r\n mode=\"single\"\r\n selected={selectedDate}\r\n captionLayout=\"dropdown-years\"\r\n className={calendarClassName}\r\n onSelect={handleSelect}\r\n onDayClick={handleDayClick}\r\n disabled={disabledDates}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\n\r\nexport { DesktopDatePicker, type DesktopDatePickerProps };\r\n"],"names":["DesktopDatePicker","formatStr","selected","placeholder","className","calendarClassName","closeOnSelect","onSelect","onDayClick","disabled","disabledDates","props","isOpen","setIsOpen","React","selectedDate","toCalendarDate","handleDayClick","date","modifiers","e","handleSelect","toDateOnlyString","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;;AA6CA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAC1CC,IAAeC,EAAed,CAAQ,GAEtCe,IAAyE,CAACC,GAAMC,GAAWC,MAAM;AACrG,IAAAZ,IAAaU,GAAMC,GAAWC,CAAC,GAC3Bd,OAAyB,EAAK;AAAA,EACpC,GAEMe,IAAkD,CAAAH,MAAQ;AAC9D,IAAAX,IAAWe,EAAiBJ,CAAI,CAAC;AAAA,EACnC;AAEA,SACE,gBAAAK,EAACC,GAAA,EAAQ,MAAMZ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAA,gBAAAY,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAxB;AAAA,QAAA;AAAA,QAEF,oBAAmBW,IAAoB,SAAL;AAAA,QAClC,cAAYA,IAAe,kBAAkBc,EAAOd,GAAcd,KAAa,YAAY,CAAC,KAAK;AAAA,QACjG,iBAAc;AAAA,QACd,UAAAQ;AAAA,QACA,MAAK;AAAA,QAEJ,UAAA;AAAA,UAAAM,IAAec,EAAOd,GAAcd,KAAa,YAAY,IAAI,gBAAAwB,EAAC,QAAA,EAAM,eAAe,cAAA,CAAc;AAAA,UACtG,gBAAAA,EAACK,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAEnD;AAAA,IACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,sBACxB,UAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,cAAcjB;AAAA,QACd,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,QAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,QACtD,GAAGJ;AAAA,QACJ,MAAK;AAAA,QACL,UAAUI;AAAA,QACV,eAAc;AAAA,QACd,WAAWV;AAAA,QACX,UAAUgB;AAAA,QACV,YAAYJ;AAAA,QACZ,UAAUP;AAAA,MAAA;AAAA,IAAA,EACZ,CACF;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -1,74 +1,79 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { Calendar as
|
|
4
|
-
import { cn as
|
|
5
|
-
import { Calendar as
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
|
|
1
|
+
import { jsxs as e, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import * as M from "react";
|
|
3
|
+
import { Calendar as v } from "@trsys-tech/matrix-icons";
|
|
4
|
+
import { cn as s } from "./utils.es.js";
|
|
5
|
+
import { Calendar as C } from "./calendar.es.js";
|
|
6
|
+
import { toCalendarDateRange as D, toDateOnlyRange as R } from "./datevalue.es.js";
|
|
7
|
+
import { Button as N } from "./button.es.js";
|
|
8
|
+
import { Popover as O, PopoverTrigger as P, PopoverContent as j } from "./popover.es.js";
|
|
9
|
+
import { format as m } from "./format.es.js";
|
|
10
|
+
const _ = ({
|
|
10
11
|
formatStr: o,
|
|
11
|
-
selected:
|
|
12
|
-
placeholder:
|
|
13
|
-
className:
|
|
12
|
+
selected: x,
|
|
13
|
+
placeholder: d,
|
|
14
|
+
className: l,
|
|
14
15
|
calendarClassName: i,
|
|
15
|
-
fromText:
|
|
16
|
-
toText:
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
fromText: c,
|
|
17
|
+
toText: p,
|
|
18
|
+
onSelect: f,
|
|
19
|
+
disabled: u,
|
|
20
|
+
disabledDates: y,
|
|
21
|
+
...g
|
|
20
22
|
}) => {
|
|
21
|
-
const [
|
|
22
|
-
|
|
23
|
-
|
|
23
|
+
const [h, b] = M.useState(!1), t = D(x), a = !!(t?.from || t?.to), w = (n) => {
|
|
24
|
+
f?.(R(n));
|
|
25
|
+
};
|
|
26
|
+
return /* @__PURE__ */ e(
|
|
27
|
+
O,
|
|
24
28
|
{
|
|
25
|
-
open:
|
|
26
|
-
onOpenChange: (
|
|
27
|
-
|
|
29
|
+
open: h,
|
|
30
|
+
onOpenChange: (n) => {
|
|
31
|
+
b(n);
|
|
28
32
|
},
|
|
29
33
|
children: [
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
-
|
|
34
|
+
/* @__PURE__ */ r(P, { asChild: !0, children: /* @__PURE__ */ e(
|
|
35
|
+
N,
|
|
32
36
|
{
|
|
33
37
|
variant: "text",
|
|
34
|
-
className:
|
|
38
|
+
className: s(
|
|
35
39
|
"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300",
|
|
36
|
-
|
|
40
|
+
l
|
|
37
41
|
),
|
|
38
|
-
"data-placeholder":
|
|
39
|
-
"aria-label":
|
|
40
|
-
disabled:
|
|
42
|
+
"data-placeholder": a ? void 0 : "",
|
|
43
|
+
"aria-label": a ? `Selected date: ${t?.from ? m(t.from, o ?? "yyyy/MM/dd") : ""} - ${t?.to ? m(t.to, o ?? "yyyy/MM/dd") : ""}` : d,
|
|
44
|
+
disabled: u,
|
|
41
45
|
type: "button",
|
|
42
46
|
children: [
|
|
43
|
-
|
|
44
|
-
/* @__PURE__ */
|
|
45
|
-
|
|
47
|
+
a ? /* @__PURE__ */ e("div", { className: "mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-justify-items-start", children: [
|
|
48
|
+
/* @__PURE__ */ e("span", { children: [
|
|
49
|
+
c ?? "From",
|
|
46
50
|
": ",
|
|
47
|
-
t?.from ?
|
|
51
|
+
t?.from ? m(t.from, o ?? "yyyy/MM/dd") : "-"
|
|
48
52
|
] }),
|
|
49
53
|
" ",
|
|
50
|
-
/* @__PURE__ */
|
|
51
|
-
|
|
54
|
+
/* @__PURE__ */ e("span", { children: [
|
|
55
|
+
p ?? "To",
|
|
52
56
|
": ",
|
|
53
|
-
t?.to ?
|
|
57
|
+
t?.to ? m(t.to, o ?? "yyyy/MM/dd") : "-"
|
|
54
58
|
] })
|
|
55
|
-
] }) : /* @__PURE__ */
|
|
56
|
-
/* @__PURE__ */
|
|
59
|
+
] }) : /* @__PURE__ */ r("span", { children: d ?? "Pick a Range" }),
|
|
60
|
+
/* @__PURE__ */ r(v, { className: "mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto" })
|
|
57
61
|
]
|
|
58
62
|
}
|
|
59
63
|
) }),
|
|
60
|
-
/* @__PURE__ */
|
|
61
|
-
|
|
64
|
+
/* @__PURE__ */ r(j, { className: "mtx-w-auto mtx-p-0", align: "start", children: /* @__PURE__ */ r(
|
|
65
|
+
C,
|
|
62
66
|
{
|
|
63
67
|
defaultMonth: t?.from,
|
|
64
68
|
startMonth: new Date(2e3, 0, 1),
|
|
65
69
|
endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
|
|
66
|
-
...
|
|
70
|
+
...g,
|
|
67
71
|
mode: "range",
|
|
68
72
|
selected: t,
|
|
69
|
-
className:
|
|
73
|
+
className: s(i, "md:mtx-max-w-full md:mtx-w-[36rem]"),
|
|
70
74
|
numberOfMonths: 2,
|
|
71
|
-
|
|
75
|
+
onSelect: w,
|
|
76
|
+
disabled: y
|
|
72
77
|
}
|
|
73
78
|
) })
|
|
74
79
|
]
|
|
@@ -76,6 +81,6 @@ const $ = ({
|
|
|
76
81
|
);
|
|
77
82
|
};
|
|
78
83
|
export {
|
|
79
|
-
|
|
84
|
+
_ as DesktopDateRangePicker
|
|
80
85
|
};
|
|
81
86
|
//# sourceMappingURL=desktopdaterangepicker.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, Matcher } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = Omit<PropsBase, \"disabled\"> &\r\n Omit<PropsRange, \"mode\" | \"disabled\"> & {\r\n formatStr?: string;\r\n placeholder?: string;\r\n calendarClassName?: string;\r\n selected?:
|
|
1
|
+
{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, Matcher, OnSelectHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { DateOnlyRange, DateRangeValue, toCalendarDateRange, toDateOnlyRange } from \"./dateValue\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\n/**\r\n * Props for the desktop-only date-range picker.\r\n *\r\n * Inherits the range calendar props from react-day-picker, but normalizes the\r\n * public value contract to Date | YYYY-MM-DD on input and { from, to } strings on output.\r\n */\r\ntype DesktopDateRangePickerProps = Omit<PropsBase, \"disabled\"> &\r\n Omit<PropsRange, \"mode\" | \"disabled\" | \"selected\" | \"onSelect\"> & {\r\n /** Display format used in the trigger and accessibility label. */\r\n formatStr?: string;\r\n /** Placeholder shown when no range is selected. */\r\n placeholder?: string;\r\n /** Class name forwarded to the calendar content. */\r\n calendarClassName?: string;\r\n /** Current value as Date objects or YYYY-MM-DD strings. */\r\n selected?: DateRangeValue;\r\n /** Called with YYYY-MM-DD range values when the user selects a range. */\r\n onSelect?: (date: DateOnlyRange | undefined) => void;\r\n /** Prevents clearing the selection when true. */\r\n required?: boolean;\r\n /** Label shown before the start date in the trigger. */\r\n fromText?: string;\r\n /** Label shown before the end date in the trigger. */\r\n toText?: string;\r\n /** Disables the trigger button. */\r\n disabled?: boolean;\r\n /** Dates disabled in the calendar. */\r\n disabledDates?: Matcher | Matcher[];\r\n };\r\n\r\n/**\r\n * Desktop-only date-range picker rendered in a popover.\r\n * Use this component when you want the desktop experience regardless of screen size.\r\n */\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n formatStr,\r\n selected,\r\n placeholder,\r\n className,\r\n calendarClassName,\r\n fromText,\r\n toText,\r\n onSelect,\r\n disabled,\r\n disabledDates,\r\n ...props\r\n}) => {\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const selectedRange = toCalendarDateRange(selected);\r\n const hasSelectedRange = Boolean(selectedRange?.from || selectedRange?.to);\r\n\r\n const handleSelect: OnSelectHandler<DateRange | undefined> = range => {\r\n onSelect?.(toDateOnlyRange(range));\r\n };\r\n\r\n return (\r\n <Popover\r\n open={isOpen}\r\n onOpenChange={open => {\r\n setIsOpen(open);\r\n }}\r\n >\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n className,\r\n )}\r\n data-placeholder={!hasSelectedRange ? \"\" : undefined}\r\n aria-label={\r\n hasSelectedRange\r\n ? `Selected date: ${selectedRange?.from ? format(selectedRange.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selectedRange?.to ? format(selectedRange.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n : placeholder\r\n }\r\n disabled={disabled}\r\n type=\"button\"\r\n >\r\n {hasSelectedRange ? (\r\n <div className=\"mtx-grid mtx-grid-cols-2 mtx-flex-1 mtx-justify-items-start\">\r\n <span>\r\n {fromText ?? \"From\"}: {selectedRange?.from ? format(selectedRange.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n </span>{\" \"}\r\n <span>\r\n {toText ?? \"To\"}: {selectedRange?.to ? format(selectedRange.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n </span>\r\n </div>\r\n ) : (\r\n <span>{placeholder ?? \"Pick a Range\"}</span>\r\n )}\r\n <CalendarIcon className=\"mtx-mr-2 mtx-h-5 mtx-w-4 mtx-ms-auto\" />\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent className=\"mtx-w-auto mtx-p-0\" align=\"start\">\r\n <Calendar\r\n defaultMonth={selectedRange?.from}\r\n startMonth={new Date(2000, 0, 1)}\r\n endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n {...props}\r\n mode=\"range\"\r\n selected={selectedRange}\r\n className={cn(calendarClassName, \"md:mtx-max-w-full md:mtx-w-[36rem]\")}\r\n numberOfMonths={2}\r\n onSelect={handleSelect}\r\n disabled={disabledDates}\r\n />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","onSelect","disabled","disabledDates","props","isOpen","setIsOpen","React","selectedRange","toCalendarDateRange","hasSelectedRange","handleSelect","range","toDateOnlyRange","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;;AA+CA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAC1CC,IAAgBC,EAAoBd,CAAQ,GAC5Ce,IAAmB,GAAQF,GAAe,QAAQA,GAAe,KAEjEG,IAAuD,CAAAC,MAAS;AACpE,IAAAX,IAAWY,EAAgBD,CAAK,CAAC;AAAA,EACnC;AAEA,SACE,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMV;AAAA,MACN,cAAc,CAAAW,MAAQ;AACpB,QAAAV,EAAUU,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,WAAWC;AAAA,cACT;AAAA,cACAvB;AAAA,YAAA;AAAA,YAEF,oBAAmBa,IAAwB,SAAL;AAAA,YACtC,cACEA,IACI,kBAAkBF,GAAe,OAAOa,EAAOb,EAAc,MAAMd,KAAa,YAAY,IAAI,EAAE,MAAMc,GAAe,KAAKa,EAAOb,EAAc,IAAId,KAAa,YAAY,IAAI,EAAE,KACpLE;AAAA,YAEN,UAAAM;AAAA,YACA,MAAK;AAAA,YAEJ,UAAA;AAAA,cAAAQ,IACC,gBAAAI,EAAC,OAAA,EAAI,WAAU,+DACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EACE,UAAA;AAAA,kBAAAf,KAAY;AAAA,kBAAO;AAAA,kBAAGS,GAAe,OAAOa,EAAOb,EAAc,MAAMd,KAAa,YAAY,IAAI;AAAA,gBAAA,GACvG;AAAA,gBAAQ;AAAA,kCACP,QAAA,EACE,UAAA;AAAA,kBAAAM,KAAU;AAAA,kBAAK;AAAA,kBAAGQ,GAAe,KAAKa,EAAOb,EAAc,IAAId,KAAa,YAAY,IAAI;AAAA,gBAAA,EAAA,CAC/F;AAAA,cAAA,EAAA,CACF,IAEA,gBAAAuB,EAAC,QAAA,EAAM,UAAArB,KAAe,gBAAe;AAAA,cAEvC,gBAAAqB,EAACK,GAAA,EAAa,WAAU,uCAAA,CAAuC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEnE;AAAA,QACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,sBAAqB,OAAM,SACnD,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,cAAchB,GAAe;AAAA,YAC7B,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,YAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,YACtD,GAAGJ;AAAA,YACJ,MAAK;AAAA,YACL,UAAUI;AAAA,YACV,WAAWY,EAAGtB,GAAmB,oCAAoC;AAAA,YACrE,gBAAgB;AAAA,YAChB,UAAUa;AAAA,YACV,UAAUR;AAAA,UAAA;AAAA,QAAA,EACZ,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\n\r\nconst formatTimeLabel = (time: Time, is24HourMode: boolean) => {\r\n const minute = time.minute.toString().padStart(2, \"0\");\r\n\r\n if (is24HourMode) {\r\n const hour = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n return `${hour.toString().padStart(2, \"0\")} : ${minute}`;\r\n }\r\n\r\n const hourFromAmpm = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n const hour = hourFromAmpm % 12 || 12;\r\n const ampm = time.ampm ?? (hourFromAmpm >= 12 ? \"PM\" : \"AM\");\r\n\r\n return `${hour.toString().padStart(2, \"0\")} : ${minute} ${ampm}`;\r\n};\r\n\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n time: Time | undefined;\r\n onTimeChange: (time: Time | undefined) => void;\r\n is24HourMode?: boolean;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n slotsProps?: {\r\n content?: HTMLAttributes<HTMLDivElement>;\r\n };\r\n};\r\n\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n time,\r\n onTimeChange,\r\n className,\r\n slotsProps,\r\n is24HourMode = false,\r\n placeholder = \"Pick a Time\",\r\n ...restProps\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n return (\r\n <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n className,\r\n )}\r\n data-placeholder={!time ? \"\" : undefined}\r\n aria-label={time ? `Selected time: ${formatTimeLabel(time, is24HourMode)}` : placeholder}\r\n {...restProps}\r\n type=\"button\"\r\n >\r\n {time ? formatTimeLabel(time, is24HourMode) : \"-- : --\"}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"mtx-w-auto mtx-p-0\", slotsProps?.content?.className)}>\r\n <TimePickerContent isOpen={isOpen} is24HourMode={is24HourMode} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["formatTimeLabel","time","is24HourMode","minute","hourFromAmpm","hour","ampm","DesktopTimePicker","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AASA,MAAMA,IAAkB,CAACC,GAAYC,MAA0B;AAC7D,QAAMC,IAASF,EAAK,OAAO,WAAW,SAAS,GAAG,GAAG;AAErD,MAAIC;AAEF,WAAO,IADMD,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK,MAClE,WAAW,SAAS,GAAG,GAAG,CAAC,MAAME,CAAM;AAGxD,QAAMC,IAAeH,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK,MACnFI,IAAOD,IAAe,MAAM,IAC5BE,IAAOL,EAAK,SAASG,KAAgB,KAAK,OAAO;AAEvD,SAAO,GAAGC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,MAAMF,CAAM,IAAIG,CAAI;AAChE,
|
|
1
|
+
{"version":3,"file":"desktoptimepicker.es.js","sources":["../src/components/date-picker/DesktopTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { HTMLAttributes, useState } from \"react\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\nimport { Time, TimePickerContent } from \"./TimePickerContent\";\r\n\r\nconst formatTimeLabel = (time: Time, is24HourMode: boolean) => {\r\n const minute = time.minute.toString().padStart(2, \"0\");\r\n\r\n if (is24HourMode) {\r\n const hour = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n return `${hour.toString().padStart(2, \"0\")} : ${minute}`;\r\n }\r\n\r\n const hourFromAmpm = time.ampm ? (time.hour % 12) + (time.ampm === \"PM\" ? 12 : 0) : time.hour;\r\n const hour = hourFromAmpm % 12 || 12;\r\n const ampm = time.ampm ?? (hourFromAmpm >= 12 ? \"PM\" : \"AM\");\r\n\r\n return `${hour.toString().padStart(2, \"0\")} : ${minute} ${ampm}`;\r\n};\r\n\r\n/**\r\n * Props for the desktop-only time picker.\r\n *\r\n * In 12-hour mode, the time value should include ampm.\r\n * In 24-hour mode, the time value should omit ampm and use hour values from 0-23.\r\n */\r\ntype DesktopTimePickerProps = HTMLAttributes<HTMLButtonElement> & {\r\n /** Current time value. */\r\n time: Time | undefined;\r\n /** Called whenever the selected time changes. */\r\n onTimeChange: (time: Time | undefined) => void;\r\n /** Enables 24-hour mode and hides the AM/PM column when true. */\r\n is24HourMode?: boolean;\r\n /** Accessible label and trigger fallback when no time is selected. */\r\n placeholder?: string;\r\n /** Disables the trigger button. */\r\n disabled?: boolean;\r\n /** Props forwarded to the popover content. */\r\n slotsProps?: {\r\n /** Props forwarded to the time picker content container. */\r\n content?: HTMLAttributes<HTMLDivElement>;\r\n };\r\n};\r\n\r\n/**\r\n * Desktop-only time picker rendered in a popover.\r\n * Use this component when you want the desktop interaction regardless of screen size.\r\n */\r\nconst DesktopTimePicker: React.FC<DesktopTimePickerProps> = ({\r\n time,\r\n onTimeChange,\r\n className,\r\n slotsProps,\r\n is24HourMode = false,\r\n placeholder = \"Pick a Time\",\r\n ...restProps\r\n}) => {\r\n const [isOpen, setIsOpen] = useState(false);\r\n\r\n return (\r\n <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n <PopoverTrigger asChild>\r\n <Button\r\n variant=\"text\"\r\n className={cn(\r\n \"mtx-flex mtx-h-8 mtx-w-full mtx-items-center mtx-justify-between mtx-whitespace-nowrap mtx-rounded-sm mtx-border mtx-border-input mtx-bg-transparent mtx-ps-3 mtx-pe-1 mtx-py-1.5 mtx-text-xs mtx-ring-offset-background data-[placeholder]:mtx-text-muted-foreground hover:mtx-border hover:mtx-border-primary hover:mtx-bg-transparent focus:mtx-border focus:mtx-border-primary focus:mtx-outline-none focus:mtx-ring focus:mtx-ring-primary-100 disabled:mtx-cursor-not-allowed disabled:mtx-bg-gray-100 disabled:mtx-text-text-300 disabled:mtx-border-gray-100 [&>span]:mtx-line-clamp-1 [&_svg]:disabled:mtx-text-text-300\",\r\n className,\r\n )}\r\n data-placeholder={!time ? \"\" : undefined}\r\n aria-label={time ? `Selected time: ${formatTimeLabel(time, is24HourMode)}` : placeholder}\r\n {...restProps}\r\n type=\"button\"\r\n >\r\n {time ? formatTimeLabel(time, is24HourMode) : \"-- : --\"}\r\n </Button>\r\n </PopoverTrigger>\r\n <PopoverContent {...(slotsProps?.content ?? {})} className={cn(\"mtx-w-auto mtx-p-0\", slotsProps?.content?.className)}>\r\n <TimePickerContent isOpen={isOpen} is24HourMode={is24HourMode} onTimeChange={onTimeChange} time={time} slotsProps={slotsProps} />\r\n </PopoverContent>\r\n </Popover>\r\n );\r\n};\r\nexport { DesktopTimePicker, type DesktopTimePickerProps };\r\n"],"names":["formatTimeLabel","time","is24HourMode","minute","hourFromAmpm","hour","ampm","DesktopTimePicker","onTimeChange","className","slotsProps","placeholder","restProps","isOpen","setIsOpen","useState","jsxs","Popover","jsx","PopoverTrigger","Button","cn","PopoverContent","TimePickerContent"],"mappings":";;;;;;AASA,MAAMA,IAAkB,CAACC,GAAYC,MAA0B;AAC7D,QAAMC,IAASF,EAAK,OAAO,WAAW,SAAS,GAAG,GAAG;AAErD,MAAIC;AAEF,WAAO,IADMD,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK,MAClE,WAAW,SAAS,GAAG,GAAG,CAAC,MAAME,CAAM;AAGxD,QAAMC,IAAeH,EAAK,OAAQA,EAAK,OAAO,MAAOA,EAAK,SAAS,OAAO,KAAK,KAAKA,EAAK,MACnFI,IAAOD,IAAe,MAAM,IAC5BE,IAAOL,EAAK,SAASG,KAAgB,KAAK,OAAO;AAEvD,SAAO,GAAGC,EAAK,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,MAAMF,CAAM,IAAIG,CAAI;AAChE,GA8BMC,IAAsD,CAAC;AAAA,EAC3D,MAAAN;AAAA,EACA,cAAAO;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAR,IAAe;AAAA,EACf,aAAAS,IAAc;AAAA,EACd,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1C,SACE,gBAAAC,EAACC,GAAA,EAAQ,MAAMJ,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAA,gBAAAI,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAZ;AAAA,QAAA;AAAA,QAEF,oBAAmBR,IAAY,SAAL;AAAA,QAC1B,cAAYA,IAAO,kBAAkBD,EAAgBC,GAAMC,CAAY,CAAC,KAAKS;AAAA,QAC5E,GAAGC;AAAA,QACJ,MAAK;AAAA,QAEJ,UAAAX,IAAOD,EAAgBC,GAAMC,CAAY,IAAI;AAAA,MAAA;AAAA,IAAA,GAElD;AAAA,IACA,gBAAAgB,EAACI,KAAgB,GAAIZ,GAAY,WAAW,CAAA,GAAK,WAAWW,EAAG,sBAAsBX,GAAY,SAAS,SAAS,GACjH,UAAA,gBAAAQ,EAACK,GAAA,EAAkB,QAAAV,GAAgB,cAAAX,GAA4B,cAAAM,GAA4B,MAAAP,GAAY,YAAAS,EAAA,CAAwB,EAAA,CACjI;AAAA,EAAA,GACF;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formdatepicker.es.js","sources":["../src/components/form-date-picker/FormDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps,
|
|
1
|
+
{"version":3,"file":"formdatepicker.es.js","sources":["../src/components/form-date-picker/FormDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPathByValue, FieldValues } from \"react-hook-form\";\r\nimport { DatePicker, type DateOnlyString, type DatePickerProps } from \"../date-picker/DatePicker\";\r\n\r\n/**\r\n * Props for FormDatePicker.\r\n *\r\n * The bound field value should be a YYYY-MM-DD string or undefined.\r\n * Use slotProps.datepickerProps to forward props to the underlying DatePicker.\r\n */\r\ntype FormDatePickerProps<TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, DateOnlyString | undefined>> = Omit<\r\n ControllerProps<TFieldValues, TName>,\r\n \"render\"\r\n> &\r\n React.ComponentProps<typeof FormItem> & {\r\n /** Label rendered above the picker. */\r\n label: string;\r\n /** React Hook Form control instance. */\r\n control: Control<TFieldValues>;\r\n /** Shows the required asterisk next to the label. */\r\n required?: boolean;\r\n /** Disables the picker and the field interaction. */\r\n disabled?: boolean;\r\n /** Keeps the field readable while preventing edits. */\r\n readOnly?: boolean;\r\n formatStr?: string;\r\n /** Props forwarded to the form shell and underlying DatePicker. */\r\n slotProps?: {\r\n formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n datepickerProps?: DatePickerProps;\r\n };\r\n };\r\n\r\n/**\r\n * React Hook Form wrapper around DatePicker.\r\n *\r\n * Binds a YYYY-MM-DD field value to the shared date picker and renders the\r\n * label, validation message, and disabled/read-only handling.\r\n *\r\n * @example\r\n * const form = useForm<{ dueDate?: string }>({ defaultValues: { dueDate: \"2025-12-24\" } });\r\n *\r\n * <FormDatePicker\r\n * control={form.control}\r\n * name=\"dueDate\"\r\n * label=\"Due date\"\r\n * slotProps={{ datepickerProps: { placeholder: \"Pick a due date\" } }}\r\n * />\r\n */\r\nconst FormDatePicker = <TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, DateOnlyString | undefined>>(\r\n props: FormDatePickerProps<TFieldValues, TName>,\r\n) => {\r\n const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, formatStr, ...formItemProps } = props;\r\n\r\n return (\r\n <FormField\r\n control={control}\r\n name={name}\r\n defaultValue={defaultValue}\r\n disabled={disabled}\r\n rules={rules}\r\n shouldUnregister={shouldUnregister}\r\n render={({ field }) => {\r\n return (\r\n <FormItem {...formItemProps}>\r\n <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n {label}\r\n {required && <span className=\"mtx-text-danger mtx-text-sm mtx-leading-4\">*</span>}\r\n </FormLabel>\r\n <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n <DatePicker\r\n formatStr={formatStr}\r\n {...(slotProps?.datepickerProps ?? {})}\r\n selected={field.value}\r\n onSelect={field.onChange}\r\n disabled={disabled || readOnly}\r\n />\r\n </FormControl>\r\n <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n </FormItem>\r\n );\r\n }}\r\n />\r\n );\r\n};\r\nexport { FormDatePicker, type FormDatePickerProps };\r\n"],"names":["FormDatePicker","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","formatStr","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","DatePicker","FormMessage"],"mappings":";;;AAsDA,MAAMA,IAAiB,CACrBC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,WAAAC,GAAW,GAAGC,MAAkBZ;AAE9I,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAZ;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAQ,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIT,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAG,EAAC,QAAA,EAAK,WAAU,6CAA4C,UAAA,IAAA,CAAC;AAAA,QAAA,GAC5E;AAAA,0BACCM,GAAA,EAAa,GAAIV,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAI;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,WAAAT;AAAA,YACC,GAAIF,GAAW,mBAAmB,CAAA;AAAA,YACnC,UAAUM,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,YAChB,UAAUX,KAAYC;AAAA,UAAA;AAAA,QAAA,GAE1B;AAAA,0BACCgB,GAAA,EAAa,GAAIZ,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formdaterangepicker.es.js","sources":["../src/components/form-date-range-picker/FormDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps,
|
|
1
|
+
{"version":3,"file":"formdaterangepicker.es.js","sources":["../src/components/form-date-range-picker/FormDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPathByValue, FieldValues } from \"react-hook-form\";\r\n\r\nimport { DateRangePicker, type DateOnlyRange, type DateRangePickerProps } from \"../date-picker/DateRangePicker\";\r\n\r\n/**\r\n * Props for FormDateRangePicker.\r\n *\r\n * The bound field value should be an object shaped like\r\n * { from?: \"YYYY-MM-DD\", to?: \"YYYY-MM-DD\" } or undefined.\r\n * Use slotProps.datepickerProps to forward props to the underlying DateRangePicker.\r\n */\r\ntype FormDateRangePickerProps<TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, DateOnlyRange | undefined>> = Omit<\r\n ControllerProps<TFieldValues, TName>,\r\n \"render\"\r\n> &\r\n React.ComponentProps<typeof FormItem> & {\r\n /** Label rendered above the picker. */\r\n label: string;\r\n /** React Hook Form control instance. */\r\n control: Control<TFieldValues>;\r\n /** Shows the required asterisk next to the label. */\r\n required?: boolean;\r\n /** Keeps the field readable while preventing edits. */\r\n readOnly?: boolean;\r\n /** Props forwarded to the form shell and underlying DateRangePicker. */\r\n slotProps?: {\r\n formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n datepickerProps?: DateRangePickerProps;\r\n };\r\n };\r\n\r\n/**\r\n * React Hook Form wrapper around DateRangePicker.\r\n *\r\n * Binds a { from, to } date-only string object to the shared range picker and\r\n * renders the label, validation message, and read-only handling.\r\n *\r\n * @example\r\n * const form = useForm<{ vacation?: { from?: string; to?: string } }>({\r\n * defaultValues: { vacation: { from: \"2025-12-24\", to: \"2025-12-31\" } },\r\n * });\r\n *\r\n * <FormDateRangePicker\r\n * control={form.control}\r\n * name=\"vacation\"\r\n * label=\"Vacation\"\r\n * slotProps={{ datepickerProps: { fromText: \"Start\", toText: \"End\" } }}\r\n * />\r\n */\r\nconst FormDateRangePicker = <TFieldValues extends FieldValues, TName extends FieldPathByValue<TFieldValues, DateOnlyRange | undefined>>(\r\n props: FormDateRangePickerProps<TFieldValues, TName>,\r\n) => {\r\n const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, ...formItemProps } = props;\r\n\r\n return (\r\n <FormField\r\n control={control}\r\n name={name}\r\n defaultValue={defaultValue}\r\n disabled={disabled}\r\n rules={rules}\r\n shouldUnregister={shouldUnregister}\r\n render={({ field }) => {\r\n return (\r\n <FormItem {...formItemProps}>\r\n <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n {label}\r\n {required && <span className=\"mtx-text-danger mtx-text-sm mtx-leading-4\">*</span>}\r\n </FormLabel>\r\n <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n <DateRangePicker\r\n {...(slotProps?.datepickerProps ?? {})}\r\n selected={field.value}\r\n onSelect={field.onChange}\r\n disabled={disabled || readOnly}\r\n />\r\n </FormControl>\r\n <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n </FormItem>\r\n );\r\n }}\r\n />\r\n );\r\n};\r\nexport { FormDateRangePicker, type FormDateRangePickerProps };\r\n"],"names":["FormDateRangePicker","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","DateRangePicker","FormMessage"],"mappings":";;;AAuDA,MAAMA,IAAsB,CAC1BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,MAAkBX;AAEnI,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAX;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAO,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIR,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAE,EAAC,QAAA,EAAK,WAAU,6CAA4C,UAAA,IAAA,CAAC;AAAA,QAAA,GAC5E;AAAA,0BACCM,GAAA,EAAa,GAAIT,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAG;AAAA,UAACO;AAAA,UAAA;AAAA,YACE,GAAIV,GAAW,mBAAmB,CAAA;AAAA,YACnC,UAAUK,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,YAChB,UAAUV,KAAYC;AAAA,UAAA;AAAA,QAAA,GAE1B;AAAA,0BACCe,GAAA,EAAa,GAAIX,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formtimepicker.es.js","sources":["../src/components/form-time-picker/FormTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\nimport { TimePicker, TimePickerProps } from \"../date-picker/TimePicker\";\r\n\r\ntype FormTimePickerProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n ControllerProps<TFieldValues, TName>,\r\n \"render\"\r\n> &\r\n React.ComponentProps<typeof FormItem> & {\r\n label: string;\r\n control: Control<TFieldValues>;\r\n required?: boolean;\r\n readOnly?: boolean;\r\n is24HourMode?: boolean;\r\n slotProps?: {\r\n formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n timepickerProps?: Partial<TimePickerProps>;\r\n };\r\n };\r\n\r\nconst FormTimePicker = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormTimePickerProps<TFieldValues, TName>) => {\r\n const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, is24HourMode, ...formItemProps } =\r\n props;\r\n\r\n return (\r\n <FormField\r\n control={control}\r\n name={name}\r\n defaultValue={defaultValue}\r\n disabled={disabled}\r\n rules={rules}\r\n shouldUnregister={shouldUnregister}\r\n render={({ field }) => {\r\n return (\r\n <FormItem {...formItemProps}>\r\n <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n {label}\r\n {required && <span className=\"mtx-text-danger mtx-text-sm mtx-leading-4\">*</span>}\r\n </FormLabel>\r\n <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n <TimePicker\r\n {...(slotProps?.timepickerProps ?? {})}\r\n time={field.value}\r\n onTimeChange={field.onChange}\r\n disabled={disabled || readOnly}\r\n is24HourMode={is24HourMode}\r\n />\r\n </FormControl>\r\n <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n </FormItem>\r\n );\r\n }}\r\n />\r\n );\r\n};\r\nexport { FormTimePicker, type FormTimePickerProps };\r\n"],"names":["FormTimePicker","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","is24HourMode","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","TimePicker","FormMessage"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"formtimepicker.es.js","sources":["../src/components/form-time-picker/FormTimePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { FormControl, FormField, FormItem, FormLabel, FormMessage } from \"../form/Form\";\r\nimport { SlotProps } from \"@radix-ui/react-slot\";\r\nimport { Control, ControllerProps, FieldPath, FieldValues } from \"react-hook-form\";\r\nimport { TimePicker, TimePickerProps } from \"../date-picker/TimePicker\";\r\n\r\n/**\r\n * Props for FormTimePicker.\r\n *\r\n * The bound field value should be a Time object or undefined.\r\n * In 12-hour mode, include ampm in the stored value.\r\n * In 24-hour mode, omit ampm and use hour values from 0-23.\r\n */\r\ntype FormTimePickerProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<\r\n ControllerProps<TFieldValues, TName>,\r\n \"render\"\r\n> &\r\n React.ComponentProps<typeof FormItem> & {\r\n /** Label rendered above the picker. */\r\n label: string;\r\n /** React Hook Form control instance. */\r\n control: Control<TFieldValues>;\r\n /** Shows the required asterisk next to the label. */\r\n required?: boolean;\r\n /** Keeps the field readable while preventing edits. */\r\n readOnly?: boolean;\r\n /** Enables 24-hour mode and hides the AM/PM selector when true. */\r\n is24HourMode?: boolean;\r\n /** Props forwarded to the form shell and underlying TimePicker. */\r\n slotProps?: {\r\n formLabelProps?: React.HTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>;\r\n formMessageProps?: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>;\r\n formControlProps?: Omit<SlotProps & React.RefAttributes<HTMLElement>, \"ref\"> & React.RefAttributes<HTMLElement>;\r\n /** Props forwarded to the underlying TimePicker. */\r\n timepickerProps?: Partial<TimePickerProps>;\r\n };\r\n };\r\n\r\n/**\r\n * React Hook Form wrapper around TimePicker.\r\n *\r\n * Binds a Time object to the shared time picker and renders the label,\r\n * validation message, and disabled/read-only handling.\r\n *\r\n * @example\r\n * const form = useForm<{ reminder?: { hour: number; minute: number; ampm?: \"AM\" | \"PM\" } }>({\r\n * defaultValues: { reminder: { hour: 9, minute: 30, ampm: \"AM\" } },\r\n * });\r\n *\r\n * <FormTimePicker control={form.control} name=\"reminder\" label=\"Reminder time\" />\r\n *\r\n * @example\r\n * const form = useForm<{ shiftStart?: { hour: number; minute: number } }>({\r\n * defaultValues: { shiftStart: { hour: 14, minute: 0 } },\r\n * });\r\n *\r\n * <FormTimePicker control={form.control} name=\"shiftStart\" label=\"Shift start\" is24HourMode />\r\n */\r\nconst FormTimePicker = <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(props: FormTimePickerProps<TFieldValues, TName>) => {\r\n const { name, control, defaultValue, disabled, readOnly, rules, shouldUnregister, label, slotProps, required, is24HourMode, ...formItemProps } =\r\n props;\r\n\r\n return (\r\n <FormField\r\n control={control}\r\n name={name}\r\n defaultValue={defaultValue}\r\n disabled={disabled}\r\n rules={rules}\r\n shouldUnregister={shouldUnregister}\r\n render={({ field }) => {\r\n return (\r\n <FormItem {...formItemProps}>\r\n <FormLabel {...(slotProps?.formLabelProps ?? {})}>\r\n {label}\r\n {required && <span className=\"mtx-text-danger mtx-text-sm mtx-leading-4\">*</span>}\r\n </FormLabel>\r\n <FormControl {...(slotProps?.formControlProps ?? {})}>\r\n <TimePicker\r\n {...(slotProps?.timepickerProps ?? {})}\r\n time={field.value}\r\n onTimeChange={field.onChange}\r\n disabled={disabled || readOnly}\r\n is24HourMode={is24HourMode}\r\n />\r\n </FormControl>\r\n <FormMessage {...(slotProps?.formMessageProps ?? {})} />\r\n </FormItem>\r\n );\r\n }}\r\n />\r\n );\r\n};\r\nexport { FormTimePicker, type FormTimePickerProps };\r\n"],"names":["FormTimePicker","props","name","control","defaultValue","disabled","readOnly","rules","shouldUnregister","label","slotProps","required","is24HourMode","formItemProps","jsx","FormField","field","jsxs","FormItem","FormLabel","FormControl","TimePicker","FormMessage"],"mappings":";;;AA2DA,MAAMA,IAAiB,CAA0EC,MAAoD;AACnJ,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,kBAAAC,GAAkB,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,cAAAC,GAAc,GAAGC,MAC7HZ;AAEF,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAAZ;AAAA,MACA,MAAAD;AAAA,MACA,cAAAE;AAAA,MACA,UAAAC;AAAA,MACA,OAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAQ,QAEP,gBAAAC,EAACC,GAAA,EAAU,GAAGL,GACZ,UAAA;AAAA,QAAA,gBAAAI,EAACE,GAAA,EAAW,GAAIT,GAAW,kBAAkB,CAAA,GAC1C,UAAA;AAAA,UAAAD;AAAA,UACAE,KAAY,gBAAAG,EAAC,QAAA,EAAK,WAAU,6CAA4C,UAAA,IAAA,CAAC;AAAA,QAAA,GAC5E;AAAA,0BACCM,GAAA,EAAa,GAAIV,GAAW,oBAAoB,CAAA,GAC/C,UAAA,gBAAAI;AAAA,UAACO;AAAA,UAAA;AAAA,YACE,GAAIX,GAAW,mBAAmB,CAAA;AAAA,YACnC,MAAMM,EAAM;AAAA,YACZ,cAAcA,EAAM;AAAA,YACpB,UAAUX,KAAYC;AAAA,YACtB,cAAAM;AAAA,UAAA;AAAA,QAAA,GAEJ;AAAA,0BACCU,GAAA,EAAa,GAAIZ,GAAW,oBAAoB,CAAA,EAAC,CAAI;AAAA,MAAA,GACxD;AAAA,IAEJ;AAAA,EAAA;AAGN;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -13,8 +13,8 @@ export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, Comma
|
|
|
13
13
|
export { ConfirmProvider, useConfirm } from './components/confirm/Confirm';
|
|
14
14
|
export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from './components/context-menu/ContextMenu';
|
|
15
15
|
export { DataGrid, DataGridContent, DataGridActionBar, SearchAction, FreezeAction, PrintAction, RefreshAction, ExtraActions, DeleteAction, type DataGridProps, type DataGridContentProps, type DatagridActionBarProps, type SearchActionProps, type FreezeActionProps, type RefreshActionProps, type ExtraActionsProps, type DeleteActionProps, useDataGrid, dataGridDefaultTheme, } from './components/data-grid/DataGrid';
|
|
16
|
-
export { DatePicker, DesktopDatePicker, MobileDatePicker, type DatePickerProps, type DesktopDatePickerProps, type MobileDatePickerProps, } from './components/date-picker/DatePicker';
|
|
17
|
-
export { DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, type DateRangePickerProps, type DesktopDateRangePickerProps, type MobileDateRangePickerProps, } from './components/date-picker/DateRangePicker';
|
|
16
|
+
export { DatePicker, DesktopDatePicker, MobileDatePicker, type DateOnlyString, type DatePickerProps, type DesktopDatePickerProps, type DateValue, type MobileDatePickerProps, } from './components/date-picker/DatePicker';
|
|
17
|
+
export { DateRangePicker, DesktopDateRangePicker, MobileDateRangePicker, type DateOnlyRange, type DateRangePickerProps, type DesktopDateRangePickerProps, type DateRangeValue, type MobileDateRangePickerProps, } from './components/date-picker/DateRangePicker';
|
|
18
18
|
export { TimePicker, MobileTimePicker, DesktopTimePicker, type Time, type TimePickerProps, type MobileTimePickerProps, type DesktopTimePickerProps, } from './components/date-picker/TimePicker';
|
|
19
19
|
export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogOverlayProps, type DialogPortalProps, type DialogProps, type DialogTitleProps, type DialogTriggerProps, } from './components/dialog/Dialog';
|
|
20
20
|
export { Drawer, DrawerContent, DrawerMain, type DrawerContentProps, type DrawerMainProps, type DrawerProps } from './components/drawer/Drawer';
|