@dinofront/design_system 0.1.0

package/README.md

@@ -0,0 +1,65 @@
+# Design System
+
+An enterprise React component library and design system built on
+[Tailwind CSS v4](https://tailwindcss.com/) and React 19. It ships as an ESM
+package with a separately-built stylesheet and an optional Tailwind
+v3-style preset for consumers still on a JS config.
+
+## Stack
+
+- React 19
+- Tailwind CSS v4 (CSS-first `@theme` config, no `tailwind.config.js`)
+- TypeScript 5.9
+- Storybook 10 (`@storybook/react-vite`)
+- Vite 8
+- `class-variance-authority`, `clsx` + `tailwind-merge`
+- `lucide-react` for icons
+- ESLint 9 flat config + Prettier
+
+## Design tokens
+
+Tokens (palette, semantic aliases, radii, shadows, typography) are defined
+in two parallel representations that are kept in sync by hand:
+
+- **CSS custom properties** — `src/styles/tokens.css` (raw palette scales,
+  radii, shadows, typography) and `src/styles/theme.css` (semantic
+  aliases + dark mode), both using Tailwind v4's `@theme { ... }` directive.
+  `src/styles/globals.css` is the entry point.
+- **JS/TS token objects** — `src/tokens/*.ts`, plus a Tailwind v3-style
+  preset at `src/tailwind/preset.ts` for consumers on a JS Tailwind config.
+
+Prefer semantic aliases (`bg-default`, `fg-brand`, `border-danger`, ...)
+over raw palette classes (`brand-500`, `red-700`, ...) in component code.
+
+## Component architecture
+
+Each component lives under `src/components/<Name>/` with a fixed file set:
+
+```
+src/components/<Name>/
+  <Name>.tsx          # implementation
+  <Name>.types.ts     # exported prop types
+  <Name>.stories.tsx  # Storybook stories
+  <Name>.docs.mdx     # hand-authored docs page
+  index.ts            # barrel: re-export the component + its types
+```
+
+## Getting started
+
+```bash
+npm install
+npm run dev              # Storybook dev server on port 6008
+```
+
+## Scripts
+
+```bash
+npm run build            # tsc --noEmit -> vite build (lib) -> build:css (Tailwind CLI)
+npm run build:storybook  # storybook build
+npm run lint              # eslint .
+npm run format            # prettier --write .
+```
+
+## License
+
+MIT

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,3 @@
+import { AccordionItemProps, AccordionProps } from './Accordion.types';
+export declare const Accordion: import('react').ForwardRefExoticComponent<AccordionProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const AccordionItem: import('react').ForwardRefExoticComponent<AccordionItemProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Accordion/Accordion.types.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type AccordionType = 'single' | 'multiple';
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** `'single'` keeps at most one item open at a time; `'multiple'` allows any number. */
+    type?: AccordionType;
+    /** Uncontrolled initial open value(s) — a single string for `'single'`, an array for `'multiple'`. */
+    defaultValue?: string | string[];
+    /** Controlled open value(s). Pass alongside `onValueChange` to fully control which item(s) are open. */
+    value?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    children: ReactNode;
+}
+export interface AccordionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
+    /** Unique identifier used to track open/closed state within the parent `Accordion`. */
+    value: string;
+    title: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    children: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Accordion, AccordionItem } from './Accordion';
+export type { AccordionItemProps, AccordionProps, AccordionType } from './Accordion.types';

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

@@ -0,0 +1,3 @@
+import { AvatarGroupProps, AvatarProps } from './Avatar.types';
+export declare const Avatar: import('react').ForwardRefExoticComponent<AvatarProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const AvatarGroup: import('react').ForwardRefExoticComponent<AvatarGroupProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type AvatarStatus = 'online' | 'offline' | 'away' | 'busy';
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, BaseProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    shape?: 'circle' | 'square';
+    fallback?: ReactNode;
+}
+export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    size?: AvatarSize;
+    max?: number;
+    children: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup } from './Avatar';
+export type { AvatarProps, AvatarGroupProps, AvatarSize, AvatarStatus } from './Avatar.types';

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

@@ -0,0 +1,2 @@
+import { BadgeProps } from './Badge.types';
+export declare const Badge: import('react').ForwardRefExoticComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type BadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'privacy';
+export type BadgeStyle = 'filled' | 'outline' | 'accent';
+export type BadgeSize = 'lg' | 'md' | 'sm' | 'xs';
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BaseProps {
+    variant?: BadgeVariant;
+    appearance?: BadgeStyle;
+    size?: BadgeSize;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    /** Renders a trailing dismiss button (replacing `rightIcon`) that calls this on click. */
+    onDismiss?: () => void;
+}

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

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeStyle, BadgeSize } from './Badge.types';

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import { ButtonProps } from './Button.types';
+export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,15 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger';
+export type ButtonSize = 'lg' | 'md' | 'sm';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    loading?: boolean;
+    iconOnly?: boolean;
+    fullWidth?: boolean;
+    /** Toggle/active state — renders as pressed and blocks interaction while true. */
+    pressed?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './Button.types';

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,2 @@
+import { ButtonGroupProps } from './ButtonGroup.types';
+export declare const ButtonGroup: import('react').ForwardRefExoticComponent<ButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/ButtonGroup/ButtonGroup.types.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+import { BaseProps } from '../../types';
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    orientation?: ButtonGroupOrientation;
+}

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

@@ -0,0 +1,2 @@
+export { ButtonGroup } from './ButtonGroup';
+export type { ButtonGroupOrientation, ButtonGroupProps } from './ButtonGroup.types';

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,2 @@
+import { CardProps } from './Card.types';
+export declare const Card: import('react').ForwardRefExoticComponent<CardProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Card/Card.types.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    variant?: CardVariant;
+    padding?: CardPadding;
+    /** Renders a top slot inside the card, separated by a subtle divider. */
+    header?: ReactNode;
+    /** Renders a bottom slot inside the card, separated by a subtle divider. */
+    footer?: ReactNode;
+    /** When true, the whole card reacts to hover (border highlight + raised shadow). */
+    interactive?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Card } from './Card';
+export type { CardProps, CardVariant, CardPadding } from './Card.types';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from './Checkbox.types';
+export declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,11 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type CheckboxSize = 'md' | 'sm';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseProps {
+    size?: CheckboxSize;
+    label?: ReactNode;
+    description?: ReactNode;
+    /** Renders the mixed/"some selected" visual state (`aria-checked="mixed"`). */
+    indeterminate?: boolean;
+    error?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './Checkbox.types';

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerProps } from './DatePicker.types';
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/DatePicker/DatePicker.types.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type DatePickerSize = 'lg' | 'md' | 'sm';
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+export interface DatePickerProps extends BaseProps {
+    value?: Date | null;
+    onChange?: (date: Date) => void;
+    /** Enable range-selection mode. */
+    range?: boolean;
+    rangeValue?: DateRange;
+    onChangeRange?: (range: DateRange) => void;
+    size?: DatePickerSize;
+    label?: ReactNode;
+    placeholder?: string;
+    /** Fill the parent's width (like Input/Select) instead of the intrinsic
+     *  min-width. Use inside form grids so dates line up with other fields. */
+    fullWidth?: boolean;
+    id?: string;
+    className?: string;
+    wrapperClassName?: string;
+}

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

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerSize, DateRange } from './DatePicker.types';

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,2 @@
+import { DrawerProps } from './Drawer.types';
+export declare const Drawer: import('react').ForwardRefExoticComponent<DrawerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Drawer/Drawer.types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type DrawerSide = 'right' | 'left' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl';
+export interface DrawerProps extends BaseProps {
+    /** Whether the drawer is rendered and visible. */
+    open: boolean;
+    /** Called when the drawer requests to be closed (Escape, overlay click, close button). */
+    onClose: () => void;
+    /** Edge of the viewport the drawer slides in from. */
+    side?: DrawerSide;
+    /** Panel size — width when `side` is left/right, height when top/bottom. */
+    size?: DrawerSize;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    /** Whether clicking the overlay backdrop calls `onClose`. */
+    closeOnOverlayClick?: boolean;
+    /** Whether the built-in close (X) button is rendered. */
+    showClose?: boolean;
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Drawer } from './Drawer';
+export type { DrawerProps, DrawerSide, DrawerSize } from './Drawer.types';

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,7 @@
+import { DropdownContentProps, DropdownItemProps, DropdownLabelProps, DropdownMenuProps, DropdownSeparatorProps, DropdownTriggerProps } from './DropdownMenu.types';
+export declare const DropdownMenu: import('react').ForwardRefExoticComponent<DropdownMenuProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare function DropdownTrigger({ children }: DropdownTriggerProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare const DropdownContent: import('react').ForwardRefExoticComponent<DropdownContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownItem: import('react').ForwardRefExoticComponent<DropdownItemProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const DropdownSeparator: import('react').ForwardRefExoticComponent<DropdownSeparatorProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownLabel: import('react').ForwardRefExoticComponent<DropdownLabelProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/DropdownMenu/DropdownMenu.types.d.ts

@@ -0,0 +1,37 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type DropdownContentAlign = 'start' | 'end';
+export interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    children: ReactNode;
+    /** Uncontrolled initial open state. */
+    defaultOpen?: boolean;
+    /** Controlled open state. Pass alongside `onOpenChange` to fully control the menu. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export interface DropdownTriggerProps {
+    /** A single element cloned with the click handler and `aria-haspopup`/`aria-expanded` that open the menu. */
+    children: ReactElement;
+}
+export interface DropdownContentProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    children: ReactNode;
+    /** Horizontal alignment of the panel relative to the trigger. */
+    align?: DropdownContentAlign;
+}
+export interface DropdownItemProps extends ButtonHTMLAttributes<HTMLButtonElement>, BaseProps {
+    children: ReactNode;
+    /** Called on click, after any native `onClick`, then closes the menu. */
+    onSelect?: () => void;
+    icon?: ReactNode;
+    /** Trailing hint text, e.g. a keyboard shortcut. */
+    shortcut?: ReactNode;
+    /** Renders the item in the danger palette for destructive actions. */
+    destructive?: boolean;
+    /** Renders a leading check mark when `true`; reserves the space (unchecked) when `false`. Omit entirely for items with no check state. */
+    checked?: boolean;
+}
+export interface DropdownSeparatorProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+}
+export interface DropdownLabelProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    children: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { DropdownContent, DropdownItem, DropdownLabel, DropdownMenu, DropdownSeparator, DropdownTrigger, } from './DropdownMenu';
+export type { DropdownContentAlign, DropdownContentProps, DropdownItemProps, DropdownLabelProps, DropdownMenuProps, DropdownSeparatorProps, DropdownTriggerProps, } from './DropdownMenu.types';

package/dist/components/Filter/Filter.d.ts

@@ -0,0 +1,2 @@
+import { FilterProps } from './Filter.types';
+export declare const Filter: import('react').ForwardRefExoticComponent<FilterProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Filter/Filter.types.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type FilterSize = 'lg' | 'md' | 'sm';
+export interface FilterProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** Trigger label, always visible. */
+    label: ReactNode;
+    /** Selected value rendered after the label, separated by a dot. Its presence (even `""`) marks the filter as active. */
+    value?: ReactNode;
+    /** Forces the active (selected) visual style regardless of `value`. */
+    active?: boolean;
+    size?: FilterSize;
+    disabled?: boolean;
+    /** Called when the clear (×) affordance is activated. Only rendered when the filter is active. */
+    onClear?: () => void;
+    /** Popover content shown below the trigger while open. */
+    children?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { Filter } from './Filter';
+export type { FilterProps, FilterSize } from './Filter.types';

package/dist/components/IconTile/IconTile.d.ts

@@ -0,0 +1,2 @@
+import { IconTileProps } from './IconTile.types';
+export declare const IconTile: import('react').ForwardRefExoticComponent<IconTileProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/IconTile/IconTile.types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { BaseProps } from '../../types';
+export type IconTileTone = 'brand' | 'info' | 'gray' | 'purple' | 'pink' | 'yellow' | 'success' | 'warning' | 'danger';
+export type IconTileSize = 'sm' | 'md' | 'lg' | 'xl';
+export type IconTileShape = 'rounded' | 'circle';
+export interface IconTileProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** Any lucide-react icon component, rendered centered inside the tile. */
+    icon: LucideIcon;
+    tone?: IconTileTone;
+    size?: IconTileSize;
+    shape?: IconTileShape;
+}

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

@@ -0,0 +1,2 @@
+export { IconTile } from './IconTile';
+export type { IconTileProps, IconTileShape, IconTileSize, IconTileTone } from './IconTile.types';

package/dist/components/InfoField/InfoField.d.ts

@@ -0,0 +1,2 @@
+import { InfoFieldProps } from './InfoField.types';
+export declare const InfoField: import('react').ForwardRefExoticComponent<InfoFieldProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/InfoField/InfoField.types.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+import { BaseProps } from '../../types';
+import { IconTileTone } from '../IconTile';
+export interface InfoFieldProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+    /** Leading lucide-react icon. */
+    icon: LucideIcon;
+    /** IconTile tone for the leading badge. Defaults to "brand". */
+    iconTone?: IconTileTone;
+    /** Small uppercase label above the value. */
+    label: string;
+    /** The actual value — string or any node (chips, links, etc). */
+    value: ReactNode;
+    /** Optional right-aligned slot for inline actions (edit button, pill, link). */
+    action?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { InfoField } from './InfoField';
+export type { InfoFieldProps } from './InfoField.types';

package/dist/components/InlineAlert/InlineAlert.d.ts

@@ -0,0 +1,2 @@
+import { InlineAlertProps } from './InlineAlert.types';
+export declare const InlineAlert: import('react').ForwardRefExoticComponent<InlineAlertProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/InlineAlert/InlineAlert.types.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type InlineAlertVariant = 'success' | 'warning' | 'danger' | 'info' | 'discovery';
+export interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
+    variant?: InlineAlertVariant;
+    /** Overrides the native `title` (tooltip) attribute — rendered as the alert's heading. */
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Renders a trailing dismiss button that calls this on click. */
+    onDismiss?: () => void;
+    /** Extra content (typically buttons) rendered below the description. */
+    actions?: ReactNode;
+    /** Overrides the variant's default icon. */
+    icon?: ReactNode;
+}

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

@@ -0,0 +1,2 @@
+export { InlineAlert } from './InlineAlert';
+export type { InlineAlertProps, InlineAlertVariant } from './InlineAlert.types';

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from './Input.types';
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.types.d.ts

@@ -0,0 +1,15 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type InputSize = 'lg' | 'md' | 'sm';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    size?: InputSize;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    leftAddon?: ReactNode;
+    rightAddon?: ReactNode;
+    error?: boolean;
+    wrapperClassName?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps, InputSize } from './Input.types';

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,2 @@
+import { ModalProps } from './Modal.types';
+export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/Modal.types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export interface ModalProps extends BaseProps {
+    /** Whether the modal is mounted and visible. Nothing renders (not even to the portal) when false. */
+    open: boolean;
+    /** Called when the user presses Escape, clicks the overlay (if enabled), or clicks the close button. */
+    onClose: () => void;
+    title?: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Rendered in a bordered footer row, right-aligned — typically action buttons. */
+    footer?: ReactNode;
+    size?: ModalSize;
+    /** Close the modal when the backdrop is clicked. Defaults to `true`. */
+    closeOnOverlayClick?: boolean;
+    /** Show the close (X) button in the header. Defaults to `true`. */
+    showClose?: boolean;
+    /** Merged with the panel's own classes via `cn()` — last conflicting utility wins. */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal.types';

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,2 @@
+import { MultiSelectProps } from './MultiSelect.types';
+export declare const MultiSelect: import('react').ForwardRefExoticComponent<MultiSelectProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/MultiSelect/MultiSelect.types.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type MultiSelectSize = 'sm' | 'md' | 'lg';
+export interface MultiSelectOption {
+    value: string;
+    label: string;
+    /** Optional second line under the label in the dropdown. */
+    description?: string;
+    /** Optional avatar image — shown on the chip and the dropdown row. */
+    avatarSrc?: string;
+    /** Non-selectable option (shown dimmed in the list). */
+    disabled?: boolean;
+    /** Small tag rendered on the chip, e.g. "You". */
+    badge?: ReactNode;
+}
+export interface MultiSelectProps extends BaseProps {
+    options: MultiSelectOption[];
+    /** Selected option values (controlled). */
+    value: string[];
+    onChange: (values: string[]) => void;
+    size?: MultiSelectSize;
+    placeholder?: string;
+    /** Placeholder once at least one chip exists. Defaults to "Add another…". */
+    addMorePlaceholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    label?: ReactNode;
+    helperText?: ReactNode;
+    errorText?: ReactNode;
+    required?: boolean;
+    /** Values whose chips can't be removed. */
+    lockedValues?: string[];
+    /** Cap on how many can be selected (default: unlimited). */
+    max?: number;
+    /** Set false for a click-to-open picker with no text filter. */
+    searchable?: boolean;
+    /** Dropdown header shown when the query is empty. */
+    suggestionsLabel?: string;
+    /** Message shown when nothing matches. */
+    emptyText?: string;
+    id?: string;
+    className?: string;
+    wrapperClassName?: string;
+}

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

@@ -0,0 +1,2 @@
+export { MultiSelect } from './MultiSelect';
+export type { MultiSelectOption, MultiSelectProps, MultiSelectSize } from './MultiSelect.types';

package/dist/components/NotificationBadge/NotificationBadge.d.ts

@@ -0,0 +1,2 @@
+import { NotificationBadgeProps } from './NotificationBadge.types';
+export declare const NotificationBadge: import('react').ForwardRefExoticComponent<NotificationBadgeProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/components/NotificationBadge/NotificationBadge.types.d.ts

@@ -0,0 +1,15 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { BaseProps } from '../../types';
+export type NotificationBadgeSize = 'lg' | 'sm';
+export type NotificationBadgeVariant = 'brand' | 'danger' | 'success' | 'warning' | 'info';
+export type NotificationBadgeKind = 'count' | 'dot';
+export interface NotificationBadgeProps extends HTMLAttributes<HTMLSpanElement>, BaseProps {
+    count?: number;
+    max?: number;
+    kind?: NotificationBadgeKind;
+    size?: NotificationBadgeSize;
+    variant?: NotificationBadgeVariant;
+    /** Element the badge overlays. Omit to render the badge as a standalone element. */
+    children?: ReactNode;
+    showZero?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { NotificationBadge } from './NotificationBadge';
+export type { NotificationBadgeProps, NotificationBadgeKind, NotificationBadgeSize, NotificationBadgeVariant, } from './NotificationBadge.types';

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,2 @@
+import { PaginationProps } from './Pagination.types';
+export declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Pagination/Pagination.types.d.ts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+import { BaseProps } from '../../types';
+export interface PaginationProps extends HTMLAttributes<HTMLElement>, BaseProps {
+    /** Current active page, 1-indexed. */
+    page: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /** Called with the target page number when a page, previous, or next control is activated. */
+    onPageChange: (page: number) => void;
+    /** How many page numbers to show on each side of the current page. @default 1 */
+    siblingCount?: number;
+    /** How many page numbers to always show at the start and end of the range. @default 1 */
+    boundaryCount?: number;
+}

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

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination.types';

package/dist/components/PersonCard/PersonCard.d.ts

@@ -0,0 +1,2 @@
+import { PersonCardProps } from './PersonCard.types';
+export declare const PersonCard: import('react').ForwardRefExoticComponent<PersonCardProps & import('react').RefAttributes<HTMLDivElement>>;