@ndla/primitives 0.0.2 → 0.0.3

package/es/Button.js

@@ -7,7 +7,8 @@
  */
 
 import { forwardRef } from "react";
-import { css, cva, cx } from "@ndla/styled-system/css";
+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";
 export const buttonBaseRecipe = cva({
@@ -160,53 +161,59 @@ export const buttonRecipe = cva({
     }
   }
 });
+export const iconButtonRecipe = cva({
+  base: {
+    lineHeight: "1",
+    minHeight: "unset",
+    height: "fit-content",
+    "& svg": {
+      marginInline: "0",
+      marginBlock: "0",
+      width: "medium",
+      height: "medium"
+    },
+    paddingInline: "xsmall",
+    paddingBlock: "xsmall"
+  }
+});
+const StyledButton = styled(ark.button, {}, {
+  defaultProps: {
+    type: "button"
+  }
+});
 export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
-    type,
-    size,
-    className,
     variant,
-    ...rest
+    size,
+    css: cssProp,
+    ...props
   } = _ref;
-  return /*#__PURE__*/_jsx(styled.button, {
-    type: type !== null && type !== void 0 ? type : "button",
-    className: cx(css(buttonBaseRecipe.raw({
+  return /*#__PURE__*/_jsx(StyledButton, {
+    ...props,
+    css: css.raw(buttonBaseRecipe.raw({
       variant
     }), buttonRecipe.raw({
       size
-    })), className),
-    ...rest,
+    }), cssProp),
     ref: ref
   });
 });
+const StyledIconButton = styled(ark.button, {}, {
+  defaultProps: {
+    type: "button"
+  }
+});
 export const IconButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
-    type,
-    className,
     variant,
-    ...rest
+    css: cssProp,
+    ...props
   } = _ref2;
-  return /*#__PURE__*/_jsx(styled.button, {
-    type: type !== null && type !== void 0 ? type : "button",
-    className: cx(css(buttonBaseRecipe.raw({
+  return /*#__PURE__*/_jsx(StyledIconButton, {
+    ...props,
+    css: css.raw(buttonBaseRecipe.raw({
       variant
-    }), iconButtonRecipe.raw()), className),
-    ...rest,
+    }), iconButtonRecipe.raw(), cssProp),
     ref: ref
   });
-});
-export const iconButtonRecipe = cva({
-  base: {
-    lineHeight: "1",
-    minHeight: "unset",
-    height: "fit-content",
-    "& svg": {
-      marginInline: "0",
-      marginBlock: "0",
-      width: "medium",
-      height: "medium"
-    },
-    paddingInline: "xsmall",
-    paddingBlock: "xsmall"
-  }
 });

package/es/Dialog.js

@@ -7,6 +7,7 @@
  */
 
 import { forwardRef } from "react";
+import { dialogAnatomy } from "@ark-ui/anatomy";
 import { Dialog } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
@@ -14,9 +15,7 @@ import { createStyleContext } from "./createStyleContext";
 import { Heading, Text } from "./Text";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const dialogRecipe = sva({
-  // We only use a subset of the dialog components, so we roll our own slots instead of relying on @ark/anatomy.
-  slots: ["positioner", "backdrop", "content"],
-  className: "dialog",
+  slots: dialogAnatomy.keys(),
   base: {
     backdrop: {
       position: "fixed",
@@ -278,29 +277,29 @@ export const DialogContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__
     })
   })]
 }));
+const InternalDialogDescription = withContext(Dialog.Description, "description");
 export const DialogDescription = _ref2 => {
   let {
     textStyle = "body.large",
     ...rest
   } = _ref2;
-  return /*#__PURE__*/_jsx(Dialog.Description, {
+  return /*#__PURE__*/_jsx(InternalDialogDescription, {
     asChild: true,
     children: /*#__PURE__*/_jsx(Text, {
-      as: "p",
       textStyle: textStyle,
       ...rest
     })
   });
 };
+const InternalDialogTitle = withContext(Dialog.Title, "title");
 export const DialogTitle = _ref3 => {
   let {
     textStyle = "title.medium",
     ...rest
   } = _ref3;
-  return /*#__PURE__*/_jsx(Dialog.Title, {
+  return /*#__PURE__*/_jsx(InternalDialogTitle, {
     asChild: true,
     children: /*#__PURE__*/_jsx(Heading, {
-      as: "h1",
       textStyle: textStyle,
       ...rest
     })

package/es/ExpandableBox.js

@@ -6,9 +6,9 @@
  *
  */
 
+import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledExpandableBox = styled("details", {
+export const ExpandableBox = styled("details", {
   base: {
     transitionDuration: "fast",
     width: "100%",
@@ -25,10 +25,7 @@ const StyledExpandableBox = styled("details", {
     }
   }
 });
-export const ExpandableBox = props => /*#__PURE__*/_jsx(StyledExpandableBox, {
-  ...props
-});
-const StyledExpandableBoxSummary = styled("summary", {
+export const ExpandableBoxSummary = styled(ark.summary, {
   base: {
     cursor: "pointer",
     margin: "-medium",
@@ -42,14 +39,4 @@ const StyledExpandableBoxSummary = styled("summary", {
       textStyle: "label.large!"
     }
   }
-});
-export const ExpandableBoxSummary = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledExpandableBoxSummary, {
-    ...rest,
-    children: children
-  });
-};
+});

package/es/FieldErrorMessage.js

@@ -7,14 +7,16 @@
  */
 
 import { forwardRef } from "react";
-import { css, cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react";
+import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { useFormControlContext } from "./FormControl";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledErrorMessage = styled("div", {
+const StyledErrorMessage = styled(ark.div, {
   base: {
     color: "text.error",
-    whiteSpace: "pre-line"
+    whiteSpace: "pre-line",
+    justifyContent: "center"
   }
 });
 export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -22,9 +24,9 @@ export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     textStyle = "label.small",
     fontWeight,
+    css: cssProp,
     color,
     srOnly,
-    className,
     ...props
   } = _ref;
   const field = useFormControlContext();
@@ -34,11 +36,11 @@ export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
       ref,
       ...props
     }),
-    className: cx(css({
+    css: css.raw({
       textStyle,
       fontWeight,
       color,
-      srOnly: srOnly
-    }), className)
+      srOnly
+    }, cssProp)
   });
 });

package/es/FieldHelper.js

@@ -7,10 +7,12 @@
  */
 
 import { forwardRef } from "react";
-import { css, cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react";
+import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { useFormControlContext } from "./FormControl";
 import { jsx as _jsx } from "react/jsx-runtime";
+const StyledDiv = styled(ark.div);
 export const FieldHelper = /*#__PURE__*/forwardRef((_ref, ref) => {
   var _field$getHelpTextPro;
   let {
@@ -18,20 +20,20 @@ export const FieldHelper = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontWeight,
     color,
     srOnly,
-    className,
+    css: cssProp,
     ...props
   } = _ref;
   const field = useFormControlContext();
-  return /*#__PURE__*/_jsx(styled.div, {
+  return /*#__PURE__*/_jsx(StyledDiv, {
     ...((_field$getHelpTextPro = field === null || field === void 0 ? void 0 : field.getHelpTextProps(props, ref)) !== null && _field$getHelpTextPro !== void 0 ? _field$getHelpTextPro : {
       ref,
       ...props
     }),
-    className: cx(css({
+    css: css.raw({
       textStyle,
       fontWeight,
       color,
       srOnly
-    }), className)
+    }, cssProp)
   });
 });

package/es/FormControl.js

@@ -7,10 +7,11 @@
  */
 
 import { createContext, useCallback, useContext, useState } from "react";
+import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
 import { composeRefs } from "@ndla/util";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledFormControl = styled("div", {
+const StyledFormControl = styled(ark.div, {
   base: {
     display: "flex",
     flexDirection: "column",

package/es/FramedContent.js

@@ -6,9 +6,9 @@
  *
  */
 
-import { cva, cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react";
+import { cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
 const framedContentRecipe = cva({
   base: {
     padding: "medium",
@@ -39,16 +39,4 @@ const framedContentRecipe = cva({
     colorTheme: "neutral"
   }
 });
-export const FramedContent = _ref => {
-  let {
-    className,
-    colorTheme,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(styled.div, {
-    className: cx(framedContentRecipe({
-      colorTheme
-    }), className),
-    ...rest
-  });
-};
+export const FramedContent = styled(ark.div, framedContentRecipe);

package/es/Icon.js

@@ -6,7 +6,8 @@
  *
  */
 
-import { cva, cx } from "@ndla/styled-system/css";
+import { cva, css } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const iconRecipe = cva({
   base: {
@@ -40,6 +41,8 @@ export const iconRecipe = cva({
     }
   }
 });
+const StyledSvg = styled("svg");
+
 // TODO: Move this component over to ndla/icons
 export const Icon = _ref => {
   let {
@@ -50,18 +53,18 @@ export const Icon = _ref => {
     description,
     width,
     height,
-    className,
+    css: cssProp,
     "aria-hidden": ariaHidden = true,
     ...props
   } = _ref;
-  return /*#__PURE__*/_jsxs("svg", {
+  return /*#__PURE__*/_jsxs(StyledSvg, {
     "data-icon": "",
     "aria-hidden": ariaHidden,
     preserveAspectRatio: "xMidYMid meet",
-    ...props,
-    className: cx(iconRecipe({
+    css: css.raw(iconRecipe.raw({
       size
-    }), className),
+    }), cssProp),
+    ...props,
     children: [title && /*#__PURE__*/_jsx("title", {
       children: title
     }), description && /*#__PURE__*/_jsx("desc", {

package/es/Input.js

@@ -7,7 +7,8 @@
  */
 
 import { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from "react";
-import { css, cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react";
+import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { composeRefs } from "@ndla/util";
 import { useFormControl } from "./FormControl";
@@ -51,7 +52,7 @@ const inputCss = css.raw({
     }
   }
 });
-const StyledInputContainer = styled("div", {
+const StyledInputContainer = styled(ark.div, {
   base: {
     width: "100%",
     display: "flex",
@@ -65,13 +66,13 @@ const StyledInputContainer = styled("div", {
 export const InputContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     children,
-    className,
+    css: cssProp,
     ...rest
   } = _ref;
   return /*#__PURE__*/_jsx(InputContext.Provider, {
     value: {},
     children: /*#__PURE__*/_jsx(StyledInputContainer, {
-      className: cx(css(inputCss), className),
+      css: css.raw(inputCss, cssProp),
       ...rest,
       ref: ref,
       children: children
@@ -102,14 +103,15 @@ const baseTextAreaCss = css.raw({
   resize: "none",
   overflowY: "hidden"
 });
+const StyledInput = styled(ark.input);
 export const Input = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
-    className,
+    css: cssProp,
     ...props
   } = _ref2;
   const context = useContext(InputContext);
-  return /*#__PURE__*/_jsx(styled.input, {
-    className: cx(css(baseInputCss, context ? undefined : inputCss), className),
+  return /*#__PURE__*/_jsx(StyledInput, {
+    css: css.raw(baseInputCss, context ? undefined : inputCss, cssProp),
     ref: ref,
     ...props
   });
@@ -121,9 +123,10 @@ export const FormInput = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   });
 });
+const StyledTextArea = styled(ark.textarea);
 export const TextArea = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
-    className,
+    css: cssProp,
     ...props
   } = _ref3;
   const context = useContext(InputContext);
@@ -144,8 +147,8 @@ export const TextArea = /*#__PURE__*/forwardRef((_ref3, ref) => {
       window.removeEventListener("resize", resize);
     };
   }, [resize]);
-  return /*#__PURE__*/_jsx(styled.textarea, {
-    className: cx(css(baseInputCss, context ? undefined : inputCss, baseTextAreaCss), className),
+  return /*#__PURE__*/_jsx(StyledTextArea, {
+    css: css.raw(baseInputCss, context ? undefined : inputCss, baseTextAreaCss, cssProp),
     ref: composeRefs(ref, localRef),
     ...props
   });

package/es/Label.js

@@ -7,11 +7,12 @@
  */
 
 import { forwardRef } from "react";
-import { css, cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react";
+import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { useFormControlContext } from "./FormControl";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledLegend = styled("legend", {
+const StyledLegend = styled(ark.legend, {
   base: {
     float: "none",
     width: "inherit",
@@ -24,16 +25,16 @@ export const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     textStyle = "label.medium",
     fontWeight = "bold",
-    className,
+    css: cssProp,
     srOnly,
     ...rest
   } = _ref;
   return /*#__PURE__*/_jsx(StyledLegend, {
-    className: cx(css({
+    css: css.raw({
       textStyle,
       fontWeight,
       srOnly
-    }), className),
+    }, cssProp),
     ...rest,
     ref: ref
   });
@@ -56,7 +57,7 @@ export const FormLegend = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   });
 });
-const StyledLabel = styled("label", {
+const StyledLabel = styled(ark.label, {
   base: {
     display: "inline-block",
     _disabled: {
@@ -68,16 +69,16 @@ export const Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     textStyle = "label.medium",
     fontWeight = "bold",
-    className,
+    css: cssProp,
     srOnly,
     ...rest
   } = _ref2;
   return /*#__PURE__*/_jsx(StyledLabel, {
-    className: cx(css({
+    css: css.raw({
       textStyle,
       fontWeight,
       srOnly
-    }), className),
+    }, cssProp),
     ...rest,
     ref: ref
   });

package/es/Menu.js

@@ -6,14 +6,14 @@
  *
  */
 
+import { forwardRef } from "react";
 import { menuAnatomy } from "@ark-ui/anatomy";
 import { Menu } from "@ark-ui/react";
-import { cva, sva } from "@ndla/styled-system/css";
-import { styled } from "@ndla/styled-system/jsx";
+import { css, cva, sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
 import { Text } from "./Text";
 import { jsx as _jsx } from "react/jsx-runtime";
-const itemStyle = {
+const itemStyle = css.raw({
   display: "flex",
   alignItems: "center",
   borderRadius: "xsmall",
@@ -47,7 +47,7 @@ const itemStyle = {
       }
     }
   }
-};
+});
 const itemCva = cva({
   defaultVariants: {
     variant: "action"
@@ -163,9 +163,35 @@ export const MenuItemGroupLabel = _ref2 => {
 };
 export const MenuItemGroup = withContext(Menu.ItemGroup, "itemGroup");
 const InternalMenuItem = withContext(Menu.Item, "item");
-export const MenuItem = styled(InternalMenuItem, itemCva);
+export const MenuItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    css: cssProp = {},
+    variant,
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/_jsx(InternalMenuItem, {
+    css: [itemCva.raw({
+      variant
+    }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])],
+    ...props,
+    ref: ref
+  });
+});
 export const MenuPositioner = withContext(Menu.Positioner, "positioner");
 const InternalMenuTriggerItem = withContext(Menu.TriggerItem, "triggerItem");
-export const MenuTriggerItem = styled(InternalMenuTriggerItem, itemCva);
+export const MenuTriggerItem = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    css: cssProp = {},
+    variant,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/_jsx(InternalMenuTriggerItem, {
+    css: [itemCva.raw({
+      variant
+    }), ...(Array.isArray(cssProp) ? cssProp : [cssProp])],
+    ...props,
+    ref: ref
+  });
+});
 export const MenuTrigger = withContext(Menu.Trigger, "trigger");
 export const MenuSeparator = withContext(Menu.Separator, "separator");

package/es/MessageBox.js

@@ -6,9 +6,9 @@
  *
  */
 
-import { cva, cx } from "@ndla/styled-system/css";
+import { ark } from "@ark-ui/react";
+import { cva } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
 const messageBoxRecipe = cva({
   base: {
     display: "flex",
@@ -42,16 +42,4 @@ const messageBoxRecipe = cva({
     }
   }
 });
-export const MessageBox = _ref => {
-  let {
-    className,
-    variant,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(styled.div, {
-    className: cx(messageBoxRecipe({
-      variant
-    }), className),
-    ...rest
-  });
-};
+export const MessageBox = styled(ark.div, messageBoxRecipe);

package/es/NdlaLogo.js

@@ -6,19 +6,20 @@
  *
  */
 
-import { css, cx } from "@ndla/styled-system/css";
+import { css } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BaseSvg = _ref => {
   let {
     color = "primary",
-    className,
+    css: cssProp,
     ...props
   } = _ref;
-  return /*#__PURE__*/_jsx("svg", {
+  return /*#__PURE__*/_jsx(styled.svg, {
     xmlns: "http://www.w3.org/2000/svg",
-    className: cx(css({
+    css: css.raw({
       color
-    }), className),
+    }, cssProp),
     ...props
   });
 };

package/es/RadioGroup.js

@@ -107,14 +107,18 @@ const InternalRadioGroupItemText = withContext(RadioGroup.ItemText, "itemText");
 export const RadioGroupItemText = _ref => {
   let {
     textStyle = "label.medium",
+    children,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(InternalRadioGroupItemText, {
     asChild: true,
     children: /*#__PURE__*/_jsx(Text, {
-      as: "span",
+      asChild: true,
       textStyle: textStyle,
-      ...props
+      ...props,
+      children: /*#__PURE__*/_jsx("span", {
+        children: children
+      })
     })
   });
 };

package/es/Skeleton.js

@@ -8,8 +8,7 @@
 
 import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledDiv = styled(ark.div, {
+export const Skeleton = styled(ark.div, {
   base: {
     animation: "skeleton-pulse",
     backgroundColor: "surface.disabled",
@@ -23,9 +22,4 @@ const StyledDiv = styled(ark.div, {
       visibility: "hidden"
     }
   }
-});
-export const Skeleton = props => {
-  return /*#__PURE__*/_jsx(StyledDiv, {
-    ...props
-  });
-};
+});