@ndla/primitives 0.0.1

package/es/Slider.js

@@ -0,0 +1,102 @@
+/**
+ * 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 { sliderAnatomy } from "@ark-ui/anatomy";
+import { Slider } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { Label } from "./Label";
+import { jsx as _jsx } from "react/jsx-runtime";
+const sliderRecipe = sva({
+  slots: sliderAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4xsmall",
+      width: "100%"
+    },
+    control: {
+      position: "relative",
+      display: "flex",
+      _vertical: {
+        flexDirection: "column"
+      },
+      alignItems: "center",
+      height: "medium"
+    },
+    track: {
+      background: "surface.disabled",
+      overflow: "hidden",
+      flex: "1",
+      _vertical: {
+        width: "4xsmall"
+      },
+      _horizontal: {
+        height: "4xsmall"
+      }
+    },
+    range: {
+      background: "surface.action",
+      _vertical: {
+        width: "4xsmall"
+      },
+      _horizontal: {
+        height: "4xsmall"
+      }
+    },
+    thumb: {
+      background: "surface.action",
+      borderRadius: "full",
+      outline: "none",
+      zIndex: "1",
+      height: "medium",
+      width: "medium",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default",
+      transitionProperty: "background",
+      _hover: {
+        background: "surface.action.hover"
+      },
+      _active: {
+        background: "surface.action.active"
+      },
+      _focusVisible: {
+        border: "2px solid",
+        borderColor: "background.default",
+        outline: "3px solid",
+        outlineColor: "surface.action",
+        outlineOffset: "0px"
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(sliderRecipe);
+export const SliderRoot = withProvider(Slider.Root, "root");
+export const SliderControl = withContext(Slider.Control, "control");
+export const SliderTrack = withContext(Slider.Track, "track");
+export const SliderRange = withContext(Slider.Range, "range");
+export const SliderThumb = withContext(Slider.Thumb, "thumb");
+const InternalSliderLabel = withContext(Slider.Label, "label");
+export const SliderLabel = _ref => {
+  let {
+    textStyle = "label.medium",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalSliderLabel, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Label, {
+      textStyle: textStyle,
+      ...props
+    })
+  });
+};
+export const SliderHiddenInput = Slider.HiddenInput;

package/es/Spinner.js

@@ -0,0 +1,54 @@
+/**
+ * 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";
+export const spinnerRecipe = cva({
+  base: {
+    borderRadius: "full",
+    animation: "spin",
+    display: "block",
+    borderStyle: "solid",
+    borderBlockColor: "background.subtle",
+    borderInlineStartColor: "background.subtle",
+    borderInlineEndColor: "stroke.default",
+    marginBlock: "medium",
+    marginInline: "auto"
+  },
+  defaultVariants: {
+    size: "large"
+  },
+  variants: {
+    size: {
+      medium: {
+        borderWidth: "4px",
+        height: "large",
+        width: "large"
+      },
+      large: {
+        borderWidth: "8px",
+        height: "xxlarge",
+        width: "xxlarge"
+      }
+    }
+  }
+});
+export const Spinner = _ref => {
+  let {
+    size,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(styled.div, {
+    className: cx(spinnerRecipe({
+      size
+    }), className),
+    ...props
+  });
+};

package/es/Switch.js

@@ -0,0 +1,130 @@
+/**
+ * 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 { 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({
+  slots: switchAnatomy.keys(),
+  base: {
+    root: {
+      display: "inline-flex",
+      alignItems: "center",
+      position: "relative",
+      gap: "xxsmall",
+      _focus: {
+        outline: "2px solid",
+        outlineOffset: "4xsmall",
+        outlineColor: "stroke.default",
+        borderRadius: "xsmall"
+      }
+    },
+    control: {
+      display: "inline-flex",
+      alignItems: "center",
+      background: "surface.disabled.strong",
+      width: "xxlarge",
+      padding: "1",
+      borderRadius: "medium",
+      cursor: "pointer",
+      flexShrink: "0",
+      transitionDuration: "fast",
+      transitionProperty: "background",
+      transitionTimingFunction: "default",
+      _checked: {
+        background: "surface.action.active"
+      },
+      _disabled: {
+        background: "surface.disabled",
+        cursor: "not-allowed"
+      }
+    },
+    thumb: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      background: "icon.onAction",
+      borderRadius: "full",
+      boxShadow: "xsmall",
+      transitionDuration: "fast",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default",
+      width: "10",
+      height: "10",
+      textStyle: "label.xsmall",
+      fontWeight: "bold",
+      _hover: {
+        transform: "translateX(20%)",
+        _disabled: {
+          transform: "translateX(0)"
+        }
+      },
+      _checked: {
+        transform: "translateX(120%)",
+        _hover: {
+          transform: "translateX(100%)",
+          _disabled: {
+            transform: "translateX(120%)"
+          }
+        }
+      }
+    },
+    label: {
+      color: "text.strong",
+      transitionDuration: "fast",
+      transitionProperty: "color",
+      transitionTimingFunction: "default",
+      _hover: {
+        color: "text.action"
+      },
+      _disabled: {
+        color: "text.disabled",
+        _hover: {
+          color: "text.disabled"
+        }
+      }
+    }
+  }
+});
+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 SwitchControl = withContext(Switch.Control, "control");
+export const SwitchThumb = withContext(Switch.Thumb, "thumb");
+export const InternalSwitchLabel = withContext(Switch.Label, "label");
+export const SwitchLabel = _ref => {
+  let {
+    textStyle = "label.medium",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalSwitchLabel, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Text, {
+      as: "span",
+      textStyle: textStyle,
+      ...props
+    })
+  });
+};
+export const SwitchHiddenInput = Switch.HiddenInput;

package/es/Table.js

@@ -0,0 +1,75 @@
+/**
+ * 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 { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledTable = styled("table", {
+  base: {
+    display: "block",
+    overflowX: "auto",
+    maxWidth: "100%",
+    padding: "4xsmall",
+    tableLayout: "fixed",
+    "& > caption": {
+      fontWeight: "bold",
+      textAlign: "left",
+      textTransform: "uppercase",
+      marginBlockEnd: "xsmall"
+    },
+    "& thead": {
+      overflow: "hidden"
+    },
+    "& thead tr th": {
+      fontWeight: "bold",
+      borderBottom: "3px solid",
+      borderColor: "surface.brand.1.strong",
+      verticalAlign: "text-top"
+    },
+    "& tbody th": {
+      borderRight: "3px solid",
+      borderColor: "surface.brand.1.strong",
+      padding: "3xsmall"
+    },
+    "& thead tr:nth-child(2) th": {
+      border: "1px solid",
+      borderColor: "surface.brand.1.subtle",
+      textTransform: "none",
+      fontWeight: "semibold",
+      height: "large",
+      backgroundColor: "surface.brand.1.subtle",
+      paddingBlock: "4xsmall",
+      paddingInlineEnd: "medium",
+      paddingInlineStart: "3xsmall",
+      _empty: {
+        backgroundColor: "transparent"
+      }
+    },
+    "& td": {
+      border: "1px solid",
+      borderColor: "surface.brand.1.subtle",
+      verticalAlign: "top"
+    },
+    "& td, & th": {
+      display: "table-cell",
+      paddingInline: "xsmall",
+      paddingBlock: "3xsmall",
+      "&[data-align='center']": {
+        textAlign: "center"
+      },
+      "&[data-align='left']": {
+        textAlign: "left"
+      },
+      "&[data-align='right']": {
+        textAlign: "right"
+      }
+    }
+  }
+});
+export const Table = props => /*#__PURE__*/_jsx(StyledTable, {
+  ...props
+});

package/es/Text.js

@@ -0,0 +1,54 @@
+/**
+ * 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 { css, cx } from "@ndla/styled-system/css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BaseText = props => {
+  const {
+    as: As = "p",
+    className,
+    fontWeight,
+    color,
+    textStyle = "body.medium",
+    srOnly,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsx(As, {
+    className: cx(css({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly: srOnly
+    }), className),
+    ...rest
+  });
+};
+export const Heading = props => {
+  const {
+    as = "h1",
+    textStyle = "heading.medium",
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsx(BaseText, {
+    as: as,
+    textStyle: textStyle,
+    ...rest
+  });
+};
+export const Text = props => {
+  const {
+    as = "p",
+    textStyle = "body.medium",
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsx(BaseText, {
+    as: as,
+    textStyle: textStyle,
+    ...rest
+  });
+};

package/es/Toast.js

@@ -0,0 +1,82 @@
+/**
+ * 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 { toastAnatomy } from "@ark-ui/anatomy";
+import { Toast } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { Text } from "./Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+const toastRecipe = sva({
+  slots: toastAnatomy.keys(),
+  base: {
+    root: {
+      position: "relative",
+      background: "surface.action",
+      color: "text.onAction",
+      borderRadius: "xsmall",
+      boxShadow: "medium",
+      minWidth: "20rem",
+      height: "var(--height)",
+      opacity: "var(--opacity)",
+      overflowWrap: "anywhere",
+      padding: "small",
+      scale: "var(--scale)",
+      translate: "var(--x) var(--y) 0",
+      willChange: "translate, scale, opacity, height",
+      zIndex: "var(--z-index)",
+      transitionDuration: "slow",
+      transitionProperty: "translate, scale, opacity, height",
+      transitionTimingFunction: "default"
+    },
+    closeTrigger: {
+      position: "absolute",
+      top: "xxsmall",
+      right: "xxsmall"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(toastRecipe);
+export const ToastRoot = withProvider(Toast.Root, "root");
+export const ToastActionTrigger = withContext(Toast.ActionTrigger, "actionTrigger");
+export const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger");
+export const InternalToastDescription = withContext(Toast.Description, "description");
+export const ToastDescription = _ref => {
+  let {
+    textStyle = "label.medium",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalToastDescription, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Text, {
+      as: "div",
+      textStyle: textStyle,
+      ...props
+    })
+  });
+};
+export const InternalToastTitle = withContext(Toast.Title, "title");
+export const ToastTitle = _ref2 => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "semibold",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(InternalToastTitle, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Text, {
+      as: "div",
+      fontWeight: fontWeight,
+      textStyle: textStyle,
+      ...props
+    })
+  });
+};

package/es/Tooltip.js

@@ -0,0 +1,59 @@
+/**
+ * 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 { tooltipAnatomy } from "@ark-ui/anatomy";
+import { Tooltip } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const tooltipRecipe = sva({
+  slots: tooltipAnatomy.keys(),
+  base: {
+    content: {
+      background: "surface.action",
+      textStyle: "label.small",
+      color: "text.onAction",
+      paddingInline: "xxsmall",
+      paddingBlock: "4xsmall",
+      "--arrow-size": "spacing.xxsmall",
+      "--arrow-background": "colors.surface.action",
+      _open: {
+        animation: "fade-shift-in 0.2s ease-out"
+      },
+      _closed: {
+        animation: "fade-shift-out 0.2s ease-out"
+      }
+    }
+  }
+});
+const {
+  withRootProvider,
+  withContext
+} = createStyleContext(tooltipRecipe);
+export const TooltipRoot = withRootProvider(Tooltip.Root);
+export const TooltipArrow = withContext(Tooltip.Arrow, "arrow");
+export const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip");
+export const TooltipContentStandalone = withContext(Tooltip.Content, "content");
+export const TooltipContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(TooltipPositioner, {
+    children: /*#__PURE__*/_jsxs(TooltipContentStandalone, {
+      ...props,
+      ref: ref,
+      children: [/*#__PURE__*/_jsx(TooltipArrow, {
+        children: /*#__PURE__*/_jsx(TooltipArrowTip, {})
+      }), children]
+    })
+  });
+});
+export const TooltipPositioner = withContext(Tooltip.Positioner, "positioner");
+export const TooltipTrigger = withContext(Tooltip.Trigger, "trigger");

package/es/createStyleContext.js

@@ -0,0 +1,62 @@
+/**
+ * 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, useContext } from "react";
+import { cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A utility for creating a style context for a recipe, allowing one to change the styles of all parts of a component from the root component. Credit: https://github.com/cschroeter/park-ui/blob/main/website/src/lib/create-style-context.tsx.
+ */
+export const createStyleContext = recipe => {
+  const StyleContext = /*#__PURE__*/createContext(null);
+  const withRootProvider = Component => {
+    const StyledComponent = props => {
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const slotStyles = recipe(variantProps);
+      return /*#__PURE__*/_jsx(StyleContext.Provider, {
+        value: slotStyles,
+        children: /*#__PURE__*/_jsx(Component, {
+          ...otherProps
+        })
+      });
+    };
+    return StyledComponent;
+  };
+  const withProvider = (Component, slot) => {
+    const StyledComponent = styled(Component);
+    return /*#__PURE__*/forwardRef((props, ref) => {
+      const [variantProps, otherProps] = recipe.splitVariantProps(props);
+      const slotStyles = recipe(variantProps);
+      return /*#__PURE__*/_jsx(StyleContext.Provider, {
+        value: slotStyles,
+        children: /*#__PURE__*/_jsx(StyledComponent, {
+          ...otherProps,
+          ref: ref,
+          className: cx(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
+        })
+      });
+    });
+  };
+  const withContext = (Component, slot) => {
+    const StyledComponent = styled(Component);
+    return /*#__PURE__*/forwardRef((props, ref) => {
+      const slotStyles = useContext(StyleContext);
+      return /*#__PURE__*/_jsx(StyledComponent, {
+        ...props,
+        ref: ref,
+        className: cx(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
+      });
+    });
+  };
+  return {
+    withRootProvider,
+    withProvider,
+    withContext
+  };
+};

package/es/index.js

@@ -0,0 +1,19 @@
+/**
+ * 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.
+ *
+ */
+
+export { BlockQuote } from "./BlockQuote";
+export { Button, IconButton } from "./Button";
+export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
+export { Input, InputContainer, TextArea } from "./Input";
+export { OrderedList, UnOrderedList } from "./ArticleLists";
+export { Icon } from "./Icon";
+export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
+export { Spinner } from "./Spinner";
+export { Table } from "./Table";
+export { Text, Heading } from "./Text";
+export { MessageBox } from "./MessageBox";

package/lib/Accordion.d.ts

@@ -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 type { Assign } from "@ark-ui/react";
+import { Accordion } from "@ark-ui/react";
+import { SystemProperties } from "@ndla/styled-system/types";
+export interface AccordionRootProps extends Assign<SystemProperties, Accordion.RootProps> {
+}
+export declare const AccordionRoot: import("react").ForwardRefExoticComponent<AccordionRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItemContent: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Accordion.ItemContentProps> & Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItemIndicator: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Accordion.ItemIndicatorProps> & Accordion.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Accordion.ItemProps> & Accordion.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItemTrigger: import("react").ForwardRefExoticComponent<Omit<SystemProperties, keyof Accordion.ItemTriggerProps> & Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;