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

package/llms.txt

@@ -1,782 +1,342 @@
-# ctc-component-library v0.1.100
-
-> CTC's React component library built with TypeScript, SCSS, and Ant Design foundations.
-> Provides atoms, molecules, and organisms following atomic design principles.
-
-> Generated on 2026-03-05
-
-## Installation & Usage
-
-```tsx
-import { ComponentName } from 'ctc-component-library';
-import 'ctc-component-library/dist/styles.css';
-```
-
-### Theme Imports
-
-```tsx
-import { colors } from 'ctc-component-library/theme/colors';
-import { shapes } from 'ctc-component-library/theme/shapes';
-import { spacing } from 'ctc-component-library/theme/spacing';
-```
-
-## Component Index
-
-### Atoms
-- Avatar
-- Badge
-- Button (has V2)
-- Checkbox
-- Datepicker
-- Icon
-- InputNumber
-- Label
-- Popover
-- RadioButton
-- TextInput
-- Timepicker
-- Toast
-- Toggle
-- Typography
-- tooltips
-
-### Molecules
-- Table
-- alert
-- dropdowns
-- tabs
-
-### Organisms
-- Modal (has V2)
-
----
-
-## Design Tokens
-
-### Colors (`colors`)
-
-```ts
-export const colors = {
-  neutrals: {
-    Gray100: '#171a1a',
-    Gray80: '#303333',
-    Gray60: '#494d4b',
-    Gray40: '#b9bfbd',
-    Gray20: '#edf2f0',
-    Gray00: '#fcfffe'
-  },
-  mainB2B: {
-    MainGreenDark: '#001f19',
-    MainGreenDefault: '#1e5349',
-    MainGreenLight: '#6be3cd',
-    MainGreenLighter: '#d9fff5'
-  },
-  mainB2C: {
-    MainBlueDark: '#1d5bbc',
-    MainBlueDefault: '#468eff',
-    MainBlueLight: '#abccff',
-    MainBlueLighter: '#e2edff'
-  },
-  secondary: {
-    SecondaryPurpleDark: '#9335cc',
-    SecondayPurpleDefault: '#c15cff',
-    SecondayPurpleLight: '#dea8ff',
-    SecondayPurpleLighter: '#f9eeff',
-    SecondaryOrangeDark: '#ac5734',
-    SecondaryOrangeDefault: '#e57b43',
-    SecondaryOrangeLight: '#ffaa7d',
-    SecondaryOrangeLighter: '#ffefe7'
-  },
-  status: {
-    ErrorMain: '#c00808',
-    ErrorLight: '#ffe5e5',
-    SuccessMain: '#206614',
-    SuccessLight: '#c15cff',
-    AlertMain: '#9f760b',
-    AlertLight: '#fff1cc'
-  },
-  opacity: {
-    Opacidad100: 1,
-    Opacidad80: 0.8,
-    Opacidad60: 0.6,
-    Opacidad40: 0.4,
-    Opacidad20: 0.2
-  }
-};
-```
-
-### Shapes (`shapes`) — border-radius values in px
-
-```ts
-export const shapes = {
-  x1: 4,
-  x2: 8,
-  x3: 12,
-  x4: 16,
-  x5: 20,
-  x6: 24,
-  x8: 32,
-  x10: 40,
-  x12: 48,
-  x14: 56,
-  x16: 64,
-  x18: 72,
-  x20: 80
-};
-```
-
-### Spacing (`spacing`) — spacing values in px
-
-```ts
-export const spacing = {
-  x1: 4,
-  x2: 8,
-  x3: 12,
-  x4: 16,
-  x5: 20,
-  x6: 24,
-  x8: 32,
-  x10: 40,
-  x12: 48,
-  x14: 56,
-  x16: 64,
-  x18: 72,
-  x20: 80
-};
-```
-
----
-
-## Atoms
+# ctc-component-library
 
-### Avatar
-
-**Path:** `src/components/atoms/Avatar`
-
-**Exported types:** `AvatarProps`
-
-<details>
-<summary>Type definitions</summary>
+> Librería de componentes React de Crack the Code — v1.0.0-alpha.3. React + TypeScript + Tailwind v4 + Radix + class-variance-authority (cva). **Solo subpath imports** (sin barrel raíz) para tree-shaking real. Este archivo se regenera en cada build desde el código fuente.
 
-```typescript
-export interface AvatarProps {
-  text: string;
-  textColor?: string;
-  dataTestid?: string;
-  backgroundColor: string;
-  customClassName?: string;
-}
-```
+## Cómo están construidos los componentes
 
-</details>
-
----
-
-### Badge
+- **Import por subpath:** cada componente vive en su propio entrypoint, ej. `import { Button } from 'ctc-component-library/button'`. No existe `import … from 'ctc-component-library'`.
+- **Theme:** importar una vez en el root del consumer: `import 'ctc-component-library/theme.css'` (tokens + base + fuentes + utilities precompiladas). Consumers con Tailwind v4 pueden además usar el preset `ctc-component-library/tw-preset`.
+- **Tokens en TS:** `ctc-component-library/theme` exporta `colors`, `spacing`, `shapes` (y sus tipos) para codegen/lógica.
+- **Estilos:** Tailwind v4 utility classes + `class-variance-authority` para variantes. `cn()` (clsx + tailwind-merge) para componer clases.
+- **Primitivos:** los compound components (Dialog, Select, Tabs, Popover, Tooltip…) envuelven Radix UI; respetan su API de partes (Trigger/Content/…).
+- **Peer deps:** React `^18.2 || ^19`, react-dom idem.
 
-**Path:** `src/components/atoms/Badge`
+## Componentes (26)
 
-**Exported types:** `BadgeProps`, `BadgePropsStatusText`
+### Alert
 
-<details>
-<summary>Type definitions</summary>
+- **Import:** `import { Alert, AlertTitle, AlertDescription } from 'ctc-component-library/alert'`
+- **Exports:** `Alert`, `AlertTitle`, `AlertDescription`, `type AlertProps`
+- **Variantes (cva):**
+  - `variant`: `info` | `success` | `warning` | `destructive` — default `info`
+  - `size`: `sm` | `lg` — default `lg`
+- **AlertProps** (extends `React.HTMLAttributes<HTMLDivElement>`, `VariantProps<typeof alertVariants>`):
+  - `hideIcon?: boolean`
+  - `onDismiss?: () => void`
 
-```typescript
-import { IconProps } from '../Icon/types';
-
-export interface BadgeProps {
-  text?: string | React.ReactNode;
-  icon?: boolean;
-  dataTestid?: string;
-  type: 'quiet' | 'loud';
-  customClassName?: string;
-  iconType?: IconProps['type'];
-  iconName?: IconProps['iconName'];
-  customStyles?: React.CSSProperties;
-  version?: 'full' | 'minimal' | 'dot';
-  variant?: 'big' | 'medium' | 'small';
-  status: 'active' | 'inactive' | 'risk' | 'new';
-}
-
-export type BadgePropsStatusText = {
-  [key in BadgeProps['status']]: string;
-};
-```
+### Avatar
 
-</details>
+- **Import:** `import { Avatar, AvatarImage, AvatarFallback } from 'ctc-component-library/avatar'`
+- **Exports:** `Avatar`, `AvatarImage`, `AvatarFallback`
 
----
+### Badge
+Badge — pixel-perfect to Figma
+
+- **Import:** `import { Badge, BadgeDot, BadgeMinimal } from 'ctc-component-library/badge'`
+- **Exports:** `Badge`, `BadgeDot`, `BadgeMinimal`, `type BadgeProps`, `type BadgeDotProps`, `type BadgeMinimalProps`
+- **Variantes (cva):**
+  - `variant`: `success` | `destructive` | `alert` | `purple` | `brand` | `skyblue` | `neutral` | `outline` — default `neutral`
+  - `tone`: `quiet` | `loud` — default `quiet`
+  - `size`: `sm` | `md` | `lg` — default `md`
+- **BadgeProps** (extends `React.HTMLAttributes<HTMLSpanElement>`, `VariantProps<typeof badgeVariants>`):
+  - `icon?: React.ReactNode`
+- **BadgeDotProps** (extends `React.HTMLAttributes<HTMLSpanElement>`):
+  - `variant?: NonNullable<BadgeProps['variant']>`
+  - `size?: 'sm' | 'md'`
+- **BadgeMinimalProps** (extends `React.HTMLAttributes<HTMLSpanElement>`):
+  - `variant?: NonNullable<BadgeProps['variant']>`
+  - `size?: 'sm' | 'md'`
 
 ### Button
 
-**Path:** `src/components/atoms/Button`
-
-**Exported types:** `ButtonProps`, `ButtonPropsV2`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-import { MaterialSymbol } from '@material-symbols/font-400';
-
-export interface ButtonProps {
-  btnType?: 'button' | 'submit' | 'reset' | undefined;
-  icon?: MaterialSymbol;
-  text?: string;
-  primaryVariant?: 'neutral' | 'success' | 'error';
-  disabled?: boolean;
-  dataTestid?: string;
-  underline?: boolean;
-  customBtnClassName?: string;
-  iconPosition?: 'left' | 'right';
-  customStyles?: React.CSSProperties;
-  type: 'primary' | 'secondary' | 'tertiary';
-  iconType?: 'outlined' | 'rounded' | 'sharp';
-  size?: 'small' | 'medium' | 'big';
-  onClick?: () => void;
-}
-
-// v2
-type PrimaryVariant = 'neutral' | 'success' | 'error' | 'skyblue';
-
-export interface ButtonPropsV2
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  primaryVariant?: PrimaryVariant;
-  size?: 'small' | 'medium' | 'big';
-  disabled?: boolean;
-  preffix?: React.ReactNode;
-  suffix?: React.ReactNode;
-  dataTestid?: string;
-  loading?: boolean;
-  iconOnly?: boolean;
-  underline?: boolean;
-  fullWidth?: boolean;
-}
-```
-
-</details>
-
-> **Note:** This component has a V2 version. Prefer V2 for new implementations.
-
----
+- **Import:** `import { Button, buttonVariants } from 'ctc-component-library/button'`
+- **Exports:** `Button`, `type ButtonProps`, `buttonVariants`, `type ButtonVariants`
+- **Variantes (cva):**
+  - `variant`: `brand` | `skyblue` | `default` | `success` | `destructive` | `outline` | `outline-skyblue` | `ghost` — default `brand`
+  - `size`: `sm` | `md` | `lg` — default `md`
+  - `iconOnly`: `true` | `false` — default `false`
+  - `fullWidth`: `true` | `false` — default `false`
+- **ButtonProps** (extends `React.ButtonHTMLAttributes<HTMLButtonElement>`, `ButtonVariants`):
+  - `asChild?: boolean`
+  - `loading?: boolean`
 
 ### Checkbox
 
-**Path:** `src/components/atoms/Checkbox`
-
-**Exported types:** `CheckboxProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
-  checked?: boolean;
-  labelPosition?: 'left' | 'right';
-  inputSize?: 'medium' | 'small';
-  id: string;
-  dataTestId?: string;
-  customClassName?: string;
-  labelClassName?: string;
-  checkboxClassName?: string;
-  inputClassName?: string;
-  customStyles?: React.CSSProperties;
-  children?: React.ReactNode;
-  backgroundColor?: string;
-  borderRadius?: string;
-  disabled?: boolean;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-}
-```
-
-</details>
-
----
-
-### Datepicker
-
-**Path:** `src/components/atoms/Datepicker`
-
-**Exported types:** `DatepickerProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-import { DatePickerProps as AntDatePickerProps } from 'antd';
-
-export interface DatepickerProps extends Omit<AntDatePickerProps, 'picker'> {
-  dataTestId?: string;
-  disabled?: boolean;
-  customClassName?: string;
-  dateFormat?: string;
-  popupCustomClassName?: string;
-  errors?: string[] | string;
-}
-```
-
-</details>
-
----
+- **Import:** `import { Checkbox } from 'ctc-component-library/checkbox'`
+- **Exports:** `Checkbox`, `type CheckboxProps`
+- **CheckboxProps** (extends `React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Roo…`):
+  - `size?: 'sm' | 'lg'`
+
+### Chip
+
+- **Import:** `import { Chip, ChipGroup } from 'ctc-component-library/chip'`
+- **Exports:** `Chip`, `ChipGroup`, `type ChipProps`, `type DismissibleChipProps`, `type SelectableChipProps`
+- **DismissibleChipProps** (extends `React.HTMLAttributes<HTMLDivElement>`):
+  - `variant: 'dismissible'`
+  - `disabled?: boolean`
+  - `onDismiss?: () => void`
+- **SelectableChipProps** (extends `React.ButtonHTMLAttributes<HTMLButtonElement>`):
+  - `variant?: 'choice' | 'multi'`
+  - `selected?: boolean`
+- **ChipProps:** `DismissibleChipProps | SelectableChipProps`
+- **ChipGroupProps** (extends `React.HTMLAttributes<HTMLDivElement>`):
+  - `stagger?: boolean`
+
+### Combobox
+
+- **Import:** `import { Combobox } from 'ctc-component-library/combobox'`
+- **Exports:** `Combobox`, `type ComboboxProps`, `type ComboboxOption`
+- **ComboboxProps**:
+  - `options: ComboboxOption[]`
+  - `value?: string`
+  - `defaultValue?: string`
+  - `onValueChange?: (value: string) => void`
+  - `placeholder?: string`
+  - `searchPlaceholder?: string`
+  - `emptyText?: string`
+  - `disabled?: boolean`
+  - `size?: 'sm' | 'lg'`
+  - `className?: string`
+  - `onSearch?: (query: string) => void`
+  - `searching?: boolean`
+  - `hasMore?: boolean`
+  - `onEndReached?: () => void`
+  - `loading?: boolean`
+
+### DataTable
+
+- **Import:** `import { DataTable, Table, TableHeader, TableBody, … } from 'ctc-component-library/data-table'`
+- **Exports:** `DataTable`, `type DataTableProps`, `type ExpandableConfig`, `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableHead`, `TableRow`, `TableCell`, `TableCaption`, `type ColumnDef`, `type ColumnFiltersState`, `type SortingState`
+- **DataTableProps**:
+  - `columns: ColumnDef<T>[]`
+  - `data: T[]`
+  - `expandable?: ExpandableConfig<T>`
+  - `className?: string`
+  - `emptyText?: string`
+  - `loading?: boolean`
+  - `'data-testid'?: string`
+
+### DatePicker
+Capitalize first letter of weekday name (e.g. "lun." → "Lun") and trim trailing periods
+
+- **Import:** `import { DatePicker } from 'ctc-component-library/date-picker'`
+- **Exports:** `DatePicker`, `type DatePickerProps`
+- **DatePickerProps**:
+  - `value?: Date`
+  - `defaultValue?: Date`
+  - `onValueChange?: (date: Date | undefined) => void`
+  - `placeholder?: string`
+  - `disabled?: boolean`
+  - `locale?: string`
+  - `size?: 'sm' | 'lg'`
+  - `className?: string`
+  - `calendarProps?: Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect'>`
+  - `'data-testid'?: string`
+
+### Dialog
+
+- **Import:** `import { Dialog, DialogTrigger, DialogPortal, DialogClose, … } from 'ctc-component-library/dialog'`
+- **Exports:** `Dialog`, `DialogTrigger`, `DialogPortal`, `DialogClose`, `DialogOverlay`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `type DialogContentProps`
+- **DialogContentProps** (extends `React.ComponentPropsWithoutRef<typeof DialogPrimitive.Conte…`):
+  - `hideCloseButton?: boolean`
+
+### Field
+Visual size, paired with the input it labels
+
+- **Import:** `import { FieldGroup, Field, FieldLabel, FieldDescription, … } from 'ctc-component-library/field'`
+- **Exports:** `FieldGroup`, `Field`, `FieldLabel`, `FieldDescription`, `FieldSet`, `FieldLegend`, `type FieldProps`, `type FieldLabelProps`
+- **FieldProps** (extends `React.HTMLAttributes<HTMLDivElement>`):
+  - `asChild?: boolean`
+  - `'data-invalid'?: boolean`
+  - `'data-disabled'?: boolean`
+- **FieldLabelProps** (extends `React.LabelHTMLAttributes<HTMLLabelElement>`):
+  - `size?: 'sm' | 'lg'`
 
 ### Icon
 
-**Path:** `src/components/atoms/Icon`
-
-**Exported types:** `IconProps`
-
-<details>
-<summary>Type definitions</summary>
+- **Import:** `import { Icon } from 'ctc-component-library/icon'`
+- **Exports:** `Icon`, `type IconProps`, `type PhosphorIconType`, `type PhosphorIconProps`
+- **IconProps** (extends `Omit<PhosphorIconProps, 'ref'>`):
+  - `icon: PhosphorIconType`
 
-```typescript
-import { MaterialSymbol } from '@material-symbols/font-400';
+### Input
+Input — pixel-perfect to Figma spec
 
-export interface IconProps extends React.HTMLAttributes<HTMLSpanElement> {
-  iconName: MaterialSymbol;
-  customClassName?: string;
-  type?: 'outlined' | 'rounded' | 'sharp';
-  customStyles?: React.CSSProperties;
-  dataTestId?: string;
-  /** A number value translates to px */
-  size?: string;
-}
-```
-
-</details>
-
----
-
-### InputNumber
-
-**Path:** `src/components/atoms/InputNumber`
-
-**Exported types:** `InputNumberProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-import { InputProps } from 'antd';
-
-export interface InputNumberProps extends InputProps {
-  customClassName?: string;
-  disabled?: boolean;
-  dataTestid?: string;
-  numberType?: 'decimal' | 'integer';
-}
-```
-
-</details>
-
----
+- **Import:** `import { Input, inputVariants, InputGroup, InputGroupInput, … } from 'ctc-component-library/input'`
+- **Exports:** `Input`, `inputVariants`, `InputGroup`, `InputGroupInput`, `InputGroupPrefix`, `InputGroupSuffix`, `InputGroupBadge`, `type InputProps`, `type InputGroupProps`
+- **Variantes (cva):**
+  - `size`: `sm` | `lg` — default `sm`
+- **InputProps** (extends `Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>`, `VariantProps<typeof inputVariants>`)
+- **InputGroupProps** (extends `React.HTMLAttributes<HTMLDivElement>`):
+  - `size?: 'sm' | 'lg'`
+  - `disabled?: boolean`
+  - `invalid?: boolean`
 
 ### Label
 
-**Path:** `src/components/atoms/Label`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-type LabelProps = PropsWithChildren<{
-  required?: boolean;
-  disclaimer?: React.ReactNode;
-  requiredClassName?: string;
-}> &
-  TypographyProps &
-  React.LabelHTMLAttributes<HTMLLabelElement>;
-```
-
-</details>
-
----
+- **Import:** `import { Label } from 'ctc-component-library/label'`
+- **Exports:** `Label`
+
+### MultiSelect
+
+- **Import:** `import { MultiSelect } from 'ctc-component-library/multi-select'`
+- **Exports:** `MultiSelect`, `type MultiSelectProps`, `type MultiSelectOption`
+- **MultiSelectProps**:
+  - `options: MultiSelectOption[]`
+  - `value?: string[]`
+  - `defaultValue?: string[]`
+  - `onValueChange?: (value: string[]) => void`
+  - `placeholder?: string`
+  - `searchPlaceholder?: string`
+  - `emptyText?: string`
+  - `maxTags?: number`
+  - `disabled?: boolean`
+  - `size?: 'sm' | 'lg'`
+  - `className?: string`
+
+### NumberInput
+
+- **Import:** `import { NumberInput } from 'ctc-component-library/number-input'`
+- **Exports:** `NumberInput`, `type NumberInputProps`
+- **NumberInputProps** (extends `Omit<InputProps, 'type' | 'value' | 'defaultValue' | 'onCha…`):
+  - `value?: number`
+  - `defaultValue?: number`
+  - `min?: number`
+  - `max?: number`
+  - `step?: number`
+  - `onValueChange?: (value: number | undefined) => void`
 
 ### Popover
 
-**Path:** `src/components/atoms/Popover`
-
-**Exported types:** `PopoverProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-import {PopoverProps as AntDPopoverProps} from 'antd'
-
-export interface PopoverProps extends AntDPopoverProps{
-  dataTestid?: string;
-  customClassName?: string;
-  children: React.ReactNode;
-  customStyles?: React.CSSProperties;
-}
-```
-
-</details>
-
----
-
-### RadioButton
-
-**Path:** `src/components/atoms/RadioButton`
-
-**Exported types:** `RadioOption`, `RadioButtonProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-import { RadioChangeEvent, RadioGroupProps } from 'antd';
+- **Import:** `import { Popover, PopoverTrigger, PopoverAnchor, PopoverClose, … } from 'ctc-component-library/popover'`
+- **Exports:** `Popover`, `PopoverTrigger`, `PopoverAnchor`, `PopoverClose`, `PopoverPortal`, `PopoverContent`, `type PopoverContentProps`
+- **PopoverContentProps** (extends `React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Cont…`):
+  - `arrow?: boolean`
 
-export interface RadioOption {
-  label: string | number | boolean;
-  value: string | number | boolean;
-  disabled?: boolean;
-  checked?: boolean;
-  defaultChecked?: boolean;
-}
+### RadioGroup
 
-export interface RadioButtonProps extends RadioGroupProps {
-  options: RadioOption[];
-  dataTestid?: string;
-  disabledItem?: string;
-  defaultCheckedItem?: string;
-  checkedItem?: string;
-  customClassName?: string;
-  customStyles?: React.CSSProperties;
-  disabledGroup?: boolean;
-  onChange?: (e: RadioChangeEvent) => void;
-}
-```
+- **Import:** `import { RadioGroup, RadioGroupItem } from 'ctc-component-library/radio-group'`
+- **Exports:** `RadioGroup`, `RadioGroupItem`
+- **RadioGroupProps** (extends `React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.R…`):
+  - `size?: 'sm' | 'lg'`
 
-</details>
+### Select
 
----
+- **Import:** `import { Select, SelectGroup, SelectValue, SelectTrigger, … } from 'ctc-component-library/select'`
+- **Exports:** `Select`, `SelectGroup`, `SelectValue`, `SelectTrigger`, `SelectContent`, `SelectLabel`, `SelectItem`, `SelectSeparator`, `SelectScrollUpButton`, `SelectScrollDownButton`, `type SelectTriggerProps`
+- **SelectTriggerProps** (extends `React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigg…`):
+  - `size?: 'sm' | 'lg'`
 
-### TextInput
+### Spinner
 
-**Path:** `src/components/atoms/TextInput`
+- **Import:** `import { Spinner } from 'ctc-component-library/spinner'`
+- **Exports:** `Spinner`, `type SpinnerProps`
+- **Variantes (cva):**
+  - `size`: `sm` | `md` | `lg` — default `md`
+- **SpinnerProps** (extends `React.SVGAttributes<SVGSVGElement>`, `VariantProps<typeof spinnerVariants>`)
 
-**Exported types:** `InputSize`
+### Switch
 
-<details>
-<summary>Type definitions</summary>
+- **Import:** `import { Switch } from 'ctc-component-library/switch'`
+- **Exports:** `Switch`, `type SwitchProps`
+- **SwitchProps** (extends `React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>`):
+  - `size?: 'sm' | 'lg'`
 
-```typescript
-export const INPUT_SIZE = {
-  small: 'small',
-  big: 'big'
-} as const;
+### Tabs
 
-export type InputSize = (typeof INPUT_SIZE)[keyof typeof INPUT_SIZE];
-```
+- **Import:** `import { Tabs, TabsList, TabsTrigger, TabsContent } from 'ctc-component-library/tabs'`
+- **Exports:** `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `type TabsProps`
+- **TabsProps** (extends `React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>`):
+  - `variant?: TabsVariant`
+  - `size?: TabsSize`
+  - `spacing?: TabsSpacing`
 
-</details>
+### TimePicker
 
----
-
-### Timepicker
-
-**Path:** `src/components/atoms/Timepicker`
-
-**Exported types:** `TimepickerProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-export interface TimepickerProps {
-  dataTestId?: string;
-  disabled?: boolean;
-  customClassName?: string;
-  customStyles?: React.CSSProperties;
-  time?: { hour: string | number; minutes: string | number };
-  onTimeChange?: (newTime: {
-    hour: string | number;
-    minutes: string | number;
-  }) => void;
-}
-```
-
-</details>
-
----
+- **Import:** `import { TimePicker } from 'ctc-component-library/time-picker'`
+- **Exports:** `TimePicker`, `type TimePickerProps`, `type TimeValue`
+- **TimePickerProps**:
+  - `value?: TimeValue`
+  - `defaultValue?: TimeValue`
+  - `onValueChange?: (value: TimeValue) => void`
+  - `minuteStep?: number`
+  - `hour12?: boolean`
+  - `disabled?: boolean`
+  - `size?: 'sm' | 'lg'`
+  - `className?: string`
+  - `'data-testid'?: string`
 
 ### Toast
+CTC-themed Toaster. Mount once at the root of the app
 
-**Path:** `src/components/atoms/Toast`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-type NotificationType = 'success' | 'error' | 'loading';
-
-type Toast = Omit<ArgsProps, 'message'> & {
-  debug?: boolean;
-  action?: React.ReactNode;
-};
-
-interface ToastContextProps {
-  toast: {
-    contextHolder: React.ReactNode;
-    success: (message: React.ReactNode, props?: Toast) => void;
-    error: (message: React.ReactNode, props?: Toast) => void;
-    loading: (message: React.ReactNode, props?: Toast) => void;
-    close: () => void;
-  };
-}
-```
-
-</details>
-
----
+- **Import:** `import { Toaster, toast } from 'ctc-component-library/toast'`
+- **Exports:** `Toaster`, `toast`, `type ToasterProps`
 
-### Toggle
+### Tooltip
+TooltipProvider with CTC defaults: 400ms delay before showing,
 
-**Path:** `src/components/atoms/Toggle`
-
-**Exported types:** `ToggleProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-import { SwitchProps } from 'antd';
-
-export interface ToggleProps extends SwitchProps {
-  dataTestId?: string;
-  disabled?: boolean;
-  customClassName?: string;
-}
-```
-
-</details>
-
----
+- **Import:** `import { TooltipProvider, Tooltip, TooltipTrigger, TooltipPortal, … } from 'ctc-component-library/tooltip'`
+- **Exports:** `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipPortal`, `TooltipContent`
 
 ### Typography
 
-**Path:** `src/components/atoms/Typography`
-
-**Exported types:** `TypographyProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
-  /**
-   *
-   *  h1      - font-family: "Roca One", serif; font-weight: lighter; font-size: 56px; letter-spacing: 0,2px; line-height: 60px
-   *
-   *  h2      - font-family: "Roca One", serif; font-weight: lighter; font-size: 48px; letter-spacing: 0,3px; line-height: 55px
-   *
-   *  h3      - font-family: "Roca One", serif; font-weight: lighter; font-size: 34px; letter-spacing: 0,4px; line-height: 40px
-   *
-   *  h4      - font-family: "Roca One", serif; font-weight: lighter; font-size: 24px; letter-spacing: 0.4px; line-height: 30px
-   *
-   *  h5      - font-family: "Roca One", serif; font-weight: lighter; font-size: 20px; letter-spacing: 0.4px; line-height: 25px
-   *
-   *  body1   - font-family: "NT Bau", sans-serif; font-weight: normal; font-size: 24px; line-height: 30px
-   *
-   *  body2   - font-family: "NT Bau", sans-serif; font-weight: normal; font-size: 20px; line-height: 24px
-   *
-   *  body3   - font-family: "NT Bau", sans-serif; font-weight: normal; font-size: 18px; line-height: 24px
-   *
-   *  body4   - font-family: "NT Bau", sans-serif; font-weight: normal; font-size: 16px; line-height: 22px
-   *
-   *  body5   - font-family: "NT Bau", sans-serif; font-weight: normal; font-size: 14px; line-height: 20px
-   *
-   *  body6   - font-family: "NT Bau", sans-serif; font-weight: normal; font-size: 12px; line-height: 16px
-   *
-   *  button1 - font-family: "NT Bau", sans-serif; font-weight: normal; font-size: 18px; line-height: 0px
-   *
-   *  button2 - font-family: "NT Bau", sans-serif; font-weight: normal; font-size: 16px; line-height: 0px
-   *
-   */
-  variant:
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'body1'
-    | 'body2'
-    | 'body3'
-    | 'body4'
-    | 'body5'
-    | 'body6'
-    | 'button1'
-    | 'button2';
-  dataTestid?: string;
-  underline?: boolean;
-  className?: string;
-  customStyles?: React.CSSProperties;
-  bolder?: boolean;
-}
-```
-
-</details>
-
----
-
-### tooltips
-
-**Path:** `src/components/atoms/tooltips`
-
----
-
-## Molecules
-
-### Table
-
-**Path:** `src/components/molecules/Table`
-
-**Exported types:** `TableExpandableConfig`, `TableProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-import { ColumnsType } from 'antd/es/table';
-import { TableProps as TablePropsAntD } from 'antd';
-import { TablePaginationConfig } from 'antd/es/table';
-import { FilterValue, SorterResult } from 'antd/es/table/interface';
-import type { ExpandableConfig } from 'antd/es/table/interface';
-
-export type { ExpandableConfig };
-
-export interface TableExpandableConfig<T> extends ExpandableConfig<T> {
-  expandedRowData?: (record: T) => T[];
-  expandedRowColumns?: ColumnsType<T>;
-  alignSubRowsWithParent?: boolean;
-  expandedRowNestedClassName?: string;
-  expandedRowNestedStyle?: React.CSSProperties;
-}
-
-export interface TableProps<T>
-  extends Omit<TablePropsAntD<T>, 'columns' | 'data' | 'onChange'> {
-  columns: ColumnsType<T>;
-  heightBodyScrollable?: number;
-  widthBodyScrollable?: number;
-  onChange?: (
-    pagination: TablePaginationConfig,
-    filters: Record<string, FilterValue | null>,
-    sorter: SorterResult<T> | SorterResult<T>[],
-    extra: { currentDataSource: T[]; action: 'paginate' | 'sort' | 'filter' }
-  ) => void;
-  data: T[];
-  dataTestid?: string;
-  className?: string;
-  customStyles?: React.CSSProperties;
-  expandable?: TableExpandableConfig<T>;
-}
-```
-
-</details>
-
----
-
-### alert
-
-**Path:** `src/components/molecules/alert`
-
-**Exported types:** `AlertVariant`, `AlertSize`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-type AlertVariant = 'destructive' | 'warning' | 'success' | 'info';
-
-type AlertSize = 'small' | 'big';
-
-type AlertChildrenProps<T extends React.ElementType> =
-  React.ComponentProps<T> & {
-    children: ReactNode;
-  };
-
-type AlertProps = AlertChildrenProps<'div'> & {
-  variant?: AlertVariant;
-  size?: AlertSize;
-};
-```
-
-</details>
-
----
-
-### dropdowns
-
-**Path:** `src/components/molecules/dropdowns`
-
----
-
-### tabs
-
-**Path:** `src/components/molecules/tabs`
-
----
-
-## Organisms
-
-### Modal
-
-**Path:** `src/components/organisms/Modal`
-
-**Exported types:** `ModalProps`
-
-<details>
-<summary>Type definitions</summary>
-
-```typescript
-import { ModalProps as AntDModalProps } from 'antd';
-
-import { ButtonProps } from '../../atoms/Button/types';
-
-export interface ModalProps extends AntDModalProps {
-  title?: string;
-  description?: string;
-  linkButtonUnderline?: boolean;
-  type?: 'big' | 'small';
-  isModalOpen: boolean;
-  primaryButtonText?: string;
-  primaryButtonVariant?: 'neutral' | 'success' | 'error';
-  primaryButtonSize?: ButtonProps['size'];
-  linkButtonText?: string;
-  bodyContent?: React.ReactNode;
-  bigTypeContent?: React.ReactNode;
-  customStyles?: React.CSSProperties;
-  primaryButtonIsDisabled?: boolean;
-  dataTestId?: string;
-  customClassName?: string;
-  handlePrimaryButton?: () => void;
-  handleLinkButton?: () => void;
-  handleClose?: () => void;
-  maskClosable?: boolean;
-}
-```
-
-</details>
-
-> **Note:** This component has a V2 version. Prefer V2 for new implementations.
-
----
-
-## Common Patterns
-
-### Error handling
-Most form components accept `errors: string | string[]` to display validation messages.
-
-### Sizes
-Most components support `size: "small" | "big"` (default: `"small"`). Buttons also support `"medium"`.
-
-### Custom styling
-All components accept `customClassName` and `customStyles` for overrides.
-
-### Testing
-All components expose `dataTestid` (or `dataTestId`) for test selectors.
-
-### CSS classes
-BEM convention: `ctc-{component}`, `ctc-{component}--{modifier}`.
+- **Import:** `import { Typography } from 'ctc-component-library/typography'`
+- **Exports:** `Typography`, `type TypographyProps`
+- **Variantes (cva):**
+  - `variant`: `h1` | `h2` | `h3` | `h4` | `h5` | `body-1` | `body-2` | `body-3` | `body-4` | `body-5` | `body-6` | `button-1` | `button-2` — default `body-4`
+  - `underline`: `true` | `false` — default `false`
+  - `bolder`: `true` | `false` — default `false`
+- **TypographyProps** (extends `React.HTMLAttributes<HTMLElement>`, `VariantProps<typeof typographyVariants>`):
+  - `asChild?: boolean`
+  - `as?: keyof React.JSX.IntrinsicElements`
+
+## Presets (2)
+
+Composiciones pre-armadas sobre los componentes base.
+
+### SelectCountry
+
+- **Import:** `import { SelectCountry, countries } from 'ctc-component-library/select-country'`
+- **Exports:** `SelectCountry`, `type SelectCountryProps`, `countries`, `type Country`
+- **SelectCountryProps**:
+  - `value?: string`
+  - `defaultValue?: string`
+  - `onValueChange?: (code: string) => void`
+  - `countries?: Country[]`
+  - `placeholder?: string`
+  - `disabled?: boolean`
+  - `size?: 'sm' | 'lg'`
+  - `className?: string`
+
+### SelectPhone
+
+- **Import:** `import { SelectPhone, phoneCodes } from 'ctc-component-library/select-phone'`
+- **Exports:** `SelectPhone`, `type SelectPhoneProps`, `phoneCodes`, `type PhoneCode`
+- **SelectPhoneProps**:
+  - `value?: string`
+  - `defaultValue?: string`
+  - `onValueChange?: (code: string) => void`
+  - `codes?: PhoneCode[]`
+  - `placeholder?: string`
+  - `disabled?: boolean`
+  - `size?: 'sm' | 'lg'`
+  - `className?: string`
+
+## Theme tokens
+
+### TS (`ctc-component-library/theme`)
+- `colors`: `{"neutrals":{"Gray100":"#171a1a","Gray80":"#303333","Gray60":"#494d4b","Gray40":"#b9bfbd","Gray20":"#edf2f0","Gray00":"#fcfffe"},"primary":{"Dark":"#001f19","Default":"#1e5349","Light":"#6be3d7","Lighter":"#daf2f0"},"skyblue":{"Default":"#468eff","Hover":"#84b2fb","Lighter":"#e2f2ff"},"secondary":{"Dark":"#1d5bbc","Default":"#1d5bbc","Light":"#bfe1fc","Lighter":"#e2f2ff"},"purple":{"Dark":"#5a52ad","Default":"#756dc8","Light":"#aea7f9","Lighter":"#dddaff"},"orange":{"Dark":"#ac5734","Default":"#e57b43","Light":"#ffaa7d","Lighter":"#ffefe7"},"status":{"Error":"#c00808","ErrorHover":"#cc3939","ErrorLight":"#ffe5e5","Success":"#206614","SuccessHover":"#4c8543","SuccessLight":"#e5ffea","Alert":"#9f760b","AlertLight":"#fff1cc"},"opacity":{"Opacidad100":1,"Opacidad80":0.8,"Opacidad60":0.6,"Opacidad40":0.4,"Opacidad20":0.2}}`
+- `spacing`: `{"zero":0,"x1":4,"x2":8,"x3":12,"x4":16,"x5":20,"x6":24,"x8":32,"x10":40,"x12":48,"x14":56,"x16":64,"x18":72,"x20":80}`
+- `shapes`: `{"x1":4,"x2":8,"x3":12,"x4":16,"x5":20,"x6":24,"x8":32,"x10":40,"x12":48,"x14":56,"x16":64,"x18":72,"x20":80}`
+
+### CSS custom properties (`@theme` en theme.css)
+- **color** (42): `--color-gray-100`, `--color-gray-80`, `--color-gray-60`, `--color-gray-40`, `--color-gray-20`, `--color-gray-00`, `--color-primary-dark`, `--color-primary`, `--color-primary-light`, `--color-primary-lighter`, `--color-skyblue`, `--color-skyblue-hover`, `--color-skyblue-lighter`, `--color-secondary-dark`, `--color-secondary`, `--color-secondary-light`, `--color-secondary-lighter`, `--color-purple-dark`, `--color-purple`, `--color-purple-light`, `--color-purple-lighter`, `--color-orange-dark`, `--color-orange`, `--color-orange-light`, …
+- **spacing** (13): `--spacing-x1`, `--spacing-x2`, `--spacing-x3`, `--spacing-x4`, `--spacing-x5`, `--spacing-x6`, `--spacing-x8`, `--spacing-x10`, `--spacing-x12`, `--spacing-x14`, `--spacing-x16`, `--spacing-x18`, `--spacing-x20`
+- **radius** (13): `--radius-x1`, `--radius-x2`, `--radius-x3`, `--radius-x4`, `--radius-x5`, `--radius-x6`, `--radius-x8`, `--radius-x10`, `--radius-x12`, `--radius-x14`, `--radius-x16`, `--radius-x18`, `--radius-x20`
+- **font** (2): `--font-display`, `--font-sans`
+- **motion** (20): `--ease-out`, `--ease-in-out`, `--ease-drawer`, `--ease-back`, `--duration-instant`, `--duration-fast`, `--duration-base`, `--duration-slow`, `--stagger-step`, `--press-scale`, `--modal-open-dur`, `--modal-close-dur`, `--modal-scale`, `--modal-scale-close`, `--modal-ease`, `--dropdown-open-dur`, `--dropdown-close-dur`, `--dropdown-pre-scale`, `--dropdown-closing-scale`, `--dropdown-ease`
+
+## Referencias
+
+- [DESIGN.md](./DESIGN.md) — spec del design system (paletas, tipografía, escalas).
+- [MIGRATION.md](./MIGRATION.md) — guía de migración v0.x → v1.