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

package/package.json

@@ -1,124 +1,134 @@
-{
-  "name": "@boxcustodia/library",
-  "version": "2.0.0-alpha.2",
-  "type": "module",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "sideEffects": false,
-  "files": [
-    "/dist"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "format": "biome format --write .",
-    "lint": "biome check --write .",
-    "build": "tsc && vite build && npm run copy:theme",
-    "copy:theme": "copy .\\src\\styles\\theme.css .\\dist || cp ./src/styles/theme.css ./dist",
-    "test": "vitest run",
-    "test-watch": "vitest",
-    "test:ui": "vitest --ui",
-    "pre-storybook": "node scripts/toggle-vite-config.js disable",
-    "post-storybook": "node scripts/toggle-vite-config.js enable",
-    "storybook": "storybook dev -p 6006",
-    "storybook:build": "npm run pre-storybook && NODE_OPTIONS=--max-old-space-size=4096 storybook build && npm run post-storybook",
-    "storybook:deploy": "npm run storybook:build && netlify deploy --prod --dir=storybook-static",
-    "dev": "storybook dev -p 6006",
-    "prepare-husky": "husky",
-    "generate": "plop",
-    "commit": "npx cz",
-    "pre-commit": "lint-staged",
-    "release": "npm run build && npx standard-version && git push --follow-tags origin develop && npm publish && npm run storybook:deploy",
-    "release:push": "npm run build && git push --follow-tags origin develop && npm publish",
-    "release:next": "npm run build && npx standard-version --prerelease alpha && git push --follow-tags origin v2 && npm publish --tag next",
-    "release:canary": "npm run build && npx standard-version --prerelease canary && git push --follow-tags origin develop && npm publish --tag canary",
-    "release:minor": "npm run build && npx standard-version --release-as minor && git push --follow-tags origin develop && npm publish",
-    "release:patch": "npm run build && npx standard-version --release-as patch && git push --follow-tags origin develop && npm publish",
-    "chromatic": "npx chromatic --project-token=chpt_ee5385eee6c69fb --build-script-name=storybook:build"
-  },
-  "lint-staged": {
-    "*": [
-      "biome check --write --no-errors-on-unmatched --files-ignore-unknown=true"
-    ]
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "description": "",
-  "dependencies": {
-    "@base-ui/react": "^1.4.0",
-    "@biomejs/biome": "^2.3.8",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-presence": "^1.1.5",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "1.2.8",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
-    "react-aria-components": "^1.13.0",
-    "vite-tsconfig-paths": "^6.0.1"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^5.1.2",
-    "@faker-js/faker": "^10.1.0",
-    "@hookform/resolvers": "^5.2.2",
-    "@storybook/addon-docs": "10.3.5",
-    "@storybook/addon-links": "10.3.5",
-    "@storybook/addon-mcp": "^0.6.0",
-    "@storybook/addon-onboarding": "10.3.5",
-    "@storybook/react-vite": "10.3.5",
-    "@tailwindcss/vite": "^4.1.18",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/lodash": "^4.17.21",
-    "@types/node": "^25.0.2",
-    "@types/react": "19.2.7",
-    "@types/react-dom": "19.2.3",
-    "@types/react-transition-group": "^4.4.12",
-    "@vitejs/plugin-react": "^5.1.2",
-    "autoprefixer": "^10.4.23",
-    "bunx": "^0.1.0",
-    "chromatic": "^16.2.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cmdk": "^1.1.1",
-    "commitizen": "^4.3.1",
-    "cz-conventional-changelog": "^3.3.0",
-    "date-fns": "^4.1.0",
-    "husky": "^9.1.7",
-    "jsdom": "^27.3.0",
-    "lint-staged": "^16.2.7",
-    "lucide-react": "0.561.0",
-    "plop": "^4.0.4",
-    "react-arborist": "^3.4.3",
-    "react-hook-form": "^7.68.0",
-    "react-markdown": "^10.1.0",
-    "react-transition-group": "^4.4.5",
-    "standard-version": "^9.5.0",
-    "storybook": "10.3.5",
-    "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.1.18",
-    "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.0",
-    "vite-plugin-dts": "^4.5.4",
-    "vitest": "^4.0.15",
-    "zod": "^4.2.0",
-    "zustand": "^5.0.9"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  }
-}
+{
+  "name": "@boxcustodia/library",
+  "version": "2.0.0-alpha.20",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./styles": "./dist/index.css",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "/dist",
+    "/src",
+    "!/src/__doc__"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "format": "biome format --write .",
+    "lint": "biome check --write --unsafe .",
+    "build": "tsc && vite build && npm run copy:theme",
+    "copy:theme": "node -e \"const fs=require('fs'); fs.copyFileSync('./src/styles/theme.css','./dist/theme.css'); fs.copyFileSync('./src/styles/library.css','./dist/index.css');\"",
+    "build:css": "tailwindcss -i src/styles/components.css -o dist/components.css --minify",
+    "test": "vitest run",
+    "test-watch": "vitest",
+    "test:ui": "vitest --ui",
+    "pre-storybook": "node scripts/toggle-vite-config.js disable",
+    "post-storybook": "node scripts/toggle-vite-config.js enable",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "npm run pre-storybook && NODE_OPTIONS=--max-old-space-size=4096 storybook build && npm run post-storybook",
+    "storybook:deploy": "npm run storybook:build && netlify deploy --prod --dir=storybook-static",
+    "dev": "storybook dev -p 6006",
+    "prepare-husky": "husky",
+    "generate": "plop",
+    "commit": "npx cz",
+    "pre-commit": "lint-staged",
+    "release": "npm run build && npx standard-version && git push --follow-tags origin develop && npm publish && npm run storybook:deploy",
+    "release:push": "npm run build && git push --follow-tags origin develop && npm publish",
+    "release:next": "npm run build && npx standard-version --prerelease alpha && git push --follow-tags origin v2 && npm publish --tag next && npm run chromatic",
+    "release:next:publish": "npm publish --tag next",
+    "release:canary": "npm run build && npx standard-version --prerelease canary && git push --follow-tags origin develop && npm publish --tag canary",
+    "release:minor": "npm run build && npx standard-version --release-as minor && git push --follow-tags origin develop && npm publish",
+    "release:patch": "npm run build && npx standard-version --release-as patch && git push --follow-tags origin develop && npm publish",
+    "chromatic": "npx chromatic --project-token=chpt_ee5385eee6c69fb --build-script-name=storybook:build"
+  },
+  "lint-staged": {
+    "*": [
+      "biome check --write --unsafe --no-errors-on-unmatched --files-ignore-unknown=true"
+    ]
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@base-ui/react": "^1.4.0",
+    "@headless-tree/core": "^1.7.0",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "0.561.0",
+    "react-day-picker": "^9.14.0",
+    "react-dropzone": "^15.0.0",
+    "react-hook-form": "^7.68.0",
+    "tailwind-merge": "^3.4.0",
+    "tw-animate-css": "^1.2.9",
+    "zod": "^4.2.0",
+    "zustand": "^5.0.9"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.8",
+    "@chromatic-com/storybook": "^5.1.2",
+    "@faker-js/faker": "^10.1.0",
+    "@headless-tree/react": "^1.7.0",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-links": "10.3.5",
+    "@storybook/addon-mcp": "^0.6.0",
+    "@storybook/addon-onboarding": "10.3.5",
+    "@storybook/react-vite": "10.3.5",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^25.0.2",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "^4.1.7",
+    "chromatic": "^16.2.0",
+    "commitizen": "^4.3.1",
+    "cz-conventional-changelog": "^3.3.0",
+    "husky": "^9.1.7",
+    "jsdom": "^27.3.0",
+    "lint-staged": "^16.2.7",
+    "plop": "^4.0.4",
+    "react-markdown": "^10.1.0",
+    "rollup-plugin-preserve-directives": "^0.4.0",
+    "standard-version": "^9.5.0",
+    "storybook": "10.3.5",
+    "storybook-addon-tag-badges": "^3.1.0",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^6.0.1",
+    "vitest": "^4.1.7"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "trustedDependencies": [
+    "@parcel/watcher",
+    "esbuild"
+  ]
+}

package/src/components/accordion/accordion.stories.tsx

@@ -0,0 +1,143 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from "./accordion";
+
+const richContent = (
+  <span>
+    Content can include <strong>rich markup</strong> like bold text, links, or
+    any React node.
+  </span>
+);
+
+/**
+ * Collapsible sections that expand/collapse to show or hide content.
+ * Use the composite `Accordion` for simple item lists, or compose primitives
+ * (`AccordionRoot`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`) for
+ * full control. Supports single or multiple open panels via `multiple`.
+ */
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Accordion",
+  component: Accordion,
+  args: {
+    items: [
+      {
+        value: "item-1",
+        trigger: "What is this library?",
+        content:
+          "A collection of accessible, customizable UI components built on Base UI and styled with Tailwind CSS.",
+      },
+      {
+        value: "item-2",
+        trigger: "Is it open source?",
+        content: richContent,
+      },
+      {
+        value: "item-3",
+        trigger: "Can I customize the theme?",
+        content:
+          "Override any token via @theme in your CSS after importing the library stylesheet.",
+      },
+    ],
+  },
+  tags: ["new"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Default: Story = {};
+
+/**
+ * `className` styles the accordion root. `classNames` exposes the `item`,
+ * `trigger`, and `content` slots for fine-grained styling.
+ *
+ * For structural changes (extra slots, custom layouts) use the primitives.
+ */
+export const WithClassNames: Story = {
+  args: {
+    className: "max-w-md gap-2",
+    classNames: {
+      item: "rounded-md border border-input px-3 not-last:border-b",
+      trigger: "py-3 text-base",
+      content: "text-muted-foreground",
+    },
+  },
+};
+
+/**
+ * Allow multiple panels to be open simultaneously via `multiple`.
+ */
+export const Multiple: Story = {
+  args: {
+    multiple: true,
+    defaultValue: ["item-1", "item-2"],
+  },
+};
+
+/**
+ * Controlled accordion — external state drives which panel is open.
+ */
+export const Controlled: Story = {
+  render: (args) => {
+    const [value, setValue] = React.useState<string[]>(["item-1"]);
+    return <Accordion {...args} value={value} onValueChange={setValue} />;
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    items: [
+      {
+        value: "item-1",
+        trigger: "Available section",
+        content: "This section can be opened.",
+      },
+      {
+        value: "item-2",
+        trigger: "Disabled section",
+        content: "This section is disabled.",
+        disabled: true,
+      },
+    ],
+  },
+};
+
+/**
+ * Build accordion manually using primitives when you need custom slots,
+ * additional markup between items, or conditional rendering.
+ */
+export const Primitive: Story = {
+  render: () => (
+    <AccordionRoot defaultValue={["item-1"]}>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>What is this library?</AccordionTrigger>
+        <AccordionContent>
+          A collection of accessible, customizable UI components.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it open source?</AccordionTrigger>
+        <AccordionContent>{richContent}</AccordionContent>
+      </AccordionItem>
+    </AccordionRoot>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<AccordionRoot defaultValue={["item-1"]}>
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Question</AccordionTrigger>
+    <AccordionContent>Answer</AccordionContent>
+  </AccordionItem>
+</AccordionRoot>`,
+      },
+    },
+  },
+};

package/src/components/accordion/accordion.test.tsx

@@ -0,0 +1,117 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionRoot,
+  AccordionTrigger,
+} from "../../components";
+import { click } from "../../utils/tests";
+
+const items = [
+  { value: "item-1", trigger: "First question", content: "First answer" },
+  { value: "item-2", trigger: "Second question", content: "Second answer" },
+];
+
+describe("Accordion component", () => {
+  it("should render correctly", () => {
+    render(<Accordion data-testid="Accordion" items={items} />);
+    const component = screen.getByTestId("Accordion");
+    expect(component).toBeInTheDocument();
+  });
+
+  it("should show all triggers", () => {
+    render(<Accordion items={items} />);
+
+    expect(screen.getByText(/first question/i)).toBeInTheDocument();
+    expect(screen.getByText(/second question/i)).toBeInTheDocument();
+  });
+
+  it("should open a panel when its trigger is clicked", () => {
+    render(<Accordion items={items} />);
+
+    const trigger = screen.getByRole("button", { name: /first question/i });
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    click(trigger);
+
+    waitFor(() => {
+      expect(trigger).toHaveAttribute("aria-expanded", "true");
+      expect(screen.getByText("First answer")).toBeVisible();
+    });
+  });
+
+  it("should render disabled items as disabled", () => {
+    render(
+      <Accordion
+        items={[
+          { value: "item-1", trigger: "Available", content: "Open me" },
+          {
+            value: "item-2",
+            trigger: "Disabled",
+            content: "Cannot open",
+            disabled: true,
+          },
+        ]}
+      />,
+    );
+
+    const disabledTrigger = screen.getByRole("button", { name: /disabled/i });
+    expect(disabledTrigger).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should be controlled", () => {
+    const mock = vi.fn();
+    render(<Accordion items={items} value={["item-1"]} onValueChange={mock} />);
+
+    const secondTrigger = screen.getByRole("button", {
+      name: /second question/i,
+    });
+    click(secondTrigger);
+
+    waitFor(() => {
+      expect(mock).toHaveBeenCalled();
+    });
+  });
+
+  it("should apply classNames to each slot", () => {
+    render(
+      <Accordion
+        items={items}
+        className="root-class"
+        classNames={{
+          item: "item-class",
+          trigger: "trigger-class",
+          content: "content-class",
+        }}
+      />,
+    );
+
+    expect(document.querySelector('[data-slot="accordion"]')).toHaveClass(
+      "root-class",
+    );
+    expect(document.querySelector('[data-slot="accordion-item"]')).toHaveClass(
+      "item-class",
+    );
+    expect(
+      document.querySelector('[data-slot="accordion-trigger"]'),
+    ).toHaveClass("trigger-class");
+  });
+
+  it("should render correctly using primitives", () => {
+    render(
+      <AccordionRoot defaultValue={["item-1"]}>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Primitive trigger</AccordionTrigger>
+          <AccordionContent>Primitive content</AccordionContent>
+        </AccordionItem>
+      </AccordionRoot>,
+    );
+
+    expect(screen.getByText(/primitive trigger/i)).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /primitive trigger/i }),
+    ).toHaveAttribute("aria-expanded", "true");
+  });
+});

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { type ReactNode } from "react";
+
+import { cn } from "../../lib";
+
+export function AccordionRoot({
+  className,
+  ...props
+}: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+export function AccordionItem({
+  className,
+  ...props
+}: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+export function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <ChevronUpIcon
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+export function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="h-(--accordion-panel-height) overflow-hidden text-sm transition-[height] duration-150 ease-out data-starting-style:h-0 data-ending-style:h-0"
+      {...props}
+    >
+      <div
+        className={cn(
+          "pb-2.5 pt-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+interface AccordionItem {
+  value: string;
+  trigger: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+interface AccordionProps
+  extends Omit<AccordionPrimitive.Root.Props, "children" | "className"> {
+  items: AccordionItem[];
+  /** Styles the accordion root container. */
+  className?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Each collapsible item wrapper. */
+    item?: string;
+    /** Trigger button that toggles the item. */
+    trigger?: string;
+    /** Panel that contains the item content. */
+    content?: string;
+  };
+}
+
+export function Accordion({
+  items,
+  className,
+  classNames,
+  ...props
+}: AccordionProps) {
+  return (
+    <AccordionRoot className={className} {...props}>
+      {items.map(({ value, trigger, content, disabled }) => (
+        <AccordionItem
+          key={value}
+          value={value}
+          disabled={disabled}
+          className={classNames?.item}
+        >
+          <AccordionTrigger className={classNames?.trigger}>
+            {trigger}
+          </AccordionTrigger>
+          <AccordionContent className={classNames?.content}>
+            {content}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </AccordionRoot>
+  );
+}
+
+export { AccordionPrimitive };

package/src/components/accordion/index.ts

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