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

package/src/components/password/password.test.tsx

@@ -0,0 +1,129 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Password } from "../../components";
+
+describe("Password", () => {
+  describe("rendering", () => {
+    it("renders with data-slot='password'", () => {
+      render(<Password />);
+      expect(document.querySelector('[data-slot="password"]')).toBeTruthy();
+    });
+
+    it("renders toggle button with data-slot='password-toggle'", () => {
+      render(<Password />);
+      expect(
+        document.querySelector('[data-slot="password-toggle"]'),
+      ).toBeTruthy();
+    });
+
+    it("defaults to type='password'", () => {
+      render(<Password />);
+      expect(document.querySelector("input")).toHaveAttribute(
+        "type",
+        "password",
+      );
+    });
+  });
+
+  describe("toggle visibility", () => {
+    it("reveals password on toggle click", async () => {
+      render(<Password />);
+      await userEvent.click(
+        document.querySelector(
+          '[data-slot="password-toggle"]',
+        ) as HTMLButtonElement,
+      );
+      expect(document.querySelector("input")).toHaveAttribute("type", "text");
+    });
+
+    it("hides password on second toggle click", async () => {
+      render(<Password />);
+      const toggle = document.querySelector(
+        '[data-slot="password-toggle"]',
+      ) as HTMLButtonElement;
+      await userEvent.click(toggle);
+      await userEvent.click(toggle);
+      expect(document.querySelector("input")).toHaveAttribute(
+        "type",
+        "password",
+      );
+    });
+
+    it("fires onShow when revealing password", async () => {
+      const onShow = vi.fn();
+      render(<Password onShow={onShow} />);
+      await userEvent.click(
+        document.querySelector(
+          '[data-slot="password-toggle"]',
+        ) as HTMLButtonElement,
+      );
+      expect(onShow).toHaveBeenCalledTimes(1);
+    });
+
+    it("fires onHide when concealing password", async () => {
+      const onHide = vi.fn();
+      render(<Password onHide={onHide} />);
+      const toggle = document.querySelector(
+        '[data-slot="password-toggle"]',
+      ) as HTMLButtonElement;
+      await userEvent.click(toggle);
+      await userEvent.click(toggle);
+      expect(onHide).toHaveBeenCalledTimes(1);
+    });
+
+    it("disables toggle when toggleable=false", () => {
+      render(<Password toggleable={false} />);
+      expect(
+        document.querySelector('[data-slot="password-toggle"]'),
+      ).toBeDisabled();
+    });
+  });
+
+  describe("classNames", () => {
+    it("applies className to root", () => {
+      render(<Password className="custom-root" />);
+      expect(document.querySelector('[data-slot="password"]')).toHaveClass(
+        "custom-root",
+      );
+    });
+
+    it("applies classNames.input to input element", () => {
+      render(<Password classNames={{ input: "custom-input" }} />);
+      expect(document.querySelector("input")).toHaveClass("custom-input");
+    });
+
+    it("applies classNames.toggle to toggle button", () => {
+      render(<Password classNames={{ toggle: "custom-toggle" }} />);
+      expect(
+        document.querySelector('[data-slot="password-toggle"]'),
+      ).toHaveClass("custom-toggle");
+    });
+  });
+
+  describe("onValueChange", () => {
+    it("fires onValueChange with input value on change", async () => {
+      const onValueChange = vi.fn();
+      render(<Password onValueChange={onValueChange} />);
+      await userEvent.type(document.querySelector("input")!, "ab");
+      expect(onValueChange).toHaveBeenCalledWith("a", expect.any(Object));
+    });
+  });
+
+  describe("custom icons", () => {
+    it("renders custom showIcon when password hidden", () => {
+      render(<Password showIcon={<span data-testid="show-icon" />} />);
+      expect(screen.getByTestId("show-icon")).toBeTruthy();
+    });
+
+    it("renders custom hideIcon after toggle", async () => {
+      render(<Password hideIcon={<span data-testid="hide-icon" />} />);
+      await userEvent.click(
+        document.querySelector(
+          '[data-slot="password-toggle"]',
+        ) as HTMLButtonElement,
+      );
+      expect(screen.getByTestId("hide-icon")).toBeTruthy();
+    });
+  });
+});

package/src/components/password/password.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Eye, EyeOff } from "lucide-react";
+import { type ChangeEvent, type ReactNode } from "react";
+import { useBoolean } from "../../hooks";
+import { cn } from "../../lib";
+import { InputPrimitive, type InputProps } from "../input/input";
+
+export type PasswordProps = Omit<InputProps, "unstyled" | "nativeInput"> & {
+  showIcon?: ReactNode;
+  hideIcon?: ReactNode;
+  onShow?: () => void;
+  onHide?: () => void;
+  toggleable?: boolean;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Native `<input>` element (transparent inside the wrapper). */
+    input?: string;
+    /** Show/hide toggle button on the right. */
+    toggle?: string;
+  };
+};
+
+export function Password({
+  className,
+  showIcon = <Eye className="h-4 w-4" />,
+  hideIcon = <EyeOff className="h-4 w-4" />,
+  onShow,
+  onHide,
+  toggleable = true,
+  onValueChange,
+  classNames,
+  ...rest
+}: PasswordProps) {
+  const [showPassword, { toggle: toggleShowPassword }] = useBoolean(false);
+
+  const handleToggle = () => {
+    toggleShowPassword();
+    showPassword ? onHide?.() : onShow?.();
+  };
+
+  const handleChange = onValueChange
+    ? (event: ChangeEvent<HTMLInputElement>) =>
+        onValueChange(event.target.value, event)
+    : undefined;
+
+  return (
+    <div
+      className={cn(
+        "relative inline-flex h-8 w-full items-center text-sm",
+        "rounded-md border border-input bg-background transition-shadow",
+        "focus-within:border-ring",
+        "aria-invalid:border-error focus-within:aria-invalid:ring-error/20",
+        "has-aria-invalid:border-error focus-within:has-aria-invalid:ring-error/20",
+        "has-disabled:cursor-not-allowed has-disabled:opacity-50",
+        "[&::-ms-clear]:hidden [&::-ms-reveal]:hidden",
+        className,
+      )}
+      data-slot="password"
+    >
+      <InputPrimitive
+        {...rest}
+        onChange={handleChange}
+        type={showPassword ? "text" : "password"}
+        className={cn(
+          "min-w-0 flex-1 bg-transparent pl-3 outline-none",
+          "placeholder:text-muted-foreground",
+          "disabled:cursor-not-allowed",
+          classNames?.input,
+        )}
+      />
+      <button
+        data-slot="password-toggle"
+        type="button"
+        onClick={handleToggle}
+        disabled={!toggleable}
+        className={cn(
+          "flex shrink-0 items-center px-2 text-muted-foreground transition-colors",
+          "hover:text-foreground",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          classNames?.toggle,
+        )}
+      >
+        {showPassword ? hideIcon : showIcon}
+      </button>
+    </div>
+  );
+}
+
+// ── Backward-compat alias ─────────────────────────────────────────────────────
+
+export { Password as PasswordRoot };
+export type { PasswordProps as PasswordRootProps };

package/src/components/popover/index.ts

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

package/src/components/popover/popover.stories.tsx

@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { XIcon } from "lucide-react";
+import { useState } from "storybook/preview-api";
+import { Button, Input, Label } from "../../components";
+import {
+  Popover,
+  PopoverClose,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+} from ".";
+
+/**
+ * Floating panel anchored to a trigger element. Built on
+ * [Base UI Popover](https://base-ui.com/react/components/popover.md).
+ *
+ * Provides two APIs: `Popover` (composite, single-component) and primitives
+ * (`PopoverRoot` + `PopoverTrigger` + `PopoverPopup`) for full layout control.
+ *
+ * `trigger` accepts a `ReactElement` passed as the `render` prop of
+ * `PopoverTrigger` — no wrapper is added. Style the popup via `className`
+ * (the visual root) or use `classNames.viewport` for the inner viewport.
+ * `title` and `description` render `PopoverTitle` / `PopoverDescription`
+ * with automatic ARIA wiring. Supports controlled state via `open` /
+ * `onOpenChange` and imperative control via `PopoverCreateHandle`.
+ */
+const meta: Meta<typeof Popover> = {
+  title: "Components/Popover",
+  component: Popover,
+  argTypes: {
+    classNames: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Popover {...args} trigger={<Button variant="outline">Open</Button>}>
+      Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos
+      de texto. Lorem Ipsum ha sido el texto de relleno estándar de las
+      industrias desde el año 1500.
+    </Popover>
+  ),
+};
+
+/**
+ * `className` estila el popup (root visual). `classNames` expone el slot
+ * `viewport` para el contenedor interno con padding y overflow.
+ */
+export const WithClassNames: Story = {
+  render: (args) => (
+    <Popover
+      {...args}
+      className="border-primary"
+      classNames={{ viewport: "py-6" }}
+      trigger={<Button variant="outline">Open</Button>}
+    >
+      Custom popup + viewport styling.
+    </Popover>
+  ),
+};
+
+/**
+ * `tooltipStyle` renders the popup compact — smaller padding, `rounded-md`, and `w-fit`.
+ * Intended for brief contextual hints that don't need a full panel.
+ */
+export const TooltipStyle: Story = {
+  render: () => (
+    <Popover trigger={<Button variant="outline">Hint</Button>} tooltipStyle>
+      Contextual tooltip content
+    </Popover>
+  ),
+};
+
+/**
+ * `side` and `align` control popup placement relative to the trigger.
+ * `sideOffset` and `alignOffset` fine-tune the gap and shift in pixels.
+ */
+export const Positioning: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      {(["top", "bottom", "left", "right"] as const).map((side) => (
+        <Popover
+          key={side}
+          side={side}
+          trigger={<Button variant="outline">{side}</Button>}
+        >
+          Anchored to {side}
+        </Popover>
+      ))}
+    </div>
+  ),
+};
+
+export const WithTitleAndDescription: Story = {
+  render: () => (
+    <Popover
+      trigger={<Button variant="outline">Update Profile</Button>}
+      title="Update Profile"
+      description="Edit your profile details below."
+    >
+      <div className="space-y-3">
+        <div className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="firstName">First Name</Label>
+          <Input
+            id="firstName"
+            defaultValue="John"
+            className="col-span-2 h-8"
+          />
+        </div>
+        <div className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="lastName">Last Name</Label>
+          <Input id="lastName" defaultValue="Doe" className="col-span-2 h-8" />
+        </div>
+      </div>
+    </Popover>
+  ),
+};
+
+/**
+ * `open` and `onOpenChange` enable external state control. Use when another element
+ * drives the popover's visibility without the trigger being part of the popover itself.
+ */
+export const Controlled: Story = {
+  render: function Render(args) {
+    const [open, setOpen] = useState(false);
+    return (
+      <Popover
+        {...args}
+        open={open}
+        onOpenChange={(value: boolean) => setOpen(value)}
+        trigger={<Button variant="outline">Open</Button>}
+      >
+        This popover is controlled externally via <code>open</code> /{" "}
+        <code>onOpenChange</code>.
+      </Popover>
+    );
+  },
+  args: {
+    open: false,
+  },
+};
+
+/**
+ * `matchTriggerWidth` makes the popup as wide as its trigger using Base UI's
+ * `--anchor-width` CSS variable on the positioner. The trigger width drives the
+ * popup width — widening or narrowing the trigger changes the popup accordingly.
+ *
+ * Useful for dropdowns or comboboxes where content should visually align with the
+ * field it belongs to. Incompatible with `tooltipStyle` (which forces `w-fit`).
+ */
+export const MatchTriggerWidth: Story = {
+  render: () => (
+    <div className="flex flex-col items-start gap-6">
+      <Popover
+        matchTriggerWidth
+        trigger={
+          <Button variant="outline" className="w-40">
+            Narrow
+          </Button>
+        }
+      >
+        This popup matches the trigger width.
+      </Popover>
+      <Popover
+        matchTriggerWidth
+        trigger={
+          <Button variant="outline" className="w-80">
+            Wide
+          </Button>
+        }
+      >
+        This popup also matches its trigger width.
+      </Popover>
+    </div>
+  ),
+};
+
+/**
+ * Compose primitives directly for full layout and slot control.
+ *
+ * `PopoverTrigger` and `PopoverClose` accept a `render` prop to replace the default `<button>`.
+ * `PopoverTitle` and `PopoverDescription` wire `aria-labelledby` / `aria-describedby` on the
+ * popup automatically.
+ *
+ * ```tsx
+ * <PopoverRoot>
+ *   <PopoverTrigger render={<Button variant="outline" />}>Open</PopoverTrigger>
+ *   <PopoverPopup className="w-80">
+ *     <PopoverClose
+ *       aria-label="Close"
+ *       className="absolute end-2 top-2"
+ *       render={<Button size="icon" variant="ghost"><XIcon /></Button>}
+ *     />
+ *     <PopoverTitle>Title</PopoverTitle>
+ *     <PopoverDescription>Description</PopoverDescription>
+ *     <PopoverClose render={<Button variant="outline" />}>Dismiss</PopoverClose>
+ *   </PopoverPopup>
+ * </PopoverRoot>
+ * ```
+ */
+export const Primitive: Story = {
+  render: () => (
+    <PopoverRoot>
+      <PopoverTrigger render={<Button variant="outline" />}>
+        Open Popover
+      </PopoverTrigger>
+      <PopoverPopup className="w-80">
+        <PopoverClose
+          aria-label="Close"
+          className="absolute end-2 top-2"
+          render={
+            <Button size="icon" variant="ghost">
+              <XIcon />
+            </Button>
+          }
+        />
+        <div className="mb-2">
+          <PopoverTitle className="text-base">Notifications</PopoverTitle>
+          <PopoverDescription>
+            You are all caught up. Good job!
+          </PopoverDescription>
+        </div>
+        <PopoverClose render={<Button variant="outline" />}>
+          Dismiss
+        </PopoverClose>
+      </PopoverPopup>
+    </PopoverRoot>
+  ),
+};

package/src/components/popover/popover.test.tsx

@@ -0,0 +1,175 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverDescription,
+  PopoverPopup,
+  PopoverPrimitive,
+  PopoverRoot,
+  PopoverTitle,
+  PopoverTrigger,
+} from "../../components";
+
+describe("Popover primitives", () => {
+  it("PopoverTrigger renders with data-slot='popover-trigger'", () => {
+    render(
+      <PopoverRoot>
+        <PopoverTrigger>Open</PopoverTrigger>
+        <PopoverPopup>Content</PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-trigger"]'),
+    ).toBeTruthy();
+  });
+
+  it("PopoverPopup renders data-slot='popover-popup' when open", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>Content</PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(document.querySelector('[data-slot="popover-popup"]')).toBeTruthy();
+  });
+
+  it("PopoverPopup renders data-slot='popover-viewport' when open", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>Content</PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-viewport"]'),
+    ).toBeTruthy();
+  });
+
+  it("PopoverPopup renders data-slot='popover-positioner' when open", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>Content</PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-positioner"]'),
+    ).toBeTruthy();
+  });
+
+  it("PopoverTitle renders with data-slot='popover-title'", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>
+          <PopoverTitle>Title</PopoverTitle>
+        </PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(document.querySelector('[data-slot="popover-title"]')).toBeTruthy();
+  });
+
+  it("PopoverDescription renders with data-slot='popover-description'", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>
+          <PopoverDescription>Desc</PopoverDescription>
+        </PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-description"]'),
+    ).toBeTruthy();
+  });
+
+  it("PopoverClose renders with data-slot='popover-close'", () => {
+    render(
+      <PopoverRoot defaultOpen>
+        <PopoverPopup>
+          <PopoverClose>Close</PopoverClose>
+        </PopoverPopup>
+      </PopoverRoot>,
+    );
+    expect(document.querySelector('[data-slot="popover-close"]')).toBeTruthy();
+  });
+});
+
+describe("Popover composite", () => {
+  it("renders children when defaultOpen", () => {
+    render(
+      <Popover defaultOpen>
+        <span data-testid="content">Content</span>
+      </Popover>,
+    );
+    expect(screen.getByTestId("content")).toBeTruthy();
+  });
+
+  it("renders title when provided", () => {
+    render(
+      <Popover defaultOpen title="My Title">
+        Content
+      </Popover>,
+    );
+    expect(screen.getByText("My Title")).toBeTruthy();
+  });
+
+  it("renders description when provided", () => {
+    render(
+      <Popover defaultOpen description="My Desc">
+        Content
+      </Popover>,
+    );
+    expect(screen.getByText("My Desc")).toBeTruthy();
+  });
+
+  it("does not render title/description wrapper when neither provided", () => {
+    render(
+      <Popover defaultOpen>
+        <span data-testid="content">Content</span>
+      </Popover>,
+    );
+    expect(document.querySelector('[data-slot="popover-title"]')).toBeNull();
+  });
+
+  it("opens on trigger click", async () => {
+    render(
+      <Popover trigger={<button>Open</button>}>
+        <span data-testid="popup-content">Hello</span>
+      </Popover>,
+    );
+    expect(screen.queryByTestId("popup-content")).toBeNull();
+    await userEvent.click(screen.getByRole("button", { name: "Open" }));
+    expect(screen.getByTestId("popup-content")).toBeTruthy();
+  });
+
+  it("applies className to popup", () => {
+    render(
+      <Popover defaultOpen className="custom-popup">
+        Content
+      </Popover>,
+    );
+    expect(document.querySelector('[data-slot="popover-popup"]')).toHaveClass(
+      "custom-popup",
+    );
+  });
+
+  it("applies classNames.viewport to viewport", () => {
+    render(
+      <Popover defaultOpen classNames={{ viewport: "custom-viewport" }}>
+        Content
+      </Popover>,
+    );
+    expect(
+      document.querySelector('[data-slot="popover-viewport"]'),
+    ).toHaveClass("custom-viewport");
+  });
+});
+
+describe("Popover exports", () => {
+  it("exports PopoverPrimitive", () => {
+    expect(PopoverPrimitive).toBeDefined();
+  });
+
+  it("exports PopoverContent as alias for PopoverPopup", () => {
+    expect(PopoverContent).toBe(PopoverPopup);
+  });
+});