@exem-ui/react 0.1.0

package/dist/chunk-IANSI7F7.mjs

@@ -0,0 +1,393 @@
+import { commonInputVariants } from './chunk-ZWCMSHDP.mjs';
+import { cva, cn } from '@exem-ui/core/utils';
+import * as React from 'react';
+import { createContext, useId, forwardRef, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var TextAreaContext = createContext(null);
+var useTextAreaContext = () => {
+  const context = useContext(TextAreaContext);
+  if (!context) {
+    throw new Error("TextArea components must be used within a TextArea");
+  }
+  return context;
+};
+var textAreaVariants = {
+  container: commonInputVariants.container,
+  label: commonInputVariants.label,
+  field: cva(
+    "scrollbar-overlay block w-full resize-none rounded-medium border transition-colors focus:outline-none",
+    {
+      variants: {
+        variant: {
+          fill: "border-transparent bg-elevation-elevation-2",
+          line: "border-border-primary"
+        },
+        size: {
+          xsmall: "min-h-[60px] px-1.5 py-[3.5px] text-body-3",
+          small: "min-h-[80px] px-2 py-1 text-body-2",
+          medium: "min-h-[100px] px-2.5 py-1.5 text-body-2",
+          large: "min-h-[120px] px-3 py-[9px] text-body-1"
+        },
+        state: {
+          default: "text-text-primary placeholder:text-text-tertiary",
+          focused: "text-text-primary placeholder:text-text-tertiary",
+          error: "text-text-primary placeholder:text-text-tertiary",
+          disabled: "cursor-not-allowed text-text-disabled placeholder:text-text-disabled"
+        }
+      },
+      compoundVariants: [
+        { variant: "fill", state: "focused", class: "border-border-focused" },
+        { variant: "fill", state: "error", class: "border-border-critical" },
+        {
+          variant: "fill",
+          state: "disabled",
+          class: "bg-elevation-elevation-2 border-transparent"
+        },
+        { variant: "line", state: "focused", class: "border-border-focused" },
+        { variant: "line", state: "error", class: "border-border-critical" },
+        { variant: "line", state: "disabled", class: "border-border-primary" }
+      ],
+      defaultVariants: { variant: "fill", size: "medium", state: "default" }
+    }
+  ),
+  descriptionContainer: cva("flex flex-row items-center justify-between", {
+    variants: {
+      size: {
+        xsmall: "gap-0.5 text-caption",
+        small: "gap-1 text-body-3",
+        medium: "gap-1 text-body-3",
+        large: "gap-1 text-body-2"
+      }
+    },
+    defaultVariants: { size: "medium" }
+  }),
+  description: commonInputVariants.description,
+  counter: cva("text-nowrap font-regular", {
+    variants: {
+      disabled: {
+        true: "text-gray-04",
+        false: "text-text-tertiary"
+      }
+    },
+    defaultVariants: { disabled: false }
+  })
+};
+var TextArea = React.forwardRef(
+  ({
+    children,
+    variant = "fill",
+    size = "medium",
+    error = false,
+    disabled = false,
+    value = "",
+    maxLength,
+    className,
+    ...textAreaProps
+  }, ref) => {
+    const uniqueId = useId();
+    const id = `text-area-${uniqueId}`;
+    const { onChange, ...restTextAreaProps } = textAreaProps;
+    return /* @__PURE__ */ jsx(
+      TextAreaContext.Provider,
+      {
+        value: { variant, size, error, disabled, id, value, maxLength, onChange },
+        children: /* @__PURE__ */ jsx("div", { ref, className: cn(textAreaVariants.container, className), children: children || /* @__PURE__ */ jsx(TextArea.Field, { ...restTextAreaProps }) })
+      }
+    );
+  }
+);
+TextArea.Label = React.forwardRef(
+  ({ children, required = false, className }, ref) => {
+    const { size, disabled, id } = useTextAreaContext();
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        htmlFor: id,
+        className: cn(textAreaVariants.label({ size, disabled, required }), className),
+        children
+      }
+    );
+  }
+);
+TextArea.Field = React.forwardRef(
+  ({ className, onFocus, onBlur, ...props }, ref) => {
+    const {
+      variant,
+      size,
+      error,
+      disabled,
+      id,
+      maxLength,
+      value: contextValue,
+      onChange: contextOnChange
+    } = useTextAreaContext();
+    const [focused, setFocused] = React.useState(false);
+    const handleFocus = (e) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+    const state = disabled ? "disabled" : error ? "error" : focused ? "focused" : "default";
+    const isControlled = contextValue !== void 0;
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id,
+        disabled,
+        maxLength,
+        className: cn(textAreaVariants.field({ variant, size, state }), className),
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onChange: (e) => {
+          contextOnChange?.(e);
+        },
+        ...isControlled ? { value: contextValue } : {},
+        ...props
+      }
+    );
+  }
+);
+TextArea.Description = React.forwardRef(
+  ({ children, showCounter = true, className }, ref) => {
+    const { size, error, disabled, value = "", maxLength } = useTextAreaContext();
+    if (!children && (!showCounter || !maxLength)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(textAreaVariants.descriptionContainer({ size }), className), children: [
+      children && /* @__PURE__ */ jsx("p", { className: cn(textAreaVariants.description({ size, error, disabled }), "flex-1"), children }),
+      showCounter && maxLength && /* @__PURE__ */ jsxs("span", { className: cn(textAreaVariants.counter({ disabled })), children: [
+        value.length,
+        "/",
+        maxLength
+      ] })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+TextArea.Label.displayName = "TextArea.Label";
+TextArea.Field.displayName = "TextArea.Field";
+TextArea.Description.displayName = "TextArea.Description";
+var TextFieldContext = createContext(null);
+var useTextFieldContext = () => {
+  const context = useContext(TextFieldContext);
+  if (!context) {
+    throw new Error("TextField components must be used within a TextField");
+  }
+  return context;
+};
+var textFieldVariants = {
+  container: commonInputVariants.container,
+  label: commonInputVariants.label,
+  wrapper: cva(
+    "flex w-full flex-row items-center rounded-medium border transition-colors focus-within:border-border-focused focus-within:outline-none",
+    {
+      variants: {
+        variant: {
+          fill: "border-transparent bg-elevation-elevation-2",
+          line: "border-border-primary"
+        },
+        size: {
+          xsmall: "h-6 gap-0 px-1",
+          small: "h-7 gap-0.5 px-1.5",
+          medium: "h-8 gap-0.5 px-2",
+          large: "h-10 gap-1 px-2.5"
+        },
+        state: {
+          default: "text-text-primary",
+          error: "text-text-primary",
+          disabled: "cursor-not-allowed text-text-disabled"
+        }
+      },
+      compoundVariants: [
+        { variant: "fill", state: "error", class: "border-border-critical" },
+        {
+          variant: "fill",
+          state: "disabled",
+          class: "bg-elevation-elevation-2 border-transparent"
+        },
+        { variant: "line", state: "error", class: "border-border-critical" },
+        { variant: "line", state: "disabled", class: "border-border-primary" }
+      ],
+      defaultVariants: { variant: "fill", size: "medium", state: "default" }
+    }
+  ),
+  input: cva(
+    "w-full border-none bg-transparent p-0 focus:outline-none focus:ring-0 disabled:cursor-not-allowed",
+    {
+      variants: {
+        size: {
+          xsmall: "text-body-3 placeholder:text-body-3",
+          small: "text-body-2 placeholder:text-body-2",
+          medium: "text-body-2 placeholder:text-body-2",
+          large: "text-body-1 placeholder:text-body-1"
+        },
+        state: {
+          default: "text-text-primary placeholder:text-text-tertiary",
+          error: "text-text-primary placeholder:text-text-tertiary",
+          disabled: "text-text-disabled placeholder:text-text-disabled"
+        }
+      },
+      defaultVariants: { size: "medium", state: "default" }
+    }
+  ),
+  description: cva("mt-0.5 font-regular text-text-tertiary", {
+    variants: {
+      size: {
+        xsmall: "text-caption",
+        small: "text-body-3",
+        medium: "text-body-3",
+        large: "text-body-2"
+      },
+      error: {
+        true: "text-text-critical",
+        false: ""
+      },
+      disabled: {
+        true: "text-text-disabled",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: true,
+        error: true,
+        class: "text-text-disabled"
+        // disabled가 error보다 우선
+      }
+    ],
+    defaultVariants: { size: "medium", error: false, disabled: false }
+  }),
+  subText: cva("ml-1 shrink-0 font-regular", {
+    variants: {
+      size: {
+        xsmall: "text-body-3",
+        small: "text-body-2",
+        medium: "text-body-2",
+        large: "text-body-1"
+      },
+      disabled: {
+        true: "text-text-disabled",
+        false: "text-text-tertiary"
+      }
+    },
+    defaultVariants: { size: "medium", disabled: false }
+  }),
+  icon: cva("shrink-0 text-icon-tertiary", {
+    variants: {
+      size: {
+        xsmall: "size-4",
+        small: "size-4",
+        medium: "size-4",
+        large: "size-5"
+      }
+    },
+    defaultVariants: { size: "medium" }
+  })
+};
+var TextField = forwardRef(
+  ({
+    children,
+    variant = "fill",
+    size = "medium",
+    error = false,
+    disabled = false,
+    className,
+    id: providedId,
+    value,
+    onChange,
+    ...inputProps
+  }, ref) => {
+    const uniqueId = useId();
+    const id = providedId || `text-field-${uniqueId}`;
+    return /* @__PURE__ */ jsx(TextFieldContext.Provider, { value: { variant, size, error, disabled, id, value, onChange }, children: /* @__PURE__ */ jsx("div", { ref, className: cn(textFieldVariants.container, className), children: children || /* @__PURE__ */ jsx(TextField.Input, { ...inputProps }) }) });
+  }
+);
+TextField.Label = forwardRef(
+  ({ children, required = false, className }, ref) => {
+    const { size, disabled, id } = useTextFieldContext();
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        htmlFor: id,
+        className: cn(textFieldVariants.label({ size, disabled, required }), className),
+        children
+      }
+    );
+  }
+);
+TextField.Input = forwardRef(
+  ({ className, leftIcon, rightIcon, subText, ...props }, ref) => {
+    const {
+      variant,
+      size,
+      error,
+      disabled,
+      id,
+      value: contextValue,
+      onChange: contextOnChange
+    } = useTextFieldContext();
+    const state = disabled ? "disabled" : error ? "error" : "default";
+    const isControlled = contextValue !== void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn(textFieldVariants.wrapper({ variant, size, state }), className), children: [
+      leftIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("flex items-center justify-center", textFieldVariants.icon({ size })),
+          children: leftIcon
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-row items-center justify-center", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id,
+            disabled,
+            className: cn(textFieldVariants.input({ size, state })),
+            onChange: (e) => {
+              contextOnChange?.(e);
+            },
+            ...props,
+            ...isControlled ? { value: contextValue } : {}
+          }
+        ),
+        subText && /* @__PURE__ */ jsx("span", { className: cn(textFieldVariants.subText({ size, disabled })), children: subText })
+      ] }),
+      rightIcon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("flex items-center justify-center", textFieldVariants.icon({ size })),
+          children: rightIcon
+        }
+      )
+    ] });
+  }
+);
+TextField.Description = forwardRef(
+  ({ children, className }, ref) => {
+    const { size, error, disabled } = useTextFieldContext();
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        className: cn(textFieldVariants.description({ size, error, disabled }), className),
+        children
+      }
+    );
+  }
+);
+TextField.displayName = "TextField";
+TextField.Label.displayName = "TextField.Label";
+TextField.Input.displayName = "TextField.Input";
+TextField.Description.displayName = "TextField.Description";
+
+export { TextArea, TextField };
+//# sourceMappingURL=chunk-IANSI7F7.mjs.map
+//# sourceMappingURL=chunk-IANSI7F7.mjs.map

package/dist/chunk-IANSI7F7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/input/TextArea.tsx","../src/input/TextField.tsx"],"names":["createContext","useContext","cva","forwardRef","useId","jsx","cn","jsxs"],"mappings":"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","file":"chunk-IANSI7F7.mjs","sourcesContent":["import { cn, cva } from '@exem-ui/core/utils';\nimport * as React from 'react';\nimport { createContext, useContext, useId } from 'react';\n\nimport { commonInputVariants, type Size, type Variant } from './inputVariants';\n\ntype TextAreaLabelProps = {\n  children: React.ReactNode;\n  required?: boolean;\n  className?: string;\n};\n\ntype TextAreaFieldProps = Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'size' | 'disabled' | 'id' | 'value' | 'onChange' | 'maxLength'\n>;\n\ntype TextAreaDescriptionProps = {\n  children?: React.ReactNode;\n  showCounter?: boolean;\n  className?: string;\n};\n\ntype TextAreaRootProps = {\n  children?: React.ReactNode;\n  /**\n   * 입력 필드 스타일 유형\n   * @default 'fill'\n   */\n  variant?: Variant;\n  size?: Size;\n  error?: boolean;\n  disabled?: boolean;\n  /**\n   * TextArea의 기본값. Context를 통해 하위 컴포넌트로 전달됩니다.\n   * TextArea.Field에서 value prop이 전달되면 Field의 value가 우선 적용됩니다.\n   *\n   * 사용 패턴:\n   * - 통합 관리: <TextArea value={state}> - Context로 모든 Field에 적용\n   * - 개별 제어: <TextArea.Field value={localState}> - 특정 Field만 개별 제어\n   */\n  value?: string;\n  maxLength?: number;\n  className?: string;\n} & Omit<\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'size' | 'disabled' | 'id' | 'className'\n>;\n\ntype TextAreaComponent = React.ForwardRefExoticComponent<\n  TextAreaRootProps & React.RefAttributes<HTMLDivElement>\n> & {\n  Label: React.ForwardRefExoticComponent<\n    TextAreaLabelProps & React.RefAttributes<HTMLLabelElement>\n  >;\n  Field: React.ForwardRefExoticComponent<\n    TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>\n  >;\n  Description: React.ForwardRefExoticComponent<\n    TextAreaDescriptionProps & React.RefAttributes<HTMLDivElement>\n  >;\n};\n\ntype TextAreaContextType = {\n  variant: Variant;\n  size?: Size;\n  error?: boolean;\n  disabled?: boolean;\n  id: string;\n  value?: string;\n  maxLength?: number;\n  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;\n};\n\nconst TextAreaContext = createContext<TextAreaContextType | null>(null);\n\nconst useTextAreaContext = () => {\n  const context = useContext(TextAreaContext);\n  if (!context) {\n    throw new Error('TextArea components must be used within a TextArea');\n  }\n  return context;\n};\n\nconst textAreaVariants = {\n  container: commonInputVariants.container,\n  label: commonInputVariants.label,\n\n  field: cva(\n    'scrollbar-overlay block w-full resize-none rounded-medium border transition-colors focus:outline-none',\n    {\n      variants: {\n        variant: {\n          fill: 'border-transparent bg-elevation-elevation-2',\n          line: 'border-border-primary',\n        },\n        size: {\n          xsmall: 'min-h-[60px] px-1.5 py-[3.5px] text-body-3',\n          small: 'min-h-[80px] px-2 py-1 text-body-2',\n          medium: 'min-h-[100px] px-2.5 py-1.5 text-body-2',\n          large: 'min-h-[120px] px-3 py-[9px] text-body-1',\n        },\n        state: {\n          default: 'text-text-primary placeholder:text-text-tertiary',\n          focused: 'text-text-primary placeholder:text-text-tertiary',\n          error: 'text-text-primary placeholder:text-text-tertiary',\n          disabled: 'cursor-not-allowed text-text-disabled placeholder:text-text-disabled',\n        },\n      },\n      compoundVariants: [\n        { variant: 'fill', state: 'focused', class: 'border-border-focused' },\n        { variant: 'fill', state: 'error', class: 'border-border-critical' },\n        {\n          variant: 'fill',\n          state: 'disabled',\n          class: 'bg-elevation-elevation-2 border-transparent',\n        },\n        { variant: 'line', state: 'focused', class: 'border-border-focused' },\n        { variant: 'line', state: 'error', class: 'border-border-critical' },\n        { variant: 'line', state: 'disabled', class: 'border-border-primary' },\n      ],\n      defaultVariants: { variant: 'fill', size: 'medium', state: 'default' },\n    },\n  ),\n\n  descriptionContainer: cva('flex flex-row items-center justify-between', {\n    variants: {\n      size: {\n        xsmall: 'gap-0.5 text-caption',\n        small: 'gap-1 text-body-3',\n        medium: 'gap-1 text-body-3',\n        large: 'gap-1 text-body-2',\n      },\n    },\n    defaultVariants: { size: 'medium' },\n  }),\n\n  description: commonInputVariants.description,\n\n  counter: cva('text-nowrap font-regular', {\n    variants: {\n      disabled: {\n        true: 'text-gray-04',\n        false: 'text-text-tertiary',\n      },\n    },\n    defaultVariants: { disabled: false },\n  }),\n};\n\nconst TextArea = React.forwardRef<HTMLDivElement, TextAreaRootProps>(\n  (\n    {\n      children,\n      variant = 'fill',\n      size = 'medium',\n      error = false,\n      disabled = false,\n      value = '',\n      maxLength,\n      className,\n      ...textAreaProps\n    },\n    ref,\n  ) => {\n    const uniqueId = useId();\n    const id = `text-area-${uniqueId}`;\n    const { onChange, ...restTextAreaProps } = textAreaProps;\n\n    return (\n      <TextAreaContext.Provider\n        value={{ variant, size, error, disabled, id, value, maxLength, onChange }}\n      >\n        <div ref={ref} className={cn(textAreaVariants.container, className)}>\n          {children || <TextArea.Field {...restTextAreaProps} />}\n        </div>\n      </TextAreaContext.Provider>\n    );\n  },\n) as TextAreaComponent;\n\nTextArea.Label = React.forwardRef<HTMLLabelElement, TextAreaLabelProps>(\n  ({ children, required = false, className }, ref) => {\n    const { size, disabled, id } = useTextAreaContext();\n\n    return (\n      <label\n        ref={ref}\n        htmlFor={id}\n        className={cn(textAreaVariants.label({ size, disabled, required }), className)}\n      >\n        {children}\n      </label>\n    );\n  },\n) as TextAreaComponent['Label'];\n\nTextArea.Field = React.forwardRef<HTMLTextAreaElement, TextAreaFieldProps>(\n  ({ className, onFocus, onBlur, ...props }, ref) => {\n    const {\n      variant,\n      size,\n      error,\n      disabled,\n      id,\n      maxLength,\n      value: contextValue,\n      onChange: contextOnChange,\n    } = useTextAreaContext();\n    const [focused, setFocused] = React.useState(false);\n\n    const handleFocus = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n      setFocused(true);\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {\n      setFocused(false);\n      onBlur?.(e);\n    };\n\n    const state = disabled ? 'disabled' : error ? 'error' : focused ? 'focused' : 'default';\n\n    const isControlled = contextValue !== undefined;\n\n    return (\n      <textarea\n        ref={ref}\n        id={id}\n        disabled={disabled}\n        maxLength={maxLength}\n        className={cn(textAreaVariants.field({ variant, size, state }), className)}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChange={(e) => {\n          contextOnChange?.(e);\n        }}\n        {...(isControlled ? { value: contextValue } : {})}\n        {...props}\n      />\n    );\n  },\n) as TextAreaComponent['Field'];\n\nTextArea.Description = React.forwardRef<HTMLDivElement, TextAreaDescriptionProps>(\n  ({ children, showCounter = true, className }, ref) => {\n    const { size, error, disabled, value = '', maxLength } = useTextAreaContext();\n\n    if (!children && (!showCounter || !maxLength)) {\n      return null;\n    }\n\n    return (\n      <div ref={ref} className={cn(textAreaVariants.descriptionContainer({ size }), className)}>\n        {children && (\n          <p className={cn(textAreaVariants.description({ size, error, disabled }), 'flex-1')}>\n            {children}\n          </p>\n        )}\n        {showCounter && maxLength && (\n          <span className={cn(textAreaVariants.counter({ disabled }))}>\n            {value.length}/{maxLength}\n          </span>\n        )}\n      </div>\n    );\n  },\n) as TextAreaComponent['Description'];\n\nTextArea.displayName = 'TextArea';\nTextArea.Label.displayName = 'TextArea.Label';\nTextArea.Field.displayName = 'TextArea.Field';\nTextArea.Description.displayName = 'TextArea.Description';\n\nexport { TextArea };\nexport type {\n  TextAreaComponent,\n  TextAreaRootProps,\n  TextAreaLabelProps,\n  TextAreaFieldProps,\n  TextAreaDescriptionProps,\n};\n","import { cn, cva } from '@exem-ui/core/utils';\nimport type React from 'react';\nimport { createContext, forwardRef, useContext, useId } from 'react';\nimport { commonInputVariants, type Icon, type Size, type Variant } from './inputVariants';\n\ntype TextFieldContextType = {\n  variant: Variant;\n  size: Size;\n  error: boolean;\n  disabled: boolean;\n  id: string;\n  value?: string;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n};\n\ntype TextFieldRootProps = {\n  children?: React.ReactNode;\n  /**\n   * 입력 필드 스타일 유형\n   * @default 'fill'\n   */\n  variant?: Variant;\n  size?: Size;\n  error?: boolean;\n  disabled?: boolean;\n  className?: string;\n  value?: string;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n} & Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'disabled' | 'className' | 'value' | 'onChange'\n>;\n\ntype TextFieldLabelProps = {\n  children: React.ReactNode;\n  required?: boolean;\n  className?: string;\n};\n\ntype TextFieldInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size' | 'disabled' | 'id' | 'value' | 'onChange'\n> & {\n  leftIcon?: Icon;\n  rightIcon?: Icon;\n  subText?: string;\n};\n\ntype TextFieldDescriptionProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\ntype TextFieldComponent = React.ForwardRefExoticComponent<\n  TextFieldRootProps & React.RefAttributes<HTMLDivElement>\n> & {\n  Label: React.ForwardRefExoticComponent<\n    TextFieldLabelProps & React.RefAttributes<HTMLLabelElement>\n  >;\n  Input: React.ForwardRefExoticComponent<\n    TextFieldInputProps & React.RefAttributes<HTMLInputElement>\n  >;\n  Description: React.ForwardRefExoticComponent<\n    TextFieldDescriptionProps & React.RefAttributes<HTMLParagraphElement>\n  >;\n};\n\nconst TextFieldContext = createContext<TextFieldContextType | null>(null);\n\nconst useTextFieldContext = () => {\n  const context = useContext(TextFieldContext);\n  if (!context) {\n    throw new Error('TextField components must be used within a TextField');\n  }\n  return context;\n};\n\nconst textFieldVariants = {\n  container: commonInputVariants.container,\n  label: commonInputVariants.label,\n\n  wrapper: cva(\n    'flex w-full flex-row items-center rounded-medium border transition-colors focus-within:border-border-focused focus-within:outline-none',\n    {\n      variants: {\n        variant: {\n          fill: 'border-transparent bg-elevation-elevation-2',\n          line: 'border-border-primary',\n        },\n        size: {\n          xsmall: 'h-6 gap-0 px-1',\n          small: 'h-7 gap-0.5 px-1.5',\n          medium: 'h-8 gap-0.5 px-2',\n          large: 'h-10 gap-1 px-2.5',\n        },\n        state: {\n          default: 'text-text-primary',\n          error: 'text-text-primary',\n          disabled: 'cursor-not-allowed text-text-disabled',\n        },\n      },\n      compoundVariants: [\n        { variant: 'fill', state: 'error', class: 'border-border-critical' },\n        {\n          variant: 'fill',\n          state: 'disabled',\n          class: 'bg-elevation-elevation-2 border-transparent',\n        },\n        { variant: 'line', state: 'error', class: 'border-border-critical' },\n        { variant: 'line', state: 'disabled', class: 'border-border-primary' },\n      ],\n      defaultVariants: { variant: 'fill', size: 'medium', state: 'default' },\n    },\n  ),\n\n  input: cva(\n    'w-full border-none bg-transparent p-0 focus:outline-none focus:ring-0 disabled:cursor-not-allowed',\n    {\n      variants: {\n        size: {\n          xsmall: 'text-body-3 placeholder:text-body-3',\n          small: 'text-body-2 placeholder:text-body-2',\n          medium: 'text-body-2 placeholder:text-body-2',\n          large: 'text-body-1 placeholder:text-body-1',\n        },\n        state: {\n          default: 'text-text-primary placeholder:text-text-tertiary',\n          error: 'text-text-primary placeholder:text-text-tertiary',\n          disabled: 'text-text-disabled placeholder:text-text-disabled',\n        },\n      },\n      defaultVariants: { size: 'medium', state: 'default' },\n    },\n  ),\n\n  description: cva('mt-0.5 font-regular text-text-tertiary', {\n    variants: {\n      size: {\n        xsmall: 'text-caption',\n        small: 'text-body-3',\n        medium: 'text-body-3',\n        large: 'text-body-2',\n      },\n      error: {\n        true: 'text-text-critical',\n        false: '',\n      },\n      disabled: {\n        true: 'text-text-disabled',\n        false: '',\n      },\n    },\n    compoundVariants: [\n      {\n        disabled: true,\n        error: true,\n        class: 'text-text-disabled', // disabled가 error보다 우선\n      },\n    ],\n    defaultVariants: { size: 'medium', error: false, disabled: false },\n  }),\n\n  subText: cva('ml-1 shrink-0 font-regular', {\n    variants: {\n      size: {\n        xsmall: 'text-body-3',\n        small: 'text-body-2',\n        medium: 'text-body-2',\n        large: 'text-body-1',\n      },\n      disabled: {\n        true: 'text-text-disabled',\n        false: 'text-text-tertiary',\n      },\n    },\n    defaultVariants: { size: 'medium', disabled: false },\n  }),\n\n  icon: cva('shrink-0 text-icon-tertiary', {\n    variants: {\n      size: {\n        xsmall: 'size-4',\n        small: 'size-4',\n        medium: 'size-4',\n        large: 'size-5',\n      },\n    },\n    defaultVariants: { size: 'medium' },\n  }),\n};\n\nconst TextField = forwardRef<HTMLDivElement, TextFieldRootProps>(\n  (\n    {\n      children,\n      variant = 'fill',\n      size = 'medium',\n      error = false,\n      disabled = false,\n      className,\n      id: providedId,\n      value,\n      onChange,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const uniqueId = useId();\n    const id = providedId || `text-field-${uniqueId}`;\n\n    return (\n      <TextFieldContext.Provider value={{ variant, size, error, disabled, id, value, onChange }}>\n        <div ref={ref} className={cn(textFieldVariants.container, className)}>\n          {children || <TextField.Input {...inputProps} />}\n        </div>\n      </TextFieldContext.Provider>\n    );\n  },\n) as TextFieldComponent;\n\nTextField.Label = forwardRef<HTMLLabelElement, TextFieldLabelProps>(\n  ({ children, required = false, className }, ref) => {\n    const { size, disabled, id } = useTextFieldContext();\n\n    return (\n      <label\n        ref={ref}\n        htmlFor={id}\n        className={cn(textFieldVariants.label({ size, disabled, required }), className)}\n      >\n        {children}\n      </label>\n    );\n  },\n) as TextFieldComponent['Label'];\n\nTextField.Input = forwardRef<HTMLInputElement, TextFieldInputProps>(\n  ({ className, leftIcon, rightIcon, subText, ...props }, ref) => {\n    const {\n      variant,\n      size,\n      error,\n      disabled,\n      id,\n      value: contextValue,\n      onChange: contextOnChange,\n    } = useTextFieldContext();\n    const state = disabled ? 'disabled' : error ? 'error' : 'default';\n    const isControlled = contextValue !== undefined;\n\n    return (\n      <div className={cn(textFieldVariants.wrapper({ variant, size, state }), className)}>\n        {leftIcon && (\n          <span\n            className={cn('flex items-center justify-center', textFieldVariants.icon({ size }))}\n          >\n            {leftIcon}\n          </span>\n        )}\n\n        <div className=\"flex flex-1 flex-row items-center justify-center\">\n          <input\n            ref={ref}\n            id={id}\n            disabled={disabled}\n            className={cn(textFieldVariants.input({ size, state }))}\n            onChange={(e) => {\n              contextOnChange?.(e);\n            }}\n            {...props}\n            {...(isControlled ? { value: contextValue } : {})}\n          />\n          {subText && (\n            <span className={cn(textFieldVariants.subText({ size, disabled }))}>{subText}</span>\n          )}\n        </div>\n\n        {rightIcon && (\n          <span\n            className={cn('flex items-center justify-center', textFieldVariants.icon({ size }))}\n          >\n            {rightIcon}\n          </span>\n        )}\n      </div>\n    );\n  },\n) as TextFieldComponent['Input'];\n\nTextField.Description = forwardRef<HTMLParagraphElement, TextFieldDescriptionProps>(\n  ({ children, className }, ref) => {\n    const { size, error, disabled } = useTextFieldContext();\n\n    return (\n      <p\n        ref={ref}\n        className={cn(textFieldVariants.description({ size, error, disabled }), className)}\n      >\n        {children}\n      </p>\n    );\n  },\n) as TextFieldComponent['Description'];\n\nTextField.displayName = 'TextField';\nTextField.Label.displayName = 'TextField.Label';\nTextField.Input.displayName = 'TextField.Input';\nTextField.Description.displayName = 'TextField.Description';\n\nexport { TextField };\nexport type {\n  TextFieldComponent,\n  TextFieldRootProps,\n  TextFieldLabelProps,\n  TextFieldInputProps,\n  TextFieldDescriptionProps,\n};\n"]}