@ndla/primitives 0.0.2 → 0.0.3

package/lib/RadioGroup.d.ts

@@ -6,14 +6,25 @@
  *
  */
 import { RadioGroup } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export interface RadioGroupRootProps extends RadioGroup.RootProps {
+export interface RadioGroupRootProps extends RadioGroup.RootProps, JsxStyleProps {
 }
 export declare const RadioGroupRoot: import("react").ForwardRefExoticComponent<RadioGroupRootProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const RadioGroupIndicator: import("react").ForwardRefExoticComponent<RadioGroup.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const RadioGroupItemControl: import("react").ForwardRefExoticComponent<RadioGroup.ItemControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<RadioGroup.ItemProps & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const RadioGroupItemText: ({ textStyle, ...props }: RadioGroup.ItemTextProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const InternalRadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
-export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & TextProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const RadioGroupIndicator: import("react").ForwardRefExoticComponent<RadioGroup.IndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroupItemControl: import("react").ForwardRefExoticComponent<RadioGroup.ItemControlProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroupItem: import("react").ForwardRefExoticComponent<RadioGroup.ItemProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const RadioGroupItemText: ({ textStyle, children, ...props }: RadioGroup.ItemTextProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InternalRadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<RadioGroup.LabelProps & TextProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLLabelElement>>;
 export declare const RadioGroupItemHiddenInput: import("react").ForwardRefExoticComponent<RadioGroup.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/RadioGroup.js

@@ -113,14 +113,18 @@ const InternalRadioGroupItemText = withContext(_react2.RadioGroup.ItemText, "ite
 const RadioGroupItemText = _ref => {
   let {
     textStyle = "label.medium",
+    children,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupItemText, {
     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
+      })
     })
   });
 };

package/lib/Skeleton.d.ts

@@ -6,6 +6,9 @@
  *
  */
 import { HTMLArkProps } from "@ark-ui/react";
-export interface SkeletonProps extends HTMLArkProps<"div"> {
+import { JsxStyleProps } from "@ndla/styled-system/types";
+export declare const Skeleton: 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>, {}>;
+export interface SkeletonProps extends HTMLArkProps<"div">, JsxStyleProps {
 }
-export declare const Skeleton: (props: SkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/Skeleton.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Skeleton = void 0;
 var _react = require("@ark-ui/react");
-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.
  *
@@ -15,7 +14,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  *
  */
 
-const StyledDiv = (0, _jsx2.styled)(_react.ark.div, {
+const Skeleton = exports.Skeleton = (0, _jsx.styled)(_react.ark.div, {
   base: {
     animation: "skeleton-pulse",
     backgroundColor: "surface.disabled",
@@ -29,10 +28,4 @@ const StyledDiv = (0, _jsx2.styled)(_react.ark.div, {
       visibility: "hidden"
     }
   }
-});
-const Skeleton = props => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDiv, {
-    ...props
-  });
-};
-exports.Skeleton = Skeleton;
+});

package/lib/Slider.d.ts

@@ -6,12 +6,23 @@
  *
  */
 import { Slider } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export type SliderRootProps = Slider.RootProps;
-export declare const SliderRoot: import("react").ForwardRefExoticComponent<Slider.RootProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderControl: import("react").ForwardRefExoticComponent<Slider.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderTrack: import("react").ForwardRefExoticComponent<Slider.TrackProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderRange: import("react").ForwardRefExoticComponent<Slider.RangeProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderThumb: import("react").ForwardRefExoticComponent<Slider.ThumbProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SliderLabel: ({ textStyle, ...props }: Slider.LabelProps & TextProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type SliderRootProps = Slider.RootProps & JsxStyleProps;
+export declare const SliderRoot: import("react").ForwardRefExoticComponent<Slider.RootProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderControl: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Slider.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderTrack: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Slider.TrackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderRange: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Slider.RangeProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderThumb: import("react").ForwardRefExoticComponent<{
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & Slider.ThumbProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SliderLabel: ({ textStyle, ...props }: Slider.LabelProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const SliderHiddenInput: import("react").ForwardRefExoticComponent<Slider.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

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,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SwitchThumb = exports.SwitchRoot = exports.SwitchLabel = exports.SwitchHiddenInput = exports.SwitchControl = exports.InternalSwitchRoot = exports.InternalSwitchLabel = void 0;
+exports.SwitchThumb = exports.SwitchRoot = exports.SwitchLabel = exports.SwitchHiddenInput = exports.SwitchControl = void 0;
 var _react = require("react");
 var _anatomy = require("@ark-ui/anatomy");
 var _react2 = require("@ark-ui/react");
@@ -106,7 +106,7 @@ const {
   withProvider,
   withContext
 } = (0, _createStyleContext.createStyleContext)(switchRecipe);
-const InternalSwitchRoot = exports.InternalSwitchRoot = withProvider(_react2.Switch.Root, "root");
+const 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);
@@ -118,18 +118,22 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/(0, _react.forwardRef)((pro
 });
 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 InternalSwitchLabel = withContext(_react2.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
+      })
     })
   });
 };

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 {};