@ndla/primitives 0.0.1

package/lib/Pagination.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 { Pagination } from "@ark-ui/react";
+export type PaginationRootProps = Pagination.RootProps;
+export declare const PaginationRoot: import("react").ForwardRefExoticComponent<Pagination.RootProps & import("react").RefAttributes<HTMLElement>>;
+export declare const PaginationItem: import("react").ForwardRefExoticComponent<Pagination.ItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PaginationEllipsis: import("react").ForwardRefExoticComponent<Pagination.EllipsisProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PaginationPrevTrigger: import("react").ForwardRefExoticComponent<Pagination.PrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PaginationNextTrigger: import("react").ForwardRefExoticComponent<Pagination.NextTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/Pagination.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationRoot = exports.PaginationPrevTrigger = exports.PaginationNextTrigger = exports.PaginationItem = exports.PaginationEllipsis = 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");
+/**
+ * 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 paginationRecipe = (0, _css.sva)({
+  slots: _anatomy.paginationAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      gap: "xxsmall"
+    },
+    item: {
+      fontVariantNumeric: "tabular-nums"
+    },
+    ellipsis: {
+      display: "inline-flex",
+      alignItems: "center"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(paginationRecipe);
+const PaginationRoot = exports.PaginationRoot = withProvider(_react.Pagination.Root, "root");
+const PaginationItem = exports.PaginationItem = withContext(_react.Pagination.Item, "item");
+const PaginationEllipsis = exports.PaginationEllipsis = withContext(_react.Pagination.Ellipsis, "ellipsis");
+const PaginationPrevTrigger = exports.PaginationPrevTrigger = withContext(_react.Pagination.PrevTrigger, "prevTrigger");
+const PaginationNextTrigger = exports.PaginationNextTrigger = withContext(_react.Pagination.NextTrigger, "nextTrigger");

package/lib/Popover.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 { Popover } from "@ark-ui/react";
+export type PopoverRootProps = Popover.RootProps;
+export declare const PopoverRoot: ({ lazyMount, unmountOnExit, ...props }: PopoverRootProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<Popover.AnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverArrowStandalone: import("react").ForwardRefExoticComponent<Popover.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverArrow: (props: Popover.ArrowTipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PopoverArrowTip: import("react").ForwardRefExoticComponent<Popover.ArrowTipProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverCloseTrigger: import("react").ForwardRefExoticComponent<Popover.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverContentStandalone: import("react").ForwardRefExoticComponent<Popover.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverContent: (props: Popover.ContentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PopoverDescription: import("react").ForwardRefExoticComponent<Popover.DescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const PopoverIndicator: import("react").ForwardRefExoticComponent<Popover.IndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverPositioner: import("react").ForwardRefExoticComponent<Popover.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverTitle: import("react").ForwardRefExoticComponent<Popover.TitleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<Popover.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/Popover.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopoverTrigger = exports.PopoverTitle = exports.PopoverRoot = exports.PopoverPositioner = exports.PopoverIndicator = exports.PopoverDescription = exports.PopoverContentStandalone = exports.PopoverContent = exports.PopoverCloseTrigger = exports.PopoverArrowTip = exports.PopoverArrowStandalone = exports.PopoverArrow = exports.PopoverAnchor = 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 popoverRecipe = (0, _css.sva)({
+  slots: _anatomy.popoverAnatomy.keys(),
+  base: {
+    positioner: {
+      position: "relative"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      padding: "medium",
+      background: "surface.default",
+      borderRadius: "xsmall",
+      boxShadow: "xlarge",
+      zIndex: "popover",
+      maxWidth: "var(--available-width)",
+      _open: {
+        animation: "fade-shift-in 0.2s ease-out"
+      },
+      _closed: {
+        animation: "fade-shift-out 0.2s ease-out"
+      }
+    },
+    arrow: {
+      "--arrow-size": "sizes.xxsmall",
+      "--arrow-background": "colors.surface.default"
+    }
+  }
+});
+const {
+  withRootProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(popoverRecipe);
+const InternalPopoverRoot = withRootProvider(_react.Popover.Root);
+const PopoverRoot = _ref => {
+  let {
+    lazyMount = true,
+    unmountOnExit = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalPopoverRoot, {
+    lazyMount: lazyMount,
+    unmountOnExit: unmountOnExit,
+    ...props
+  });
+};
+exports.PopoverRoot = PopoverRoot;
+const PopoverAnchor = exports.PopoverAnchor = withContext(_react.Popover.Anchor, "anchor");
+const PopoverArrowStandalone = exports.PopoverArrowStandalone = withContext(_react.Popover.Arrow, "arrow");
+const PopoverArrow = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverArrowStandalone, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverArrowTip, {
+    ...props
+  })
+});
+exports.PopoverArrow = PopoverArrow;
+const PopoverArrowTip = exports.PopoverArrowTip = withContext(_react.Popover.ArrowTip, "arrowTip");
+const PopoverCloseTrigger = exports.PopoverCloseTrigger = withContext(_react.Popover.CloseTrigger, "closeTrigger");
+const PopoverContentStandalone = exports.PopoverContentStandalone = withContext(_react.Popover.Content, "content");
+const PopoverContent = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverPositioner, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PopoverContentStandalone, {
+    ...props
+  })
+});
+exports.PopoverContent = PopoverContent;
+const PopoverDescription = exports.PopoverDescription = withContext(_react.Popover.Description, "description");
+const PopoverIndicator = exports.PopoverIndicator = withContext(_react.Popover.Indicator, "indicator");
+const PopoverPositioner = exports.PopoverPositioner = withContext(_react.Popover.Positioner, "positioner");
+const PopoverTitle = exports.PopoverTitle = withContext(_react.Popover.Title, "title");
+const PopoverTrigger = exports.PopoverTrigger = withContext(_react.Popover.Trigger, "trigger");

package/lib/RadioGroup.d.ts

@@ -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.
+ *
+ */
+import { RadioGroup } from "@ark-ui/react";
+import { TextProps } from "./Text";
+export interface RadioGroupRootProps extends RadioGroup.RootProps {
+}
+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 RadioGroupItemHiddenInput: import("react").ForwardRefExoticComponent<RadioGroup.ItemHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/RadioGroup.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroupRoot = exports.RadioGroupLabel = exports.RadioGroupItemText = exports.RadioGroupItemHiddenInput = exports.RadioGroupItemControl = exports.RadioGroupItem = exports.RadioGroupIndicator = exports.InternalRadioGroupLabel = void 0;
+var _react = require("react");
+var _anatomy = require("@ark-ui/anatomy");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+var _FormControl = require("./FormControl");
+var _Label = require("./Label");
+var _Text = require("./Text");
+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 radioGroupRecipe = (0, _css.sva)({
+  slots: _anatomy.radioGroupAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexWrap: "wrap",
+      position: "relative",
+      gap: "small",
+      _vertical: {
+        flexDirection: "column"
+      },
+      _horizontal: {
+        flexDirection: "row"
+      }
+    },
+    itemControl: {
+      background: "surface.default",
+      borderColor: "stroke.subtle",
+      borderRadius: "full",
+      borderWidth: "2px",
+      width: "medium",
+      height: "medium",
+      outlineStyle: "solid",
+      outlineWidth: "4px",
+      outlineOffset: "-6px",
+      outlineColor: "surface.default",
+      transitionDuration: "normal",
+      transitionProperty: "background, border-color, box-shadow",
+      transitionTimingFunction: "default",
+      _hover: {
+        boxShadow: "0 0 0 4px var(--shadow-color)",
+        boxShadowColor: "surface.actionSubtle.hover.strong"
+      },
+      _checked: {
+        background: "stroke.default",
+        borderColor: "stroke.default"
+      },
+      _disabled: {
+        borderColor: "stroke.disabled",
+        _hover: {
+          borderColor: "stroke.disabled",
+          boxShadow: "none"
+        }
+      }
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      gap: "xxsmall",
+      _disabled: {
+        cursor: "not-allowed"
+      },
+      "&:has(input:focus-visible)": {
+        outline: "2px solid",
+        outlineOffset: "4xsmall",
+        outlineColor: "stroke.default",
+        borderRadius: "xsmall"
+      }
+    },
+    itemText: {
+      _hover: {
+        color: "text.action"
+      },
+      _disabled: {
+        color: "text.disabled",
+        _hover: {
+          color: "text.disabled"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(radioGroupRecipe);
+const InternalRadioGroupRoot = withProvider(_react2.RadioGroup.Root, "root");
+const RadioGroupRoot = exports.RadioGroupRoot = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const field = (0, _FormControl.useFormControl)(props);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupRoot, {
+    ...field,
+    ref: ref
+  });
+});
+const RadioGroupIndicator = exports.RadioGroupIndicator = withContext(_react2.RadioGroup.Indicator, "indicator");
+const RadioGroupItemControl = exports.RadioGroupItemControl = withContext(_react2.RadioGroup.ItemControl, "itemControl");
+const RadioGroupItem = exports.RadioGroupItem = withContext(_react2.RadioGroup.Item, "item");
+const InternalRadioGroupItemText = withContext(_react2.RadioGroup.ItemText, "itemText");
+const RadioGroupItemText = _ref => {
+  let {
+    textStyle = "label.medium",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupItemText, {
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      as: "span",
+      textStyle: textStyle,
+      ...props
+    })
+  });
+};
+exports.RadioGroupItemText = RadioGroupItemText;
+const InternalRadioGroupLabel = exports.InternalRadioGroupLabel = withContext(_react2.RadioGroup.Label, "label");
+const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    textStyle = "label.large",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupLabel, {
+    ref: ref,
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+      textStyle: textStyle,
+      ...props
+    })
+  });
+});
+const RadioGroupItemHiddenInput = exports.RadioGroupItemHiddenInput = _react2.RadioGroup.ItemHiddenInput;

package/lib/Skeleton.d.ts

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

package/lib/Skeleton.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Skeleton = void 0;
+var _react = require("@ark-ui/react");
+var _jsx2 = require("@ndla/styled-system/jsx");
+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 StyledDiv = (0, _jsx2.styled)(_react.ark.div, {
+  base: {
+    animation: "skeleton-pulse",
+    backgroundColor: "surface.disabled",
+    backgroundClip: "padding-box",
+    borderRadius: "xsmall",
+    color: "transparent",
+    cursor: "default",
+    pointerEvents: "none",
+    userSelect: "none",
+    "&::before, &::after, *": {
+      visibility: "hidden"
+    }
+  }
+});
+const Skeleton = props => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDiv, {
+    ...props
+  });
+};
+exports.Skeleton = Skeleton;

package/lib/Slider.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 { Slider } from "@ark-ui/react";
+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 declare const SliderHiddenInput: import("react").ForwardRefExoticComponent<Slider.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/Slider.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderTrack = exports.SliderThumb = exports.SliderRoot = exports.SliderRange = exports.SliderLabel = exports.SliderHiddenInput = exports.SliderControl = 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 _Label = require("./Label");
+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 sliderRecipe = (0, _css.sva)({
+  slots: _anatomy.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
+} = (0, _createStyleContext.createStyleContext)(sliderRecipe);
+const SliderRoot = exports.SliderRoot = withProvider(_react.Slider.Root, "root");
+const SliderControl = exports.SliderControl = withContext(_react.Slider.Control, "control");
+const SliderTrack = exports.SliderTrack = withContext(_react.Slider.Track, "track");
+const SliderRange = exports.SliderRange = withContext(_react.Slider.Range, "range");
+const SliderThumb = exports.SliderThumb = withContext(_react.Slider.Thumb, "thumb");
+const InternalSliderLabel = withContext(_react.Slider.Label, "label");
+const SliderLabel = _ref => {
+  let {
+    textStyle = "label.medium",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalSliderLabel, {
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+      textStyle: textStyle,
+      ...props
+    })
+  });
+};
+exports.SliderLabel = SliderLabel;
+const SliderHiddenInput = exports.SliderHiddenInput = _react.Slider.HiddenInput;

package/lib/Spinner.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { ComponentPropsWithoutRef } from "react";
+import { RecipeVariantProps } from "@ndla/styled-system/css";
+export declare const spinnerRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    size: {
+        medium: {
+            borderWidth: "4px";
+            height: "large";
+            width: "large";
+        };
+        large: {
+            borderWidth: "8px";
+            height: "xxlarge";
+            width: "xxlarge";
+        };
+    };
+}>;
+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;

package/lib/Spinner.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.spinnerRecipe = exports.Spinner = void 0;
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+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 spinnerRecipe = exports.spinnerRecipe = (0, _css.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"
+      }
+    }
+  }
+});
+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;

package/lib/Switch.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 { Switch } from "@ark-ui/react";
+import { RecipeVariantProps } from "@ndla/styled-system/css";
+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 declare const SwitchHiddenInput: import("react").ForwardRefExoticComponent<Switch.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};