@ndla/primitives 0.0.2 → 0.0.4

package/es/Badge.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 badgeRecipe = cva({
   base: {
     paddingInline: "xsmall",
@@ -26,7 +26,7 @@ const badgeRecipe = cva({
         borderColor: "surface.brand.1.strong"
       },
       brand2: {
-        backgroundColor: "surface.brand.2.subtle",
+        backgroundColor: "surface.brand.2.moderate",
         borderColor: "surface.brand.2.strong"
       },
       brand3: {
@@ -40,16 +40,4 @@ const badgeRecipe = cva({
     }
   }
 });
-export const Badge = _ref => {
-  let {
-    colorTheme,
-    className,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(styled.div, {
-    className: cx(badgeRecipe({
-      colorTheme
-    }), className),
-    ...rest
-  });
-};
+export const Badge = styled(ark.div, badgeRecipe);

package/es/BlockQuote.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 blockQuoteRecipe = cva({
   base: {
     borderInlineStart: "4px solid",
@@ -17,8 +17,8 @@ const blockQuoteRecipe = cva({
   variants: {
     variant: {
       neutral: {
-        borderColor: "stroke.subtle"
-        // TODO: Figure out if this should have a background color.
+        borderColor: "stroke.subtle",
+        background: "surface.default"
       },
       brand1: {
         background: "surface.brand.1.subtle",
@@ -34,16 +34,4 @@ const blockQuoteRecipe = cva({
     variant: "neutral"
   }
 });
-export const BlockQuote = _ref => {
-  let {
-    className,
-    variant,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(styled.blockquote, {
-    className: cx(blockQuoteRecipe({
-      variant
-    }), className),
-    ...rest
-  });
-};
+export const BlockQuote = styled(ark.blockquote, blockQuoteRecipe);

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

@@ -6,12 +6,10 @@
  *
  */
 
-import { forwardRef } from "react";
 import { checkboxAnatomy } from "@ark-ui/anatomy";
 import { Checkbox } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
-import { useFormControl } from "./FormControl";
 import { Text } from "./Text";
 import { jsx as _jsx } from "react/jsx-runtime";
 const checkboxRecipe = sva({
@@ -22,19 +20,12 @@ const checkboxRecipe = sva({
       display: "flex",
       alignItems: "center",
       cursor: "pointer",
-      gap: "xxsmall",
       _disabled: {
         color: "text.disabled",
-        cursor: "not-allowed"
-      },
-      _hover: {
-        color: "text.action"
-      },
-      _focus: {
-        outline: "2px solid",
-        outlineOffset: "4xsmall",
-        outlineColor: "stroke.default",
-        borderRadius: "xsmall"
+        cursor: "not-allowed",
+        _hover: {
+          color: "text.disabled"
+        }
       }
     },
     control: {
@@ -44,39 +35,167 @@ const checkboxRecipe = sva({
       cursor: "pointer",
       width: "medium",
       height: "medium",
-      background: "surface.default",
-      borderRadius: "xsmall",
-      border: "2px solid",
-      borderColor: "stroke.subtle",
       color: "text.strong",
       transitionDuration: "normal",
       transitionProperty: "border-color, background, box-shadow, color",
-      transitionTimingFunction: "default",
-      _hover: {
-        boxShadow: "0 0 0 4px var(--shadow-color)",
-        boxShadowColor: "surface.actionSubtle.hover.strong"
-      },
-      _checked: {
-        color: "icon.onAction",
-        backgroundColor: "surface.action",
-        borderColor: "surface.action"
-      },
-      _disabled: {
-        borderColor: "stroke.disabled",
-        _hover: {
-          borderColor: "stroke.disabled",
-          boxShadow: "none"
+      transitionTimingFunction: "default"
+    }
+  },
+  defaultVariants: {
+    variant: "checkbox"
+  },
+  variants: {
+    variant: {
+      checkbox: {
+        root: {
+          gap: "xxsmall",
+          _hover: {
+            color: "text.action"
+          },
+          _focus: {
+            outline: "2px solid",
+            outlineOffset: "4xsmall",
+            outlineColor: "stroke.default",
+            borderRadius: "xsmall"
+          }
         },
-        _checked: {
-          background: "surface.disabled"
+        control: {
+          border: "2px solid",
+          borderColor: "stroke.subtle",
+          borderRadius: "xsmall",
+          background: "surface.default",
+          _hover: {
+            boxShadow: "0 0 0 4px var(--shadow-color)",
+            boxShadowColor: "surface.actionSubtle.hover.strong"
+          },
+          _checked: {
+            backgroundColor: "surface.action",
+            borderColor: "surface.action",
+            color: "icon.onAction"
+          },
+          _disabled: {
+            borderColor: "stroke.disabled",
+            _hover: {
+              borderColor: "stroke.disabled",
+              boxShadow: "none"
+            },
+            _checked: {
+              background: "surface.disabled"
+            }
+          },
+          _invalid: {
+            borderColor: "stroke.error",
+            _checked: {
+              color: "stroke.error",
+              borderColor: "stroke.error",
+              backgroundColor: "surface.default"
+            }
+          }
         }
       },
-      _invalid: {
-        borderColor: "stroke.error",
-        _checked: {
-          color: "stroke.error",
-          borderColor: "stroke.error",
-          backgroundColor: "surface.default"
+      chip: {
+        root: {
+          width: "fit-content",
+          color: "text.default",
+          gap: "4xsmall",
+          background: "surface.actionSubtle",
+          border: "1px solid",
+          borderColor: "stroke.subtle",
+          outlineColor: "stroke.subtle",
+          paddingInline: "xsmall",
+          paddingBlock: "4xsmall",
+          borderRadius: "large",
+          minHeight: "large",
+          transitionDuration: "normal",
+          transitionProperty: "border-color, background, box-shadow, color",
+          transitionTimingFunction: "default",
+          _disabled: {
+            color: "text.disabled",
+            borderColor: "stroke.disabled",
+            background: "surface.disabled",
+            _hover: {
+              color: "text.disabled",
+              borderColor: "stroke.disabled",
+              background: "surface.disabled"
+            },
+            _checked: {
+              color: "text.disabled",
+              borderColor: "stroke.disabled",
+              background: "surface.disabled",
+              _hover: {
+                color: "text.disabled",
+                borderColor: "stroke.disabled",
+                background: "surface.disabled"
+              }
+            }
+          },
+          _hover: {
+            background: "surface.actionSubtle.hover",
+            borderColor: "stroke.hover",
+            outlineColor: "stroke.hover",
+            _invalid: {
+              backgroundColor: "surface.dangerSubtle"
+            }
+          },
+          _checked: {
+            color: "text.onAction",
+            background: "surface.actionSubtle.selected",
+            borderColor: "surface.actionSubtle.selected",
+            outlineColor: "icon.onAction",
+            _focus: {
+              outlineOffset: "-4px"
+            },
+            _hover: {
+              outlineOffset: "-2px",
+              background: "surface.actionSubtle.hover",
+              color: "text.default",
+              borderColor: "stroke.hover",
+              outlineColor: "stroke.hover"
+            }
+          },
+          _invalid: {
+            borderColor: "stroke.error",
+            outlineColor: "stroke.error",
+            background: "surface.dangerSubtle",
+            outlineOffset: "-2px",
+            _checked: {
+              color: "text.default",
+              borderColor: "stroke.error",
+              outlineColor: "stroke.error",
+              background: "surface.dangerSubtle",
+              outlineOffset: "-2px",
+              _hover: {
+                borderColor: "stroke.hover",
+                outlineColor: "stroke.hover"
+              }
+            }
+          },
+          _focus: {
+            outlineStyle: "solid",
+            outlineWidth: "2px",
+            outlineOffset: "-2px"
+          }
+        },
+        control: {
+          display: "none",
+          _checked: {
+            display: "flex",
+            color: "text.onAction",
+            _hover: {
+              color: "stroke.hover"
+            }
+          },
+          _disabled: {
+            color: "stroke.disabled",
+            _hover: {
+              color: "stroke.disabled"
+            }
+          },
+          _invalid: {
+            _checked: {
+              color: "stroke.error"
+            }
+          }
         }
       }
     }
@@ -86,17 +205,7 @@ const {
   withProvider,
   withContext
 } = createStyleContext(checkboxRecipe);
-const InternalCheckboxRoot = withProvider(Checkbox.Root, "root");
-export const CheckboxRoot = /*#__PURE__*/forwardRef((props, ref) => {
-  var _field$invalid;
-  const field = useFormControl(props);
-  return /*#__PURE__*/_jsx(InternalCheckboxRoot, {
-    ...field,
-    invalid: (_field$invalid = field.invalid) !== null && _field$invalid !== void 0 ? _field$invalid : !!field["aria-invalid"],
-    ref: ref,
-    "aria-invalid": undefined
-  });
-});
+export const CheckboxRoot = withProvider(Checkbox.Root, "root");
 export const CheckboxIndicator = withContext(Checkbox.Indicator, "indicator");
 const InternalCheckboxLabel = withContext(Checkbox.Label, "label");
 export const CheckboxLabel = _ref => {

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

@@ -0,0 +1,17 @@
+/**
+ * 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 { Field } from "@ark-ui/react";
+import { styled } from "@ndla/styled-system/jsx";
+export const FieldRoot = styled(Field.Root, {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "3xsmall"
+  }
+});

package/es/FieldErrorMessage.js

@@ -7,38 +7,34 @@
  */
 
 import { forwardRef } from "react";
-import { css, cx } from "@ndla/styled-system/css";
+import { Field } 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 StyledErrorText = styled(Field.ErrorText, {
   base: {
     color: "text.error",
-    whiteSpace: "pre-line"
+    whiteSpace: "pre-line",
+    justifyContent: "center"
   }
 });
 export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _field$getErrorMessag;
   let {
     textStyle = "label.small",
     fontWeight,
+    css: cssProp,
     color,
     srOnly,
-    className,
     ...props
   } = _ref;
-  const field = useFormControlContext();
-  if (field && !field.isInvalid) return null;
-  return /*#__PURE__*/_jsx(StyledErrorMessage, {
-    ...((_field$getErrorMessag = field === null || field === void 0 ? void 0 : field.getErrorMessageProps(props, ref)) !== null && _field$getErrorMessag !== void 0 ? _field$getErrorMessag : {
-      ref,
-      ...props
-    }),
-    className: cx(css({
+  return /*#__PURE__*/_jsx(StyledErrorText, {
+    css: css.raw({
       textStyle,
       fontWeight,
       color,
-      srOnly: srOnly
-    }), className)
+      srOnly
+    }, cssProp),
+    ...props,
+    ref: ref
   });
 });

package/es/FieldHelper.js

@@ -7,31 +7,28 @@
  */
 
 import { forwardRef } from "react";
-import { css, cx } from "@ndla/styled-system/css";
+import { Field } 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 StyledFieldHelper = styled(Field.HelperText);
 export const FieldHelper = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _field$getHelpTextPro;
   let {
     textStyle = "label.small",
     fontWeight,
     color,
     srOnly,
-    className,
+    css: cssProp,
     ...props
   } = _ref;
-  const field = useFormControlContext();
-  return /*#__PURE__*/_jsx(styled.div, {
-    ...((_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({
+  return /*#__PURE__*/_jsx(StyledFieldHelper, {
+    css: css.raw({
       textStyle,
       fontWeight,
       color,
       srOnly
-    }), className)
+    }, cssProp),
+    ...props,
+    ref: ref
   });
 });

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);