@lerianstudio/sindarian-ui 1.4.0-beta.8 → 2.0.0-beta.10
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/breadcrumb/index.d.ts.map +1 -1
- package/dist/components/breadcrumb/index.js +25 -1
- package/dist/components/card/account-card/index.d.ts.map +1 -1
- package/dist/components/card/account-card/index.js +5 -5
- package/dist/components/card/basic-card/index.d.ts.map +1 -1
- package/dist/components/card/basic-card/index.js +2 -2
- package/dist/components/card/entity-card/index.js +4 -4
- package/dist/components/dialog/confirmation-dialog/index.d.ts +36 -5
- package/dist/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
- package/dist/components/dialog/confirmation-dialog/index.js +5 -2
- package/dist/components/entity-box/index.d.ts +18 -2
- package/dist/components/entity-box/index.d.ts.map +1 -1
- package/dist/components/entity-box/index.js +33 -5
- package/dist/components/entity-data-table/index.d.ts.map +1 -1
- package/dist/components/entity-data-table/index.js +1 -1
- package/dist/components/form/file-upload-field/index.d.ts +11 -2
- package/dist/components/form/file-upload-field/index.d.ts.map +1 -1
- package/dist/components/form/file-upload-field/index.js +8 -3
- package/dist/components/form/input-field/index.d.ts +41 -2
- package/dist/components/form/input-field/index.d.ts.map +1 -1
- package/dist/components/form/input-field/index.js +73 -15
- package/dist/components/form/password-field/index.d.ts +5 -1
- package/dist/components/form/password-field/index.d.ts.map +1 -1
- package/dist/components/form/password-field/index.js +2 -2
- package/dist/components/form/select-field/index.d.ts +9 -1
- package/dist/components/form/select-field/index.d.ts.map +1 -1
- package/dist/components/form/select-field/index.js +2 -2
- package/dist/components/page-header/index.d.ts.map +1 -1
- package/dist/components/page-header/index.js +2 -2
- package/dist/components/table/id-table-cell.d.ts +5 -1
- package/dist/components/table/id-table-cell.d.ts.map +1 -1
- package/dist/components/table/id-table-cell.js +48 -6
- package/dist/components/ui/autocomplete/index.d.ts +58 -6
- package/dist/components/ui/autocomplete/index.d.ts.map +1 -1
- package/dist/components/ui/autocomplete/index.js +96 -16
- package/dist/components/ui/badge/index.d.ts +11 -7
- package/dist/components/ui/badge/index.d.ts.map +1 -1
- package/dist/components/ui/badge/index.js +31 -9
- package/dist/components/ui/button/styles.css +31 -1
- package/dist/components/ui/calendar/index.d.ts.map +1 -1
- package/dist/components/ui/calendar/index.js +7 -1
- package/dist/components/ui/card/index.d.ts.map +1 -1
- package/dist/components/ui/card/index.js +1 -1
- package/dist/components/ui/copy-field/index.d.ts.map +1 -1
- package/dist/components/ui/copy-field/index.js +1 -1
- package/dist/components/ui/dropdown-menu/index.d.ts.map +1 -1
- package/dist/components/ui/dropdown-menu/index.js +4 -1
- package/dist/components/ui/field/index.d.ts.map +1 -1
- package/dist/components/ui/field/index.js +5 -2
- package/dist/components/ui/file-upload/index.d.ts +235 -9
- package/dist/components/ui/file-upload/index.d.ts.map +1 -1
- package/dist/components/ui/file-upload/index.js +354 -17
- package/dist/components/ui/form.d.ts +4 -0
- package/dist/components/ui/form.d.ts.map +1 -1
- package/dist/components/ui/form.js +53 -8
- package/dist/components/ui/input/styles.css +30 -2
- package/dist/components/ui/multiple-select/index.js +2 -2
- package/dist/components/ui/progress/index.d.ts +15 -1
- package/dist/components/ui/progress/index.d.ts.map +1 -1
- package/dist/components/ui/progress/index.js +25 -2
- package/dist/components/ui/sheet/index.d.ts.map +1 -1
- package/dist/components/ui/sheet/index.js +2 -2
- package/dist/components/ui/sidebar/index.d.ts +1 -0
- package/dist/components/ui/sidebar/index.d.ts.map +1 -1
- package/dist/components/ui/sidebar/index.js +1 -0
- package/dist/components/ui/sidebar/sidebar-expand-button.d.ts +1 -1
- package/dist/components/ui/sidebar/sidebar-expand-button.d.ts.map +1 -1
- package/dist/components/ui/sidebar/sidebar-expand-button.js +32 -2
- package/dist/components/ui/sidebar/sidebar-item.d.ts +1 -1
- package/dist/components/ui/sidebar/sidebar-item.d.ts.map +1 -1
- package/dist/components/ui/sidebar/sidebar-item.js +28 -4
- package/dist/components/ui/sidebar/sidebar-provider.d.ts +37 -0
- package/dist/components/ui/sidebar/sidebar-provider.d.ts.map +1 -1
- package/dist/components/ui/sidebar/sidebar-provider.js +125 -4
- package/dist/components/ui/sidebar/sidebar-root.d.ts +38 -1
- package/dist/components/ui/sidebar/sidebar-root.d.ts.map +1 -1
- package/dist/components/ui/sidebar/sidebar-root.js +100 -5
- package/dist/components/ui/sidebar/sidebar-trigger.d.ts +18 -0
- package/dist/components/ui/sidebar/sidebar-trigger.d.ts.map +1 -0
- package/dist/components/ui/sidebar/sidebar-trigger.js +30 -0
- package/dist/components/ui/toggle-group/index.d.ts +1 -1
- package/dist/components/ui/toggle-group/index.d.ts.map +1 -1
- package/dist/components/ui/toggle-group/index.js +73 -4
- package/dist/components/ui/tooltip/index.d.ts +15 -0
- package/dist/components/ui/tooltip/index.d.ts.map +1 -1
- package/dist/components/ui/tooltip/index.js +16 -1
- package/dist/domain/blotter/index.d.ts +4 -2
- package/dist/domain/blotter/index.d.ts.map +1 -1
- package/dist/domain/delinquency-aging/aging-buckets.d.ts.map +1 -1
- package/dist/domain/delinquency-aging/aging-buckets.js +8 -3
- package/dist/domain/delinquency-aging/index.d.ts.map +1 -1
- package/dist/domain/delinquency-aging/index.js +8 -3
- package/dist/domain/key-id/index.js +1 -1
- package/dist/domain/status-rail/index.js +1 -1
- package/dist/domain/threshold-gauge/index.d.ts.map +1 -1
- package/dist/domain/threshold-gauge/index.js +9 -5
- package/dist/enterprise/stat-card/index.d.ts.map +1 -1
- package/dist/enterprise/stat-card/index.js +12 -4
- package/dist/esm/components/breadcrumb/index.d.ts.map +1 -1
- package/dist/esm/components/breadcrumb/index.js +25 -1
- package/dist/esm/components/card/account-card/index.d.ts.map +1 -1
- package/dist/esm/components/card/account-card/index.js +5 -5
- package/dist/esm/components/card/basic-card/index.d.ts.map +1 -1
- package/dist/esm/components/card/basic-card/index.js +2 -2
- package/dist/esm/components/card/entity-card/index.js +4 -4
- package/dist/esm/components/dialog/confirmation-dialog/index.d.ts +36 -5
- package/dist/esm/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
- package/dist/esm/components/dialog/confirmation-dialog/index.js +5 -2
- package/dist/esm/components/entity-box/index.d.ts +18 -2
- package/dist/esm/components/entity-box/index.d.ts.map +1 -1
- package/dist/esm/components/entity-box/index.js +30 -5
- package/dist/esm/components/entity-data-table/index.d.ts.map +1 -1
- package/dist/esm/components/entity-data-table/index.js +1 -1
- package/dist/esm/components/form/file-upload-field/index.d.ts +11 -2
- package/dist/esm/components/form/file-upload-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/file-upload-field/index.js +8 -3
- package/dist/esm/components/form/input-field/index.d.ts +41 -2
- package/dist/esm/components/form/input-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/input-field/index.js +73 -15
- package/dist/esm/components/form/password-field/index.d.ts +5 -1
- package/dist/esm/components/form/password-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/password-field/index.js +2 -2
- package/dist/esm/components/form/select-field/index.d.ts +9 -1
- package/dist/esm/components/form/select-field/index.d.ts.map +1 -1
- package/dist/esm/components/form/select-field/index.js +2 -2
- package/dist/esm/components/page-header/index.d.ts.map +1 -1
- package/dist/esm/components/page-header/index.js +2 -2
- package/dist/esm/components/table/id-table-cell.d.ts +5 -1
- package/dist/esm/components/table/id-table-cell.d.ts.map +1 -1
- package/dist/esm/components/table/id-table-cell.js +48 -3
- package/dist/esm/components/ui/autocomplete/index.d.ts +58 -6
- package/dist/esm/components/ui/autocomplete/index.d.ts.map +1 -1
- package/dist/esm/components/ui/autocomplete/index.js +96 -16
- package/dist/esm/components/ui/badge/index.d.ts +11 -7
- package/dist/esm/components/ui/badge/index.d.ts.map +1 -1
- package/dist/esm/components/ui/badge/index.js +31 -9
- package/dist/esm/components/ui/calendar/index.d.ts.map +1 -1
- package/dist/esm/components/ui/calendar/index.js +8 -2
- package/dist/esm/components/ui/card/index.d.ts.map +1 -1
- package/dist/esm/components/ui/card/index.js +1 -1
- package/dist/esm/components/ui/copy-field/index.d.ts.map +1 -1
- package/dist/esm/components/ui/copy-field/index.js +1 -1
- package/dist/esm/components/ui/dropdown-menu/index.d.ts.map +1 -1
- package/dist/esm/components/ui/dropdown-menu/index.js +4 -1
- package/dist/esm/components/ui/field/index.d.ts.map +1 -1
- package/dist/esm/components/ui/field/index.js +5 -2
- package/dist/esm/components/ui/file-upload/index.d.ts +235 -9
- package/dist/esm/components/ui/file-upload/index.d.ts.map +1 -1
- package/dist/esm/components/ui/file-upload/index.js +353 -17
- package/dist/esm/components/ui/form.d.ts +4 -0
- package/dist/esm/components/ui/form.d.ts.map +1 -1
- package/dist/esm/components/ui/form.js +53 -8
- package/dist/esm/components/ui/multiple-select/index.js +2 -2
- package/dist/esm/components/ui/progress/index.d.ts +15 -1
- package/dist/esm/components/ui/progress/index.d.ts.map +1 -1
- package/dist/esm/components/ui/progress/index.js +25 -2
- package/dist/esm/components/ui/sheet/index.d.ts.map +1 -1
- package/dist/esm/components/ui/sheet/index.js +2 -2
- package/dist/esm/components/ui/sidebar/index.d.ts +1 -0
- package/dist/esm/components/ui/sidebar/index.d.ts.map +1 -1
- package/dist/esm/components/ui/sidebar/index.js +1 -0
- package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts +1 -1
- package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts.map +1 -1
- package/dist/esm/components/ui/sidebar/sidebar-expand-button.js +32 -2
- package/dist/esm/components/ui/sidebar/sidebar-item.d.ts +1 -1
- package/dist/esm/components/ui/sidebar/sidebar-item.d.ts.map +1 -1
- package/dist/esm/components/ui/sidebar/sidebar-item.js +28 -4
- package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts +37 -0
- package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts.map +1 -1
- package/dist/esm/components/ui/sidebar/sidebar-provider.js +122 -1
- package/dist/esm/components/ui/sidebar/sidebar-root.d.ts +38 -1
- package/dist/esm/components/ui/sidebar/sidebar-root.d.ts.map +1 -1
- package/dist/esm/components/ui/sidebar/sidebar-root.js +102 -7
- package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts +18 -0
- package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts.map +1 -0
- package/dist/esm/components/ui/sidebar/sidebar-trigger.js +26 -0
- package/dist/esm/components/ui/toggle-group/index.d.ts +1 -1
- package/dist/esm/components/ui/toggle-group/index.d.ts.map +1 -1
- package/dist/esm/components/ui/toggle-group/index.js +73 -4
- package/dist/esm/components/ui/tooltip/index.d.ts +15 -0
- package/dist/esm/components/ui/tooltip/index.d.ts.map +1 -1
- package/dist/esm/components/ui/tooltip/index.js +16 -1
- package/dist/esm/domain/blotter/index.d.ts +4 -2
- package/dist/esm/domain/blotter/index.d.ts.map +1 -1
- package/dist/esm/domain/delinquency-aging/aging-buckets.d.ts.map +1 -1
- package/dist/esm/domain/delinquency-aging/aging-buckets.js +8 -3
- package/dist/esm/domain/delinquency-aging/index.d.ts.map +1 -1
- package/dist/esm/domain/delinquency-aging/index.js +8 -3
- package/dist/esm/domain/key-id/index.js +1 -1
- package/dist/esm/domain/status-rail/index.js +1 -1
- package/dist/esm/domain/threshold-gauge/index.d.ts.map +1 -1
- package/dist/esm/domain/threshold-gauge/index.js +9 -5
- package/dist/esm/enterprise/stat-card/index.d.ts.map +1 -1
- package/dist/esm/enterprise/stat-card/index.js +12 -4
- package/dist/globals.css +101 -32
- package/package.json +5 -3
|
@@ -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,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,
|
|
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,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,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,6KAkB9D,gBAAgB,CAAC,CAAC,CAAC,sBA6FrB,CAAA"}
|
|
@@ -3,14 +3,14 @@ import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessa
|
|
|
3
3
|
import { MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue } from '../../../components/ui/multiple-select/index.js';
|
|
4
4
|
import { Select, SelectContent, SelectEmpty, SelectTrigger, SelectValue } from '../../../components/ui/select/index.js';
|
|
5
5
|
import { cn } from '../../../lib/utils.js';
|
|
6
|
-
export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', onChange, ...others }) => {
|
|
6
|
+
export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', className, onChange, ...others }) => {
|
|
7
7
|
// The props union already pairs `multi` with the callback shape that branch
|
|
8
8
|
// emits, but destructuring an intersection loses that correlation — TS sees
|
|
9
9
|
// two unrelated callbacks. Both branches report through this one seam, each
|
|
10
10
|
// with the payload its own union member declared.
|
|
11
11
|
const emitChange = onChange;
|
|
12
12
|
const renderItem = (field) => {
|
|
13
|
-
return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? (_jsxs(MultipleSelect, { onValueChange: (value) => {
|
|
13
|
+
return (_jsxs(FormItem, { required: required, className: className, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? (_jsxs(MultipleSelect, { onValueChange: (value) => {
|
|
14
14
|
field.onChange(value);
|
|
15
15
|
emitChange?.(value);
|
|
16
16
|
}, disabled: disabled, ...field, children: [_jsx(MultipleSelectTrigger, { readOnly: readOnly, children: _jsx(MultipleSelectValue, { placeholder: placeholder }) }), _jsx(MultipleSelectContent, { children: children })] })) : (_jsxs(Select, { onValueChange: (value) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBhF,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;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,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,+BA2D1B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page-header/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAA2B,SAAS,EAAwB,MAAM,OAAO,CAAA;AAmBhF,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;;;;;;;;;OASG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;;;;;OAMG;IACH,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,+BA2D1B;AAED,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACT,EAAE,0BAA0B,+BA4C5B;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"}
|
|
@@ -61,11 +61,11 @@ export function PageHeaderInfoTooltip({ subtitle }) {
|
|
|
61
61
|
description: 'Copied to clipboard!'
|
|
62
62
|
});
|
|
63
63
|
};
|
|
64
|
-
return (_jsx("div", { "data-slot": "page-header-info-tooltip", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { delayDuration: 300, children: [_jsx(TooltipTrigger, { onClick: () => handleCopyToClipboard(subtitle), children: _jsx(Copy, { size: 16, className: "cursor-pointer" }) }), _jsxs(TooltipContent, { className: "bg-shadcn-600 border-none", arrowPadding: 0, children: [_jsx("p", { className: "text-shadcn-
|
|
64
|
+
return (_jsx("div", { "data-slot": "page-header-info-tooltip", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { delayDuration: 300, children: [_jsx(TooltipTrigger, { onClick: () => handleCopyToClipboard(subtitle), children: _jsx(Copy, { size: 16, className: "cursor-pointer" }) }), _jsxs(TooltipContent, { className: "bg-shadcn-600 border-none", arrowPadding: 0, children: [_jsx("p", { className: "text-shadcn-300 text-sm font-medium", children: subtitle }), _jsx("p", { className: "text-center text-white", children: "Click to copy" }), _jsx(Arrow, { height: 8, width: 15 })] })] }) }) }));
|
|
65
65
|
}
|
|
66
66
|
export function PageHeaderCollapsibleInfoTrigger({ question }) {
|
|
67
67
|
return (_jsx("div", { "data-slot": "page-header-collapsible-info-trigger", children: _jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "link", className: "flex gap-2 pr-0", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: question }), _jsx(HelpCircle, { className: "h-4 w-4" })] }) }) }));
|
|
68
68
|
}
|
|
69
69
|
export function PageHeaderCollapsibleInfo({ question, answer, seeMore, href }) {
|
|
70
|
-
return (_jsx("div", { "data-slot": "page-header-collapsible-info", children: _jsx(CollapsibleContent, { children: _jsxs("div", { className: "flex w-full justify-between pt-6", children: [_jsxs("div", { className: "mt-12 flex grow flex-col gap-3 pr-6", children: [_jsx("h2", { className: "text-foreground text-xl font-bold", children: question }), _jsxs("p", { className: "text-
|
|
70
|
+
return (_jsx("div", { "data-slot": "page-header-collapsible-info", children: _jsx(CollapsibleContent, { children: _jsxs("div", { className: "flex w-full justify-between pt-6", children: [_jsxs("div", { className: "mt-12 flex grow flex-col gap-3 pr-6", children: [_jsx("h2", { className: "text-foreground text-xl font-bold", children: question }), _jsxs("p", { className: "text-muted-foreground text-sm leading-relaxed font-medium", children: [answer, seeMore && href && (_jsxs(_Fragment, { children: [' ', _jsxs("a", { target: "_blank", rel: "noopener noreferrer", href: href, className: "text-muted-foreground font-medium", children: [_jsx("span", { className: "underline underline-offset-4", children: seeMore }), _jsx(ExternalLink, { size: 16, className: "ml-1 inline align-middle" })] })] }))] })] }), _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { variant: "link", className: "cursor-pointer self-start", children: _jsx(ChevronUp, { size: 24, className: "text-muted-foreground" }) }) })] }) }) }));
|
|
71
71
|
}
|
|
@@ -2,6 +2,10 @@ import { TableCell } from '../../components/ui/table/index.js';
|
|
|
2
2
|
export type IdTableCellProps = Omit<React.ComponentProps<typeof TableCell>, 'onCopy'> & {
|
|
3
3
|
id?: string;
|
|
4
4
|
onCopy?: (id: string) => void;
|
|
5
|
+
/** Characters kept from the start of the id. */
|
|
6
|
+
head?: number;
|
|
7
|
+
/** Characters kept from the end of the id. */
|
|
8
|
+
tail?: number;
|
|
5
9
|
};
|
|
6
|
-
export declare const IdTableCell: ({ id, onCopy, ...others }: IdTableCellProps) => import("react").JSX.Element;
|
|
10
|
+
export declare const IdTableCell: ({ id, onCopy, head, tail, ...others }: IdTableCellProps) => import("react").JSX.Element;
|
|
7
11
|
//# sourceMappingURL=id-table-cell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"id-table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/id-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGV,MAAM,uBAAuB,CAAA;
|
|
1
|
+
{"version":3,"file":"id-table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/id-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGV,MAAM,uBAAuB,CAAA;AAS9B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,QAAQ,CACT,GAAG;IACF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AA6CD,eAAO,MAAM,WAAW,GAAI,uCAMzB,gBAAgB,gCAiClB,CAAA"}
|
|
@@ -1,12 +1,57 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { TableCell, TableCellAction, TableCellWrapper } from '../../components/ui/table/index.js';
|
|
3
3
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../components/ui/tooltip/index.js';
|
|
4
|
-
import truncate from 'lodash/truncate.js';
|
|
5
4
|
import { Copy } from 'lucide-react';
|
|
6
|
-
|
|
5
|
+
/**
|
|
6
|
+
* ⛔ TRUNCATE IN THE MIDDLE, NEVER FROM THE START.
|
|
7
|
+
*
|
|
8
|
+
* This cell renders UUIDs, and a ledger hands out long runs of them from a
|
|
9
|
+
* shared prefix — `00000000-0000-0000-0000-00000000000{1,2,3}`. Keeping the
|
|
10
|
+
* first 13 characters, which is what `truncate(id, { length: 16 })` did,
|
|
11
|
+
* rendered every one of those rows as the same string: the only part that told
|
|
12
|
+
* them apart was the part that was dropped, and the reader had to hover each
|
|
13
|
+
* row in turn to find the one they wanted.
|
|
14
|
+
*
|
|
15
|
+
* Both ends carry information — the head says which family the id belongs to,
|
|
16
|
+
* the tail says which member — so both ends stay.
|
|
17
|
+
*/
|
|
18
|
+
const DEFAULT_HEAD = 8;
|
|
19
|
+
const DEFAULT_TAIL = 4;
|
|
20
|
+
/**
|
|
21
|
+
* ⛔ A BAD LENGTH CANNOT THROW HERE. This runs in a render path, so refusing a
|
|
22
|
+
* malformed prop would unmount the whole table rather than one cell — a
|
|
23
|
+
* consumer computing `head` from data gets a broken cell, not a broken screen.
|
|
24
|
+
*
|
|
25
|
+
* `String.slice` reads a negative number as an offset from the END, so a
|
|
26
|
+
* negative `head` kept nearly the entire id and put an ellipsis in the middle
|
|
27
|
+
* of it, and `NaN` read as 0 and dropped the head — the exact failure middle
|
|
28
|
+
* truncation exists to prevent, and one character LONGER than the untruncated
|
|
29
|
+
* id. Clamped to a non-negative whole number; anything non-finite falls back
|
|
30
|
+
* to the default, which a caller passing `NaN` has already bypassed.
|
|
31
|
+
*/
|
|
32
|
+
function charCount(value, fallback) {
|
|
33
|
+
return Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : fallback;
|
|
34
|
+
}
|
|
35
|
+
function truncateMiddle(id, head, tail) {
|
|
36
|
+
const start = charCount(head, DEFAULT_HEAD);
|
|
37
|
+
const end = charCount(tail, DEFAULT_TAIL);
|
|
38
|
+
// No ellipsis unless it actually saves characters: at head + tail + 1 the
|
|
39
|
+
// truncation is the same length as the id and hides a character for nothing.
|
|
40
|
+
return id.length <= start + end + 1
|
|
41
|
+
? id
|
|
42
|
+
: `${id.slice(0, start)}…${id.slice(id.length - end)}`;
|
|
43
|
+
}
|
|
44
|
+
export const IdTableCell = ({ id, onCopy, head = DEFAULT_HEAD, tail = DEFAULT_TAIL, ...others }) => {
|
|
7
45
|
const handleCopyToClipboard = () => {
|
|
46
|
+
// The WHOLE id, never what is rendered. The cell is the only place most
|
|
47
|
+
// consoles expose it, and a truncated id pasted into a query matches
|
|
48
|
+
// nothing.
|
|
8
49
|
navigator.clipboard.writeText(id);
|
|
9
50
|
onCopy?.(id);
|
|
10
51
|
};
|
|
11
|
-
return (_jsx(TableCell, { onClick: handleCopyToClipboard,
|
|
52
|
+
return (_jsx(TableCell, { onClick: handleCopyToClipboard,
|
|
53
|
+
// The tooltip is the styled affordance; `title` is the fallback that
|
|
54
|
+
// survives without it — a printed page, a portal that has not mounted,
|
|
55
|
+
// and the cell padding outside the trigger.
|
|
56
|
+
title: id, ...others, children: _jsxs(TableCellWrapper, { children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { delayDuration: 300, children: [_jsx(TooltipTrigger, { children: id ? truncateMiddle(id, head, tail) : id }), _jsx(TooltipContent, { children: id })] }) }), _jsx(TableCellAction, { children: _jsx(Copy, { className: "size-3.5" }) })] }) }));
|
|
12
57
|
};
|
|
@@ -21,12 +21,33 @@ export type AutocompleteContextType = React.HtmlHTMLAttributes<HTMLInputElement>
|
|
|
21
21
|
};
|
|
22
22
|
export type AutocompleteTriggerProps = React.ComponentProps<'div'> & {
|
|
23
23
|
onClear?: () => void;
|
|
24
|
+
/** Accessible label for the clear button. */
|
|
25
|
+
clearLabel?: string;
|
|
24
26
|
};
|
|
25
|
-
export declare function AutocompleteTrigger({ ref, className, onClear, children }: AutocompleteTriggerProps): React.JSX.Element;
|
|
27
|
+
export declare function AutocompleteTrigger({ ref, className, onClear, clearLabel, children }: AutocompleteTriggerProps): React.JSX.Element;
|
|
28
|
+
export declare namespace AutocompleteTrigger {
|
|
29
|
+
var displayName: string;
|
|
30
|
+
}
|
|
26
31
|
export declare function AutocompleteValue({ ref, className, value: valueProp, onValueChange, onBlur, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): React.JSX.Element;
|
|
27
|
-
export declare
|
|
32
|
+
export declare namespace AutocompleteValue {
|
|
33
|
+
var displayName: string;
|
|
34
|
+
}
|
|
35
|
+
export type AutocompleteMultipleValueProps = React.ComponentProps<typeof CommandPrimitive.Input> & {
|
|
36
|
+
/** Accessible label for each chip's remove button, prefixed to its value. */
|
|
37
|
+
clearLabel?: string;
|
|
38
|
+
};
|
|
39
|
+
export declare function AutocompleteMultipleValue({ ref, className, clearLabel, ...props }: AutocompleteMultipleValueProps): React.JSX.Element;
|
|
40
|
+
export declare namespace AutocompleteMultipleValue {
|
|
41
|
+
var displayName: string;
|
|
42
|
+
}
|
|
28
43
|
export declare function AutocompleteEmpty({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>): React.JSX.Element | null;
|
|
44
|
+
export declare namespace AutocompleteEmpty {
|
|
45
|
+
var displayName: string;
|
|
46
|
+
}
|
|
29
47
|
export declare function AutocompleteLoading({ className, ref, ...props }: React.ComponentProps<typeof CommandPrimitive.Loading>): React.JSX.Element;
|
|
48
|
+
export declare namespace AutocompleteLoading {
|
|
49
|
+
var displayName: string;
|
|
50
|
+
}
|
|
30
51
|
export declare const SIDE_OPTIONS: string[];
|
|
31
52
|
type Side = (typeof SIDE_OPTIONS)[number];
|
|
32
53
|
export type AutocompleteContentProps = React.ComponentProps<typeof CommandPrimitive.List> & {
|
|
@@ -35,11 +56,39 @@ export type AutocompleteContentProps = React.ComponentProps<typeof CommandPrimit
|
|
|
35
56
|
onPointerDownOutside?: (event: MouseEvent | TouchEvent) => void;
|
|
36
57
|
};
|
|
37
58
|
export declare function AutocompleteContent({ className, position, side, ref, children, onMouseEnter, onMouseLeave, onPointerDownOutside, ...props }: AutocompleteContentProps): React.JSX.Element;
|
|
59
|
+
export declare namespace AutocompleteContent {
|
|
60
|
+
var displayName: string;
|
|
61
|
+
}
|
|
38
62
|
export declare function AutocompleteGroup({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>): React.JSX.Element;
|
|
39
|
-
export declare
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
63
|
+
export declare namespace AutocompleteGroup {
|
|
64
|
+
var displayName: string;
|
|
65
|
+
}
|
|
66
|
+
export type AutocompleteItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item> & {
|
|
67
|
+
/** Text this option reads as wherever it is rendered outside the list (the
|
|
68
|
+
* input, a chip and its remove button). Required only when the children are
|
|
69
|
+
* markup rather than a plain string, which cannot be read as text. */
|
|
70
|
+
label?: string;
|
|
71
|
+
};
|
|
72
|
+
export declare function AutocompleteItem({ className, value, label: _label, onSelect, ...props }: AutocompleteItemProps): React.JSX.Element;
|
|
73
|
+
export declare namespace AutocompleteItem {
|
|
74
|
+
var displayName: string;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* ⛔ THE THREE OMITS ARE THE POINT. cmdk's `Command` types `value`,
|
|
78
|
+
* `defaultValue` and `onValueChange` for a single-select command palette: bare
|
|
79
|
+
* `string`, and `(value: string) => void`. Intersecting rather than omitting
|
|
80
|
+
* collapsed each one to the cmdk half — `string & (string | string[])` is
|
|
81
|
+
* `string` — so `defaultValue={['next']}` was a type error on a component whose
|
|
82
|
+
* whole `multiple` mode passes arrays, and every consumer reached it through a
|
|
83
|
+
* cast.
|
|
84
|
+
*
|
|
85
|
+
* These are exactly the three this component destructures and re-implements
|
|
86
|
+
* below, so none of them reaches `CommandPrimitive` through `...props` and
|
|
87
|
+
* omitting them drops no behaviour.
|
|
88
|
+
*/
|
|
89
|
+
export type AutocompleteProps = Omit<React.ComponentProps<typeof CommandPrimitive>, 'value' | 'defaultValue' | 'onValueChange'> & {
|
|
90
|
+
value?: string | string[];
|
|
91
|
+
defaultValue?: string | string[];
|
|
43
92
|
onValueChange?: (values: string | string[]) => void;
|
|
44
93
|
onClear?: () => void;
|
|
45
94
|
open?: boolean;
|
|
@@ -50,5 +99,8 @@ export type AutocompleteProps = React.ComponentProps<typeof CommandPrimitive> &
|
|
|
50
99
|
multiple?: boolean;
|
|
51
100
|
};
|
|
52
101
|
export declare function Autocomplete({ ref, value, defaultValue, onValueChange, onClear, className, open: openProp, onOpenChange, showValue, readOnly, disabled, multiple, onKeyDown, children, ...props }: AutocompleteProps): React.JSX.Element;
|
|
102
|
+
export declare namespace Autocomplete {
|
|
103
|
+
var displayName: string;
|
|
104
|
+
}
|
|
53
105
|
export {};
|
|
54
106
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/autocomplete/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAmB,MAAM,MAAM,CAAA;AAInE,MAAM,MAAM,uBAAuB,GACjC,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,GAAG;IAC3C,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,EAAE,CAAA;IAC7B,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,cAAc,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAA;IAEnD,2BAA2B;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CACnD,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/autocomplete/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,12 +27,31 @@ const useAutocomplete = () => {
|
|
|
27
27
|
}
|
|
28
28
|
return context;
|
|
29
29
|
};
|
|
30
|
-
|
|
30
|
+
/**
|
|
31
|
+
* The text a value reads as.
|
|
32
|
+
*
|
|
33
|
+
* An item registers a label only when it HAS one to give: a string child, or an
|
|
34
|
+
* explicit `label` when its children are markup. Everything downstream renders
|
|
35
|
+
* this map as text (the input's value, a chip's `aria-label`), so a value with
|
|
36
|
+
* no registered label falls back to the value itself. The alternatives are both
|
|
37
|
+
* defects that shipped: `undefined` drops a controlled input to uncontrolled,
|
|
38
|
+
* and a React element interpolates into a template literal as "[object
|
|
39
|
+
* Object]".
|
|
40
|
+
*/
|
|
41
|
+
function labelOf(options, value) {
|
|
42
|
+
return options[value] ?? value;
|
|
43
|
+
}
|
|
44
|
+
export function AutocompleteTrigger({ ref, className, onClear, clearLabel = 'Clear', children }) {
|
|
31
45
|
const _ref = React.useRef(null);
|
|
32
46
|
const { open, readOnly, setOpen, disabled, value, inputRef, handleClear } = useAutocomplete();
|
|
33
47
|
React.useImperativeHandle(ref, () => _ref.current);
|
|
34
48
|
const isNoSelection = disabled || readOnly || value.length < 1;
|
|
35
|
-
return (_jsxs("div", { ref: _ref, className: cn(
|
|
49
|
+
return (_jsxs("div", { ref: _ref, className: cn(
|
|
50
|
+
// `border-input-border`, NOT `border-input`: `--input` is a SURFACE
|
|
51
|
+
// token and is white in light, so the border it paints is invisible
|
|
52
|
+
// against the field's own `bg-background`. This is the same edge
|
|
53
|
+
// MultipleSelect and DateRangePicker draw, and the same token.
|
|
54
|
+
'bg-background ring-offset-background placeholder:text-input-placeholder data-[disabled=true]:bg-shadcn-100 data-[read-only=true]:bg-shadcn-100 border-input-border flex rounded-md border text-sm focus:outline-hidden focus-visible:outline-hidden data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[read-only=true]:opacity-50 md:text-sm [&>span]:line-clamp-1', {
|
|
36
55
|
'h-9': value.length === 0,
|
|
37
56
|
'min-h-9': value.length > 0,
|
|
38
57
|
'cursor-text': !disabled && value.length !== 0
|
|
@@ -48,11 +67,19 @@ export function AutocompleteTrigger({ ref, className, onClear, children }) {
|
|
|
48
67
|
inputRef?.current?.focus();
|
|
49
68
|
}
|
|
50
69
|
setOpen(!open);
|
|
51
|
-
}, "data-disabled": disabled, "data-read-only": readOnly, children: [_jsx("div", { className: "flex grow flex-wrap gap-1 px-3 py-2", children: children }), _jsxs("div", { className: "flex shrink-0 items-center justify-end", children: [_jsx("button", { type: "button", className: cn(isNoSelection && 'hidden'),
|
|
70
|
+
}, "data-disabled": disabled, "data-read-only": readOnly, children: [_jsx("div", { className: "flex grow flex-wrap gap-1 px-3 py-2", children: children }), _jsxs("div", { className: "flex shrink-0 items-center justify-end", children: [_jsx("button", { type: "button", "aria-label": clearLabel, className: cn('cursor-pointer', isNoSelection && 'hidden'), onKeyDown: (event) => {
|
|
71
|
+
// cmdk's Command root calls preventDefault() on EVERY Enter that
|
|
72
|
+
// reaches it, which cancels this button's implicit activation, so
|
|
73
|
+
// the keydown must not get there. Enter only: the root's other
|
|
74
|
+
// keys (Escape, the arrows) still belong to the panel.
|
|
75
|
+
if (event.key === 'Enter') {
|
|
52
76
|
event.stopPropagation();
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
77
|
+
}
|
|
78
|
+
}, onClick: (event) => {
|
|
79
|
+
event.stopPropagation();
|
|
80
|
+
handleClear();
|
|
81
|
+
onClear?.();
|
|
82
|
+
}, children: _jsx(X, { "aria-hidden": true, className: "text-muted-foreground mx-2 h-4" }) }), _jsx(Separator, { orientation: "vertical", className: cn(isNoSelection && 'hidden') }), _jsx(SelectPrimitive.Icon, { className: "cursor-pointer data-[disabled=true]:cursor-not-allowed data-[read-only=true]:cursor-default", "data-disabled": disabled, "data-read-only": readOnly, children: _jsx(ChevronDown, { className: "mx-3 my-2 h-4 w-4 opacity-50" }) })] })] }));
|
|
56
83
|
}
|
|
57
84
|
export function AutocompleteValue({ ref, className, value: valueProp, onValueChange, onBlur, ...props }) {
|
|
58
85
|
const [search, setSearch] = React.useState(valueProp);
|
|
@@ -67,7 +94,7 @@ export function AutocompleteValue({ ref, className, value: valueProp, onValueCha
|
|
|
67
94
|
handleValueChange('');
|
|
68
95
|
return;
|
|
69
96
|
}
|
|
70
|
-
handleValueChange(showValue ? v : options
|
|
97
|
+
handleValueChange(showValue ? v : labelOf(options, v));
|
|
71
98
|
};
|
|
72
99
|
const handleValueChange = (value) => {
|
|
73
100
|
setSearch(value);
|
|
@@ -86,21 +113,29 @@ export function AutocompleteValue({ ref, className, value: valueProp, onValueCha
|
|
|
86
113
|
if (v === '') {
|
|
87
114
|
return;
|
|
88
115
|
}
|
|
89
|
-
setSearch(showValue ? v : options
|
|
116
|
+
setSearch(showValue ? v : labelOf(options, v));
|
|
90
117
|
}, [options]);
|
|
91
118
|
React.useEffect(() => {
|
|
92
119
|
updateSearch(value);
|
|
93
120
|
}, [value]);
|
|
94
121
|
return (_jsx(CommandPrimitive.Input, { ...props, ref: inputRef, value: search, onValueChange: handleValueChange, disabled: disabled, readOnly: readOnly, className: cn('placeholder:text-muted-foreground w-full bg-transparent outline-hidden read-only:opacity-50 read-only:placeholder:opacity-0 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0', className), onBlur: handleBlur }));
|
|
95
122
|
}
|
|
96
|
-
export function AutocompleteMultipleValue({ ref, className, ...props }) {
|
|
123
|
+
export function AutocompleteMultipleValue({ ref, className, clearLabel = 'Clear', ...props }) {
|
|
97
124
|
const { value, disabled, handleChange, options, showValue, inputRef } = useAutocomplete();
|
|
98
125
|
React.useImperativeHandle(ref, () => inputRef.current);
|
|
99
126
|
return (_jsxs(_Fragment, { children: [options &&
|
|
100
|
-
value?.map((value) => (_jsxs(Badge, { variant: "secondary", className: cn('data-disabled:bg-muted-foreground data-fixed:bg-muted-foreground data-disabled:text-muted data-fixed:text-muted data-disabled:hover:bg-muted-foreground data-fixed:hover:bg-muted-foreground'), children: [showValue ? value : options
|
|
127
|
+
value?.map((value) => (_jsxs(Badge, { variant: "secondary", className: cn('data-disabled:bg-muted-foreground data-fixed:bg-muted-foreground data-disabled:text-muted data-fixed:text-muted data-disabled:hover:bg-muted-foreground data-fixed:hover:bg-muted-foreground'), children: [showValue ? value : labelOf(options, value), _jsx("button", { type: "button", "aria-label": `${clearLabel} ${showValue ? value : labelOf(options, value)}`, className: cn('ring-offset-background focus:ring-ring ml-1 rounded-full outline-hidden focus:ring-2 focus:ring-offset-2', disabled && 'hidden'), onKeyDown: (event) => {
|
|
128
|
+
// cmdk's Command root calls preventDefault() on EVERY Enter that
|
|
129
|
+
// reaches it, which cancels this button's implicit activation, so
|
|
130
|
+
// the keydown must not get there. Enter only: the root's other
|
|
131
|
+
// keys (Escape, the arrows) still belong to the panel.
|
|
132
|
+
if (event.key === 'Enter') {
|
|
101
133
|
event.stopPropagation();
|
|
102
|
-
|
|
103
|
-
|
|
134
|
+
}
|
|
135
|
+
}, onClick: (event) => {
|
|
136
|
+
event.stopPropagation();
|
|
137
|
+
handleChange(value);
|
|
138
|
+
}, children: _jsx(X, { "aria-hidden": true, className: "text-muted-foreground hover:text-foreground h-3 w-3" }) })] }, value))), _jsx(CommandPrimitive.Input, { ...props, ref: inputRef, disabled: disabled, className: cn('placeholder:text-muted-foreground w-full bg-transparent outline-hidden focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 disabled:placeholder:opacity-0', className) })] }));
|
|
104
139
|
}
|
|
105
140
|
export function AutocompleteEmpty({ className, ...props }) {
|
|
106
141
|
const render = useCommandState((state) => state.filtered.count === 0);
|
|
@@ -152,9 +187,16 @@ export function AutocompleteContent({ className, position = 'popper', side = 'bo
|
|
|
152
187
|
child.type.displayName === 'AutocompleteItem') {
|
|
153
188
|
// Check if the item was proper filled with a value prop
|
|
154
189
|
if (child.props.value) {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
190
|
+
// NOT `children as string`. That cast is how a React ELEMENT got into
|
|
191
|
+
// a map every reader treats as text. An item with markup children
|
|
192
|
+
// registers nothing unless it declares a `label`, and `labelOf` reads
|
|
193
|
+
// the absence as "use the value".
|
|
194
|
+
const { label, children: itemChildren } = child.props;
|
|
195
|
+
const text = label ??
|
|
196
|
+
(typeof itemChildren === 'string' ? itemChildren : undefined);
|
|
197
|
+
if (text !== undefined) {
|
|
198
|
+
addOption({ [child.props.value]: text });
|
|
199
|
+
}
|
|
158
200
|
}
|
|
159
201
|
return;
|
|
160
202
|
}
|
|
@@ -210,7 +252,11 @@ export function AutocompleteContent({ className, position = 'popper', side = 'bo
|
|
|
210
252
|
export function AutocompleteGroup({ className, ...props }) {
|
|
211
253
|
return (_jsx(CommandPrimitive.Group, { "data-slot": "autocomplete-group", className: cn('text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium', className), ...props }));
|
|
212
254
|
}
|
|
213
|
-
export function AutocompleteItem({ className, value,
|
|
255
|
+
export function AutocompleteItem({ className, value,
|
|
256
|
+
// Read off the element by `AutocompleteContent._searchChildren`, never
|
|
257
|
+
// rendered: destructured here only to keep it out of `...props` and off the
|
|
258
|
+
// div cmdk spreads them onto.
|
|
259
|
+
label: _label, onSelect, ...props }) {
|
|
214
260
|
const { handleChange } = useAutocomplete();
|
|
215
261
|
return (_jsx(CommandPrimitive.Item, { "data-slot": "autocomplete-item", value: value, className: cn("data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", className), ...props, onMouseDown: (e) => {
|
|
216
262
|
e.preventDefault();
|
|
@@ -220,6 +266,16 @@ export function AutocompleteItem({ className, value, onSelect, ...props }) {
|
|
|
220
266
|
onSelect?.(value);
|
|
221
267
|
} }));
|
|
222
268
|
}
|
|
269
|
+
/**
|
|
270
|
+
* ⛔ LOAD-BEARING, NOT A DEBUG LABEL. `AutocompleteContent._searchChildren`
|
|
271
|
+
* recognises an option by `child.type.displayName === 'AutocompleteItem'`, and
|
|
272
|
+
* a function component carries no displayName unless it is assigned one. It
|
|
273
|
+
* never was, so the walk matched nothing and the option registry stayed empty
|
|
274
|
+
* for every consumer: a multiple-select chip rendered `options[value]` as
|
|
275
|
+
* `undefined` (an empty chip), and `AutocompleteValue.updateSearch` set the
|
|
276
|
+
* input to `undefined` on every selection outside `showValue` mode.
|
|
277
|
+
*/
|
|
278
|
+
AutocompleteItem.displayName = 'AutocompleteItem';
|
|
223
279
|
export function Autocomplete({ ref, value, defaultValue, onValueChange, onClear, className, open: openProp, onOpenChange, showValue, readOnly, disabled, multiple, onKeyDown, children, ...props }) {
|
|
224
280
|
const _ref = React.useRef(null);
|
|
225
281
|
const [open, _setOpen] = React.useState(openProp);
|
|
@@ -310,3 +366,27 @@ export function Autocomplete({ ref, value, defaultValue, onValueChange, onClear,
|
|
|
310
366
|
onKeyDown?.(e);
|
|
311
367
|
}, children: children }) }));
|
|
312
368
|
}
|
|
369
|
+
/**
|
|
370
|
+
* ⛔ THE REST OF THE SET, FOR THE SAME REASON AS `AutocompleteItem` ABOVE.
|
|
371
|
+
*
|
|
372
|
+
* A function component's `name` is whatever the bundler left it — one letter in
|
|
373
|
+
* a production build — so any lookup written against `child.type` needs an
|
|
374
|
+
* explicit string to compare. `AutocompleteItem` is the only part the walk
|
|
375
|
+
* reads TODAY, and it is the part that shipped an empty option registry to
|
|
376
|
+
* every consumer while it was anonymous. Naming the whole set costs a line each
|
|
377
|
+
* and removes the next instance of that defect before it is written; it also
|
|
378
|
+
* makes these parts legible in a React tree, which `MultipleSelect` next door
|
|
379
|
+
* has always done.
|
|
380
|
+
*
|
|
381
|
+
* `__tests__`-style enumeration lives in `autocomplete.test.tsx`: it reads the
|
|
382
|
+
* module's exports rather than a list, so a new part added without a name fails
|
|
383
|
+
* without anyone remembering to extend anything.
|
|
384
|
+
*/
|
|
385
|
+
Autocomplete.displayName = 'Autocomplete';
|
|
386
|
+
AutocompleteTrigger.displayName = 'AutocompleteTrigger';
|
|
387
|
+
AutocompleteValue.displayName = 'AutocompleteValue';
|
|
388
|
+
AutocompleteMultipleValue.displayName = 'AutocompleteMultipleValue';
|
|
389
|
+
AutocompleteContent.displayName = 'AutocompleteContent';
|
|
390
|
+
AutocompleteGroup.displayName = 'AutocompleteGroup';
|
|
391
|
+
AutocompleteEmpty.displayName = 'AutocompleteEmpty';
|
|
392
|
+
AutocompleteLoading.displayName = 'AutocompleteLoading';
|
|
@@ -1,12 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
-
/**
|
|
4
|
-
* `credit` is the accounting reading of a credit amount, NOT an alias of
|
|
5
|
-
* `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
|
|
6
|
-
* `--credit-foreground` mirrors `--credit` by contract, so the red carries the
|
|
7
|
-
* role as text over a tinted surface. Do not "fix" this into a solid
|
|
8
|
-
* `bg-credit` fill — that renders red-on-red and is invisible.
|
|
9
|
-
*/
|
|
10
3
|
/**
|
|
11
4
|
* `gap-1` is load-bearing, not decoration: a badge holding a label AND an
|
|
12
5
|
* element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
|
|
@@ -14,6 +7,17 @@ import { type VariantProps } from 'class-variance-authority';
|
|
|
14
7
|
* anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
|
|
15
8
|
* `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
|
|
16
9
|
* `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
|
|
10
|
+
*
|
|
11
|
+
* `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
|
|
12
|
+
* semicircles sized to ONE line box, so a label that wraps stretches those caps
|
|
13
|
+
* over two lines and the shape reads as a rounded blob, not a token. It bit a
|
|
14
|
+
* consumer table whose column was sized to its content: `min-content` on
|
|
15
|
+
* wrappable text resolves to the WIDEST WORD, so a three-word group name landed
|
|
16
|
+
* at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
|
|
17
|
+
* also pins `min-content` to the full label, which is what lets a caller cap the
|
|
18
|
+
* box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
|
|
19
|
+
* genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
|
|
20
|
+
* lets it win.
|
|
17
21
|
*/
|
|
18
22
|
declare const badgeVariants: (props?: ({
|
|
19
23
|
variant?: "default" | "secondary" | "outline" | "destructive" | "alert" | "success" | "active" | "inactive" | "credit" | "error" | "info" | "purple" | 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
|
|
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;;;;;;;;;;;;;;;;;;GAkBG;AACH,QAAA,MAAM,aAAa;;;8EAqDlB,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,qBAsBzE;AAED,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
|
|
@@ -2,13 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { cva } from 'class-variance-authority';
|
|
3
3
|
import { cn } from '../../../lib/utils.js';
|
|
4
4
|
import { Slot } from '@radix-ui/react-slot';
|
|
5
|
-
/**
|
|
6
|
-
* `credit` is the accounting reading of a credit amount, NOT an alias of
|
|
7
|
-
* `destructive` (an error/alarm). The credit role is a tint-and-ink pair:
|
|
8
|
-
* `--credit-foreground` mirrors `--credit` by contract, so the red carries the
|
|
9
|
-
* role as text over a tinted surface. Do not "fix" this into a solid
|
|
10
|
-
* `bg-credit` fill — that renders red-on-red and is invisible.
|
|
11
|
-
*/
|
|
12
5
|
/**
|
|
13
6
|
* `gap-1` is load-bearing, not decoration: a badge holding a label AND an
|
|
14
7
|
* element child (`ID<code>ctx-123</code>`) has nothing between them otherwise —
|
|
@@ -16,8 +9,19 @@ import { Slot } from '@radix-ui/react-slot';
|
|
|
16
9
|
* anonymous flex item — so the screen reads `IDctx-123`. Consumers were pasting
|
|
17
10
|
* `className="gap-1"` per call site; `cn` runs tailwind-merge, so an explicit
|
|
18
11
|
* `gap-2` still wins. Single-child badges are unaffected: gap needs two items.
|
|
12
|
+
*
|
|
13
|
+
* `whitespace-nowrap` keeps the pill a pill. `rounded-full` draws the ends as
|
|
14
|
+
* semicircles sized to ONE line box, so a label that wraps stretches those caps
|
|
15
|
+
* over two lines and the shape reads as a rounded blob, not a token. It bit a
|
|
16
|
+
* consumer table whose column was sized to its content: `min-content` on
|
|
17
|
+
* wrappable text resolves to the WIDEST WORD, so a three-word group name landed
|
|
18
|
+
* at 112px wide and 46px tall against the 26px of a single-line badge. Nowrap
|
|
19
|
+
* also pins `min-content` to the full label, which is what lets a caller cap the
|
|
20
|
+
* box with `max-w-*` plus a truncating child and get an ellipsis. A caller that
|
|
21
|
+
* genuinely wants a wrapping badge passes `whitespace-normal`; tailwind-merge
|
|
22
|
+
* lets it win.
|
|
19
23
|
*/
|
|
20
|
-
const badgeVariants = 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', {
|
|
24
|
+
const badgeVariants = cva('inline-flex items-center gap-1 whitespace-nowrap 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', {
|
|
21
25
|
variants: {
|
|
22
26
|
variant: {
|
|
23
27
|
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
|
@@ -25,6 +29,14 @@ const badgeVariants = cva('inline-flex items-center gap-1 rounded-full border bo
|
|
|
25
29
|
inactive: 'bg-muted text-foreground border-muted-foreground/40 py-[2px] px-3',
|
|
26
30
|
secondary: 'border-transparent bg-muted-foreground text-white dark:text-black',
|
|
27
31
|
destructive: 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
|
32
|
+
/**
|
|
33
|
+
* The accounting reading of a credit amount, NOT an alias of
|
|
34
|
+
* `destructive` (an error/alarm). The credit role is a tint-and-ink
|
|
35
|
+
* pair: `--credit-foreground` mirrors `--credit` by contract, so the
|
|
36
|
+
* red carries the role as text over a tinted surface. Do not "fix"
|
|
37
|
+
* this into a solid `bg-credit` fill — that renders red-on-red and is
|
|
38
|
+
* invisible.
|
|
39
|
+
*/
|
|
28
40
|
credit: 'border-credit/30 bg-credit/10 text-credit-foreground px-[10px] py-1',
|
|
29
41
|
error: 'border-system-error-border bg-system-error-surface text-system-error-text px-[10px] py-1',
|
|
30
42
|
success: 'border-system-success-border bg-system-success-surface text-system-success-text px-[10px] py-1',
|
|
@@ -52,6 +64,16 @@ const badgeVariants = cva('inline-flex items-center gap-1 rounded-full border bo
|
|
|
52
64
|
});
|
|
53
65
|
function Badge({ className, variant, size, asChild, ...props }) {
|
|
54
66
|
const Comp = asChild ? Slot : 'span';
|
|
55
|
-
|
|
67
|
+
/**
|
|
68
|
+
* A bare `span` is generic, and ARIA prohibits an accessible name on a
|
|
69
|
+
* generic element: a caller's `aria-label` was dropped by assistive tech and
|
|
70
|
+
* flagged by axe as `aria-prohibited-attr`. `role="img"` is the smallest role
|
|
71
|
+
* that permits the name and lets it stand in for the visible text, which is
|
|
72
|
+
* exactly what a labelled span badge wants. Unlabelled badges stay generic;
|
|
73
|
+
* `asChild` keeps the child's native role; and a caller's own `role` still wins
|
|
74
|
+
* because it arrives with the spread below.
|
|
75
|
+
*/
|
|
76
|
+
const labelled = props['aria-label'] !== undefined || props['aria-labelledby'] !== undefined;
|
|
77
|
+
return (_jsx(Comp, { "data-slot": "badge", role: !asChild && labelled ? 'img' : undefined, className: cn(badgeVariants({ variant, size }), className), ...props }));
|
|
56
78
|
}
|
|
57
79
|
export { Badge, badgeVariants };
|
|
@@ -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,
|
|
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,EAGT,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,qBAgKA;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"}
|
|
@@ -1,14 +1,20 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
import { DayPicker, getDefaultClassNames } from 'react-day-picker';
|
|
4
|
+
import { DayPicker, defaultDateLib, getDefaultClassNames } from 'react-day-picker';
|
|
5
5
|
import { cn } from '../../../lib/utils.js';
|
|
6
6
|
import { Button, buttonVariants } from '../../../components/ui/button/index.js';
|
|
7
7
|
import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from 'lucide-react';
|
|
8
8
|
function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'plain', formatters, components, ...props }) {
|
|
9
9
|
const defaultClassNames = getDefaultClassNames();
|
|
10
10
|
return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn('bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:34px] [--nav-size:28px] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent', String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
|
|
11
|
-
|
|
11
|
+
// react-day-picker's own default is dateLib.format(month, 'LLLL'), the
|
|
12
|
+
// full month name in the locale it was given. Shortening it has to go
|
|
13
|
+
// through the same dateLib: Date.toLocaleString('default') reads the
|
|
14
|
+
// runtime locale instead, so the dropdown fell back to English while
|
|
15
|
+
// the weekdays and the caption around it stayed in the consumer's
|
|
16
|
+
// language. 'LLL' is the abbreviated form of the same standalone month.
|
|
17
|
+
formatMonthDropdown: (month, dateLib = defaultDateLib) => dateLib.format(month, 'LLL'),
|
|
12
18
|
...formatters
|
|
13
19
|
}, classNames: {
|
|
14
20
|
root: cn('w-fit', defaultClassNames.root),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG;IACjD;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,CAAA;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWjE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,KAAK,cAAc,GAAG,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG;IACjD;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC7C,CAAA;AAED,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,IAAW,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAQ1E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,qBAQ1E;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAWvE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAQvE;AAED,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,EACZ,CAAA"}
|
|
@@ -7,7 +7,7 @@ function CardHeader({ className, ...props }) {
|
|
|
7
7
|
return (_jsx("div", { "data-slot": "card-header", className: cn('flex flex-col space-y-1.5', className), ...props }));
|
|
8
8
|
}
|
|
9
9
|
function CardTitle({ className, as: Comp = 'h3', ...props }) {
|
|
10
|
-
return (_jsx(Comp, { "data-slot": "card-title", className: cn('text-sm leading-none font-medium
|
|
10
|
+
return (_jsx(Comp, { "data-slot": "card-title", className: cn('text-sm leading-none font-medium', className), ...props }));
|
|
11
11
|
}
|
|
12
12
|
function CardDescription({ className, ...props }) {
|
|
13
13
|
return (_jsx("p", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/copy-field/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAmCD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAc,EACd,WAAW,EACX,WAA0B,EAC1B,SAAwB,EACxB,UAA4B,EAC5B,mBAAmB,EACpB,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/copy-field/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;;;OAUG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAA;AAmCD,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,KAAK,EACL,MAAc,EACd,WAAW,EACX,WAA0B,EAC1B,SAAwB,EACxB,UAA4B,EAC5B,mBAAmB,EACpB,EAAE,cAAc,qBAkKhB"}
|
|
@@ -115,5 +115,5 @@ export function CopyField({ value, label, masked = false, onCopyLabel, revealLab
|
|
|
115
115
|
// long value (e.g. a UUID recovery code) scrolls inside the field
|
|
116
116
|
// instead of overflowing its container. No `font-mono`: the value
|
|
117
117
|
// inherits the app sans font (Inter) so it matches every other field.
|
|
118
|
-
className: "text-input-foreground h-full min-w-0 flex-1 cursor-text border-none bg-transparent text-sm outline-none select-text focus:ring-0 focus:ring-offset-0" }), masked ? (_jsx(IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-
|
|
118
|
+
className: "text-input-foreground h-full min-w-0 flex-1 cursor-text border-none bg-transparent text-sm outline-none select-text focus:ring-0 focus:ring-offset-0" }), masked ? (_jsx(IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-label": revealed ? hideLabel : revealLabel, onClick: () => setRevealed((prev) => !prev), children: revealed ? _jsx(EyeOff, {}) : _jsx(Eye, {}) })) : null, _jsx(IconButton, { type: "button", variant: "outline", size: "small", rounded: true, "aria-label": copyAccessibleName, onClick: handleCopy, children: copied ? _jsx(Check, {}) : _jsx(Copy, {}) })] })] }));
|
|
119
119
|
}
|