@altruist03/ui 0.0.0-stage → 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,289 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, CSSProperties, TextareaHTMLAttributes } from 'react';
+
+type AltruistTheme = {
+    colors: {
+        primary: string;
+        primaryHover: string;
+        onPrimary: string;
+        secondary: string;
+        onSecondary: string;
+        danger: string;
+        success: string;
+        warning: string;
+        text: string;
+        textMuted: string;
+        surface: string;
+        surfaceMuted: string;
+        border: string;
+        focus: string;
+    };
+    fontFamily: string;
+    fontSize: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    spacing: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+};
+type ThemeOverride = {
+    colors?: Partial<AltruistTheme['colors']>;
+    fontFamily?: string;
+    fontSize?: Partial<AltruistTheme['fontSize']>;
+    radius?: Partial<AltruistTheme['radius']>;
+    spacing?: Partial<AltruistTheme['spacing']>;
+};
+type ColorProp = 'primary' | 'secondary' | 'danger' | 'success' | 'warning' | 'text' | 'textMuted' | 'border' | 'surface' | (string & {});
+type FontSizeProp = 'xs' | 'sm' | 'md' | 'lg' | number | (string & {});
+type ControlSize = 'sm' | 'md' | 'lg';
+
+type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
+    color?: ColorProp;
+    variant?: 'soft' | 'solid';
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    children: ReactNode;
+};
+declare function Badge({ color, variant, fontSize, fontFamily, className, style, children, ...rest }: BadgeProps): react.JSX.Element;
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: 'solid' | 'outline' | 'ghost';
+    color?: ColorProp;
+    textColor?: ColorProp;
+    size?: ControlSize;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    fullWidth?: boolean;
+    loading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+};
+declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    variant?: "solid" | "outline" | "ghost";
+    color?: ColorProp;
+    textColor?: ColorProp;
+    size?: ControlSize;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    fullWidth?: boolean;
+    loading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+type CardProps = HTMLAttributes<HTMLElement> & {
+    title?: ReactNode;
+    description?: ReactNode;
+    footer?: ReactNode;
+    padding?: 'sm' | 'md' | 'lg';
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+};
+declare function Card({ title, description, footer, padding, fontSize, fontFamily, className, style, children, ...rest }: CardProps): react.JSX.Element;
+
+type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+};
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+    label?: ReactNode;
+    description?: ReactNode;
+    error?: ReactNode;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type FieldProps = {
+    id: string;
+    label?: ReactNode;
+    required?: boolean;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    messageId?: string;
+    fontFamily?: string;
+    children: ReactNode;
+    className?: string;
+};
+declare function Field({ id, label, required, helperText, error, messageId, fontFamily, children, className, }: FieldProps): react.JSX.Element;
+
+type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    emptyText?: ReactNode;
+    buttonLabel?: string;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+};
+declare const FileInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    emptyText?: ReactNode;
+    buttonLabel?: string;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type FloatingInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'placeholder'> & {
+    label: ReactNode;
+    placeholder?: string;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+};
+declare const FloatingInput: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "placeholder"> & {
+    label: ReactNode;
+    placeholder?: string;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+};
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    size?: ControlSize;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type SelectOption = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type SelectProps = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    placeholder?: string;
+    options: SelectOption[];
+    size?: ControlSize;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+};
+declare const Select: react.ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    placeholder?: string;
+    options: SelectOption[];
+    size?: ControlSize;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+} & react.RefAttributes<HTMLSelectElement>>;
+
+type TableColumn<Row> = {
+    key: string;
+    header: ReactNode;
+    align?: 'left' | 'center' | 'right';
+    width?: string | number;
+    render?: (row: Row) => ReactNode;
+};
+type TableProps<Row> = {
+    columns: Array<TableColumn<Row>>;
+    rows: Row[];
+    getRowKey: (row: Row, index: number) => string;
+    caption?: ReactNode;
+    emptyLabel?: ReactNode;
+    size?: ControlSize;
+    striped?: boolean;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function Table<Row>({ columns, rows, getRowKey, caption, emptyLabel, size, striped, fontSize, fontFamily, className, style, }: TableProps<Row>): react.JSX.Element;
+
+type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+};
+declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    error?: ReactNode;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    color?: ColorProp;
+} & react.RefAttributes<HTMLTextAreaElement>>;
+
+type AccordionItem = {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+};
+type AccordionProps = {
+    items: AccordionItem[];
+    allowMultiple?: boolean;
+    defaultOpenIds?: string[];
+    color?: ColorProp;
+    fontSize?: FontSizeProp;
+    fontFamily?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function Accordion({ items, allowMultiple, defaultOpenIds, color, fontSize, fontFamily, className, style, }: AccordionProps): react.JSX.Element;
+
+declare function themeToCssVars(theme: AltruistTheme): CSSProperties;
+
+declare const altruistTheme: AltruistTheme;
+
+declare const indigoTheme: ThemeOverride;
+declare const darkTheme: ThemeOverride;
+declare function mergeTheme(base?: AltruistTheme, override?: ThemeOverride): AltruistTheme;
+
+type ThemeProviderProps = {
+    theme?: ThemeOverride;
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+declare function ThemeProvider({ theme, children, className, style }: ThemeProviderProps): react.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, type AltruistTheme, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, type ColorProp, type ControlSize, Field, type FieldProps, FileInput, type FileInputProps, FloatingInput, type FloatingInputProps, type FontSizeProp, Input, type InputProps, Select, type SelectOption, type SelectProps, Table, type TableColumn, type TableProps, Textarea, type TextareaProps, type ThemeOverride, ThemeProvider, type ThemeProviderProps, altruistTheme, darkTheme, indigoTheme, mergeTheme, themeToCssVars };