@ndla/primitives 1.0.101-alpha.0 → 1.0.103-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/es/Accordion.mjs +1 -1
- package/es/Accordion.mjs.map +1 -1
- package/es/Checkbox.mjs.map +1 -1
- package/es/Combobox.mjs.map +1 -1
- package/es/DatePicker.mjs.map +1 -1
- package/es/Dialog.mjs.map +1 -1
- package/es/FileUpload.mjs.map +1 -1
- package/es/Menu.mjs.map +1 -1
- package/es/Popover.mjs.map +1 -1
- package/es/RadioGroup.mjs.map +1 -1
- package/es/Select.mjs.map +1 -1
- package/es/Slider.mjs.map +1 -1
- package/es/Switch.mjs.map +1 -1
- package/es/Tabs.mjs.map +1 -1
- package/es/TagsInput.mjs.map +1 -1
- package/es/Toast.mjs.map +1 -1
- package/es/Tree/Tree.mjs.map +1 -1
- package/lib/Accordion.d.ts +7 -6
- package/lib/Accordion.js +1 -1
- package/lib/Accordion.js.map +1 -1
- package/lib/Checkbox.d.ts +7 -6
- package/lib/Checkbox.js.map +1 -1
- package/lib/Combobox.d.ts +16 -15
- package/lib/Combobox.js.map +1 -1
- package/lib/DatePicker.d.ts +26 -25
- package/lib/DatePicker.js.map +1 -1
- package/lib/Dialog.d.ts +9 -8
- package/lib/Dialog.js.map +1 -1
- package/lib/FileUpload.d.ts +16 -15
- package/lib/FileUpload.js.map +1 -1
- package/lib/Menu.d.ts +13 -12
- package/lib/Menu.js.map +1 -1
- package/lib/Popover.d.ts +12 -11
- package/lib/Popover.js.map +1 -1
- package/lib/RadioGroup.d.ts +10 -9
- package/lib/RadioGroup.js.map +1 -1
- package/lib/Select.d.ts +20 -19
- package/lib/Select.js.map +1 -1
- package/lib/Slider.d.ts +8 -7
- package/lib/Slider.js.map +1 -1
- package/lib/Switch.d.ts +6 -5
- package/lib/Switch.js.map +1 -1
- package/lib/Tabs.d.ts +6 -5
- package/lib/Tabs.js.map +1 -1
- package/lib/TagsInput.d.ts +12 -11
- package/lib/TagsInput.js.map +1 -1
- package/lib/Toast.d.ts +6 -5
- package/lib/Toast.js.map +1 -1
- package/lib/Tree/Tree.d.ts +16 -15
- package/lib/Tree/Tree.js.map +1 -1
- package/package.json +2 -2
package/es/Accordion.mjs
CHANGED
|
@@ -101,7 +101,7 @@ const accordionRecipe = sva({
|
|
|
101
101
|
});
|
|
102
102
|
const { withProvider, withContext } = createStyleContext(accordionRecipe);
|
|
103
103
|
const InternalAccordionRoot = withProvider(Accordion.Root, "root", { baseComponent: true });
|
|
104
|
-
const AccordionRoot = ({ lazyMount, unmountOnExit,...props }) => /* @__PURE__ */ jsx(InternalAccordionRoot, {
|
|
104
|
+
const AccordionRoot = ({ lazyMount = true, unmountOnExit = true,...props }) => /* @__PURE__ */ jsx(InternalAccordionRoot, {
|
|
105
105
|
lazyMount,
|
|
106
106
|
unmountOnExit,
|
|
107
107
|
...props
|
package/es/Accordion.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.mjs","names":[],"sources":["../src/Accordion.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 { Accordion, accordionAnatomy } 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\";\n\nconst accordionRecipe = sva({\n slots: accordionAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n itemTrigger: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n background: \"surface.default\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"default\",\n transitionProperty: \"background, border-color, border, border-radius\",\n _closed: {\n transitionProperty: \"background, border-color, border, border-radius\",\n },\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled.subtle\",\n boxShadowColor: \"stroke.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled.subtle\",\n boxShadowColor: \"stroke.disabled\",\n color: \"text.disabled\",\n },\n },\n },\n itemIndicator: {\n color: \"icon.strong\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _open: {\n transform: \"rotate(180deg)\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n itemContent: {\n overflow: \"hidden\",\n // TODO: Is this needed?\n transitionProperty: \"padding-bottom\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"default\",\n paddingBlock: \"xsmall\",\n paddingInline: \"small\",\n _open: {\n animation: \"collapse-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"collapse-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n width: \"100%\",\n },\n },\n defaultVariants: {\n variant: \"bordered\",\n },\n variants: {\n variant: {\n clean: {},\n bordered: {\n itemTrigger: {\n paddingInline: \"medium\",\n paddingBlock: \"medium\",\n width: \"100%\",\n borderRadius: \"xsmall\",\n boxShadowColor: \"stroke.subtle\",\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n _hover: {\n background: \"surface.actionSubtle.hover\",\n boxShadowColor: \"stroke.hover\",\n },\n _open: {\n background: \"surface.actionSubtle.active\",\n boxShadowColor: \"stroke.default\",\n borderBottomRadius: \"sharp\",\n },\n _focusVisible: {\n outline: \"none\",\n boxShadowColor: \"stroke.default\",\n boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n },\n },\n itemContent: {\n borderBottomRadius: \"xsmall\",\n borderWidth: \"0 1px 1px\",\n borderStyle: \"solid\",\n borderColor: \"stroke.default\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = NonNullable<RecipeVariantProps<typeof accordionRecipe>>;\n\nexport interface AccordionRootProps
|
|
1
|
+
{"version":3,"file":"Accordion.mjs","names":[],"sources":["../src/Accordion.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 type { RefAttributes } from \"react\";\nimport { Accordion, accordionAnatomy } 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\";\n\nconst accordionRecipe = sva({\n slots: accordionAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n itemTrigger: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n background: \"surface.default\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"default\",\n transitionProperty: \"background, border-color, border, border-radius\",\n _closed: {\n transitionProperty: \"background, border-color, border, border-radius\",\n },\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled.subtle\",\n boxShadowColor: \"stroke.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled.subtle\",\n boxShadowColor: \"stroke.disabled\",\n color: \"text.disabled\",\n },\n },\n },\n itemIndicator: {\n color: \"icon.strong\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _open: {\n transform: \"rotate(180deg)\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n itemContent: {\n overflow: \"hidden\",\n // TODO: Is this needed?\n transitionProperty: \"padding-bottom\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"default\",\n paddingBlock: \"xsmall\",\n paddingInline: \"small\",\n _open: {\n animation: \"collapse-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"collapse-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n width: \"100%\",\n },\n },\n defaultVariants: {\n variant: \"bordered\",\n },\n variants: {\n variant: {\n clean: {},\n bordered: {\n itemTrigger: {\n paddingInline: \"medium\",\n paddingBlock: \"medium\",\n width: \"100%\",\n borderRadius: \"xsmall\",\n boxShadowColor: \"stroke.subtle\",\n boxShadow: \"inset 0 0 0 1px var(--shadow-color)\",\n _hover: {\n background: \"surface.actionSubtle.hover\",\n boxShadowColor: \"stroke.hover\",\n },\n _open: {\n background: \"surface.actionSubtle.active\",\n boxShadowColor: \"stroke.default\",\n borderBottomRadius: \"sharp\",\n },\n _focusVisible: {\n outline: \"none\",\n boxShadowColor: \"stroke.default\",\n boxShadow: \"inset 0 0 0 3px var(--shadow-color)\",\n },\n },\n itemContent: {\n borderBottomRadius: \"xsmall\",\n borderWidth: \"0 1px 1px\",\n borderStyle: \"solid\",\n borderColor: \"stroke.default\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(accordionRecipe);\n\nexport type AccordionVariantProps = NonNullable<RecipeVariantProps<typeof accordionRecipe>>;\n\nexport interface AccordionRootProps\n extends StyledProps,\n Accordion.RootProps,\n RefAttributes<HTMLDivElement>,\n AccordionVariantProps {}\n\nexport const InternalAccordionRoot = withProvider(Accordion.Root, \"root\", { baseComponent: true });\n\nexport const AccordionRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: AccordionRootProps) => (\n <InternalAccordionRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const AccordionItemContent = withContext(Accordion.ItemContent, \"itemContent\", { baseComponent: true });\n\nexport const AccordionItemIndicator = withContext(Accordion.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface AccordionItemProps extends StyledProps, Accordion.ItemProps {}\n\nexport const AccordionItem = withContext(Accordion.Item, \"item\", { baseComponent: true });\n\nexport const AccordionItemTrigger = withContext(Accordion.ItemTrigger, \"itemTrigger\", { baseComponent: true });\n"],"mappings":";;;;;;AAcA,MAAM,kBAAkB,IAAI;CAC1B,OAAO,iBAAiB,MAAM;CAC9B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,SAAS,EACP,oBAAoB,mDACrB;GACD,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,gBAAgB;IAChB,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,gBAAgB;KAChB,OAAO;KACR;IACF;GACF;EACD,eAAe;GACb,OAAO;GACP,iBAAiB;GACjB,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO,EACL,WAAW,kBACZ;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACD,aAAa;GACX,UAAU;GAEV,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,cAAc;GACd,eAAe;GACf,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,MAAM,EACJ,OAAO,QACR;EACF;CACD,iBAAiB,EACf,SAAS,YACV;CACD,UAAU,EACR,SAAS;EACP,OAAO,EAAE;EACT,UAAU;GACR,aAAa;IACX,eAAe;IACf,cAAc;IACd,OAAO;IACP,cAAc;IACd,gBAAgB;IAChB,WAAW;IACX,QAAQ;KACN,YAAY;KACZ,gBAAgB;KACjB;IACD,OAAO;KACL,YAAY;KACZ,gBAAgB;KAChB,oBAAoB;KACrB;IACD,eAAe;KACb,SAAS;KACT,gBAAgB;KAChB,WAAW;KACZ;IACF;GACD,aAAa;IACX,oBAAoB;IACpB,aAAa;IACb,aAAa;IACb,aAAa;IACd;GACF;EACF,EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,gBAAgB;AAUzE,MAAa,wBAAwB,aAAa,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAElG,MAAa,iBAAiB,EAAE,YAAY,MAAM,gBAAgB,KAAM,GAAG,YACzE,oBAAC;CAAiC;CAA0B;CAAe,GAAI;EAAS;AAG1F,MAAa,uBAAuB,YAAY,UAAU,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAE9G,MAAa,yBAAyB,YAAY,UAAU,eAAe,iBAAiB,EAAE,eAAe,MAAM,CAAC;AAIpH,MAAa,gBAAgB,YAAY,UAAU,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,uBAAuB,YAAY,UAAU,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC"}
|
package/es/Checkbox.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","names":[],"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 { 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 extends StyledProps, Omit<Checkbox.LabelProps, \"color\">, TextProps {}\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.mjs","names":[],"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 type { RefAttributes } from \"react\";\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 { 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,\n Omit<Checkbox.LabelProps, \"color\">,\n TextProps,\n 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/es/Combobox.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Combobox.mjs","names":[],"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 { forwardRef, type ElementType } from \"react\";\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 { 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,\n Combobox.RootProps<T>,\n ComboboxVariantProps {\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\">,\n TextProps,\n StyledProps {}\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 extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps {}\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 extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps {}\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":";;;;;;;;;AAgBA,MAAM,iBAAiB,IAAI;CACzB,OAAO,gBAAgB,MAAM;CAC7B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,SAAS;GACP,SAAS;GACT,YAAY;GACZ,KAAK;GACN;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,QAAQ;GACR,YAAY;GACZ,WAAW;GACX,WAAW;GACX,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,MAAM;GACJ,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,QAAQ;GACR,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;IACZ,OAAO;IACP,QAAQ;KACN,YAAY;KACZ,OAAO;KACR;IACF;GACD,QAAQ,EACN,YAAY,iBACb;GACD,cAAc,EACZ,YAAY,iBACb;GACD,UAAU;IACR,YAAY;IACZ,cAAc,EACZ,YAAY,iBACb;IACF;GACF;EACD,SAAS;GACP,SAAS;IACP,OAAO;IACP,iBAAiB;IACjB,oBAAoB;IACpB,oBAAoB;IACpB,0BAA0B;IAC1B,eAAe;KACb,YAAY;KACZ,oBAAoB;KACrB;IACF;GACD,OAAO,EACL,SAAS,EACP,WAAW,kBACZ,EACF;GACF;EACD,eAAe,EACb,OAAO,kBACR;EACD,UAAU;GACR,UAAU,EACR,gBAAgB,aACjB;GACD,cAAc,EACZ,gBAAgB,aACjB;GACF;EACD,WAAW;GACT,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACF;CACD,iBAAiB;EACf,SAAS;EACT,SAAS;EACV;CACD,UAAU;EACR,SAAS;GACP,YAAY,EACV,SAAS;IACP,WAAW;IACX,cAAc;IACd,SAAS;IACV,EACF;GACD,WAAW,EAAE;GACd;EACD,SAAS;GACP,QAAQ;IACN,MAAM;KACJ,SAAS;KACT,cAAc;KACf;IACD,SAAS,EACP,KAAK,WACN;IACF;GACD,SAAS,EAAE;GACZ;EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,eAAe;AAWxE,MAAM,uBAAuB,aAC3B,SAAS,MACT,QACA,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAmD,EAC9D,YAAY,MACZ,gBAAgB,KAChB,GAAG,YACuB;AAC1B,QAAO,oBAAC;EAAgC;EAA0B;EAAe,GAAI;GAAS;;AAKhG,MAAa,uBAAuB,YAAY,SAAS,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAI/G,MAAa,4BAA4B,YAAY,SAAS,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,kBAAkB,YAAkD,OAAO,QACtF,oBAAC,gCACC,oBAAC;CAA+B;CAAK,GAAI;EAAS,GAC/B,CACrB;AAIF,MAAa,kBAAkB,YAAY,SAAS,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAIhG,MAAa,gBAAgB,YAAY,SAAS,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAM,iCAAiC,YAAY,SAAS,gBAAgB,iBAAiB;AAO7F,MAAa,0BAA0B,EACrC,UACA,YAAY,eACZ,aAAa,OACb,GAAG,YAEH,oBAAC;CAA+B;WAC9B,oBAAC;EAAK;EAAQ;EAAsB;EAAuB;EAAY,GAAI;YACzE,oBAAC,SAAK,WAAe;GAChB;EACwB;AAKnC,MAAa,oBAAoB,YAAY,SAAS,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAItG,MAAa,wBAAwB,YAAY,SAAS,eAAe,iBAAiB,EAAE,eAAe,MAAM,CAAC;AAIlH,MAAa,eAAe,YAAY,SAAS,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAEvF,MAAM,2BAA2B,YAAY,SAAS,UAAU,WAAW;AAI3E,MAAa,oBAAoB,EAC/B,YAAY,gBACZ,aAAa,QACb,SACA,GAAG,YAEH,oBAAC;CAAyB;WACxB,oBAAC;EAAK,GAAI;EAAkB;EAAuB;EAAY;EAAQ;YACrE,oBAAC,SAAK,WAAe;GAChB;EACkB;AAG7B,MAAM,wBAAwB,YAAY,SAAS,OAAO,QAAQ;AAIlE,MAAa,iBAAiB,EAAE,YAAY,gBAAgB,aAAa,OAAQ,GAAG,YAClF,oBAAC;CAAsB;WACrB,oBAAC;EAAiB;EAAuB;EAAY,GAAI;GAAS;EAC5C;AAK1B,MAAa,qBAAqB,YAAY,SAAS,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzG,MAAa,kBAAkB,YAAY,SAAS,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAIhG,MAAa,eAAe,YAAY,SAAS,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC"}
|
|
1
|
+
{"version":3,"file":"Combobox.mjs","names":[],"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 { forwardRef, type ElementType, type RefAttributes } from \"react\";\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 { 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,\n Combobox.RootProps<T>,\n ComboboxVariantProps,\n 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\">,\n TextProps,\n StyledProps,\n 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\">,\n TextProps,\n StyledProps,\n 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\">,\n TextProps,\n StyledProps,\n 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/es/DatePicker.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.mjs","names":[],"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 { forwardRef } from \"react\";\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\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
|
|
1
|
+
{"version":3,"file":"DatePicker.mjs","names":[],"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 { forwardRef, type RefAttributes } from \"react\";\nimport { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\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\">,\n StyledProps,\n TextProps,\n 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":"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"}
|
package/es/Dialog.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.mjs","names":["useDialog","_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 { forwardRef } from \"react\";\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 { 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 extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps {}\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 extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps {}\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":";;;;;;;;AAeA,MAAM,eAAe,IAAI;CACvB,OAAO,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,CAAC;AAEF,MAAM,EAAE,kBAAkB,gBAAgB,mBAAmB,aAAa;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,KAAM,GAAG,YACtE,oBAAC;CAA8B;CAA0B;CAAe,GAAI;EAAS;AAGvF,MAAa,iBAAiB,YAAY,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAY,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,gBAAgB,YAAgD,OAAO,QAClF,4CACE,oBAAC,mBAAiB,EAClB,oBAAC,8BACC,oBAAC;CAA6B;CAAK,GAAI;EAAS,GAC/B,IAClB,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAIhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,SAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC;EAA0B;YACzB,oBAAC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAI9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,SAAU,GAAG,WACrE,oBAAC;CAAoB;WACnB,oBAAC;EAAmB;EAAW,GAAI;EAChC;GACO;EACU;AAGxB,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,aAAa,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiB,OAAO,aAAa;AAEvE,MAAaA,cAAYC"}
|
|
1
|
+
{"version":3,"file":"Dialog.mjs","names":["useDialog","_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 { forwardRef, type RefAttributes } from \"react\";\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 { 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\">,\n TextProps,\n StyledProps,\n 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\">,\n TextProps,\n StyledProps,\n 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":";;;;;;;;AAeA,MAAM,eAAe,IAAI;CACvB,OAAO,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,CAAC;AAEF,MAAM,EAAE,kBAAkB,gBAAgB,mBAAmB,aAAa;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,KAAM,GAAG,YACtE,oBAAC;CAA8B;CAA0B;CAAe,GAAI;EAAS;AAGvF,MAAa,iBAAiB,YAAY,OAAO,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAE/F,MAAa,0BAA0B,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEtG,MAAa,mBAAmB,YAAY,OAAO,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAIrG,MAAa,gBAAgB,YAAgD,OAAO,QAClF,4CACE,oBAAC,mBAAiB,EAClB,oBAAC,8BACC,oBAAC;CAA6B;CAAK,GAAI;EAAS,GAC/B,IAClB,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAQhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,SAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC;EAA0B;YACzB,oBAAC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAQ9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,SAAU,GAAG,WACrE,oBAAC;CAAoB;WACnB,oBAAC;EAAmB;EAAW,GAAI;EAChC;GACO;EACU;AAGxB,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,OAAO,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE3G,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,mBAAmB;CACnB,gBAAgB;CAChB,YAAY;CACZ,KAAK;CACN,EACF,CAAC;AAEF,MAAa,aAAa,OAAO,OAAO,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,eAAe,OAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACZ,gBAAgB;CAChB,eAAe;CACf,mBAAmB;CACnB,iBAAiB;CAClB,EACF,CAAC;AAEF,MAAa,qBAAqB,iBAAiB,OAAO,aAAa;AAEvE,MAAaA,cAAYC"}
|
package/es/FileUpload.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileUpload.mjs","names":[],"sources":["../src/FileUpload.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 { forwardRef } from \"react\";\nimport { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n slots: fileUploadAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n minHeight: \"100%\",\n },\n dropzone: {\n display: \"flex\",\n gap: \"small\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"4xlarge\",\n borderRadius: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n transitionProperty: \"border, border-color\",\n transitionTimingFunction: \"default\",\n transitionDuration: \"normal\",\n _hover: {\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n _disabled: {\n borderStyle: \"solid\",\n borderColor: \"stroke.subtle\",\n },\n },\n },\n itemGroup: {\n paddingBlockStart: \"medium\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n item: {\n width: \"100%\",\n display: \"grid\",\n gridTemplateAreas: `\n \"preview name delete\" \n \"preview size delete\"`,\n gridTemplateColumns: \"auto 1fr auto\",\n gridColumnGap: \"small\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n itemPreview: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"xxlarge\",\n height: \"xxlarge\",\n gridArea: \"preview\",\n },\n itemName: {\n gridArea: \"name\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n itemSizeText: {\n gridArea: \"size\",\n },\n itemDeleteTrigger: {\n gridArea: \"delete\",\n alignSelf: \"center\",\n },\n itemPreviewImage: {\n borderRadius: \"xsmall\",\n objectFit: \"cover\",\n width: \"100%\",\n height: \"100%\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps
|
|
1
|
+
{"version":3,"file":"FileUpload.mjs","names":[],"sources":["../src/FileUpload.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 { forwardRef, type RefAttributes } from \"react\";\nimport { FileUpload, fileUploadAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { type TextProps, Text } from \"./Text\";\n\nconst fileUploadRecipe = sva({\n slots: fileUploadAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n minHeight: \"100%\",\n },\n dropzone: {\n display: \"flex\",\n gap: \"small\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"4xlarge\",\n borderRadius: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n transitionProperty: \"border, border-color\",\n transitionTimingFunction: \"default\",\n transitionDuration: \"normal\",\n _hover: {\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n _disabled: {\n borderStyle: \"solid\",\n borderColor: \"stroke.subtle\",\n },\n },\n },\n itemGroup: {\n paddingBlockStart: \"medium\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n item: {\n width: \"100%\",\n display: \"grid\",\n gridTemplateAreas: `\n \"preview name delete\" \n \"preview size delete\"`,\n gridTemplateColumns: \"auto 1fr auto\",\n gridColumnGap: \"small\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n itemPreview: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n width: \"xxlarge\",\n height: \"xxlarge\",\n gridArea: \"preview\",\n },\n itemName: {\n gridArea: \"name\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n },\n itemSizeText: {\n gridArea: \"size\",\n },\n itemDeleteTrigger: {\n gridArea: \"delete\",\n alignSelf: \"center\",\n },\n itemPreviewImage: {\n borderRadius: \"xsmall\",\n objectFit: \"cover\",\n width: \"100%\",\n height: \"100%\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(fileUploadRecipe);\n\nexport type FileUploadVariantProps = NonNullable<RecipeVariantProps<typeof fileUploadRecipe>>;\n\nexport interface FileUploadRootProps extends FileUpload.RootProps, FileUploadVariantProps {}\n\nexport const FileUploadHiddenInput = FileUpload.HiddenInput;\nexport const FileUploadContext = FileUpload.Context;\n\nexport const FileUploadRoot = withProvider(FileUpload.Root, \"root\", { baseComponent: true });\n\nexport const FileUploadDropzone = withContext(FileUpload.Dropzone, \"dropzone\", { baseComponent: true });\n\nexport const FileUploadTrigger = withContext(FileUpload.Trigger, \"trigger\", { baseComponent: true });\n\nexport const FileUploadItemGroup = withContext(FileUpload.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const FileUploadItemPreview = withContext(FileUpload.ItemPreview, \"itemPreview\", { baseComponent: true });\n\nexport const FileUploadItem = withContext(FileUpload.Item, \"item\", { baseComponent: true });\n\nexport const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, \"itemDeleteTrigger\", {\n baseComponent: true,\n});\n\nexport const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, \"itemPreviewImage\", {\n baseComponent: true,\n});\n\nconst InternalFileUploadItemName = withContext(FileUpload.ItemName, \"itemName\", { baseComponent: true });\n\ninterface FileUploadItemNameProps\n extends Omit<FileUpload.ItemNameProps, \"color\">,\n TextProps,\n StyledProps,\n RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemName = forwardRef<HTMLDivElement, FileUploadItemNameProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }, ref) => (\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild {...props} ref={ref}>\n {/* Do not use children here whatsoever. The component falls back to the file name only if no children are passed in. It should be up to the consumer if they want to pass in children. */}\n <InternalFileUploadItemName />\n </Text>\n ),\n);\n\nconst InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, \"itemSizeText\", { baseComponent: true });\n\ninterface FileUploadItemSizeTextProps\n extends Omit<FileUpload.ItemSizeTextProps, \"color\">,\n TextProps,\n StyledProps,\n RefAttributes<HTMLParagraphElement> {}\n\nexport const FileUploadItemSizeText = forwardRef<HTMLDivElement, FileUploadItemSizeTextProps>(\n ({ textStyle = \"label.small\", ...props }, ref) => (\n <Text textStyle={textStyle} ref={ref} asChild {...props}>\n <InternalFileUploadItemSizeText />\n </Text>\n ),\n);\n\nconst InternalFileUploadLabel = withContext(FileUpload.Label, \"label\");\n\ninterface FileUploadLabelProps\n extends Omit<FileUpload.LabelProps, \"color\">,\n StyledProps,\n TextProps,\n RefAttributes<HTMLLabelElement> {}\n\nexport const FileUploadLabel = forwardRef<HTMLLabelElement, FileUploadLabelProps>(\n ({ textStyle = \"label.medium\", fontWeight = \"light\", children, ...props }, ref) => (\n <InternalFileUploadLabel ref={ref} asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props}>\n {children}\n </Label>\n </InternalFileUploadLabel>\n ),\n);\n"],"mappings":";;;;;;;;;AAgBA,MAAM,mBAAmB,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EACD,UAAU;GACR,SAAS;GACT,KAAK;GACL,eAAe;GACf,YAAY;GACZ,gBAAgB;GAChB,SAAS;GACT,cAAc;GACd,QAAQ;GACR,aAAa;GACb,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ;IACN,aAAa;IACb,aAAa;IACb,WAAW;KACT,aAAa;KACb,aAAa;KACd;IACF;GACF;EACD,WAAW;GACT,mBAAmB;GACnB,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,MAAM;GACJ,OAAO;GACP,SAAS;GACT,mBAAmB;;;GAGnB,qBAAqB;GACrB,eAAe;GACf,QAAQ;GACR,aAAa;GACb,cAAc;GACd,SAAS;GACV;EACD,aAAa;GACX,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,UAAU;GACX;EACD,UAAU;GACR,UAAU;GACV,YAAY;GACZ,UAAU;GACV,cAAc;GACf;EACD,cAAc,EACZ,UAAU,QACX;EACD,mBAAmB;GACjB,UAAU;GACV,WAAW;GACZ;EACD,kBAAkB;GAChB,cAAc;GACd,WAAW;GACX,OAAO;GACP,QAAQ;GACT;EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,iBAAiB;AAM1E,MAAa,wBAAwB,WAAW;AAChD,MAAa,oBAAoB,WAAW;AAE5C,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,8BAA8B,YAAY,WAAW,mBAAmB,qBAAqB,EACxG,eAAe,MAChB,CAAC;AAEF,MAAa,6BAA6B,YAAY,WAAW,kBAAkB,oBAAoB,EACrG,eAAe,MAChB,CAAC;AAEF,MAAM,6BAA6B,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAQxG,MAAa,qBAAqB,YAC/B,EAAE,YAAY,gBAAgB,aAAa,OAAQ,GAAG,SAAS,QAC9D,oBAAC;CAAgB;CAAuB;CAAY;CAAQ,GAAI;CAAY;WAE1E,oBAAC,+BAA6B;EACzB,CAEV;AAED,MAAM,iCAAiC,YAAY,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAQpH,MAAa,yBAAyB,YACnC,EAAE,YAAY,cAAe,GAAG,SAAS,QACxC,oBAAC;CAAgB;CAAgB;CAAK;CAAQ,GAAI;WAChD,oBAAC,mCAAiC;EAC7B,CAEV;AAED,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAQtE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,gBAAgB,aAAa,SAAS,SAAU,GAAG,SAAS,QACzE,oBAAC;CAA6B;CAAK;WACjC,oBAAC;EAAiB;EAAuB;EAAY,GAAI;EACtD;GACK;EACgB,CAE7B"}
|
package/es/Menu.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.mjs","names":["itemStyle: SystemStyleObject"],"sources":["../src/Menu.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 { forwardRef } from \"react\";\nimport { Menu, menuAnatomy } from \"@ark-ui/react\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst itemStyle: SystemStyleObject = css.raw({\n display: \"flex\",\n alignItems: \"center\",\n borderRadius: \"xsmall\",\n cursor: \"pointer\",\n textStyle: \"label.medium\",\n paddingBlock: \"4xsmall\",\n paddingInline: \"xsmall\",\n gap: \"xsmall\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color\",\n transitionTimingFunction: \"default\",\n outline: \"none\",\n _hover: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n _disabled: {\n color: \"text.disabled\",\n cursor: \"not-allowed\",\n \"& svg\": {\n color: \"stroke.disabled\",\n },\n _hover: {\n color: \"text.disabled\",\n textDecoration: \"none\",\n background: \"surface.default\",\n \"& svg\": {\n color: \"stroke.disabled\",\n },\n },\n },\n});\n\nconst itemCva = cva({\n defaultVariants: {\n variant: \"action\",\n },\n variants: {\n variant: {\n action: {\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _active: {\n background: \"surface.active\",\n },\n },\n destructive: {\n color: \"text.error\",\n \"& svg\": {\n color: \"icon.error\",\n },\n _hover: {\n color: \"text.default\",\n \"& svg\": {\n color: \"icon.default\",\n },\n background: \"surface.errorSubtle.hover\",\n },\n _highlighted: {\n color: \"text.default\",\n \"& svg\": {\n color: \"icon.default\",\n },\n background: \"surface.errorSubtle.hover\",\n },\n _active: {\n background: \"surface.errorSubtle.active\",\n },\n },\n },\n },\n});\n\nconst menuRecipe = sva({\n slots: menuAnatomy.keys(),\n base: {\n item: itemStyle,\n triggerItem: itemStyle,\n content: {\n color: \"text.default\",\n display: \"flex\",\n flexDirection: \"column\",\n width: \"fit-content\",\n minWidth: \"surface.xxsmall\",\n padding: \"3xsmall\",\n gap: \"3xsmall\",\n background: \"surface.default\",\n boxShadow: \"small\",\n borderRadius: \"xsmall\",\n outline: \"none\",\n zIndex: \"dropdown\",\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 itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n positioner: {\n zIndex: \"dropdown\",\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(menuRecipe);\n\nexport type MenuRootProps = Menu.RootProps;\n\nconst InternalMenuRoot = withRootProvider(Menu.Root);\n\nexport const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: MenuRootProps) => (\n <InternalMenuRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const MenuContentStandalone = withContext(Menu.Content, \"content\", { baseComponent: true });\n\ninterface MenuContentProps extends Menu.ContentProps, StyledProps {}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => (\n <MenuPositioner>\n <MenuContentStandalone ref={ref} {...props} />\n </MenuPositioner>\n));\n\nconst InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, \"itemGroupLabel\");\n\ninterface MenuItemGroupLabelProps
|
|
1
|
+
{"version":3,"file":"Menu.mjs","names":["itemStyle: SystemStyleObject"],"sources":["../src/Menu.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 { forwardRef, type RefAttributes } from \"react\";\nimport { Menu, menuAnatomy } from \"@ark-ui/react\";\nimport { css, cva, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst itemStyle: SystemStyleObject = css.raw({\n display: \"flex\",\n alignItems: \"center\",\n borderRadius: \"xsmall\",\n cursor: \"pointer\",\n textStyle: \"label.medium\",\n paddingBlock: \"4xsmall\",\n paddingInline: \"xsmall\",\n gap: \"xsmall\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color\",\n transitionTimingFunction: \"default\",\n outline: \"none\",\n _hover: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n _disabled: {\n color: \"text.disabled\",\n cursor: \"not-allowed\",\n \"& svg\": {\n color: \"stroke.disabled\",\n },\n _hover: {\n color: \"text.disabled\",\n textDecoration: \"none\",\n background: \"surface.default\",\n \"& svg\": {\n color: \"stroke.disabled\",\n },\n },\n },\n});\n\nconst itemCva = cva({\n defaultVariants: {\n variant: \"action\",\n },\n variants: {\n variant: {\n action: {\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _active: {\n background: \"surface.active\",\n },\n },\n destructive: {\n color: \"text.error\",\n \"& svg\": {\n color: \"icon.error\",\n },\n _hover: {\n color: \"text.default\",\n \"& svg\": {\n color: \"icon.default\",\n },\n background: \"surface.errorSubtle.hover\",\n },\n _highlighted: {\n color: \"text.default\",\n \"& svg\": {\n color: \"icon.default\",\n },\n background: \"surface.errorSubtle.hover\",\n },\n _active: {\n background: \"surface.errorSubtle.active\",\n },\n },\n },\n },\n});\n\nconst menuRecipe = sva({\n slots: menuAnatomy.keys(),\n base: {\n item: itemStyle,\n triggerItem: itemStyle,\n content: {\n color: \"text.default\",\n display: \"flex\",\n flexDirection: \"column\",\n width: \"fit-content\",\n minWidth: \"surface.xxsmall\",\n padding: \"3xsmall\",\n gap: \"3xsmall\",\n background: \"surface.default\",\n boxShadow: \"small\",\n borderRadius: \"xsmall\",\n outline: \"none\",\n zIndex: \"dropdown\",\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 itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n positioner: {\n zIndex: \"dropdown\",\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(menuRecipe);\n\nexport type MenuRootProps = Menu.RootProps;\n\nconst InternalMenuRoot = withRootProvider(Menu.Root);\n\nexport const MenuRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: MenuRootProps) => (\n <InternalMenuRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const MenuContentStandalone = withContext(Menu.Content, \"content\", { baseComponent: true });\n\ninterface MenuContentProps extends Menu.ContentProps, StyledProps {}\n\nexport const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => (\n <MenuPositioner>\n <MenuContentStandalone ref={ref} {...props} />\n </MenuPositioner>\n));\n\nconst InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, \"itemGroupLabel\");\n\ninterface MenuItemGroupLabelProps\n extends Omit<Menu.ItemGroupLabelProps, \"color\">,\n StyledProps,\n TextProps,\n RefAttributes<HTMLDivElement> {}\n\nexport const MenuItemGroupLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: MenuItemGroupLabelProps) => (\n <InternalMenuItemGroupLabel {...props} asChild>\n <Text textStyle={textStyle} fontWeight={fontWeight}>\n {children}\n </Text>\n </InternalMenuItemGroupLabel>\n);\n\nexport const MenuItemGroup = withContext(Menu.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nconst InternalMenuItem = withContext(Menu.Item, \"item\", { baseComponent: true });\n\nexport type MenuItemVariantProps = NonNullable<RecipeVariantProps<typeof itemCva>>;\nexport interface MenuItemProps\n extends Menu.ItemProps,\n StyledProps,\n MenuItemVariantProps,\n RefAttributes<HTMLDivElement> {}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(({ css: cssProp = {}, variant, ...props }, ref) => (\n <InternalMenuItem\n css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n {...props}\n ref={ref}\n />\n));\n\nexport const MenuPositioner = withContext(Menu.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalMenuTriggerItem = withContext(Menu.TriggerItem, \"triggerItem\", { baseComponent: true });\n\ninterface MenuTriggerItemProps\n extends Menu.TriggerItemProps,\n StyledProps,\n MenuItemVariantProps,\n RefAttributes<HTMLButtonElement> {}\n\nexport const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(\n ({ css: cssProp = {}, variant, ...props }, ref) => (\n <InternalMenuTriggerItem\n css={[itemCva.raw({ variant }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])]}\n {...props}\n ref={ref}\n />\n ),\n);\n\nexport const MenuTrigger = withContext(Menu.Trigger, \"trigger\", { baseComponent: true });\n\nexport const MenuSeparator = withContext(Menu.Separator, \"separator\", { baseComponent: true });\n\nexport const MenuItemText = withContext(Menu.ItemText, \"itemText\", { baseComponent: true });\n"],"mappings":"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"}
|
package/es/Popover.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.mjs","names":["usePopover","_usePopover"],"sources":["../src/Popover.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 { forwardRef } from \"react\";\nimport { Popover, popoverAnatomy, usePopover as _usePopover } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Heading, type TextProps } from \"./Text\";\n\nconst popoverRecipe = sva({\n slots: popoverAnatomy.keys(),\n base: {\n positioner: {\n maxHeight: \"inherit\",\n position: \"relative\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: \"medium\",\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"xlarge\",\n zIndex: \"popover\",\n maxWidth: \"var(--available-width)\",\n _open: {\n animation: \"fade-shift-in 0.2s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.2s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n arrow: {\n \"--arrow-size\": \"sizes.xxsmall\",\n \"--arrow-background\": \"colors.surface.default\",\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(popoverRecipe);\n\nexport type PopoverRootProps = Popover.RootProps;\nconst InternalPopoverRoot = withRootProvider(Popover.Root);\n\nexport const PopoverRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: PopoverRootProps) => (\n <InternalPopoverRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const PopoverAnchor = withContext(Popover.Anchor, \"anchor\", { baseComponent: true });\n\nexport const PopoverArrowStandalone = withContext(Popover.Arrow, \"arrow\", { baseComponent: true });\n\ninterface PopoverArrowProps extends Popover.ArrowTipProps, StyledProps {}\n\nexport const PopoverArrow = (props: PopoverArrowProps) => (\n <PopoverArrowStandalone>\n <PopoverArrowTip {...props} />\n </PopoverArrowStandalone>\n);\n\nexport const PopoverArrowTip = withContext(Popover.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const PopoverCloseTrigger = withContext(Popover.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const PopoverContentStandalone = withContext(Popover.Content, \"content\", { baseComponent: true });\n\ninterface PopoverContentProps extends Popover.ContentProps, StyledProps {}\n\nexport const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => (\n <PopoverPositioner>\n <PopoverContentStandalone {...props} ref={ref} />\n </PopoverPositioner>\n));\n\nexport const PopoverDescription = withContext(Popover.Description, \"description\", { baseComponent: true });\n\nexport const PopoverIndicator = withContext(Popover.Indicator, \"indicator\", { baseComponent: true });\n\nexport const PopoverPositioner = withContext(Popover.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalPopoverTitle = withContext(Popover.Title, \"title\", { baseComponent: true });\n\ninterface PopoverTitleProps
|
|
1
|
+
{"version":3,"file":"Popover.mjs","names":["usePopover","_usePopover"],"sources":["../src/Popover.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 { forwardRef, type RefAttributes } from \"react\";\nimport { Popover, popoverAnatomy, usePopover as _usePopover } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Heading, type TextProps } from \"./Text\";\n\nconst popoverRecipe = sva({\n slots: popoverAnatomy.keys(),\n base: {\n positioner: {\n maxHeight: \"inherit\",\n position: \"relative\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n padding: \"medium\",\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"xlarge\",\n zIndex: \"popover\",\n maxWidth: \"var(--available-width)\",\n _open: {\n animation: \"fade-shift-in 0.2s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.2s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n arrow: {\n \"--arrow-size\": \"sizes.xxsmall\",\n \"--arrow-background\": \"colors.surface.default\",\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(popoverRecipe);\n\nexport type PopoverRootProps = Popover.RootProps;\nconst InternalPopoverRoot = withRootProvider(Popover.Root);\n\nexport const PopoverRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: PopoverRootProps) => (\n <InternalPopoverRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const PopoverAnchor = withContext(Popover.Anchor, \"anchor\", { baseComponent: true });\n\nexport const PopoverArrowStandalone = withContext(Popover.Arrow, \"arrow\", { baseComponent: true });\n\ninterface PopoverArrowProps extends Popover.ArrowTipProps, StyledProps {}\n\nexport const PopoverArrow = (props: PopoverArrowProps) => (\n <PopoverArrowStandalone>\n <PopoverArrowTip {...props} />\n </PopoverArrowStandalone>\n);\n\nexport const PopoverArrowTip = withContext(Popover.ArrowTip, \"arrowTip\", { baseComponent: true });\n\nexport const PopoverCloseTrigger = withContext(Popover.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const PopoverContentStandalone = withContext(Popover.Content, \"content\", { baseComponent: true });\n\ninterface PopoverContentProps extends Popover.ContentProps, StyledProps {}\n\nexport const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>((props, ref) => (\n <PopoverPositioner>\n <PopoverContentStandalone {...props} ref={ref} />\n </PopoverPositioner>\n));\n\nexport const PopoverDescription = withContext(Popover.Description, \"description\", { baseComponent: true });\n\nexport const PopoverIndicator = withContext(Popover.Indicator, \"indicator\", { baseComponent: true });\n\nexport const PopoverPositioner = withContext(Popover.Positioner, \"positioner\", { baseComponent: true });\n\nconst InternalPopoverTitle = withContext(Popover.Title, \"title\", { baseComponent: true });\n\ninterface PopoverTitleProps\n extends Omit<Popover.TitleProps, \"color\">,\n TextProps,\n StyledProps,\n RefAttributes<HTMLHeadingElement> {}\n\nexport const PopoverTitle = ({ textStyle = \"title.medium\", children, ...rest }: PopoverTitleProps) => (\n <Heading textStyle={textStyle} {...rest} asChild consumeCss>\n <InternalPopoverTitle>{children}</InternalPopoverTitle>\n </Heading>\n);\n\nexport const PopoverTrigger = withContext(Popover.Trigger, \"trigger\", { baseComponent: true });\n\nexport const PopoverRootProvider = withRootProvider(Popover.RootProvider);\n\nexport const usePopover = _usePopover;\n"],"mappings":";;;;;;;;AAeA,MAAM,gBAAgB,IAAI;CACxB,OAAO,eAAe,MAAM;CAC5B,MAAM;EACJ,YAAY;GACV,WAAW;GACX,UAAU;GACX;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,SAAS;GACT,YAAY;GACZ,cAAc;GACd,WAAW;GACX,QAAQ;GACR,UAAU;GACV,OAAO;IACL,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACD,SAAS;IACP,WAAW;IACX,eAAe,EACb,WAAW,QACZ;IACF;GACF;EACD,OAAO;GACL,gBAAgB;GAChB,sBAAsB;GACvB;EACF;CACF,CAAC;AAEF,MAAM,EAAE,kBAAkB,gBAAgB,mBAAmB,cAAc;AAG3E,MAAM,sBAAsB,iBAAiB,QAAQ,KAAK;AAE1D,MAAa,eAAe,EAAE,YAAY,MAAM,gBAAgB,KAAM,GAAG,YACvE,oBAAC;CAA+B;CAA0B;CAAe,GAAI;EAAS;AAGxF,MAAa,gBAAgB,YAAY,QAAQ,QAAQ,UAAU,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,yBAAyB,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAIlG,MAAa,gBAAgB,UAC3B,oBAAC,oCACC,oBAAC,mBAAgB,GAAI,QAAS,GACP;AAG3B,MAAa,kBAAkB,YAAY,QAAQ,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEjG,MAAa,sBAAsB,YAAY,QAAQ,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAE7G,MAAa,2BAA2B,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAIxG,MAAa,iBAAiB,YAAiD,OAAO,QACpF,oBAAC,+BACC,oBAAC;CAAyB,GAAI;CAAY;EAAO,GAC/B,CACpB;AAEF,MAAa,qBAAqB,YAAY,QAAQ,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,mBAAmB,YAAY,QAAQ,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,oBAAoB,YAAY,QAAQ,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAM,uBAAuB,YAAY,QAAQ,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAQzF,MAAa,gBAAgB,EAAE,YAAY,gBAAgB,SAAU,GAAG,WACtE,oBAAC;CAAmB;CAAW,GAAI;CAAM;CAAQ;WAC/C,oBAAC,wBAAsB,WAAgC;EAC/C;AAGZ,MAAa,iBAAiB,YAAY,QAAQ,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE9F,MAAa,sBAAsB,iBAAiB,QAAQ,aAAa;AAEzE,MAAaA,eAAaC"}
|
package/es/RadioGroup.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.mjs","names":[],"sources":["../src/RadioGroup.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 { forwardRef } from \"react\";\nimport { ark, RadioGroup, radioGroupAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst radioGroupRecipe = sva({\n slots: radioGroupAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n gap: \"small\",\n _vertical: {\n flexDirection: \"column\",\n },\n _horizontal: {\n flexDirection: \"row\",\n },\n },\n itemControl: {\n flexShrink: \"0\",\n background: \"surface.default\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"full\",\n borderWidth: \"2px\",\n width: \"medium\",\n height: \"medium\",\n outlineStyle: \"solid\",\n outlineWidth: \"4px\",\n outlineOffset: \"-6px\",\n outlineColor: \"surface.default\",\n transitionDuration: \"normal\",\n transitionProperty: \"background, border-color, box-shadow\",\n transitionTimingFunction: \"default\",\n _hover: {\n boxShadow: \"0 0 0 4px var(--shadow-color)\",\n boxShadowColor: \"surface.actionSubtle.hover.strong\",\n },\n _checked: {\n background: \"stroke.default\",\n borderColor: \"stroke.default\",\n },\n _disabled: {\n borderColor: \"stroke.disabled\",\n _hover: {\n borderColor: \"stroke.disabled\",\n boxShadow: \"none\",\n },\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n item: {\n display: \"flex\",\n alignItems: \"center\",\n cursor: \"pointer\",\n gap: \"xxsmall\",\n _disabled: {\n cursor: \"not-allowed\",\n },\n \"&:has(input:focus-visible)\": {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n itemText: {\n _hover: {\n color: \"text.action\",\n },\n _disabled: {\n color: \"text.disabled\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(radioGroupRecipe);\n\nexport interface RadioGroupRootProps extends RadioGroup.RootProps, StyledProps {}\n\nexport const RadioGroupRoot = withProvider(RadioGroup.Root, \"root\", {\n baseComponent: true,\n});\n\nexport const RadioGroupIndicator = withContext(RadioGroup.Indicator, \"indicator\", { baseComponent: true });\n\nexport const RadioGroupItemControl = withContext(RadioGroup.ItemControl, \"itemControl\", { baseComponent: true });\n\nexport const RadioGroupItem = withContext(RadioGroup.Item, \"item\", { baseComponent: true });\n\nconst InternalRadioGroupItemText = withContext(RadioGroup.ItemText, \"itemText\");\n\nconst InnerRadioGroupItemText = styled(ark.span, {}, { baseComponent: true });\n\ninterface RadioGroupItemTextProps
|
|
1
|
+
{"version":3,"file":"RadioGroup.mjs","names":[],"sources":["../src/RadioGroup.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 { forwardRef, type RefAttributes } from \"react\";\nimport { ark, RadioGroup, radioGroupAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst radioGroupRecipe = sva({\n slots: radioGroupAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexWrap: \"wrap\",\n position: \"relative\",\n gap: \"small\",\n _vertical: {\n flexDirection: \"column\",\n },\n _horizontal: {\n flexDirection: \"row\",\n },\n },\n itemControl: {\n flexShrink: \"0\",\n background: \"surface.default\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"full\",\n borderWidth: \"2px\",\n width: \"medium\",\n height: \"medium\",\n outlineStyle: \"solid\",\n outlineWidth: \"4px\",\n outlineOffset: \"-6px\",\n outlineColor: \"surface.default\",\n transitionDuration: \"normal\",\n transitionProperty: \"background, border-color, box-shadow\",\n transitionTimingFunction: \"default\",\n _hover: {\n boxShadow: \"0 0 0 4px var(--shadow-color)\",\n boxShadowColor: \"surface.actionSubtle.hover.strong\",\n },\n _checked: {\n background: \"stroke.default\",\n borderColor: \"stroke.default\",\n },\n _disabled: {\n borderColor: \"stroke.disabled\",\n _hover: {\n borderColor: \"stroke.disabled\",\n boxShadow: \"none\",\n },\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n item: {\n display: \"flex\",\n alignItems: \"center\",\n cursor: \"pointer\",\n gap: \"xxsmall\",\n _disabled: {\n cursor: \"not-allowed\",\n },\n \"&:has(input:focus-visible)\": {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n itemText: {\n _hover: {\n color: \"text.action\",\n },\n _disabled: {\n color: \"text.disabled\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(radioGroupRecipe);\n\nexport interface RadioGroupRootProps extends RadioGroup.RootProps, StyledProps {}\n\nexport const RadioGroupRoot = withProvider(RadioGroup.Root, \"root\", {\n baseComponent: true,\n});\n\nexport const RadioGroupIndicator = withContext(RadioGroup.Indicator, \"indicator\", { baseComponent: true });\n\nexport const RadioGroupItemControl = withContext(RadioGroup.ItemControl, \"itemControl\", { baseComponent: true });\n\nexport const RadioGroupItem = withContext(RadioGroup.Item, \"item\", { baseComponent: true });\n\nconst InternalRadioGroupItemText = withContext(RadioGroup.ItemText, \"itemText\");\n\nconst InnerRadioGroupItemText = styled(ark.span, {}, { baseComponent: true });\n\ninterface RadioGroupItemTextProps\n extends Omit<RadioGroup.ItemTextProps, \"color\">,\n TextProps,\n StyledProps,\n RefAttributes<HTMLParagraphElement> {}\n\nexport const RadioGroupItemText = ({\n textStyle = \"label.medium\",\n children,\n asChild,\n consumeCss,\n ...props\n}: RadioGroupItemTextProps) => (\n <InternalRadioGroupItemText asChild>\n <Text asChild consumeCss textStyle={textStyle} {...props}>\n <InnerRadioGroupItemText asChild={asChild} consumeCss={consumeCss}>\n {children}\n </InnerRadioGroupItemText>\n </Text>\n </InternalRadioGroupItemText>\n);\n\nexport const InternalRadioGroupLabel = withContext(RadioGroup.Label, \"label\");\n\nconst InnerRadioGroupLabel = styled(ark.div, {}, { baseComponent: true });\n\ninterface RadioGroupLabelProps\n extends Omit<RadioGroup.LabelProps, \"color\">,\n TextProps,\n StyledProps,\n RefAttributes<HTMLLabelElement> {}\n\nexport const RadioGroupLabel = forwardRef<HTMLLabelElement, RadioGroupLabelProps>(\n ({ textStyle = \"label.large\", fontWeight = \"bold\", children, asChild, consumeCss, ...props }, ref) => (\n <InternalRadioGroupLabel {...props} asChild ref={ref}>\n <Text textStyle={textStyle} fontWeight={fontWeight} asChild>\n <InnerRadioGroupLabel asChild={asChild} consumeCss={consumeCss}>\n {children}\n </InnerRadioGroupLabel>\n </Text>\n </InternalRadioGroupLabel>\n ),\n);\n\nexport const RadioGroupItemHiddenInput = RadioGroup.ItemHiddenInput;\n"],"mappings":";;;;;;;;AAeA,MAAM,mBAAmB,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,UAAU;GACV,UAAU;GACV,KAAK;GACL,WAAW,EACT,eAAe,UAChB;GACD,aAAa,EACX,eAAe,OAChB;GACF;EACD,aAAa;GACX,YAAY;GACZ,YAAY;GACZ,aAAa;GACb,cAAc;GACd,aAAa;GACb,OAAO;GACP,QAAQ;GACR,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;GACd,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,QAAQ;IACN,WAAW;IACX,gBAAgB;IACjB;GACD,UAAU;IACR,YAAY;IACZ,aAAa;IACd;GACD,WAAW;IACT,aAAa;IACb,QAAQ;KACN,aAAa;KACb,WAAW;KACZ;IACF;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACD,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,KAAK;GACL,WAAW,EACT,QAAQ,eACT;GACD,8BAA8B;IAC5B,SAAS;IACT,eAAe;IACf,cAAc;IACd,cAAc;IACf;GACF;EACD,UAAU;GACR,QAAQ,EACN,OAAO,eACR;GACD,WAAW;IACT,OAAO;IACP,QAAQ,EACN,OAAO,iBACR;IACF;GACF;EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,iBAAiB;AAI1E,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAClE,eAAe,MAChB,CAAC;AAEF,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAM,6BAA6B,YAAY,WAAW,UAAU,WAAW;AAE/E,MAAM,0BAA0B,OAAO,IAAI,MAAM,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAQ7E,MAAa,sBAAsB,EACjC,YAAY,gBACZ,UACA,SACA,WACA,GAAG,YAEH,oBAAC;CAA2B;WAC1B,oBAAC;EAAK;EAAQ;EAAsB;EAAW,GAAI;YACjD,oBAAC;GAAiC;GAAqB;GACpD;IACuB;GACrB;EACoB;AAG/B,MAAa,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAE7E,MAAM,uBAAuB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAQzE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,eAAe,aAAa,QAAQ,UAAU,SAAS,WAAY,GAAG,SAAS,QAC5F,oBAAC;CAAwB,GAAI;CAAO;CAAa;WAC/C,oBAAC;EAAgB;EAAuB;EAAY;YAClD,oBAAC;GAA8B;GAAqB;GACjD;IACoB;GAClB;EACiB,CAE7B;AAED,MAAa,4BAA4B,WAAW"}
|
package/es/Select.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.mjs","names":[],"sources":["../src/Select.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 { forwardRef, type ElementType } from \"react\";\nimport { Select, selectAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst selectRecipe = sva({\n slots: selectAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n gap: \"4xsmall\",\n alignItems: \"center\",\n },\n content: {\n display: \"flex\",\n gap: \"4xsmall\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n padding: \"xsmall\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _focusVisible: {\n outlineOffset: \"-1\",\n },\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 alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: \"xsmall\",\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color\",\n transitionTimingFunction: \"default\",\n _hover: {\n background: \"surface.hover\",\n },\n _selected: {\n background: \"surface.selected\",\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n _highlighted: {\n background: \"surface.hover\",\n _hover: {\n background: \"surface.hover\",\n },\n },\n _disabled: {\n cursor: \"not-allowed\",\n color: \"text.disabled\",\n background: \"surface.disabled\",\n _highlighted: {\n color: \"text.disabled\",\n background: \"surface.disabled\",\n },\n _selected: {\n color: \"text.disabled\",\n background: \"surface.disabled\",\n },\n _hover: {\n color: \"text.disabled\",\n background: \"surface.disabled\",\n },\n },\n },\n indicator: {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _open: {\n transform: \"rotate(180deg)\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\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 trigger: {\n justifyContent: \"space-between\",\n width: \"surface.small\",\n _ariaInvalid: {\n boxShadowColor: \"stroke.error\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n valueText: {\n textAlign: \"start\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(selectRecipe);\n\nexport interface SelectRootProps<T extends Select.CollectionItem
|
|
1
|
+
{"version":3,"file":"Select.mjs","names":[],"sources":["../src/Select.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 { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Select, selectAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst selectRecipe = sva({\n slots: selectAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n gap: \"4xsmall\",\n alignItems: \"center\",\n },\n content: {\n display: \"flex\",\n gap: \"4xsmall\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n padding: \"xsmall\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _focusVisible: {\n outlineOffset: \"-1\",\n },\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 alignItems: \"center\",\n justifyContent: \"space-between\",\n padding: \"xsmall\",\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color\",\n transitionTimingFunction: \"default\",\n _hover: {\n background: \"surface.hover\",\n },\n _selected: {\n background: \"surface.selected\",\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n _highlighted: {\n background: \"surface.hover\",\n _hover: {\n background: \"surface.hover\",\n },\n },\n _disabled: {\n cursor: \"not-allowed\",\n color: \"text.disabled\",\n background: \"surface.disabled\",\n _highlighted: {\n color: \"text.disabled\",\n background: \"surface.disabled\",\n },\n _selected: {\n color: \"text.disabled\",\n background: \"surface.disabled\",\n },\n _hover: {\n color: \"text.disabled\",\n background: \"surface.disabled\",\n },\n },\n },\n indicator: {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _open: {\n transform: \"rotate(180deg)\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\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 trigger: {\n justifyContent: \"space-between\",\n width: \"surface.small\",\n _ariaInvalid: {\n boxShadowColor: \"stroke.error\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n valueText: {\n textAlign: \"start\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(selectRecipe);\n\nexport interface SelectRootProps<T extends Select.CollectionItem>\n extends Select.RootProps<T>,\n StyledProps,\n RefAttributes<HTMLDivElement> {}\nconst InternalSelectRoot = withProvider<ElementType<SelectRootProps<Select.CollectionItem>>>(Select.Root, \"root\", {\n baseComponent: true,\n});\n\nexport const SelectRoot = <T extends Select.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: SelectRootProps<T>) => <InternalSelectRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n\nexport const SelectClearTrigger = withContext(Select.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport const SelectContentStandalone = withContext(Select.Content, \"content\", { baseComponent: true });\n\ninterface SelectContentProps extends Select.ContentProps, StyledProps {}\n\nexport const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>((props, ref) => (\n <SelectPositioner>\n <SelectContentStandalone ref={ref} {...props} />\n </SelectPositioner>\n));\n\nexport const SelectControl = withContext(Select.Control, \"control\", { baseComponent: true });\n\nexport const SelectIndicator = withContext(Select.Indicator, \"indicator\", { baseComponent: true });\n\ninterface SelectItemGroupLabelProps\n extends Omit<Select.ItemGroupLabelProps, \"color\">,\n StyledProps,\n TextProps,\n RefAttributes<HTMLDivElement> {}\n\nexport const SelectItemGroupLabel = forwardRef<HTMLDivElement, SelectItemGroupLabelProps>(\n ({ children, ...props }, ref) => (\n <InternalSelectItemGroupLabel asChild ref={ref} {...props}>\n <Label asChild consumeCss>\n <div>{children}</div>\n </Label>\n </InternalSelectItemGroupLabel>\n ),\n);\n\nconst InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, \"itemGroupLabel\");\n\nexport const SelectItemGroup = withContext(Select.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport const SelectItemIndicator = withContext(Select.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport const SelectItem = withContext(Select.Item, \"item\", {\n baseComponent: true,\n});\n\nexport const SelectItemText = withContext(Select.ItemText, \"itemText\", { baseComponent: true });\n\nconst InternalSelectLabel = withContext(Select.Label, \"label\");\n\ninterface SelectLabelProps\n extends Omit<Select.LabelProps, \"color\">,\n StyledProps,\n TextProps,\n RefAttributes<HTMLLabelElement> {}\n\nexport const SelectLabel = forwardRef<HTMLLabelElement, SelectLabelProps>(({ children, ...props }, ref) => (\n <InternalSelectLabel asChild ref={ref} {...props}>\n <Label>{children}</Label>\n </InternalSelectLabel>\n));\n\nexport const SelectPositioner = withContext(Select.Positioner, \"positioner\", { baseComponent: true });\n\nexport const SelectTrigger = withContext(Select.Trigger, \"trigger\", { baseComponent: true });\n\nexport const SelectValueText = withContext(Select.ValueText, \"valueText\", { baseComponent: true });\n\nexport const SelectList = withContext(Select.List, \"list\", {\n baseComponent: true,\n});\n\nexport const SelectHiddenSelect = Select.HiddenSelect;\n"],"mappings":"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"}
|
package/es/Slider.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.mjs","names":[],"sources":["../src/Slider.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 { Slider, sliderAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst sliderRecipe = sva({\n slots: sliderAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n width: \"100%\",\n },\n control: {\n position: \"relative\",\n display: \"flex\",\n _vertical: {\n flexDirection: \"column\",\n },\n alignItems: \"center\",\n height: \"medium\",\n },\n track: {\n background: \"surface.disabled\",\n overflow: \"hidden\",\n flex: \"1\",\n _vertical: {\n width: \"4xsmall\",\n },\n _horizontal: {\n height: \"4xsmall\",\n },\n },\n range: {\n background: \"surface.action\",\n _vertical: {\n width: \"4xsmall\",\n },\n _horizontal: {\n height: \"4xsmall\",\n },\n },\n thumb: {\n background: \"surface.action\",\n borderRadius: \"full\",\n outline: \"none\",\n zIndex: \"1\",\n height: \"medium\",\n width: \"medium\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"default\",\n transitionProperty: \"background\",\n _hover: {\n background: \"surface.action.hover\",\n },\n _active: {\n background: \"surface.action.active\",\n },\n _focusVisible: {\n border: \"2px solid\",\n borderColor: \"background.default\",\n outline: \"3px solid\",\n outlineColor: \"surface.action\",\n outlineOffset: \"0px\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(sliderRecipe);\n\nexport interface SliderRootProps extends Slider.RootProps, StyledProps {}\n\nexport const SliderRoot = withProvider(Slider.Root, \"root\", { baseComponent: true });\n\nexport const SliderControl = withContext(Slider.Control, \"control\", { baseComponent: true });\n\nexport const SliderTrack = withContext(Slider.Track, \"track\", { baseComponent: true });\n\nexport const SliderRange = withContext(Slider.Range, \"range\", { baseComponent: true });\n\nexport const SliderThumb = withContext(Slider.Thumb, \"thumb\", { baseComponent: true });\n\nconst InternalSliderLabel = withContext(Slider.Label, \"label\");\n\ninterface SliderLabelProps
|
|
1
|
+
{"version":3,"file":"Slider.mjs","names":[],"sources":["../src/Slider.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 type { RefAttributes } from \"react\";\nimport { Slider, sliderAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Label } from \"./Label\";\nimport { type TextProps } from \"./Text\";\n\nconst sliderRecipe = sva({\n slots: sliderAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n width: \"100%\",\n },\n control: {\n position: \"relative\",\n display: \"flex\",\n _vertical: {\n flexDirection: \"column\",\n },\n alignItems: \"center\",\n height: \"medium\",\n },\n track: {\n background: \"surface.disabled\",\n overflow: \"hidden\",\n flex: \"1\",\n _vertical: {\n width: \"4xsmall\",\n },\n _horizontal: {\n height: \"4xsmall\",\n },\n },\n range: {\n background: \"surface.action\",\n _vertical: {\n width: \"4xsmall\",\n },\n _horizontal: {\n height: \"4xsmall\",\n },\n },\n thumb: {\n background: \"surface.action\",\n borderRadius: \"full\",\n outline: \"none\",\n zIndex: \"1\",\n height: \"medium\",\n width: \"medium\",\n transitionDuration: \"fast\",\n transitionTimingFunction: \"default\",\n transitionProperty: \"background\",\n _hover: {\n background: \"surface.action.hover\",\n },\n _active: {\n background: \"surface.action.active\",\n },\n _focusVisible: {\n border: \"2px solid\",\n borderColor: \"background.default\",\n outline: \"3px solid\",\n outlineColor: \"surface.action\",\n outlineOffset: \"0px\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(sliderRecipe);\n\nexport interface SliderRootProps extends Slider.RootProps, StyledProps {}\n\nexport const SliderRoot = withProvider(Slider.Root, \"root\", { baseComponent: true });\n\nexport const SliderControl = withContext(Slider.Control, \"control\", { baseComponent: true });\n\nexport const SliderTrack = withContext(Slider.Track, \"track\", { baseComponent: true });\n\nexport const SliderRange = withContext(Slider.Range, \"range\", { baseComponent: true });\n\nexport const SliderThumb = withContext(Slider.Thumb, \"thumb\", { baseComponent: true });\n\nconst InternalSliderLabel = withContext(Slider.Label, \"label\");\n\ninterface SliderLabelProps\n extends Omit<Slider.LabelProps, \"color\">,\n TextProps,\n StyledProps,\n RefAttributes<HTMLLabelElement> {}\n\nexport const SliderLabel = ({ textStyle = \"label.medium\", ...props }: SliderLabelProps) => (\n <InternalSliderLabel asChild>\n <Label textStyle={textStyle} {...props} />\n </InternalSliderLabel>\n);\n\nexport const SliderHiddenInput = Slider.HiddenInput;\n"],"mappings":";;;;;;;AAgBA,MAAM,eAAe,IAAI;CACvB,OAAO,cAAc,MAAM;CAC3B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;GACR;EACD,SAAS;GACP,UAAU;GACV,SAAS;GACT,WAAW,EACT,eAAe,UAChB;GACD,YAAY;GACZ,QAAQ;GACT;EACD,OAAO;GACL,YAAY;GACZ,UAAU;GACV,MAAM;GACN,WAAW,EACT,OAAO,WACR;GACD,aAAa,EACX,QAAQ,WACT;GACF;EACD,OAAO;GACL,YAAY;GACZ,WAAW,EACT,OAAO,WACR;GACD,aAAa,EACX,QAAQ,WACT;GACF;EACD,OAAO;GACL,YAAY;GACZ,cAAc;GACd,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,oBAAoB;GACpB,0BAA0B;GAC1B,oBAAoB;GACpB,QAAQ,EACN,YAAY,wBACb;GACD,SAAS,EACP,YAAY,yBACb;GACD,eAAe;IACb,QAAQ;IACR,aAAa;IACb,SAAS;IACT,cAAc;IACd,eAAe;IAChB;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,aAAa;AAItE,MAAa,aAAa,aAAa,OAAO,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAEpF,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAEtF,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAEtF,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAEtF,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAQ9D,MAAa,eAAe,EAAE,YAAY,eAAgB,GAAG,YAC3D,oBAAC;CAAoB;WACnB,oBAAC;EAAiB;EAAW,GAAI;GAAS;EACtB;AAGxB,MAAa,oBAAoB,OAAO"}
|
package/es/Switch.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.mjs","names":[],"sources":["../src/Switch.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 { Switch, switchAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst switchRecipe = sva({\n slots: switchAnatomy.keys(),\n base: {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n position: \"relative\",\n gap: \"xxsmall\",\n _focus: {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n control: {\n display: \"inline-flex\",\n alignItems: \"center\",\n background: \"surface.disabled.strong\",\n width: \"xxlarge\",\n padding: \"1\",\n borderRadius: \"medium\",\n cursor: \"pointer\",\n flexShrink: \"0\",\n transitionDuration: \"fast\",\n transitionProperty: \"background\",\n transitionTimingFunction: \"default\",\n _checked: {\n background: \"surface.action.active\",\n },\n _disabled: {\n background: \"surface.disabled\",\n cursor: \"not-allowed\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n thumb: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"icon.onAction\",\n borderRadius: \"full\",\n boxShadow: \"small\",\n transitionDuration: \"fast\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n width: \"10\",\n height: \"10\",\n textStyle: \"label.xsmall\",\n fontWeight: \"bold\",\n _hover: {\n transform: \"translateX(20%)\",\n _disabled: {\n transform: \"translateX(0)\",\n },\n _motionReduce: {\n transform: \"translateX(0)\",\n },\n },\n _checked: {\n transform: \"translateX(120%)\",\n _hover: {\n transform: \"translateX(100%)\",\n _disabled: {\n transform: \"translateX(120%)\",\n },\n _motionReduce: {\n transform: \"translateX(120%)\",\n },\n },\n },\n },\n label: {\n color: \"text.strong\",\n transitionDuration: \"fast\",\n transitionProperty: \"color\",\n transitionTimingFunction: \"default\",\n _hover: {\n color: \"text.action\",\n },\n _disabled: {\n color: \"text.disabled\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(switchRecipe);\n\nexport type SwitchVariantProps = NonNullable<RecipeVariantProps<typeof switchRecipe>>;\n\nexport interface SwitchRootProps extends Switch.RootProps, StyledProps, SwitchVariantProps {}\n\nexport const SwitchRoot = withProvider(Switch.Root, \"root\", { baseComponent: true });\n\nexport const SwitchControl = withContext(Switch.Control, \"control\", { baseComponent: true });\n\nexport const SwitchThumb = withContext(Switch.Thumb, \"thumb\", { baseComponent: true });\n\nconst InternalSwitchLabel = withContext(Switch.Label, \"label\");\n\ninterface SwitchLabelProps
|
|
1
|
+
{"version":3,"file":"Switch.mjs","names":[],"sources":["../src/Switch.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 type { RefAttributes } from \"react\";\nimport { Switch, switchAnatomy } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst switchRecipe = sva({\n slots: switchAnatomy.keys(),\n base: {\n root: {\n display: \"inline-flex\",\n alignItems: \"center\",\n position: \"relative\",\n gap: \"xxsmall\",\n _focus: {\n outline: \"2px solid\",\n outlineOffset: \"4xsmall\",\n outlineColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n },\n },\n control: {\n display: \"inline-flex\",\n alignItems: \"center\",\n background: \"surface.disabled.strong\",\n width: \"xxlarge\",\n padding: \"1\",\n borderRadius: \"medium\",\n cursor: \"pointer\",\n flexShrink: \"0\",\n transitionDuration: \"fast\",\n transitionProperty: \"background\",\n transitionTimingFunction: \"default\",\n _checked: {\n background: \"surface.action.active\",\n },\n _disabled: {\n background: \"surface.disabled\",\n cursor: \"not-allowed\",\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n thumb: {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"icon.onAction\",\n borderRadius: \"full\",\n boxShadow: \"small\",\n transitionDuration: \"fast\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n width: \"10\",\n height: \"10\",\n textStyle: \"label.xsmall\",\n fontWeight: \"bold\",\n _hover: {\n transform: \"translateX(20%)\",\n _disabled: {\n transform: \"translateX(0)\",\n },\n _motionReduce: {\n transform: \"translateX(0)\",\n },\n },\n _checked: {\n transform: \"translateX(120%)\",\n _hover: {\n transform: \"translateX(100%)\",\n _disabled: {\n transform: \"translateX(120%)\",\n },\n _motionReduce: {\n transform: \"translateX(120%)\",\n },\n },\n },\n },\n label: {\n color: \"text.strong\",\n transitionDuration: \"fast\",\n transitionProperty: \"color\",\n transitionTimingFunction: \"default\",\n _hover: {\n color: \"text.action\",\n },\n _disabled: {\n color: \"text.disabled\",\n _hover: {\n color: \"text.disabled\",\n },\n },\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(switchRecipe);\n\nexport type SwitchVariantProps = NonNullable<RecipeVariantProps<typeof switchRecipe>>;\n\nexport interface SwitchRootProps extends Switch.RootProps, StyledProps, SwitchVariantProps {}\n\nexport const SwitchRoot = withProvider(Switch.Root, \"root\", { baseComponent: true });\n\nexport const SwitchControl = withContext(Switch.Control, \"control\", { baseComponent: true });\n\nexport const SwitchThumb = withContext(Switch.Thumb, \"thumb\", { baseComponent: true });\n\nconst InternalSwitchLabel = withContext(Switch.Label, \"label\");\n\ninterface SwitchLabelProps\n extends Omit<Switch.LabelProps, \"color\">,\n TextProps,\n StyledProps,\n RefAttributes<HTMLSpanElement> {}\n\nexport const SwitchLabel = ({ textStyle = \"label.medium\", children, ...props }: SwitchLabelProps) => (\n <InternalSwitchLabel asChild {...props}>\n <Text asChild consumeCss textStyle={textStyle}>\n <span>{children}</span>\n </Text>\n </InternalSwitchLabel>\n);\n\nexport const SwitchHiddenInput = Switch.HiddenInput;\n"],"mappings":";;;;;;;AAeA,MAAM,eAAe,IAAI;CACvB,OAAO,cAAc,MAAM;CAC3B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,UAAU;GACV,KAAK;GACL,QAAQ;IACN,SAAS;IACT,eAAe;IACf,cAAc;IACd,cAAc;IACf;GACF;EACD,SAAS;GACP,SAAS;GACT,YAAY;GACZ,YAAY;GACZ,OAAO;GACP,SAAS;GACT,cAAc;GACd,QAAQ;GACR,YAAY;GACZ,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,UAAU,EACR,YAAY,yBACb;GACD,WAAW;IACT,YAAY;IACZ,QAAQ;IACT;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACD,OAAO;GACL,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,YAAY;GACZ,cAAc;GACd,WAAW;GACX,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,OAAO;GACP,QAAQ;GACR,WAAW;GACX,YAAY;GACZ,QAAQ;IACN,WAAW;IACX,WAAW,EACT,WAAW,iBACZ;IACD,eAAe,EACb,WAAW,iBACZ;IACF;GACD,UAAU;IACR,WAAW;IACX,QAAQ;KACN,WAAW;KACX,WAAW,EACT,WAAW,oBACZ;KACD,eAAe,EACb,WAAW,oBACZ;KACF;IACF;GACF;EACD,OAAO;GACL,OAAO;GACP,oBAAoB;GACpB,oBAAoB;GACpB,0BAA0B;GAC1B,QAAQ,EACN,OAAO,eACR;GACD,WAAW;IACT,OAAO;IACP,QAAQ,EACN,OAAO,iBACR;IACF;GACD,eAAe;IACb,YAAY;IACZ,oBAAoB;IACrB;GACF;EACF;CACF,CAAC;AAEF,MAAM,EAAE,cAAc,gBAAgB,mBAAmB,aAAa;AAMtE,MAAa,aAAa,aAAa,OAAO,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAEpF,MAAa,gBAAgB,YAAY,OAAO,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,cAAc,YAAY,OAAO,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAEtF,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAQ9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,SAAU,GAAG,YACrE,oBAAC;CAAoB;CAAQ,GAAI;WAC/B,oBAAC;EAAK;EAAQ;EAAsB;YAClC,oBAAC,UAAM,WAAgB;GAClB;EACa;AAGxB,MAAa,oBAAoB,OAAO"}
|