@aivex/ui 0.1.1 → 1.1.0-dev.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +78 -1
  2. package/dist/components/Button/Button.d.ts +4 -5
  3. package/dist/components/Checkbox/Checkbox.d.ts +1 -1
  4. package/dist/components/Checkbox/ChipsCheckbox.d.ts +6 -0
  5. package/dist/components/Checkbox/index.d.ts +2 -0
  6. package/dist/components/Icon/index.d.ts +8 -0
  7. package/dist/components/IconButton/IconButton.d.ts +6 -3
  8. package/dist/components/InputBase/InputBase.d.ts +30 -0
  9. package/dist/components/InputBase/index.d.ts +1 -0
  10. package/dist/components/Radio/Radio.d.ts +1 -1
  11. package/dist/components/SelectBox/SelectBox.d.ts +34 -0
  12. package/dist/components/SelectBox/index.d.ts +2 -0
  13. package/dist/components/Tagbox/Tagbox.d.ts +9 -2
  14. package/dist/components/Textarea/Textarea.d.ts +15 -9
  15. package/dist/components/Textarea/index.d.ts +1 -1
  16. package/dist/components/Textbox/Textbox.d.ts +18 -0
  17. package/dist/components/Textbox/index.d.ts +2 -0
  18. package/dist/index.cjs +41 -1
  19. package/dist/index.cjs.map +1 -1
  20. package/dist/index.d.ts +4 -2
  21. package/dist/index.js +5069 -2552
  22. package/dist/index.js.map +1 -1
  23. package/dist/styles.css +1 -1
  24. package/dist/theme.css +154 -0
  25. package/dist/tokens/tokens.css +80 -15
  26. package/package.json +134 -2
  27. package/dist/components/Input/Input.d.ts +0 -13
  28. package/dist/components/Input/index.d.ts +0 -2
  29. package/dist/components/Select/Select.d.ts +0 -13
  30. package/dist/components/Select/index.d.ts +0 -2
package/README.md CHANGED
@@ -10,7 +10,16 @@ npm install @aivex/ui
10
10
 
11
11
  ## Usage
12
12
 
13
- Import components from the package root. The package includes its stylesheet automatically.
13
+ ### 1. Import styles
14
+
15
+ Add the following to your global CSS file:
16
+
17
+ ```css
18
+ /* global.css */
19
+ @import "@aivex/ui/styles.css";
20
+ ```
21
+
22
+ Then import and use components:
14
23
 
15
24
  ```tsx
16
25
  import { Button } from "@aivex/ui";
@@ -22,6 +31,74 @@ export function Example() {
22
31
 
23
32
  The generated styles are namespaced with the `aivex:` Tailwind prefix and `--aivex-*` CSS variables to avoid collisions with application styles.
24
33
 
34
+ ### 2. Using design tokens in your own code (optional)
35
+
36
+ If you want to use the same design tokens in your own Tailwind classes, also import `theme.css`:
37
+
38
+ ```css
39
+ /* global.css */
40
+ @import "tailwindcss";
41
+ @import "@aivex/ui/styles.css";
42
+ @import "@aivex/ui/theme.css";
43
+ ```
44
+
45
+ This registers all design tokens into your Tailwind so you can use them directly:
46
+
47
+ ```tsx
48
+ <div className="bg-bg-primary border border-border-default rounded-md p-xl">
49
+ <h1 className="text-text-primary text-heading-md">Title</h1>
50
+ <p className="text-text-secondary text-body-md-regular">Description</p>
51
+ </div>
52
+ ```
53
+
54
+ ## Theme
55
+
56
+ Set `data-theme` on the app root element so theme tokens are inherited by every component.
57
+
58
+ ```html
59
+ <html data-theme="light">
60
+ <body>
61
+ <div id="root"></div>
62
+ </body>
63
+ </html>
64
+ ```
65
+
66
+ Use `"dark"` for dark mode.
67
+
68
+ ```html
69
+ <html data-theme="dark">
70
+ <body>
71
+ <div id="root"></div>
72
+ </body>
73
+ </html>
74
+ ```
75
+
76
+ For React apps, toggle the attribute on `document.documentElement`:
77
+
78
+ ```tsx
79
+ function setTheme(theme: "light" | "dark") {
80
+ document.documentElement.dataset.theme = theme;
81
+ }
82
+ ```
83
+
84
+ For Next.js App Router, put the initial theme on the root layout's `<html>` element:
85
+
86
+ ```tsx
87
+ export default function RootLayout({
88
+ children,
89
+ }: {
90
+ children: React.ReactNode;
91
+ }) {
92
+ return (
93
+ <html lang="en" data-theme="light">
94
+ <body>{children}</body>
95
+ </html>
96
+ );
97
+ }
98
+ ```
99
+
100
+ Avoid setting the global theme only on `<body>`. The package defines design-token aliases at `:root`, so placing `data-theme` on `<html>` keeps the theme scope aligned with those root tokens.
101
+
25
102
  ## Requirements
26
103
 
27
104
  - React 19 or newer
package/dist/components/Button/Button.d.ts CHANGED
@@ -3,17 +3,16 @@ import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
3
3
  declare const buttonVariantStyles: (props?: ({
4
4
  variant?: "solid" | "outline" | "ghost" | null | undefined;
5
5
  color?: "danger" | "primary" | "secondary" | null | undefined;
6
- size?: "sm" | "md" | "lg" | null | undefined;
6
+ size?: "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg" | null | undefined;
7
7
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
8
  type ButtonVariantProps = VariantProps<typeof buttonVariantStyles>;
9
9
  declare function buttonVariants({ variant, color, size, className, }?: ButtonVariantProps & {
10
10
  className?: string;
11
11
  }): string;
12
- export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color" | "prefix">, ButtonVariantProps {
12
+ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color">, ButtonVariantProps {
13
13
  asChild?: boolean;
14
- prefix?: ReactNode;
15
- suffix?: ReactNode;
14
+ children?: ReactNode;
16
15
  ref?: Ref<HTMLButtonElement>;
17
16
  }
18
- declare function Button({ className, variant, color, size, asChild, ref, prefix, suffix, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
17
+ declare function Button({ className, variant, color, size, asChild, ref, children, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
19
18
  export { Button, buttonVariants };
package/dist/components/Checkbox/Checkbox.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type VariantProps } from "class-variance-authority";
2
2
  import { type InputHTMLAttributes, type Ref } from "react";
3
3
  declare const checkboxVariants: (props?: ({
4
- size?: "sm" | "md" | "lg" | null | undefined;
4
+ size?: "sm" | "md" | null | undefined;
5
5
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
6
  export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type">, VariantProps<typeof checkboxVariants> {
7
7
  label?: string;
package/dist/components/Checkbox/ChipsCheckbox.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { type InputHTMLAttributes, type Ref } from "react";
2
+ export interface ChipsCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
3
+ ref?: Ref<HTMLInputElement>;
4
+ }
5
+ declare function ChipsCheckbox({ className, disabled, checked, defaultChecked, onChange, id, ref, ...props }: ChipsCheckboxProps): import("react/jsx-runtime").JSX.Element;
6
+ export { ChipsCheckbox };
package/dist/components/Checkbox/index.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  export type { CheckboxProps } from "./Checkbox";
2
2
  export { Checkbox, checkboxVariants } from "./Checkbox";
3
+ export type { ChipsCheckboxProps } from "./ChipsCheckbox";
4
+ export { ChipsCheckbox } from "./ChipsCheckbox";
package/dist/components/Icon/index.d.ts CHANGED
@@ -42,6 +42,14 @@ export declare const CaretLineUpIcon: ({ size, color }: IconProps) => import("re
42
42
  export declare const CaretUpDownIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
43
43
  export declare const ChatIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
44
44
  export declare const CheckIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
45
+ export declare const CheckboxCheckIcon: ({ size, color, }: {
46
+ size?: "sm" | "md" | "lg";
47
+ color?: string;
48
+ }) => import("react/jsx-runtime").JSX.Element;
49
+ export declare const CheckboxIndeterminateIcon: ({ size, color, }: {
50
+ size?: "sm" | "md" | "lg";
51
+ color?: string;
52
+ }) => import("react/jsx-runtime").JSX.Element;
45
53
  export declare const CheckDoubleIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
46
54
  export declare const CheckCircleIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
47
55
  export declare const CheckCircleFilledIcon: ({ size, color }: IconProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/IconButton/IconButton.d.ts CHANGED
@@ -1,14 +1,17 @@
1
1
  import { type VariantProps } from "class-variance-authority";
2
2
  import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
3
3
  declare const iconButtonVariants: (props?: ({
4
- size?: "sm" | "md" | "lg" | null | undefined;
4
+ size?: "sm" | "md" | "lg" | "xs" | null | undefined;
5
5
  shape?: "rounded" | "rectangle" | null | undefined;
6
6
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
7
  export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type">, VariantProps<typeof iconButtonVariants> {
8
- variant?: "default" | "on-color";
8
+ /** 아이콘 색상 — primary: 기본(어두운) 배경, white: 어두운 배경 위 */
9
+ color?: "primary" | "white";
10
+ /** true 이면 danger 색상 적용 (color 보다 우선) */
11
+ error?: boolean;
9
12
  asChild?: boolean;
10
13
  children?: ReactNode;
11
14
  ref?: Ref<HTMLButtonElement>;
12
15
  }
13
- declare function IconButton({ className, size, shape, variant, asChild, children, ref, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
16
+ declare function IconButton({ className, size, shape, color, error, asChild, children, ref, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
14
17
  export { IconButton, iconButtonVariants };
package/dist/components/InputBase/InputBase.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import type { ReactNode } from "react";
2
+ declare const inputContainerVariants: (props?: ({
3
+ state?: "default" | "disabled" | "error" | "focused" | null | undefined;
4
+ size?: "sm" | "md" | null | undefined;
5
+ layout?: "wrap" | "inline" | "block" | null | undefined;
6
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
+ export type InputLayout = "inline" | "block" | "wrap";
8
+ export type InputState = "default" | "focused" | "error" | "disabled";
9
+ export interface InputBaseProps {
10
+ id?: string;
11
+ label?: string;
12
+ /** 인풋 하단 도움말 텍스트. error=true 이면 danger 색상으로 표시 */
13
+ helperText?: string;
14
+ error?: boolean;
15
+ disabled?: boolean;
16
+ focused?: boolean;
17
+ size?: "sm" | "md";
18
+ layout?: InputLayout;
19
+ /** 인풋 컨테이너 왼쪽 슬롯 */
20
+ leadingElement?: ReactNode;
21
+ /** 인풋 컨테이너 오른쪽 슬롯 */
22
+ trailingElement?: ReactNode;
23
+ /** 인풋 컨테이너(border 박스)에 추가할 className */
24
+ containerClassName?: string;
25
+ /** 최외곽 래퍼 div 에 추가할 className */
26
+ className?: string;
27
+ children: ReactNode;
28
+ }
29
+ declare function InputBase({ id, label, helperText, error, disabled, focused, size, layout, leadingElement, trailingElement, containerClassName, className, children, }: InputBaseProps): import("react/jsx-runtime").JSX.Element;
30
+ export { InputBase, inputContainerVariants };
package/dist/components/InputBase/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from "./InputBase";
package/dist/components/Radio/Radio.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { type VariantProps } from "class-variance-authority";
2
2
  import type { InputHTMLAttributes, Ref } from "react";
3
3
  declare const radioVariants: (props?: ({
4
- size?: "sm" | "md" | "lg" | null | undefined;
4
+ size?: "sm" | "md" | null | undefined;
5
5
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
6
  export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type">, VariantProps<typeof radioVariants> {
7
7
  label?: string;
package/dist/components/SelectBox/SelectBox.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ export interface SelectBoxOption {
2
+ value: string;
3
+ label: string;
4
+ /** option의 key. 미지정 시 value 사용 */
5
+ key?: string;
6
+ /** 위험 액션 강조 (빨간색) */
7
+ danger?: boolean;
8
+ }
9
+ export interface SelectBoxGroup {
10
+ /** 그룹 타이틀 */
11
+ title?: string;
12
+ options: SelectBoxOption[];
13
+ }
14
+ export interface SelectBoxProps {
15
+ groups: SelectBoxGroup[];
16
+ value?: string;
17
+ placeholder?: string;
18
+ disabled?: boolean;
19
+ size?: "sm" | "md";
20
+ onChange?: (value: string) => void;
21
+ /**
22
+ * 선택된 값이 트리거에 표시될 텍스트를 커스텀하는 함수.
23
+ * 미지정 시 option.label 을 그대로 표시.
24
+ * @example renderValue={(option, group) => `${group.title} / ${option.label}`}
25
+ */
26
+ renderValue?: (option: SelectBoxOption, group: SelectBoxGroup) => string;
27
+ /** 최외곽 래퍼에 추가할 className */
28
+ className?: string;
29
+ label?: string;
30
+ helperText?: string;
31
+ error?: boolean;
32
+ }
33
+ declare function SelectBox({ groups, value, placeholder, disabled, size, onChange, renderValue, className, label, helperText, error, }: SelectBoxProps): import("react/jsx-runtime").JSX.Element;
34
+ export { SelectBox };
package/dist/components/SelectBox/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type { SelectBoxGroup, SelectBoxOption, SelectBoxProps } from "./SelectBox";
2
+ export { SelectBox } from "./SelectBox";
package/dist/components/Tagbox/Tagbox.d.ts CHANGED
@@ -1,12 +1,19 @@
1
1
  import { type InputHTMLAttributes, type Ref } from "react";
2
- export interface TagboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange"> {
2
+ export interface TagboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange" | "onPaste"> {
3
3
  size?: "sm" | "md";
4
4
  label?: string;
5
+ /** 인풋 하단 도움말 텍스트 */
6
+ helperText?: string;
5
7
  error?: boolean;
6
8
  value?: string[];
7
9
  defaultValue?: string[];
8
10
  onChange?: (tags: string[]) => void;
11
+ /** 붙여넣기 텍스트를 태그 배열로 파싱하는 함수 */
12
+ parsePaste?: (text: string) => string[];
13
+ onPaste?: (e: React.ClipboardEvent<HTMLInputElement>) => void;
14
+ /** 태그 유효성 검사. false 반환 시 인풋이 error 상태로 전환 */
15
+ validate?: (tag: string) => boolean;
9
16
  ref?: Ref<HTMLInputElement>;
10
17
  }
11
- declare function Tagbox({ className, size, label, error, disabled, value, defaultValue, onChange, placeholder, id, ref, onBlur, onCompositionEnd, onCompositionStart, onFocus, onKeyDown, ...props }: TagboxProps): import("react/jsx-runtime").JSX.Element;
18
+ declare function Tagbox({ className, size, label, helperText, error, disabled, value, defaultValue, onChange, parsePaste, validate, placeholder, id, ref, onBlur, onCompositionEnd, onCompositionStart, onFocus, onKeyDown, onPaste, ...props }: TagboxProps): import("react/jsx-runtime").JSX.Element;
12
19
  export { Tagbox };
package/dist/components/Textarea/Textarea.d.ts CHANGED
@@ -1,13 +1,19 @@
1
- import { type VariantProps } from "class-variance-authority";
2
- import type { Ref, TextareaHTMLAttributes } from "react";
3
- declare const textareaWrapperVariants: (props?: ({
4
- state?: "default" | "disabled" | "focused" | "error" | null | undefined;
5
- size?: "sm" | "md" | null | undefined;
6
- } & import("class-variance-authority/types").ClassProp) | undefined) => string;
7
- export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, Pick<VariantProps<typeof textareaWrapperVariants>, "size"> {
1
+ import type { ReactNode, Ref, TextareaHTMLAttributes } from "react";
2
+ export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size"> {
3
+ size?: "sm" | "md";
8
4
  label?: string;
5
+ /** 인풋 하단 도움말 텍스트 */
6
+ helperText?: string;
9
7
  error?: boolean;
8
+ /** 초기 최소 높이 (CSS 값. 예: "120px", "8rem") */
9
+ minHeight?: string | number;
10
+ /** true 이면 높이를 고정하여 resize 비활성화 */
11
+ fixedHeight?: boolean;
12
+ /** Textarea 좌측 슬롯 */
13
+ leadingElement?: ReactNode;
14
+ /** Textarea 우측 슬롯 */
15
+ trailingElement?: ReactNode;
10
16
  ref?: Ref<HTMLTextAreaElement>;
11
17
  }
12
- declare function Textarea({ className, label, error, disabled, size, id, ref, onFocus, onBlur, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
13
- export { Textarea, textareaWrapperVariants };
18
+ declare function Textarea({ className, label, helperText, error, disabled, size, minHeight, fixedHeight, leadingElement, trailingElement, id, ref, onFocus, onBlur, ...props }: TextareaProps): import("react/jsx-runtime").JSX.Element;
19
+ export { Textarea };
package/dist/components/Textarea/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export type { TextareaProps } from "./Textarea";
2
- export { Textarea, textareaWrapperVariants } from "./Textarea";
2
+ export { Textarea } from "./Textarea";
package/dist/components/Textbox/Textbox.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ import type { InputHTMLAttributes, ReactNode, Ref } from "react";
2
+ import { inputContainerVariants } from "@/components/InputBase";
3
+ export interface TextboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
4
+ size?: "sm" | "md";
5
+ label?: string;
6
+ /** 인풋 하단 도움말 텍스트 */
7
+ helperText?: string;
8
+ error?: boolean;
9
+ /** 입력값 전체 삭제 버튼 표시 여부 */
10
+ clearable?: boolean;
11
+ /** 인풋 좌측 슬롯 */
12
+ leadingElement?: ReactNode;
13
+ /** 인풋 우측 슬롯 (clearable=true 이고 값이 있으면 삭제 버튼이 추가됨) */
14
+ trailingElement?: ReactNode;
15
+ ref?: Ref<HTMLInputElement>;
16
+ }
17
+ declare function Textbox({ className, label, helperText, error, disabled, clearable, leadingElement, trailingElement, size, id, ref, value, defaultValue, onChange, onFocus, onBlur, ...props }: TextboxProps): import("react/jsx-runtime").JSX.Element;
18
+ export { inputContainerVariants as inputWrapperVariants, Textbox };
package/dist/components/Textbox/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export type { TextboxProps } from "./Textbox";
2
+ export { inputWrapperVariants, Textbox } from "./Textbox";