@ndla/primitives 0.0.9 → 0.0.10

package/es/storybookHelpers/data.js

@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export const europeanCountries = [{
+  label: "Albania",
+  value: "AL"
+}, {
+  label: "Andorra",
+  value: "AD"
+}, {
+  label: "Armenia",
+  value: "AM"
+}, {
+  label: "Austria",
+  value: "AT"
+}, {
+  label: "Azerbaijan",
+  value: "AZ"
+}, {
+  label: "Belarus",
+  value: "BY"
+}, {
+  label: "Belgium",
+  value: "BE"
+}, {
+  label: "Bosnia and Herzegovina",
+  value: "BA"
+}, {
+  label: "Bulgaria",
+  value: "BG"
+}, {
+  label: "Croatia",
+  value: "HR"
+}, {
+  label: "Cyprus",
+  value: "CY"
+}, {
+  label: "Czech Republic",
+  value: "CZ"
+}, {
+  label: "Denmark",
+  value: "DK"
+}, {
+  label: "Estonia",
+  value: "EE"
+}, {
+  label: "Finland",
+  value: "FI"
+}, {
+  label: "France",
+  value: "FR"
+}, {
+  label: "Georgia",
+  value: "GE"
+}, {
+  label: "Germany",
+  value: "DE"
+}, {
+  label: "Greece",
+  value: "GR"
+}, {
+  label: "Hungary",
+  value: "HU"
+}, {
+  label: "Iceland",
+  value: "IS"
+}, {
+  label: "Ireland",
+  value: "IE"
+}, {
+  label: "Italy",
+  value: "IT"
+}, {
+  label: "Kazakhstan",
+  value: "KZ"
+}, {
+  label: "Kosovo",
+  value: "XK"
+}, {
+  label: "Latvia",
+  value: "LV"
+}, {
+  label: "Liechtenstein",
+  value: "LI"
+}, {
+  label: "Lithuania",
+  value: "LT"
+}, {
+  label: "Luxembourg",
+  value: "LU"
+}, {
+  label: "Malta",
+  value: "MT"
+}, {
+  label: "Moldova",
+  value: "MD"
+}, {
+  label: "Monaco",
+  value: "MC"
+}, {
+  label: "Montenegro",
+  value: "ME"
+}, {
+  label: "Netherlands",
+  value: "NL"
+}, {
+  label: "North Macedonia",
+  value: "MK"
+}, {
+  label: "Norway",
+  value: "NO"
+}, {
+  label: "Poland",
+  value: "PL"
+}, {
+  label: "Portugal",
+  value: "PT"
+}, {
+  label: "Romania",
+  value: "RO"
+}, {
+  label: "Russia",
+  value: "RU"
+}, {
+  label: "San Marino",
+  value: "SM"
+}, {
+  label: "Serbia",
+  value: "RS"
+}, {
+  label: "Slovakia",
+  value: "SK"
+}, {
+  label: "Slovenia",
+  value: "SI"
+}, {
+  label: "Spain",
+  value: "ES"
+}, {
+  label: "Sweden",
+  value: "SE"
+}, {
+  label: "Switzerland",
+  value: "CH"
+}, {
+  label: "Turkey",
+  value: "TR"
+}, {
+  label: "Ukraine",
+  value: "UA"
+}, {
+  label: "United Kingdom",
+  value: "GB"
+}, {
+  label: "Vatican City",
+  value: "VA"
+}];
+export const measurements = [{
+  label: "Kilometer",
+  value: "km"
+}, {
+  label: "Meter",
+  value: "m"
+}, {
+  label: "Centimeter",
+  value: "cm"
+}, {
+  label: "Millimeter",
+  value: "mm"
+}, {
+  label: "Mile",
+  value: "mi"
+}, {
+  label: "Yard",
+  value: "yd"
+}, {
+  label: "Foot",
+  value: "ft"
+}, {
+  label: "Inch",
+  value: "in"
+}, {
+  label: "Nautical mile",
+  value: "nmi"
+}];
+export const advancedItems = [{
+  label: "React",
+  value: "react",
+  description: "A JavaScript library for building user interfaces",
+  img: "https://api.test.ndla.no/image-api/raw/YQyWgMkg.png"
+}, {
+  label: "Solid",
+  value: "solid",
+  description: "React, but with signals",
+  img: "https://api.test.ndla.no/image-api/raw/YQyWgMkg.png"
+}, {
+  label: "Svelte",
+  value: "svelte",
+  disabled: true,
+  description: "No more JS than required",
+  img: "https://api.test.ndla.no/image-api/raw/YQyWgMkg.png"
+}, {
+  label: "Vue",
+  value: "vue",
+  description: "The Progressive JavaScript Framework",
+  img: "https://api.test.ndla.no/image-api/raw/YQyWgMkg.png"
+}];

package/lib/Button.js

@@ -38,6 +38,10 @@ const buttonBaseRecipe = exports.buttonBaseRecipe = (0, _css.cva)({
       cursor: "not-allowed",
       color: "text.onAction",
       background: "surface.disabled",
+      boxShadowColor: "surface.disabled",
+      "& svg": {
+        color: "text.onAction"
+      },
       _hover: {
         color: "text.onAction",
         background: "surface.disabled"

package/lib/Combobox.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { Combobox } from "@ark-ui/react";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
+import { TextProps } from "./Text";
+declare const comboboxRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"input" | "label" | "content" | "list" | "root" | "item" | "itemIndicator" | "control" | "clearTrigger" | "itemGroup" | "itemGroupLabel" | "itemText" | "positioner" | "trigger", {
+    variant: {
+        simple: {
+            item: {
+                padding: "xsmall";
+            };
+        };
+        bordered: {
+            item: {
+                paddingInline: "small";
+                paddingBlock: "xsmall";
+                border: "1px solid";
+                borderColor: "stroke.subtle";
+                _hover: {
+                    borderColor: "stroke.hover";
+                    background: "surface.default";
+                };
+                _highlighted: {
+                    borderColor: "stroke.default";
+                };
+                _checked: {
+                    borderColor: "stroke.default";
+                };
+                _disabled: {
+                    borderColor: "stroke.disabled";
+                    _hover: {
+                        borderColor: "stroke.disabled";
+                    };
+                };
+            };
+        };
+    };
+}>;
+type ComboboxVariantProps = RecipeVariantProps<typeof comboboxRecipe>;
+export type ComboboxRootProps<T extends Combobox.CollectionItem> = Combobox.RootProps<T> & ComboboxVariantProps;
+export declare const ComboboxRoot: <T extends Combobox.CollectionItem>({ ...props }: ComboboxRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxClearTrigger: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ClearTriggerProps> & Combobox.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const ComboboxContent: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ContentProps> & Combobox.ContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxControl: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ControlProps> & Combobox.ControlProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxInput: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.InputProps> & Combobox.InputProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const ComboboxItemGroupLabel: ({ children, textStyle, fontWeight, ...props }: Combobox.ItemGroupLabelProps & TextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxItemGroup: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ItemGroupProps> & Combobox.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItemIndicator: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ItemIndicatorProps> & Combobox.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItem: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.ItemProps> & Combobox.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxItemText: ({ textStyle, fontWeight, ...props }: Combobox.ItemTextProps & TextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxLabel: ({ textStyle, fontWeight, ...props }: Combobox.LabelProps & TextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxPositioner: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.PositionerProps> & Combobox.PositionerProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ComboboxTrigger: import("react").ForwardRefExoticComponent<Omit<JsxStyleProps, keyof Combobox.TriggerProps> & Combobox.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/lib/Combobox.js

@@ -0,0 +1,236 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxTrigger = exports.ComboboxRoot = exports.ComboboxPositioner = exports.ComboboxLabel = exports.ComboboxItemText = exports.ComboboxItemIndicator = exports.ComboboxItemGroupLabel = exports.ComboboxItemGroup = exports.ComboboxItem = exports.ComboboxInput = exports.ComboboxControl = exports.ComboboxContent = exports.ComboboxClearTrigger = void 0;
+var _react = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+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 comboboxRecipe = (0, _css.sva)({
+  slots: _react.comboboxAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3xsmall"
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      gap: "4xsmall"
+    },
+    content: {
+      display: "flex",
+      gap: "4xsmall",
+      flexDirection: "column",
+      zIndex: "dropdown",
+      background: "surface.default",
+      borderRadius: "xsmall",
+      boxShadow: "large",
+      padding: "xsmall",
+      overflowY: "auto",
+      maxHeight: "surface.xsmall",
+      _open: {
+        animation: "fade-shift-in 0.25s ease-out"
+      },
+      _closed: {
+        animation: "fade-shift-out 0.25s ease-out"
+      }
+    },
+    item: {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      cursor: "pointer",
+      borderRadius: "xsmall",
+      transitionDuration: "fast",
+      transitionProperty: "background, color, border-color",
+      transitionTimingFunction: "default",
+      background: "surface.default",
+      _disabled: {
+        cursor: "not-allowed",
+        background: "surface.disabled",
+        color: "text.disabled",
+        _hover: {
+          background: "surface.disabled",
+          color: "text.disabled"
+        }
+      },
+      _hover: {
+        background: "surface.hover"
+      },
+      _highlighted: {
+        background: "surface.hover"
+      },
+      _checked: {
+        background: "surface.selected",
+        _highlighted: {
+          background: "surface.hover"
+        }
+      }
+    },
+    trigger: {
+      "& svg": {
+        color: "icon.default",
+        transformOrigin: "center",
+        transitionDuration: "normal",
+        transitionProperty: "transform",
+        transitionTimingFunction: "default"
+      },
+      _open: {
+        "& svg": {
+          transform: "rotate(180deg)"
+        }
+      }
+    },
+    itemIndicator: {
+      color: "stroke.default"
+    },
+    itemText: {
+      _checked: {
+        textDecoration: "underline"
+      },
+      _highlighted: {
+        textDecoration: "underline"
+      }
+    },
+    itemGroup: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4xsmall"
+    }
+  },
+  defaultVariants: {
+    variant: "simple"
+  },
+  variants: {
+    variant: {
+      simple: {
+        item: {
+          padding: "xsmall"
+        }
+      },
+      bordered: {
+        item: {
+          paddingInline: "small",
+          paddingBlock: "xsmall",
+          border: "1px solid",
+          borderColor: "stroke.subtle",
+          _hover: {
+            borderColor: "stroke.hover",
+            background: "surface.default"
+          },
+          _highlighted: {
+            borderColor: "stroke.default"
+          },
+          _checked: {
+            borderColor: "stroke.default"
+          },
+          _disabled: {
+            borderColor: "stroke.disabled",
+            _hover: {
+              borderColor: "stroke.disabled"
+            }
+          }
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(comboboxRecipe);
+const InternalComboboxRoot = withProvider(_react.Combobox.Root, "root");
+const ComboboxRoot = _ref => {
+  let {
+    ...props
+  } = _ref;
+  return (
+    /*#__PURE__*/
+    //@ts-expect-error - withProvider swallows the generic that Combobox.Root expects.
+    (0, _jsxRuntime.jsx)(InternalComboboxRoot, {
+      ...props
+    })
+  );
+};
+exports.ComboboxRoot = ComboboxRoot;
+const ComboboxClearTrigger = exports.ComboboxClearTrigger = withContext(_react.Combobox.ClearTrigger, "clearTrigger");
+const ComboboxContent = exports.ComboboxContent = withContext(_react.Combobox.Content, "content");
+const ComboboxControl = exports.ComboboxControl = withContext(_react.Combobox.Control, "control");
+const ComboboxInput = exports.ComboboxInput = withContext(_react.Combobox.Input, "input");
+const InternalComboboxItemGroupLabel = withContext(_react.Combobox.ItemGroupLabel, "itemGroupLabel");
+const ComboboxItemGroupLabel = _ref2 => {
+  let {
+    children,
+    textStyle = "label.small",
+    fontWeight = "bold",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalComboboxItemGroupLabel, {
+    forwardCssProp: true,
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      asChild: true,
+      forwardCssProp: true,
+      textStyle: textStyle,
+      fontWeight: fontWeight,
+      ...props,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: children
+      })
+    })
+  });
+};
+exports.ComboboxItemGroupLabel = ComboboxItemGroupLabel;
+const ComboboxItemGroup = exports.ComboboxItemGroup = withContext(_react.Combobox.ItemGroup, "itemGroup");
+const ComboboxItemIndicator = exports.ComboboxItemIndicator = withContext(_react.Combobox.ItemIndicator, "itemIndicator");
+const ComboboxItem = exports.ComboboxItem = withContext(_react.Combobox.Item, "item");
+const InternalComboboxItemText = withContext(_react.Combobox.ItemText, "itemText");
+const ComboboxItemText = _ref3 => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalComboboxItemText, {
+    forwardCssProp: true,
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+      ...props
+    })
+  });
+};
+exports.ComboboxItemText = ComboboxItemText;
+const InternalComboboxLabel = withContext(_react.Combobox.Label, "label");
+const ComboboxLabel = _ref4 => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalComboboxLabel, {
+    forwardCssProp: true,
+    asChild: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+      textStyle: textStyle,
+      fontWeight: fontWeight,
+      ...props
+    })
+  });
+};
+exports.ComboboxLabel = ComboboxLabel;
+const ComboboxPositioner = exports.ComboboxPositioner = withContext(_react.Combobox.Positioner, "positioner");
+const ComboboxTrigger = exports.ComboboxTrigger = withContext(_react.Combobox.Trigger, "trigger");

package/lib/Dialog.d.ts

@@ -9,7 +9,7 @@ import { Dialog } from "@ark-ui/react";
 import { RecipeVariantProps } from "@ndla/styled-system/css";
 import { JsxStyleProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "description" | "content" | "trigger" | "backdrop" | "positioner" | "closeTrigger", {
+declare const dialogRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "description" | "content" | "positioner" | "trigger" | "backdrop" | "closeTrigger", {
     variant: {
         drawer: {
             content: {

package/lib/Figure.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.
+ *
+ */
+export declare const Figure: import("@ndla/styled-system/jsx").StyledComponent<"figure", {
+    size?: "small" | "xsmall" | "medium" | "full" | undefined;
+    float?: "left" | "right" | undefined;
+}>;

package/lib/Figure.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Figure = void 0;
+var _jsx = require("@ndla/styled-system/jsx");
+/**
+ * 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 Figure = exports.Figure = (0, _jsx.styled)("figure", {
+  base: {
+    position: "relative",
+    transitionDuration: "normal",
+    transitionProperty: "transform, width, height",
+    transitionTimingFunction: "default"
+  },
+  variants: {
+    size: {
+      full: {
+        width: "100%"
+      },
+      medium: {
+        tablet: {
+          width: "50%"
+        },
+        desktop: {
+          width: "65%"
+        }
+      },
+      small: {
+        tablet: {
+          width: "35%"
+        },
+        desktop: {
+          width: "50%"
+        }
+      },
+      xsmall: {
+        tablet: {
+          width: "25%"
+        },
+        desktop: {
+          width: "35%"
+        }
+      }
+    },
+    float: {
+      left: {
+        tablet: {
+          float: "left",
+          clear: "left",
+          paddingInlineEnd: "medium"
+        }
+      },
+      right: {
+        tablet: {
+          float: "right",
+          clear: "right",
+          paddingInlineStart: "medium"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "full"
+  },
+  compoundVariants: [{
+    float: ["left", "right"],
+    css: {
+      zIndex: "base",
+      left: "auto",
+      marginBlock: "xsmall"
+    }
+  }]
+});

package/lib/Select.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 { Select } from "@ark-ui/react";
+import { JsxStyleProps } from "@ndla/styled-system/types";
+import { TextProps } from "./Text";
+export type SelectRootProps<T extends Select.CollectionItem> = Select.RootProps<T> & JsxStyleProps;
+export declare const SelectRoot: <T extends Select.CollectionItem>({ lazyMount, unmountOnExit, ...props }: SelectRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectClearTrigger: import("react").ForwardRefExoticComponent<Select.ClearTriggerProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectContent: import("react").ForwardRefExoticComponent<Select.ContentProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectControl: import("react").ForwardRefExoticComponent<Select.ControlProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectIndicator: import("react").ForwardRefExoticComponent<Select.IndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemGroupLabel: import("react").ForwardRefExoticComponent<Select.ItemGroupLabelProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemGroup: import("react").ForwardRefExoticComponent<Select.ItemGroupProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemIndicator: import("react").ForwardRefExoticComponent<Select.ItemIndicatorProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: import("react").ForwardRefExoticComponent<Select.ItemProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItemText: import("react").ForwardRefExoticComponent<Select.ItemTextProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: import("react").ForwardRefExoticComponent<Select.LabelProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const SelectPositioner: import("react").ForwardRefExoticComponent<Select.PositionerProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectTrigger: import("react").ForwardRefExoticComponent<Select.TriggerProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SelectValueText: import("react").ForwardRefExoticComponent<Select.ValueTextProps & {
+    forwardCssProp?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLSpanElement>>;