@fabio.caffarello/react-design-system 2.1.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/dist/ui/tokens/colors/brand.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Brand Primitive Palettes — TS mirror of src/styles/primitives/brand.css
+ *
+ * Brand-primary: institutional navy from brasil-a-vera globals.css.
+ * Brand-secondary: OKLCH-derived from ADR-024 brasil-a-vera purple
+ *   (reproducible via scripts/derive-brand-secondary.mjs).
+ *
+ * Distinct from PRIMITIVE_COLORS Tailwind tones (indigo/pink/cyan/...)
+ * which stay honest to their official Tailwind v4 values. Semantic tokens
+ * point at these brand palettes, not at Tailwind tones.
+ *
+ * @brand brasil-a-vera (default, overridable)
+ */
+import type { ColorPalette } from "./types";
+/**
+ * Brand Primary — institutional navy
+ */
+export declare const BRAND_PRIMARY: ColorPalette;
+/**
+ * Brand Secondary — ADR-024 purple, OKLCH-derived (hue 295)
+ */
+export declare const BRAND_SECONDARY: ColorPalette;

package/dist/ui/tokens/colors/index.d.ts

@@ -1,25 +1,26 @@
 /**
- * AIppin Design System - Color Tokens Index
+ * Design System - Color Tokens Index
  *
  * Central export for all color-related tokens and utilities.
  *
- * @brand AIppin
+ * @brand brasil-a-vera (default, overridable)
  * @version 1.0.0
  */
 export type { ColorScale, PrimitiveColorName, SemanticColorName, TextColorName, BgColorName, BorderColorName, StateColorName, ThemeMode, ThemeVariant, ColorToken, ColorPalette, SemanticColor, SemanticColorPalette, PrimitiveColors, ThemeColors, GetColorOptions, GetColorClassOptions, } from "./types";
 export { COLOR_SCALES } from "./types";
+export { BRAND_PRIMARY, BRAND_SECONDARY } from "./brand";
 export { INDIGO, VIOLET, CYAN, SLATE, GRAY, EMERALD, GREEN, AMBER, YELLOW, ORANGE, ROSE, RED, SKY, BLUE, FUCHSIA, PINK, PURPLE, TEAL, LIME, PRIMITIVE_COLORS, getPrimitiveColor, getPrimitiveColorPalette, } from "./primitives";
 export { SEMANTIC_COLORS, SEMANTIC_COLORS_LIGHT, SEMANTIC_COLORS_DARK, getSemanticColor, getSemanticColorRole, } from "./semantic";
 export { getColor, getSemanticColorValue, getColorClass, getSemanticColorClass, getHoverColorClass, getFocusColorClass, getFocusRingClass, withOpacity, isLightColor, getContrastColor, blendColors, lighten, darken, } from "./utils";
 export declare const BRAND_COLORS: {
     readonly primary: {
-        readonly name: "indigo";
+        readonly name: "brand-primary";
         readonly light: 400;
         readonly default: 500;
         readonly dark: 600;
     };
     readonly secondary: {
-        readonly name: "violet";
+        readonly name: "brand-secondary";
         readonly light: 400;
         readonly default: 500;
         readonly dark: 600;

package/dist/ui/tokens/colors/primitives.d.ts

@@ -1,10 +1,10 @@
 /**
- * AIppin Design System - Primitive Color Tokens
+ * Design System - Primitive Color Tokens
  *
  * Complete color palettes with all shades (50-950).
  * These match the CSS variables defined in primitives/colors.css
  *
- * @brand AIppin
+ * @brand brasil-a-vera (default, overridable)
  * @version 1.0.0
  */
 import type { ColorPalette, ColorToken, ColorScale, PrimitiveColorName, PrimitiveColors } from "./types";

package/dist/ui/tokens/colors/semantic.d.ts

@@ -1,10 +1,10 @@
 /**
- * AIppin Design System - Semantic Color Tokens
+ * Design System - Semantic Color Tokens
  *
  * Semantic colors that reference primitive palettes.
  * These are the colors you should use in components.
  *
- * @brand AIppin
+ * @brand brasil-a-vera (default, overridable)
  * @version 1.0.0
  */
 import type { SemanticColor, SemanticColorName, SemanticColorPalette, ColorToken } from "./types";

package/dist/ui/tokens/colors/types.d.ts

@@ -1,9 +1,9 @@
 /**
- * AIppin Design System - Color Token Types
+ * Design System - Color Token Types
  *
  * TypeScript types for the color system.
  *
- * @brand AIppin
+ * @brand brasil-a-vera (default, overridable)
  * @version 1.0.0
  */
 /**
@@ -17,8 +17,15 @@ export type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 90
 export declare const COLOR_SCALES: ColorScale[];
 /**
  * Primitive color names (raw color palettes)
- */
-export type PrimitiveColorName = "indigo" | "violet" | "cyan" | "slate" | "gray" | "emerald" | "green" | "amber" | "yellow" | "orange" | "rose" | "red" | "sky" | "blue" | "fuchsia" | "pink" | "purple" | "teal" | "lime";
+ *
+ * Two families coexist:
+ * - Tailwind tones (indigo, violet, ..., lime) — honest to Tailwind v4 HEX.
+ * - Brand primitives (brand-primary, brand-secondary) — the design system's
+ *   own scales, declared in src/styles/primitives/brand.css and mirrored
+ *   in src/ui/tokens/colors/brand.ts. These are the reskin surface;
+ *   semantic tokens reference them, not Tailwind tones.
+ */
+export type PrimitiveColorName = "brand-primary" | "brand-secondary" | "indigo" | "violet" | "cyan" | "slate" | "gray" | "emerald" | "green" | "amber" | "yellow" | "orange" | "rose" | "red" | "sky" | "blue" | "fuchsia" | "pink" | "purple" | "teal" | "lime";
 /**
  * Semantic color names (meaningful colors)
  */

package/dist/ui/tokens/colors/utils.d.ts

@@ -1,9 +1,9 @@
 /**
- * AIppin Design System - Color Utilities
+ * Design System - Color Utilities
  *
  * Helper functions for working with colors.
  *
- * @brand AIppin
+ * @brand brasil-a-vera (default, overridable)
  * @version 1.0.0
  */
 import type { ColorToken, ColorScale, PrimitiveColorName, SemanticColorName, GetColorOptions, GetColorClassOptions } from "./types";

package/dist/ui/tokens/index.d.ts

@@ -3,7 +3,7 @@
  *
  * Centralized exports for all design tokens.
  *
- * @brand AIppin
+ * @brand brasil-a-vera (default, overridable)
  * @version 2.0.0
  */
 export * from "./colors/index";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "2.1.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",
@@ -111,6 +112,7 @@
     "@vitest/coverage-v8": "^4.1.8",
     "autoprefixer": "^10.4.21",
     "baseline-browser-mapping": "^2.10.32",
+    "culori": "^4.0.2",
     "dependency-cruiser": "^17.3.6",
     "eslint": "^10.4.1",
     "eslint-plugin-react-hooks": "^5.2.0",