@hua-labs/ui 1.1.0-alpha.6 → 2.0.0-alpha.10

package/dist/Modal-LokAqhCz.d.mts

@@ -0,0 +1,93 @@
+import React from 'react';
+
+/**
+ * Modal 컴포넌트의 props / Modal component props
+ * @typedef {Object} ModalProps
+ * @property {boolean} isOpen - 모달 열림/닫힘 상태 / Modal open/close state
+ * @property {() => void} onClose - 모달 닫기 콜백 함수 / Modal close callback function
+ * @property {React.ReactNode} children - 모달 내용 / Modal content
+ * @property {"sm" | "md" | "lg" | "xl" | "2xl" | "3xl"} [size="md"] - 모달 크기 / Modal size
+ * @property {boolean} [showCloseButton=true] - 닫기 버튼 표시 여부 / Show close button
+ * @property {boolean} [closeOnOverlayClick=true] - 오버레이 클릭 시 닫기 여부 / Close on overlay click
+ * @property {string} [title] - 모달 제목 / Modal title
+ * @property {string} [description] - 모달 설명 / Modal description
+ * @property {boolean} [showBackdrop=true] - 배경 오버레이 표시 여부 / Show backdrop overlay
+ * @property {string} [backdropClassName] - 배경 오버레이 추가 CSS 클래스 / Additional CSS class for backdrop
+ * @property {boolean} [centered=true] - 모달을 화면 중앙에 배치할지 여부 / Center modal on screen
+ * @property {string} [className] - 모달 컨테이너 추가 CSS 클래스 / Additional CSS class for modal container
+ */
+interface ModalProps {
+    /** 모달 열림/닫힘 상태 / Modal open/close state */
+    isOpen: boolean;
+    /** 모달 닫기 콜백 함수 / Modal close callback function */
+    onClose: () => void;
+    /** 모달 내용 / Modal content */
+    children: React.ReactNode;
+    /** 모달 크기 / Modal size */
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+    /** 닫기 버튼 표시 여부 / Show close button */
+    closable?: boolean;
+    /** @deprecated use closable instead */
+    showCloseButton?: boolean;
+    /** 오버레이 클릭 시 닫기 여부 / Close on overlay click */
+    closeOnOverlayClick?: boolean;
+    /** 모달 제목 / Modal title */
+    title?: string;
+    /** 모달 설명 / Modal description */
+    description?: string;
+    /** 배경 오버레이 표시 여부 / Show backdrop overlay */
+    showBackdrop?: boolean;
+    /** 배경 오버레이 추가 CSS 클래스 / Additional CSS class for backdrop */
+    backdropClassName?: string;
+    /** 모달을 화면 중앙에 배치할지 여부 / Center modal on screen */
+    centered?: boolean;
+    /** 모달 컨테이너 추가 CSS 클래스 / Additional CSS class for modal container */
+    className?: string;
+}
+/**
+ * Modal 컴포넌트 / Modal component
+ *
+ * 오버레이와 함께 표시되는 모달 다이얼로그 컴포넌트입니다.
+ * ESC 키로 닫기, 오버레이 클릭으로 닫기, 접근성 속성(ARIA)을 지원합니다.
+ *
+ * Modal dialog component displayed with overlay.
+ * Supports closing with ESC key, overlay click, and ARIA accessibility attributes.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * const [isOpen, setIsOpen] = useState(false)
+ *
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <p>모달 내용</p>
+ * </Modal>
+ *
+ * @example
+ * // 제목과 설명 포함 / With title and description
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="확인"
+ *   description="이 작업을 계속하시겠습니까?"
+ * >
+ *   <Button onClick={handleConfirm}>확인</Button>
+ * </Modal>
+ *
+ * @example
+ * // 큰 크기 모달 / Large size modal
+ * <Modal
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   size="xl"
+ *   closeOnOverlayClick={false}
+ * >
+ *   <div>큰 모달 내용</div>
+ * </Modal>
+ *
+ * @param {ModalProps} props - Modal 컴포넌트의 props / Modal component props
+ * @param {React.Ref<HTMLDivElement>} ref - 모달 컨테이너 ref / Modal container ref
+ * @returns {JSX.Element} Modal 컴포넌트 / Modal component
+ */
+declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Modal as M, type ModalProps as a };

package/dist/Switch-BB6GZnqn.d.mts

@@ -0,0 +1,175 @@
+import React from 'react';
+
+/**
+ * Input 컴포넌트의 props / Input component props
+ * HTML input 요소의 모든 표준 속성을 상속받습니다.
+ * Inherits all standard attributes of HTML input element.
+ * @typedef {Object} InputProps
+ * @extends {React.InputHTMLAttributes<HTMLInputElement>}
+ */
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** Visual style variant */
+    variant?: "default" | "outline" | "filled" | "glass";
+    /** Error state indicator */
+    error?: boolean;
+    /** Success state indicator */
+    success?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * NumberInput 컴포넌트의 props / NumberInput component props
+ * @typedef {Object} NumberInputProps
+ * @property {number} [value] - 현재 값 / Current value
+ * @property {number} [defaultValue=0] - 기본 값 / Default value
+ * @property {number} [min] - 최소 값 / Minimum value
+ * @property {number} [max] - 최대 값 / Maximum value
+ * @property {number} [step=1] - 증감 단위 / Step amount
+ * @property {(value: number) => void} [onChange] - 값 변경 콜백 / Value change callback
+ * @property {boolean} [disabled=false] - 비활성화 / Disabled state
+ * @property {"sm" | "md" | "lg"} [size="md"] - 크기 / Size
+ * @property {boolean} [showButtons=true] - +/- 버튼 표시 / Show +/- buttons
+ * @property {"horizontal" | "vertical"} [buttonLayout="horizontal"] - 버튼 배치 / Button layout
+ * @property {string} [className] - 추가 CSS 클래스 / Additional CSS class
+ */
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "defaultValue" | "size" | "type"> {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    showButtons?: boolean;
+    buttonLayout?: "horizontal" | "vertical";
+}
+/**
+ * NumberInput 컴포넌트 / NumberInput component
+ *
+ * 숫자 입력을 위한 컴포넌트로, 커스텀 +/- 버튼을 제공합니다.
+ * 브라우저 기본 스피너 대신 스타일링된 버튼을 사용합니다.
+ *
+ * Number input component with custom +/- buttons.
+ * Uses styled buttons instead of browser default spinners.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <NumberInput value={count} onChange={setCount} />
+ *
+ * @example
+ * // 범위 지정 / With range
+ * <NumberInput min={0} max={100} step={5} />
+ *
+ * @example
+ * // 세로 버튼 / Vertical buttons
+ * <NumberInput buttonLayout="vertical" />
+ */
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Label 컴포넌트의 props / Label component props
+ * @typedef {Object} LabelProps
+ * @property {boolean} [required=false] - 필수 필드 여부 / Required field indicator
+ * @property {boolean} [error=false] - 에러 상태 표시 / Error state
+ * @property {boolean} [disabled=false] - 비활성화 상태 / Disabled state
+ * @property {"default" | "glass"} [variant="default"] - Label 스타일 변형 / Label style variant
+ * @extends {React.LabelHTMLAttributes<HTMLLabelElement>}
+ */
+interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    required?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    variant?: "default" | "glass";
+}
+/**
+ * Label 컴포넌트 / Label component
+ *
+ * 폼 필드의 레이블을 표시하는 컴포넌트입니다.
+ * 필수 필드 표시와 에러 상태를 지원합니다.
+ *
+ * Component for displaying form field labels.
+ * Supports required field indicator and error state.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Label htmlFor="email">이메일</Label>
+ * <Input id="email" />
+ *
+ * @example
+ * // 필수 필드 / Required field
+ * <Label required htmlFor="name">이름</Label>
+ * <Input id="name" required />
+ *
+ * @example
+ * // 에러 상태 / Error state
+ * <Label error htmlFor="password">비밀번호</Label>
+ * <Input id="password" aria-invalid />
+ *
+ * @param {LabelProps} props - Label 컴포넌트의 props / Label component props
+ * @param {React.Ref<HTMLLabelElement>} ref - label 요소 ref / label element ref
+ * @returns {JSX.Element} Label 컴포넌트 / Label component
+ *
+ * @todo 접근성 개선: required일 때 aria-required="true" 추가 필요 / Accessibility improvement: add aria-required="true" when required
+ */
+declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+
+/**
+ * Switch 컴포넌트의 props / Switch component props
+ * @typedef {Object} SwitchProps
+ * @property {"default" | "outline" | "filled" | "glass"} [variant="default"] - Switch 스타일 변형 / Switch style variant
+ * @property {"sm" | "md" | "lg"} [size="md"] - Switch 크기 / Switch size
+ * @property {boolean} [error=false] - 에러 상태 표시 / Error state
+ * @property {boolean} [success=false] - 성공 상태 표시 / Success state
+ * @property {string} [label] - 스위치 레이블 텍스트 / Switch label text
+ * @property {string} [description] - 스위치 설명 텍스트 / Switch description text
+ * @extends {Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>}
+ */
+interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    variant?: "default" | "outline" | "filled" | "glass";
+    size?: "sm" | "md" | "lg";
+    error?: boolean;
+    success?: boolean;
+    label?: string;
+    description?: string;
+}
+/**
+ * Switch 컴포넌트 / Switch component
+ *
+ * 토글 스위치 입력 필드를 제공하는 컴포넌트입니다.
+ * ARIA 속성을 자동으로 설정하여 접근성을 지원합니다.
+ *
+ * Toggle switch input field component.
+ * Automatically sets ARIA attributes for accessibility support.
+ *
+ * @component
+ * @example
+ * // 기본 사용 / Basic usage
+ * <Switch label="알림 받기" />
+ *
+ * @example
+ * // 제어 컴포넌트 / Controlled component
+ * const [enabled, setEnabled] = useState(false)
+ * <Switch
+ *   checked={enabled}
+ *   onChange={(e) => setEnabled(e.target.checked)}
+ *   label="다크 모드"
+ * />
+ *
+ * @example
+ * // 에러 상태 / Error state
+ * <Switch
+ *   label="필수 설정"
+ *   description="이 설정을 활성화해야 합니다"
+ *   error
+ * />
+ *
+ * @param {SwitchProps} props - Switch 컴포넌트의 props / Switch component props
+ * @param {React.Ref<HTMLInputElement>} ref - input 요소 ref / input element ref
+ * @returns {JSX.Element} Switch 컴포넌트 / Switch component
+ */
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Input as I, Label as L, NumberInput as N, Switch as S, type LabelProps as a, type InputProps as b, type NumberInputProps as c, type SwitchProps as d };

package/dist/advanced/Logo.d.ts

@@ -0,0 +1,60 @@
+import React from "react";
+/**
+ * Logo variant 타입
+ * - symbol: 엠블럼만 (기본값)
+ * - full: 엠블럼 + 워드마크
+ */
+export type LogoVariant = "symbol" | "full";
+/**
+ * Logo size 타입
+ * - sm, md, lg: 디자인 토큰 기반 크기
+ * - number: 직접 rem 값 지정
+ */
+export type LogoSize = "sm" | "md" | "lg" | number;
+/**
+ * Logo 컴포넌트 Props
+ */
+export interface LogoProps extends Omit<React.HTMLAttributes<HTMLElement>, "width" | "height"> {
+    /**
+     * 로고 변형
+     * @default "symbol"
+     */
+    variant?: LogoVariant;
+    /**
+     * 로고 크기
+     * @default "md"
+     */
+    size?: LogoSize;
+    /**
+     * 애니메이션 활성화 (Path Drawing 효과)
+     * @default false
+     */
+    animated?: boolean;
+    /**
+     * 추가 className
+     */
+    className?: string;
+}
+/**
+ * Logo 컴포넌트
+ *
+ * HUA Labs 공식 로고 컴포넌트
+ *
+ * @example
+ * ```tsx
+ * // 기본 (엠블럼만)
+ * <Logo />
+ *
+ * // 워드마크 포함
+ * <Logo variant="full" />
+ *
+ * // 크기 조정
+ * <Logo size="lg" />
+ * <Logo size={3} /> // 3rem
+ *
+ * // 애니메이션
+ * <Logo animated />
+ * ```
+ */
+export declare function Logo({ variant, size, animated, className, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Logo.d.ts.map

package/dist/advanced/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/advanced/Logo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAIzC;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE5C;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEnD;;GAEG;AACH,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5F;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAgCD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,IAAI,CAAC,EACnB,OAAkB,EAClB,IAAW,EACX,QAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,2CA8HX"}

package/dist/advanced/index.d.ts

@@ -0,0 +1,3 @@
+export { Logo } from "./Logo";
+export type { LogoProps, LogoVariant, LogoSize } from "./Logo";
+//# sourceMappingURL=index.d.ts.map

package/dist/advanced/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/advanced/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC"}