@telepix-lab/telepix-ui 0.0.1

package/README.md

@@ -0,0 +1,74 @@
+# TelePIX UI
+
+텔레픽스 디자인 시스템 반영을 위한 공통 라이브러리 입니다.
+
+## 설치 방법
+
+```bash
+# npm
+npm install @telepix-lab/telepix-ui
+
+# yarn
+yarn add @telepix-lab/telepix-ui
+
+# pnpm
+pnpm add @telepix-lab/telepix-ui
+```
+
+## 사용 방법
+
+```jsx
+import { Button, Text } from "@telepix-lab/telepix-ui";
+import "@telepix-lab/telepix-ui/styles.css"; // 스타일 불러오기
+
+function App() {
+  return (
+    <div>
+      <Text size="xl" weight="bold">
+        안녕하세요, TelePIX UI입니다!
+      </Text>
+      <Button variant="primary" size="md">
+        버튼
+      </Button>
+    </div>
+  );
+}
+```
+
+## tailwindcss와 사용하는 경우
+
+tailwind를 import하는 css보다 telepix-ui css가 더 먼저 정의되어있어야 합니다.
+`import "@telepix-lab/telepix-ui/styles.css";`
+<br/>
+
+tailwindcss와 사용하는 경우에 `@import "tailwindcss"` 대신에 아래와 같이 적용합니다.
+tailwindcss/preflight로 인하여 디자인 시스템의 디자인이 적용되지 않을 수 있어 주의합니다.
+
+```
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+// @import "tailwindcss/preflight.css" 제외
+```
+
+## 개발
+
+각 컴포넌트의 사용방법은 storybook을 실행하여 확인합니다.
+
+```bash
+# 개발 모드 실행
+pnpm dev
+
+# 스토리북 실행
+pnpm storybook
+
+# 빌드
+pnpm build
+
+# 테스트
+pnpm test
+```
+
+## 라이센스
+
+ISC

package/dist/cjs/button/index.d.ts

@@ -0,0 +1,25 @@
+import { ButtonSizeStyles, ButtonVariantStyles } from "../button/styles";
+import React, { ReactNode } from "react";
+export interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    variant?: ButtonVariantStyles;
+    size?: ButtonSizeStyles;
+    fullWidth?: boolean;
+    isLoading?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+}
+/**
+ * 다양한 스타일과 속성을 지원하는 버튼 컴포넌트입니다.<br/>
+ * 사용자는 버튼의 변형(variant), 크기(size), 전체 너비(fullWidth), 로딩 상태(isLoading), 아이콘(leftIcon, rightIcon) 등을 지정할 수 있습니다.<br/>
+ * 버튼은 기본적으로 클릭 가능한 요소이며, disabled 속성을 통해 비활성화할 수 있습니다.<br/>
+ * 로딩 상태일 때는 로딩 스피너가 표시됩니다.<br/>
+ * 아이콘은 왼쪽(leftIcon) 또는 오른쪽(rightIcon)에 배치할 수 있으며, 버튼 텍스트와 함께 표시됩니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <Button variant="accent" size="large">
+ *  Click Me
+ * </Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/cjs/button/styles.d.ts

@@ -0,0 +1,95 @@
+export declare const buttonSizeStyles: Readonly<{
+    readonly small: Readonly<{
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "28px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0px 6px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly regular: Readonly<{
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "36px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0px 8px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+    }>;
+    readonly large: Readonly<{
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "48px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0px 12px">;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+    }>;
+}>;
+export declare const buttonVariantStyles: Readonly<{
+    readonly accent: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    }>;
+    readonly outline: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    }>;
+    readonly ghost: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer" | "not-allowed">;
+    }>;
+}>;
+export declare const buttonStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "relative">;
+        readonly boxSizing: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"boxSizing", "border-box">;
+        readonly margin: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"margin", 0>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
+        readonly outline: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"outline", "none">;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly userSelect: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"userSelect", "none">;
+        readonly verticalAlign: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"verticalAlign", "middle">;
+        readonly appearance: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"appearance", "none">;
+        readonly textDecoration: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"textDecoration", "none">;
+        readonly textAlign: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"textAlign", "center">;
+        readonly transition: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"transition", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "auto">;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
+        readonly overflow: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"overflow", "hidden">;
+        readonly pointerEvents: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"pointerEvents", "none" | "auto">;
+    }>;
+    readonly fullWidth: Readonly<{
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
+    }>;
+    readonly withIcon: Readonly<{
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", string>;
+    }>;
+    readonly spinner: Readonly<{
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "absolute">;
+        readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "calc(50% - 10px)">;
+        readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", "calc(50% - 10px)">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "20px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "20px">;
+        readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} 1s linear infinite`>;
+    }>;
+    readonly spinnerSmall: Readonly<{
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "absolute">;
+        readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "calc(50% - 8px)">;
+        readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", "calc(50% - 8px)">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
+        readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} 1s linear infinite`>;
+    }>;
+    readonly spinnerLarge: Readonly<{
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "absolute">;
+        readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "calc(50% - 12px)">;
+        readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", "calc(50% - 12px)">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "24px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "24px">;
+        readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} 1s linear infinite`>;
+    }>;
+}>;
+export type ButtonVariantStyles = keyof typeof buttonVariantStyles;
+export type ButtonSizeStyles = keyof typeof buttonSizeStyles;
+export type ButtonStyles = keyof typeof buttonStyles;

package/dist/cjs/card/index.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+type CardProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+/**
+ * 카드 컴포넌트는 콘텐츠를 그룹화하고 시각적으로 구분하는 데 사용됩니다.<br/>
+ * 카드 내부에는 헤더, 본문, 푸터 등의 섹션을 포함할 수 있습니다.<br/>
+ * content 내의 padding을 적용하기 위해서는 `CardBody` 컴포넌트를 사용해야 합니다.<br/>
+ * 기본적으로 카드 container의 스타일은 배경색, 테두리 등을 포함합니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <Card>
+ *   <CardBody>
+ *      <CardHeader>카드 제목</CardHeader>
+ *      <CardContent>
+ *          카드 내용
+ *      </CardContent>
+ *   <CardFooter>
+ *     카드 푸터
+ *   </CardFooter>
+ * </Card>
+ */
+export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardBody: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardHeader: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardContent: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const CardFooter: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/cjs/card/styles.d.ts

@@ -0,0 +1,29 @@
+export declare const cardStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexDirection", "column">;
+        readonly borderRadius: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"borderRadius", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", `1px solid ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", string>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+}>;
+export declare const cardBodyStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", string>;
+    }>;
+}>;
+export declare const cardHeaderStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly marginBottom: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"marginBottom", string>;
+    }>;
+}>;
+export declare const cardFooterStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", `${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>}`>;
+    }>;
+}>;

package/dist/cjs/checkbox/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { Checkbox as CheckboxRadix } from "radix-ui";
+interface CheckboxProps extends CheckboxRadix.CheckboxProps {
+    label?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+}
+/**
+ * 체크박스 컴포넌트입니다.<br/>
+ * 사용자는 체크박스의 상태(checked, defaultChecked), ID, disabled 여부, 클래스 이름 등을 지정할 수 있습니다.<br/>
+ * label을 통해 체크박스 옆에 표시할 텍스트를 설정할 수 있으며, labelClassName을 통해 라벨의 스타일을 지정할 수 있습니다.<br/>
+ * wrapperClassName을 통해 체크박스와 라벨을 감싸는 요소의 스타일을 지정할 수 있습니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <Checkbox
+ *   label="Accept Terms and Conditions"
+ *   checked={isChecked}
+ *   onCheckedChange={(value) => setIsChecked(value)}
+ * />
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/checkbox/styles.d.ts

@@ -0,0 +1,43 @@
+export declare const checkboxWrapperStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "10px">;
+    }>;
+}>;
+export declare const checkboxStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "0">;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", string>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+    }>;
+    readonly icon: Readonly<{
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
+        readonly fill: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fill", string>;
+        readonly stroke: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"stroke", string>;
+    }>;
+    readonly iconChecked: Readonly<{
+        readonly stroke: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"stroke", string>;
+    }>;
+    readonly iconDisabled: Readonly<{
+        readonly stroke: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"stroke", string>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "default">;
+    }>;
+}>;
+export declare const labelStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+    }>;
+    readonly disabled: Readonly<{
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "default">;
+    }>;
+}>;

package/dist/cjs/dialog/index.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Dialog as DialogRadix } from "radix-ui";
+/**
+ * Dialog 컴포넌트는 모달 대화 상자를 생성하는 데 사용됩니다.<br/>
+ * 이 컴포넌트는 Radix UI의 Dialog 컴포넌트를 래핑하여 사용합니다.<br/>
+ * Dialog 컴포넌트는 모달의 상태를 관리하고, 모달을 열고 닫는 기능을 제공합니다.<br/>
+ * DialogTrigger는 모달을 여는 트리거 버튼 역할을 하며, DialogContent는 모달의 실제 콘텐츠를 렌더링합니다.<br/>
+ * DialogClose는 모달을 닫는 버튼 역할을 합니다.<br/>
+ * DialogHeader, DialogFooter, DialogDescription은 모달의 헤더, 푸터, 제목, 설명을 구성하는 데 사용됩니다.<br/>
+ * 이 컴포넌트는 모달 대화 상자를 쉽게 구현할 수 있도록 도와줍니다.<br/>
+ * <br/>
+ * ### 사용 예시
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger>Open Dialog</DialogTrigger>
+ *   <DialogContent>
+ *     <DialogHeader>
+ *       Dialog Title
+ *       <DialogClose />
+ *     </DialogHeader>
+ *     <DialogDescription>
+ *       This is a description of the dialog.
+ *     </DialogDescription>
+ *   </DialogContent>
+ * </Dialog>
+ */
+export declare const Dialog: React.FC<DialogRadix.DialogProps>;
+export declare const DialogTrigger: (props: React.ComponentProps<typeof DialogRadix.Trigger>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogPortal: React.FC<DialogRadix.DialogPortalProps>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogRadix.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogContent: ({ className, children, ...props }: React.ComponentProps<typeof DialogRadix.Content>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogHeader: ({ className, ...props }: React.ComponentProps<typeof DialogRadix.Title>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogFooter: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogDescription: ({ className, ...props }: React.ComponentProps<typeof DialogRadix.Description>) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/dialog/styles.d.ts

@@ -0,0 +1,23 @@
+export declare const dialogOverlayStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "fixed">;
+        readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", 0>;
+        readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", 0>;
+        readonly right: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"right", 0>;
+        readonly bottom: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"bottom", 0>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly inset: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"inset", 0>;
+        readonly zIndex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"zIndex", 1000>;
+        readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} ease-in-out forwards`>;
+    }>;
+}>;
+export declare const dialogContentStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly position: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"position", "fixed">;
+        readonly top: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"top", "50%">;
+        readonly left: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"left", "50%">;
+        readonly transform: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"transform", "translate(-50%, -50%)">;
+        readonly zIndex: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"zIndex", 1001>;
+        readonly animation: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"animation", `${string} ${import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>} ease-in-out forwards`>;
+    }>;
+}>;

package/dist/cjs/horizontal-tab/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { HorizontalTabSizeStyles } from "./styles";
+interface HorizontalTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare const HorizontalTabs: React.ForwardRefExoticComponent<HorizontalTabsProps & React.RefAttributes<HTMLDivElement>>;
+interface HorizontalTabProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    value: string;
+    label?: string;
+    icon?: React.ReactNode;
+    size?: HorizontalTabSizeStyles;
+}
+export declare const HorizontalTab: React.ForwardRefExoticComponent<Omit<HorizontalTabProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/cjs/horizontal-tab/styles.d.ts

@@ -0,0 +1,74 @@
+export declare const horizontalTabWrapperStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "flex-start">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
+    }>;
+}>;
+export declare const horizontalTabStyles: Readonly<{
+    readonly base: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", 0>;
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly flexDirection: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexDirection", "column">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly flexWrap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"flexWrap", "nowrap">;
+        readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"color", string>;
+        readonly fontSize: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontSize", string>;
+        readonly lineHeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"lineHeight", string>;
+        readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"fontWeight", string>;
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly border: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"border", "none">;
+        readonly cursor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly ":hover:not(:is([data-selected='true'])):not(:disabled)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":hover:not(:is([data-selected='true'])):not(:disabled)", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":active:not(:disabled)": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":active:not(:disabled)", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":is([data-selected='true'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-selected='true'])", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly fontWeight: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+        }>;
+        readonly ":disabled": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":disabled", {
+            readonly color: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly cursor: "not-allowed";
+        }>;
+    }>;
+    readonly line: Readonly<{
+        readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"backgroundColor", string>;
+        readonly marginTop: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"marginTop", "3px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "1px">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "100%">;
+        readonly ":is([data-selected='true'])": import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<":is([data-selected='true'])", {
+            readonly backgroundColor: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXVar<string>;
+            readonly height: "2px";
+            readonly marginTop: "2px";
+        }>;
+    }>;
+    readonly icon: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "20px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "20px">;
+    }>;
+    readonly iconSmall: Readonly<{
+        readonly width: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"width", "16px">;
+        readonly height: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"height", "16px">;
+    }>;
+    readonly small: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "4px 8px">;
+    }>;
+    readonly regular: Readonly<{
+        readonly padding: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"padding", "10px 8px">;
+    }>;
+    readonly labelWrapper: Readonly<{
+        readonly display: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly gap: import("node_modules/@stylexjs/stylex/lib/cjs/types/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
+    }>;
+}>;
+export type HorizontalTabSizeStyles = "regular" | "small";

package/dist/cjs/index.d.ts

@@ -0,0 +1,37 @@
+export { Button } from "./button";
+export { Text } from "./text";
+export { Input } from "./input";
+export { TextArea } from "./textarea";
+export { Checkbox } from "./checkbox";
+export { RadioGroup, RadioItem } from "./radio-group";
+export { Card, CardBody, CardContent, CardFooter, CardHeader } from "./card";
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, } from "./dialog";
+export { Select, SelectTrigger, SelectContent, SelectGroup, SelectLabel, SelectSeparator, SelectItem, } from "./select";
+export { VerticalMenus, VerticalMenu } from "./vertical-menu";
+export { HorizontalTabs, HorizontalTab } from "./horizontal-tab";
+export { ModeTabs, ModeTab } from "./mode-tab";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow, TooltipHeader, TooltipDescription, TooltipFooter, } from "./tooltip";
+export { Tag } from "./tag";
+export declare const version = "0.0.1";
+export * from "./styles/layout.stylex";
+export * from "./styles/primitiveColors.stylex";
+export * from "./styles/semanticColors.stylex";
+export * from "./styles/typography.stylex";
+export { commonStyles } from "./styles/common";
+export { buttonStyles, buttonSizeStyles, buttonVariantStyles, } from "./button/styles";
+export type { ButtonSizeStyles, ButtonVariantStyles, ButtonStyles, } from "./button/styles";
+export { textStyles, textSizeStyles, fontWeightStyles, textAlignStyles, textVariantStyles, } from "./text/styles";
+export type { TextSizeStyles, FontWeightStyles, TextAlignStyles, TextVariantStyles, } from "./text/styles";
+export { inputStyles, inputWrapperStyles, inputWrapperSizeStyles, } from "./input/styles";
+export type { InputWrapperSizeStyles, InputWrapperStyles, } from "./input/styles";
+export { textAreaStyles, textAreaWrapperStyles } from "./textarea/styles";
+export { checkboxStyles, checkboxWrapperStyles, labelStyles, } from "./checkbox/styles";
+export { radioGroupStyles, radioItemWrapperStyles, radioItemLabelStyles, radioItemStyles, } from "./radio-group/styles";
+export { cardStyles, cardHeaderStyles, cardBodyStyles, cardFooterStyles, } from "./card/styles";
+export { dialogContentStyles, dialogOverlayStyles } from "./dialog/styles";
+export { selectIconWrapperStyles, selectTriggerStyles, selectContentStyles, selectItemStyles, selectSeparatorStyles, selectGroupLabelStyles, } from "./select/styles";
+export { verticalMenusWrapperStyles, verticalMenuIconStyles, verticalMenuStyles, } from "./vertical-menu/styles";
+export { horizontalTabWrapperStyles, horizontalTabStyles, } from "./horizontal-tab/styles";
+export { modeTabWrapperStyles, modeTabStyles } from "./mode-tab/styles";
+export { tooltipDescriptionStyles, tooltipShortStyles } from "./tooltip/styles";
+export { tagStyles } from "./tag/styles";