@lerianstudio/sindarian-ui 1.4.0-beta.3 → 1.4.0-beta.5
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/form/date-picker-field/index.d.ts +12 -2
- package/dist/components/form/date-picker-field/index.d.ts.map +1 -1
- package/dist/components/form/date-picker-field/index.js +7 -2
- package/dist/components/form/date-range-field/index.d.ts +12 -2
- package/dist/components/form/date-range-field/index.d.ts.map +1 -1
- package/dist/components/form/date-range-field/index.js +3 -2
- package/dist/components/form/date-time-picker-field/index.d.ts +12 -2
- package/dist/components/form/date-time-picker-field/index.d.ts.map +1 -1
- package/dist/components/form/date-time-picker-field/index.js +3 -2
- package/dist/components/form/input-field/index.d.ts +12 -2
- package/dist/components/form/input-field/index.d.ts.map +1 -1
- package/dist/components/form/input-field/index.js +29 -5
- package/dist/components/form/select-field/index.d.ts +29 -5
- package/dist/components/form/select-field/index.d.ts.map +1 -1
- package/dist/components/form/select-field/index.js +33 -10
- package/dist/components/page-header/index.d.ts +8 -2
- package/dist/components/page-header/index.d.ts.map +1 -1
- package/dist/components/page-header/index.js +4 -4
- package/dist/components/ui/badge/index.d.ts +8 -0
- package/dist/components/ui/badge/index.d.ts.map +1 -1
- package/dist/components/ui/badge/index.js +9 -1
- package/dist/components/ui/calendar/index.d.ts.map +1 -1
- package/dist/components/ui/calendar/index.js +1 -4
- package/dist/components/ui/form.d.ts +4 -4
- package/dist/components/ui/form.d.ts.map +1 -1
- package/dist/components/ui/form.js +12 -6
- package/dist/components/ui/multiple-select/index.d.ts +11 -3
- package/dist/components/ui/multiple-select/index.d.ts.map +1 -1
- package/dist/components/ui/select/index.d.ts +5 -0
- package/dist/components/ui/select/index.d.ts.map +1 -1
- package/dist/components/ui/select/index.js +24 -1
- package/dist/domain/blotter/index.d.ts +2 -2
- package/dist/domain/delinquency-aging/aging-buckets.d.ts.map +1 -1
- package/dist/domain/delinquency-aging/aging-buckets.js +1 -1
- package/dist/domain/delinquency-aging/index.d.ts.map +1 -1
- package/dist/domain/delinquency-aging/index.js +1 -1
- package/dist/domain/figure/index.d.ts +11 -9
- package/dist/domain/figure/index.d.ts.map +1 -1
- package/dist/domain/figure/index.js +8 -8
- package/dist/domain/key-id/index.d.ts +1 -1
- package/dist/domain/key-id/index.d.ts.map +1 -1
- package/dist/domain/key-id/index.js +1 -1
- package/dist/domain/section-label/index.d.ts +10 -7
- package/dist/domain/section-label/index.d.ts.map +1 -1
- package/dist/domain/status-rail/index.d.ts +1 -1
- package/dist/domain/status-rail/index.d.ts.map +1 -1
- package/dist/domain/status-rail/index.js +8 -4
- package/dist/enterprise/alert-banner/index.d.ts +5 -3
- package/dist/enterprise/alert-banner/index.d.ts.map +1 -1
- package/dist/enterprise/alert-banner/index.js +2 -2
- package/dist/enterprise/data-table/column-size.d.ts +70 -0
- package/dist/enterprise/data-table/column-size.d.ts.map +1 -0
- package/dist/enterprise/data-table/column-size.js +103 -0
- package/dist/enterprise/data-table/index.d.ts.map +1 -1
- package/dist/enterprise/data-table/index.js +22 -2
- package/dist/enterprise/date-range-picker/index.d.ts +8 -1
- package/dist/enterprise/date-range-picker/index.d.ts.map +1 -1
- package/dist/enterprise/date-range-picker/index.js +10 -5
- package/dist/enterprise/stat-card/index.d.ts +3 -3
- package/dist/enterprise/stat-card/index.d.ts.map +1 -1
- package/dist/enterprise/stat-card/index.js +1 -1
- package/dist/enterprise/status-badge/index.js +1 -1
- package/dist/enterprise/virtualized-table/index.d.ts +18 -2
- package/dist/enterprise/virtualized-table/index.d.ts.map +1 -1
- package/dist/enterprise/virtualized-table/index.js +31 -4
- package/dist/esm/components/form/date-picker-field/index.d.ts +12 -2
- package/dist/esm/components/form/date-picker-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/date-picker-field/index.js +7 -2
- package/dist/esm/components/form/date-range-field/index.d.ts +12 -2
- package/dist/esm/components/form/date-range-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/date-range-field/index.js +3 -2
- package/dist/esm/components/form/date-time-picker-field/index.d.ts +12 -2
- package/dist/esm/components/form/date-time-picker-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/date-time-picker-field/index.js +3 -2
- package/dist/esm/components/form/input-field/index.d.ts +12 -2
- package/dist/esm/components/form/input-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/input-field/index.js +29 -5
- package/dist/esm/components/form/select-field/index.d.ts +29 -5
- package/dist/esm/components/form/select-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/select-field/index.js +33 -10
- package/dist/esm/components/page-header/index.d.ts +8 -2
- package/dist/esm/components/page-header/index.d.ts.map +1 -1
- package/dist/esm/components/page-header/index.js +4 -4
- package/dist/esm/components/ui/badge/index.d.ts +8 -0
- package/dist/esm/components/ui/badge/index.d.ts.map +1 -1
- package/dist/esm/components/ui/badge/index.js +9 -1
- package/dist/esm/components/ui/calendar/index.d.ts.map +1 -1
- package/dist/esm/components/ui/calendar/index.js +1 -4
- package/dist/esm/components/ui/form.d.ts +4 -4
- package/dist/esm/components/ui/form.d.ts.map +1 -1
- package/dist/esm/components/ui/form.js +12 -6
- package/dist/esm/components/ui/multiple-select/index.d.ts +11 -3
- package/dist/esm/components/ui/multiple-select/index.d.ts.map +1 -1
- package/dist/esm/components/ui/select/index.d.ts +5 -0
- package/dist/esm/components/ui/select/index.d.ts.map +1 -1
- package/dist/esm/components/ui/select/index.js +24 -1
- package/dist/esm/domain/blotter/index.d.ts +2 -2
- package/dist/esm/domain/delinquency-aging/aging-buckets.d.ts.map +1 -1
- package/dist/esm/domain/delinquency-aging/aging-buckets.js +1 -1
- package/dist/esm/domain/delinquency-aging/index.d.ts.map +1 -1
- package/dist/esm/domain/delinquency-aging/index.js +1 -1
- package/dist/esm/domain/figure/index.d.ts +11 -9
- package/dist/esm/domain/figure/index.d.ts.map +1 -1
- package/dist/esm/domain/figure/index.js +8 -8
- package/dist/esm/domain/key-id/index.d.ts +1 -1
- package/dist/esm/domain/key-id/index.d.ts.map +1 -1
- package/dist/esm/domain/key-id/index.js +1 -1
- package/dist/esm/domain/section-label/index.d.ts +10 -7
- package/dist/esm/domain/section-label/index.d.ts.map +1 -1
- package/dist/esm/domain/status-rail/index.d.ts +1 -1
- package/dist/esm/domain/status-rail/index.d.ts.map +1 -1
- package/dist/esm/domain/status-rail/index.js +8 -4
- package/dist/esm/enterprise/alert-banner/index.d.ts +5 -3
- package/dist/esm/enterprise/alert-banner/index.d.ts.map +1 -1
- package/dist/esm/enterprise/alert-banner/index.js +2 -2
- package/dist/esm/enterprise/data-table/column-size.d.ts +70 -0
- package/dist/esm/enterprise/data-table/column-size.d.ts.map +1 -0
- package/dist/esm/enterprise/data-table/column-size.js +97 -0
- package/dist/esm/enterprise/data-table/index.d.ts.map +1 -1
- package/dist/esm/enterprise/data-table/index.js +22 -2
- package/dist/esm/enterprise/date-range-picker/index.d.ts +8 -1
- package/dist/esm/enterprise/date-range-picker/index.d.ts.map +1 -1
- package/dist/esm/enterprise/date-range-picker/index.js +10 -5
- package/dist/esm/enterprise/stat-card/index.d.ts +3 -3
- package/dist/esm/enterprise/stat-card/index.d.ts.map +1 -1
- package/dist/esm/enterprise/stat-card/index.js +1 -1
- package/dist/esm/enterprise/status-badge/index.js +1 -1
- package/dist/esm/enterprise/virtualized-table/index.d.ts +18 -2
- package/dist/esm/enterprise/virtualized-table/index.d.ts.map +1 -1
- package/dist/esm/enterprise/virtualized-table/index.js +31 -4
- package/dist/esm/lib/typography.d.ts +21 -6
- package/dist/esm/lib/typography.d.ts.map +1 -1
- package/dist/esm/lib/typography.js +20 -5
- package/dist/globals.css +51 -16
- package/dist/lib/typography.d.ts +21 -6
- package/dist/lib/typography.d.ts.map +1 -1
- package/dist/lib/typography.js +20 -5
- package/package.json +1 -1
|
@@ -1,6 +1,13 @@
|
|
|
1
|
+
import { Calendar } from '../../../components/ui/calendar';
|
|
1
2
|
import * as React from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
+
import { ComponentProps, ReactNode } from 'react';
|
|
3
4
|
import { Control, FieldValues } from 'react-hook-form';
|
|
5
|
+
/**
|
|
6
|
+
* The calendar's locale type, taken straight off the Calendar props so the
|
|
7
|
+
* public signature stays the react-day-picker/date-fns `Locale` without this
|
|
8
|
+
* package taking a direct date-fns dependency.
|
|
9
|
+
*/
|
|
10
|
+
type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
|
|
4
11
|
export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
|
|
5
12
|
name: string;
|
|
6
13
|
label?: ReactNode;
|
|
@@ -16,6 +23,9 @@ export type DatePickerFieldProps<T extends FieldValues = FieldValues> = {
|
|
|
16
23
|
align?: 'start' | 'center' | 'end';
|
|
17
24
|
'data-testid'?: string;
|
|
18
25
|
valueAsString?: boolean;
|
|
26
|
+
/** date-fns locale for the calendar. Defaults to en-US. */
|
|
27
|
+
locale?: CalendarLocale;
|
|
19
28
|
};
|
|
20
|
-
export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
|
|
29
|
+
export declare const DatePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, valueAsString, locale, ...others }: DatePickerFieldProps<T>) => React.JSX.Element;
|
|
30
|
+
export {};
|
|
21
31
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-picker-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAkBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACtE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4JAgBlE,oBAAoB,CAAC,CAAC,CAAC,sBAiGzB,CAAA"}
|
|
@@ -47,7 +47,8 @@ const utils_1 = require("../../../lib/utils");
|
|
|
47
47
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
48
48
|
const lucide_react_1 = require("lucide-react");
|
|
49
49
|
const React = __importStar(require("react"));
|
|
50
|
-
const
|
|
50
|
+
const locale_1 = require("react-day-picker/locale");
|
|
51
|
+
const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY', align = 'start', valueAsString, locale = locale_1.enUS, ...others }) => {
|
|
51
52
|
const [open, setOpen] = React.useState(false);
|
|
52
53
|
return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
|
|
53
54
|
const convertFieldValueToDate = (fieldValue) => {
|
|
@@ -72,7 +73,11 @@ const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeh
|
|
|
72
73
|
const handleSelect = (date) => {
|
|
73
74
|
field.onChange(convertDateToOutputFormat(date));
|
|
74
75
|
};
|
|
75
|
-
return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: (0, dayjs_1.default)(value).format(dateFormat) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single",
|
|
76
|
+
return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: (0, dayjs_1.default)(value).format(dateFormat) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single",
|
|
77
|
+
// `required` mirrors the field's own required: a required
|
|
78
|
+
// field is not emptied by a re-click; an optional one keeps
|
|
79
|
+
// react-day-picker's clear gesture.
|
|
80
|
+
required: required, defaultMonth: value, selected: value, onSelect: handleSelect, disabled: disabled || readOnly, locale: locale }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
|
|
76
81
|
} }));
|
|
77
82
|
};
|
|
78
83
|
exports.DatePickerField = DatePickerField;
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
+
import { Calendar } from '../../../components/ui/calendar';
|
|
1
2
|
import * as React from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
+
import { type ComponentProps, ReactNode } from 'react';
|
|
3
4
|
import { Control, FieldValues } from 'react-hook-form';
|
|
5
|
+
/**
|
|
6
|
+
* The calendar's locale type, taken straight off the Calendar props so the
|
|
7
|
+
* public signature stays the react-day-picker/date-fns `Locale` without this
|
|
8
|
+
* package taking a direct date-fns dependency.
|
|
9
|
+
*/
|
|
10
|
+
type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
|
|
4
11
|
export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
|
|
5
12
|
name: string;
|
|
6
13
|
label?: ReactNode;
|
|
@@ -15,7 +22,10 @@ export type DateRangeFieldProps<T extends FieldValues = FieldValues> = {
|
|
|
15
22
|
numberOfMonths?: number;
|
|
16
23
|
dateFormat?: string;
|
|
17
24
|
align?: 'start' | 'center' | 'end';
|
|
25
|
+
/** date-fns locale for the calendar. Defaults to en-US. */
|
|
26
|
+
locale?: CalendarLocale;
|
|
18
27
|
'data-testid'?: string;
|
|
19
28
|
};
|
|
20
|
-
export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
|
|
29
|
+
export declare const DateRangeField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths, dateFormat, align, locale, ...others }: DateRangeFieldProps<T>) => React.JSX.Element;
|
|
30
|
+
export {};
|
|
21
31
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-range-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAkBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACrE,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6JAgBjE,mBAAmB,CAAC,CAAC,CAAC,sBA2ExB,CAAA"}
|
|
@@ -47,11 +47,12 @@ const utils_1 = require("../../../lib/utils");
|
|
|
47
47
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
48
48
|
const lucide_react_1 = require("lucide-react");
|
|
49
49
|
const React = __importStar(require("react"));
|
|
50
|
-
const
|
|
50
|
+
const locale_1 = require("react-day-picker/locale");
|
|
51
|
+
const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, numberOfMonths = 2, dateFormat = 'MMM DD, YYYY', align = 'start', locale = locale_1.enUS, ...others }) => {
|
|
51
52
|
const [open, setOpen] = React.useState(false);
|
|
52
53
|
return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
|
|
53
54
|
const value = field.value;
|
|
54
|
-
return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value?.from ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, dayjs_1.default)(value.from).format(dateFormat), " -", ' ', (0, dayjs_1.default)(value.to).format(dateFormat)] })) : ((0, dayjs_1.default)(value.from).format(dateFormat)) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: setOpen, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "outline", disabled: disabled, className: (0, utils_1.cn)('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: (0, jsx_runtime_1.jsx)(lucide_react_1.CalendarIcon, { className: "size-4" }), children: value?.from ? ((0, jsx_runtime_1.jsx)("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, dayjs_1.default)(value.from).format(dateFormat), " -", ' ', (0, dayjs_1.default)(value.to).format(dateFormat)] })) : ((0, dayjs_1.default)(value.from).format(dateFormat)) })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
|
|
55
56
|
} }));
|
|
56
57
|
};
|
|
57
58
|
exports.DateRangeField = DateRangeField;
|
|
@@ -1,6 +1,13 @@
|
|
|
1
|
+
import { Calendar } from '../../../components/ui/calendar';
|
|
1
2
|
import * as React from 'react';
|
|
2
|
-
import { type ReactNode } from 'react';
|
|
3
|
+
import { type ComponentProps, type ReactNode } from 'react';
|
|
3
4
|
import { Control, FieldValues } from 'react-hook-form';
|
|
5
|
+
/**
|
|
6
|
+
* The calendar's locale type, taken straight off the Calendar props so the
|
|
7
|
+
* public signature stays the react-day-picker/date-fns `Locale` without this
|
|
8
|
+
* package taking a direct date-fns dependency.
|
|
9
|
+
*/
|
|
10
|
+
type CalendarLocale = ComponentProps<typeof Calendar>['locale'];
|
|
4
11
|
export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
|
|
5
12
|
name: string;
|
|
6
13
|
label?: ReactNode;
|
|
@@ -14,10 +21,13 @@ export type DateTimePickerFieldProps<T extends FieldValues = FieldValues> = {
|
|
|
14
21
|
required?: boolean;
|
|
15
22
|
dateFormat?: string;
|
|
16
23
|
align?: 'start' | 'center' | 'end';
|
|
24
|
+
/** date-fns locale for the calendar. Defaults to en-US. */
|
|
25
|
+
locale?: CalendarLocale;
|
|
17
26
|
'data-testid'?: string;
|
|
18
27
|
minDate?: Date;
|
|
19
28
|
maxDate?: Date;
|
|
20
29
|
defaultTime?: string;
|
|
21
30
|
};
|
|
22
|
-
export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
|
|
31
|
+
export declare const DateTimePickerField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, description, placeholder, disabled, readOnly, control, required, dateFormat, align, locale, minDate, maxDate, defaultTime, ...others }: DateTimePickerFieldProps<T>) => React.JSX.Element;
|
|
32
|
+
export {};
|
|
23
33
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/date-time-picker-field/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AAmBnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D;;;;GAIG;AACH,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAA;AAE/D,MAAM,MAAM,wBAAwB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAC1E,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,2DAA2D;IAC3D,MAAM,CAAC,EAAE,cAAc,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,4KAkBtE,wBAAwB,CAAC,CAAC,CAAC,sBAiK7B,CAAA"}
|
|
@@ -48,7 +48,8 @@ const utils_1 = require("../../../lib/utils");
|
|
|
48
48
|
const dayjs_1 = __importDefault(require("dayjs"));
|
|
49
49
|
const lucide_react_1 = require("lucide-react");
|
|
50
50
|
const React = __importStar(require("react"));
|
|
51
|
-
const
|
|
51
|
+
const locale_1 = require("react-day-picker/locale");
|
|
52
|
+
const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, placeholder = 'Select date and time...', disabled, readOnly, control, required, dateFormat = 'MMM DD, YYYY HH:mm', align = 'start', locale = locale_1.enUS, minDate, maxDate, defaultTime = '00:00', ...others }) => {
|
|
52
53
|
const [open, setOpen] = React.useState(false);
|
|
53
54
|
const parseDefaultTime = (time) => {
|
|
54
55
|
const [h, m] = time.split(':').map(Number);
|
|
@@ -97,7 +98,7 @@ const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, pl
|
|
|
97
98
|
e.preventDefault();
|
|
98
99
|
handleClear(e);
|
|
99
100
|
}
|
|
100
|
-
}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "size-4" }) }))] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, disabled: (date) => {
|
|
101
|
+
}, children: (0, jsx_runtime_1.jsx)(lucide_react_1.XIcon, { className: "size-4" }) }))] }), (0, jsx_runtime_1.jsx)(popover_1.PopoverContent, { className: "w-auto p-0", align: align, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-stretch", children: [(0, jsx_runtime_1.jsx)(calendar_1.Calendar, { mode: "single", defaultMonth: validCurrent ? validCurrent.toDate() : undefined, selected: validCurrent ? validCurrent.toDate() : undefined, onSelect: handleDateSelect, locale: locale, disabled: (date) => {
|
|
101
102
|
if (disabled || readOnly)
|
|
102
103
|
return true;
|
|
103
104
|
if (minDate &&
|
|
@@ -11,16 +11,26 @@ export type InputFieldProps<T extends FieldValues = FieldValues> = {
|
|
|
11
11
|
description?: ReactNode;
|
|
12
12
|
startAdornment?: ReactNode;
|
|
13
13
|
endAdornment?: ReactNode;
|
|
14
|
-
control
|
|
14
|
+
/** react-hook-form control. Omit it to drive the field from plain state
|
|
15
|
+
* with `value`/`defaultValue` + `onChange`. */
|
|
16
|
+
control?: Control<T>;
|
|
17
|
+
/** Controlled value for the no-`control` path. */
|
|
18
|
+
value?: string;
|
|
15
19
|
disabled?: boolean;
|
|
16
20
|
readOnly?: boolean;
|
|
17
21
|
minHeight?: number;
|
|
18
22
|
maxHeight?: number;
|
|
19
23
|
textArea?: boolean;
|
|
20
24
|
required?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Seed value. With `control` and no form-level default for this name,
|
|
27
|
+
* react-hook-form treats the seed as a VALUE rather than a default, so
|
|
28
|
+
* `formState.isDirty` reads true after `reset()` and after retyping the
|
|
29
|
+
* seed. Prefer `useForm({ defaultValues })` when dirty tracking matters.
|
|
30
|
+
*/
|
|
21
31
|
defaultValue?: string;
|
|
22
32
|
'data-testid'?: string;
|
|
23
33
|
onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
|
|
24
34
|
};
|
|
25
|
-
export declare const InputField: <T extends FieldValues = FieldValues>({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, onChange, ...others }: InputFieldProps<T>) => import("react").JSX.Element;
|
|
35
|
+
export declare const InputField: <T extends FieldValues = FieldValues>({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, value, onChange, ...others }: InputFieldProps<T>) => import("react").JSX.Element;
|
|
26
36
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input-field/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/input-field/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACzD,OAAO,EAAE,OAAO,EAAkB,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5E,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IACjE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,cAAc,CAAC,EAAE,SAAS,CAAA;IAC1B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;oDACgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,KACzD,IAAI,CAAA;CACV,CAAA;AAeD,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,uMAmB7D,eAAe,CAAC,CAAC,CAAC,gCA2EpB,CAAA"}
|
|
@@ -5,10 +5,34 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const autosize_textarea_1 = require("../../../components/ui/autosize-textarea");
|
|
6
6
|
const form_1 = require("../../../components/ui/form");
|
|
7
7
|
const input_1 = require("../../../components/ui/input");
|
|
8
|
-
const InputField = ({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, onChange, ...others }) => {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
const InputField = ({ className, type, label, tooltip, labelExtra, placeholder, description, startAdornment, endAdornment, required, readOnly, minHeight, maxHeight, textArea, defaultValue, value, onChange, ...others }) => {
|
|
9
|
+
const renderItem = (binding) => ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), (0, jsx_runtime_1.jsx)(form_1.FormControl, { children: textArea ? ((0, jsx_runtime_1.jsx)(autosize_textarea_1.AutosizeTextarea, { className: className, placeholder: placeholder, readOnly: readOnly, minHeight: minHeight, maxHeight: maxHeight, "data-testid": others['data-testid'], ...binding })) : ((0, jsx_runtime_1.jsx)(input_1.Input, { className: className, type: type, placeholder: placeholder, readOnly: readOnly, startAdornment: startAdornment, endAdornment: endAdornment, "data-testid": others['data-testid'], ...binding })) }), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
|
|
10
|
+
if (!others.control) {
|
|
11
|
+
return renderItem({
|
|
12
|
+
name: others.name,
|
|
13
|
+
disabled: others.disabled,
|
|
14
|
+
// Controlled when the caller holds the value, uncontrolled when it only
|
|
15
|
+
// seeds one — supplying both is what React warns about.
|
|
16
|
+
...(value !== undefined ? { value } : { defaultValue }),
|
|
17
|
+
onChange: (e) => onChange?.(e)
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)(form_1.FormField, { ...others, name: others.name,
|
|
21
|
+
// The seed goes through react-hook-form, never straight to the DOM: a
|
|
22
|
+
// value painted on the box only makes the field LOOK filled while the
|
|
23
|
+
// form still submits nothing for that name. Controller seeds its own
|
|
24
|
+
// state from this, so `field.value` carries the seed on both branches.
|
|
25
|
+
defaultValue: defaultValue, render: ({ field }) => renderItem({
|
|
26
|
+
...field,
|
|
27
|
+
// Controlled from mount. react-hook-form hands `undefined` for any
|
|
28
|
+
// name the form declares no default for; React then mounts the box
|
|
29
|
+
// uncontrolled and flips it on the first keystroke, losing that
|
|
30
|
+
// character.
|
|
31
|
+
value: field.value ?? '',
|
|
32
|
+
onChange: (e) => {
|
|
33
|
+
field.onChange(e);
|
|
34
|
+
onChange?.(e);
|
|
35
|
+
}
|
|
36
|
+
}) }));
|
|
13
37
|
};
|
|
14
38
|
exports.InputField = InputField;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { PropsWithChildren, ReactNode } from 'react';
|
|
2
2
|
import { Control, FieldValues } from 'react-hook-form';
|
|
3
|
-
|
|
3
|
+
type SelectFieldSharedProps<T extends FieldValues = FieldValues> = PropsWithChildren & {
|
|
4
4
|
name: string;
|
|
5
5
|
label?: ReactNode;
|
|
6
6
|
tooltip?: string;
|
|
@@ -9,12 +9,36 @@ export type SelectFieldProps<T extends FieldValues = FieldValues> = PropsWithChi
|
|
|
9
9
|
placeholder?: string;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
readOnly?: boolean;
|
|
12
|
-
control
|
|
13
|
-
|
|
12
|
+
/** react-hook-form control. Omit it to drive the field from plain state
|
|
13
|
+
* with `value` + `onChange`. */
|
|
14
|
+
control?: Control<T>;
|
|
14
15
|
required?: boolean;
|
|
15
16
|
emptyMessage?: string;
|
|
16
|
-
onChange?: (value: string | string[]) => void;
|
|
17
17
|
'data-testid'?: string;
|
|
18
18
|
};
|
|
19
|
-
|
|
19
|
+
/**
|
|
20
|
+
* `multi` is the DISCRIMINANT, not an independent flag: it selects which of the
|
|
21
|
+
* two field shapes the rest of the props must speak. Typed as a plain boolean
|
|
22
|
+
* beside `value?: string | string[]`, `multi` with `value="pix"` compiled and
|
|
23
|
+
* then rendered empty — the multi implementation only understands arrays and
|
|
24
|
+
* turned the string into `[]`, dropping the caller's selection with no error
|
|
25
|
+
* anywhere. The mismatch is unrepresentable now, and a multi consumer's
|
|
26
|
+
* `onChange` receives `string[]` without a cast at the call site.
|
|
27
|
+
*/
|
|
28
|
+
type SelectFieldModeProps = {
|
|
29
|
+
multi: true;
|
|
30
|
+
/** Controlled values for the no-`control` path. Omit to let the select
|
|
31
|
+
* keep its own state and just report changes through `onChange`. */
|
|
32
|
+
value?: string[];
|
|
33
|
+
onChange?: (value: string[]) => void;
|
|
34
|
+
} | {
|
|
35
|
+
multi?: false;
|
|
36
|
+
/** Controlled value for the no-`control` path. Omit to let the select
|
|
37
|
+
* keep its own state and just report changes through `onChange`. */
|
|
38
|
+
value?: string;
|
|
39
|
+
onChange?: (value: string) => void;
|
|
40
|
+
};
|
|
41
|
+
export type SelectFieldProps<T extends FieldValues = FieldValues> = SelectFieldSharedProps<T> & SelectFieldModeProps;
|
|
42
|
+
export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
|
|
43
|
+
export {};
|
|
20
44
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,kKAiB9D,gBAAgB,CAAC,CAAC,CAAC,sBA6FrB,CAAA"}
|
|
@@ -6,15 +6,38 @@ const form_1 = require("../../../components/ui/form");
|
|
|
6
6
|
const multiple_select_1 = require("../../../components/ui/multiple-select");
|
|
7
7
|
const select_1 = require("../../../components/ui/select");
|
|
8
8
|
const utils_1 = require("../../../lib/utils");
|
|
9
|
-
const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, children, emptyMessage = 'No options found.', onChange, ...others }) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', onChange, ...others }) => {
|
|
10
|
+
// The props union already pairs `multi` with the callback shape that branch
|
|
11
|
+
// emits, but destructuring an intersection loses that correlation — TS sees
|
|
12
|
+
// two unrelated callbacks. Both branches report through this one seam, each
|
|
13
|
+
// with the payload its own union member declared.
|
|
14
|
+
const emitChange = onChange;
|
|
15
|
+
const renderItem = (field) => {
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)(form_1.FormItem, { required: required, children: [label && ((0, jsx_runtime_1.jsx)(form_1.FormLabel, { extra: tooltip ? (0, jsx_runtime_1.jsx)(form_1.FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? ((0, jsx_runtime_1.jsxs)(multiple_select_1.MultipleSelect, { onValueChange: (value) => {
|
|
17
|
+
field.onChange(value);
|
|
18
|
+
emitChange?.(value);
|
|
19
|
+
}, disabled: disabled, ...field, children: [(0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectTrigger, { readOnly: readOnly, children: (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectValue, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(multiple_select_1.MultipleSelectContent, { children: children })] })) : ((0, jsx_runtime_1.jsxs)(select_1.Select, { onValueChange: (value) => {
|
|
20
|
+
field.onChange(value);
|
|
21
|
+
emitChange?.(value);
|
|
22
|
+
}, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [(0, jsx_runtime_1.jsx)(form_1.FormControl, { children: (0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { className: (0, utils_1.cn)(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: placeholder }) }) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectEmpty, { children: emptyMessage }), children] })] })), (0, jsx_runtime_1.jsx)(form_1.FormMessage, {}), description && (0, jsx_runtime_1.jsx)(form_1.FormDescription, { children: description })] }));
|
|
23
|
+
};
|
|
24
|
+
if (!control) {
|
|
25
|
+
// `value` undefined leaves Radix to keep its own state, so an uncontrolled
|
|
26
|
+
// standalone select still opens and picks; `onChange` reports either way.
|
|
27
|
+
// The caller's own `onChange` is invoked by the body, so this is a no-op.
|
|
28
|
+
return renderItem({
|
|
29
|
+
name,
|
|
30
|
+
value,
|
|
31
|
+
onChange: () => { },
|
|
32
|
+
onBlur: () => { },
|
|
33
|
+
ref: () => { },
|
|
34
|
+
disabled
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, ...others,
|
|
38
|
+
// An unset field falls back to the EMPTY value of its own shape: `''`
|
|
39
|
+
// for the single select, `[]` for the multi one. Falling back to `''`
|
|
40
|
+
// for both handed MultipleSelect a string it silently discarded.
|
|
41
|
+
render: ({ field }) => renderItem({ ...field, value: field.value ?? (multi ? [] : '') }) }));
|
|
19
42
|
};
|
|
20
43
|
exports.SelectField = SelectField;
|
|
@@ -16,8 +16,14 @@ export type PageHeaderInfoTitleProps = {
|
|
|
16
16
|
title: string;
|
|
17
17
|
subtitle?: string;
|
|
18
18
|
subtitleCopyToClipboard?: boolean;
|
|
19
|
-
/** Routed to the
|
|
19
|
+
/** Routed to the heading, as it always has been. */
|
|
20
20
|
className?: string;
|
|
21
|
+
/**
|
|
22
|
+
* Heading level to render. Defaults to `h1`, which is correct: this IS the
|
|
23
|
+
* page heading. Set it when the block is nested under an existing `h1` (a
|
|
24
|
+
* wizard step, an embedded panel) so the document outline stays valid.
|
|
25
|
+
*/
|
|
26
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
21
27
|
/**
|
|
22
28
|
* Seam for the wrapper element's own margins. Merged AFTER the hard-coded
|
|
23
29
|
* `mb-12` so a consumer utility (e.g. `mb-0`) wins via tailwind-merge.
|
|
@@ -25,7 +31,7 @@ export type PageHeaderInfoTitleProps = {
|
|
|
25
31
|
containerClassName?: string;
|
|
26
32
|
children?: ReactNode;
|
|
27
33
|
};
|
|
28
|
-
export declare function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children }: PageHeaderInfoTitleProps): import("react").JSX.Element;
|
|
34
|
+
export declare function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children, as: Heading }: PageHeaderInfoTitleProps): import("react").JSX.Element;
|
|
29
35
|
export type PageHeaderInfoTooltipProps = {
|
|
30
36
|
subtitle: string;
|
|
31
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBtE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,aAAa,EACd,EAAE,eAAe,+BAmBjB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBtE,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAc7B;AAED,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,SAAS,EACT,aAAa,EACd,EAAE,eAAe,+BAmBjB;AAED,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IAC5C;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,kBAAkB,EAClB,QAAQ,EACR,EAAE,EAAE,OAAc,EACnB,EAAE,wBAAwB,+BAsB1B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+BAqC5B;AAED,MAAM,MAAM,qCAAqC,GAAG;IAClD,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,gCAAgC,CAAC,EAC/C,QAAQ,EACT,EAAE,qCAAqC,+BAavC;AAED,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,IAAI,EACL,EAAE,8BAA8B,+BA+ChC"}
|
|
@@ -18,7 +18,7 @@ const use_toast_1 = require("../../hooks/use-toast");
|
|
|
18
18
|
const react_tooltip_1 = require("@radix-ui/react-tooltip");
|
|
19
19
|
const PageHeaderContext = (0, react_1.createContext)({ isOpen: false });
|
|
20
20
|
function PageHeaderActionButtons({ className, ...props }) {
|
|
21
|
-
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header-action-buttons", className: (0, utils_1.cn)('flex items-center gap-8', className), ...props }));
|
|
21
|
+
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header-action-buttons", className: (0, utils_1.cn)('flex min-w-0 flex-wrap items-center gap-8', className), ...props }));
|
|
22
22
|
}
|
|
23
23
|
function PageHeaderWrapper({ className, ...props }) {
|
|
24
24
|
const { isOpen } = (0, react_1.useContext)(PageHeaderContext);
|
|
@@ -28,8 +28,8 @@ function PageHeader({ children, className, rootClassName }) {
|
|
|
28
28
|
const [isOpen, setIsOpen] = (0, react_1.useState)(false);
|
|
29
29
|
return ((0, jsx_runtime_1.jsx)(PageHeaderContext.Provider, { value: { isOpen }, children: (0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header", className: (0, utils_1.cn)('mt-12', isOpen && 'mb-12', rootClassName), children: (0, jsx_runtime_1.jsx)(collapsible_1.Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: children }) }) }));
|
|
30
30
|
}
|
|
31
|
-
function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children }) {
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "page-header-info-title", className: (0, utils_1.cn)('mb-12 flex flex-col gap-4', containerClassName), children: [(0, jsx_runtime_1.jsx)(
|
|
31
|
+
function PageHeaderInfoTitle({ title, subtitle, className, containerClassName, children, as: Heading = 'h1' }) {
|
|
32
|
+
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "page-header-info-title", className: (0, utils_1.cn)('mb-12 flex min-w-0 flex-1 flex-col gap-4', containerClassName), children: [(0, jsx_runtime_1.jsx)(Heading, { className: (0, utils_1.cn)('text-foreground text-4xl font-bold', className), "data-testid": "title", children: title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-sm font-medium", children: subtitle }), children] })] }));
|
|
33
33
|
}
|
|
34
34
|
function PageHeaderInfoTooltip({ subtitle }) {
|
|
35
35
|
const { toast } = (0, use_toast_1.useToast)();
|
|
@@ -45,5 +45,5 @@ function PageHeaderCollapsibleInfoTrigger({ question }) {
|
|
|
45
45
|
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header-collapsible-info-trigger", children: (0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "link", className: "flex gap-2 pr-0", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground text-sm font-medium", children: question }), (0, jsx_runtime_1.jsx)(lucide_react_1.HelpCircle, { className: "h-4 w-4" })] }) }) }));
|
|
46
46
|
}
|
|
47
47
|
function PageHeaderCollapsibleInfo({ question, answer, seeMore, href }) {
|
|
48
|
-
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header-collapsible-info", children: (0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between pt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mt-12 flex grow flex-col gap-3 pr-6", children: [(0, jsx_runtime_1.jsx)("
|
|
48
|
+
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "page-header-collapsible-info", children: (0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleContent, { children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-full justify-between pt-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mt-12 flex grow flex-col gap-3 pr-6", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-foreground text-xl font-bold", children: question }), (0, jsx_runtime_1.jsxs)("p", { className: "text-shadcn-500 text-sm leading-relaxed font-medium", children: [answer, seeMore && href && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [' ', (0, jsx_runtime_1.jsxs)("a", { target: "_blank", rel: "noopener noreferrer", href: href, className: "text-shadcn-600 dark:text-shadcn-400 font-medium", children: [(0, jsx_runtime_1.jsx)("span", { className: "underline underline-offset-4", children: seeMore }), (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, className: "ml-1 inline align-middle" })] })] }))] })] }), (0, jsx_runtime_1.jsx)(collapsible_1.CollapsibleTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "link", className: "cursor-pointer self-start", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronUp, { size: 24, className: "text-shadcn-500" }) }) })] }) }) }));
|
|
49
49
|
}
|
|
@@ -7,6 +7,14 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
7
7
|
* role as text over a tinted surface. Do not "fix" this into a solid
|
|
8
8
|
* `bg-credit` fill — that renders red-on-red and is invisible.
|
|
9
9
|
*/
|
|
10
|
+
/**
|
|
11
|
+
* `gap-1` is load-bearing, not decoration: a badge holding a label AND an
|
|
12
|
+
* element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
|
|
13
|
+
* JSX drops the newline-only text node and CSS drops the whitespace-only
|
|
14
|
+
* anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
|
|
15
|
+
* `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
|
|
16
|
+
* `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
|
|
17
|
+
*/
|
|
10
18
|
declare const badgeVariants: (props?: ({
|
|
11
19
|
variant?: "default" | "secondary" | "outline" | "destructive" | "alert" | "success" | "active" | "inactive" | "credit" | "error" | "info" | "purple" | null | undefined;
|
|
12
20
|
size?: "default" | "sm" | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE;;;;;;GAMG;AACH,QAAA,MAAM,aAAa;;;8EA6ClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAUzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE;;;;;;GAMG;AACH;;;;;;;GAOG;AACH,QAAA,MAAM,aAAa;;;8EA6ClB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,GACnD,YAAY,CAAC,OAAO,aAAa,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAE5D,iBAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,qBAUzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -13,7 +13,15 @@ const react_slot_1 = require("@radix-ui/react-slot");
|
|
|
13
13
|
* role as text over a tinted surface. Do not "fix" this into a solid
|
|
14
14
|
* `bg-credit` fill — that renders red-on-red and is invisible.
|
|
15
15
|
*/
|
|
16
|
-
|
|
16
|
+
/**
|
|
17
|
+
* `gap-1` is load-bearing, not decoration: a badge holding a label AND an
|
|
18
|
+
* element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
|
|
19
|
+
* JSX drops the newline-only text node and CSS drops the whitespace-only
|
|
20
|
+
* anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
|
|
21
|
+
* `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
|
|
22
|
+
* `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
|
|
23
|
+
*/
|
|
24
|
+
const badgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-center gap-1 rounded-full border border-border px-2.5 py-0.5 text-sm font-medium transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2', {
|
|
17
25
|
variants: {
|
|
18
26
|
variant: {
|
|
19
27
|
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/calendar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,SAAS,EAET,KAAK,SAAS,EACf,MAAM,kBAAkB,CAAA;AAGzB,OAAO,EAAE,MAAM,EAAkB,MAAM,wBAAwB,CAAA;AAO/D,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAA;CAC/D,qBA0JA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,qBAqCxC;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAA"}
|
|
@@ -105,11 +105,8 @@ function CalendarDayButton({ className, day, modifiers, ...props }) {
|
|
|
105
105
|
if (modifiers.focused)
|
|
106
106
|
ref.current?.focus();
|
|
107
107
|
}, [modifiers.focused]);
|
|
108
|
-
const dayNumber = day.date.getDate();
|
|
109
|
-
const monthName = day.date.toLocaleDateString('en', { month: 'long' });
|
|
110
|
-
const year = day.date.getFullYear();
|
|
111
108
|
return ((0, jsx_runtime_1.jsx)(button_1.Button, { ref: ref, variant: "plain", size: "small", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
|
|
112
109
|
!modifiers.range_start &&
|
|
113
110
|
!modifiers.range_end &&
|
|
114
|
-
!modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "data-today": modifiers.today && !modifiers.range_middle, "aria-
|
|
111
|
+
!modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "data-today": modifiers.today && !modifiers.range_middle, "aria-current": modifiers.today ? 'date' : undefined, className: (0, utils_1.cn)('data-[today=true]:bg-accent data-[today=true]:text-accent-foreground data-[selected-single=true]:bg-accent data-[selected-single=true]:text-accent-foreground data-[range-middle=true]:bg-accent-mute data-[range-middle=true]:text-foreground data-[range-start=true]:bg-accent data-[range-start=true]:text-accent-foreground data-[range-end=true]:bg-accent data-[range-end=true]:text-accent-foreground focus-visible:border-accent focus-visible:ring-accent/50 relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal focus-visible:ring-[3px] focus-visible:outline-none data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:font-bold data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:font-bold data-[selected-single=true]:font-bold data-[today=true]:font-bold [&>span]:text-xs [&>span]:opacity-70', defaultClassNames.day, className), ...props }));
|
|
115
112
|
}
|
|
@@ -5,10 +5,10 @@ import { TooltipProviderProps } from '@radix-ui/react-tooltip';
|
|
|
5
5
|
declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
|
|
6
6
|
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
|
|
7
7
|
declare const useFormField: () => {
|
|
8
|
-
invalid
|
|
9
|
-
isDirty
|
|
10
|
-
isTouched
|
|
11
|
-
isValidating
|
|
8
|
+
invalid?: boolean | undefined;
|
|
9
|
+
isDirty?: boolean | undefined;
|
|
10
|
+
isTouched?: boolean | undefined;
|
|
11
|
+
isValidating?: boolean | undefined;
|
|
12
12
|
error?: import("react-hook-form").FieldError;
|
|
13
13
|
id: string;
|
|
14
14
|
name: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAS9D,QAAA,MAAM,IAAI,4MAAe,CAAA;AAazB,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,sBAMtC,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/ui/form.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,cAAc,MAAM,uBAAuB,CAAA;AAEvD,OAAO,EAEL,eAAe,EACf,SAAS,EACT,WAAW,EAGZ,MAAM,iBAAiB,CAAA;AAKxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAS9D,QAAA,MAAM,IAAI,4MAAe,CAAA;AAazB,QAAA,MAAM,SAAS,GACb,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,cAEC,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,sBAMtC,CAAA;AAED,QAAA,MAAM,YAAY;;;;;;;;;;;;CAyBjB,CAAA;AAWD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,QAAQ;eAHD,OAAO;wCAanB,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,KAAK,CAAC,wBAAwB,CACzD,OAAO,cAAc,CAAC,IAAI,CAC3B,GAAG;IACF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,SAAS;YAHL,KAAK,CAAC,SAAS;0CA2BvB,CAAA;AAGF,eAAO,MAAM,WAAW,GAAI,yBAAyB,oBAAoB,sBASxE,CAAA;AAED,QAAA,MAAM,WAAW;;gFAmBf,CAAA;AAGF,QAAA,MAAM,eAAe,yHAcnB,CAAA;AAGF,QAAA,MAAM,WAAW,yHAuBf,CAAA;AAGF,OAAO,EACL,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,eAAe,EACf,WAAW,EACX,SAAS,EACV,CAAA"}
|
|
@@ -53,11 +53,14 @@ exports.FormField = FormField;
|
|
|
53
53
|
const useFormField = () => {
|
|
54
54
|
const fieldContext = React.useContext(FormFieldContext);
|
|
55
55
|
const itemContext = React.useContext(FormItemContext);
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
56
|
+
// `useFormContext()` is null outside a `<Form>` provider, and destructuring it
|
|
57
|
+
// threw — which is what made every Form primitive, and so every *Field built
|
|
58
|
+
// on them, unusable in a plain `useState` filter bar. Inside a provider
|
|
59
|
+
// nothing below changes; outside one, the field simply has no error state.
|
|
60
|
+
const form = (0, react_hook_form_1.useFormContext)();
|
|
61
|
+
const fieldState = form && fieldContext.name
|
|
62
|
+
? form.getFieldState(fieldContext.name, form.formState)
|
|
63
|
+
: undefined;
|
|
61
64
|
const { id, required } = itemContext;
|
|
62
65
|
return {
|
|
63
66
|
id,
|
|
@@ -105,7 +108,10 @@ const FormMessage = React.forwardRef(({ className, children, ...props }, ref) =>
|
|
|
105
108
|
if (!body) {
|
|
106
109
|
return null;
|
|
107
110
|
}
|
|
108
|
-
return ((0, jsx_runtime_1.jsx)("p", { ref: ref, id: formMessageId,
|
|
111
|
+
return ((0, jsx_runtime_1.jsx)("p", { ref: ref, id: formMessageId,
|
|
112
|
+
// The error TEXT token, not `text-destructive`: that is the badge/fill
|
|
113
|
+
// family and measures ~3.8:1 as ink, under AA. Validation copy is text.
|
|
114
|
+
className: (0, utils_1.cn)('text-system-error-h1a text-sm font-medium', className), ...props, children: body }));
|
|
109
115
|
});
|
|
110
116
|
exports.FormMessage = FormMessage;
|
|
111
117
|
FormMessage.displayName = 'FormMessage';
|