@povio/ui 5.0.0-rc.3 → 5.0.0-rc.4
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/README.md +6 -2
- package/dist/{Breadcrumbs-CbKzAq1v.js → Breadcrumbs-FF8hMfXd.js} +1 -1
- package/dist/{Calendar-CVSQH-rC.js → Calendar-BTjajO6i.js} +6 -136
- package/dist/{Checkbox-BU0d702K.js → Checkbox-CV1ILXXO.js} +1 -1
- package/dist/{CheckboxCheckmark-usHsolNj.js → CheckboxCheckmark-CpC3wlMs.js} +1 -1
- package/dist/{ComponentGallery-DIFeJqGx.js → ComponentGallery-BWiPGUL8.js} +1343 -206
- package/dist/{DatePicker-D95gDPhg.js → DatePicker-DOLL7mkc.js} +12 -12
- package/dist/{DatePickerInput-CX6NYim4.js → DatePickerInput-BLBcySA2.js} +8 -7
- package/dist/{DateRangePicker-_uTQk_ae.js → DateRangePicker-BF-1CztH.js} +13 -185
- package/dist/{DateTimePicker-BB058Z34.js → DateTimePicker-Cj0qvJUz.js} +12 -12
- package/dist/{FileInput-C0-6bw4w.js → FileInput-Br5DQaGQ.js} +3 -2
- package/dist/{FileTrigger-CDXcQthK.js → FileTrigger-Cthk5_Wp.js} +1 -30
- package/dist/{FileUpload-DDpYMn8f.js → FileUpload--7ub3EZO.js} +3 -2
- package/dist/{FormField-U_-d4V_g.js → FormField-B99dLt8o.js} +1 -1
- package/dist/{FormFieldHeaderTooltip-DXbuu88v.js → FormFieldHeaderTooltip-BV2Ju4oB.js} +1 -1
- package/dist/{InlineTooltipWrapper-Bpmd--e7.js → InlineTooltipWrapper-BpApaGXV.js} +1 -1
- package/dist/{InputItem-D-KuiNSc.js → InputItem-CIxbTxZu.js} +10 -10
- package/dist/{Inputs-j3JmcLWR.js → Inputs-DJSKiaWY.js} +1 -1
- package/dist/NumberFormatter-CLDS_LRZ.js +265 -0
- package/dist/{NumberRangeInput-C-8U05wF.js → NumberRangeInput-B8-LHfg3.js} +6 -5
- package/dist/{RadioGroup-B7_pNwn9.js → RadioGroup-DOw3PRoX.js} +1 -1
- package/dist/{RichTextEditor-D9-B1Cze.js → RichTextEditor-D4yN7Wj7.js} +2 -2
- package/dist/{Select-CkujlTjm.js → Select-UR0ec2Ux.js} +2 -2
- package/dist/{Slider-BHPl0OPy.js → Slider-CzEmKYBF.js} +1 -1
- package/dist/{Table-BDNSuEWc.js → Table-piX1SWvN.js} +1 -1
- package/dist/{TextArea-DqHDiRGJ.js → TextArea-D8WkKsGn.js} +3 -3
- package/dist/{TimePicker-DQ6JCkGB.js → TimePicker-C4taAOFQ.js} +10 -9
- package/dist/{ToggleGroup-DX0VYXwP.js → ToggleGroup-DOk27fgI.js} +5 -66
- package/dist/{Tooltip-B9DKcYvr.js → Tooltip-CpG1nz7Y.js} +2 -2
- package/dist/{TooltipWrapper-DznDgVJB.js → TooltipWrapper-3jyN0Wss.js} +1 -1
- package/dist/components/autocomplete.js +2 -2
- package/dist/components/breadcrumbs.js +1 -1
- package/dist/components/checkbox-group.js +3 -3
- package/dist/components/checkbox.js +1 -1
- package/dist/components/date-picker.js +1 -1
- package/dist/components/date-range-picker.js +1 -1
- package/dist/components/date-time-picker.js +1 -1
- package/dist/components/file-input.js +1 -1
- package/dist/components/file-upload-container.js +1 -1
- package/dist/components/file-upload.js +1 -1
- package/dist/components/form-field.js +1 -1
- package/dist/components/icon-button.js +1 -1
- package/dist/components/input.js +4 -4
- package/dist/components/number-field.js +7 -6
- package/dist/components/number-range-input.js +1 -1
- package/dist/components/pagination.js +32 -28
- package/dist/components/query-autocomplete.js +1 -1
- package/dist/components/query-select.js +2 -2
- package/dist/components/radio-group.js +1 -1
- package/dist/components/select.js +1 -1
- package/dist/components/slider.js +1 -1
- package/dist/components/text-area.js +1 -1
- package/dist/components/time-picker.js +1 -1
- package/dist/components/toggle-group.js +1 -1
- package/dist/components/tooltip-ellipsis.js +1 -1
- package/dist/components/tooltip.js +1 -1
- package/dist/config/ui-configurator-theme.js +1 -1
- package/dist/config/ui-configurator.js +1081 -257
- package/dist/config/ui-router.js +1 -1
- package/dist/{datePickerValue.utils-CUzkWie8.js → datePickerValue.utils-DCgoSrP3.js} +5 -5
- package/dist/hooks/use-filters.js +1 -1
- package/dist/index.js +15 -15
- package/dist/numberStatic.utils-BX50PSee.js +421 -0
- package/dist/rhf/checkbox.js +1 -1
- package/dist/rhf/date-picker.js +1 -1
- package/dist/rhf/date-range-picker.js +1 -1
- package/dist/rhf/date-time-picker.js +1 -1
- package/dist/rhf/file-input.js +1 -1
- package/dist/rhf/file-upload.js +1 -1
- package/dist/rhf/number-range-input.js +1 -1
- package/dist/rhf/radio-group.js +1 -1
- package/dist/rhf/rich-text-editor.js +1 -1
- package/dist/rhf/select.js +1 -1
- package/dist/rhf/slider.js +1 -1
- package/dist/rhf/text-area.js +1 -1
- package/dist/rhf/time-picker.js +1 -1
- package/dist/rhf/toggle-group.js +1 -1
- package/dist/rhf.js +15 -15
- package/dist/rich-text-editor.js +1 -1
- package/dist/{router.context-B0jTMtE0.js → router.context-B4FvsTim.js} +2 -2
- package/dist/staticDateTimeSegments-DtU63_dw.js +1764 -0
- package/dist/{staticSelect.utils-BemUyaaA.js → staticSelect.utils-uHa8f_c6.js} +5 -144
- package/dist/styles/configurator.css +731 -218
- package/dist/{table.cva-BikE8qJH.js → table.cva-DlMT-zLD.js} +2 -3
- package/dist/tanstack/checkbox.js +1 -1
- package/dist/tanstack/date-picker.js +1 -1
- package/dist/tanstack/date-range-picker.js +1 -1
- package/dist/tanstack/date-time-picker.js +1 -1
- package/dist/tanstack/file-input.js +1 -1
- package/dist/tanstack/file-upload.js +1 -1
- package/dist/tanstack/form.js +1 -1
- package/dist/tanstack/inputs.js +1 -1
- package/dist/tanstack/number-range-input.js +1 -1
- package/dist/tanstack/radio-group.js +1 -1
- package/dist/tanstack/rich-text-editor.js +1 -1
- package/dist/tanstack/select.js +1 -1
- package/dist/tanstack/slider.js +1 -1
- package/dist/tanstack/table.js +2 -2
- package/dist/tanstack/text-area.js +1 -1
- package/dist/tanstack/time-picker.js +1 -1
- package/dist/tanstack/toggle-group.js +1 -1
- package/dist/tanstack.js +27 -27
- package/dist/theme-model-DtYPxNvH.js +406 -0
- package/dist/upload-CXU83BJ4.js +30 -0
- package/dist/useControlledState-CzXkZCX8.js +30 -0
- package/dist/{useFieldAccessibility-B4MVL6fz.js → useFieldAccessibility-ScC6Mtd5.js} +2 -2
- package/dist/{useFilters-kkEUFKmQ.js → useFilters-XNH27Md2.js} +1 -1
- package/dist/{useFormAutosave-Mg-tdwMh.js → useFormAutosave-DfuP7drj.js} +1 -1
- package/dist/{useStaticInputHandoff-CvSBPUB3.js → useStaticInputHandoff-NeZVnci-.js} +3 -3
- package/dist/{useTableColumnConfig-gfVame8v.js → useTableColumnConfig-BTGZiluz.js} +3 -3
- package/package.json +1 -1
- package/src/configurator/README.md +3 -3
- package/dist/FocusScope-CO9oJ1sc.js +0 -343
- package/dist/chain-DIXr2VAT.js +0 -10
- package/dist/focusSafely-DCGrr2bb.js +0 -447
- package/dist/getScrollParent-kSR7EtoT.js +0 -47
- package/dist/numberStatic.utils-BMgRzyd3.js +0 -902
- package/dist/openLink-CQhMhfzO.js +0 -121
- package/dist/platform-BXNIIAfU.js +0 -42
- package/dist/staticDateTimeSegments-CsCE9Buo.js +0 -3604
- package/dist/theme-model-C-QMCksE.js +0 -136
- package/dist/useControlledState-DQxX6LMN.js +0 -189
- package/dist/useFocusable-Bd0UsrQ7.js +0 -63
- package/dist/useFormValidationState-D3z-gafz.js +0 -1341
- package/dist/useLayoutEffect-B2-1tbPJ.js +0 -83
- package/dist/useSyncRef-RGMv0rXK.js +0 -338
|
@@ -2,7 +2,6 @@ import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
|
|
|
2
2
|
//#region src/components/table/table.cva.ts
|
|
3
3
|
const tableRowDefinition = UIOverrides.defineConfig({
|
|
4
4
|
base: [
|
|
5
|
-
"h-9 max-h-12",
|
|
6
5
|
"not-selected:not-disabled:hover:bg-surface-default-background",
|
|
7
6
|
"disabled:opacity-50",
|
|
8
7
|
"selected:bg-interactive-subtle-secondary-background",
|
|
@@ -16,7 +15,7 @@ const tableRowDefinition = UIOverrides.defineConfig({
|
|
|
16
15
|
} } }
|
|
17
16
|
});
|
|
18
17
|
const theadDefinition = UIOverrides.defineConfig({ base: ["group/table-head sticky top-0 z-sticky data-is-sticky:shadow-2"] });
|
|
19
|
-
const tableHeadRowDefinition = UIOverrides.defineConfig({ base: ["
|
|
18
|
+
const tableHeadRowDefinition = UIOverrides.defineConfig({ base: ["w-full"] });
|
|
20
19
|
const tableHeadDataDefinition = UIOverrides.defineConfig({
|
|
21
20
|
base: ["border-b border-b-border-default-subtle border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-surface-default-card"],
|
|
22
21
|
config: {
|
|
@@ -29,7 +28,7 @@ const tableHeadDataDefinition = UIOverrides.defineConfig({
|
|
|
29
28
|
});
|
|
30
29
|
const tableDataDefinition = UIOverrides.defineConfig({
|
|
31
30
|
base: [
|
|
32
|
-
"relative h-0.5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-
|
|
31
|
+
"relative h-0.5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-table-cell-container-side-default py-table-cell-container-height-default",
|
|
33
32
|
"border-b border-b-border-default-subtle",
|
|
34
33
|
"has-[*>[data-hovered]:not([data-disabled])]:hover:border-b-state-border-default-input/hover",
|
|
35
34
|
"has-[*>[data-invalid]]:border-b-border-destructive-base!",
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as CheckboxBase, t as Checkbox } from "../Checkbox-
|
|
1
|
+
import { n as CheckboxBase, t as Checkbox } from "../Checkbox-CV1ILXXO.js";
|
|
2
2
|
export { Checkbox, CheckboxBase };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as DatePicker } from "../DatePicker-
|
|
1
|
+
import { t as DatePicker } from "../DatePicker-DOLL7mkc.js";
|
|
2
2
|
export { DatePicker };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as DateRangePicker } from "../DateRangePicker-
|
|
1
|
+
import { t as DateRangePicker } from "../DateRangePicker-BF-1CztH.js";
|
|
2
2
|
export { DateRangePicker };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as DateTimePicker } from "../DateTimePicker-
|
|
1
|
+
import { t as DateTimePicker } from "../DateTimePicker-Cj0qvJUz.js";
|
|
2
2
|
export { DateTimePicker };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as FileInput } from "../FileInput-
|
|
1
|
+
import { t as FileInput } from "../FileInput-Br5DQaGQ.js";
|
|
2
2
|
export { FileInput };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as FileUpload } from "../FileUpload
|
|
1
|
+
import { t as FileUpload } from "../FileUpload--7ub3EZO.js";
|
|
2
2
|
export { FileUpload };
|
package/dist/tanstack/form.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { i as useFormValue, n as useForm, r as useFormState } from "../form.binding-CG1RPv6o.js";
|
|
2
|
-
import { r as Form, t as useFormAutosave } from "../useFormAutosave-
|
|
2
|
+
import { r as Form, t as useFormAutosave } from "../useFormAutosave-DfuP7drj.js";
|
|
3
3
|
export { Form, useForm, useFormAutosave, useFormState, useFormValue };
|
package/dist/tanstack/inputs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as NumberRangeInput } from "../NumberRangeInput-
|
|
1
|
+
import { t as NumberRangeInput } from "../NumberRangeInput-B8-LHfg3.js";
|
|
2
2
|
export { NumberRangeInput };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as RadioGroup } from "../RadioGroup-
|
|
1
|
+
import { t as RadioGroup } from "../RadioGroup-DOw3PRoX.js";
|
|
2
2
|
export { RadioGroup };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as RichTextEditor } from "../RichTextEditor-
|
|
1
|
+
import { t as RichTextEditor } from "../RichTextEditor-D4yN7Wj7.js";
|
|
2
2
|
export { RichTextEditor };
|
package/dist/tanstack/select.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Select } from "../Select-
|
|
1
|
+
import { t as Select } from "../Select-UR0ec2Ux.js";
|
|
2
2
|
export { Select };
|
package/dist/tanstack/slider.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as Slider } from "../Slider-
|
|
1
|
+
import { t as Slider } from "../Slider-CzEmKYBF.js";
|
|
2
2
|
export { Slider };
|
package/dist/tanstack/table.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "../Table-
|
|
2
|
-
import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "../useTableColumnConfig-
|
|
1
|
+
import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "../Table-piX1SWvN.js";
|
|
2
|
+
import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "../useTableColumnConfig-BTGZiluz.js";
|
|
3
3
|
export { CellText, ColumnConfigModal, HeaderText, InfiniteTable, PaginatedTable, Table, dynamicColumns, usePagination, useSorting, useTableColumnConfig, useTableNav };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as TextArea } from "../TextArea-
|
|
1
|
+
import { t as TextArea } from "../TextArea-D8WkKsGn.js";
|
|
2
2
|
export { TextArea };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as TimePicker } from "../TimePicker-
|
|
1
|
+
import { t as TimePicker } from "../TimePicker-C4taAOFQ.js";
|
|
2
2
|
export { TimePicker };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as ToggleGroup } from "../ToggleGroup-
|
|
1
|
+
import { t as ToggleGroup } from "../ToggleGroup-DOk27fgI.js";
|
|
2
2
|
export { ToggleGroup };
|
package/dist/tanstack.js
CHANGED
|
@@ -2,28 +2,25 @@ import { t as logger } from "./logger-CqZjM-sn.js";
|
|
|
2
2
|
import { t as DropdownMenu } from "./DropdownMenu-5jmtgLXd.js";
|
|
3
3
|
import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.js";
|
|
4
4
|
import { a as isEqual, i as useDeepCompareMemo, n as useDeepCompareEffect, o as ObjectUtils, r as useDeepCompareLayoutEffect, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
|
|
5
|
-
import { t as FileUpload } from "./FileUpload
|
|
5
|
+
import { t as FileUpload } from "./FileUpload--7ub3EZO.js";
|
|
6
6
|
import { t as PasswordInput } from "./PasswordInput-DYwUZ4-k.js";
|
|
7
|
-
import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-
|
|
8
|
-
import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-
|
|
7
|
+
import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.js";
|
|
8
|
+
import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-CpC3wlMs.js";
|
|
9
9
|
import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
|
|
10
10
|
import { t as X } from "./x-B6vfz8Ps.js";
|
|
11
11
|
import { t as UIOverrides } from "./uiOverrides.context-BTCH9y5a.js";
|
|
12
12
|
import { n as iconSlotDefinition, t as IconSlot } from "./IconSlot-DSK7qNxc.js";
|
|
13
|
-
import { t as Breadcrumbs } from "./Breadcrumbs-
|
|
14
|
-
import { t as Checkbox } from "./Checkbox-
|
|
15
|
-
import { a as getKeyInteractionAction, i as createKeyInteractionsHandler, o as useKeyInteractions, s as useDebounceCallback } from "./staticSelect.utils-
|
|
16
|
-
import { t as Slider } from "./Slider-
|
|
13
|
+
import { t as Breadcrumbs } from "./Breadcrumbs-FF8hMfXd.js";
|
|
14
|
+
import { t as Checkbox } from "./Checkbox-CV1ILXXO.js";
|
|
15
|
+
import { a as getKeyInteractionAction, i as createKeyInteractionsHandler, o as useKeyInteractions, s as useDebounceCallback } from "./staticSelect.utils-uHa8f_c6.js";
|
|
16
|
+
import { t as Slider } from "./Slider-CzEmKYBF.js";
|
|
17
17
|
import { t as Accordion } from "./Accordion-BzwO4_ml.js";
|
|
18
|
-
import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition, t as RadioGroup } from "./RadioGroup-
|
|
18
|
+
import { i as radioDefinition, n as radioContentRowDefinition, r as radioContentWrapperDefinition, t as RadioGroup } from "./RadioGroup-DOw3PRoX.js";
|
|
19
19
|
import { n as switchDefinition, t as Switch } from "./Switch-CqnGEdeD.js";
|
|
20
|
-
import { n as textAreaWrapperDefinition, t as TextArea } from "./TextArea-
|
|
21
|
-
import { t as Tooltip } from "./Tooltip-
|
|
20
|
+
import { n as textAreaWrapperDefinition, t as TextArea } from "./TextArea-D8WkKsGn.js";
|
|
21
|
+
import { t as Tooltip } from "./Tooltip-CpG1nz7Y.js";
|
|
22
22
|
import { a as breadcrumbsDefinition, i as breadcrumbSegmentDefinition, n as breadcrumbIconDefinition, r as breadcrumbItemDefinition, t as breadcrumbChevronDefinition } from "./breadcrumbs.cva-7zzdDhVR.js";
|
|
23
23
|
import { i as menuPopoverWrapperDefinition, n as menuItemDefinition, r as menuPopoverDefinition, t as dropdownMenuDefinition } from "./dropdownMenu.cva-DvEmX0bs.js";
|
|
24
|
-
import { t as ToggleGroup } from "./ToggleGroup-DX0VYXwP.js";
|
|
25
|
-
import { n as useScrollableListBox } from "./Calendar-CVSQH-rC.js";
|
|
26
|
-
import { t as DateRangePicker } from "./DateRangePicker-_uTQk_ae.js";
|
|
27
24
|
import { i as tooltipTextDefinition, n as tooltipPointerHorizontalDefinition, r as tooltipPointerVerticalDefinition, t as tooltipDefinition } from "./tooltip.cva-BIzlOXHH.js";
|
|
28
25
|
import { t as typographyDefinition } from "./typography.cva-iD15k56p.js";
|
|
29
26
|
import { t as Typography } from "./Typography-LU4z2pR1.js";
|
|
@@ -43,7 +40,7 @@ import { TextButton } from "./components/text-button.js";
|
|
|
43
40
|
import { ToggleButton } from "./components/toggle-button.js";
|
|
44
41
|
import { i as useFormValue, n as useForm, r as useFormState } from "./form.binding-CG1RPv6o.js";
|
|
45
42
|
import { n as formFieldErrorDefinition } from "./FormFieldError-DeOHHLo2.js";
|
|
46
|
-
import { a as formFieldHeaderDefinition, i as labelDefinition, n as formFieldHelperDefinition, t as FormField } from "./FormField-
|
|
43
|
+
import { a as formFieldHeaderDefinition, i as labelDefinition, n as formFieldHelperDefinition, t as FormField } from "./FormField-B99dLt8o.js";
|
|
47
44
|
import { n as tagDefinition, t as Tag } from "./Tag-DPg5sL1Z.js";
|
|
48
45
|
import { n as resources, t as ns } from "./i18n-CX2EjhJI.js";
|
|
49
46
|
import { a as inputSizeDefinition, i as inputSideDefinition, n as inputClearClassDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "./input.cva-DJA8ovm_.js";
|
|
@@ -52,21 +49,24 @@ import { t as popoverDefinition } from "./popover.cva-Bhud1wnp.js";
|
|
|
52
49
|
import { Input } from "./components/input.js";
|
|
53
50
|
import { Autocomplete } from "./components/autocomplete.js";
|
|
54
51
|
import { CheckboxGroup } from "./components/checkbox-group.js";
|
|
55
|
-
import { t as
|
|
56
|
-
import {
|
|
52
|
+
import { t as DateRangePicker } from "./DateRangePicker-BF-1CztH.js";
|
|
53
|
+
import { n as useScrollableListBox } from "./Calendar-BTjajO6i.js";
|
|
54
|
+
import { t as TimePicker } from "./TimePicker-C4taAOFQ.js";
|
|
55
|
+
import { t as ToggleGroup } from "./ToggleGroup-DOk27fgI.js";
|
|
56
|
+
import { r as useLongPressRepeat } from "./datePickerValue.utils-DCgoSrP3.js";
|
|
57
57
|
import { t as IntlUtils } from "./intl.utils-zwAFoZ0U.js";
|
|
58
58
|
import { t as DateTimeUtils } from "./date-time.utils-0F9qduim.js";
|
|
59
59
|
import { t as DateUtils } from "./date.utils-B8_QF9y6.js";
|
|
60
60
|
import { t as datePickerInputContentRowDefinition } from "./datePickerInput.cva-Cd7UUN61.js";
|
|
61
|
-
import { t as DatePicker } from "./DatePicker-
|
|
62
|
-
import { t as Select } from "./Select-
|
|
63
|
-
import { t as DateTimePicker } from "./DateTimePicker-
|
|
61
|
+
import { t as DatePicker } from "./DatePicker-DOLL7mkc.js";
|
|
62
|
+
import { t as Select } from "./Select-UR0ec2Ux.js";
|
|
63
|
+
import { t as DateTimePicker } from "./DateTimePicker-Cj0qvJUz.js";
|
|
64
64
|
import { t as FileUtils } from "./file.utils-DqQxnuAm.js";
|
|
65
65
|
import { a as progressTrackWrapperDefinition, i as progressTrackDefinition, n as progressDefinition, o as progressValueDefinition, r as progressFillDefinition, t as Progress } from "./Progress-B3mY9rIP.js";
|
|
66
66
|
import { t as fileUploadDropZoneDefinition } from "./fileUpload.cva-ujmStxB1.js";
|
|
67
|
-
import { n as fileInputButtonDefinition, r as fileInputDropZoneDefinition, t as FileInput } from "./FileInput-
|
|
67
|
+
import { n as fileInputButtonDefinition, r as fileInputDropZoneDefinition, t as FileInput } from "./FileInput-Br5DQaGQ.js";
|
|
68
68
|
import { NumberField } from "./components/number-field.js";
|
|
69
|
-
import { t as NumberRangeInput } from "./NumberRangeInput-
|
|
69
|
+
import { t as NumberRangeInput } from "./NumberRangeInput-B8-LHfg3.js";
|
|
70
70
|
import { QueryAutocomplete } from "./components/query-autocomplete.js";
|
|
71
71
|
import { QuerySelect } from "./components/query-select.js";
|
|
72
72
|
import { n as toggleGroupItemDefinition, t as toggleGroupDefinition } from "./toggleGroup.cva-MbpaEBg1.js";
|
|
@@ -89,22 +89,22 @@ import { a as toastDefinition, n as statusIconDefinition$1, r as statusSeparator
|
|
|
89
89
|
import { t as Toast } from "./Toast-DtG3pA61.js";
|
|
90
90
|
import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-qgpzMFD4.js";
|
|
91
91
|
import { useToast } from "./components/use-toast.js";
|
|
92
|
-
import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-
|
|
92
|
+
import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
|
|
93
93
|
import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
|
|
94
|
-
import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-
|
|
94
|
+
import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "./useTableColumnConfig-BTGZiluz.js";
|
|
95
95
|
import { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
|
|
96
96
|
import { Link } from "./components/link.js";
|
|
97
97
|
import { Badge } from "./components/badge.js";
|
|
98
98
|
import { t as Confirmation } from "./confirmation.context-BuzgCfYl.js";
|
|
99
|
-
import { t as UIRouter } from "./router.context-
|
|
99
|
+
import { t as UIRouter } from "./router.context-B4FvsTim.js";
|
|
100
100
|
import { t as useLocalStorage } from "./useLocalStorage-PlcaJ1tP.js";
|
|
101
101
|
import { t as ThemeContext } from "./theme.context-B3wQDJ-i.js";
|
|
102
102
|
import { t as tooltipWrapperTriggerDefinition } from "./tooltipWrapper.cva-BBQ4ic3D.js";
|
|
103
103
|
import { t as dynamicInputs } from "./dynamicInputs-CRMWIpHA.js";
|
|
104
104
|
import { t as RoutingUtils } from "./routing.utils-UTQonIhB.js";
|
|
105
|
-
import { t as useFilters } from "./useFilters-
|
|
105
|
+
import { t as useFilters } from "./useFilters-XNH27Md2.js";
|
|
106
106
|
import { n as useStateAndRef, t as DomUtils } from "./dom.utils-D1AopHx9.js";
|
|
107
107
|
import { n as ArrayUtils, t as QueriesUtils } from "./queries.utils-CmbhAoHU.js";
|
|
108
|
-
import { n as useAutosave, r as Form, t as useFormAutosave } from "./useFormAutosave-
|
|
109
|
-
import { t as Inputs } from "./Inputs-
|
|
108
|
+
import { n as useAutosave, r as Form, t as useFormAutosave } from "./useFormAutosave-DfuP7drj.js";
|
|
109
|
+
import { t as Inputs } from "./Inputs-DJSKiaWY.js";
|
|
110
110
|
export { Accordion, Alert, AlertDialog, ArrayUtils, Autocomplete, Badge, BadgeButton, BottomSheet, Breadcrumbs, Button, CellText, Checkbox, CheckboxGroup, X as CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimePicker, DateTimeUtils, DateUtils, Dialog, DomUtils, Drawer, DropdownMenu, FileInput, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, IconButton, IconSlot, InfiniteTable, InlineIconButton, Input, Inputs, IntlUtils, Link, LinkContext, MenuItem, MenuPopover, NumberField, NumberRangeInput, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, Popover, Progress, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, RoutingUtils, Select, Slider, Spinner, SplitButton, Stepper, StringUtils, Switch, Table, Tag, TextArea, TextButton, ThemeContext, TimePicker, Toast, ToastContainer, ToastProvider, ToggleButton, ToggleGroup, Tooltip, TooltipEllipsis, Typography, UIConfig, UIOverrides, UIRouter, ZodUtils, accordionChevronDefinition, accordionDefinition, accordionHeadingDefinition, accordionHeadingSubtitleDefinition, accordionHeadingTitleDefinition, accordionIconDefinition, accordionItemDefinition, accordionPanelContentDefinition, accordionPanelDefinition, accordionTriggerDefinition, alertDefinition, badgeButtonContentDefinition, badgeButtonDefinition, breadcrumbChevronDefinition, breadcrumbIconDefinition, breadcrumbItemDefinition, breadcrumbSegmentDefinition, breadcrumbsDefinition, buttonContentDefinition, buttonDefinition, buttonIconSizeDefinition, buttonSizeDefinition, checkboxContentRowDefinition, checkboxContentWrapperDefinition, checkboxDefinition, checkboxGroupLabelDefinition, checkboxIconDefinition, compoundMapper, createKeyInteractionsHandler, datePickerInputContentRowDefinition, dialogContentDefinition, dialogMainDefinition, dialogOverlayDefinition, dropdownMenuDefinition, dynamicColumns, dynamicInputs, fileInputButtonDefinition, fileInputDropZoneDefinition, fileUploadDropZoneDefinition, formFieldErrorDefinition, formFieldHeaderDefinition, formFieldHelperDefinition, getKeyInteractionAction, iconSlotDefinition, inputBaseDefinition, inputClearClassDefinition, inputContentWrapperDefinition, inputSideDefinition, inputSizeDefinition, isEqual, labelDefinition, linkDefinition, logger, menuItemDefinition, menuPopoverDefinition, menuPopoverWrapperDefinition, ns, popoverDefinition, progressDefinition, progressFillDefinition, progressTrackDefinition, progressTrackWrapperDefinition, progressValueDefinition, radioContentRowDefinition, radioContentWrapperDefinition, radioDefinition, resources, selectInputTagsContentWrapperDefinition, selectListBoxItemDefinition, selectPopoverDefinition, spinnerDefinition, spinnerWrapperDefinition, statusIconDefinition, statusSeparatorDefinition, stepperDefinition, stepperIconDefinition, stepperItemDefinition, stepperNumberDefinition, stepperSeparatorDefinition, stepperSubtextDefinition, stepperTitleDefinition, switchDefinition, tableCellTextDefinition, tableDataDefinition, tableHeadDataDefinition, tableHeadRowDefinition, tableHeaderTextDefinition, tableRowDefinition, tagDefinition, textAreaWrapperDefinition, toastDefinition, statusIconDefinition$1 as toastStatusIconDefinition, statusSeparatorDefinition$1 as toastStatusSeparatorDefinition, toggleGroupDefinition, toggleGroupItemDefinition, tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition, tooltipWrapperTriggerDefinition, typographyDefinition, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useFormState, useFormValue, useIntersectionObserver, useKeyInteractions, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
|
|
@@ -0,0 +1,406 @@
|
|
|
1
|
+
//#region src/configurator/theme-model.ts
|
|
2
|
+
const groups = [
|
|
3
|
+
"Colors",
|
|
4
|
+
"Typography",
|
|
5
|
+
"Spacing",
|
|
6
|
+
"Radius",
|
|
7
|
+
"Sizing",
|
|
8
|
+
"Effects"
|
|
9
|
+
];
|
|
10
|
+
const declarations = (source) => Object.fromEntries([...source.matchAll(/(--[\w-]+)\s*:\s*([^;]+);/g)].map(([, name, value]) => [name, value.trim()]));
|
|
11
|
+
const selectorDeclarations = (source, selector) => Object.assign({}, ...[...source.matchAll(selector)].map((match) => declarations(match[1])));
|
|
12
|
+
const parseThemeCss = (themeSource) => ({
|
|
13
|
+
light: selectorDeclarations(themeSource, /:root\s*\{([^}]+)\}/g),
|
|
14
|
+
dark: selectorDeclarations(themeSource, /\.dark\s*\{([^}]+)\}/g),
|
|
15
|
+
theme: declarations([...themeSource.matchAll(/@theme(?:\s+static)?\s*\{([^}]+)\}/g)].map((match) => match[1]).join("\n"))
|
|
16
|
+
});
|
|
17
|
+
function groupFor(name) {
|
|
18
|
+
if (name.startsWith("--color-") || name.endsWith("-base")) return "Colors";
|
|
19
|
+
if (/^--(font|text|tracking)-/.test(name)) return "Typography";
|
|
20
|
+
if (name.startsWith("--spacing-")) return "Spacing";
|
|
21
|
+
if (name.startsWith("--radius-")) return "Radius";
|
|
22
|
+
if (name.startsWith("--container-")) return "Sizing";
|
|
23
|
+
return "Effects";
|
|
24
|
+
}
|
|
25
|
+
const labelFor = (name) => name.replace(/^--/, "").replace(/-base$/, "").replaceAll("-", " ");
|
|
26
|
+
const isRgb = (value) => /^\d+\s+\d+\s+\d+$/.test(value);
|
|
27
|
+
const toHex = (value) => `#${value.split(/\s+/).map((part) => Number(part).toString(16).padStart(2, "0")).join("")}`;
|
|
28
|
+
const toRgb = (hex) => [
|
|
29
|
+
1,
|
|
30
|
+
3,
|
|
31
|
+
5
|
|
32
|
+
].map((offset) => parseInt(hex.slice(offset, offset + 2), 16)).join(" ");
|
|
33
|
+
function validToken(name, value, original) {
|
|
34
|
+
if (!value.trim() || /[;{}<>]/.test(value)) return false;
|
|
35
|
+
if (isRgb(original)) return isRgb(value) && value.split(/\s+/).every((part) => Number(part) <= 255);
|
|
36
|
+
if (name.endsWith("-base") && /^var\(--[\w-]+\)$/.test(original)) return /^var\(--[\w-]+\)$/.test(value) || isRgb(value) && value.split(/\s+/).every((part) => Number(part) <= 255);
|
|
37
|
+
const property = name.startsWith("--color-") || /^#[0-9a-f]+$/i.test(original) ? "color" : name.startsWith("--font-weight-") ? "font-weight" : name.startsWith("--font-") ? "font-family" : name.endsWith("--line-height") ? "line-height" : name.endsWith("--letter-spacing") || name.startsWith("--tracking-") ? "letter-spacing" : name.startsWith("--shadow-") || name.startsWith("--drop-shadow-") ? "box-shadow" : "width";
|
|
38
|
+
return CSS.supports(property, value);
|
|
39
|
+
}
|
|
40
|
+
const emptyTheme = () => ({
|
|
41
|
+
light: {},
|
|
42
|
+
dark: {},
|
|
43
|
+
theme: {}
|
|
44
|
+
});
|
|
45
|
+
function previewTokens(defaults, edits, mode) {
|
|
46
|
+
return mode === "dark" ? {
|
|
47
|
+
...defaults.theme,
|
|
48
|
+
...edits.theme,
|
|
49
|
+
...defaults.light,
|
|
50
|
+
...edits.light,
|
|
51
|
+
...defaults.dark,
|
|
52
|
+
...edits.dark
|
|
53
|
+
} : {
|
|
54
|
+
...defaults.theme,
|
|
55
|
+
...edits.theme,
|
|
56
|
+
...defaults.light,
|
|
57
|
+
...edits.light
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
/** Numbered RGB shades in the root theme form the shared base palette. */
|
|
61
|
+
/**
|
|
62
|
+
* Tailwind-style shade weights around a 500 base: lighter steps mix toward white by the weight, darker steps scale
|
|
63
|
+
* the channels by it. Matches common Tailwind shade generators, extended with the 10, 950 and 1000 steps used here.
|
|
64
|
+
*/
|
|
65
|
+
const lighten = {
|
|
66
|
+
10: .98,
|
|
67
|
+
50: .95,
|
|
68
|
+
100: .9,
|
|
69
|
+
200: .75,
|
|
70
|
+
300: .6,
|
|
71
|
+
400: .3,
|
|
72
|
+
500: 0
|
|
73
|
+
};
|
|
74
|
+
const darken = {
|
|
75
|
+
500: 1,
|
|
76
|
+
600: .9,
|
|
77
|
+
700: .6,
|
|
78
|
+
800: .45,
|
|
79
|
+
900: .3,
|
|
80
|
+
950: .2,
|
|
81
|
+
1e3: .15
|
|
82
|
+
};
|
|
83
|
+
/** Interpolates a weight for steps between the known ones, such as 150 or 850. */
|
|
84
|
+
function weightFor(table, step) {
|
|
85
|
+
const known = Object.keys(table).map(Number).sort((a, b) => a - b);
|
|
86
|
+
if (step <= known[0]) return table[known[0]];
|
|
87
|
+
if (step >= known.at(-1)) return table[known.at(-1)];
|
|
88
|
+
const upper = known.findIndex((value) => value >= step);
|
|
89
|
+
const [low, high] = [known[upper - 1], known[upper]];
|
|
90
|
+
return table[low] + (table[high] - table[low]) * (step - low) / (high - low);
|
|
91
|
+
}
|
|
92
|
+
/** Generates a palette's RGB channel values from its 500 color, keyed by step. */
|
|
93
|
+
function generateShades(baseRgb, steps) {
|
|
94
|
+
const channels = baseRgb.split(/\s+/).map(Number);
|
|
95
|
+
return Object.fromEntries(steps.map((step) => {
|
|
96
|
+
return [step, (step <= 500 ? channels.map((channel) => channel + (255 - channel) * weightFor(lighten, step)) : channels.map((channel) => channel * weightFor(darken, step))).map((channel) => Math.round(channel)).join(" ")];
|
|
97
|
+
}));
|
|
98
|
+
}
|
|
99
|
+
/** Global rounding steps, from square corners to pills; level 2 keeps the theme's own radii. */
|
|
100
|
+
const roundingLevels = [
|
|
101
|
+
{
|
|
102
|
+
label: "Square",
|
|
103
|
+
factor: 0
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
label: "×0.5",
|
|
107
|
+
factor: .5
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
label: "Default",
|
|
111
|
+
factor: 1
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
label: "×1.5",
|
|
115
|
+
factor: 1.5
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
label: "×2",
|
|
119
|
+
factor: 2
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
label: "×3",
|
|
123
|
+
factor: 3
|
|
124
|
+
},
|
|
125
|
+
{
|
|
126
|
+
label: "Pill",
|
|
127
|
+
factor: Infinity
|
|
128
|
+
}
|
|
129
|
+
];
|
|
130
|
+
/**
|
|
131
|
+
* Focus rings sit outside their element, so they keep the theme's offset from the inner radius instead of scaling on
|
|
132
|
+
* their own; otherwise the ring drifts away from the corner it outlines.
|
|
133
|
+
*/
|
|
134
|
+
const focusRadii = {
|
|
135
|
+
"--radius-button-focus-rounding-default": "--radius-button-rounding-default",
|
|
136
|
+
"--radius-button-focus-rounding-small": "--radius-button-rounding-small",
|
|
137
|
+
"--radius-accordion-rounding-focus": "--radius-accordion-rounding-filled",
|
|
138
|
+
"--radius-segmented-control-rounding-segmented-control": "--radius-segmented-control-rounding-segment"
|
|
139
|
+
};
|
|
140
|
+
/**
|
|
141
|
+
* Pill rounding only rounds controls fully; surfaces such as cards, modals, menus and alerts keep the theme radii,
|
|
142
|
+
* since a fully rounded container clips its content.
|
|
143
|
+
*/
|
|
144
|
+
const pillControls = /^--radius-(button|input|floating-label-input|badge|segmented-control|slider|progress)-/;
|
|
145
|
+
const radiusLength = (value) => {
|
|
146
|
+
const match = value.trim().match(/^(-?\d*\.?\d+)(rem|px)$/);
|
|
147
|
+
return match ? {
|
|
148
|
+
amount: Number(match[1]),
|
|
149
|
+
unit: match[2]
|
|
150
|
+
} : void 0;
|
|
151
|
+
};
|
|
152
|
+
const formatLength = (amount, unit) => `${Number(amount.toFixed(4))}${unit}`;
|
|
153
|
+
/**
|
|
154
|
+
* Radius tokens for a global rounding level, always derived from the theme defaults so repeated steps never compound.
|
|
155
|
+
* Square corners and full radii (pills, avatars) are left alone, as are values that are not plain lengths.
|
|
156
|
+
*/
|
|
157
|
+
function scaleRadii(defaults, level) {
|
|
158
|
+
const { factor } = roundingLevels[level];
|
|
159
|
+
const full = defaults.theme["--radius-full"];
|
|
160
|
+
const fullAmount = full ? radiusLength(full) : void 0;
|
|
161
|
+
const isFull = (value) => {
|
|
162
|
+
const length = radiusLength(value);
|
|
163
|
+
return value === full || !!length && length.amount >= (fullAmount?.amount ?? 100);
|
|
164
|
+
};
|
|
165
|
+
const scale = (name, value) => {
|
|
166
|
+
const length = radiusLength(value);
|
|
167
|
+
if (!length || length.amount === 0 || isFull(value)) return value;
|
|
168
|
+
if (factor === Infinity) return full && pillControls.test(name) ? full : value;
|
|
169
|
+
return formatLength(length.amount * factor, length.unit);
|
|
170
|
+
};
|
|
171
|
+
const radii = Object.entries(defaults.theme).filter(([name]) => groupFor(name) === "Radius");
|
|
172
|
+
const scaled = Object.fromEntries(radii.map(([name, value]) => [name, scale(name, value)]));
|
|
173
|
+
for (const [focus, inner] of Object.entries(focusRadii)) {
|
|
174
|
+
const [focusLength, innerLength] = [defaults.theme[focus], defaults.theme[inner]].map((v) => v && radiusLength(v));
|
|
175
|
+
const scaledInner = scaled[inner] && radiusLength(scaled[inner]);
|
|
176
|
+
if (!focusLength || !innerLength || !scaledInner || focusLength.unit !== innerLength.unit) continue;
|
|
177
|
+
scaled[focus] = scaledInner.amount === 0 || isFull(scaled[inner]) ? scaled[inner] : formatLength(scaledInner.amount + focusLength.amount - innerLength.amount, focusLength.unit);
|
|
178
|
+
}
|
|
179
|
+
return scaled;
|
|
180
|
+
}
|
|
181
|
+
/** Padding and gap steps; level 2 keeps the theme's own spacing. */
|
|
182
|
+
const spacingLevels = [
|
|
183
|
+
{
|
|
184
|
+
label: "×0.5",
|
|
185
|
+
factor: .5
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
label: "×0.75",
|
|
189
|
+
factor: .75
|
|
190
|
+
},
|
|
191
|
+
{
|
|
192
|
+
label: "Default",
|
|
193
|
+
factor: 1
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
label: "×1.25",
|
|
197
|
+
factor: 1.25
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
label: "×1.5",
|
|
201
|
+
factor: 1.5
|
|
202
|
+
},
|
|
203
|
+
{
|
|
204
|
+
label: "×2",
|
|
205
|
+
factor: 2
|
|
206
|
+
}
|
|
207
|
+
];
|
|
208
|
+
/** Font size steps; line heights are ratios, so they follow. Level 3 keeps the theme's own sizes. */
|
|
209
|
+
const fontSizeLevels = [
|
|
210
|
+
{
|
|
211
|
+
label: "×0.75",
|
|
212
|
+
factor: .75
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
label: "×0.875",
|
|
216
|
+
factor: .875
|
|
217
|
+
},
|
|
218
|
+
{
|
|
219
|
+
label: "×0.9375",
|
|
220
|
+
factor: .9375
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
label: "Default",
|
|
224
|
+
factor: 1
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
label: "×1.0625",
|
|
228
|
+
factor: 1.0625
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
label: "×1.125",
|
|
232
|
+
factor: 1.125
|
|
233
|
+
},
|
|
234
|
+
{
|
|
235
|
+
label: "×1.25",
|
|
236
|
+
factor: 1.25
|
|
237
|
+
}
|
|
238
|
+
];
|
|
239
|
+
/** Component size steps; level 2 keeps the theme's own sizes. */
|
|
240
|
+
const sizingLevels = [
|
|
241
|
+
{
|
|
242
|
+
label: "×0.75",
|
|
243
|
+
factor: .75
|
|
244
|
+
},
|
|
245
|
+
{
|
|
246
|
+
label: "×0.875",
|
|
247
|
+
factor: .875
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
label: "Default",
|
|
251
|
+
factor: 1
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
label: "×1.125",
|
|
255
|
+
factor: 1.125
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
label: "×1.25",
|
|
259
|
+
factor: 1.25
|
|
260
|
+
},
|
|
261
|
+
{
|
|
262
|
+
label: "×1.5",
|
|
263
|
+
factor: 1.5
|
|
264
|
+
}
|
|
265
|
+
];
|
|
266
|
+
/**
|
|
267
|
+
* Component tokens are mirrored in `--spacing-*` (padding, gap and height utilities) and `--container-*` (width
|
|
268
|
+
* utilities), so both are scaled together. Sizes are avatar heights, button and input heights (the vertical padding
|
|
269
|
+
* that sets a control's height), minimum widths, the icon size and the container width scale; everything else is padding or a gap.
|
|
270
|
+
* The icon stroke weight is neither.
|
|
271
|
+
*/
|
|
272
|
+
const layoutName = (name) => name.replace(/^--(spacing|container)-/, "");
|
|
273
|
+
const isSizeToken = (name) => /^(avatar-height-|(button|input)-height-(small|default)$|input-width-|button-min-width-|icons?-size$|\d+$|(\d(-5)?)?(xs|sm|md|lg|xl)$)/.test(layoutName(name));
|
|
274
|
+
const isLayoutToken = (name, sizes) => /^--(spacing|container)-/.test(name) && !name.endsWith("-icon-weight") && isSizeToken(name) === sizes;
|
|
275
|
+
/** Text style font sizes, without their `--line-height` and `--letter-spacing` companions. */
|
|
276
|
+
const isFontSizeToken = (name) => /^--text-[\w-]+$/.test(name) && !name.includes("--", 2);
|
|
277
|
+
function scaleLengths(defaults, include, factor, resize = (_name, length) => length.amount * factor, growsFromZero = (_name) => false) {
|
|
278
|
+
return Object.fromEntries(Object.entries(defaults.theme).filter(([name]) => include(name)).map(([name, value]) => {
|
|
279
|
+
const length = radiusLength(value);
|
|
280
|
+
if (!length || length.amount === 0 && !growsFromZero(name)) return [name, value];
|
|
281
|
+
const step = length.unit === "rem" ? 1 / 16 : 1;
|
|
282
|
+
return [name, formatLength(Math.max(0, Math.round(resize(name, length) / step) * step), length.unit)];
|
|
283
|
+
}));
|
|
284
|
+
}
|
|
285
|
+
/**
|
|
286
|
+
* A button's or input's height is its vertical padding around one line of content, roughly the icon size. Scaling only
|
|
287
|
+
* the few pixels of padding barely changes a small control (a small input has none), so the padding grows by enough to
|
|
288
|
+
* scale the whole control instead.
|
|
289
|
+
*/
|
|
290
|
+
function scaleSizes(defaults, factor) {
|
|
291
|
+
const icon = defaults.theme["--spacing-icons-size"] ?? defaults.theme["--container-icons-size"];
|
|
292
|
+
const content = icon ? radiusLength(icon) : void 0;
|
|
293
|
+
const isControlHeight = (name) => /^--(spacing|container)-(button|input)-height-(small|default)$/.test(name);
|
|
294
|
+
return scaleLengths(defaults, (name) => isLayoutToken(name, true), factor, (name, length) => isControlHeight(name) && content?.unit === length.unit ? length.amount + (factor - 1) * (length.amount + content.amount / 2) : length.amount * factor, isControlHeight);
|
|
295
|
+
}
|
|
296
|
+
const layoutKinds = [
|
|
297
|
+
"Radius",
|
|
298
|
+
"Spacing",
|
|
299
|
+
"Sizing",
|
|
300
|
+
"Font size"
|
|
301
|
+
];
|
|
302
|
+
/**
|
|
303
|
+
* The layout sub-tab a token belongs to, if any. Spacing and container tokens are split by meaning rather than by
|
|
304
|
+
* namespace: sizes (and the icon stroke weight) go to Sizing, padding and gaps to Spacing.
|
|
305
|
+
*/
|
|
306
|
+
function layoutKindFor(name) {
|
|
307
|
+
if (isFontSizeToken(name)) return "Font size";
|
|
308
|
+
if (/^--(spacing|container)-/.test(name)) return isSizeToken(name) || name.endsWith("-icon-weight") ? "Sizing" : "Spacing";
|
|
309
|
+
return groupFor(name) === "Radius" ? "Radius" : void 0;
|
|
310
|
+
}
|
|
311
|
+
/** The other copy of a token defined as both `--spacing-*` and `--container-*`. */
|
|
312
|
+
function layoutMirror(name, defaults) {
|
|
313
|
+
const match = name.match(/^--(spacing|container)-(.+)$/);
|
|
314
|
+
const mirror = match && `--${match[1] === "spacing" ? "container" : "spacing"}-${match[2]}`;
|
|
315
|
+
return mirror && mirror in defaults.theme ? mirror : void 0;
|
|
316
|
+
}
|
|
317
|
+
/** The button height an input height of the same size matches, or the input height a button height matches. */
|
|
318
|
+
function controlHeightCounterpart(name) {
|
|
319
|
+
const match = name.match(/^(--(?:spacing|container)-)(button|input)(-height-(?:small|default))$/);
|
|
320
|
+
return match ? `${match[1]}${match[2] === "button" ? "input" : "button"}${match[3]}` : void 0;
|
|
321
|
+
}
|
|
322
|
+
/**
|
|
323
|
+
* Tokens that must hold the same value as this one: its spacing/container mirror and, because buttons and inputs of
|
|
324
|
+
* a size share one height, the matching control height and its mirror. A counterpart that already aliases this token
|
|
325
|
+
* in the theme follows on its own and is left alone.
|
|
326
|
+
*/
|
|
327
|
+
function linkedLayoutTokens(name, defaults) {
|
|
328
|
+
const linked = [layoutMirror(name, defaults)];
|
|
329
|
+
const counterpart = controlHeightCounterpart(name);
|
|
330
|
+
if (counterpart && counterpart in defaults.theme && !defaults.theme[counterpart].startsWith("var(")) linked.push(counterpart, layoutMirror(counterpart, defaults));
|
|
331
|
+
return linked.filter((token) => !!token);
|
|
332
|
+
}
|
|
333
|
+
/** Of a mirrored pair, the copy the editor lists: `--container-*` for sizes, `--spacing-*` for padding and gaps. */
|
|
334
|
+
function listedLayoutToken(name, defaults) {
|
|
335
|
+
const mirror = layoutMirror(name, defaults);
|
|
336
|
+
if (!mirror) return name;
|
|
337
|
+
return name.startsWith(layoutKindFor(name) === "Sizing" ? "--container-" : "--spacing-") ? name : mirror;
|
|
338
|
+
}
|
|
339
|
+
const defaultLayoutLevel = 2;
|
|
340
|
+
/** Each layout tab's global control: its steps and the tokens a step sets, derived from the theme defaults. */
|
|
341
|
+
const layoutScales = {
|
|
342
|
+
Radius: {
|
|
343
|
+
levels: roundingLevels,
|
|
344
|
+
defaultLevel: 2,
|
|
345
|
+
scale: scaleRadii
|
|
346
|
+
},
|
|
347
|
+
Spacing: {
|
|
348
|
+
levels: spacingLevels,
|
|
349
|
+
defaultLevel: defaultLayoutLevel,
|
|
350
|
+
scale: (defaults, level) => scaleLengths(defaults, (name) => isLayoutToken(name, false), spacingLevels[level].factor)
|
|
351
|
+
},
|
|
352
|
+
Sizing: {
|
|
353
|
+
levels: sizingLevels,
|
|
354
|
+
defaultLevel: defaultLayoutLevel,
|
|
355
|
+
scale: (defaults, level) => scaleSizes(defaults, sizingLevels[level].factor)
|
|
356
|
+
},
|
|
357
|
+
"Font size": {
|
|
358
|
+
levels: fontSizeLevels,
|
|
359
|
+
defaultLevel: 3,
|
|
360
|
+
scale: (defaults, level) => scaleLengths(defaults, isFontSizeToken, fontSizeLevels[level].factor)
|
|
361
|
+
}
|
|
362
|
+
};
|
|
363
|
+
/** The global level the current tokens match, or undefined once individual tokens were edited. */
|
|
364
|
+
function layoutLevelFor(defaults, edits, kind) {
|
|
365
|
+
const { levels, scale } = layoutScales[kind];
|
|
366
|
+
const index = levels.findIndex((_, level) => Object.entries(scale(defaults, level)).every(([name, value]) => (edits[name] ?? defaults.theme[name]) === value));
|
|
367
|
+
return index === -1 ? void 0 : index;
|
|
368
|
+
}
|
|
369
|
+
function baseColorNames(defaults) {
|
|
370
|
+
return new Set(Object.entries(defaults.light).filter(([name, value]) => /^--[\w-]+-\d+-base$/.test(name) && isRgb(value) && !(name in defaults.dark)).map(([name]) => name));
|
|
371
|
+
}
|
|
372
|
+
function exportCss(edits, defaults) {
|
|
373
|
+
const block = (selector, values) => {
|
|
374
|
+
const entries = Object.entries(values).sort(([a], [b]) => a.localeCompare(b));
|
|
375
|
+
return entries.length ? `${selector} {\n${entries.map(([key, value]) => ` ${key}: ${value};`).join("\n")}\n}\n` : "";
|
|
376
|
+
};
|
|
377
|
+
return "/* Import after your Povio UI theme in your Tailwind CSS entrypoint. */\n\n" + (block(":root", edits.light) + block(".dark", {
|
|
378
|
+
...darkFallback(defaults, edits),
|
|
379
|
+
...edits.dark
|
|
380
|
+
}) + block("@theme", edits.theme) || "/* No token overrides. */\n");
|
|
381
|
+
}
|
|
382
|
+
/** Runtime rules must use ordinary selectors: Tailwind directives only work at build time. */
|
|
383
|
+
function runtimeCss(defaults, edits) {
|
|
384
|
+
const block = (selector, values) => `${selector} {${Object.entries(values).map(([key, value]) => `${key}: ${value};`).join(" ")}}`;
|
|
385
|
+
return block(":root", {
|
|
386
|
+
...referencedThemeTokens(defaults, edits.theme),
|
|
387
|
+
...edits.theme,
|
|
388
|
+
...edits.light
|
|
389
|
+
}) + block(".dark", {
|
|
390
|
+
...darkFallback(defaults, edits),
|
|
391
|
+
...edits.dark
|
|
392
|
+
});
|
|
393
|
+
}
|
|
394
|
+
/**
|
|
395
|
+
* Tailwind only emits `@theme` variables that utilities use, so an edit aliasing another theme token (for example
|
|
396
|
+
* `var(--radius-global-rounding-m)`) redeclares that token's value to make sure it resolves at runtime.
|
|
397
|
+
*/
|
|
398
|
+
function referencedThemeTokens(defaults, edits) {
|
|
399
|
+
const referenced = Object.values(edits).flatMap((value) => [...value.matchAll(/var\((--[\w-]+)/g)].map((match) => match[1]));
|
|
400
|
+
return Object.fromEntries(referenced.filter((name) => name in defaults.theme && !(name in edits)).map((name) => [name, defaults.theme[name]]));
|
|
401
|
+
}
|
|
402
|
+
function darkFallback(defaults, edits) {
|
|
403
|
+
return Object.fromEntries(Object.keys(edits.light).filter((key) => key in defaults.dark).map((key) => [key, defaults.dark[key]]));
|
|
404
|
+
}
|
|
405
|
+
//#endregion
|
|
406
|
+
export { validToken as C, toRgb as S, parseThemeCss as _, generateShades as a, spacingLevels as b, isFontSizeToken as c, layoutKindFor as d, layoutKinds as f, listedLayoutToken as g, linkedLayoutTokens as h, exportCss as i, isRgb as l, layoutScales as m, controlHeightCounterpart as n, groupFor as o, layoutLevelFor as p, emptyTheme as r, groups as s, baseColorNames as t, labelFor as u, previewTokens as v, toHex as x, runtimeCss as y };
|