@solostylist/ui-kit 1.0.167 → 1.0.168

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

@@ -1,48 +1,58 @@
-import { j as s } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as j } from "react";
-import { TextField as h, InputAdornment as w, IconButton as b } from "@mui/material";
-import y from "../s-form/s-form.js";
+import { j as e } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as h } from "react";
+import { TextField as _, InputAdornment as w, IconButton as b } from "@mui/material";
+import { SForm as u } from "../s-form/s-form.js";
 import { c } from "../createSvgIcon-DxwgGAVe.js";
-const g = c(/* @__PURE__ */ s.jsx("path", {
+const j = c(/* @__PURE__ */ e.jsx("path", {
   d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
-}), "Visibility"), P = c(/* @__PURE__ */ s.jsx("path", {
+}), "Visibility"), S = c(/* @__PURE__ */ e.jsx("path", {
   d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7M2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z"
-}), "VisibilityOff"), v = ({
-  label: d = "",
-  required: a = !1,
-  error: i,
-  type: o = "text",
-  htmlFor: e,
-  hint: p,
-  ...l
+}), "VisibilityOff"), s = ({
+  label: t = "",
+  required: p = !1,
+  error: o,
+  type: r = "text",
+  htmlFor: l,
+  hint: m,
+  ...n
 }) => {
-  var r;
-  const [t, m] = j(!1), n = o === "password", x = () => {
-    m(!t);
-  }, f = n && t ? "text" : o, u = n ? /* @__PURE__ */ s.jsx(w, { position: "end", children: /* @__PURE__ */ s.jsx(
+  var a;
+  const [i, x] = h(!1), d = r === "password", f = () => {
+    x(!i);
+  }, g = d && i ? "text" : r, y = d ? /* @__PURE__ */ e.jsx(w, { position: "end", children: /* @__PURE__ */ e.jsx(
     b,
     {
       "aria-label": "toggle password visibility",
-      onClick: x,
+      onClick: f,
       edge: "end",
       size: "small",
-      children: t ? /* @__PURE__ */ s.jsx(P, {}) : /* @__PURE__ */ s.jsx(g, {})
+      children: i ? /* @__PURE__ */ e.jsx(S, {}) : /* @__PURE__ */ e.jsx(j, {})
     }
   ) }) : void 0;
-  return /* @__PURE__ */ s.jsx(y, { label: d, hint: p, error: i, required: a, htmlFor: e, children: /* @__PURE__ */ s.jsx(
-    h,
+  return /* @__PURE__ */ e.jsx(u, { label: t, hint: m, error: o, required: p, htmlFor: l, children: /* @__PURE__ */ e.jsx(
+    _,
     {
       fullWidth: !0,
-      type: f,
-      id: e,
-      error: !!i,
-      ...l,
+      type: g,
+      id: l,
+      error: !!o,
+      ...n,
       slotProps: {
-        input: { endAdornment: u, ...(r = l.slotProps) == null ? void 0 : r.input }
+        input: { endAdornment: y, ...(a = n.slotProps) == null ? void 0 : a.input }
       }
     }
   ) });
 };
+s.displayName = "STextField";
+try {
+  s.displayName = "STextField", s.__docgenInfo = { description: "An enhanced text field component with integrated form labeling, error handling, and password visibility toggle.", displayName: "STextField", props: {} };
+} catch {
+}
+try {
+  stextfield.displayName = "stextfield", stextfield.__docgenInfo = { description: "An enhanced text field component with integrated form labeling, error handling, and password visibility toggle.", displayName: "stextfield", props: {} };
+} catch {
+}
 export {
-  v as default
+  s as STextField,
+  s as default
 };

package/dist/s-text-shimmer/index.js

@@ -1,4 +1,4 @@
-import { default as o } from "./s-text-shimmer.js";
+import { STextShimmer as r } from "./s-text-shimmer.js";
 export {
-  o as default
+  r as default
 };

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

@@ -1,8 +1,17 @@
 import { BoxProps } from '@mui/material';
+/**
+ * Props interface for STextShimmer component
+ */
 export interface STextShimmerProps extends Omit<BoxProps, 'children'> {
+    /** The text content to display with the shimmer effect */
     children: string;
+    /** Duration of the shimmer animation in seconds */
     duration?: number;
+    /** Multiplier for the shimmer spread width */
     spread?: number;
 }
-declare const STextShimmer: import('react').ForwardRefExoticComponent<Omit<STextShimmerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * A text component that creates an animated shimmer effect.
+ */
+export declare const STextShimmer: import('react').ForwardRefExoticComponent<Omit<STextShimmerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default STextShimmer;

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

@@ -1,18 +1,18 @@
-import { j as s } from "../jsx-runtime-OVHDjVDe.js";
-import { forwardRef as d, useMemo as p } from "react";
-import { Box as m } from "@mui/material";
+import { j as d } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as m, useMemo as p } from "react";
+import { Box as l } from "@mui/material";
 import { s as c } from "../styled-B0Z4EDy9.js";
-import { keyframes as l } from "@emotion/react";
-const b = l`
+import { keyframes as u } from "@emotion/react";
+const h = u`
   0% {
     background-position: 100% center;
   }
   100% {
     background-position: 0% center;
   }
-`, g = c(m, {
-  shouldForwardProp: (r) => r !== "duration" && r !== "dynamicSpread" && r !== "component"
-})(({ theme: r, duration: e, dynamicSpread: a }) => ({
+`, f = c(l, {
+  shouldForwardProp: (e) => e !== "duration" && e !== "dynamicSpread" && e !== "component"
+})(({ theme: e, duration: t, dynamicSpread: r }) => ({
   display: "inline-block",
   position: "relative",
   backgroundClip: "text",
@@ -20,18 +20,27 @@ const b = l`
   color: "transparent",
   backgroundSize: "250% 100%, auto",
   backgroundRepeat: "no-repeat, padding-box",
-  animation: `${b} ${e}s linear infinite`,
-  "--spread": `${a}px`,
-  "--base-color": (r.vars || r).palette.text.disabled,
-  "--base-gradient-color": (r.vars || r).palette.text.primary,
+  animation: `${h} ${t}s linear infinite`,
+  "--spread": `${r}px`,
+  "--base-color": (e.vars || e).palette.text.disabled,
+  "--base-gradient-color": (e.vars || e).palette.text.primary,
   backgroundImage: "linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--base-gradient-color), transparent calc(50% + var(--spread))), linear-gradient(var(--base-color), var(--base-color))"
-})), u = d(
-  ({ children: r, duration: e = 2, spread: a = 2, component: o = "p", ...t }, n) => {
-    const i = p(() => r.length * a, [r, a]);
-    return /* @__PURE__ */ s.jsx(g, { ref: n, component: o, duration: e, dynamicSpread: i, ...t, children: r });
+})), a = m(
+  ({ children: e, duration: t = 2, spread: r = 2, component: i = "p", ...n }, o) => {
+    const s = p(() => e.length * r, [e, r]);
+    return /* @__PURE__ */ d.jsx(f, { ref: o, component: i, duration: t, dynamicSpread: s, ...n, children: e });
   }
 );
-u.displayName = "STextShimmer";
+a.displayName = "STextShimmer";
+try {
+  a.displayName = "STextShimmer", a.__docgenInfo = { description: "A text component that creates an animated shimmer effect.", displayName: "STextShimmer", props: { children: { defaultValue: null, description: "The text content to display with the shimmer effect", name: "children", required: !0, type: { name: "string" } }, duration: { defaultValue: { value: "2" }, description: "Duration of the shimmer animation in seconds", name: "duration", required: !1, type: { name: "number" } }, spread: { defaultValue: { value: "2" }, description: "Multiplier for the shimmer spread width", name: "spread", required: !1, type: { name: "number" } } } };
+} catch {
+}
+try {
+  stextshimmer.displayName = "stextshimmer", stextshimmer.__docgenInfo = { description: "A text component that creates an animated shimmer effect.", displayName: "stextshimmer", props: { children: { defaultValue: null, description: "The text content to display with the shimmer effect", name: "children", required: !0, type: { name: "string" } }, duration: { defaultValue: { value: "2" }, description: "Duration of the shimmer animation in seconds", name: "duration", required: !1, type: { name: "number" } }, spread: { defaultValue: { value: "2" }, description: "Multiplier for the shimmer spread width", name: "spread", required: !1, type: { name: "number" } } } };
+} catch {
+}
 export {
-  u as default
+  a as STextShimmer,
+  a as default
 };

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

@@ -1,4 +1,4 @@
-import { default as o } from "./s-text-truncation.js";
+import { STextTruncation as e } from "./s-text-truncation.js";
 export {
-  o as default
+  e as default
 };

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

@@ -1,49 +1,20 @@
 import { default as React } from 'react';
 /**
- * Props for the STextTruncation component
+ * Props interface for STextTruncation component
  */
 export interface STextTruncationProps {
-    /** The text content to display with truncation functionality */
+    /** The text content to display and potentially truncate */
     text?: string;
-    /** Variant to control display behavior: 'expandable' shows See more/less link, 'tooltip' shows ellipsis with hover tooltip */
+    /** Display variant: 'expandable' shows See more/less link, 'tooltip' shows ellipsis with hover */
     variant?: 'expandable' | 'tooltip';
-    /** Number of lines to display before truncation (default: 3) */
+    /** Number of lines to display before truncation */
     lines?: number;
 }
 /**
- * Text truncation component with expandable "See more" functionality or tooltip display
- *
- * 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 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
- * - 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..." />
- * ```
+ * A text truncation component with expandable See more/less functionality or hover tooltip.
  */
-declare const STextTruncation: ({ text, variant, lines }: STextTruncationProps) => React.JSX.Element;
+export declare const STextTruncation: {
+    ({ text, variant, lines, }: STextTruncationProps): React.JSX.Element;
+    displayName: string;
+};
 export default STextTruncation;

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

@@ -1,12 +1,16 @@
-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);
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as p, Fragment as d } from "react";
+import { Tooltip as u, Typography as l, Link as c } from "@mui/material";
+const i = ({
+  text: e,
+  variant: o = "expandable",
+  lines: a = 3
+}) => {
+  const [n, r] = p(!1), s = () => {
+    r(!n);
   };
-  return n === "tooltip" ? /* @__PURE__ */ i.jsx(d, { title: e || "", arrow: !0, children: /* @__PURE__ */ i.jsx(
-    r,
+  return o === "tooltip" ? /* @__PURE__ */ t.jsx(u, { title: e || "", arrow: !0, children: /* @__PURE__ */ t.jsx(
+    l,
     {
       variant: "body2",
       sx: {
@@ -14,43 +18,53 @@ const f = ({ text: e, variant: n = "expandable", lines: o = 3 }) => {
         WebkitBoxOrient: "vertical",
         overflow: "hidden",
         textOverflow: "ellipsis",
-        WebkitLineClamp: o,
-        lineClamp: o
+        WebkitLineClamp: a,
+        lineClamp: a
       },
       children: e
     }
-  ) }) : /* @__PURE__ */ i.jsxs(p, { children: [
-    /* @__PURE__ */ i.jsx(
-      r,
+  ) }) : /* @__PURE__ */ t.jsxs(d, { children: [
+    /* @__PURE__ */ t.jsx(
+      l,
       {
         variant: "body2",
-        sx: l ? {
+        sx: n ? {
           display: "block"
         } : {
           display: "-webkit-box",
           WebkitBoxOrient: "vertical",
           overflow: "hidden",
           textOverflow: "ellipsis",
-          WebkitLineClamp: o,
-          lineClamp: o
+          WebkitLineClamp: a,
+          lineClamp: a
         },
         children: e
       }
     ),
-    e && (e == null ? void 0 : e.split(" ").length) > 20 ? /* @__PURE__ */ i.jsx(
+    e && (e == null ? void 0 : e.split(" ").length) > 20 ? /* @__PURE__ */ t.jsx(
       c,
       {
-        onClick: t,
+        onClick: s,
         sx: {
           cursor: "pointer",
           fontSize: "0.875rem",
           display: "inline-block"
         },
-        children: l ? "See less" : "See more"
+        children: n ? "See less" : "See more"
       }
     ) : null
   ] });
 };
+i.displayName = "STextTruncation";
+try {
+  i.displayName = "STextTruncation", i.__docgenInfo = { description: "A text truncation component with expandable See more/less functionality or hover tooltip.", displayName: "STextTruncation", props: { text: { defaultValue: null, description: "The text content to display and potentially truncate", name: "text", required: !1, type: { name: "string" } }, variant: { defaultValue: { value: "expandable" }, description: "Display variant: 'expandable' shows See more/less link, 'tooltip' shows ellipsis with hover", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"tooltip"' }, { value: '"expandable"' }] } }, lines: { defaultValue: { value: "3" }, description: "Number of lines to display before truncation", name: "lines", required: !1, type: { name: "number" } } } };
+} catch {
+}
+try {
+  stexttruncation.displayName = "stexttruncation", stexttruncation.__docgenInfo = { description: "A text truncation component with expandable See more/less functionality or hover tooltip.", displayName: "stexttruncation", props: { text: { defaultValue: null, description: "The text content to display and potentially truncate", name: "text", required: !1, type: { name: "string" } }, variant: { defaultValue: { value: "expandable" }, description: "Display variant: 'expandable' shows See more/less link, 'tooltip' shows ellipsis with hover", name: "variant", required: !1, type: { name: "enum", value: [{ value: '"tooltip"' }, { value: '"expandable"' }] } }, lines: { defaultValue: { value: "3" }, description: "Number of lines to display before truncation", name: "lines", required: !1, type: { name: "number" } } } };
+} catch {
+}
 export {
-  f as default
+  i as STextTruncation,
+  i as default
 };