@youngduck/yd-ui 0.16.1 → 0.18.1

package/dist/types/components/Inputs/NumberInput/NumberInput.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 작성자: KYD
+ * 기능: 금액·수량 등 숫자 전용 입력 필드 컴포넌트
+ * 프로세스 설명: type="number" 의 네이티브 스핀 버튼·휠 증감 문제를 피하기 위해
+ * type="text" + inputMode="numeric" 조합에 천단위 콤마 포맷팅을 얹은 spinbutton 패턴입니다.
+ * 값은 콤마 없는 숫자 문자열('400000')로 전달됩니다. (0 이상 정수만 지원)
+ */
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const numberInputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type NumberInputSize = VariantProps<typeof numberInputVariants>['size'];
+type NumberInputProps = {
+    /** 현재 값 (콤마 없는 숫자 문자열, 미입력 시 빈 문자열) */
+    value: string;
+    /** 값이 변경될 때 호출 (콤마 없는 숫자 문자열 전달) */
+    onValueChange: (value: string) => void;
+    /** 최소값 (blur 시 보정, 방향키 증감 하한) */
+    min?: number;
+    /** 최대값 (blur 시 보정, 방향키 증감 상한) */
+    max?: number;
+    /** 방향키(↑/↓) 증감 단위 */
+    step?: number;
+    /** 입력 앞에 표시할 단위 문구 (예: '₩') */
+    prefix?: string;
+    /** 입력 뒤에 표시할 단위 문구 (예: '원') */
+    suffix?: string;
+    /** 텍스트 정렬 (숫자 관례상 기본 우측 정렬) */
+    align?: 'left' | 'right';
+    /** 입력 필드 비활성화 여부 */
+    disabled?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size' | 'type' | 'prefix' | 'min' | 'max' | 'step'> & VariantProps<typeof numberInputVariants>;
+export declare function NumberInput({ value, onValueChange, min, max, step, prefix, suffix, align, disabled, size, className, onBlur, onKeyDown, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NumberInput {
+    var displayName: string;
+}
+export {};

package/dist/types/components/Inputs/NumberInput/NumberInput.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NumberInput } from './NumberInput';
+declare const meta: Meta<typeof NumberInput>;
+export default meta;
+type Story = StoryObj<typeof NumberInput>;
+export declare const Default: Story;
+export declare const WithSuffix: Story;
+export declare const WithMinMaxStep: Story;
+export declare const AllSizes: Story;
+export declare const Disabled: Story;
+export declare const BudgetExample: Story;

package/dist/types/components/Inputs/index.d.ts

@@ -0,0 +1,4 @@
+export { Input } from './Input/Input';
+export type { InputSize, InputColor, InputVariant } from './Input/Input';
+export { NumberInput } from './NumberInput/NumberInput';
+export type { NumberInputSize } from './NumberInput/NumberInput';

package/dist/types/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 작성자: KYD
+ * 기능: 금액·수량 등 숫자 전용 입력 필드 컴포넌트
+ * 프로세스 설명: type="number" 의 네이티브 스핀 버튼·휠 증감 문제를 피하기 위해
+ * type="text" + inputMode="numeric" 조합에 천단위 콤마 포맷팅을 얹은 spinbutton 패턴입니다.
+ * 값은 콤마 없는 숫자 문자열('400000')로 전달됩니다. (0 이상 정수만 지원)
+ */
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const numberInputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type NumberInputSize = VariantProps<typeof numberInputVariants>['size'];
+type NumberInputProps = {
+    /** 현재 값 (콤마 없는 숫자 문자열, 미입력 시 빈 문자열) */
+    value: string;
+    /** 값이 변경될 때 호출 (콤마 없는 숫자 문자열 전달) */
+    onValueChange: (value: string) => void;
+    /** 최소값 (blur 시 보정, 방향키 증감 하한) */
+    min?: number;
+    /** 최대값 (blur 시 보정, 방향키 증감 상한) */
+    max?: number;
+    /** 방향키(↑/↓) 증감 단위 */
+    step?: number;
+    /** 입력 앞에 표시할 단위 문구 (예: '₩') */
+    prefix?: string;
+    /** 입력 뒤에 표시할 단위 문구 (예: '원') */
+    suffix?: string;
+    /** 텍스트 정렬 (숫자 관례상 기본 우측 정렬) */
+    align?: 'left' | 'right';
+    /** 입력 필드 비활성화 여부 */
+    disabled?: boolean;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'size' | 'type' | 'prefix' | 'min' | 'max' | 'step'> & VariantProps<typeof numberInputVariants>;
+export declare function NumberInput({ value, onValueChange, min, max, step, prefix, suffix, align, disabled, size, className, onBlur, onKeyDown, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NumberInput {
+    var displayName: string;
+}
+export {};

package/dist/types/components/NumberInput/NumberInput.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NumberInput } from './NumberInput';
+declare const meta: Meta<typeof NumberInput>;
+export default meta;
+type Story = StoryObj<typeof NumberInput>;
+export declare const Default: Story;
+export declare const WithSuffix: Story;
+export declare const WithMinMaxStep: Story;
+export declare const AllSizes: Story;
+export declare const Disabled: Story;
+export declare const BudgetExample: Story;

package/dist/types/components/Overlays/hooks/useFocusTrap.d.ts

@@ -0,0 +1 @@
+export declare function useFocusTrap<T extends HTMLElement = HTMLElement>(): import("react").RefObject<T | null>;

package/dist/types/components/SelectBox/SelectBox.d.ts

@@ -10,6 +10,7 @@ declare const wrapperVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SelectBoxProps = {
     selectBoxHook: ReturnType<typeof useSelectBox>;
+    label?: string;
 } & VariantProps<typeof wrapperVariants>;
-export declare function SelectBox({ size, selectBoxHook }: SelectBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectBox({ size, selectBoxHook, label }: SelectBoxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/SelectBox/hooks/useSelectBox.d.ts

@@ -19,10 +19,15 @@ export declare const useSelectBox: (config: UseSelectBoxConfig) => {
     options: SelectBoxOption[];
     search: boolean;
     containerRef: import("react").RefObject<HTMLDivElement | null>;
+    highlightedIndex: number;
     handleClickOption: (option: SelectBoxOption) => void;
     handleToggle: () => void;
     handleSearch: (value: string) => void;
     handleClose: () => void;
+    handleTriggerKeyDown: (e: React.KeyboardEvent) => void;
+    handleOptionKeyDown: (e: React.KeyboardEvent, option: SelectBoxOption, index: number) => void;
+    listboxRef: import("react").RefObject<HTMLDivElement | null>;
+    optionRefs: import("react").RefObject<(HTMLElement | null)[]>;
     value: string;
     label: string;
     hasOption: boolean;

package/dist/types/components/Tabs/Tabs.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const tabsVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type TabsSize = VariantProps<typeof tabsVariants>['size'];
+export type TabOption = {
+    /** 화면에 노출되는 라벨 */
+    label: string;
+    /** 선택 값으로 사용되는 고유 값 */
+    value: string;
+    /** 개별 탭 비활성화 여부 */
+    disabled?: boolean;
+};
+type TabsProps = {
+    /** 탭 항목 목록 */
+    options: TabOption[];
+    /** 현재 선택된 값 (제어 컴포넌트) */
+    value: string;
+    /** 값이 변경될 때 호출 */
+    onValueChange: (value: string) => void;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange'> & VariantProps<typeof tabsVariants>;
+export declare function Tabs({ options, value, onValueChange, size, className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tabs {
+    var displayName: string;
+}
+export {};

package/dist/types/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from './Tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const Default: Story;
+export declare const AllSizes: Story;
+export declare const WithDisabledTab: Story;
+export declare const Examples: {
+    parameters: {
+        layout: string;
+        docs: {
+            disable: boolean;
+        };
+    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/dist/types/components/index.d.ts

@@ -1,6 +1,11 @@
 export { Button } from './Button/Button';
 export { Card } from './Card/Card';
 export { Chips } from './Chips/Chips';
-export { Input } from './Input/Input';
+export { Input, NumberInput } from './Inputs';
+export type { InputSize, InputColor, InputVariant, NumberInputSize } from './Inputs';
 export { CheckBox } from './CheckBox/CheckBox';
 export { SelectBox, useSelectBox } from './SelectBox';
+export { Tabs } from './Tabs/Tabs';
+export type { TabsSize, TabOption } from './Tabs/Tabs';
+export { YearPicker, MonthPicker, DatePicker } from './Calendars';
+export type { YearPickerSize, MonthPickerSize, DatePickerSize } from './Calendars';

package/dist/types/hooks/useFocusTrap.d.ts

@@ -0,0 +1 @@
+export declare function useFocusTrap<T extends HTMLElement = HTMLElement>(): import("react").RefObject<T | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youngduck/yd-ui",
-  "version": "0.16.1",
+  "version": "0.18.1",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -30,7 +30,10 @@
     "./dist/*": "./dist/*",
     "./package.json": "./package.json"
   },
-  "files": ["dist", "dist/index.css"],
+  "files": [
+    "dist",
+    "dist/index.css"
+  ],
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w",