@commercetools/nimbus 0.0.1

package/src/components/select/index.ts

@@ -0,0 +1,2 @@
+export * from "./select";
+export * from "./select.types";

package/src/components/select/select.mdx

@@ -0,0 +1,170 @@
+---
+id: Components-Select
+title: Select
+description:
+  displays a collapsible list of options and allows a user to select one of
+  them.
+documentState: InitialDraft
+order: 999
+menu:
+  - Components
+  - Inputs
+  - Select
+tags:
+  - component
+---
+
+# Select
+
+A select displays a collapsible list of options and allows a user to select one
+of them.
+
+## Basic Usage
+
+```jsx-live
+const App = () => (
+  <Select.Root aria-label="Select a fruit" data-testid="select">
+    <Select.Options>
+      <Select.Option>Apples</Select.Option>
+      <Select.Option>Bananas</Select.Option>
+      <Select.Option>Oranges</Select.Option>
+      <Select.Option>Cherries</Select.Option>
+    </Select.Options>
+  </Select.Root>
+)
+```
+
+### Sizes
+
+Available sizes.
+
+```jsx-live
+const App = () => {
+
+  const sizes = ['md', 'sm'];
+
+  return (
+    <Stack direction="horizontal" alignItems="center">
+      {sizes.map(size => (
+        <Select.Root size={size} key={size} aria-label="Select a fruit" data-testid="select">
+          <Select.Options>
+            <Select.Option>Apples</Select.Option>
+            <Select.Option>Bananas</Select.Option>
+            <Select.Option>Oranges</Select.Option>
+            <Select.Option>Cherries</Select.Option>
+          </Select.Options>
+        </Select.Root>
+      ))}
+    </Stack>
+  )
+}
+```
+
+### Variants
+
+Available variants.
+
+```jsx-live
+const App = () => {
+
+  const variants = ['outline', 'ghost'];
+
+  return (
+    <Stack direction="horizontal" alignItems="center">
+      {variants.map(variant => (
+        <Select.Root variant={variant} key={variant} aria-label="Select a fruit" data-testid="select">
+          <Select.Options>
+            <Select.Option>Apples</Select.Option>
+            <Select.Option>Bananas</Select.Option>
+            <Select.Option>Oranges</Select.Option>
+            <Select.Option>Cherries</Select.Option>
+          </Select.Options>
+        </Select.Root>
+      ))}
+    </Stack>
+  )
+}
+```
+
+### Label + Descriptions
+
+You can add descriptions to the labels.
+
+```jsx-live
+const App = () => {
+  return (
+    <Select.Root aria-label="Select some fruit(s)" data-testid="select">
+        <Select.Options>
+          {/** Variant A - plain html-tags with slot property */}
+          <Select.Option textValue="Apple">
+            <p slot="label">Apple</p>
+            <p slot="description">A classic and versatile fruit.</p>
+          </Select.Option>
+          {/** Variant B - text component with slot property */}
+          <Select.Option textValue="Banana">
+            <Text slot="label">Banana</Text>
+            <Text slot="description">A good source of potassium.</Text>
+          </Select.Option>
+          <Select.Option textValue="Oranges">
+            <Text slot="label">Oranges</Text>
+            <Text slot="description">Rich in vitamin C.</Text>
+          </Select.Option>
+          <Select.Option textValue="Strawberries">
+            <Text slot="label">Strawberries</Text>
+            <Text slot="description">Sweet and full of antioxidants.</Text>
+          </Select.Option>
+          <Select.Option textValue="Grapes">
+            <Text slot="label">Grapes</Text>
+            <Text slot="description">
+              Available in various colors and flavors.
+            </Text>
+          </Select.Option>
+        </Select.Options>
+      </Select.Root>
+  )
+}
+```
+
+### Controlled usage
+
+```jsx-live
+const App = () => {
+  const [animal, setAnimal] = useState<Key>("Bison");
+
+  const options = [
+    { id: 1, name: "Koala" },
+    { id: 2, name: "Kangaroo" },
+    { id: 3, name: "Platypus" },
+    { id: 4, name: "Bald Eagle" },
+    { id: 5, name: "Bison" },
+    { id: 6, name: "Skunk" },
+  ];
+
+
+  return (
+    <Box>
+      <Box mb="400">Selection: {animal}</Box>
+      <Select.Root
+        defaultSelectedKey={animal}
+        selectedKey={animal}
+        onSelectionChange={setAnimal}
+        aria-label="Select your new pet"
+        data-testid="select"
+      >
+        <Select.Options items={options}>
+          {(item) => (
+            <Select.Option id={item.name}>{item.name}</Select.Option>
+          )}
+        </Select.Options>
+      </Select.Root>
+    </Box>
+  );
+}
+```
+
+## Props
+
+<PropTables
+  root="Select"
+  ids="SelectRoot, SelectOptions, SelectOptionGroup, SelectOption"
+/>

package/src/components/select/select.recipe.tsx

@@ -0,0 +1,216 @@
+import { defineSlotRecipe } from "@chakra-ui/react";
+
+/**
+ * Recipe configuration for the Select component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ */
+export const selectSlotRecipe = defineSlotRecipe({
+  slots: [
+    "root",
+    "trigger",
+    "triggerLabel",
+    "options",
+    "optionGroup",
+    "option",
+  ],
+  // Unique class name prefix for the component
+  className: "nimbus-select",
+
+  // Base styles applied to all instances of the component
+  base: {
+    // RA <Select>
+    root: {
+      colorPalette: "primary",
+      display: "inline-block",
+      position: "relative",
+      maxWidth: "100%",
+      borderRadius: "200",
+      // [data-focused]
+      // [data-focus-visible]
+      // [data-open]
+      // [data-invalid]
+      // [data-required]
+      "&[data-disabled]": {
+        layerStyle: "disabled",
+        pointerEvents: "none",
+      },
+    },
+    trigger: {
+      cursor: "button",
+      display: "inline-flex",
+      focusRing: "outside",
+      alignItems: "flex-start",
+      borderRadius: "200",
+      color: "neutral.12",
+      width: "100%",
+      userSelect: "none",
+      boxShadow: "inset 0 0 0 var(--border-width) var(--border-color)",
+
+      "& span": {
+        display: "inline-block",
+        my: "auto",
+      },
+      '& [slot="description"]': {
+        display: "none",
+      },
+
+      "[data-invalid] &": {
+        "--border-width": "sizes.50",
+        "--border-color": "colors.error.7",
+      },
+
+      // [data-hovered]
+      // [data-pressed]
+      // [data-focused]
+      // [data-focus-visible]
+      // [data-disabled]
+      // [data-pending]
+    },
+    triggerLabel: {
+      // *Magic*
+      // the trigger-label defines the overall width of the select,
+      // but since we position 2 buttons/icons next to it, we need to account for
+      // their width as well and reserve some space for them
+      // = label-button-gap + button-size + icon-size
+      // = 8px + 24px + 24px
+      // = 56px * 25 = 1400 token
+      "--button-safespace": "sizes.1400",
+      color: "neutral.12",
+      textAlign: "left",
+      marginRight: "var(--button-safespace)",
+      maxWidth: "100%",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+
+      "&[data-placeholder]": {
+        opacity: 0.5,
+      },
+      "[data-invalid] &": {
+        color: "error.11",
+      },
+    },
+    // Popover
+    options: {
+      "--scrollbar-color": "colors.neutral.8",
+      "--scrollbar-bg": "colors.neutral.3",
+
+      bg: "bg",
+      borderRadius: "200",
+      boxShadow: "5",
+      minWidth: "var(--trigger-width)",
+      p: "200",
+      focusRing: "outside",
+      maxHeight: "40svh",
+      overflowY: "auto",
+      scrollbarWidth: "thin",
+      scrollbarColor: "var(--scrollbar-color) var(--scrollbar-bg)",
+      // [data-trigger="..."]
+      // [data-placement="left | right | top | bottom"]
+      // [data-entering]
+      // [data-exiting]
+    },
+    // Option group header
+    optionGroup: {
+      textStyle: "xs",
+      color: "neutral.11",
+      fontWeight: "600",
+      lineHeight: "350",
+      letterSpacing: "25",
+      textTransform: "uppercase",
+      p: "200",
+      borderBottom: "solid-25",
+      borderColor: "neutral.6",
+      mx: "-200",
+      mt: "200",
+      mb: "300",
+    },
+    // ListBoxItem
+    option: {
+      focusRing: "outside",
+      cursor: "menuitem",
+      color: "neutral.12",
+      textStyle: "sm",
+      p: "200",
+      borderRadius: "200",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+
+      '&[aria-selected="true"], &[data-focused="true"]': {
+        bg: "primary.4",
+      },
+
+      '& [slot="label"]': {
+        display: "block",
+      },
+
+      '& [slot="description"]': {
+        display: "block",
+        color: "neutral.11",
+        textStyle: "xs",
+      },
+
+      '&[data-disabled="true"]': {
+        layerStyle: "disabled",
+      },
+    },
+  },
+
+  // Available variants for customizing the component's appearance
+  variants: {
+    // Size variants from smallest to largest
+    size: {
+      sm: {
+        root: {},
+        trigger: {
+          h: "800",
+          px: "400",
+          textStyle: "sm",
+        },
+      },
+      md: {
+        root: {},
+        trigger: {
+          h: "1000",
+          px: "400",
+          textStyle: "md",
+        },
+      }, // Medium
+    },
+
+    // Visual style variants
+    variant: {
+      outline: {
+        root: {
+          bg: "bg",
+          "&:hover": {
+            bg: "primary.2",
+          },
+        },
+        trigger: {
+          "--border-width": "sizes.25",
+          "--border-color": "colors.neutral.7",
+        },
+      },
+      ghost: {
+        root: {
+          bg: "transparent",
+          "&:hover": {
+            bg: "primaryAlpha.2",
+          },
+        },
+        trigger: {
+          "--border-width": "sizes.25",
+          "--border-color": "transparent",
+        },
+      },
+    },
+  },
+
+  // Default variant values when not explicitly specified
+  defaultVariants: {
+    size: "md",
+    variant: "outline",
+  },
+});

package/src/components/select/select.slots.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+import {
+  createSlotRecipeContext,
+  type HTMLChakraProps,
+  type RecipeVariantProps,
+} from "@chakra-ui/react";
+import { selectSlotRecipe } from "./select.recipe";
+import { type SelectProps as RaSelectProps } from "react-aria-components";
+
+const { withProvider, withContext } = createSlotRecipeContext({
+  key: "select",
+});
+
+// Select
+export interface SelectRootSlotProps
+  extends HTMLChakraProps<
+    "div",
+    RecipeVariantProps<typeof selectSlotRecipe> & RaSelectProps<object>
+  > {}
+export const SelectRootSlot = withProvider<HTMLDivElement, SelectRootSlotProps>(
+  "div",
+  "root"
+);
+
+// Trigger Button
+export interface SelectTriggerSlotProps extends HTMLChakraProps<"button"> {}
+export const SelectTriggerSlot = withContext<
+  HTMLButtonElement,
+  SelectTriggerSlotProps
+>("button", "trigger");
+
+// Trigger Button Label
+export interface SelectTriggerLabelSlotProps extends HTMLChakraProps<"span"> {}
+export const SelectTriggerLabelSlot = withContext<
+  HTMLButtonElement,
+  SelectTriggerLabelSlotProps
+>("span", "triggerLabel");
+
+// ListBox
+export interface SelectOptionsSlotProps extends HTMLChakraProps<"div"> {}
+export const SelectOptionsSlot = withContext<
+  HTMLDivElement,
+  SelectOptionsSlotProps
+>("div", "options");
+
+// ListBoxItem
+export interface SelectOptionSlotProps extends HTMLChakraProps<"div"> {}
+export const SelectOptionSlot = withContext<
+  HTMLDivElement,
+  SelectOptionSlotProps
+>("div", "option");
+
+// OptionGroup
+export interface SelectOptionGroupSlotProps extends HTMLChakraProps<"div"> {}
+export const SelectOptionGroupSlot = withContext<
+  HTMLDivElement,
+  SelectOptionGroupSlotProps
+>("div", "optionGroup");