notion-design-system/dist/index.d.ts

A comprehensive Notion-inspired design system built with React, TypeScript, and Tailwind CSS

import React$1 from 'react';

interface BaseComponentProps {
    className?: string;
    children?: React.ReactNode;
}
type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
type ButtonSize = 'sm' | 'md' | 'lg';
type InputVariant = 'default' | 'filled';
type InputSize = 'sm' | 'md' | 'lg';
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'caption' | 'overline';
type ColorVariant = 'default' | 'blue' | 'red' | 'yellow' | 'green' | 'purple' | 'pink' | 'orange' | 'gray';
interface IconProps extends BaseComponentProps {
    size?: number;
    color?: string;
}
interface BlockProps extends BaseComponentProps {
    id?: string;
    type: 'text' | 'heading' | 'bullet' | 'numbered' | 'todo' | 'toggle' | 'quote' | 'code';
    content?: string;
    level?: number;
    checked?: boolean;
    collapsed?: boolean;
}

interface ButtonProps extends BaseComponentProps {
    variant?: ButtonVariant;
    size?: ButtonSize;
    disabled?: boolean;
    loading?: boolean;
    onClick?: () => void;
    type?: 'button' | 'submit' | 'reset';
    icon?: React$1.ReactNode;
    iconPosition?: 'left' | 'right';
}
declare const Button: React$1.FC<ButtonProps>;

interface InputProps extends BaseComponentProps, Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    variant?: InputVariant;
    size?: InputSize;
    label?: string;
    error?: string;
    helperText?: string;
    leftIcon?: React$1.ReactNode;
    rightIcon?: React$1.ReactNode;
    fullWidth?: boolean;
}
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;

interface TypographyProps extends BaseComponentProps {
    variant?: TypographyVariant;
    color?: ColorVariant;
    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
    align?: 'left' | 'center' | 'right';
    as?: keyof JSX.IntrinsicElements;
}
declare const Typography: React$1.FC<TypographyProps>;

interface CardProps extends BaseComponentProps {
    variant?: 'default' | 'outlined' | 'elevated';
    padding?: 'none' | 'sm' | 'md' | 'lg';
    hoverable?: boolean;
    clickable?: boolean;
    onClick?: () => void;
}
declare const Card: React$1.FC<CardProps>;

interface BadgeProps extends BaseComponentProps {
    variant?: 'solid' | 'soft' | 'outline';
    color?: ColorVariant;
    size?: 'sm' | 'md' | 'lg';
    removable?: boolean;
    onRemove?: () => void;
}
declare const Badge: React$1.FC<BadgeProps>;

interface AvatarProps extends BaseComponentProps {
    src?: string;
    alt?: string;
    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
    fallback?: string;
    shape?: 'circle' | 'square';
}
declare const Avatar: React$1.FC<AvatarProps>;

interface TooltipProps extends BaseComponentProps {
    content: React$1.ReactNode;
    placement?: 'top' | 'bottom' | 'left' | 'right';
    trigger?: 'hover' | 'click';
    delay?: number;
    disabled?: boolean;
}
declare const Tooltip: React$1.FC<TooltipProps>;

declare const Block: React$1.FC<BlockProps>;

interface SidebarItem {
    id: string;
    title: string;
    type: 'page' | 'folder';
    icon?: React$1.ReactNode;
    children?: SidebarItem[];
    expanded?: boolean;
    level?: number;
}
interface SidebarProps extends BaseComponentProps {
    items: SidebarItem[];
    onItemClick?: (item: SidebarItem) => void;
    onItemToggle?: (item: SidebarItem) => void;
    selectedId?: string;
    searchable?: boolean;
    width?: number;
}
declare const Sidebar: React$1.FC<SidebarProps>;

export { Avatar, Badge, Block, Button, Card, Input, Sidebar, Tooltip, Typography };
export type { AvatarProps, BadgeProps, BaseComponentProps, BlockProps, ButtonProps, ButtonSize, ButtonVariant, CardProps, ColorVariant, IconProps, InputProps, InputSize, InputVariant, SidebarItem, SidebarProps, TooltipProps, TypographyProps, TypographyVariant };