@donkit-ai/design-system 1.1.6 → 1.1.7

package/dist/index.d.ts

@@ -0,0 +1,443 @@
+import type {
+  ReactNode,
+  ReactElement,
+  MouseEvent,
+  HTMLAttributes,
+  ButtonHTMLAttributes,
+  InputHTMLAttributes,
+  TextareaHTMLAttributes,
+  AnchorHTMLAttributes,
+} from 'react';
+
+// ─── Shared ───────────────────────────────────────────────────────────────
+
+type Size = 'xs' | 's' | 'm' | 'l';
+
+// ─── iconSizes ────────────────────────────────────────────────────────────
+
+export declare const iconSizes: { 1: 16; 2: 20; 3: 24; 4: 28; 5: 48 };
+
+// ─── Button ───────────────────────────────────────────────────────────────
+
+export interface ButtonProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+  children?: ReactNode;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  size?: Size;
+  fullWidth?: boolean;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  type?: 'button' | 'submit' | 'reset';
+  href?: string;
+  'aria-label'?: string;
+}
+
+export declare function Button(props: ButtonProps): JSX.Element;
+
+// ─── Tabs ─────────────────────────────────────────────────────────────────
+
+export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  size?: Size;
+  variant?: 'ghost' | 'underline';
+}
+
+export declare function Tabs(props: TabsProps): JSX.Element;
+
+export interface TabProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+  children?: ReactNode;
+  selected?: boolean;
+  onClick?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+  size?: Size;
+  variant?: 'ghost' | 'underline';
+  disabled?: boolean;
+  icon?: ReactNode;
+  href?: string;
+}
+
+export declare function Tab(props: TabProps): JSX.Element;
+
+// ─── Input ────────────────────────────────────────────────────────────────
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  fullWidth?: boolean;
+  icon?: ReactNode;
+  iconRight?: ReactNode;
+  onIconRightClick?: () => void;
+  size?: Size;
+}
+
+export declare function Input(props: InputProps): JSX.Element;
+
+// ─── Textarea ─────────────────────────────────────────────────────────────
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+  hint?: string;
+  fullWidth?: boolean;
+  size?: 'xs' | 's' | 'm';
+}
+
+export declare function Textarea(props: TextareaProps): JSX.Element;
+
+// ─── Select ───────────────────────────────────────────────────────────────
+
+export interface SelectOption {
+  value: string;
+  label: string;
+}
+
+export interface SelectProps {
+  label?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  options?: SelectOption[];
+  placeholder?: string;
+  error?: string;
+  fullWidth?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  id?: string;
+}
+
+export declare function Select(props: SelectProps): JSX.Element;
+
+// ─── Stepper ──────────────────────────────────────────────────────────────
+
+export interface StepperProps {
+  label?: string;
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: 'xs' | 's' | 'm';
+  disabled?: boolean;
+  hint?: string;
+  error?: string;
+}
+
+export declare function Stepper(props: StepperProps): JSX.Element;
+
+// ─── Toggle ───────────────────────────────────────────────────────────────
+
+export interface ToggleProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: Size;
+  disabled?: boolean;
+  label?: string;
+  id?: string;
+}
+
+export declare function Toggle(props: ToggleProps): JSX.Element;
+
+// ─── Checkbox ─────────────────────────────────────────────────────────────
+
+export interface CheckboxProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: Size;
+  disabled?: boolean;
+  label?: string;
+  id?: string;
+}
+
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+
+// ─── Radio ────────────────────────────────────────────────────────────────
+
+export interface RadioProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  size?: Size;
+  disabled?: boolean;
+  label?: string;
+  name?: string;
+  value?: string;
+  id?: string;
+}
+
+export declare function Radio(props: RadioProps): JSX.Element;
+
+// ─── Badge ────────────────────────────────────────────────────────────────
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  children?: ReactNode;
+  variant?: 'default' | 'info' | 'success' | 'warning' | 'error' | 'accent';
+  size?: 's' | 'm';
+}
+
+export declare function Badge(props: BadgeProps): JSX.Element;
+
+// ─── Alert ────────────────────────────────────────────────────────────────
+
+export interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  variant?: 'info' | 'success' | 'warning' | 'error';
+  title?: string;
+  onClose?: () => void;
+}
+
+export declare function Alert(props: AlertProps): JSX.Element;
+
+// ─── Modal ────────────────────────────────────────────────────────────────
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  title?: string;
+  onClose?: () => void;
+  size?: 's' | 'm' | 'l';
+}
+
+export declare function Modal(props: ModalProps): JSX.Element;
+
+export interface ModalFooterProps {
+  children?: ReactNode;
+}
+
+export declare function ModalFooter(props: ModalFooterProps): JSX.Element;
+
+// ─── Card ─────────────────────────────────────────────────────────────────
+
+export interface CardProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  padding?: 's' | 'm' | 'l';
+  variant?: 'info' | 'interactive';
+  /** @deprecated use variant="interactive" */
+  hover?: boolean;
+  onClick?: (e: MouseEvent<HTMLElement>) => void;
+  href?: string;
+  disabled?: boolean;
+}
+
+export declare function Card(props: CardProps): JSX.Element;
+
+// ─── Typography ───────────────────────────────────────────────────────────
+
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  children?: ReactNode;
+}
+
+export interface ParagraphProps extends HTMLAttributes<HTMLParagraphElement> {
+  children?: ReactNode;
+  secondary?: boolean;
+}
+
+export declare function H1(props: HeadingProps): JSX.Element;
+export declare function H2(props: HeadingProps): JSX.Element;
+export declare function H3(props: HeadingProps): JSX.Element;
+export declare function H4(props: HeadingProps): JSX.Element;
+export declare function P1(props: ParagraphProps): JSX.Element;
+export declare function P2(props: ParagraphProps): JSX.Element;
+export declare function P3(props: ParagraphProps): JSX.Element;
+
+// ─── Accordion ────────────────────────────────────────────────────────────
+
+export interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  title: string;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  padding?: 's' | 'm' | 'l';
+}
+
+export declare function Accordion(props: AccordionProps): JSX.Element;
+
+// ─── CodeAccordion ────────────────────────────────────────────────────────
+
+export interface CodeAccordionProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  title?: string;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  padding?: 's' | 'm' | 'l';
+}
+
+export declare function CodeAccordion(props: CodeAccordionProps): JSX.Element;
+
+// ─── Code ─────────────────────────────────────────────────────────────────
+
+export interface CodeProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode;
+  block?: boolean;
+  collapsible?: boolean;
+  title?: string;
+  defaultExpanded?: boolean;
+}
+
+export declare function Code(props: CodeProps): JSX.Element;
+
+// ─── Link ─────────────────────────────────────────────────────────────────
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  children?: ReactNode;
+}
+
+export declare function Link(props: LinkProps): JSX.Element;
+
+// ─── Tooltip ──────────────────────────────────────────────────────────────
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+  content?: ReactNode;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export declare function Tooltip(props: TooltipProps): JSX.Element;
+
+// ─── Spinner ──────────────────────────────────────────────────────────────
+
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: Size;
+  color?: 'default' | 'accent' | 'white';
+}
+
+export declare function Spinner(props: SpinnerProps): JSX.Element;
+
+// ─── Skeleton ─────────────────────────────────────────────────────────────
+
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+  width?: number | string;
+  height?: number | string;
+  shape?: 'rect' | 'circle';
+}
+
+export declare function Skeleton(props: SkeletonProps): JSX.Element;
+
+// ─── Avatar ───────────────────────────────────────────────────────────────
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  seed?: string;
+  icon?: ReactNode;
+  src?: string;
+  size?: number;
+}
+
+export declare function Avatar(props: AvatarProps): JSX.Element;
+
+// ─── Table ────────────────────────────────────────────────────────────────
+
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+  children?: ReactNode;
+  size?: 'compact' | 'comfortable';
+  stickyTop?: number | string;
+  maxHeight?: string;
+}
+
+export declare function Table(props: TableProps): JSX.Element;
+
+export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+}
+
+export declare function TableHead(props: TableHeadProps): JSX.Element;
+
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+  children?: ReactNode;
+}
+
+export declare function TableBody(props: TableBodyProps): JSX.Element;
+
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  children?: ReactNode;
+  interactive?: boolean;
+  selected?: boolean;
+  subheader?: boolean;
+  onClick?: () => void;
+}
+
+export declare function TableRow(props: TableRowProps): JSX.Element;
+
+export interface TableSubheaderRowProps extends HTMLAttributes<HTMLTableRowElement> {
+  children?: ReactNode;
+  colSpan?: number;
+}
+
+export declare function TableSubheaderRow(props: TableSubheaderRowProps): JSX.Element;
+
+export interface ThProps extends HTMLAttributes<HTMLTableCellElement> {
+  children?: ReactNode;
+  align?: 'left' | 'center' | 'right';
+  sortDir?: 'asc' | 'desc' | null;
+  onSort?: () => void;
+  width?: number | string;
+}
+
+export declare function Th(props: ThProps): JSX.Element;
+
+export interface TdProps extends HTMLAttributes<HTMLTableCellElement> {
+  children?: ReactNode;
+  align?: 'left' | 'center' | 'right';
+  secondary?: boolean;
+  muted?: boolean;
+  truncate?: boolean;
+  nowrap?: boolean;
+}
+
+export declare function Td(props: TdProps): JSX.Element;
+
+// ─── EmptyState ───────────────────────────────────────────────────────────
+
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  action?: ReactNode;
+  size?: 's' | 'm' | 'l';
+}
+
+export declare function EmptyState(props: EmptyStateProps): JSX.Element;
+
+// ─── Dropdown ─────────────────────────────────────────────────────────────
+
+export interface DropdownItem {
+  label?: string;
+  onClick?: () => void;
+  icon?: ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+  href?: string;
+  separator?: boolean;
+  type?: 'section';
+  content?: ReactNode;
+}
+
+export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  trigger: ReactNode;
+  items?: DropdownItem[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  align?: 'left' | 'right';
+}
+
+export declare function Dropdown(props: DropdownProps): JSX.Element;
+
+// ─── Toast ────────────────────────────────────────────────────────────────
+
+export interface ToastOptions {
+  type?: 'default' | 'success' | 'warning' | 'error';
+  duration?: number;
+}
+
+export interface ToastFn {
+  (message: string, opts?: ToastOptions): void;
+  success(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+  warning(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+  error(message: string, opts?: Omit<ToastOptions, 'type'>): void;
+}
+
+export declare function useToast(): { toast: ToastFn };
+
+export interface ToastContainerProps {
+  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+}
+
+export declare function ToastContainer(props: ToastContainerProps): JSX.Element | null;

package/package.json

@@ -1,16 +1,18 @@
 {
   "name": "@donkit-ai/design-system",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Donkit Design System - minimal design tokens and React components",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "sideEffects": [
     "*.css",
     "dist/tokens.css"
   ],
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
@@ -22,7 +24,7 @@
   ],
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && cp src/index.d.ts dist/index.d.ts",
     "preview": "vite preview",
     "prepublishOnly": "npm run build"
   },