@solostylist/ui-kit 1.0.60 → 1.0.62

package/dist/assets/s-glow-button.css

@@ -0,0 +1 @@
+.gradient-text{background-image:var(--s-palette-gradient-primary);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

package/dist/main.d.ts

@@ -60,5 +60,9 @@ export { default as SDatePicker } from './s-date-picker/index';
 export type { SDatePickerProps } from './s-date-picker/index';
 export { default as SLocalizationProvider } from './s-localization-provider/index';
 export type { SLocalizationProviderProps } from './s-localization-provider/index';
+export { default as SGradientIcon } from './s-gradient-icon/index';
+export type { GradientIconProps } from './s-gradient-icon/index';
+export { default as SGlowButton } from './s-glow-button/index';
+export type { GlowButtonProps } from './s-glow-button/index';
 export * from './hooks';
 export * from './utils';

package/dist/main.js

@@ -10,12 +10,12 @@ import { default as k } from "./s-error/s-error.js";
 import { default as C } from "./s-empty/s-empty.js";
 import { default as M } from "./s-dialog/s-dialog.js";
 import { default as y } from "./s-file-dropzone/s-file-dropzone.js";
-import { default as h } from "./s-file-icon/s-file-icon.js";
-import { default as I } from "./s-i18n-provider/s-i18n-provider.js";
-import { default as N } from "./s-icon-button/s-icon-button.js";
-import { default as A } from "./s-label/s-label.js";
-import { default as q } from "./s-multi-select/s-multi-select.js";
-import { default as G } from "./s-no-ssr/s-no-ssr.js";
+import { default as I } from "./s-file-icon/s-file-icon.js";
+import { default as z } from "./s-i18n-provider/s-i18n-provider.js";
+import { default as G } from "./s-icon-button/s-icon-button.js";
+import { default as j } from "./s-label/s-label.js";
+import { default as A } from "./s-multi-select/s-multi-select.js";
+import { default as q } from "./s-no-ssr/s-no-ssr.js";
 import { default as J } from "./s-text-field/s-text-field.js";
 import { default as O } from "./s-pagination/s-pagination.js";
 import { default as R } from "./s-select/s-select.js";
@@ -30,17 +30,19 @@ import { default as ue } from "./s-theme-provider/s-theme-provider.js";
 import { default as ge } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as ce } from "./s-date-picker/s-date-picker.js";
 import { default as Pe } from "./s-localization-provider/s-localization-provider.js";
-import { useDialog as be } from "./hooks/use-dialog.js";
-import { usePopover as ve } from "./hooks/use-popover.js";
-import { formatDatePosted as Le } from "./utils/dayjs.js";
-import { bytesToSize as Fe } from "./utils/bytes-to-size.js";
-import { LogLevel as Ee, Logger as he, createLogger as ze, logger as Ie } from "./utils/logger.js";
-import { default as Ne } from "dayjs";
+import { default as be } from "./s-gradient-icon/s-gradient-icon.js";
+import { default as ve } from "./s-glow-button/s-glow-button.js";
+import { useDialog as Le } from "./hooks/use-dialog.js";
+import { usePopover as Fe } from "./hooks/use-popover.js";
+import { formatDatePosted as Ee } from "./utils/dayjs.js";
+import { bytesToSize as he } from "./utils/bytes-to-size.js";
+import { LogLevel as Be, Logger as Ge, createLogger as Ne, logger as je } from "./utils/logger.js";
+import { default as Ae } from "dayjs";
 export {
   i as DialogConfirmProvider,
   D as DialogMessageProvider,
-  Ee as LogLevel,
-  he as Logger,
+  Be as LogLevel,
+  Ge as Logger,
   r as SAutocomplete,
   a as SButtonLink,
   m as SCheckbox,
@@ -54,14 +56,16 @@ export {
   C as SEmpty,
   k as SError,
   y as SFileDropzone,
-  h as SFileIcon,
+  I as SFileIcon,
   ae as SForm,
-  I as SI18nProvider,
-  N as SIconButton,
-  A as SLabel,
+  ve as SGlowButton,
+  be as SGradientIcon,
+  z as SI18nProvider,
+  G as SIconButton,
+  j as SLabel,
   Pe as SLocalizationProvider,
-  q as SMultiSelect,
-  G as SNoSsr,
+  A as SMultiSelect,
+  q as SNoSsr,
   O as SPagination,
   R as SSelect,
   W as SSkeleton,
@@ -77,14 +81,14 @@ export {
   Y as STip,
   oe as SnackbarMessageProvider,
   xe as StripeTextField,
-  Fe as bytesToSize,
-  ze as createLogger,
-  Ne as dayjs,
-  Le as formatDatePosted,
-  Ie as logger,
-  be as useDialog,
+  he as bytesToSize,
+  Ne as createLogger,
+  Ae as dayjs,
+  Ee as formatDatePosted,
+  je as logger,
+  Le as useDialog,
   n as useDialogConfirm,
   T as useDialogMessage,
-  ve as usePopover,
+  Fe as usePopover,
   re as useSnackbarMessage
 };

package/dist/s-glow-button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-glow-button';
+export type { GlowButtonProps } from './s-glow-button';

package/dist/s-glow-button/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-glow-button.js";
+export {
+  o as default
+};

package/dist/s-glow-button/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-glow-button/s-glow-button.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ButtonProps } from '@mui/material';
+export interface GlowButtonProps extends ButtonProps {
+    borderRadius?: string | number;
+    children: React.ReactNode;
+    duration?: number;
+}
+declare const GlowButton: ({ borderRadius, children, duration, ...props }: GlowButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default GlowButton;

package/dist/s-glow-button/s-glow-button.js

@@ -0,0 +1,203 @@
+import { j as n } from "../jsx-runtime-C5mzlN2N.js";
+import { useRef as u, useEffect as A } from "react";
+import { Box as c, Button as $ } from "@mui/material";
+import { useMotionValue as z, useAnimationFrame as E, useTransform as b, useMotionTemplate as F, motion as B } from "framer-motion";
+import '../assets/s-glow-button.css';const w = 120, m = {
+  background: "#0f172acc",
+  glowColor: "#38bdf8"
+}, y = {
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  width: `${w}px`,
+  height: `${w}px`,
+  transform: "translate(-50%, -50%)",
+  opacity: 0.5,
+  background: `radial-gradient(${m.glowColor} 40%, transparent 60%)`,
+  filter: "blur(12px)",
+  pointerEvents: "none"
+};
+function v({
+  children: s,
+  duration: p,
+  rx: a,
+  ry: f,
+  phase: l = 0
+}) {
+  const t = u(null), e = z(0);
+  E((o) => {
+    var i;
+    const r = (i = t.current) == null ? void 0 : i.getTotalLength();
+    if (r) {
+      const h = r / p;
+      e.set((o * h + r * l) % r);
+    }
+  });
+  const d = b(e, (o) => {
+    var r, i;
+    return (i = (r = t.current) == null ? void 0 : r.getPointAtLength(o)) == null ? void 0 : i.x;
+  }), x = b(e, (o) => {
+    var r, i;
+    return (i = (r = t.current) == null ? void 0 : r.getPointAtLength(o)) == null ? void 0 : i.y;
+  }), g = F`translateX(${d}px) translateY(${x}px) translateX(-50%) translateY(-50%)`;
+  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+    /* @__PURE__ */ n.jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        preserveAspectRatio: "none",
+        width: "100%",
+        height: "100%",
+        style: { position: "absolute", inset: 0 },
+        children: /* @__PURE__ */ n.jsx("rect", { fill: "none", width: "100%", height: "100%", rx: a, ry: f, ref: t })
+      }
+    ),
+    /* @__PURE__ */ n.jsx(
+      B.div,
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          display: "inline-block",
+          transform: g
+        },
+        children: s
+      }
+    )
+  ] });
+}
+const X = ({ borderRadius: s = 2, children: p, duration: a = 5e3, ...f }) => {
+  const l = u(null), t = u(null), e = u(null), d = () => {
+    t.current && (e.current !== null && (window.cancelAnimationFrame(e.current), e.current = null), t.current.style.left = "50%", t.current.style.top = "50%", t.current.style.opacity = "0.7");
+  }, x = (o) => {
+    if (l.current && t.current) {
+      const r = l.current.getBoundingClientRect(), i = o.clientX - r.left, h = o.clientY - r.top;
+      e.current !== null && window.cancelAnimationFrame(e.current), e.current = window.requestAnimationFrame(() => {
+        if (t.current && l.current) {
+          const { left: j, top: k, right: M, bottom: C } = l.current.getBoundingClientRect();
+          o.clientX >= j && o.clientX <= M && o.clientY >= k && o.clientY <= C && (t.current.style.left = `${i}px`, t.current.style.top = `${h}px`, t.current.style.opacity = "0.7");
+        }
+      });
+    }
+  }, g = () => {
+    e.current !== null && (window.cancelAnimationFrame(e.current), e.current = null), t.current && (t.current.style.opacity = "0", t.current.style.left = "50%", t.current.style.top = "50%");
+  };
+  return A(() => () => {
+    e.current !== null && window.cancelAnimationFrame(e.current);
+  }, []), /* @__PURE__ */ n.jsxs(
+    c,
+    {
+      position: "relative",
+      overflow: "hidden",
+      height: "60px",
+      width: "100%",
+      padding: 0.125,
+      sx: {
+        borderRadius: s,
+        backgroundColor: "transparent"
+      },
+      children: [
+        /* @__PURE__ */ n.jsxs(
+          c,
+          {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            sx: {
+              borderRadius: `calc(${s}px * 0.7)`
+            },
+            children: [
+              /* @__PURE__ */ n.jsx(v, { duration: a, rx: "100%", ry: "100%", phase: 0, children: /* @__PURE__ */ n.jsx(c, { sx: { ...y, borderRadius: s } }) }),
+              /* @__PURE__ */ n.jsx(v, { duration: a, rx: "100%", ry: "100%", phase: 0.5, children: /* @__PURE__ */ n.jsx(c, { sx: { ...y, borderRadius: s } }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          c,
+          {
+            sx: {
+              position: "absolute",
+              pointerEvents: "none",
+              left: 0,
+              top: 0,
+              width: "100%",
+              height: "100%",
+              zIndex: 2
+            },
+            children: /* @__PURE__ */ n.jsx(
+              c,
+              {
+                ref: t,
+                sx: {
+                  position: "absolute",
+                  left: "50%",
+                  top: "50%",
+                  width: 120,
+                  height: 120,
+                  background: `radial-gradient(circle, ${m.glowColor} 0%, transparent 70%)`,
+                  opacity: 0,
+                  filter: "blur(16px)",
+                  borderRadius: "50%",
+                  transform: "translate(-50%, -50%)",
+                  transition: "left 0.15s cubic-bezier(.4,2,.6,1), top 0.15s cubic-bezier(.4,2,.6,1), opacity 0.2s"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ n.jsx(
+          $,
+          {
+            ref: l,
+            fullWidth: !0,
+            disableRipple: !0,
+            onMouseMove: x,
+            onMouseLeave: g,
+            onMouseEnter: d,
+            ...f,
+            sx: {
+              position: "relative",
+              zIndex: 1,
+              height: "100%",
+              borderRadius: s,
+              backgroundColor: m.background,
+              color: "var(--s-palette-text-main)",
+              backdropFilter: "blur(20px)",
+              fontSize: "0.875rem",
+              textTransform: "none",
+              fontWeight: 700,
+              overflow: "hidden",
+              "&:before": {
+                content: '""',
+                position: "absolute",
+                inset: 0,
+                zIndex: 0,
+                borderRadius: s,
+                padding: "2px",
+                background: "var(--s-palette-gradient-primary)",
+                WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+                WebkitMaskComposite: "xor",
+                maskComposite: "exclude",
+                pointerEvents: "none"
+              },
+              "& > *": {
+                position: "relative",
+                zIndex: 1
+              },
+              "&:hover": {
+                backgroundColor: "var(--s-palette-background-paper)"
+              }
+            },
+            children: /* @__PURE__ */ n.jsx(c, { className: "gradient-text", fontSize: 16, children: p })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  X as default
+};

package/dist/s-gradient-icon/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-gradient-icon';
+export type { GradientIconProps } from './s-gradient-icon';

package/dist/s-gradient-icon/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-gradient-icon.js";
+export {
+  o as default
+};

package/dist/s-gradient-icon/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-gradient-icon/s-gradient-icon.d.ts

@@ -0,0 +1,12 @@
+import { SvgIconProps, SvgIconTypeMap, SxProps } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+type IconComponent = OverridableComponent<SvgIconTypeMap<{}, 'svg'>> & {
+    muiName: string;
+};
+export interface GradientIconProps extends SvgIconProps {
+    hovered: boolean;
+    IconComponent: IconComponent;
+    sx?: SxProps;
+}
+declare const GradientIcon: ({ hovered, IconComponent, sx, ...props }: GradientIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default GradientIcon;

package/dist/s-gradient-icon/s-gradient-icon.js

@@ -0,0 +1,22 @@
+import { j as e } from "../jsx-runtime-C5mzlN2N.js";
+const l = ({ hovered: t, IconComponent: r, sx: s, ...i }) => r ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  /* @__PURE__ */ e.jsx("svg", { width: 0, height: 0, children: /* @__PURE__ */ e.jsxs("linearGradient", { id: "headerGradient", x1: "0", y1: "0", x2: "1", y2: "1", children: [
+    /* @__PURE__ */ e.jsx("stop", { offset: "0%", stopColor: "#1469be" }),
+    /* @__PURE__ */ e.jsx("stop", { offset: "100%", stopColor: "#43ecff" })
+  ] }) }),
+  /* @__PURE__ */ e.jsx(
+    r,
+    {
+      ...i,
+      sx: {
+        fontSize: "1.5rem",
+        fill: t ? "url(#headerGradient)" : "var(--s-palette-text-primary)",
+        transition: "fill 0.3s",
+        ...s
+      }
+    }
+  )
+] }) : null;
+export {
+  l as default
+};

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

@@ -86,6 +86,9 @@ export declare const red: {
 export declare const colorSchemes: {
     dark: {
         palette: {
+            gradient: {
+                primary: string;
+            };
             primary: {
                 contrastText: string;
                 light: string;

package/dist/theme/theme-primitives.js

@@ -1,5 +1,5 @@
 import { b as r, a as s } from "../createTheme-CozHbEju.js";
-const h = r(), t = {
+const t = r(), h = {
   50: "hsl(210, 100%, 95%)",
   100: "hsl(210, 100%, 92%)",
   200: "hsl(210, 100%, 80%)",
@@ -42,7 +42,7 @@ const h = r(), t = {
   700: "hsl(120, 75%, 16%)",
   800: "hsl(120, 84%, 10%)",
   900: "hsl(120, 87%, 6%)"
-}, l = {
+}, a = {
   50: "hsl(45, 100%, 97%)",
   100: "hsl(45, 92%, 90%)",
   200: "hsl(45, 94%, 80%)",
@@ -53,7 +53,7 @@ const h = r(), t = {
   700: "hsl(45, 94%, 20%)",
   800: "hsl(45, 95%, 16%)",
   900: "hsl(45, 93%, 12%)"
-}, a = {
+}, l = {
   50: "hsl(0, 100%, 97%)",
   100: "hsl(0, 92%, 90%)",
   200: "hsl(0, 94%, 80%)",
@@ -64,31 +64,34 @@ const h = r(), t = {
   700: "hsl(0, 94%, 18%)",
   800: "hsl(0, 95%, 12%)",
   900: "hsl(0, 93%, 6%)"
-}, i = {
+}, p = {
   dark: {
     palette: {
+      gradient: {
+        primary: "linear-gradient(90deg, #1469be 0%, #43ecff 100%);"
+      },
       primary: {
-        contrastText: t[50],
-        light: t[300],
-        main: t[400],
-        dark: t[700]
+        contrastText: h[50],
+        light: h[300],
+        main: h[400],
+        dark: h[700]
       },
       info: {
-        contrastText: t[300],
-        light: t[500],
-        main: t[700],
-        dark: t[900]
+        contrastText: h[300],
+        light: h[500],
+        main: h[700],
+        dark: h[900]
       },
       warning: {
-        light: l[400],
-        main: l[500],
-        dark: l[700]
-      },
-      error: {
         light: a[400],
         main: a[500],
         dark: a[700]
       },
+      error: {
+        light: l[400],
+        main: l[500],
+        dark: l[700]
+      },
       success: {
         light: o[400],
         main: o[500],
@@ -116,61 +119,61 @@ const h = r(), t = {
 }, g = {
   fontFamily: "Outfit, sans-serif",
   h1: {
-    fontSize: h.typography.pxToRem(48),
+    fontSize: t.typography.pxToRem(48),
     fontWeight: 600,
     lineHeight: 1.2,
     letterSpacing: -0.5
   },
   h2: {
-    fontSize: h.typography.pxToRem(36),
+    fontSize: t.typography.pxToRem(36),
     fontWeight: 600,
     lineHeight: 1.2
   },
   h3: {
-    fontSize: h.typography.pxToRem(30),
+    fontSize: t.typography.pxToRem(30),
     lineHeight: 1.2
   },
   h4: {
-    fontSize: h.typography.pxToRem(24),
+    fontSize: t.typography.pxToRem(24),
     fontWeight: 600,
     lineHeight: 1.5
   },
   h5: {
-    fontSize: h.typography.pxToRem(20),
+    fontSize: t.typography.pxToRem(20),
     fontWeight: 600
   },
   h6: {
-    fontSize: h.typography.pxToRem(18),
+    fontSize: t.typography.pxToRem(18),
     fontWeight: 600
   },
   subtitle1: {
-    fontSize: h.typography.pxToRem(18)
+    fontSize: t.typography.pxToRem(18)
   },
   subtitle2: {
-    fontSize: h.typography.pxToRem(14),
+    fontSize: t.typography.pxToRem(14),
     fontWeight: 500
   },
   body1: {
-    fontSize: h.typography.pxToRem(14)
+    fontSize: t.typography.pxToRem(14)
   },
   body2: {
-    fontSize: h.typography.pxToRem(14),
+    fontSize: t.typography.pxToRem(14),
     fontWeight: 400
   },
   caption: {
-    fontSize: h.typography.pxToRem(12),
+    fontSize: t.typography.pxToRem(12),
     fontWeight: 400
   }
 }, y = {
   borderRadius: 8
-}, n = ["none", "var(--s-palette-baseShadow)", ...h.shadows.slice(2)], f = n;
+}, n = ["none", "var(--s-palette-baseShadow)", ...t.shadows.slice(2)], f = n;
 export {
-  t as brand,
-  i as colorSchemes,
+  h as brand,
+  p as colorSchemes,
   e as gray,
   o as green,
-  l as orange,
-  a as red,
+  a as orange,
+  l as red,
   f as shadows,
   y as shape,
   g as typography

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.60",
+  "version": "1.0.62",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",
@@ -49,7 +49,8 @@
     "react-dom": "^19.1.0",
     "react-dropzone": "^14.3.8",
     "react-i18next": "^15.5.1",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "framer-motion": "^12.23.3"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.4.2",