@ndla/primitives 0.0.17 → 0.0.19

package/es/ArticleLists.js

@@ -6,16 +6,13 @@
  *
  */
 
-import { forwardRef } from "react";
+import { forwardRef, useMemo } from "react";
 import { ark } from "@ark-ui/react";
 import { css, cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
 const orderedListRecipe = cva({
   base: {
-    listStyle: "revert",
-    listStylePosition: "inside",
-    paddingInlineStart: "small",
     "& li": {
       marginBlock: "small"
     }
@@ -26,29 +23,74 @@ const orderedListRecipe = cva({
   variants: {
     variant: {
       numbers: {
+        counterReset: "level1",
+        "&[data-count='true']": {
+          counterReset: "level1 var(--start, 0)"
+        },
+        marginInline: "small",
         "& > li": {
+          counterIncrement: "level1",
           _marker: {
-            content: "counters(list-item, '.') '. '"
+            content: "counter(level1, decimal) '. '"
+          },
+          "& > ol:not([data-variant='letters'])": {
+            marginInlineStart: "xlarge",
+            counterReset: "level2",
+            "&[data-count='true']": {
+              counterReset: "level2 var(--start, 0)"
+            },
+            "& > li": {
+              counterIncrement: "level2",
+              _marker: {
+                content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
+              },
+              "& > ol:not([data-variant='letters'])": {
+                marginInlineStart: "xxlarge",
+                counterReset: "level3",
+                "&[data-count='true']": {
+                  counterReset: "level3 var(--start, 0)"
+                },
+                "& > li": {
+                  counterIncrement: "level3",
+                  _marker: {
+                    content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
+                  }
+                },
+                "& > ol:not([data-variant='letters'])": {
+                  counterReset: "level4",
+                  "&[data-count='true']": {
+                    counterReset: "level4 var(--start, 0)"
+                  },
+                  "& > li": {
+                    counterIncrement: "level4",
+                    _marker: {
+                      content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4,  decimal) '. '"
+                    }
+                  }
+                }
+              }
+            }
           }
         }
       },
       letters: {
-        "& ol[data-variant='numbers'] > li": {
-          _marker: {
-            content: "counter(list-item, numeric) '. '"
-          }
+        counterReset: "level1",
+        "&[data-count='true']": {
+          counterReset: "level1 var(--start, 0)"
         },
-        "& li": {
+        paddingInlineStart: "small",
+        "& > li": {
+          counterIncrement: "level1",
           _marker: {
-            content: "counter(list-item, upper-alpha) '. '"
+            content: "counter(level1, upper-alpha) '. '"
           },
-          "& > ol > li": {
+          "& > ol[data-variant='letters'] > li": {
             _marker: {
-              content: "counter(list-item, lower-alpha) '. '"
+              content: "counter(level1, lower-alpha) '. '"
             },
-            "& li": {
+            "& > ol[data-variant='letters'] > li": {
               _marker: {
-                content: "counter(list-item, lower-roman) '. '"
+                content: "counter(level1, lower-roman) '. '"
               }
             }
           }
@@ -64,26 +106,36 @@ export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     variant,
     css: cssProp,
+    start,
     ...props
   } = _ref;
+  const style = useMemo(() => ({
+    "--start": start ? start - 1 : undefined
+  }), [start]);
   return /*#__PURE__*/_jsx(StyledOrderedList, {
+    "data-variant": variant,
+    "data-count": start !== undefined,
     css: css.raw(orderedListRecipe.raw({
       variant
     }), cssProp),
-    ...props,
-    ref: ref
+    style: style,
+    ref: ref,
+    ...props
   });
 });
 export const UnOrderedList = styled("ul", {
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
-    paddingInlineStart: "small",
+    paddingInlineStart: "medium",
     "& li": {
       marginBlock: "small",
       _marker: {
         color: "icon.strong"
       }
+    },
+    "& li > *:not(ol, ul, li)": {
+      display: "inline"
     }
   }
 });

package/es/Button.js

@@ -153,7 +153,7 @@ export const buttonRecipe = cva({
   variants: {
     size: {
       default: {
-        paddingInline: "medium",
+        paddingInline: "xsmall",
         paddingBlock: "xxsmall",
         minHeight: "24"
       },

package/es/Card/Card.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "../createStyleContext";
+import { Image } from "../Image";
+import { Heading } from "../Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+const cardRecipe = sva({
+  slots: ["root", "title", "content", "image"],
+  base: {
+    root: {
+      position: "relative",
+      border: "1px solid",
+      borderRadius: "xsmall",
+      borderColor: "stroke.subtle",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      background: "surface.default",
+      _hover: {
+        background: "surface.actionSubtle.hover",
+        borderColor: "stroke.hover"
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      paddingBlock: "xsmall",
+      paddingInline: "medium"
+    },
+    title: {
+      textDecoration: "underline",
+      _hover: {
+        textDecoration: "none"
+      }
+    },
+    image: {
+      height: "200px",
+      objectFit: "cover",
+      width: "100%"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(cardRecipe);
+export const CardRoot = withProvider(ark.article, "root", {
+  baseComponent: true
+});
+const InternalCardHeading = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    textStyle = "label.large",
+    fontWeight = "bold",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Heading, {
+    textStyle: textStyle,
+    fontWeight: fontWeight,
+    ...props,
+    ref: ref
+  });
+});
+export const CardHeading = withContext(InternalCardHeading, "title");
+export const CardContent = withContext(ark.div, "content", {
+  baseComponent: true
+});
+export const CardImage = withContext(Image, "image");

package/es/Checkbox.js

@@ -209,8 +209,12 @@ const {
   withProvider,
   withContext
 } = createStyleContext(checkboxRecipe);
-export const CheckboxRoot = withProvider(Checkbox.Root, "root");
-export const CheckboxIndicator = withContext(Checkbox.Indicator, "indicator");
+export const CheckboxRoot = withProvider(Checkbox.Root, "root", {
+  baseComponent: true
+});
+export const CheckboxIndicator = withContext(Checkbox.Indicator, "indicator", {
+  baseComponent: true
+});
 const InternalCheckboxLabel = withContext(Checkbox.Label, "label");
 export const CheckboxLabel = _ref => {
   let {
@@ -227,6 +231,10 @@ export const CheckboxLabel = _ref => {
     })
   });
 };
-export const CheckboxControl = withContext(Checkbox.Control, "control");
-export const CheckboxGroup = withProvider(Checkbox.Group, "group");
+export const CheckboxControl = withContext(Checkbox.Control, "control", {
+  baseComponent: true
+});
+export const CheckboxGroup = withProvider(Checkbox.Group, "group", {
+  baseComponent: true
+});
 export const CheckboxHiddenInput = Checkbox.HiddenInput;

package/es/Combobox.js

@@ -147,7 +147,9 @@ const {
   withProvider,
   withContext
 } = createStyleContext(comboboxRecipe);
-const InternalComboboxRoot = withProvider(Combobox.Root, "root");
+const InternalComboboxRoot = withProvider(Combobox.Root, "root", {
+  baseComponent: true
+});
 export const ComboboxRoot = _ref => {
   let {
     ...props
@@ -160,10 +162,18 @@ export const ComboboxRoot = _ref => {
     })
   );
 };
-export const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, "clearTrigger");
-export const ComboboxContent = withContext(Combobox.Content, "content");
-export const ComboboxControl = withContext(Combobox.Control, "control");
-export const ComboboxInput = withContext(Combobox.Input, "input");
+export const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const ComboboxContent = withContext(Combobox.Content, "content", {
+  baseComponent: true
+});
+export const ComboboxControl = withContext(Combobox.Control, "control", {
+  baseComponent: true
+});
+export const ComboboxInput = withContext(Combobox.Input, "input", {
+  baseComponent: true
+});
 const InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, "itemGroupLabel");
 export const ComboboxItemGroupLabel = _ref2 => {
   let {
@@ -186,9 +196,15 @@ export const ComboboxItemGroupLabel = _ref2 => {
     })
   });
 };
-export const ComboboxItemGroup = withContext(Combobox.ItemGroup, "itemGroup");
-export const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, "itemIndicator");
-export const ComboboxItem = withContext(Combobox.Item, "item");
+export const ComboboxItemGroup = withContext(Combobox.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+export const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+export const ComboboxItem = withContext(Combobox.Item, "item", {
+  baseComponent: true
+});
 const InternalComboboxItemText = withContext(Combobox.ItemText, "itemText");
 export const ComboboxItemText = _ref3 => {
   let {
@@ -225,5 +241,12 @@ export const ComboboxLabel = _ref4 => {
     })
   });
 };
-export const ComboboxPositioner = withContext(Combobox.Positioner, "positioner");
-export const ComboboxTrigger = withContext(Combobox.Trigger, "trigger");
+export const ComboboxPositioner = withContext(Combobox.Positioner, "positioner", {
+  baseComponent: true
+});
+export const ComboboxTrigger = withContext(Combobox.Trigger, "trigger", {
+  baseComponent: true
+});
+export const ComboboxList = withContext(Combobox.List, "list", {
+  baseComponent: true
+});

package/es/Dialog.js

@@ -265,9 +265,15 @@ export const DialogRoot = _ref => {
     ...props
   });
 };
-export const DialogBackdrop = withContext(Dialog.Backdrop, "backdrop");
-export const DialogStandaloneContent = withContext(Dialog.Content, "content");
-export const DialogPositioner = withContext(Dialog.Positioner, "positioner");
+export const DialogBackdrop = withContext(Dialog.Backdrop, "backdrop", {
+  baseComponent: true
+});
+export const DialogStandaloneContent = withContext(Dialog.Content, "content", {
+  baseComponent: true
+});
+export const DialogPositioner = withContext(Dialog.Positioner, "positioner", {
+  baseComponent: true
+});
 export const DialogContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsxs(_Fragment, {
   children: [/*#__PURE__*/_jsx(DialogBackdrop, {}), /*#__PURE__*/_jsx(DialogPositioner, {
     children: /*#__PURE__*/_jsx(DialogStandaloneContent, {

package/es/Menu.js

@@ -141,7 +141,9 @@ export const MenuRoot = _ref => {
     ...props
   });
 };
-export const MenuContent = withContext(Menu.Content, "content");
+export const MenuContent = withContext(Menu.Content, "content", {
+  baseComponent: true
+});
 const InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, "itemGroupLabel");
 export const MenuItemGroupLabel = _ref2 => {
   let {
@@ -160,8 +162,12 @@ export const MenuItemGroupLabel = _ref2 => {
     })
   });
 };
-export const MenuItemGroup = withContext(Menu.ItemGroup, "itemGroup");
-const InternalMenuItem = withContext(Menu.Item, "item");
+export const MenuItemGroup = withContext(Menu.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+const InternalMenuItem = withContext(Menu.Item, "item", {
+  baseComponent: true
+});
 export const MenuItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
     css: cssProp = {},
@@ -176,8 +182,12 @@ export const MenuItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ref: ref
   });
 });
-export const MenuPositioner = withContext(Menu.Positioner, "positioner");
-const InternalMenuTriggerItem = withContext(Menu.TriggerItem, "triggerItem");
+export const MenuPositioner = withContext(Menu.Positioner, "positioner", {
+  baseComponent: true
+});
+const InternalMenuTriggerItem = withContext(Menu.TriggerItem, "triggerItem", {
+  baseComponent: true
+});
 export const MenuTriggerItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
   let {
     css: cssProp = {},
@@ -192,5 +202,9 @@ export const MenuTriggerItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
     ref: ref
   });
 });
-export const MenuTrigger = withContext(Menu.Trigger, "trigger");
-export const MenuSeparator = withContext(Menu.Separator, "separator");
+export const MenuTrigger = withContext(Menu.Trigger, "trigger", {
+  baseComponent: true
+});
+export const MenuSeparator = withContext(Menu.Separator, "separator", {
+  baseComponent: true
+});

package/es/Pagination.js

@@ -29,8 +29,18 @@ const {
   withProvider,
   withContext
 } = createStyleContext(paginationRecipe);
-export const PaginationRoot = withProvider(Pagination.Root, "root");
-export const PaginationItem = withContext(Pagination.Item, "item");
-export const PaginationEllipsis = withContext(Pagination.Ellipsis, "ellipsis");
-export const PaginationPrevTrigger = withContext(Pagination.PrevTrigger, "prevTrigger");
-export const PaginationNextTrigger = withContext(Pagination.NextTrigger, "nextTrigger");
+export const PaginationRoot = withProvider(Pagination.Root, "root", {
+  baseComponent: true
+});
+export const PaginationItem = withContext(Pagination.Item, "item", {
+  baseComponent: true
+});
+export const PaginationEllipsis = withContext(Pagination.Ellipsis, "ellipsis", {
+  baseComponent: true
+});
+export const PaginationPrevTrigger = withContext(Pagination.PrevTrigger, "prevTrigger", {
+  baseComponent: true
+});
+export const PaginationNextTrigger = withContext(Pagination.NextTrigger, "nextTrigger", {
+  baseComponent: true
+});

package/es/Popover.js

@@ -55,23 +55,43 @@ export const PopoverRoot = _ref => {
     ...props
   });
 };
-export const PopoverAnchor = withContext(Popover.Anchor, "anchor");
-export const PopoverArrowStandalone = withContext(Popover.Arrow, "arrow");
+export const PopoverAnchor = withContext(Popover.Anchor, "anchor", {
+  baseComponent: true
+});
+export const PopoverArrowStandalone = withContext(Popover.Arrow, "arrow", {
+  baseComponent: true
+});
 export const PopoverArrow = props => /*#__PURE__*/_jsx(PopoverArrowStandalone, {
   children: /*#__PURE__*/_jsx(PopoverArrowTip, {
     ...props
   })
 });
-export const PopoverArrowTip = withContext(Popover.ArrowTip, "arrowTip");
-export const PopoverCloseTrigger = withContext(Popover.CloseTrigger, "closeTrigger");
-export const PopoverContentStandalone = withContext(Popover.Content, "content");
+export const PopoverArrowTip = withContext(Popover.ArrowTip, "arrowTip", {
+  baseComponent: true
+});
+export const PopoverCloseTrigger = withContext(Popover.CloseTrigger, "closeTrigger", {
+  baseComponent: true
+});
+export const PopoverContentStandalone = withContext(Popover.Content, "content", {
+  baseComponent: true
+});
 export const PopoverContent = props => /*#__PURE__*/_jsx(PopoverPositioner, {
   children: /*#__PURE__*/_jsx(PopoverContentStandalone, {
     ...props
   })
 });
-export const PopoverDescription = withContext(Popover.Description, "description");
-export const PopoverIndicator = withContext(Popover.Indicator, "indicator");
-export const PopoverPositioner = withContext(Popover.Positioner, "positioner");
-export const PopoverTitle = withContext(Popover.Title, "title");
-export const PopoverTrigger = withContext(Popover.Trigger, "trigger");
+export const PopoverDescription = withContext(Popover.Description, "description", {
+  baseComponent: true
+});
+export const PopoverIndicator = withContext(Popover.Indicator, "indicator", {
+  baseComponent: true
+});
+export const PopoverPositioner = withContext(Popover.Positioner, "positioner", {
+  baseComponent: true
+});
+export const PopoverTitle = withContext(Popover.Title, "title", {
+  baseComponent: true
+});
+export const PopoverTrigger = withContext(Popover.Trigger, "trigger", {
+  baseComponent: true
+});

package/es/RadioGroup.js

@@ -90,10 +90,18 @@ const {
   withProvider,
   withContext
 } = createStyleContext(radioGroupRecipe);
-export const RadioGroupRoot = withProvider(RadioGroup.Root, "root");
-export const RadioGroupIndicator = withContext(RadioGroup.Indicator, "indicator");
-export const RadioGroupItemControl = withContext(RadioGroup.ItemControl, "itemControl");
-export const RadioGroupItem = withContext(RadioGroup.Item, "item");
+export const RadioGroupRoot = withProvider(RadioGroup.Root, "root", {
+  baseComponent: true
+});
+export const RadioGroupIndicator = withContext(RadioGroup.Indicator, "indicator", {
+  baseComponent: true
+});
+export const RadioGroupItemControl = withContext(RadioGroup.ItemControl, "itemControl", {
+  baseComponent: true
+});
+export const RadioGroupItem = withContext(RadioGroup.Item, "item", {
+  baseComponent: true
+});
 const InternalRadioGroupItemText = withContext(RadioGroup.ItemText, "itemText");
 export const RadioGroupItemText = _ref => {
   let {

package/es/Select.js

@@ -132,7 +132,9 @@ const {
   withProvider,
   withContext
 } = createStyleContext(selectRecipe);
-const InternalSelectRoot = withProvider(Select.Root, "root");
+const InternalSelectRoot = withProvider(Select.Root, "root", {
+  baseComponent: true
+});
 export const SelectRoot = _ref => {
   let {
     lazyMount = true,
@@ -149,10 +151,18 @@ export const SelectRoot = _ref => {
     })
   );
 };
-export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger");
-export const SelectContent = withContext(Select.Content, "content");
-export const SelectControl = withContext(Select.Control, "control");
-export const SelectIndicator = withContext(Select.Indicator, "indicator");
+export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger", {
+  baseComponent: true
+});
+export const SelectContent = withContext(Select.Content, "content", {
+  baseComponent: true
+});
+export const SelectControl = withContext(Select.Control, "control", {
+  baseComponent: true
+});
+export const SelectIndicator = withContext(Select.Indicator, "indicator", {
+  baseComponent: true
+});
 export const SelectItemGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
@@ -172,10 +182,18 @@ export const SelectItemGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 const InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, "itemGroupLabel");
-export const SelectItemGroup = withContext(Select.ItemGroup, "itemGroup");
-export const SelectItemIndicator = withContext(Select.ItemIndicator, "itemIndicator");
-export const SelectItem = withContext(Select.Item, "item");
-export const SelectItemText = withContext(Select.ItemText, "itemText");
+export const SelectItemGroup = withContext(Select.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+export const SelectItemIndicator = withContext(Select.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+export const SelectItem = withContext(Select.Item, "item", {
+  baseComponent: true
+});
+export const SelectItemText = withContext(Select.ItemText, "itemText", {
+  baseComponent: true
+});
 const InternalSelectLabel = withContext(Select.Label, "label");
 export const SelectLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
@@ -191,6 +209,15 @@ export const SelectLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
     })
   });
 });
-export const SelectPositioner = withContext(Select.Positioner, "positioner");
-export const SelectTrigger = withContext(Select.Trigger, "trigger");
-export const SelectValueText = withContext(Select.ValueText, "valueText");
+export const SelectPositioner = withContext(Select.Positioner, "positioner", {
+  baseComponent: true
+});
+export const SelectTrigger = withContext(Select.Trigger, "trigger", {
+  baseComponent: true
+});
+export const SelectValueText = withContext(Select.ValueText, "valueText", {
+  baseComponent: true
+});
+export const SelectList = withContext(Select.List, "list", {
+  baseComponent: true
+});

package/es/Slider.js

@@ -79,11 +79,21 @@ const {
   withProvider,
   withContext
 } = createStyleContext(sliderRecipe);
-export const SliderRoot = withProvider(Slider.Root, "root");
-export const SliderControl = withContext(Slider.Control, "control");
-export const SliderTrack = withContext(Slider.Track, "track");
-export const SliderRange = withContext(Slider.Range, "range");
-export const SliderThumb = withContext(Slider.Thumb, "thumb");
+export const SliderRoot = withProvider(Slider.Root, "root", {
+  baseComponent: true
+});
+export const SliderControl = withContext(Slider.Control, "control", {
+  baseComponent: true
+});
+export const SliderTrack = withContext(Slider.Track, "track", {
+  baseComponent: true
+});
+export const SliderRange = withContext(Slider.Range, "range", {
+  baseComponent: true
+});
+export const SliderThumb = withContext(Slider.Thumb, "thumb", {
+  baseComponent: true
+});
 const InternalSliderLabel = withContext(Slider.Label, "label");
 export const SliderLabel = _ref => {
   let {

package/es/Switch.js

@@ -97,9 +97,15 @@ const {
   withProvider,
   withContext
 } = createStyleContext(switchRecipe);
-export const SwitchRoot = withProvider(Switch.Root, "root");
-export const SwitchControl = withContext(Switch.Control, "control");
-export const SwitchThumb = withContext(Switch.Thumb, "thumb");
+export const SwitchRoot = withProvider(Switch.Root, "root", {
+  baseComponent: true
+});
+export const SwitchControl = withContext(Switch.Control, "control", {
+  baseComponent: true
+});
+export const SwitchThumb = withContext(Switch.Thumb, "thumb", {
+  baseComponent: true
+});
 const InternalSwitchLabel = withContext(Switch.Label, "label");
 export const SwitchLabel = _ref => {
   let {