@solostylist/ui-kit 1.0.82 → 1.0.84

package/dist/s-chips/s-chips.js

@@ -2,7 +2,7 @@ import { j as s } from "../jsx-runtime-DywqP_6a.js";
 import { useRef as S, useState as m, useEffect as v } from "react";
 import { Box as a, Chip as h, Tooltip as E } from "@mui/material";
 const L = ({ chips: n, overflow: r = !0, onClick: l, overflowText: c = "keywords" }) => {
-  const u = S(null), [C, w] = m([]), [W, j] = m([]), [x, y] = m(0), p = () => {
+  const u = S(null), [w, C] = m([]), [W, j] = m([]), [x, y] = m(0), p = () => {
     var f;
     const t = ((f = u.current) == null ? void 0 : f.offsetWidth) || 0;
     let e = 0, i = 0;
@@ -18,7 +18,7 @@ const L = ({ chips: n, overflow: r = !0, onClick: l, overflowText: c = "keywords
       for (; e + o > t && i > 0; )
         i--, e -= d(n[i]);
     }
-    w(n.slice(0, i)), j(n.slice(i)), y(n.length - i);
+    C(n.slice(0, i)), j(n.slice(i)), y(n.length - i);
   }, d = (t) => {
     const e = document.createElement("span");
     e.style.visibility = "hidden", e.style.position = "absolute", e.style.whiteSpace = "nowrap", e.textContent = t.trim(), document.body.appendChild(e);
@@ -31,7 +31,7 @@ const L = ({ chips: n, overflow: r = !0, onClick: l, overflowText: c = "keywords
         window.removeEventListener("resize", p);
       };
   }, [n, r]), /* @__PURE__ */ s.jsxs(a, { ref: u, display: "flex", maxWidth: "100%", flexWrap: r ? "nowrap" : "wrap", ...g, children: [
-    (r ? C : n).map((t) => /* @__PURE__ */ s.jsx(
+    (r ? w : n).map((t) => /* @__PURE__ */ s.jsx(
       a,
       {
         component: "span",
@@ -60,6 +60,8 @@ const L = ({ chips: n, overflow: r = !0, onClick: l, overflowText: c = "keywords
         slotProps: {
           tooltip: { style: { padding: "0.5rem" } }
         },
+        arrow: !0,
+        placement: "top",
         title: /* @__PURE__ */ s.jsx(a, { display: "flex", gap: 1, maxWidth: "240px", flexWrap: "wrap", children: W.map((t) => /* @__PURE__ */ s.jsx(h, { label: t.trim() }, t)) }),
         children: /* @__PURE__ */ s.jsx(a, { component: "span", textTransform: "lowercase", children: /* @__PURE__ */ s.jsx(
           h,

package/dist/s-copyable-text/s-copyable-text.js

@@ -1,25 +1,25 @@
 import { j as e } from "../jsx-runtime-DywqP_6a.js";
-import { useState as l } from "react";
-import { Paper as x, Box as m, IconButton as h, Typography as u } from "@mui/material";
-import { c } from "../createSvgIcon-9XY7lJan.js";
-const p = c(/* @__PURE__ */ e.jsx("path", {
+import { useState as x } from "react";
+import { Paper as d, Box as m, IconButton as h, Typography as u } from "@mui/material";
+import { c as n } from "../createSvgIcon-9XY7lJan.js";
+const f = n(/* @__PURE__ */ e.jsx("path", {
   d: "M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-}), "Check"), f = c(/* @__PURE__ */ e.jsx("path", {
+}), "Check"), j = n(/* @__PURE__ */ e.jsx("path", {
   d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
-}), "ContentCopy"), w = ({ text: r, typographyProps: t, onCopied: o, paperProps: i }) => {
-  const [s, a] = l(!1), n = async () => {
+}), "ContentCopy"), w = ({ text: r, typographyProps: t, onCopied: o, paperProps: a }) => {
+  const [s, c] = x(!1), i = async () => {
     if (r)
       try {
-        await navigator.clipboard.writeText(r), a(!0), setTimeout(() => a(!1), 2e3), o == null || o();
-      } catch (d) {
-        console.error("Failed to copy text:", d);
+        await navigator.clipboard.writeText(r), c(!0), setTimeout(() => c(!1), 2e3), o == null || o();
+      } catch (l) {
+        console.error("Failed to copy text:", l);
       }
   };
-  return r ? /* @__PURE__ */ e.jsx(x, { sx: { p: 2, border: "1px dashed", borderColor: "divider" }, ...i, children: /* @__PURE__ */ e.jsxs(m, { sx: { position: "relative" }, children: [
+  return r ? /* @__PURE__ */ e.jsx(d, { sx: { p: 2, border: "1px dashed", borderColor: "divider" }, ...a, children: /* @__PURE__ */ e.jsxs(m, { sx: { position: "relative" }, children: [
     /* @__PURE__ */ e.jsx(
       h,
       {
-        onClick: n,
+        onClick: i,
         size: "small",
         sx: {
           position: "absolute",
@@ -31,7 +31,7 @@ const p = c(/* @__PURE__ */ e.jsx("path", {
           color: s ? "success.main" : "inherit"
           // Green when copied
         },
-        children: s ? /* @__PURE__ */ e.jsx(p, {}) : /* @__PURE__ */ e.jsx(f, {})
+        children: s ? /* @__PURE__ */ e.jsx(f, {}) : /* @__PURE__ */ e.jsx(j, {})
       }
     ),
     /* @__PURE__ */ e.jsx(
@@ -39,14 +39,8 @@ const p = c(/* @__PURE__ */ e.jsx("path", {
       {
         variant: "body1",
         sx: {
-          marginBottom: 0,
           whiteSpace: "pre-wrap",
           // Preserve whitespace and line breaks
-          padding: 2,
-          // Inner spacing
-          borderRadius: 1,
-          border: "1px solid var(--s-palette-divider)",
-          // Theme-aware border
           wordBreak: "break-word",
           // Handle long words gracefully
           ...t == null ? void 0 : t.sx

package/dist/s-dialog-confirm/s-dialog-confirm.js

@@ -5,8 +5,8 @@ import { Dialog as g, DialogTitle as j, Stack as D, IconButton as v, DialogConte
 import { useDialog as k } from "../hooks/use-dialog.js";
 import { T as m } from "../Typography-CeAbQ9LX.js";
 const w = ({
-  title: o,
-  content: e,
+  title: e,
+  content: o,
   onConfirm: s = () => {
   },
   onClose: i = () => {
@@ -16,17 +16,17 @@ const w = ({
   showClose: c = !0,
   loading: l = !1
 }) => /* @__PURE__ */ n.jsxs(g, { fullWidth: !0, maxWidth: a, onClose: i, open: t, children: [
-  o && /* @__PURE__ */ n.jsx(j, { children: /* @__PURE__ */ n.jsxs(D, { direction: "row", spacing: 3, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
-    typeof o == "string" ? /* @__PURE__ */ n.jsx(m, { variant: "h5", textTransform: "capitalize", children: o }) : /* @__PURE__ */ n.jsx("div", { children: o }),
+  e && /* @__PURE__ */ n.jsx(j, { children: /* @__PURE__ */ n.jsxs(D, { direction: "row", spacing: 3, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+    typeof e == "string" ? /* @__PURE__ */ n.jsx(m, { variant: "h5", textTransform: "capitalize", children: e }) : /* @__PURE__ */ n.jsx("div", { children: e }),
     c && /* @__PURE__ */ n.jsx(v, { onClick: i, children: /* @__PURE__ */ n.jsx(p, {}) })
   ] }) }),
-  e && /* @__PURE__ */ n.jsx(y, { children: typeof e == "string" ? /* @__PURE__ */ n.jsx(m, { color: "text.secondary", variant: "body2", children: e }) : e }),
+  o && /* @__PURE__ */ n.jsx(y, { children: typeof o == "string" ? /* @__PURE__ */ n.jsx(m, { color: "text.secondary", variant: "body2", children: o }) : o }),
   /* @__PURE__ */ n.jsx(b, { children: /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
     /* @__PURE__ */ n.jsx(d, { onClick: i, variant: "outlined", disabled: l, children: "Cancel" }),
-    /* @__PURE__ */ n.jsx(d, { onClick: s, disabled: l, children: "Confirm" })
+    /* @__PURE__ */ n.jsx(d, { onClick: s, loading: l, children: "Confirm" })
   ] }) })
-] }), f = r.createContext(null), E = ({ children: o }) => {
-  const e = k(), [s, i] = r.useState(!1), [t, a] = r.useState({
+] }), f = r.createContext(null), E = ({ children: e }) => {
+  const o = k(), [s, i] = r.useState(!1), [t, a] = r.useState({
     title: "",
     content: "",
     onConfirm: () => {
@@ -35,12 +35,12 @@ const w = ({
     handleOpen: r.useCallback(
       (x) => {
         const { title: C, content: h, onConfirm: u } = x;
-        a({ title: C, content: h, onConfirm: u }), e.handleOpen();
+        a({ title: C, content: h, onConfirm: u }), o.handleOpen();
       },
-      [e]
+      [o]
     ),
-    handleClose: e.handleClose,
-    open: e.open,
+    handleClose: o.handleClose,
+    open: o.open,
     loading: s,
     setLoading: i
   }, l = () => {
@@ -50,21 +50,21 @@ const w = ({
     /* @__PURE__ */ n.jsx(
       w,
       {
-        open: e.open,
+        open: o.open,
         title: t == null ? void 0 : t.title,
         content: t == null ? void 0 : t.content,
-        onClose: e.handleClose,
+        onClose: o.handleClose,
         onConfirm: l,
         loading: s
       }
     ),
-    o
+    e
   ] });
 }, O = () => {
-  const o = r.useContext(f);
-  if (!o)
+  const e = r.useContext(f);
+  if (!e)
     throw new Error("useDialogConfirm must be used within a DialogConfirmProvider");
-  return o;
+  return e;
 };
 export {
   E as DialogConfirmProvider,

package/dist/s-file-dropzone/s-file-dropzone.d.ts

@@ -15,8 +15,8 @@ export type CustomFile = File | FileWithPath | {
  * Props for the SFileDropzone component, extending react-dropzone options
  */
 export interface SFileDropzoneProps extends DropzoneOptions {
-    /** Additional caption text displayed below the main upload message */
-    caption?: string;
+    /** Additional hint text displayed below the main upload message */
+    hint?: string;
     /** Array of files currently selected/uploaded */
     files?: CustomFile[];
     /** Callback when a single file is removed */
@@ -52,7 +52,7 @@ export interface SFileDropzoneProps extends DropzoneOptions {
  * Built on react-dropzone for robust file handling and supports all dropzone options
  * including file type restrictions, size limits, and custom validation.
  *
- * @param caption - Additional descriptive text below main upload message
+ * @param hint - Additional descriptive text below main upload message
  * @param label - Form field label
  * @param error - Error message to display when validation fails
  * @param onRemoveAll - Handler for removing all selected files
@@ -68,7 +68,7 @@ export interface SFileDropzoneProps extends DropzoneOptions {
  * ```tsx
  * <SFileDropzone
  *   label="Upload Documents"
- *   caption="PDF, DOC, or TXT files only"
+ *   hint="PDF, DOC, or TXT files only"
  *   accept={{
  *     'application/pdf': ['.pdf'],
  *     'application/msword': ['.doc', '.docx'],
@@ -83,5 +83,5 @@ export interface SFileDropzoneProps extends DropzoneOptions {
  * />
  * ```
  */
-declare const SFileDropzone: ({ caption, label, error, onRemoveAll, onUpload, onRemove, required, disabledUpload, isShowBtnRemoveAll, ...props }: SFileDropzoneProps) => React.JSX.Element;
+declare const SFileDropzone: ({ hint, label, error, onRemoveAll, onUpload, onRemove, required, disabledUpload, isShowBtnRemoveAll, ...props }: SFileDropzoneProps) => React.JSX.Element;
 export default SFileDropzone;

package/dist/s-file-dropzone/s-file-dropzone.js

@@ -1,34 +1,35 @@
 import { j as e } from "../jsx-runtime-DywqP_6a.js";
-import { c as p } from "../createSvgIcon-9XY7lJan.js";
-import { Avatar as y, Tooltip as b, IconButton as C, Button as I } from "@mui/material";
-import { useDropzone as z } from "react-dropzone";
-import S from "../s-file-icon/s-file-icon.js";
-import k from "../s-form/s-form.js";
-import { bytesToSize as w } from "../utils/bytes-to-size.js";
+import * as y from "react";
+import { c as d } from "../createSvgIcon-9XY7lJan.js";
+import { Avatar as b, Tooltip as C, IconButton as I, Button as z } from "@mui/material";
+import { useDropzone as S } from "react-dropzone";
+import k from "../s-file-icon/s-file-icon.js";
+import w from "../s-form/s-form.js";
+import { bytesToSize as B } from "../utils/bytes-to-size.js";
+import { B as c } from "../Box-Bfkq7uIw.js";
 import { S as t } from "../Stack-W0weBtf9.js";
-import { B as d } from "../Box-Bfkq7uIw.js";
 import { T as o } from "../Typography-CeAbQ9LX.js";
-const B = p(/* @__PURE__ */ e.jsx("path", {
+const D = d(/* @__PURE__ */ e.jsx("path", {
   d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "CloseOutlined"), D = p(/* @__PURE__ */ e.jsx("path", {
+}), "CloseOutlined"), F = d(/* @__PURE__ */ e.jsx("path", {
   d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3M8 13h2.55v3h2.9v-3H16l-4-4z"
-}), "CloudUploadOutlined"), G = ({
-  caption: i,
+}), "CloudUploadOutlined"), J = ({
+  hint: p,
   label: x = "",
   error: m,
-  onRemoveAll: u,
+  onRemoveAll: h,
   onUpload: M,
   onRemove: s,
-  required: h = !1,
+  required: u = !1,
   disabledUpload: O = !1,
   isShowBtnRemoveAll: j = !1,
   ...n
 }) => {
-  var a, c;
-  const { getRootProps: g, getInputProps: f, isDragActive: l } = z(n);
-  return /* @__PURE__ */ e.jsxs(k, { error: m, label: x, required: h, children: [
-    /* @__PURE__ */ e.jsx(t, { spacing: 2, mt: "0.5rem", children: /* @__PURE__ */ e.jsxs(
-      d,
+  var a, l;
+  const { getRootProps: f, getInputProps: g, isDragActive: i } = S(n);
+  return /* @__PURE__ */ e.jsxs(y.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(w, { error: m, label: x, required: u, hint: p, children: /* @__PURE__ */ e.jsxs(
+      c,
       {
         sx: {
           alignItems: "center",
@@ -41,45 +42,43 @@ const B = p(/* @__PURE__ */ e.jsx("path", {
           outline: "none",
           p: 4,
           // Visual feedback when files are being dragged over
-          ...l && {
+          ...i && {
             bgcolor: "var(--s-palette-action-selected)",
             opacity: 0.5
           },
           // Hover effect when not actively dragging
           "&:hover": {
-            ...!l && {
+            ...!i && {
               bgcolor: "var(--s-palette-action-hover)"
             }
           }
         },
-        ...g(),
+        ...f(),
         children: [
-          /* @__PURE__ */ e.jsx("input", { ...f() }),
-          /* @__PURE__ */ e.jsxs(t, { direction: "row", spacing: 2, sx: { alignItems: "center" }, children: [
+          /* @__PURE__ */ e.jsx("input", { ...g() }),
+          /* @__PURE__ */ e.jsxs(t, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [
             /* @__PURE__ */ e.jsx(
-              y,
+              b,
               {
                 sx: {
-                  bgcolor: "var(--s-palette-background-paper)",
-                  color: "var(--s-palette-text-secondary)"
+                  border: "1px dashed var(--s-palette-divider)",
+                  color: "var(--s-palette-text-secondary)",
+                  backgroundColor: "transparent"
                 },
-                children: /* @__PURE__ */ e.jsx(D, {})
+                children: /* @__PURE__ */ e.jsx(F, { fontSize: "small" })
               }
             ),
-            /* @__PURE__ */ e.jsxs(t, { spacing: 1, children: [
-              /* @__PURE__ */ e.jsxs(o, { color: "text.secondary", variant: "body2", children: [
-                /* @__PURE__ */ e.jsx(o, { component: "span", sx: { textDecoration: "underline" }, variant: "inherit", children: "Click to upload" }),
-                " ",
-                "or drag and drop your files here"
-              ] }),
-              i ? /* @__PURE__ */ e.jsx(o, { color: "text.secondary", variant: "body2", children: i }) : null
-            ] })
+            /* @__PURE__ */ e.jsx(t, { spacing: 1, children: /* @__PURE__ */ e.jsxs(o, { color: "text.secondary", variant: "body2", children: [
+              /* @__PURE__ */ e.jsx(o, { component: "span", sx: { textDecoration: "underline" }, variant: "inherit", children: "Click to upload" }),
+              " ",
+              "or drag and drop your files here"
+            ] }) })
           ] })
         ]
       }
     ) }),
-    (a = n.files) != null && a.length ? /* @__PURE__ */ e.jsxs(t, { mt: 2, spacing: 2, children: [
-      /* @__PURE__ */ e.jsx(t, { component: "ul", spacing: 1, sx: { listStyle: "none", m: 0, p: 0 }, children: (c = n.files) == null ? void 0 : c.map((r) => {
+    (a = n.files) != null && a.length ? /* @__PURE__ */ e.jsxs(t, { mt: 1, spacing: 1, children: [
+      /* @__PURE__ */ e.jsx(t, { component: "ul", spacing: 1, sx: { listStyle: "none", m: 0, p: 0 }, children: (l = n.files) == null ? void 0 : l.map((r) => {
         const v = r.name.split(".").pop();
         return /* @__PURE__ */ e.jsxs(
           t,
@@ -95,18 +94,18 @@ const B = p(/* @__PURE__ */ e.jsx("path", {
               p: 1
             },
             children: [
-              /* @__PURE__ */ e.jsx(S, { extension: v }),
-              /* @__PURE__ */ e.jsxs(d, { sx: { flex: "1 1 auto" }, children: [
+              /* @__PURE__ */ e.jsx(k, { extension: v }),
+              /* @__PURE__ */ e.jsxs(c, { sx: { flex: "1 1 auto" }, children: [
                 /* @__PURE__ */ e.jsx(o, { variant: "subtitle2", children: r.name }),
-                /* @__PURE__ */ e.jsx(o, { color: "text.secondary", variant: "body2", children: w(r.size) })
+                /* @__PURE__ */ e.jsx(o, { color: "text.secondary", variant: "body2", children: B(r.size) })
               ] }),
-              /* @__PURE__ */ e.jsx(b, { title: "Remove", children: /* @__PURE__ */ e.jsx(
-                C,
+              /* @__PURE__ */ e.jsx(C, { title: "Remove", children: /* @__PURE__ */ e.jsx(
+                I,
                 {
                   onClick: () => {
                     s == null || s(r);
                   },
-                  children: /* @__PURE__ */ e.jsx(B, {})
+                  children: /* @__PURE__ */ e.jsx(D, {})
                 }
               ) })
             ]
@@ -114,10 +113,10 @@ const B = p(/* @__PURE__ */ e.jsx("path", {
           r.size
         );
       }) }),
-      /* @__PURE__ */ e.jsx(t, { direction: "row", spacing: 2, sx: { alignItems: "center", justifyContent: "flex-end" }, children: j && /* @__PURE__ */ e.jsx(I, { onClick: u, size: "small", type: "button", variant: "text", children: "Remove all" }) })
+      /* @__PURE__ */ e.jsx(t, { direction: "row", sx: { alignItems: "center", justifyContent: "flex-end" }, children: j && /* @__PURE__ */ e.jsx(z, { onClick: h, size: "small", type: "button", variant: "text", children: "Remove all" }) })
     ] }) : null
   ] });
 };
 export {
-  G as default
+  J as default
 };