@boxcustodia/library 2.0.0-alpha.10 → 2.0.0-alpha.12

package/src/components/scroll-area/scroll-area.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import type React from "react";
+import { cn } from "../../lib";
+
+export function ScrollArea({
+  className,
+  children,
+  scrollFade = false,
+  scrollbarGutter = false,
+  ...props
+}: ScrollAreaPrimitive.Root.Props & {
+  scrollFade?: boolean;
+  scrollbarGutter?: boolean;
+}): React.ReactElement {
+  return (
+    <ScrollAreaPrimitive.Root
+      className={cn("size-full min-h-0", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        className={cn(
+          "h-full rounded-[inherit] outline-none transition-shadows focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain",
+          scrollFade &&
+            "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
+          scrollbarGutter &&
+            "data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5",
+        )}
+        data-slot="scroll-area-viewport"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar orientation="vertical" />
+      <ScrollBar orientation="horizontal" />
+      <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+export function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      className={cn(
+        "m-1 flex opacity-0 transition-opacity delay-300 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100",
+        className,
+      )}
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        className="relative flex-1 rounded-full bg-foreground/20"
+        data-slot="scroll-area-thumb"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  );
+}
+
+export { ScrollAreaPrimitive };

package/src/components/select/index.ts

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

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

@@ -0,0 +1,253 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useArgs } from "storybook/preview-api";
+import { Button } from "../button";
+import { Field } from "../field";
+import { Form as LibraryForm } from "../form";
+import {
+  Select,
+  SelectGroup,
+  SelectGroupLabel,
+  SelectItem,
+  SelectPopup,
+  SelectRoot,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+interface Animal {
+  label: string;
+  value: string;
+}
+
+const animals: Animal[] = [
+  { label: "Cat", value: "cat" },
+  { label: "Dog", value: "dog" },
+  { label: "Bird", value: "bird" },
+  { label: "Rabbit", value: "rabbit" },
+  { label: "Fish", value: "fish" },
+  { label: "Reptile", value: "reptile" },
+  { label: "Snake", value: "snake" },
+  { label: "Turtle", value: "turtle" },
+];
+
+/**
+ * Single-selection dropdown built on Base UI. Items shaped as `{ label, value }`
+ * or plain strings/numbers work with no extra props. Provide `getLabel`/`getValue`
+ * for custom object shapes, or `renderItem` to control the content inside each
+ * option — the checkmark indicator is always appended on the right.
+ *
+ * Exposes `onChange` instead of Base UI's `onValueChange`. `onChange` receives
+ * the full item object (or `null`). For controlled usage, pass `value` + `onChange`
+ * together. Use `SelectRoot` + primitives for full structural control.
+ */
+const meta: Meta<typeof Select> = {
+  title: "Components/Select",
+  component: Select,
+  parameters: { layout: "centered" },
+  decorators: [
+    (Story) => (
+      <div className="w-64">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    onChange: { control: false },
+    getLabel: { control: false },
+    getValue: { control: false },
+    renderItem: { control: false },
+    triggerProps: { control: false },
+    popupProps: { control: false },
+    itemProps: { control: false },
+  },
+  args: {
+    items: animals,
+    placeholder: "Select an animal",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};
+
+/**
+ * `getLabel` and `getValue` accept functions so they work with any object
+ * shape, not just `{ label, value }`.
+ */
+export const CustomObject: Story = {
+  render: () => {
+    const items = [
+      { key: "cat", name: "Cat", emoji: "🐱" },
+      { key: "dog", name: "Dog", emoji: "🐶" },
+      { key: "bird", name: "Bird", emoji: "🐦" },
+    ];
+
+    return (
+      <Select
+        items={items}
+        getLabel={(a) => a.name}
+        getValue={(a) => a.key}
+        placeholder="Select an animal"
+      />
+    );
+  },
+};
+
+/**
+ * `multiple` enables multi-selection. The trigger shows selected labels as a
+ * comma-separated list with automatic truncation. Use `value: TItem[]` and
+ * `onChange: (value: TItem[]) => void` for controlled usage — the discriminated
+ * union ensures type safety between single and multiple modes.
+ */
+export const Multiple: Story = {
+  render: () => (
+    <Select items={animals} multiple placeholder="Select animals" />
+  ),
+};
+
+/**
+ * `renderItem` customizes the content inside each option. The checkmark
+ * indicator is always rendered by the item wrapper on the right.
+ */
+export const CustomRender: Story = {
+  render: () => {
+    const items = [
+      { key: "cat", name: "Cat", emoji: "🐱" },
+      { key: "dog", name: "Dog", emoji: "🐶" },
+      { key: "bird", name: "Bird", emoji: "🐦" },
+    ];
+
+    return (
+      <Select
+        items={items}
+        getLabel={(a) => a.name}
+        getValue={(a) => a.key}
+        renderItem={(a) => (
+          <span className="flex items-center gap-2">
+            <span>{a.emoji}</span>
+            <span>{a.name}</span>
+          </span>
+        )}
+        placeholder="Select an animal"
+      />
+    );
+  },
+};
+
+/**
+ * `onChange` receives the full item object (or `null`).
+ * `value` accepts the item object directly — no string conversion needed.
+ */
+export const Controlled: Story = {
+  render: (args) => {
+    const [{ value }, updateArgs] = useArgs();
+    return (
+      <div className="flex flex-col gap-4">
+        <Select
+          {...args}
+          value={value ?? null}
+          onChange={(item) => updateArgs({ value: item })}
+        />
+        <p className="text-sm text-muted-foreground">
+          Selected: {value ? (value as Animal).label : "none"}
+        </p>
+      </div>
+    );
+  },
+};
+
+export const Form: Story = {
+  name: "Form",
+  render: () => (
+    <LibraryForm className="space-y-1" onSubmit={console.log}>
+      <Field name="animal" label="Animal">
+        <Select<Animal>
+          items={animals}
+          placeholder="Select an animal"
+          required
+        />
+      </Field>
+      <Button type="submit">Submit</Button>
+    </LibraryForm>
+  ),
+};
+
+/**
+ * Use `SelectRoot` + primitives for full structural control: custom grouping,
+ * separators, and arbitrary content inside items.
+ *
+ * `SelectGroupLabel` must always be placed inside a `SelectGroup`.
+ *
+ * ```tsx
+ * <SelectRoot>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="…" />
+ *   </SelectTrigger>
+ *   <SelectPopup>
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Group A</SelectGroupLabel>
+ *       <SelectItem value="a1">Item A1</SelectItem>
+ *     </SelectGroup>
+ *     <SelectSeparator />
+ *     <SelectGroup>
+ *       <SelectGroupLabel>Group B</SelectGroupLabel>
+ *       <SelectItem value="b1">Item B1</SelectItem>
+ *     </SelectGroup>
+ *   </SelectPopup>
+ * </SelectRoot>
+ * ```
+ */
+export const Grouped: Story = {
+  render: () => (
+    <SelectRoot>
+      <SelectTrigger>
+        <SelectValue placeholder="Select a pet" />
+      </SelectTrigger>
+      <SelectPopup>
+        <SelectGroup>
+          <SelectGroupLabel>Mammals</SelectGroupLabel>
+          <SelectItem value="cat">Cat</SelectItem>
+          <SelectItem value="dog">Dog</SelectItem>
+          <SelectItem value="rabbit">Rabbit</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectGroupLabel>Other</SelectGroupLabel>
+          <SelectItem value="bird">Bird</SelectItem>
+          <SelectItem value="fish">Fish</SelectItem>
+          <SelectItem value="reptile" disabled>
+            Reptile
+          </SelectItem>
+        </SelectGroup>
+      </SelectPopup>
+    </SelectRoot>
+  ),
+};
+
+export const Primitive: Story = {
+  render: () => (
+    <SelectRoot>
+      <SelectTrigger>
+        <SelectValue placeholder="Select a theme" />
+      </SelectTrigger>
+      <SelectPopup>
+        <SelectItem value="light">Light</SelectItem>
+        <SelectItem value="dark">Dark</SelectItem>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectGroupLabel>Advanced</SelectGroupLabel>
+          <SelectItem value="system">System</SelectItem>
+          <SelectItem value="custom" disabled>
+            Custom
+          </SelectItem>
+        </SelectGroup>
+      </SelectPopup>
+    </SelectRoot>
+  ),
+};