@cube-dev/ui-kit 0.178.0 → 0.180.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CHANGELOG.md +73 -0
- package/dist/_internal/hooks/use-debounced-value.js +1 -1
- package/dist/_internal/hooks/use-deprecation-warning.js +1 -1
- package/dist/_internal/hooks/use-event.js +1 -1
- package/dist/_internal/hooks/use-is-first-render.js +1 -1
- package/dist/_internal/hooks/use-sync-ref.js +1 -1
- package/dist/_internal/hooks/use-timer/timer.js +1 -1
- package/dist/_internal/hooks/use-timer/use-timer.js +1 -1
- package/dist/_internal/hooks/use-warn.js +1 -1
- package/dist/components/Block.js +1 -1
- package/dist/components/CollectionItem.js +1 -1
- package/dist/components/GlobalStyles.js +1 -1
- package/dist/components/GridProvider.js +1 -1
- package/dist/components/HiddenInput.js +1 -1
- package/dist/components/Root.js +1 -1
- package/dist/components/actions/Action/Action.js +1 -1
- package/dist/components/actions/Banner/Banner.js +1 -1
- package/dist/components/actions/Button/Button.js +1 -1
- package/dist/components/actions/ButtonGroup/ButtonGroup.js +1 -1
- package/dist/components/actions/ButtonSplit/ButtonSplit.js +1 -1
- package/dist/components/actions/ButtonSplit/context.js +1 -1
- package/dist/components/actions/CommandMenu/CommandMenu.js +1 -1
- package/dist/components/actions/CommandMenu/styled.js +1 -1
- package/dist/components/actions/ItemAction/ItemAction.js +1 -1
- package/dist/components/actions/ItemActionContext.js +1 -1
- package/dist/components/actions/ItemActionsWrapper.js +218 -0
- package/dist/components/actions/ItemActionsWrapper.js.map +1 -0
- package/dist/components/actions/ItemButton/ItemButton.d.ts +11 -1
- package/dist/components/actions/ItemButton/ItemButton.js +25 -143
- package/dist/components/actions/ItemButton/ItemButton.js.map +1 -1
- package/dist/components/actions/Link/Link.js +1 -1
- package/dist/components/actions/Menu/Menu.js +1 -1
- package/dist/components/actions/Menu/MenuItem.js +1 -1
- package/dist/components/actions/Menu/MenuSection.js +1 -1
- package/dist/components/actions/Menu/MenuTrigger.js +3 -1
- package/dist/components/actions/Menu/MenuTrigger.js.map +1 -1
- package/dist/components/actions/Menu/SubMenuTrigger.js +1 -1
- package/dist/components/actions/Menu/SubmenuTriggerContext.js +1 -1
- package/dist/components/actions/Menu/context.js +1 -1
- package/dist/components/actions/Menu/styled.js +1 -1
- package/dist/components/actions/actions-run.js +34 -0
- package/dist/components/actions/actions-run.js.map +1 -0
- package/dist/components/actions/index.js +1 -1
- package/dist/components/actions/use-action.js +1 -1
- package/dist/components/actions/use-anchored-menu.js +1 -1
- package/dist/components/actions/use-context-menu.js +1 -1
- package/dist/components/content/ActiveZone/ActiveZone.js +1 -1
- package/dist/components/content/Alert/Alert.js +1 -1
- package/dist/components/content/Alert/use-alert.js +1 -1
- package/dist/components/content/Avatar/Avatar.js +1 -1
- package/dist/components/content/Badge/Badge.js +1 -1
- package/dist/components/content/Card/Card.js +1 -1
- package/dist/components/content/Content.js +1 -1
- package/dist/components/content/CopyPasteBlock/CopyPasteBlock.js +1 -1
- package/dist/components/content/CopySnippet/CopySnippet.js +1 -1
- package/dist/components/content/Disclosure/Disclosure.js +1 -1
- package/dist/components/content/Divider.js +1 -1
- package/dist/components/content/Footer.js +1 -1
- package/dist/components/content/Header.js +1 -1
- package/dist/components/content/HotKeys/HotKeys.js +1 -1
- package/dist/components/content/InfoBadge/InfoBadge.js +1 -1
- package/dist/components/content/InlineInput/InlineInput.js +1 -1
- package/dist/components/content/Item/Item.js +5 -5
- package/dist/components/content/Item/Item.js.map +1 -1
- package/dist/components/content/ItemBadge/ItemBadge.js +1 -1
- package/dist/components/content/ItemCard/ItemCard.js +1 -1
- package/dist/components/content/Layout/GridLayout.js +1 -1
- package/dist/components/content/Layout/Layout.js +1 -1
- package/dist/components/content/Layout/LayoutBlock.js +1 -1
- package/dist/components/content/Layout/LayoutCenter.js +1 -1
- package/dist/components/content/Layout/LayoutContainer.js +1 -1
- package/dist/components/content/Layout/LayoutContent.js +1 -1
- package/dist/components/content/Layout/LayoutContext.js +1 -1
- package/dist/components/content/Layout/LayoutFlex.js +1 -1
- package/dist/components/content/Layout/LayoutFooter.js +1 -1
- package/dist/components/content/Layout/LayoutGrid.js +1 -1
- package/dist/components/content/Layout/LayoutHeader.js +1 -1
- package/dist/components/content/Layout/LayoutPane.js +1 -1
- package/dist/components/content/Layout/LayoutPanel.js +1 -1
- package/dist/components/content/Layout/LayoutPanelHeader.js +1 -1
- package/dist/components/content/Layout/LayoutToolbar.js +1 -1
- package/dist/components/content/Layout/hooks/useTinyScrollbar.js +1 -1
- package/dist/components/content/Layout/index.js +1 -1
- package/dist/components/content/Layout/utils.js +1 -1
- package/dist/components/content/Paragraph.js +1 -1
- package/dist/components/content/Placeholder/Placeholder.js +1 -1
- package/dist/components/content/PrismCode/PrismCode.js +1 -1
- package/dist/components/content/PrismCode/prismSetup.js +1 -1
- package/dist/components/content/PrismDiffCode/PrismDiffCode.js +1 -1
- package/dist/components/content/Result/Result.js +1 -1
- package/dist/components/content/Skeleton/Skeleton.js +1 -1
- package/dist/components/content/Tag/Tag.js +1 -1
- package/dist/components/content/Text.d.ts +14 -14
- package/dist/components/content/Text.js +1 -1
- package/dist/components/content/TextItem/TextItem.js +1 -1
- package/dist/components/content/Title.js +1 -1
- package/dist/components/content/Tree/Tree.js +1 -1
- package/dist/components/content/Tree/TreeNode.js +1 -1
- package/dist/components/content/Tree/styled.js +1 -1
- package/dist/components/content/Tree/tree-index.js +1 -1
- package/dist/components/content/Tree/use-checkbox-tree.js +1 -1
- package/dist/components/content/Tree/use-load-data.js +1 -1
- package/dist/components/content/highlightText.js +1 -1
- package/dist/components/content/use-auto-tooltip.js +1 -1
- package/dist/components/data/DataTable/DataTable.js +1 -1
- package/dist/components/data/ItemTable/ItemTable.js +1 -1
- package/dist/components/data/ItemTable/ItemTableBulkBar.js +1 -1
- package/dist/components/data/ItemTable/ItemTableDragPreview.js +1 -1
- package/dist/components/data/ItemTable/ItemTableFooter.js +1 -1
- package/dist/components/data/ItemTable/ItemTableToolbar.js +1 -1
- package/dist/components/data/TableBase/ColumnResizer.js +1 -1
- package/dist/components/data/TableBase/RowCollection.js +1 -1
- package/dist/components/data/TableBase/TableHeaderCell.js +1 -1
- package/dist/components/data/TableBase/TableRow.js +1 -1
- package/dist/components/data/TableBase/TableView.js +1 -1
- package/dist/components/data/TableBase/column-menu.js +1 -1
- package/dist/components/data/TableBase/column-tint.js +1 -1
- package/dist/components/data/TableBase/row-menu.js +1 -1
- package/dist/components/data/TableBase/styled.js +1 -1
- package/dist/components/data/TableBase/table-tree.js +1 -1
- package/dist/components/data/TableBase/types.js +1 -1
- package/dist/components/data/TableBase/use-cell-selection.js +0 -0
- package/dist/components/data/TableBase/use-column-order.js +1 -1
- package/dist/components/data/TableBase/use-container-width.js +1 -1
- package/dist/components/data/TableBase/use-row-move-animation.js +1 -1
- package/dist/components/data/TableBase/use-scrollability.js +1 -1
- package/dist/components/data/TableBase/use-table-columns.js +1 -1
- package/dist/components/data/TableBase/use-table-search.js +1 -1
- package/dist/components/data/TableBase/use-table-selection.js +1 -1
- package/dist/components/data/TableBase/use-table-sort.js +1 -1
- package/dist/components/data/TableBase/use-table-sorts.js +1 -1
- package/dist/components/data/TableBase/use-table-storage.js +1 -1
- package/dist/components/data/TableBase/use-table-tree-state.js +1 -1
- package/dist/components/fields/Checkbox/Checkbox.d.ts +7 -0
- package/dist/components/fields/Checkbox/Checkbox.js +1 -1
- package/dist/components/fields/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/fields/Checkbox/CheckboxGroup.d.ts +1 -1
- package/dist/components/fields/Checkbox/CheckboxGroup.js +3 -3
- package/dist/components/fields/Checkbox/CheckboxGroup.js.map +1 -1
- package/dist/components/fields/Checkbox/context.js +1 -1
- package/dist/components/fields/ColorInput/ColorInput.js +1 -1
- package/dist/components/fields/ColorPicker/ColorPicker.js +1 -1
- package/dist/components/fields/ColorSwatch/ColorSwatch.js +1 -1
- package/dist/components/fields/ColorSwatchGroup/ColorSwatchGroup.js +1 -1
- package/dist/components/fields/ComboBox/ComboBox.js +1 -1
- package/dist/components/fields/CommandTextArea/CommandTextArea.js +2 -2
- package/dist/components/fields/CommandTextArea/CommandTextArea.js.map +1 -1
- package/dist/components/fields/CommandTextArea/caretPosition.js +1 -1
- package/dist/components/fields/CommandTextArea/caretPosition.js.map +1 -1
- package/dist/components/fields/CommandTextArea/useCaretAnchor.js +1 -1
- package/dist/components/fields/DatePicker/DateInput.d.ts +1 -1
- package/dist/components/fields/DatePicker/DateInput.js +1 -1
- package/dist/components/fields/DatePicker/DateInput.js.map +1 -1
- package/dist/components/fields/DatePicker/DateInputBase.js +1 -1
- package/dist/components/fields/DatePicker/DatePicker.d.ts +1 -1
- package/dist/components/fields/DatePicker/DatePicker.js +1 -1
- package/dist/components/fields/DatePicker/DatePicker.js.map +1 -1
- package/dist/components/fields/DatePicker/DatePickerButton.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerElement.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerInput.js +1 -1
- package/dist/components/fields/DatePicker/DatePickerInput.js.map +1 -1
- package/dist/components/fields/DatePicker/DatePickerSegment.js +1 -1
- package/dist/components/fields/DatePicker/DateRangePicker.d.ts +1 -1
- package/dist/components/fields/DatePicker/DateRangePicker.js +1 -1
- package/dist/components/fields/DatePicker/DateRangePicker.js.map +1 -1
- package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.d.ts +1 -1
- package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js +1 -1
- package/dist/components/fields/DatePicker/DateRangeSeparatedPicker.js.map +1 -1
- package/dist/components/fields/DatePicker/MonthPicker.js +1 -1
- package/dist/components/fields/DatePicker/PeriodPicker.d.ts +1 -1
- package/dist/components/fields/DatePicker/PeriodPicker.js +1 -1
- package/dist/components/fields/DatePicker/PeriodPicker.js.map +1 -1
- package/dist/components/fields/DatePicker/QuarterPicker.js +1 -1
- package/dist/components/fields/DatePicker/TimeInput.d.ts +1 -1
- package/dist/components/fields/DatePicker/TimeInput.js +1 -1
- package/dist/components/fields/DatePicker/TimeInput.js.map +1 -1
- package/dist/components/fields/DatePicker/WeekPicker.js +1 -1
- package/dist/components/fields/DatePicker/YearPicker.js +1 -1
- package/dist/components/fields/DatePicker/parseDate.js +1 -1
- package/dist/components/fields/DatePicker/period.js +1 -1
- package/dist/components/fields/DatePicker/props.js +1 -1
- package/dist/components/fields/DatePicker/utils.js +1 -1
- package/dist/components/fields/FileInput/FileInput.d.ts +2 -0
- package/dist/components/fields/FileInput/FileInput.js +1 -1
- package/dist/components/fields/FileInput/FileInput.js.map +1 -1
- package/dist/components/fields/FilterListBox/FilterListBox.js +1 -1
- package/dist/components/fields/FilterPicker/FilterPicker.js +18 -27
- package/dist/components/fields/FilterPicker/FilterPicker.js.map +1 -1
- package/dist/components/fields/Input/Input.js +1 -1
- package/dist/components/fields/ListBox/DraggableListBox.js +1 -1
- package/dist/components/fields/ListBox/ListBox.js +1 -1
- package/dist/components/fields/ListBoxPopover/ListBoxPopover.js +1 -1
- package/dist/components/fields/ListBoxPopover/listNavigation.js +1 -1
- package/dist/components/fields/ListBoxPopover/useCompositeFocus.js +1 -1
- package/dist/components/fields/NumberInput/NumberInput.d.ts +1 -1
- package/dist/components/fields/NumberInput/NumberInput.js +3 -3
- package/dist/components/fields/NumberInput/NumberInput.js.map +1 -1
- package/dist/components/fields/NumberInput/StepButton.js +1 -1
- package/dist/components/fields/PasswordInput/PasswordInput.js +1 -1
- package/dist/components/fields/Picker/Picker.js +18 -27
- package/dist/components/fields/Picker/Picker.js.map +1 -1
- package/dist/components/fields/RadioGroup/Radio.js +1 -1
- package/dist/components/fields/RadioGroup/RadioGroup.d.ts +1 -1
- package/dist/components/fields/RadioGroup/RadioGroup.js +3 -3
- package/dist/components/fields/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/components/fields/RadioGroup/context.js +1 -1
- package/dist/components/fields/SearchComboBox/SearchComboBox.js +1 -1
- package/dist/components/fields/SearchInput/SearchInput.js +1 -1
- package/dist/components/fields/Select/Select.js +53 -55
- package/dist/components/fields/Select/Select.js.map +1 -1
- package/dist/components/fields/Slider/Gradation.js +1 -1
- package/dist/components/fields/Slider/HueSlider.js +1 -1
- package/dist/components/fields/Slider/RangeSlider.js +1 -1
- package/dist/components/fields/Slider/Slider.js +1 -1
- package/dist/components/fields/Slider/SliderBase.js +2 -2
- package/dist/components/fields/Slider/SliderBase.js.map +1 -1
- package/dist/components/fields/Slider/SliderThumb.js +1 -1
- package/dist/components/fields/Slider/SliderTrack.js +1 -1
- package/dist/components/fields/Slider/elements.js +1 -1
- package/dist/components/fields/Slider/index.js +1 -1
- package/dist/components/fields/Slider/types.d.ts +1 -1
- package/dist/components/fields/Switch/Switch.d.ts +2 -0
- package/dist/components/fields/Switch/Switch.js +1 -1
- package/dist/components/fields/Switch/Switch.js.map +1 -1
- package/dist/components/fields/TextArea/TextArea.js +1 -1
- package/dist/components/fields/TextInput/TextInput.js +1 -1
- package/dist/components/fields/TextInput/TextInputBase.d.ts +1 -1
- package/dist/components/fields/TextInput/TextInputBase.js +1 -1
- package/dist/components/fields/TextInput/TextInputBase.js.map +1 -1
- package/dist/components/fields/TextInput/useAutoSizeTextArea.js +1 -1
- package/dist/components/fields/TextInputMapper/TextInputMapper.js +1 -1
- package/dist/components/fields/TriggerActions.js +5 -56
- package/dist/components/fields/TriggerActions.js.map +1 -1
- package/dist/components/fields/color/ColorPanel.js +1 -1
- package/dist/components/fields/color/channels.js +1 -1
- package/dist/components/fields/color/color.js +1 -1
- package/dist/components/fields/color/context.js +1 -1
- package/dist/components/form/FieldWrapper/FieldWrapper.js +1 -1
- package/dist/components/form/Form/Field.js +1 -1
- package/dist/components/form/Form/Form.d.ts +38 -2
- package/dist/components/form/Form/Form.js +86 -16
- package/dist/components/form/Form/Form.js.map +1 -1
- package/dist/components/form/Form/ModernFormRoot.d.ts +19 -0
- package/dist/components/form/Form/ModernFormRoot.js +108 -0
- package/dist/components/form/Form/ModernFormRoot.js.map +1 -0
- package/dist/components/form/Form/ResetButton/ResetButton.d.ts +2 -1
- package/dist/components/form/Form/ResetButton/ResetButton.js +17 -2
- package/dist/components/form/Form/ResetButton/ResetButton.js.map +1 -1
- package/dist/components/form/Form/SubmitButton/SubmitButton.d.ts +2 -1
- package/dist/components/form/Form/SubmitButton/SubmitButton.js +17 -2
- package/dist/components/form/Form/SubmitButton/SubmitButton.js.map +1 -1
- package/dist/components/form/Form/SubmitError.js +26 -3
- package/dist/components/form/Form/SubmitError.js.map +1 -1
- package/dist/components/form/Form/backend.d.ts +25 -0
- package/dist/components/form/Form/backend.js +30 -0
- package/dist/components/form/Form/backend.js.map +1 -0
- package/dist/components/form/Form/index.d.ts +18 -4
- package/dist/components/form/Form/index.js +8 -2
- package/dist/components/form/Form/index.js.map +1 -1
- package/dist/components/form/Form/modern/actions.js +41 -0
- package/dist/components/form/Form/modern/actions.js.map +1 -0
- package/dist/components/form/Form/modern/context.d.ts +9 -0
- package/dist/components/form/Form/modern/context.js +14 -0
- package/dist/components/form/Form/modern/context.js.map +1 -0
- package/dist/components/form/Form/modern/controller.d.ts +23 -0
- package/dist/components/form/Form/modern/controller.js +48 -0
- package/dist/components/form/Form/modern/controller.js.map +1 -0
- package/dist/components/form/Form/modern/field-binding.js +41 -0
- package/dist/components/form/Form/modern/field-binding.js.map +1 -0
- package/dist/components/form/Form/modern/path-types.d.ts +12 -0
- package/dist/components/form/Form/modern/react.d.ts +21 -0
- package/dist/components/form/Form/modern/react.js +27 -0
- package/dist/components/form/Form/modern/react.js.map +1 -0
- package/dist/components/form/Form/modern/store.js +813 -0
- package/dist/components/form/Form/modern/store.js.map +1 -0
- package/dist/components/form/Form/modern/types.d.ts +173 -0
- package/dist/components/form/Form/modern/validation.d.ts +27 -0
- package/dist/components/form/Form/modern/validation.js +41 -0
- package/dist/components/form/Form/modern/validation.js.map +1 -0
- package/dist/components/form/Form/modern/values.d.ts +7 -0
- package/dist/components/form/Form/modern/values.js +144 -0
- package/dist/components/form/Form/modern/values.js.map +1 -0
- package/dist/components/form/Form/use-field/types.d.ts +4 -1
- package/dist/components/form/Form/use-field/use-field-binding.js +93 -0
- package/dist/components/form/Form/use-field/use-field-binding.js.map +1 -0
- package/dist/components/form/Form/use-field/use-field-props.d.ts +12 -1
- package/dist/components/form/Form/use-field/use-field-props.js +67 -50
- package/dist/components/form/Form/use-field/use-field-props.js.map +1 -1
- package/dist/components/form/Form/use-field/use-field.d.ts +6 -0
- package/dist/components/form/Form/use-field/use-field.js +47 -22
- package/dist/components/form/Form/use-field/use-field.js.map +1 -1
- package/dist/components/form/Form/use-form.d.ts +4 -1
- package/dist/components/form/Form/use-form.js +9 -5
- package/dist/components/form/Form/use-form.js.map +1 -1
- package/dist/components/form/Form/validation.js +2 -2
- package/dist/components/form/Label.js +1 -1
- package/dist/components/form/index.d.ts +8 -1
- package/dist/components/form/validation/ValidationIndicator.js +1 -1
- package/dist/components/form/validation/resolve-validation-props.js +1 -1
- package/dist/components/form/validation/use-validation-props.js +1 -1
- package/dist/components/form/wrapper.js +1 -1
- package/dist/components/helpers/DisplayTransition/DisplayTransition.js +1 -1
- package/dist/components/helpers/IconSwitch/IconSwitch.js +1 -1
- package/dist/components/layout/Board/Board.js +1 -1
- package/dist/components/layout/Board/BoardProvider.js +1 -1
- package/dist/components/layout/Board/BoardResponsive.js +1 -1
- package/dist/components/layout/Board/Widget.js +1 -1
- package/dist/components/layout/Board/WidgetHost.js +1 -1
- package/dist/components/layout/Board/board-context.js +1 -1
- package/dist/components/layout/Board/board-store.js +1 -1
- package/dist/components/layout/Board/grid-core/calculate.js +1 -1
- package/dist/components/layout/Board/grid-core/collision-modes.js +1 -1
- package/dist/components/layout/Board/grid-core/collision.js +1 -1
- package/dist/components/layout/Board/grid-core/compactors.js +1 -1
- package/dist/components/layout/Board/grid-core/constraints.js +1 -1
- package/dist/components/layout/Board/grid-core/group-move.js +1 -1
- package/dist/components/layout/Board/grid-core/layout.js +1 -1
- package/dist/components/layout/Board/grid-core/placement.js +1 -1
- package/dist/components/layout/Board/grid-core/sort.js +1 -1
- package/dist/components/layout/Board/index.js +1 -1
- package/dist/components/layout/Board/responsive-utils.js +1 -1
- package/dist/components/layout/Board/use-board-layout.js +1 -1
- package/dist/components/layout/Board/use-board-registry.js +1 -1
- package/dist/components/layout/Board/use-board-select-modifier-key.js +1 -1
- package/dist/components/layout/Board/use-board-selection.js +1 -1
- package/dist/components/layout/Flex.js +1 -1
- package/dist/components/layout/Flow.js +1 -1
- package/dist/components/layout/Grid.js +1 -1
- package/dist/components/layout/Panel.js +1 -1
- package/dist/components/layout/Prefix.js +1 -1
- package/dist/components/layout/ResizablePanel.js +1 -1
- package/dist/components/layout/Space.js +1 -1
- package/dist/components/layout/Suffix.js +1 -1
- package/dist/components/navigation/Pagination/Pagination.js +1 -1
- package/dist/components/navigation/Pagination/use-pagination.js +1 -1
- package/dist/components/navigation/Tabs/DraggableTabList.js +1 -1
- package/dist/components/navigation/Tabs/TabButton.js +36 -40
- package/dist/components/navigation/Tabs/TabButton.js.map +1 -1
- package/dist/components/navigation/Tabs/TabDropIndicator.js +1 -1
- package/dist/components/navigation/Tabs/TabPanel.js +1 -1
- package/dist/components/navigation/Tabs/TabPicker.js +1 -1
- package/dist/components/navigation/Tabs/Tabs.js +1 -1
- package/dist/components/navigation/Tabs/TabsAction.js +1 -1
- package/dist/components/navigation/Tabs/TabsContext.js +1 -1
- package/dist/components/navigation/Tabs/popover-placement.js +1 -1
- package/dist/components/navigation/Tabs/styled.js +1 -29
- package/dist/components/navigation/Tabs/styled.js.map +1 -1
- package/dist/components/navigation/Tabs/types.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-editing.js +1 -1
- package/dist/components/navigation/Tabs/use-tab-indicator.js +1 -1
- package/dist/components/organisms/StatsCard/StatsCard.js +1 -1
- package/dist/components/other/Calendar/Calendar.js +1 -1
- package/dist/components/other/Calendar/CalendarCell.js +1 -1
- package/dist/components/other/Calendar/CalendarGrid.js +1 -1
- package/dist/components/other/Calendar/CalendarHeader.js +1 -1
- package/dist/components/other/Calendar/CalendarPanel.js +1 -1
- package/dist/components/other/Calendar/PeriodCalendar.js +1 -1
- package/dist/components/other/Calendar/PeriodGrid.js +1 -1
- package/dist/components/other/Calendar/RangeCalendar.js +1 -1
- package/dist/components/other/Calendar/styled.js +1 -1
- package/dist/components/other/CubeLogo/CubeLogo.js +1 -1
- package/dist/components/other/NoDataIcon/NoDataIcon.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialog.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js +1 -1
- package/dist/components/overlays/AlertDialog/AlertDialogZone.js +1 -1
- package/dist/components/overlays/Dialog/Dialog.js +1 -1
- package/dist/components/overlays/Dialog/DialogContainer.js +1 -1
- package/dist/components/overlays/Dialog/DialogForm.js +1 -1
- package/dist/components/overlays/Dialog/DialogTrigger.js +4 -2
- package/dist/components/overlays/Dialog/DialogTrigger.js.map +1 -1
- package/dist/components/overlays/Dialog/context.js +1 -1
- package/dist/components/overlays/Dialog/use-dialog-container.js +1 -1
- package/dist/components/overlays/Modal/Modal.js +1 -1
- package/dist/components/overlays/Modal/OpenTransitionContext.js +1 -1
- package/dist/components/overlays/Modal/Overlay.js +1 -1
- package/dist/components/overlays/Modal/Popover.js +1 -1
- package/dist/components/overlays/Modal/Tray.js +1 -1
- package/dist/components/overlays/Modal/Underlay.js +1 -1
- package/dist/components/overlays/Notifications/Notification.js +1 -1
- package/dist/components/overlays/Notifications/NotificationAction.js +1 -1
- package/dist/components/overlays/Notifications/NotificationCard.js +1 -1
- package/dist/components/overlays/Notifications/NotificationContext.js +1 -1
- package/dist/components/overlays/Notifications/NotificationItem.js +1 -1
- package/dist/components/overlays/Notifications/OverlayContainer.js +1 -1
- package/dist/components/overlays/Notifications/OverlayProvider.js +1 -1
- package/dist/components/overlays/Notifications/PersistentNotificationsList.js +1 -1
- package/dist/components/overlays/Notifications/dismissed-storage.js +1 -1
- package/dist/components/overlays/Notifications/format-relative-time.js +1 -1
- package/dist/components/overlays/Notifications/index.js +1 -1
- package/dist/components/overlays/Notifications/use-notification-state.js +1 -1
- package/dist/components/overlays/Notifications/use-notifications.js +1 -1
- package/dist/components/overlays/Notifications/use-overlay-timers.js +1 -1
- package/dist/components/overlays/Notifications/use-persistent-notifications.js +1 -1
- package/dist/components/overlays/Notifications/use-persistent-state.js +1 -1
- package/dist/components/overlays/Notifications/use-toast-state.js +1 -1
- package/dist/components/overlays/Toast/ToastItem.js +1 -1
- package/dist/components/overlays/Toast/index.js +1 -1
- package/dist/components/overlays/Toast/useProgressToast.js +1 -1
- package/dist/components/overlays/Toast/useToast.js +1 -1
- package/dist/components/overlays/Tooltip/Tooltip.js +1 -1
- package/dist/components/overlays/Tooltip/TooltipProvider.js +1 -1
- package/dist/components/overlays/Tooltip/TooltipTrigger.js +1 -1
- package/dist/components/overlays/Tooltip/context.js +1 -1
- package/dist/components/portal/Portal.js +1 -1
- package/dist/components/portal/PortalProvider.js +1 -1
- package/dist/components/portal/usePortal.js +1 -1
- package/dist/components/shared/DraggableCollection.js +1 -1
- package/dist/components/shared/InvalidIcon.js +1 -1
- package/dist/components/shared/ValidIcon.js +1 -1
- package/dist/components/status/LoadingAnimation/LoadingAnimation.js +1 -1
- package/dist/components/status/Spin/Cube.js +1 -1
- package/dist/components/status/Spin/InternalSpinner.js +1 -1
- package/dist/components/status/Spin/Spin.js +1 -1
- package/dist/components/status/Spin/SpinsContainer.js +1 -1
- package/dist/data/item-themes.js +25 -6
- package/dist/data/item-themes.js.map +1 -1
- package/dist/data/themes.js +1 -1
- package/dist/eslint-plugin/defaults.generated.js +1 -1
- package/dist/eslint-plugin/index.js +1 -1
- package/dist/eslint-plugin/rules/no-redundant-default-prop.js +1 -1
- package/dist/i18n/I18nProvider.js +1 -1
- package/dist/i18n/createFormatter.js +1 -1
- package/dist/i18n/index.js +1 -1
- package/dist/i18n/instance.js +1 -1
- package/dist/i18n/locales/de-DE/uikit.js +1 -1
- package/dist/i18n/locales/en-US/uikit.js +1 -1
- package/dist/i18n/locales/es-ES/uikit.js +1 -1
- package/dist/i18n/locales/es-MX/uikit.js +1 -1
- package/dist/i18n/locales/fr-FR/uikit.js +1 -1
- package/dist/i18n/locales/it-IT/uikit.js +1 -1
- package/dist/i18n/locales/ja-JP/uikit.js +1 -1
- package/dist/i18n/locales/nb-NO/uikit.js +1 -1
- package/dist/i18n/locales/pt-BR/uikit.js +1 -1
- package/dist/i18n/locales/pt-PT/uikit.js +1 -1
- package/dist/i18n/locales/sv-SE/uikit.js +1 -1
- package/dist/i18n/locales/vi-VN/uikit.js +1 -1
- package/dist/i18n/locales.js +1 -1
- package/dist/i18n/useFormatter.js +1 -1
- package/dist/i18n/useI18n.js +1 -1
- package/dist/icons/AdjustmentsHorizontalIcon.js +1 -1
- package/dist/icons/AdjustmentsIcon.js +1 -1
- package/dist/icons/AiIcon.js +1 -1
- package/dist/icons/AreaChartIcon.js +1 -1
- package/dist/icons/ArrowNarrowDownIcon.js +1 -1
- package/dist/icons/ArrowNarrowUpIcon.js +1 -1
- package/dist/icons/BackwardIcon.js +1 -1
- package/dist/icons/BarChartIcon.js +1 -1
- package/dist/icons/BellFilledIcon.js +1 -1
- package/dist/icons/BellIcon.js +1 -1
- package/dist/icons/BooleanIcon.js +1 -1
- package/dist/icons/CalendarEditIcon.js +1 -1
- package/dist/icons/CalendarIcon.js +1 -1
- package/dist/icons/CaretDownIcon.js +1 -1
- package/dist/icons/CaretUpIcon.js +1 -1
- package/dist/icons/ChartAreaStackedIcon.js +1 -1
- package/dist/icons/ChartAreaStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBarGroupedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarGroupedIcon.js +1 -1
- package/dist/icons/ChartBarHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarLineIcon.js +1 -1
- package/dist/icons/ChartBarStackedHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageHorizontalIcon.js +1 -1
- package/dist/icons/ChartBarStackedPercentageIcon.js +1 -1
- package/dist/icons/ChartBoxPlot2Icon.js +1 -1
- package/dist/icons/ChartBoxPlotIcon.js +1 -1
- package/dist/icons/ChartBubbleIcon.js +1 -1
- package/dist/icons/ChartDonut2Icon.js +1 -1
- package/dist/icons/ChartFunnelIcon.js +1 -1
- package/dist/icons/ChartHeatmapIcon.js +1 -1
- package/dist/icons/ChartKPIIcon.js +1 -1
- package/dist/icons/ChartPie2Icon.js +1 -1
- package/dist/icons/ChartScatterIcon.js +1 -1
- package/dist/icons/CheckCircleFilledIcon.js +1 -1
- package/dist/icons/CheckCircleIcon.js +1 -1
- package/dist/icons/CheckIcon.js +1 -1
- package/dist/icons/CircleFilledIcon.js +1 -1
- package/dist/icons/ClearIcon.js +1 -1
- package/dist/icons/CloseCircleFilledIcon.js +1 -1
- package/dist/icons/CloseCircleIcon.js +1 -1
- package/dist/icons/CloseIcon.js +1 -1
- package/dist/icons/CodeIcon.js +1 -1
- package/dist/icons/ColumnTotalIcon.js +1 -1
- package/dist/icons/CopyIcon.js +1 -1
- package/dist/icons/CountIcon.js +1 -1
- package/dist/icons/CubeIcon.js +1 -1
- package/dist/icons/CubePauseIcon.js +1 -1
- package/dist/icons/CubePlayIcon.js +1 -1
- package/dist/icons/CurrencyDollarIcon.js +1 -1
- package/dist/icons/DangerIcon.js +1 -1
- package/dist/icons/DashboardIcon.js +1 -1
- package/dist/icons/DatabaseIcon.js +1 -1
- package/dist/icons/DecimalDecreaseIcon.js +1 -1
- package/dist/icons/DecimalIncreaseIcon.js +1 -1
- package/dist/icons/DirectionIcon.js +1 -1
- package/dist/icons/DonutIcon.js +1 -1
- package/dist/icons/DownIcon.js +1 -1
- package/dist/icons/EditIcon.js +1 -1
- package/dist/icons/ExclamationCircleFilledIcon.js +1 -1
- package/dist/icons/ExclamationCircleIcon.js +1 -1
- package/dist/icons/ExclamationIcon.js +1 -1
- package/dist/icons/EyeIcon.js +1 -1
- package/dist/icons/EyeInvisibleIcon.js +1 -1
- package/dist/icons/FilterIcon.js +1 -1
- package/dist/icons/FolderFilledIcon.js +1 -1
- package/dist/icons/FolderIcon.js +1 -1
- package/dist/icons/FolderOpenFilledIcon.js +1 -1
- package/dist/icons/FolderOpenIcon.js +1 -1
- package/dist/icons/ForwardIcon.js +1 -1
- package/dist/icons/GripVerticalIcon.js +1 -1
- package/dist/icons/HierarchyIcon.js +1 -1
- package/dist/icons/HierarchyOpenIcon.js +1 -1
- package/dist/icons/Icon.js +1 -1
- package/dist/icons/InfoCircleIcon.js +1 -1
- package/dist/icons/InfoIcon.js +1 -1
- package/dist/icons/KeyIcon.js +1 -1
- package/dist/icons/LeftIcon.js +1 -1
- package/dist/icons/LineChartIcon.js +1 -1
- package/dist/icons/LoadingIcon.js +1 -1
- package/dist/icons/LockFilledIcon.js +1 -1
- package/dist/icons/LockIcon.js +1 -1
- package/dist/icons/MoreIcon.js +1 -1
- package/dist/icons/NotAllowedIcon.js +1 -1
- package/dist/icons/Number123Icon.js +1 -1
- package/dist/icons/NumberIcon.js +1 -1
- package/dist/icons/PauseCircleFilledIcon.js +1 -1
- package/dist/icons/PauseCircleIcon.js +1 -1
- package/dist/icons/PauseIcon.js +1 -1
- package/dist/icons/PercentageIcon.js +1 -1
- package/dist/icons/PieChartIcon.js +1 -1
- package/dist/icons/PipetteIcon.js +1 -1
- package/dist/icons/PlayCircleIcon.js +1 -1
- package/dist/icons/PlayIcon.js +1 -1
- package/dist/icons/PlusIcon.js +1 -1
- package/dist/icons/ProgressBarIcon.js +1 -1
- package/dist/icons/ReloadIcon.js +1 -1
- package/dist/icons/ReportIcon.js +1 -1
- package/dist/icons/ReturnIcon.js +1 -1
- package/dist/icons/RightIcon.js +1 -1
- package/dist/icons/RowTotalsIcon.js +1 -1
- package/dist/icons/SchemeIcon.js +1 -1
- package/dist/icons/SearchIcon.js +1 -1
- package/dist/icons/SemanticQueryIcon.js +1 -1
- package/dist/icons/SettingsIcon.js +1 -1
- package/dist/icons/ShieldFilledIcon.js +1 -1
- package/dist/icons/ShieldIcon.js +1 -1
- package/dist/icons/SlashIcon.js +1 -1
- package/dist/icons/SparklesIcon.js +1 -1
- package/dist/icons/SqlIcon.js +1 -1
- package/dist/icons/StatsIcon.js +1 -1
- package/dist/icons/StopIcon.js +1 -1
- package/dist/icons/StringIcon.js +1 -1
- package/dist/icons/SubtotalsIcon.js +1 -1
- package/dist/icons/SwitchIcon.js +1 -1
- package/dist/icons/TableIcon.js +1 -1
- package/dist/icons/ThumbsDownIcon.js +1 -1
- package/dist/icons/ThumbsUpIcon.js +1 -1
- package/dist/icons/ThunderboltCrossedIcon.js +1 -1
- package/dist/icons/ThunderboltFilledIcon.js +1 -1
- package/dist/icons/ThunderboltIcon.js +1 -1
- package/dist/icons/TimeIcon.js +1 -1
- package/dist/icons/TrashIcon.js +1 -1
- package/dist/icons/UnlockIcon.js +1 -1
- package/dist/icons/UpIcon.js +1 -1
- package/dist/icons/UserGroupIcon.js +1 -1
- package/dist/icons/UserIcon.js +1 -1
- package/dist/icons/UserLockIcon.js +1 -1
- package/dist/icons/ViewIcon.js +1 -1
- package/dist/icons/WarningFilledIcon.js +1 -1
- package/dist/icons/WarningIcon.js +1 -1
- package/dist/icons/wrap-icon.js +1 -1
- package/dist/index.d.ts +10 -3
- package/dist/index.js +3 -3
- package/dist/probe/canonicalize.js +1 -1
- package/dist/probe/css.js +1 -1
- package/dist/probe/index.js +1 -1
- package/dist/provider.js +1 -1
- package/dist/providers/TrackingProvider.js +1 -1
- package/dist/providers/navigationAdapter.default.js +1 -1
- package/dist/shared/form.d.ts +16 -2
- package/dist/shared/index.d.ts +1 -1
- package/dist/tokens/all-tokens.js +1 -1
- package/dist/tokens/base.js +1 -1
- package/dist/tokens/color-seed.js +1 -1
- package/dist/tokens/color-theme.js +1 -1
- package/dist/tokens/colors.js +1 -1
- package/dist/tokens/layout.js +1 -1
- package/dist/tokens/lazy-styles.js +1 -1
- package/dist/tokens/legacy-color.js +1 -1
- package/dist/tokens/palette-config.js +1 -1
- package/dist/tokens/palette.js +1 -1
- package/dist/tokens/resolve.js +1 -1
- package/dist/tokens/shadows.js +1 -1
- package/dist/tokens/sizes.js +1 -1
- package/dist/tokens/spacing.js +1 -1
- package/dist/tokens/typography.js +1 -1
- package/dist/utils/ResizeSensor.js +1 -1
- package/dist/utils/colors.js +1 -1
- package/dist/utils/dotize.js +50 -0
- package/dist/utils/dotize.js.map +1 -0
- package/dist/utils/is-dev-env.js +1 -1
- package/dist/utils/modules.js +1 -1
- package/dist/utils/promise.js +1 -1
- package/dist/utils/raf.js +1 -1
- package/dist/utils/random.js +1 -1
- package/dist/utils/range.js +1 -1
- package/dist/utils/react/RenderCache.js +1 -1
- package/dist/utils/react/Slots.js +1 -1
- package/dist/utils/react/chain.js +1 -1
- package/dist/utils/react/disabledProps.js +1 -1
- package/dist/utils/react/forwardRefWithGenerics.js +1 -1
- package/dist/utils/react/index.js +1 -1
- package/dist/utils/react/interactions.js +1 -1
- package/dist/utils/react/isTextOnly.js +1 -1
- package/dist/utils/react/mapProps.js +1 -1
- package/dist/utils/react/mergeProps.js +1 -1
- package/dist/utils/react/nullableValue.js +1 -1
- package/dist/utils/react/resolveIcon.js +1 -1
- package/dist/utils/react/sharedStore.js +1 -1
- package/dist/utils/react/useBufferedValue.js +1 -1
- package/dist/utils/react/useCombinedRefs.js +1 -1
- package/dist/utils/react/useControlledFocusVisible.js +1 -1
- package/dist/utils/react/useEventBus.js +1 -1
- package/dist/utils/react/useId.js +1 -1
- package/dist/utils/react/useIsDarwin.js +1 -1
- package/dist/utils/react/useKeySymbols.js +1 -1
- package/dist/utils/react/useLayoutEffect.js +1 -1
- package/dist/utils/react/useLocalStorage.js +1 -1
- package/dist/utils/react/useMergeStyles.js +1 -1
- package/dist/utils/react/usePopoverSync.js +1 -1
- package/dist/utils/react/useQaProps.js +1 -1
- package/dist/utils/react/useScheme.js +1 -1
- package/dist/utils/react/useViewportSize.js +1 -1
- package/dist/utils/react/wrapNodeIfPlain.js +1 -1
- package/dist/utils/selection.js +1 -1
- package/dist/utils/styles.js +1 -1
- package/dist/utils/tree.js +1 -1
- package/dist/utils/warnings.js +1 -1
- package/dist/version.js +3 -3
- package/docs/CreateComponent.md +4 -0
- package/docs/Usage.md +2 -0
- package/docs/components/Block.md +3 -3
- package/docs/components/CollectionItem.md +3 -3
- package/docs/components/GridProvider.md +3 -3
- package/docs/components/Root.md +1 -1
- package/docs/components/actions/Action.md +3 -3
- package/docs/components/actions/Banner.md +3 -3
- package/docs/components/actions/Button.md +3 -3
- package/docs/components/actions/ButtonGroup.md +3 -3
- package/docs/components/actions/ButtonSplit.md +3 -3
- package/docs/components/actions/CommandMenu.md +3 -3
- package/docs/components/actions/ItemAction.md +3 -1
- package/docs/components/actions/ItemButton.md +15 -1
- package/docs/components/actions/Link.md +3 -3
- package/docs/components/actions/Menu.md +3 -3
- package/docs/components/actions/MenuTrigger.md +3 -3
- package/docs/components/actions/SubMenuTrigger.md +3 -3
- package/docs/components/actions/use-anchored-menu.md +3 -3
- package/docs/components/actions/use-context-menu.md +3 -3
- package/docs/components/content/ActiveZone.md +3 -3
- package/docs/components/content/Alert.md +3 -3
- package/docs/components/content/Avatar.md +3 -3
- package/docs/components/content/Card.md +3 -3
- package/docs/components/content/Content.md +3 -3
- package/docs/components/content/CopyPasteBlock.md +1 -1
- package/docs/components/content/CopySnippet.md +3 -3
- package/docs/components/content/Disclosure.md +3 -3
- package/docs/components/content/Divider.md +3 -3
- package/docs/components/content/Footer.md +3 -3
- package/docs/components/content/Header.md +3 -3
- package/docs/components/content/HotKeys.md +3 -3
- package/docs/components/content/InlineInput.md +3 -3
- package/docs/components/content/Item.md +3 -3
- package/docs/components/content/Layout.md +3 -3
- package/docs/components/content/Paragraph.md +3 -3
- package/docs/components/content/Placeholder.md +3 -3
- package/docs/components/content/Result.md +3 -3
- package/docs/components/content/Skeleton.md +3 -3
- package/docs/components/content/Title.md +3 -3
- package/docs/components/content/Tree.md +3 -3
- package/docs/components/data/DataTable.md +3 -3
- package/docs/components/data/ItemTable.md +3 -3
- package/docs/components/fields/Checkbox.md +3 -3
- package/docs/components/fields/ColorInput.md +3 -3
- package/docs/components/fields/ColorPicker.md +3 -3
- package/docs/components/fields/ColorSwatch.md +3 -3
- package/docs/components/fields/ColorSwatchGroup.md +3 -3
- package/docs/components/fields/ComboBox.md +3 -3
- package/docs/components/fields/CommandTextArea.md +3 -3
- package/docs/components/fields/DatePicker.md +3 -3
- package/docs/components/fields/FileInput.md +3 -3
- package/docs/components/fields/FilterListBox.md +3 -3
- package/docs/components/fields/FilterPicker.md +13 -3
- package/docs/components/fields/HueSlider.md +3 -3
- package/docs/components/fields/ListBox.md +3 -3
- package/docs/components/fields/NumberInput.md +3 -3
- package/docs/components/fields/PasswordInput.md +3 -3
- package/docs/components/fields/PeriodPicker.md +3 -3
- package/docs/components/fields/Picker.md +13 -3
- package/docs/components/fields/RadioGroup.md +3 -3
- package/docs/components/fields/SearchComboBox.md +3 -3
- package/docs/components/fields/SearchInput.md +3 -3
- package/docs/components/fields/Select.md +13 -3
- package/docs/components/fields/Slider.md +3 -3
- package/docs/components/fields/Switch.md +3 -3
- package/docs/components/fields/TextArea.md +3 -3
- package/docs/components/fields/TextInput.md +3 -3
- package/docs/components/fields/TextInputMapper.md +3 -3
- package/docs/components/form/Field.md +3 -3
- package/docs/components/form/Form.md +54 -4
- package/docs/components/layout/Board.md +3 -3
- package/docs/components/layout/Flex.md +3 -3
- package/docs/components/layout/Flow.md +3 -3
- package/docs/components/layout/Grid.md +3 -3
- package/docs/components/layout/Panel.md +3 -3
- package/docs/components/layout/Prefix.md +3 -3
- package/docs/components/layout/ResizablePanel.md +3 -3
- package/docs/components/layout/Space.md +3 -3
- package/docs/components/layout/Suffix.md +3 -3
- package/docs/components/navigation/Pagination.md +3 -3
- package/docs/components/navigation/Tabs.md +3 -3
- package/docs/components/organisms/StatsCard.md +3 -3
- package/docs/components/overlays/AlertDialog.md +3 -3
- package/docs/components/overlays/Dialog.md +2 -2
- package/docs/components/overlays/DialogContainer.md +2 -2
- package/docs/components/overlays/DialogForm.md +2 -2
- package/docs/components/overlays/DialogTrigger.md +2 -2
- package/docs/components/overlays/Tooltip.md +3 -3
- package/docs/components/overlays/TooltipProvider.md +3 -3
- package/docs/components/overlays/TooltipTrigger.md +3 -3
- package/docs/components/status/LoadingAnimation.md +3 -3
- package/docs/components/status/Spin.md +3 -3
- package/docs/modern-form-migration.md +104 -0
- package/docs/modern-form-typecheck.md +35 -0
- package/docs/tasty/ai-agents.md +8 -3
- package/docs/tasty/debug.md +2 -5
- package/docs/tasty/methodology.md +3 -3
- package/docs/tasty/pipeline.md +3 -0
- package/docs/tasty/runtime-benchmarks.md +105 -68
- package/docs/tasty/ssr.md +1 -1
- package/docs/tasty/styles.md +43 -11
- package/package.json +13 -4
|
@@ -42,9 +42,9 @@ Supports [Base properties](../../BaseProperties.md).
|
|
|
42
42
|
These properties allow direct style application without using the `styles` prop:
|
|
43
43
|
|
|
44
44
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
45
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
46
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
47
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
45
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
46
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
47
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
48
48
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
49
49
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
50
50
|
|
|
@@ -30,9 +30,9 @@ Supports [Base properties](../../BaseProperties.md).
|
|
|
30
30
|
These properties allow direct style application without using the `styles` prop:
|
|
31
31
|
|
|
32
32
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
33
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
34
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
35
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
33
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
34
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
35
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
36
36
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
37
37
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
38
38
|
|
|
@@ -39,9 +39,9 @@ Extends [Panel](#) and supports [Base properties](../../BaseProperties.md).
|
|
|
39
39
|
These properties allow direct style application without using the `styles` prop:
|
|
40
40
|
|
|
41
41
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
42
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
43
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
44
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
42
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
43
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
44
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
45
45
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
46
46
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
47
47
|
|
|
@@ -28,9 +28,9 @@ Supports [Base properties](../../BaseProperties.md).
|
|
|
28
28
|
These properties allow direct style application without using the `styles` prop:
|
|
29
29
|
|
|
30
30
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
31
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
32
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
33
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
31
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
32
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
33
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
34
34
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
35
35
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
36
36
|
|
|
@@ -30,9 +30,9 @@ Supports [Base properties](../../BaseProperties.md).
|
|
|
30
30
|
These properties allow direct style application without using the `styles` prop:
|
|
31
31
|
|
|
32
32
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
33
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
34
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
35
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
33
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
34
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
35
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
36
36
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
37
37
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
38
38
|
|
|
@@ -75,9 +75,9 @@ Customizes the page-size `Select`.
|
|
|
75
75
|
|
|
76
76
|
These properties allow direct style application without using the `styles` prop:
|
|
77
77
|
|
|
78
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
79
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
80
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`
|
|
78
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
79
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
80
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`
|
|
81
81
|
|
|
82
82
|
### Modifiers
|
|
83
83
|
|
|
@@ -76,9 +76,9 @@ Customizes the root flex wrapper of the Tabs component. The wrapper holds the ta
|
|
|
76
76
|
|
|
77
77
|
These properties allow direct style application without using the `styles` prop:
|
|
78
78
|
|
|
79
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
80
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
81
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`
|
|
79
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
80
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
81
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`
|
|
82
82
|
|
|
83
83
|
### Modifiers
|
|
84
84
|
|
|
@@ -34,9 +34,9 @@ Extends [Card](../content/Card.md) and supports [Base properties](../../BaseProp
|
|
|
34
34
|
These properties allow direct style application without using the `styles` prop:
|
|
35
35
|
|
|
36
36
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
37
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
38
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
39
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
37
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
38
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
39
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
40
40
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
41
41
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
42
42
|
|
|
@@ -32,9 +32,9 @@ Extends [Dialog](./Dialog.md) and supports [Base properties](../../BasePropertie
|
|
|
32
32
|
These properties allow direct style application without using the `styles` prop:
|
|
33
33
|
|
|
34
34
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
35
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
36
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
37
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
35
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
36
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
37
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
38
38
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
39
39
|
- **Text:** `textTransform`, `fontWeight`, `fontStyle`
|
|
40
40
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
@@ -51,8 +51,8 @@ Customizes the close button appearance.
|
|
|
51
51
|
These properties allow direct style application without using the `styles` prop:
|
|
52
52
|
|
|
53
53
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
54
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
55
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
54
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
55
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
56
56
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
57
57
|
|
|
58
58
|
### Modifiers
|
|
@@ -37,8 +37,8 @@ DialogContainer has no styling capabilities.
|
|
|
37
37
|
These properties allow direct style application without using the `styles` prop:
|
|
38
38
|
|
|
39
39
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
40
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
41
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
40
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
41
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
42
42
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
43
43
|
|
|
44
44
|
## Variants
|
|
@@ -55,8 +55,8 @@ Supports [Base properties](../../BaseProperties.md)
|
|
|
55
55
|
These properties allow direct style application without using the `styles` prop:
|
|
56
56
|
|
|
57
57
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
58
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
59
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
58
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
59
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
60
60
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
61
61
|
|
|
62
62
|
## Examples
|
|
@@ -51,8 +51,8 @@ DialogTrigger has no styling capabilities.
|
|
|
51
51
|
These properties allow direct style application without using the `styles` prop:
|
|
52
52
|
|
|
53
53
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
54
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
55
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
54
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
55
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
56
56
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
57
57
|
|
|
58
58
|
## Variants
|
|
@@ -67,9 +67,9 @@ Customizes the root element of the tooltip.
|
|
|
67
67
|
These properties allow direct style application without using the `styles` prop:
|
|
68
68
|
|
|
69
69
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
70
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
71
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
72
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
70
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
71
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
72
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
73
73
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
74
74
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
75
75
|
|
|
@@ -35,9 +35,9 @@ Supports [Base properties](../../BaseProperties.md).
|
|
|
35
35
|
These properties allow direct style application without using the `styles` prop:
|
|
36
36
|
|
|
37
37
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
38
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
39
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
40
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
38
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
39
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
40
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
41
41
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
42
42
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
43
43
|
|
|
@@ -33,9 +33,9 @@ Supports [Base properties](../../BaseProperties.md).
|
|
|
33
33
|
These properties allow direct style application without using the `styles` prop:
|
|
34
34
|
|
|
35
35
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
36
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
37
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
38
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
36
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
37
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
38
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
39
39
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
40
40
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
41
41
|
|
|
@@ -21,9 +21,9 @@ Supports [Base properties](../../BaseProperties.md).
|
|
|
21
21
|
These properties allow direct style application without using the `styles` prop:
|
|
22
22
|
|
|
23
23
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
24
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
25
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
26
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
24
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
25
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
26
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
27
27
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
28
28
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
29
29
|
|
|
@@ -23,9 +23,9 @@ Supports [Base properties](../../BaseProperties.md).
|
|
|
23
23
|
These properties allow direct style application without using the `styles` prop:
|
|
24
24
|
|
|
25
25
|
- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
|
|
26
|
-
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `scrollMargin`
|
|
27
|
-
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
28
|
-
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `
|
|
26
|
+
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `blockMargin`, `inlineMargin`, `inset`, `blockInset`, `inlineInset`, `position`, `scrollMargin`, `blockScrollMargin`, `inlineScrollMargin`, `scrollPadding`, `blockScrollPadding`, `inlineScrollPadding`
|
|
27
|
+
- **Dimension:** `width`, `height`, `blockSize`, `inlineSize`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
|
|
28
|
+
- **Block:** `border`, `blockBorder`, `inlineBorder`, `radius`, `shadow`, `outline`, `padding`, `blockPadding`, `inlinePadding`, `overflow`, `scrollbar`, `textAlign`
|
|
29
29
|
- **Color:** `color`, `fill`, `fade`, `image`
|
|
30
30
|
- **Flow:** `flow`, `place`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
|
|
31
31
|
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
# Migrating a form to the modern controller
|
|
2
|
+
|
|
3
|
+
Modern Form is opt-in per form. Existing `Form.useForm()` calls, roots without a controller, and legacy wrappers continue to use the legacy engine. Start with a leaf form whose defaults, conditional fields, and submission payload are understood. Do not swap the backend of a mounted root: choose one component at a migration boundary and remount when changing that choice.
|
|
4
|
+
|
|
5
|
+
The [compiled consumer examples](https://github.com/cube-js/cube-ui-kit/blob/main/typecheck/consumer/modern-form-examples.tsx) cover creation with a colocated selector, narrow descendant subscriptions, conditional fields, async defaults, a custom control, and cancellable validation. `pnpm build && pnpm test:types:consumer` checks those examples against the declarations consumers receive. React 18 and 19 run the adapter tests both with and without React Compiler; the published library itself remains uncompiled.
|
|
6
|
+
|
|
7
|
+
## Choose the backend explicitly
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
const [legacy] = Form.useForm();
|
|
11
|
+
// <Form form={legacy}> retains the existing behavior.
|
|
12
|
+
|
|
13
|
+
const modern = Form.useController<Profile>({ defaultValues: initialProfile });
|
|
14
|
+
// <Form form={modern}> selects the modern engine.
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
`Form.useController()` returns a stable command object. Initial options are read once. Later changes to the options object do not replace defaults or callbacks. Seed defaults in the creation hook, then use commands for fetched data. Modern roots reject `defaultValues`; callback props on the root bind the latest committed callbacks. An omitted or undefined root callback falls back to its creation-time counterpart.
|
|
18
|
+
|
|
19
|
+
The following API mapping describes migration choices; names are not mechanically interchangeable.
|
|
20
|
+
|
|
21
|
+
| Legacy API or pattern | Modern equivalent |
|
|
22
|
+
| --- | --- |
|
|
23
|
+
| `const [form] = Form.useForm()` | `const form = Form.useController<T>()` |
|
|
24
|
+
| `form.isDirty` in JSX | `Form.useSelector(form, state => state.isDirty)` |
|
|
25
|
+
| `getFieldValue(name)` / `getFieldsValue()` | Imperative `getValue(path)` / `getValues()` |
|
|
26
|
+
| Read a value during render | `Form.useSelector` or `Form.Subscribe` |
|
|
27
|
+
| `setFieldsValue(values)` | `setValues(values)`; review touch/notification/validation options |
|
|
28
|
+
| `setInitialFieldsValue(values)` | `setDefaultValues(values)` to change the baseline; `adoptDefaultValues` to load data into eligible fields |
|
|
29
|
+
| `resetFields()` | `reset()`; `reset({ values })` replaces baseline and current values |
|
|
30
|
+
| `validateFields()` | `validate()` returns `{ isValid, stale, fields }`; inspect the result and each field's errors |
|
|
31
|
+
| `submit()` | `submit()` returns a tagged result such as `submitted`, `invalid`, or `failed` |
|
|
32
|
+
| `Form.Item` wrapping a custom control | `useFieldProps` plus `wrapWithField` inside that control |
|
|
33
|
+
|
|
34
|
+
`DialogForm` and Cloud's `NarrowForm` / `SaveableCard` currently expose legacy instance contracts. Keep their callers legacy until the wrapper itself is migrated and verified. Passing a modern controller through a cast does not migrate the wrapper. `Form.Item`, legacy mutable flags, and the legacy `Form.Context` instance shape remain compatibility APIs.
|
|
35
|
+
|
|
36
|
+
## Subscribe where the UI reads state
|
|
37
|
+
|
|
38
|
+
Creation does not subscribe the component. A selector subscribes its caller; a `Form.Subscribe` render function subscribes only that subtree. A colocated selector is valid when the whole creator should render on that selection. Otherwise place the selector in a child or use `Subscribe`.
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
<Form.Subscribe form={form} selector={state => state.values.name}>
|
|
42
|
+
{name => <output>{name}</output>}
|
|
43
|
+
</Form.Subscribe>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Selectors and equality functions must be pure. Select a primitive or a stable snapshot branch. A newly allocated object compares unequal with the default `Object.is`; supply `isEqual` when selecting several values into a fresh object. `Form.useControllerContext<T>()` gives a descendant the controller without subscribing it. The generic describes that root's values; it cannot verify an ancestor's type.
|
|
47
|
+
|
|
48
|
+
`getValue`, `getValues`, `getActiveValues`, `getFieldSnapshot`, and `getSnapshot` are imperative reads for handlers and effects. They do not make JSX reactive. `subscribe(listener)` supports imperative observers and returns an unsubscribe function. `batch(fn)` groups synchronous commands into one publication; it is not a rollback transaction, and the callback must not be async.
|
|
49
|
+
|
|
50
|
+
Omitted `form` props use context. Explicit `form={undefined}` detaches an input. `Form.Subscribe` and `useControllerContext` require modern context; legacy roots and `FormScopeMask` mask it. An explicit modern controller can be used outside a root. Use only one owning root for each controller.
|
|
51
|
+
|
|
52
|
+
## Retained data and active fields
|
|
53
|
+
|
|
54
|
+
| View | Contents | Typical use |
|
|
55
|
+
| --- | --- | --- |
|
|
56
|
+
| `state.values` / `getValues()` | All retained values, including defaults for unmounted fields | Draft previews, autosave, restoring hidden sections |
|
|
57
|
+
| `state.activeValues` / `getActiveValues()` | Values at registered field paths | The default validated submission payload |
|
|
58
|
+
|
|
59
|
+
Hiding a field unregisters it immediately. Its value stays retained by default, so showing it again restores the draft. `preserve={false}` removes that value after cleanup; the default baseline remains, so reset can restore it. An intervening update or Strict Mode reconnection prevents stale cleanup from removing a live value. Removing an array path keeps other indices stable.
|
|
60
|
+
|
|
61
|
+
`submit()` validates active fields and submits active values. Use `submit({ include: 'all' })` only when retained fields belong in the payload; validation still covers active fields only. Registering a parent object includes its complete object; register leaf paths instead when only selected children should be active. A form with no active fields is invalid. Dirty/touched metadata includes retained fields; validity considers active fields.
|
|
62
|
+
|
|
63
|
+
Named UI Kit inputs currently accept literal string names. Controller commands accept strings and explicit nested tuples. `'user.email'` is one literal key, while `['user', 'email']` addresses an object. Numeric array indices and numeric string segments address the same path. Known keys and tuples infer values; dynamic or unknown names remain `unknown` and accept dynamic writes. Declare an explicit model with `Form.useController<Model>()` when defaults omit fields or contain values narrower than the intended model. The declaration surface requires TypeScript 5.4 or newer.
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
form.setValue('name', 'New name');
|
|
67
|
+
form.setValue(['rows', 0, 'email'], 'person@example.com');
|
|
68
|
+
// Static keys and tuple leaves reject values of the wrong type.
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Snapshots own copies of plain objects and arrays. Treat dates, files, other non-plain objects, and error payloads as immutable. Defaults and values on the controller take precedence over field defaults, including explicit null and undefined. Reusing a mutated input object does not replace its previously captured snapshot; send a new object.
|
|
72
|
+
|
|
73
|
+
## Load defaults without erasing edits
|
|
74
|
+
|
|
75
|
+
Use `adoptDefaultValues(response, { when: 'untouched' })` for a response that may arrive after typing. It replaces the baseline and adopts values at eligible paths, preserving touched edits. `when: 'clean'` protects dirty fields, while `when: 'always'` deliberately replaces them. Abort or ignore obsolete requests; the complete `AsyncDefaults` example demonstrates both request cleanup and a stale-response guard.
|
|
76
|
+
|
|
77
|
+
Use `setDefaultValues(response)` when only the baseline should change. `{ currentValues: 'replace' }` replaces current values too. `reset({ values: response })` replaces baseline and values and clears interaction, validation, and submission error state. Defaults commands replace the baseline object, so omitted keys are removed from it.
|
|
78
|
+
|
|
79
|
+
Programmatic writes do not touch fields or invoke `onValuesChange` unless requested. User writes do both by default. Review `{ source, touch, notify, validate }` for each imperative write. `onValuesChange` receives retained values and metadata describing the changed paths/source/kind.
|
|
80
|
+
|
|
81
|
+
## Validation, custom controls, and submission
|
|
82
|
+
|
|
83
|
+
Built-in named inputs register after commit and select only their value, errors, and validation status. Custom controls call `useFieldProps`, map their event/value API, then give the resolved props to `wrapWithField`. Forward the generated id, blur, disabled, read-only, and invalid state to the actual control; do not spread a controller onto a DOM element. The `CustomControl` example is typechecked against the public API.
|
|
84
|
+
|
|
85
|
+
For modern custom validators, return an error (including a ReactNode), or throw/reject it. Return undefined, null, or an empty string on success. A legacy validator that resolves a data object must be adapted: a modern validator treats that result as an error. Use `ModernValidationRule` to check authored modern rules strictly; shared input props remain permissive enough for existing legacy rules. Legacy forms keep their existing validator behavior.
|
|
86
|
+
|
|
87
|
+
Validators receive `{ signal, name, getValue, getValues }` as the third argument. Pass the signal to network requests. Superseded work settles as stale even if the validator ignores cancellation. Use `rulesKey` for dependencies captured by a validator whose function source stays the same (for example, an organization id). Keep service callbacks stable or include their revision in that key too. Equivalent rule signatures do not restart pending validation.
|
|
88
|
+
|
|
89
|
+
`validationDelay` coalesces automatic validation; explicit validation and submission run immediately by default. Auto writes revalidate on-change fields and fields already showing errors. On-blur fields otherwise wait for blur. `errorPolicy` chooses first/all rule errors. Errors remain visible while revalidating and clear on nonvalidating edits.
|
|
90
|
+
|
|
91
|
+
Root `onSubmit` receives the selected payload and an abort signal; `onSubmitFailed` receives validation or submission failures. Concurrent submits are ignored. Reset and owning-root release cancel pending submission. Submit start and reset clear `submitError`; ordinary edits keep it. `Form.Submit`, `Form.Reset`, and `Form.SubmitError` subscribe to the modern state. Native `action`/`method` forms continue browser navigation and bypass this pipeline.
|
|
92
|
+
|
|
93
|
+
## Per-form migration checklist
|
|
94
|
+
|
|
95
|
+
1. Record existing defaults, validation timing, dynamic names, conditionally mounted fields, and submitted payloads. Keep the legacy form available for a rollback.
|
|
96
|
+
2. Check surrounding wrappers. Migrate a wrapper explicitly or choose a form that does not rely on its legacy instance API.
|
|
97
|
+
3. Create a typed controller and move initial defaults into its creation options. Choose adoption/reset semantics for later data.
|
|
98
|
+
4. Replace render-time getters and flags with narrow selectors or `Subscribe`. Update custom controls through `useFieldProps`.
|
|
99
|
+
5. Adapt validators' success values and cancellation, and version captured dependencies with `rulesKey`.
|
|
100
|
+
6. Decide whether hidden fields are retained and whether submission uses active or all values. Verify the actual payload with conditional sections both visible and hidden.
|
|
101
|
+
7. Test required/async errors, double submit, server failure, reset, unmount during requests, keyboard focus, and navigation guards. Confirm unaffected fields and the creator do not rerender on each keystroke.
|
|
102
|
+
8. Run source and built-consumer type checks, the frozen legacy contract suite, React 18/19 compiler checks, and relevant browser checks. Review visual changes before merging.
|
|
103
|
+
|
|
104
|
+
To revert a migrated form, render the preserved legacy component again and restore its legacy defaults/callback/validator contracts. Remount the boundary and deliberately transfer serializable draft values if needed. Do not cast the modern controller to a legacy instance or toggle hook implementations in place.
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
# Modern Form: Cloud type-check comparison
|
|
2
|
+
|
|
3
|
+
Measured on 2026-09-17 with Node 22.14.0 and Cloud's TypeScript 7.0.2 compiler, without incremental compilation. Baseline: installed UI Kit 0.177.0. Candidate: UI Kit commit `1caa190b`, including Phases 5–8. Cloud checkout: `8742fe489a92274712e4508b41ae548b7040c8f3`.
|
|
4
|
+
|
|
5
|
+
The roots are the existing `NarrowForm`, `SAMLOptionsForm`, `LDAPOptionsForm`, `SettingsEnvVarsForm`, and `SaveableCard` sources, plus Cloud's ambient declarations. Their real import graph covers roughly 6,000 files; no application imports are stubbed. This exercises existing legacy usage after a declaration upgrade. Modern typed commands and examples are checked separately by `pnpm test:types:consumer`.
|
|
6
|
+
|
|
7
|
+
## Method and scope
|
|
8
|
+
|
|
9
|
+
Build UI Kit with its pinned Node 24 environment, then run `node scripts/benchmark-cloud-form-types.mjs /path/to/cloud 3` under Cloud's Node 22.14. The script writes configs, candidate declaration copies, logs, and a JSON report to the OS temporary directory. It never installs dependencies, changes Cloud files, or writes Cloud's incremental cache. The script alternates installed/candidate order across three pairs and checks that diagnostics are stable across repeats.
|
|
10
|
+
|
|
11
|
+
Both variants resolve through Cloud's installed dependency graph, including React 19.1.1, its React types, i18next 26.3.2, and Tasty 3.7.0. The candidate declaration copy has a temporary dependency-directory symlink outside the Cloud checkout. Reading UI Kit's `dist` in place would resolve its own React/i18next copies and introduce unrelated identity errors. This controlled comparison measures declaration compatibility and cost; it does not simulate a complete dependency installation or certify a Cloud release with newer Tasty. UI Kit's own source/consumer, React 18/19, and compiled adapter gates use its actual Tasty 3.9.2 dependency.
|
|
12
|
+
|
|
13
|
+
## Results
|
|
14
|
+
|
|
15
|
+
| Metric | Installed | Candidate | Difference |
|
|
16
|
+
| --- | --: | --: | --: |
|
|
17
|
+
| Median check time | 11.903 s | 12.445 s | +0.542 s (+4.6%) |
|
|
18
|
+
| Median total time | 12.706 s | 13.188 s | +0.482 s (+3.8%) |
|
|
19
|
+
| Median memory, compiler-reported K | 4,136,428 | 4,139,828 | +3,400 (+0.08%) |
|
|
20
|
+
| Types | 5,856,854 | 5,857,994 | +1,140 (+0.02%) |
|
|
21
|
+
| Instantiations | 7,470,697 | 7,475,324 | +4,627 (+0.06%) |
|
|
22
|
+
| Files | 5,999 | 6,008 | +9 |
|
|
23
|
+
| Existing diagnostic headlines | 75 | 75 | No additions or removals |
|
|
24
|
+
|
|
25
|
+
| Pair | Installed check / total | Candidate check / total |
|
|
26
|
+
| ------------------- | ----------------------- | ----------------------- |
|
|
27
|
+
| 1 | 11.899 / 12.666 s | 12.544 / 13.352 s |
|
|
28
|
+
| 2 (candidate first) | 11.903 / 12.706 s | 11.921 / 12.681 s |
|
|
29
|
+
| 3 | 12.015 / 12.792 s | 12.445 / 13.188 s |
|
|
30
|
+
|
|
31
|
+
The candidate introduces no new diagnostic headlines. Both compilations still exit with type errors: the same 75 existing diagnostics occur in the baseline and candidate, so this is not a claim that Cloud fully typechecks. Timings overlap across runs; three local pairs give a useful regression comparison, not a precise universal cost. Type and instantiation growth stays below 0.1%, with no recursive path-enumeration blow-up.
|
|
32
|
+
|
|
33
|
+
## Fixes found by the comparison
|
|
34
|
+
|
|
35
|
+
The initial candidate exposed two Form compatibility issues: a union root signature lost contextual typing for inline submit/failure callbacks, and strict modern rules rejected some existing legacy validator signatures and grouped arrays. Phase 8 introduces root overloads and compatible shared input rule types, with compiled consumer regressions. Modern validators can still be checked strictly with `ModernValidationRule`; legacy validators that resolve a data object must be adapted before moving that form to the modern backend. No Cloud source was changed to make the candidate pass the comparison.
|
package/docs/tasty/ai-agents.md
CHANGED
|
@@ -50,6 +50,8 @@ Prefer the Tasty shorthand over its CSS equivalents:
|
|
|
50
50
|
| `hide: true` | `display: 'none'` |
|
|
51
51
|
| `flexGrow` / `flexShrink` / `flexBasis` | `flex` |
|
|
52
52
|
|
|
53
|
+
Use logical category styles when layout must follow writing mode or direction: `blockSize`/`inlineSize`, `blockPadding`/`inlinePadding`, `blockMargin`/`inlineMargin`, `blockInset`/`inlineInset`, `blockScrollMargin`/`inlineScrollMargin`, `blockScrollPadding`/`inlineScrollPadding`, and `blockBorder`/`inlineBorder`. Use `start`/`end` value modifiers; do not replace them with physical sides. Native logical CSS properties remain valid as ordinary keys when an individual declaration is needed.
|
|
54
|
+
|
|
53
55
|
The last row goes the other way — longhands over the shorthand — because `flex` is lossy: it resets the components you omit to non-initial values (`flex: '0'` silently sets `flex-basis: 0%`) and cannot express `flexShrink: 0` at all. The longhands also carry separate state maps.
|
|
54
56
|
|
|
55
57
|
## 3. Values
|
|
@@ -86,7 +88,7 @@ Prefer units over raw pixels: `8px` → `1x` … `64px` → `8x`; `radius: '6px'
|
|
|
86
88
|
|
|
87
89
|
### `true`
|
|
88
90
|
|
|
89
|
-
`true` means "the design-system default" and is accepted **only** by: `border`, `radius`, `outline`, `shadow`, `padding`, `margin`, `gap`, `inset`, `width`, `height`, `fill`, `color`, `fade`, `preset`, `font`, `scrollbar`, `hide`. Anywhere else it is an error.
|
|
91
|
+
`true` means "the design-system default" and is accepted **only** by: `border`, `radius`, `outline`, `shadow`, `padding`, `margin`, `gap`, `inset`, `width`, `height`, `fill`, `color`, `fade`, `preset`, `font`, `scrollbar`, `scrollMargin`, `scrollPadding`, and the enhanced logical category styles listed above, plus `hide`. Anywhere else it is an error.
|
|
90
92
|
|
|
91
93
|
### `!important`
|
|
92
94
|
|
|
@@ -100,9 +102,11 @@ A value is `[values…] [modifiers…]`, and several groups can be comma-separat
|
|
|
100
102
|
| ------------------------------------ | ---------------------------------------------------------------------------------------------------------- |
|
|
101
103
|
| `padding`, `margin`, `inset`, `fade` | `top` `right` `bottom` `left` |
|
|
102
104
|
| `border` | the four directions + `solid` `dashed` `dotted` `double` `groove` `ridge` `inset` `outset` `none` `hidden` |
|
|
105
|
+
| logical axis spacing/inset styles | `start` `end` |
|
|
106
|
+
| `blockBorder`, `inlineBorder` | `start` `end` + the border style keywords above |
|
|
103
107
|
| `outline` | the style keywords above |
|
|
104
108
|
| `radius` | `top` `right` `bottom` `left` + shapes `round` `ellipse` `leaf` `backleaf` |
|
|
105
|
-
| `width`, `height`
|
|
109
|
+
| `width`, `height`, `blockSize`, `inlineSize` | `min` `max` `fixed` |
|
|
106
110
|
| `flow` | `row` `column` `row-reverse` `column-reverse` `wrap` `nowrap` `dense` |
|
|
107
111
|
| `overflow` | `visible` `hidden` `scroll` `clip` `auto` `overlay` |
|
|
108
112
|
| `position` | `static` `relative` `absolute` `fixed` `sticky` |
|
|
@@ -118,7 +122,7 @@ Directional modifiers beat placeholder zeros:
|
|
|
118
122
|
- ❌ `padding: '2x 4x top right'` — a directional group takes one value, so `4x` is dropped → ✅ `padding: '2x top, 4x right'`
|
|
119
123
|
- ❌ `fade: '3x 1x top bottom'` → ✅ `fade: '3x top, 1x bottom'`
|
|
120
124
|
|
|
121
|
-
Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, `tabSize`, `
|
|
125
|
+
Value-only properties reject both colors and modifiers: `gap`, `columnGap`, `rowGap`, `opacity`, `zIndex`, `order`, `flexGrow`, `flexShrink`, `flexBasis`, `aspectRatio`, `lineClamp`, and `tabSize`. Logical axis category styles accept one or two values in start/end order and the `start`, `end`, and `longhand` modifiers. `fill` and `color` take a color (plus `none` / `transparent`); `caretColor` and `accentColor` take a color only.
|
|
122
126
|
|
|
123
127
|
### `transition`
|
|
124
128
|
|
|
@@ -214,6 +218,7 @@ The selector must be a string literal and valid CSS. Values must be static — s
|
|
|
214
218
|
|
|
215
219
|
- Token, preset, recipe, unit and `@alias` names exist in the project config.
|
|
216
220
|
- Tasty shorthand chosen over CSS longhands; `flexGrow`/`flexShrink`/`flexBasis` over `flex`; `hide: true` over `display: 'none'`.
|
|
221
|
+
- Logical category styles keep native `block`/`inline` declarations and accept `start`/`end`, never physical direction modifiers.
|
|
217
222
|
- Colors are `#tokens`, not hex/rgb/oklch/named; `$prop` not `var(--prop)`.
|
|
218
223
|
- Spacing uses `x`/`r`/`bw`/`ow` units; math uses `(…)`, not `calc(…)`.
|
|
219
224
|
- `true` only on the properties that accept it; no `!important`.
|
package/docs/tasty/debug.md
CHANGED
|
@@ -6,9 +6,7 @@ Runtime CSS inspection and diagnostics for the Tasty styling system. Inspect inj
|
|
|
6
6
|
|
|
7
7
|
## Overview
|
|
8
8
|
|
|
9
|
-
`tastyDebug` is a diagnostic object that exposes Tasty's runtime CSS state. It is designed for development use
|
|
10
|
-
|
|
11
|
-
In development mode (`isDevEnv()` returns `true`), `tastyDebug` is automatically installed on `window.tastyDebug`. In production, install it manually when needed.
|
|
9
|
+
`tastyDebug` is a diagnostic object that exposes Tasty's runtime CSS state. It is designed for development use and can be installed on `window` explicitly when needed.
|
|
12
10
|
|
|
13
11
|
All methods **log to the console by default**. Pass `{ raw: true }` to suppress logging and only return data.
|
|
14
12
|
|
|
@@ -19,7 +17,6 @@ All methods **log to the console by default**. Pass `{ raw: true }` to suppress
|
|
|
19
17
|
## Quick Start
|
|
20
18
|
|
|
21
19
|
```typescript
|
|
22
|
-
// Auto-installed in dev mode. Otherwise:
|
|
23
20
|
import { tastyDebug } from '@tenphi/tasty';
|
|
24
21
|
tastyDebug.install();
|
|
25
22
|
|
|
@@ -277,7 +274,7 @@ tastyDebug.help();
|
|
|
277
274
|
|
|
278
275
|
### `install(): void`
|
|
279
276
|
|
|
280
|
-
Attaches `tastyDebug` to `window.tastyDebug`.
|
|
277
|
+
Attaches `tastyDebug` to `window.tastyDebug`.
|
|
281
278
|
|
|
282
279
|
```typescript
|
|
283
280
|
import { tastyDebug } from '@tenphi/tasty';
|
|
@@ -122,10 +122,10 @@ Tasty exports predefined style prop lists that group properties by role. Use the
|
|
|
122
122
|
| Preset | Properties | Typical use |
|
|
123
123
|
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------- |
|
|
124
124
|
| `FLOW_STYLES` | flow, gap, columnGap, rowGap, align, justify, placeItems, placeContent, alignItems, alignContent, justifyItems, justifyContent, gridColumns, gridRows, gridTemplate, gridAreas | Layout containers (`Space`, `Grid`) |
|
|
125
|
-
| `POSITION_STYLES` | gridArea, gridColumn, gridRow, order, placeSelf, alignSelf, justifySelf, zIndex, margin, inset, position
|
|
126
|
-
| `DIMENSION_STYLES` | width, height, flexBasis, flexGrow, flexShrink, flex
|
|
125
|
+
| `POSITION_STYLES` | gridArea, gridColumn, gridRow, order, placeSelf, alignSelf, justifySelf, zIndex, physical/logical margin, inset, scroll margin/padding, position | Positioned elements (`Button`, `Badge`) |
|
|
126
|
+
| `DIMENSION_STYLES` | width, height, blockSize, inlineSize, flexBasis, flexGrow, flexShrink, flex | Sized elements |
|
|
127
127
|
| `COLOR_STYLES` | color, fill, fade, image | Color-customizable elements |
|
|
128
|
-
| `BLOCK_STYLES` | padding,
|
|
128
|
+
| `BLOCK_STYLES` | padding, blockPadding, inlinePadding, overflow, scrollbar, textAlign, border, blockBorder, inlineBorder, radius, shadow, outline | Block-level containers |
|
|
129
129
|
| `CONTAINER_STYLES` | All of the above combined (+ BASE_STYLES) | Fully flexible containers |
|
|
130
130
|
| `OUTER_STYLES` | POSITION_STYLES + DIMENSION_STYLES + block outer (border, radius, shadow, outline) | Components whose outer shell is customizable |
|
|
131
131
|
| `INNER_STYLES` | BASE_STYLES + COLOR_STYLES + block inner (padding, overflow, scrollbar) + FLOW_STYLES | Components whose inner layout is customizable |
|
package/docs/tasty/pipeline.md
CHANGED
|
@@ -395,6 +395,8 @@ See the comment block in `exclusive.ts:500-523`: a default value whose higher-pr
|
|
|
395
395
|
|
|
396
396
|
Computes the Cartesian product of all style entries for a handler, creating snapshots of which value each style has for each possible state combination.
|
|
397
397
|
|
|
398
|
+
When every input is a direct value rather than a state map, the pipeline skips stages 0–4 and passes one unconditional snapshot directly to the handler. This avoids building exclusive entries and a Cartesian product for ordinary state-free styles.
|
|
399
|
+
|
|
398
400
|
### How It Works
|
|
399
401
|
|
|
400
402
|
1. Collect exclusive entries for each style the handler uses
|
|
@@ -454,6 +456,7 @@ Style handlers encapsulate the logic for translating design tokens (like `'2x'`)
|
|
|
454
456
|
### What It Does
|
|
455
457
|
|
|
456
458
|
Combines rules that have identical CSS output into a single rule with an OR condition.
|
|
459
|
+
Zero- and one-rule inputs return unchanged because no merge is possible.
|
|
457
460
|
|
|
458
461
|
### How It Works
|
|
459
462
|
|