@lawkit/ui 0.1.34 → 0.1.36

package/dist/ui-v3/src/components/AutoComplete/AutoComplete.css.d.ts

@@ -0,0 +1,57 @@
+export declare const wrapper: string;
+export declare const inputWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        small: {
+            height: number;
+            padding: `0 var(--${string})`;
+        };
+        medium: {
+            height: number;
+            padding: "0 14px";
+        };
+        large: {
+            height: number;
+            padding: "0 14px";
+        };
+    };
+    open: {
+        true: {
+            borderColor: `var(--${string})`;
+            boxShadow: `var(--${string})`;
+        };
+        false: {
+            selectors: {
+                "&:focus-within": {
+                    borderColor: `var(--${string})`;
+                    boxShadow: `var(--${string})`;
+                };
+            };
+        };
+    };
+    disabled: {
+        true: {
+            backgroundColor: `var(--${string})`;
+            cursor: "not-allowed";
+            pointerEvents: "none";
+        };
+        false: {};
+    };
+}>;
+export declare const input: string;
+export declare const suffixGroup: string;
+export declare const divider: string;
+export declare const searchIcon: string;
+export declare const badgesArea: string;
+export declare const badge: string;
+export declare const badgeRemove: string;
+export declare const panel: string;
+export declare const option: import('@vanilla-extract/recipes').RuntimeFn<{
+    highlighted: {
+        true: {
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
+        };
+        false: {};
+    };
+}>;
+export declare const noResult: string;

package/dist/ui-v3/src/components/AutoComplete/index.d.ts

@@ -0,0 +1,41 @@
+import { InputHTMLAttributes } from 'react';
+export interface AutoCompleteOption {
+    /** 고유 값 */
+    value: string;
+    /** 표시 라벨 */
+    label: string;
+}
+export type AutoCompleteSize = "small" | "medium" | "large";
+export interface AutoCompleteProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
+    /** 옵션 목록 */
+    options: AutoCompleteOption[];
+    /** 다중 선택 모드 */
+    multiple?: boolean;
+    /** 선택된 값 (single: string, multiple: string[]) */
+    value?: string | string[];
+    /** 선택 변경 콜백 (single: string, multiple: string[]) */
+    onChange?: (value: string | string[], option: AutoCompleteOption) => void;
+    /** 입력 텍스트 변경 콜백 (외부 필터링용) */
+    onInputChange?: (text: string) => void;
+    /** 사이즈 */
+    inputSize?: AutoCompleteSize;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 결과 없을 때 메시지 */
+    noResultText?: string;
+    /** wrapper className */
+    className?: string;
+}
+/**
+ * **AutoComplete**
+ *
+ * 텍스트 입력 시 매칭되는 옵션을 드롭다운으로 표시하는 자동완성 컴포넌트.
+ *
+ * - `multiple`: false(단일) — input에 선택값 표시 / true(다중) — 아래에 badge 태그
+ * - `options`: 전체 옵션 목록
+ * - `value`: 선택된 값 (단일: string, 다중: string[])
+ * - `onChange`: 옵션 선택 시 콜백
+ * - `onInputChange`: 입력 텍스트 변경 콜백 (서버 필터링 등)
+ * - `inputSize`: small(30) / medium(38) / large(46)
+ */
+export declare function AutoComplete({ options, multiple, value, onChange, onInputChange, inputSize, disabled, noResultText, placeholder, className, ...rest }: AutoCompleteProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/components/Stack/Stack.css.d.ts

@@ -0,0 +1,38 @@
+export declare const stack: import('@vanilla-extract/recipes').RuntimeFn<{
+    direction: {
+        row: {
+            flexDirection: "row";
+        };
+        column: {
+            flexDirection: "column";
+        };
+    };
+    align: {
+        start: {
+            alignItems: "flex-start";
+        };
+        center: {
+            alignItems: "center";
+        };
+        end: {
+            alignItems: "flex-end";
+        };
+        stretch: {
+            alignItems: "stretch";
+        };
+    };
+    justify: {
+        start: {
+            justifyContent: "flex-start";
+        };
+        center: {
+            justifyContent: "center";
+        };
+        end: {
+            justifyContent: "flex-end";
+        };
+        between: {
+            justifyContent: "space-between";
+        };
+    };
+}>;

package/dist/ui-v3/src/components/Stack/index.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { themeVars } from '../../../../tokens/src';
+export type StackGap = keyof typeof themeVars.spacing;
+export type StackAlign = "start" | "center" | "end" | "stretch";
+export type StackJustify = "start" | "center" | "end" | "between";
+export interface HStackProps extends HTMLAttributes<HTMLDivElement> {
+    /** 자식 간격 (디자인 토큰 기반: x1=4px ~ x6=24px) */
+    gap?: StackGap;
+    /** 교차축 정렬 (alignItems) */
+    align?: StackAlign;
+    /** 주축 정렬 (justifyContent) */
+    justify?: StackJustify;
+    children?: ReactNode;
+}
+export type VStackProps = HStackProps;
+export declare function HStack({ gap, align, justify, className, style, children, ...rest }: HStackProps): import("react/jsx-runtime").JSX.Element;
+export declare function VStack({ gap, align, justify, className, style, children, ...rest }: VStackProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/index.d.ts

@@ -1,3 +1,5 @@
+export { AutoComplete } from './components/AutoComplete';
+export type { AutoCompleteProps, AutoCompleteOption, AutoCompleteSize, } from './components/AutoComplete';
 export { Alert } from './components/Alert';
 export type { AlertProps, AlertType, AlertSize, AlertAction, } from './components/Alert';
 export { Button } from './components/Button';
@@ -18,6 +20,8 @@ export { ChipsNavigation } from './components/ChipsNavigation';
 export type { ChipsNavigationProps, ChipsNavigationItem, } from './components/ChipsNavigation';
 export { Card, CardHeader, CardBody, CardFooter } from './components/Card';
 export type { CardProps } from './components/Card';
+export { HStack, VStack } from './components/Stack';
+export type { HStackProps, VStackProps, StackGap, StackAlign, StackJustify, } from './components/Stack';
 export { Collapse, CollapseGroup } from './components/Collapse';
 export type { CollapseProps, CollapseVariant, CollapseGroupProps, } from './components/Collapse';
 export { Dropdown } from './components/Dropdown';

package/dist/ui-v3/src/styles/sprinkles.css.d.ts

@@ -4,16 +4,16 @@ export declare const sprinkles: ((props: {
         tablet?: "flex" | "grid" | "block" | "inline-flex" | "none" | undefined;
         desktop?: "flex" | "grid" | "block" | "inline-flex" | "none" | undefined;
     } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "flex" | "grid" | "block" | "inline-flex" | "none" | null>;
-    alignItems?: ("center" | "stretch" | {
-        mobile?: "center" | "stretch" | undefined;
-        tablet?: "center" | "stretch" | undefined;
-        desktop?: "center" | "stretch" | undefined;
-    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "center" | "stretch" | null>;
-    justifyContent?: ("center" | "flex-start" | "space-between" | {
-        mobile?: "center" | "flex-start" | "space-between" | undefined;
-        tablet?: "center" | "flex-start" | "space-between" | undefined;
-        desktop?: "center" | "flex-start" | "space-between" | undefined;
-    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "center" | "flex-start" | "space-between" | null>;
+    alignItems?: ("stretch" | "center" | {
+        mobile?: "stretch" | "center" | undefined;
+        tablet?: "stretch" | "center" | undefined;
+        desktop?: "stretch" | "center" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "stretch" | "center" | null>;
+    justifyContent?: ("space-between" | "center" | "flex-start" | {
+        mobile?: "space-between" | "center" | "flex-start" | undefined;
+        tablet?: "space-between" | "center" | "flex-start" | undefined;
+        desktop?: "space-between" | "center" | "flex-start" | undefined;
+    } | undefined) | import('@vanilla-extract/sprinkles').ResponsiveArray<2 | 1 | 3, "space-between" | "center" | "flex-start" | null>;
     width?: ("100%" | {
         mobile?: "100%" | undefined;
         tablet?: "100%" | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lawkit/ui",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "type": "module",
   "description": "LDS Design System — React component library with design tokens",
   "main": "./dist/index.js",