@fabio.caffarello/react-design-system 3.0.0 → 3.1.0

package/dist/ui/primitives/Button/Button.d.ts

@@ -13,39 +13,55 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     as?: ElementType;
     href?: string;
     target?: string;
+    /**
+     * When true, render via Radix `Slot`: classes, ARIA, ref and remaining
+     * props are projected onto the single child element instead of an
+     * intrinsic `<button>`. The child keeps its own element type and props
+     * intact — including framework-native props like `<Link href prefetch>`.
+     *
+     * `asChild` takes precedence over `as`: if both are supplied, `as` is
+     * ignored and a dev-only warning is logged.
+     *
+     * @example
+     * ```tsx
+     * <Button asChild variant="primary">
+     *   <Link href="/profile" prefetch>Open profile</Link>
+     * </Button>
+     * // → <a class="…button classes" href="/profile" data-prefetch>Open profile</a>
+     * ```
+     */
+    asChild?: boolean;
 }
 /**
  * Button Component
  *
- * A styled button component with variants, sizes, and loading states.
- * Follows Atomic Design principles as an Atom component.
- * Uses Builder Pattern for class construction.
- * Supports polymorphic `as` prop for rendering as different elements (Link, NextLink, etc.).
+ * A styled button with variants, sizes, and loading states.
+ *
+ * Polymorphism — two APIs:
+ *   - `as` (legacy): swap the root element type. `<Button as={Link} href="…">`.
+ *   - `asChild` (recommended): project Button's styling onto the single
+ *     child element. Idiomatic Radix Slot pattern, preserves the child's
+ *     own props and TS type (e.g. `<Link href prefetch>`). When `asChild`
+ *     is true, `as` is ignored.
  *
  * @example
  * ```tsx
  * // Basic usage
- * <Button variant="primary" size="md" onClick={handleClick}>
- *   Click me
- * </Button>
+ * <Button variant="primary" size="md" onClick={handleClick}>Click me</Button>
  *
  * // With icons
- * <Button leftIcon={<Icon />} rightIcon={<Icon />}>
- *   Action
- * </Button>
+ * <Button leftIcon={<Icon />} rightIcon={<Icon />}>Action</Button>
  *
  * // Loading state
- * <Button isLoading loadingText="Saving...">
- *   Save
- * </Button>
+ * <Button isLoading loadingText="Saving...">Save</Button>
  *
- * // As Link
- * <Button as={Link} href="/page">
- *   Navigate
+ * // Polymorphic via asChild (preserves Next Link's TS type and native props)
+ * <Button asChild variant="primary">
+ *   <Link href="/page" prefetch>Open</Link>
  * </Button>
  *
- * // Icon only
- * <Button variant="iconOnly" leftIcon={<Icon />} aria-label="Close" />
+ * // Polymorphic via legacy `as`
+ * <Button as="a" href="/page">Navigate</Button>
  * ```
  */
 declare const Button: import("react").NamedExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/ui/primitives/Chip/Chip.d.ts

@@ -1,17 +1,53 @@
 import { type ReactNode } from "react";
 export type ChipVariant = "default" | "outlined" | "filled";
 export type ChipSize = "sm" | "md" | "lg";
-export interface ChipProps {
+interface ChipBaseProps {
     children: ReactNode;
     variant?: ChipVariant;
     size?: ChipSize;
-    onRemove?: () => void;
     selected?: boolean;
     disabled?: boolean;
     className?: string;
     "aria-label"?: string;
-    onClick?: () => void;
     tabIndex?: number;
 }
+interface ChipStandardProps extends ChipBaseProps {
+    asChild?: false;
+    onRemove?: () => void;
+    onClick?: () => void;
+}
+/**
+ * `asChild` collapses the chip into a single node provided by the
+ * consumer (typically `<Link>`). The non-interactive frame + inner
+ * label-button + X structure is intentionally NOT rendered — the child
+ * IS the chip. As a consequence:
+ *
+ *   - `onClick` and `onRemove` are forbidden at the type level. The
+ *     child's own click handler (and `href`) is what fires; consumers
+ *     who need a removable selected filter use the standard
+ *     (non-asChild) form.
+ *   - `selected` still applies the visual classes via `chipVariants`,
+ *     but NO `aria-pressed` is emitted. Toggle-button semantics on
+ *     `<a>` would lie — a link isn't a two-state control. Consumers
+ *     that need the selected route surfaced to AT users should pass
+ *     `aria-current="page"` (or similar) directly on the child Link.
+ *
+ * @see `.claude/rules/components.md` and the inline a11y notes below.
+ */
+interface ChipAsChildProps extends ChipBaseProps {
+    asChild: true;
+    /**
+     * `onClick` is forbidden when `asChild` is true — the child element
+     * owns interaction. Pass the handler (or `href`) on the child.
+     */
+    onClick?: never;
+    /**
+     * `onRemove` is forbidden when `asChild` is true — the collapsed
+     * node has no slot for an X button. Use the standard (non-asChild)
+     * form when removal is required.
+     */
+    onRemove?: never;
+}
+export type ChipProps = ChipStandardProps | ChipAsChildProps;
 declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLDivElement>>;
 export default Chip;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "3.0.0",
+  "version": "3.1.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -77,6 +77,7 @@
     }
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/postcss": "^4.1.16",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",