@youngduck/yd-ui 0.17.1 → 0.18.1

package/dist/types/components/Calendars/YearPicker/YearPicker.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { YearPicker } from './YearPicker';
+declare const meta: Meta<typeof YearPicker>;
+export default meta;
+type Story = StoryObj<typeof YearPicker>;
+export declare const Default: Story;
+export declare const WithDefaultValue: Story;
+export declare const WithYearRange: Story;
+export declare const AllSizes: Story;
+export declare const Disabled: Story;

package/dist/types/components/Calendars/hooks/usePickerDropdown.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 달력 피커 공통 드롭다운 훅.
+ * 패널 열림/닫힘 상태와 바깥 클릭·Escape 닫기를 담당하고,
+ * 키보드로 닫을 때는 트리거로 포커스를 복귀시킵니다.
+ * 패널이 열려 있는 동안 Tab 포커스는 패널 안에서 순환합니다. (dialog 패턴)
+ */
+export declare function usePickerDropdown(): {
+    isOpen: boolean;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    triggerRef: import("react").RefObject<HTMLButtonElement | null>;
+    panelRef: import("react").RefObject<HTMLDivElement | null>;
+    toggle: () => void;
+    close: (focusTrigger?: boolean) => void;
+    handlePanelKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+};

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

@@ -0,0 +1,6 @@
+export { YearPicker } from './YearPicker/YearPicker';
+export type { YearPickerSize } from './YearPicker/YearPicker';
+export { MonthPicker } from './MonthPicker/MonthPicker';
+export type { MonthPickerSize } from './MonthPicker/MonthPicker';
+export { DatePicker } from './DatePicker/DatePicker';
+export type { DatePickerSize } from './DatePicker/DatePicker';

package/dist/types/components/Calendars/utils/calendarDate.d.ts

@@ -0,0 +1,46 @@
+/**
+ * 달력(Calendars) 공통 날짜 유틸.
+ * Date 객체 대신 { year, month, day } 숫자 값으로 계산합니다. (month: 1~12)
+ */
+/** 요일 라벨 (일요일 시작) */
+export declare const CALENDAR_WEEKDAY_LABELS: string[];
+/** 숫자를 두 자리 문자열로 변환 (7 → '07') */
+export declare const pad2: (value: number) => string;
+/** 'YYYY' 형식 문자열을 연도 숫자로 변환. 형식이 다르면 null */
+export declare const parseYearValue: (value: string) => number | null;
+/** 'YYYY-MM' 형식 문자열을 { year, month } 로 변환. 형식이 다르면 null */
+export declare const parseYearMonthValue: (value: string) => {
+    year: number;
+    month: number;
+} | null;
+/** 'YYYY-MM-DD' 형식 문자열을 { year, month, day } 로 변환. 달력상 존재하지 않는 날짜면 null */
+export declare const parseDateValue: (value: string) => {
+    year: number;
+    month: number;
+    day: number;
+} | null;
+/** 연도를 'YYYY' 값 문자열로 변환 */
+export declare const formatYearValue: (year: number) => string;
+/** 연/월을 'YYYY-MM' 값 문자열로 변환 */
+export declare const formatYearMonthValue: (year: number, month: number) => string;
+/** 연/월/일을 'YYYY-MM-DD' 값 문자열로 변환 */
+export declare const formatDateValue: (year: number, month: number, day: number) => string;
+/** 해당 월의 일수 */
+export declare const getDaysInMonth: (year: number, month: number) => number;
+/** 해당 월 1일의 요일 (0: 일요일 ~ 6: 토요일) */
+export declare const getFirstWeekday: (year: number, month: number) => number;
+/** 오늘 날짜 */
+export declare const getToday: () => {
+    year: number;
+    month: number;
+    day: number;
+};
+/** 연도를 minYear ~ maxYear 범위로 제한 */
+export declare const clampYear: (year: number, minYear: number, maxYear: number) => number;
+/**
+ * 그리드 키보드 탐색 공통 계산.
+ * 좌우 방향키는 한 칸, 상하 방향키는 한 행(cols) 단위로 이동하고
+ * Home / End 는 현재 행의 처음 / 끝으로 이동합니다.
+ * 탐색 키가 아니면 null, 더 이동할 수 없으면 현재 인덱스를 반환합니다.
+ */
+export declare const moveGridFocus: (index: number, count: number, cols: number, key: string) => number | null;

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

@@ -1,21 +1,20 @@
 /**
  * 작성자: KYD
  * 기능: 사용자 입력을 받는 기본 입력 필드 컴포넌트
- * 프로세스 설명: 검색, 텍스트 입력, 폼 입력 등에 사용
+ * 프로세스 설명: 검색, 텍스트 입력, 폼 입력 등에 사용. 색상·간격·타이포그래피는 디자인 토큰에서 일괄 적용
  */
 import React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const inputVariants: (props?: ({
     size?: "sm" | "md" | "lg" | "full" | null | undefined;
-    color?: "primary-400" | "primary-100" | "white" | null | undefined;
+    color?: "white" | "primary-400" | "primary-100" | null | undefined;
     variant?: "search" | "input" | null | undefined;
-    disabled?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type InputSize = VariantProps<typeof inputVariants>['size'];
 export type InputColor = VariantProps<typeof inputVariants>['color'];
 export type InputVariant = VariantProps<typeof inputVariants>['variant'];
 export type InputProps = {} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color'> & VariantProps<typeof inputVariants>;
-export declare function Input({ size, color, variant, disabled, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare function Input({ size, color, variant, disabled, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Input {
     var displayName: string;
 }

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

@@ -0,0 +1,21 @@
+/**
+ * 작성자: KYD
+ * 기능: 사용자 입력을 받는 기본 입력 필드 컴포넌트
+ * 프로세스 설명: 검색, 텍스트 입력, 폼 입력 등에 사용. 색상·간격·타이포그래피는 디자인 토큰에서 일괄 적용
+ */
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+    color?: "white" | "primary-400" | "primary-100" | null | undefined;
+    variant?: "search" | "input" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type InputSize = VariantProps<typeof inputVariants>['size'];
+export type InputColor = VariantProps<typeof inputVariants>['color'];
+export type InputVariant = VariantProps<typeof inputVariants>['variant'];
+export type InputProps = {} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'color'> & VariantProps<typeof inputVariants>;
+export declare function Input({ size, color, variant, disabled, className, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Input {
+    var displayName: string;
+}
+export {};

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

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

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youngduck/yd-ui",
-  "version": "0.17.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",