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

package/src/components/card/card.tsx

@@ -1,74 +1,175 @@
 import React from "react";
 import { cn } from "../../lib";
 
-export const Card = ({
+export function CardRoot({
   className,
+  size = "default",
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className,
-    )}
-    {...props}
-    data-slot="card"
-  />
-);
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-export const CardHeader = ({
+export function CardHeader({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col space-y-1 p-6", className)}
-    {...props}
-    data-slot="card-header"
-  />
-);
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-export const CardTitle = ({
+export function CardTitle({
   className,
   ...props
-}: React.HTMLAttributes<HTMLHeadingElement>) => (
-  <h3
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className,
-    )}
-    {...props}
-    data-slot="card-title"
-  />
-);
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "cn-font-heading text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-export const CardDescription = ({
+export function CardDescription({
   className,
   ...props
-}: React.HTMLAttributes<HTMLParagraphElement>) => (
-  <p
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-    data-slot="card-description"
-  />
-);
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
 
-export const CardContent = ({
+export function CardAction({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("p-6 pt-0", className)}
-    {...props}
-    data-slot="card-content"
-  />
-);
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
 
-export const CardFooter = ({
+export function CardContent({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-    data-slot="card-footer"
-  />
-);
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  );
+}
+
+export function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+interface CardProps
+  extends Omit<React.ComponentProps<"div">, "children" | "title"> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  size?: "default" | "sm";
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Header wrapper holding title, description, and action. */
+    header?: string;
+    /** Card title text. */
+    title?: string;
+    /** Supporting description below the title. */
+    description?: string;
+    /** Action area on the right of the header. */
+    action?: string;
+    /** Body content rendered between the header and the footer. */
+    content?: string;
+    /** Footer area below the content. */
+    footer?: string;
+  };
+}
+
+export function Card({
+  title,
+  description,
+  action,
+  footer,
+  children,
+  size,
+  className,
+  classNames,
+  ...props
+}: CardProps) {
+  const hasHeader = title || description || action;
+
+  return (
+    <CardRoot size={size} className={className} {...props}>
+      {hasHeader && (
+        <CardHeader className={classNames?.header}>
+          {title && (
+            <CardTitle className={classNames?.title}>{title}</CardTitle>
+          )}
+          {description && (
+            <CardDescription className={classNames?.description}>
+              {description}
+            </CardDescription>
+          )}
+          {action && (
+            <CardAction className={classNames?.action}>{action}</CardAction>
+          )}
+        </CardHeader>
+      )}
+      {children && (
+        <CardContent className={classNames?.content}>{children}</CardContent>
+      )}
+      {footer && (
+        <CardFooter className={classNames?.footer}>{footer}</CardFooter>
+      )}
+    </CardRoot>
+  );
+}

package/src/components/center/center.stories.tsx

@@ -1,18 +1,21 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { Inbox, Phone } from "lucide-react";
-import { Stack } from "../stack";
 import { Center } from ".";
 
 /**
- * Layout primitive that centers its children both horizontally and vertically using flexbox.
- * Supports polymorphic rendering via `as` and an `inline` mode for `inline-flex` contexts.
+ * Layout primitive that centers its single child on both axes via flexbox.
+ * Defaults to `display: flex`. `inline` switches to `inline-flex` for inline contexts.
+ * `as` renders any HTML element for semantic markup.
  */
 const meta: Meta<typeof Center> = {
   title: "Components/Center",
   component: Center,
+  parameters: {
+    layout: "centered",
+  },
   argTypes: {
     children: { control: false },
     className: { control: false },
+    as: { control: false },
   },
 };
 
@@ -21,61 +24,41 @@ type Story = StoryObj<typeof Center>;
 
 export const Default: Story = {
   render: () => (
-    <Center className="h-[300px] w-full border rounded-lg border-dashed">
-      <Stack
-        direction="vertical"
-        align="center"
-        gap={8}
-        className="text-muted-foreground"
-      >
-        <Inbox className="size-10 stroke-1" />
-        <span className="text-sm font-medium">No results found</span>
-        <span className="text-xs">Try adjusting your search or filters</span>
-      </Stack>
-    </Center>
-  ),
-};
-
-export const Icon: Story = {
-  render: () => (
-    <Center className="w-fit p-4 bg-primary text-white rounded-full">
-      <Phone />
+    <Center className="h-48 w-72 border border-dashed rounded-lg">
+      <span className="text-sm text-muted-foreground">Centered</span>
     </Center>
   ),
 };
 
 /**
- * `inline` switches the display to `inline-flex`, allowing the Center to sit inline with text
- * or other inline elements without breaking the flow.
+ * `inline` swaps `flex` for `inline-flex` so the Center flows with surrounding inline content
+ * instead of starting a new block. Useful for badges, counters, and icon chips inside text.
  */
 export const Inline: Story = {
   render: () => (
-    <p className="text-sm">
-      Text before{" "}
+    <p className="text-sm max-w-sm">
+      You have{" "}
       <Center
         inline
-        className="w-8 h-8 bg-primary text-white rounded-full text-xs"
+        className="w-6 h-6 bg-primary text-primary-foreground rounded-full text-xs font-medium"
       >
-        42
+        3
       </Center>{" "}
-      text after
+      unread messages in your inbox.
     </p>
   ),
 };
 
 /**
- * `as` renders the Center as a different HTML element for semantic markup.
- * Common use cases: `main` for page root, `section` for content areas.
+ * `as` swaps the rendered element while keeping the centering behavior.
+ * Pick the tag that matches the role: `main`, `section`, `header`, `footer`.
  */
 export const As: Story = {
   render: () => (
-    <Center
-      as="main"
-      className="bg-secondary w-[400px] aspect-square rounded p-4"
-    >
-      <div className="bg-primary text-primary-foreground rounded p-4">
-        Rendered as &lt;main&gt;
-      </div>
+    <Center as="section" className="h-48 w-72 bg-muted rounded-lg">
+      <code className="text-xs px-2 py-1 bg-background rounded">
+        &lt;section&gt;
+      </code>
     </Center>
   ),
 };

package/src/components/checkbox/checkbox.stories.tsx

@@ -32,7 +32,7 @@ const meta: Meta<typeof Checkbox> = {
   },
   argTypes: {
     onCheckedChange: { control: false },
-    indicatorProps: { control: false },
+    classNames: { control: false },
     tooltip: { control: false },
   },
 };
@@ -42,6 +42,22 @@ type Story = StoryObj<typeof Checkbox>;
 
 export const Default: Story = {};
 
+/**
+ * `className` styles the checkbox root. `classNames` exposes the
+ * `wrapper`, `indicator`, and `label` slots — the `wrapper` slot only
+ * applies when a `label` is rendered.
+ */
+export const WithClassNames: Story = {
+  args: {
+    label: "Custom styled",
+    classNames: {
+      wrapper: "gap-3",
+      indicator: "data-checked:bg-emerald-500",
+      label: "text-emerald-700 font-medium",
+    },
+  },
+};
+
 /**
  * Pass `label` for a linked `<label>` element. `children` works as an alias —
  * `label` takes priority when both are provided.
@@ -179,7 +195,7 @@ export const Group: Story = {
     <Checkbox.Group
       legend="Notifications"
       defaultValue={["email"]}
-      onChange={action("onChange")}
+      onValueChange={action("onValueChange")}
     >
       <Checkbox.Item value="email" label="Email" />
       <Checkbox.Item value="sms" label="SMS" />
@@ -227,7 +243,11 @@ export const GroupParent: Story = {
           onCheckedChange={(checked) => setValue(checked ? ALL : [])}
         />
         <div className="ml-6 border-l-2 pl-4">
-          <Checkbox.Group value={value} onChange={setValue} allValues={ALL}>
+          <Checkbox.Group
+            value={value}
+            onValueChange={setValue}
+            allValues={ALL}
+          >
             <Checkbox.Item value="email" label="Email" />
             <Checkbox.Item value="sms" label="SMS" />
             <Checkbox.Item value="push" label="Push notifications" />
@@ -239,7 +259,7 @@ export const GroupParent: Story = {
 };
 
 /**
- * Use `value` + `onChange` for a controlled group.
+ * Use `value` + `onValueChange` for a controlled group.
  */
 export const GroupControlled: Story = {
   render: () => {
@@ -248,7 +268,7 @@ export const GroupControlled: Story = {
       <Checkbox.Group
         legend="Contact channel"
         value={value}
-        onChange={setValue}
+        onValueChange={setValue}
       >
         <Checkbox.Item value="email" label="Email" />
         <Checkbox.Item value="sms" label="SMS" />

package/src/components/checkbox/checkbox.tsx

@@ -92,7 +92,7 @@ export function CheckboxIndicator({
 
 // ── Group context ──────────────────────────────────────────────────────────────
 
-const CheckboxGroupContext = createContext<{
+export const CheckboxGroupContext = createContext<{
   controlFirst: boolean;
   invalid: boolean;
 }>({
@@ -106,13 +106,21 @@ interface CheckboxProps extends Omit<CheckboxPrimitive.Root.Props, "children"> {
   children?: ReactNode;
   label?: ReactNode;
   tooltip?: ReactNode;
-  indicatorProps?: CheckboxPrimitive.Indicator.Props;
   controlFirst?: boolean;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Flex wrapper around checkbox and label (only rendered when a label is provided). */
+    wrapper?: string;
+    /** Checkmark indicator inside the checkbox. */
+    indicator?: string;
+    /** Label element next to the checkbox. */
+    label?: string;
+  };
 }
 
 function CheckboxSingle({
   className,
-  indicatorProps,
+  classNames,
   label,
   children,
   tooltip,
@@ -132,7 +140,7 @@ function CheckboxSingle({
       required={required}
       {...props}
     >
-      <CheckboxIndicator {...indicatorProps} />
+      <CheckboxIndicator className={classNames?.indicator} />
     </CheckboxRoot>
   );
 
@@ -142,10 +150,16 @@ function CheckboxSingle({
         className={cn(
           "flex select-none items-center gap-x-2",
           !controlFirst && "flex-row-reverse justify-end",
+          classNames?.wrapper,
         )}
       >
         {checkbox}
-        <Label htmlFor={idToUse} required={required} tooltip={tooltip}>
+        <Label
+          htmlFor={idToUse}
+          required={required}
+          tooltip={tooltip}
+          className={classNames?.label}
+        >
           {labelContent}
         </Label>
       </div>
@@ -160,10 +174,20 @@ function CheckboxSingle({
 export interface CheckboxItemProps
   extends Omit<CheckboxPrimitive.Root.Props, "children"> {
   label: ReactNode;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Flex wrapper around checkbox and label. */
+    wrapper?: string;
+    /** Checkmark indicator inside the checkbox. */
+    indicator?: string;
+    /** Label element next to the checkbox. */
+    label?: string;
+  };
 }
 
 function CheckboxItem({
   className,
+  classNames,
   label,
   id,
   ...props
@@ -178,12 +202,15 @@ function CheckboxItem({
         className={cn(
           "flex select-none items-center gap-x-2",
           !controlFirst && "flex-row-reverse justify-end",
+          classNames?.wrapper,
         )}
       >
         <CheckboxRoot id={idToUse} className={className} {...props}>
-          <CheckboxIndicator />
+          <CheckboxIndicator className={classNames?.indicator} />
         </CheckboxRoot>
-        <Label htmlFor={idToUse}>{label}</Label>
+        <Label htmlFor={idToUse} className={classNames?.label}>
+          {label}
+        </Label>
       </div>
     </FieldBase.Root>
   );
@@ -211,18 +238,29 @@ function CheckboxLegend({
 
 // ── Composite: Checkbox.Group ──────────────────────────────────────────────────
 
-export interface CheckboxGroupProps {
+interface CheckboxGroupProps {
   legend?: ReactNode;
   children: ReactNode;
   error?: string;
   description?: ReactNode;
   defaultValue?: string[];
   value?: string[];
-  onChange?: (value: string[]) => void;
+  onValueChange?: (value: string[]) => void;
   allValues?: string[];
   disabled?: boolean;
   controlFirst?: boolean;
   className?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Legend element above the items. */
+    legend?: string;
+    /** Wrapper around the rendered children (items). */
+    items?: string;
+    /** Description shown below the items when there is no error. */
+    description?: string;
+    /** Error message shown below the items. */
+    error?: string;
+  };
 }
 
 function CheckboxGroup({
@@ -232,27 +270,50 @@ function CheckboxGroup({
   description,
   defaultValue,
   value,
-  onChange,
+  onValueChange,
   allValues,
   disabled,
   controlFirst = true,
   className,
+  classNames,
 }: CheckboxGroupProps): React.ReactElement {
   return (
     <CheckboxGroupContext.Provider value={{ controlFirst, invalid: !!error }}>
       <CheckboxGroupPrimitive
         defaultValue={defaultValue}
         value={value}
-        onValueChange={onChange}
+        onValueChange={onValueChange}
         allValues={allValues}
         disabled={disabled}
       >
         <Fieldset.Root className={cn("flex flex-col gap-3", className)}>
-          {legend && <CheckboxLegend>{legend}</CheckboxLegend>}
-          <div className="flex flex-col gap-2">{children}</div>
-          {error && <p className="text-sm font-medium text-error">{error}</p>}
+          {legend && (
+            <CheckboxLegend className={classNames?.legend}>
+              {legend}
+            </CheckboxLegend>
+          )}
+          <div className={cn("flex flex-col gap-2", classNames?.items)}>
+            {children}
+          </div>
+          {error && (
+            <p
+              className={cn(
+                "text-sm font-medium text-error",
+                classNames?.error,
+              )}
+            >
+              {error}
+            </p>
+          )}
           {!error && description && (
-            <p className="text-sm text-muted-foreground">{description}</p>
+            <p
+              className={cn(
+                "text-sm text-muted-foreground",
+                classNames?.description,
+              )}
+            >
+              {description}
+            </p>
           )}
         </Fieldset.Root>
       </CheckboxGroupPrimitive>