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

package/src/components/label/label.test.tsx

@@ -0,0 +1,107 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Label } from "../../components";
+
+describe("Label component", () => {
+  it("should render correctly", () => {
+    render(<Label data-testid="Label" />);
+    const component = screen.getByTestId("Label");
+
+    expect(component).toBeInTheDocument();
+  });
+
+  it("should render as a label element", () => {
+    render(<Label>Text</Label>);
+    const label = screen.getByText("Text");
+
+    expect(label.tagName).toBe("LABEL");
+  });
+
+  it("should render children correctly", () => {
+    render(<Label>First name</Label>);
+
+    expect(screen.getByText("First name")).toBeInTheDocument();
+  });
+
+  it("should have data-slot attribute", () => {
+    render(<Label data-testid="label" />);
+    const label = screen.getByTestId("label");
+
+    expect(label).toHaveAttribute("data-slot", "label");
+  });
+
+  it("should accept className prop", () => {
+    const TEST_CLASS = "custom-label";
+    render(<Label data-testid="label" className={TEST_CLASS} />);
+    const label = screen.getByTestId("label");
+
+    expect(label).toHaveClass(TEST_CLASS);
+  });
+
+  it("should accept htmlFor prop", () => {
+    render(<Label data-testid="label" htmlFor="input-id" />);
+    const label = screen.getByTestId("label");
+
+    expect(label).toHaveAttribute("for", "input-id");
+  });
+
+  it("should render as a different element via render prop", () => {
+    render(
+      <Label
+        render={({ children }) => <span data-testid="label">{children}</span>}
+      >
+        Custom render
+      </Label>,
+    );
+    const label = screen.getByTestId("label");
+
+    expect(label.tagName).toBe("SPAN");
+    expect(label).toHaveTextContent("Custom render");
+  });
+
+  it("renders an asterisk with aria-hidden when required is true", () => {
+    render(<Label required>Email</Label>);
+    const asterisk = screen.getByText("*");
+    expect(asterisk).toBeInTheDocument();
+    expect(asterisk).toHaveAttribute("aria-hidden");
+  });
+
+  it("does not render asterisk when required is absent", () => {
+    render(<Label>Email</Label>);
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+  });
+
+  it("renders tooltip trigger button when tooltip is provided", () => {
+    render(<Label tooltip="More info">Email</Label>);
+    expect(
+      screen.getByRole("button", { name: "Más información" }),
+    ).toBeInTheDocument();
+  });
+
+  it("does not render tooltip button when tooltip is absent", () => {
+    render(<Label>Email</Label>);
+    expect(
+      screen.queryByRole("button", { name: "Más información" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("applies classNames.asterisk to the asterisk span", () => {
+    render(
+      <Label required classNames={{ asterisk: "asterisk-cls" }}>
+        Email
+      </Label>,
+    );
+    expect(screen.getByText("*")).toHaveClass("asterisk-cls");
+  });
+
+  it("applies classNames.tooltip to the tooltip button", () => {
+    render(
+      <Label tooltip="Info" classNames={{ tooltip: "tooltip-btn-cls" }}>
+        Email
+      </Label>,
+    );
+    expect(screen.getByRole("button", { name: "Más información" })).toHaveClass(
+      "tooltip-btn-cls",
+    );
+  });
+});

package/src/components/label/label.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Info } from "lucide-react";
+import type React from "react";
+import { ReactNode } from "react";
+import { cn } from "../../lib";
+import { Tooltip } from "../tooltip";
+
+interface LabelProps extends useRender.ComponentProps<"label"> {
+  required?: boolean;
+  tooltip?: ReactNode;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Red asterisk rendered when `required` is true. */
+    asterisk?: string;
+    /** Info-icon button rendered when `tooltip` is set. */
+    tooltip?: string;
+  };
+}
+
+export function Label({
+  className,
+  render,
+  required,
+  tooltip,
+  classNames,
+  children,
+  ...props
+}: LabelProps): React.ReactElement {
+  const content =
+    required || tooltip ? (
+      <>
+        {children}
+        {required && (
+          <span aria-hidden className={cn("text-error", classNames?.asterisk)}>
+            *
+          </span>
+        )}
+        {tooltip && (
+          <Tooltip content={tooltip}>
+            <button
+              type="button"
+              aria-label="Más información"
+              className={cn(
+                "inline-flex cursor-default items-center text-muted-foreground hover:text-foreground transition-all ml-1",
+                classNames?.tooltip,
+              )}
+            >
+              <Info className="size-3.5" />
+            </button>
+          </Tooltip>
+        )}
+      </>
+    ) : (
+      children
+    );
+
+  const baseProps = {
+    className: cn(
+      "inline-flex items-center font-medium text-sm leading-none",
+      "peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-70",
+      className,
+    ),
+    "data-slot": "label",
+    children: content,
+  };
+
+  return useRender({
+    defaultTagName: "label",
+    props: mergeProps<"label">(baseProps, props),
+    render,
+  });
+}

package/src/components/loader/index.ts

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

package/src/components/loader/loader.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Loader, Stack } from "../../components";
+
+/**
+ * Spinner that signals an in-progress operation. Accepts all native SVG props
+ * via `LucideProps` — use `color`, `strokeWidth`, or `className` for one-off
+ * overrides on the icon. `center` positions the loader fixed at the viewport
+ * center. Style the wrapper with `classNames.container`.
+ */
+const meta: Meta<typeof Loader> = {
+  title: "Components/Loader",
+  component: Loader,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <Stack>
+      <Loader variant="primary" />
+      <Loader variant="secondary" />
+      <Loader variant="ghost" />
+      <Loader variant="error" />
+      <Loader variant="success" />
+    </Stack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Stack align="end">
+      <Loader size="xs" />
+      <Loader size="sm" />
+      <Loader size="default" />
+      <Loader size="lg" />
+      <Loader size="xl" />
+    </Stack>
+  ),
+};
+
+/**
+ * `center` uses `fixed inset-0 grid place-items-center` — it covers the full
+ * viewport. Pair it with a backdrop when used inside a modal or overlay.
+ */
+export const Centered: Story = { args: { center: true } };
+
+/**
+ * `color` and `strokeWidth` come from `LucideProps` and bypass the variant system.
+ * Useful for one-off cases without adding a new variant.
+ */
+export const Custom: Story = {
+  args: {
+    size: "lg",
+    color: "tomato",
+    strokeWidth: 1,
+    className: "duration-200",
+  },
+};

package/src/components/loader/loader.test.tsx

@@ -0,0 +1,88 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Loader } from "../../components";
+
+describe("Loader component", () => {
+  it("should render", () => {
+    render(<Loader data-testid="loader" />);
+
+    const loader = screen.getByTestId("loader");
+    expect(loader).toBeInTheDocument();
+  });
+
+  it("should receive custom styles", () => {
+    render(<Loader color="red" data-testid="loader" />);
+
+    const loader = screen.getByTestId("loader");
+    expect(loader).toHaveAttribute("stroke", "red");
+  });
+
+  it("should receive custom size", () => {
+    render(<Loader size="lg" data-testid="loader" />);
+
+    const loader = screen.getByTestId("loader");
+    expect(loader).toHaveClass("size-10");
+  });
+});
+
+describe("Loader data-slots", () => {
+  it("renders wrapper with data-slot='loader'", () => {
+    render(<Loader />);
+    expect(document.querySelector('[data-slot="loader"]')).toBeInTheDocument();
+  });
+
+  it("renders icon with data-slot='loader-icon'", () => {
+    render(<Loader />);
+    expect(
+      document.querySelector('[data-slot="loader-icon"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Loader variants", () => {
+  it.each([
+    ["primary", "text-primary"],
+    ["secondary", "text-secondary"],
+    ["ghost", "text-muted-foreground"],
+    ["error", "text-error"],
+    ["success", "text-success"],
+    ["warning", "text-warning"],
+    ["info", "text-info"],
+  ] as const)("variant '%s' applies '%s' to icon", (variant, cls) => {
+    render(<Loader variant={variant} />);
+    expect(document.querySelector('[data-slot="loader-icon"]')).toHaveClass(
+      cls,
+    );
+  });
+});
+
+describe("Loader sizes", () => {
+  it.each([
+    ["xs", "size-3"],
+    ["sm", "size-4"],
+    ["default", "size-7"],
+    ["lg", "size-10"],
+    ["xl", "size-14"],
+  ] as const)("size '%s' applies '%s' to icon", (size, cls) => {
+    render(<Loader size={size} />);
+    expect(document.querySelector('[data-slot="loader-icon"]')).toHaveClass(
+      cls,
+    );
+  });
+});
+
+describe("Loader center + classNames", () => {
+  it("center=true adds fixed overlay classes to wrapper", () => {
+    render(<Loader center />);
+    const wrapper = document.querySelector('[data-slot="loader"]');
+    expect(wrapper).toHaveClass("fixed");
+    expect(wrapper).toHaveClass("inset-0");
+  });
+
+  it("classNames.container adds class to wrapper", () => {
+    render(<Loader classNames={{ container: "overlay-cls" }} />);
+    expect(document.querySelector('[data-slot="loader"]')).toHaveClass(
+      "overlay-cls",
+    );
+  });
+});

package/src/components/loader/loader.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { LoaderCircle, type LucideProps } from "lucide-react";
+import { cn } from "../../lib";
+
+const loaderVariants = cva("animate-spin", {
+  variants: {
+    variant: {
+      primary: "text-primary",
+      secondary: "text-secondary",
+      ghost: "text-muted-foreground",
+      error: "text-error",
+      success: "text-success",
+      warning: "text-warning",
+      info: "text-info",
+    },
+    size: {
+      xs: "size-3",
+      sm: "size-4",
+      default: "size-7",
+      lg: "size-10",
+      xl: "size-14",
+    },
+  },
+  defaultVariants: {
+    variant: "primary",
+    size: "default",
+  },
+});
+
+type LoaderVariants = VariantProps<typeof loaderVariants>;
+
+type Props = LucideProps &
+  LoaderVariants & {
+    /** Renders the loader fixed at the viewport center via `fixed inset-0`. */
+    center?: boolean;
+    /** Styles applied to each internal slot. */
+    classNames?: {
+      /** Wrapper around the spinner (used for `center` overlay). */
+      container?: string;
+    };
+  };
+
+export const Loader = ({
+  center,
+  classNames,
+  variant,
+  size,
+  ...props
+}: Props) => {
+  return (
+    <div
+      className={cn(
+        classNames?.container,
+        center && "fixed inset-0 grid place-items-center",
+      )}
+      data-slot="loader"
+    >
+      <LoaderCircle
+        data-slot="loader-icon"
+        {...props}
+        className={cn(loaderVariants({ variant, size }), props.className)}
+      />
+    </div>
+  );
+};

package/src/components/menu/index.ts

@@ -0,0 +1,2 @@
+export * from "./menu";
+export * from "./menu-primitives";

package/src/components/menu/menu-primitives.tsx

@@ -0,0 +1,259 @@
+"use client";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "../../lib";
+
+function MenuRoot({ ...props }: MenuPrimitive.Root.Props) {
+  return <MenuPrimitive.Root data-slot="menu" {...props} />;
+}
+
+function MenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
+  return <MenuPrimitive.Portal data-slot="menu-portal" {...props} />;
+}
+
+function MenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
+  return <MenuPrimitive.Trigger data-slot="menu-trigger" {...props} />;
+}
+
+function MenuPopup({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}: MenuPrimitive.Popup.Props &
+  Pick<
+    MenuPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <MenuPrimitive.Portal>
+      <MenuPrimitive.Positioner
+        className="isolate z-50 outline-none"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+      >
+        <MenuPrimitive.Popup
+          data-slot="menu-content"
+          className={cn(
+            "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </MenuPrimitive.Positioner>
+    </MenuPrimitive.Portal>
+  );
+}
+
+function MenuGroup({ ...props }: MenuPrimitive.Group.Props) {
+  return <MenuPrimitive.Group data-slot="menu-group" {...props} />;
+}
+
+function MenuLabel({
+  className,
+  inset,
+  ...props
+}: MenuPrimitive.GroupLabel.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.GroupLabel
+      data-slot="menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: MenuPrimitive.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "error";
+}) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=error]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=error]:text-error data-[variant=error]:focus:bg-error/10 data-[variant=error]:focus:text-error dark:data-[variant=error]:focus:bg-error/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=error]:*:[svg]:text-error",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function MenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
+  return <MenuPrimitive.SubmenuRoot data-slot="menu-sub" {...props} />;
+}
+
+function MenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: MenuPrimitive.SubmenuTrigger.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.SubmenuTrigger
+      data-slot="menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=error]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </MenuPrimitive.SubmenuTrigger>
+  );
+}
+
+function MenuSubContent({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPopup>) {
+  return (
+    <MenuPopup
+      data-slot="menu-sub-content"
+      className={cn(
+        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+        className,
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
+function MenuCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.CheckboxItem
+      data-slot="menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="menu-checkbox-item-indicator"
+      >
+        <MenuPrimitive.CheckboxItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.CheckboxItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.CheckboxItem>
+  );
+}
+
+function MenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
+  return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
+}
+
+function MenuRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean;
+}) {
+  return (
+    <MenuPrimitive.RadioItem
+      data-slot="menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span
+        className="pointer-events-none absolute right-2 flex items-center justify-center"
+        data-slot="menu-radio-item-indicator"
+      >
+        <MenuPrimitive.RadioItemIndicator>
+          <CheckIcon />
+        </MenuPrimitive.RadioItemIndicator>
+      </span>
+      {children}
+    </MenuPrimitive.RadioItem>
+  );
+}
+
+function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
+  return (
+    <MenuPrimitive.Separator
+      data-slot="menu-separator"
+      className={cn("-mx-1 my-px h-px bg-input/50", className)}
+      {...props}
+    />
+  );
+}
+
+function MenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menu-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menu-item:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  MenuRoot,
+  MenuPortal,
+  MenuTrigger,
+  MenuPopup,
+  MenuGroup,
+  MenuLabel,
+  MenuItem,
+  MenuCheckboxItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  MenuSub,
+  MenuSubTrigger,
+  MenuSubContent,
+};