@lerianstudio/sindarian-ui 2.0.0-beta.19 → 2.0.0-beta.20
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.js +1 -1
- package/dist/components/form/date-range-field/index.js +1 -1
- package/dist/components/form/date-time-picker-field/index.js +1 -1
- package/dist/components/ui/copy-field/index.js +1 -1
- package/dist/components/ui/file-upload/index.js +2 -2
- package/dist/components/ui/input/styles.css +1 -1
- package/dist/components/ui/otp-input/index.js +1 -1
- package/dist/components/ui/radio-group/index.js +1 -1
- package/dist/components/ui/select/styles.css +1 -1
- package/dist/components/ui/textarea/index.js +1 -1
- package/dist/enterprise/date-range-picker/index.js +4 -4
- package/dist/esm/components/form/date-picker-field/index.js +1 -1
- package/dist/esm/components/form/date-range-field/index.js +1 -1
- package/dist/esm/components/form/date-time-picker-field/index.js +1 -1
- package/dist/esm/components/ui/copy-field/index.js +1 -1
- package/dist/esm/components/ui/file-upload/index.js +2 -2
- package/dist/esm/components/ui/otp-input/index.js +1 -1
- package/dist/esm/components/ui/radio-group/index.js +1 -1
- package/dist/esm/components/ui/textarea/index.js +1 -1
- package/dist/esm/enterprise/date-range-picker/index.js +4 -4
- package/dist/globals.css +4 -0
- package/package.json +1 -1
|
@@ -73,7 +73,7 @@ const DatePickerField = ({ name, label, tooltip, labelExtra, description, placeh
|
|
|
73
73
|
const handleSelect = (date) => {
|
|
74
74
|
field.onChange(convertDateToOutputFormat(date));
|
|
75
75
|
};
|
|
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-
|
|
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-input-border 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
77
|
// `required` mirrors the field's own required: a required
|
|
78
78
|
// field is not emptied by a re-click; an optional one keeps
|
|
79
79
|
// react-day-picker's clear gesture.
|
|
@@ -52,7 +52,7 @@ const DateRangeField = ({ name, label, tooltip, labelExtra, description, placeho
|
|
|
52
52
|
const [open, setOpen] = React.useState(false);
|
|
53
53
|
return ((0, jsx_runtime_1.jsx)(form_1.FormField, { name: name, control: control, render: ({ field }) => {
|
|
54
54
|
const value = field.value;
|
|
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-
|
|
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-input-border 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 })] }));
|
|
56
56
|
} }));
|
|
57
57
|
};
|
|
58
58
|
exports.DateRangeField = DateRangeField;
|
|
@@ -91,7 +91,7 @@ const DateTimePickerField = ({ name, label, tooltip, labelExtra, description, pl
|
|
|
91
91
|
setOpen(false);
|
|
92
92
|
};
|
|
93
93
|
const showClear = !!field.value && !readOnly && !disabled;
|
|
94
|
-
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.jsxs)("div", { className: "relative w-full", 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-
|
|
94
|
+
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.jsxs)("div", { className: "relative w-full", 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-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', showClear && 'pr-8', 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: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
|
|
95
95
|
? validCurrent.format(dateFormat)
|
|
96
96
|
: placeholder }) }) }) }), showClear && ((0, jsx_runtime_1.jsx)("span", { role: "button", tabIndex: 0, "aria-label": "Clear date and time", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-1/2 right-2 z-10 inline-flex shrink-0 -translate-y-1/2 rounded-sm outline-none focus-visible:ring-2", onClick: handleClear, onKeyDown: (e) => {
|
|
97
97
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -146,7 +146,7 @@ function CopyField({ value, label, masked = false, onCopyLabel, revealLabel = 'S
|
|
|
146
146
|
handleFallback();
|
|
147
147
|
}
|
|
148
148
|
};
|
|
149
|
-
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "copy-field", className: "flex w-full flex-col gap-2", children: [label ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "text-muted-foreground text-sm font-semibold", children: label })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-wrapper", className: "border-input-border focus-within:border-ring flex h-10 w-full cursor-text items-center gap-1 rounded-md border pr-1 pl-4 transition-[color,box-shadow]", children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: inputId, "data-slot": "input", "data-testid": "copy-field-input", type: showAsText ? 'text' : 'password', value: value, readOnly: true,
|
|
149
|
+
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "copy-field", className: "flex w-full flex-col gap-2", children: [label ? ((0, jsx_runtime_1.jsx)("label", { htmlFor: inputId, className: "text-muted-foreground text-sm font-semibold", children: label })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-wrapper", className: "border-input-border focus-within:border-ring has-[input:focus]:ring-ring flex h-10 w-full cursor-text items-center gap-1 rounded-md border pr-1 pl-4 transition-[color,box-shadow] has-[input:focus]:ring-2", children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, id: inputId, "data-slot": "input", "data-testid": "copy-field-input", type: showAsText ? 'text' : 'password', value: value, readOnly: true,
|
|
150
150
|
// This field holds secrets: TOTP manual-entry secrets, recovery
|
|
151
151
|
// codes. While masked it renders as type="password", which invites
|
|
152
152
|
// browsers and password managers to autofill it or offer to SAVE its
|
|
@@ -271,7 +271,7 @@ exports.FileUpload = React.forwardRef(function FileUpload({ accept, maxSizeBytes
|
|
|
271
271
|
if (internalRef.current)
|
|
272
272
|
internalRef.current.value = '';
|
|
273
273
|
};
|
|
274
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
|
|
274
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input-border bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
|
|
275
275
|
'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', disabled
|
|
276
276
|
? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
|
|
277
277
|
: 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", accept: accept, disabled: disabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), (0, jsx_runtime_1.jsx)(icon_button_1.IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove?.trim() ? labels.remove : 'Remove file', onClick: (event) => {
|
|
@@ -562,7 +562,7 @@ exports.MultipleFileUpload = React.forwardRef(function MultipleFileUpload({ acce
|
|
|
562
562
|
valueRef.current = next;
|
|
563
563
|
onValueChange(next);
|
|
564
564
|
};
|
|
565
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
|
|
565
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('space-y-2', className), children: [(0, jsx_runtime_1.jsxs)("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: (0, utils_1.cn)('border-input-border bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
|
|
566
566
|
'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', pickerDisabled
|
|
567
567
|
? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
|
|
568
568
|
: 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [(0, jsx_runtime_1.jsx)("input", { ref: internalRef, id: inputId, type: "file", multiple: true, accept: accept, disabled: pickerDisabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), full && maxFiles !== undefined ? ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground", children: labels?.full
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--spacing-input-px: calc(var(--spacing) * 4);
|
|
5
5
|
--color-input-foreground: var(--color-foreground);
|
|
6
6
|
--color-input-placeholder: hsl(var(--input-placeholder));
|
|
7
|
-
--color-input-border: var(--
|
|
7
|
+
--color-input-border: hsl(var(--input-border));
|
|
8
8
|
|
|
9
9
|
--color-input-adornment: var(--color-container-text);
|
|
10
10
|
--spacing-input-adornment-size: calc(var(--spacing) * 10);
|
|
@@ -52,7 +52,7 @@ function InputOTPGroup({ className, ...props }) {
|
|
|
52
52
|
function InputOTPSlot({ index, className, ...props }) {
|
|
53
53
|
const inputOTPContext = React.useContext(input_otp_1.OTPInputContext);
|
|
54
54
|
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: (0, utils_1.cn)('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: (0, utils_1.cn)('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:ring-ring data-[active=true]:z-10 data-[active=true]:ring-2', className), ...props, children: [char, hasFakeCaret && ((0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)("div", { className: "motion-safe:animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
|
|
56
56
|
}
|
|
57
57
|
function InputOTPSeparator({ ...props }) {
|
|
58
58
|
return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MinusIcon, {}) }));
|
|
@@ -44,5 +44,5 @@ function RadioGroup({ className, ...props }) {
|
|
|
44
44
|
return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: (0, utils_1.cn)('grid gap-3', className), ...props }));
|
|
45
45
|
}
|
|
46
46
|
function RadioGroupItem({ className, ...props }) {
|
|
47
|
-
return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: (0, utils_1.cn)('border-input text-primary focus-visible:
|
|
47
|
+
return ((0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: (0, utils_1.cn)('border-input-border text-primary focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: (0, jsx_runtime_1.jsx)(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
|
|
48
48
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
--color-select-foreground: var(--color-foreground);
|
|
7
7
|
--color-select-placeholder: var(--color-muted-foreground);
|
|
8
|
-
--color-select-border: var(--
|
|
8
|
+
--color-select-border: hsl(var(--input-border));
|
|
9
9
|
--color-select-chevron: var(--color-container-text);
|
|
10
10
|
}
|
|
11
11
|
|
|
@@ -4,5 +4,5 @@ exports.Textarea = Textarea;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const utils_1 = require("../../../lib/utils");
|
|
6
6
|
function Textarea({ className, ...props }) {
|
|
7
|
-
return ((0, jsx_runtime_1.jsx)("textarea", { className: (0, utils_1.cn)('border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'read-only:bg-muted read-only:cursor-default read-only:caret-transparent read-only:opacity-50 read-only:select-text read-only:focus:ring-0 read-only:focus:ring-offset-0 read-only:focus:outline-hidden', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
|
|
7
|
+
return ((0, jsx_runtime_1.jsx)("textarea", { className: (0, utils_1.cn)('border-input-border bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'read-only:bg-muted read-only:cursor-default read-only:caret-transparent read-only:opacity-50 read-only:select-text read-only:focus:ring-0 read-only:focus:ring-offset-0 read-only:focus:outline-hidden', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
|
|
8
8
|
}
|
|
@@ -92,12 +92,12 @@ function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel, toLabe
|
|
|
92
92
|
});
|
|
93
93
|
};
|
|
94
94
|
const triggerClass = (0, utils_1.cn)(
|
|
95
|
-
// border-
|
|
96
|
-
// white in the light theme, so the trigger had no visible edge next to
|
|
97
|
-
// Input and Select it sits with. font-sans, not font-mono: the dates are
|
|
95
|
+
// border-input-border, not border-input: `--input` is a SURFACE token and
|
|
96
|
+
// is white in the light theme, so the trigger had no visible edge next to
|
|
97
|
+
// the Input and Select it sits with. font-sans, not font-mono: the dates are
|
|
98
98
|
// figures in the body face with tabular figures, like every other figure in
|
|
99
99
|
// the console.
|
|
100
|
-
'border-
|
|
100
|
+
'border-input-border bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-sans text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive',
|
|
101
101
|
// Conditional rather than `disabled:` variants, matching how this file
|
|
102
102
|
// already applies `border-destructive`: with the prop absent the class
|
|
103
103
|
// string stays byte-identical to what consumers render today.
|
|
@@ -34,7 +34,7 @@ export const DatePickerField = ({ name, label, tooltip, labelExtra, description,
|
|
|
34
34
|
const handleSelect = (date) => {
|
|
35
35
|
field.onChange(convertDateToOutputFormat(date));
|
|
36
36
|
};
|
|
37
|
-
return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-
|
|
37
|
+
return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-input-border 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: _jsx(CalendarIcon, { className: "size-4" }), children: value ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: dayjs(value).format(dateFormat) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "single",
|
|
38
38
|
// `required` mirrors the field's own required: a required
|
|
39
39
|
// field is not emptied by a re-click; an optional one keeps
|
|
40
40
|
// react-day-picker's clear gesture.
|
|
@@ -13,6 +13,6 @@ export const DateRangeField = ({ name, label, tooltip, labelExtra, description,
|
|
|
13
13
|
const [open, setOpen] = React.useState(false);
|
|
14
14
|
return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
|
|
15
15
|
const value = field.value;
|
|
16
|
-
return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-
|
|
16
|
+
return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-input-border 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: _jsx(CalendarIcon, { className: "size-4" }), children: value?.from ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? (_jsxs(_Fragment, { children: [dayjs(value.from).format(dateFormat), " -", ' ', dayjs(value.to).format(dateFormat)] })) : (dayjs(value.from).format(dateFormat)) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
|
|
17
17
|
} }));
|
|
18
18
|
};
|
|
@@ -52,7 +52,7 @@ export const DateTimePickerField = ({ name, label, tooltip, labelExtra, descript
|
|
|
52
52
|
setOpen(false);
|
|
53
53
|
};
|
|
54
54
|
const showClear = !!field.value && !readOnly && !disabled;
|
|
55
|
-
return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs("div", { className: "relative w-full", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-
|
|
55
|
+
return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs("div", { className: "relative w-full", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', showClear && 'pr-8', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: _jsx("span", { className: cn('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
|
|
56
56
|
? validCurrent.format(dateFormat)
|
|
57
57
|
: placeholder }) }) }) }), showClear && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": "Clear date and time", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-1/2 right-2 z-10 inline-flex shrink-0 -translate-y-1/2 rounded-sm outline-none focus-visible:ring-2", onClick: handleClear, onKeyDown: (e) => {
|
|
58
58
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
@@ -110,7 +110,7 @@ export function CopyField({ value, label, masked = false, onCopyLabel, revealLab
|
|
|
110
110
|
handleFallback();
|
|
111
111
|
}
|
|
112
112
|
};
|
|
113
|
-
return (_jsxs("div", { "data-slot": "copy-field", className: "flex w-full flex-col gap-2", children: [label ? (_jsx("label", { htmlFor: inputId, className: "text-muted-foreground text-sm font-semibold", children: label })) : null, _jsxs("div", { "data-slot": "input-wrapper", className: "border-input-border focus-within:border-ring flex h-10 w-full cursor-text items-center gap-1 rounded-md border pr-1 pl-4 transition-[color,box-shadow]", children: [_jsx("input", { ref: inputRef, id: inputId, "data-slot": "input", "data-testid": "copy-field-input", type: showAsText ? 'text' : 'password', value: value, readOnly: true,
|
|
113
|
+
return (_jsxs("div", { "data-slot": "copy-field", className: "flex w-full flex-col gap-2", children: [label ? (_jsx("label", { htmlFor: inputId, className: "text-muted-foreground text-sm font-semibold", children: label })) : null, _jsxs("div", { "data-slot": "input-wrapper", className: "border-input-border focus-within:border-ring has-[input:focus]:ring-ring flex h-10 w-full cursor-text items-center gap-1 rounded-md border pr-1 pl-4 transition-[color,box-shadow] has-[input:focus]:ring-2", children: [_jsx("input", { ref: inputRef, id: inputId, "data-slot": "input", "data-testid": "copy-field-input", type: showAsText ? 'text' : 'password', value: value, readOnly: true,
|
|
114
114
|
// This field holds secrets: TOTP manual-entry secrets, recovery
|
|
115
115
|
// codes. While masked it renders as type="password", which invites
|
|
116
116
|
// browsers and password managers to autofill it or offer to SAVE its
|
|
@@ -233,7 +233,7 @@ export const FileUpload = React.forwardRef(function FileUpload({ accept, maxSize
|
|
|
233
233
|
if (internalRef.current)
|
|
234
234
|
internalRef.current.value = '';
|
|
235
235
|
};
|
|
236
|
-
return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: cn('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
|
|
236
|
+
return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: cn('border-input-border bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
|
|
237
237
|
'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', disabled
|
|
238
238
|
? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
|
|
239
239
|
: 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [_jsx("input", { ref: internalRef, id: inputId, type: "file", accept: accept, disabled: disabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), _jsx(Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), value ? (_jsxs(_Fragment, { children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [_jsx("span", { className: "text-foreground font-medium", children: value.file.name }), ' ', _jsx("span", { className: "text-muted-foreground tabular-nums", children: humanizeSize(value.file.size) })] }), _jsx(IconButton, { type: "button", variant: "plain", size: "small", disabled: disabled, "aria-label": labels?.remove?.trim() ? labels.remove : 'Remove file', onClick: (event) => {
|
|
@@ -524,7 +524,7 @@ export const MultipleFileUpload = React.forwardRef(function MultipleFileUpload({
|
|
|
524
524
|
valueRef.current = next;
|
|
525
525
|
onValueChange(next);
|
|
526
526
|
};
|
|
527
|
-
return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: cn('border-input bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
|
|
527
|
+
return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsxs("div", { onClick: openPicker, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: cn('border-input-border bg-card focus-within:ring-ring focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive flex w-full items-center gap-3 rounded-md border px-3 py-4 text-sm shadow-xs transition-colors focus-within:ring-2 focus-within:ring-offset-1 focus-within:outline-none', dragActive &&
|
|
528
528
|
'border-ring ring-ring ring-offset-background ring-2 ring-offset-1', pickerDisabled
|
|
529
529
|
? 'border-muted bg-muted/30 cursor-not-allowed shadow-none'
|
|
530
530
|
: 'cursor-pointer'), "aria-invalid": invalid || undefined, children: [_jsx("input", { ref: internalRef, id: inputId, type: "file", multiple: true, accept: accept, disabled: pickerDisabled, className: "sr-only", "aria-invalid": invalid || undefined, "aria-required": ariaRequired || undefined, "aria-describedby": describedBy, "aria-label": ariaLabel, onChange: onInputChange, ...rest }), _jsx(Upload, { className: "text-muted-foreground size-4 shrink-0", "aria-hidden": "true" }), full && maxFiles !== undefined ? (_jsx("span", { className: "text-muted-foreground", children: labels?.full
|
|
@@ -12,7 +12,7 @@ function InputOTPGroup({ className, ...props }) {
|
|
|
12
12
|
function InputOTPSlot({ index, className, ...props }) {
|
|
13
13
|
const inputOTPContext = React.useContext(OTPInputContext);
|
|
14
14
|
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
|
|
15
|
-
return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:
|
|
15
|
+
return (_jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn('border-input-border bg-background text-foreground', 'relative flex h-14 w-12 items-center justify-center border-y border-r text-2xl font-semibold shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md', 'data-[active=true]:ring-ring data-[active=true]:z-10 data-[active=true]:ring-2', className), ...props, children: [char, hasFakeCaret && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "motion-safe:animate-caret-blink bg-foreground h-6 w-px duration-1000" }) }))] }));
|
|
16
16
|
}
|
|
17
17
|
function InputOTPSeparator({ ...props }) {
|
|
18
18
|
return (_jsx("div", { "data-slot": "input-otp-separator", role: "separator", ...props, children: _jsx(MinusIcon, {}) }));
|
|
@@ -7,6 +7,6 @@ function RadioGroup({ className, ...props }) {
|
|
|
7
7
|
return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn('grid gap-3', className), ...props }));
|
|
8
8
|
}
|
|
9
9
|
function RadioGroupItem({ className, ...props }) {
|
|
10
|
-
return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn('border-input text-primary focus-visible:
|
|
10
|
+
return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn('border-input-border text-primary focus-visible:ring-ring aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(Circle, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
|
|
11
11
|
}
|
|
12
12
|
export { RadioGroup, RadioGroupItem };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from '../../../lib/utils.js';
|
|
3
3
|
function Textarea({ className, ...props }) {
|
|
4
|
-
return (_jsx("textarea", { className: cn('border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'read-only:bg-muted read-only:cursor-default read-only:caret-transparent read-only:opacity-50 read-only:select-text read-only:focus:ring-0 read-only:focus:ring-offset-0 read-only:focus:outline-hidden', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
|
|
4
|
+
return (_jsx("textarea", { className: cn('border-input-border bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border px-3 py-2 text-base focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden', 'read-only:bg-muted read-only:cursor-default read-only:caret-transparent read-only:opacity-50 read-only:select-text read-only:focus:ring-0 read-only:focus:ring-offset-0 read-only:focus:outline-hidden', 'disabled:cursor-not-allowed disabled:opacity-50', className), ...props }));
|
|
5
5
|
}
|
|
6
6
|
export { Textarea };
|
|
@@ -89,12 +89,12 @@ export function DateRangePicker({ value, onValueChange, fromId, toId, fromLabel,
|
|
|
89
89
|
});
|
|
90
90
|
};
|
|
91
91
|
const triggerClass = cn(
|
|
92
|
-
// border-
|
|
93
|
-
// white in the light theme, so the trigger had no visible edge next to
|
|
94
|
-
// Input and Select it sits with. font-sans, not font-mono: the dates are
|
|
92
|
+
// border-input-border, not border-input: `--input` is a SURFACE token and
|
|
93
|
+
// is white in the light theme, so the trigger had no visible edge next to
|
|
94
|
+
// the Input and Select it sits with. font-sans, not font-mono: the dates are
|
|
95
95
|
// figures in the body face with tabular figures, like every other figure in
|
|
96
96
|
// the console.
|
|
97
|
-
'border-
|
|
97
|
+
'border-input-border bg-card hover:bg-secondary focus-visible:ring-ring flex h-9 items-center gap-2 rounded-md border px-3 text-left font-sans text-sm tabular-nums transition-colors duration-150 ease-out focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:outline-none sm:w-40', invalid && 'border-destructive',
|
|
98
98
|
// Conditional rather than `disabled:` variants, matching how this file
|
|
99
99
|
// already applies `border-destructive`: with the prop absent the class
|
|
100
100
|
// string stays byte-identical to what consumers render today.
|
package/dist/globals.css
CHANGED
|
@@ -316,6 +316,9 @@
|
|
|
316
316
|
here claimed 4.4:1 was acceptable "on the shadcn-100 field", which named
|
|
317
317
|
a fill the component never paints. */
|
|
318
318
|
--input-placeholder: 240 4% 45%; /* one notch off base/500: #6E6E77, AA on body-surface */
|
|
319
|
+
/* Field boundary, held to the 3:1 non-text floor (SC 1.4.11) on every ground a
|
|
320
|
+
field sits on. base/400 read 2.56:1 on white and 2.34:1 on --body-surface. */
|
|
321
|
+
--input-border: 240 4% 46%; /* base/500 = #71717A, 4.86:1 on white, 4.43:1 on body-surface */
|
|
319
322
|
/*
|
|
320
323
|
Focus ring. base/400 read 2.55:1 on white and 2.33:1 on --body-surface,
|
|
321
324
|
under the 3:1 floor a focus indicator answers to (SC 1.4.11), and this is
|
|
@@ -466,6 +469,7 @@
|
|
|
466
469
|
dark field that is already only 5.8:1, and going lighter here means
|
|
467
470
|
darker, which would push the hint under the AA floor. */
|
|
468
471
|
--input-placeholder: 240 5% 80%; /* between base/400 and base/300: #C9C9CF, AA on card (6.3:1); base/400 read 4.07:1 there */
|
|
472
|
+
--input-border: 240 5% 65%; /* base/400 = #A1A1AA, 4.09:1 on card; light's base/500 reads 2.15:1 there */
|
|
469
473
|
/* Held at base/400, which light had to leave: on this ground the two
|
|
470
474
|
directions disagree. base/400 reads 5.81:1 on --background and 4.08:1 on
|
|
471
475
|
--card here, while light's base/500 would read 2.16:1 on --card. */
|