ctc-component-library 0.3.0 → 1.0.0-alpha.3

package/MIGRATION.md

@@ -0,0 +1,301 @@
+# Migration Guide: v0.x → v1.0
+
+> ctc-component-library v1.0 reescribe la librería sobre **shadcn/ui + Radix + Tailwind v4 + cva**, drop completo de **antd** y **SCSS**, y rediseña la distribución con **subpath exports por componente** para tree-shaking real.
+
+## TL;DR
+
+```diff
+- import { Button, Modal } from 'ctc-component-library';
++ import { Button } from 'ctc-component-library/button';
++ import { Dialog } from 'ctc-component-library/dialog';
+- import 'ctc-component-library/dist/styles.css';
++ import 'ctc-component-library/theme.css';
+```
+
+Bundle resultante (proyecto Vite consumiendo 5 componentes): **~95% más chico** vs v0.3.
+
+## Estado del rewrite
+
+Marcado en orden de implementación:
+
+### Tier 1 — Drop-in atoms
+
+- [x] `Button`
+- [x] `Avatar` (`Avatar`, `AvatarImage`, `AvatarFallback`)
+- [x] `Badge`
+- [x] `Label`
+- [x] `Spinner`
+- [x] `Typography`
+- [x] `Alert` (`Alert`, `AlertTitle`, `AlertDescription`)
+- [x] `Icon` (wrapper `@phosphor-icons/react`)
+- [x] `Checkbox`
+- [x] `Switch` (ex `Toggle`)
+- [x] `RadioGroup` (ex `RadioButton`)
+
+### Tier 2 — Forms
+
+- [x] `Field`/`FieldGroup`/`FieldLabel`/`FieldDescription`/`FieldSet`/`FieldLegend`
+- [x] `Input` (ex `TextInput`)
+- [x] `NumberInput` (ex `InputNumber`)
+- [x] `DatePicker` (ex `Datepicker`)
+- [x] `TimePicker` (ex `Timepicker`)
+
+### Tier 3 — Overlays
+
+- [x] `Dialog` (ex `Modal`/`ModalV2`)
+- [x] `Popover` (con Arrow heredada de `ModalV2.arrow`)
+- [x] `Tooltip`
+- [x] `Tabs` (unifica `Tab`+`TabButton`, variant `segmented` | `underline`)
+- [x] `Toast` (sonner re-export)
+
+### Tier 4 — Selection
+
+- [x] `Select` (ex `Dropdown`)
+- [x] `Combobox` (ex `DropdownFilter` con async/infinite)
+- [x] `MultiSelect` (ex `DropdownMultiple`)
+- [x] `SelectCountry` (preset, ex `DropdownCountry`)
+- [x] `SelectPhone` (preset, ex `DropdownPhone`)
+
+### Tier 5 — Data
+
+- [x] `DataTable` (TanStack + shadcn Table primitives, ex `Table`)
+
+### Estado
+
+- [x] Codemod `barrel-to-subpath` (`codemods/barrel-to-subpath.cjs`)
+- [x] Codemod `v0-to-v1` (`codemods/v0-to-v1.cjs`) + `icon-mapping.json`
+- [x] Stories: 28/28 componentes + presets
+- [x] Tests: 27 archivos / 73 tests pasando (todos los componentes y presets)
+- [x] Build verde (`bun run build`) — 28 chunks, dist 536KB total
+- [x] `bunx tsc --noEmit` clean
+- [x] Motion / microinteractions (Emil Kowalski philosophy): custom easings, stagger en selects/combobox/multi-select (35ms entre items), press feedback en todos los pressables, asymmetric enter/exit, origin-aware popovers/tooltips/selects, reduced-motion guard. Ver DESIGN.md § Motion.
+- [ ] Visual regression (Chromatic) reset baseline
+- [ ] `axe-core` integration en Storybook
+- [ ] Push a remote + CI pipeline para v1
+
+## Cambios por componente
+
+### Button
+
+```diff
+- import { ButtonV2 as Button } from 'ctc-component-library';
++ import { Button } from 'ctc-component-library/button';
+
+- <Button type="primary" primaryVariant="success" size="big" iconOnly>...</Button>
++ <Button variant="success" size="lg">...</Button>
+
+- <Button type="secondary" secondaryVariant="skyblue" />
++ <Button variant="outline-skyblue" />
+
+- <Button preffix={<Icon iconName="check" />} text="OK" />
++ <Button><Check data-icon="inline-start" />OK</Button>
+
+- <Button fullWidth />
++ <Button className="w-full" />
+```
+
+**Variants nuevas** (una sola prop `variant`, sin `primaryVariant`/`secondaryVariant`):
+
+| v0 | v1 |
+|---|---|
+| `type=primary` | `variant=brand` |
+| `type=primary` `primaryVariant=neutral` | `variant=default` |
+| `type=primary` `primaryVariant=skyblue` | `variant=skyblue` |
+| `type=primary` `primaryVariant=success` | `variant=success` |
+| `type=primary` `primaryVariant=error` | `variant=destructive` |
+| `type=secondary` | `variant=outline` |
+| `type=secondary` `secondaryVariant=skyblue` | `variant=outline-skyblue` |
+| `type=tertiary` | `variant=ghost` |
+
+**Size**: `small`/`medium`/`big` → `sm`/`md`/`lg` (heights 32/48/56px). `iconOnly` se mantiene como boolean prop separado; combinado con size produce dimensiones cuadradas: `sm`+`iconOnly`=24×24, `md`+`iconOnly`=32×32, `lg`+`iconOnly`=40×40.
+**Loading**: `loading` se mantiene (built-in Spinner). **Iconos**: children con `data-icon="inline-start"` o `"inline-end"` (no más `preffix`/`suffix`).
+
+### Toast
+
+```diff
+- import { ToastContextProvider, useToast } from 'ctc-component-library';
++ import { Toaster, toast } from 'ctc-component-library/toast';
+
+  // Root del app:
+- <ToastContextProvider>{children}</ToastContextProvider>
++ <Toaster />
++ {children}
+
+  // En cualquier módulo:
+- const { toast } = useToast();
+- toast.success('Guardado');
++ toast.success('Guardado');
+
+  // Action:
+- toast.success(msg, { action: <Button onClick={...}>Deshacer</Button> })
++ toast.success(msg, { action: { label: 'Deshacer', onClick } })
+```
+
+`useToast()`/`ToastContextProvider`/`contextHolder` desaparecen. sonner no requiere context ni hook.
+
+### Modal → Dialog
+
+```diff
+- import { ModalV2 as Modal, ModalContent, ModalTrigger, ... } from 'ctc-component-library';
++ import { Dialog, DialogContent, DialogTrigger, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from 'ctc-component-library/dialog';
+
+- <Modal isOpen={open} onOpenChange={set}>
+-   <ModalTrigger><Button>Open</Button></ModalTrigger>
+-   <ModalContent>
+-     <ModalTitle>Title</ModalTitle>
+-     <ModalDescription>...</ModalDescription>
+-     <ModalBody>...</ModalBody>
+-     <ModalFooter>
+-       <ModalCloseButton>Cancel</ModalCloseButton>
+-       <ModalActionButton onClick={(e, close) => { do(); close(); }}>Confirm</ModalActionButton>
+-     </ModalFooter>
+-   </ModalContent>
+- </Modal>
+
++ <Dialog open={open} onOpenChange={set}>
++   <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
++   <DialogContent>
++     <DialogHeader>
++       <DialogTitle>Title</DialogTitle>
++       <DialogDescription>...</DialogDescription>
++     </DialogHeader>
++     {/* body inline, sin wrapper */}
++     <DialogFooter>
++       <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
++       <Button onClick={async () => { await action(); set(false); }}>Confirm</Button>
++     </DialogFooter>
++   </DialogContent>
++ </Dialog>
+```
+
+**Drops**: `Modal` V1 (deprecated en v0.x), `ModalBody`, `ModalActionButton`, `ModalCloseButton` (usar `<DialogClose asChild><Button/></DialogClose>`).
+**Arrow**: `ModalV2 arrow={true} arrowPosition=...` se migra a **`Popover`** (semánticamente correcto).
+
+### Dropdowns
+
+```diff
+- import { Dropdown } from 'ctc-component-library';
++ import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from 'ctc-component-library/select';
+
+- import { DropdownFilter } from 'ctc-component-library';
++ import { Combobox } from 'ctc-component-library/combobox';
+
+- import { DropdownMultiple } from 'ctc-component-library';
++ import { MultiSelect } from 'ctc-component-library/multi-select';
+
+- import { DropdownCountry } from 'ctc-component-library';
++ import { SelectCountry } from 'ctc-component-library/select-country';
+
+- import { DropdownPhone } from 'ctc-component-library';
++ import { SelectPhone } from 'ctc-component-library/select-phone';
+```
+
+API array `options=[]` → JSX compound. Codemod expande automáticamente.
+
+### Tabs
+
+```diff
+- import { Tab } from 'ctc-component-library';
++ import { Tabs, TabsList, TabsTrigger, TabsContent } from 'ctc-component-library/tabs';
+
+- <Tab tabs={[{label: 'A', content: <A/>}, {label: 'B', content: <B/>}]} defaultActiveKey={0} />
++ <Tabs defaultValue="a" variant="underline">
++   <TabsList>
++     <TabsTrigger value="a">A</TabsTrigger>
++     <TabsTrigger value="b">B</TabsTrigger>
++   </TabsList>
++   <TabsContent value="a"><A/></TabsContent>
++   <TabsContent value="b"><B/></TabsContent>
++ </Tabs>
+```
+
+`Tab` (underline) y `TabButton` (segmented) se unifican en `Tabs` con `variant="underline" | "segmented"`.
+
+### Toggle → Switch
+
+```diff
+- import { Toggle } from 'ctc-component-library';
++ import { Switch } from 'ctc-component-library/switch';
+```
+
+### RadioButton → RadioGroup
+
+```diff
+- import { RadioButton } from 'ctc-component-library';
++ import { RadioGroup, RadioGroupItem } from 'ctc-component-library/radio-group';
+```
+
+### TextInput / InputNumber
+
+Ambos se envuelven obligatoriamente en `Field`:
+
+```diff
+- <TextInput label="Email" errors={[err]} value={x} onChange={...} />
++ <FieldGroup>
++   <Field data-invalid={!!err}>
++     <FieldLabel>Email</FieldLabel>
++     <Input value={x} onChange={...} aria-invalid={!!err} />
++     {err && <FieldDescription>{err}</FieldDescription>}
++   </Field>
++ </FieldGroup>
+```
+
+### Table → DataTable
+
+```diff
+- import { Table } from 'ctc-component-library';
++ import { DataTable } from 'ctc-component-library/data-table';
++ import type { ColumnDef } from '@tanstack/react-table';
+
+- <Table columns={antdColumns} data={rows} expandable={{ expandedRowData, expandedRowColumns }} />
++ <DataTable<Row> columns={columns} data={rows} expandable={{ expandedRowData, expandedRowColumns }} />
+```
+
+Columns ahora son `ColumnDef<T>[]` (TanStack). API `expandedRowData`/`expandedRowColumns`/`alignSubRowsWithParent` se preserva tal cual.
+
+### Iconos
+
+```diff
+- import { Icon } from 'ctc-component-library';
+- <Icon iconName="check_circle" size="24" />
++ import { CheckCircle } from '@phosphor-icons/react';
++ <CheckCircle size={24} />
+```
+
+`@material-symbols/font-400` se remueve de deps. Tabla de mapping Material Symbols → Phosphor disponible en `codemods/icon-mapping.json`. Faltantes (~15%) marcados como TODO por el codemod.
+
+## Tokens (theme)
+
+```diff
+- import { colors, shapes, spacing } from 'ctc-component-library/theme/colors';
++ import { colors, shapes, spacing } from 'ctc-component-library/theme';
+```
+
+Estructura sigue compatible. Drift TS↔SCSS desaparece (un solo origen: `src/theme.css` con `@theme inline`).
+
+## Estilos
+
+```diff
+- import 'ctc-component-library/dist/styles.css';
++ import 'ctc-component-library/theme.css';
+```
+
+Tailwind v4 requerido en el consumer. Si seguís en Tailwind v3, instalar `@tailwindcss/postcss-v3-bridge` (ver docs Tailwind).
+
+## Codemods
+
+```bash
+# Fase 0 (sobre v0.99): mueve imports a subpath sin cambiar comportamiento.
+npx ctc-component-library codemod barrel-to-subpath --path src/
+
+# Fase 2 (al adoptar v1.0): renames + props + Modal→Dialog + Toast→sonner + etc.
+npx ctc-component-library codemod v0-to-v1 --path src/
+```
+
+Idempotentes. Generan diff revisable. TODO comments donde no pueden inferir automáticamente.
+
+## Out of scope en v1.0
+
+- Light/dark themes (planeado v1.1).
+- React 19 / RSC (lib sigue client-only).
+- i18n / RTL.

package/README.md

@@ -1,101 +1,70 @@
 # ctc-component-library
 
-## Requirements
+> v1.0 — React + TypeScript + **Tailwind v4** + **shadcn/Radix**.
+> Branch en migración. Ver [MIGRATION.md](./MIGRATION.md) para v0.x → v1.0 y [DESIGN.md](./DESIGN.md) para tokens.
 
-```
-node v18.19.1 or above
-```
+## Requisitos
 
-## Install
+- Node ≥ 18.19.1
+- React 18 o 19
+- Tailwind CSS v4 (en el consumer)
 
-```
-npm install --save @ctc-component-library
-```
-
-## Run local
-
-```
-- npm install
-- npm run storybook
-```
-
-## To publish
-
-```
-- Increase the version on package.json
-- Push to main branch, the actions to publish and deploy will be run
-```
-
-## Material Symbols demo
-
-```
-- Here you can preview all the icons
-https://marella.me/material-symbols/demo/
+## Install
 
-- Usage
-https://github.com/marella/material-symbols/tree/main/material-symbols#usage
+```bash
+npm install ctc-component-library
 ```
 
-### Installing `yalc` on Your Machine
+## Uso
 
-Using NPM:
+Importar el theme una vez en el root del consumer:
 
-```
-npm i yalc -g
-```
-
-Using Yarn:
-
-```
-yarn global add yalc
+```ts
+import 'ctc-component-library/theme.css';
 ```
 
-## Updating the Library with yalc
+Importar componentes desde subpath (tree-shaking real):
 
-Once yalc is installed, navigate to the root of the library and execute:
+```tsx
+import { Button } from 'ctc-component-library/button';
+import { Dialog, DialogContent, DialogTrigger } from 'ctc-component-library/dialog';
+import { toast, Toaster } from 'ctc-component-library/toast';
 
+<Button variant="brand" size="md">Send</Button>
 ```
-ctc-component-library % yarn yalc:update
-```
-
-Then, in the root of the project where the library will be installed (e.g., Backoffice), execute:
 
-```
-ctc-backoffice-frontend % yalc add ctc-component-library
-```
+> **Solo subpath imports.** No hay barrel raíz: `import … from 'ctc-component-library'` no existe. Cada componente se importa desde su subpath (`/button`, `/dialog`, …) para tree-shaking real. Ver `llms.txt` para el catálogo completo (import path + props + variantes).
 
-## Using the Components
+## Desarrollo local
 
-Now you can use the components, for example:
-
-```
-import { Button } from 'ctc-component-library';
-
-const SomeForm: React.FC = () => (
-  <Button type="primary" text="Send" />
-);
+```bash
+pnpm install
+pnpm storybook   # http://localhost:6006
+pnpm build
+pnpm test
 ```
 
-This allows you to have the library installed locally, make changes or adjustments to any component in the library, and validate them immediately without having to go through the process of pull requests, merges, and deployment to NPM.
-
-## Updating the Library in a Project
+### yalc (probar contra consumer local)
 
-After making a change to a component in the library, and if you need to see this change in the project consuming the library, you must build and update the package in the local yalc repository. Then, remove and add the library package again in the consuming project. To do this:
+```bash
+# Lib:
+pnpm yalc:update
 
-Navigate to the root of the library and execute:
-
-```
-ctc-component-library % yarn yalc:update
+# Consumer:
+yalc add ctc-component-library
 ```
 
-Navigate to the root of the project consuming the library (e.g., Backoffice) and to remove the library, execute:
+## Estructura
 
 ```
-ctc-backoffice-frontend % yalc remove ctc-component-library
+src/
+  components/   # un dir por componente, exporta vía /button, /dialog, etc.
+  presets/      # composiciones pre-armadas (SelectCountry, SelectPhone)
+  lib/cn.ts     # clsx + tailwind-merge
+  theme/        # tokens TS (colors, spacing, shapes)
+  theme.css     # @theme tokens (Tailwind v4)
 ```
 
-Then, to add the library, execute:
+## Estado del rewrite
 
-```
-ctc-backoffice-frontend % yalc add ctc-component-library
-```
+Ver checklist en [MIGRATION.md](./MIGRATION.md#estado-del-rewrite).

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const alertVariants: (props?: ({
+    variant?: "success" | "destructive" | "info" | "warning" | null | undefined;
+    size?: "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
+    hideIcon?: boolean;
+    onDismiss?: () => void;
+}
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export {};

package/dist/components/Alert/Alert.js

@@ -0,0 +1,73 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { cva as n } from "class-variance-authority";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { CheckCircle as a, Info as o, Warning as s, WarningCircle as c, X as l } from "@phosphor-icons/react";
+//#region src/components/Alert/Alert.tsx
+var u = n(["relative w-full rounded-x2 p-x3 flex gap-x4 items-center font-sans", "[animation:ctc-fade-rise_var(--duration-base)_var(--ease-out)]"], {
+	variants: {
+		variant: {
+			info: "bg-skyblue-lighter text-secondary",
+			success: "bg-success-light text-success",
+			warning: "bg-alert-light text-alert",
+			destructive: "bg-error-light text-error"
+		},
+		size: {
+			sm: "",
+			lg: "shadow-[0px_1px_25px_0px_rgba(0,0,0,0.04)]"
+		}
+	},
+	defaultVariants: {
+		variant: "info",
+		size: "lg"
+	}
+}), d = {
+	info: o,
+	success: a,
+	warning: s,
+	destructive: c
+}, f = t.forwardRef(({ className: t, variant: n = "info", size: a = "lg", hideIcon: o = !1, onDismiss: s, children: c, ...f }, p) => {
+	let m = d[n];
+	return /* @__PURE__ */ i("div", {
+		ref: p,
+		role: "alert",
+		className: e(u({
+			variant: n,
+			size: a
+		}), t),
+		...f,
+		children: [
+			!o && /* @__PURE__ */ r(m, {
+				weight: "fill",
+				className: "size-6 shrink-0"
+			}),
+			/* @__PURE__ */ r("div", {
+				className: e("flex-1", a === "lg" ? "font-medium text-[16px] leading-[24px] tracking-[-0.5px]" : "text-[12px] leading-[16px] tracking-[-0.5px]"),
+				children: c
+			}),
+			s && /* @__PURE__ */ r("button", {
+				type: "button",
+				onClick: s,
+				"aria-label": "Cerrar",
+				"data-pressable": "",
+				className: e("shrink-0 inline-flex items-center justify-center size-6 rounded-x1", "opacity-60 hover:opacity-100", "active:scale-[var(--press-scale)]", "[transition:opacity_var(--duration-fast)_var(--ease-out),transform_var(--duration-fast)_var(--ease-out)]"),
+				children: /* @__PURE__ */ r(l, { className: "size-6" })
+			})
+		]
+	});
+});
+f.displayName = "Alert";
+var p = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("h5", {
+	ref: i,
+	className: e("font-sans font-bold text-[16px] leading-[24px] tracking-[-0.5px]", t),
+	...n
+}));
+p.displayName = "AlertTitle";
+var m = t.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ r("div", {
+	ref: i,
+	className: e("text-[12px] leading-[16px] tracking-[-0.5px]", t),
+	...n
+}));
+m.displayName = "AlertDescription";
+//#endregion
+export { f as Alert, m as AlertDescription, p as AlertTitle };

package/dist/components/Alert/index.d.ts

@@ -0,0 +1 @@
+export { Alert, AlertTitle, AlertDescription, type AlertProps } from './Alert';

package/dist/components/Alert/index.js

@@ -0,0 +1,2 @@
+import { Alert as e, AlertDescription as t, AlertTitle as n } from "./Alert.js";
+export { e as Alert, t as AlertDescription, n as AlertTitle };

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,25 @@
+import { cn as e } from "../../lib/cn.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-avatar";
+//#region src/components/Avatar/Avatar.tsx
+var i = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Root, {
+	ref: a,
+	className: e("relative flex size-10 shrink-0 overflow-hidden rounded-full bg-gray-20", t),
+	...i
+}));
+i.displayName = "Avatar";
+var a = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Image, {
+	ref: a,
+	className: e("aspect-square size-full object-cover", "data-[state=loaded]:[animation:ctc-fade-rise_var(--duration-base)_var(--ease-out)]", t),
+	...i
+}));
+a.displayName = "AvatarImage";
+var o = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Fallback, {
+	ref: a,
+	className: e("flex size-full items-center justify-center text-gray-80 font-sans text-sm", t),
+	...i
+}));
+o.displayName = "AvatarFallback";
+//#endregion
+export { i as Avatar, o as AvatarFallback, a as AvatarImage };

package/dist/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar, AvatarImage, AvatarFallback } from './Avatar';

package/dist/components/Avatar/index.js

@@ -0,0 +1,2 @@
+import { Avatar as e, AvatarFallback as t, AvatarImage as n } from "./Avatar.js";
+export { e as Avatar, t as AvatarFallback, n as AvatarImage };

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,23 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "alert" | "success" | "destructive" | "purple" | "brand" | "skyblue" | "neutral" | "outline" | null | undefined;
+    tone?: "quiet" | "loud" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    /** Optional leading icon (Phosphor or any svg). Sized via parent CSS. */
+    icon?: React.ReactNode;
+}
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export interface BadgeDotProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: NonNullable<BadgeProps['variant']>;
+    size?: 'sm' | 'md';
+}
+export declare const BadgeDot: React.ForwardRefExoticComponent<BadgeDotProps & React.RefAttributes<HTMLSpanElement>>;
+export interface BadgeMinimalProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: NonNullable<BadgeProps['variant']>;
+    size?: 'sm' | 'md';
+}
+export declare const BadgeMinimal: React.ForwardRefExoticComponent<BadgeMinimalProps & React.RefAttributes<HTMLSpanElement>>;
+export {};