@solostylist/ui-kit 1.0.166 → 1.0.168

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

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

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

@@ -1,29 +1,62 @@
 import { ReactNode } from 'react';
 import { SxProps, Theme } from '@mui/material';
 import { SIconButtonProps } from '../s-icon-button';
+/**
+ * Configuration for individual action overlay buttons
+ */
 export interface IActionOverlay {
+    /** Icon to display in the button */
     icon: ReactNode;
+    /** Tooltip text to show on hover */
     tooltip: string;
+    /** Click handler for the action */
     onClick?: () => void;
+    /** Whether the action is in an active state */
     isActive?: boolean;
+    /** Whether the action is disabled */
     disabled?: boolean;
+    /** Color variant for the icon button */
     color?: 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
+    /** Additional props to pass to the underlying SIconButton */
     iconButtonProps?: SIconButtonProps;
 }
+/**
+ * Props interface for SActionOverlay component
+ */
 export interface SActionOverlayProps {
+    /** Array of action configurations for the overlay buttons */
     actions: IActionOverlay[];
+    /** Maximum width of the actions container (overrides columns calculation) */
     maxWidth?: number | string;
+    /** Number of columns for the action grid layout */
     columns?: number;
+    /** The content to overlay the actions on */
     children: ReactNode;
+    /** Whether to show overlay on hover */
     showOnHover?: boolean;
+    /** Controlled visibility state (overrides showOnHover) */
     visible?: boolean;
+    /** Position of the action buttons within the overlay */
     position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Background color of the overlay backdrop */
     backdropColor?: string;
+    /** Opacity of the backdrop (0-1) */
     backdropOpacity?: number;
+    /** Blur amount in pixels for the backdrop filter */
     blurAmount?: number;
+    /** Border radius of the overlay */
     borderRadius?: number | string;
+    /** Custom styles for the overlay element */
     overlaySx?: SxProps<Theme>;
+    /** Callback when overlay visibility changes */
     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;
+/**
+ * A flexible overlay component that displays action buttons on top of content.
+ * Supports hover-based or controlled visibility, multiple positioning options, and customizable backdrop effects.
+ */
+export declare const SActionOverlay: {
+    ({ actions, maxWidth, columns, children, showOnHover, visible: controlledVisible, position, backdropColor, backdropOpacity, blurAmount, borderRadius, overlaySx, onVisibilityChange, }: SActionOverlayProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export default SActionOverlay;

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

@@ -1,28 +1,28 @@
-import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import { useState as k } from "react";
-import { Box as a, Grid as f } from "@mui/material";
-import C from "../s-icon-button/s-icon-button.js";
-const _ = 40, B = 16, R = ({
-  actions: u,
-  maxWidth: d,
-  columns: s = 3,
-  children: p,
-  showOnHover: n = !0,
-  visible: o,
-  position: l = "center",
-  backdropColor: x = "background.paper",
-  backdropOpacity: m = 0.9,
-  blurAmount: v = 10,
-  borderRadius: j = 0,
-  overlaySx: g,
-  onVisibilityChange: e
+import { j as o } from "../jsx-runtime-OVHDjVDe.js";
+import { useState as w } from "react";
+import { Box as l, Grid as p } from "@mui/material";
+import { SIconButton as I } from "../s-icon-button/s-icon-button.js";
+const j = 40, S = 16, s = ({
+  actions: n,
+  maxWidth: m,
+  columns: r = 3,
+  children: f,
+  showOnHover: i = !0,
+  visible: a,
+  position: u = "center",
+  backdropColor: v = "background.paper",
+  backdropOpacity: y = 0.9,
+  blurAmount: b = 10,
+  borderRadius: h = 0,
+  overlaySx: x,
+  onVisibilityChange: t
 }) => {
-  const [I, i] = k(!1), y = o !== void 0 ? o : n && I, h = () => {
-    n && o === void 0 && (i(!0), e == null || e(!0));
+  const [g, d] = w(!1), k = a !== void 0 ? a : i && g, q = () => {
+    i && a === void 0 && (d(!0), t == null || t(!0));
   }, A = () => {
-    n && o === void 0 && (i(!1), e == null || e(!1));
-  }, E = () => {
-    switch (l) {
+    i && a === void 0 && (d(!1), t == null || t(!1));
+  }, _ = () => {
+    switch (u) {
       case "top-left":
         return { justifyContent: "flex-start", alignItems: "flex-start" };
       case "top-right":
@@ -35,8 +35,8 @@ const _ = 40, B = 16, R = ({
       default:
         return { justifyContent: "center", alignItems: "center" };
     }
-  }, M = () => {
-    switch (l) {
+  }, O = () => {
+    switch (u) {
       case "top-left":
         return "flex-start";
       case "top-right":
@@ -49,16 +49,16 @@ const _ = 40, B = 16, R = ({
       default:
         return "center";
     }
-  }, T = () => {
-    let t = d;
-    return s && (t = s * _ + (s - 1) * B + s * 16), t;
+  }, V = () => {
+    let e = m;
+    return r && (e = r * j + (r - 1) * S + r * 16), e;
   };
   return (
     // Main container with flex to center the children
-    /* @__PURE__ */ r.jsx(a, { display: "flex", children: /* @__PURE__ */ r.jsxs(a, { position: "relative", onMouseEnter: h, onMouseLeave: A, children: [
-      p,
-      y && /* @__PURE__ */ r.jsx(
-        a,
+    /* @__PURE__ */ o.jsx(l, { display: "flex", children: /* @__PURE__ */ o.jsxs(l, { position: "relative", onMouseEnter: q, onMouseLeave: A, children: [
+      f,
+      k && /* @__PURE__ */ o.jsx(
+        l,
         {
           position: "absolute",
           top: 0,
@@ -66,49 +66,61 @@ const _ = 40, B = 16, R = ({
           width: "100%",
           height: "100%",
           display: "flex",
-          bgcolor: x,
+          bgcolor: v,
           sx: {
-            opacity: m,
-            backdropFilter: `blur(${v}px)`,
+            opacity: y,
+            backdropFilter: `blur(${b}px)`,
             transform: "translateZ(0)",
             willChange: "transform",
             transition: "opacity 0.2s ease-in-out",
-            ...E(),
-            ...g
+            ..._(),
+            ...x
           },
-          borderRadius: j,
-          children: /* @__PURE__ */ r.jsx(f, { container: !0, spacing: 2, justifyContent: M(), maxWidth: T(), children: u.map((t, b) => {
+          borderRadius: h,
+          children: /* @__PURE__ */ o.jsx(p, { container: !0, spacing: 2, justifyContent: O(), maxWidth: V(), children: n.map((e, C) => {
             var c;
-            return /* @__PURE__ */ r.jsx(f, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ r.jsx(
-              C,
+            return /* @__PURE__ */ o.jsx(p, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ o.jsx(
+              I,
               {
-                tooltipOptions: { title: t.tooltip, placement: "top" },
-                onClick: t.onClick,
-                disabled: t.disabled,
-                color: t.color,
+                tooltipOptions: { title: e.tooltip, placement: "top" },
+                onClick: e.onClick,
+                disabled: e.disabled,
+                color: e.color,
                 size: "small",
                 sx: {
                   margin: 1,
-                  backgroundColor: t.isActive ? "primary.main" : void 0,
-                  color: t.isActive ? "primary.contrastText" : void 0,
+                  backgroundColor: e.isActive ? "primary.main" : void 0,
+                  color: e.isActive ? "primary.contrastText" : void 0,
                   transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                  opacity: t.disabled ? 0.5 : 1,
+                  opacity: e.disabled ? 0.5 : 1,
                   "&:hover": {
-                    backgroundColor: t.isActive ? "primary.main" : void 0,
-                    color: t.isActive ? "primary.contrastText" : void 0
+                    backgroundColor: e.isActive ? "primary.main" : void 0,
+                    color: e.isActive ? "primary.contrastText" : void 0
                   },
-                  ...(c = t.iconButtonProps) == null ? void 0 : c.sx
+                  ...(c = e.iconButtonProps) == null ? void 0 : c.sx
                 },
-                ...t.iconButtonProps,
-                children: t.icon
+                ...e.iconButtonProps,
+                children: e.icon
               }
-            ) }, `${t.tooltip}-${b}`);
+            ) }, `${e.tooltip}-${C}`);
           }) })
         }
       )
     ] }) })
   );
 };
+s.displayName = "SActionOverlay";
+try {
+  s.displayName = "SActionOverlay", s.__docgenInfo = { description: `A flexible overlay component that displays action buttons on top of content.
+Supports hover-based or controlled visibility, multiple positioning options, and customizable backdrop effects.`, displayName: "SActionOverlay", props: { actions: { defaultValue: null, description: "Array of action configurations for the overlay buttons", name: "actions", required: !0, type: { name: "IActionOverlay[]" } }, maxWidth: { defaultValue: null, description: "Maximum width of the actions container (overrides columns calculation)", name: "maxWidth", required: !1, type: { name: "string | number" } }, columns: { defaultValue: { value: "3" }, description: "Number of columns for the action grid layout", name: "columns", required: !1, type: { name: "number" } }, children: { defaultValue: null, description: "The content to overlay the actions on", name: "children", required: !0, type: { name: "ReactNode" } }, showOnHover: { defaultValue: { value: "true" }, description: "Whether to show overlay on hover", name: "showOnHover", required: !1, type: { name: "boolean" } }, visible: { defaultValue: null, description: "Controlled visibility state (overrides showOnHover)", name: "visible", required: !1, type: { name: "boolean" } }, position: { defaultValue: { value: "center" }, description: "Position of the action buttons within the overlay", name: "position", required: !1, type: { name: "enum", value: [{ value: '"center"' }, { value: '"top-left"' }, { value: '"top-right"' }, { value: '"bottom-left"' }, { value: '"bottom-right"' }] } }, backdropColor: { defaultValue: { value: "background.paper" }, description: "Background color of the overlay backdrop", name: "backdropColor", required: !1, type: { name: "string" } }, backdropOpacity: { defaultValue: { value: "0.9" }, description: "Opacity of the backdrop (0-1)", name: "backdropOpacity", required: !1, type: { name: "number" } }, blurAmount: { defaultValue: { value: "10" }, description: "Blur amount in pixels for the backdrop filter", name: "blurAmount", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "0" }, description: "Border radius of the overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, overlaySx: { defaultValue: null, description: "Custom styles for the overlay element", name: "overlaySx", required: !1, type: { name: "SxProps<Theme>" } }, onVisibilityChange: { defaultValue: null, description: "Callback when overlay visibility changes", name: "onVisibilityChange", required: !1, type: { name: "((visible: boolean) => void)" } } } };
+} catch {
+}
+try {
+  sactionoverlay.displayName = "sactionoverlay", sactionoverlay.__docgenInfo = { description: `A flexible overlay component that displays action buttons on top of content.
+Supports hover-based or controlled visibility, multiple positioning options, and customizable backdrop effects.`, displayName: "sactionoverlay", props: { actions: { defaultValue: null, description: "Array of action configurations for the overlay buttons", name: "actions", required: !0, type: { name: "IActionOverlay[]" } }, maxWidth: { defaultValue: null, description: "Maximum width of the actions container (overrides columns calculation)", name: "maxWidth", required: !1, type: { name: "string | number" } }, columns: { defaultValue: { value: "3" }, description: "Number of columns for the action grid layout", name: "columns", required: !1, type: { name: "number" } }, children: { defaultValue: null, description: "The content to overlay the actions on", name: "children", required: !0, type: { name: "ReactNode" } }, showOnHover: { defaultValue: { value: "true" }, description: "Whether to show overlay on hover", name: "showOnHover", required: !1, type: { name: "boolean" } }, visible: { defaultValue: null, description: "Controlled visibility state (overrides showOnHover)", name: "visible", required: !1, type: { name: "boolean" } }, position: { defaultValue: { value: "center" }, description: "Position of the action buttons within the overlay", name: "position", required: !1, type: { name: "enum", value: [{ value: '"center"' }, { value: '"top-left"' }, { value: '"top-right"' }, { value: '"bottom-left"' }, { value: '"bottom-right"' }] } }, backdropColor: { defaultValue: { value: "background.paper" }, description: "Background color of the overlay backdrop", name: "backdropColor", required: !1, type: { name: "string" } }, backdropOpacity: { defaultValue: { value: "0.9" }, description: "Opacity of the backdrop (0-1)", name: "backdropOpacity", required: !1, type: { name: "number" } }, blurAmount: { defaultValue: { value: "10" }, description: "Blur amount in pixels for the backdrop filter", name: "blurAmount", required: !1, type: { name: "number" } }, borderRadius: { defaultValue: { value: "0" }, description: "Border radius of the overlay", name: "borderRadius", required: !1, type: { name: "string | number" } }, overlaySx: { defaultValue: null, description: "Custom styles for the overlay element", name: "overlaySx", required: !1, type: { name: "SxProps<Theme>" } }, onVisibilityChange: { defaultValue: null, description: "Callback when overlay visibility changes", name: "onVisibilityChange", required: !1, type: { name: "((visible: boolean) => void)" } } } };
+} catch {
+}
 export {
-  R as default
+  s as SActionOverlay,
+  s as default
 };

package/dist/s-ai-tool-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { default, SAiToolBarInputType } from './s-ai-tool-bar';
+export type { SAiToolBarProps, SAiToolBarInput, SAiToolBarValue, SAiToolBarOption } from './s-ai-tool-bar';

package/dist/s-ai-tool-bar/index.js

@@ -1,4 +1,5 @@
-import { default as o } from "./s-ai-tool-bar.js";
+import { SAiToolBarInputType as r, SAiToolBar as e } from "./s-ai-tool-bar.js";
 export {
-  o as default
+  r as SAiToolBarInputType,
+  e as default
 };

package/dist/s-ai-tool-bar/s-ai-tool-bar.d.ts

@@ -1,4 +1,23 @@
 import { default as React } from 'react';
+/**
+ * Possible value types for SAiToolBar inputs
+ */
+export type SAiToolBarValue = string | number | boolean | File | (string | File)[] | null;
+/**
+ * Base type constraint for select options
+ */
+export type SAiToolBarOption = string | number | Record<string, unknown>;
+/**
+ * Supported input types for SAiToolBar
+ */
+export declare enum SAiToolBarInputType {
+    TEXTAREA = "textarea",
+    SLIDER = "slider",
+    IMAGE = "image",
+    NUMBER = "number",
+    SELECT = "select",
+    CHECKBOX = "checkbox"
+}
 /**
  * Configuration for individual toolbar input fields
  */
@@ -8,12 +27,12 @@ export interface SAiToolBarInput {
     /** Display label for the input */
     label: string;
     /** Input type */
-    type: 'textarea' | 'slider' | 'image' | 'number';
+    type: SAiToolBarInputType;
     /** Whether the input is required */
     required?: boolean;
     /** Default value for the input */
-    defaultValue?: any;
-    /** Placeholder text (for textarea/number inputs) */
+    defaultValue?: SAiToolBarValue;
+    /** Placeholder text (for textarea/number/select inputs) */
     placeholder?: string;
     /** Minimum value (for slider/number inputs) */
     min?: number;
@@ -29,10 +48,20 @@ export interface SAiToolBarInput {
     multiple?: boolean;
     /** Maximum number of images (for image inputs with multiple=true) */
     maxImages?: number;
+    /** Select options (for select inputs) */
+    options?: SAiToolBarOption[];
+    /** Key to extract label from option objects (for select inputs) */
+    optionLabel?: string;
+    /** Key to extract value from option objects (for select inputs) */
+    optionValue?: string;
+    /** Enable search functionality in select dropdown */
+    searchable?: boolean;
+    /** Placeholder for search input in select dropdown */
+    searchPlaceholder?: string;
     /** Custom renderer for the input */
     renderInput?: (props: {
-        value: any;
-        onChange: (value: any) => void;
+        value: SAiToolBarValue;
+        onChange: (value: SAiToolBarValue) => void;
         isExpanded: boolean;
         onFocus: () => void;
         onBlur: () => void;
@@ -56,9 +85,9 @@ export interface SAiToolBarProps {
     /** Whether the toolbar is in uploading state */
     uploading?: boolean;
     /** Input values controlled externally */
-    inputValues?: Record<string, any>;
+    inputValues?: Record<string, SAiToolBarValue>;
     /** Callback when input values change */
-    onInputChange?: (key: string, value: any, file?: File) => void;
+    onInputChange?: (key: string, value: SAiToolBarValue, file?: File) => void;
     /** Custom action buttons between inputs and standard actions */
     customActionButtons?: React.ReactNode;
     /** Hide the main process button */
@@ -85,20 +114,12 @@ export interface SAiToolBarProps {
     relative?: boolean;
 }
 /**
- * SAiToolBar - A dynamic floating toolbar for AI tools with expandable inputs and action buttons.
- *
- * Key features:
- * - Dynamic width calculation based on inputs and expanded state
- * - Smooth expand/collapse animations on hover and focus
- * - Support for multiple input types (text, number, slider, custom)
- * - Portal rendering for proper z-index handling
- * - Configurable action buttons
- * - Built-in validation for required inputs
- * - Info dialog integration
- * - Responsive to processing and uploading states
- *
- * @param props - SAiToolBarProps for toolbar configuration
- * @returns JSX.Element - Floating toolbar with inputs and action buttons
+ * A dynamic floating toolbar for AI tools with expandable inputs and action buttons.
+ * Features smooth expand/collapse animations, multiple input types, built-in validation,
+ * and portal rendering for proper z-index handling.
  */
-declare const SAiToolBar: ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, }: SAiToolBarProps) => React.JSX.Element;
+export declare const SAiToolBar: {
+    ({ inputs, onProcess, onReset, onDownload, processing, uploading, inputValues, onInputChange, customActionButtons, hideProcessButton, processButtonDisabled, getInputDisabled, processTooltip, downloadTooltip, resetTooltip, infoTooltip, infoTitle, infoContent, position, relative, }: SAiToolBarProps): React.JSX.Element;
+    displayName: string;
+};
 export default SAiToolBar;