@ndla/primitives 1.0.129-alpha.0 → 1.0.132-alpha.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/panda.buildinfo.json +25 -1
- package/dist/styles.css +100 -4
- package/es/Accordion.mjs +1 -1
- package/es/Accordion.mjs.map +1 -1
- package/es/ArticleLists.mjs +1 -1
- package/es/ArticleLists.mjs.map +1 -1
- package/es/Badge.mjs +1 -1
- package/es/Badge.mjs.map +1 -1
- package/es/BlockQuote.mjs +1 -1
- package/es/BlockQuote.mjs.map +1 -1
- package/es/Button.mjs +1 -1
- package/es/Button.mjs.map +1 -1
- package/es/Card/Card.mjs +1 -1
- package/es/Card/Card.mjs.map +1 -1
- package/es/Checkbox.mjs +2 -1
- package/es/Checkbox.mjs.map +1 -1
- package/es/Combobox.mjs +1 -1
- package/es/Combobox.mjs.map +1 -1
- package/es/DatePicker.mjs +1 -1
- package/es/DatePicker.mjs.map +1 -1
- package/es/Dialog.mjs +1 -1
- package/es/Dialog.mjs.map +1 -1
- package/es/ErrorMessage/ErrorMessage.mjs +1 -1
- package/es/ErrorMessage/ErrorMessage.mjs.map +1 -1
- package/es/ExpandableBox.mjs +1 -1
- package/es/ExpandableBox.mjs.map +1 -1
- package/es/Field.mjs +2 -1
- package/es/Field.mjs.map +1 -1
- package/es/FieldErrorMessage.mjs +2 -1
- package/es/FieldErrorMessage.mjs.map +1 -1
- package/es/FieldHelper.mjs +2 -1
- package/es/FieldHelper.mjs.map +1 -1
- package/es/Figure.mjs +1 -1
- package/es/Figure.mjs.map +1 -1
- package/es/FileUpload.mjs +1 -1
- package/es/FileUpload.mjs.map +1 -1
- package/es/FramedContent.mjs +1 -1
- package/es/FramedContent.mjs.map +1 -1
- package/es/Hero.mjs +1 -1
- package/es/Hero.mjs.map +1 -1
- package/es/Image.mjs +1 -1
- package/es/Image.mjs.map +1 -1
- package/es/Input.mjs +2 -1
- package/es/Input.mjs.map +1 -1
- package/es/Label.mjs +3 -1
- package/es/Label.mjs.map +1 -1
- package/es/Layout/PageContainer.mjs +1 -1
- package/es/Layout/PageContainer.mjs.map +1 -1
- package/es/Layout/PageContent.mjs +1 -1
- package/es/Layout/PageContent.mjs.map +1 -1
- package/es/ListItem/ListItem.mjs +1 -1
- package/es/ListItem/ListItem.mjs.map +1 -1
- package/es/Menu.mjs +1 -1
- package/es/Menu.mjs.map +1 -1
- package/es/MessageBox.mjs +1 -1
- package/es/MessageBox.mjs.map +1 -1
- package/es/NdlaLogo.mjs.map +1 -1
- package/es/Pagination.mjs +1 -1
- package/es/Pagination.mjs.map +1 -1
- package/es/Popover.mjs +1 -1
- package/es/Popover.mjs.map +1 -1
- package/es/RadioGroup.mjs +3 -2
- package/es/RadioGroup.mjs.map +1 -1
- package/es/RainbowSpinner.mjs +66 -0
- package/es/RainbowSpinner.mjs.map +1 -0
- package/es/Select.mjs +1 -1
- package/es/Select.mjs.map +1 -1
- package/es/Skeleton.mjs +1 -1
- package/es/Skeleton.mjs.map +1 -1
- package/es/Slider.mjs +1 -1
- package/es/Slider.mjs.map +1 -1
- package/es/Spinner.mjs +1 -1
- package/es/Spinner.mjs.map +1 -1
- package/es/Switch.mjs +1 -1
- package/es/Switch.mjs.map +1 -1
- package/es/Table.mjs +1 -1
- package/es/Table.mjs.map +1 -1
- package/es/Tabs.mjs +1 -1
- package/es/Tabs.mjs.map +1 -1
- package/es/TagsInput.mjs +1 -1
- package/es/TagsInput.mjs.map +1 -1
- package/es/Text.mjs +1 -1
- package/es/Text.mjs.map +1 -1
- package/es/Toast.mjs +1 -1
- package/es/Toast.mjs.map +1 -1
- package/es/ToggleGroup.mjs +1 -1
- package/es/ToggleGroup.mjs.map +1 -1
- package/es/Tooltip.mjs +1 -1
- package/es/Tooltip.mjs.map +1 -1
- package/es/Tree/Tree.mjs +1 -1
- package/es/Tree/Tree.mjs.map +1 -1
- package/es/index.mjs +3 -2
- package/lib/Accordion.d.ts +1 -1
- package/lib/Accordion.js +7 -7
- package/lib/Accordion.js.map +1 -1
- package/lib/ArticleLists.d.ts +1 -1
- package/lib/ArticleLists.js +2 -2
- package/lib/ArticleLists.js.map +1 -1
- package/lib/Badge.d.ts +1 -1
- package/lib/Badge.js +2 -2
- package/lib/Badge.js.map +1 -1
- package/lib/BlockQuote.d.ts +1 -1
- package/lib/BlockQuote.js +2 -2
- package/lib/BlockQuote.js.map +1 -1
- package/lib/Button.d.ts +1 -1
- package/lib/Button.js +2 -2
- package/lib/Button.js.map +1 -1
- package/lib/Card/Card.d.ts +3 -3
- package/lib/Card/Card.js +3 -3
- package/lib/Card/Card.js.map +1 -1
- package/lib/Checkbox.d.ts +2 -1
- package/lib/Checkbox.js +9 -8
- package/lib/Checkbox.js.map +1 -1
- package/lib/Combobox.d.ts +1 -1
- package/lib/Combobox.js +16 -16
- package/lib/Combobox.js.map +1 -1
- package/lib/DatePicker.d.ts +2 -2
- package/lib/DatePicker.js +26 -26
- package/lib/DatePicker.js.map +1 -1
- package/lib/Dialog.d.ts +2 -2
- package/lib/Dialog.js +12 -12
- package/lib/Dialog.js.map +1 -1
- package/lib/ErrorMessage/ErrorMessage.d.ts +4 -4
- package/lib/ErrorMessage/ErrorMessage.js +4 -4
- package/lib/ErrorMessage/ErrorMessage.js.map +1 -1
- package/lib/ExpandableBox.d.ts +1 -1
- package/lib/ExpandableBox.js +3 -3
- package/lib/ExpandableBox.js.map +1 -1
- package/lib/Field.d.ts +2 -1
- package/lib/Field.js +4 -3
- package/lib/Field.js.map +1 -1
- package/lib/FieldErrorMessage.d.ts +2 -1
- package/lib/FieldErrorMessage.js +4 -3
- package/lib/FieldErrorMessage.js.map +1 -1
- package/lib/FieldHelper.d.ts +2 -1
- package/lib/FieldHelper.js +4 -3
- package/lib/FieldHelper.js.map +1 -1
- package/lib/Figure.d.ts +1 -1
- package/lib/Figure.js +2 -2
- package/lib/Figure.js.map +1 -1
- package/lib/FileUpload.d.ts +1 -1
- package/lib/FileUpload.js +15 -15
- package/lib/FileUpload.js.map +1 -1
- package/lib/FramedContent.d.ts +1 -1
- package/lib/FramedContent.js +2 -2
- package/lib/FramedContent.js.map +1 -1
- package/lib/Hero.d.ts +4 -4
- package/lib/Hero.js +6 -5
- package/lib/Hero.js.map +1 -1
- package/lib/Image.js +2 -2
- package/lib/Image.js.map +1 -1
- package/lib/Input.d.ts +1 -1
- package/lib/Input.js +7 -6
- package/lib/Input.js.map +1 -1
- package/lib/Label.d.ts +2 -1
- package/lib/Label.js +7 -5
- package/lib/Label.js.map +1 -1
- package/lib/Layout/PageContainer.d.ts +1 -1
- package/lib/Layout/PageContainer.js +1 -1
- package/lib/Layout/PageContainer.js.map +1 -1
- package/lib/Layout/PageContent.d.ts +2 -2
- package/lib/Layout/PageContent.js +3 -3
- package/lib/Layout/PageContent.js.map +1 -1
- package/lib/ListItem/ListItem.d.ts +3 -3
- package/lib/ListItem/ListItem.js +3 -3
- package/lib/ListItem/ListItem.js.map +1 -1
- package/lib/Menu.d.ts +1 -1
- package/lib/Menu.js +12 -12
- package/lib/Menu.js.map +1 -1
- package/lib/MessageBox.d.ts +1 -1
- package/lib/MessageBox.js +2 -2
- package/lib/MessageBox.js.map +1 -1
- package/lib/NdlaLogo.js.map +1 -1
- package/lib/Pagination.d.ts +1 -1
- package/lib/Pagination.js +10 -9
- package/lib/Pagination.js.map +1 -1
- package/lib/Popover.d.ts +2 -2
- package/lib/Popover.js +15 -15
- package/lib/Popover.js.map +1 -1
- package/lib/RadioGroup.d.ts +1 -1
- package/lib/RadioGroup.js +13 -12
- package/lib/RadioGroup.js.map +1 -1
- package/lib/RainbowSpinner.d.ts +26 -0
- package/lib/RainbowSpinner.js +66 -0
- package/lib/RainbowSpinner.js.map +1 -0
- package/lib/Select.d.ts +1 -1
- package/lib/Select.js +18 -18
- package/lib/Select.js.map +1 -1
- package/lib/Skeleton.d.ts +2 -2
- package/lib/Skeleton.js +3 -2
- package/lib/Skeleton.js.map +1 -1
- package/lib/Slider.d.ts +1 -1
- package/lib/Slider.js +9 -9
- package/lib/Slider.js.map +1 -1
- package/lib/Spinner.d.ts +1 -1
- package/lib/Spinner.js +2 -2
- package/lib/Spinner.js.map +1 -1
- package/lib/Switch.d.ts +1 -1
- package/lib/Switch.js +7 -7
- package/lib/Switch.js.map +1 -1
- package/lib/Table.d.ts +2 -2
- package/lib/Table.js +3 -2
- package/lib/Table.js.map +1 -1
- package/lib/Tabs.d.ts +1 -1
- package/lib/Tabs.js +6 -6
- package/lib/Tabs.js.map +1 -1
- package/lib/TagsInput.d.ts +1 -1
- package/lib/TagsInput.js +12 -12
- package/lib/TagsInput.js.map +1 -1
- package/lib/Text.d.ts +1 -1
- package/lib/Text.js +3 -3
- package/lib/Text.js.map +1 -1
- package/lib/Toast.d.ts +1 -1
- package/lib/Toast.js +7 -7
- package/lib/Toast.js.map +1 -1
- package/lib/ToggleGroup.d.ts +1 -1
- package/lib/ToggleGroup.js +6 -5
- package/lib/ToggleGroup.js.map +1 -1
- package/lib/Tooltip.d.ts +1 -1
- package/lib/Tooltip.js +8 -8
- package/lib/Tooltip.js.map +1 -1
- package/lib/Tree/Tree.d.ts +2 -2
- package/lib/Tree/Tree.js +19 -19
- package/lib/Tree/Tree.js.map +1 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +6 -3
- package/package.json +5 -5
package/lib/Checkbox.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
const require_Text = require("./Text.js");
|
|
2
|
-
let _ark_ui_react = require("@ark-ui/react");
|
|
3
2
|
let _ndla_styled_system_css = require("@ndla/styled-system/css");
|
|
4
3
|
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
5
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
+
require("@ark-ui/react/factory");
|
|
6
|
+
let _ark_ui_react_checkbox = require("@ark-ui/react/checkbox");
|
|
6
7
|
//#region src/Checkbox.tsx
|
|
7
8
|
/**
|
|
8
9
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -12,7 +13,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
12
13
|
*
|
|
13
14
|
*/
|
|
14
15
|
const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
|
|
15
|
-
slots:
|
|
16
|
+
slots: _ark_ui_react_checkbox.checkboxAnatomy.keys(),
|
|
16
17
|
base: {
|
|
17
18
|
root: {
|
|
18
19
|
userSelect: "none",
|
|
@@ -193,9 +194,9 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
|
|
|
193
194
|
}
|
|
194
195
|
} }
|
|
195
196
|
}));
|
|
196
|
-
const CheckboxRoot = withProvider(
|
|
197
|
-
const CheckboxIndicator = withContext(
|
|
198
|
-
const InternalCheckboxLabel = withContext(
|
|
197
|
+
const CheckboxRoot = withProvider(_ark_ui_react_checkbox.Checkbox.Root, "root", { baseComponent: true });
|
|
198
|
+
const CheckboxIndicator = withContext(_ark_ui_react_checkbox.Checkbox.Indicator, "indicator", { baseComponent: true });
|
|
199
|
+
const InternalCheckboxLabel = withContext(_ark_ui_react_checkbox.Checkbox.Label, "label");
|
|
199
200
|
const CheckboxLabel = ({ textStyle = "label.medium", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalCheckboxLabel, {
|
|
200
201
|
...props,
|
|
201
202
|
asChild: true,
|
|
@@ -204,9 +205,9 @@ const CheckboxLabel = ({ textStyle = "label.medium", children, ...props }) => /*
|
|
|
204
205
|
children
|
|
205
206
|
})
|
|
206
207
|
});
|
|
207
|
-
const CheckboxControl = withContext(
|
|
208
|
-
const CheckboxGroup = withProvider(
|
|
209
|
-
const CheckboxHiddenInput =
|
|
208
|
+
const CheckboxControl = withContext(_ark_ui_react_checkbox.Checkbox.Control, "control", { baseComponent: true });
|
|
209
|
+
const CheckboxGroup = withProvider(_ark_ui_react_checkbox.Checkbox.Group, "group", { baseComponent: true });
|
|
210
|
+
const CheckboxHiddenInput = _ark_ui_react_checkbox.Checkbox.HiddenInput;
|
|
210
211
|
//#endregion
|
|
211
212
|
exports.CheckboxControl = CheckboxControl;
|
|
212
213
|
exports.CheckboxGroup = CheckboxGroup;
|
package/lib/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["checkboxAnatomy","Checkbox","Text"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Checkbox, checkboxAnatomy, type HTMLArkProps } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst checkboxRecipe = sva({\n slots: checkboxAnatomy.keys(),\n base: {\n root: {\n userSelect: \"none\",\n display: \"flex\",\n alignItems: \"center\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _disabled: {\n color: \"text.disabled\",\n cursor: \"not-allowed\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n },\n group: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexDirection: \"column\",\n },\n control: {\n flexShrink: \"0\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n width: \"medium\",\n height: \"medium\",\n color: \"text.strong\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n cursor: \"not-allowed\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n defaultVariants: {\n variant: \"checkbox\",\n },\n variants: {\n variant: {\n checkbox: {\n root: {\n gap: \"xxsmall\",\n _hover: {\n color: \"text.action\",\n },\n _focusVisible: {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n control: {\n border: \"2px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n background: \"surface.default\",\n _hover: {\n boxShadow: \"0 0 0 4px var(--shadow-color)\",\n boxShadowColor: \"surface.actionSubtle.hover.strong\",\n },\n _checked: {\n backgroundColor: \"surface.action\",\n borderColor: \"surface.action\",\n color: \"icon.onAction\",\n },\n _disabled: {\n borderColor: \"stroke.disabled\",\n _hover: {\n borderColor: \"stroke.disabled\",\n boxShadow: \"none\",\n },\n _checked: {\n background: \"surface.disabled\",\n borderColor: \"stroke.disabled\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n _checked: {\n color: \"stroke.error\",\n borderColor: \"stroke.error\",\n backgroundColor: \"surface.default\",\n },\n },\n },\n },\n chip: {\n root: {\n width: \"fit-content\",\n color: \"text.default\",\n gap: \"4xsmall\",\n background: \"surface.actionSubtle\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n outlineColor: \"stroke.subtle\",\n paddingInline: \"xsmall\",\n paddingBlock: \"4xsmall\",\n borderRadius: \"large\",\n minHeight: \"large\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n _checked: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n },\n },\n _hover: {\n background: \"surface.actionSubtle.hover\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n _invalid: {\n backgroundColor: \"surface.dangerSubtle\",\n },\n },\n _checked: {\n color: \"text.onAction\",\n background: \"surface.action.selected\",\n borderColor: \"surface.action.selected\",\n outlineColor: \"icon.onAction\",\n _focus: {\n outlineOffset: \"-4px\",\n },\n _hover: {\n outlineOffset: \"-2px\",\n background: \"surface.actionSubtle.hover\",\n color: \"text.default\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _checked: {\n color: \"text.default\",\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _hover: {\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n },\n _focus: {\n outlineStyle: \"solid\",\n outlineWidth: \"2px\",\n outlineOffset: \"-2px\",\n },\n },\n control: {\n display: \"none\",\n _checked: {\n display: \"flex\",\n color: \"text.onAction\",\n _hover: {\n color: \"stroke.hover\",\n },\n },\n _disabled: {\n color: \"stroke.disabled\",\n _hover: {\n color: \"stroke.disabled\",\n },\n },\n _invalid: {\n _checked: {\n color: \"stroke.error\",\n },\n },\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(checkboxRecipe);\n\nexport type CheckboxVariantProps = NonNullable<RecipeVariantProps<typeof checkboxRecipe>>;\n\nexport interface CheckboxRootProps extends StyledProps, HTMLArkProps<\"label\">, CheckboxVariantProps {}\n\nexport const CheckboxRoot = withProvider(Checkbox.Root, \"root\", { baseComponent: true });\n\nexport const CheckboxIndicator = withContext(Checkbox.Indicator, \"indicator\", { baseComponent: true });\n\nconst InternalCheckboxLabel = withContext(Checkbox.Label, \"label\");\n\ninterface CheckboxLabelProps\n extends StyledProps, Omit<Checkbox.LabelProps, \"color\">, TextProps, RefAttributes<HTMLSpanElement> {}\n\nexport const CheckboxLabel = ({ textStyle = \"label.medium\", children, ...props }: CheckboxLabelProps) => (\n <InternalCheckboxLabel {...props} asChild>\n <Text textStyle={textStyle}>{children}</Text>\n </InternalCheckboxLabel>\n);\n\nexport const CheckboxControl = withContext(Checkbox.Control, \"control\", { baseComponent: true });\n\nexport const CheckboxGroup = withProvider(Checkbox.Group, \"group\", { baseComponent: true });\n\nexport const CheckboxHiddenInput = Checkbox.HiddenInput;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["checkboxAnatomy","Checkbox","Text"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Checkbox, checkboxAnatomy } from \"@ark-ui/react/checkbox\";\nimport { type HTMLArkProps } from \"@ark-ui/react/factory\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport type { RefAttributes } from \"react\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst checkboxRecipe = sva({\n slots: checkboxAnatomy.keys(),\n base: {\n root: {\n userSelect: \"none\",\n display: \"flex\",\n alignItems: \"center\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _disabled: {\n color: \"text.disabled\",\n cursor: \"not-allowed\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n },\n group: {\n display: \"flex\",\n gap: \"xxsmall\",\n flexDirection: \"column\",\n },\n control: {\n flexShrink: \"0\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n width: \"medium\",\n height: \"medium\",\n color: \"text.strong\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n cursor: \"not-allowed\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n defaultVariants: {\n variant: \"checkbox\",\n },\n variants: {\n variant: {\n checkbox: {\n root: {\n gap: \"xxsmall\",\n _hover: {\n color: \"text.action\",\n },\n _focusVisible: {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n control: {\n border: \"2px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n background: \"surface.default\",\n _hover: {\n boxShadow: \"0 0 0 4px var(--shadow-color)\",\n boxShadowColor: \"surface.actionSubtle.hover.strong\",\n },\n _checked: {\n backgroundColor: \"surface.action\",\n borderColor: \"surface.action\",\n color: \"icon.onAction\",\n },\n _disabled: {\n borderColor: \"stroke.disabled\",\n _hover: {\n borderColor: \"stroke.disabled\",\n boxShadow: \"none\",\n },\n _checked: {\n background: \"surface.disabled\",\n borderColor: \"stroke.disabled\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n _checked: {\n color: \"stroke.error\",\n borderColor: \"stroke.error\",\n backgroundColor: \"surface.default\",\n },\n },\n },\n },\n chip: {\n root: {\n width: \"fit-content\",\n color: \"text.default\",\n gap: \"4xsmall\",\n background: \"surface.actionSubtle\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n outlineColor: \"stroke.subtle\",\n paddingInline: \"xsmall\",\n paddingBlock: \"4xsmall\",\n borderRadius: \"large\",\n minHeight: \"large\",\n transitionDuration: \"normal\",\n transitionProperty: \"border-color, background, box-shadow, color\",\n transitionTimingFunction: \"default\",\n _disabled: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n _checked: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n _hover: {\n color: \"text.disabled\",\n borderColor: \"stroke.disabled\",\n background: \"surface.disabled\",\n },\n },\n },\n _hover: {\n background: \"surface.actionSubtle.hover\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n _invalid: {\n backgroundColor: \"surface.dangerSubtle\",\n },\n },\n _checked: {\n color: \"text.onAction\",\n background: \"surface.action.selected\",\n borderColor: \"surface.action.selected\",\n outlineColor: \"icon.onAction\",\n _focus: {\n outlineOffset: \"-4px\",\n },\n _hover: {\n outlineOffset: \"-2px\",\n background: \"surface.actionSubtle.hover\",\n color: \"text.default\",\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n _invalid: {\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _checked: {\n color: \"text.default\",\n borderColor: \"stroke.error\",\n outlineColor: \"stroke.error\",\n background: \"surface.dangerSubtle\",\n outlineOffset: \"-2px\",\n _hover: {\n borderColor: \"stroke.hover\",\n outlineColor: \"stroke.hover\",\n },\n },\n },\n _focus: {\n outlineStyle: \"solid\",\n outlineWidth: \"2px\",\n outlineOffset: \"-2px\",\n },\n },\n control: {\n display: \"none\",\n _checked: {\n display: \"flex\",\n color: \"text.onAction\",\n _hover: {\n color: \"stroke.hover\",\n },\n },\n _disabled: {\n color: \"stroke.disabled\",\n _hover: {\n color: \"stroke.disabled\",\n },\n },\n _invalid: {\n _checked: {\n color: \"stroke.error\",\n },\n },\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(checkboxRecipe);\n\nexport type CheckboxVariantProps = NonNullable<RecipeVariantProps<typeof checkboxRecipe>>;\n\nexport interface CheckboxRootProps extends StyledProps, HTMLArkProps<\"label\">, CheckboxVariantProps {}\n\nexport const CheckboxRoot = withProvider(Checkbox.Root, \"root\", { baseComponent: true });\n\nexport const CheckboxIndicator = withContext(Checkbox.Indicator, \"indicator\", { baseComponent: true });\n\nconst InternalCheckboxLabel = withContext(Checkbox.Label, \"label\");\n\ninterface CheckboxLabelProps\n extends StyledProps, Omit<Checkbox.LabelProps, \"color\">, TextProps, RefAttributes<HTMLSpanElement> {}\n\nexport const CheckboxLabel = ({ textStyle = \"label.medium\", children, ...props }: CheckboxLabelProps) => (\n <InternalCheckboxLabel {...props} asChild>\n <Text textStyle={textStyle}>{children}</Text>\n </InternalCheckboxLabel>\n);\n\nexport const CheckboxControl = withContext(Checkbox.Control, \"control\", { baseComponent: true });\n\nexport const CheckboxGroup = withProvider(Checkbox.Group, \"group\", { baseComponent: true });\n\nexport const CheckboxHiddenInput = Checkbox.HiddenInput;\n"],"mappings":"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"}
|
package/lib/Combobox.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import { Combobox } from "@ark-ui/react";
|
|
8
|
+
import { Combobox } from "@ark-ui/react/combobox";
|
|
9
9
|
import type { RecipeVariantProps, StyledProps } from "@ndla/styled-system/types";
|
|
10
10
|
import { type RefAttributes } from "react";
|
|
11
11
|
import { type TextProps } from "./Text";
|
package/lib/Combobox.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
const require_Text = require("./Text.js");
|
|
2
2
|
const require_Label = require("./Label.js");
|
|
3
|
-
let _ark_ui_react = require("@ark-ui/react");
|
|
4
3
|
let _ndla_styled_system_css = require("@ndla/styled-system/css");
|
|
5
4
|
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
6
5
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
6
|
let react = require("react");
|
|
7
|
+
let _ark_ui_react_combobox = require("@ark-ui/react/combobox");
|
|
8
8
|
//#region src/Combobox.tsx
|
|
9
9
|
/**
|
|
10
10
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -14,7 +14,7 @@ let react = require("react");
|
|
|
14
14
|
*
|
|
15
15
|
*/
|
|
16
16
|
const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
|
|
17
|
-
slots:
|
|
17
|
+
slots: _ark_ui_react_combobox.comboboxAnatomy.keys(),
|
|
18
18
|
base: {
|
|
19
19
|
root: {
|
|
20
20
|
display: "flex",
|
|
@@ -117,7 +117,7 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
|
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
}));
|
|
120
|
-
const InternalComboboxRoot = withProvider(
|
|
120
|
+
const InternalComboboxRoot = withProvider(_ark_ui_react_combobox.Combobox.Root, "root", { baseComponent: true });
|
|
121
121
|
const ComboboxRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => {
|
|
122
122
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxRoot, {
|
|
123
123
|
lazyMount,
|
|
@@ -125,15 +125,15 @@ const ComboboxRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => {
|
|
|
125
125
|
...props
|
|
126
126
|
});
|
|
127
127
|
};
|
|
128
|
-
const ComboboxClearTrigger = withContext(
|
|
129
|
-
const ComboboxContentStandalone = withContext(
|
|
128
|
+
const ComboboxClearTrigger = withContext(_ark_ui_react_combobox.Combobox.ClearTrigger, "clearTrigger", { baseComponent: true });
|
|
129
|
+
const ComboboxContentStandalone = withContext(_ark_ui_react_combobox.Combobox.Content, "content", { baseComponent: true });
|
|
130
130
|
const ComboboxContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxContentStandalone, {
|
|
131
131
|
ref,
|
|
132
132
|
...props
|
|
133
133
|
}) }));
|
|
134
|
-
const ComboboxControl = withContext(
|
|
135
|
-
const ComboboxInput = withContext(
|
|
136
|
-
const InternalComboboxItemGroupLabel = withContext(
|
|
134
|
+
const ComboboxControl = withContext(_ark_ui_react_combobox.Combobox.Control, "control", { baseComponent: true });
|
|
135
|
+
const ComboboxInput = withContext(_ark_ui_react_combobox.Combobox.Input, "input", { baseComponent: true });
|
|
136
|
+
const InternalComboboxItemGroupLabel = withContext(_ark_ui_react_combobox.Combobox.ItemGroupLabel, "itemGroupLabel");
|
|
137
137
|
const ComboboxItemGroupLabel = ({ children, textStyle = "label.small", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxItemGroupLabel, {
|
|
138
138
|
asChild: true,
|
|
139
139
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
|
|
@@ -145,10 +145,10 @@ const ComboboxItemGroupLabel = ({ children, textStyle = "label.small", fontWeigh
|
|
|
145
145
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
|
|
146
146
|
})
|
|
147
147
|
});
|
|
148
|
-
const ComboboxItemGroup = withContext(
|
|
149
|
-
const ComboboxItemIndicator = withContext(
|
|
150
|
-
const ComboboxItem = withContext(
|
|
151
|
-
const InternalComboboxItemText = withContext(
|
|
148
|
+
const ComboboxItemGroup = withContext(_ark_ui_react_combobox.Combobox.ItemGroup, "itemGroup", { baseComponent: true });
|
|
149
|
+
const ComboboxItemIndicator = withContext(_ark_ui_react_combobox.Combobox.ItemIndicator, "itemIndicator", { baseComponent: true });
|
|
150
|
+
const ComboboxItem = withContext(_ark_ui_react_combobox.Combobox.Item, "item", { baseComponent: true });
|
|
151
|
+
const InternalComboboxItemText = withContext(_ark_ui_react_combobox.Combobox.ItemText, "itemText");
|
|
152
152
|
const ComboboxItemText = ({ textStyle = "label.medium", fontWeight = "bold", children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxItemText, {
|
|
153
153
|
asChild: true,
|
|
154
154
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
|
|
@@ -160,7 +160,7 @@ const ComboboxItemText = ({ textStyle = "label.medium", fontWeight = "bold", chi
|
|
|
160
160
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children })
|
|
161
161
|
})
|
|
162
162
|
});
|
|
163
|
-
const InternalComboboxLabel = withContext(
|
|
163
|
+
const InternalComboboxLabel = withContext(_ark_ui_react_combobox.Combobox.Label, "label");
|
|
164
164
|
const ComboboxLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalComboboxLabel, {
|
|
165
165
|
asChild: true,
|
|
166
166
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, {
|
|
@@ -169,9 +169,9 @@ const ComboboxLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...pro
|
|
|
169
169
|
...props
|
|
170
170
|
})
|
|
171
171
|
});
|
|
172
|
-
const ComboboxPositioner = withContext(
|
|
173
|
-
const ComboboxTrigger = withContext(
|
|
174
|
-
const ComboboxList = withContext(
|
|
172
|
+
const ComboboxPositioner = withContext(_ark_ui_react_combobox.Combobox.Positioner, "positioner", { baseComponent: true });
|
|
173
|
+
const ComboboxTrigger = withContext(_ark_ui_react_combobox.Combobox.Trigger, "trigger", { baseComponent: true });
|
|
174
|
+
const ComboboxList = withContext(_ark_ui_react_combobox.Combobox.List, "list", { baseComponent: true });
|
|
175
175
|
//#endregion
|
|
176
176
|
exports.ComboboxClearTrigger = ComboboxClearTrigger;
|
|
177
177
|
exports.ComboboxContent = ComboboxContent;
|
package/lib/Combobox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.js","names":["comboboxAnatomy","Combobox","Text","Label"],"sources":["../src/Combobox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Combobox, comboboxAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n slots: comboboxAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"4xsmall\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, border-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled\",\n color: \"text.disabled\",\n },\n },\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _checked: {\n background: \"surface.selected\",\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n },\n trigger: {\n \"& svg\": {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n itemIndicator: {\n color: \"stroke.default\",\n },\n itemText: {\n _checked: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n },\n defaultVariants: {\n context: \"standalone\",\n variant: \"simple\",\n },\n variants: {\n context: {\n standalone: {\n content: {\n boxShadow: \"large\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n },\n composite: {},\n },\n variant: {\n simple: {\n item: {\n padding: \"xsmall\",\n borderRadius: \"xsmall\",\n },\n content: {\n gap: \"4xsmall\",\n },\n },\n complex: {},\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n extends StyledProps, Combobox.RootProps<T>, ComboboxVariantProps, RefAttributes<HTMLDivElement> {\n translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n Combobox.Root,\n \"root\",\n { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: ComboboxRootProps<T>) => {\n return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n <ComboboxPositioner>\n <ComboboxContentStandalone ref={ref} {...props} />\n </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n extends Omit<Combobox.ItemGroupLabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n children,\n textStyle = \"label.small\",\n fontWeight = \"bold\",\n ...props\n}: ComboboxItemGroupLabelProps) => (\n <InternalComboboxItemGroupLabel asChild>\n <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: ComboboxItemTextProps) => (\n <InternalComboboxItemText asChild>\n <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n <InternalComboboxLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Combobox.js","names":["comboboxAnatomy","Combobox","Text","Label"],"sources":["../src/Combobox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Combobox, comboboxAnatomy } from \"@ark-ui/react/combobox\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n slots: comboboxAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"4xsmall\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, border-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled\",\n color: \"text.disabled\",\n },\n },\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _checked: {\n background: \"surface.selected\",\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n },\n trigger: {\n \"& svg\": {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n itemIndicator: {\n color: \"stroke.default\",\n },\n itemText: {\n _checked: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n },\n defaultVariants: {\n context: \"standalone\",\n variant: \"simple\",\n },\n variants: {\n context: {\n standalone: {\n content: {\n boxShadow: \"large\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n },\n composite: {},\n },\n variant: {\n simple: {\n item: {\n padding: \"xsmall\",\n borderRadius: \"xsmall\",\n },\n content: {\n gap: \"4xsmall\",\n },\n },\n complex: {},\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n extends StyledProps, Combobox.RootProps<T>, ComboboxVariantProps, RefAttributes<HTMLDivElement> {\n translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n Combobox.Root,\n \"root\",\n { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: ComboboxRootProps<T>) => {\n return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n <ComboboxPositioner>\n <ComboboxContentStandalone ref={ref} {...props} />\n </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n extends Omit<Combobox.ItemGroupLabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n children,\n textStyle = \"label.small\",\n fontWeight = \"bold\",\n ...props\n}: ComboboxItemGroupLabelProps) => (\n <InternalComboboxItemGroupLabel asChild>\n <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: ComboboxItemTextProps) => (\n <InternalComboboxItemText asChild>\n <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n <InternalComboboxLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}
|
package/lib/DatePicker.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import { DatePicker } from "@ark-ui/react";
|
|
8
|
+
import { DatePicker } from "@ark-ui/react/date-picker";
|
|
9
9
|
import { type StyledProps } from "@ndla/styled-system/jsx";
|
|
10
10
|
import { type RefAttributes } from "react";
|
|
11
11
|
import type { TextProps } from "./Text";
|
|
@@ -42,4 +42,4 @@ export declare const DatePickerViewControl: import("@ndla/styled-system/jsx").St
|
|
|
42
42
|
export declare const DatePickerView: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.ViewProps & RefAttributes<HTMLDivElement>>>;
|
|
43
43
|
export declare const DatePickerViewTrigger: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.ViewTriggerProps & RefAttributes<HTMLButtonElement>>>;
|
|
44
44
|
export declare const DatePickerYearSelect: import("@ndla/styled-system/jsx").StyleContextConsumer<import("react").ForwardRefExoticComponent<DatePicker.YearSelectProps & RefAttributes<HTMLSelectElement>>>;
|
|
45
|
-
export { DatePickerContext } from "@ark-ui/react";
|
|
45
|
+
export { DatePickerContext } from "@ark-ui/react/date-picker";
|
package/lib/DatePicker.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
const require_Label = require("./Label.js");
|
|
2
|
-
let _ark_ui_react = require("@ark-ui/react");
|
|
3
2
|
let _ndla_styled_system_css = require("@ndla/styled-system/css");
|
|
4
3
|
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
5
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
5
|
let react = require("react");
|
|
6
|
+
let _ark_ui_react_date_picker = require("@ark-ui/react/date-picker");
|
|
7
7
|
//#region src/DatePicker.tsx
|
|
8
8
|
/**
|
|
9
9
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -13,7 +13,7 @@ let react = require("react");
|
|
|
13
13
|
*
|
|
14
14
|
*/
|
|
15
15
|
const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
|
|
16
|
-
slots:
|
|
16
|
+
slots: _ark_ui_react_date_picker.datePickerAnatomy.keys(),
|
|
17
17
|
base: {
|
|
18
18
|
root: {
|
|
19
19
|
display: "flex",
|
|
@@ -71,16 +71,16 @@ const { withProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleCon
|
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
}));
|
|
74
|
-
const DatePickerRoot = withProvider(
|
|
75
|
-
const DatePickerClearTrigger = withContext(
|
|
74
|
+
const DatePickerRoot = withProvider(_ark_ui_react_date_picker.DatePicker.Root, "root", { baseComponent: true });
|
|
75
|
+
const DatePickerClearTrigger = withContext(_ark_ui_react_date_picker.DatePicker.ClearTrigger, "clearTrigger", { baseComponent: true });
|
|
76
76
|
const DatePickerContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DatePickerStandaloneContent, {
|
|
77
77
|
...props,
|
|
78
78
|
ref
|
|
79
79
|
}) }));
|
|
80
|
-
const DatePickerStandaloneContent = withContext(
|
|
81
|
-
const DatePickerControl = withContext(
|
|
82
|
-
const DatePickerInput = withContext(
|
|
83
|
-
const InternalDatePickerLabel = withContext(
|
|
80
|
+
const DatePickerStandaloneContent = withContext(_ark_ui_react_date_picker.DatePicker.Content, "content", { baseComponent: true });
|
|
81
|
+
const DatePickerControl = withContext(_ark_ui_react_date_picker.DatePicker.Control, "control", { baseComponent: true });
|
|
82
|
+
const DatePickerInput = withContext(_ark_ui_react_date_picker.DatePicker.Input, "input", { baseComponent: true });
|
|
83
|
+
const InternalDatePickerLabel = withContext(_ark_ui_react_date_picker.DatePicker.Label, "label");
|
|
84
84
|
const DatePickerLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDatePickerLabel, {
|
|
85
85
|
asChild: true,
|
|
86
86
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Label.Label, {
|
|
@@ -89,24 +89,24 @@ const DatePickerLabel = ({ textStyle = "label.medium", fontWeight = "bold", ...p
|
|
|
89
89
|
...props
|
|
90
90
|
})
|
|
91
91
|
});
|
|
92
|
-
const DatePickerMonthSelect = withContext(
|
|
93
|
-
const DatePickerNextTrigger = withContext(
|
|
94
|
-
const DatePickerPositioner = withContext(
|
|
95
|
-
const DatePickerPresetTrigger = withContext(
|
|
96
|
-
const DatePickerPrevTrigger = withContext(
|
|
97
|
-
const DatePickerRangeText = withContext(
|
|
98
|
-
const DatePickerTableBody = withContext(
|
|
99
|
-
const DatePickerTableCell = withContext(
|
|
100
|
-
const DatePickerTableCellTrigger = withContext(
|
|
101
|
-
const DatePickerTableHead = withContext(
|
|
102
|
-
const DatePickerTableHeader = withContext(
|
|
103
|
-
const DatePickerTable = withContext(
|
|
104
|
-
const DatePickerTableRow = withContext(
|
|
105
|
-
const DatePickerTrigger = withContext(
|
|
106
|
-
const DatePickerViewControl = withContext(
|
|
107
|
-
const DatePickerView = withContext(
|
|
108
|
-
const DatePickerViewTrigger = withContext(
|
|
109
|
-
const DatePickerYearSelect = withContext(
|
|
92
|
+
const DatePickerMonthSelect = withContext(_ark_ui_react_date_picker.DatePicker.MonthSelect, "monthSelect", { baseComponent: true });
|
|
93
|
+
const DatePickerNextTrigger = withContext(_ark_ui_react_date_picker.DatePicker.NextTrigger, "nextTrigger", { baseComponent: true });
|
|
94
|
+
const DatePickerPositioner = withContext(_ark_ui_react_date_picker.DatePicker.Positioner, "positioner", { baseComponent: true });
|
|
95
|
+
const DatePickerPresetTrigger = withContext(_ark_ui_react_date_picker.DatePicker.PresetTrigger, "presetTrigger", { baseComponent: true });
|
|
96
|
+
const DatePickerPrevTrigger = withContext(_ark_ui_react_date_picker.DatePicker.PrevTrigger, "prevTrigger", { baseComponent: true });
|
|
97
|
+
const DatePickerRangeText = withContext(_ark_ui_react_date_picker.DatePicker.RangeText, "rangeText", { baseComponent: true });
|
|
98
|
+
const DatePickerTableBody = withContext(_ark_ui_react_date_picker.DatePicker.TableBody, "tableBody", { baseComponent: true });
|
|
99
|
+
const DatePickerTableCell = withContext(_ark_ui_react_date_picker.DatePicker.TableCell, "tableCell", { baseComponent: true });
|
|
100
|
+
const DatePickerTableCellTrigger = withContext(_ark_ui_react_date_picker.DatePicker.TableCellTrigger, "tableCellTrigger", { baseComponent: true });
|
|
101
|
+
const DatePickerTableHead = withContext(_ark_ui_react_date_picker.DatePicker.TableHead, "tableHead", { baseComponent: true });
|
|
102
|
+
const DatePickerTableHeader = withContext(_ark_ui_react_date_picker.DatePicker.TableHeader, "tableHeader", { baseComponent: true });
|
|
103
|
+
const DatePickerTable = withContext(_ark_ui_react_date_picker.DatePicker.Table, "table", { baseComponent: true });
|
|
104
|
+
const DatePickerTableRow = withContext(_ark_ui_react_date_picker.DatePicker.TableRow, "tableRow", { baseComponent: true });
|
|
105
|
+
const DatePickerTrigger = withContext(_ark_ui_react_date_picker.DatePicker.Trigger, "trigger", { baseComponent: true });
|
|
106
|
+
const DatePickerViewControl = withContext(_ark_ui_react_date_picker.DatePicker.ViewControl, "viewControl", { baseComponent: true });
|
|
107
|
+
const DatePickerView = withContext(_ark_ui_react_date_picker.DatePicker.View, "view", { baseComponent: true });
|
|
108
|
+
const DatePickerViewTrigger = withContext(_ark_ui_react_date_picker.DatePicker.ViewTrigger, "viewTrigger", { baseComponent: true });
|
|
109
|
+
const DatePickerYearSelect = withContext(_ark_ui_react_date_picker.DatePicker.YearSelect, "yearSelect", { baseComponent: true });
|
|
110
110
|
//#endregion
|
|
111
111
|
exports.DatePickerClearTrigger = DatePickerClearTrigger;
|
|
112
112
|
exports.DatePickerContent = DatePickerContent;
|
package/lib/DatePicker.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","names":["datePickerAnatomy","DatePicker","Label"],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n slots: datePickerAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n content: {\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n zIndex: \"dropdown\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-in-out\",\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-in-out\",\n },\n },\n control: {\n display: \"flex\",\n width: \"fit-content\",\n gap: \"xsmall\",\n },\n label: {},\n tableHeader: {},\n viewControl: {\n display: \"flex\",\n gap: \"5xsmall\",\n justifyContent: \"space-between\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: \"5xsmall\",\n margin: \"-5xsmall\",\n },\n tableCell: {\n textAlign: \"center\",\n },\n tableCellTrigger: {\n width: \"100%\",\n \"&[data-today]\": {\n _before: {\n content: \"'-'\",\n color: \"stroke.default\",\n position: \"absolute\",\n marginBlockStart: \"medium\",\n },\n },\n \"&[data-outside-range]\": {\n color: \"text.subtle\",\n fontWeight: \"normal\",\n },\n },\n view: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n translations: DatePicker.RootProps[\"translations\"];\n locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n <DatePickerPositioner>\n <DatePickerStandaloneContent {...props} ref={ref} />\n </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n ...props\n}: DatePickerLabelProps) => (\n <InternalDatePickerLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react\";\n"],"mappings":";;;;;;;;;;;;;;AAkFA,MAAM,EAAE,cAAc,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KAnEO;CAC3B,OAAOA,
|
|
1
|
+
{"version":3,"file":"DatePicker.js","names":["datePickerAnatomy","DatePicker","Label"],"sources":["../src/DatePicker.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react/date-picker\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n slots: datePickerAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n content: {\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n zIndex: \"dropdown\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-in-out\",\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-in-out\",\n },\n },\n control: {\n display: \"flex\",\n width: \"fit-content\",\n gap: \"xsmall\",\n },\n label: {},\n tableHeader: {},\n viewControl: {\n display: \"flex\",\n gap: \"5xsmall\",\n justifyContent: \"space-between\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: \"5xsmall\",\n margin: \"-5xsmall\",\n },\n tableCell: {\n textAlign: \"center\",\n },\n tableCellTrigger: {\n width: \"100%\",\n \"&[data-today]\": {\n _before: {\n content: \"'-'\",\n color: \"stroke.default\",\n position: \"absolute\",\n marginBlockStart: \"medium\",\n },\n },\n \"&[data-outside-range]\": {\n color: \"text.subtle\",\n fontWeight: \"normal\",\n },\n },\n view: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n translations: DatePicker.RootProps[\"translations\"];\n locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n <DatePickerPositioner>\n <DatePickerStandaloneContent {...props} ref={ref} />\n </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n ...props\n}: DatePickerLabelProps) => (\n <InternalDatePickerLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react/date-picker\";\n"],"mappings":"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"}
|
package/lib/Dialog.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
|
-
import { Dialog } from "@ark-ui/react";
|
|
8
|
+
import { Dialog } from "@ark-ui/react/dialog";
|
|
9
9
|
import { type RecipeVariantProps } from "@ndla/styled-system/css";
|
|
10
10
|
import type { StyledProps } from "@ndla/styled-system/types";
|
|
11
11
|
import { type RefAttributes } from "react";
|
|
@@ -334,5 +334,5 @@ export declare const DialogRootProvider: import("@ndla/styled-system/jsx").Style
|
|
|
334
334
|
};
|
|
335
335
|
};
|
|
336
336
|
}>>;
|
|
337
|
-
export declare const useDialog: (props?: import("@ark-ui/react").UseDialogProps) => import("@ark-ui/react").UseDialogReturn;
|
|
337
|
+
export declare const useDialog: (props?: import("@ark-ui/react/dialog").UseDialogProps) => import("@ark-ui/react/dialog").UseDialogReturn;
|
|
338
338
|
export {};
|
package/lib/Dialog.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
const require_Text = require("./Text.js");
|
|
2
|
-
let _ark_ui_react = require("@ark-ui/react");
|
|
3
2
|
let _ndla_styled_system_css = require("@ndla/styled-system/css");
|
|
4
3
|
let _ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
5
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
6
5
|
let react = require("react");
|
|
6
|
+
let _ark_ui_react_dialog = require("@ark-ui/react/dialog");
|
|
7
7
|
//#region src/Dialog.tsx
|
|
8
8
|
/**
|
|
9
9
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -13,7 +13,7 @@ let react = require("react");
|
|
|
13
13
|
*
|
|
14
14
|
*/
|
|
15
15
|
const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyleContext)((0, _ndla_styled_system_css.sva)({
|
|
16
|
-
slots:
|
|
16
|
+
slots: _ark_ui_react_dialog.dialogAnatomy.keys(),
|
|
17
17
|
base: {
|
|
18
18
|
backdrop: {
|
|
19
19
|
position: "fixed",
|
|
@@ -215,20 +215,20 @@ const { withRootProvider, withContext } = (0, _ndla_styled_system_jsx.createStyl
|
|
|
215
215
|
}
|
|
216
216
|
}
|
|
217
217
|
}));
|
|
218
|
-
const InternalDialogRoot = withRootProvider(
|
|
218
|
+
const InternalDialogRoot = withRootProvider(_ark_ui_react_dialog.Dialog.Root);
|
|
219
219
|
const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogRoot, {
|
|
220
220
|
lazyMount,
|
|
221
221
|
unmountOnExit,
|
|
222
222
|
...props
|
|
223
223
|
});
|
|
224
|
-
const DialogBackdrop = withContext(
|
|
225
|
-
const DialogStandaloneContent = withContext(
|
|
226
|
-
const DialogPositioner = withContext(
|
|
224
|
+
const DialogBackdrop = withContext(_ark_ui_react_dialog.Dialog.Backdrop, "backdrop", { baseComponent: true });
|
|
225
|
+
const DialogStandaloneContent = withContext(_ark_ui_react_dialog.Dialog.Content, "content", { baseComponent: true });
|
|
226
|
+
const DialogPositioner = withContext(_ark_ui_react_dialog.Dialog.Positioner, "positioner", { baseComponent: true });
|
|
227
227
|
const DialogContent = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogBackdrop, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogPositioner, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogStandaloneContent, {
|
|
228
228
|
ref,
|
|
229
229
|
...props
|
|
230
230
|
}) })] }));
|
|
231
|
-
const InternalDialogDescription = withContext(
|
|
231
|
+
const InternalDialogDescription = withContext(_ark_ui_react_dialog.Dialog.Description, "description");
|
|
232
232
|
const DialogDescription = ({ textStyle = "body.large", children, ...rest }) => {
|
|
233
233
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogDescription, {
|
|
234
234
|
asChild: true,
|
|
@@ -239,7 +239,7 @@ const DialogDescription = ({ textStyle = "body.large", children, ...rest }) => {
|
|
|
239
239
|
})
|
|
240
240
|
});
|
|
241
241
|
};
|
|
242
|
-
const InternalDialogTitle = withContext(
|
|
242
|
+
const InternalDialogTitle = withContext(_ark_ui_react_dialog.Dialog.Title, "title");
|
|
243
243
|
const DialogTitle = ({ textStyle = "title.medium", children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InternalDialogTitle, {
|
|
244
244
|
asChild: true,
|
|
245
245
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Heading, {
|
|
@@ -248,8 +248,8 @@ const DialogTitle = ({ textStyle = "title.medium", children, ...rest }) => /* @_
|
|
|
248
248
|
children
|
|
249
249
|
})
|
|
250
250
|
});
|
|
251
|
-
const DialogTrigger = withContext(
|
|
252
|
-
const DialogCloseTrigger = withContext(
|
|
251
|
+
const DialogTrigger = withContext(_ark_ui_react_dialog.Dialog.Trigger, "trigger", { baseComponent: true });
|
|
252
|
+
const DialogCloseTrigger = withContext(_ark_ui_react_dialog.Dialog.CloseTrigger, "closeTrigger", { baseComponent: true });
|
|
253
253
|
const DialogHeader = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
254
254
|
display: "flex",
|
|
255
255
|
paddingInline: "medium",
|
|
@@ -275,8 +275,8 @@ const DialogFooter = (0, _ndla_styled_system_jsx.styled)("div", { base: {
|
|
|
275
275
|
paddingBlockStart: "small",
|
|
276
276
|
paddingBlockEnd: "medium"
|
|
277
277
|
} });
|
|
278
|
-
const DialogRootProvider = withRootProvider(
|
|
279
|
-
const useDialog =
|
|
278
|
+
const DialogRootProvider = withRootProvider(_ark_ui_react_dialog.Dialog.RootProvider);
|
|
279
|
+
const useDialog = _ark_ui_react_dialog.useDialog;
|
|
280
280
|
//#endregion
|
|
281
281
|
exports.DialogBackdrop = DialogBackdrop;
|
|
282
282
|
exports.DialogBody = DialogBody;
|
package/lib/Dialog.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","names":["dialogAnatomy","Dialog","Text","Heading","_useDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n slots: dialogAnatomy.keys(),\n base: {\n backdrop: {\n position: \"fixed\",\n height: \"100vh\",\n width: \"100vw\",\n left: \"0\",\n top: \"0\",\n // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n background: \"rgba(1, 1, 1, 0.3)\",\n _open: {\n animation: \"backdrop-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"backdrop-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n positioner: {\n position: \"fixed\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n left: \"0\",\n top: \"0\",\n width: \"100vw\",\n height: \"100dvh\",\n },\n content: {\n \"--margin\": \"token(sizes.medium)\",\n position: \"relative\",\n background: \"surface.default\",\n boxShadow: \"xlarge\",\n height: \"min-content\",\n maxWidth: \"95%\",\n maxHeight: \"95%\",\n margin: \"auto\",\n overflowY: \"auto\",\n borderRadius: { base: \"sharp\", tablet: \"small\" },\n paddingBlockStart: \"env(safe-area-inset-top)\",\n paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n paddingInlineStart: \"env(safe-area-inset-left)\",\n paddingInlineEnd: \"env(safe-area-inset-right)\",\n tabletDown: {\n \"--margin\": \"0px\",\n minWidth: \"100%\",\n minHeight: \"100%\",\n },\n },\n },\n defaultVariants: {\n size: \"medium\",\n position: \"center\",\n variant: \"dialog\",\n context: \"dialog\",\n },\n compoundVariants: [\n {\n variant: \"drawer\",\n position: \"left\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"right\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"top\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"bottom\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"xsmall\",\n css: {\n content: {\n \"--size\": \"sizes.surface.3xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"small\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"medium\",\n css: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"large\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n },\n ],\n variants: {\n context: {\n dialog: {\n positioner: {\n zIndex: \"modal\",\n },\n backdrop: {\n zIndex: \"overlay\",\n },\n },\n alert: {\n positioner: {\n zIndex: \"alertModal\",\n },\n backdrop: {\n zIndex: \"alertModalOverlay\",\n },\n },\n },\n variant: {\n drawer: {\n content: {\n \"--margin\": \"0px\",\n borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n },\n },\n dialog: {\n content: {\n width: \"var(--size)\",\n _open: {\n animation: \"dialog-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"dialog-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n position: {\n left: {\n content: {\n marginInlineStart: \"var(--margin)\",\n },\n },\n center: {},\n right: {\n content: {\n marginInlineEnd: \"var(--margin)\",\n },\n },\n bottom: {\n content: {\n marginBlockEnd: \"var(--margin)\",\n },\n },\n top: {\n content: {\n marginBlockStart: \"var(--margin)\",\n },\n },\n },\n size: {\n full: {\n content: {\n \"--margin\": \"0px\",\n minHeight: \"100%\",\n minWidth: \"100%\",\n borderRadius: \"sharp\",\n },\n },\n xsmall: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n small: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n medium: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n large: {\n content: {\n \"--size\": \"sizes.surface.4xlarge\",\n },\n },\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n <>\n <DialogBackdrop />\n <DialogPositioner>\n <DialogStandaloneContent ref={ref} {...props} />\n </DialogPositioner>\n </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n return (\n <InternalDialogDescription asChild>\n <Text textStyle={textStyle} {...rest}>\n {children}\n </Text>\n </InternalDialogDescription>\n );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n <InternalDialogTitle asChild>\n <Heading textStyle={textStyle} {...rest}>\n {children}\n </Heading>\n </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n base: {\n display: \"flex\",\n paddingInline: \"medium\",\n paddingBlockStart: \"medium\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"xsmall\",\n },\n});\n\nexport const DialogBody = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogFooter = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KArSD;CACvB,OAAOA,cAAAA,cAAc,MAAM;CAC3B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;GACT;EACD,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;IAAS;GAChD,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;IACZ;GACF;EACF;CACD,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;EACV;CACD,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACD;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACX,EACF;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,SACT;IACD,UAAU,EACR,QAAQ,WACT;IACF;GACD,OAAO;IACL,YAAY,EACV,QAAQ,cACT;IACD,UAAU,EACR,QAAQ,qBACT;IACF;GACF;EACD,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;KAAS;IACjD,EACF;GACD,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACD,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,QACZ;KACF;IACF,EACF;GACF;EACD,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,iBACpB,EACF;GACD,QAAQ,EAAE;GACV,OAAO,EACL,SAAS,EACP,iBAAiB,iBAClB,EACF;GACD,QAAQ,EACN,SAAS,EACP,gBAAgB,iBACjB,EACF;GACD,KAAK,EACH,SAAS,EACP,kBAAkB,iBACnB,EACF;GACF;EACD,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;IACf,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,wBACX,EACF;GACD,QAAQ,EACN,SAAS,EACP,UAAU,wBACX,EACF;GACD,OAAO,EACL,SAAS,EACP,UAAU,yBACX,EACF;GACF;EACF;CACF,CAEwE,CAAC;AAM1E,MAAa,qBAAqB,iBAAiBC,cAAAA,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;CAAS,CAAA;AAGvF,MAAa,iBAAiB,YAAYA,cAAAA,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAYA,cAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAYA,cAAAA,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,iBAAA,GAAA,MAAA,aAAgE,OAAO,QAClF,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD,EAAkB,CAAA,EAClB,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAA8B;CAAK,GAAI;CAAS,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAEF,MAAM,4BAA4B,YAAYA,cAAAA,OAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,iBAAA,GAAA,kBAAA,KAAC,2BAAD;EAA2B,SAAA;YACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAiB;GAAW,GAAI;GAC7B;GACI,CAAA;EACmB,CAAA;;AAIhC,MAAM,sBAAsB,YAAYD,cAAAA,OAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;WACnB,iBAAA,GAAA,kBAAA,KAACE,aAAAA,SAAD;EAAoB;EAAW,GAAI;EAChC;EACO,CAAA;CACU,CAAA;AAGxB,MAAa,gBAAgB,YAAYF,cAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAYA,cAAAA,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,cAAA,GAAA,wBAAA,QAAoB,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiBA,cAAAA,OAAO,aAAa;AAEvE,MAAa,YAAYG,cAAAA"}
|
|
1
|
+
{"version":3,"file":"Dialog.js","names":["dialogAnatomy","Dialog","Text","Heading","_useDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react/dialog\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n slots: dialogAnatomy.keys(),\n base: {\n backdrop: {\n position: \"fixed\",\n height: \"100vh\",\n width: \"100vw\",\n left: \"0\",\n top: \"0\",\n // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n background: \"rgba(1, 1, 1, 0.3)\",\n _open: {\n animation: \"backdrop-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"backdrop-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n positioner: {\n position: \"fixed\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n left: \"0\",\n top: \"0\",\n width: \"100vw\",\n height: \"100dvh\",\n },\n content: {\n \"--margin\": \"token(sizes.medium)\",\n position: \"relative\",\n background: \"surface.default\",\n boxShadow: \"xlarge\",\n height: \"min-content\",\n maxWidth: \"95%\",\n maxHeight: \"95%\",\n margin: \"auto\",\n overflowY: \"auto\",\n borderRadius: { base: \"sharp\", tablet: \"small\" },\n paddingBlockStart: \"env(safe-area-inset-top)\",\n paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n paddingInlineStart: \"env(safe-area-inset-left)\",\n paddingInlineEnd: \"env(safe-area-inset-right)\",\n tabletDown: {\n \"--margin\": \"0px\",\n minWidth: \"100%\",\n minHeight: \"100%\",\n },\n },\n },\n defaultVariants: {\n size: \"medium\",\n position: \"center\",\n variant: \"dialog\",\n context: \"dialog\",\n },\n compoundVariants: [\n {\n variant: \"drawer\",\n position: \"left\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"right\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"top\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"bottom\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"xsmall\",\n css: {\n content: {\n \"--size\": \"sizes.surface.3xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"small\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"medium\",\n css: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"large\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n },\n ],\n variants: {\n context: {\n dialog: {\n positioner: {\n zIndex: \"modal\",\n },\n backdrop: {\n zIndex: \"overlay\",\n },\n },\n alert: {\n positioner: {\n zIndex: \"alertModal\",\n },\n backdrop: {\n zIndex: \"alertModalOverlay\",\n },\n },\n },\n variant: {\n drawer: {\n content: {\n \"--margin\": \"0px\",\n borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n },\n },\n dialog: {\n content: {\n width: \"var(--size)\",\n _open: {\n animation: \"dialog-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"dialog-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n position: {\n left: {\n content: {\n marginInlineStart: \"var(--margin)\",\n },\n },\n center: {},\n right: {\n content: {\n marginInlineEnd: \"var(--margin)\",\n },\n },\n bottom: {\n content: {\n marginBlockEnd: \"var(--margin)\",\n },\n },\n top: {\n content: {\n marginBlockStart: \"var(--margin)\",\n },\n },\n },\n size: {\n full: {\n content: {\n \"--margin\": \"0px\",\n minHeight: \"100%\",\n minWidth: \"100%\",\n borderRadius: \"sharp\",\n },\n },\n xsmall: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n small: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n medium: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n large: {\n content: {\n \"--size\": \"sizes.surface.4xlarge\",\n },\n },\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n <>\n <DialogBackdrop />\n <DialogPositioner>\n <DialogStandaloneContent ref={ref} {...props} />\n </DialogPositioner>\n </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n return (\n <InternalDialogDescription asChild>\n <Text textStyle={textStyle} {...rest}>\n {children}\n </Text>\n </InternalDialogDescription>\n );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n <InternalDialogTitle asChild>\n <Heading textStyle={textStyle} {...rest}>\n {children}\n </Heading>\n </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n base: {\n display: \"flex\",\n paddingInline: \"medium\",\n paddingBlockStart: \"medium\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"xsmall\",\n },\n});\n\nexport const DialogBody = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogFooter = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,iBAAA,GAAA,wBAAA,qBAAA,GAAA,wBAAA,KArSD;CACvB,OAAOA,qBAAAA,cAAc,KAAK;CAC1B,MAAM;EACJ,UAAU;GACR,UAAU;GACV,QAAQ;GACR,OAAO;GACP,MAAM;GACN,KAAK;GAEL,YAAY;GACZ,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;GACA,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,OACb;GACF;EACF;EACA,YAAY;GACV,UAAU;GACV,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,MAAM;GACN,KAAK;GACL,OAAO;GACP,QAAQ;EACV;EACA,SAAS;GACP,YAAY;GACZ,UAAU;GACV,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,UAAU;GACV,WAAW;GACX,QAAQ;GACR,WAAW;GACX,cAAc;IAAE,MAAM;IAAS,QAAQ;GAAQ;GAC/C,mBAAmB;GACnB,iBAAiB;GACjB,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;IACV,YAAY;IACZ,UAAU;IACV,WAAW;GACb;EACF;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;EACV,SAAS;EACT,SAAS;CACX;CACA,kBAAkB;EAChB;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,WAAW;IACX,WAAW;IACX,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,UAAU;GACV,KAAK,EACH,SAAS;IACP,UAAU;IACV,UAAU;IACV,QAAQ;IACR,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,wBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;EACA;GACE,SAAS;GACT,MAAM;GACN,KAAK,EACH,SAAS,EACP,UAAU,uBACZ,EACF;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,QAAQ;IACN,YAAY,EACV,QAAQ,QACV;IACA,UAAU,EACR,QAAQ,UACV;GACF;GACA,OAAO;IACL,YAAY,EACV,QAAQ,aACV;IACA,UAAU,EACR,QAAQ,oBACV;GACF;EACF;EACA,SAAS;GACP,QAAQ,EACN,SAAS;IACP,YAAY;IACZ,cAAc;KAAE,MAAM;KAAS,QAAQ;IAAQ;GACjD,EACF;GACA,QAAQ,EACN,SAAS;IACP,OAAO;IACP,OAAO;KACL,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;IACA,SAAS;KACP,WAAW;KACX,eAAe,EACb,WAAW,OACb;IACF;GACF,EACF;EACF;EACA,UAAU;GACR,MAAM,EACJ,SAAS,EACP,mBAAmB,gBACrB,EACF;GACA,QAAQ,CAAC;GACT,OAAO,EACL,SAAS,EACP,iBAAiB,gBACnB,EACF;GACA,QAAQ,EACN,SAAS,EACP,gBAAgB,gBAClB,EACF;GACA,KAAK,EACH,SAAS,EACP,kBAAkB,gBACpB,EACF;EACF;EACA,MAAM;GACJ,MAAM,EACJ,SAAS;IACP,YAAY;IACZ,WAAW;IACX,UAAU;IACV,cAAc;GAChB,EACF;GACA,QAAQ,EACN,SAAS,EACP,UAAU,uBACZ,EACF;GACA,OAAO,EACL,SAAS,EACP,UAAU,uBACZ,EACF;GACA,QAAQ,EACN,SAAS,EACP,UAAU,uBACZ,EACF;GACA,OAAO,EACL,SAAS,EACP,UAAU,wBACZ,EACF;EACF;CACF;AACF,CAEwE,CAAC;AAMzE,MAAa,qBAAqB,iBAAiBC,qBAAAA,OAAO,IAAI;AAE9D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,iBAAA,GAAA,kBAAA,KAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;AAAQ,CAAA;AAGtF,MAAa,iBAAiB,YAAYA,qBAAAA,OAAO,UAAU,YAAY,EAAE,eAAe,KAAK,CAAC;AAE9F,MAAa,0BAA0B,YAAYA,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAErG,MAAa,mBAAmB,YAAYA,qBAAAA,OAAO,YAAY,cAAc,EAAE,eAAe,KAAK,CAAC;AAIpG,MAAa,iBAAA,GAAA,MAAA,aAAgE,OAAO,QAClF,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD,CAAiB,CAAA,GACjB,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;CAA8B;CAAK,GAAI;AAAQ,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAED,MAAM,4BAA4B,YAAYA,qBAAAA,OAAO,aAAa,aAAa;AAK/E,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;CAC5G,OACE,iBAAA,GAAA,kBAAA,KAAC,2BAAD;EAA2B,SAAA;YACzB,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAiB;GAAW,GAAI;GAC7B;EACG,CAAA;CACmB,CAAA;AAE/B;AAEA,MAAM,sBAAsB,YAAYD,qBAAAA,OAAO,OAAO,OAAO;AAK7D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;CAAqB,SAAA;WACnB,iBAAA,GAAA,kBAAA,KAACE,aAAAA,SAAD;EAAoB;EAAW,GAAI;EAChC;CACM,CAAA;AACU,CAAA;AAGvB,MAAa,gBAAgB,YAAYF,qBAAAA,OAAO,SAAS,WAAW,EAAE,eAAe,KAAK,CAAC;AAE3F,MAAa,qBAAqB,YAAYA,qBAAAA,OAAO,cAAc,gBAAgB,EAAE,eAAe,KAAK,CAAC;AAE1G,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;AACP,EACF,CAAC;AAED,MAAa,cAAA,GAAA,wBAAA,QAAoB,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;AACnB,EACF,CAAC;AAED,MAAa,gBAAA,GAAA,wBAAA,QAAsB,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;AACnB,EACF,CAAC;AAED,MAAa,qBAAqB,iBAAiBA,qBAAAA,OAAO,YAAY;AAEtE,MAAa,YAAYG,qBAAAA"}
|