sellmate-design-system-react 9.0.0-beta.80 → 9.0.0-beta.83

package/dist/index.d.ts

@@ -67,6 +67,7 @@ export * from './components/SPieChart';
 export * from './components/SDonutChart';
 export * from './components/SToast';
 export * from './components/SSkeleton';
+export * from './components/STimeline';
 export * from './components/SForm';
 export * from './components/SField';
 export * from './components/SCheckbox';

package/dist/index.js

@@ -5142,16 +5142,22 @@ var STextarea = /* @__PURE__ */ forwardRef(function STextarea2({
     },
     [ref]
   );
+  const autoSizedRef = useRef(false);
+  const styleHeight = textareaStyle?.height;
   useLayoutEffect(() => {
     const el = innerRef.current;
     if (el == null) return;
     if (!autogrow) {
-      el.style.height = "";
+      if (autoSizedRef.current) {
+        el.style.height = typeof styleHeight === "number" ? `${styleHeight}px` : styleHeight ?? "";
+        autoSizedRef.current = false;
+      }
       return;
     }
     el.style.height = "auto";
     el.style.height = `${el.scrollHeight}px`;
-  }, [autogrow, maxHeight, minHeight, rows, value]);
+    autoSizedRef.current = true;
+  }, [autogrow, maxHeight, minHeight, rows, styleHeight, value]);
   useFormField({
     name: rest.name,
     validate: () => {
@@ -22621,10 +22627,13 @@ var SKELETON_TYPES = [
   "switch"
 ];
 var SKELETON_ANIMATIONS = ["wave", "pulse", "fade", "none"];
+var SKELETON_MODES = ["light", "dark"];
 var SKELETON_TYPE_CONFIG = {
-  rect: { radius: "var(--sys-radius-control-sm)" },
+  rect: { radius: "var(--cmp-skeleton-radius)" },
   circle: { width: "48px", height: "48px", radius: "50%" },
-  text: { radius: "var(--sys-radius-control-sm)" },
+  // 세로를 절반(scale-y-50)으로 줄여 그리므로 세로 반지름을 두 배로 줘야 모서리가 둥글게 남는다.
+  // 칠하는 높이가 한 줄의 절반이라 스켈레톤 radius 는 알약처럼 보여 한 단계 작은 값을 쓴다
+  text: { radius: "var(--radius-2) / calc(var(--radius-2) * 2)" },
   button: {
     width: "90px",
     height: "var(--cmp-button-sm-height)",
@@ -22648,13 +22657,18 @@ var SKELETON_TYPE_CONFIG = {
     radius: "var(--cmp-switch-radius)"
   }
 };
+var wave = (alpha) => `linear-gradient(90deg, transparent, color-mix(in srgb, var(--cmp-skeleton-highlight) ${alpha}, transparent), transparent)`;
 var SKELETON_COLORS = {
-  /** Quasar rgba(0,0,0,.12) ≈ 흰 바탕 위 #E1E1E1 */
-  bg: "var(--sys-color-disabled-bg)",
-  /** Quasar rgba(0,0,0,.05) 테두리 — 배경보다 한 단계 짙게 */
-  border: "color-mix(in srgb, var(--sys-color-border-strong) 25%, transparent)",
-  /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
-  wave: "linear-gradient(90deg, transparent, color-mix(in srgb, var(--sys-color-bg-frame) 50%, transparent), transparent)"
+  light: {
+    bg: "color-mix(in srgb, var(--cmp-skeleton-bg-dark) var(--cmp-skeleton-opacity), transparent)",
+    /** Quasar rgba(255,255,255,.5) 하이라이트 띠 */
+    wave: wave("50%")
+  },
+  dark: {
+    bg: "color-mix(in srgb, var(--cmp-skeleton-bg-light) var(--cmp-skeleton-opacity), transparent)",
+    /** 어두운 면에서 50% 흰 띠는 너무 튀어 바탕과 같은 투명도로 낮춘다 (Quasar dark 도 .1) */
+    wave: wave("var(--cmp-skeleton-opacity)")
+  }
 };
 var ANIMATION_CLASS = {
   pulse: "animate-skeleton-pulse",
@@ -22663,10 +22677,10 @@ var ANIMATION_CLASS = {
 var toCss = (v) => typeof v === "number" ? `${v}px` : v;
 var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
   type = "rect",
+  mode = "light",
   animation = "wave",
   animationSpeed = 1500,
   square = false,
-  bordered = false,
   size,
   width,
   height,
@@ -22675,6 +22689,7 @@ var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
   ...props
 }, ref) {
   const t = SKELETON_TYPE_CONFIG[type];
+  const colors = SKELETON_COLORS[mode];
   const duration = `${animationSpeed}ms`;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -22686,7 +22701,6 @@ var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
         "box-border cursor-wait select-none",
         // text 는 transform 이 아니라 scale 속성으로 줄여서 pulse 의 transform 애니메이션과 겹치지 않는다
         type === "text" && "scale-y-50",
-        bordered && "border border-solid",
         animation === "wave" && "relative overflow-hidden",
         animation !== "wave" && animation !== "none" && ANIMATION_CLASS[animation],
         "motion-reduce:animate-none",
@@ -22696,8 +22710,7 @@ var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
         width: toCss(width ?? size) ?? t.width,
         height: toCss(height ?? size) ?? t.height,
         borderRadius: square ? 0 : t.radius,
-        background: SKELETON_COLORS.bg,
-        borderColor: bordered ? SKELETON_COLORS.border : void 0,
+        background: colors.bg,
         animationDuration: animation === "pulse" || animation === "fade" ? duration : void 0,
         ...style
       },
@@ -22707,13 +22720,81 @@ var SSkeleton = /* @__PURE__ */ forwardRef(function SSkeleton2({
           "span",
           {
             className: "absolute inset-0 animate-skeleton-wave motion-reduce:hidden",
-            style: { background: SKELETON_COLORS.wave, animationDuration: duration }
+            style: {
+              background: colors.wave,
+              animationDuration: duration,
+              transform: "translateX(-100%)"
+            }
           }
         )
       ]
     }
   );
 });
+var STimelineImpl = /* @__PURE__ */ forwardRef(function STimeline({ groups, emptyText = "\uB0B4\uC5ED\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", className, ...rest }, ref) {
+  const filled = groups.filter((group) => group.entries.length > 0);
+  if (filled.length === 0) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "typo-body-sm-default flex h-full items-center justify-center text-[color:var(--cmp-timeline-empty-color)]",
+          className
+        ),
+        ...rest,
+        children: emptyText
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col", className), ...rest, children: filled.map((group, groupIndex) => {
+    const isLastGroup = groupIndex === filled.length - 1;
+    return /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx("div", { className: "typo-body-sm-bold py-[var(--cmp-timeline-heading-paddingY)] text-[color:var(--cmp-timeline-heading-color)]", children: group.heading }),
+      /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none flex-col p-0", children: group.entries.map((entry, entryIndex) => {
+        const isFirstEntry = entryIndex === 0;
+        const isLastEntry = entryIndex === group.entries.length - 1;
+        return (
+          // 시각 열 너비는 토큰이 없다 — 줄마다 grid 가 따로라 auto 로 두면 열이 어긋나므로 고정한다.
+          /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: "grid grid-cols-[52px_var(--cmp-timeline-rail-dot-size)_minmax(0,1fr)]",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "typo-body-sm-medium whitespace-nowrap pr-[var(--cmp-timeline-entry-horizontalGap)] text-right text-[color:var(--cmp-timeline-time-color)]", children: entry.time }),
+                /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "relative", children: [
+                  !(isLastGroup && isLastEntry) && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "absolute left-1/2 w-[var(--cmp-timeline-rail-line-width)] -translate-x-1/2 bg-[var(--cmp-timeline-rail-line-color)]",
+                        isFirstEntry && groupIndex > 0 ? "top-0" : "top-[14px]",
+                        isLastEntry ? "bottom-0" : "bottom-[-8px]"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "absolute left-0 top-[6px] size-[var(--cmp-timeline-rail-dot-size)] rounded-[var(--cmp-timeline-rail-dot-radius)] bg-[var(--cmp-timeline-rail-dot-bg)]" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "min-w-0 pl-[var(--cmp-timeline-entry-horizontalGap)]",
+                      !isLastEntry && "pb-[var(--cmp-timeline-entry-gap)]"
+                    ),
+                    children: entry.content
+                  }
+                )
+              ]
+            },
+            entry.key
+          )
+        );
+      }) })
+    ] }, group.key ?? groupIndex);
+  }) });
+});
+var STimeline2 = /* @__PURE__ */ withDisplayName(STimelineImpl, "STimeline");
 var SForm = /* @__PURE__ */ forwardRef(function SForm2({ formClassName, onSubmit, onValidationError, children, className, style }, ref) {
   const formRef = useRef(null);
   const fieldsRef = useRef(/* @__PURE__ */ new Set());
@@ -28455,6 +28536,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKELETON_ANIMATIONS, SKELETON_TYPES, SKELETON_TYPE_CONFIG, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSkeleton, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKELETON_ANIMATIONS, SKELETON_MODES, SKELETON_TYPES, SKELETON_TYPE_CONFIG, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSkeleton, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, STimeline2 as STimeline, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map