@ndla/primitives 0.0.2 → 0.0.3

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

@@ -100,7 +100,7 @@ const {
   withProvider,
   withContext
 } = createStyleContext(switchRecipe);
-export const InternalSwitchRoot = withProvider(Switch.Root, "root");
+const InternalSwitchRoot = withProvider(Switch.Root, "root");
 export const SwitchRoot = /*#__PURE__*/forwardRef((props, ref) => {
   var _field$invalid;
   const field = useFormControl(props);
@@ -112,18 +112,22 @@ export const SwitchRoot = /*#__PURE__*/forwardRef((props, ref) => {
 });
 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
 });

package/es/Tabs.js

@@ -0,0 +1,232 @@
+/**
+ * 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 { 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"],
+  base: {
+    root: {
+      position: "relative",
+      display: "flex",
+      width: "100%",
+      _horizontal: {
+        flexDirection: "column"
+      },
+      _vertical: {
+        flexDirection: "row"
+      }
+    },
+    list: {
+      position: "relative",
+      display: "flex",
+      flexShrink: "0",
+      overflow: "auto",
+      _horizontal: {
+        flexDirection: "row"
+      },
+      _vertical: {
+        flexDirection: "column"
+      }
+    },
+    trigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: "0",
+      cursor: "pointer",
+      textStyle: "label.small",
+      fontWeight: "bold",
+      transitionDuration: "normal",
+      transitionProperty: "color, background, border-color",
+      transitionTimingFunction: "default",
+      whiteSpace: "nowrap",
+      paddingInline: "small",
+      paddingBlock: "3xsmall",
+      zIndex: "1",
+      _hover: {
+        color: "text.action"
+      },
+      _selected: {
+        color: "text.strong"
+      },
+      _disabled: {
+        color: "text.subtle",
+        cursor: "not-allowed",
+        _hover: {
+          color: "text.subtle"
+        }
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: "xsmall"
+    }
+  },
+  defaultVariants: {
+    variant: "line"
+  },
+  variants: {
+    variant: {
+      line: {
+        trigger: {
+          borderColor: "stroke.default",
+          _hover: {
+            borderColor: "stroke.hover",
+            _focusVisible: {
+              borderColor: "stroke.default"
+            }
+          },
+          _horizontal: {
+            borderBottom: "1px solid"
+          },
+          _disabled: {
+            borderColor: "stroke.default",
+            _hover: {
+              borderColor: "stroke.default"
+            }
+          },
+          _vertical: {
+            borderLeft: "1px solid",
+            justifyContent: "flex-start"
+          },
+          _focusVisible: {
+            outline: "none",
+            borderRadius: "unset"
+          }
+        },
+        indicator: {
+          background: "transparent",
+          outline: "4px solid",
+          outlineColor: "stroke.default",
+          pointerEvents: "none",
+          outlineOffset: "-4px",
+          _peerFocusVisible: {
+            height: "var(--height)",
+            width: "var(--width)",
+            _horizontal: {
+              borderTopRadius: "xsmall"
+            },
+            _vertical: {
+              borderRightRadius: "xsmall"
+            }
+          },
+          _horizontal: {
+            bottom: "0",
+            height: "2",
+            width: "var(--width)"
+          },
+          _vertical: {
+            height: "var(--height)",
+            left: "0",
+            width: "2"
+          }
+        },
+        content: {
+          zIndex: "1",
+          _horizontal: {
+            paddingBlockStart: "xsmall"
+          },
+          _vertical: {
+            paddingInlineStart: "xsmall"
+          },
+          _focusVisible: {
+            outline: "none",
+            boxShadow: "0 0 0 3px var(--shadow-color)",
+            boxShadowColor: "stroke.default"
+          }
+        }
+      },
+      outline: {
+        list: {
+          _horizontal: {
+            marginBlockEnd: "-1px"
+          },
+          _vertical: {
+            marginInlineEnd: "-1px"
+          }
+        },
+        trigger: {
+          borderColor: "transparent",
+          borderWidth: "1px",
+          _horizontal: {
+            borderTopRadius: "xsmall"
+          },
+          _vertical: {
+            borderTopLeftRadius: "xsmall",
+            borderBottomLeftRadius: "xsmall"
+          },
+          _selected: {
+            background: "surface.default",
+            borderColor: "stroke.subtle",
+            _horizontal: {
+              borderBottomColor: "transparent"
+            },
+            _vertical: {
+              borderRightColor: "transparent"
+            }
+          },
+          _focusVisible: {
+            outline: "3px solid",
+            outlineOffset: "-3px",
+            outlineColor: "stroke.default"
+          }
+        },
+        content: {
+          borderWidth: "1px",
+          borderColor: "stroke.subtle",
+          background: "surface.default",
+          width: "100%",
+          padding: "xsmall",
+          _focusVisible: {
+            outline: "3px solid",
+            outlineOffset: "-3px",
+            outlineColor: "stroke.default"
+          }
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(tabsRecipe);
+const InternalTabsRoot = withProvider(Tabs.Root, "root");
+export const TabsRoot = _ref => {
+  let {
+    lazyMount = true,
+    unmountOnExit = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalTabsRoot, {
+    lazyMount: lazyMount,
+    unmountOnExit: unmountOnExit,
+    ...props
+  });
+};
+export const TabsContent = withContext(Tabs.Content, "content");
+export const TabsIndicator = withContext(Tabs.Indicator, "indicator");
+export const TabsList = withContext(Tabs.List, "list");
+const InternalTabsTrigger = withContext(Tabs.Trigger, "trigger");
+export const TabsTrigger = _ref2 => {
+  let {
+    className,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(InternalTabsTrigger, {
+    className: cx("peer", className),
+    ...props
+  });
+};

package/es/Text.js

@@ -6,49 +6,50 @@
  *
  */
 
-import { css, cx } from "@ndla/styled-system/css";
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { css } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
-const BaseText = props => {
-  const {
-    as: As = "p",
-    className,
+const StyledP = styled(ark.p);
+export const Text = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    textStyle = "body.medium",
     fontWeight,
     color,
-    textStyle = "body.medium",
     srOnly,
+    css: cssProp,
     ...rest
-  } = props;
-  return /*#__PURE__*/_jsx(As, {
-    className: cx(css({
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledP, {
+    css: css.raw({
       textStyle,
       fontWeight,
       color,
-      srOnly: srOnly
-    }), className),
+      srOnly
+    }, cssProp),
+    ref: ref,
     ...rest
   });
-};
-export const Heading = props => {
-  const {
-    as = "h1",
+});
+const StyledH1 = styled(ark.h1);
+export const Heading = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
     textStyle = "heading.medium",
+    fontWeight,
+    color,
+    srOnly,
+    css: cssProp,
     ...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,
+  } = _ref2;
+  return /*#__PURE__*/_jsx(StyledH1, {
+    css: css.raw({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly
+    }, cssProp),
+    ref: ref,
     ...rest
   });
-};
+});

package/es/Toast.js

@@ -48,35 +48,43 @@ const {
 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");
+const InternalToastDescription = withContext(Toast.Description, "description");
 export const ToastDescription = _ref => {
   let {
     textStyle = "label.medium",
+    children,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(InternalToastDescription, {
     asChild: true,
     children: /*#__PURE__*/_jsx(Text, {
-      as: "div",
+      asChild: true,
       textStyle: textStyle,
-      ...props
+      ...props,
+      children: /*#__PURE__*/_jsx("div", {
+        children: children
+      })
     })
   });
 };
-export const InternalToastTitle = withContext(Toast.Title, "title");
+const InternalToastTitle = withContext(Toast.Title, "title");
 export const ToastTitle = _ref2 => {
   let {
     textStyle = "label.medium",
     fontWeight = "semibold",
+    children,
     ...props
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalToastTitle, {
     asChild: true,
     children: /*#__PURE__*/_jsx(Text, {
-      as: "div",
+      asChild: true,
       fontWeight: fontWeight,
       textStyle: textStyle,
-      ...props
+      ...props,
+      children: /*#__PURE__*/_jsx("div", {
+        children: children
+      })
     })
   });
 };

package/es/createStyleContext.js

@@ -7,7 +7,7 @@
  */
 
 import { createContext, forwardRef, useContext } from "react";
-import { cx } from "@ndla/styled-system/css";
+import { css } from "@ndla/styled-system/css";
 import { styled } from "@ndla/styled-system/jsx";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -18,7 +18,7 @@ export const createStyleContext = recipe => {
   const withRootProvider = Component => {
     const StyledComponent = props => {
       const [variantProps, otherProps] = recipe.splitVariantProps(props);
-      const slotStyles = recipe(variantProps);
+      const slotStyles = recipe.raw(variantProps);
       return /*#__PURE__*/_jsx(StyleContext.Provider, {
         value: slotStyles,
         children: /*#__PURE__*/_jsx(Component, {
@@ -30,27 +30,35 @@ export const createStyleContext = recipe => {
   };
   const withProvider = (Component, slot) => {
     const StyledComponent = styled(Component);
-    return /*#__PURE__*/forwardRef((props, ref) => {
+    return /*#__PURE__*/forwardRef((_ref, ref) => {
+      let {
+        css: cssProp,
+        ...props
+      } = _ref;
       const [variantProps, otherProps] = recipe.splitVariantProps(props);
-      const slotStyles = recipe(variantProps);
+      const slotStyles = recipe.raw(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)
+          css: css.raw(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], cssProp)
         })
       });
     });
   };
   const withContext = (Component, slot) => {
     const StyledComponent = styled(Component);
-    return /*#__PURE__*/forwardRef((props, ref) => {
+    return /*#__PURE__*/forwardRef((_ref2, ref) => {
+      let {
+        css: cssProp,
+        ...props
+      } = _ref2;
       const slotStyles = useContext(StyleContext);
       return /*#__PURE__*/_jsx(StyledComponent, {
         ...props,
         ref: ref,
-        className: cx(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], props.className)
+        css: css.raw(slotStyles === null || slotStyles === void 0 ? void 0 : slotStyles[slot], cssProp)
       });
     });
   };

package/lib/Accordion.d.ts

@@ -5,13 +5,20 @@
  * 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> {
+import { JsxStyleProps } from "@ndla/styled-system/types";
+export interface AccordionRootProps extends JsxStyleProps, 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>>;
+export declare const AccordionItemContent: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Accordion.ItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItemIndicator: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Accordion.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Accordion.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AccordionItemTrigger: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Accordion.ItemTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/ArticleLists.d.ts

@@ -5,16 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithoutRef } from "react";
-import { StyledVariantProps } from "@ndla/styled-system/types";
-declare const StyledOrderedList: import("@ndla/styled-system/jsx").StyledComponent<"ol", {
+import { HTMLArkProps } from "@ark-ui/react";
+import { JsxStyleProps, StyledVariantProps } from "@ndla/styled-system/types";
+export type OrderedListVariantProps = StyledVariantProps<typeof OrderedList>;
+export type OrderedListProps = HTMLArkProps<"ol"> & JsxStyleProps & OrderedListVariantProps;
+export declare const OrderedList: import("@ndla/styled-system/jsx").StyledComponent<"ol", {
     variant?: "numbers" | "letters" | undefined;
 }>;
-export type OrderedListVariantProps = StyledVariantProps<typeof StyledOrderedList>;
-export type OrderedListProps = ComponentPropsWithoutRef<"ol"> & OrderedListVariantProps;
-export declare const OrderedList: ({ variant, ...props }: OrderedListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export type UnOrderedListProps = ComponentPropsWithoutRef<"ul">;
-export declare const UnOrderedList: ({ ...props }: UnOrderedListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export type DefinitionListProps = ComponentPropsWithoutRef<"dl">;
-export declare const DefinitionList: ({ ...props }: DefinitionListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export type UnOrderedListProps = HTMLArkProps<"ul"> & JsxStyleProps;
+export declare const UnOrderedList: import("@ndla/styled-system/jsx").StyledComponent<"ul", {}>;
+export declare const DefinitionList: import("@ndla/styled-system/jsx").StyledComponent<"dl", {}>;
+export type DefinitionListProps = HTMLArkProps<"dl"> & JsxStyleProps;

package/lib/ArticleLists.js

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UnOrderedList = exports.OrderedList = exports.DefinitionList = void 0;
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
+var _jsx = require("@ndla/styled-system/jsx");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -14,7 +13,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledOrderedList = (0, _jsx2.styled)("ol", {
+const OrderedList = exports.OrderedList = (0, _jsx.styled)("ol", {
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
@@ -60,19 +59,7 @@ const StyledOrderedList = (0, _jsx2.styled)("ol", {
     }
   }
 });
-const OrderedList = _ref => {
-  let {
-    variant = "numbers",
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedList, {
-    variant: variant,
-    "data-variant": variant,
-    ...props
-  });
-};
-exports.OrderedList = OrderedList;
-const StyledUnOrderedList = (0, _jsx2.styled)("ul", {
+const UnOrderedList = exports.UnOrderedList = (0, _jsx.styled)("ul", {
   base: {
     listStyle: "revert",
     listStylePosition: "inside",
@@ -85,16 +72,7 @@ const StyledUnOrderedList = (0, _jsx2.styled)("ul", {
     }
   }
 });
-const UnOrderedList = _ref2 => {
-  let {
-    ...props
-  } = _ref2;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUnOrderedList, {
-    ...props
-  });
-};
-exports.UnOrderedList = UnOrderedList;
-const StyledDefinitionList = (0, _jsx2.styled)("dl", {
+const DefinitionList = exports.DefinitionList = (0, _jsx.styled)("dl", {
   base: {
     "& dt": {
       fontWeight: "bold"
@@ -103,13 +81,4 @@ const StyledDefinitionList = (0, _jsx2.styled)("dl", {
       marginInlineStart: "medium"
     }
   }
-});
-const DefinitionList = _ref3 => {
-  let {
-    ...props
-  } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDefinitionList, {
-    ...props
-  });
-};
-exports.DefinitionList = DefinitionList;
+});

package/lib/Badge.d.ts

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithoutRef } from "react";
+import { HTMLArkProps } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     colorTheme: {
         brand1: {
@@ -14,7 +15,7 @@ declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
             borderColor: "surface.brand.1.strong";
         };
         brand2: {
-            backgroundColor: "surface.brand.2.subtle";
+            backgroundColor: "surface.brand.2.moderate";
             borderColor: "surface.brand.2.strong";
         };
         brand3: {
@@ -28,6 +29,10 @@ declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     };
 }>;
 export type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipe>;
-export type BadgeProps = BadgeVariantProps & ComponentPropsWithoutRef<"div">;
-export declare const Badge: ({ colorTheme, className, ...rest }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type BadgeProps = HTMLArkProps<"div"> & JsxStyleProps & BadgeVariantProps;
+export declare const Badge: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {
+    colorTheme?: "neutral" | "brand1" | "brand2" | "brand3" | undefined;
+}>;
 export {};