@ndla/primitives 0.0.3 → 0.0.4

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/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,12 +7,11 @@
  */
 
 import { forwardRef } from "react";
-import { ark } from "@ark-ui/react";
+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(ark.div, {
+const StyledErrorText = styled(Field.ErrorText, {
   base: {
     color: "text.error",
     whiteSpace: "pre-line",
@@ -20,7 +19,6 @@ const StyledErrorMessage = styled(ark.div, {
   }
 });
 export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _field$getErrorMessag;
   let {
     textStyle = "label.small",
     fontWeight,
@@ -29,18 +27,14 @@ export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
     srOnly,
     ...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
-    }),
+  return /*#__PURE__*/_jsx(StyledErrorText, {
     css: css.raw({
       textStyle,
       fontWeight,
       color,
       srOnly
-    }, cssProp)
+    }, cssProp),
+    ...props,
+    ref: ref
   });
 });

package/es/FieldHelper.js

@@ -7,14 +7,12 @@
  */
 
 import { forwardRef } from "react";
-import { ark } from "@ark-ui/react";
+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 StyledDiv = styled(ark.div);
+const StyledFieldHelper = styled(Field.HelperText);
 export const FieldHelper = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _field$getHelpTextPro;
   let {
     textStyle = "label.small",
     fontWeight,
@@ -23,17 +21,14 @@ export const FieldHelper = /*#__PURE__*/forwardRef((_ref, ref) => {
     css: cssProp,
     ...props
   } = _ref;
-  const field = useFormControlContext();
-  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
-    }),
+  return /*#__PURE__*/_jsx(StyledFieldHelper, {
     css: css.raw({
       textStyle,
       fontWeight,
       color,
       srOnly
-    }, cssProp)
+    }, cssProp),
+    ...props,
+    ref: ref
   });
 });

package/es/Input.js

@@ -7,11 +7,10 @@
  */
 
 import { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from "react";
-import { ark } from "@ark-ui/react";
+import { Field, 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";
 import { jsx as _jsx } from "react/jsx-runtime";
 const InputContext = /*#__PURE__*/createContext(undefined);
 const inputCss = css.raw({
@@ -116,13 +115,13 @@ export const Input = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...props
   });
 });
-export const FormInput = /*#__PURE__*/forwardRef((props, ref) => {
-  const field = useFormControl(props);
-  return /*#__PURE__*/_jsx(Input, {
-    ...field,
+export const FieldInput = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Field.Input, {
+  asChild: true,
+  children: /*#__PURE__*/_jsx(Input, {
+    ...props,
     ref: ref
-  });
-});
+  })
+}));
 const StyledTextArea = styled(ark.textarea);
 export const TextArea = /*#__PURE__*/forwardRef((_ref3, ref) => {
   let {
@@ -153,10 +152,10 @@ export const TextArea = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ...props
   });
 });
-export const FormTextArea = /*#__PURE__*/forwardRef((props, ref) => {
-  const field = useFormControl(props);
-  return /*#__PURE__*/_jsx(TextArea, {
-    ...field,
+export const FieldTextArea = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Field.Textarea, {
+  asChild: true,
+  children: /*#__PURE__*/_jsx(TextArea, {
+    ...props,
     ref: ref
-  });
-});
+  })
+}));

package/es/Label.js

@@ -7,10 +7,9 @@
  */
 
 import { forwardRef } from "react";
-import { ark } from "@ark-ui/react";
+import { Field, 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(ark.legend, {
   base: {
@@ -39,24 +38,6 @@ export const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
     ref: ref
   });
 });
-export const FormLegend = /*#__PURE__*/forwardRef((props, ref) => {
-  var _control$getLabelProp;
-  const control = useFormControlContext();
-  // Legend does not use htmlFor (for), so we remove it.
-  const {
-    id: _,
-    htmlFor: __,
-    ...fieldProps
-  } = (_control$getLabelProp = control === null || control === void 0 ? void 0 : control.getLabelProps(props, ref)) !== null && _control$getLabelProp !== void 0 ? _control$getLabelProp : {
-    ref,
-    ...props
-  };
-  return /*#__PURE__*/_jsx(Legend, {
-    ...props,
-    ...fieldProps,
-    ref: ref
-  });
-});
 const StyledLabel = styled(ark.label, {
   base: {
     display: "inline-block",
@@ -83,19 +64,13 @@ export const Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ref: ref
   });
 });
-export const FormLabel = /*#__PURE__*/forwardRef((props, ref) => {
-  var _control$getLabelProp2;
-  const control = useFormControlContext();
-  const fieldProps = (_control$getLabelProp2 = control === null || control === void 0 ? void 0 : control.getLabelProps(props, ref)) !== null && _control$getLabelProp2 !== void 0 ? _control$getLabelProp2 : {
-    ref,
-    ...props
-  };
-  return /*#__PURE__*/_jsx(Label, {
+export const FieldLabel = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(Field.Label, {
+  asChild: true,
+  children: /*#__PURE__*/_jsx(Label, {
     ...props,
-    ...fieldProps,
     ref: ref
-  });
-});
+  })
+}));
 export const Fieldset = styled("fieldset", {
   base: {
     border: "none",

package/es/RadioGroup.js

@@ -11,7 +11,6 @@ import { radioGroupAnatomy } from "@ark-ui/anatomy";
 import { RadioGroup } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
-import { useFormControl } from "./FormControl";
 import { Label } from "./Label";
 import { Text } from "./Text";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -92,14 +91,7 @@ const {
   withProvider,
   withContext
 } = createStyleContext(radioGroupRecipe);
-const InternalRadioGroupRoot = withProvider(RadioGroup.Root, "root");
-export const RadioGroupRoot = /*#__PURE__*/forwardRef((props, ref) => {
-  const field = useFormControl(props);
-  return /*#__PURE__*/_jsx(InternalRadioGroupRoot, {
-    ...field,
-    ref: ref
-  });
-});
+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");

package/es/Switch.js

@@ -6,12 +6,10 @@
  *
  */
 
-import { forwardRef } from "react";
 import { switchAnatomy } from "@ark-ui/anatomy";
 import { Switch } 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 switchRecipe = sva({
@@ -100,16 +98,7 @@ const {
   withProvider,
   withContext
 } = createStyleContext(switchRecipe);
-const InternalSwitchRoot = withProvider(Switch.Root, "root");
-export const SwitchRoot = /*#__PURE__*/forwardRef((props, ref) => {
-  var _field$invalid;
-  const field = useFormControl(props);
-  return /*#__PURE__*/_jsx(InternalSwitchRoot, {
-    invalid: (_field$invalid = field.invalid) !== null && _field$invalid !== void 0 ? _field$invalid : !!field["aria-invalid"],
-    ...field,
-    ref: ref
-  });
-});
+export const SwitchRoot = withProvider(Switch.Root, "root");
 export const SwitchControl = withContext(Switch.Control, "control");
 export const SwitchThumb = withContext(Switch.Thumb, "thumb");
 const InternalSwitchLabel = withContext(Switch.Label, "label");

package/es/Tabs.js

@@ -6,14 +6,13 @@
  *
  */
 
+import { tabsAnatomy } from "@ark-ui/anatomy";
 import { Tabs } from "@ark-ui/react";
 import { cx, sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
 import { jsx as _jsx } from "react/jsx-runtime";
 const tabsRecipe = sva({
-  // TODO: Defining the slots manually fixes an issue with variants not generating properly.
-  // Come back to this once ark releases a new version.
-  slots: ["root", "list", "trigger", "content", "indicator"],
+  slots: tabsAnatomy.keys(),
   base: {
     root: {
       position: "relative",

package/lib/BlockQuote.d.ts

@@ -12,6 +12,7 @@ declare const blockQuoteRecipe: import("@ndla/styled-system/types").RecipeRuntim
     variant: {
         neutral: {
             borderColor: "stroke.subtle";
+            background: "surface.default";
         };
         brand1: {
             background: "surface.brand.1.subtle";

package/lib/BlockQuote.js

@@ -23,8 +23,8 @@ const blockQuoteRecipe = (0, _css.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",