teachable-design-system 0.1.7 → 0.1.9

package/dist/index.d.ts

@@ -0,0 +1,721 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ButtonProps {
+    width?: string;
+    height?: string;
+    type?: 'primary' | 'secondary' | 'tertiary';
+    size?: 'small' | 'medium' | 'large';
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}
+
+declare const Button: ({ width, height, type, size, label, onClick, disabled, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+interface CheckBoxProps {
+    size: "medium" | "large";
+    select: "off" | "on" | "indeterminate";
+    state: "default" | "disabled";
+    onClick?: () => void;
+}
+
+declare const CheckBox: ({ size, select, state, onClick }: CheckBoxProps) => react_jsx_runtime.JSX.Element;
+
+interface DropdownProps {
+    size?: "small" | "medium" | "large";
+    onSelect?: (option: string) => void;
+    options: string[];
+    label?: string;
+    placeholder?: string;
+}
+
+declare function Dropdown({ size, options, onSelect, label, placeholder }: DropdownProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps {
+    size?: 'small' | 'medium' | 'large';
+    label?: boolean;
+    labelText?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+}
+
+declare const Input: ({ size, label, labelText, placeholder, value, onChange, disabled, }: InputProps) => react_jsx_runtime.JSX.Element;
+
+interface SidebarProps {
+    buttonStyle?: 'start' | 'middle' | 'end';
+    title: string[];
+    description: string[][];
+}
+
+declare function Sidebar({ buttonStyle, description, title }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+interface TabItem {
+    id: string;
+    label: string;
+}
+interface TabBarProps {
+    title?: string;
+    items: TabItem[];
+    defaultSelectedId?: string;
+    onChange?: (id: string) => void;
+}
+declare const TabBar: ({ title, items, defaultSelectedId, onChange }: TabBarProps) => react_jsx_runtime.JSX.Element;
+
+declare const colors: {
+    background: {
+        white: string;
+        black: string;
+        'gray-subtler': string;
+        'gray-subtle': string;
+        inverse: string;
+    };
+    surface: {
+        white: string;
+        'white-subtler': string;
+        'white-subtle': string;
+        'white-static': string;
+        inverse: string;
+        'inverse-static': string;
+        'gray-subtler': string;
+        'gray-subtle': string;
+        disabled: string;
+        'primary-subtler': string;
+        'secondary-subtler': string;
+        'point-subtler': string;
+        'danger-subtler': string;
+        'warning-subtler': string;
+        'success-subtler': string;
+        'information-subtler': string;
+    };
+    border: {
+        transparency: string;
+        inverse: string;
+        disabled: string;
+        'gray-light': string;
+        gray: string;
+        'gray-dark': string;
+        'gray-darker': string;
+        'primary-light': string;
+        primary: string;
+        'secondary-light': string;
+        secondary: string;
+        'point-light': string;
+        point: string;
+        'danger-light': string;
+        danger: string;
+        'warning-light': string;
+        warning: string;
+        'success-light': string;
+        success: string;
+        'information-light': string;
+        information: string;
+    };
+    divider: {
+        'gray-light': string;
+        gray: string;
+        'gray-dark': string;
+        'gray-darker': string;
+        inverse: string;
+        'primary-light': string;
+        primary: string;
+        'secondary-light': string;
+        secondary: string;
+        error: string;
+        point: string;
+    };
+    text: {
+        bolder: string;
+        basic: string;
+        subtle: string;
+        disabled: string;
+        'disabled-on': string;
+        'border-inverse': string;
+        'basic-inverse': string;
+        'subtle-inverse': string;
+        static: string;
+        'inverse-static': string;
+        primary: string;
+        secondary: string;
+        point: string;
+        danger: string;
+        warning: string;
+        success: string;
+        information: string;
+    };
+    action: {
+        white: string;
+        primary: string;
+        'primary-hover': string;
+        'primary-pressed': string;
+        'primary-selected': string;
+        'primary-active': string;
+        secondary: string;
+        'secondary-hover': string;
+        'secondary-pressed': string;
+        'secondary-selected': string;
+        'secondary-on': string;
+        'secondary-on-hover': string;
+        'secondary-on-pressed': string;
+        'secondary-on-selected': string;
+        'secondary-active': string;
+        disabled: string;
+    };
+    element: {
+        inverse: string;
+        'inverse-static': string;
+        'gray-lighter': string;
+        'gray-light': string;
+        gray: string;
+        'gray-dark': string;
+        'disabled-light': string;
+        'disabled-dark': string;
+        'primary-light': string;
+        'primary-lighter': string;
+        primary: string;
+        'secondary-light': string;
+        'secondary-lighter': string;
+        secondary: string;
+        'point-light': string;
+        'point-lighter': string;
+        point: string;
+        danger: string;
+        'danger-lighter': string;
+        warning: string;
+        'warning-lighter': string;
+        success: string;
+        'success-lighter': string;
+        information: string;
+        'information-lighter': string;
+        'logo-text': string;
+    };
+    icon: {
+        gray: string;
+        'gary-light': string;
+        'gray-fill': string;
+        inverse: string;
+        disabled: string;
+        'disabled-on': string;
+        primary: string;
+        secondary: string;
+        point: string;
+        danger: string;
+        warning: string;
+        success: string;
+        information: string;
+        'inverse-static': string;
+        'primary-static': string;
+        'secondary-static': string;
+        'point-static': string;
+        'danger-static': string;
+        'warning-static': string;
+        'success-static': string;
+        'information-static': string;
+    };
+    link: {
+        default: string;
+        hover: string;
+        pressed: string;
+        visited: string;
+    };
+    button: {
+        'primary-fill': string;
+        'primary-fill-hover': string;
+        'primary-fill-pressed': string;
+        'secondary-fill': string;
+        'secondary-fill-hover': string;
+        'secondary-fill-pressed': string;
+        'secondary-border': string;
+        'tertiary-fill': string;
+        'tertiary-fill-hover': string;
+        'tertiary-fill-pressed': string;
+        'tertiary-border': string;
+        'text-fill': string;
+        'text-fill-hover': string;
+        'text-fill-pressed': string;
+        'text-border': string;
+        'disabled-fill': string;
+        'disabled-border': string;
+    };
+    input: {
+        surface: string;
+        border: string;
+        'border-active': string;
+        'border-error': string;
+        'surface-disabled': string;
+        'border-disabled': string;
+    };
+    graphic: {
+        'blue-subtler': string;
+        'blue-subtle': string;
+        blue: string;
+        'blue-dark': string;
+        'blue-darker': string;
+        'red-subtler': string;
+        'red-subtle': string;
+        red: string;
+        'red-dark': string;
+        'red-darker': string;
+        brand: string;
+    };
+    alpha: {
+        base100: string;
+        base75: string;
+        base50: string;
+        base25: string;
+        base10: string;
+        base0: string;
+        inverse100: string;
+        inverse75: string;
+        inverse50: string;
+        inverse25: string;
+        inverse10: string;
+        inverse0: string;
+        shadow0: string;
+        shadow1: string;
+        shadow2: string;
+        shadow3: string;
+    };
+    light: {
+        gray: {
+            '100': string;
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+            '0': string;
+        };
+        primary: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        secondary: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        point: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        danger: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        warning: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        success: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        information: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        alpha: {
+            black100: string;
+            black75: string;
+            black50: string;
+            black25: string;
+            black10: string;
+            black0: string;
+            white100: string;
+            white75: string;
+            white50: string;
+            white25: string;
+            white10: string;
+            white0: string;
+        };
+        graphic: {
+            '90': string;
+            '70': string;
+            '50': string;
+            '30': string;
+            '10': string;
+        };
+    };
+    highContrast: {
+        gray: {
+            '100': string;
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+            '0': string;
+        };
+        primary: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        secondary: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        point: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        danger: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        warning: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        success: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        information: {
+            '95': string;
+            '90': string;
+            '80': string;
+            '70': string;
+            '60': string;
+            '50': string;
+            '40': string;
+            '30': string;
+            '20': string;
+            '10': string;
+            '5': string;
+        };
+        alpha: {
+            black100: string;
+            black75: string;
+            black50: string;
+            black25: string;
+            black10: string;
+            black0: string;
+            white100: string;
+            white75: string;
+            white50: string;
+            white25: string;
+            white10: string;
+            white0: string;
+        };
+        graphic: {
+            '90': string;
+            '70': string;
+            '50': string;
+            '30': string;
+            '10': string;
+        };
+    };
+};
+
+declare const typography: {
+    fontFamily: {
+        primary: string;
+    };
+    display: {
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+    };
+    heading: {
+        xlarge: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        xsmall: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        xxsmall: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+    };
+    body: {
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        largeBold: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        mediumBold: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        smallBold: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        xsmall: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        xsmallBold: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+    };
+    label: {
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        xsmall: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+    };
+    navigation: {
+        titleMedium: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        titleSmall: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        depthMediumBold: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        depthMedium: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        depthSmallBold: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        depthSmall: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+    };
+    underline: {
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            textDecoration: string;
+        };
+        medium: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            textDecoration: string;
+        };
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            textDecoration: string;
+        };
+        xsmall: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            textDecoration: string;
+        };
+    };
+    fontWeight: {
+        regular: number;
+        bold: number;
+    };
+};
+
+export { Button, CheckBox, Dropdown, Input, Sidebar, TabBar, TabBarProps, TabItem, colors, typography };