@ndla/primitives 0.0.1

package/es/Icon.js

@@ -0,0 +1,71 @@
+/**
+ * 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 { cva, cx } from "@ndla/styled-system/css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const iconRecipe = cva({
+  base: {
+    display: "inline-block",
+    fill: "currentcolor",
+    verticalAlign: "middle",
+    lineHeight: "1em",
+    flexShrink: "0"
+  },
+  defaultVariants: {
+    size: "medium"
+  },
+  variants: {
+    size: {
+      xsmall: {
+        width: "xsmall",
+        height: "xsmall"
+      },
+      small: {
+        width: "small",
+        height: "small"
+      },
+      medium: {
+        width: "medium",
+        height: "medium"
+      },
+      large: {
+        width: "large",
+        height: "large"
+      }
+    }
+  }
+});
+// TODO: Move this component over to ndla/icons
+export const Icon = _ref => {
+  let {
+    children,
+    size,
+    role,
+    title,
+    description,
+    width,
+    height,
+    className,
+    "aria-hidden": ariaHidden = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsxs("svg", {
+    "data-icon": "",
+    "aria-hidden": ariaHidden,
+    preserveAspectRatio: "xMidYMid meet",
+    ...props,
+    className: cx(iconRecipe({
+      size
+    }), className),
+    children: [title && /*#__PURE__*/_jsx("title", {
+      children: title
+    }), description && /*#__PURE__*/_jsx("desc", {
+      children: description
+    }), children]
+  });
+};

package/es/Input.js

@@ -0,0 +1,159 @@
+/**
+ * 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 { createContext, forwardRef, useCallback, useContext, useEffect, useRef } from "react";
+import { css, cx } 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({
+  outline: "1px solid",
+  outlineColor: "stroke.subtle",
+  background: "background.default",
+  borderRadius: "xsmall",
+  minHeight: "xxlarge",
+  paddingBlock: "0",
+  paddingInline: "xsmall",
+  _ariaInvalid: {
+    outlineColor: "stroke.error",
+    _hover: {
+      outlineColor: "stroke.error"
+    },
+    _focusWithin: {
+      outlineColor: "stroke.error",
+      _hover: {
+        outlineColor: "stroke.error"
+      }
+    }
+  },
+  _hover: {
+    outlineColor: "stroke.hover"
+  },
+  _focusWithin: {
+    outlineWidth: "2px",
+    outlineOffset: "-1px",
+    outlineColor: "stroke.default",
+    _hover: {
+      outlineColor: "stroke.default"
+    }
+  },
+  "&:disabled, &:has(:disabled)": {
+    outlineColor: "stroke.subtle",
+    _hover: {
+      outlineColor: "stroke.subtle"
+    }
+  }
+});
+const StyledInputContainer = styled("div", {
+  base: {
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    "& svg": {
+      width: "medium",
+      height: "medium"
+    }
+  }
+});
+export const InputContainer = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(InputContext.Provider, {
+    value: {},
+    children: /*#__PURE__*/_jsx(StyledInputContainer, {
+      className: cx(css(inputCss), className),
+      ...rest,
+      ref: ref,
+      children: children
+    })
+  });
+});
+const baseInputCss = css.raw({
+  width: "100%",
+  color: "text.default",
+  outline: "none",
+  background: "none",
+  border: "0",
+  padding: "xxsmall",
+  _disabled: {
+    cursor: "not-allowed"
+  },
+  // Chrome messes with input styling when autofilling. Having a really long transitions cancels this out.
+  _autofill: {
+    transition: "background-color 600000s 0s, color 600000s 0s"
+  },
+  _focus: {
+    appearance: "none"
+  }
+});
+const baseTextAreaCss = css.raw({
+  paddingInline: "xsmall",
+  paddingBlock: "xsmall",
+  resize: "none",
+  overflowY: "hidden"
+});
+export const Input = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref2;
+  const context = useContext(InputContext);
+  return /*#__PURE__*/_jsx(styled.input, {
+    className: cx(css(baseInputCss, context ? undefined : inputCss), className),
+    ref: ref,
+    ...props
+  });
+});
+export const FormInput = /*#__PURE__*/forwardRef((props, ref) => {
+  const field = useFormControl(props);
+  return /*#__PURE__*/_jsx(Input, {
+    ...field,
+    ref: ref
+  });
+});
+export const TextArea = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    className,
+    ...props
+  } = _ref3;
+  const context = useContext(InputContext);
+  const localRef = useRef(null);
+
+  // Automatically resize a textarea based on its content
+  const resize = useCallback(() => {
+    if (!localRef.current) return;
+    localRef.current.style.height = "0";
+    localRef.current.style.height = "".concat(localRef.current.scrollHeight + 3, "px");
+  }, []);
+  useEffect(() => {
+    window.addEventListener("input", resize);
+    window.addEventListener("resize", resize);
+    resize();
+    return () => {
+      window.removeEventListener("input", resize);
+      window.removeEventListener("resize", resize);
+    };
+  }, [resize]);
+  return /*#__PURE__*/_jsx(styled.textarea, {
+    className: cx(css(baseInputCss, context ? undefined : inputCss, baseTextAreaCss), className),
+    ref: composeRefs(ref, localRef),
+    ...props
+  });
+});
+export const FormTextArea = /*#__PURE__*/forwardRef((props, ref) => {
+  const field = useFormControl(props);
+  return /*#__PURE__*/_jsx(TextArea, {
+    ...field,
+    ref: ref
+  });
+});

package/es/Label.js

@@ -0,0 +1,104 @@
+/**
+ * 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 { css, cx } 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", {
+  base: {
+    float: "none",
+    width: "inherit",
+    _disabled: {
+      color: "text.subtle"
+    }
+  }
+});
+export const Legend = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    className,
+    srOnly,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledLegend, {
+    className: cx(css({
+      textStyle,
+      fontWeight,
+      srOnly
+    }), className),
+    ...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", {
+  base: {
+    display: "inline-block",
+    _disabled: {
+      color: "text.subtle"
+    }
+  }
+});
+export const Label = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    className,
+    srOnly,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/_jsx(StyledLabel, {
+    className: cx(css({
+      textStyle,
+      fontWeight,
+      srOnly
+    }), className),
+    ...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, {
+    ...props,
+    ...fieldProps,
+    ref: ref
+  });
+});
+export const Fieldset = styled("fieldset", {
+  base: {
+    border: "none",
+    padding: "0",
+    margin: "0"
+  }
+});

package/es/Menu.js

@@ -0,0 +1,171 @@
+/**
+ * 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 { 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 { createStyleContext } from "./createStyleContext";
+import { Text } from "./Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+const itemStyle = {
+  display: "flex",
+  alignItems: "center",
+  borderRadius: "xsmall",
+  cursor: "pointer",
+  textStyle: "label.medium",
+  paddingBlock: "4xsmall",
+  paddingInline: "xsmall",
+  gap: "xsmall",
+  transitionDuration: "fast",
+  transitionProperty: "background, color",
+  transitionTimingFunction: "default",
+  outline: "none",
+  _hover: {
+    textDecoration: "underline"
+  },
+  _highlighted: {
+    textDecoration: "underline"
+  },
+  _disabled: {
+    color: "text.disabled",
+    cursor: "not-allowed",
+    "& svg": {
+      color: "stroke.disabled"
+    },
+    _hover: {
+      color: "text.disabled",
+      textDecoration: "none",
+      background: "surface.default",
+      "& svg": {
+        color: "stroke.disabled"
+      }
+    }
+  }
+};
+const itemCva = cva({
+  defaultVariants: {
+    variant: "action"
+  },
+  variants: {
+    variant: {
+      action: {
+        _hover: {
+          background: "surface.hover"
+        },
+        _highlighted: {
+          background: "surface.hover"
+        },
+        _active: {
+          background: "surface.active"
+        }
+      },
+      destructive: {
+        color: "text.error",
+        "& svg": {
+          color: "icon.error"
+        },
+        _hover: {
+          color: "text.default",
+          "& svg": {
+            color: "icon.default"
+          },
+          background: "surface.errorSubtle.hover"
+        },
+        _highlighted: {
+          color: "text.default",
+          "& svg": {
+            color: "icon.default"
+          },
+          background: "surface.errorSubtle.hover"
+        },
+        _active: {
+          background: "surface.errorSubtle.active"
+        }
+      }
+    }
+  }
+});
+const menuRecipe = sva({
+  slots: menuAnatomy.keys(),
+  base: {
+    item: itemStyle,
+    triggerItem: itemStyle,
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      width: "fit-content",
+      minWidth: "surface.xxsmall",
+      padding: "3xsmall",
+      gap: "3xsmall",
+      background: "surface.default",
+      boxShadow: "xsmall",
+      borderRadius: "xsmall",
+      outline: "none",
+      zIndex: "dropdown",
+      _open: {
+        animation: "fade-shift-in 0.25s ease-out"
+      },
+      _closed: {
+        animation: "fade-shift-out 0.25s ease-out"
+      }
+    },
+    itemGroup: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3xsmall"
+    },
+    positioner: {
+      zIndex: "dropdown"
+    }
+  }
+});
+const {
+  withRootProvider,
+  withContext
+} = createStyleContext(menuRecipe);
+const InternalMenuRoot = withRootProvider(Menu.Root);
+export const MenuRoot = _ref => {
+  let {
+    lazyMount = true,
+    unmountOnExit = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalMenuRoot, {
+    lazyMount: lazyMount,
+    unmountOnExit: unmountOnExit,
+    ...props
+  });
+};
+export const MenuContent = withContext(Menu.Content, "content");
+const InternalMenuItemGroupLabel = withContext(Menu.ItemGroupLabel, "itemGroupLabel");
+export const MenuItemGroupLabel = _ref2 => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(InternalMenuItemGroupLabel, {
+    ...props,
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Text, {
+      textStyle: textStyle,
+      fontWeight: fontWeight,
+      children: children
+    })
+  });
+};
+export const MenuItemGroup = withContext(Menu.ItemGroup, "itemGroup");
+const InternalMenuItem = withContext(Menu.Item, "item");
+export const MenuItem = styled(InternalMenuItem, itemCva);
+export const MenuPositioner = withContext(Menu.Positioner, "positioner");
+const InternalMenuTriggerItem = withContext(Menu.TriggerItem, "triggerItem");
+export const MenuTriggerItem = styled(InternalMenuTriggerItem, itemCva);
+export const MenuTrigger = withContext(Menu.Trigger, "trigger");
+export const MenuSeparator = withContext(Menu.Separator, "separator");

package/es/MessageBox.js

@@ -0,0 +1,57 @@
+/**
+ * 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 { cva, cx } 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",
+    alignItems: "flex-start",
+    gap: "small",
+    padding: "medium",
+    border: "1px solid",
+    borderRadius: "xsmall"
+  },
+  defaultVariants: {
+    variant: "info"
+  },
+  variants: {
+    variant: {
+      info: {
+        background: "surface.infoSubtle",
+        borderColor: "stroke.subtle"
+      },
+      warning: {
+        background: "surface.warningSubtle",
+        borderColor: "stroke.warning"
+      },
+      success: {
+        background: "surface.successSubtle",
+        borderColor: "stroke.success"
+      },
+      error: {
+        background: "surface.errorSubtle",
+        borderColor: "stroke.error"
+      }
+    }
+  }
+});
+export const MessageBox = _ref => {
+  let {
+    className,
+    variant,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(styled.div, {
+    className: cx(messageBoxRecipe({
+      variant
+    }), className),
+    ...rest
+  });
+};