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

package/src/components/pagination/pagination.test.tsx

@@ -0,0 +1,76 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Pagination } from "../../components";
+import { DOTS } from "../../hooks";
+import { click } from "../../utils";
+
+describe("Pagination component", () => {
+  it("should render correctly", () => {
+    render(<Pagination pageSize={10} totalItems={100} />);
+  });
+
+  it("should navigate to page", async () => {
+    render(<Pagination pageSize={10} totalItems={100} />);
+
+    const page = screen.getByText(/Ir a la página 3/i).parentElement!;
+    click(page);
+
+    waitFor(() => {
+      expect(page).toHaveAttribute("active", "true");
+    });
+  });
+
+  it("should navigate to first page", async () => {
+    render(<Pagination pageSize={10} totalItems={100} />);
+
+    const page = screen.getByText(/Ir a primera página/i);
+    click(page);
+
+    waitFor(() => {
+      expect(page).toHaveAttribute("active", "true");
+    });
+  });
+
+  it("should navigate to previous page", async () => {
+    render(<Pagination pageSize={10} totalItems={100} />);
+
+    const page = screen.getByText(/Ir a página anterior/i);
+    click(page);
+
+    waitFor(() => {
+      expect(page).toHaveAttribute("active", "true");
+    });
+  });
+
+  it("should navigate to next page", async () => {
+    render(<Pagination pageSize={10} totalItems={100} />);
+
+    const page = screen.getByText(/Ir a próxima página/i);
+    click(page);
+
+    waitFor(() => {
+      expect(page).toHaveAttribute("active", "true");
+    });
+  });
+
+  it("should navigate to last page", async () => {
+    render(<Pagination pageSize={10} totalItems={100} />);
+
+    const page = screen.getByText(/Ir a última página/i);
+    click(page);
+
+    waitFor(() => {
+      expect(page).toHaveAttribute("active", "true");
+    });
+  });
+
+  it("should render dots", async () => {
+    render(<Pagination pageSize={10} totalItems={100} />);
+    const dots = screen.getByText(DOTS);
+
+    waitFor(() => {
+      expect(dots).toBeInTheDocument();
+      expect(dots).toHaveAttribute("dots", "true");
+    });
+  });
+});

package/src/components/pagination/pagination.tsx

@@ -0,0 +1,102 @@
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { HTMLProps } from "react";
+import { DOTS, useRangePagination, useRangePaginationProps } from "../../hooks";
+import { cn } from "../../lib";
+import {
+  PaginationOption as Option,
+  PaginationOptionProps,
+} from "./components/pagination-option";
+
+interface Props extends useRangePaginationProps {
+  optionProps?: PaginationOptionProps;
+  className?: string;
+  containerProps?: HTMLProps<HTMLDivElement>;
+}
+
+export const Pagination = ({
+  optionProps,
+  className,
+  containerProps,
+  ...rangeProps
+}: Props) => {
+  const {
+    paginationRange,
+    currentPage,
+    goTo,
+    maxPage,
+    next,
+    prev,
+    isLastPage,
+    isFirstPage,
+  } = useRangePagination(rangeProps);
+
+  return (
+    <div
+      {...containerProps}
+      className={cn(
+        "flex items-end select-none h-10",
+        containerProps?.className,
+        className,
+      )}
+      data-slot="pagination"
+    >
+      <Option
+        {...optionProps}
+        disabled={isFirstPage}
+        onClick={() => goTo(1)}
+        className={cn("rounded-l-md", optionProps?.className)}
+      >
+        <ChevronsLeft data-slot="pagination-option-icon" />
+        <span className="sr-only">Ir a primera página</span>
+      </Option>
+
+      <Option {...optionProps} onClick={prev} disabled={isFirstPage}>
+        <ChevronLeft data-slot="pagination-option-icon" />
+        <span className="sr-only">Ir a página anterior</span>
+      </Option>
+
+      {paginationRange.map((pageNumber) => (
+        <>
+          {pageNumber === DOTS ? (
+            <Option
+              key={pageNumber}
+              className={cn("pointer-events-none", optionProps?.className)}
+            >
+              {DOTS}
+            </Option>
+          ) : (
+            <Option
+              {...optionProps}
+              isActive={pageNumber === currentPage}
+              onClick={() => goTo(pageNumber as number)}
+              key={pageNumber}
+            >
+              {pageNumber}
+              <span className="sr-only">Ir a la página {pageNumber}</span>
+            </Option>
+          )}
+        </>
+      ))}
+
+      <Option {...optionProps} onClick={next} disabled={isLastPage}>
+        <ChevronRight data-slot="pagination-option-icon" />
+        <span className="sr-only">Ir a próxima página</span>
+      </Option>
+
+      <Option
+        {...optionProps}
+        disabled={isLastPage}
+        onClick={() => goTo(maxPage)}
+        className={cn("rounded-r-md", optionProps?.className)}
+      >
+        <ChevronsRight data-slot="pagination-option-icon" />
+        <span className="sr-only">Ir a última página</span>
+      </Option>
+    </div>
+  );
+};

package/src/components/password/index.ts

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

package/src/components/password/password.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Lock, Unlock } from "lucide-react";
+import { useState } from "react";
+import { createToastManager, ToastProvider } from "../toast";
+import { Password } from "./password";
+
+const toastManager = createToastManager();
+
+/**
+ * Password input with a visibility toggle button. `aria-invalid` drives error
+ * styling — no Field wrapper needed.
+ *
+ * The toggle button is always rendered; `toggleable={false}` disables it
+ * without removing it from the DOM, keeping the layout consistent.
+ *
+ * `onShow` fires when the password becomes visible; `onHide` fires when
+ * it's hidden again — both after the internal state has changed.
+ */
+const meta: Meta<typeof Password> = {
+  title: "Components/Password",
+  component: Password,
+  parameters: { layout: "centered" },
+  args: {
+    placeholder: "Enter your password",
+  },
+  argTypes: {
+    showIcon: { control: false },
+    hideIcon: { control: false },
+    onShow: { control: false },
+    onHide: { control: false },
+    onChange: { control: false },
+  },
+  decorators: [
+    (Story) => (
+      <ToastProvider toastManager={toastManager}>
+        <Story />
+      </ToastProvider>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Password>;
+
+export const Default: Story = {};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    defaultValue: "my-secret-password",
+  },
+};
+
+/**
+ * `aria-invalid="true"` applies error border and ring — no Field wrapper needed.
+ */
+export const Invalid: Story = {
+  args: { "aria-invalid": "true" },
+};
+
+/**
+ * `toggleable={false}` disables the button without removing it from the DOM.
+ * Use this when you want to prevent the user from revealing the password
+ * while keeping the visual layout consistent.
+ */
+export const NonToggleable: Story = {
+  args: {
+    toggleable: false,
+    defaultValue: "my-secret-password",
+  },
+};
+
+/**
+ * `onChange` receives the string value as first argument, so no
+ * `event.target.value` needed.
+ */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <Password
+        placeholder="Enter your password"
+        value={value}
+        onChange={(val) => setValue(val)}
+      />
+    );
+  },
+};
+
+export const CustomIcons: Story = {
+  args: {
+    showIcon: <Lock className="h-4 w-4" />,
+    hideIcon: <Unlock className="h-4 w-4" />,
+  },
+};
+
+export const WithCallbacks: Story = {
+  args: {
+    onShow: () =>
+      toastManager.add({ variant: "success", description: "Password visible" }),
+    onHide: () =>
+      toastManager.add({ variant: "success", description: "Password hidden" }),
+  },
+};

package/src/components/password/password.tsx

@@ -0,0 +1,71 @@
+import { Eye, EyeOff } from "lucide-react";
+import { type ChangeEvent, type ReactNode } from "react";
+import { useToggle } 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;
+};
+
+export function Password({
+  className,
+  showIcon = <Eye className="h-4 w-4" />,
+  hideIcon = <EyeOff className="h-4 w-4" />,
+  onShow,
+  onHide,
+  toggleable = true,
+  onChange,
+  ...rest
+}: PasswordProps) {
+  const [showPassword, toggleShowPassword] = useToggle(false);
+
+  const handleToggle = () => {
+    toggleShowPassword();
+    showPassword ? onHide?.() : onShow?.();
+  };
+
+  const handleChange = onChange
+    ? (event: ChangeEvent<HTMLInputElement>) =>
+        onChange(event.target.value, event)
+    : undefined;
+
+  return (
+    <div
+      className={cn(
+        "relative inline-flex w-full rounded-md border border-input bg-background",
+        "text-sm transition-shadow",
+        "has-focus-visible:border-ring",
+        "has-aria-invalid:border-error has-focus-visible:has-aria-invalid:ring-error/20",
+        "has-disabled:cursor-not-allowed has-disabled:opacity-50",
+        className,
+      )}
+      data-slot="password"
+    >
+      <InputPrimitive
+        {...rest}
+        onChange={handleChange}
+        type={showPassword ? "text" : "password"}
+        className="w-full min-w-0 rounded-[inherit] bg-transparent py-2 pl-3 pr-10 text-sm outline-none placeholder:text-muted-foreground [&::-ms-clear]:hidden [&::-ms-reveal]:hidden"
+      />
+      <button
+        data-slot="password-toggle"
+        type="button"
+        onClick={handleToggle}
+        disabled={!toggleable}
+        className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {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,213 @@
+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. Use `popupClassName` to style the popup without going through `popupProps`.
+ * `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,
+};
+
+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>
+  ),
+};
+
+/**
+ * `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>
+  ),
+};