sellmate-design-system-react 0.1.3 → 0.1.5

package/dist/components/STable/STable.d.ts

@@ -1,4 +1,5 @@
 import { type CSSProperties, type ReactNode } from 'react';
+import { type SColor } from '../../lib/color';
 import { type SIconName } from '../SIcon';
 import { type SSelectOption } from '../SSelect';
 export type SRow = Record<string, any>;
@@ -18,7 +19,8 @@ export interface STableColumn {
     format?: (value: any, row: SRow) => string;
     visible?: boolean;
     icon?: SIconName;
-    iconColor?: string;
+    /** 헤더 아이콘 색상. 팔레트 키(`grey_65`, `red_95` …) 또는 임의 CSS 색상 */
+    iconColor?: SColor;
     /** 셀 커스텀 렌더 (React 확장) */
     render?: (row: SRow, value: any) => ReactNode;
     tdClass?: string;

package/dist/components/STable/STable.js

@@ -10,6 +10,134 @@ import * as RPopover from '@radix-ui/react-popover';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+
+// 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__ */ jsx(
@@ -2709,7 +2837,7 @@ var SIcon = forwardRef(function SIcon2({ name, size = 24, color, rotate, label,
     {
       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,
@@ -2742,7 +2870,7 @@ function SCheckbox({
       onValueChange(false);
     }
   };
-  const boxBg = disabled ? "var(--cmp-checkbox-bg-disabled)" : isChecked && !inverse ? "var(--cmp-checkbox-checked-bg-default)" : "transparent";
+  const boxBg = disabled ? "var(--cmp-checkbox-bg-disabled)" : inverse ? "transparent" : isChecked ? "var(--cmp-checkbox-checked-bg-default)" : "var(--cmp-checkbox-unchecked-bg-default)";
   const boxBorder = disabled ? "var(--cmp-checkbox-border-disabled)" : inverse ? "var(--cmp-checkbox-checked-border-inverse)" : isChecked ? "var(--cmp-checkbox-checked-bg-default)" : "var(--cmp-checkbox-unchecked-border-default)";
   const iconColor = disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)";
   const labelColor = disabled ? "var(--cmp-checkbox-label-disabled)" : inverse ? "var(--cmp-checkbox-label-inverse)" : "var(--cmp-checkbox-label-default)";
@@ -2978,7 +3106,7 @@ var HIDE_DELAY_MS = 100;
 function useBody(content, message = []) {
   if (content != null) return content;
   if (message.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-[12px]", children: message.map((line, i) => /* @__PURE__ */ jsx("span", { children: line }, i)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: message.map((line, i) => /* @__PURE__ */ jsx("div", { children: line }, i)) });
 }
 var STooltip = forwardRef(function STooltip2({
   content,
@@ -3096,8 +3224,6 @@ var STooltip = forwardRef(function STooltip2({
   ] });
 });
 STooltip.displayName = "STooltip";
-
-// src/lib/form.ts
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
   for (const rule of rules) {
@@ -3106,6 +3232,24 @@ 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]);
+}
 var FIELD_SIZE = {
   sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 12 },
   md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 12 }
@@ -3398,6 +3542,15 @@ var SSelect = forwardRef(function SSelect2({
     const arr = Array.isArray(value) ? value : [value];
     return arr.map((v) => v != null && typeof v === "object" ? v.value : v).filter((v) => v != null && v !== "").map(String);
   }, [value]);
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(multi ? selected : selected[0] ?? "", rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
   const emit = (next) => {
     if (!onValueChange) return;
     const mapped = next.map(
@@ -4072,8 +4225,10 @@ var STable = forwardRef(function STable2({
                                 {
                                   className: cn(
                                     // 원본 .td: 컬럼 폭에 맞춰 내용 말줄임(overflow hidden + ellipsis) + 행 구분선(border-b)
+                                    // 셀 배경은 흰색으로 채워 뒤 배경이 비치지 않게 하고, hover 시 행 배경(grey_05)을 따른다.
                                     "overflow-hidden text-ellipsis whitespace-nowrap border-b border-solid border-[color:var(--cmp-table-border-color)] px-[16px] text-[12px] leading-[20px] text-[color:var(--sys-color-fg-primary)]",
-                                    stickyInfo(i).isSticky && cn(rowBg, "group-hover:bg-[var(--color-grey-05)]"),
+                                    rowBg,
+                                    "group-hover:bg-[var(--color-grey-05)]",
                                     stickyShadowClass(i),
                                     col.tdClass
                                   ),