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

package/src/components/button/button.tsx

@@ -1,31 +1,90 @@
-import { type VariantProps } from "class-variance-authority";
-import { ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ComponentProps, cloneElement, type ReactElement } from "react";
 import { cn } from "../../lib";
-import { useThemeProps } from "../../providers/theme/useThemeProps";
-import { buttonVariants } from "./button.variants";
 import { BaseButton } from "./components/base-button";
 
+const buttonVariants = cva(
+  [
+    "group/button relative inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding",
+    "text-sm font-medium whitespace-nowrap transition-all outline-none select-none",
+    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+    "active:not-aria-[haspopup]:translate-y-px",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    "[&[data-loading]>:not([data-loader])]:opacity-0",
+    "[&[data-loading]]:pointer-events-none",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline:
+          "border-border hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        error: "bg-error text-error-foreground hover:bg-error/90",
+        success: "bg-success text-success-foreground hover:bg-success/90",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 [--btn-gap:0.375rem] px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 [--btn-gap:0.25rem] rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 [--btn-gap:0.25rem] rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 [--btn-gap:0.375rem] px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
 type BaseButtonProps = ComponentProps<typeof BaseButton>;
-type Props = BaseButtonProps & VariantProps<typeof buttonVariants>;
+type Props = BaseButtonProps &
+  VariantProps<typeof buttonVariants> & {
+    icon?: ReactElement;
+  };
 
-export const Button = (props: Props) => {
-  const { variant, size, shape, className, ...rest } = useThemeProps(
-    "Button",
-    props,
-  );
+const Button = ({
+  variant,
+  size,
+  className,
+  icon,
+  children,
+  ...rest
+}: Props) => {
+  const iconPosition =
+    (icon?.props as { "data-icon"?: string } | undefined)?.["data-icon"] ??
+    "inline-start";
+  const iconEl = icon
+    ? cloneElement(icon as ReactElement<{ "data-icon"?: string }>, {
+        "data-icon": iconPosition,
+      })
+    : null;
 
   return (
     <BaseButton
       {...rest}
-      className={cn(
-        buttonVariants({
-          variant,
-          size,
-          shape,
-        }),
-        className,
-      )}
+      className={cn(buttonVariants({ variant, size }), className)}
       data-variant={variant || "default"}
-    />
+    >
+      {iconEl && iconPosition !== "inline-end" && iconEl}
+      {children}
+      {iconEl && iconPosition === "inline-end" && iconEl}
+    </BaseButton>
   );
 };
+
+export { Button, buttonVariants };

package/src/components/button/components/base-button.tsx

@@ -1,86 +1,63 @@
-import { Slot, Slottable } from "@radix-ui/react-slot";
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { ComponentProps, ReactNode } from "react";
-import { ClickEvent } from "@/models";
-import { LoaderOverlay } from "./loader-overlay";
-import { LoadingIcon } from "./loading-icon";
+import { LoaderCircle } from "lucide-react";
+import { type ComponentProps } from "react";
+import { cn } from "../../../lib";
 
-interface Props extends ComponentProps<"button"> {
-  asChild?: boolean;
+interface Props extends ComponentProps<typeof ButtonPrimitive> {
   loading?: boolean;
-  showLoader?: boolean;
-  icon?: ReactNode;
-  iconPosition?: "start" | "end";
-  loaderReplace?: true;
 }
 
-const baseStyles = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "0.5rem",
-};
+type OnClickEvent = Parameters<
+  NonNullable<ComponentProps<typeof ButtonPrimitive>["onClick"]>
+>[0];
 
 export const BaseButton = ({
-  asChild = false,
   onClick,
   loading: prop,
-  showLoader = true,
-  icon,
-  iconPosition = "start",
-  loaderReplace,
   style,
+  children,
   ...props
 }: Props) => {
-  const Comp = asChild ? Slot : "button";
   const [loading = false, setLoading] = useControllableState<boolean>({
     prop,
     defaultProp: false,
   });
 
-  const handleClick = async (e: ClickEvent) => {
+  const handleClick = async (e: OnClickEvent) => {
     if (!onClick || loading) return;
 
     const onClickResult = onClick(e) as unknown;
 
     if (onClickResult instanceof Promise) {
-      showLoader && setLoading(true);
+      setLoading(true);
       await onClickResult.finally(() => setLoading(false));
     }
   };
 
-  // TODO: Refactorizar lógica de renderización de iconos
-  const renderIconWithLoader = (position: "start" | "end") => {
-    if (position !== iconPosition) return null;
-    const isLoading = loaderReplace ? false : loading;
-
-    return (
-      <>
-        <LoadingIcon loading={isLoading && !icon} animate={true} />
-        {icon && <LoadingIcon loading={isLoading} animate={false} />}
-        {icon && !isLoading && icon}
-      </>
-    );
-  };
-
-  const isLoading = loading && showLoader;
-  const isReplaceMode = loaderReplace && isLoading;
-
   return (
-    <Comp
-      type="button"
+    <ButtonPrimitive
       data-slot="button"
+      data-loading={loading || undefined}
+      aria-busy={loading || undefined}
       {...props}
       onClick={handleClick}
-      style={{
-        ...baseStyles,
-        position: isReplaceMode ? "relative" : undefined,
-        ...style,
-      }}
+      style={style}
     >
-      {renderIconWithLoader("start")}
-      <Slottable>{props.children}</Slottable>
-      {renderIconWithLoader("end")}
-      {isReplaceMode && <LoaderOverlay loading={true} />}
-    </Comp>
+      <span className="inline-flex items-center gap-(--btn-gap)">
+        {children}
+      </span>
+      <LoaderCircle
+        data-loader
+        data-testid="btn-loader"
+        className={cn(
+          "hidden animate-spin",
+          "group-data-[loading]/button:absolute",
+          "group-data-[loading]/button:block",
+          "group-data-[loading]/button:inset-0",
+          "group-data-[loading]/button:m-auto",
+        )}
+      />
+    </ButtonPrimitive>
   );
 };

package/src/components/button/index.ts

@@ -1,3 +1,2 @@
 export * from "./button";
-export * from "./button.variants";
 export * from "./components/base-button";

package/src/components/calendar/calendar.stories.tsx

@@ -9,7 +9,7 @@ import { Calendar } from "./calendar";
  * modos de selección `single`, `range` y `multiple`. Acepta todas las props de `DayPicker`.
  *
  * Por defecto usa `captionLayout="dropdown"` con el componente `Select` de la librería
- * para navegar por mes y año. El rango navegable cubre 100 años hacia atrás y 10 hacia
+ * para navegar por mes y año. El rango navegable cubre 100 años hacia atrás y 100 hacia
  * adelante desde el año actual. Para volver al caption de texto, pasá `captionLayout="label"`.
  *
  * Sobreescribí `components.Dropdown` para reemplazar el dropdown por defecto con cualquier

package/src/components/calendar/calendar.tsx

@@ -14,7 +14,7 @@ import { Select } from "../select/select";
 
 const _year = new Date().getFullYear();
 const DEFAULT_START_MONTH = new Date(_year - 100, 0);
-const DEFAULT_END_MONTH = new Date(_year + 10, 11);
+const DEFAULT_END_MONTH = new Date(_year + 100, 11);
 
 type _Opt = { label: string; value: number };
 
@@ -33,10 +33,10 @@ function CalendarDropdown({
     <Select
       items={items}
       value={selected}
-      className="py-1"
+      className="py-1 h-[32px]"
       getLabel={(o) => o.label}
-      getValue={(o) => String(o.value)}
-      onChange={(item) => {
+      getId={(o) => String(o.value)}
+      onValueChange={(item) => {
         if (!onChange || item === null) return;
         onChange({
           target: { value: String(item.value) },

package/src/components/card/card.stories.tsx

@@ -1,116 +1,188 @@
 import { faker } from "@faker-js/faker";
-import { Meta, StoryObj } from "@storybook/react-vite";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 import { ComponentType } from "react";
 import {
   Button,
   Card,
+  CardAction,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
+  CardRoot,
   CardTitle,
 } from "../../components";
 
 /**
- * El componente Card es un contenedor versátil que permite organizar y presentar contenido
- * de manera estructurada y visualmente atractiva.
- *
- * ### Características principales
- * - Diseño modular y flexible
- * - Soporte para encabezados, contenido y pie de página
- * - Personalizable a través de className
- * - Ideal para mostrar información, productos, artículos, etc.
- *
- * ### Estructura básica
- * ```tsx
- * <Card>
- *   <CardHeader>
- *     <CardTitle>Título del Card</CardTitle>
- *     <CardDescription>Descripción opcional</CardDescription>
- *   </CardHeader>
- *   <CardContent>
- *     Contenido principal
- *   </CardContent>
- *   <CardFooter>
- *     Acciones o contenido adicional
- *   </CardFooter>
- * </Card>
- * ```
+ * Composite card surface. Pass `title`, `description`, `action`, and `footer` as props
+ * to render the full structure without manually composing sub-components.
+ * Use `CardRoot` + primitives (`CardHeader`, `CardTitle`, `CardDescription`, `CardAction`,
+ * `CardContent`, `CardFooter`) directly for layouts the composite cannot express —
+ * for example, placing an `<img>` as the first child automatically clips it to the card's top corners.
+ * `CardAction` renders in the top-right of the header, spanning both title and description rows.
+ * `size="sm"` reduces padding and font size across all nested slots via `data-size` and CSS group selectors.
+ * Sub-components use `data-slot` attributes following the [Base UI](https://base-ui.com/react) slot convention.
  */
 const meta: Meta<typeof Card> = {
-  title: "data display/Card",
+  title: "Components/Card",
   component: Card,
-  tags: ["autodocs"],
   subcomponents: {
+    CardRoot: CardRoot as ComponentType<unknown>,
     CardHeader: CardHeader as ComponentType<unknown>,
     CardTitle: CardTitle as ComponentType<unknown>,
     CardDescription: CardDescription as ComponentType<unknown>,
+    CardAction: CardAction as ComponentType<unknown>,
     CardContent: CardContent as ComponentType<unknown>,
     CardFooter: CardFooter as ComponentType<unknown>,
   },
+  args: {
+    className: "w-[350px]",
+    title: "How to Improve Your Productivity",
+    description: "By Jane Doe · 5 min read",
+  },
+  argTypes: {
+    classNames: { control: false },
+  },
+  tags: ["beta"],
+  parameters: { layout: "centered" },
 };
 
 export default meta;
-
 type Story = StoryObj<typeof Card>;
 
 /**
- * Ejemplo básico de un Card con todos sus componentes.
- * Muestra la estructura típica con encabezado, contenido y pie de página.
+ * `className` styles the card root. `classNames` exposes the `header`,
+ * `title`, `description`, `action`, `content`, and `footer` slots for
+ * fine-grained styling without dropping to primitives.
  */
+export const WithClassNames: Story = {
+  args: {
+    children: "Card body content.",
+    classNames: {
+      title: "text-primary",
+      description: "italic",
+      content: "text-base",
+    },
+  },
+};
+
 export const Default: Story = {
+  render: (args) => (
+    <Card
+      {...args}
+      footer={
+        <>
+          <Button variant="outline">Read more</Button>
+          <Button className="ml-auto">Save</Button>
+        </>
+      }
+    >
+      <p className="text-muted-foreground leading-relaxed">
+        Discover strategies and tools to boost your productivity. Learn to
+        manage your time effectively and stay focused on what matters.
+      </p>
+    </Card>
+  ),
+};
+
+export const Sizes: Story = {
   render: () => (
-    <Card className="w-[350px] shadow-md rounded-lg">
-      <CardHeader className="p-4">
-        <CardTitle className="text-2xl">
-          How to Improve Your Productivity
-        </CardTitle>
-        <CardDescription className="text-sm">By Jane Doe</CardDescription>
-      </CardHeader>
-      <CardContent className="p-4">
-        <p className="text-gray-700 text-base">
-          Discover the best strategies and tools to boost your productivity in
-          work and life. Learn how to manage your time effectively and stay
-          focused on what really matters.
+    <div className="flex flex-col gap-4 w-[350px]">
+      <Card title="Total Revenue" description="Compared to last month">
+        <p className="text-3xl font-bold">$45,231.89</p>
+        <p className="text-xs text-muted-foreground mt-1">
+          +20.1% from last month
         </p>
-      </CardContent>
-      <CardFooter className="px-4 py-3 flex justify-between">
-        <Button variant="outline">Read More</Button>
-        <Button className="bg-blue-600 text-white">Save</Button>
-      </CardFooter>
+      </Card>
+      <Card size="sm" title="Active Users" description="Compared to last month">
+        <p className="text-3xl font-bold">2,350</p>
+        <p className="text-xs text-muted-foreground mt-1">+180 new users</p>
+      </Card>
+    </div>
+  ),
+};
+
+/**
+ * `CardAction` anchors to the top-right corner of the header and spans both the title and description rows.
+ * Pass any node — icon button, badge, menu trigger — via the `action` prop.
+ */
+export const WithAction: Story = {
+  render: (args) => (
+    <Card
+      {...args}
+      title="Team Members"
+      description="Manage your workspace members"
+      action={
+        <Button variant="outline" size="sm">
+          Invite
+        </Button>
+      }
+    >
+      <div className="flex flex-col gap-2">
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex items-center justify-between">
+            <span className="text-sm">{faker.person.fullName()}</span>
+            <span className="text-xs text-muted-foreground">
+              {faker.internet.email()}
+            </span>
+          </div>
+        ))}
+      </div>
+    </Card>
+  ),
+};
+
+export const WithFooter: Story = {
+  render: (args) => (
+    <Card
+      {...args}
+      title="Delete Account"
+      description="This action is permanent and cannot be undone."
+      footer={
+        <div className="flex gap-2 w-full justify-end">
+          <Button variant="outline">Cancel</Button>
+          <Button variant="error">Delete</Button>
+        </div>
+      }
+    >
+      <p className="text-muted-foreground text-sm leading-relaxed">
+        All your data, settings, and integrations will be permanently removed
+        from our servers.
+      </p>
     </Card>
   ),
 };
 
 /**
- * Ejemplo de Card con imagen y diseño de producto.
- * Demuestra cómo integrar elementos multimedia y crear layouts más complejos.
+ * Use `CardRoot` + sub-components for layouts the composite cannot express.
+ * An `<img>` placed as the first child of `CardRoot` auto-clips to the card's top-rounded corners
+ * via the `has-[>img:first-child]:pt-0` and `*:[img:first-child]:rounded-t-xl` selectors.
  */
-export const Media: Story = {
+export const Primitive: Story = {
   render: () => (
-    <Card className="w-[350px] shadow-lg rounded-lg overflow-hidden">
+    <CardRoot className="w-[350px]">
       <img
-        src={faker.image.url()}
-        alt="Featured Product"
+        src={faker.image.urlPicsumPhotos({ width: 350, height: 150 })}
+        alt="Villa Luxury"
         className="w-full h-[150px] object-cover"
       />
-      <CardContent className="p-4">
-        <CardTitle className="text-xl font-bold text-gray-900">
-          Villa Luxury
-        </CardTitle>
-        <CardDescription className="text-sm text-gray-600">
-          Escapa a esta luxuriosa aldea con vistas maravillosas del océano y
-          piscina privada.
-        </CardDescription>
-        <div className="flex items-center mt-4">
-          <span className="text-2xl font-semibold text-gray-900">$750</span>
-          <span className="ml-2 text-sm text-gray-500">/ noche</span>
-        </div>
+      <CardHeader>
+        <CardTitle>Villa Luxury</CardTitle>
+        <CardDescription>Ocean views and private pool.</CardDescription>
+        <CardAction>
+          <Button variant="ghost" size="sm">
+            ♡
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <span className="text-2xl font-semibold">$750</span>
+        <span className="ml-2 text-sm text-muted-foreground">/ night</span>
       </CardContent>
-      <CardFooter className="px-4 py-3 bg-gray-100 flex justify-between">
-        <Button variant="outline">Detalle</Button>
-        <Button className="bg-blue-600 text-white">Comprar</Button>
+      <CardFooter>
+        <Button variant="outline">Details</Button>
+        <Button className="ml-auto">Book</Button>
       </CardFooter>
-    </Card>
+    </CardRoot>
   ),
 };