sellmate-design-system-react 9.0.0-beta.28 → 9.0.0-beta.29

package/dist/index.d.ts

@@ -54,6 +54,7 @@ export * from './components/SField';
 export * from './components/SCheckbox';
 export * from './components/SRadio';
 export * from './components/SRadioButton';
+export * from './components/SRadioCard';
 export * from './components/SInput';
 export * from './components/SSearchInput';
 export * from './components/STextarea';

package/dist/index.js

@@ -15437,6 +15437,145 @@ function SRadioButton({
     }
   );
 }
+function SRadioCard({
+  val,
+  value,
+  label,
+  subtitle,
+  tag,
+  disabled = false,
+  name,
+  onValueChange,
+  className,
+  style
+}) {
+  const valStr = String(val);
+  const checked = value === val;
+  const select = () => {
+    if (!disabled && !checked) onValueChange?.(val);
+  };
+  const native = name != null && name !== "";
+  const cardInteractiveProps = native ? {} : {
+    "role": "radio",
+    "aria-checked": checked,
+    "tabIndex": disabled ? -1 : 0,
+    "onClick": select,
+    "onKeyDown": (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        select();
+      }
+    }
+  };
+  const textColor = disabled ? "text-(--sys-color-disabled-text)" : null;
+  return /* @__PURE__ */ jsxs(
+    "label",
+    {
+      ...cardInteractiveProps,
+      "aria-disabled": disabled || void 0,
+      className: cn(
+        "box-border flex w-full flex-col rounded-(--cmp-radioCard-radius) border-(length:--cmp-radioCard-border-width) border-solid px-(--cmp-radioCard-paddingX) py-(--cmp-radioCard-paddingY) transition-colors",
+        disabled ? "cursor-not-allowed border-(--cmp-radioCard-border-default) bg-(--cmp-radioCard-bg-disabled)" : checked ? "cursor-pointer border-(--cmp-radioCard-border-selected) bg-(--cmp-radioCard-bg-selected)" : "cursor-pointer border-(--cmp-radioCard-border-default) bg-(--cmp-radioCard-bg-default) hover:border-(--cmp-radioCard-border-hover) hover:bg-(--cmp-radioCard-bg-hover)",
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-(--cmp-radioCard-gap)", children: [
+          native && /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: valStr,
+              checked,
+              disabled,
+              onChange: () => onValueChange?.(val),
+              className: "sr-only"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "flex h-(--cmp-radio-size) w-(--cmp-radio-size) shrink-0 items-center justify-center rounded-(--cmp-radio-radius) border-(length:--cmp-radio-borderWidth) border-solid border-(--rc-dot-border) bg-(--rc-dot-bg)",
+              style: {
+                "--rc-dot-bg": disabled ? "var(--cmp-radio-bg-disabled)" : "var(--cmp-radio-bg-default)",
+                "--rc-dot-border": disabled ? "var(--cmp-radio-border-disabled)" : checked ? "var(--cmp-radio-border-active)" : "var(--cmp-radio-border-default)"
+              },
+              children: checked && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "h-(--cmp-radio-dot-size) w-(--cmp-radio-dot-size) rounded-(--cmp-radio-radius) bg-(--rc-dot-fill)",
+                  style: {
+                    "--rc-dot-fill": disabled ? "var(--cmp-radio-dot-disabled)" : "var(--cmp-radio-dot-default)"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: cn("grid min-w-0", textColor ?? "text-(--cmp-radioCard-label-color)"), children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "typo-body-md-bold invisible", style: { gridArea: "1 / 1" }, children: label }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: checked ? "typo-body-md-bold" : "typo-body-md-semibold",
+                style: { gridArea: "1 / 1" },
+                children: label
+              }
+            )
+          ] }),
+          tag && /* @__PURE__ */ jsx(STag, { ...tag, size: "xs", className: "ml-auto" })
+        ] }),
+        subtitle && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "typo-body-sm-default pl-(--cmp-radioCard-subtitle-paddingLeft)",
+              textColor ?? "text-(--cmp-radioCard-subtitle-color)"
+            ),
+            children: subtitle
+          }
+        )
+      ]
+    }
+  );
+}
+function SRadioCardGroup({
+  options = [],
+  value,
+  direction = "vertical",
+  disabled = false,
+  groupName,
+  onValueChange,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      className: cn(
+        "flex gap-(--cmp-radioCard-group-gap)",
+        direction === "vertical" ? "flex-col" : "flex-row",
+        className
+      ),
+      style,
+      children: options.map((o) => /* @__PURE__ */ jsx(
+        SRadioCard,
+        {
+          val: o.value,
+          value,
+          label: o.label,
+          subtitle: o.subtitle,
+          tag: o.tag,
+          name: groupName,
+          disabled: disabled || o.disabled,
+          onValueChange
+        },
+        String(o.value)
+      ))
+    }
+  );
+}
 var Frame = ({ size = 16, children, ...rest }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -17727,6 +17866,7 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
   const pendingOpenKeyRef = useRef(null);
   const triggerRefs = useRef(/* @__PURE__ */ new Map());
   const initializedDefaultsRef = useRef(/* @__PURE__ */ new Set());
+  const pendingDefaultRef = useRef(/* @__PURE__ */ new Set());
   const misuseWarningSignatureRef = useRef(null);
   const prevOpenKeyRef = useRef(null);
   const valuesRef = useRef(values);
@@ -17777,15 +17917,18 @@ var SChipFilter = /* @__PURE__ */ forwardRef(function SChipFilter2({
     const patch = {};
     let changed = false;
     fields.forEach((field) => {
-      if (initializedDefaultsRef.current.has(field.key)) return;
       if (!isEmptyValue(values[field.key])) {
         initializedDefaultsRef.current.add(field.key);
+        pendingDefaultRef.current.delete(field.key);
         return;
       }
+      if (!field.required && initializedDefaultsRef.current.has(field.key)) return;
+      if (field.required && pendingDefaultRef.current.has(field.key)) return;
       const def = resolveFieldDefault(field);
       if (def === void 0) return;
       patch[field.key] = def;
       initializedDefaultsRef.current.add(field.key);
+      pendingDefaultRef.current.add(field.key);
       changed = true;
     });
     if (changed) onValueChange?.({ ...values, ...patch });
@@ -20569,6 +20712,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, 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, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, 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, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, 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, findGnbAncestors, findGnbRailValue, isColorKey, isFieldWidthGrade, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, 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, ICONS, IMAGE_FITS, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, RangeCalendar, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, 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, SGuide, SIcon, SImage, SInput, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLayout, SLayoutContext, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoadingViewport, SModal, SModalOutlet, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, 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, findGnbAncestors, findGnbRailValue, isColorKey, isFieldWidthGrade, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map