@lawkit/ui 0.1.33 → 0.1.35

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/RadioButtonGroup/RadioButtonGroup.css.d.ts

@@ -58,6 +58,22 @@ export declare const item: import('@vanilla-extract/recipes').RuntimeFn<{
                 };
             };
         };
+        /**
+         * secondary — inactive: secondary solid 테두리 + secondary 텍스트
+         *             active:  primary tint bg + primary 테두리 + primary 텍스트
+         */
+        secondary: {
+            border: `1px solid var(--${string})`;
+            backgroundColor: "transparent";
+            color: `var(--${string})`;
+            selectors: {
+                "&:hover:not([aria-checked='true'])": {
+                    backgroundColor: "rgba(33, 81, 236, 0.12)";
+                    borderColor: `var(--${string})`;
+                    color: `var(--${string})`;
+                };
+            };
+        };
     };
     size: {
         small: {

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type RadioButtonGroupVariant = "fill" | "outline" | "subtle";
+export type RadioButtonGroupVariant = "fill" | "outline" | "subtle" | "secondary";
 export interface RadioButtonGroupItem {
     value: string;
     label: string;

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';

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.33",
+  "version": "0.1.35",
   "type": "module",
   "description": "LDS Design System — React component library with design tokens",
   "main": "./dist/index.js",