@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/tag/tag.stories.tsx

@@ -0,0 +1,198 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { BadgeCheck, CheckIcon, X } from "lucide-react";
+import { useState } from "react";
+import { Tag } from "../../components";
+import { Loader } from "../loader";
+
+/**
+ * Displays a tag or a component that looks like a tag.
+ * Supports the Base UI `render` prop to swap the root element (e.g. `<a>`, `<button>`)
+ * without losing styles or accessibility.
+ *
+ * See [Base UI useRender docs](https://base-ui.com/react/utils/use-render) for the full `render` prop API.
+ */
+const meta: Meta<typeof Tag> = {
+  title: "Components/Tag",
+  component: Tag,
+  parameters: { layout: "centered" },
+  args: {
+    children: "Tag",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tag>;
+
+export const Default: Story = {};
+
+/**
+ * Use the `variant` prop to change the visual style of the tag.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag>Default</Tag>
+      <Tag variant="secondary">Secondary</Tag>
+      <Tag variant="error">Error</Tag>
+      <Tag variant="success">Success</Tag>
+      <Tag variant="warning">Warning</Tag>
+      <Tag variant="outline">Outline</Tag>
+      <Tag variant="ghost">Ghost</Tag>
+      <Tag variant="link">Link</Tag>
+    </div>
+  ),
+};
+
+/**
+ * Compose icons directly as children — JSX order determines position.
+ *
+ * ```tsx
+ * <Tag>
+ *   <BadgeCheck />
+ *   Verified
+ * </Tag>
+ * ```
+ */
+export const WithIcon: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag>
+        <BadgeCheck />
+        Verified
+      </Tag>
+      <Tag variant="secondary">
+        8.5
+        <CheckIcon />
+      </Tag>
+      <Tag variant="error">
+        <X />
+        Rejected
+      </Tag>
+    </div>
+  ),
+};
+
+/**
+ * Drop a `Loader` as a child to indicate async state. Same composition
+ * rules as any other icon — JSX order determines position.
+ */
+export const WithSpinner: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag>
+        <Loader size="xs" className="text-primary-foreground" />
+        Processing
+      </Tag>
+      <Tag variant="secondary">
+        <Loader size="xs" variant="ghost" />
+        Loading
+      </Tag>
+    </div>
+  ),
+};
+
+/**
+ * Use the `render` prop to render the tag as a link or any other element.
+ * Styles and accessibility semantics from the target element are preserved.
+ *
+ * ```tsx
+ * <Tag render={<a href="/docs" />}>Documentation</Tag>
+ * ```
+ */
+export const Link: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag render={<a href="#" />}>Default link</Tag>
+      <Tag variant="outline" render={<a href="#" />}>
+        Outline link
+      </Tag>
+      <Tag variant="link" render={<a href="#" />}>
+        Underline link
+      </Tag>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Tag render={<a href="/docs" />}>Documentation</Tag>`,
+      },
+    },
+  },
+};
+
+/**
+ * The `closable` and `onClose` props were removed in v2. Dismissal is now
+ * achieved by composing a `<button>` child with the close icon.
+ *
+ * ```tsx
+ * <Tag>
+ *   Closable tag
+ *   <button type="button" onClick={onClose}>
+ *     <X className="size-3" />
+ *   </button>
+ * </Tag>
+ * ```
+ */
+const CLOSABLE_TAGS = [
+  { id: 1, label: "Default", variant: "default" },
+  { id: 2, label: "Secondary", variant: "secondary" },
+  { id: 3, label: "Outline", variant: "outline" },
+  { id: 4, label: "Error", variant: "error" },
+  { id: 5, label: "Ghost", variant: "ghost" },
+] as const;
+
+export const Closable: Story = {
+  render: () => {
+    const [visible, setVisible] = useState(CLOSABLE_TAGS.map((t) => t.id));
+
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-wrap items-center gap-2">
+          {CLOSABLE_TAGS.filter((t) => visible.includes(t.id)).map((t) => (
+            <Tag key={t.id} variant={t.variant}>
+              {t.label}
+              <button
+                type="button"
+                className="cursor-pointer"
+                onClick={() =>
+                  setVisible((prev) => prev.filter((id) => id !== t.id))
+                }
+              >
+                <X className="size-3" />
+              </button>
+            </Tag>
+          ))}
+        </div>
+        {visible.length < CLOSABLE_TAGS.length && (
+          <button
+            type="button"
+            className="text-xs text-muted-foreground underline underline-offset-4 self-start cursor-pointer"
+            onClick={() => setVisible(CLOSABLE_TAGS.map((t) => t.id))}
+          >
+            Reset
+          </button>
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Override colors with custom Tailwind classes via `className`.
+ * Classes merge with the variant defaults through `cn` (tailwind-merge).
+ */
+export const CustomColors: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Tag className="bg-blue-50 text-blue-700 dark:bg-blue-800/40 dark:text-blue-200">
+        Info
+      </Tag>
+      <Tag className="bg-purple-50 text-purple-700 dark:bg-purple-800/40 dark:text-purple-200">
+        Beta
+      </Tag>
+      <Tag className="bg-fuchsia-50 text-fuchsia-700 dark:bg-fuchsia-800/40 dark:text-fuchsia-200">
+        New
+      </Tag>
+    </div>
+  ),
+};

package/src/components/tag/tag.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Tag, tagVariants } from "../../components";
+
+describe("Badge component", () => {
+  it("should render children", () => {
+    render(<Tag>Lorem</Tag>);
+    const component = screen.getByText("Lorem");
+
+    expect(component).toBeInTheDocument();
+  });
+
+  it("should accept custom styles", () => {
+    render(<Tag className="custom-class">Lorem</Tag>);
+    const component = screen.getByText("Lorem");
+    expect(component).toHaveClass("custom-class");
+  });
+});
+
+describe("Tag variants", () => {
+  it.each([
+    ["default", "bg-primary"],
+    ["secondary", "bg-secondary"],
+    ["error", "bg-error/10"],
+    ["success", "bg-success/10"],
+    ["warning", "bg-warning/10"],
+    ["outline", "border-border"],
+    ["ghost", "hover:bg-muted"],
+    ["link", "text-primary"],
+  ] as const)("applies '%s' variant classes", (variant, cls) => {
+    render(<Tag variant={variant}>Label</Tag>);
+    expect(screen.getByText("Label")).toHaveClass(cls);
+  });
+});
+
+describe("Tag render prop", () => {
+  it("renders as anchor when render prop provided", () => {
+    render(<Tag render={<a href="/test" />}>Link tag</Tag>);
+    expect(screen.getByRole("link")).toBeInTheDocument();
+    expect(screen.getByRole("link")).toHaveTextContent("Link tag");
+  });
+});
+
+describe("Tag exports", () => {
+  it("exports tagVariants function", () => {
+    expect(tagVariants).toBeDefined();
+    expect(typeof tagVariants).toBe("function");
+  });
+
+  it("tagVariants returns class string", () => {
+    const cls = tagVariants({ variant: "success" });
+    expect(typeof cls).toBe("string");
+    expect(cls).toContain("bg-success/10");
+  });
+});

package/src/components/tag/tag.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib";
+
+const tagVariants = cva(
+  "group/tag inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-error aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        error:
+          "bg-error/10 text-error focus-visible:ring-error/20 dark:bg-error/20 dark:focus-visible:ring-error/40 [a]:hover:bg-error/20",
+        success:
+          "bg-success/10 text-success focus-visible:ring-success/20 dark:bg-success/20 dark:focus-visible:ring-success/40 [a]:hover:bg-success/20",
+        warning:
+          "bg-warning/10 text-warning focus-visible:ring-warning/20 dark:bg-warning/20 dark:focus-visible:ring-warning/40 [a]:hover:bg-warning/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Tag({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof tagVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(tagVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: "tag",
+      variant,
+    },
+  });
+}
+
+export { Tag, tagVariants };

package/src/components/textarea/index.ts

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

package/src/components/textarea/textarea.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Textarea } from "../../components";
+
+/**
+ * Multi-line text input. Shares border, focus, error, and disabled states with `Input`.
+ * Error state is driven by `aria-invalid` — pass it directly or wire via a `Field` context.
+ *
+ * `onValueChange` receives `(value: string, event: ChangeEvent<HTMLTextAreaElement>)` — not
+ * the native event directly. This matches the `Input` component API.
+ */
+const meta: Meta<typeof Textarea> = {
+  title: "Components/Textarea",
+  component: Textarea,
+  args: {
+    placeholder: "Type something...",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: "This field is disabled",
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+    defaultValue: "This field is read-only",
+  },
+};
+
+/**
+ * Error state is triggered by `aria-invalid`. In a full form, the `Field` component
+ * sets this automatically based on validation. You can also pass it directly.
+ */
+export const Error: Story = {
+  args: {
+    "aria-invalid": true,
+  },
+};
+
+/**
+ * `onValueChange` fires with `(value: string, event)` — the extracted string value comes
+ * first, matching the `Input` component signature. Use `value` + `onValueChange` for
+ * controlled usage; `defaultValue` for uncontrolled.
+ */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState<string>("");
+    return <Textarea value={value} onValueChange={setValue} />;
+  },
+};

package/src/components/textarea/textarea.test.tsx

@@ -0,0 +1,60 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Textarea } from "../../components";
+
+describe("Textarea component", () => {
+  it("renders a textarea element", () => {
+    render(<Textarea />);
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("sets data-slot='textarea'", () => {
+    render(<Textarea />);
+    expect(screen.getByRole("textbox")).toHaveAttribute(
+      "data-slot",
+      "textarea",
+    );
+  });
+
+  it("applies className", () => {
+    render(<Textarea className="custom-class" />);
+    expect(screen.getByRole("textbox")).toHaveClass("custom-class");
+  });
+
+  it("renders placeholder text", () => {
+    render(<Textarea placeholder="Enter text..." />);
+    expect(screen.getByPlaceholderText("Enter text...")).toBeInTheDocument();
+  });
+
+  it("fires onValueChange with value and event on input", async () => {
+    const onValueChange = vi.fn();
+    render(<Textarea onValueChange={onValueChange} />);
+    await userEvent.type(screen.getByRole("textbox"), "hi");
+    expect(onValueChange).toHaveBeenCalled();
+    const [value, event] = onValueChange.mock.calls[0];
+    expect(typeof value).toBe("string");
+    expect(event).toBeDefined();
+  });
+
+  it("does not crash when onValueChange is not provided", async () => {
+    render(<Textarea />);
+    await userEvent.type(screen.getByRole("textbox"), "hello");
+    expect(screen.getByRole("textbox")).toHaveValue("hello");
+  });
+
+  it("is disabled when disabled prop is passed", () => {
+    render(<Textarea disabled />);
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+
+  it("renders with defaultValue", () => {
+    render(<Textarea defaultValue="initial value" />);
+    expect(screen.getByRole("textbox")).toHaveValue("initial value");
+  });
+
+  it("passes name prop to underlying textarea", () => {
+    render(<Textarea name="my-field" />);
+    expect(screen.getByRole("textbox")).toHaveAttribute("name", "my-field");
+  });
+});

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Field } from "@base-ui/react/field";
+import {
+  type ChangeEvent,
+  type ComponentProps,
+  type ReactElement,
+} from "react";
+import { cn } from "../../lib";
+
+export type TextareaProps = Omit<ComponentProps<"textarea">, "onChange"> & {
+  onValueChange?: (
+    value: string,
+    event: ChangeEvent<HTMLTextAreaElement>,
+  ) => void;
+};
+
+export function Textarea({
+  className,
+  onValueChange,
+  ...props
+}: TextareaProps): ReactElement {
+  const handleChange = onValueChange
+    ? (event: ChangeEvent<HTMLTextAreaElement>) =>
+        onValueChange(event.target.value, event)
+    : undefined;
+
+  return (
+    <Field.Control
+      render={
+        <textarea
+          data-slot="textarea"
+          className={cn(
+            "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none transition-shadow placeholder:text-muted-foreground focus-visible:border-ring aria-invalid:border-error focus-visible:aria-invalid:ring-error/20 disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+          )}
+          onChange={handleChange}
+          {...props}
+        />
+      }
+    />
+  );
+}

package/src/components/timeline/index.ts

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