sellmate-design-system-react 0.1.3 → 0.1.4

package/dist/components/SForm/SForm.cjs

@@ -0,0 +1,91 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var FormContext = react.createContext(null);
+var SForm = react.forwardRef(function SForm2({ formClass, onSubmit, onValidationError, children, className, style }, ref) {
+  const formRef = react.useRef(null);
+  const fieldsRef = react.useRef(/* @__PURE__ */ new Set());
+  const register = react.useCallback((entry) => {
+    fieldsRef.current.add(entry);
+    return () => {
+      fieldsRef.current.delete(entry);
+    };
+  }, []);
+  const ctx = react.useMemo(() => ({ register }), [register]);
+  const orderByDom = react.useCallback((names) => {
+    const form = formRef.current;
+    if (!form || names.length < 2) return names;
+    const domOrder = /* @__PURE__ */ new Map();
+    form.querySelectorAll("[name],[data-name]").forEach((el, i) => {
+      const n = el.getAttribute("name") || el.getAttribute("data-name");
+      if (n && !domOrder.has(n)) domOrder.set(n, i);
+    });
+    return [...names].sort((a, b) => (domOrder.get(a) ?? Infinity) - (domOrder.get(b) ?? Infinity));
+  }, []);
+  const focusByName = react.useCallback((name) => {
+    const form = formRef.current;
+    if (!form || !name) return;
+    const host = form.querySelector(`[name="${CSS.escape(name)}"]`) ?? form.querySelector(`[data-name="${CSS.escape(name)}"]`);
+    if (!host) return;
+    const focusable = host.matches("input,textarea,select,button,[tabindex]") ? host : host.querySelector("input,textarea,select,button,[tabindex]");
+    focusable?.focus();
+    (focusable ?? host).scrollIntoView({ block: "nearest" });
+  }, []);
+  const runValidation = react.useCallback(() => {
+    let valid = true;
+    const invalidNames = [];
+    fieldsRef.current.forEach((f) => {
+      if (!f.validate()) {
+        valid = false;
+        if (f.name) invalidNames.push(f.name);
+      }
+    });
+    return { valid, names: orderByDom(invalidNames) };
+  }, [orderByDom]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      validate: () => runValidation().valid,
+      resetValidation: () => fieldsRef.current.forEach((f) => f.resetValidation()),
+      reset: () => fieldsRef.current.forEach((f) => f.resetValidation()),
+      focusFirstInvalid: () => {
+        const { names } = runValidation();
+        if (names.length > 0) focusByName(names[0]);
+      }
+    }),
+    [runValidation, focusByName]
+  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const { valid, names } = runValidation();
+    if (!valid) {
+      if (names.length > 0) focusByName(names[0]);
+      onValidationError?.({ names });
+      return;
+    }
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "form",
+    {
+      ref: formRef,
+      onSubmit: handleSubmit,
+      className: cn(formClass, className),
+      style,
+      noValidate: true,
+      children
+    }
+  ) });
+});
+
+exports.SForm = SForm;
+//# sourceMappingURL=SForm.cjs.map
+//# sourceMappingURL=SForm.cjs.map

package/dist/components/SForm/SForm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/form.ts","../../../src/components/SForm/SForm.tsx"],"names":["twMerge","clsx","createContext","forwardRef","SForm","useRef","useCallback","useMemo","useImperativeHandle","jsx"],"mappings":"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","file":"SForm.cjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { createContext, useContext, useEffect, useRef } from 'react';\n\n/** 유효성 규칙: 유효하면 true, 아니면 에러 메시지 문자열 반환 (sd types/form Rule 포팅) */\nexport type Rule = (value: unknown) => true | string;\n\n/** rules를 순서대로 실행해 첫 실패 메시지를 반환. 모두 통과하면 \"\" */\nexport function runRules(value: unknown, rules?: Rule[]): string {\n  if (!rules || rules.length === 0) return '';\n  for (const rule of rules) {\n    const result = rule(value ?? '');\n    if (result !== true) return typeof result === 'string' ? result : '유효하지 않은 값입니다.';\n  }\n  return '';\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// SForm 연동 — Context 기반 필드 등록 (sd-form 검증 서브시스템 포팅)\n// 각 rule-bearing 컨트롤이 useFormField로 자신을 등록하면, SForm이 submit 시\n// 등록된 모든 필드의 validate()를 실행해 하나라도 실패하면 제출을 막는다.\n// SForm 밖에서 쓰이면 context가 없어 no-op (form-agnostic 사용 유지).\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** SForm에 등록되는 필드 항목 */\nexport interface FormFieldEntry {\n  /** 폼 연동용 name (validationError names·focus 대상 식별) */\n  name: string;\n  /** 현재 값에 rules를 실행하고 에러 상태를 반영한 뒤 valid 여부 반환 */\n  validate: () => boolean;\n  /** 검증 에러 상태만 초기화 (값은 소비자 소유) */\n  resetValidation: () => void;\n}\n\nexport interface FormContextValue {\n  /** 필드를 등록하고 해제 함수를 반환 */\n  register: (entry: FormFieldEntry) => () => void;\n}\n\nexport const FormContext = createContext<FormContextValue | null>(null);\n\n/** 가장 가까운 SForm의 context (없으면 null) */\nexport function useFormContext(): FormContextValue | null {\n  return useContext(FormContext);\n}\n\n/**\n * 폼 필드 등록 훅. SForm 내부이면 등록되고, 밖이면 no-op.\n * validate/resetValidation은 항상 최신 클로저를 참조하도록 ref로 래핑한다.\n */\nexport function useFormField(field: {\n  name?: string;\n  validate: () => boolean;\n  resetValidation: () => void;\n}): void {\n  const ctx = useFormContext();\n  const cbRef = useRef(field);\n  cbRef.current = field;\n  const name = field.name ?? '';\n\n  useEffect(() => {\n    if (!ctx) return;\n    return ctx.register({\n      name,\n      validate: () => cbRef.current.validate(),\n      resetValidation: () => cbRef.current.resetValidation(),\n    });\n  }, [ctx, name]);\n}\n","'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type FormEvent,\n  type ReactNode,\n} from 'react';\nimport { cn } from '../../lib/cn';\nimport { FormContext, type FormContextValue, type FormFieldEntry } from '../../lib/form';\n\nexport interface SFormValidationError {\n  /** 검증에 실패한 필드 name 목록 (DOM 순서) */\n  names: string[];\n}\n\n/** ref로 노출되는 폼 제어 메서드 (sd-form @Method 대응) */\nexport interface SFormHandle {\n  /** 등록된 모든 필드를 검증하고 통과 여부를 반환 */\n  validate: () => boolean;\n  /** 모든 필드의 검증 상태만 초기화 (값은 소비자 소유) */\n  resetValidation: () => void;\n  /** resetValidation 별칭 — sd-form sdReset 대응. 값 리셋은 소비자(value/onChange) 책임 */\n  reset: () => void;\n  /** 첫 번째 실패 필드로 포커스 이동 */\n  focusFirstInvalid: () => void;\n}\n\nexport interface SFormProps {\n  /** form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) */\n  formClass?: string;\n  /** 모든 필드 검증 통과 후 발생 (sd-form sdSubmit 대응) */\n  onSubmit?: () => void;\n  /** 검증 실패 시 실패한 필드 name 목록 전달 (sd-form sdValidationError 대응) */\n  onValidationError?: (error: SFormValidationError) => void;\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * SForm — sd-form 포팅. 폼 안의 rule-bearing 컨트롤(useFormField로 등록)을 모아\n * submit 시 일괄 검증한다. 하나라도 실패하면 제출을 막고 첫 실패 필드에 포커스한 뒤\n * onValidationError를 발생시킨다. 값은 여전히 소비자 소유(form-agnostic 유지).\n */\nexport const SForm = forwardRef<SFormHandle, SFormProps>(function SForm(\n  { formClass, onSubmit, onValidationError, children, className, style },\n  ref,\n) {\n  const formRef = useRef<HTMLFormElement>(null);\n  const fieldsRef = useRef<Set<FormFieldEntry>>(new Set());\n\n  const register = useCallback((entry: FormFieldEntry) => {\n    fieldsRef.current.add(entry);\n    return () => {\n      fieldsRef.current.delete(entry);\n    };\n  }, []);\n\n  const ctx = useMemo<FormContextValue>(() => ({ register }), [register]);\n\n  /** 실패 필드 name들을 DOM 등장 순서로 정렬 (name / data-name 기준) */\n  const orderByDom = useCallback((names: string[]): string[] => {\n    const form = formRef.current;\n    if (!form || names.length < 2) return names;\n    const domOrder = new Map<string, number>();\n    form.querySelectorAll<HTMLElement>('[name],[data-name]').forEach((el, i) => {\n      const n = el.getAttribute('name') || el.getAttribute('data-name');\n      if (n && !domOrder.has(n)) domOrder.set(n, i);\n    });\n    return [...names].sort((a, b) => (domOrder.get(a) ?? Infinity) - (domOrder.get(b) ?? Infinity));\n  }, []);\n\n  const focusByName = useCallback((name: string) => {\n    const form = formRef.current;\n    if (!form || !name) return;\n    const host =\n      form.querySelector<HTMLElement>(`[name=\"${CSS.escape(name)}\"]`) ??\n      form.querySelector<HTMLElement>(`[data-name=\"${CSS.escape(name)}\"]`);\n    if (!host) return;\n    const focusable = host.matches('input,textarea,select,button,[tabindex]')\n      ? host\n      : host.querySelector<HTMLElement>('input,textarea,select,button,[tabindex]');\n    focusable?.focus();\n    (focusable ?? host).scrollIntoView({ block: 'nearest' });\n  }, []);\n\n  /**\n   * 등록된 모든 필드를 검증한다.\n   * - valid: 전체 통과 여부 (이름 없는 필드도 실패하면 false → 제출 차단)\n   * - names: 실패한 필드 중 name이 있는 것들 (DOM 순서, onValidationError용)\n   */\n  const runValidation = useCallback((): { valid: boolean; names: string[] } => {\n    let valid = true;\n    const invalidNames: string[] = [];\n    fieldsRef.current.forEach(f => {\n      if (!f.validate()) {\n        valid = false;\n        if (f.name) invalidNames.push(f.name);\n      }\n    });\n    return { valid, names: orderByDom(invalidNames) };\n  }, [orderByDom]);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      validate: () => runValidation().valid,\n      resetValidation: () => fieldsRef.current.forEach(f => f.resetValidation()),\n      reset: () => fieldsRef.current.forEach(f => f.resetValidation()),\n      focusFirstInvalid: () => {\n        const { names } = runValidation();\n        if (names.length > 0) focusByName(names[0]);\n      },\n    }),\n    [runValidation, focusByName],\n  );\n\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const { valid, names } = runValidation();\n    if (!valid) {\n      if (names.length > 0) focusByName(names[0]);\n      onValidationError?.({ names });\n      return;\n    }\n    onSubmit?.();\n  };\n\n  return (\n    <FormContext.Provider value={ctx}>\n      <form\n        ref={formRef}\n        onSubmit={handleSubmit}\n        className={cn(formClass, className)}\n        style={style}\n        noValidate\n      >\n        {children}\n      </form>\n    </FormContext.Provider>\n  );\n});\n"]}

package/dist/components/SForm/SForm.d.ts

@@ -0,0 +1,33 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface SFormValidationError {
+    /** 검증에 실패한 필드 name 목록 (DOM 순서) */
+    names: string[];
+}
+/** ref로 노출되는 폼 제어 메서드 (sd-form @Method 대응) */
+export interface SFormHandle {
+    /** 등록된 모든 필드를 검증하고 통과 여부를 반환 */
+    validate: () => boolean;
+    /** 모든 필드의 검증 상태만 초기화 (값은 소비자 소유) */
+    resetValidation: () => void;
+    /** resetValidation 별칭 — sd-form sdReset 대응. 값 리셋은 소비자(value/onChange) 책임 */
+    reset: () => void;
+    /** 첫 번째 실패 필드로 포커스 이동 */
+    focusFirstInvalid: () => void;
+}
+export interface SFormProps {
+    /** form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) */
+    formClass?: string;
+    /** 모든 필드 검증 통과 후 발생 (sd-form sdSubmit 대응) */
+    onSubmit?: () => void;
+    /** 검증 실패 시 실패한 필드 name 목록 전달 (sd-form sdValidationError 대응) */
+    onValidationError?: (error: SFormValidationError) => void;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * SForm — sd-form 포팅. 폼 안의 rule-bearing 컨트롤(useFormField로 등록)을 모아
+ * submit 시 일괄 검증한다. 하나라도 실패하면 제출을 막고 첫 실패 필드에 포커스한 뒤
+ * onValidationError를 발생시킨다. 값은 여전히 소비자 소유(form-agnostic 유지).
+ */
+export declare const SForm: import("react").ForwardRefExoticComponent<SFormProps & import("react").RefAttributes<SFormHandle>>;

package/dist/components/SForm/SForm.js

@@ -0,0 +1,89 @@
+"use client";
+import { createContext, forwardRef, useRef, useCallback, useMemo, useImperativeHandle } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var FormContext = createContext(null);
+var SForm = forwardRef(function SForm2({ formClass, onSubmit, onValidationError, children, className, style }, ref) {
+  const formRef = useRef(null);
+  const fieldsRef = useRef(/* @__PURE__ */ new Set());
+  const register = useCallback((entry) => {
+    fieldsRef.current.add(entry);
+    return () => {
+      fieldsRef.current.delete(entry);
+    };
+  }, []);
+  const ctx = useMemo(() => ({ register }), [register]);
+  const orderByDom = useCallback((names) => {
+    const form = formRef.current;
+    if (!form || names.length < 2) return names;
+    const domOrder = /* @__PURE__ */ new Map();
+    form.querySelectorAll("[name],[data-name]").forEach((el, i) => {
+      const n = el.getAttribute("name") || el.getAttribute("data-name");
+      if (n && !domOrder.has(n)) domOrder.set(n, i);
+    });
+    return [...names].sort((a, b) => (domOrder.get(a) ?? Infinity) - (domOrder.get(b) ?? Infinity));
+  }, []);
+  const focusByName = useCallback((name) => {
+    const form = formRef.current;
+    if (!form || !name) return;
+    const host = form.querySelector(`[name="${CSS.escape(name)}"]`) ?? form.querySelector(`[data-name="${CSS.escape(name)}"]`);
+    if (!host) return;
+    const focusable = host.matches("input,textarea,select,button,[tabindex]") ? host : host.querySelector("input,textarea,select,button,[tabindex]");
+    focusable?.focus();
+    (focusable ?? host).scrollIntoView({ block: "nearest" });
+  }, []);
+  const runValidation = useCallback(() => {
+    let valid = true;
+    const invalidNames = [];
+    fieldsRef.current.forEach((f) => {
+      if (!f.validate()) {
+        valid = false;
+        if (f.name) invalidNames.push(f.name);
+      }
+    });
+    return { valid, names: orderByDom(invalidNames) };
+  }, [orderByDom]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      validate: () => runValidation().valid,
+      resetValidation: () => fieldsRef.current.forEach((f) => f.resetValidation()),
+      reset: () => fieldsRef.current.forEach((f) => f.resetValidation()),
+      focusFirstInvalid: () => {
+        const { names } = runValidation();
+        if (names.length > 0) focusByName(names[0]);
+      }
+    }),
+    [runValidation, focusByName]
+  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const { valid, names } = runValidation();
+    if (!valid) {
+      if (names.length > 0) focusByName(names[0]);
+      onValidationError?.({ names });
+      return;
+    }
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      ref: formRef,
+      onSubmit: handleSubmit,
+      className: cn(formClass, className),
+      style,
+      noValidate: true,
+      children
+    }
+  ) });
+});
+
+export { SForm };
+//# sourceMappingURL=SForm.js.map
+//# sourceMappingURL=SForm.js.map

package/dist/components/SForm/SForm.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/cn.ts","../../../src/lib/form.ts","../../../src/components/SForm/SForm.tsx"],"names":["SForm","useRef"],"mappings":"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","file":"SForm.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * className 병합 유틸.\n * clsx로 조건부 클래스를 합치고, tailwind-merge로 Tailwind 클래스 충돌을 해소한다.\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","import { createContext, useContext, useEffect, useRef } from 'react';\n\n/** 유효성 규칙: 유효하면 true, 아니면 에러 메시지 문자열 반환 (sd types/form Rule 포팅) */\nexport type Rule = (value: unknown) => true | string;\n\n/** rules를 순서대로 실행해 첫 실패 메시지를 반환. 모두 통과하면 \"\" */\nexport function runRules(value: unknown, rules?: Rule[]): string {\n  if (!rules || rules.length === 0) return '';\n  for (const rule of rules) {\n    const result = rule(value ?? '');\n    if (result !== true) return typeof result === 'string' ? result : '유효하지 않은 값입니다.';\n  }\n  return '';\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// SForm 연동 — Context 기반 필드 등록 (sd-form 검증 서브시스템 포팅)\n// 각 rule-bearing 컨트롤이 useFormField로 자신을 등록하면, SForm이 submit 시\n// 등록된 모든 필드의 validate()를 실행해 하나라도 실패하면 제출을 막는다.\n// SForm 밖에서 쓰이면 context가 없어 no-op (form-agnostic 사용 유지).\n// ─────────────────────────────────────────────────────────────────────────────\n\n/** SForm에 등록되는 필드 항목 */\nexport interface FormFieldEntry {\n  /** 폼 연동용 name (validationError names·focus 대상 식별) */\n  name: string;\n  /** 현재 값에 rules를 실행하고 에러 상태를 반영한 뒤 valid 여부 반환 */\n  validate: () => boolean;\n  /** 검증 에러 상태만 초기화 (값은 소비자 소유) */\n  resetValidation: () => void;\n}\n\nexport interface FormContextValue {\n  /** 필드를 등록하고 해제 함수를 반환 */\n  register: (entry: FormFieldEntry) => () => void;\n}\n\nexport const FormContext = createContext<FormContextValue | null>(null);\n\n/** 가장 가까운 SForm의 context (없으면 null) */\nexport function useFormContext(): FormContextValue | null {\n  return useContext(FormContext);\n}\n\n/**\n * 폼 필드 등록 훅. SForm 내부이면 등록되고, 밖이면 no-op.\n * validate/resetValidation은 항상 최신 클로저를 참조하도록 ref로 래핑한다.\n */\nexport function useFormField(field: {\n  name?: string;\n  validate: () => boolean;\n  resetValidation: () => void;\n}): void {\n  const ctx = useFormContext();\n  const cbRef = useRef(field);\n  cbRef.current = field;\n  const name = field.name ?? '';\n\n  useEffect(() => {\n    if (!ctx) return;\n    return ctx.register({\n      name,\n      validate: () => cbRef.current.validate(),\n      resetValidation: () => cbRef.current.resetValidation(),\n    });\n  }, [ctx, name]);\n}\n","'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type CSSProperties,\n  type FormEvent,\n  type ReactNode,\n} from 'react';\nimport { cn } from '../../lib/cn';\nimport { FormContext, type FormContextValue, type FormFieldEntry } from '../../lib/form';\n\nexport interface SFormValidationError {\n  /** 검증에 실패한 필드 name 목록 (DOM 순서) */\n  names: string[];\n}\n\n/** ref로 노출되는 폼 제어 메서드 (sd-form @Method 대응) */\nexport interface SFormHandle {\n  /** 등록된 모든 필드를 검증하고 통과 여부를 반환 */\n  validate: () => boolean;\n  /** 모든 필드의 검증 상태만 초기화 (값은 소비자 소유) */\n  resetValidation: () => void;\n  /** resetValidation 별칭 — sd-form sdReset 대응. 값 리셋은 소비자(value/onChange) 책임 */\n  reset: () => void;\n  /** 첫 번째 실패 필드로 포커스 이동 */\n  focusFirstInvalid: () => void;\n}\n\nexport interface SFormProps {\n  /** form 엘리먼트에 추가할 클래스 (sd-form formClass 대응) */\n  formClass?: string;\n  /** 모든 필드 검증 통과 후 발생 (sd-form sdSubmit 대응) */\n  onSubmit?: () => void;\n  /** 검증 실패 시 실패한 필드 name 목록 전달 (sd-form sdValidationError 대응) */\n  onValidationError?: (error: SFormValidationError) => void;\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * SForm — sd-form 포팅. 폼 안의 rule-bearing 컨트롤(useFormField로 등록)을 모아\n * submit 시 일괄 검증한다. 하나라도 실패하면 제출을 막고 첫 실패 필드에 포커스한 뒤\n * onValidationError를 발생시킨다. 값은 여전히 소비자 소유(form-agnostic 유지).\n */\nexport const SForm = forwardRef<SFormHandle, SFormProps>(function SForm(\n  { formClass, onSubmit, onValidationError, children, className, style },\n  ref,\n) {\n  const formRef = useRef<HTMLFormElement>(null);\n  const fieldsRef = useRef<Set<FormFieldEntry>>(new Set());\n\n  const register = useCallback((entry: FormFieldEntry) => {\n    fieldsRef.current.add(entry);\n    return () => {\n      fieldsRef.current.delete(entry);\n    };\n  }, []);\n\n  const ctx = useMemo<FormContextValue>(() => ({ register }), [register]);\n\n  /** 실패 필드 name들을 DOM 등장 순서로 정렬 (name / data-name 기준) */\n  const orderByDom = useCallback((names: string[]): string[] => {\n    const form = formRef.current;\n    if (!form || names.length < 2) return names;\n    const domOrder = new Map<string, number>();\n    form.querySelectorAll<HTMLElement>('[name],[data-name]').forEach((el, i) => {\n      const n = el.getAttribute('name') || el.getAttribute('data-name');\n      if (n && !domOrder.has(n)) domOrder.set(n, i);\n    });\n    return [...names].sort((a, b) => (domOrder.get(a) ?? Infinity) - (domOrder.get(b) ?? Infinity));\n  }, []);\n\n  const focusByName = useCallback((name: string) => {\n    const form = formRef.current;\n    if (!form || !name) return;\n    const host =\n      form.querySelector<HTMLElement>(`[name=\"${CSS.escape(name)}\"]`) ??\n      form.querySelector<HTMLElement>(`[data-name=\"${CSS.escape(name)}\"]`);\n    if (!host) return;\n    const focusable = host.matches('input,textarea,select,button,[tabindex]')\n      ? host\n      : host.querySelector<HTMLElement>('input,textarea,select,button,[tabindex]');\n    focusable?.focus();\n    (focusable ?? host).scrollIntoView({ block: 'nearest' });\n  }, []);\n\n  /**\n   * 등록된 모든 필드를 검증한다.\n   * - valid: 전체 통과 여부 (이름 없는 필드도 실패하면 false → 제출 차단)\n   * - names: 실패한 필드 중 name이 있는 것들 (DOM 순서, onValidationError용)\n   */\n  const runValidation = useCallback((): { valid: boolean; names: string[] } => {\n    let valid = true;\n    const invalidNames: string[] = [];\n    fieldsRef.current.forEach(f => {\n      if (!f.validate()) {\n        valid = false;\n        if (f.name) invalidNames.push(f.name);\n      }\n    });\n    return { valid, names: orderByDom(invalidNames) };\n  }, [orderByDom]);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      validate: () => runValidation().valid,\n      resetValidation: () => fieldsRef.current.forEach(f => f.resetValidation()),\n      reset: () => fieldsRef.current.forEach(f => f.resetValidation()),\n      focusFirstInvalid: () => {\n        const { names } = runValidation();\n        if (names.length > 0) focusByName(names[0]);\n      },\n    }),\n    [runValidation, focusByName],\n  );\n\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const { valid, names } = runValidation();\n    if (!valid) {\n      if (names.length > 0) focusByName(names[0]);\n      onValidationError?.({ names });\n      return;\n    }\n    onSubmit?.();\n  };\n\n  return (\n    <FormContext.Provider value={ctx}>\n      <form\n        ref={formRef}\n        onSubmit={handleSubmit}\n        className={cn(formClass, className)}\n        style={style}\n        noValidate\n      >\n        {children}\n      </form>\n    </FormContext.Provider>\n  );\n});\n"]}

package/dist/components/SForm/index.d.ts

@@ -0,0 +1 @@
+export { SForm, type SFormProps, type SFormHandle, type SFormValidationError } from './SForm';

package/dist/components/SGhostButton/SGhostButton.cjs

@@ -35,6 +35,134 @@ PortalContainerContext.Provider;
 function usePortalContainer() {
   return react.useContext(PortalContainerContext) ?? void 0;
 }
+
+// src/lib/color.ts
+var COLOR_KEYS = [
+  "white",
+  "black",
+  "grey_10",
+  "grey_20",
+  "grey_25",
+  "grey_30",
+  "grey_35",
+  "grey_45",
+  "grey_50",
+  "grey_55",
+  "grey_60",
+  "grey_65",
+  "grey_70",
+  "grey_80",
+  "grey_85",
+  "grey_90",
+  "grey_95",
+  "grey_05",
+  "red_15",
+  "red_20",
+  "red_30",
+  "red_45",
+  "red_60",
+  "red_70",
+  "red_75",
+  "red_80",
+  "red_85",
+  "red_90",
+  "red_95",
+  "red_99",
+  "orange_10",
+  "orange_20",
+  "orange_35",
+  "orange_45",
+  "orange_55",
+  "orange_60",
+  "orange_65",
+  "orange_75",
+  "orange_85",
+  "orange_90",
+  "orange_95",
+  "orange_99",
+  "yellow_10",
+  "yellow_20",
+  "yellow_25",
+  "yellow_30",
+  "yellow_40",
+  "yellow_45",
+  "yellow_50",
+  "yellow_60",
+  "yellow_70",
+  "yellow_80",
+  "yellow_90",
+  "yellow_95",
+  "olive_10",
+  "olive_15",
+  "olive_20",
+  "olive_30",
+  "olive_45",
+  "olive_55",
+  "olive_65",
+  "olive_70",
+  "olive_80",
+  "olive_90",
+  "olive_95",
+  "olive_05",
+  "green_15",
+  "green_25",
+  "green_45",
+  "green_55",
+  "green_65",
+  "green_70",
+  "green_75",
+  "green_80",
+  "green_85",
+  "green_90",
+  "green_95",
+  "green_99",
+  "steelblue_10",
+  "steelblue_25",
+  "steelblue_45",
+  "steelblue_60",
+  "steelblue_65",
+  "steelblue_70",
+  "steelblue_75",
+  "steelblue_80",
+  "steelblue_85",
+  "steelblue_90",
+  "steelblue_95",
+  "steelblue_99",
+  "oceanblue_15",
+  "oceanblue_25",
+  "oceanblue_50",
+  "oceanblue_60",
+  "oceanblue_65",
+  "oceanblue_70",
+  "oceanblue_75",
+  "oceanblue_80",
+  "oceanblue_85",
+  "oceanblue_90",
+  "oceanblue_95",
+  "oceanblue_99",
+  "brilliantblue_10",
+  "brilliantblue_20",
+  "brilliantblue_25",
+  "brilliantblue_40",
+  "brilliantblue_50",
+  "brilliantblue_60",
+  "brilliantblue_70",
+  "brilliantblue_75",
+  "brilliantblue_80",
+  "brilliantblue_85",
+  "brilliantblue_90",
+  "brilliantblue_95",
+  "brilliantblue_99",
+  "brilliantblue_05"
+];
+var KEY_SET = new Set(COLOR_KEYS);
+function isColorKey(input) {
+  return KEY_SET.has(input);
+}
+function resolveColor(input, fallback) {
+  if (input === null || input === void 0 || input === "") return fallback;
+  return isColorKey(input) ? `var(--color-${input.replace(/_/g, "-")})` : input;
+}
 var Icon_add = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2734,7 +2862,7 @@ var SIcon = react.forwardRef(function SIcon2({ name, size = 24, color, rotate, l
     {
       ref,
       className: cn("inline-flex items-center justify-center", rotateClass, className),
-      style: { color, ...style },
+      style: { color: resolveColor(color), ...style },
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,