@ingamigo/ui 1.2.2 → 1.2.3

package/dist/index.d.ts

@@ -1,13 +1,354 @@
-export { ThemeProvider } from "./theme";
-export { theme } from "./theme";
-export type { IngAmigoTheme } from "./theme";
-export { default as Button } from "./components/button/button";
-export { default as Input } from "./components/input/input";
-export { default as Typography } from "./components/typography/typography";
-export { default as SegmentedControl } from "./components/segmented-control/segmented-control";
-export { default as Logo } from "./components/logo/logo";
-export type { ButtonProps } from "./components/button/button";
-export type { InputProps } from "./components/input/input";
-export type { TypographyProps, TypographyVariant, } from "./components/typography/typography";
-export type { SegmentedControlOption, SegmentedControlProps, } from "./components/segmented-control/segmented-control";
-//# sourceMappingURL=index.d.ts.map
+import * as react from 'react';
+import { ButtonHTMLAttributes, InputHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+
+interface ThemeProviderProps {
+    children: React.ReactNode;
+}
+declare function ThemeProvider({ children, }: ThemeProviderProps): react.JSX.Element;
+
+declare const lightTheme: {
+    readonly background: {
+        readonly primary: "#f5f5f5";
+        readonly secondary: "#ffffff";
+    };
+    readonly surface: {
+        readonly primary: "#ffffff";
+        readonly secondary: "#f5f5f5";
+        readonly tertiary: "#e9e9ea";
+    };
+    readonly text: {
+        readonly primary: "#141414";
+        readonly secondary: "#5f6066";
+        readonly tertiary: "#7b7b82";
+        readonly disabled: "#97979d";
+        readonly inverse: "#ffffff";
+    };
+    readonly border: {
+        readonly default: "#d5d5d7";
+        readonly strong: "#b9b9bd";
+        readonly focus: "#4db288";
+    };
+    readonly action: {
+        readonly primary: "#4db288";
+        readonly primaryHover: "#3d9873";
+    };
+    readonly status: {
+        readonly success: "#4db288";
+        readonly warning: "#e7b94c";
+        readonly danger: "#cc5c6f";
+    };
+    readonly semanticTypography: {
+        readonly fontSize: {
+            readonly body: "16px";
+            readonly bodySm: "14px";
+            readonly bodyLg: "18px";
+            readonly label: "14px";
+            readonly heading1: "36px";
+            readonly heading2: "32px";
+            readonly heading3: "24px";
+        };
+        readonly fontWeight: {
+            readonly heading: 700;
+            readonly body: 400;
+            readonly label: 500;
+        };
+    };
+    readonly radiusSemantic: {
+        readonly control: "16px";
+        readonly card: "24px";
+        readonly container: "24px";
+    };
+    readonly elevation: {
+        readonly surface: "0 2px 8px rgb(0 0 0 / 18%)";
+        readonly floating: "0 6px 16px rgb(0 0 0 / 24%)";
+        readonly overlay: "0 12px 32px rgb(0 0 0 / 30%)";
+    };
+    readonly motionSemantic: {
+        readonly interaction: "200ms";
+        readonly transition: "ease";
+    };
+    readonly colors: {
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly neutral: {
+            readonly 50: "#f5f5f5";
+            readonly 100: "#e9e9ea";
+            readonly 200: "#d5d5d7";
+            readonly 300: "#b9b9bd";
+            readonly 400: "#97979d";
+            readonly 500: "#7b7b82";
+            readonly 600: "#5f6066";
+            readonly 700: "#45464b";
+            readonly 800: "#2e3035";
+            readonly 900: "#1d1e20";
+            readonly 950: "#141414";
+        };
+        readonly brand: {
+            readonly 400: "#63c69d";
+            readonly 500: "#4db288";
+            readonly 600: "#3d9873";
+        };
+        readonly success: "#4db288";
+        readonly warning: "#e7b94c";
+        readonly danger: "#cc5c6f";
+    };
+    readonly spacing: {
+        readonly 1: "4px";
+        readonly 2: "8px";
+        readonly 3: "12px";
+        readonly 4: "16px";
+        readonly 5: "20px";
+        readonly 6: "24px";
+        readonly 7: "28px";
+        readonly 8: "32px";
+        readonly 10: "40px";
+        readonly 12: "48px";
+        readonly 16: "64px";
+        readonly 20: "80px";
+    };
+    readonly radius: {
+        readonly none: "0px";
+        readonly xs: "8px";
+        readonly sm: "12px";
+        readonly md: "16px";
+        readonly lg: "20px";
+        readonly xl: "24px";
+        readonly "2xl": "28px";
+        readonly full: "9999px";
+    };
+    readonly typography: {
+        readonly fontFamily: "\n      Inter,\n      system-ui,\n      -apple-system,\n      BlinkMacSystemFont,\n      \"Segoe UI\",\n      Roboto,\n      Helvetica,\n      Arial,\n      sans-serif\n    ";
+        readonly fontSize: {
+            readonly xs: "12px";
+            readonly sm: "14px";
+            readonly md: "16px";
+            readonly lg: "18px";
+            readonly xl: "20px";
+            readonly "2xl": "24px";
+            readonly "3xl": "32px";
+            readonly "4xl": "36px";
+            readonly "5xl": "40px";
+        };
+        readonly fontWeight: {
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.15;
+            readonly normal: 1.4;
+            readonly relaxed: 1.6;
+        };
+    };
+    readonly shadows: {
+        readonly sm: "0 2px 8px rgb(0 0 0 / 18%)";
+        readonly md: "0 6px 16px rgb(0 0 0 / 24%)";
+        readonly lg: "0 12px 32px rgb(0 0 0 / 30%)";
+        readonly xl: "0 20px 48px rgb(0 0 0 / 36%)";
+    };
+    readonly motion: {
+        readonly duration: {
+            readonly fast: "150ms";
+            readonly normal: "200ms";
+            readonly slow: "300ms";
+        };
+        readonly ease: {
+            readonly standard: "ease";
+        };
+    };
+};
+declare const theme: {
+    readonly background: {
+        readonly primary: "#f5f5f5";
+        readonly secondary: "#ffffff";
+    };
+    readonly surface: {
+        readonly primary: "#ffffff";
+        readonly secondary: "#f5f5f5";
+        readonly tertiary: "#e9e9ea";
+    };
+    readonly text: {
+        readonly primary: "#141414";
+        readonly secondary: "#5f6066";
+        readonly tertiary: "#7b7b82";
+        readonly disabled: "#97979d";
+        readonly inverse: "#ffffff";
+    };
+    readonly border: {
+        readonly default: "#d5d5d7";
+        readonly strong: "#b9b9bd";
+        readonly focus: "#4db288";
+    };
+    readonly action: {
+        readonly primary: "#4db288";
+        readonly primaryHover: "#3d9873";
+    };
+    readonly status: {
+        readonly success: "#4db288";
+        readonly warning: "#e7b94c";
+        readonly danger: "#cc5c6f";
+    };
+    readonly semanticTypography: {
+        readonly fontSize: {
+            readonly body: "16px";
+            readonly bodySm: "14px";
+            readonly bodyLg: "18px";
+            readonly label: "14px";
+            readonly heading1: "36px";
+            readonly heading2: "32px";
+            readonly heading3: "24px";
+        };
+        readonly fontWeight: {
+            readonly heading: 700;
+            readonly body: 400;
+            readonly label: 500;
+        };
+    };
+    readonly radiusSemantic: {
+        readonly control: "16px";
+        readonly card: "24px";
+        readonly container: "24px";
+    };
+    readonly elevation: {
+        readonly surface: "0 2px 8px rgb(0 0 0 / 18%)";
+        readonly floating: "0 6px 16px rgb(0 0 0 / 24%)";
+        readonly overlay: "0 12px 32px rgb(0 0 0 / 30%)";
+    };
+    readonly motionSemantic: {
+        readonly interaction: "200ms";
+        readonly transition: "ease";
+    };
+    readonly colors: {
+        readonly white: "#ffffff";
+        readonly black: "#000000";
+        readonly neutral: {
+            readonly 50: "#f5f5f5";
+            readonly 100: "#e9e9ea";
+            readonly 200: "#d5d5d7";
+            readonly 300: "#b9b9bd";
+            readonly 400: "#97979d";
+            readonly 500: "#7b7b82";
+            readonly 600: "#5f6066";
+            readonly 700: "#45464b";
+            readonly 800: "#2e3035";
+            readonly 900: "#1d1e20";
+            readonly 950: "#141414";
+        };
+        readonly brand: {
+            readonly 400: "#63c69d";
+            readonly 500: "#4db288";
+            readonly 600: "#3d9873";
+        };
+        readonly success: "#4db288";
+        readonly warning: "#e7b94c";
+        readonly danger: "#cc5c6f";
+    };
+    readonly spacing: {
+        readonly 1: "4px";
+        readonly 2: "8px";
+        readonly 3: "12px";
+        readonly 4: "16px";
+        readonly 5: "20px";
+        readonly 6: "24px";
+        readonly 7: "28px";
+        readonly 8: "32px";
+        readonly 10: "40px";
+        readonly 12: "48px";
+        readonly 16: "64px";
+        readonly 20: "80px";
+    };
+    readonly radius: {
+        readonly none: "0px";
+        readonly xs: "8px";
+        readonly sm: "12px";
+        readonly md: "16px";
+        readonly lg: "20px";
+        readonly xl: "24px";
+        readonly "2xl": "28px";
+        readonly full: "9999px";
+    };
+    readonly typography: {
+        readonly fontFamily: "\n      Inter,\n      system-ui,\n      -apple-system,\n      BlinkMacSystemFont,\n      \"Segoe UI\",\n      Roboto,\n      Helvetica,\n      Arial,\n      sans-serif\n    ";
+        readonly fontSize: {
+            readonly xs: "12px";
+            readonly sm: "14px";
+            readonly md: "16px";
+            readonly lg: "18px";
+            readonly xl: "20px";
+            readonly "2xl": "24px";
+            readonly "3xl": "32px";
+            readonly "4xl": "36px";
+            readonly "5xl": "40px";
+        };
+        readonly fontWeight: {
+            readonly regular: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.15;
+            readonly normal: 1.4;
+            readonly relaxed: 1.6;
+        };
+    };
+    readonly shadows: {
+        readonly sm: "0 2px 8px rgb(0 0 0 / 18%)";
+        readonly md: "0 6px 16px rgb(0 0 0 / 24%)";
+        readonly lg: "0 12px 32px rgb(0 0 0 / 30%)";
+        readonly xl: "0 20px 48px rgb(0 0 0 / 36%)";
+    };
+    readonly motion: {
+        readonly duration: {
+            readonly fast: "150ms";
+            readonly normal: "200ms";
+            readonly slow: "300ms";
+        };
+        readonly ease: {
+            readonly standard: "ease";
+        };
+    };
+};
+type IngAmigoTheme = typeof lightTheme;
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "ghost";
+    size?: "small" | "medium" | "large" | "icon";
+}
+declare const Button: ({ variant, size, children, ...props }: ButtonProps) => react.JSX.Element;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    inputSize?: "small" | "medium" | "large";
+}
+declare const Input: ({ inputSize, ...props }: InputProps) => react.JSX.Element;
+
+type TypographyVariant = "heading-1" | "heading-2" | "heading-3" | "body-lg" | "body" | "body-sm" | "label";
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    variant?: TypographyVariant;
+    children: ReactNode;
+}
+declare const Typography: ({ variant, children, ...props }: TypographyProps) => react.JSX.Element;
+
+interface SegmentedControlOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    disabled?: boolean;
+}
+interface SegmentedControlProps<T extends string> {
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+}
+declare const SegmentedControl: <T extends string>({ options, value, onChange, size, disabled, }: SegmentedControlProps<T>) => react.JSX.Element;
+
+interface LogoProps extends HTMLAttributes<HTMLDivElement> {
+    service?: string;
+    animate?: boolean;
+    size?: "small" | "medium" | "large";
+}
+declare const Logo: ({ service, animate, size, ...props }: LogoProps) => react.JSX.Element;
+
+export { Button, type ButtonProps, type IngAmigoTheme, Input, type InputProps, Logo, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, ThemeProvider, Typography, type TypographyProps, type TypographyVariant, theme };