sellmate-design-system-react 0.1.3 → 0.1.4

package/dist/lib/color.cjs

@@ -0,0 +1,135 @@
+'use strict';
+
+// 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;
+}
+
+exports.COLOR_KEYS = COLOR_KEYS;
+exports.isColorKey = isColorKey;
+exports.resolveColor = resolveColor;
+//# sourceMappingURL=color.cjs.map
+//# sourceMappingURL=color.cjs.map

package/dist/lib/color.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/color.ts"],"names":[],"mappings":"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","file":"color.cjs","sourcesContent":["/**\n * 컬러 팔레트 키 해석 유틸 (stencil `utils/color` 포팅).\n *\n * 컴포넌트의 `color` prop 은 팔레트 키(`grey_65`, `red_95` …)와\n * 임의의 CSS 색상 값(`#FF0000`, `rgb(...)`, `var(--foo)` …)을 모두 받는다.\n * 팔레트 키가 들어오면 대응하는 `var(--color-*)` 로 변환하고,\n * 그 외의 값은 그대로 통과시킨다.\n *\n * 팔레트 원본은 theme.css 의 `--color-*` 프리미티브(토큰 자동 생성) 다.\n * 키 목록은 그와 1:1 로 대응하며, 값은 var() 참조로 단일 소스를 유지한다.\n */\n\n/** theme.css 의 `--color-*` 프리미티브와 1:1 대응하는 팔레트 키 */\nexport const COLOR_KEYS = [\n  'white',\n  'black',\n  'grey_10',\n  'grey_20',\n  'grey_25',\n  'grey_30',\n  'grey_35',\n  'grey_45',\n  'grey_50',\n  'grey_55',\n  'grey_60',\n  'grey_65',\n  'grey_70',\n  'grey_80',\n  'grey_85',\n  'grey_90',\n  'grey_95',\n  'grey_05',\n  'red_15',\n  'red_20',\n  'red_30',\n  'red_45',\n  'red_60',\n  'red_70',\n  'red_75',\n  'red_80',\n  'red_85',\n  'red_90',\n  'red_95',\n  'red_99',\n  'orange_10',\n  'orange_20',\n  'orange_35',\n  'orange_45',\n  'orange_55',\n  'orange_60',\n  'orange_65',\n  'orange_75',\n  'orange_85',\n  'orange_90',\n  'orange_95',\n  'orange_99',\n  'yellow_10',\n  'yellow_20',\n  'yellow_25',\n  'yellow_30',\n  'yellow_40',\n  'yellow_45',\n  'yellow_50',\n  'yellow_60',\n  'yellow_70',\n  'yellow_80',\n  'yellow_90',\n  'yellow_95',\n  'olive_10',\n  'olive_15',\n  'olive_20',\n  'olive_30',\n  'olive_45',\n  'olive_55',\n  'olive_65',\n  'olive_70',\n  'olive_80',\n  'olive_90',\n  'olive_95',\n  'olive_05',\n  'green_15',\n  'green_25',\n  'green_45',\n  'green_55',\n  'green_65',\n  'green_70',\n  'green_75',\n  'green_80',\n  'green_85',\n  'green_90',\n  'green_95',\n  'green_99',\n  'steelblue_10',\n  'steelblue_25',\n  'steelblue_45',\n  'steelblue_60',\n  'steelblue_65',\n  'steelblue_70',\n  'steelblue_75',\n  'steelblue_80',\n  'steelblue_85',\n  'steelblue_90',\n  'steelblue_95',\n  'steelblue_99',\n  'oceanblue_15',\n  'oceanblue_25',\n  'oceanblue_50',\n  'oceanblue_60',\n  'oceanblue_65',\n  'oceanblue_70',\n  'oceanblue_75',\n  'oceanblue_80',\n  'oceanblue_85',\n  'oceanblue_90',\n  'oceanblue_95',\n  'oceanblue_99',\n  'brilliantblue_10',\n  'brilliantblue_20',\n  'brilliantblue_25',\n  'brilliantblue_40',\n  'brilliantblue_50',\n  'brilliantblue_60',\n  'brilliantblue_70',\n  'brilliantblue_75',\n  'brilliantblue_80',\n  'brilliantblue_85',\n  'brilliantblue_90',\n  'brilliantblue_95',\n  'brilliantblue_99',\n  'brilliantblue_05',\n] as const;\n\n/** 팔레트 키 유니온 (`'grey_65' | 'red_95' | ...`) */\nexport type SColorKey = (typeof COLOR_KEYS)[number];\n\n/**\n * `color` prop 타입. 팔레트 키 자동완성을 제공하면서 임의 CSS 색상 문자열도 허용한다.\n * `(string & {})` 는 유니온 리터럴 자동완성을 유지하기 위한 관용 표현이다.\n */\nexport type SColor = SColorKey | (string & {});\n\nconst KEY_SET = new Set<string>(COLOR_KEYS);\n\n/** 문자열이 팔레트 키인지 판별하는 타입 가드 */\nexport function isColorKey(input: string): input is SColorKey {\n  return KEY_SET.has(input);\n}\n\n/**\n * 팔레트 키면 대응하는 `var(--color-*)` 로 변환하고, 그 외 값은 원문 그대로 반환한다.\n * 값이 비어 있으면 `fallback`(기본 `undefined`) 을 반환한다.\n * (SIcon 처럼 미지정 시 currentColor 를 상속해야 하는 곳을 위해 fallback 기본값은 undefined)\n */\nexport function resolveColor(\n  input: string | undefined | null,\n  fallback?: string,\n): string | undefined {\n  if (input === null || input === undefined || input === '') return fallback;\n  return isColorKey(input) ? `var(--color-${input.replace(/_/g, '-')})` : input;\n}\n"]}

package/dist/lib/color.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 컬러 팔레트 키 해석 유틸 (stencil `utils/color` 포팅).
+ *
+ * 컴포넌트의 `color` prop 은 팔레트 키(`grey_65`, `red_95` …)와
+ * 임의의 CSS 색상 값(`#FF0000`, `rgb(...)`, `var(--foo)` …)을 모두 받는다.
+ * 팔레트 키가 들어오면 대응하는 `var(--color-*)` 로 변환하고,
+ * 그 외의 값은 그대로 통과시킨다.
+ *
+ * 팔레트 원본은 theme.css 의 `--color-*` 프리미티브(토큰 자동 생성) 다.
+ * 키 목록은 그와 1:1 로 대응하며, 값은 var() 참조로 단일 소스를 유지한다.
+ */
+/** theme.css 의 `--color-*` 프리미티브와 1:1 대응하는 팔레트 키 */
+export declare const COLOR_KEYS: readonly ["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"];
+/** 팔레트 키 유니온 (`'grey_65' | 'red_95' | ...`) */
+export type SColorKey = (typeof COLOR_KEYS)[number];
+/**
+ * `color` prop 타입. 팔레트 키 자동완성을 제공하면서 임의 CSS 색상 문자열도 허용한다.
+ * `(string & {})` 는 유니온 리터럴 자동완성을 유지하기 위한 관용 표현이다.
+ */
+export type SColor = SColorKey | (string & {});
+/** 문자열이 팔레트 키인지 판별하는 타입 가드 */
+export declare function isColorKey(input: string): input is SColorKey;
+/**
+ * 팔레트 키면 대응하는 `var(--color-*)` 로 변환하고, 그 외 값은 원문 그대로 반환한다.
+ * 값이 비어 있으면 `fallback`(기본 `undefined`) 을 반환한다.
+ * (SIcon 처럼 미지정 시 currentColor 를 상속해야 하는 곳을 위해 fallback 기본값은 undefined)
+ */
+export declare function resolveColor(input: string | undefined | null, fallback?: string): string | undefined;

package/dist/lib/color.js

@@ -0,0 +1,131 @@
+// 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;
+}
+
+export { COLOR_KEYS, isColorKey, resolveColor };
+//# sourceMappingURL=color.js.map
+//# sourceMappingURL=color.js.map

package/dist/lib/color.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/color.ts"],"names":[],"mappings":"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","file":"color.js","sourcesContent":["/**\n * 컬러 팔레트 키 해석 유틸 (stencil `utils/color` 포팅).\n *\n * 컴포넌트의 `color` prop 은 팔레트 키(`grey_65`, `red_95` …)와\n * 임의의 CSS 색상 값(`#FF0000`, `rgb(...)`, `var(--foo)` …)을 모두 받는다.\n * 팔레트 키가 들어오면 대응하는 `var(--color-*)` 로 변환하고,\n * 그 외의 값은 그대로 통과시킨다.\n *\n * 팔레트 원본은 theme.css 의 `--color-*` 프리미티브(토큰 자동 생성) 다.\n * 키 목록은 그와 1:1 로 대응하며, 값은 var() 참조로 단일 소스를 유지한다.\n */\n\n/** theme.css 의 `--color-*` 프리미티브와 1:1 대응하는 팔레트 키 */\nexport const COLOR_KEYS = [\n  'white',\n  'black',\n  'grey_10',\n  'grey_20',\n  'grey_25',\n  'grey_30',\n  'grey_35',\n  'grey_45',\n  'grey_50',\n  'grey_55',\n  'grey_60',\n  'grey_65',\n  'grey_70',\n  'grey_80',\n  'grey_85',\n  'grey_90',\n  'grey_95',\n  'grey_05',\n  'red_15',\n  'red_20',\n  'red_30',\n  'red_45',\n  'red_60',\n  'red_70',\n  'red_75',\n  'red_80',\n  'red_85',\n  'red_90',\n  'red_95',\n  'red_99',\n  'orange_10',\n  'orange_20',\n  'orange_35',\n  'orange_45',\n  'orange_55',\n  'orange_60',\n  'orange_65',\n  'orange_75',\n  'orange_85',\n  'orange_90',\n  'orange_95',\n  'orange_99',\n  'yellow_10',\n  'yellow_20',\n  'yellow_25',\n  'yellow_30',\n  'yellow_40',\n  'yellow_45',\n  'yellow_50',\n  'yellow_60',\n  'yellow_70',\n  'yellow_80',\n  'yellow_90',\n  'yellow_95',\n  'olive_10',\n  'olive_15',\n  'olive_20',\n  'olive_30',\n  'olive_45',\n  'olive_55',\n  'olive_65',\n  'olive_70',\n  'olive_80',\n  'olive_90',\n  'olive_95',\n  'olive_05',\n  'green_15',\n  'green_25',\n  'green_45',\n  'green_55',\n  'green_65',\n  'green_70',\n  'green_75',\n  'green_80',\n  'green_85',\n  'green_90',\n  'green_95',\n  'green_99',\n  'steelblue_10',\n  'steelblue_25',\n  'steelblue_45',\n  'steelblue_60',\n  'steelblue_65',\n  'steelblue_70',\n  'steelblue_75',\n  'steelblue_80',\n  'steelblue_85',\n  'steelblue_90',\n  'steelblue_95',\n  'steelblue_99',\n  'oceanblue_15',\n  'oceanblue_25',\n  'oceanblue_50',\n  'oceanblue_60',\n  'oceanblue_65',\n  'oceanblue_70',\n  'oceanblue_75',\n  'oceanblue_80',\n  'oceanblue_85',\n  'oceanblue_90',\n  'oceanblue_95',\n  'oceanblue_99',\n  'brilliantblue_10',\n  'brilliantblue_20',\n  'brilliantblue_25',\n  'brilliantblue_40',\n  'brilliantblue_50',\n  'brilliantblue_60',\n  'brilliantblue_70',\n  'brilliantblue_75',\n  'brilliantblue_80',\n  'brilliantblue_85',\n  'brilliantblue_90',\n  'brilliantblue_95',\n  'brilliantblue_99',\n  'brilliantblue_05',\n] as const;\n\n/** 팔레트 키 유니온 (`'grey_65' | 'red_95' | ...`) */\nexport type SColorKey = (typeof COLOR_KEYS)[number];\n\n/**\n * `color` prop 타입. 팔레트 키 자동완성을 제공하면서 임의 CSS 색상 문자열도 허용한다.\n * `(string & {})` 는 유니온 리터럴 자동완성을 유지하기 위한 관용 표현이다.\n */\nexport type SColor = SColorKey | (string & {});\n\nconst KEY_SET = new Set<string>(COLOR_KEYS);\n\n/** 문자열이 팔레트 키인지 판별하는 타입 가드 */\nexport function isColorKey(input: string): input is SColorKey {\n  return KEY_SET.has(input);\n}\n\n/**\n * 팔레트 키면 대응하는 `var(--color-*)` 로 변환하고, 그 외 값은 원문 그대로 반환한다.\n * 값이 비어 있으면 `fallback`(기본 `undefined`) 을 반환한다.\n * (SIcon 처럼 미지정 시 currentColor 를 상속해야 하는 곳을 위해 fallback 기본값은 undefined)\n */\nexport function resolveColor(\n  input: string | undefined | null,\n  fallback?: string,\n): string | undefined {\n  if (input === null || input === undefined || input === '') return fallback;\n  return isColorKey(input) ? `var(--color-${input.replace(/_/g, '-')})` : input;\n}\n"]}

package/dist/lib/form.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+var react = require('react');
+
 // src/lib/form.ts
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
@@ -9,7 +11,28 @@ function runRules(value, rules) {
   }
   return "";
 }
+var FormContext = react.createContext(null);
+function useFormContext() {
+  return react.useContext(FormContext);
+}
+function useFormField(field) {
+  const ctx = useFormContext();
+  const cbRef = react.useRef(field);
+  cbRef.current = field;
+  const name = field.name ?? "";
+  react.useEffect(() => {
+    if (!ctx) return;
+    return ctx.register({
+      name,
+      validate: () => cbRef.current.validate(),
+      resetValidation: () => cbRef.current.resetValidation()
+    });
+  }, [ctx, name]);
+}
 
+exports.FormContext = FormContext;
 exports.runRules = runRules;
+exports.useFormContext = useFormContext;
+exports.useFormField = useFormField;
 //# sourceMappingURL=form.cjs.map
 //# sourceMappingURL=form.cjs.map

package/dist/lib/form.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/form.ts"],"names":[],"mappings":";;;AAIO,SAAS,QAAA,CAAS,OAAgB,KAAA,EAAwB;AAC/D,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,MAAA,KAAW,GAAG,OAAO,EAAA;AACzC,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,KAAA,IAAS,EAAE,CAAA;AAC/B,IAAA,IAAI,WAAW,IAAA,EAAM,OAAO,OAAO,MAAA,KAAW,WAAW,MAAA,GAAS,iEAAA;AAAA,EACpE;AACA,EAAA,OAAO,EAAA;AACT","file":"form.cjs","sourcesContent":["/** 유효성 규칙: 유효하면 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"]}
+{"version":3,"sources":["../../src/lib/form.ts"],"names":["createContext","useContext","useRef","useEffect"],"mappings":";;;;;AAMO,SAAS,QAAA,CAAS,OAAgB,KAAA,EAAwB;AAC/D,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,MAAA,KAAW,GAAG,OAAO,EAAA;AACzC,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,KAAA,IAAS,EAAE,CAAA;AAC/B,IAAA,IAAI,WAAW,IAAA,EAAM,OAAO,OAAO,MAAA,KAAW,WAAW,MAAA,GAAS,iEAAA;AAAA,EACpE;AACA,EAAA,OAAO,EAAA;AACT;AAwBO,IAAM,WAAA,GAAcA,oBAAuC,IAAI;AAG/D,SAAS,cAAA,GAA0C;AACxD,EAAA,OAAOC,iBAAW,WAAW,CAAA;AAC/B;AAMO,SAAS,aAAa,KAAA,EAIpB;AACP,EAAA,MAAM,MAAM,cAAA,EAAe;AAC3B,EAAA,MAAM,KAAA,GAAQC,aAAO,KAAK,CAAA;AAC1B,EAAA,KAAA,CAAM,OAAA,GAAU,KAAA;AAChB,EAAA,MAAM,IAAA,GAAO,MAAM,IAAA,IAAQ,EAAA;AAE3B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,GAAA,EAAK;AACV,IAAA,OAAO,IAAI,QAAA,CAAS;AAAA,MAClB,IAAA;AAAA,MACA,QAAA,EAAU,MAAM,KAAA,CAAM,OAAA,CAAQ,QAAA,EAAS;AAAA,MACvC,eAAA,EAAiB,MAAM,KAAA,CAAM,OAAA,CAAQ,eAAA;AAAgB,KACtD,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,GAAA,EAAK,IAAI,CAAC,CAAA;AAChB","file":"form.cjs","sourcesContent":["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"]}

package/dist/lib/form.d.ts

@@ -2,3 +2,28 @@
 export type Rule = (value: unknown) => true | string;
 /** rules를 순서대로 실행해 첫 실패 메시지를 반환. 모두 통과하면 "" */
 export declare function runRules(value: unknown, rules?: Rule[]): string;
+/** SForm에 등록되는 필드 항목 */
+export interface FormFieldEntry {
+    /** 폼 연동용 name (validationError names·focus 대상 식별) */
+    name: string;
+    /** 현재 값에 rules를 실행하고 에러 상태를 반영한 뒤 valid 여부 반환 */
+    validate: () => boolean;
+    /** 검증 에러 상태만 초기화 (값은 소비자 소유) */
+    resetValidation: () => void;
+}
+export interface FormContextValue {
+    /** 필드를 등록하고 해제 함수를 반환 */
+    register: (entry: FormFieldEntry) => () => void;
+}
+export declare const FormContext: import("react").Context<FormContextValue | null>;
+/** 가장 가까운 SForm의 context (없으면 null) */
+export declare function useFormContext(): FormContextValue | null;
+/**
+ * 폼 필드 등록 훅. SForm 내부이면 등록되고, 밖이면 no-op.
+ * validate/resetValidation은 항상 최신 클로저를 참조하도록 ref로 래핑한다.
+ */
+export declare function useFormField(field: {
+    name?: string;
+    validate: () => boolean;
+    resetValidation: () => void;
+}): void;

package/dist/lib/form.js

@@ -1,3 +1,5 @@
+import { createContext, useContext, useRef, useEffect } from 'react';
+
 // src/lib/form.ts
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
@@ -7,7 +9,25 @@ function runRules(value, rules) {
   }
   return "";
 }
+var FormContext = createContext(null);
+function useFormContext() {
+  return useContext(FormContext);
+}
+function useFormField(field) {
+  const ctx = useFormContext();
+  const cbRef = useRef(field);
+  cbRef.current = field;
+  const name = field.name ?? "";
+  useEffect(() => {
+    if (!ctx) return;
+    return ctx.register({
+      name,
+      validate: () => cbRef.current.validate(),
+      resetValidation: () => cbRef.current.resetValidation()
+    });
+  }, [ctx, name]);
+}
 
-export { runRules };
+export { FormContext, runRules, useFormContext, useFormField };
 //# sourceMappingURL=form.js.map
 //# sourceMappingURL=form.js.map

package/dist/lib/form.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/form.ts"],"names":[],"mappings":";AAIO,SAAS,QAAA,CAAS,OAAgB,KAAA,EAAwB;AAC/D,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,MAAA,KAAW,GAAG,OAAO,EAAA;AACzC,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,KAAA,IAAS,EAAE,CAAA;AAC/B,IAAA,IAAI,WAAW,IAAA,EAAM,OAAO,OAAO,MAAA,KAAW,WAAW,MAAA,GAAS,iEAAA;AAAA,EACpE;AACA,EAAA,OAAO,EAAA;AACT","file":"form.js","sourcesContent":["/** 유효성 규칙: 유효하면 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"]}
+{"version":3,"sources":["../../src/lib/form.ts"],"names":[],"mappings":";;;AAMO,SAAS,QAAA,CAAS,OAAgB,KAAA,EAAwB;AAC/D,EAAA,IAAI,CAAC,KAAA,IAAS,KAAA,CAAM,MAAA,KAAW,GAAG,OAAO,EAAA;AACzC,EAAA,KAAA,MAAW,QAAQ,KAAA,EAAO;AACxB,IAAA,MAAM,MAAA,GAAS,IAAA,CAAK,KAAA,IAAS,EAAE,CAAA;AAC/B,IAAA,IAAI,WAAW,IAAA,EAAM,OAAO,OAAO,MAAA,KAAW,WAAW,MAAA,GAAS,iEAAA;AAAA,EACpE;AACA,EAAA,OAAO,EAAA;AACT;AAwBO,IAAM,WAAA,GAAc,cAAuC,IAAI;AAG/D,SAAS,cAAA,GAA0C;AACxD,EAAA,OAAO,WAAW,WAAW,CAAA;AAC/B;AAMO,SAAS,aAAa,KAAA,EAIpB;AACP,EAAA,MAAM,MAAM,cAAA,EAAe;AAC3B,EAAA,MAAM,KAAA,GAAQ,OAAO,KAAK,CAAA;AAC1B,EAAA,KAAA,CAAM,OAAA,GAAU,KAAA;AAChB,EAAA,MAAM,IAAA,GAAO,MAAM,IAAA,IAAQ,EAAA;AAE3B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,GAAA,EAAK;AACV,IAAA,OAAO,IAAI,QAAA,CAAS;AAAA,MAClB,IAAA;AAAA,MACA,QAAA,EAAU,MAAM,KAAA,CAAM,OAAA,CAAQ,QAAA,EAAS;AAAA,MACvC,eAAA,EAAiB,MAAM,KAAA,CAAM,OAAA,CAAQ,eAAA;AAAgB,KACtD,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,GAAA,EAAK,IAAI,CAAC,CAAA;AAChB","file":"form.js","sourcesContent":["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"]}

package/dist/styles.css

@@ -7,6 +7,10 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-green-50: oklch(98.2% 0.018 155.826);
+    --color-green-700: oklch(52.7% 0.154 150.069);
     --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-400: oklch(70.7% 0.022 261.325);
@@ -592,6 +596,9 @@
   .max-w-\[400px\] {
     max-width: 400px;
   }
+  .max-w-\[420px\] {
+    max-width: 420px;
+  }
   .max-w-full {
     max-width: 100%;
   }
@@ -751,6 +758,9 @@
   .justify-start {
     justify-content: flex-start;
   }
+  .gap-8 {
+    gap: var(--spacing-8);
+  }
   .gap-12 {
     gap: var(--spacing-12);
   }
@@ -1170,6 +1180,12 @@
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
+  .bg-green-50 {
+    background-color: var(--color-green-50);
+  }
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1206,6 +1222,9 @@
   .px-8 {
     padding-inline: var(--spacing-8);
   }
+  .px-12 {
+    padding-inline: var(--spacing-12);
+  }
   .px-16 {
     padding-inline: var(--spacing-16);
   }
@@ -1554,12 +1573,18 @@
   .text-gray-900 {
     color: var(--color-gray-900);
   }
+  .text-green-700 {
+    color: var(--color-green-700);
+  }
   .text-green-strong {
     color: var(--color-green-strong);
   }
   .text-inherit {
     color: inherit;
   }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
   .text-red-strong {
     color: var(--color-red-strong);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [