@solostylist/ui-kit 1.0.104 → 1.0.105

package/dist/main.d.ts

@@ -1,5 +1,7 @@
 export { default as SAccordion } from './s-accordion/index';
 export type { SAccordionProps } from './s-accordion/index';
+export { default as SActionOverlay } from './s-action-overlay/index';
+export type { SActionOverlayProps, IActionOverlay } from './s-action-overlay/index';
 export { default as SAutocomplete } from './s-autocomplete/index';
 export type { SAutocompleteProps } from './s-autocomplete/index';
 export { default as SAvatar } from './s-avatar/index';
@@ -31,6 +33,8 @@ export type { DialogMessageContextProps, DialogMessageOpenOptions } from './s-di
 export { default as SError } from './s-error/index';
 export { default as SEmpty } from './s-empty/index';
 export type { SEmptyProps } from './s-empty/index';
+export { default as SFlexBox } from './s-flex-box/index';
+export type { SFlexBoxProps } from './s-flex-box/index';
 export { default as SDialog } from './s-dialog/index';
 export type { SDialogProps } from './s-dialog/index';
 export { default as SFileDropzone } from './s-file-dropzone/index';

package/dist/main.js

@@ -1,144 +1,148 @@
 import { default as t } from "./s-accordion/s-accordion.js";
-import { default as f } from "./s-autocomplete/s-autocomplete.js";
-import { default as s } from "./s-avatar/s-avatar.js";
-import { default as p } from "./s-button/s-button.js";
-import { default as d } from "./s-button-link/s-button-link.js";
-import { default as u } 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";
+import { default as f } from "./s-action-overlay/s-action-overlay.js";
+import { default as s } from "./s-autocomplete/s-autocomplete.js";
+import { default as p } from "./s-avatar/s-avatar.js";
+import { default as S } from "./s-button/s-button.js";
+import { default as u } from "./s-button-link/s-button-link.js";
+import { default as n } from "./s-carousel/s-carousel.js";
+import { default as c } from "./s-chat-input/s-chat-input.js";
+import { default as v } from "./s-chat-message/s-chat-message.js";
+import { default as P } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
-import { default as P } 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 k } from "./s-data-table/s-data-table.js";
-import { DialogConfirmProvider as L, default as F, useDialogConfirm as B } from "./s-dialog-confirm/s-dialog-confirm.js";
-import { DialogMessageProvider as A, default as E, useDialogMessage as R } from "./s-dialog-message/s-dialog-message.js";
-import { default as G } from "./s-error/s-error.js";
-import { default as j } from "./s-empty/s-empty.js";
-import { default as V } from "./s-dialog/s-dialog.js";
-import { default as H } from "./s-file-dropzone/s-file-dropzone.js";
-import { default as O } from "./s-file-icon/s-file-icon.js";
-import { default as U } from "./s-i18n-provider/s-i18n-provider.js";
-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 te } from "./s-text-field/s-text-field.js";
-import { default as fe } from "./s-pagination/s-pagination.js";
-import { default as se } from "./s-select/s-select.js";
-import { default as pe } from "./s-skeleton/s-skeleton.js";
-import { default as de } from "./s-tip/s-tip.js";
-import { default as ue } 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 Pe } 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 he, SStripeNumber as ke, StripeTextField as ye } 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";
-import { default as we } from "./s-localization-provider/s-localization-provider.js";
-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-scroll-reveal/s-scroll-reveal.js";
-import { default as Qe } from "./s-spotlight-cursor/s-spotlight-cursor.js";
-import { default as We } from "./s-copyable-text/s-copyable-text.js";
-import { MediaItem as Ye, default as Ze } from "./s-interactive-gallery/s-interactive-gallery.js";
-import { default as $e } from "./s-image-modal/s-image-modal.js";
-import { default as oo } from "./s-lazy-image/s-lazy-image.js";
-import { default as to } from "./s-image-comparison/s-image-comparison.js";
-import { default as fo } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
-import { default as so } from "./s-rating/s-rating.js";
-import { default as po } from "./s-review/s-review.js";
-import { default as xo } from "./s-tabs/s-tabs.js";
-import { default as io } from "./s-tabs/s-tab.js";
-import { default as go } from "./s-tabs/s-tab-panel.js";
-import { default as To } from "./s-text-shimmer/s-text-shimmer.js";
-import { default as vo } from "./s-typewriter-text/s-typewriter-text.js";
-import { useDialog as Do } from "./hooks/use-dialog.js";
-import { usePopover as Mo } from "./hooks/use-popover.js";
-import { formatDatePosted as ho } from "./utils/dayjs.js";
-import { bytesToSize as yo } from "./utils/bytes-to-size.js";
-import { LogLevel as Fo, Logger as Bo, createLogger as zo, logger as Ao } from "./utils/logger.js";
-import { default as Ro } from "dayjs";
+import { default as b } from "./s-checkbox/s-checkbox.js";
+import { default as I } from "./s-chip/s-chip.js";
+import { default as h } from "./s-chips/s-chips.js";
+import { default as L } from "./s-data-table/s-data-table.js";
+import { DialogConfirmProvider as B, default as A, useDialogConfirm as z } from "./s-dialog-confirm/s-dialog-confirm.js";
+import { DialogMessageProvider as R, default as w, useDialogMessage as G } from "./s-dialog-message/s-dialog-message.js";
+import { default as j } from "./s-error/s-error.js";
+import { default as O } from "./s-empty/s-empty.js";
+import { default as q } from "./s-flex-box/s-flex-box.js";
+import { default as J } from "./s-dialog/s-dialog.js";
+import { default as U } from "./s-file-dropzone/s-file-dropzone.js";
+import { default as X } from "./s-file-icon/s-file-icon.js";
+import { default as Z } from "./s-i18n-provider/s-i18n-provider.js";
+import { default as $ } from "./s-icon-button/s-icon-button.js";
+import { default as oe } from "./s-label/s-label.js";
+import { default as te } from "./s-multi-select/s-multi-select.js";
+import { default as fe } from "./s-no-ssr/s-no-ssr.js";
+import { default as se } from "./s-text-field/s-text-field.js";
+import { default as pe } from "./s-pagination/s-pagination.js";
+import { default as Se } from "./s-select/s-select.js";
+import { default as ue } from "./s-skeleton/s-skeleton.js";
+import { default as ne } from "./s-tip/s-tip.js";
+import { default as ce } from "./s-text-truncation/s-text-truncation.js";
+import { default as ve, SnackbarMessageProvider as Ce, useSnackbarMessage as Pe } from "./s-snackbar-message/s-snackbar-message.js";
+import { default as be } from "./s-form/s-form.js";
+import { SSmartTextField as Ie } from "./s-smart-text-field/s-smart-text-field.js";
+import { SCopilotKitProvider as he } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
+import { SStripeCVC as Le, SStripeExpiry as Fe, SStripeNumber as Be, StripeTextField as Ae } from "./s-stripe/s-stripe.js";
+import { default as Ee } from "./s-theme-provider/s-theme-provider.js";
+import { default as we } from "./s-datetime-picker/s-datetime-picker.js";
+import { default as Ne } from "./s-date-picker/s-date-picker.js";
+import { default as Ke } from "./s-localization-provider/s-localization-provider.js";
+import { default as Ve } from "./s-gradient-icon/s-gradient-icon.js";
+import { default as He } from "./s-glow-button/s-glow-button.js";
+import { default as Qe } from "./s-moving-border/s-moving-border.js";
+import { default as We } from "./s-scroll-reveal/s-scroll-reveal.js";
+import { default as Ye } from "./s-spotlight-cursor/s-spotlight-cursor.js";
+import { default as _e } from "./s-copyable-text/s-copyable-text.js";
+import { MediaItem as eo, default as oo } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { default as to } from "./s-image-modal/s-image-modal.js";
+import { default as fo } from "./s-lazy-image/s-lazy-image.js";
+import { default as so } from "./s-image-comparison/s-image-comparison.js";
+import { default as po } from "./s-radial-pulse-animate/s-radial-pulse-animate.js";
+import { default as So } from "./s-rating/s-rating.js";
+import { default as io } from "./s-review/s-review.js";
+import { default as go } from "./s-tabs/s-tabs.js";
+import { default as To } from "./s-tabs/s-tab.js";
+import { default as Co } from "./s-tabs/s-tab-panel.js";
+import { default as Do } from "./s-text-shimmer/s-text-shimmer.js";
+import { default as Mo } from "./s-typewriter-text/s-typewriter-text.js";
+import { useDialog as yo } from "./hooks/use-dialog.js";
+import { usePopover as ko } from "./hooks/use-popover.js";
+import { formatDatePosted as Fo } from "./utils/dayjs.js";
+import { bytesToSize as Ao } from "./utils/bytes-to-size.js";
+import { LogLevel as Eo, Logger as Ro, createLogger as wo, logger as Go } from "./utils/logger.js";
+import { default as jo } from "dayjs";
 export {
-  L as DialogConfirmProvider,
-  A as DialogMessageProvider,
-  Fo as LogLevel,
-  Bo as Logger,
-  Ye as MediaItem,
+  B as DialogConfirmProvider,
+  R as DialogMessageProvider,
+  Eo as LogLevel,
+  Ro as Logger,
+  eo as MediaItem,
   t as SAccordion,
-  f as SAutocomplete,
-  s as SAvatar,
-  p as SButton,
-  d as SButtonLink,
-  u as SCarousel,
-  n as SChatInput,
-  c as SChatMessage,
-  P as SCheckbox,
-  b as SChip,
-  I as SChips,
-  be as SCopilotKitProvider,
-  We as SCopyableText,
-  k as SDataTable,
-  Ee as SDatePicker,
-  ze as SDateTimePicker,
-  V as SDialog,
-  F as SDialogConfirm,
-  E as SDialogMessage,
-  j as SEmpty,
-  G as SError,
-  H as SFileDropzone,
-  O as SFileIcon,
-  Ce as SForm,
-  Ke as SGlowButton,
-  Ne as SGradientIcon,
-  U as SI18nProvider,
-  X as SIconButton,
-  to as SImageComparison,
-  $e as SImageModal,
-  Ze as SInteractiveGallery,
-  Z as SLabel,
-  oo as SLazyImage,
-  we as SLocalizationProvider,
-  qe as SMovingBorder,
-  $ as SMultiSelect,
-  oe as SNoSsr,
-  fe as SPagination,
-  fo as SRadialPulseAnimate,
-  so as SRating,
-  po as SReview,
-  Je as SScrollReveal,
-  se as SSelect,
-  pe as SSkeleton,
-  Pe as SSmartTextField,
-  ne as SSnackbarMessage,
-  Qe as SSpotlightCursor,
-  Ie as SStripeCVC,
-  he as SStripeExpiry,
-  ke as SStripeNumber,
-  io as STab,
-  go as STabPanel,
-  xo as STabs,
-  C as STextEditor,
-  te as STextField,
-  To as STextShimmer,
-  ue as STextTruncation,
-  Fe as SThemeProvider,
-  de as STip,
-  vo as STypewriterText,
-  ge as SnackbarMessageProvider,
-  ye as StripeTextField,
-  yo as bytesToSize,
-  zo as createLogger,
-  Ro as dayjs,
-  ho as formatDatePosted,
-  Ao as logger,
-  Do as useDialog,
-  B as useDialogConfirm,
-  R as useDialogMessage,
-  Mo as usePopover,
-  ce as useSnackbarMessage
+  f as SActionOverlay,
+  s as SAutocomplete,
+  p as SAvatar,
+  S as SButton,
+  u as SButtonLink,
+  n as SCarousel,
+  c as SChatInput,
+  v as SChatMessage,
+  b as SCheckbox,
+  I as SChip,
+  h as SChips,
+  he as SCopilotKitProvider,
+  _e as SCopyableText,
+  L as SDataTable,
+  Ne as SDatePicker,
+  we as SDateTimePicker,
+  J as SDialog,
+  A as SDialogConfirm,
+  w as SDialogMessage,
+  O as SEmpty,
+  j as SError,
+  U as SFileDropzone,
+  X as SFileIcon,
+  q as SFlexBox,
+  be as SForm,
+  He as SGlowButton,
+  Ve as SGradientIcon,
+  Z as SI18nProvider,
+  $ as SIconButton,
+  so as SImageComparison,
+  to as SImageModal,
+  oo as SInteractiveGallery,
+  oe as SLabel,
+  fo as SLazyImage,
+  Ke as SLocalizationProvider,
+  Qe as SMovingBorder,
+  te as SMultiSelect,
+  fe as SNoSsr,
+  pe as SPagination,
+  po as SRadialPulseAnimate,
+  So as SRating,
+  io as SReview,
+  We as SScrollReveal,
+  Se as SSelect,
+  ue as SSkeleton,
+  Ie as SSmartTextField,
+  ve as SSnackbarMessage,
+  Ye as SSpotlightCursor,
+  Le as SStripeCVC,
+  Fe as SStripeExpiry,
+  Be as SStripeNumber,
+  To as STab,
+  Co as STabPanel,
+  go as STabs,
+  P as STextEditor,
+  se as STextField,
+  Do as STextShimmer,
+  ce as STextTruncation,
+  Ee as SThemeProvider,
+  ne as STip,
+  Mo as STypewriterText,
+  Ce as SnackbarMessageProvider,
+  Ae as StripeTextField,
+  Ao as bytesToSize,
+  wo as createLogger,
+  jo as dayjs,
+  Fo as formatDatePosted,
+  Go as logger,
+  yo as useDialog,
+  z as useDialogConfirm,
+  G as useDialogMessage,
+  ko as usePopover,
+  Pe as useSnackbarMessage
 };

package/dist/s-action-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-action-overlay';
+export type { SActionOverlayProps, IActionOverlay } from './s-action-overlay';

package/dist/s-action-overlay/index.js

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

package/dist/s-action-overlay/package.json

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

package/dist/s-action-overlay/s-action-overlay.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { SIconButtonProps } from '../s-icon-button';
+export interface IActionOverlay {
+    icon: ReactNode;
+    tooltip: string;
+    onClick?: () => void;
+    isActive?: boolean;
+    disabled?: boolean;
+    color?: 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+    iconButtonProps?: SIconButtonProps;
+}
+export interface SActionOverlayProps {
+    actions: IActionOverlay[];
+    maxWidth?: number | string;
+    columns?: number;
+    children: ReactNode;
+    showOnHover?: boolean;
+    visible?: boolean;
+    position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    backdropColor?: string;
+    backdropOpacity?: number;
+    blurAmount?: number;
+    borderRadius?: number | string;
+    overlaySx?: SxProps<Theme>;
+    onVisibilityChange?: (visible: boolean) => void;
+}
+declare const SActionOverlay: ({ actions, maxWidth, columns, children, showOnHover, visible: controlledVisible, position, backdropColor, backdropOpacity, blurAmount, borderRadius, overlaySx, onVisibilityChange, }: SActionOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export default SActionOverlay;

package/dist/s-action-overlay/s-action-overlay.js

@@ -0,0 +1,112 @@
+import { j as r } from "../jsx-runtime-DywqP_6a.js";
+import { useState as _ } from "react";
+import { Box as l, Grid as c } from "@mui/material";
+import b from "../s-icon-button/s-icon-button.js";
+const T = 40, B = 16, R = ({
+  actions: u,
+  maxWidth: d,
+  columns: s = 3,
+  children: p,
+  showOnHover: n = !0,
+  visible: o,
+  position: a = "center",
+  backdropColor: x = "divider",
+  backdropOpacity: m = 1,
+  blurAmount: j = 10,
+  borderRadius: v = 0,
+  overlaySx: g,
+  onVisibilityChange: e
+}) => {
+  const [I, i] = _(!1), h = o !== void 0 ? o : n && I, y = () => {
+    n && o === void 0 && (i(!0), e == null || e(!0));
+  }, A = () => {
+    n && o === void 0 && (i(!1), e == null || e(!1));
+  }, E = () => {
+    switch (a) {
+      case "top-left":
+        return { justifyContent: "flex-start", alignItems: "flex-start" };
+      case "top-right":
+        return { justifyContent: "flex-end", alignItems: "flex-start" };
+      case "bottom-left":
+        return { justifyContent: "flex-start", alignItems: "flex-end" };
+      case "bottom-right":
+        return { justifyContent: "flex-end", alignItems: "flex-end" };
+      case "center":
+      default:
+        return { justifyContent: "center", alignItems: "center" };
+    }
+  }, M = () => {
+    switch (a) {
+      case "top-left":
+        return "flex-start";
+      case "top-right":
+        return "flex-end";
+      case "bottom-left":
+        return "flex-start";
+      case "bottom-right":
+        return "flex-end";
+      case "center":
+      default:
+        return "center";
+    }
+  }, k = () => {
+    let t = d;
+    return s && (t = s * T + (s - 1) * B + s * 16), t;
+  };
+  return (
+    // Main container with flex to center the children
+    /* @__PURE__ */ r.jsx(l, { display: "flex", children: /* @__PURE__ */ r.jsxs(l, { position: "relative", onMouseEnter: y, onMouseLeave: A, children: [
+      p,
+      h && /* @__PURE__ */ r.jsx(
+        l,
+        {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          bgcolor: x,
+          sx: {
+            opacity: m,
+            backdropFilter: `blur(${j}px)`,
+            transform: "translateZ(0)",
+            willChange: "transform",
+            transition: "opacity 0.2s ease-in-out",
+            ...E(),
+            ...g
+          },
+          borderRadius: v,
+          children: /* @__PURE__ */ r.jsx(c, { container: !0, spacing: 2, justifyContent: M(), maxWidth: k(), children: u.map((t, C) => {
+            var f;
+            return /* @__PURE__ */ r.jsx(c, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ r.jsx(
+              b,
+              {
+                tooltipOptions: { title: t.tooltip, placement: "top" },
+                onClick: t.onClick,
+                disabled: t.disabled,
+                color: t.color,
+                size: "small",
+                sx: {
+                  margin: 1,
+                  backgroundColor: t.isActive ? "primary.main" : void 0,
+                  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                  opacity: t.disabled ? 0.5 : 1,
+                  "&:hover": {
+                    backgroundColor: t.isActive ? "primary.dark" : void 0
+                  },
+                  ...(f = t.iconButtonProps) == null ? void 0 : f.sx
+                },
+                ...t.iconButtonProps,
+                children: t.icon
+              }
+            ) }, `${t.tooltip}-${C}`);
+          }) })
+        }
+      )
+    ] }) })
+  );
+};
+export {
+  R as default
+};

package/dist/s-chat-message/s-chat-message.js

@@ -4,27 +4,27 @@ import { Box as o, Typography as l, Paper as H, IconButton as D } from "@mui/mat
 import S from "../s-avatar/s-avatar.js";
 import L from "../s-image-modal/s-image-modal.js";
 import O from "../s-lazy-image/s-lazy-image.js";
-import { c as b } from "../createSvgIcon-DCQI9UV5.js";
-const R = b(/* @__PURE__ */ r.jsx("path", {
+import { c as z } from "../createSvgIcon-DCQI9UV5.js";
+const R = z(/* @__PURE__ */ r.jsx("path", {
   d: "M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"
-}), "Download"), U = b(/* @__PURE__ */ r.jsx("path", {
+}), "Download"), U = z(/* @__PURE__ */ r.jsx("path", {
   d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z"
-}), "InsertDriveFile"), Q = ({
+}), "InsertDriveFile"), J = ({
   message: m,
-  variant: z = "received",
+  variant: b = "received",
   timestamp: f,
-  avatar: g,
+  avatar: h,
   senderName: t,
-  showAvatar: h = !0,
+  showAvatar: g = !0,
   showTimestamp: I = !1,
   maxWidth: w = "70%",
   attachments: x = [],
   onAttachmentClick: s,
   onDownload: n,
-  sx: M,
-  ...k
+  sx: k,
+  ...M
 }) => {
-  const [a, u] = v(null), [C, j] = v(!1), i = z === "sent", T = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleTimeString("en-US", {
+  const [a, u] = v(null), [C, j] = v(!1), i = b === "sent", T = (e) => (typeof e == "string" ? new Date(e) : e).toLocaleTimeString("en-US", {
     hour: "2-digit",
     minute: "2-digit",
     hour12: !0
@@ -48,11 +48,11 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
       sx: {
         maxWidth: w,
         alignSelf: i ? "flex-end" : "flex-start",
-        ...M
+        ...k
       },
-      ...k,
+      ...M,
       children: [
-        h && !i && /* @__PURE__ */ r.jsx(S, { avatar: g, name: t, size: 36 }),
+        g && !i && /* @__PURE__ */ r.jsx(S, { avatar: h, name: t, size: 36 }),
         /* @__PURE__ */ r.jsxs(
           o,
           {
@@ -148,9 +148,9 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
                           p: 1,
                           mt: c > 0 ? 1 : 0,
                           cursor: "pointer",
-                          backgroundColor: i ? "rgba(0,0,0,0.1)" : "background.paper",
+                          backgroundColor: i ? "blackAlpha.zero" : "background.paper",
                           "&:hover": {
-                            backgroundColor: i ? "rgba(0,0,0,0.2)" : "action.hover"
+                            backgroundColor: i ? "blackAlpha.light" : "action.hover"
                           }
                         },
                         onClick: () => W(e),
@@ -186,7 +186,7 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
                                 variant: "caption",
                                 sx: {
                                   fontSize: "0.75rem",
-                                  color: i ? "rgba(255,255,255,0.7)" : "text.secondary"
+                                  color: i ? "whiteAlpha.dark" : "text.secondary"
                                 },
                                 children: B(e.size)
                               }
@@ -240,7 +240,7 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
             ]
           }
         ),
-        h && i && /* @__PURE__ */ r.jsx(S, { avatar: g, name: t, size: 36 }),
+        g && i && /* @__PURE__ */ r.jsx(S, { avatar: h, name: t, size: 36 }),
         a && /* @__PURE__ */ r.jsx(
           L,
           {
@@ -263,5 +263,5 @@ const R = b(/* @__PURE__ */ r.jsx("path", {
   );
 };
 export {
-  Q as default
+  J as default
 };

package/dist/s-flex-box/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-flex-box';
+export type { SFlexBoxProps } from './s-flex-box';

package/dist/s-flex-box/index.js

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

package/dist/s-flex-box/package.json

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

package/dist/s-flex-box/s-flex-box.d.ts

@@ -0,0 +1,5 @@
+import { BoxProps } from '@mui/material/Box';
+export interface SFlexBoxProps extends BoxProps {
+}
+declare const SFlexBox: ({ children, ...props }: SFlexBoxProps) => import("react/jsx-runtime").JSX.Element;
+export default SFlexBox;

package/dist/s-flex-box/s-flex-box.js

@@ -0,0 +1,6 @@
+import { j as s } from "../jsx-runtime-DywqP_6a.js";
+import { B as t } from "../Box-Deehc8LF.js";
+const a = ({ children: o, ...r }) => /* @__PURE__ */ s.jsx(t, { display: "flex", ...r, children: o });
+export {
+  a as default
+};

package/dist/s-radial-pulse-animate/s-radial-pulse-animate.js

@@ -1,8 +1,8 @@
 import { j as n } from "../jsx-runtime-DywqP_6a.js";
-import { useRef as x, useEffect as y } from "react";
-import { keyframes as h, styled as l, Box as d } from "@mui/material";
+import { useRef as x, useEffect as h } from "react";
+import { keyframes as y, styled as l, Box as d } from "@mui/material";
 import b from "../s-text-shimmer/s-text-shimmer.js";
-const j = h`
+const j = y`
   0% {
     width: 20%;
     height: 20%;
@@ -13,7 +13,7 @@ const j = h`
     height: 100%;
     opacity: 0;
   }
-`, g = l(d)(({ theme: e }) => ({
+`, v = l(d)(({ theme: e }) => ({
   position: "relative",
   display: "flex",
   justifyContent: "center",
@@ -21,7 +21,7 @@ const j = h`
   borderRadius: e.shape.borderRadius,
   border: "1px solid",
   borderColor: e.palette.divider
-})), v = l(d)(() => ({
+})), C = l(d)(() => ({
   position: "absolute",
   pointerEvents: "none"
 })), s = l(d)(({ theme: e }) => ({
@@ -43,14 +43,14 @@ const j = h`
   "@media (prefers-reduced-motion: reduce)": {
     animation: "none !important"
   }
-})), C = () => {
+})), R = () => {
   const e = "s-radial-pulse-particles";
   if (document.getElementById(e)) return;
   const a = document.createElement("style");
   a.id = e, a.textContent = `
     .s-radial-pulse-particle {
       position: absolute;
-      background: rgba(255, 255, 255, 0.8);
+      background: var(--s-palette-whiteAlpha-dark);
       border-radius: 50%;
       animation: s-radial-pulse-float 4s ease-in-out infinite;
     }
@@ -84,8 +84,8 @@ const j = h`
   particleSize: r = { min: 2, max: 6 }
 }) => {
   const o = x(null);
-  return y(() => {
-    C();
+  return h(() => {
+    R();
     const p = () => {
       if (!o.current) return;
       const i = o.current, t = document.createElement("div");
@@ -98,7 +98,7 @@ const j = h`
     for (let i = 0; i < 4; i++) setTimeout(p, i * 100);
     return () => clearInterval(f);
   }, [e, a, r]), /* @__PURE__ */ n.jsxs(
-    g,
+    v,
     {
       ref: o,
       className: c,
@@ -108,7 +108,7 @@ const j = h`
       },
       children: [
         /* @__PURE__ */ n.jsxs(
-          v,
+          C,
           {
             sx: {
               width: Math.min(e, a),

package/dist/theme/customizations/inputs.js

@@ -118,7 +118,6 @@ const u = l(/* @__PURE__ */ i.jsx("path", {
         fontWeight: 500,
         ...o.applyStyles("dark", {
           color: e[400],
-          boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)",
           [`&.${g.selected}`]: {
             color: r[300]
           }

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

@@ -118,6 +118,32 @@ export declare const purple: {
     800: string;
     900: string;
 };
+export declare const blackAlpha: {
+    0: string;
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
+export declare const whiteAlpha: {
+    0: string;
+    10: string;
+    20: string;
+    30: string;
+    40: string;
+    50: string;
+    60: string;
+    70: string;
+    80: string;
+    90: string;
+    100: string;
+};
 export declare const colorSchemes: {
     light: {
         palette: {
@@ -127,6 +153,20 @@ export declare const colorSchemes: {
                 indigo: string;
                 sky: string;
             };
+            blackAlpha: {
+                zero: string;
+                light: string;
+                medium: string;
+                dark: string;
+                full: string;
+            };
+            whiteAlpha: {
+                zero: string;
+                light: string;
+                medium: string;
+                dark: string;
+                full: string;
+            };
             ui: {
                 pulse: {
                     shadowLight: string;
@@ -201,6 +241,20 @@ export declare const colorSchemes: {
                 indigo: string;
                 sky: string;
             };
+            blackAlpha: {
+                zero: string;
+                light: string;
+                medium: string;
+                dark: string;
+                full: string;
+            };
+            whiteAlpha: {
+                zero: string;
+                light: string;
+                medium: string;
+                dark: string;
+                full: string;
+            };
             ui: {
                 pulse: {
                     shadowLight: string;

package/dist/theme/theme-primitives.js

@@ -1,6 +1,6 @@
-import { a as n } from "../createTheme-YLBX8GSj.js";
-import { a as e } from "../colorManipulator-ep5lERxB.js";
-const t = n(), h = {
+import { a as i } from "../createTheme-YLBX8GSj.js";
+import { a as s } from "../colorManipulator-ep5lERxB.js";
+const a = i(), r = {
   50: "hsl(210, 100%, 95%)",
   100: "hsl(210, 100%, 92%)",
   200: "hsl(210, 100%, 80%)",
@@ -11,7 +11,7 @@ const t = n(), h = {
   700: "hsl(210, 100%, 35%)",
   800: "hsl(210, 100%, 16%)",
   900: "hsl(210, 100%, 21%)"
-}, s = {
+}, h = {
   50: "rgb(243, 246, 250)",
   // hsl(220, 35%, 97%)
   100: "rgb(235, 238, 244)",
@@ -32,7 +32,7 @@ const t = n(), h = {
   // hsl(220, 30%, 6%)
   900: "rgb(5, 7, 10)"
   // hsl(220, 35%, 3%)
-}, a = {
+}, l = {
   50: "hsl(120, 80%, 98%)",
   100: "hsl(120, 75%, 94%)",
   200: "hsl(120, 75%, 87%)",
@@ -43,7 +43,7 @@ const t = n(), h = {
   700: "hsl(120, 75%, 16%)",
   800: "hsl(120, 84%, 10%)",
   900: "hsl(120, 87%, 6%)"
-}, r = {
+}, o = {
   50: "hsl(45, 100%, 97%)",
   100: "hsl(45, 92%, 90%)",
   200: "hsl(45, 94%, 80%)",
@@ -65,7 +65,7 @@ const t = n(), h = {
   700: "hsl(210, 95%, 25%)",
   800: "hsl(210, 100%, 15%)",
   900: "hsl(210, 100%, 10%)"
-}, l = {
+}, g = {
   50: "hsl(0, 100%, 97%)",
   100: "hsl(0, 92%, 90%)",
   200: "hsl(0, 94%, 80%)",
@@ -76,7 +76,7 @@ const t = n(), h = {
   700: "hsl(0, 94%, 18%)",
   800: "hsl(0, 95%, 12%)",
   900: "hsl(0, 93%, 6%)"
-}, c = {
+}, y = {
   50: "hsl(270, 100%, 98%)",
   100: "hsl(270, 95%, 94%)",
   200: "hsl(270, 90%, 87%)",
@@ -87,7 +87,31 @@ const t = n(), h = {
   700: "hsl(270, 75%, 25%)",
   800: "hsl(270, 80%, 15%)",
   900: "hsl(270, 85%, 10%)"
-}, o = {
+}, t = {
+  0: "rgba(0,0,0,0)",
+  10: "rgba(0,0,0,0.1)",
+  20: "rgba(0,0,0,0.2)",
+  30: "rgba(0,0,0,0.3)",
+  40: "rgba(0,0,0,0.4)",
+  50: "rgba(0,0,0,0.5)",
+  60: "rgba(0,0,0,0.6)",
+  70: "rgba(0,0,0,0.7)",
+  80: "rgba(0,0,0,0.8)",
+  90: "rgba(0,0,0,0.9)",
+  100: "rgba(0,0,0,1)"
+}, e = {
+  0: "rgba(255,255,255,0)",
+  10: "rgba(255,255,255,0.1)",
+  20: "rgba(255,255,255,0.2)",
+  30: "rgba(255,255,255,0.3)",
+  40: "rgba(255,255,255,0.4)",
+  50: "rgba(255,255,255,0.5)",
+  60: "rgba(255,255,255,0.6)",
+  70: "rgba(255,255,255,0.7)",
+  80: "rgba(255,255,255,0.8)",
+  90: "rgba(255,255,255,0.9)",
+  100: "rgba(255,255,255,1)"
+}, n = {
   palette: {
     gradient: {
       primary: "linear-gradient(90deg, #1469be 0%, #43ecff 100%);",
@@ -95,6 +119,30 @@ const t = n(), h = {
       indigo: "linear-gradient(to right, transparent, #6366f1, transparent)",
       sky: "linear-gradient(to right, transparent, #0ea5e9, transparent)"
     },
+    blackAlpha: {
+      zero: t[0],
+      // không có
+      light: t[10],
+      // nhẹ, subtle
+      medium: t[50],
+      // vừa, balanced
+      dark: t[80],
+      // đậm, mạnh
+      full: t[100]
+      // đầy đủ
+    },
+    whiteAlpha: {
+      zero: e[0],
+      // không có
+      light: e[10],
+      // nhẹ, subtle
+      medium: e[50],
+      // vừa, balanced
+      dark: e[80],
+      // đậm, mạnh
+      full: e[100]
+      // đầy đủ
+    },
     ui: {
       pulse: {
         shadowLight: "rgba(255, 255, 255, 0.3)",
@@ -105,111 +153,113 @@ const t = n(), h = {
       }
     },
     primary: {
-      contrastText: h[50],
-      light: h[300],
-      main: h[400],
-      dark: h[700],
+      contrastText: r[50],
+      light: r[300],
+      main: r[400],
+      dark: r[700],
       white: "#ffffff",
       black: "#000000"
     },
     info: {
-      contrastText: h[300],
-      light: h[500],
-      main: h[700],
-      dark: h[900]
+      contrastText: r[300],
+      light: r[500],
+      main: r[700],
+      dark: r[900]
     },
     warning: {
-      light: r[400],
-      main: r[500],
-      dark: r[700]
+      light: o[400],
+      main: o[500],
+      dark: o[700]
     },
     error: {
+      light: g[400],
+      main: g[500],
+      dark: g[700]
+    },
+    success: {
       light: l[400],
       main: l[500],
       dark: l[700]
     },
-    success: {
-      light: a[400],
-      main: a[500],
-      dark: a[700]
-    },
-    grey: s,
-    divider: e(s[700], 0.6),
+    grey: h,
+    divider: s(h[700], 0.6),
     background: {
-      default: s[900],
+      default: h[900],
       paper: "hsl(220, 30%, 7%)"
     },
     text: {
       primary: "rgb(255, 255, 255)",
-      secondary: s[400]
+      secondary: h[400]
     },
     action: {
-      hover: e(s[600], 0.2),
-      selected: e(s[600], 0.3)
+      hover: s(h[600], 0.2),
+      selected: s(h[600], 0.3)
     },
     baseShadow: "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
   }
-}, i = o, y = { light: i, dark: o }, b = {
+}, p = n, m = { light: p, dark: n }, x = {
   fontFamily: "Outfit, sans-serif",
   h1: {
-    fontSize: t.typography.pxToRem(48),
+    fontSize: a.typography.pxToRem(48),
     fontWeight: 600,
     lineHeight: 1.2,
     letterSpacing: -0.5
   },
   h2: {
-    fontSize: t.typography.pxToRem(36),
+    fontSize: a.typography.pxToRem(36),
     fontWeight: 600,
     lineHeight: 1.2
   },
   h3: {
-    fontSize: t.typography.pxToRem(30),
+    fontSize: a.typography.pxToRem(30),
     lineHeight: 1.2
   },
   h4: {
-    fontSize: t.typography.pxToRem(24),
+    fontSize: a.typography.pxToRem(24),
     fontWeight: 600,
     lineHeight: 1.5
   },
   h5: {
-    fontSize: t.typography.pxToRem(20),
+    fontSize: a.typography.pxToRem(20),
     fontWeight: 600
   },
   h6: {
-    fontSize: t.typography.pxToRem(18),
+    fontSize: a.typography.pxToRem(18),
     fontWeight: 600
   },
   subtitle1: {
-    fontSize: t.typography.pxToRem(18)
+    fontSize: a.typography.pxToRem(18)
   },
   subtitle2: {
-    fontSize: t.typography.pxToRem(14),
+    fontSize: a.typography.pxToRem(14),
     fontWeight: 500
   },
   body1: {
-    fontSize: t.typography.pxToRem(14)
+    fontSize: a.typography.pxToRem(14)
   },
   body2: {
-    fontSize: t.typography.pxToRem(14),
+    fontSize: a.typography.pxToRem(14),
     fontWeight: 400
   },
   caption: {
-    fontSize: t.typography.pxToRem(12),
+    fontSize: a.typography.pxToRem(12),
     fontWeight: 400
   }
-}, m = {
+}, u = {
   borderRadius: 8
-}, g = ["none", "var(--s-palette-baseShadow)", ...t.shadows.slice(2)], x = g;
+}, b = ["none", "var(--s-palette-baseShadow)", ...a.shadows.slice(2)], S = b;
 export {
+  t as blackAlpha,
   f as blue,
-  h as brand,
-  y as colorSchemes,
-  s as gray,
-  a as green,
-  r as orange,
-  c as purple,
-  l as red,
-  x as shadows,
-  m as shape,
-  b as typography
+  r as brand,
+  m as colorSchemes,
+  h as gray,
+  l as green,
+  o as orange,
+  y as purple,
+  g as red,
+  S as shadows,
+  u as shape,
+  x as typography,
+  e as whiteAlpha
 };

package/package.json

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