@ndla/primitives 0.0.9 → 0.0.11

package/es/Combobox.js

@@ -0,0 +1,226 @@
+/**
+ * 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, comboboxAnatomy } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { Label } from "./Label";
+import { Text } from "./Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+const comboboxRecipe = sva({
+  slots: 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
+} = createStyleContext(comboboxRecipe);
+const InternalComboboxRoot = withProvider(Combobox.Root, "root");
+export const ComboboxRoot = _ref => {
+  let {
+    ...props
+  } = _ref;
+  return (
+    /*#__PURE__*/
+    //@ts-expect-error - withProvider swallows the generic that Combobox.Root expects.
+    _jsx(InternalComboboxRoot, {
+      ...props
+    })
+  );
+};
+export const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, "clearTrigger");
+export const ComboboxContent = withContext(Combobox.Content, "content");
+export const ComboboxControl = withContext(Combobox.Control, "control");
+export const ComboboxInput = withContext(Combobox.Input, "input");
+const InternalComboboxItemGroupLabel = withContext(Combobox.ItemGroupLabel, "itemGroupLabel");
+export const ComboboxItemGroupLabel = _ref2 => {
+  let {
+    children,
+    textStyle = "label.small",
+    fontWeight = "bold",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(InternalComboboxItemGroupLabel, {
+    forwardCssProp: true,
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Text, {
+      asChild: true,
+      forwardCssProp: true,
+      textStyle: textStyle,
+      fontWeight: fontWeight,
+      ...props,
+      children: /*#__PURE__*/_jsx("div", {
+        children: children
+      })
+    })
+  });
+};
+export const ComboboxItemGroup = withContext(Combobox.ItemGroup, "itemGroup");
+export const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, "itemIndicator");
+export const ComboboxItem = withContext(Combobox.Item, "item");
+const InternalComboboxItemText = withContext(Combobox.ItemText, "itemText");
+export const ComboboxItemText = _ref3 => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/_jsx(InternalComboboxItemText, {
+    forwardCssProp: true,
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Text, {
+      ...props
+    })
+  });
+};
+const InternalComboboxLabel = withContext(Combobox.Label, "label");
+export const ComboboxLabel = _ref4 => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/_jsx(InternalComboboxLabel, {
+    forwardCssProp: true,
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Label, {
+      textStyle: textStyle,
+      fontWeight: fontWeight,
+      ...props
+    })
+  });
+};
+export const ComboboxPositioner = withContext(Combobox.Positioner, "positioner");
+export const ComboboxTrigger = withContext(Combobox.Trigger, "trigger");

package/es/Figure.js

@@ -0,0 +1,75 @@
+/**
+ * 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 { styled } from "@ndla/styled-system/jsx";
+export const Figure = 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/es/Select.js

@@ -0,0 +1,197 @@
+/**
+ * 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 { forwardRef } from "react";
+import { Select, selectAnatomy } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { Label } from "./Label";
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectRecipe = sva({
+  slots: selectAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3xsmall"
+    },
+    control: {
+      display: "flex",
+      gap: "4xsmall",
+      alignItems: "center"
+    },
+    content: {
+      display: "flex",
+      gap: "4xsmall",
+      flexDirection: "column",
+      zIndex: "dropdown",
+      background: "surface.default",
+      borderRadius: "xsmall",
+      boxShadow: "large",
+      padding: "xsmall",
+      overflowY: "auto",
+      maxHeight: "surface.xsmall",
+      _focusVisible: {
+        outlineOffset: "-1"
+      },
+      _open: {
+        animation: "fade-shift-in 0.25s ease-out"
+      },
+      _closed: {
+        animation: "fade-shift-out 0.25s ease-out"
+      }
+    },
+    item: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "xsmall",
+      background: "surface.default",
+      borderRadius: "xsmall",
+      cursor: "pointer",
+      transitionDuration: "fast",
+      transitionProperty: "background, color",
+      transitionTimingFunction: "default",
+      _hover: {
+        background: "surface.hover"
+      },
+      _selected: {
+        background: "surface.selected",
+        _hover: {
+          background: "surface.hover"
+        },
+        _highlighted: {
+          background: "surface.hover"
+        }
+      },
+      _highlighted: {
+        background: "surface.hover",
+        _hover: {
+          background: "surface.hover"
+        }
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        color: "text.disabled",
+        background: "surface.disabled",
+        _highlighted: {
+          color: "text.disabled",
+          background: "surface.disabled"
+        },
+        _selected: {
+          color: "text.disabled",
+          background: "surface.disabled"
+        },
+        _hover: {
+          color: "text.disabled",
+          background: "surface.disabled"
+        }
+      }
+    },
+    indicator: {
+      color: "icon.default",
+      transformOrigin: "center",
+      transitionDuration: "normal",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default",
+      _open: {
+        transform: "rotate(180deg)"
+      }
+    },
+    itemIndicator: {
+      color: "stroke.default"
+    },
+    itemText: {
+      _checked: {
+        textDecoration: "underline"
+      },
+      _highlighted: {
+        textDecoration: "underline"
+      }
+    },
+    trigger: {
+      justifyContent: "space-between",
+      width: "surface.small",
+      _ariaInvalid: {
+        boxShadowColor: "stroke.error"
+      }
+    },
+    itemGroup: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "4xsmall"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(selectRecipe);
+const InternalSelectRoot = withProvider(Select.Root, "root");
+export const SelectRoot = _ref => {
+  let {
+    lazyMount = true,
+    unmountOnExit = true,
+    ...props
+  } = _ref;
+  return (
+    /*#__PURE__*/
+    //@ts-expect-error -- T does not necessarily match Select.CollectionItem. However, we prefer to use T over Select.CollectionItem to get the correct type during use.
+    _jsx(InternalSelectRoot, {
+      lazyMount: lazyMount,
+      unmountOnExit: unmountOnExit,
+      ...props
+    })
+  );
+};
+export const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger");
+export const SelectContent = withContext(Select.Content, "content");
+export const SelectControl = withContext(Select.Control, "control");
+export const SelectIndicator = withContext(Select.Indicator, "indicator");
+export const SelectItemGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(InternalSelectItemGroupLabel, {
+    asChild: true,
+    forwardCssProp: true,
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx(Label, {
+      asChild: true,
+      children: /*#__PURE__*/_jsx("div", {
+        children: children
+      })
+    })
+  });
+});
+const InternalSelectItemGroupLabel = withContext(Select.ItemGroupLabel, "itemGroupLabel");
+export const SelectItemGroup = withContext(Select.ItemGroup, "itemGroup");
+export const SelectItemIndicator = withContext(Select.ItemIndicator, "itemIndicator");
+export const SelectItem = withContext(Select.Item, "item");
+export const SelectItemText = withContext(Select.ItemText, "itemText");
+const InternalSelectLabel = withContext(Select.Label, "label");
+export const SelectLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/_jsx(InternalSelectLabel, {
+    asChild: true,
+    forwardCssProp: true,
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx(Label, {
+      children: children
+    })
+  });
+});
+export const SelectPositioner = withContext(Select.Positioner, "positioner");
+export const SelectTrigger = withContext(Select.Trigger, "trigger");
+export const SelectValueText = withContext(Select.ValueText, "valueText");

package/es/TagsInput.js

@@ -0,0 +1,121 @@
+/**
+ * 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 { forwardRef } from "react";
+import { TagsInput, tagsInputAnatomy } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { Label } from "./Label";
+import { jsx as _jsx } from "react/jsx-runtime";
+const tagsInputRecipe = sva({
+  slots: tagsInputAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xxsmall",
+      width: "full"
+    },
+    control: {
+      display: "inline-flex",
+      gap: "xxsmall",
+      alignItems: "center",
+      flexWrap: "wrap"
+    },
+    item: {
+      paddingBlock: "3xsmall"
+    },
+    itemPreview: {
+      display: "flex",
+      gap: "1",
+      paddingBlock: "4xsmall",
+      paddingInlineEnd: "3xsmall",
+      paddingInlineStart: "xsmall",
+      cursor: "initial",
+      borderRadius: "large",
+      outline: "1px solid",
+      outlineColor: "transparent",
+      backgroundColor: "surface.actionSubtle.selected",
+      color: "text.onAction",
+      transitionDuration: "normal",
+      transitionProperty: "background, outline-color, color",
+      transitionTimingFunction: "default",
+      textStyle: "label.medium",
+      _hover: {
+        backgroundColor: "surface.actionSubtle.hover",
+        outlineColor: "stroke.hover",
+        color: "text.default",
+        "& svg": {
+          color: "stroke.hover"
+        }
+      },
+      _highlighted: {
+        backgroundColor: "surface.actionSubtle.hover",
+        outlineWidth: "3px",
+        outlineOffset: "-1px",
+        outlineColor: "stroke.hover",
+        color: "text.default",
+        "& svg": {
+          color: "stroke.hover"
+        }
+      }
+    },
+    input: {
+      flex: "1"
+    },
+    itemDeleteTrigger: {
+      paddingBottom: "1",
+      cursor: "pointer",
+      "& span": {
+        display: "inline-block"
+      },
+      "& svg": {
+        marginInline: "0",
+        marginBlock: "0",
+        width: "medium",
+        height: "medium"
+      }
+    },
+    itemText: {
+      paddingBottom: "1"
+    },
+    itemInput: {
+      outline: "none",
+      background: "transparent"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(tagsInputRecipe);
+export const TagsInputRoot = withProvider(TagsInput.Root, "root");
+export const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, "clearTrigger");
+export const TagsInputControl = withContext(TagsInput.Control, "control");
+export const TagsInputInput = withContext(TagsInput.Input, "input");
+export const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, "itemDeleteTrigger");
+export const TagsInputItemInput = withContext(TagsInput.ItemInput, "itemInput");
+export const TagsInputItemPreview = withContext(TagsInput.ItemPreview, "itemPreview");
+export const TagsInputItem = withContext(TagsInput.Item, "item");
+export const TagsInputItemText = withContext(TagsInput.ItemText, "itemText");
+const InternalTagsInputLabel = withContext(TagsInput.Label, "label");
+export const TagsInputLabel = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalTagsInputLabel, {
+    asChild: true,
+    forwardCssProp: true,
+    ref: ref,
+    ...props,
+    children: /*#__PURE__*/_jsx(Label, {
+      children: children
+    })
+  });
+});

package/es/index.js

@@ -12,11 +12,13 @@ export { Badge } from "./Badge";
 export { BlockQuote } from "./BlockQuote";
 export { Button, IconButton } from "./Button";
 export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput } from "./Checkbox";
+export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger } from "./Combobox";
 export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody } from "./Dialog";
 export { ExpandableBox, ExpandableBoxSummary } from "./ExpandableBox";
 export { FieldRoot } from "./Field";
 export { FieldErrorMessage } from "./FieldErrorMessage";
 export { FieldHelper } from "./FieldHelper";
+export { Figure } from "./Figure";
 export { FramedContent } from "./FramedContent";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel } from "./Label";
@@ -26,11 +28,13 @@ export { NdlaLogoEn, NdlaLogoNb, NdlaLogoText } from "./NdlaLogo";
 export { PaginationRoot, PaginationItem, PaginationEllipsis, PaginationPrevTrigger, PaginationNextTrigger } from "./Pagination";
 export { PopoverRoot, PopoverAnchor, PopoverArrowStandalone, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContentStandalone, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger } from "./Popover";
 export { RadioGroupRoot, RadioGroupIndicator, RadioGroupItemControl, RadioGroupItem, RadioGroupItemText, RadioGroupLabel, RadioGroupItemHiddenInput } from "./RadioGroup";
+export { SelectRoot, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItemGroupLabel, SelectItemGroup, SelectItemIndicator, SelectItem, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText } from "./Select";
 export { Skeleton } from "./Skeleton";
 export { SliderRoot, SliderControl, SliderTrack, SliderRange, SliderThumb, SliderLabel, SliderHiddenInput } from "./Slider";
 export { Spinner } from "./Spinner";
 export { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel, SwitchHiddenInput } from "./Switch";
 export { Table } from "./Table";
+export { TagsInputRoot, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemPreview, TagsInputItem, TagsInputItemText, TagsInputLabel } from "./TagsInput";
 export { TabsRoot, TabsContent, TabsIndicator, TabsList, TabsTrigger } from "./Tabs";
 export { Text, Heading } from "./Text";
 export { ToastRoot, ToastActionTrigger, ToastCloseTrigger, ToastDescription, ToastTitle } from "./Toast";