@dowel-ui/react 0.1.0

package/src/components/select/index.ts

@@ -0,0 +1,14 @@
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  selectTriggerVariants,
+  type SelectContentProps,
+  type SelectItemProps,
+  type SelectTriggerProps,
+} from "./select";

package/src/components/select/meta.ts

@@ -0,0 +1,16 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "select",
+  title: "Select",
+  description: "Picks one value from a short list of options.",
+  category: "form",
+  status: "stable",
+  dependencies: ["class-variance-authority", "radix-ui"],
+  registryDependencies: [],
+  files: ["select.tsx"],
+  a11y:
+    "Full listbox keyboard model: arrows move, typeahead jumps, Enter selects, Escape closes and " +
+    "restores focus. Give the trigger a name with aria-labelledby or a Label. Past about a dozen " +
+    "options prefer Combobox — scrolling a long listbox by keyboard is slow.",
+});

package/src/components/select/select.stories.tsx

@@ -0,0 +1,137 @@
+import type { Decorator, Meta, StoryObj } from "@storybook/react-vite";
+
+import { Label } from "@/components/label";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+/** Named so its type is nameable in declaration output (TS2883). */
+const withFixedWidth: Decorator = (Story) => (
+  <div className="w-64">
+    <Story />
+  </div>
+);
+
+const meta = {
+  title: "Forms/Select",
+  component: SelectTrigger,
+  args: { triggerSize: "md" },
+  argTypes: { triggerSize: { control: "inline-radio", options: ["sm", "md", "lg"] } },
+  decorators: [withFixedWidth],
+} satisfies Meta<typeof SelectTrigger>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <div className="grid gap-2">
+      <Label htmlFor="fruit">Fruit</Label>
+      <Select>
+        <SelectTrigger id="fruit" {...args}>
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+          <SelectItem value="grapes">Grapes</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+export const Grouped: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="grid gap-2">
+      <Label htmlFor="food">Food</Label>
+      <Select>
+        <SelectTrigger id="food">
+          <SelectValue placeholder="Select something" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectGroup>
+            <SelectLabel>Vegetables</SelectLabel>
+            <SelectItem value="carrot">Carrot</SelectItem>
+            <SelectItem value="potato">Potato</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+export const WithDisabledOption: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Select>
+      <SelectTrigger aria-label="Plan">
+        <SelectValue placeholder="Select a plan" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="hobby">Hobby</SelectItem>
+        <SelectItem value="pro">Pro</SelectItem>
+        <SelectItem value="enterprise" disabled>
+          Enterprise (contact sales)
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+/** Past about a dozen options, people want to type — reach for Combobox. */
+export const LongList: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Select>
+      <SelectTrigger aria-label="Timezone">
+        <SelectValue placeholder="Select a timezone" />
+      </SelectTrigger>
+      <SelectContent>
+        {Array.from({ length: 24 }, (_, index) => (
+          <SelectItem key={index} value={`utc-${String(index)}`}>
+            UTC{index >= 12 ? "+" : "-"}
+            {String(Math.abs(index - 12)).padStart(2, "0")}:00
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Invalid: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="grid gap-2">
+      <Label htmlFor="required-select">Region</Label>
+      <Select>
+        <SelectTrigger id="required-select" aria-invalid aria-describedby="region-error">
+          <SelectValue placeholder="Select a region" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="us">United States</SelectItem>
+          <SelectItem value="eu">Europe</SelectItem>
+        </SelectContent>
+      </Select>
+      <p id="region-error" className="text-xs text-destructive">
+        Choose a region to continue.
+      </p>
+    </div>
+  ),
+};

package/src/components/select/select.test.tsx

@@ -0,0 +1,209 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { expectNoA11yViolations } from "../../../test/a11y";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+function Example({ onValueChange }: { onValueChange?: (value: string) => void } = {}) {
+  return (
+    <>
+      <span id="fruit-label">Fruit</span>
+      <Select onValueChange={onValueChange}>
+        <SelectTrigger aria-labelledby="fruit-label">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="cherry" disabled>
+              Cherry
+            </SelectItem>
+          </SelectGroup>
+          <SelectSeparator />
+          <SelectItem value="carrot">Carrot</SelectItem>
+        </SelectContent>
+      </Select>
+    </>
+  );
+}
+
+describe("Select", () => {
+  it("shows the placeholder before anything is chosen", () => {
+    render(<Example />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Select a fruit");
+  });
+
+  it("is closed until the trigger is activated", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    await user.click(screen.getByRole("combobox"));
+    expect(await screen.findByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("reports its state on the trigger", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    const trigger = screen.getByRole("combobox");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    await user.click(trigger);
+    await waitFor(() => {
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+    });
+  });
+
+  it("selects an option and shows it on the trigger", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "Banana" }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("combobox")).toHaveTextContent("Banana");
+    });
+  });
+
+  it("reports the selected value", async () => {
+    const onValueChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Example onValueChange={onValueChange} />);
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "Apple" }));
+
+    expect(onValueChange).toHaveBeenCalledWith("apple");
+  });
+
+  it("opens from the keyboard", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.tab();
+    expect(screen.getByRole("combobox")).toHaveFocus();
+
+    await user.keyboard("{Enter}");
+    expect(await screen.findByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("does not select a disabled option", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    await user.click(screen.getByRole("combobox"));
+    const disabled = await screen.findByRole("option", { name: "Cherry" });
+    expect(disabled).toHaveAttribute("data-disabled");
+
+    await user.click(disabled);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+  });
+
+  it("closes on Escape and restores focus", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+
+    const trigger = screen.getByRole("combobox");
+    await user.click(trigger);
+    await screen.findByRole("listbox");
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(trigger).toHaveFocus();
+    });
+  });
+
+  it("works controlled", async () => {
+    const user = userEvent.setup();
+
+    function Controlled() {
+      const [value, setValue] = useState("apple");
+      return (
+        <Select value={value} onValueChange={setValue}>
+          <SelectTrigger aria-label="Fruit">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+    }
+
+    render(<Controlled />);
+    expect(screen.getByRole("combobox")).toHaveTextContent("Apple");
+
+    await user.click(screen.getByRole("combobox"));
+    await user.click(await screen.findByRole("option", { name: "Banana" }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("combobox")).toHaveTextContent("Banana");
+    });
+  });
+
+  it.each([
+    ["sm", "h-8"],
+    ["md", "h-9"],
+    ["lg", "h-10"],
+  ] as const)("applies the %s trigger size", (triggerSize, expectedClass) => {
+    render(
+      <Select>
+        <SelectTrigger triggerSize={triggerSize} aria-label="Fruit">
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">A</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    expect(screen.getByRole("combobox")).toHaveClass(expectedClass);
+  });
+
+  it("exposes the invalid state", () => {
+    render(
+      <Select>
+        <SelectTrigger aria-label="Fruit" aria-invalid>
+          <SelectValue placeholder="Pick" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">A</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    expect(screen.getByRole("combobox")).toHaveAttribute("aria-invalid", "true");
+  });
+
+  it("has no accessibility violations when closed", async () => {
+    const { container } = render(<Example />);
+    await expectNoA11yViolations(container);
+  });
+
+  it("has no accessibility violations while open", async () => {
+    const user = userEvent.setup();
+    const { baseElement } = render(<Example />);
+
+    await user.click(screen.getByRole("combobox"));
+    await screen.findByRole("listbox");
+
+    await expectNoA11yViolations(baseElement);
+  });
+});

package/src/components/select/select.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Select as SelectPrimitive } from "radix-ui";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import { focusRing, invalidStyles } from "@/lib/styles";
+import { cn } from "@/lib/utils";
+
+/**
+ * Picks one value from a list.
+ *
+ * For a short, known list. Past roughly a dozen options people want to type
+ * rather than scroll — reach for Combobox there. Unlike a native `<select>`,
+ * the options are real elements, so they can carry icons and descriptions.
+ */
+export const Select = SelectPrimitive.Root;
+export const SelectGroup = SelectPrimitive.Group;
+export const SelectValue = SelectPrimitive.Value;
+
+const selectTriggerVariants = cva(
+  cn(
+    "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background",
+    "whitespace-nowrap text-foreground shadow-xs",
+    "transition-[border-color,box-shadow] duration-[var(--duration-fast)]",
+    "data-[placeholder]:text-muted-foreground",
+    "focus-visible:border-ring",
+    "disabled:cursor-not-allowed disabled:opacity-55",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+    focusRing,
+    invalidStyles,
+  ),
+  {
+    variants: {
+      triggerSize: {
+        sm: "h-8 px-2.5 text-sm",
+        md: "h-9 px-3 text-sm",
+        lg: "h-10 px-3.5 text-base",
+      },
+    },
+    defaultVariants: {
+      triggerSize: "md",
+    },
+  },
+);
+
+export interface SelectTriggerProps
+  extends
+    ComponentPropsWithRef<typeof SelectPrimitive.Trigger>,
+    VariantProps<typeof selectTriggerVariants> {}
+
+export function SelectTrigger({
+  className,
+  triggerSize,
+  children,
+  ...props
+}: SelectTriggerProps) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(selectTriggerVariants({ triggerSize }), className)}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-4 opacity-60">
+          <path
+            d="m7 10 5 5 5-5"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+/** Scroll affordance shown only when the list overflows. Decorative. */
+function ScrollButton({
+  direction,
+  className,
+  ...props
+}: {
+  direction: "up" | "down";
+} & ComponentPropsWithRef<typeof SelectPrimitive.ScrollUpButton>) {
+  const Comp =
+    direction === "up" ? SelectPrimitive.ScrollUpButton : SelectPrimitive.ScrollDownButton;
+
+  return (
+    <Comp
+      data-slot={`select-scroll-${direction}`}
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-4 opacity-60">
+        <path
+          d={direction === "up" ? "m7 14 5-5 5 5" : "m7 10 5 5 5-5"}
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </Comp>
+  );
+}
+
+export type SelectContentProps = ComponentPropsWithRef<typeof SelectPrimitive.Content>;
+
+export function SelectContent({
+  className,
+  children,
+  position = "popper",
+  sideOffset = 6,
+  ...props
+}: SelectContentProps) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        position={position}
+        sideOffset={position === "popper" ? sideOffset : undefined}
+        className={cn(
+          "relative z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)]",
+          "min-w-32 overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover",
+          "p-1 text-popover-foreground shadow-lg",
+          "origin-[var(--radix-select-content-transform-origin)]",
+          "data-[state=closed]:animate-float-out data-[state=open]:animate-float-in",
+          position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]",
+          className,
+        )}
+        {...props}
+      >
+        <ScrollButton direction="up" />
+        <SelectPrimitive.Viewport className="p-0">{children}</SelectPrimitive.Viewport>
+        <ScrollButton direction="down" />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+export interface SelectItemProps extends ComponentPropsWithRef<typeof SelectPrimitive.Item> {
+  /**
+   * What the trigger shows once this option is chosen.
+   *
+   * The primitive clones the item's text into the trigger, so a rich option —
+   * a name with a description under it — would otherwise drag all of that into
+   * a one-line trigger. Give the label here and the rest as children.
+   */
+  label?: ReactNode;
+}
+
+export function SelectItem({ className, label, children, ...props }: SelectItemProps) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none",
+        "transition-colors duration-[var(--duration-instant)]",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-55",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {label === undefined ? (
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+      ) : (
+        <>
+          <SelectPrimitive.ItemText>{label}</SelectPrimitive.ItemText>
+          {children}
+        </>
+      )}
+      {/* Decorative: selection is already announced through aria-selected. */}
+      <span className="absolute right-2 grid size-4 place-items-center">
+        <SelectPrimitive.ItemIndicator>
+          <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" className="size-3.5">
+            <path
+              d="m5 13 4 4L19 7"
+              stroke="currentColor"
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </SelectPrimitive.ItemIndicator>
+      </span>
+    </SelectPrimitive.Item>
+  );
+}
+
+export function SelectLabel({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs font-medium text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export function SelectSeparator({
+  className,
+  ...props
+}: ComponentPropsWithRef<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  );
+}
+
+export { selectTriggerVariants };

package/src/components/separator/index.ts

@@ -0,0 +1 @@
+export { Separator, type SeparatorProps } from "./separator";

package/src/components/separator/meta.ts

@@ -0,0 +1,15 @@
+import { defineMeta } from "@/registry/schema";
+
+export const meta = defineMeta({
+  name: "separator",
+  title: "Separator",
+  description: "A horizontal or vertical rule that divides content.",
+  category: "layout",
+  status: "stable",
+  dependencies: ["radix-ui"],
+  registryDependencies: [],
+  files: ["separator.tsx"],
+  a11y:
+    "Decorative by default and hidden from assistive technology. Set decorative={false} to " +
+    "expose it as a semantic separator when it divides meaningfully distinct groups.",
+});

package/src/components/separator/separator.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { Separator } from "./separator";
+
+const meta = {
+  title: "Layout/Separator",
+  component: Separator,
+  parameters: { controls: { disable: true } },
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-72">
+      <div className="space-y-1">
+        <h4 className="text-sm font-medium">Radix primitives</h4>
+        <p className="text-sm text-muted-foreground">An open source component library.</p>
+      </div>
+      <Separator className="my-4" />
+      <div className="flex h-5 items-center gap-4 text-sm">
+        <span>Blog</span>
+        <Separator orientation="vertical" />
+        <span>Docs</span>
+        <Separator orientation="vertical" />
+        <span>Source</span>
+      </div>
+    </div>
+  ),
+};
+
+/** Exposed to assistive technology when it divides genuinely distinct groups. */
+export const Semantic: Story = {
+  render: () => (
+    <div className="w-72 space-y-4">
+      <p className="text-sm">Account settings</p>
+      <Separator decorative={false} />
+      <p className="text-sm">Danger zone</p>
+    </div>
+  ),
+};