@svadmin/ui 0.70.0 → 0.73.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/README.md +40 -25
- package/THIRD_PARTY_NOTICES.md +52 -0
- package/dist/actions.js +1 -1
- package/dist/app.css +7804 -5188
- package/dist/app.theme.css +7738 -5173
- package/dist/class-properties.generated.d.ts +1 -0
- package/dist/class-properties.generated.js +2 -0
- package/dist/classnames.d.ts +8 -0
- package/dist/classnames.js +26 -0
- package/dist/component-registry.svelte.d.ts +33 -19
- package/dist/component-registry.svelte.js +6 -4
- package/dist/components/AdminApp.svelte +55 -53
- package/dist/components/AdminApp.svelte.d.ts +2 -2
- package/dist/components/ApiSettings.svelte +19 -1
- package/dist/components/AuditLogDrawer.svelte +14 -3
- package/dist/components/AutoForm.svelte +162 -50
- package/dist/components/AutoForm.svelte.d.ts +4 -0
- package/dist/components/AutoTable.svelte +599 -259
- package/dist/components/AutoTable.svelte.d.ts +6 -0
- package/dist/components/BoundRecordDetailDrawer.svelte +172 -0
- package/dist/components/BoundRecordDetailDrawer.svelte.d.ts +11 -0
- package/dist/components/Breadcrumbs.svelte +7 -4
- package/dist/components/CancelTaskButton.svelte +9 -5
- package/dist/components/ColumnHeaderFilter.svelte +4 -3
- package/dist/components/ColumnSettings.svelte +1 -0
- package/dist/components/ComboboxField.svelte +118 -36
- package/dist/components/ComboboxField.svelte.d.ts +5 -4
- package/dist/components/CreatePage.svelte +7 -1
- package/dist/components/CreatePage.svelte.d.ts +2 -0
- package/dist/components/DateRangeInput.svelte +75 -0
- package/dist/components/DateRangeInput.svelte.d.ts +25 -0
- package/dist/components/DateTimeInput.svelte +65 -0
- package/dist/components/DateTimeInput.svelte.d.ts +19 -0
- package/dist/components/DetailDrawer.svelte +4 -0
- package/dist/components/DetailDrawer.svelte.d.ts +1 -0
- package/dist/components/DevTools.svelte +8 -21
- package/dist/components/DraggableGrid.svelte +1 -0
- package/dist/components/DraggableHeader.svelte +5 -9
- package/dist/components/DraggableHeader.svelte.d.ts +43 -18
- package/dist/components/DraggableRowTable.svelte +2 -2
- package/dist/components/DynamicFormList.svelte +17 -17
- package/dist/components/DynamicFormList.svelte.d.ts +2 -1
- package/dist/components/EditPage.svelte +7 -1
- package/dist/components/EditPage.svelte.d.ts +2 -0
- package/dist/components/EditableTable.svelte +4 -0
- package/dist/components/ErrorPage.svelte +3 -1
- package/dist/components/FieldDisplay.svelte +14 -0
- package/dist/components/FieldDisplay.svelte.d.ts +7 -0
- package/dist/components/FieldRenderer.svelte +96 -20
- package/dist/components/FileUpload.svelte +250 -0
- package/dist/components/FileUpload.svelte.d.ts +32 -0
- package/dist/components/FilterBuilder.svelte +236 -268
- package/dist/components/FilterBuilder.svelte.d.ts +3 -0
- package/dist/components/FilterDropdown.svelte.d.ts +1 -1
- package/dist/components/Header.svelte +5 -6
- package/dist/components/ImportWizard.svelte +182 -94
- package/dist/components/InfiniteList.svelte +22 -8
- package/dist/components/InfiniteList.svelte.d.ts +5 -3
- package/dist/components/InlineEdit.svelte +114 -44
- package/dist/components/JsonSchemaForm.svelte +256 -95
- package/dist/components/JsonSchemaForm.svelte.d.ts +12 -1
- package/dist/components/Layout.svelte +20 -17
- package/dist/components/LazyTaskQueueDrawer.svelte +26 -0
- package/dist/components/LazyTaskQueueDrawer.svelte.d.ts +8 -0
- package/dist/components/ListPage.svelte +11 -6
- package/dist/components/ListPage.svelte.d.ts +2 -0
- package/dist/components/LoginPage.svelte +1 -1
- package/dist/components/MasterDetailView.svelte +3 -3
- package/dist/components/MediaLibraryModal.svelte +5 -2
- package/dist/components/MentionsInput.svelte +4 -3
- package/dist/components/MoneyInput.svelte +25 -0
- package/dist/components/MoneyInput.svelte.d.ts +20 -0
- package/dist/components/NavigateToResource.svelte +3 -2
- package/dist/components/NumberInput.svelte +25 -0
- package/dist/components/NumberInput.svelte.d.ts +19 -0
- package/dist/components/NumericInput.svelte +110 -0
- package/dist/components/NumericInput.svelte.d.ts +23 -0
- package/dist/components/PercentInput.svelte +25 -0
- package/dist/components/PercentInput.svelte.d.ts +20 -0
- package/dist/components/PermissionMatrix.svelte +4 -3
- package/dist/components/ProfilePage.svelte +2 -2
- package/dist/components/QuickEditDrawer.svelte +42 -0
- package/dist/components/QuickEditDrawer.svelte.d.ts +10 -0
- package/dist/components/RecordDetailDrawer.svelte +16 -108
- package/dist/components/RecordDetailDrawer.svelte.d.ts +2 -0
- package/dist/components/RecordRowActions.svelte +41 -0
- package/dist/components/RecordRowActions.svelte.d.ts +14 -0
- package/dist/components/ResourceAccessGuard.svelte +7 -5
- package/dist/components/ResourceOperationsPage.svelte +25 -19
- package/dist/components/ResourceOperationsPage.svelte.d.ts +5 -1
- package/dist/components/RetryTaskButton.svelte +9 -5
- package/dist/components/RowActions.svelte +5 -3
- package/dist/components/SensitiveDataMask.svelte +3 -3
- package/dist/components/SettingsPage.svelte +1 -1
- package/dist/components/ShowInferencer.svelte +4 -2
- package/dist/components/ShowInferencer.svelte.d.ts +2 -0
- package/dist/components/ShowPage.svelte +49 -39
- package/dist/components/ShowPage.svelte.d.ts +2 -0
- package/dist/components/Sidebar.svelte +15 -13
- package/dist/components/SplitPaneLayout.svelte +4 -2
- package/dist/components/SpreadsheetView.svelte +81 -286
- package/dist/components/StepsForm.svelte +166 -49
- package/dist/components/StepsForm.svelte.d.ts +1 -0
- package/dist/components/SvarAutoTable.svelte +39 -0
- package/dist/components/SvarAutoTable.svelte.d.ts +13 -0
- package/dist/components/SvarDataGrid.svelte +362 -0
- package/dist/components/SvarDataGrid.svelte.d.ts +57 -0
- package/dist/components/SvarGridCell.svelte +10 -0
- package/dist/components/SvarGridCell.svelte.d.ts +7 -0
- package/dist/components/SvarResourceRead.svelte +50 -0
- package/dist/components/SvarResourceRead.svelte.d.ts +23 -0
- package/dist/components/SvarResourceTable.svelte +63 -0
- package/dist/components/SvarResourceTable.svelte.d.ts +42 -0
- package/dist/components/SvarResourceTableView.svelte +364 -0
- package/dist/components/SvarResourceTableView.svelte.d.ts +4 -0
- package/dist/components/TaskDetails.svelte +20 -7
- package/dist/components/TaskList.svelte +19 -7
- package/dist/components/TaskQueueDrawer.svelte +92 -37
- package/dist/components/Toast.svelte +4 -2
- package/dist/components/TooltipButton.svelte +1 -1
- package/dist/components/TreeSelect.svelte +212 -30
- package/dist/components/TreeSelect.svelte.d.ts +3 -1
- package/dist/components/ValidatedField.svelte +27 -0
- package/dist/components/ValidatedField.svelte.d.ts +35 -0
- package/dist/components/account/ImportMembersPage.svelte +2 -2
- package/dist/components/account/SecurityLogPage.svelte +3 -1
- package/dist/components/account/SettingsEnterprisePage.svelte +7 -5
- package/dist/components/account/TeamMembersPage.svelte +1 -1
- package/dist/components/auto-table-grid.d.ts +26 -0
- package/dist/components/auto-table-grid.js +1 -0
- package/dist/components/buttons/CloneButton.svelte +6 -4
- package/dist/components/buttons/DeleteButton.svelte +95 -29
- package/dist/components/buttons/DeleteButton.svelte.d.ts +2 -0
- package/dist/components/buttons/EditButton.svelte +6 -4
- package/dist/components/buttons/ExportButton.svelte +22 -4
- package/dist/components/buttons/ImportButton.svelte +83 -38
- package/dist/components/buttons/ImportButton.svelte.d.ts +6 -10
- package/dist/components/buttons/RefreshButton.svelte +48 -8
- package/dist/components/buttons/ShowButton.svelte +6 -4
- package/dist/components/content/ApiKeyList.svelte +3 -1
- package/dist/components/content/ContentPageHeader.svelte +12 -9
- package/dist/components/content/ContentPageShell.svelte +8 -9
- package/dist/components/content/FileBrowser.svelte +35 -0
- package/dist/components/content/FileBrowser.svelte.d.ts +14 -0
- package/dist/components/content/FileList.svelte +3 -1
- package/dist/components/content/MemberList.svelte +3 -1
- package/dist/components/content/MetricBlock.svelte +10 -13
- package/dist/components/content/NetworkTable.svelte +6 -4
- package/dist/components/content/NetworkTable.svelte.d.ts +1 -0
- package/dist/components/content/PageToolbar.svelte +6 -10
- package/dist/components/content/SectionHeader.svelte +8 -13
- package/dist/components/content/SecurityEventTable.svelte +3 -1
- package/dist/components/content/SettingsFieldRow.svelte +9 -23
- package/dist/components/content/SettingsGroup.svelte +11 -27
- package/dist/components/content/StatusBadge.svelte +3 -8
- package/dist/components/content/StatusTabs.svelte +2 -2
- package/dist/components/content/WorkspaceLayout.svelte +8 -12
- package/dist/components/enterprise/filter-tree.d.ts +48 -0
- package/dist/components/enterprise/filter-tree.js +224 -0
- package/dist/components/enterprise/json-schema-form.d.ts +39 -0
- package/dist/components/enterprise/json-schema-form.js +195 -0
- package/dist/components/enterprise/recursive-schema-form.d.ts +30 -0
- package/dist/components/enterprise/recursive-schema-form.js +196 -0
- package/dist/components/enterprise/spreadsheet-formula.d.ts +12 -0
- package/dist/components/enterprise/spreadsheet-formula.js +245 -0
- package/dist/components/fieldComponentMap.d.ts +18 -13
- package/dist/components/fieldComponentMap.js +100 -47
- package/dist/components/fields/AvatarField.svelte +1 -1
- package/dist/components/fields/ChoiceField.svelte +16 -0
- package/dist/components/fields/ChoiceField.svelte.d.ts +10 -0
- package/dist/components/fields/CodeField.svelte +11 -12
- package/dist/components/fields/CodeField.svelte.d.ts +1 -1
- package/dist/components/fields/DateField.svelte +4 -3
- package/dist/components/fields/DateRangeField.svelte +2 -4
- package/dist/components/fields/ImageField.svelte +3 -1
- package/dist/components/fields/ImagesField.svelte +23 -0
- package/dist/components/fields/ImagesField.svelte.d.ts +6 -0
- package/dist/components/fields/JsonField.svelte +19 -13
- package/dist/components/fields/PasswordField.svelte +5 -0
- package/dist/components/fields/PasswordField.svelte.d.ts +6 -0
- package/dist/components/fields/date-field-value.d.ts +2 -0
- package/dist/components/fields/date-field-value.js +13 -0
- package/dist/components/fields/json-value.d.ts +11 -0
- package/dist/components/fields/json-value.js +28 -0
- package/dist/components/json-schema-form-state.d.ts +37 -0
- package/dist/components/json-schema-form-state.js +168 -0
- package/dist/components/profile/ActivityTimeline.svelte +2 -2
- package/dist/components/record-detail.svelte.d.ts +19 -0
- package/dist/components/record-detail.svelte.js +34 -0
- package/dist/components/saved-list-views.js +29 -29
- package/dist/components/svar-grid-cells.d.ts +14 -0
- package/dist/components/svar-grid-cells.js +2 -0
- package/dist/components/svar-grid-contract.d.ts +80 -0
- package/dist/components/svar-grid-contract.js +159 -0
- package/dist/components/svar-grid-interactions.d.ts +54 -0
- package/dist/components/svar-grid-interactions.js +174 -0
- package/dist/components/svar-grid-loading.d.ts +40 -0
- package/dist/components/svar-grid-loading.js +180 -0
- package/dist/components/svar-grid-operations.d.ts +37 -0
- package/dist/components/svar-grid-operations.js +186 -0
- package/dist/components/svar-grid-panes.d.ts +34 -0
- package/dist/components/svar-grid-panes.js +66 -0
- package/dist/components/svar-grid-resource-loading.d.ts +18 -0
- package/dist/components/svar-grid-resource-loading.js +68 -0
- package/dist/components/svar-grid-resource-session.svelte.d.ts +29 -0
- package/dist/components/svar-grid-resource-session.svelte.js +61 -0
- package/dist/components/table-contract.d.ts +13 -0
- package/dist/components/table-contract.js +42 -0
- package/dist/components/task-utils.js +4 -2
- package/dist/components/ui/alert/alert-variants.d.ts +2 -3
- package/dist/components/ui/alert/alert-variants.js +1 -2
- package/dist/components/ui/alert/alert.svelte +4 -5
- package/dist/components/ui/alert/alert.svelte.d.ts +3 -8
- package/dist/components/ui/alert/index.js +0 -2
- package/dist/components/ui/avatar/avatar-variants.d.ts +2 -3
- package/dist/components/ui/avatar/avatar-variants.js +1 -2
- package/dist/components/ui/avatar/avatar.svelte +5 -6
- package/dist/components/ui/avatar/avatar.svelte.d.ts +3 -8
- package/dist/components/ui/badge/badge-variants.d.ts +2 -3
- package/dist/components/ui/badge/badge-variants.js +3 -2
- package/dist/components/ui/badge/badge.svelte +4 -5
- package/dist/components/ui/badge/badge.svelte.d.ts +3 -8
- package/dist/components/ui/badge/index.js +0 -2
- package/dist/components/ui/button/button-variants.d.ts +2 -3
- package/dist/components/ui/button/button-variants.js +5 -3
- package/dist/components/ui/button/button.svelte +100 -44
- package/dist/components/ui/button/button.svelte.d.ts +8 -12
- package/dist/components/ui/button/index.js +0 -2
- package/dist/components/ui/command/command-dialog.svelte +3 -1
- package/dist/components/ui/command/command-dialog.svelte.d.ts +1 -1
- package/dist/components/ui/command/command-group.svelte +4 -2
- package/dist/components/ui/command/command-item.svelte +4 -2
- package/dist/components/ui/command/command-separator.svelte +3 -1
- package/dist/components/ui/command/index.d.ts +5 -5
- package/dist/components/ui/input/input.svelte +41 -24
- package/dist/components/ui/input/input.svelte.d.ts +5 -4
- package/dist/components/ui/sheet/sheet.svelte +9 -3
- package/dist/components/ui/sheet/sheet.svelte.d.ts +1 -0
- package/dist/components/ui/textarea/textarea.svelte +2 -1
- package/dist/components/ui/tooltip/tooltip.svelte +4 -2
- package/dist/components.css +3079 -0
- package/dist/design-contract.d.ts +13 -0
- package/dist/design-contract.js +11 -0
- package/dist/design-system.d.ts +15 -0
- package/dist/design-system.js +7 -0
- package/dist/index.d.ts +15 -1
- package/dist/index.js +9 -0
- package/dist/inline-value.d.ts +5 -0
- package/dist/inline-value.js +24 -0
- package/dist/numeric-input.d.ts +2 -0
- package/dist/numeric-input.js +9 -0
- package/dist/page-chrome.css +12 -49
- package/dist/recipes.d.ts +4 -0
- package/dist/recipes.js +4 -0
- package/dist/rendering/index.d.ts +87 -0
- package/dist/rendering/index.js +117 -0
- package/dist/styled-system/css/conditions.js +36 -0
- package/dist/styled-system/css/css.d.ts +22 -0
- package/dist/styled-system/css/css.js +45 -0
- package/dist/styled-system/css/cva.d.ts +6 -0
- package/dist/styled-system/css/cva.js +87 -0
- package/dist/styled-system/css/cx.d.ts +5 -0
- package/dist/styled-system/css/cx.js +15 -0
- package/dist/styled-system/css/index.d.ts +5 -0
- package/dist/styled-system/css/index.js +4 -0
- package/dist/styled-system/css/sva.d.ts +4 -0
- package/dist/styled-system/css/sva.js +46 -0
- package/dist/styled-system/helpers.js +316 -0
- package/dist/styled-system/patterns/aspect-ratio.d.ts +20 -0
- package/dist/styled-system/patterns/aspect-ratio.js +38 -0
- package/dist/styled-system/patterns/bleed.d.ts +21 -0
- package/dist/styled-system/patterns/bleed.js +24 -0
- package/dist/styled-system/patterns/box.d.ts +20 -0
- package/dist/styled-system/patterns/box.js +15 -0
- package/dist/styled-system/patterns/center.d.ts +20 -0
- package/dist/styled-system/patterns/center.js +21 -0
- package/dist/styled-system/patterns/circle.d.ts +20 -0
- package/dist/styled-system/patterns/circle.js +25 -0
- package/dist/styled-system/patterns/container.d.ts +20 -0
- package/dist/styled-system/patterns/container.js +21 -0
- package/dist/styled-system/patterns/cq.d.ts +21 -0
- package/dist/styled-system/patterns/cq.js +21 -0
- package/dist/styled-system/patterns/divider.d.ts +22 -0
- package/dist/styled-system/patterns/divider.js +25 -0
- package/dist/styled-system/patterns/flex.d.ts +26 -0
- package/dist/styled-system/patterns/flex.js +26 -0
- package/dist/styled-system/patterns/float.d.ts +23 -0
- package/dist/styled-system/patterns/float.js +52 -0
- package/dist/styled-system/patterns/grid-item.d.ts +25 -0
- package/dist/styled-system/patterns/grid-item.js +25 -0
- package/dist/styled-system/patterns/grid.d.ts +24 -0
- package/dist/styled-system/patterns/grid.js +27 -0
- package/dist/styled-system/patterns/hstack.d.ts +21 -0
- package/dist/styled-system/patterns/hstack.js +24 -0
- package/dist/styled-system/patterns/index.d.ts +21 -0
- package/dist/styled-system/patterns/index.js +20 -0
- package/dist/styled-system/patterns/link-overlay.d.ts +20 -0
- package/dist/styled-system/patterns/link-overlay.js +24 -0
- package/dist/styled-system/patterns/spacer.d.ts +20 -0
- package/dist/styled-system/patterns/spacer.js +25 -0
- package/dist/styled-system/patterns/square.d.ts +20 -0
- package/dist/styled-system/patterns/square.js +24 -0
- package/dist/styled-system/patterns/stack.d.ts +23 -0
- package/dist/styled-system/patterns/stack.js +24 -0
- package/dist/styled-system/patterns/visually-hidden.d.ts +20 -0
- package/dist/styled-system/patterns/visually-hidden.js +18 -0
- package/dist/styled-system/patterns/vstack.d.ts +21 -0
- package/dist/styled-system/patterns/vstack.js +24 -0
- package/dist/styled-system/patterns/wrap.d.ts +24 -0
- package/dist/styled-system/patterns/wrap.js +25 -0
- package/dist/styled-system/recipes/content-header.d.ts +31 -0
- package/dist/styled-system/recipes/content-header.js +65 -0
- package/dist/styled-system/recipes/content-page.d.ts +34 -0
- package/dist/styled-system/recipes/content-page.js +43 -0
- package/dist/styled-system/recipes/create-recipe.js +82 -0
- package/dist/styled-system/recipes/index.d.ts +17 -0
- package/dist/styled-system/recipes/index.js +16 -0
- package/dist/styled-system/recipes/metric-block.d.ts +34 -0
- package/dist/styled-system/recipes/metric-block.js +76 -0
- package/dist/styled-system/recipes/product-list.d.ts +31 -0
- package/dist/styled-system/recipes/product-list.js +73 -0
- package/dist/styled-system/recipes/product-section.d.ts +31 -0
- package/dist/styled-system/recipes/product-section.js +49 -0
- package/dist/styled-system/recipes/product-settings-row.d.ts +34 -0
- package/dist/styled-system/recipes/product-settings-row.js +58 -0
- package/dist/styled-system/recipes/product-settings.d.ts +31 -0
- package/dist/styled-system/recipes/product-settings.js +57 -0
- package/dist/styled-system/recipes/product-status.d.ts +34 -0
- package/dist/styled-system/recipes/product-status.js +45 -0
- package/dist/styled-system/recipes/product-toolbar.d.ts +31 -0
- package/dist/styled-system/recipes/product-toolbar.js +41 -0
- package/dist/styled-system/recipes/product-workspace.d.ts +34 -0
- package/dist/styled-system/recipes/product-workspace.js +58 -0
- package/dist/styled-system/recipes/surface-metric.d.ts +38 -0
- package/dist/styled-system/recipes/surface-metric.js +63 -0
- package/dist/styled-system/recipes/surface-table.d.ts +34 -0
- package/dist/styled-system/recipes/surface-table.js +62 -0
- package/dist/styled-system/recipes/ui-badge.d.ts +31 -0
- package/dist/styled-system/recipes/ui-badge.js +38 -0
- package/dist/styled-system/recipes/ui-button.d.ts +32 -0
- package/dist/styled-system/recipes/ui-button.js +43 -0
- package/dist/styled-system/recipes/ui-input.d.ts +31 -0
- package/dist/styled-system/recipes/ui-input.js +49 -0
- package/dist/styled-system/recipes/ui-textarea.d.ts +31 -0
- package/dist/styled-system/recipes/ui-textarea.js +24 -0
- package/dist/styled-system/styles.css +1257 -0
- package/dist/styled-system/tokens/index.d.ts +9 -0
- package/dist/styled-system/tokens/index.js +268 -0
- package/dist/styled-system/tokens/tokens.d.ts +36 -0
- package/dist/styled-system/types/composition.d.ts +227 -0
- package/dist/styled-system/types/conditions.d.ts +236 -0
- package/dist/styled-system/types/csstype.d.ts +22570 -0
- package/dist/styled-system/types/index.d.ts +6 -0
- package/dist/styled-system/types/parts.d.ts +8 -0
- package/dist/styled-system/types/pattern.d.ts +78 -0
- package/dist/styled-system/types/prop-type.d.ts +223 -0
- package/dist/styled-system/types/recipe.d.ts +181 -0
- package/dist/styled-system/types/selectors.d.ts +59 -0
- package/dist/styled-system/types/static-css.d.ts +56 -0
- package/dist/styled-system/types/style-props.d.ts +8088 -0
- package/dist/styled-system/types/system-types.d.ts +151 -0
- package/dist/styles/aliases.css +49 -0
- package/dist/styles/compatibility.epilogue.css +384 -0
- package/dist/styles/compatibility.prelude.css +5513 -0
- package/dist/styles/conditional-states.css +28 -0
- package/dist/styles/conditional-utilities.css +22 -0
- package/dist/styles/recipes.css +1262 -0
- package/dist/types.d.ts +3 -3
- package/dist/utils.d.ts +1 -1
- package/dist/utils.js +1 -1
- package/package.json +38 -14
- package/styles-compatibility.json +12 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const bleedConfig = {
|
|
5
|
+
transform(props, { map, isCssUnit, isCssVar }) {
|
|
6
|
+
const { inline, block, ...rest } = props;
|
|
7
|
+
const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
|
|
8
|
+
return {
|
|
9
|
+
"--bleed-x": map(inline, valueFn),
|
|
10
|
+
"--bleed-y": map(block, valueFn),
|
|
11
|
+
marginInline: "calc(var(--bleed-x, 0) * -1)",
|
|
12
|
+
marginBlock: "calc(var(--bleed-y, 0) * -1)",
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{inline:'0',block:'0'}}
|
|
17
|
+
|
|
18
|
+
export const getBleedStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(bleedConfig, styles)
|
|
20
|
+
return bleedConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const bleed = (styles) => css(getBleedStyle(styles))
|
|
24
|
+
bleed.raw = getBleedStyle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface BoxProperties {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties > {}
|
|
13
|
+
|
|
14
|
+
interface BoxPatternFn {
|
|
15
|
+
(styles?: BoxStyles): string
|
|
16
|
+
raw: (styles?: BoxStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const box: BoxPatternFn;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const boxConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return props;
|
|
7
|
+
}}
|
|
8
|
+
|
|
9
|
+
export const getBoxStyle = (styles = {}) => {
|
|
10
|
+
const _styles = getPatternStyles(boxConfig, styles)
|
|
11
|
+
return boxConfig.transform(_styles, patternFns)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const box = (styles) => css(getBoxStyle(styles))
|
|
15
|
+
box.raw = getBoxStyle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CenterProperties {
|
|
9
|
+
inline?: ConditionalValue<boolean>
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface CenterStyles extends CenterProperties, DistributiveOmit<SystemStyleObject, keyof CenterProperties > {}
|
|
13
|
+
|
|
14
|
+
interface CenterPatternFn {
|
|
15
|
+
(styles?: CenterStyles): string
|
|
16
|
+
raw: (styles?: CenterStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const center: CenterPatternFn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const centerConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { inline, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: inline ? "inline-flex" : "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
...rest
|
|
12
|
+
};
|
|
13
|
+
}}
|
|
14
|
+
|
|
15
|
+
export const getCenterStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(centerConfig, styles)
|
|
17
|
+
return centerConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const center = (styles) => css(getCenterStyle(styles))
|
|
21
|
+
center.raw = getCenterStyle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CircleProperties {
|
|
9
|
+
size?: SystemProperties["width"]
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties > {}
|
|
13
|
+
|
|
14
|
+
interface CirclePatternFn {
|
|
15
|
+
(styles?: CircleStyles): string
|
|
16
|
+
raw: (styles?: CircleStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const circle: CirclePatternFn;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const circleConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { size, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
flex: "0 0 auto",
|
|
12
|
+
width: size,
|
|
13
|
+
height: size,
|
|
14
|
+
borderRadius: "9999px",
|
|
15
|
+
...rest
|
|
16
|
+
};
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
export const getCircleStyle = (styles = {}) => {
|
|
20
|
+
const _styles = getPatternStyles(circleConfig, styles)
|
|
21
|
+
return circleConfig.transform(_styles, patternFns)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const circle = (styles) => css(getCircleStyle(styles))
|
|
25
|
+
circle.raw = getCircleStyle
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface ContainerProperties {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface ContainerStyles extends ContainerProperties, DistributiveOmit<SystemStyleObject, keyof ContainerProperties > {}
|
|
13
|
+
|
|
14
|
+
interface ContainerPatternFn {
|
|
15
|
+
(styles?: ContainerStyles): string
|
|
16
|
+
raw: (styles?: ContainerStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const container: ContainerPatternFn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const containerConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return {
|
|
7
|
+
position: "relative",
|
|
8
|
+
maxWidth: "8xl",
|
|
9
|
+
mx: "auto",
|
|
10
|
+
px: { base: "4", md: "6", lg: "8" },
|
|
11
|
+
...props
|
|
12
|
+
};
|
|
13
|
+
}}
|
|
14
|
+
|
|
15
|
+
export const getContainerStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(containerConfig, styles)
|
|
17
|
+
return containerConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const container = (styles) => css(getContainerStyle(styles))
|
|
21
|
+
container.raw = getContainerStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CqProperties {
|
|
9
|
+
name?: ConditionalValue<Tokens["containerNames"] | Properties["containerName"]>
|
|
10
|
+
type?: SystemProperties["containerType"]
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface CqStyles extends CqProperties, DistributiveOmit<SystemStyleObject, keyof CqProperties > {}
|
|
14
|
+
|
|
15
|
+
interface CqPatternFn {
|
|
16
|
+
(styles?: CqStyles): string
|
|
17
|
+
raw: (styles?: CqStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const cq: CqPatternFn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const cqConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { name, type, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
containerType: type,
|
|
9
|
+
containerName: name,
|
|
10
|
+
...rest
|
|
11
|
+
};
|
|
12
|
+
},
|
|
13
|
+
defaultValues:{type:'inline-size'}}
|
|
14
|
+
|
|
15
|
+
export const getCqStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(cqConfig, styles)
|
|
17
|
+
return cqConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const cq = (styles) => css(getCqStyle(styles))
|
|
21
|
+
cq.raw = getCqStyle
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface DividerProperties {
|
|
9
|
+
orientation?: ConditionalValue<"horizontal" | "vertical">
|
|
10
|
+
thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
|
|
11
|
+
color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
interface DividerStyles extends DividerProperties, DistributiveOmit<SystemStyleObject, keyof DividerProperties > {}
|
|
15
|
+
|
|
16
|
+
interface DividerPatternFn {
|
|
17
|
+
(styles?: DividerStyles): string
|
|
18
|
+
raw: (styles?: DividerStyles) => SystemStyleObject
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
export declare const divider: DividerPatternFn;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const dividerConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { orientation, thickness, color, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
"--thickness": thickness,
|
|
9
|
+
width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
|
|
10
|
+
height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"),
|
|
11
|
+
borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0),
|
|
12
|
+
borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0),
|
|
13
|
+
borderColor: color,
|
|
14
|
+
...rest
|
|
15
|
+
};
|
|
16
|
+
},
|
|
17
|
+
defaultValues:{orientation:'horizontal',thickness:'1px'}}
|
|
18
|
+
|
|
19
|
+
export const getDividerStyle = (styles = {}) => {
|
|
20
|
+
const _styles = getPatternStyles(dividerConfig, styles)
|
|
21
|
+
return dividerConfig.transform(_styles, patternFns)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const divider = (styles) => css(getDividerStyle(styles))
|
|
25
|
+
divider.raw = getDividerStyle
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface FlexProperties {
|
|
9
|
+
align?: SystemProperties["alignItems"]
|
|
10
|
+
justify?: SystemProperties["justifyContent"]
|
|
11
|
+
direction?: SystemProperties["flexDirection"]
|
|
12
|
+
wrap?: SystemProperties["flexWrap"]
|
|
13
|
+
basis?: SystemProperties["flexBasis"]
|
|
14
|
+
grow?: SystemProperties["flexGrow"]
|
|
15
|
+
shrink?: SystemProperties["flexShrink"]
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
interface FlexStyles extends FlexProperties, DistributiveOmit<SystemStyleObject, keyof FlexProperties > {}
|
|
19
|
+
|
|
20
|
+
interface FlexPatternFn {
|
|
21
|
+
(styles?: FlexStyles): string
|
|
22
|
+
raw: (styles?: FlexStyles) => SystemStyleObject
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
export declare const flex: FlexPatternFn;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const flexConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
flexDirection: direction,
|
|
10
|
+
alignItems: align,
|
|
11
|
+
justifyContent: justify,
|
|
12
|
+
flexWrap: wrap2,
|
|
13
|
+
flexBasis: basis,
|
|
14
|
+
flexGrow: grow,
|
|
15
|
+
flexShrink: shrink,
|
|
16
|
+
...rest
|
|
17
|
+
};
|
|
18
|
+
}}
|
|
19
|
+
|
|
20
|
+
export const getFlexStyle = (styles = {}) => {
|
|
21
|
+
const _styles = getPatternStyles(flexConfig, styles)
|
|
22
|
+
return flexConfig.transform(_styles, patternFns)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export const flex = (styles) => css(getFlexStyle(styles))
|
|
26
|
+
flex.raw = getFlexStyle
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface FloatProperties {
|
|
9
|
+
offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
|
|
10
|
+
offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
|
|
11
|
+
offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
|
|
12
|
+
placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
interface FloatStyles extends FloatProperties, DistributiveOmit<SystemStyleObject, keyof FloatProperties > {}
|
|
16
|
+
|
|
17
|
+
interface FloatPatternFn {
|
|
18
|
+
(styles?: FloatStyles): string
|
|
19
|
+
raw: (styles?: FloatStyles) => SystemStyleObject
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
export declare const float: FloatPatternFn;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const floatConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { offset, offsetX, offsetY, placement, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "inline-flex",
|
|
9
|
+
justifyContent: "center",
|
|
10
|
+
alignItems: "center",
|
|
11
|
+
position: "absolute",
|
|
12
|
+
insetBlockStart: map(placement, (v) => {
|
|
13
|
+
const [side] = v.split("-");
|
|
14
|
+
const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
|
|
15
|
+
return map2[side];
|
|
16
|
+
}),
|
|
17
|
+
insetBlockEnd: map(placement, (v) => {
|
|
18
|
+
const [side] = v.split("-");
|
|
19
|
+
const map2 = { top: "auto", middle: "50%", bottom: offsetY };
|
|
20
|
+
return map2[side];
|
|
21
|
+
}),
|
|
22
|
+
insetInlineStart: map(placement, (v) => {
|
|
23
|
+
const [, align] = v.split("-");
|
|
24
|
+
const map2 = { start: offsetX, center: "50%", end: "auto" };
|
|
25
|
+
return map2[align];
|
|
26
|
+
}),
|
|
27
|
+
insetInlineEnd: map(placement, (v) => {
|
|
28
|
+
const [, align] = v.split("-");
|
|
29
|
+
const map2 = { start: "auto", center: "50%", end: offsetX };
|
|
30
|
+
return map2[align];
|
|
31
|
+
}),
|
|
32
|
+
translate: map(placement, (v) => {
|
|
33
|
+
const [side, align] = v.split("-");
|
|
34
|
+
const mapX = { start: "-50%", center: "-50%", end: "50%" };
|
|
35
|
+
const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
|
|
36
|
+
return `${mapX[align]} ${mapY[side]}`;
|
|
37
|
+
}),
|
|
38
|
+
...rest
|
|
39
|
+
};
|
|
40
|
+
},
|
|
41
|
+
defaultValues(props) {
|
|
42
|
+
const offset = props.offset || "0";
|
|
43
|
+
return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
|
|
44
|
+
}}
|
|
45
|
+
|
|
46
|
+
export const getFloatStyle = (styles = {}) => {
|
|
47
|
+
const _styles = getPatternStyles(floatConfig, styles)
|
|
48
|
+
return floatConfig.transform(_styles, patternFns)
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export const float = (styles) => css(getFloatStyle(styles))
|
|
52
|
+
float.raw = getFloatStyle
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface GridItemProperties {
|
|
9
|
+
colSpan?: ConditionalValue<number>
|
|
10
|
+
rowSpan?: ConditionalValue<number>
|
|
11
|
+
colStart?: ConditionalValue<number>
|
|
12
|
+
rowStart?: ConditionalValue<number>
|
|
13
|
+
colEnd?: ConditionalValue<number>
|
|
14
|
+
rowEnd?: ConditionalValue<number>
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
interface GridItemStyles extends GridItemProperties, DistributiveOmit<SystemStyleObject, keyof GridItemProperties > {}
|
|
18
|
+
|
|
19
|
+
interface GridItemPatternFn {
|
|
20
|
+
(styles?: GridItemStyles): string
|
|
21
|
+
raw: (styles?: GridItemStyles) => SystemStyleObject
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
export declare const gridItem: GridItemPatternFn;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const gridItemConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
|
|
7
|
+
const spanFn = (v) => v === "auto" ? v : `span ${v}`;
|
|
8
|
+
return {
|
|
9
|
+
gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
|
|
10
|
+
gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
|
|
11
|
+
gridColumnStart: colStart,
|
|
12
|
+
gridColumnEnd: colEnd,
|
|
13
|
+
gridRowStart: rowStart,
|
|
14
|
+
gridRowEnd: rowEnd,
|
|
15
|
+
...rest
|
|
16
|
+
};
|
|
17
|
+
}}
|
|
18
|
+
|
|
19
|
+
export const getGridItemStyle = (styles = {}) => {
|
|
20
|
+
const _styles = getPatternStyles(gridItemConfig, styles)
|
|
21
|
+
return gridItemConfig.transform(_styles, patternFns)
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const gridItem = (styles) => css(getGridItemStyle(styles))
|
|
25
|
+
gridItem.raw = getGridItemStyle
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface GridProperties {
|
|
9
|
+
gap?: SystemProperties["gap"]
|
|
10
|
+
columnGap?: SystemProperties["gap"]
|
|
11
|
+
rowGap?: SystemProperties["gap"]
|
|
12
|
+
columns?: ConditionalValue<number>
|
|
13
|
+
minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
interface GridStyles extends GridProperties, DistributiveOmit<SystemStyleObject, keyof GridProperties > {}
|
|
17
|
+
|
|
18
|
+
interface GridPatternFn {
|
|
19
|
+
(styles?: GridStyles): string
|
|
20
|
+
raw: (styles?: GridStyles) => SystemStyleObject
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
export declare const grid: GridPatternFn;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const gridConfig = {
|
|
5
|
+
transform(props, { map, isCssUnit }) {
|
|
6
|
+
const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
|
|
7
|
+
const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
|
|
8
|
+
return {
|
|
9
|
+
display: "grid",
|
|
10
|
+
gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
|
|
11
|
+
gap,
|
|
12
|
+
columnGap,
|
|
13
|
+
rowGap,
|
|
14
|
+
...rest
|
|
15
|
+
};
|
|
16
|
+
},
|
|
17
|
+
defaultValues(props) {
|
|
18
|
+
return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
|
|
19
|
+
}}
|
|
20
|
+
|
|
21
|
+
export const getGridStyle = (styles = {}) => {
|
|
22
|
+
const _styles = getPatternStyles(gridConfig, styles)
|
|
23
|
+
return gridConfig.transform(_styles, patternFns)
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export const grid = (styles) => css(getGridStyle(styles))
|
|
27
|
+
grid.raw = getGridStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface HstackProperties {
|
|
9
|
+
justify?: SystemProperties["justifyContent"]
|
|
10
|
+
gap?: SystemProperties["gap"]
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface HstackStyles extends HstackProperties, DistributiveOmit<SystemStyleObject, keyof HstackProperties > {}
|
|
14
|
+
|
|
15
|
+
interface HstackPatternFn {
|
|
16
|
+
(styles?: HstackStyles): string
|
|
17
|
+
raw: (styles?: HstackStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const hstack: HstackPatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const hstackConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { justify, gap, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: justify,
|
|
11
|
+
gap,
|
|
12
|
+
flexDirection: "row",
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{gap:'8px'}}
|
|
17
|
+
|
|
18
|
+
export const getHstackStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(hstackConfig, styles)
|
|
20
|
+
return hstackConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const hstack = (styles) => css(getHstackStyle(styles))
|
|
24
|
+
hstack.raw = getHstackStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
export * from './box';
|
|
3
|
+
export * from './flex';
|
|
4
|
+
export * from './stack';
|
|
5
|
+
export * from './vstack';
|
|
6
|
+
export * from './hstack';
|
|
7
|
+
export * from './spacer';
|
|
8
|
+
export * from './square';
|
|
9
|
+
export * from './circle';
|
|
10
|
+
export * from './center';
|
|
11
|
+
export * from './link-overlay';
|
|
12
|
+
export * from './aspect-ratio';
|
|
13
|
+
export * from './grid';
|
|
14
|
+
export * from './grid-item';
|
|
15
|
+
export * from './wrap';
|
|
16
|
+
export * from './container';
|
|
17
|
+
export * from './divider';
|
|
18
|
+
export * from './float';
|
|
19
|
+
export * from './bleed';
|
|
20
|
+
export * from './visually-hidden';
|
|
21
|
+
export * from './cq';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export * from './box.js';
|
|
2
|
+
export * from './flex.js';
|
|
3
|
+
export * from './stack.js';
|
|
4
|
+
export * from './vstack.js';
|
|
5
|
+
export * from './hstack.js';
|
|
6
|
+
export * from './spacer.js';
|
|
7
|
+
export * from './square.js';
|
|
8
|
+
export * from './circle.js';
|
|
9
|
+
export * from './center.js';
|
|
10
|
+
export * from './link-overlay.js';
|
|
11
|
+
export * from './aspect-ratio.js';
|
|
12
|
+
export * from './grid.js';
|
|
13
|
+
export * from './grid-item.js';
|
|
14
|
+
export * from './wrap.js';
|
|
15
|
+
export * from './container.js';
|
|
16
|
+
export * from './divider.js';
|
|
17
|
+
export * from './float.js';
|
|
18
|
+
export * from './bleed.js';
|
|
19
|
+
export * from './visually-hidden.js';
|
|
20
|
+
export * from './cq.js';
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface LinkOverlayProperties {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit<SystemStyleObject, keyof LinkOverlayProperties > {}
|
|
13
|
+
|
|
14
|
+
interface LinkOverlayPatternFn {
|
|
15
|
+
(styles?: LinkOverlayStyles): string
|
|
16
|
+
raw: (styles?: LinkOverlayStyles) => SystemStyleObject
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
export declare const linkOverlay: LinkOverlayPatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.js';
|
|
2
|
+
import { css } from '../css/index.js';
|
|
3
|
+
|
|
4
|
+
const linkOverlayConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return {
|
|
7
|
+
_before: {
|
|
8
|
+
content: '""',
|
|
9
|
+
position: "absolute",
|
|
10
|
+
inset: "0",
|
|
11
|
+
zIndex: "0",
|
|
12
|
+
...props["_before"]
|
|
13
|
+
},
|
|
14
|
+
...props
|
|
15
|
+
};
|
|
16
|
+
}}
|
|
17
|
+
|
|
18
|
+
export const getLinkOverlayStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(linkOverlayConfig, styles)
|
|
20
|
+
return linkOverlayConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
|
|
24
|
+
linkOverlay.raw = getLinkOverlayStyle
|