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

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,310 @@
+"use client";
+
+import { Dialog as DialogBase } from "@base-ui/react/dialog";
+import { X } from "lucide-react";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import { cn } from "../../lib";
+import { Button } from "../button";
+
+// ── Primitives ────────────────────────────────────────────────────────────────
+
+/** Context root. Holds open state and wraps all dialog parts. */
+export function DialogRoot(props: DialogBase.Root.Props) {
+  return <DialogBase.Root {...props} />;
+}
+
+/**
+ * Renders as its `render` element (defaults to `<button>`).
+ * Composes cleanly with `<Tooltip>` and other Base UI triggers on the same DOM element.
+ */
+export function DialogTrigger({
+  className,
+  ...props
+}: DialogBase.Trigger.Props) {
+  return (
+    <DialogBase.Trigger
+      data-slot="dialog-trigger"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/** Semi-transparent overlay rendered behind the popup. */
+export function DialogBackdrop({
+  className,
+  ...props
+}: DialogBase.Backdrop.Props) {
+  return (
+    <DialogBase.Backdrop
+      data-slot="dialog-backdrop"
+      forceRender
+      className={cn(
+        "fixed inset-0 z-overlay bg-black/50",
+        "transition-opacity duration-200",
+        "data-starting-style:opacity-0 data-ending-style:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Full-screen container that centers the popup. */
+export function DialogViewport({
+  className,
+  ...props
+}: DialogBase.Viewport.Props) {
+  return (
+    <DialogBase.Viewport
+      data-slot="dialog-viewport"
+      className={cn(
+        "fixed inset-0 z-overlay flex items-center justify-center p-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Dialog content container. Includes Portal, Backdrop and Viewport internally.
+ * Pass `portalProps` to configure the portal (e.g. a custom `container`).
+ * `classNames` styles the internal `backdrop`, `viewport` and `closeButton` slots.
+ */
+export function DialogPopup({
+  className,
+  classNames,
+  children,
+  hideClose,
+  portalProps,
+  ...props
+}: DialogBase.Popup.Props & {
+  hideClose?: boolean;
+  portalProps?: DialogBase.Portal.Props;
+  classNames?: {
+    /** Overlay rendered behind the dialog. */
+    backdrop?: string;
+    /** Full-screen container that centers the popup. */
+    viewport?: string;
+    /** Close (×) button rendered inside the popup. */
+    closeButton?: string;
+  };
+}) {
+  return (
+    <DialogBase.Portal {...portalProps}>
+      <DialogBackdrop className={classNames?.backdrop} />
+      <DialogViewport className={classNames?.viewport}>
+        <DialogBase.Popup
+          data-slot="dialog-popup"
+          className={cn(
+            "relative flex w-full max-w-lg flex-col gap-4 rounded-lg border bg-background p-6 shadow-lg",
+            "transition-[scale,opacity] duration-200 ease-out",
+            "data-starting-style:scale-95 data-starting-style:opacity-0",
+            "data-ending-style:scale-95 data-ending-style:opacity-0",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {!hideClose && (
+            <DialogBase.Close
+              aria-label="Cerrar"
+              className={cn("absolute right-2 top-2", classNames?.closeButton)}
+              render={<Button size="icon" variant="ghost" />}
+            >
+              <X className="size-4" />
+            </DialogBase.Close>
+          )}
+        </DialogBase.Popup>
+      </DialogViewport>
+    </DialogBase.Portal>
+  );
+}
+
+/** Closes the dialog and merges an optional `onClick` into the `render` element. */
+export function DialogClose({ className, ...props }: DialogBase.Close.Props) {
+  return (
+    <DialogBase.Close
+      data-slot="dialog-close"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/** Accessible title rendered as `<h2>`. Required for a11y. */
+export function DialogTitle({ className, ...props }: DialogBase.Title.Props) {
+  return (
+    <DialogBase.Title
+      data-slot="dialog-title"
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Supplementary description rendered below the title. */
+export function DialogDescription({
+  className,
+  ...props
+}: DialogBase.Description.Props) {
+  return (
+    <DialogBase.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+/** Layout wrapper for title and description. */
+export function DialogHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Layout wrapper for action buttons. */
+export function DialogFooter({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// ── Composite ─────────────────────────────────────────────────────────────────
+
+export type DialogProps = Omit<DialogBase.Root.Props, "children"> & {
+  /** Element that opens the dialog on click. Passed as Base UI `render` prop — no DOM wrapper added. */
+  trigger?: ReactElement;
+  /** Dialog heading. */
+  title?: ReactNode;
+  /** Supporting text rendered below the title. */
+  description?: ReactNode;
+  /** Body content rendered between the description and the footer. */
+  children?: ReactNode;
+  /** Content rendered inside the footer wrapper. */
+  footer?: ReactNode;
+  /** Called when the dialog closes. */
+  onClose?: () => void;
+  /** Hides the close (×) button inside the popup. */
+  hideClose?: boolean;
+  /** Styles the dialog popup panel. */
+  className?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Overlay rendered behind the dialog. */
+    backdrop?: string;
+    /** Full-screen container that centers the popup. */
+    viewport?: string;
+    /** Layout wrapper for title and description. */
+    header?: string;
+    /** Dialog heading. */
+    title?: string;
+    /** Supporting text below the title. */
+    description?: string;
+    /** Layout wrapper for footer content. */
+    footer?: string;
+    /** Close (×) button rendered inside the popup. */
+    closeButton?: string;
+  };
+};
+
+/**
+ * General-purpose dialog with optional trigger, title, description, body, and footer.
+ *
+ * The `trigger` prop uses Base UI's `render` prop — no wrapper element is added —
+ * making it composable with `<Tooltip>` at the primitive level.
+ * For full structural control, use the exported primitives directly.
+ *
+ * `className` styles the popup panel. `classNames` exposes the `backdrop`,
+ * `viewport`, `header`, `title`, `description`, `footer`, and `closeButton`
+ * slots for fine-grained tweaks without dropping to primitives.
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   trigger={<Button>Open settings</Button>}
+ *   title="Settings"
+ *   description="Manage your account preferences."
+ *   footer={<Button onClick={handleSave}>Save</Button>}
+ * >
+ *   <SettingsForm />
+ * </Dialog>
+ * ```
+ */
+export function Dialog({
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  onClose,
+  hideClose,
+  className,
+  classNames,
+  onOpenChange,
+  ...props
+}: DialogProps) {
+  return (
+    <DialogRoot
+      onOpenChange={(open, event) => {
+        if (!open) onClose?.();
+        onOpenChange?.(open, event);
+      }}
+      {...props}
+    >
+      {trigger && <DialogTrigger render={trigger} />}
+      <DialogPopup
+        className={className}
+        hideClose={hideClose}
+        classNames={{
+          backdrop: classNames?.backdrop,
+          viewport: classNames?.viewport,
+          closeButton: classNames?.closeButton,
+        }}
+      >
+        {(title || description) && (
+          <DialogHeader className={classNames?.header}>
+            {title && (
+              <DialogTitle className={classNames?.title}>{title}</DialogTitle>
+            )}
+            {description && (
+              <DialogDescription className={classNames?.description}>
+                {description}
+              </DialogDescription>
+            )}
+          </DialogHeader>
+        )}
+        {children}
+        {footer && (
+          <DialogFooter className={classNames?.footer}>{footer}</DialogFooter>
+        )}
+      </DialogPopup>
+    </DialogRoot>
+  );
+}
+
+// ── Primitive escape hatch ────────────────────────────────────────────────────
+
+export { DialogBase as DialogPrimitive };

package/src/components/dialog/index.ts

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

package/src/components/divider/divider.stories.tsx

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Divider } from "../../components";
+
+/**
+ * Visual separator between sections or inline elements.
+ *
+ * Built on the Base UI `Separator` primitive. Supports `orientation` (`horizontal` | `vertical`)
+ * and a `render` prop for polymorphic composition. The DOM element receives `data-orientation`
+ * which can be used as a CSS selector for conditional styles.
+ */
+const meta: Meta<typeof Divider> = {
+  title: "Components/Divider",
+  component: Divider,
+  args: {
+    orientation: "horizontal",
+  },
+  argTypes: {
+    orientation: {
+      control: "radio",
+      options: ["horizontal", "vertical"],
+    },
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-72 rounded-lg border p-4 text-sm">
+      <div className="flex items-center justify-between">
+        <span className="font-medium">Deployment #847</span>
+        <span className="text-xs text-green-500">● Live</span>
+      </div>
+      <Divider className="my-3" />
+      <div className="space-y-1.5 text-muted-foreground">
+        <div className="flex justify-between">
+          <span>Triggered by</span>
+          <span className="text-foreground">fbaigorria</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Branch</span>
+          <span className="text-foreground">develop</span>
+        </div>
+        <div className="flex justify-between">
+          <span>Duration</span>
+          <span className="text-foreground">1m 43s</span>
+        </div>
+      </div>
+      <Divider className="my-3" />
+      <div className="flex items-center justify-center gap-4 text-muted-foreground">
+        <span>2 warnings</span>
+        <Divider orientation="vertical" className="h-4" />
+        <span>0 errors</span>
+        <Divider orientation="vertical" className="h-4" />
+        <span>127 tests</span>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Default orientation. Renders a full-width 1px horizontal line via `data-[orientation=horizontal]`.
+ * Commonly used to separate named sections inside a panel or card.
+ */
+export const Horizontal: Story = {
+  render: () => (
+    <div className="w-72 rounded-lg border p-4 space-y-4">
+      <div>
+        <p className="text-sm font-medium">Profile</p>
+        <p className="text-xs text-muted-foreground">Franco Baigorria</p>
+      </div>
+      <Divider />
+      <div>
+        <p className="text-sm font-medium">Team</p>
+        <p className="text-xs text-muted-foreground">Engineering</p>
+      </div>
+      <Divider />
+      <div>
+        <p className="text-sm font-medium">Role</p>
+        <p className="text-xs text-muted-foreground">Frontend Architect</p>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * In vertical orientation the component uses `self-stretch` to fill the full height of
+ * the flex container. Wrapping in a `div` with `flex` and a defined height is the expected pattern.
+ */
+export const Vertical: Story = {
+  args: {
+    orientation: "vertical",
+  },
+  render: (args) => (
+    <div className="flex h-10 items-center gap-4">
+      <span className="text-sm">Section A</span>
+      <Divider {...args} />
+      <span className="text-sm">Section B</span>
+      <Divider {...args} />
+      <span className="text-sm">Section C</span>
+    </div>
+  ),
+};
+
+/**
+ * The `render` prop replaces the rendered DOM element. Useful for swapping semantics
+ * to `<hr>` or any other element without losing component styles.
+ *
+ * ```tsx
+ * <Divider render={<hr />} />
+ * ```
+ */
+export const Render: Story = {
+  render: (args) => (
+    <div className="w-64">
+      <Divider {...args} render={<hr />} />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      source: {
+        code: `<Divider render={<hr />} />`,
+      },
+    },
+  },
+};
+
+/**
+ * `className` accepts Tailwind classes to override color, thickness, or spacing.
+ * `data-[orientation=horizontal]` and `data-[orientation=vertical]` are available
+ * as CSS selectors for advanced conditional styles.
+ */
+export const Custom: Story = {
+  render: () => (
+    <div className="space-y-4 w-64">
+      <Divider className="bg-primary" />
+      <Divider className="bg-error" />
+      <Divider className="border-t border-dashed border-input bg-transparent" />
+    </div>
+  ),
+};

package/src/components/divider/divider.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Divider, SeparatorPrimitive } from "../../components";
+
+describe("Divider component", () => {
+  const testId = "divider";
+  it("should render correctly", () => {
+    render(<Divider data-testid={testId} />);
+    const divider = screen.getByTestId(testId);
+
+    expect(divider).toBeInTheDocument();
+    expect(divider).toHaveAttribute("aria-orientation", "horizontal");
+  });
+
+  it("should accept vertical orientation", () => {
+    render(<Divider orientation="vertical" data-testid={testId} />);
+    const divider = screen.getByTestId(testId);
+
+    expect(divider).toBeInTheDocument();
+    expect(divider).toHaveAttribute("aria-orientation", "vertical");
+  });
+
+  describe("data-slot", () => {
+    it("has data-slot separator", () => {
+      render(<Divider data-testid={testId} />);
+      expect(screen.getByTestId(testId)).toHaveAttribute(
+        "data-slot",
+        "separator",
+      );
+    });
+  });
+
+  describe("role", () => {
+    it("has role separator", () => {
+      render(<Divider />);
+      expect(screen.getByRole("separator")).toBeInTheDocument();
+    });
+  });
+
+  describe("className", () => {
+    it("applies className to the element", () => {
+      render(<Divider className="custom-divider" data-testid={testId} />);
+      expect(screen.getByTestId(testId)).toHaveClass("custom-divider");
+    });
+  });
+
+  describe("prop forwarding", () => {
+    it("forwards additional props", () => {
+      render(<Divider data-testid={testId} aria-label="section divider" />);
+      expect(screen.getByTestId(testId)).toHaveAttribute(
+        "aria-label",
+        "section divider",
+      );
+    });
+  });
+
+  describe("exports", () => {
+    it("exports SeparatorPrimitive", () => {
+      expect(SeparatorPrimitive).toBeDefined();
+    });
+  });
+});

package/src/components/divider/divider.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
+import type React from "react";
+import { cn } from "../../lib/cn";
+
+export function Divider({
+  className,
+  orientation = "horizontal",
+  ...props
+}: SeparatorPrimitive.Props): React.ReactElement {
+  return (
+    <SeparatorPrimitive
+      className={cn(
+        "shrink-0 bg-input data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:not-[[class^='h-']]:not-[[class*='_h-']]:self-stretch",
+        className,
+      )}
+      data-slot="separator"
+      orientation={orientation}
+      {...props}
+    />
+  );
+}
+
+export { SeparatorPrimitive };

package/src/components/divider/index.ts

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