@solostylist/ui-kit 1.0.161 → 1.0.162

package/dist/s-dialog/s-dialog.d.ts

@@ -34,9 +34,10 @@ export interface SDialogProps {
  * - Consistent title styling with capitalization
  * - Flexible content and action areas
  * - Proper spacing and alignment for title elements
+ * - Ref forwarding to DialogContent for scroll control
  *
  * @param props - SDialogProps with dialog configuration and content
  * @returns JSX.Element - Enhanced Material-UI Dialog
  */
-declare const SDialog: ({ title, content, actions, onClose, open, maxWidth, useForm, onSubmit, showClose, }: SDialogProps) => React.JSX.Element;
+declare const SDialog: React.ForwardRefExoticComponent<SDialogProps & React.RefAttributes<HTMLDivElement>>;
 export default SDialog;

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

@@ -1,31 +1,35 @@
 import { j as r } from "../jsx-runtime-OVHDjVDe.js";
+import * as f from "react";
 import { C as j } from "../Close-D4kX7Vbc.js";
-import { Dialog as h, DialogTitle as p, Stack as f, Typography as t, IconButton as m, DialogContent as g, DialogActions as u } from "@mui/material";
-const v = ({
-  title: s,
-  content: e,
-  actions: i,
-  onClose: n = () => {
-  },
-  open: a = !1,
-  maxWidth: l = "sm",
-  useForm: c = !1,
-  onSubmit: x = () => {
-  },
-  showClose: d = !0
-}) => {
-  const o = /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-    e && /* @__PURE__ */ r.jsx(g, { children: typeof e == "string" ? /* @__PURE__ */ r.jsx(t, { color: "text.secondary", variant: "body2", children: e }) : e }),
-    i && /* @__PURE__ */ r.jsx(u, { children: i })
-  ] });
-  return /* @__PURE__ */ r.jsxs(h, { fullWidth: !0, maxWidth: l, onClose: n, open: a, children: [
-    s && /* @__PURE__ */ r.jsx(p, { children: /* @__PURE__ */ r.jsxs(f, { direction: "row", spacing: 3, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
-      typeof s == "string" ? /* @__PURE__ */ r.jsx(t, { variant: "h5", textTransform: "capitalize", children: s }) : /* @__PURE__ */ r.jsx("div", { children: s }),
-      d && /* @__PURE__ */ r.jsx(m, { onClick: n, children: /* @__PURE__ */ r.jsx(j, {}) })
-    ] }) }),
-    c ? /* @__PURE__ */ r.jsx("form", { onSubmit: x, children: o }) : o
-  ] });
-};
+import { Dialog as m, DialogTitle as h, Stack as g, Typography as n, IconButton as u, DialogContent as y, DialogActions as D } from "@mui/material";
+const w = f.forwardRef(
+  ({
+    title: s,
+    content: e,
+    actions: i,
+    onClose: o = () => {
+    },
+    open: t = !1,
+    maxWidth: l = "sm",
+    useForm: c = !1,
+    onSubmit: d = () => {
+    },
+    showClose: x = !0
+  }, p) => {
+    const a = /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+      e && /* @__PURE__ */ r.jsx(y, { ref: p, children: typeof e == "string" ? /* @__PURE__ */ r.jsx(n, { color: "text.secondary", variant: "body2", children: e }) : e }),
+      i && /* @__PURE__ */ r.jsx(D, { children: i })
+    ] });
+    return /* @__PURE__ */ r.jsxs(m, { fullWidth: !0, maxWidth: l, onClose: o, open: t, children: [
+      s && /* @__PURE__ */ r.jsx(h, { children: /* @__PURE__ */ r.jsxs(g, { direction: "row", spacing: 3, sx: { alignItems: "center", justifyContent: "space-between" }, children: [
+        typeof s == "string" ? /* @__PURE__ */ r.jsx(n, { variant: "h5", textTransform: "capitalize", children: s }) : /* @__PURE__ */ r.jsx("div", { children: s }),
+        x && /* @__PURE__ */ r.jsx(u, { onClick: o, children: /* @__PURE__ */ r.jsx(j, {}) })
+      ] }) }),
+      c ? /* @__PURE__ */ r.jsx("form", { onSubmit: d, children: a }) : a
+    ] });
+  }
+);
+w.displayName = "SDialog";
 export {
-  v as default
+  w as default
 };

package/dist/s-text-truncation/s-text-truncation.d.ts

@@ -5,32 +5,45 @@ import { default as React } from 'react';
 export interface STextTruncationProps {
     /** The text content to display with truncation functionality */
     text?: string;
+    /** Variant to control display behavior: 'expandable' shows See more/less link, 'tooltip' shows ellipsis with hover tooltip */
+    variant?: 'expandable' | 'tooltip';
+    /** Number of lines to display before truncation (default: 3) */
+    lines?: number;
 }
 /**
- * Text truncation component with expandable "See more" functionality
+ * Text truncation component with expandable "See more" functionality or tooltip display
  *
- * Automatically truncates long text content and provides a "See more" link
- * to expand the full content. The truncation threshold is set at 20 words.
- * Uses CSS classes for styling the truncated vs expanded states.
+ * Automatically truncates long text content and provides either:
+ * - 'expandable' (default): A "See more" link to expand the full content
+ * - 'tooltip': Shows ellipsis with full text displayed on hover
+ *
+ * The truncation threshold is set at 20 words for expandable variant.
+ * All styling is handled inline using Material-UI's sx prop.
  *
  * Features:
- * - Automatic word count-based truncation (20+ words triggers truncation)
- * - Toggle between truncated and expanded states
- * - CSS class-based styling for different states
+ * - Automatic word count-based truncation (20+ words triggers truncation in expandable mode)
+ * - Expandable variant: Toggle between truncated and expanded states
+ * - Tooltip variant: Hover to see full text
+ * - Inline sx prop styling for all states
  * - Accessible link interaction for expansion/collapse
- *
- * Requires accompanying CSS file (./index.css) that defines:
- * - .truncated-text: Styling for truncated state
- * - .full-text: Styling for expanded state
- * - .see-more: Styling for the toggle link
+ * - Dynamic line control via props
  *
  * @param text - The text content to display and potentially truncate
+ * @param variant - Display variant: 'expandable' for See more/less link, 'tooltip' for hover tooltip
+ * @param lines - Number of lines to display before truncation (default: 3)
  * @returns JSX element containing text with optional truncation controls
  *
  * @example
  * ```tsx
+ * // Expandable variant (default)
  * <STextTruncation text="Very long text content that will be truncated after twenty words and show a see more link for users to expand the full content when needed..." />
+ *
+ * // Tooltip variant
+ * <STextTruncation variant="tooltip" text="Very long text content that will show ellipsis and display full text on hover..." />
+ *
+ * // Custom line count
+ * <STextTruncation lines={5} text="Long text..." />
  * ```
  */
-declare const STextTruncation: ({ text }: STextTruncationProps) => React.JSX.Element;
+declare const STextTruncation: ({ text, variant, lines }: STextTruncationProps) => React.JSX.Element;
 export default STextTruncation;

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

@@ -1,15 +1,56 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as a, Fragment as t } from "react";
-import { Typography as i, Link as l } from "@mui/material";
-import '../assets/s-text-truncation.css';const d = ({ text: e }) => {
-  const [s, n] = a(!1), o = () => {
-    n(!s);
+import { j as i } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as a, Fragment as p } from "react";
+import { Tooltip as d, Typography as r, Link as c } from "@mui/material";
+const f = ({ text: e, variant: n = "expandable", lines: o = 3 }) => {
+  const [l, s] = a(!1), t = () => {
+    s(!l);
   };
-  return /* @__PURE__ */ r.jsxs(t, { children: [
-    /* @__PURE__ */ r.jsx(i, { className: s ? "full-text" : "truncated-text", variant: "body2", children: e }),
-    e && (e == null ? void 0 : e.split(" ").length) > 20 ? /* @__PURE__ */ r.jsx(l, { className: "see-more", onClick: o, sx: { cursor: "pointer", fontSize: "0.875rem" }, children: s ? "See less" : "See more" }) : null
+  return n === "tooltip" ? /* @__PURE__ */ i.jsx(d, { title: e || "", arrow: !0, children: /* @__PURE__ */ i.jsx(
+    r,
+    {
+      variant: "body2",
+      sx: {
+        display: "-webkit-box",
+        WebkitBoxOrient: "vertical",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        WebkitLineClamp: o,
+        lineClamp: o
+      },
+      children: e
+    }
+  ) }) : /* @__PURE__ */ i.jsxs(p, { children: [
+    /* @__PURE__ */ i.jsx(
+      r,
+      {
+        variant: "body2",
+        sx: l ? {
+          display: "block"
+        } : {
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          WebkitLineClamp: o,
+          lineClamp: o
+        },
+        children: e
+      }
+    ),
+    e && (e == null ? void 0 : e.split(" ").length) > 20 ? /* @__PURE__ */ i.jsx(
+      c,
+      {
+        onClick: t,
+        sx: {
+          cursor: "pointer",
+          fontSize: "0.875rem",
+          display: "inline-block"
+        },
+        children: l ? "See less" : "See more"
+      }
+    ) : null
   ] });
 };
 export {
-  d as default
+  f as default
 };

package/dist/theme/theme-primitives.d.ts

@@ -42,6 +42,7 @@ declare module '@mui/material/styles' {
             secondary: string;
             indigo: string;
             sky: string;
+            radial: string;
         };
         ui: {
             pulse: {
@@ -256,6 +257,7 @@ export declare const colorSchemes: {
                 secondary: string;
                 indigo: string;
                 sky: string;
+                radial: string;
             };
             blackAlpha: {
                 zero: string;
@@ -347,6 +349,7 @@ export declare const colorSchemes: {
                 secondary: string;
                 indigo: string;
                 sky: string;
+                radial: string;
             };
             blackAlpha: {
                 zero: string;

package/dist/theme/theme-primitives.js

@@ -1,6 +1,6 @@
 import { a as m } from "../createTheme-3Wd3hHrj.js";
 import { a as r } from "../colorManipulator-ep5lERxB.js";
-const l = m(), e = {
+const s = m(), e = {
   50: "hsl(210, 100%, 95%)",
   100: "hsl(210, 100%, 92%)",
   200: "hsl(210, 100%, 80%)",
@@ -11,7 +11,7 @@ const l = m(), e = {
   700: "hsl(210, 100%, 35%)",
   800: "hsl(210, 100%, 16%)",
   900: "hsl(210, 100%, 21%)"
-}, n = {
+}, i = {
   50: "hsl(220, 60%, 98%)",
   100: "hsl(220, 55%, 95%)",
   200: "hsl(220, 50%, 88%)",
@@ -22,7 +22,7 @@ const l = m(), e = {
   700: "hsl(220, 95%, 31%)",
   800: "hsl(220, 100%, 24%)",
   900: "hsl(220, 100%, 18%)"
-}, t = {
+}, a = {
   50: "hsl(220, 35%, 97%)",
   100: "hsl(220, 30%, 94%)",
   200: "hsl(220, 20%, 88%)",
@@ -33,7 +33,7 @@ const l = m(), e = {
   700: "hsl(220, 20%, 25%)",
   800: "hsl(220, 30%, 6%)",
   900: "hsl(220, 35%, 3%)"
-}, a = {
+}, t = {
   50: "hsl(210, 20%, 98%)",
   100: "hsl(210, 15%, 95%)",
   200: "hsl(210, 12%, 89%)",
@@ -44,7 +44,7 @@ const l = m(), e = {
   700: "hsl(210, 18%, 35%)",
   800: "hsl(210, 24%, 28%)",
   900: "hsl(210, 30%, 22%)"
-}, i = {
+}, n = {
   50: "hsl(120, 80%, 98%)",
   100: "hsl(120, 75%, 94%)",
   200: "hsl(120, 75%, 87%)",
@@ -166,7 +166,7 @@ const l = m(), e = {
   80: "rgba(0,0,0,0.8)",
   90: "rgba(0,0,0,0.9)",
   100: "rgba(0,0,0,1)"
-}, s = {
+}, l = {
   0: "rgba(255,255,255,0)",
   10: "rgba(255,255,255,0.1)",
   20: "rgba(255,255,255,0.2)",
@@ -184,7 +184,8 @@ const l = m(), e = {
       primary: "linear-gradient(90deg, #1469be 0%, #43ecff 100%);",
       secondary: "linear-gradient(90deg, #0088F6 0%, #1DDD83 77.25%)",
       indigo: "linear-gradient(to right, transparent, #6366f1, transparent)",
-      sky: "linear-gradient(to right, transparent, #0ea5e9, transparent)"
+      sky: "linear-gradient(to right, transparent, #0ea5e9, transparent)",
+      radial: "radial-gradient(at 50% 50%, hsla(210, 100%, 16%, 0.5), hsl(220, 30%, 5%))"
     },
     blackAlpha: {
       zero: h[0],
@@ -194,19 +195,19 @@ const l = m(), e = {
       full: h[100]
     },
     whiteAlpha: {
-      zero: s[0],
-      light: s[10],
-      medium: s[50],
-      dark: s[80],
-      full: s[100]
+      zero: l[0],
+      light: l[10],
+      medium: l[50],
+      dark: l[80],
+      full: l[100]
     },
     ui: {
       pulse: {
-        shadowLight: s[30],
-        shadowMedium: s[60],
-        ring: s[80],
-        background: s[80],
-        radialGradient: `radial-gradient(circle, ${s[30]} 0%, ${s[10]} 50%, transparent 100%)`
+        shadowLight: l[30],
+        shadowMedium: l[60],
+        ring: l[80],
+        background: l[80],
+        radialGradient: `radial-gradient(circle, ${l[30]} 0%, ${l[10]} 50%, transparent 100%)`
       }
     },
     primary: {
@@ -236,24 +237,24 @@ const l = m(), e = {
       dark: b[700]
     },
     success: {
-      contrastText: i[50],
-      light: i[400],
-      main: i[500],
-      dark: i[700]
+      contrastText: n[50],
+      light: n[400],
+      main: n[500],
+      dark: n[700]
     },
-    grey: t,
-    divider: r(t[700], 0.6),
+    grey: a,
+    divider: r(a[700], 0.6),
     background: {
-      default: t[900],
-      paper: t[800]
+      default: a[900],
+      paper: a[800]
     },
     text: {
       primary: "rgb(255, 255, 255)",
-      secondary: t[400]
+      secondary: a[400]
     },
     action: {
-      hover: r(t[600], 0.2),
-      selected: r(t[600], 0.3)
+      hover: r(a[600], 0.2),
+      selected: r(a[600], 0.3)
     },
     baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
   }
@@ -263,7 +264,8 @@ const l = m(), e = {
       primary: "linear-gradient(90deg, #0ea5e9 0%, #2563eb 100%)",
       secondary: "linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%)",
       indigo: "linear-gradient(to right, transparent, rgba(79, 70, 229, 0.6), transparent)",
-      sky: "linear-gradient(to right, transparent, rgba(14, 165, 233, 0.55), transparent)"
+      sky: "linear-gradient(to right, transparent, rgba(14, 165, 233, 0.55), transparent)",
+      radial: "radial-gradient(at 50% 50%, hsla(210, 100%, 84%, 0.5), hsl(220, 30%, 95%))"
     },
     blackAlpha: {
       zero: h[0],
@@ -273,11 +275,11 @@ const l = m(), e = {
       full: h[100]
     },
     whiteAlpha: {
-      zero: s[0],
-      light: s[10],
-      medium: s[50],
-      dark: s[80],
-      full: s[100]
+      zero: l[0],
+      light: l[10],
+      medium: l[50],
+      dark: l[80],
+      full: l[100]
     },
     ui: {
       pulse: {
@@ -289,10 +291,10 @@ const l = m(), e = {
       }
     },
     primary: {
-      contrastText: n[50],
-      light: n[200],
-      main: n[500],
-      dark: n[700],
+      contrastText: i[50],
+      light: i[200],
+      main: i[500],
+      dark: i[700],
       white: "#ffffff",
       black: "#000000"
     },
@@ -320,19 +322,19 @@ const l = m(), e = {
       main: o[500],
       dark: o[700]
     },
-    grey: a,
-    divider: r(a[300], 0.9),
+    grey: t,
+    divider: r(t[300], 0.9),
     background: {
-      default: a[50],
-      paper: a[100]
+      default: t[50],
+      paper: t[100]
     },
     text: {
       primary: "rgb(77, 77, 77)",
-      secondary: a[500]
+      secondary: t[500]
     },
     action: {
-      hover: r(a[300], 0.2),
-      selected: r(a[300], 0.3)
+      hover: r(t[300], 0.2),
+      selected: r(t[300], 0.3)
     },
     baseShadow: "rgba(15, 23, 42, 0.08) 0px 2px 8px 0px, rgba(15, 23, 42, 0.04) 0px 1px 2px -1px"
     // Premium shadows with subtle slate tint
@@ -340,64 +342,64 @@ const l = m(), e = {
 }, z = { light: x, dark: y }, R = {
   fontFamily: "Outfit, sans-serif",
   h1: {
-    fontSize: l.typography.pxToRem(48),
+    fontSize: s.typography.pxToRem(48),
     fontWeight: 600,
     lineHeight: 1.2,
     letterSpacing: -0.5
   },
   h2: {
-    fontSize: l.typography.pxToRem(36),
+    fontSize: s.typography.pxToRem(36),
     fontWeight: 600,
     lineHeight: 1.2
   },
   h3: {
-    fontSize: l.typography.pxToRem(30),
+    fontSize: s.typography.pxToRem(30),
     lineHeight: 1.2
   },
   h4: {
-    fontSize: l.typography.pxToRem(24),
+    fontSize: s.typography.pxToRem(24),
     fontWeight: 600,
     lineHeight: 1.5
   },
   h5: {
-    fontSize: l.typography.pxToRem(20),
+    fontSize: s.typography.pxToRem(20),
     fontWeight: 600
   },
   h6: {
-    fontSize: l.typography.pxToRem(18),
+    fontSize: s.typography.pxToRem(18),
     fontWeight: 600
   },
   subtitle1: {
-    fontSize: l.typography.pxToRem(18)
+    fontSize: s.typography.pxToRem(18)
   },
   subtitle2: {
-    fontSize: l.typography.pxToRem(14),
+    fontSize: s.typography.pxToRem(14),
     fontWeight: 500
   },
   body1: {
-    fontSize: l.typography.pxToRem(14)
+    fontSize: s.typography.pxToRem(14)
   },
   body2: {
-    fontSize: l.typography.pxToRem(14),
+    fontSize: s.typography.pxToRem(14),
     fontWeight: 400
   },
   caption: {
-    fontSize: l.typography.pxToRem(12),
+    fontSize: s.typography.pxToRem(12),
     fontWeight: 400
   }
 }, W = {
   borderRadius: 8
-}, u = ["none", "var(--s-palette-baseShadow)", ...l.shadows.slice(2)], A = u;
+}, u = ["none", "var(--s-palette-baseShadow)", ...s.shadows.slice(2)], A = u;
 export {
   h as blackAlpha,
   d as blue,
   e as brand,
   z as colorSchemes,
-  t as gray,
-  i as green,
+  a as gray,
+  n as green,
   c as lightBlue,
-  n as lightBrand,
-  a as lightGray,
+  i as lightBrand,
+  t as lightGray,
   o as lightGreen,
   p as lightOrange,
   S as lightPurple,
@@ -408,5 +410,5 @@ export {
   A as shadows,
   W as shape,
   R as typography,
-  s as whiteAlpha
+  l as whiteAlpha
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.161",
+  "version": "1.0.162",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",

package/dist/assets/s-text-truncation.css

@@ -1 +0,0 @@
-.truncated-text{display:-webkit-box;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.full-text{display:block}.see-more{display:inline-block}