@solostylist/ui-kit 1.0.67 → 1.0.69

package/dist/main.d.ts

@@ -66,5 +66,7 @@ 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 { default as SMovingBorder } from './s-moving-border/index';
+export type { SMovingBorderProps } from './s-moving-border/index';
 export * from './hooks';
 export * from './utils';

package/dist/main.js

@@ -3,15 +3,15 @@ import { default as a } from "./s-button-link/s-button-link.js";
 import { default as l } from "./s-text-editor/s-text-editor.js";
 import { default as p } from "./s-checkbox/s-checkbox.js";
 import { default as S } from "./s-chips/s-chips.js";
-import { default as d } from "./s-data-table/s-data-table.js";
+import { default as x } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as u, default as g, useDialogConfirm as n } from "./s-dialog-confirm/s-dialog-confirm.js";
 import { DialogMessageProvider as D, default as P, useDialogMessage as T } from "./s-dialog-message/s-dialog-message.js";
 import { default as b } 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 L } from "./s-dialog/s-dialog.js";
 import { default as y } from "./s-file-dropzone/s-file-dropzone.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 E } from "./s-file-icon/s-file-icon.js";
+import { default as h } 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";
@@ -26,46 +26,48 @@ import { default as ee, SnackbarMessageProvider as oe, useSnackbarMessage as re
 import { default as ae } from "./s-form/s-form.js";
 import { SSmartTextField as le } from "./s-smart-text-field/s-smart-text-field.js";
 import { SCopilotKitProvider as pe } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as Se, SStripeExpiry as xe, SStripeNumber as de, StripeTextField as ie } from "./s-stripe/s-stripe.js";
+import { SStripeCVC as Se, SStripeExpiry as de, SStripeNumber as xe, StripeTextField as ie } from "./s-stripe/s-stripe.js";
 import { default as ge } from "./s-theme-provider/s-theme-provider.js";
 import { default as ce } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as Pe } from "./s-date-picker/s-date-picker.js";
 import { default as ve } from "./s-localization-provider/s-localization-provider.js";
 import { default as ke } from "./s-gradient-icon/s-gradient-icon.js";
-import { default as Le } from "./s-glow-button/s-glow-button.js";
-import { useDialog as Fe } from "./hooks/use-dialog.js";
-import { usePopover as Ee } from "./hooks/use-popover.js";
-import { formatDatePosted as he } from "./utils/dayjs.js";
-import { bytesToSize as Be } from "./utils/bytes-to-size.js";
-import { LogLevel as Ne, Logger as je, createLogger as we, logger as Ae } from "./utils/logger.js";
-import { default as Ve } from "dayjs";
+import { default as Me } from "./s-glow-button/s-glow-button.js";
+import { default as Fe } from "./s-moving-border/s-moving-border.js";
+import { useDialog as Be } from "./hooks/use-dialog.js";
+import { usePopover as Ie } from "./hooks/use-popover.js";
+import { formatDatePosted as ze } from "./utils/dayjs.js";
+import { bytesToSize as Ne } from "./utils/bytes-to-size.js";
+import { LogLevel as we, Logger as Ae, createLogger as Ke, logger as Ve } from "./utils/logger.js";
+import { default as He } from "dayjs";
 export {
   u as DialogConfirmProvider,
   D as DialogMessageProvider,
-  Ne as LogLevel,
-  je as Logger,
+  we as LogLevel,
+  Ae as Logger,
   r as SAutocomplete,
   a as SButtonLink,
   p as SCheckbox,
   S as SChips,
   pe as SCopilotKitProvider,
-  d as SDataTable,
+  x as SDataTable,
   Pe as SDatePicker,
   ce as SDateTimePicker,
-  M as SDialog,
+  L as SDialog,
   g as SDialogConfirm,
   P as SDialogMessage,
   C as SEmpty,
   b as SError,
   y as SFileDropzone,
-  I as SFileIcon,
+  E as SFileIcon,
   ae as SForm,
-  Le as SGlowButton,
+  Me as SGlowButton,
   ke as SGradientIcon,
-  z as SI18nProvider,
+  h as SI18nProvider,
   G as SIconButton,
   j as SLabel,
   ve as SLocalizationProvider,
+  Fe as SMovingBorder,
   A as SMultiSelect,
   V as SNoSsr,
   O as SPagination,
@@ -74,8 +76,8 @@ export {
   le as SSmartTextField,
   ee as SSnackbarMessage,
   Se as SStripeCVC,
-  xe as SStripeExpiry,
-  de as SStripeNumber,
+  de as SStripeExpiry,
+  xe as SStripeNumber,
   l as STextEditor,
   H as STextField,
   _ as STextTruncation,
@@ -83,14 +85,14 @@ export {
   Y as STip,
   oe as SnackbarMessageProvider,
   ie as StripeTextField,
-  Be as bytesToSize,
-  we as createLogger,
-  Ve as dayjs,
-  he as formatDatePosted,
-  Ae as logger,
-  Fe as useDialog,
+  Ne as bytesToSize,
+  Ke as createLogger,
+  He as dayjs,
+  ze as formatDatePosted,
+  Ve as logger,
+  Be as useDialog,
   n as useDialogConfirm,
   T as useDialogMessage,
-  Ee as usePopover,
+  Ie as usePopover,
   re as useSnackbarMessage
 };

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

@@ -1,203 +1,28 @@
-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 = 4, 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,
+import { j as t } from "../jsx-runtime-C5mzlN2N.js";
+import { useRef as l } from "react";
+import { Button as i, Box as s } from "@mui/material";
+import u from "../s-moving-border/s-moving-border.js";
+import '../assets/s-glow-button.css';const c = ({ borderRadius: e = 12, children: o, duration: r = 6e3, ...n }) => {
+  const a = l(null);
+  return /* @__PURE__ */ t.jsx(u, { duration: r, borderRadius: e, height: 60, glowSize: 100, children: /* @__PURE__ */ t.jsx(
+    i,
     {
-      position: "relative",
-      overflow: "hidden",
-      height: "60px",
-      width: "100%",
-      padding: 0.125,
       sx: {
-        borderRadius: s,
-        backgroundColor: "transparent"
+        height: "100%",
+        borderRadius: e,
+        background: "var(--s-palette-background-default)",
+        "&:hover": {
+          backgroundColor: "var(--s-palette-background-paper)"
+        }
       },
-      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: 600,
-              overflow: "hidden",
-              "&:before": {
-                content: '""',
-                position: "absolute",
-                inset: 0,
-                zIndex: 0,
-                borderRadius: s,
-                padding: "1.25px",
-                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 })
-          }
-        )
-      ]
+      ref: a,
+      fullWidth: !0,
+      disableRipple: !0,
+      ...n,
+      children: /* @__PURE__ */ t.jsx(s, { className: "gradient-text", fontSize: 16, children: o })
     }
-  );
+  ) });
 };
 export {
-  X as default
+  c as default
 };

package/dist/s-moving-border/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-moving-border';
+export type { SMovingBorderProps } from './s-moving-border';

package/dist/s-moving-border/index.js

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

package/dist/s-moving-border/package.json

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

package/dist/s-moving-border/s-moving-border.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
+export interface SMovingBorderProps extends BoxProps {
+    duration?: number;
+    className?: string;
+    glowColor?: string;
+    glowSize?: number;
+    children: React.ReactNode;
+}
+declare function SMovingBorder({ className, duration, children, glowColor, glowSize, ...props }: SMovingBorderProps): import("react/jsx-runtime").JSX.Element;
+export default SMovingBorder;

package/dist/s-moving-border/s-moving-border.js

@@ -0,0 +1,135 @@
+import { j as t } from "../jsx-runtime-C5mzlN2N.js";
+import { useRef as x, useEffect as w } from "react";
+import { Box as i } from "@mui/material";
+import { useMotionValue as v, useAnimationFrame as y, useTransform as f, useMotionTemplate as L, motion as R } from "framer-motion";
+const E = 250, A = "#38bdf8", d = (o, r) => ({
+  position: "absolute",
+  left: "50%",
+  top: "50%",
+  width: `${o}px`,
+  height: `${o}px`,
+  transform: "translate(-50%, -50%)",
+  opacity: 0.5,
+  background: `radial-gradient(${r} 40%, transparent 60%)`,
+  filter: "blur(12px)",
+  pointerEvents: "none"
+});
+function m({
+  children: o,
+  duration: r,
+  rx: u,
+  ry: p,
+  phase: c = 0
+}) {
+  const s = x(null), a = v(0);
+  y((l) => {
+    var n;
+    const e = (n = s.current) == null ? void 0 : n.getTotalLength();
+    if (e) {
+      const j = e / r;
+      a.set((l * j + e * c) % e);
+    }
+  });
+  const h = f(a, (l) => {
+    var e, n;
+    return (n = (e = s.current) == null ? void 0 : e.getPointAtLength(l)) == null ? void 0 : n.x;
+  }), g = f(a, (l) => {
+    var e, n;
+    return (n = (e = s.current) == null ? void 0 : e.getPointAtLength(l)) == null ? void 0 : n.y;
+  }), b = L`translateX(${h}px) translateY(${g}px) translateX(-50%) translateY(-50%)`;
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        preserveAspectRatio: "none",
+        width: "100%",
+        height: "100%",
+        style: { position: "absolute", inset: 0 },
+        children: /* @__PURE__ */ t.jsx("rect", { fill: "none", width: "100%", height: "100%", rx: u, ry: p, ref: s })
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      R.div,
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          display: "inline-block",
+          transform: b
+        },
+        children: o
+      }
+    )
+  ] });
+}
+function k({
+  className: o,
+  duration: r = 6e3,
+  children: u,
+  glowColor: p = A,
+  glowSize: c = E,
+  ...s
+}) {
+  const a = x(null), h = x(null);
+  return w(() => () => {
+    h.current !== null && window.cancelAnimationFrame(h.current);
+  }, []), /* @__PURE__ */ t.jsxs(
+    i,
+    {
+      position: "relative",
+      overflow: "hidden",
+      height: "100%",
+      width: "100%",
+      padding: 0.125,
+      sx: {
+        backgroundColor: "transparent"
+      },
+      className: o,
+      ...s,
+      children: [
+        /* @__PURE__ */ t.jsxs(i, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, children: [
+          /* @__PURE__ */ t.jsx(m, { duration: r, rx: "100%", ry: "100%", phase: 0, children: /* @__PURE__ */ t.jsx(i, { sx: d(c, p) }) }),
+          /* @__PURE__ */ t.jsx(m, { duration: r, rx: "100%", ry: "100%", phase: 0.5, children: /* @__PURE__ */ t.jsx(i, { sx: d(c, p) }) })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          i,
+          {
+            sx: {
+              position: "absolute",
+              pointerEvents: "none",
+              left: 0,
+              top: 0,
+              width: "100%",
+              height: "100%",
+              zIndex: 2
+            },
+            children: /* @__PURE__ */ t.jsx(
+              i,
+              {
+                ref: a,
+                sx: {
+                  position: "absolute",
+                  left: "50%",
+                  top: "50%",
+                  width: 120,
+                  height: 120,
+                  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"
+                }
+              }
+            )
+          }
+        ),
+        u
+      ]
+    }
+  );
+}
+export {
+  k as default
+};

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.67",
+  "version": "1.0.69",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",
@@ -19,7 +19,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint --fix . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "publish": "npm run build && npm publish --access public",
+    "app:publish": "npm run build && npm publish --access public",
     "format:write": "prettier --write \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
     "format:check": "prettier --check \"**/*.{js,jsx,mjs,ts,tsx,mdx}\" --cache",
     "prepare": "husky"