akanjs 3.0.0-alpha.2 → 3.0.0-alpha.4

package/ui/Input.tsx

@@ -14,10 +14,7 @@ import React, {
 import { AiOutlineEye, AiOutlineEyeInvisible } from "react-icons/ai";
 
 import { inputRecipe } from "./recipe";
-import { createOverridable } from "./UiOverride";
-
-const inputBase = inputRecipe();
-const textareaBase = inputRecipe({ kind: "area" });
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
   /** Visual input style. */
@@ -64,6 +61,7 @@ const DefaultInput = ({
   const { l } = usePage();
   const [firstFocus, setFirstFocus] = useState(true);
   const validateResult = validate ? validate(value) : undefined;
+  const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const status: "error" | "warning" | "success" | null =
     !nullable && !value ? null : !value.length ? "warning" : validateResult === true ? "success" : "error";
   const invalidMessage =
@@ -169,6 +167,7 @@ const DefaultTextArea = ({
   const { l } = usePage();
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const validateResult = validate(value);
+  const textareaBase = (useUiRecipe("input") ?? inputRecipe)({ kind: "area" });
   const [firstFocus, setFirstFocus] = useState(true);
   const status: "error" | "warning" | "success" =
     !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
@@ -263,6 +262,7 @@ const DefaultPassword = ({
   const validateResult = validate(value);
   const [firstFocus, setFirstFocus] = useState(true);
   const [showPassword, setShowPassword] = useState(false);
+  const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const status: "error" | "warning" | "success" =
     !nullable && !value.length ? "warning" : validateResult === true ? "success" : "error";
   const invalidMessage =
@@ -373,6 +373,7 @@ const DefaultEmail = ({
   const { l } = usePage();
   const inputRef = useRef<HTMLInputElement>(null);
   const isValidEmail = isEmail(value);
+  const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const [firstFocus, setFirstFocus] = useState(true);
   const validateResult = !isValidEmail ? l("base.emailInvalidError") : validate(value);
   const status: "error" | "warning" | "success" =
@@ -484,6 +485,7 @@ const DefaultNumber = ({
   const { l } = usePage();
   const inputRef = useRef<HTMLInputElement>(null);
   const validateResult = validate ? validate(value) : undefined;
+  const inputBase = (useUiRecipe("input") ?? inputRecipe)();
   const generateFormat = () => {
     return isNaN(value ?? 0) ? "" : formatter ? formatter(value?.toString() ?? "") : (value?.toString() ?? "");
   };
@@ -623,7 +625,7 @@ const DefaultCheckbox = ({ checked, onChange, className, ...rest }: CheckboxProp
       {...rest}
       type="checkbox"
       checked={checked}
-      className={cn("checkbox", className)}
+      className={cn("size-5 accent-primary", className)}
       onChange={(e) => {
         onChange(e.target.checked, e);
       }}

package/ui/Layout/BottomInset.tsx

@@ -9,6 +9,7 @@ export interface BottomInsetProps {
   className?: string;
   children: ReactNode;
   keyboardSticky?: boolean;
+  contentAnchor?: "bottom";
   role?: "bottomChrome" | "keyboardAccessory";
   estimatedHeight?: number;
   frameScope?: FrameSlotRegistration["scope"];
@@ -20,6 +21,7 @@ export const BottomInset = ({
   className,
   children,
   keyboardSticky,
+  contentAnchor,
   role,
   estimatedHeight,
   frameScope = "page",
@@ -49,12 +51,13 @@ export const BottomInset = ({
     debugFrame("bottomInset.mount", {
       path,
       keyboardSticky,
+      contentAnchor,
       role: frameRole,
       frameScope,
       frameSource,
     });
     return () => debugFrame("bottomInset.unmount", { path, frameSource });
-  }, [path, keyboardSticky, frameRole, frameScope, frameSource]);
+  }, [path, keyboardSticky, contentAnchor, frameRole, frameScope, frameSource]);
   useLayoutEffect(() => {
     if (!path) return;
     const height = useDeclaredHeight ? resolvedEstimatedHeight : (measuredHeight ?? readContentHeight());
@@ -63,6 +66,7 @@ export const BottomInset = ({
       role: frameRole,
       scope: frameScope,
       source: frameSource,
+      contentAnchor,
       estimatedHeight: resolvedEstimatedHeight,
       height,
       cache: frameCache,
@@ -72,6 +76,7 @@ export const BottomInset = ({
     frameRole,
     frameScope,
     frameSource,
+    contentAnchor,
     resolvedEstimatedHeight,
     measuredHeight,
     frameCache,

package/ui/Loading/ProgressBar.tsx

@@ -10,5 +10,12 @@ export interface ProgressBarProps {
 }
 export const ProgressBar = ({ className, value, max }: ProgressBarProps) => {
   const progress = useSpring({ value: 0, to: { value: value } });
-  return <animated.progress className={cn("progress w-full", className)} value={progress.value} max={max} />;
+
+  return (
+    <animated.progress
+      className={cn("h-2 w-full rounded-box accent-primary", className)}
+      value={progress.value}
+      max={max}
+    />
+  );
 };

package/ui/Menu.tsx

@@ -5,7 +5,7 @@ import { type ReactNode, useCallback, useEffect, useLayoutEffect, useRef, useSta
 import { AiFillCaretDown, AiOutlineEllipsis } from "react-icons/ai";
 import { buttonRecipe } from "./Button";
 
-import { createOverridable } from "./UiOverride";
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 export interface MenuItem {
   label: ReactNode;
@@ -62,13 +62,11 @@ export const DefaultMenu = ({
       ? `fixed bottom-0 flex translate-y-[98%] flex-col rounded-xs border-0 bg-background shadow-lg hover:bg-background`
       : "flex flex-col gap-0 p-0 bg-primary/10 hover:bg-primary/10 overflow-hidden";
 
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   const subMenuItemClassName =
     mode === "inline"
-      ? buttonRecipe({ variant: "ghost" }, "m-0 h-full w-full px-2 font-normal text-primary hover:bg-primary/20")
-      : buttonRecipe(
-          { variant: "ghost" },
-          "w-full whitespace-nowrap text-center font-normal text-primary duration-300",
-        );
+      ? recipe({ variant: "ghost" }, "m-0 h-full w-full px-2 font-normal text-primary hover:bg-primary/20")
+      : recipe({ variant: "ghost" }, "w-full whitespace-nowrap text-center font-normal text-primary duration-300");
 
   const [overflowMenuItems, setOverflowMenuItems] = useState<MenuItem[]>([]);
 
@@ -222,6 +220,7 @@ interface OverflowMenuProps {
 const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [expandedKey, setExpandedKey] = useState<string>(); 
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   const handleMouseEnter = () => {
     setIsOpen(true);
   };
@@ -239,7 +238,7 @@ const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
             <div
               key={item.key}
               onClick={() => onClick?.(item)}
-              className={buttonRecipe({ variant: "ghost" }, "relative whitespace-nowrap font-normal text-primary")}
+              className={recipe({ variant: "ghost" }, "relative whitespace-nowrap font-normal text-primary")}
               onMouseEnter={() => {
                 if (item.children && expandedKey !== item.key) setExpandedKey(item.key);
               }}
@@ -258,7 +257,7 @@ const OverflowMenu = ({ overflowItems, onClick }: OverflowMenuProps) => {
                         setExpandedKey(undefined);
                       }}
                       key={child.key}
-                      className={buttonRecipe(
+                      className={recipe(
                         { variant: "ghost" },
                         "flex items-center justify-center text-center font-normal text-primary",
                       )}

package/ui/Model/SureToRemove.tsx

@@ -8,6 +8,7 @@ import { AiOutlineDelete } from "react-icons/ai";
 
 import { buttonRecipe } from "../Button";
 import { Modal } from "../Modal";
+import { inputRecipe } from "../recipe";
 
 interface SureToRemoveProps {
   className?: string;
@@ -95,7 +96,7 @@ export default function SureToRemove({
         </div>
         {typeNameToRemove ? (
           <input
-            className="input w-full text-center"
+            className={inputRecipe({}, "text-center")}
             placeholder={`${l(`${modelName}.modelName` as "base.new")} name`}
             value={repeatName}
             onChange={(e) => {

package/ui/ObjectId.tsx

@@ -4,6 +4,7 @@ import { AiOutlineCheck, AiOutlineCopy } from "react-icons/ai";
 
 import { buttonRecipe } from "./Button";
 import { Tooltip } from "./Tooltip";
+import { useUiRecipe } from "./UiOverride";
 
 interface ObjectIdProps {
   id: string;
@@ -11,6 +12,7 @@ interface ObjectIdProps {
 
 export const ObjectId = ({ id }: ObjectIdProps) => {
   const [isCopied, setIsCopied] = useState(false);
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   const shortenedId = `${id.substring(0, 4)}...${id.substring(id.length - 5)}`;
   const handleCopyClick = () => {
     void navigator.clipboard.writeText(id);
@@ -24,10 +26,7 @@ export const ObjectId = ({ id }: ObjectIdProps) => {
       <Tooltip content={id} variant="primary">
         <div className="font-semibold text-xs">{shortenedId}</div>
       </Tooltip>
-      <button
-        className={buttonRecipe({ variant: "ghost", size: "icon" }, "size-6 rounded-full")}
-        onClick={handleCopyClick}
-      >
+      <button className={recipe({ variant: "ghost", size: "icon" }, "size-6 rounded-full")} onClick={handleCopyClick}>
         {isCopied ? <AiOutlineCheck /> : <AiOutlineCopy />}
       </button>
     </div>

package/ui/Pagination.tsx

@@ -4,10 +4,7 @@ import type { FC, ReactNode } from "react";
 import { BiChevronLeft, BiChevronRight, BiDotsHorizontalRounded } from "react-icons/bi";
 
 import { buttonRecipe } from "./Button";
-import { createOverridable } from "./UiOverride";
-
-/** Square ghost button style shared by every pager control (canonical buttonRecipe). */
-const pageBtn = buttonRecipe({ variant: "ghost", size: "icon" });
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 export interface PaginationProps {
   /** Current 1-based page number. */
@@ -36,6 +33,8 @@ export const DefaultPagination: FC<PaginationProps> = ({
   renderEmpty,
   classNames,
 }) => {
+  
+  const pageBtn = (useUiRecipe("button") ?? buttonRecipe)({ variant: "ghost", size: "icon" });
   const totalPages = Math.ceil(total / (itemsPerPage || 1));
   const handleLeftClick = () => {
     if (currentPage <= 1) return;

package/ui/Popconfirm.tsx

@@ -6,7 +6,7 @@ import { type ButtonHTMLAttributes, type ReactNode, useEffect, useState } from "
 import { BiMessageRoundedError } from "react-icons/bi";
 import { animated } from "./animated";
 import { buttonRecipe } from "./Button";
-import { createOverridable } from "./UiOverride";
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   loading?: boolean;
@@ -48,6 +48,8 @@ export const DefaultPopconfirm = ({
   decoClassName,
 }: PopconfirmProps) => {
   const { l } = usePage();
+  
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   const [isConfirming, setIsConfirming] = useState(false);
 
   const popconfirmProps = useSpring({
@@ -115,17 +117,13 @@ export const DefaultPopconfirm = ({
             </div>
             <div className="flex justify-end gap-2">
               <button
-                className={buttonRecipe({ variant: "outline", size: "xs" })}
+                className={recipe({ variant: "outline", size: "xs" })}
                 onClick={handleCancel}
                 {...cancelButtonProps}
               >
                 {cancelText ?? l("base.cancel")}
               </button>
-              <button
-                className={buttonRecipe({ variant: "primary", size: "xs" })}
-                onClick={handleConfirm}
-                {...okButtonProps}
-              >
+              <button className={recipe({ variant: "primary", size: "xs" })} onClick={handleConfirm} {...okButtonProps}>
                 {okText ?? l("base.ok")}
               </button>
             </div>

package/ui/Select.tsx

@@ -217,7 +217,7 @@ const DefaultSelect = <
           {searchable ? (
             <input
               type="text"
-              className="input w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none"
+              className="w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none"
               placeholder={selectedValues.length > 0 ? "" : placeholder}
               value={searchText}
               onChange={(e) => {

package/ui/System/CSR.tsx

@@ -226,6 +226,7 @@ const CSRWrapper = ({
               : bottomInset?.containerStyle
           }
           animationDuration={frameLayout.keyboard.animationDuration}
+          animationEasing={frameLayout.keyboard.animationEasing}
         >
           <CSRFrameSlotTargets slot="keyboardInset" />
         </KeyboardLayer>
@@ -281,14 +282,17 @@ const KeyboardLayer = ({
   className,
   style,
   animationDuration,
+  animationEasing,
   children,
-}: FrameLayerProps & { animationDuration?: number }) => (
+}: FrameLayerProps & { animationDuration?: number; animationEasing?: string }) => (
   <animated.div
     id={id}
     className={className}
     style={{
       ...(style ?? {}),
-      transition: `top ${animationDuration ?? 285}ms ease-out, height ${animationDuration ?? 285}ms ease-out`,
+      transition: `top ${animationDuration ?? 420}ms ${animationEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)"}, height ${
+        animationDuration ?? 420
+      }ms ${animationEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)"}`,
       willChange: "top, height",
     }}
   >

package/ui/ToggleSelect.tsx

@@ -3,10 +3,9 @@ import { cn, usePage } from "akanjs/client";
 import { type ComponentType, createElement } from "react";
 
 import { buttonRecipe } from "./Button";
-import { createOverridable, useUiOverride } from "./UiOverride";
+import { createOverridable, useUiOverride, useUiRecipe } from "./UiOverride";
 
-/** Toggle-select cell: outline button, filled success when selected. */
-const toggleBtn = buttonRecipe({ variant: "outline", size: "sm" });
+/** Toggle-select cell: outline button (recipe slot), filled success when selected. */
 const selectedCls = "border-transparent bg-success/70 text-success-foreground hover:bg-success/70";
 
 export interface ToggleSelectProps<I extends string | number | boolean | null> {
@@ -30,6 +29,7 @@ const DefaultToggleSelect = <I extends string | number | boolean | null>({
   disabled,
 }: ToggleSelectProps<I>) => {
   const { l } = usePage();
+  const toggleBtn = (useUiRecipe("button") ?? buttonRecipe)({ variant: "outline", size: "sm" });
   const validateResult = value !== null ? validate(value) : false;
 
   const invalidMessage =
@@ -97,6 +97,7 @@ const DefaultMulti = ({
   disabled,
 }: MultiProps) => {
   const { l } = usePage();
+  const toggleBtn = (useUiRecipe("button") ?? buttonRecipe)({ variant: "outline", size: "sm" });
   const validateResult = validate(value);
 
   const invalidMessage =

package/ui/UiOverride/context.ts

@@ -17,7 +17,7 @@ import type { ModalProps } from "../Modal";
 import type { PaginationProps } from "../Pagination";
 import type { PopconfirmProps } from "../Popconfirm";
 import type { ItemProps as RadioItemProps, RadioProps } from "../Radio";
-import type { BadgeVariants, ButtonVariants } from "../recipe";
+import type { BadgeVariants, ButtonVariants, InputSurfaceVariants } from "../recipe";
 import type { SelectProps } from "../Select";
 import type { TableProps } from "../Table";
 import type { MultiProps as ToggleSelectMultiProps, ToggleSelectProps } from "../ToggleSelect";
@@ -87,11 +87,21 @@ export type AkanModalComponent = AkanUiOverrides["Modal"];
  * manifest: `override({ recipes: { button: neonButtonRecipe } })`. A recipe swap changes
  * only the className factory — the component's structure/behavior (async states, focus,
  * a11y) is untouched. Each replacement must accept the framework recipe's full variant
- * contract, so every call site keeps working.
+ * contract, so every call site keeps working (a replacement with *extra* optional axes is
+ * assignable — contravariance — but those axes are only reachable from code that knows the
+ * replacement's own type).
+ *
+ * Scope: a recipe slot is a **client-side, route-scoped restyle**. It reaches framework
+ * client components, which resolve through `useUiRecipe(...)`. It never reaches a raw
+ * `xRecipe(...)` call in app JSX (statically imported — no context), nor server components
+ * (`Unit`/`View`), which intentionally render the canonical framework recipe. Extending the
+ * *vocabulary* is not this slot's job: add the axis to the framework recipe, or author an
+ * app recipe in `apps/<app>/ui/Recipe/`.
  */
 export interface AkanUiRecipes {
   button: (variants?: ButtonVariants, className?: ClassValue) => string;
   badge: (variants?: BadgeVariants, className?: ClassValue) => string;
+  input: (variants?: InputSurfaceVariants, className?: ClassValue) => string;
 }
 
 /** Shape of an `_overrides.tsx` manifest: component slots plus an optional recipe-slot map. */

package/ui/recipe/badgeRecipe.ts

@@ -1,23 +1,42 @@
 import { recipe, tv } from "./factory";
 
-/** 뱃지 look — 시맨틱 variant. `<Badge>` 가 소비하며, recipes.badge 슬롯으로 교체 가능. */
+/** 뱃지 look — 시맨틱 variant × size, outline 플래그는 색을 유지한 외곽선 스타일. `<Badge>` 가 소비하며, recipes.badge 슬롯으로 교체 가능. */
 export const badgeRecipe = recipe(
   tv({
-    base: "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 font-medium text-xs",
+    base: "inline-flex items-center gap-1 rounded-full border font-medium",
     variants: {
       variant: {
         default: "border-transparent bg-muted text-foreground",
         primary: "border-transparent bg-primary text-primary-foreground",
         secondary: "border-transparent bg-secondary text-secondary-foreground",
         accent: "border-transparent bg-accent text-accent-foreground",
+        neutral: "border-transparent bg-neutral text-neutral-foreground",
         success: "border-transparent bg-success text-success-foreground",
         warning: "border-transparent bg-warning text-warning-foreground",
         info: "border-transparent bg-info text-info-foreground",
         error: "border-transparent bg-destructive text-destructive-foreground",
         outline: "border-border text-foreground",
       },
+      size: {
+        xs: "px-1.5 py-0 text-[0.625rem]",
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-xs",
+        lg: "px-3 py-1 text-sm",
+      },
+
+      outline: { true: "border-current bg-transparent" },
     },
-    defaultVariants: { variant: "default" },
+    compoundVariants: [
+      { variant: "primary", outline: true, class: "text-primary" },
+      { variant: "secondary", outline: true, class: "text-secondary" },
+      { variant: "accent", outline: true, class: "text-accent" },
+      { variant: "neutral", outline: true, class: "text-neutral" },
+      { variant: "success", outline: true, class: "text-success" },
+      { variant: "warning", outline: true, class: "text-warning" },
+      { variant: "info", outline: true, class: "text-info" },
+      { variant: "error", outline: true, class: "text-destructive" },
+    ],
+    defaultVariants: { variant: "default", size: "md" },
   }),
 );
 export type BadgeVariants = NonNullable<Parameters<typeof badgeRecipe>[0]>;

package/ui/recipe/buttonRecipe.ts

@@ -1,15 +1,18 @@
 import { recipe, tv } from "./factory";
 
-/** 버튼 look — 시맨틱 variant × size. `<Button>` 이 소비하며, `_overrides.tsx` 의 recipes.button 슬롯으로 교체 가능. */
+/** 버튼 look — 시맨틱 variant × size × shape, outline 플래그는 색을 유지한 외곽선 스타일. `<Button>` 이 소비하며, `_overrides.tsx` 의 recipes.button 슬롯으로 교체 가능. */
 export const buttonRecipe = recipe(
   tv({
 
     base: "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-field font-medium transition active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
     variants: {
       variant: {
+
+        default: "bg-muted text-foreground hover:bg-muted/80",
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         accent: "bg-accent text-accent-foreground hover:bg-accent/90",
+        neutral: "bg-neutral text-neutral-foreground hover:bg-neutral/90",
         outline: "border border-input bg-background hover:bg-muted hover:text-foreground",
         ghost: "hover:bg-muted hover:text-foreground",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
@@ -25,8 +28,54 @@ export const buttonRecipe = recipe(
         lg: "h-12 px-6 text-lg",
         icon: "h-10 w-10",
       },
+
+      shape: {
+        default: "",
+        square: "aspect-square px-0",
+        circle: "aspect-square rounded-full px-0",
+      },
+
+      outline: { true: "border bg-transparent" },
     },
-    defaultVariants: { variant: "primary", size: "md" },
+    compoundVariants: [
+      {
+        variant: "primary",
+        outline: true,
+        class: "border-primary text-primary hover:bg-primary hover:text-primary-foreground",
+      },
+      {
+        variant: "secondary",
+        outline: true,
+        class: "border-secondary text-secondary hover:bg-secondary hover:text-secondary-foreground",
+      },
+      {
+        variant: "accent",
+        outline: true,
+        class: "border-accent text-accent hover:bg-accent hover:text-accent-foreground",
+      },
+      {
+        variant: "neutral",
+        outline: true,
+        class: "border-neutral text-neutral hover:bg-neutral hover:text-neutral-foreground",
+      },
+      {
+        variant: "destructive",
+        outline: true,
+        class: "border-destructive text-destructive hover:bg-destructive hover:text-destructive-foreground",
+      },
+      {
+        variant: "success",
+        outline: true,
+        class: "border-success text-success hover:bg-success hover:text-success-foreground",
+      },
+      {
+        variant: "warning",
+        outline: true,
+        class: "border-warning text-warning hover:bg-warning hover:text-warning-foreground",
+      },
+      { variant: "info", outline: true, class: "border-info text-info hover:bg-info hover:text-info-foreground" },
+    ],
+    defaultVariants: { variant: "primary", size: "md", shape: "default" },
   }),
 );
 export type ButtonVariants = NonNullable<Parameters<typeof buttonRecipe>[0]>;

package/ui/recipe/factory.ts

@@ -1,6 +1,6 @@
 import type { ClassNameValue as ClassValue } from "tailwind-merge";
 import { createTV } from "tailwind-variants";
-import { colorTokens } from "../../client/cn";
+import { colorTokens, radiusTokens } from "../../client/cn";
 
 /**
  * recipe 팩토리 모듈 — 변형 팩토리를 만드는 **인프라**. **서버-안전** (절대 `"use client"` 금지).
@@ -8,7 +8,7 @@ import { colorTokens } from "../../client/cn";
  * 각 앱은 `apps/<app>/ui/Recipe/<name>.ts`.
  */
 
-export const tv = createTV({ twMergeConfig: { extend: { theme: { color: colorTokens } } } });
+export const tv = createTV({ twMergeConfig: { extend: { theme: { color: colorTokens, radius: radiusTokens } } } });
 
 /**
  * recipe 팩토리 — `tv({...})` 인스턴스를 받아 겉을 `(변형, className?)` 2-인자로 노출하고,

package/ui/recipe/inputRecipe.ts

@@ -1,13 +1,27 @@
 import { recipe, tv } from "./factory";
 
-/** 입력 표면 look — Input/TextArea 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area)을 고른다. */
+/** 입력 표면 look — Input/TextArea/Select 가 공유하는 필드 셸. kind 로 한 줄 필드(field)/멀티라인(area), tone 으로 강조/오류 상태를 고른다. */
 export const inputRecipe = recipe(
   tv({
-    base: "w-full rounded-field border border-input bg-background text-foreground text-sm focus:border-primary focus:outline-none",
+    base: "w-full rounded-field border border-input bg-background text-foreground focus:border-primary focus:outline-none",
     variants: {
-      kind: { field: "h-10 px-3", area: "p-3" },
+      kind: { field: "px-3", area: "p-3" },
+      size: { xs: "text-xs", sm: "text-sm", md: "text-sm", lg: "text-base", xl: "text-lg" },
+      tone: {
+        default: "",
+        primary: "border-primary",
+        error: "border-destructive focus:border-destructive",
+      },
     },
-    defaultVariants: { kind: "field" },
+
+    compoundVariants: [
+      { kind: "field", size: "xs", class: "h-6" },
+      { kind: "field", size: "sm", class: "h-8" },
+      { kind: "field", size: "md", class: "h-10" },
+      { kind: "field", size: "lg", class: "h-12" },
+      { kind: "field", size: "xl", class: "h-14" },
+    ],
+    defaultVariants: { kind: "field", size: "md", tone: "default" },
   }),
 );
 export type InputSurfaceVariants = NonNullable<Parameters<typeof inputRecipe>[0]>;