@solostylist/ui-kit 1.0.102 → 1.0.103

package/dist/main.d.ts

@@ -82,6 +82,8 @@ export { default as SGlowButton } from './s-glow-button/index';
 export type { SGlowButtonProps } from './s-glow-button/index';
 export { default as SMovingBorder } from './s-moving-border/index';
 export type { SMovingBorderProps } from './s-moving-border/index';
+export { default as SSpotlightCursor } from './s-spotlight-cursor/index';
+export type { SSpotlightCursorProps, SpotlightConfig } from './s-spotlight-cursor/index';
 export { default as SCopyableText } from './s-copyable-text/index';
 export type { SCopyableTextProps } from './s-copyable-text/index';
 export { default as SInteractiveGallery, MediaItem } from './s-interactive-gallery/index';

package/dist/main.js

@@ -1,9 +1,9 @@
-import { default as a } from "./s-accordion/s-accordion.js";
+import { default as t } from "./s-accordion/s-accordion.js";
 import { default as f } from "./s-autocomplete/s-autocomplete.js";
-import { default as m } from "./s-avatar/s-avatar.js";
+import { default as s } from "./s-avatar/s-avatar.js";
 import { default as p } from "./s-button/s-button.js";
 import { default as S } from "./s-button-link/s-button-link.js";
-import { default as u } from "./s-carousel/s-carousel.js";
+import { default as x } from "./s-carousel/s-carousel.js";
 import { default as n } from "./s-chat-input/s-chat-input.js";
 import { default as c } from "./s-chat-message/s-chat-message.js";
 import { default as C } from "./s-text-editor/s-text-editor.js";
@@ -11,7 +11,7 @@ import "./s-text-editor/s-text-editor-toolbar.js";
 import { default as v } from "./s-checkbox/s-checkbox.js";
 import { default as b } from "./s-chip/s-chip.js";
 import { default as I } from "./s-chips/s-chips.js";
-import { default as L } from "./s-data-table/s-data-table.js";
+import { default as k } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as y, default as F, useDialogConfirm as B } from "./s-dialog-confirm/s-dialog-confirm.js";
 import { DialogMessageProvider as A, default as E, useDialogMessage as G } from "./s-dialog-message/s-dialog-message.js";
 import { default as w } from "./s-error/s-error.js";
@@ -24,17 +24,17 @@ import { default as X } from "./s-icon-button/s-icon-button.js";
 import { default as Z } from "./s-label/s-label.js";
 import { default as $ } from "./s-multi-select/s-multi-select.js";
 import { default as oe } from "./s-no-ssr/s-no-ssr.js";
-import { default as ae } from "./s-text-field/s-text-field.js";
+import { default as te } from "./s-text-field/s-text-field.js";
 import { default as fe } from "./s-pagination/s-pagination.js";
-import { default as me } from "./s-select/s-select.js";
+import { default as se } from "./s-select/s-select.js";
 import { default as pe } from "./s-skeleton/s-skeleton.js";
 import { default as Se } from "./s-tip/s-tip.js";
-import { default as ue } from "./s-text-truncation/s-text-truncation.js";
+import { default as xe } from "./s-text-truncation/s-text-truncation.js";
 import { default as ne, SnackbarMessageProvider as ge, useSnackbarMessage as ce } from "./s-snackbar-message/s-snackbar-message.js";
 import { default as Ce } from "./s-form/s-form.js";
 import { SSmartTextField as ve } from "./s-smart-text-field/s-smart-text-field.js";
 import { SCopilotKitProvider as be } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as Ie, SStripeExpiry as ke, SStripeNumber as Le, StripeTextField as he } from "./s-stripe/s-stripe.js";
+import { SStripeCVC as Ie, SStripeExpiry as he, SStripeNumber as ke, StripeTextField as Le } from "./s-stripe/s-stripe.js";
 import { default as Fe } from "./s-theme-provider/s-theme-provider.js";
 import { default as ze } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as Ee } from "./s-date-picker/s-date-picker.js";
@@ -42,44 +42,45 @@ import { default as Re } from "./s-localization-provider/s-localization-provider
 import { default as Ne } from "./s-gradient-icon/s-gradient-icon.js";
 import { default as Ke } from "./s-glow-button/s-glow-button.js";
 import { default as qe } from "./s-moving-border/s-moving-border.js";
-import { default as Je } from "./s-copyable-text/s-copyable-text.js";
-import { MediaItem as Qe, default as Ue } from "./s-interactive-gallery/s-interactive-gallery.js";
-import { default as Xe } from "./s-image-modal/s-image-modal.js";
-import { default as Ze } from "./s-lazy-image/s-lazy-image.js";
-import { default as $e } from "./s-image-comparison/s-image-comparison.js";
-import { default as oo } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
-import { default as ao } from "./s-rating/s-rating.js";
-import { default as fo } from "./s-review/s-review.js";
-import { default as mo } from "./s-tabs/s-tabs.js";
-import { default as po } from "./s-tabs/s-tab.js";
-import { default as xo } from "./s-tabs/s-tab-panel.js";
-import { default as io } from "./s-text-shimmer/s-text-shimmer.js";
-import { useDialog as go } from "./hooks/use-dialog.js";
-import { usePopover as To } from "./hooks/use-popover.js";
-import { formatDatePosted as Po } from "./utils/dayjs.js";
-import { bytesToSize as Do } from "./utils/bytes-to-size.js";
-import { LogLevel as Mo, Logger as Io, createLogger as ko, logger as Lo } from "./utils/logger.js";
-import { default as yo } from "dayjs";
+import { default as Je } from "./s-spotlight-cursor/s-spotlight-cursor.js";
+import { default as Qe } from "./s-copyable-text/s-copyable-text.js";
+import { MediaItem as We, default as Xe } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { default as Ze } from "./s-image-modal/s-image-modal.js";
+import { default as $e } from "./s-lazy-image/s-lazy-image.js";
+import { default as oo } from "./s-image-comparison/s-image-comparison.js";
+import { default as to } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
+import { default as fo } from "./s-rating/s-rating.js";
+import { default as so } from "./s-review/s-review.js";
+import { default as po } from "./s-tabs/s-tabs.js";
+import { default as uo } from "./s-tabs/s-tab.js";
+import { default as io } from "./s-tabs/s-tab-panel.js";
+import { default as go } from "./s-text-shimmer/s-text-shimmer.js";
+import { useDialog as To } from "./hooks/use-dialog.js";
+import { usePopover as Po } from "./hooks/use-popover.js";
+import { formatDatePosted as Do } from "./utils/dayjs.js";
+import { bytesToSize as Mo } from "./utils/bytes-to-size.js";
+import { LogLevel as ho, Logger as ko, createLogger as Lo, logger as yo } from "./utils/logger.js";
+import { default as Bo } from "dayjs";
 export {
   y as DialogConfirmProvider,
   A as DialogMessageProvider,
-  Mo as LogLevel,
-  Io as Logger,
-  Qe as MediaItem,
-  a as SAccordion,
+  ho as LogLevel,
+  ko as Logger,
+  We as MediaItem,
+  t as SAccordion,
   f as SAutocomplete,
-  m as SAvatar,
+  s as SAvatar,
   p as SButton,
   S as SButtonLink,
-  u as SCarousel,
+  x as SCarousel,
   n as SChatInput,
   c as SChatMessage,
   v as SCheckbox,
   b as SChip,
   I as SChips,
   be as SCopilotKitProvider,
-  Je as SCopyableText,
-  L as SDataTable,
+  Qe as SCopyableText,
+  k as SDataTable,
   Ee as SDatePicker,
   ze as SDateTimePicker,
   V as SDialog,
@@ -94,45 +95,46 @@ export {
   Ne as SGradientIcon,
   U as SI18nProvider,
   X as SIconButton,
-  $e as SImageComparison,
-  Xe as SImageModal,
-  Ue as SInteractiveGallery,
+  oo as SImageComparison,
+  Ze as SImageModal,
+  Xe as SInteractiveGallery,
   Z as SLabel,
-  Ze as SLazyImage,
+  $e as SLazyImage,
   Re as SLocalizationProvider,
   qe as SMovingBorder,
   $ as SMultiSelect,
   oe as SNoSsr,
   fe as SPagination,
-  oo as SRadialPulseAnimate,
-  ao as SRating,
-  fo as SReview,
-  me as SSelect,
+  to as SRadialPulseAnimate,
+  fo as SRating,
+  so as SReview,
+  se as SSelect,
   pe as SSkeleton,
   ve as SSmartTextField,
   ne as SSnackbarMessage,
+  Je as SSpotlightCursor,
   Ie as SStripeCVC,
-  ke as SStripeExpiry,
-  Le as SStripeNumber,
-  po as STab,
-  xo as STabPanel,
-  mo as STabs,
+  he as SStripeExpiry,
+  ke as SStripeNumber,
+  uo as STab,
+  io as STabPanel,
+  po as STabs,
   C as STextEditor,
-  ae as STextField,
-  io as STextShimmer,
-  ue as STextTruncation,
+  te as STextField,
+  go as STextShimmer,
+  xe as STextTruncation,
   Fe as SThemeProvider,
   Se as STip,
   ge as SnackbarMessageProvider,
-  he as StripeTextField,
-  Do as bytesToSize,
-  ko as createLogger,
-  yo as dayjs,
-  Po as formatDatePosted,
-  Lo as logger,
-  go as useDialog,
+  Le as StripeTextField,
+  Mo as bytesToSize,
+  Lo as createLogger,
+  Bo as dayjs,
+  Do as formatDatePosted,
+  yo as logger,
+  To as useDialog,
   B as useDialogConfirm,
   G as useDialogMessage,
-  To as usePopover,
+  Po as usePopover,
   ce as useSnackbarMessage
 };

package/dist/s-spotlight-cursor/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-spotlight-cursor';
+export type { SSpotlightCursorProps, SpotlightConfig } from './s-spotlight-cursor';

package/dist/s-spotlight-cursor/index.js

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

package/dist/s-spotlight-cursor/package.json

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

package/dist/s-spotlight-cursor/s-spotlight-cursor.d.ts

@@ -0,0 +1,63 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Configuration interface for spotlight effect appearance and behavior
+ */
+export interface SpotlightConfig {
+    /** Radius of the spotlight effect in pixels (recommended: 50-500) */
+    radius: number;
+    /** Brightness/opacity of the spotlight effect (range: 0-1, where 0 is invisible and 1 is fully opaque) */
+    brightness: number;
+    /** Color of the spotlight effect in hexadecimal format (e.g., '#ff0000', '#00ff00') */
+    color: string;
+    /** Smoothing factor for cursor movement - reserved for future implementation */
+    smoothing: number;
+}
+/**
+ * Props interface for the SSpotlightCursor component
+ */
+export interface SSpotlightCursorProps extends HTMLAttributes<HTMLCanvasElement> {
+    /** Configuration object for spotlight appearance and behavior. If not provided, uses default blue spotlight */
+    config?: SpotlightConfig;
+}
+/**
+ * SSpotlightCursor - Creates an interactive spotlight effect that follows the mouse cursor
+ *
+ * This component renders a full-screen HTML5 canvas with a radial gradient spotlight that
+ * smoothly tracks the user's mouse movement. The spotlight effect is highly customizable
+ * and optimized for performance using requestAnimationFrame.
+ *
+ * Key features:
+ * - Mouse-following spotlight with smooth animation
+ * - Customizable radius, brightness, color, and smoothing
+ * - Performance-optimized with proper cleanup
+ * - Responsive design that adapts to window resizing
+ * - Non-interfering overlay (pointer-events: none)
+ * - Memory-safe event listener management
+ *
+ * Technical implementation:
+ * - Uses HTML5 Canvas with 2D context for rendering
+ * - Implements radial gradient for spotlight effect
+ * - Leverages requestAnimationFrame for 60fps animations
+ * - Automatically handles canvas sizing and viewport changes
+ * - Converts hex colors to RGB for gradient creation
+ *
+ * @param props - SSpotlightCursorProps containing configuration and styling options
+ * @returns JSX.Element - Fixed-positioned canvas element rendering the spotlight effect
+ *
+ * @example
+ * // Basic usage with default blue spotlight
+ * <SSpotlightCursor />
+ *
+ * @example
+ * // Custom orange spotlight with larger radius
+ * <SSpotlightCursor
+ *   config={{
+ *     radius: 300,
+ *     brightness: 0.25,
+ *     color: '#ff6b35',
+ *     smoothing: 0.1
+ *   }}
+ * />
+ */
+declare const SSpotlightCursor: ({ config, className, ...props }: SSpotlightCursorProps) => import("react/jsx-runtime").JSX.Element;
+export default SSpotlightCursor;

package/dist/s-spotlight-cursor/s-spotlight-cursor.js

@@ -0,0 +1,59 @@
+import { j as g } from "../jsx-runtime-DywqP_6a.js";
+import { useRef as p, useEffect as x } from "react";
+import { Box as E } from "@mui/material";
+const b = (t) => {
+  const a = p(null);
+  return x(() => {
+    const e = a.current;
+    if (!e) return;
+    const o = e.getContext("2d");
+    if (!o) return;
+    let d, r = -1e3, s = -1e3;
+    const c = () => {
+      e.width = window.innerWidth, e.height = window.innerHeight;
+    }, l = (n) => {
+      r = n.clientX, s = n.clientY;
+    }, m = () => {
+      r = -1e3, s = -1e3;
+    }, h = (n) => {
+      const i = parseInt(n.slice(1), 16), w = i >> 16 & 255, v = i >> 8 & 255, f = i & 255;
+      return `${w},${v},${f}`;
+    }, u = () => {
+      if (o.clearRect(0, 0, e.width, e.height), r !== -1e3 && s !== -1e3) {
+        const n = o.createRadialGradient(r, s, 0, r, s, t.radius || 200), i = h(t.color);
+        n.addColorStop(0, `rgba(${i}, ${t.brightness})`), n.addColorStop(1, "rgba(0,0,0,0)"), o.fillStyle = n, o.fillRect(0, 0, e.width, e.height);
+      }
+      d = requestAnimationFrame(u);
+    };
+    return c(), window.addEventListener("resize", c), window.addEventListener("mousemove", l), window.addEventListener("mouseleave", m), d = requestAnimationFrame(u), () => {
+      window.removeEventListener("resize", c), window.removeEventListener("mousemove", l), window.removeEventListener("mouseleave", m), cancelAnimationFrame(d);
+    };
+  }, [t.radius, t.brightness, t.color]), a;
+}, S = ({
+  config: t = { radius: 200, brightness: 0.15, color: "#0000ff", smoothing: 0.1 },
+  className: a,
+  ...e
+}) => {
+  const o = b(t);
+  return /* @__PURE__ */ g.jsx(
+    E,
+    {
+      component: "canvas",
+      ref: o,
+      className: a,
+      sx: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        pointerEvents: "none",
+        zIndex: 9999,
+        width: "100%",
+        height: "100%"
+      },
+      ...e
+    }
+  );
+};
+export {
+  S as default
+};

package/dist/theme/components/alert.d.ts

@@ -10,6 +10,10 @@ export declare const MuiAlert: {
                     color: string;
                     '& .MuiAlert-icon': {
                         color: string;
+                        alignSelf: string;
+                    };
+                    '& .MuiAlert-message': {
+                        alignSelf: string;
                     };
                     backgroundColor: string;
                     border: string;
@@ -22,6 +26,10 @@ export declare const MuiAlert: {
                     color: string;
                     '& .MuiAlert-icon': {
                         color: string;
+                        alignSelf: string;
+                    };
+                    '& .MuiAlert-message': {
+                        alignSelf: string;
                     };
                     backgroundColor: string;
                     border: string;
@@ -34,6 +42,10 @@ export declare const MuiAlert: {
                     color: string;
                     '& .MuiAlert-icon': {
                         color: string;
+                        alignSelf: string;
+                    };
+                    '& .MuiAlert-message': {
+                        alignSelf: string;
                     };
                     backgroundColor: string;
                     border: string;
@@ -46,6 +58,10 @@ export declare const MuiAlert: {
                     color: string;
                     '& .MuiAlert-icon': {
                         color: string;
+                        alignSelf: string;
+                    };
+                    '& .MuiAlert-message': {
+                        alignSelf: string;
                     };
                     backgroundColor: string;
                     border: string;

package/dist/theme/components/alert.js

@@ -1,13 +1,17 @@
 import { alpha as s } from "@mui/material";
-import { green as o, red as i, orange as t, blue as p } from "../theme-primitives.js";
+import { green as o, red as i, orange as t, blue as n } from "../theme-primitives.js";
 const e = (r) => ({
   color: r[50],
   "& .MuiAlert-icon": {
-    color: r[500]
+    color: r[500],
+    alignSelf: "center"
   },
-  backgroundColor: `${s(r[900], 0.5)}`,
-  border: `1px solid ${s(r[800], 0.5)}`
-}), l = {
+  "& .MuiAlert-message": {
+    alignSelf: "center"
+  },
+  backgroundColor: `${s(r[900], 0.9)}`,
+  border: `1px solid ${s(r[800], 0.8)}`
+}), y = {
   styleOverrides: {
     root: () => ({
       borderRadius: 10,
@@ -41,7 +45,7 @@ const e = (r) => ({
             severity: "info"
           },
           style: {
-            ...e(p)
+            ...e(n)
           }
         }
       ]
@@ -49,5 +53,5 @@ const e = (r) => ({
   }
 };
 export {
-  l as MuiAlert
+  y as MuiAlert
 };

package/dist/theme/components/components.d.ts

@@ -6049,6 +6049,10 @@ export declare const components: {
                         color: string;
                         '& .MuiAlert-icon': {
                             color: string;
+                            alignSelf: string;
+                        };
+                        '& .MuiAlert-message': {
+                            alignSelf: string;
                         };
                         backgroundColor: string;
                         border: string;
@@ -6061,6 +6065,10 @@ export declare const components: {
                         color: string;
                         '& .MuiAlert-icon': {
                             color: string;
+                            alignSelf: string;
+                        };
+                        '& .MuiAlert-message': {
+                            alignSelf: string;
                         };
                         backgroundColor: string;
                         border: string;
@@ -6073,6 +6081,10 @@ export declare const components: {
                         color: string;
                         '& .MuiAlert-icon': {
                             color: string;
+                            alignSelf: string;
+                        };
+                        '& .MuiAlert-message': {
+                            alignSelf: string;
                         };
                         backgroundColor: string;
                         border: string;
@@ -6085,6 +6097,10 @@ export declare const components: {
                         color: string;
                         '& .MuiAlert-icon': {
                             color: string;
+                            alignSelf: string;
+                        };
+                        '& .MuiAlert-message': {
+                            alignSelf: string;
                         };
                         backgroundColor: string;
                         border: string;

package/package.json

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