@ndla/primitives 0.0.16 → 0.0.18

package/es/Accordion.js

@@ -23,21 +23,15 @@ const accordionRecipe = sva({
       justifyContent: "space-between",
       background: "surface.default",
       cursor: "pointer",
-      paddingInline: "medium",
-      paddingBlock: "medium",
-      boxShadowColor: "stroke.subtle",
-      boxShadow: "inset 0 0 0 1px var(--shadow-color)",
-      borderRadius: "xsmall",
       transitionDuration: "fast",
       transitionTimingFunction: "default",
       transitionProperty: "background, border-color, border, border-radius",
-      width: "100%",
       _closed: {
         transitionProperty: "background, border-color, border, border-radius"
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "surface..disabled.subtle",
+        background: "surface.disabled.subtle",
         boxShadowColor: "stroke.disabled",
         color: "text.disabled",
         _hover: {
@@ -45,20 +39,6 @@ const accordionRecipe = sva({
           boxShadowColor: "stroke.disabled",
           color: "text.disabled"
         }
-      },
-      _hover: {
-        background: "surface.actionSubtle.hover",
-        boxShadowColor: "stroke.hover"
-      },
-      _open: {
-        backgroundColor: "surface.actionSubtle.active",
-        boxShadowColor: "stroke.default",
-        borderBottomRadius: "sharp"
-      },
-      _focusVisible: {
-        outline: "none",
-        boxShadowColor: "stroke.default",
-        boxShadow: "inset 0 0 0 2px var(--shadow-color)"
       }
     },
     itemIndicator: {
@@ -73,21 +53,59 @@ const accordionRecipe = sva({
     },
     itemContent: {
       overflow: "hidden",
+      // TODO: Is this needed?
       transitionProperty: "padding-bottom",
       transitionDuration: "normal",
       transitionTimingFunction: "default",
       paddingBlock: "xsmall",
       paddingInline: "small",
-      borderBottomRadius: "xsmall",
-      borderWidth: "0 1px 1px",
-      borderStyle: "solid",
-      borderColor: "stroke.default",
       _open: {
         animation: "collapse-in"
       },
       _closed: {
         animation: "collapse-out"
       }
+    },
+    item: {
+      width: "100%"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  },
+  variants: {
+    variant: {
+      clean: {},
+      bordered: {
+        itemTrigger: {
+          paddingInline: "medium",
+          paddingBlock: "medium",
+          width: "100%",
+          borderRadius: "xsmall",
+          boxShadowColor: "stroke.subtle",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+          _hover: {
+            background: "surface.actionSubtle.hover",
+            boxShadowColor: "stroke.hover"
+          },
+          _open: {
+            backgroundColor: "surface.actionSubtle.active",
+            boxShadowColor: "stroke.default",
+            borderBottomRadius: "sharp"
+          },
+          _focusVisible: {
+            outline: "none",
+            boxShadowColor: "stroke.default",
+            boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+          }
+        },
+        itemContent: {
+          borderBottomRadius: "xsmall",
+          borderWidth: "0 1px 1px",
+          borderStyle: "solid",
+          borderColor: "stroke.default"
+        }
+      }
     }
   }
 });
@@ -95,8 +113,18 @@ const {
   withProvider,
   withContext
 } = createStyleContext(accordionRecipe);
-export const AccordionRoot = withProvider(Accordion.Root, "root");
-export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent");
-export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator");
-export const AccordionItem = withContext(Accordion.Item, "item");
-export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger");
+export const AccordionRoot = withProvider(Accordion.Root, "root", {
+  baseComponent: true
+});
+export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", {
+  baseComponent: true
+});
+export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+export const AccordionItem = withContext(Accordion.Item, "item", {
+  baseComponent: true
+});
+export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", {
+  baseComponent: true
+});

package/es/Button.js

@@ -11,6 +11,7 @@ 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";
+// TODO: Consider if any of the backgrounds should actually be transparent
 export const buttonBaseRecipe = cva({
   base: {
     display: "inline-flex",
@@ -67,7 +68,7 @@ export const buttonBaseRecipe = cva({
       },
       secondary: {
         color: "text.strong",
-        background: "transparent",
+        background: "surface.default",
         boxShadow: "inset 0 0 0 1px var(--shadow-color)",
         _hover: {
           background: "surface.actionSubtle.hover"
@@ -152,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,9 @@ 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
+});

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/Figure.js

@@ -52,15 +52,13 @@ const figureRecipe = cva({
       left: {
         tablet: {
           float: "left",
-          clear: "left",
-          paddingInlineEnd: "medium"
+          clear: "left"
         }
       },
       right: {
         tablet: {
           float: "right",
-          clear: "right",
-          paddingInlineStart: "medium"
+          clear: "right"
         }
       }
     }
@@ -75,6 +73,25 @@ const figureRecipe = cva({
       left: "auto",
       marginBlock: "xsmall"
     }
+  }, {
+    float: "left",
+    size: ["medium", "small", "xsmall"],
+    css: {
+      paddingInlineEnd: "medium"
+    }
+  }, {
+    float: "right",
+    size: ["medium", "small", "xsmall"],
+    css: {
+      paddingInlineStart: "medium"
+    }
+  }, {
+    float: ["left", "right"],
+    size: ["full"],
+    css: {
+      paddingInlineStart: "0",
+      paddingInlineEnd: "0"
+    }
   }]
 });
 const StyledFigure = styled(ark.figure, {}, {

package/es/Image.js

@@ -0,0 +1,92 @@
+/**
+ * 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 { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const makeSrcQueryString = (width, crop, focalPoint) => {
+  const widthParams = width && `width=${width}`;
+  const cropParams = crop && `cropStartX=${crop.startX}&cropEndX=${crop.endX}&cropStartY=${crop.startY}&cropEndY=${crop.endY}`;
+  const focalPointParams = focalPoint && `focalX=${focalPoint.x}&focalY=${focalPoint.y}`;
+  const params = [widthParams, cropParams, focalPointParams].filter(p => p).join("&");
+  return params;
+};
+export const getSrcSet = (src, crop, focalPoint) => {
+  const widths = [2720, 2080, 1760, 1440, 1120, 1000, 960, 800, 640, 480, 320, 240, 180];
+  return widths.map(width => `${src}?${makeSrcQueryString(width, crop, focalPoint)} ${width}w`).join(", ");
+};
+const FALLBACK_WIDTH = 1024;
+const FALLBACK_SIZES = "(min-width: 1024px) 1024px, 100vw";
+export const Picture = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    srcSet: srcSetProp,
+    crop,
+    focalPoint,
+    src,
+    contentType,
+    sizes = FALLBACK_SIZES,
+    ...props
+  } = _ref;
+  const srcSet = srcSetProp ?? getSrcSet(src, crop, focalPoint);
+  return /*#__PURE__*/_jsxs(styled.picture, {
+    ...props,
+    ref: ref,
+    children: [contentType !== "image/gif" && /*#__PURE__*/_jsx("source", {
+      type: contentType,
+      srcSet: srcSet,
+      sizes: sizes
+    }), children]
+  });
+});
+export const Img = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    fallbackWidth = FALLBACK_WIDTH,
+    crop,
+    focalPoint,
+    contentType,
+    src,
+    alt,
+    ...props
+  } = _ref2;
+  const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
+  return /*#__PURE__*/_jsx(styled.img, {
+    alt: alt,
+    src: contentType === "image/gif" ? src : `${src}?${queryString}`,
+    ...props,
+    ref: ref
+  });
+});
+export const Image = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    srcSet: srcSetProp,
+    crop,
+    focalPoint,
+    src,
+    contentType,
+    fallbackWidth = FALLBACK_WIDTH,
+    sizes = FALLBACK_SIZES,
+    alt,
+    ...props
+  } = _ref3;
+  const srcSet = srcSetProp ?? getSrcSet(src, crop, focalPoint);
+  const queryString = makeSrcQueryString(fallbackWidth, crop, focalPoint);
+  return /*#__PURE__*/_jsxs("picture", {
+    children: [contentType !== "image/gif" && /*#__PURE__*/_jsx("source", {
+      type: contentType,
+      srcSet: srcSet,
+      sizes: sizes
+    }), /*#__PURE__*/_jsx(styled.img, {
+      alt: alt,
+      src: contentType === "image/gif" ? src : `${src}?${queryString}`,
+      ...props,
+      ref: ref
+    })]
+  });
+});

package/es/Input.js

@@ -141,7 +141,7 @@ export const TextArea = /*#__PURE__*/forwardRef((_ref3, ref) => {
   const resize = useCallback(() => {
     if (!localRef.current) return;
     localRef.current.style.height = "0";
-    localRef.current.style.height = "".concat(localRef.current.scrollHeight + 3, "px");
+    localRef.current.style.height = `${localRef.current.scrollHeight + 3}px`;
   }, []);
   useEffect(() => {
     window.addEventListener("input", resize);

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 {