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

package/dist/index.js

@@ -3742,7 +3742,7 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
             "rounded-(--cmp-listDraggableItem-radius-bordered) border border-(--cmp-listDraggableItem-border-default)",
             !disabled && !selected && !dragging && "hover:border-(--cmp-listDraggableItem-bordered-border-hover)",
             !disabled && selected && !dragging && "border-(--cmp-listDraggableItem-bordered-border-selected) bg-(--cmp-listDraggableItem-bordered-bg-selected)",
-            !disabled && selected && dragging && "border-[length:var(--cmp-listDraggableItem-bordered-dragging-border-width)] border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
+            !disabled && selected && dragging && "border-(--cmp-listDraggableItem-bordered-dragging-border-color) bg-(--cmp-listDraggableItem-bordered-dragging-bg)"
           ),
           disabled && "cursor-not-allowed",
           className
@@ -4122,10 +4122,12 @@ function SDraggableProviderInternal({
           if (movedItem !== void 0) {
             if (source === target) {
               const toIndex = dropRef.current.index > dragging.index ? dropRef.current.index - 1 : dropRef.current.index;
-              const nextItems = [...source.items];
-              nextItems.splice(dragging.index, 1);
-              nextItems.splice(toIndex, 0, movedItem);
-              source.onChange?.(nextItems);
+              if (toIndex !== dragging.index) {
+                const nextItems = [...source.items];
+                nextItems.splice(dragging.index, 1);
+                nextItems.splice(toIndex, 0, movedItem);
+                source.onChange?.(nextItems);
+              }
             } else {
               const nextSourceItems = source.items.filter((_, index) => index !== dragging.index);
               const nextTargetItems = [...target.items];
@@ -4186,6 +4188,13 @@ function reorder(items, fromIndex, toIndex) {
 function clampDepth(depth, maxDepth) {
   return Math.max(1, Math.min(maxDepth, Math.floor(depth)));
 }
+function getDepthOffset(depth) {
+  return (Math.max(1, Math.floor(depth)) - 1) * 20;
+}
+function getIndicatorOffset(depth) {
+  const depthOffset = getDepthOffset(depth);
+  return depthOffset === 0 ? 0 : `calc(var(--cmp-listDraggableItem-paddingX) + ${depthOffset}px)`;
+}
 function getSubtreeEnd(items, startIndex, getDepth) {
   const startDepth = getDepth(items[startIndex], startIndex);
   let endIndex = startIndex + 1;
@@ -4253,6 +4262,7 @@ function SDraggableListInner({
   const fromIndexRef = useRef(null);
   const currentSelectedKey = selectedKey ?? internalSelectedKey;
   const usesDepth = getDepth != null;
+  const depthEnabled = usesDepth && !useGap;
   const groupDragging = dragContext?.dragging;
   const draggedSubtreeStart = dragContext ? groupDragging?.listId === listId ? groupDragging?.index ?? null : null : draggingIndex;
   const startDrag = useCallback((event, index) => {
@@ -4273,19 +4283,14 @@ function SDraggableListInner({
       );
       if (!itemElements) return;
       let nextDropTarget = items.length === 0 ? { index: 0, intent: "before" } : { index: items.length - 1, intent: "after" };
-      const draggingEndIndex = usesDepth && draggingIndex != null ? getSubtreeEnd(items, draggingIndex, readDepth) : draggingIndex + 1;
-      let previousDropIndex = null;
+      const draggingEndIndex = depthEnabled && draggingIndex != null ? getSubtreeEnd(items, draggingIndex, readDepth) : draggingIndex + 1;
       for (let index = 0; index < itemElements.length; index += 1) {
         const itemElement = itemElements[index];
         const rect = itemElement.getBoundingClientRect();
         if (index >= draggingIndex && index < draggingEndIndex) {
-          if (event.clientY <= rect.bottom) {
-            if (previousDropIndex != null) {
-              nextDropTarget = { index: previousDropIndex, intent: "after" };
-            } else {
-              nextDropTarget = { index: draggingIndex, intent: "before" };
-            }
-            break;
+          if (event.clientY >= rect.top && event.clientY <= rect.bottom) {
+            setDropTarget(null);
+            return;
           }
           continue;
         }
@@ -4294,12 +4299,11 @@ function SDraggableListInner({
           break;
         }
         if (event.clientY > rect.bottom) {
-          previousDropIndex = index;
           nextDropTarget = { index, intent: "after" };
           continue;
         }
         const ratio = (event.clientY - rect.top) / rect.height;
-        if (!usesDepth) {
+        if (!depthEnabled) {
           nextDropTarget = ratio < 0.5 ? { index, intent: "before" } : { index, intent: "after" };
           break;
         }
@@ -4316,27 +4320,35 @@ function SDraggableListInner({
       }
       setDropTarget(nextDropTarget);
     };
+    const cancelDrag = () => {
+      fromIndexRef.current = null;
+      setDraggingIndex(null);
+      setDropTarget(null);
+    };
     const handleMouseUp = () => {
       const fromIndex = fromIndexRef.current;
       const nextDropTarget = dropTarget;
       if (fromIndex != null && nextDropTarget != null && items[nextDropTarget.index]) {
         const insertionIndex = getInsertionIndex(items, nextDropTarget, () => 1);
-        const nextItems = usesDepth ? moveWithDepth(items, fromIndex, nextDropTarget, readDepth, setDepth, maxDepth) : reorder(
+        const nextItems = depthEnabled ? moveWithDepth(items, fromIndex, nextDropTarget, readDepth, setDepth, maxDepth) : reorder(
           items,
           fromIndex,
           insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex
         );
         if (nextItems !== items) onChange?.(nextItems);
       }
-      fromIndexRef.current = null;
-      setDraggingIndex(null);
-      setDropTarget(null);
+      cancelDrag();
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") cancelDrag();
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("keydown", handleKeyDown);
     return () => {
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [
     draggingIndex,
@@ -4345,7 +4357,7 @@ function SDraggableListInner({
     onChange,
     dragContext,
     getDepth,
-    usesDepth,
+    depthEnabled,
     readDepth,
     setDepth,
     maxDepth,
@@ -4359,8 +4371,18 @@ function SDraggableListInner({
   const currentDropIntent = dragContext ? void 0 : dropTarget?.intent;
   const isDropTarget = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId : draggingIndex != null;
   const showEmptyDrop = Boolean(dragContext && isDropTarget && items.length === 0);
-  const beforeIndicatorPosition = useGap ? "before:top-[-5px]" : "before:top-0";
-  const afterIndicatorPosition = useGap ? "after:bottom-[-5px]" : "after:bottom-[-1px]";
+  const beforeIndicatorStyle = (depth) => ({
+    borderTop: "2px solid var(--sys-color-fg-accentLight)",
+    left: getIndicatorOffset(depth),
+    right: 0,
+    top: useGap ? -5 : 0
+  });
+  const afterIndicatorStyle = (depth) => ({
+    borderTop: "2px solid var(--sys-color-fg-accentLight)",
+    bottom: useGap ? -5 : -1,
+    left: getIndicatorOffset(depth),
+    right: 0
+  });
   const setListRef = (node) => {
     listRef.current = node;
     if (dragContext && dragGroup && listId) {
@@ -4381,15 +4403,15 @@ function SDraggableListInner({
       ref: setListRef,
       ...rest,
       useGap,
-      className: `${className ?? ""} ${dragContext ? "min-h-[40px]" : ""} ${showEmptyDrop ? "relative before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']" : ""}`,
+      className: `${className ?? ""} ${dragContext ? "min-h-[40px]" : ""} ${showEmptyDrop ? "relative before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-fg-accentLight) before:content-['']" : ""}`,
       "data-draggable-group": dragContext ? dragGroup : void 0,
       "data-draggable-list-id": dragContext ? listId : void 0,
       children: items.map((item2, index) => {
         const itemKey = getKey(item2, index);
-        const disabled = (getDisabled?.(item2, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, usesDepth ? readDepth : void 0);
-        const depth = readDepth(item2, index);
+        const disabled = (getDisabled?.(item2, index) ?? false) || isDescendant(items, index, draggedSubtreeStart, depthEnabled ? readDepth : void 0);
+        const depth = depthEnabled ? readDepth(item2, index) : 1;
         const showBefore = isDropTarget && currentDropIndex === index && (dragContext || currentDropIntent === "before");
-        const showInside = isDropTarget && currentDropIndex === index && !dragContext && usesDepth && currentDropIntent === "inside";
+        const showInside = isDropTarget && currentDropIndex === index && !dragContext && depthEnabled && currentDropIntent === "inside";
         const showAfter = isDropTarget && (dragContext ? currentDropIndex === items.length && index === items.length - 1 : currentDropIndex === index && currentDropIntent === "after");
         const selectItem = () => {
           if (disabled) return;
@@ -4401,7 +4423,7 @@ function SDraggableListInner({
           event.preventDefault();
           selectItem();
         };
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsxs(
           "div",
           {
             "data-draggable-list-item": true,
@@ -4410,18 +4432,49 @@ function SDraggableListInner({
             "aria-disabled": disabled || void 0,
             onClick: selectItem,
             onKeyDown: handleItemKeyDown,
-            className: `relative ${showBefore ? `before:absolute before:left-0 before:right-0 ${beforeIndicatorPosition} before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']` : ""} ${showAfter ? `after:absolute after:left-0 after:right-0 ${afterIndicatorPosition} after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']` : ""} ${showInside ? "outline outline-2 outline-offset-[-2px] outline-(--sys-color-border-accent)" : ""}`,
-            children: renderItem(item2, index, {
-              onDragHandleMouseDown: (event) => {
-                if (disabled) return;
-                if (dragContext && dragGroup && listId) {
-                  dragContext.startDrag(event, dragGroup, listId, index, itemKey);
-                } else startDrag(event, index);
-              },
-              selected: currentSelectedKey === itemKey,
-              disabled,
-              depth
-            })
+            className: "relative",
+            children: [
+              showBefore && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-draggable-drop-indicator": "before",
+                  className: "pointer-events-none absolute z-10",
+                  style: beforeIndicatorStyle(depth)
+                }
+              ),
+              showAfter && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-draggable-drop-indicator": "after",
+                  className: "pointer-events-none absolute z-10",
+                  style: afterIndicatorStyle(depth)
+                }
+              ),
+              showInside && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  "data-draggable-drop-indicator": "inside",
+                  className: "pointer-events-none absolute inset-0 z-10",
+                  style: {
+                    border: "2px solid var(--sys-color-fg-accentLight)"
+                  }
+                }
+              ),
+              renderItem(item2, index, {
+                onDragHandleMouseDown: (event) => {
+                  if (disabled) return;
+                  if (dragContext && dragGroup && listId) {
+                    dragContext.startDrag(event, dragGroup, listId, index, itemKey);
+                  } else startDrag(event, index);
+                },
+                selected: currentSelectedKey === itemKey,
+                disabled,
+                depth
+              })
+            ]
           },
           itemKey
         );
@@ -4894,6 +4947,7 @@ var STag = /* @__PURE__ */ forwardRef(function STag2({
   shape = "square",
   size = "sm",
   color = "grey",
+  deep = false,
   label = "",
   icon,
   iconLeft = true,
@@ -4903,7 +4957,8 @@ var STag = /* @__PURE__ */ forwardRef(function STag2({
   ...rest
 }, ref) {
   const s = TAG_SIZE_CONFIG[size];
-  const contentColor = `var(--cmp-tag-${color}-content)`;
+  const contentColor = deep ? `var(--cmp-tag-${color}-deep-content, var(--cmp-tag-deep-content))` : `var(--cmp-tag-${color}-content)`;
+  const bgColor = deep ? `var(--cmp-tag-${color}-deep-bg)` : `var(--cmp-tag-${color}-bg)`;
   const iconNode = icon ? /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.iconSize, color: contentColor }) : null;
   const resolvedWidth = typeof width === "number" ? `${width}px` : width;
   return /* @__PURE__ */ jsxs(
@@ -4923,7 +4978,7 @@ var STag = /* @__PURE__ */ forwardRef(function STag2({
         fontSize: s.fontSize,
         fontWeight: s.fontWeight,
         lineHeight: `${s.lineHeight}px`,
-        background: `var(--cmp-tag-${color}-bg)`,
+        background: bgColor,
         color: contentColor,
         ...resolvedWidth != null ? { width: resolvedWidth } : {},
         ...style
@@ -6174,11 +6229,12 @@ var FILL_COLOR = {
 };
 var clamp2 = (v) => Number.isFinite(v) ? Math.max(0, Math.min(100, v)) : 0;
 var SLinearProgress = /* @__PURE__ */ forwardRef(
-  function SLinearProgress2({ value = 0, type = "primary", indeterminate = false, label, className, style }, ref) {
+  function SLinearProgress2({ value = 0, type = "primary", size = "sm", indeterminate = false, label, className, style }, ref) {
     const v = clamp2(value);
     const fill = FILL_COLOR[type];
     const valueColor = v === 0 ? "var(--sys-color-fg-tertiary, #888888)" : fill;
     const valueText = `${Math.round(v)}%`;
+    const showValue = !indeterminate && size !== "xs";
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -6186,36 +6242,43 @@ var SLinearProgress = /* @__PURE__ */ forwardRef(
         className: cn("flex w-full flex-col gap-[12px]", className),
         style,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "relative h-[20px] w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]", children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "absolute inset-y-0 left-0 h-full rounded-[inherit]",
-                  indeterminate ? "w-full origin-left animate-linear-indeterminate" : "transition-[width] duration-[400ms] ease-linear"
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "relative w-full overflow-hidden rounded-full bg-[var(--cmp-progress-color-track)]",
+              style: { height: `var(--cmp-progress-linear-height-${size})` },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute inset-y-0 left-0 h-full rounded-[inherit]",
+                      indeterminate ? "w-full origin-left animate-linear-indeterminate" : "transition-[width] duration-[400ms] ease-linear"
+                    ),
+                    style: { background: fill, width: indeterminate ? void 0 : `${v}%` }
+                  }
                 ),
-                style: { background: fill, width: indeterminate ? void 0 : `${v}%` }
-              }
-            ),
-            !indeterminate && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
-                  style: { color: valueColor },
-                  children: valueText
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
-                  style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
-                  children: valueText
-                }
-              )
-            ] })
-          ] }),
+                showValue && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px]",
+                      style: { color: valueColor },
+                      children: valueText
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "pointer-events-none absolute inset-x-0 top-1/2 -translate-y-1/2 select-none text-center text-[12px] font-bold leading-[20px] text-[color:var(--cmp-progress-bar-text)]",
+                      style: { clipPath: `inset(0 ${100 - v}% 0 0)` },
+                      children: valueText
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
           label && /* @__PURE__ */ jsx("span", { className: "text-center text-[12px] font-normal leading-[20px] text-[color:var(--cmp-progress-color-label)]", children: label })
         ]
       }
@@ -15307,6 +15370,11 @@ var SForm = /* @__PURE__ */ forwardRef(function SForm2({ formClass, onSubmit, on
     }
   ) });
 });
+var SIZE_CONFIG2 = {
+  xs: { fontSize: 12, lineHeight: 20, radius: "var(--cmp-radioButton-radius-sm)" },
+  sm: { fontSize: 12, lineHeight: 20, radius: "var(--cmp-radioButton-radius-sm)" },
+  md: { fontSize: 16, lineHeight: 26, radius: "var(--cmp-radioButton-radius-md)" }
+};
 function SRadioButton({
   options = [],
   value,
@@ -15317,6 +15385,7 @@ function SRadioButton({
   className,
   style
 }) {
+  const s = SIZE_CONFIG2[size];
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -15327,6 +15396,8 @@ function SRadioButton({
       children: options.map((o, i) => {
         const selected = o.value === value;
         const od = disabled || o.disabled;
+        const first = i === 0;
+        const last = i === options.length - 1;
         return /* @__PURE__ */ jsx(
           "button",
           {
@@ -15337,9 +15408,8 @@ function SRadioButton({
             disabled: od,
             onClick: () => !od && !selected && onValueChange?.(o.value),
             className: cn(
-              "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid text-[12px] font-medium leading-[20px] transition-colors",
-              i === 0 ? "rounded-l-[var(--cmp-radioButton-radius)]" : "-ml-px",
-              i === options.length - 1 ? "rounded-r-[var(--cmp-radioButton-radius)]" : "",
+              "relative box-border grow inline-flex items-center justify-center whitespace-nowrap border border-solid font-medium transition-colors",
+              first ? "" : "-ml-px",
               selected ? "z-10" : "",
               !od && !selected && "hover:!bg-[var(--cmp-radioButton-bg-hover)] hover:!text-[color:var(--cmp-radioButton-content-hover)] hover:!border-[color:var(--cmp-radioButton-bg-hover)] hover:z-10",
               od ? "cursor-not-allowed" : "cursor-pointer"
@@ -15347,6 +15417,14 @@ function SRadioButton({
             style: {
               height: `var(--cmp-radioButton-${size}-height)`,
               padding: `0 var(--cmp-radioButton-${size}-paddingX)`,
+              fontSize: `${s.fontSize}px`,
+              lineHeight: `${s.lineHeight}px`,
+              borderRadius: [
+                first ? s.radius : "0",
+                last ? s.radius : "0",
+                last ? s.radius : "0",
+                first ? s.radius : "0"
+              ].join(" "),
               background: od ? "var(--cmp-radioButton-bg-disabled)" : "var(--cmp-radioButton-bg-default)",
               borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
               color: od ? "var(--cmp-radioButton-content-disabled)" : selected ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"