@boxcustodia/library 2.0.0-alpha.13 → 2.0.0-alpha.14

package/src/components/stepper/stepper.test.tsx

@@ -2,28 +2,28 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import {
   Stepper,
-  StepperContainer,
   StepperContent,
-  StepperList,
+  StepperNav,
+  StepperRoot,
   StepperTrigger,
 } from "../../components";
-import { click } from "../../utils";
+import { click } from "../../utils/tests";
 
 describe("Stepper component", () => {
   it("should render correctly", () => {
-    render(<StepperContainer data-testid="steps" />);
+    render(<StepperRoot data-testid="steps" />);
     const component = screen.getByTestId("steps");
     expect(component).toBeInTheDocument();
   });
 
   it("should show steps", () => {
     render(
-      <StepperContainer>
-        <StepperList>
+      <StepperRoot>
+        <StepperNav>
           <StepperTrigger value={0} title="trigger"></StepperTrigger>
           <StepperTrigger value={1} title="step"></StepperTrigger>
-        </StepperList>
-      </StepperContainer>,
+        </StepperNav>
+      </StepperRoot>,
     );
 
     expect(screen.getByText(/trigger/i)).toBeInTheDocument();
@@ -32,13 +32,13 @@ describe("Stepper component", () => {
 
   it("should show step content", () => {
     render(
-      <StepperContainer current={0}>
-        <StepperList>
+      <StepperRoot value={0}>
+        <StepperNav>
           <StepperTrigger value={0} title="trigger"></StepperTrigger>
           <StepperTrigger value={1} title="test"></StepperTrigger>
-        </StepperList>
+        </StepperNav>
         <StepperContent value={0}>Contenido de trigger</StepperContent>
-      </StepperContainer>,
+      </StepperRoot>,
     );
 
     expect(screen.getByText("Contenido de trigger")).toBeInTheDocument();
@@ -47,14 +47,14 @@ describe("Stepper component", () => {
   it("should be controlled", () => {
     const mock = vi.fn();
     render(
-      <StepperContainer value={0} onChange={mock}>
-        <StepperList>
+      <StepperRoot value={0} onValueChange={mock}>
+        <StepperNav>
           <StepperTrigger value={0} title="trigger"></StepperTrigger>
           <StepperTrigger value={1} title="test"></StepperTrigger>
-        </StepperList>
+        </StepperNav>
         <StepperContent value={0}>Contenido de trigger</StepperContent>
         <StepperContent value={1}>Contenido de test</StepperContent>
-      </StepperContainer>,
+      </StepperRoot>,
     );
 
     const testTrigger = screen.getByText("test");
@@ -69,8 +69,8 @@ describe("Stepper component", () => {
     const mock = vi.fn();
     render(
       <Stepper
-        current={0}
-        onChange={mock}
+        value={0}
+        onValueChange={mock}
         items={[
           { title: "trigger", content: "Contenido de trigger" },
           { title: "step1", content: "Contenido de step1" },

package/src/components/stepper/stepper.tsx

@@ -0,0 +1,554 @@
+"use client";
+
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  createContext,
+  type KeyboardEvent,
+  type ReactNode,
+  useContext,
+} from "react";
+
+import { cn } from "../../lib";
+
+type StepperOrientation = "horizontal" | "vertical";
+type StepState = "active" | "completed" | "inactive" | "loading";
+type StepIndicators = Partial<Record<StepState, ReactNode>>;
+type StepperTriggerMode = "both" | "forward-only" | "backward-only" | "none";
+
+function isStepNavigable(
+  step: number,
+  activeStep: number,
+  triggerMode: StepperTriggerMode,
+): boolean {
+  if (triggerMode === "none") return false;
+  if (triggerMode === "both") return true;
+  if (triggerMode === "backward-only") return step <= activeStep;
+  return step >= activeStep;
+}
+
+interface StepperContextValue {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+  orientation: StepperOrientation;
+  indicators: StepIndicators;
+  triggerMode: StepperTriggerMode;
+}
+
+const StepperContext = createContext<StepperContextValue | undefined>(
+  undefined,
+);
+
+function useStepper() {
+  const context = useContext(StepperContext);
+  if (!context) {
+    throw new Error("useStepper must be used within a StepperRoot");
+  }
+  return context;
+}
+
+interface StepItemContextValue {
+  step: number;
+  state: StepState;
+  isDisabled: boolean;
+  isLoading: boolean;
+}
+
+const StepItemContext = createContext<StepItemContextValue | undefined>(
+  undefined,
+);
+
+function useStepItem() {
+  const context = useContext(StepItemContext);
+  if (!context) {
+    throw new Error("useStepItem must be used within a StepperItem");
+  }
+  return context;
+}
+
+interface StepperRootProps extends useRender.ComponentProps<"div"> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: StepperOrientation;
+  indicators?: StepIndicators;
+  triggerMode?: StepperTriggerMode;
+}
+
+export function StepperRoot({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  indicators = {},
+  triggerMode = "both",
+  className,
+  render,
+  children,
+  ...props
+}: StepperRootProps) {
+  const [activeStep = 1, setActiveStep] = useControllableState<number>({
+    prop: value,
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+  });
+
+  const defaultProps = {
+    className: cn(
+      "flex w-full data-[orientation=horizontal]:flex-col data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-8",
+      className,
+    ),
+    "data-orientation": orientation,
+    "data-slot": "stepper",
+    children,
+  };
+
+  return (
+    <StepperContext.Provider
+      value={{
+        activeStep,
+        setActiveStep,
+        orientation,
+        indicators,
+        triggerMode,
+      }}
+    >
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </StepperContext.Provider>
+  );
+}
+
+export function StepperNav({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"nav">) {
+  const { orientation } = useStepper();
+
+  const defaultProps = {
+    role: "tablist",
+    "aria-orientation": orientation,
+    "data-orientation": orientation,
+    "data-slot": "stepper-nav",
+    className: cn(
+      "group/stepper-nav inline-flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+      className,
+    ),
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "nav",
+    render,
+    props: mergeProps<"nav">(defaultProps, props),
+  });
+}
+
+interface StepperItemProps extends useRender.ComponentProps<"div"> {
+  step: number;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+export function StepperItem({
+  step,
+  disabled = false,
+  loading = false,
+  className,
+  render,
+  children,
+  ...props
+}: StepperItemProps) {
+  const { activeStep } = useStepper();
+
+  const state: StepState =
+    step < activeStep
+      ? "completed"
+      : step === activeStep
+        ? "active"
+        : "inactive";
+
+  const isLoading = loading && step === activeStep;
+
+  const defaultProps = {
+    "data-state": state,
+    "data-loading": isLoading || undefined,
+    "data-slot": "stepper-item",
+    className: cn(
+      "group/step flex items-center justify-center not-last:flex-1",
+      "group-data-[orientation=horizontal]/stepper-nav:flex-row group-data-[orientation=vertical]/stepper-nav:flex-col",
+      className,
+    ),
+    children,
+  };
+
+  return (
+    <StepItemContext.Provider
+      value={{ step, state, isDisabled: disabled, isLoading }}
+    >
+      {useRender({
+        defaultTagName: "div",
+        render,
+        props: mergeProps<"div">(defaultProps, props),
+      })}
+    </StepItemContext.Provider>
+  );
+}
+
+export function StepperTrigger({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"button">) {
+  const { activeStep, setActiveStep, triggerMode } = useStepper();
+  const { step, state, isDisabled, isLoading } = useStepItem();
+  const isSelected = activeStep === step;
+  const isNavigable = isStepNavigable(step, activeStep, triggerMode);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    const triggers = Array.from(
+      event.currentTarget
+        .closest('[data-slot="stepper-nav"]')
+        ?.querySelectorAll<HTMLButtonElement>(
+          '[data-slot="stepper-trigger"]:not([disabled]):not([aria-disabled="true"])',
+        ) ?? [],
+    );
+    const index = triggers.indexOf(event.currentTarget);
+    if (index === -1) return;
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        triggers[(index + 1) % triggers.length]?.focus();
+        break;
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        triggers[(index - 1 + triggers.length) % triggers.length]?.focus();
+        break;
+      case "Home":
+        event.preventDefault();
+        triggers[0]?.focus();
+        break;
+      case "End":
+        event.preventDefault();
+        triggers[triggers.length - 1]?.focus();
+        break;
+    }
+  };
+
+  const defaultProps = {
+    type: "button" as const,
+    role: "tab",
+    id: `stepper-tab-${step}`,
+    "aria-selected": isSelected,
+    "aria-controls": `stepper-panel-${step}`,
+    "aria-disabled": !isNavigable || undefined,
+    tabIndex: isSelected ? 0 : -1,
+    disabled: isDisabled,
+    "data-state": state,
+    "data-loading": isLoading || undefined,
+    "data-slot": "stepper-trigger",
+    className: cn(
+      "inline-flex items-center gap-2.5 rounded-full outline-none",
+      isNavigable ? "cursor-pointer" : "cursor-default",
+      "focus-visible:z-10 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+      "disabled:pointer-events-none disabled:opacity-60",
+      className,
+    ),
+    onClick: () => {
+      if (!isNavigable) return;
+      setActiveStep(step);
+    },
+    onKeyDown: handleKeyDown,
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "button",
+    render,
+    props: mergeProps<"button">(defaultProps, props),
+  });
+}
+
+export function StepperIndicator({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const { state, isLoading } = useStepItem();
+  const { indicators } = useStepper();
+
+  const override =
+    (isLoading && indicators.loading) ||
+    (state === "completed" && indicators.completed) ||
+    (state === "active" && indicators.active) ||
+    (state === "inactive" && indicators.inactive);
+
+  const defaultProps = {
+    "data-state": state,
+    "data-loading": isLoading || undefined,
+    "data-slot": "stepper-indicator",
+    className: cn(
+      "relative flex size-6 shrink-0 items-center justify-center overflow-hidden rounded-full border-background bg-accent text-accent-foreground text-xs",
+      "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground",
+      "data-[state=completed]:bg-primary data-[state=completed]:text-primary-foreground",
+      className,
+    ),
+    children: <div className="absolute">{override || children}</div>,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export function StepperSeparator({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const { state } = useStepItem();
+
+  const defaultProps = {
+    "aria-hidden": true,
+    "data-state": state,
+    "data-slot": "stepper-separator",
+    className: cn(
+      "m-0.5 rounded-sm bg-muted data-[state=completed]:bg-primary",
+      "group-data-[orientation=horizontal]/stepper-nav:h-0.5 group-data-[orientation=horizontal]/stepper-nav:flex-1",
+      "group-data-[orientation=vertical]/stepper-nav:h-12 group-data-[orientation=vertical]/stepper-nav:w-0.5",
+      className,
+    ),
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+export function StepperTitle({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"h3">) {
+  const { state } = useStepItem();
+
+  const defaultProps = {
+    "data-state": state,
+    "data-slot": "stepper-title",
+    className: cn("font-medium text-sm leading-none", className),
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "h3",
+    render,
+    props: mergeProps<"h3">(defaultProps, props),
+  });
+}
+
+export function StepperDescription({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"p">) {
+  const { state } = useStepItem();
+
+  const defaultProps = {
+    "data-state": state,
+    "data-slot": "stepper-description",
+    className: cn("text-muted-foreground text-sm", className),
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "p",
+    render,
+    props: mergeProps<"p">(defaultProps, props),
+  });
+}
+
+export function StepperPanel({
+  className,
+  render,
+  children,
+  ...props
+}: useRender.ComponentProps<"div">) {
+  const { activeStep } = useStepper();
+
+  const defaultProps = {
+    "data-state": activeStep,
+    "data-slot": "stepper-panel",
+    className: cn("w-full", className),
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+interface StepperContentProps extends useRender.ComponentProps<"div"> {
+  value: number;
+  forceMount?: boolean;
+}
+
+export function StepperContent({
+  value,
+  forceMount = false,
+  className,
+  render,
+  children,
+  ...props
+}: StepperContentProps) {
+  const { activeStep } = useStepper();
+  const isActive = value === activeStep;
+
+  if (!forceMount && !isActive) return null;
+
+  const defaultProps = {
+    role: "tabpanel",
+    id: `stepper-panel-${value}`,
+    "aria-labelledby": `stepper-tab-${value}`,
+    hidden: !isActive,
+    "data-state": isActive ? "active" : "inactive",
+    "data-slot": "stepper-content",
+    className: cn("w-full", className, !isActive && "hidden"),
+    children,
+  };
+
+  return useRender({
+    defaultTagName: "div",
+    render,
+    props: mergeProps<"div">(defaultProps, props),
+  });
+}
+
+interface StepperItemData {
+  title?: ReactNode;
+  description?: ReactNode;
+  indicator?: ReactNode;
+  content?: ReactNode;
+  disabled?: boolean;
+  loading?: boolean;
+}
+
+interface StepperProps extends Omit<StepperRootProps, "children"> {
+  items: StepperItemData[];
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Navigation list that holds every step. */
+    nav?: string;
+    /** Single step container (indicator + label + separator). */
+    item?: string;
+    /** Clickable step button. */
+    trigger?: string;
+    /** Round indicator (number, icon, or check). */
+    indicator?: string;
+    /** Step title above the description. */
+    title?: string;
+    /** Step description below the title. */
+    description?: string;
+    /** Line between steps. */
+    separator?: string;
+    /** Panel below the nav that holds the active step's content. */
+    panel?: string;
+    /** Single step content rendered when the step is active. */
+    content?: string;
+  };
+}
+
+export function Stepper({ items, classNames, ...props }: StepperProps) {
+  const hasContent = items.some((item) => item.content != null);
+
+  return (
+    <StepperRoot {...props}>
+      <StepperNav className={classNames?.nav}>
+        {items.map((item, i) => {
+          const step = i + 1;
+          return (
+            <StepperItem
+              key={step}
+              step={step}
+              disabled={item.disabled}
+              loading={item.loading}
+              className={classNames?.item}
+            >
+              <StepperTrigger className={classNames?.trigger}>
+                <StepperIndicator className={classNames?.indicator}>
+                  {item.indicator ?? step}
+                </StepperIndicator>
+                {(item.title || item.description) && (
+                  <div className="flex flex-col gap-0.5 text-left">
+                    {item.title ? (
+                      <StepperTitle className={classNames?.title}>
+                        {item.title}
+                      </StepperTitle>
+                    ) : null}
+                    {item.description ? (
+                      <StepperDescription className={classNames?.description}>
+                        {item.description}
+                      </StepperDescription>
+                    ) : null}
+                  </div>
+                )}
+              </StepperTrigger>
+              {i < items.length - 1 ? (
+                <StepperSeparator className={classNames?.separator} />
+              ) : null}
+            </StepperItem>
+          );
+        })}
+      </StepperNav>
+
+      {hasContent ? (
+        <StepperPanel className={classNames?.panel}>
+          {items.map((item, i) =>
+            item.content != null ? (
+              <StepperContent
+                key={i + 1}
+                value={i + 1}
+                className={classNames?.content}
+              >
+                {item.content}
+              </StepperContent>
+            ) : null,
+          )}
+        </StepperPanel>
+      ) : null}
+    </StepperRoot>
+  );
+}
+
+export { useStepper, useStepItem };
+export type {
+  StepperRootProps,
+  StepperItemProps,
+  StepperContentProps,
+  StepperOrientation,
+  StepperTriggerMode,
+  StepState,
+  StepIndicators,
+  StepperItemData,
+  StepperProps,
+};

package/src/components/switch/switch.stories.tsx

@@ -24,7 +24,7 @@ const meta: Meta<typeof Switch> = {
   argTypes: {
     children: { control: false },
     onCheckedChange: { control: false },
-    thumbProps: { control: false },
+    classNames: { control: false },
   },
 };
 
@@ -33,6 +33,20 @@ type Story = StoryObj<typeof Switch>;
 
 export const Default: Story = {};
 
+/**
+ * `className` estila el switch (root visible). `classNames` expone los slots
+ * `wrapper` (flex outer), `thumb` (perilla) y `label` (texto al costado).
+ */
+export const WithClassNames: Story = {
+  args: {
+    classNames: {
+      wrapper: "gap-x-4",
+      thumb: "bg-primary-foreground",
+      label: "text-primary",
+    },
+  },
+};
+
 /**
  * Pass `label` or `children` — both render an accessible label next to the switch.
  * `label` takes priority when both are provided.

package/src/components/switch/switch.tsx

@@ -48,8 +48,16 @@ interface SwitchProps extends Omit<SwitchPrimitive.Root.Props, "children"> {
   children?: React.ReactNode;
   label?: React.ReactNode;
   tooltip?: string;
-  thumbProps?: SwitchPrimitive.Thumb.Props;
   controlFirst?: boolean;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Outer flex wrapper that holds the switch and label. */
+    wrapper?: string;
+    /** Sliding thumb (knob) inside the switch. */
+    thumb?: string;
+    /** Label rendered next to the switch. */
+    label?: string;
+  };
 }
 
 export function Switch({
@@ -57,9 +65,9 @@ export function Switch({
   label,
   className,
   id,
-  thumbProps,
   controlFirst = true,
   tooltip,
+  classNames,
   ...props
 }: SwitchProps): React.ReactElement {
   const generatedId = useId();
@@ -71,13 +79,18 @@ export function Switch({
       className={cn(
         "flex select-none items-center gap-x-2",
         !controlFirst && "flex-row-reverse justify-end",
+        classNames?.wrapper,
       )}
     >
       <SwitchRoot id={idToUse} className={className} {...props}>
-        <SwitchThumb {...thumbProps} />
+        <SwitchThumb className={classNames?.thumb} />
       </SwitchRoot>
       {labelContent && (
-        <Label htmlFor={idToUse} tooltip={tooltip}>
+        <Label
+          htmlFor={idToUse}
+          tooltip={tooltip}
+          className={classNames?.label}
+        >
           {labelContent}
         </Label>
       )}