@coinloger/dev-ui 0.0.4 → 0.0.6

package/README.md

@@ -0,0 +1,63 @@
+# @coinloger/dev-ui
+
+React UI component library for Coinloger projects.
+
+## Installation
+
+```bash
+npm install @coinloger/dev-ui
+```
+
+## Setup
+
+### 1. Import Styles
+Import the library's CSS in your main entry file (e.g., `main.tsx` or `App.tsx`):
+
+```tsx
+import '@coinloger/dev-ui/style.css';
+```
+
+### 2. Wrap with ThemeProvider
+Wrap your application with the `ThemeProvider` to enable dynamic theming:
+
+```tsx
+import { ThemeProvider } from '@coinloger/dev-ui';
+import { defaultTheme } from './your-theme-config'; // Optional customized theme
+
+function App() {
+  return (
+    <ThemeProvider theme={defaultTheme}>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## Usage
+
+### Components
+
+```tsx
+import { Button, Card, Text } from '@coinloger/dev-ui';
+
+function Example() {
+  return (
+    <Card>
+      <Text variant="lead">Hello World</Text>
+      <Button variant="primary">Click Me</Button>
+    </Card>
+  );
+}
+```
+
+### Theming
+You can override default theme values by passing a `ThemeConfig` object to the provider.
+
+```tsx
+const customTheme = {
+  colors: {
+    primary: '#ff0000',
+    background: '#f0f0f0'
+  }
+};
+```

package/dist/index.d.ts

@@ -1,15 +1,410 @@
-
-export * from './components/Button/Button';
-export * from './components/Input/Input';
-export * from './components/Card/Card';
-export * from './components/Modal/Modal';
-export * from './components/Select/Select';
-export * from './components/Checkbox/Checkbox';
-export * from './components/Radio/Radio';
-export * from './components/Switch/Switch';
-export * from './components/Badge/Badge';
-export * from './components/Typography/Heading';
-export * from './components/Typography/Text';
-export * from './components/Tabs/Tabs';
-export * from './components/Table/Table';
-export * from './theme';
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+export declare const Badge: default_2.ForwardRefExoticComponent<BadgeProps & default_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface BadgeProps extends default_2.HTMLAttributes<HTMLSpanElement> {
+    variant?: 'primary' | 'success' | 'warning' | 'danger' | 'neutral';
+    size?: 'sm' | 'md' | 'lg';
+    shape?: 'rounded' | 'pill';
+}
+
+export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'success' | 'warning' | 'ghost' | 'outline-danger' | 'outline-success' | 'outline-warning';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export declare const Card: default_2.ForwardRefExoticComponent<CardProps & default_2.RefAttributes<HTMLDivElement>>;
+
+declare interface CardProps extends Omit<default_2.HTMLAttributes<HTMLDivElement>, 'title'> {
+    title?: default_2.ReactNode;
+    footer?: default_2.ReactNode;
+}
+
+export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: default_2.ReactNode;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+}
+
+export declare const Heading: default_2.ForwardRefExoticComponent<HeadingProps & default_2.RefAttributes<HTMLHeadingElement>>;
+
+export declare interface HeadingProps extends default_2.HTMLAttributes<HTMLHeadingElement> {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    truncate?: boolean;
+    lines?: number;
+}
+
+export declare const Input: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+declare interface InputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    error?: boolean;
+    helperText?: string;
+    fullWidth?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+}
+
+export declare const Modal: (({ isOpen, onClose, title, children, footer, size, className, closeOnBackdropClick, }: ModalProps) => default_2.ReactPortal | null) & {
+    Header: ({ children, className }: {
+        children: default_2.ReactNode;
+        className?: string;
+    }) => JSX_2.Element;
+    Body: ({ children, className }: {
+        children: default_2.ReactNode;
+        className?: string;
+    }) => JSX_2.Element;
+    Footer: ({ children, className }: {
+        children: default_2.ReactNode;
+        className?: string;
+    }) => JSX_2.Element;
+};
+
+export declare const ModalBody: ({ children, className }: {
+    children: default_2.ReactNode;
+    className?: string;
+}) => JSX_2.Element;
+
+export declare const ModalFooter: ({ children, className }: {
+    children: default_2.ReactNode;
+    className?: string;
+}) => JSX_2.Element;
+
+export declare const ModalHeader: ({ children, className }: {
+    children: default_2.ReactNode;
+    className?: string;
+}) => JSX_2.Element;
+
+export declare interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: default_2.ReactNode;
+    children: default_2.ReactNode;
+    footer?: default_2.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+    closeOnBackdropClick?: boolean;
+}
+
+export declare const Radio: default_2.ForwardRefExoticComponent<RadioProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface RadioProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: default_2.ReactNode;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+}
+
+export declare const Select: ({ options, value, onChange, placeholder, label, error, helperText, disabled, fullWidth, size, className, }: SelectProps) => JSX_2.Element;
+
+export declare interface SelectOption {
+    value: string | number;
+    label: string;
+}
+
+export declare interface SelectProps {
+    options: SelectOption[];
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    placeholder?: string;
+    label?: string;
+    error?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    className?: string;
+}
+
+export declare const Switch: default_2.ForwardRefExoticComponent<SwitchProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface SwitchProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: default_2.ReactNode;
+    error?: boolean;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+}
+
+export declare const Table: default_2.ForwardRefExoticComponent<TableProps & default_2.RefAttributes<HTMLTableElement>>;
+
+declare interface TableProps extends default_2.TableHTMLAttributes<HTMLTableElement> {
+    bordered?: boolean;
+    striped?: boolean;
+    hover?: boolean;
+    size?: 'sm' | 'md';
+}
+
+export declare const Tabs: (({ defaultValue, value, onValueChange, children, className }: TabsProps) => JSX_2.Element) & {
+    List: ({ className, children, variant, ...props }: TabsListProps) => JSX_2.Element;
+    Trigger: ({ value, className, children, onClick, ...props }: TabsTriggerProps) => JSX_2.Element;
+    Content: ({ value, className, children, ...props }: TabsContentProps) => JSX_2.Element | null;
+};
+
+export declare interface TabsContentProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    value: string;
+    children: default_2.ReactNode;
+}
+
+export declare interface TabsListProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+    variant?: 'line' | 'pills';
+}
+
+export declare interface TabsProps {
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children: default_2.ReactNode;
+    className?: string;
+}
+
+export declare interface TabsTriggerProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    value: string;
+    children: default_2.ReactNode;
+}
+
+declare const Text_2: default_2.ForwardRefExoticComponent<TextProps & default_2.RefAttributes<HTMLElement>>;
+export { Text_2 as Text }
+
+export declare interface TextProps extends default_2.HTMLAttributes<HTMLElement> {
+    variant?: 'body' | 'small' | 'caption' | 'lead';
+    weight?: 'normal' | 'medium' | 'semibold' | 'bold';
+    muted?: boolean;
+    truncate?: boolean;
+    lines?: number;
+    as?: default_2.ElementType;
+}
+
+declare interface ThemeConfig {
+    prefix?: string;
+    colors?: {
+        primary?: string;
+        secondary?: string;
+        background?: string;
+        text?: string;
+        [key: string]: string | undefined;
+    };
+    typography?: {
+        'font-family'?: string;
+        'font-size-sm'?: string;
+        'font-size-md'?: string;
+        'font-size-lg'?: string;
+        'font-size-xl'?: string;
+        [key: string]: string | undefined;
+    };
+    spacing?: {
+        [key: string]: string;
+    };
+    radius?: {
+        [key: string]: string;
+    };
+    shadows?: {
+        [key: string]: string;
+    };
+    components?: {
+        btn?: {
+            [key: string]: string | object | undefined;
+        };
+        input?: {
+            radius?: string;
+            bg?: string;
+            border?: string;
+            color?: string;
+            placeholder?: string;
+            "focus-border"?: string;
+            "focus-ring"?: string;
+            "error-border"?: string;
+            "error-ring"?: string;
+            [key: string]: string | object | undefined;
+        };
+        select?: {
+            radius?: string;
+            bg?: string;
+            border?: string;
+            color?: string;
+            placeholder?: string;
+            "focus-border"?: string;
+            "focus-ring"?: string;
+            "error-border"?: string;
+            "error-ring"?: string;
+            "menu-bg"?: string;
+            "menu-border"?: string;
+            "menu-shadow"?: string;
+            "option-hover-bg"?: string;
+            "option-selected-bg"?: string;
+            "option-selected-color"?: string;
+            [key: string]: string | object | undefined;
+        };
+        card?: {
+            radius?: string;
+            shadow?: string;
+            bg?: string;
+            border?: string;
+            padding?: string;
+            "header-bg"?: string;
+            "header-padding"?: string;
+            "header-border"?: string;
+            "footer-bg"?: string;
+            "footer-padding"?: string;
+            "footer-border"?: string;
+            [key: string]: string | object | undefined;
+        };
+        modal?: {
+            "radius"?: string;
+            "bg"?: string;
+            "shadow"?: string;
+            "backdrop-bg"?: string;
+            "backdrop-blur"?: string;
+            "border"?: string;
+            "z-index"?: string;
+            "header-padding"?: string;
+            "body-padding"?: string;
+            "footer-padding"?: string;
+            "size-sm-width"?: string;
+            "size-md-width"?: string;
+            "size-lg-width"?: string;
+            "size-xl-width"?: string;
+            [key: string]: string | object | undefined;
+        };
+        checkbox?: {
+            size?: string;
+            radius?: string;
+            bg?: string;
+            border?: string;
+            "checked-bg"?: string;
+            "checked-border"?: string;
+            "checked-color"?: string;
+            "disabled-opacity"?: string;
+            "size-sm-size"?: string;
+            "size-sm-font-size"?: string;
+            "size-md-size"?: string;
+            "size-md-font-size"?: string;
+            "size-lg-size"?: string;
+            "size-lg-font-size"?: string;
+            "size-xl-size"?: string;
+            "size-xl-font-size"?: string;
+            [key: string]: string | object | undefined;
+        };
+        radio?: {
+            size?: string;
+            bg?: string;
+            border?: string;
+            "checked-bg"?: string;
+            "checked-border"?: string;
+            "checked-color"?: string;
+            "disabled-opacity"?: string;
+            "size-sm-size"?: string;
+            "size-sm-font-size"?: string;
+            "size-md-size"?: string;
+            "size-md-font-size"?: string;
+            "size-lg-size"?: string;
+            "size-lg-font-size"?: string;
+            "size-xl-size"?: string;
+            "size-xl-font-size"?: string;
+            [key: string]: string | object | undefined;
+        };
+        switch?: {
+            width?: string;
+            height?: string;
+            bg?: string;
+            "checked-bg"?: string;
+            "thumb-size"?: string;
+            "thumb-bg"?: string;
+            "thumb-shadow"?: string;
+            "focus-ring"?: string;
+            "disabled-opacity"?: string;
+            "size-sm-width"?: string;
+            "size-sm-height"?: string;
+            "size-sm-thumb-size"?: string;
+            "size-md-width"?: string;
+            "size-md-height"?: string;
+            "size-md-thumb-size"?: string;
+            "size-lg-width"?: string;
+            "size-lg-height"?: string;
+            "size-lg-thumb-size"?: string;
+            "size-xl-width"?: string;
+            "size-xl-height"?: string;
+            "size-xl-thumb-size"?: string;
+            [key: string]: string | object | undefined;
+        };
+        badge?: {
+            radius?: string;
+            "font-weight"?: string;
+            "size-sm-padding"?: string;
+            "size-sm-font-size"?: string;
+            "size-md-padding"?: string;
+            "size-md-font-size"?: string;
+            "size-lg-padding"?: string;
+            "size-lg-font-size"?: string;
+            "primary-bg"?: string;
+            "primary-text"?: string;
+            "success-bg"?: string;
+            "success-text"?: string;
+            "warning-bg"?: string;
+            "warning-text"?: string;
+            "danger-bg"?: string;
+            "danger-text"?: string;
+            "neutral-bg"?: string;
+            "neutral-text"?: string;
+            [key: string]: string | object | undefined;
+        };
+        heading?: {
+            "h1-size"?: string;
+            "h1-line-height"?: string;
+            "h1-weight"?: string;
+            "h2-size"?: string;
+            "h2-line-height"?: string;
+            "h2-weight"?: string;
+            "h3-size"?: string;
+            "h3-line-height"?: string;
+            "h3-weight"?: string;
+            "h4-size"?: string;
+            "h4-line-height"?: string;
+            "h4-weight"?: string;
+            "h5-size"?: string;
+            "h5-line-height"?: string;
+            "h5-weight"?: string;
+            "h6-size"?: string;
+            "h6-line-height"?: string;
+            "h6-weight"?: string;
+            [key: string]: string | object | undefined;
+        };
+        text?: {
+            "body-size"?: string;
+            "body-line-height"?: string;
+            "small-size"?: string;
+            "small-line-height"?: string;
+            "caption-size"?: string;
+            "caption-line-height"?: string;
+            "lead-size"?: string;
+            "lead-line-height"?: string;
+            [key: string]: string | object | undefined;
+        };
+        tabs?: {
+            "border-color"?: string;
+            "active-color"?: string;
+            "inactive-color"?: string;
+            "hover-bg"?: string;
+            "trigger-padding"?: string;
+            "trigger-weight"?: string;
+            "trigger-font-size"?: string;
+            "content-padding"?: string;
+            [key: string]: string | object | undefined;
+        };
+        [key: string]: {
+            [key: string]: string | object | undefined;
+        } | undefined;
+    };
+}
+
+export declare const ThemeProvider: ({ theme, children }: {
+    theme: ThemeConfig;
+    children: default_2.ReactNode;
+}) => JSX_2.Element;
+
+export { }