@ndla/primitives 0.0.2 → 0.0.4

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,10 +7,10 @@
  */
 
 import { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from "react";
-import { css, cx } from "@ndla/styled-system/css";
+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({
@@ -51,7 +51,7 @@ const inputCss = css.raw({
     }
   }
 });
-const StyledInputContainer = styled("div", {
+const StyledInputContainer = styled(ark.div, {
   base: {
     width: "100%",
     display: "flex",
@@ -65,13 +65,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,28 +102,30 @@ 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
   });
 });
-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 {
-    className,
+    css: cssProp,
     ...props
   } = _ref3;
   const context = useContext(InputContext);
@@ -144,16 +146,16 @@ 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
   });
 });
-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,11 +7,11 @@
  */
 
 import { forwardRef } from "react";
-import { css, cx } from "@ndla/styled-system/css";
+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("legend", {
+const StyledLegend = styled(ark.legend, {
   base: {
     float: "none",
     width: "inherit",
@@ -24,39 +24,21 @@ 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
   });
 });
-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("label", {
+const StyledLabel = styled(ark.label, {
   base: {
     display: "inline-block",
     _disabled: {
@@ -68,33 +50,27 @@ 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
   });
 });
-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/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

@@ -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");
@@ -107,14 +99,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
-  });
-};
+});

package/es/Spinner.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";
 export const spinnerRecipe = cva({
   base: {
     borderRadius: "full",
@@ -39,16 +39,4 @@ export const spinnerRecipe = cva({
     }
   }
 });
-export const Spinner = _ref => {
-  let {
-    size,
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/_jsx(styled.div, {
-    className: cx(spinnerRecipe({
-      size
-    }), className),
-    ...props
-  });
-};
+export const Spinner = styled(ark.div, spinnerRecipe);

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,30 +98,25 @@ const {
   withProvider,
   withContext
 } = createStyleContext(switchRecipe);
-export 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");
-export const InternalSwitchLabel = withContext(Switch.Label, "label");
+const InternalSwitchLabel = withContext(Switch.Label, "label");
 export const SwitchLabel = _ref => {
   let {
     textStyle = "label.medium",
+    children,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(InternalSwitchLabel, {
     asChild: true,
     children: /*#__PURE__*/_jsx(Text, {
-      as: "span",
+      asChild: true,
       textStyle: textStyle,
-      ...props
+      ...props,
+      children: /*#__PURE__*/_jsx("span", {
+        children: children
+      })
     })
   });
 };

package/es/Table.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 StyledTable = styled("table", {
+export const Table = styled(ark.table, {
   base: {
     display: "block",
     overflowX: "auto",
@@ -69,7 +69,4 @@ const StyledTable = styled("table", {
       }
     }
   }
-});
-export const Table = props => /*#__PURE__*/_jsx(StyledTable, {
-  ...props
 });