@octavius2929-personal/design-system 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,512 @@
+import * as react from 'react';
+import { SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
+
+type SchemaName = "tinta";
+type Mode = "light" | "dark" | "sepia" | "contrast";
+declare const vars: {
+    color: {
+        bg1: `var(--${string})`;
+        bg2: `var(--${string})`;
+        bg3: `var(--${string})`;
+        bgInset: `var(--${string})`;
+        fg1: `var(--${string})`;
+        fg2: `var(--${string})`;
+        fg3: `var(--${string})`;
+        fgOnAccent: `var(--${string})`;
+        border1: `var(--${string})`;
+        border2: `var(--${string})`;
+        borderStrong: `var(--${string})`;
+        accent: `var(--${string})`;
+        accentHover: `var(--${string})`;
+        accentSoft: `var(--${string})`;
+        ok: `var(--${string})`;
+        warn: `var(--${string})`;
+        danger: `var(--${string})`;
+        info: `var(--${string})`;
+        scrim: `var(--${string})`;
+    };
+    font: {
+        readonly display: `var(--${string})`;
+        readonly text: `var(--${string})`;
+        readonly mono: `var(--${string})`;
+        readonly black: `var(--${string})`;
+    };
+    text: {
+        readonly eyebrow: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly display: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly h1: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly h2: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly h3: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly h4: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly body: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly lead: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly small: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+        readonly caption: {
+            readonly size: `var(--${string})`;
+            readonly lineHeight: `var(--${string})`;
+            readonly weight: `var(--${string})`;
+            readonly letterSpacing: `var(--${string})`;
+        };
+    };
+    weight: {
+        readonly light: `var(--${string})`;
+        readonly regular: `var(--${string})`;
+        readonly medium: `var(--${string})`;
+        readonly semibold: `var(--${string})`;
+        readonly bold: `var(--${string})`;
+    };
+    space: {
+        readonly none: `var(--${string})`;
+        readonly xs: `var(--${string})`;
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
+        readonly xl: `var(--${string})`;
+        readonly "2xl": `var(--${string})`;
+        readonly "3xl": `var(--${string})`;
+        readonly "4xl": `var(--${string})`;
+        readonly "5xl": `var(--${string})`;
+    };
+    radius: {
+        readonly none: `var(--${string})`;
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
+        readonly base: `var(--${string})`;
+        readonly full: `var(--${string})`;
+    };
+    border: {
+        readonly hair: `var(--${string})`;
+        readonly rule: `var(--${string})`;
+        readonly heavy: `var(--${string})`;
+    };
+    tracking: {
+        readonly tight: `var(--${string})`;
+        readonly normal: `var(--${string})`;
+        readonly wide: `var(--${string})`;
+        readonly wider: `var(--${string})`;
+        readonly widest: `var(--${string})`;
+    };
+    leading: {
+        readonly tight: `var(--${string})`;
+        readonly snug: `var(--${string})`;
+        readonly normal: `var(--${string})`;
+        readonly relaxed: `var(--${string})`;
+    };
+    dur: {
+        readonly fast: `var(--${string})`;
+        readonly base: `var(--${string})`;
+        readonly slow: `var(--${string})`;
+    };
+    ease: {
+        readonly ink: `var(--${string})`;
+    };
+    shadow: {
+        readonly sm: `var(--${string})`;
+        readonly md: `var(--${string})`;
+        readonly lg: `var(--${string})`;
+    };
+};
+declare const themes: Record<SchemaName, Record<Mode, string>>;
+declare const schemaNames: readonly SchemaName[];
+declare const modeNames: readonly Mode[];
+
+declare function useToggle(initial?: boolean): readonly [boolean, () => void, (value: boolean) => void];
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+    /** Lado del cuadro en px. Por defecto 20. */
+    size?: number;
+    /** Grosor de trazo. Por defecto 1.75. */
+    strokeWidth?: number;
+}
+type Icon = (props: IconProps) => ReactElement;
+
+type ButtonVariant = "filled" | "outline" | "ghost";
+type ButtonTone = "ink" | "accent";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    startIcon?: Icon;
+    endIcon?: Icon;
+    full?: boolean;
+}
+
+declare function Button({ variant, tone, size, startIcon: StartIcon, endIcon: EndIcon, full, className, children, ...rest }: ButtonProps): react.JSX.Element;
+
+interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
+    vertical?: boolean;
+    label?: ReactNode;
+}
+
+declare function Divider({ vertical, label, ...rest }: DividerProps): react.JSX.Element;
+
+type AvatarSize = "sm" | "md" | "lg";
+interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: AvatarSize;
+    filled?: boolean;
+}
+
+declare function Avatar({ size, filled, className, children, ...rest }: AvatarProps): react.JSX.Element;
+
+type BadgeTone = "ink" | "accent";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    count?: number;
+    tone?: BadgeTone;
+}
+
+declare function Badge({ count, tone, className, children, ...rest }: BadgeProps): react.JSX.Element;
+
+type ProgressVariant = "linear" | "circular";
+interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: ProgressVariant;
+    value?: number;
+    size?: number;
+}
+
+declare function Progress({ variant, value, size, className, ...rest }: ProgressProps): react.JSX.Element;
+
+type ChipTone = "ink" | "accent";
+interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
+    selected?: boolean;
+    tone?: ChipTone;
+    onDelete?: () => void;
+}
+
+declare function Chip({ selected, tone, onDelete, onClick, children, ...rest }: ChipProps): react.JSX.Element;
+
+interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: ReactNode;
+    disabled?: boolean;
+    id?: string;
+}
+
+declare function Checkbox({ checked, onChange, label, disabled, id, }: CheckboxProps): react.JSX.Element;
+
+interface RadioProps {
+    checked?: boolean;
+    onChange?: () => void;
+    label?: ReactNode;
+    name?: string;
+    value?: string;
+    disabled?: boolean;
+}
+
+declare function Radio({ checked, onChange, label, name, value, disabled }: RadioProps): react.JSX.Element;
+
+interface SwitchProps {
+    checked?: boolean;
+    onChange?: (checked: boolean) => void;
+    label?: ReactNode;
+    disabled?: boolean;
+}
+
+declare function Switch({ checked, onChange, label, disabled }: SwitchProps): react.JSX.Element;
+
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    label?: ReactNode;
+    help?: ReactNode;
+    error?: boolean;
+    startIcon?: Icon;
+    multiline?: boolean;
+    rows?: number;
+    onChange?: (value: string) => void;
+}
+
+declare function TextField({ label, help, error, startIcon: StartIcon, multiline, rows, type, onChange, className, id, ...rest }: TextFieldProps): react.JSX.Element;
+
+type IconButtonTone = "ink" | "accent";
+interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "className"> {
+    icon: Icon;
+    active?: boolean;
+    tone?: IconButtonTone;
+    title: string;
+}
+
+declare function IconButton({ icon: Icon, active, tone, title, ...rest }: IconButtonProps): react.JSX.Element;
+
+type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "className">;
+type CardProps = DivProps;
+type CardSectionProps = DivProps;
+
+declare function CardRoot({ children, ...rest }: CardProps): react.JSX.Element;
+declare namespace CardRoot {
+    var displayName: string;
+}
+declare function CardHeader({ children, ...rest }: CardSectionProps): react.JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
+declare function CardBody({ children, ...rest }: CardSectionProps): react.JSX.Element;
+declare namespace CardBody {
+    var displayName: string;
+}
+declare function CardFooter({ children, ...rest }: CardSectionProps): react.JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
+declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+
+type AlertSeverity = "info" | "ok" | "warn" | "danger";
+interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    severity?: AlertSeverity;
+    title?: ReactNode;
+    icon?: Icon;
+}
+
+declare function Alert({ severity, title, icon, className, children, ...rest }: AlertProps): react.JSX.Element;
+
+type TooltipPlacement = "top" | "bottom";
+interface TooltipProps {
+    label: ReactNode;
+    children: ReactElement;
+    placement?: TooltipPlacement;
+}
+
+declare function Tooltip({ label, children, placement }: TooltipProps): react.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: ReactNode;
+}
+interface SelectProps {
+    options: SelectOption[];
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: ReactNode;
+    label?: ReactNode;
+    disabled?: boolean;
+}
+
+declare function Select({ options, value, onChange, placeholder, label, disabled }: SelectProps): react.JSX.Element;
+
+interface SliderProps {
+    value?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    label?: string;
+}
+
+declare function Slider({ value, onChange, min, max, step, disabled, label, }: SliderProps): react.JSX.Element;
+
+interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    multiple?: boolean;
+    defaultOpen?: string[];
+    className?: string;
+}
+
+declare function Accordion({ items, multiple, defaultOpen, className, }: AccordionProps): react.JSX.Element;
+
+interface Crumb {
+    label: ReactNode;
+    href?: string;
+}
+interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
+    items: Crumb[];
+}
+
+declare function Breadcrumbs({ items, className, ...rest }: BreadcrumbsProps): react.JSX.Element;
+
+interface PaginationProps {
+    count: number;
+    page?: number;
+    onChange?: (page: number) => void;
+    siblingCount?: number;
+}
+
+declare function Pagination({ count, page, onChange, siblingCount }: PaginationProps): react.JSX.Element;
+
+interface Step {
+    label: ReactNode;
+}
+interface StepperProps extends HTMLAttributes<HTMLDivElement> {
+    steps: Step[];
+    active?: number;
+}
+
+declare function Stepper({ steps, active, className, ...rest }: StepperProps): react.JSX.Element;
+
+interface TabItem {
+    value: string;
+    label: ReactNode;
+}
+interface TabsProps {
+    items: TabItem[];
+    value?: string;
+    onChange?: (value: string) => void;
+}
+
+declare function Tabs({ items, value, onChange }: TabsProps): react.JSX.Element;
+
+interface MenuItemDef {
+    label: ReactNode;
+    onClick?: () => void;
+    danger?: boolean;
+}
+interface MenuProps {
+    trigger: ReactElement;
+    items: MenuItemDef[];
+}
+
+declare function Menu({ trigger, items }: MenuProps): react.JSX.Element;
+
+interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: ReactNode;
+    actions?: ReactNode;
+    children?: ReactNode;
+}
+
+declare function Dialog({ open, onClose, title, actions, children }: DialogProps): react.JSX.Element | null;
+
+interface SnackbarProps {
+    open: boolean;
+    message: ReactNode;
+    action?: ReactNode;
+    onClose?: () => void;
+}
+
+declare function Snackbar({ open, message, action, onClose }: SnackbarProps): react.JSX.Element | null;
+
+interface TableColumn<Row> {
+    key: string;
+    header: ReactNode;
+    render?: (row: Row) => ReactNode;
+    align?: "left" | "right";
+}
+interface TableProps<Row extends Record<string, unknown>> extends TableHTMLAttributes<HTMLTableElement> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    getRowKey?: (row: Row, index: number) => string | number;
+}
+
+declare function Table<Row extends Record<string, unknown>>({ columns, rows, getRowKey, className, ...rest }: TableProps<Row>): react.JSX.Element;
+
+interface AppBarProps extends HTMLAttributes<HTMLElement> {
+    brand?: ReactNode;
+    actions?: ReactNode;
+}
+
+declare function AppBar({ brand, actions, className, children, ...rest }: AppBarProps): react.JSX.Element;
+
+interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
+    leading?: ReactNode;
+    trailing?: ReactNode;
+    selected?: boolean;
+}
+
+declare function ListItem({ leading, trailing, selected, className, children, ...rest }: ListItemProps): react.JSX.Element;
+
+declare function ChevronDownIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function ChevronUpIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function ChevronLeftIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function ChevronRightIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function CheckIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function XIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function EyeIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function EyeOffIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function SearchIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function InfoIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function CircleCheckIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function TriangleAlertIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function CircleXIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function PlusIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function MinusIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare function MoreHorizontalIcon({ size, strokeWidth, ...rest }: IconProps): react.JSX.Element;
+
+declare const text: Record<"display" | "eyebrow" | "h1" | "h2" | "h3" | "h4" | "body" | "lead" | "small" | "caption" | "code" | "blackletter", string>;
+
+interface ThemeContextValue {
+    schema: SchemaName;
+    mode: Mode;
+    themeClass: string;
+    setSchema: (schema: SchemaName) => void;
+    setMode: (mode: Mode) => void;
+    toggleMode: () => void;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    defaultSchema?: SchemaName;
+    defaultMode?: Mode;
+}
+declare function ThemeProvider({ children, defaultSchema, defaultMode, }: ThemeProviderProps): react.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, modeNames, schemaNames, text, vars as theme, themes, useTheme, useToggle };