@ndla/primitives 1.0.124-alpha.0 → 1.0.126-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/panda.buildinfo.json +8 -0
- package/dist/styles.css +119 -7
- package/es/Accordion.mjs +1 -2
- package/es/Accordion.mjs.map +1 -1
- package/es/ArticleLists.mjs +1 -2
- package/es/ArticleLists.mjs.map +1 -1
- package/es/Badge.mjs +1 -2
- package/es/Badge.mjs.map +1 -1
- package/es/BlockQuote.mjs +1 -2
- package/es/BlockQuote.mjs.map +1 -1
- package/es/Button.mjs +1 -2
- package/es/Button.mjs.map +1 -1
- package/es/Card/Card.mjs +3 -5
- package/es/Card/Card.mjs.map +1 -1
- package/es/Checkbox.mjs +1 -2
- package/es/Checkbox.mjs.map +1 -1
- package/es/Combobox.mjs +1 -2
- package/es/Combobox.mjs.map +1 -1
- package/es/DatePicker.mjs +1 -2
- package/es/DatePicker.mjs.map +1 -1
- package/es/Dialog.mjs +1 -2
- package/es/Dialog.mjs.map +1 -1
- package/es/ErrorMessage/ErrorMessage.mjs +5 -8
- package/es/ErrorMessage/ErrorMessage.mjs.map +1 -1
- package/es/ExpandableBox.mjs +1 -2
- package/es/ExpandableBox.mjs.map +1 -1
- package/es/Field.mjs +1 -2
- package/es/Field.mjs.map +1 -1
- package/es/FieldErrorMessage.mjs +1 -2
- package/es/FieldErrorMessage.mjs.map +1 -1
- package/es/FieldHelper.mjs +1 -2
- package/es/FieldHelper.mjs.map +1 -1
- package/es/Figure.mjs +31 -14
- package/es/Figure.mjs.map +1 -1
- package/es/FileUpload.mjs +1 -2
- package/es/FileUpload.mjs.map +1 -1
- package/es/FramedContent.mjs +1 -2
- package/es/FramedContent.mjs.map +1 -1
- package/es/Hero.mjs +1 -2
- package/es/Hero.mjs.map +1 -1
- package/es/Image.mjs +1 -2
- package/es/Image.mjs.map +1 -1
- package/es/Input.mjs +1 -2
- package/es/Input.mjs.map +1 -1
- package/es/Label.mjs +1 -2
- package/es/Label.mjs.map +1 -1
- package/es/Layout/PageContainer.mjs +1 -2
- package/es/Layout/PageContainer.mjs.map +1 -1
- package/es/Layout/PageContent.mjs +1 -2
- package/es/Layout/PageContent.mjs.map +1 -1
- package/es/ListItem/ListItem.mjs +5 -16
- package/es/ListItem/ListItem.mjs.map +1 -1
- package/es/Menu.mjs +1 -2
- package/es/Menu.mjs.map +1 -1
- package/es/MessageBox.mjs +1 -2
- package/es/MessageBox.mjs.map +1 -1
- package/es/NdlaLogo.mjs +1 -2
- package/es/NdlaLogo.mjs.map +1 -1
- package/es/Pagination.mjs +1 -2
- package/es/Pagination.mjs.map +1 -1
- package/es/Popover.mjs +1 -2
- package/es/Popover.mjs.map +1 -1
- package/es/RadioGroup.mjs +1 -2
- package/es/RadioGroup.mjs.map +1 -1
- package/es/Select.mjs +1 -2
- package/es/Select.mjs.map +1 -1
- package/es/Skeleton.mjs +1 -2
- package/es/Skeleton.mjs.map +1 -1
- package/es/Slider.mjs +1 -2
- package/es/Slider.mjs.map +1 -1
- package/es/Spinner.mjs +1 -2
- package/es/Spinner.mjs.map +1 -1
- package/es/Switch.mjs +1 -2
- package/es/Switch.mjs.map +1 -1
- package/es/Table.mjs +1 -2
- package/es/Table.mjs.map +1 -1
- package/es/Tabs.mjs +1 -2
- package/es/Tabs.mjs.map +1 -1
- package/es/TagsInput.mjs +1 -2
- package/es/TagsInput.mjs.map +1 -1
- package/es/Text.mjs +1 -2
- package/es/Text.mjs.map +1 -1
- package/es/Toast.mjs +1 -2
- package/es/Toast.mjs.map +1 -1
- package/es/ToggleGroup.mjs +1 -2
- package/es/ToggleGroup.mjs.map +1 -1
- package/es/Tooltip.mjs +1 -2
- package/es/Tooltip.mjs.map +1 -1
- package/es/Tree/Tree.mjs +1 -2
- package/es/Tree/Tree.mjs.map +1 -1
- package/es/index.mjs +1 -2
- package/lib/Accordion.js +1 -2
- package/lib/Accordion.js.map +1 -1
- package/lib/ArticleLists.js +1 -2
- package/lib/ArticleLists.js.map +1 -1
- package/lib/Badge.js +1 -2
- package/lib/Badge.js.map +1 -1
- package/lib/BlockQuote.js +1 -2
- package/lib/BlockQuote.js.map +1 -1
- package/lib/Button.js +2 -3
- package/lib/Button.js.map +1 -1
- package/lib/Card/Card.js +5 -7
- package/lib/Card/Card.js.map +1 -1
- package/lib/Checkbox.js +2 -3
- package/lib/Checkbox.js.map +1 -1
- package/lib/Combobox.js +3 -4
- package/lib/Combobox.js.map +1 -1
- package/lib/DatePicker.js +2 -3
- package/lib/DatePicker.js.map +1 -1
- package/lib/Dialog.js +2 -3
- package/lib/Dialog.js.map +1 -1
- package/lib/ErrorMessage/ErrorMessage.js +6 -9
- package/lib/ErrorMessage/ErrorMessage.js.map +1 -1
- package/lib/ExpandableBox.js +1 -2
- package/lib/ExpandableBox.js.map +1 -1
- package/lib/Field.js +1 -2
- package/lib/Field.js.map +1 -1
- package/lib/FieldErrorMessage.js +1 -2
- package/lib/FieldErrorMessage.js.map +1 -1
- package/lib/FieldHelper.js +1 -2
- package/lib/FieldHelper.js.map +1 -1
- package/lib/Figure.d.ts +20 -0
- package/lib/Figure.js +31 -14
- package/lib/Figure.js.map +1 -1
- package/lib/FileUpload.js +3 -4
- package/lib/FileUpload.js.map +1 -1
- package/lib/FramedContent.js +1 -2
- package/lib/FramedContent.js.map +1 -1
- package/lib/Hero.js +2 -4
- package/lib/Hero.js.map +1 -1
- package/lib/Image.js +1 -2
- package/lib/Image.js.map +1 -1
- package/lib/Input.js +1 -2
- package/lib/Input.js.map +1 -1
- package/lib/Label.js +1 -2
- package/lib/Label.js.map +1 -1
- package/lib/Layout/PageContainer.js +3 -4
- package/lib/Layout/PageContainer.js.map +1 -1
- package/lib/Layout/PageContent.js +1 -2
- package/lib/Layout/PageContent.js.map +1 -1
- package/lib/ListItem/ListItem.js +5 -7
- package/lib/ListItem/ListItem.js.map +1 -1
- package/lib/Menu.js +2 -3
- package/lib/Menu.js.map +1 -1
- package/lib/MessageBox.js +1 -2
- package/lib/MessageBox.js.map +1 -1
- package/lib/NdlaLogo.js +2 -3
- package/lib/NdlaLogo.js.map +1 -1
- package/lib/Pagination.js +2 -4
- package/lib/Pagination.js.map +1 -1
- package/lib/Popover.js +2 -3
- package/lib/Popover.js.map +1 -1
- package/lib/RadioGroup.js +2 -3
- package/lib/RadioGroup.js.map +1 -1
- package/lib/Select.js +2 -3
- package/lib/Select.js.map +1 -1
- package/lib/Skeleton.js +2 -4
- package/lib/Skeleton.js.map +1 -1
- package/lib/Slider.js +2 -3
- package/lib/Slider.js.map +1 -1
- package/lib/Spinner.js +1 -2
- package/lib/Spinner.js.map +1 -1
- package/lib/Switch.js +2 -3
- package/lib/Switch.js.map +1 -1
- package/lib/Table.js +2 -4
- package/lib/Table.js.map +1 -1
- package/lib/Tabs.js +1 -2
- package/lib/Tabs.js.map +1 -1
- package/lib/TagsInput.js +2 -3
- package/lib/TagsInput.js.map +1 -1
- package/lib/Text.js +1 -2
- package/lib/Text.js.map +1 -1
- package/lib/Toast.js +2 -3
- package/lib/Toast.js.map +1 -1
- package/lib/ToggleGroup.js +2 -4
- package/lib/ToggleGroup.js.map +1 -1
- package/lib/Tooltip.js +1 -2
- package/lib/Tooltip.js.map +1 -1
- package/lib/Tree/Tree.js +2 -3
- package/lib/Tree/Tree.js.map +1 -1
- package/lib/index.js +56 -57
- package/package.json +5 -5
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 { Combobox, comboboxAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n slots: comboboxAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"4xsmall\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, border-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled\",\n color: \"text.disabled\",\n },\n },\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _checked: {\n background: \"surface.selected\",\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n },\n trigger: {\n \"& svg\": {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n itemIndicator: {\n color: \"stroke.default\",\n },\n itemText: {\n _checked: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n },\n defaultVariants: {\n context: \"standalone\",\n variant: \"simple\",\n },\n variants: {\n context: {\n standalone: {\n content: {\n boxShadow: \"large\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n },\n composite: {},\n },\n variant: {\n simple: {\n item: {\n padding: \"xsmall\",\n borderRadius: \"xsmall\",\n },\n content: {\n gap: \"4xsmall\",\n },\n },\n complex: {},\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n extends StyledProps, Combobox.RootProps<T>, ComboboxVariantProps, RefAttributes<HTMLDivElement> {\n translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n Combobox.Root,\n \"root\",\n { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: ComboboxRootProps<T>) => {\n return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n <ComboboxPositioner>\n <ComboboxContentStandalone ref={ref} {...props} />\n </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n extends Omit<Combobox.ItemGroupLabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n children,\n textStyle = \"label.small\",\n fontWeight = \"bold\",\n ...props\n}: ComboboxItemGroupLabelProps) => (\n <InternalComboboxItemGroupLabel asChild>\n <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: ComboboxItemTextProps) => (\n <InternalComboboxItemText asChild>\n <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n <InternalComboboxLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;;;;;AAiJA,MAAM,EAAE,cAAc,gBAAgB,mBAjIf,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,CAEsE;AASxE,MAAM,uBAAuB,aAC3B,SAAS,MACT,QACA,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,gBAAmD,EAC9D,YAAY,MACZ,gBAAgB,MAChB,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;AAK7F,MAAa,0BAA0B,EACrC,UACA,YAAY,eACZ,aAAa,QACb,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;AAK3E,MAAa,oBAAoB,EAC/B,YAAY,gBACZ,aAAa,QACb,UACA,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;AAKlE,MAAa,iBAAiB,EAAE,YAAY,gBAAgB,aAAa,QAAQ,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 { Combobox, comboboxAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariantProps, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type ElementType, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport { Text, type TextProps } from \"./Text\";\n\nconst comboboxRecipe = sva({\n slots: comboboxAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n },\n control: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"4xsmall\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: \"dropdown\",\n background: \"surface.default\",\n overflowY: \"auto\",\n maxHeight: \"min(token(spacing.surface.xsmall), 45vh)\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n item: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n cursor: \"pointer\",\n transitionDuration: \"fast\",\n transitionProperty: \"background, color, border-color\",\n transitionTimingFunction: \"default\",\n background: \"surface.default\",\n _disabled: {\n cursor: \"not-allowed\",\n background: \"surface.disabled\",\n color: \"text.disabled\",\n _hover: {\n background: \"surface.disabled\",\n color: \"text.disabled\",\n },\n },\n _hover: {\n background: \"surface.hover\",\n },\n _highlighted: {\n background: \"surface.hover\",\n },\n _checked: {\n background: \"surface.selected\",\n _highlighted: {\n background: \"surface.hover\",\n },\n },\n },\n trigger: {\n \"& svg\": {\n color: \"icon.default\",\n transformOrigin: \"center\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n },\n itemIndicator: {\n color: \"stroke.default\",\n },\n itemText: {\n _checked: {\n textDecoration: \"underline\",\n },\n _highlighted: {\n textDecoration: \"underline\",\n },\n },\n itemGroup: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4xsmall\",\n },\n },\n defaultVariants: {\n context: \"standalone\",\n variant: \"simple\",\n },\n variants: {\n context: {\n standalone: {\n content: {\n boxShadow: \"large\",\n borderRadius: \"xsmall\",\n padding: \"xsmall\",\n },\n },\n composite: {},\n },\n variant: {\n simple: {\n item: {\n padding: \"xsmall\",\n borderRadius: \"xsmall\",\n },\n content: {\n gap: \"4xsmall\",\n },\n },\n complex: {},\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(comboboxRecipe);\n\nexport type ComboboxVariantProps = NonNullable<RecipeVariantProps<typeof comboboxRecipe>>;\n\nexport interface ComboboxRootProps<T extends Combobox.CollectionItem>\n extends StyledProps, Combobox.RootProps<T>, ComboboxVariantProps, RefAttributes<HTMLDivElement> {\n translations: Combobox.RootProps<T>[\"translations\"];\n}\n\nconst InternalComboboxRoot = withProvider<ElementType<ComboboxRootProps<Combobox.CollectionItem>>>(\n Combobox.Root,\n \"root\",\n { baseComponent: true },\n);\n\nexport const ComboboxRoot = <T extends Combobox.CollectionItem>({\n lazyMount = true,\n unmountOnExit = true,\n ...props\n}: ComboboxRootProps<T>) => {\n return <InternalComboboxRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />;\n};\n\nexport interface ComboboxClearTriggerProps extends Combobox.ClearTriggerProps, StyledProps {}\n\nexport const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, \"clearTrigger\", { baseComponent: true });\n\nexport interface ComboboxContentProps extends Combobox.ContentProps, StyledProps {}\n\nexport const ComboboxContentStandalone = withContext(Combobox.Content, \"content\", { baseComponent: true });\n\nexport const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>((props, ref) => (\n <ComboboxPositioner>\n <ComboboxContentStandalone ref={ref} {...props} />\n </ComboboxPositioner>\n));\n\nexport interface ComboboxControlProps extends Combobox.ControlProps, StyledProps {}\n\nexport const ComboboxControl = withContext(Combobox.Control, \"control\", { baseComponent: true });\n\nexport interface ComboboxInputProps extends Combobox.InputProps, StyledProps {}\n\nexport const ComboboxInput = withContext(Combobox.Input, \"input\", { baseComponent: true });\n\nconst InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, \"itemGroupLabel\");\n\nexport interface ComboboxItemGroupLabelProps\n extends Omit<Combobox.ItemGroupLabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemGroupLabel = ({\n children,\n textStyle = \"label.small\",\n fontWeight = \"bold\",\n ...props\n}: ComboboxItemGroupLabelProps) => (\n <InternalComboboxItemGroupLabel asChild>\n <Text asChild consumeCss textStyle={textStyle} fontWeight={fontWeight} {...props}>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemGroupLabel>\n);\n\nexport interface ComboboxItemGroupProps extends Combobox.ItemGroupProps, StyledProps {}\n\nexport const ComboboxItemGroup = withContext(Combobox.ItemGroup, \"itemGroup\", { baseComponent: true });\n\nexport interface ComboboxItemIndicatorProps extends Combobox.ItemIndicatorProps, StyledProps {}\n\nexport const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, \"itemIndicator\", { baseComponent: true });\n\nexport interface ComboboxItemProps extends Combobox.ItemProps, StyledProps {}\n\nexport const ComboboxItem = withContext(Combobox.Item, \"item\", { baseComponent: true });\n\nconst InternalComboboxItemText = withContext(Combobox.ItemText, \"itemText\");\n\nexport interface ComboboxItemTextProps\n extends Omit<Combobox.ItemTextProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLDivElement> {}\n\nexport const ComboboxItemText = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n children,\n ...props\n}: ComboboxItemTextProps) => (\n <InternalComboboxItemText asChild>\n <Text {...props} textStyle={textStyle} fontWeight={fontWeight} asChild consumeCss>\n <div>{children}</div>\n </Text>\n </InternalComboboxItemText>\n);\n\nconst InternalComboboxLabel = withContext(Combobox.Label, \"label\");\n\nexport interface ComboboxLabelProps\n extends Omit<Combobox.LabelProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLLabelElement> {}\n\nexport const ComboboxLabel = ({ textStyle = \"label.medium\", fontWeight = \"bold\", ...props }: ComboboxLabelProps) => (\n <InternalComboboxLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalComboboxLabel>\n);\n\nexport interface ComboboxPositionerProps extends Combobox.PositionerProps, StyledProps {}\n\nexport const ComboboxPositioner = withContext(Combobox.Positioner, \"positioner\", { baseComponent: true });\n\nexport interface ComboboxTriggerProps extends Combobox.TriggerProps, StyledProps {}\n\nexport const ComboboxTrigger = withContext(Combobox.Trigger, \"trigger\", { baseComponent: true });\n\nexport interface ComboboxListProps extends Combobox.ListProps, StyledProps {}\n\nexport const ComboboxList = withContext(Combobox.List, \"list\", { baseComponent: true });\n"],"mappings":"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"}
|
package/es/DatePicker.mjs
CHANGED
|
@@ -4,7 +4,6 @@ import { sva } from "@ndla/styled-system/css";
|
|
|
4
4
|
import { createStyleContext } from "@ndla/styled-system/jsx";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
|
-
|
|
8
7
|
//#region src/DatePicker.tsx
|
|
9
8
|
/**
|
|
10
9
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -108,7 +107,7 @@ const DatePickerViewControl = withContext(DatePicker.ViewControl, "viewControl",
|
|
|
108
107
|
const DatePickerView = withContext(DatePicker.View, "view", { baseComponent: true });
|
|
109
108
|
const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, "viewTrigger", { baseComponent: true });
|
|
110
109
|
const DatePickerYearSelect = withContext(DatePicker.YearSelect, "yearSelect", { baseComponent: true });
|
|
111
|
-
|
|
112
110
|
//#endregion
|
|
113
111
|
export { DatePickerClearTrigger, DatePickerContent, DatePickerContext, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerRoot, DatePickerStandaloneContent, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect };
|
|
112
|
+
|
|
114
113
|
//# sourceMappingURL=DatePicker.mjs.map
|
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 { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n slots: datePickerAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n content: {\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n zIndex: \"dropdown\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-in-out\",\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-in-out\",\n },\n },\n control: {\n display: \"flex\",\n width: \"fit-content\",\n gap: \"xsmall\",\n },\n label: {},\n tableHeader: {},\n viewControl: {\n display: \"flex\",\n gap: \"5xsmall\",\n justifyContent: \"space-between\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: \"5xsmall\",\n margin: \"-5xsmall\",\n },\n tableCell: {\n textAlign: \"center\",\n },\n tableCellTrigger: {\n width: \"100%\",\n \"&[data-today]\": {\n _before: {\n content: \"'-'\",\n color: \"stroke.default\",\n position: \"absolute\",\n marginBlockStart: \"medium\",\n },\n },\n \"&[data-outside-range]\": {\n color: \"text.subtle\",\n fontWeight: \"normal\",\n },\n },\n view: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n translations: DatePicker.RootProps[\"translations\"];\n locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n <DatePickerPositioner>\n <DatePickerStandaloneContent {...props} ref={ref} />\n </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n ...props\n}: DatePickerLabelProps) => (\n <InternalDatePickerLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react\";\n"],"mappings":"
|
|
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 { DatePicker, datePickerAnatomy } from \"@ark-ui/react\";\nimport { sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, type StyledProps } from \"@ndla/styled-system/jsx\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Label } from \"./Label\";\nimport type { TextProps } from \"./Text\";\n\nconst datePickerRecipe = sva({\n slots: datePickerAnatomy.keys(),\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n content: {\n background: \"surface.default\",\n borderRadius: \"xsmall\",\n boxShadow: \"large\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n padding: \"xsmall\",\n zIndex: \"dropdown\",\n _open: {\n animation: \"fade-shift-in 0.25s ease-in-out\",\n },\n _closed: {\n animation: \"fade-shift-out 0.25s ease-in-out\",\n },\n },\n control: {\n display: \"flex\",\n width: \"fit-content\",\n gap: \"xsmall\",\n },\n label: {},\n tableHeader: {},\n viewControl: {\n display: \"flex\",\n gap: \"5xsmall\",\n justifyContent: \"space-between\",\n },\n table: {\n width: \"100%\",\n borderCollapse: \"separate\",\n borderSpacing: \"5xsmall\",\n margin: \"-5xsmall\",\n },\n tableCell: {\n textAlign: \"center\",\n },\n tableCellTrigger: {\n width: \"100%\",\n \"&[data-today]\": {\n _before: {\n content: \"'-'\",\n color: \"stroke.default\",\n position: \"absolute\",\n marginBlockStart: \"medium\",\n },\n },\n \"&[data-outside-range]\": {\n color: \"text.subtle\",\n fontWeight: \"normal\",\n },\n },\n view: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n },\n});\nconst { withProvider, withContext } = createStyleContext(datePickerRecipe);\n\nexport interface DatePickerRootProps extends DatePicker.RootProps, StyledProps {\n translations: DatePicker.RootProps[\"translations\"];\n locale: DatePicker.RootProps[\"locale\"];\n}\n\nexport const DatePickerRoot = withProvider(DatePicker.Root, \"root\", { baseComponent: true });\n\nexport const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, \"clearTrigger\", {\n baseComponent: true,\n});\n\ninterface DatePickerContentProps extends DatePicker.ContentProps, StyledProps {}\n\nexport const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>((props, ref) => (\n <DatePickerPositioner>\n <DatePickerStandaloneContent {...props} ref={ref} />\n </DatePickerPositioner>\n));\n\nexport const DatePickerStandaloneContent = withContext(DatePicker.Content, \"content\", { baseComponent: true });\n\nexport const DatePickerControl = withContext(DatePicker.Control, \"control\", { baseComponent: true });\n\nexport const DatePickerInput = withContext(DatePicker.Input, \"input\", { baseComponent: true });\n\ninterface DatePickerLabelProps\n extends Omit<DatePicker.LabelProps, \"color\">, StyledProps, TextProps, RefAttributes<HTMLLabelElement> {}\n\nconst InternalDatePickerLabel = withContext(DatePicker.Label, \"label\");\n\nexport const DatePickerLabel = ({\n textStyle = \"label.medium\",\n fontWeight = \"bold\",\n ...props\n}: DatePickerLabelProps) => (\n <InternalDatePickerLabel asChild>\n <Label textStyle={textStyle} fontWeight={fontWeight} {...props} />\n </InternalDatePickerLabel>\n);\n\nexport const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, \"monthSelect\", { baseComponent: true });\n\ninterface DatePickerNextTrigger extends DatePicker.NextTriggerProps, StyledProps {}\n\nexport const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, \"nextTrigger\", { baseComponent: true });\n\nexport const DatePickerPositioner = withContext(DatePicker.Positioner, \"positioner\", { baseComponent: true });\n\nexport const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, \"presetTrigger\", { baseComponent: true });\n\nexport const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, \"prevTrigger\", { baseComponent: true });\n\nexport const DatePickerRangeText = withContext(DatePicker.RangeText, \"rangeText\", { baseComponent: true });\n\nexport const DatePickerTableBody = withContext(DatePicker.TableBody, \"tableBody\", { baseComponent: true });\n\nexport const DatePickerTableCell = withContext(DatePicker.TableCell, \"tableCell\", { baseComponent: true });\n\nexport const DatePickerTableCellTrigger = withContext(DatePicker.TableCellTrigger, \"tableCellTrigger\", {\n baseComponent: true,\n});\n\nexport const DatePickerTableHead = withContext(DatePicker.TableHead, \"tableHead\", { baseComponent: true });\n\nexport const DatePickerTableHeader = withContext(DatePicker.TableHeader, \"tableHeader\", { baseComponent: true });\n\nexport const DatePickerTable = withContext(DatePicker.Table, \"table\", { baseComponent: true });\n\nexport const DatePickerTableRow = withContext(DatePicker.TableRow, \"tableRow\", { baseComponent: true });\n\nexport const DatePickerTrigger = withContext(DatePicker.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DatePickerViewControl = withContext(DatePicker.ViewControl, \"viewControl\", { baseComponent: true });\n\nexport const DatePickerView = withContext(DatePicker.View, \"view\", { baseComponent: true });\n\nexport const DatePickerViewTrigger = withContext(DatePicker.ViewTrigger, \"viewTrigger\", { baseComponent: true });\n\nexport const DatePickerYearSelect = withContext(DatePicker.YearSelect, \"yearSelect\", { baseComponent: true });\n\nexport { DatePickerContext } from \"@ark-ui/react\";\n"],"mappings":";;;;;;;;;;;;;;AAkFA,MAAM,EAAE,cAAc,gBAAgB,mBAnEb,IAAI;CAC3B,OAAO,kBAAkB,MAAM;CAC/B,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACD,SAAS;GACP,YAAY;GACZ,cAAc;GACd,WAAW;GACX,SAAS;GACT,eAAe;GACf,KAAK;GACL,SAAS;GACT,QAAQ;GACR,OAAO,EACL,WAAW,mCACZ;GACD,SAAS,EACP,WAAW,oCACZ;GACF;EACD,SAAS;GACP,SAAS;GACT,OAAO;GACP,KAAK;GACN;EACD,OAAO,EAAE;EACT,aAAa,EAAE;EACf,aAAa;GACX,SAAS;GACT,KAAK;GACL,gBAAgB;GACjB;EACD,OAAO;GACL,OAAO;GACP,gBAAgB;GAChB,eAAe;GACf,QAAQ;GACT;EACD,WAAW,EACT,WAAW,UACZ;EACD,kBAAkB;GAChB,OAAO;GACP,iBAAiB,EACf,SAAS;IACP,SAAS;IACT,OAAO;IACP,UAAU;IACV,kBAAkB;IACnB,EACF;GACD,yBAAyB;IACvB,OAAO;IACP,YAAY;IACb;GACF;EACD,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACN;EACF;CACF,CAAC,CACwE;AAO1E,MAAa,iBAAiB,aAAa,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE5F,MAAa,yBAAyB,YAAY,WAAW,cAAc,gBAAgB,EACzF,eAAe,MAChB,CAAC;AAIF,MAAa,oBAAoB,YAAoD,OAAO,QAC1F,oBAAC,sBAAD,EAAA,UACE,oBAAC,6BAAD;CAA6B,GAAI;CAAY;CAAO,CAAA,EAC/B,CAAA,CACvB;AAEF,MAAa,8BAA8B,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAE9G,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,kBAAkB,YAAY,WAAW,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAK9F,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAEtE,MAAa,mBAAmB,EAC9B,YAAY,gBACZ,aAAa,QACb,GAAG,YAEH,oBAAC,yBAAD;CAAyB,SAAA;WACvB,oBAAC,OAAD;EAAkB;EAAuB;EAAY,GAAI;EAAS,CAAA;CAC1C,CAAA;AAG5B,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAIhH,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,uBAAuB,YAAY,WAAW,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC;AAE7G,MAAa,0BAA0B,YAAY,WAAW,eAAe,iBAAiB,EAAE,eAAe,MAAM,CAAC;AAEtH,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,sBAAsB,YAAY,WAAW,WAAW,aAAa,EAAE,eAAe,MAAM,CAAC;AAE1G,MAAa,6BAA6B,YAAY,WAAW,kBAAkB,oBAAoB,EACrG,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,kBAAkB,YAAY,WAAW,OAAO,SAAS,EAAE,eAAe,MAAM,CAAC;AAE9F,MAAa,qBAAqB,YAAY,WAAW,UAAU,YAAY,EAAE,eAAe,MAAM,CAAC;AAEvG,MAAa,oBAAoB,YAAY,WAAW,SAAS,WAAW,EAAE,eAAe,MAAM,CAAC;AAEpG,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,iBAAiB,YAAY,WAAW,MAAM,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,wBAAwB,YAAY,WAAW,aAAa,eAAe,EAAE,eAAe,MAAM,CAAC;AAEhH,MAAa,uBAAuB,YAAY,WAAW,YAAY,cAAc,EAAE,eAAe,MAAM,CAAC"}
|
package/es/Dialog.mjs
CHANGED
|
@@ -4,7 +4,6 @@ import { sva } from "@ndla/styled-system/css";
|
|
|
4
4
|
import { createStyleContext, styled } from "@ndla/styled-system/jsx";
|
|
5
5
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
|
-
|
|
8
7
|
//#region src/Dialog.tsx
|
|
9
8
|
/**
|
|
10
9
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -278,7 +277,7 @@ const DialogFooter = styled("div", { base: {
|
|
|
278
277
|
} });
|
|
279
278
|
const DialogRootProvider = withRootProvider(Dialog.RootProvider);
|
|
280
279
|
const useDialog$1 = useDialog;
|
|
281
|
-
|
|
282
280
|
//#endregion
|
|
283
281
|
export { DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPositioner, DialogRoot, DialogRootProvider, DialogStandaloneContent, DialogTitle, DialogTrigger, useDialog$1 as useDialog };
|
|
282
|
+
|
|
284
283
|
//# sourceMappingURL=Dialog.mjs.map
|
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 { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n slots: dialogAnatomy.keys(),\n base: {\n backdrop: {\n position: \"fixed\",\n height: \"100vh\",\n width: \"100vw\",\n left: \"0\",\n top: \"0\",\n // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n background: \"rgba(1, 1, 1, 0.3)\",\n _open: {\n animation: \"backdrop-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"backdrop-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n positioner: {\n position: \"fixed\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n left: \"0\",\n top: \"0\",\n width: \"100vw\",\n height: \"100dvh\",\n },\n content: {\n \"--margin\": \"token(sizes.medium)\",\n position: \"relative\",\n background: \"surface.default\",\n boxShadow: \"xlarge\",\n height: \"min-content\",\n maxWidth: \"95%\",\n maxHeight: \"95%\",\n margin: \"auto\",\n overflowY: \"auto\",\n borderRadius: { base: \"sharp\", tablet: \"small\" },\n paddingBlockStart: \"env(safe-area-inset-top)\",\n paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n paddingInlineStart: \"env(safe-area-inset-left)\",\n paddingInlineEnd: \"env(safe-area-inset-right)\",\n tabletDown: {\n \"--margin\": \"0px\",\n minWidth: \"100%\",\n minHeight: \"100%\",\n },\n },\n },\n defaultVariants: {\n size: \"medium\",\n position: \"center\",\n variant: \"dialog\",\n context: \"dialog\",\n },\n compoundVariants: [\n {\n variant: \"drawer\",\n position: \"left\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"right\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"top\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"bottom\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"xsmall\",\n css: {\n content: {\n \"--size\": \"sizes.surface.3xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"small\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"medium\",\n css: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"large\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n },\n ],\n variants: {\n context: {\n dialog: {\n positioner: {\n zIndex: \"modal\",\n },\n backdrop: {\n zIndex: \"overlay\",\n },\n },\n alert: {\n positioner: {\n zIndex: \"alertModal\",\n },\n backdrop: {\n zIndex: \"alertModalOverlay\",\n },\n },\n },\n variant: {\n drawer: {\n content: {\n \"--margin\": \"0px\",\n borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n },\n },\n dialog: {\n content: {\n width: \"var(--size)\",\n _open: {\n animation: \"dialog-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"dialog-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n position: {\n left: {\n content: {\n marginInlineStart: \"var(--margin)\",\n },\n },\n center: {},\n right: {\n content: {\n marginInlineEnd: \"var(--margin)\",\n },\n },\n bottom: {\n content: {\n marginBlockEnd: \"var(--margin)\",\n },\n },\n top: {\n content: {\n marginBlockStart: \"var(--margin)\",\n },\n },\n },\n size: {\n full: {\n content: {\n \"--margin\": \"0px\",\n minHeight: \"100%\",\n minWidth: \"100%\",\n borderRadius: \"sharp\",\n },\n },\n xsmall: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n small: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n medium: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n large: {\n content: {\n \"--size\": \"sizes.surface.4xlarge\",\n },\n },\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n <>\n <DialogBackdrop />\n <DialogPositioner>\n <DialogStandaloneContent ref={ref} {...props} />\n </DialogPositioner>\n </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n return (\n <InternalDialogDescription asChild>\n <Text textStyle={textStyle} {...rest}>\n {children}\n </Text>\n </InternalDialogDescription>\n );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n <InternalDialogTitle asChild>\n <Heading textStyle={textStyle} {...rest}>\n {children}\n </Heading>\n </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n base: {\n display: \"flex\",\n paddingInline: \"medium\",\n paddingBlockStart: \"medium\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"xsmall\",\n },\n});\n\nexport const DialogBody = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogFooter = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,gBAAgB,mBArSrB,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,CAEwE;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,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;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC;EAA0B;YACzB,oBAAC;GAAgB;GAAW,GAAI;GAC7B;IACI;GACmB;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,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 { Dialog, dialogAnatomy, useDialog as _useDialog } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext, styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, type RefAttributes } from \"react\";\nimport { Heading, Text, type TextProps } from \"./Text\";\n\nconst dialogRecipe = sva({\n slots: dialogAnatomy.keys(),\n base: {\n backdrop: {\n position: \"fixed\",\n height: \"100vh\",\n width: \"100vw\",\n left: \"0\",\n top: \"0\",\n // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.\n background: \"rgba(1, 1, 1, 0.3)\",\n _open: {\n animation: \"backdrop-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"backdrop-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n positioner: {\n position: \"fixed\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n left: \"0\",\n top: \"0\",\n width: \"100vw\",\n height: \"100dvh\",\n },\n content: {\n \"--margin\": \"token(sizes.medium)\",\n position: \"relative\",\n background: \"surface.default\",\n boxShadow: \"xlarge\",\n height: \"min-content\",\n maxWidth: \"95%\",\n maxHeight: \"95%\",\n margin: \"auto\",\n overflowY: \"auto\",\n borderRadius: { base: \"sharp\", tablet: \"small\" },\n paddingBlockStart: \"env(safe-area-inset-top)\",\n paddingBlockEnd: \"env(safe-area-inset-bottom)\",\n paddingInlineStart: \"env(safe-area-inset-left)\",\n paddingInlineEnd: \"env(safe-area-inset-right)\",\n tabletDown: {\n \"--margin\": \"0px\",\n minWidth: \"100%\",\n minHeight: \"100%\",\n },\n },\n },\n defaultVariants: {\n size: \"medium\",\n position: \"center\",\n variant: \"dialog\",\n context: \"dialog\",\n },\n compoundVariants: [\n {\n variant: \"drawer\",\n position: \"left\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-left\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"right\",\n css: {\n content: {\n minHeight: \"100%\",\n maxHeight: \"100%\",\n width: \"var(--size)\",\n _open: {\n animation: \"drawer-in-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-right\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"top\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-top\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n position: \"bottom\",\n css: {\n content: {\n minWidth: \"100%\",\n maxWidth: \"100%\",\n height: \"var(--size)\",\n _open: {\n animation: \"drawer-in-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"drawer-out-bottom\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"xsmall\",\n css: {\n content: {\n \"--size\": \"sizes.surface.3xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"small\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"medium\",\n css: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n },\n {\n variant: \"drawer\",\n size: \"large\",\n css: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n },\n ],\n variants: {\n context: {\n dialog: {\n positioner: {\n zIndex: \"modal\",\n },\n backdrop: {\n zIndex: \"overlay\",\n },\n },\n alert: {\n positioner: {\n zIndex: \"alertModal\",\n },\n backdrop: {\n zIndex: \"alertModalOverlay\",\n },\n },\n },\n variant: {\n drawer: {\n content: {\n \"--margin\": \"0px\",\n borderRadius: { base: \"sharp\", tablet: \"sharp\" },\n },\n },\n dialog: {\n content: {\n width: \"var(--size)\",\n _open: {\n animation: \"dialog-in\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n _closed: {\n animation: \"dialog-out\",\n _motionReduce: {\n animation: \"none\",\n },\n },\n },\n },\n },\n position: {\n left: {\n content: {\n marginInlineStart: \"var(--margin)\",\n },\n },\n center: {},\n right: {\n content: {\n marginInlineEnd: \"var(--margin)\",\n },\n },\n bottom: {\n content: {\n marginBlockEnd: \"var(--margin)\",\n },\n },\n top: {\n content: {\n marginBlockStart: \"var(--margin)\",\n },\n },\n },\n size: {\n full: {\n content: {\n \"--margin\": \"0px\",\n minHeight: \"100%\",\n minWidth: \"100%\",\n borderRadius: \"sharp\",\n },\n },\n xsmall: {\n content: {\n \"--size\": \"sizes.surface.xsmall\",\n },\n },\n small: {\n content: {\n \"--size\": \"sizes.surface.medium\",\n },\n },\n medium: {\n content: {\n \"--size\": \"sizes.surface.xlarge\",\n },\n },\n large: {\n content: {\n \"--size\": \"sizes.surface.4xlarge\",\n },\n },\n },\n },\n});\n\nconst { withRootProvider, withContext } = createStyleContext(dialogRecipe);\n\nexport type DialogVariantProps = NonNullable<RecipeVariantProps<typeof dialogRecipe>>;\n\nexport interface DialogRootProps extends Dialog.RootProps, DialogVariantProps {}\n\nexport const InternalDialogRoot = withRootProvider(Dialog.Root);\n\nexport const DialogRoot = ({ lazyMount = true, unmountOnExit = true, ...props }: DialogRootProps) => (\n <InternalDialogRoot lazyMount={lazyMount} unmountOnExit={unmountOnExit} {...props} />\n);\n\nexport const DialogBackdrop = withContext(Dialog.Backdrop, \"backdrop\", { baseComponent: true });\n\nexport const DialogStandaloneContent = withContext(Dialog.Content, \"content\", { baseComponent: true });\n\nexport const DialogPositioner = withContext(Dialog.Positioner, \"positioner\", { baseComponent: true });\n\ninterface DialogContentProps extends Dialog.ContentProps, StyledProps {}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>((props, ref) => (\n <>\n <DialogBackdrop />\n <DialogPositioner>\n <DialogStandaloneContent ref={ref} {...props} />\n </DialogPositioner>\n </>\n));\n\nconst InternalDialogDescription = withContext(Dialog.Description, \"description\");\n\ninterface DialogDescriptionProps\n extends Omit<Dialog.DescriptionProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = ({ textStyle = \"body.large\", children, ...rest }: DialogDescriptionProps) => {\n return (\n <InternalDialogDescription asChild>\n <Text textStyle={textStyle} {...rest}>\n {children}\n </Text>\n </InternalDialogDescription>\n );\n};\n\nconst InternalDialogTitle = withContext(Dialog.Title, \"title\");\n\ninterface DialogTitleProps\n extends Omit<Dialog.TitleProps, \"color\">, TextProps, StyledProps, RefAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = ({ textStyle = \"title.medium\", children, ...rest }: DialogTitleProps) => (\n <InternalDialogTitle asChild>\n <Heading textStyle={textStyle} {...rest}>\n {children}\n </Heading>\n </InternalDialogTitle>\n);\n\nexport const DialogTrigger = withContext(Dialog.Trigger, \"trigger\", { baseComponent: true });\n\nexport const DialogCloseTrigger = withContext(Dialog.CloseTrigger, \"closeTrigger\", { baseComponent: true });\n\nexport const DialogHeader = styled(\"div\", {\n base: {\n display: \"flex\",\n paddingInline: \"medium\",\n paddingBlockStart: \"medium\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n gap: \"xsmall\",\n },\n});\n\nexport const DialogBody = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogFooter = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n paddingInline: \"medium\",\n paddingBlockStart: \"small\",\n paddingBlockEnd: \"medium\",\n },\n});\n\nexport const DialogRootProvider = withRootProvider(Dialog.RootProvider);\n\nexport const useDialog = _useDialog;\n"],"mappings":";;;;;;;;;;;;;;AAoTA,MAAM,EAAE,kBAAkB,gBAAgB,mBArSrB,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,CAEwE;AAM1E,MAAa,qBAAqB,iBAAiB,OAAO,KAAK;AAE/D,MAAa,cAAc,EAAE,YAAY,MAAM,gBAAgB,MAAM,GAAG,YACtE,oBAAC,oBAAD;CAA+B;CAA0B;CAAe,GAAI;CAAS,CAAA;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,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EAAkB,CAAA,EAClB,oBAAC,kBAAD,EAAA,UACE,oBAAC,yBAAD;CAA8B;CAAK,GAAI;CAAS,CAAA,EAC/B,CAAA,CAClB,EAAA,CAAA,CACH;AAEF,MAAM,4BAA4B,YAAY,OAAO,aAAa,cAAc;AAKhF,MAAa,qBAAqB,EAAE,YAAY,cAAc,UAAU,GAAG,WAAmC;AAC5G,QACE,oBAAC,2BAAD;EAA2B,SAAA;YACzB,oBAAC,MAAD;GAAiB;GAAW,GAAI;GAC7B;GACI,CAAA;EACmB,CAAA;;AAIhC,MAAM,sBAAsB,YAAY,OAAO,OAAO,QAAQ;AAK9D,MAAa,eAAe,EAAE,YAAY,gBAAgB,UAAU,GAAG,WACrE,oBAAC,qBAAD;CAAqB,SAAA;WACnB,oBAAC,SAAD;EAAoB;EAAW,GAAI;EAChC;EACO,CAAA;CACU,CAAA;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"}
|
|
@@ -4,7 +4,6 @@ import { sva } from "@ndla/styled-system/css";
|
|
|
4
4
|
import { createStyleContext } from "@ndla/styled-system/jsx";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
|
-
|
|
8
7
|
//#region src/ErrorMessage/ErrorMessage.tsx
|
|
9
8
|
/**
|
|
10
9
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -47,19 +46,17 @@ const { withProvider, withContext } = createStyleContext(sva({
|
|
|
47
46
|
const ErrorMessageRoot = withProvider(ark.article, "root", { baseComponent: true });
|
|
48
47
|
const ErrorMessageContent = withContext(ark.div, "content", { baseComponent: true });
|
|
49
48
|
const ErrorMessageActions = withContext(ark.div, "actions", { baseComponent: true });
|
|
50
|
-
const
|
|
49
|
+
const ErrorMessageTitle = withContext(forwardRef(({ textStyle = "heading.small", ...props }, ref) => /* @__PURE__ */ jsx(Heading, {
|
|
51
50
|
textStyle,
|
|
52
51
|
...props,
|
|
53
52
|
ref
|
|
54
|
-
}));
|
|
55
|
-
const
|
|
56
|
-
const InternalErrorMessageDescription = forwardRef(({ textStyle = "body.xlarge", ...props }, ref) => /* @__PURE__ */ jsx(Text, {
|
|
53
|
+
})), "title");
|
|
54
|
+
const ErrorMessageDescription = withContext(forwardRef(({ textStyle = "body.xlarge", ...props }, ref) => /* @__PURE__ */ jsx(Text, {
|
|
57
55
|
textStyle,
|
|
58
56
|
...props,
|
|
59
57
|
ref
|
|
60
|
-
}));
|
|
61
|
-
const ErrorMessageDescription = withContext(InternalErrorMessageDescription, "description");
|
|
62
|
-
|
|
58
|
+
})), "description");
|
|
63
59
|
//#endregion
|
|
64
60
|
export { ErrorMessageActions, ErrorMessageContent, ErrorMessageDescription, ErrorMessageRoot, ErrorMessageTitle };
|
|
61
|
+
|
|
65
62
|
//# sourceMappingURL=ErrorMessage.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorMessage.mjs","names":[],"sources":["../../src/ErrorMessage/ErrorMessage.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 HTMLArkProps, ark } 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 { forwardRef } from \"react\";\nimport { Heading, Text, type TextProps } from \"../Text\";\n\nconst errorMessageRecipe = sva({\n slots: [\"root\", \"content\", \"actions\", \"title\", \"description\"],\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n alignItems: \"center\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"center\",\n },\n actions: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n alignItems: \"center\",\n },\n title: {\n textAlign: \"center\",\n },\n description: {\n textAlign: \"center\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(errorMessageRecipe);\n\nexport const ErrorMessageRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\nexport const ErrorMessageContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const ErrorMessageActions = withContext(ark.div, \"actions\", { baseComponent: true });\n\ninterface ErrorMessageTitleProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageTitle = forwardRef<HTMLHeadingElement, ErrorMessageTitleProps>(\n ({ textStyle = \"heading.small\", ...props }, ref) => <Heading textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageTitle = withContext(InternalErrorMessageTitle, \"title\");\n\ninterface ErrorMessageDescriptionProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageDescription = forwardRef<HTMLParagraphElement, ErrorMessageDescriptionProps>(\n ({ textStyle = \"body.xlarge\", ...props }, ref) => <Text textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageDescription = withContext(InternalErrorMessageDescription, \"description\");\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ErrorMessage.mjs","names":[],"sources":["../../src/ErrorMessage/ErrorMessage.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 HTMLArkProps, ark } 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 { forwardRef } from \"react\";\nimport { Heading, Text, type TextProps } from \"../Text\";\n\nconst errorMessageRecipe = sva({\n slots: [\"root\", \"content\", \"actions\", \"title\", \"description\"],\n base: {\n root: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xxlarge\",\n alignItems: \"center\",\n },\n content: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n alignItems: \"center\",\n },\n actions: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n alignItems: \"center\",\n },\n title: {\n textAlign: \"center\",\n },\n description: {\n textAlign: \"center\",\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(errorMessageRecipe);\n\nexport const ErrorMessageRoot = withProvider(ark.article, \"root\", { baseComponent: true });\n\nexport const ErrorMessageContent = withContext(ark.div, \"content\", { baseComponent: true });\n\nexport const ErrorMessageActions = withContext(ark.div, \"actions\", { baseComponent: true });\n\ninterface ErrorMessageTitleProps extends Omit<HTMLArkProps<\"h1\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageTitle = forwardRef<HTMLHeadingElement, ErrorMessageTitleProps>(\n ({ textStyle = \"heading.small\", ...props }, ref) => <Heading textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageTitle = withContext(InternalErrorMessageTitle, \"title\");\n\ninterface ErrorMessageDescriptionProps extends Omit<HTMLArkProps<\"p\">, \"color\">, StyledProps, TextProps {}\n\nconst InternalErrorMessageDescription = forwardRef<HTMLParagraphElement, ErrorMessageDescriptionProps>(\n ({ textStyle = \"body.xlarge\", ...props }, ref) => <Text textStyle={textStyle} {...props} ref={ref} />,\n);\n\nexport const ErrorMessageDescription = withContext(InternalErrorMessageDescription, \"description\");\n"],"mappings":";;;;;;;;;;;;;;AA6CA,MAAM,EAAE,cAAc,gBAAgB,mBA9BX,IAAI;CAC7B,OAAO;EAAC;EAAQ;EAAW;EAAW;EAAS;EAAc;CAC7D,MAAM;EACJ,MAAM;GACJ,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,SAAS;GACP,SAAS;GACT,eAAe;GACf,KAAK;GACL,YAAY;GACb;EACD,OAAO,EACL,WAAW,UACZ;EACD,aAAa,EACX,WAAW,UACZ;EACF;CACF,CAAC,CAE0E;AAE5E,MAAa,mBAAmB,aAAa,IAAI,SAAS,QAAQ,EAAE,eAAe,MAAM,CAAC;AAE1F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAE3F,MAAa,sBAAsB,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC;AAQ3F,MAAa,oBAAoB,YAJC,YAC/B,EAAE,YAAY,iBAAiB,GAAG,SAAS,QAAQ,oBAAC,SAAD;CAAoB;CAAW,GAAI;CAAY;CAAO,CAAA,CAC3G,EAEuE,QAAQ;AAQhF,MAAa,0BAA0B,YAJC,YACrC,EAAE,YAAY,eAAe,GAAG,SAAS,QAAQ,oBAAC,MAAD;CAAiB;CAAW,GAAI;CAAY;CAAO,CAAA,CACtG,EAEmF,cAAc"}
|
package/es/ExpandableBox.mjs
CHANGED
|
@@ -2,7 +2,6 @@ import { ark } from "@ark-ui/react";
|
|
|
2
2
|
import { styled } from "@ndla/styled-system/jsx";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { forwardRef, useEffect } from "react";
|
|
5
|
-
|
|
6
5
|
//#region src/ExpandableBox.tsx
|
|
7
6
|
/**
|
|
8
7
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -71,7 +70,7 @@ const ExpandableBoxSummary = forwardRef((props, ref) => /* @__PURE__ */ jsx(Styl
|
|
|
71
70
|
"data-embed-type": "expandable-box-summary",
|
|
72
71
|
ref
|
|
73
72
|
}));
|
|
74
|
-
|
|
75
73
|
//#endregion
|
|
76
74
|
export { ExpandableBox, ExpandableBoxSummary };
|
|
75
|
+
|
|
77
76
|
//# sourceMappingURL=ExpandableBox.mjs.map
|
package/es/ExpandableBox.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableBox.mjs","names":[],"sources":["../src/ExpandableBox.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n ark.details,\n {\n base: {\n transitionDuration: \"fast\",\n width: \"100%\",\n position: \"relative\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n borderColor: \"stroke.subtle\",\n padding: \"medium\",\n clear: \"both\",\n overflow: \"hidden\",\n _open: {\n padding: \"medium\",\n \"& summary, [data-embed-type='expandable-box-summary']\": {\n marginBlockEnd: \"-xxsmall\",\n },\n },\n },\n },\n { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details\");\n detailsElements.forEach((details) => {\n if (!details.hasAttribute(\"open\")) {\n details.setAttribute(\"data-print-open\", \"true\");\n details.setAttribute(\"open\", \"true\");\n }\n });\n};\n\nconst onAfterPrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n detailsElements.forEach((details) => {\n details.removeAttribute(\"data-print-open\");\n details.removeAttribute(\"open\");\n });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n useEffect(() => {\n window.addEventListener(\"beforeprint\", onBeforePrint);\n window.addEventListener(\"afterprint\", onAfterPrint);\n return () => {\n window.removeEventListener(\"beforeprint\", onBeforePrint);\n window.removeEventListener(\"afterprint\", onAfterPrint);\n };\n }, []);\n return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n ark.summary,\n {\n base: {\n cursor: \"pointer\",\n margin: \"-medium\",\n padding: \"medium\",\n textStyle: \"label.large!\",\n _hover: {\n color: \"text.action\",\n },\n \"& > *\": {\n display: \"inline!\",\n textStyle: \"label.large!\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ExpandableBox.mjs","names":[],"sources":["../src/ExpandableBox.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef, useEffect } from \"react\";\n\nexport interface ExpandableBoxProps extends HTMLArkProps<\"details\">, StyledProps {}\n\nconst StyledExpandableBox = styled(\n ark.details,\n {\n base: {\n transitionDuration: \"fast\",\n width: \"100%\",\n position: \"relative\",\n border: \"1px solid\",\n borderRadius: \"xsmall\",\n borderColor: \"stroke.subtle\",\n padding: \"medium\",\n clear: \"both\",\n overflow: \"hidden\",\n _open: {\n padding: \"medium\",\n \"& summary, [data-embed-type='expandable-box-summary']\": {\n marginBlockEnd: \"-xxsmall\",\n },\n },\n },\n },\n { baseComponent: true },\n);\n\nconst onBeforePrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details\");\n detailsElements.forEach((details) => {\n if (!details.hasAttribute(\"open\")) {\n details.setAttribute(\"data-print-open\", \"true\");\n details.setAttribute(\"open\", \"true\");\n }\n });\n};\n\nconst onAfterPrint = (_: Event) => {\n const detailsElements = document.querySelectorAll(\"details[data-print-open]\");\n detailsElements.forEach((details) => {\n details.removeAttribute(\"data-print-open\");\n details.removeAttribute(\"open\");\n });\n};\n\nexport const ExpandableBox = forwardRef<HTMLDetailsElement, ExpandableBoxProps>((props, ref) => {\n useEffect(() => {\n window.addEventListener(\"beforeprint\", onBeforePrint);\n window.addEventListener(\"afterprint\", onAfterPrint);\n return () => {\n window.removeEventListener(\"beforeprint\", onBeforePrint);\n window.removeEventListener(\"afterprint\", onAfterPrint);\n };\n }, []);\n return <StyledExpandableBox {...props} data-embed-type=\"expandable-box\" ref={ref} />;\n});\n\nexport interface ExpandableBoxSummaryProps extends HTMLArkProps<\"summary\">, StyledProps {}\n\nconst StyledExpandableBoxSummary = styled(\n ark.summary,\n {\n base: {\n cursor: \"pointer\",\n margin: \"-medium\",\n padding: \"medium\",\n textStyle: \"label.large!\",\n _hover: {\n color: \"text.action\",\n },\n \"& > *\": {\n display: \"inline!\",\n textStyle: \"label.large!\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const ExpandableBoxSummary = forwardRef<HTMLElement, ExpandableBoxSummaryProps>((props, ref) => (\n <StyledExpandableBoxSummary {...props} data-embed-type=\"expandable-box-summary\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,sBAAsB,OAC1B,IAAI,SACJ,EACE,MAAM;CACJ,oBAAoB;CACpB,OAAO;CACP,UAAU;CACV,QAAQ;CACR,cAAc;CACd,aAAa;CACb,SAAS;CACT,OAAO;CACP,UAAU;CACV,OAAO;EACL,SAAS;EACT,yDAAyD,EACvD,gBAAgB,YACjB;EACF;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAM,iBAAiB,MAAa;AACV,UAAS,iBAAiB,UAAU,CAC5C,SAAS,YAAY;AACnC,MAAI,CAAC,QAAQ,aAAa,OAAO,EAAE;AACjC,WAAQ,aAAa,mBAAmB,OAAO;AAC/C,WAAQ,aAAa,QAAQ,OAAO;;GAEtC;;AAGJ,MAAM,gBAAgB,MAAa;AACT,UAAS,iBAAiB,2BAA2B,CAC7D,SAAS,YAAY;AACnC,UAAQ,gBAAgB,kBAAkB;AAC1C,UAAQ,gBAAgB,OAAO;GAC/B;;AAGJ,MAAa,gBAAgB,YAAoD,OAAO,QAAQ;AAC9F,iBAAgB;AACd,SAAO,iBAAiB,eAAe,cAAc;AACrD,SAAO,iBAAiB,cAAc,aAAa;AACnD,eAAa;AACX,UAAO,oBAAoB,eAAe,cAAc;AACxD,UAAO,oBAAoB,cAAc,aAAa;;IAEvD,EAAE,CAAC;AACN,QAAO,oBAAC,qBAAD;EAAqB,GAAI;EAAO,mBAAgB;EAAsB;EAAO,CAAA;EACpF;AAIF,MAAM,6BAA6B,OACjC,IAAI,SACJ,EACE,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ,EACN,OAAO,eACR;CACD,SAAS;EACP,SAAS;EACT,WAAW;EACZ;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,uBAAuB,YAAoD,OAAO,QAC7F,oBAAC,4BAAD;CAA4B,GAAI;CAAO,mBAAgB;CAA8B;CAAO,CAAA,CAC5F"}
|
package/es/Field.mjs
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Field, Fieldset } from "@ark-ui/react";
|
|
2
2
|
import { styled } from "@ndla/styled-system/jsx";
|
|
3
|
-
|
|
4
3
|
//#region src/Field.tsx
|
|
5
4
|
/**
|
|
6
5
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -16,7 +15,7 @@ const rootStyle = {
|
|
|
16
15
|
};
|
|
17
16
|
const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });
|
|
18
17
|
const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });
|
|
19
|
-
|
|
20
18
|
//#endregion
|
|
21
19
|
export { FieldRoot, FieldsetRoot };
|
|
20
|
+
|
|
22
21
|
//# sourceMappingURL=Field.mjs.map
|
package/es/Field.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.mjs","names":[],"sources":["../src/Field.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Field.mjs","names":[],"sources":["../src/Field.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\n\nconst rootStyle: SystemStyleObject = {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n};\n\nexport const FieldRoot = styled(Field.Root, { base: rootStyle }, { baseComponent: true });\n\nexport const FieldsetRoot = styled(Fieldset.Root, { base: rootStyle }, { baseComponent: true });\n"],"mappings":";;;;;;;;;;AAYA,MAAM,YAA+B;CACnC,SAAS;CACT,eAAe;CACf,KAAK;CACN;AAED,MAAa,YAAY,OAAO,MAAM,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC;AAEzF,MAAa,eAAe,OAAO,SAAS,MAAM,EAAE,MAAM,WAAW,EAAE,EAAE,eAAe,MAAM,CAAC"}
|
package/es/FieldErrorMessage.mjs
CHANGED
|
@@ -3,7 +3,6 @@ import { css } from "@ndla/styled-system/css";
|
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { forwardRef } from "react";
|
|
6
|
-
|
|
7
6
|
//#region src/FieldErrorMessage.tsx
|
|
8
7
|
/**
|
|
9
8
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -39,7 +38,7 @@ const FieldsetErrorText = forwardRef(({ textStyle = "label.small", fontWeight, c
|
|
|
39
38
|
...props,
|
|
40
39
|
ref
|
|
41
40
|
}));
|
|
42
|
-
|
|
43
41
|
//#endregion
|
|
44
42
|
export { FieldErrorMessage, FieldsetErrorText };
|
|
43
|
+
|
|
45
44
|
//# sourceMappingURL=FieldErrorMessage.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldErrorMessage.mjs","names":[],"sources":["../src/FieldErrorMessage.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n color: \"text.error\",\n whiteSpace: \"pre-line\",\n justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n Field.ErrorText,\n {\n base: errorTextStyling,\n },\n { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n ),\n);\n\nconst StyledFieldsetErrorText = styled(\n Fieldset.ErrorText,\n {\n base: errorTextStyling,\n },\n { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n ),\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FieldErrorMessage.mjs","names":[],"sources":["../src/FieldErrorMessage.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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, SystemStyleObject } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst errorTextStyling: SystemStyleObject = {\n color: \"text.error\",\n whiteSpace: \"pre-line\",\n justifyContent: \"center\",\n};\n\nconst StyledFieldErrorText = styled(\n Field.ErrorText,\n {\n base: errorTextStyling,\n },\n { baseComponent: true },\n);\n\nexport interface FieldErrorMessageProps extends Omit<Field.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldErrorMessage = forwardRef<HTMLSpanElement, FieldErrorMessageProps>(\n ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n <StyledFieldErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n ),\n);\n\nconst StyledFieldsetErrorText = styled(\n Fieldset.ErrorText,\n {\n base: errorTextStyling,\n },\n { baseComponent: true },\n);\n\nexport interface FieldsetErrorTextProps extends Omit<Fieldset.ErrorTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetErrorText = forwardRef<HTMLSpanElement, FieldsetErrorTextProps>(\n ({ textStyle = \"label.small\", fontWeight, css: cssProp, color, srOnly, ...props }, ref) => (\n <StyledFieldsetErrorText css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n ),\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,mBAAsC;CAC1C,OAAO;CACP,YAAY;CACZ,gBAAgB;CACjB;AAED,MAAM,uBAAuB,OAC3B,MAAM,WACN,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC,sBAAD;CAAsB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEjH;AAED,MAAM,0BAA0B,OAC9B,SAAS,WACT,EACE,MAAM,kBACP,EACD,EAAE,eAAe,MAAM,CACxB;AAID,MAAa,oBAAoB,YAC9B,EAAE,YAAY,eAAe,YAAY,KAAK,SAAS,OAAO,QAAQ,GAAG,SAAS,QACjF,oBAAC,yBAAD;CAAyB,KAAK,IAAI,IAAI;EAAE;EAAW;EAAY;EAAO;EAAQ,EAAE,QAAQ;CAAE,GAAI;CAAY;CAAO,CAAA,CAEpH"}
|
package/es/FieldHelper.mjs
CHANGED
|
@@ -3,7 +3,6 @@ import { css } from "@ndla/styled-system/css";
|
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { forwardRef } from "react";
|
|
6
|
-
|
|
7
6
|
//#region src/FieldHelper.tsx
|
|
8
7
|
/**
|
|
9
8
|
* Copyright (c) 2025-present, NDLA.
|
|
@@ -38,7 +37,7 @@ const FieldsetHelper = forwardRef(({ textStyle = "label.small", fontWeight, colo
|
|
|
38
37
|
ref
|
|
39
38
|
});
|
|
40
39
|
});
|
|
41
|
-
|
|
42
40
|
//#endregion
|
|
43
41
|
export { FieldHelper, FieldsetHelper };
|
|
42
|
+
|
|
44
43
|
//# sourceMappingURL=FieldHelper.mjs.map
|
package/es/FieldHelper.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldHelper.mjs","names":[],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n return (\n <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n );\n },\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FieldHelper.mjs","names":[],"sources":["../src/FieldHelper.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-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 { Field, Fieldset } from \"@ark-ui/react\";\nimport { css } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\nimport type { TextProps } from \"./Text\";\n\nconst StyledFieldHelper = styled(Field.HelperText, {}, { baseComponent: true });\n\nexport interface FieldHelperProps extends Omit<Field.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldHelper = forwardRef<HTMLSpanElement, FieldHelperProps>(\n ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n return <StyledFieldHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />;\n },\n);\n\nconst StyledFieldsetHelper = styled(Fieldset.HelperText, {}, { baseComponent: true });\n\nexport interface FieldsetHelperProps extends Omit<Fieldset.HelperTextProps, \"color\">, TextProps, StyledProps {}\n\nexport const FieldsetHelper = forwardRef<HTMLSpanElement, FieldsetHelperProps>(\n ({ textStyle = \"label.small\", fontWeight, color, srOnly, css: cssProp, ...props }, ref) => {\n return (\n <StyledFieldsetHelper css={css.raw({ textStyle, fontWeight, color, srOnly }, cssProp)} {...props} ref={ref} />\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,oBAAoB,OAAO,MAAM,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAI/E,MAAa,cAAc,YACxB,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QAAO,oBAAC,mBAAD;EAAmB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAErH;AAED,MAAM,uBAAuB,OAAO,SAAS,YAAY,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAIrF,MAAa,iBAAiB,YAC3B,EAAE,YAAY,eAAe,YAAY,OAAO,QAAQ,KAAK,SAAS,GAAG,SAAS,QAAQ;AACzF,QACE,oBAAC,sBAAD;EAAsB,KAAK,IAAI,IAAI;GAAE;GAAW;GAAY;GAAO;GAAQ,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EAGnH"}
|
package/es/Figure.mjs
CHANGED
|
@@ -3,7 +3,6 @@ import { css, cva } from "@ndla/styled-system/css";
|
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { forwardRef } from "react";
|
|
6
|
-
|
|
7
6
|
//#region src/Figure.tsx
|
|
8
7
|
/**
|
|
9
8
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -25,29 +24,47 @@ const figureRecipe = cva({
|
|
|
25
24
|
},
|
|
26
25
|
variants: {
|
|
27
26
|
size: {
|
|
28
|
-
full: {
|
|
27
|
+
full: {
|
|
28
|
+
width: "100%",
|
|
29
|
+
_print: { width: "60%" }
|
|
30
|
+
},
|
|
29
31
|
medium: {
|
|
30
32
|
tablet: { width: "50%" },
|
|
31
|
-
desktop: { width: "65%" }
|
|
33
|
+
desktop: { width: "65%" },
|
|
34
|
+
_print: { width: "65%" }
|
|
32
35
|
},
|
|
33
36
|
small: {
|
|
34
37
|
tablet: { width: "35%" },
|
|
35
|
-
desktop: { width: "50%" }
|
|
38
|
+
desktop: { width: "50%" },
|
|
39
|
+
_print: { width: "50%" }
|
|
36
40
|
},
|
|
37
41
|
xsmall: {
|
|
38
42
|
tablet: { width: "25%" },
|
|
39
|
-
desktop: { width: "35%" }
|
|
43
|
+
desktop: { width: "35%" },
|
|
44
|
+
_print: { width: "35%" }
|
|
40
45
|
}
|
|
41
46
|
},
|
|
42
47
|
float: {
|
|
43
|
-
left: {
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
left: {
|
|
49
|
+
tablet: {
|
|
50
|
+
float: "left",
|
|
51
|
+
clear: "left"
|
|
52
|
+
},
|
|
53
|
+
_print: {
|
|
54
|
+
float: "left",
|
|
55
|
+
clear: "left"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
right: {
|
|
59
|
+
tablet: {
|
|
60
|
+
float: "right",
|
|
61
|
+
clear: "right"
|
|
62
|
+
},
|
|
63
|
+
_print: {
|
|
64
|
+
float: "right",
|
|
65
|
+
clear: "right"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
51
68
|
}
|
|
52
69
|
},
|
|
53
70
|
defaultVariants: { size: "full" },
|
|
@@ -105,7 +122,7 @@ const Figure = forwardRef(({ size, float, css: cssProp, ...props }, ref) => {
|
|
|
105
122
|
ref
|
|
106
123
|
});
|
|
107
124
|
});
|
|
108
|
-
|
|
109
125
|
//#endregion
|
|
110
126
|
export { Figure };
|
|
127
|
+
|
|
111
128
|
//# sourceMappingURL=Figure.mjs.map
|
package/es/Figure.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Figure.mjs","names":[],"sources":["../src/Figure.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n base: {\n position: \"relative\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform, width, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n variants: {\n size: {\n full: {\n width: \"100%\",\n },\n medium: {\n tablet: {\n width: \"50%\",\n },\n desktop: {\n width: \"65%\",\n },\n },\n small: {\n tablet: {\n width: \"35%\",\n },\n desktop: {\n width: \"50%\",\n },\n },\n xsmall: {\n tablet: {\n width: \"25%\",\n },\n desktop: {\n width: \"35%\",\n },\n },\n },\n float: {\n left: {\n tablet: {\n float: \"left\",\n clear: \"left\",\n },\n },\n right: {\n tablet: {\n float: \"right\",\n clear: \"right\",\n },\n },\n },\n },\n defaultVariants: {\n size: \"full\",\n },\n compoundVariants: [\n {\n float: [\"left\", \"right\"],\n css: {\n zIndex: \"base\",\n left: \"auto\",\n marginBlock: \"xsmall\",\n },\n },\n {\n float: \"left\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineEnd: \"medium\",\n tabletDown: { marginInlineEnd: \"0\" },\n },\n },\n {\n float: \"right\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineStart: \"medium\",\n tabletDown: { marginInlineStart: \"0\" },\n },\n },\n {\n float: [\"left\", \"right\"],\n size: [\"full\"],\n css: {\n marginInlineStart: \"0\",\n marginInlineEnd: \"0\",\n },\n },\n ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Figure.mjs","names":[],"sources":["../src/Figure.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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n base: {\n position: \"relative\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform, width, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n variants: {\n size: {\n full: {\n width: \"100%\",\n _print: {\n width: \"60%\",\n },\n },\n medium: {\n tablet: {\n width: \"50%\",\n },\n desktop: {\n width: \"65%\",\n },\n _print: {\n width: \"65%\",\n },\n },\n small: {\n tablet: {\n width: \"35%\",\n },\n desktop: {\n width: \"50%\",\n },\n _print: {\n width: \"50%\",\n },\n },\n xsmall: {\n tablet: {\n width: \"25%\",\n },\n desktop: {\n width: \"35%\",\n },\n _print: {\n width: \"35%\",\n },\n },\n },\n float: {\n left: {\n tablet: {\n float: \"left\",\n clear: \"left\",\n },\n _print: {\n float: \"left\",\n clear: \"left\",\n },\n },\n right: {\n tablet: {\n float: \"right\",\n clear: \"right\",\n },\n _print: {\n float: \"right\",\n clear: \"right\",\n },\n },\n },\n },\n defaultVariants: {\n size: \"full\",\n },\n compoundVariants: [\n {\n float: [\"left\", \"right\"],\n css: {\n zIndex: \"base\",\n left: \"auto\",\n marginBlock: \"xsmall\",\n },\n },\n {\n float: \"left\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineEnd: \"medium\",\n tabletDown: { marginInlineEnd: \"0\" },\n },\n },\n {\n float: \"right\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineStart: \"medium\",\n tabletDown: { marginInlineStart: \"0\" },\n },\n },\n {\n float: [\"left\", \"right\"],\n size: [\"full\"],\n css: {\n marginInlineStart: \"0\",\n marginInlineEnd: \"0\",\n },\n },\n ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAe,IAAI;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,OAAO;IACP,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM;IACJ,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACD,OAAO;IACL,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,eAAe,OAAO,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,SAAS,YAAsC,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,oBAAC,cAAD;EAAc,KAAK,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EACtG"}
|
package/es/FileUpload.mjs
CHANGED
|
@@ -5,7 +5,6 @@ import { sva } from "@ndla/styled-system/css";
|
|
|
5
5
|
import { createStyleContext } from "@ndla/styled-system/jsx";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { forwardRef } from "react";
|
|
8
|
-
|
|
9
8
|
//#region src/FileUpload.tsx
|
|
10
9
|
/**
|
|
11
10
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -128,7 +127,7 @@ const FileUploadLabel = forwardRef(({ textStyle = "label.medium", fontWeight = "
|
|
|
128
127
|
children
|
|
129
128
|
})
|
|
130
129
|
}));
|
|
131
|
-
|
|
132
130
|
//#endregion
|
|
133
131
|
export { FileUploadContext, FileUploadDropzone, FileUploadHiddenInput, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger };
|
|
132
|
+
|
|
134
133
|
//# sourceMappingURL=FileUpload.mjs.map
|
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 { 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 { forwardRef, type RefAttributes } from \"react\";\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\">, TextProps, StyledProps, 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\">, TextProps, StyledProps, 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\">, StyledProps, TextProps, 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":"
|
|
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 { 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 { forwardRef, type RefAttributes } from \"react\";\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\">, TextProps, StyledProps, 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\">, TextProps, StyledProps, 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\">, StyledProps, TextProps, 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":";;;;;;;;;;;;;;;AA+FA,MAAM,EAAE,cAAc,gBAAgB,mBA/Eb,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,CAEwE;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;AAKxG,MAAa,qBAAqB,YAC/B,EAAE,YAAY,gBAAgB,aAAa,QAAQ,GAAG,SAAS,QAC9D,oBAAC,MAAD;CAAiB;CAAuB;CAAY,SAAA;CAAQ,GAAI;CAAY;WAE1E,oBAAC,4BAAD,EAA8B,CAAA;CACzB,CAAA,CAEV;AAED,MAAM,iCAAiC,YAAY,WAAW,cAAc,gBAAgB,EAAE,eAAe,MAAM,CAAC;AAKpH,MAAa,yBAAyB,YACnC,EAAE,YAAY,eAAe,GAAG,SAAS,QACxC,oBAAC,MAAD;CAAiB;CAAgB;CAAK,SAAA;CAAQ,GAAI;WAChD,oBAAC,gCAAD,EAAkC,CAAA;CAC7B,CAAA,CAEV;AAED,MAAM,0BAA0B,YAAY,WAAW,OAAO,QAAQ;AAKtE,MAAa,kBAAkB,YAC5B,EAAE,YAAY,gBAAgB,aAAa,SAAS,UAAU,GAAG,SAAS,QACzE,oBAAC,yBAAD;CAA8B;CAAK,SAAA;WACjC,oBAAC,OAAD;EAAkB;EAAuB;EAAY,GAAI;EACtD;EACK,CAAA;CACgB,CAAA,CAE7B"}
|
package/es/FramedContent.mjs
CHANGED
|
@@ -3,7 +3,6 @@ import { css, cva } from "@ndla/styled-system/css";
|
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
import { forwardRef } from "react";
|
|
6
|
-
|
|
7
6
|
//#region src/FramedContent.tsx
|
|
8
7
|
/**
|
|
9
8
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -43,7 +42,7 @@ const FramedContent = forwardRef(({ colorTheme, css: cssProp, ...props }, ref) =
|
|
|
43
42
|
...props,
|
|
44
43
|
ref
|
|
45
44
|
}));
|
|
46
|
-
|
|
47
45
|
//#endregion
|
|
48
46
|
export { FramedContent };
|
|
47
|
+
|
|
49
48
|
//# sourceMappingURL=FramedContent.mjs.map
|