@ndla/primitives 0.0.2 → 0.0.4

package/lib/Spinner.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";
 export declare const spinnerRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     size: {
         medium: {
@@ -22,5 +23,9 @@ export declare const spinnerRecipe: import("@ndla/styled-system/types").RecipeRu
     };
 }>;
 export type SpinnerVariantProps = RecipeVariantProps<typeof spinnerRecipe>;
-export type SpinnerProps = ComponentPropsWithoutRef<"div"> & SpinnerVariantProps;
-export declare const Spinner: ({ size, className, ...props }: SpinnerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type SpinnerProps = HTMLArkProps<"div"> & SpinnerVariantProps & JsxStyleProps;
+export declare const Spinner: 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>, {
+    size?: "medium" | "large" | undefined;
+}>;

package/lib/Spinner.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.spinnerRecipe = exports.Spinner = void 0;
+var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
-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.
  *
@@ -45,17 +45,4 @@ const spinnerRecipe = exports.spinnerRecipe = (0, _css.cva)({
     }
   }
 });
-const Spinner = _ref => {
-  let {
-    size,
-    className,
-    ...props
-  } = _ref;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
-    className: (0, _css.cx)(spinnerRecipe({
-      size
-    }), className),
-    ...props
-  });
-};
-exports.Spinner = Spinner;
+const Spinner = exports.Spinner = (0, _jsx.styled)(_react.ark.div, spinnerRecipe);

package/lib/Switch.d.ts

@@ -7,15 +7,20 @@
  */
 import { Switch } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
 declare const switchRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"label" | "root" | "control" | "thumb", import("@ndla/styled-system/types").SlotRecipeVariantRecord<"label" | "root" | "control" | "thumb">>;
 export type SwitchVariantProps = RecipeVariantProps<typeof switchRecipe>;
-export type SwitchRootProps = Switch.RootProps & SwitchVariantProps;
-export declare const InternalSwitchRoot: import("react").ForwardRefExoticComponent<Switch.RootProps & {} & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const SwitchRoot: import("react").ForwardRefExoticComponent<Switch.RootProps & {} & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const SwitchControl: import("react").ForwardRefExoticComponent<Switch.ControlProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SwitchThumb: import("react").ForwardRefExoticComponent<Switch.ThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const InternalSwitchLabel: import("react").ForwardRefExoticComponent<Switch.LabelProps & import("react").RefAttributes<HTMLSpanElement>>;
-export declare const SwitchLabel: ({ textStyle, ...props }: Switch.LabelProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type SwitchRootProps = Switch.RootProps & JsxStyleProps & SwitchVariantProps;
+export declare const SwitchRoot: import("react").ForwardRefExoticComponent<Switch.RootProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {} & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const SwitchControl: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Switch.ControlProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SwitchThumb: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Switch.ThumbProps & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const SwitchLabel: ({ textStyle, children, ...props }: Switch.LabelProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SwitchHiddenInput: import("react").ForwardRefExoticComponent<Switch.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/lib/Switch.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SwitchThumb = exports.SwitchRoot = exports.SwitchLabel = exports.SwitchHiddenInput = exports.SwitchControl = exports.InternalSwitchRoot = exports.InternalSwitchLabel = void 0;
-var _react = require("react");
+exports.SwitchThumb = exports.SwitchRoot = exports.SwitchLabel = exports.SwitchHiddenInput = exports.SwitchControl = void 0;
 var _anatomy = require("@ark-ui/anatomy");
-var _react2 = require("@ark-ui/react");
+var _react = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
-var _FormControl = require("./FormControl");
 var _Text = require("./Text");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -106,32 +104,27 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(switchRecipe);
-const InternalSwitchRoot = exports.InternalSwitchRoot = withProvider(_react2.Switch.Root, "root");
-const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _field$invalid;
-  const field = (0, _FormControl.useFormControl)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSwitchRoot, {
-    invalid: (_field$invalid = field.invalid) !== null && _field$invalid !== void 0 ? _field$invalid : !!field["aria-invalid"],
-    ...field,
-    ref: ref
-  });
-});
-const SwitchControl = exports.SwitchControl = withContext(_react2.Switch.Control, "control");
-const SwitchThumb = exports.SwitchThumb = withContext(_react2.Switch.Thumb, "thumb");
-const InternalSwitchLabel = exports.InternalSwitchLabel = withContext(_react2.Switch.Label, "label");
+const SwitchRoot = exports.SwitchRoot = withProvider(_react.Switch.Root, "root");
+const SwitchControl = exports.SwitchControl = withContext(_react.Switch.Control, "control");
+const SwitchThumb = exports.SwitchThumb = withContext(_react.Switch.Thumb, "thumb");
+const InternalSwitchLabel = withContext(_react.Switch.Label, "label");
 const SwitchLabel = _ref => {
   let {
     textStyle = "label.medium",
+    children,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSwitchLabel, {
     asChild: true,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
-      as: "span",
+      asChild: true,
       textStyle: textStyle,
-      ...props
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: children
+      })
     })
   });
 };
 exports.SwitchLabel = SwitchLabel;
-const SwitchHiddenInput = exports.SwitchHiddenInput = _react2.Switch.HiddenInput;
+const SwitchHiddenInput = exports.SwitchHiddenInput = _react.Switch.HiddenInput;

package/lib/Table.d.ts

@@ -5,6 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithoutRef } from "react";
-export type TableProps = ComponentPropsWithoutRef<"table">;
-export declare const Table: (props: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { HTMLArkProps } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+export type TableProps = HTMLArkProps<"table"> & JsxStyleProps;
+export declare const Table: import("@ndla/styled-system/jsx").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+    ref?: ((instance: HTMLTableElement | null) => void) | import("react").RefObject<HTMLTableElement> | null | undefined;
+} & import("@ark-ui/react").PolymorphicProps>, {}>;

package/lib/Table.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Table = void 0;
-var _jsx2 = require("@ndla/styled-system/jsx");
-var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("@ark-ui/react");
+var _jsx = require("@ndla/styled-system/jsx");
 /**
  * Copyright (c) 2024-present, NDLA.
  *
@@ -14,7 +14,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledTable = (0, _jsx2.styled)("table", {
+const Table = exports.Table = (0, _jsx.styled)(_react.ark.table, {
   base: {
     display: "block",
     overflowX: "auto",
@@ -75,8 +75,4 @@ const StyledTable = (0, _jsx2.styled)("table", {
       }
     }
   }
-});
-const Table = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
-  ...props
-});
-exports.Table = Table;
+});

package/lib/Tabs.d.ts

@@ -0,0 +1,145 @@
+/**
+ * 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 { RecipeVariantProps } from "@ndla/styled-system/css";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+declare const tabsRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "list" | "root" | "indicator" | "trigger", {
+    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";
+                };
+            };
+        };
+    };
+}>;
+export type TabsVariantProps = RecipeVariantProps<typeof tabsRecipe>;
+export type TabsRootProps = Tabs.RootProps & TabsVariantProps & JsxStyleProps;
+export declare const TabsRoot: ({ lazyMount, unmountOnExit, ...props }: TabsRootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabsContent: import("react").ForwardRefExoticComponent<Tabs.ContentProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsIndicator: import("react").ForwardRefExoticComponent<Tabs.IndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<Tabs.ListProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: ({ className, ...props }: Tabs.TriggerProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Tabs.js

@@ -0,0 +1,239 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabsTrigger = exports.TabsRoot = exports.TabsList = exports.TabsIndicator = exports.TabsContent = void 0;
+var _anatomy = require("@ark-ui/anatomy");
+var _react = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const tabsRecipe = (0, _css.sva)({
+  slots: _anatomy.tabsAnatomy.keys(),
+  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
+} = (0, _createStyleContext.createStyleContext)(tabsRecipe);
+const InternalTabsRoot = withProvider(_react.Tabs.Root, "root");
+const TabsRoot = _ref => {
+  let {
+    lazyMount = true,
+    unmountOnExit = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalTabsRoot, {
+    lazyMount: lazyMount,
+    unmountOnExit: unmountOnExit,
+    ...props
+  });
+};
+exports.TabsRoot = TabsRoot;
+const TabsContent = exports.TabsContent = withContext(_react.Tabs.Content, "content");
+const TabsIndicator = exports.TabsIndicator = withContext(_react.Tabs.Indicator, "indicator");
+const TabsList = exports.TabsList = withContext(_react.Tabs.List, "list");
+const InternalTabsTrigger = withContext(_react.Tabs.Trigger, "trigger");
+const TabsTrigger = _ref2 => {
+  let {
+    className,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalTabsTrigger, {
+    className: (0, _css.cx)("peer", className),
+    ...props
+  });
+};
+exports.TabsTrigger = TabsTrigger;

package/lib/Text.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { ComponentPropsWithoutRef, ElementType } from "react";
 import { ColorToken, FontWeightToken } from "@ndla/styled-system/tokens";
 import { UtilityValues } from "@ndla/styled-system/types/prop-type";
 export interface TextProps {
@@ -14,11 +13,9 @@ export interface TextProps {
     color?: ColorToken;
     srOnly?: boolean;
 }
-type Props<T extends ElementType> = TextProps & {
-    as?: T;
-} & ComponentPropsWithoutRef<T>;
-export type HeadingType = Extract<ElementType, "h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
-export declare const Heading: <T extends HeadingType = "h1">(props: Props<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
-type TextType = Extract<ElementType, "p" | "span" | "div">;
-export declare const Text: <T extends TextType = "p">(props: Props<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};
+export declare const Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLHeadingElement>>;