@solostylist/ui-kit 1.0.13 → 1.0.15

package/dist/main.d.ts

@@ -19,6 +19,7 @@ export { default as SI18nProvider } from './s-i18n-provider';
 export { default as SIconButton } from './s-icon-button';
 export { default as SLabel } from './s-label';
 export { default as SMultiSelect } from './s-multi-select';
+export type { SMultiSelectProps } from './s-multi-select';
 export { default as SNoSsr } from './s-no-ssr';
 export { default as STextField } from './s-text-field';
 export { default as SPagination } from './s-pagination';

package/dist/s-autocomplete/s-autocomplete.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { AutocompleteProps } from '@mui/material';
-export interface SAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined = undefined> extends Omit<AutocompleteProps<T | any, Multiple, DisableClearable, FreeSolo>, 'renderInput'> {
-    renderInput?: AutocompleteProps<T | string, Multiple, DisableClearable, FreeSolo>['renderInput'];
+export interface SAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined = undefined> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'renderInput'> {
+    renderInput?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
     label?: string | React.ReactNode;
     required?: boolean;
     error?: string;

package/dist/s-file-dropzone/s-file-dropzone.d.ts

@@ -10,7 +10,7 @@ interface SFileDropzoneProps extends DropzoneOptions {
     onRemove?: (file: CustomFile) => void;
     onRemoveAll?: () => void;
     onUpload?: () => void;
-    label?: string;
+    label?: string | React.ReactNode;
     disabledUpload?: boolean;
     error?: string;
     required?: boolean;

package/dist/s-multi-select/index.d.ts

@@ -1 +1,2 @@
 export { default } from './s-multi-select';
+export type { SMultiSelectProps } from './s-multi-select';

package/dist/s-multi-select/s-multi-select.js

@@ -1,43 +1,44 @@
-import { j as p } from "../jsx-runtime-C5mzlN2N.js";
+import { j as c } from "../jsx-runtime-C5mzlN2N.js";
 import * as d from "react";
 import s, { forwardRef as B } from "react";
 import { Button as V } from "@mui/material";
 import { E as Z } from "../SSRBase-BSdFRe_j.js";
 import { usePopover as D } from "../hooks/use-popover.js";
-import { L as I, M as H } from "../Menu-B8rPlcSd.js";
-import { a as f, P as a } from "../createTheme-DDycScYN.js";
+import H from "../s-chips/s-chips.js";
+import { L as I, M as G } from "../Menu-B8rPlcSd.js";
+import { a as f, P as o } from "../createTheme-DDycScYN.js";
 import { c as M } from "../identifier-CHPjnqaz.js";
-import { u as G, s as U, c as z, b as A, m as _ } from "../memoTheme-DX35GGEJ.js";
-import { g as W, d as E, m } from "../menuItemClasses-DLFqc90k.js";
-import { u as q } from "../useEnhancedEffect-CJGo-L3B.js";
-import { u as J, B as K } from "../useSlot-B682hoPx.js";
-import { g as h } from "../generateUtilityClasses-Z7VQRhBn.js";
-const $ = h("MuiListItemIcon", ["root", "alignItemsFlexStart"]), j = h("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), Q = (e, t) => {
+import { u as U, s as z, c as A, b as _, m as W } from "../memoTheme-DX35GGEJ.js";
+import { g as q, d as E, m } from "../menuItemClasses-DLFqc90k.js";
+import { u as J } from "../useEnhancedEffect-CJGo-L3B.js";
+import { u as K, B as Q } from "../useSlot-B682hoPx.js";
+import { g as R } from "../generateUtilityClasses-Z7VQRhBn.js";
+const $ = R("MuiListItemIcon", ["root", "alignItemsFlexStart"]), j = R("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]), X = (e, t) => {
   const {
-    ownerState: o
+    ownerState: a
   } = e;
-  return [t.root, o.dense && t.dense, o.divider && t.divider, !o.disableGutters && t.gutters];
-}, X = (e) => {
+  return [t.root, a.dense && t.dense, a.divider && t.divider, !a.disableGutters && t.gutters];
+}, Y = (e) => {
   const {
     disabled: t,
-    dense: o,
+    dense: a,
     divider: n,
     disableGutters: l,
     selected: u,
     classes: r
-  } = e, i = z({
-    root: ["root", o && "dense", t && "disabled", !l && "gutters", n && "divider", u && "selected"]
-  }, W, r);
+  } = e, i = A({
+    root: ["root", a && "dense", t && "disabled", !l && "gutters", n && "divider", u && "selected"]
+  }, q, r);
   return {
     ...r,
     ...i
   };
-}, Y = U(K, {
-  shouldForwardProp: (e) => A(e) || e === "classes",
+}, ee = z(Q, {
+  shouldForwardProp: (e) => _(e) || e === "classes",
   name: "MuiMenuItem",
   slot: "Root",
-  overridesResolver: Q
-})(_(({
+  overridesResolver: X
+})(W(({
   theme: e
 }) => ({
   ...e.typography.body1,
@@ -135,44 +136,44 @@ const $ = h("MuiListItemIcon", ["root", "alignItemsFlexStart"]), j = h("MuiListI
       }
     }
   }]
-}))), P = /* @__PURE__ */ d.forwardRef(function(t, o) {
-  const n = G({
+}))), P = /* @__PURE__ */ d.forwardRef(function(t, a) {
+  const n = U({
     props: t,
     name: "MuiMenuItem"
   }), {
     autoFocus: l = !1,
     component: u = "li",
     dense: r = !1,
-    divider: c = !1,
+    divider: p = !1,
     disableGutters: i = !1,
     focusVisibleClassName: b,
-    role: F = "menuitem",
+    role: k = "menuitem",
     tabIndex: y,
-    className: S,
+    className: F,
     ...L
   } = n, x = d.useContext(I), C = d.useMemo(() => ({
     dense: r || x.dense || !1,
     disableGutters: i
   }), [x.dense, r, i]), g = d.useRef(null);
-  q(() => {
+  J(() => {
     l && (g.current ? g.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
   }, [l]);
   const T = {
     ...n,
     dense: C.dense,
-    divider: c,
+    divider: p,
     disableGutters: i
-  }, v = X(n), N = J(g, o);
+  }, v = Y(n), N = K(g, a);
   let O;
-  return n.disabled || (O = y !== void 0 ? y : -1), /* @__PURE__ */ p.jsx(I.Provider, {
+  return n.disabled || (O = y !== void 0 ? y : -1), /* @__PURE__ */ c.jsx(I.Provider, {
     value: C,
-    children: /* @__PURE__ */ p.jsx(Y, {
+    children: /* @__PURE__ */ c.jsx(ee, {
       ref: N,
-      role: F,
+      role: k,
       tabIndex: O,
       component: u,
       focusVisibleClassName: M(v.focusVisible, b),
-      className: M(v.root, S),
+      className: M(v.root, F),
       ...L,
       ownerState: T,
       classes: v
@@ -189,44 +190,44 @@ process.env.NODE_ENV !== "production" && (P.propTypes = {
    * Focus will also be triggered if the value changes from false to true.
    * @default false
    */
-  autoFocus: a.bool,
+  autoFocus: o.bool,
   /**
    * The content of the component.
    */
-  children: a.node,
+  children: o.node,
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: a.object,
+  classes: o.object,
   /**
    * @ignore
    */
-  className: a.string,
+  className: o.string,
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
-  component: a.elementType,
+  component: o.elementType,
   /**
    * If `true`, compact vertical padding designed for keyboard and mouse input is used.
    * The prop defaults to the value inherited from the parent Menu component.
    * @default false
    */
-  dense: a.bool,
+  dense: o.bool,
   /**
    * @ignore
    */
-  disabled: a.bool,
+  disabled: o.bool,
   /**
    * If `true`, the left and right padding is removed.
    * @default false
    */
-  disableGutters: a.bool,
+  disableGutters: o.bool,
   /**
    * If `true`, a 1px light border is added to the bottom of the menu item.
    * @default false
    */
-  divider: a.bool,
+  divider: o.bool,
   /**
    * This prop can help identify which element has keyboard focus.
    * The class name will be applied when the element gains the focus through keyboard interaction.
@@ -235,26 +236,26 @@ process.env.NODE_ENV !== "production" && (P.propTypes = {
    * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
    * if needed.
    */
-  focusVisibleClassName: a.string,
+  focusVisibleClassName: o.string,
   /**
    * @ignore
    */
-  role: a.string,
+  role: o.string,
   /**
    * If `true`, the component is selected.
    * @default false
    */
-  selected: a.bool,
+  selected: o.bool,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: a.oneOfType([a.arrayOf(a.oneOfType([a.func, a.object, a.bool])), a.func, a.object]),
+  sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
   /**
    * @default 0
    */
-  tabIndex: a.number
+  tabIndex: o.number
 });
-const ee = /* @__PURE__ */ new Map([
+const te = /* @__PURE__ */ new Map([
   [
     "bold",
     /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement("path", { d: "M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z" }))
@@ -280,29 +281,29 @@ const ee = /* @__PURE__ */ new Map([
     /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement("path", { d: "M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z" }))
   ]
 ]);
-var te = Object.defineProperty, ae = Object.defineProperties, oe = Object.getOwnPropertyDescriptors, w = Object.getOwnPropertySymbols, se = Object.prototype.hasOwnProperty, re = Object.prototype.propertyIsEnumerable, R = (e, t, o) => t in e ? te(e, t, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[t] = o, ne = (e, t) => {
-  for (var o in t || (t = {}))
-    se.call(t, o) && R(e, o, t[o]);
+var ae = Object.defineProperty, oe = Object.defineProperties, se = Object.getOwnPropertyDescriptors, w = Object.getOwnPropertySymbols, re = Object.prototype.hasOwnProperty, ne = Object.prototype.propertyIsEnumerable, h = (e, t, a) => t in e ? ae(e, t, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[t] = a, le = (e, t) => {
+  for (var a in t || (t = {}))
+    re.call(t, a) && h(e, a, t[a]);
   if (w)
-    for (var o of w(t))
-      re.call(t, o) && R(e, o, t[o]);
+    for (var a of w(t))
+      ne.call(t, a) && h(e, a, t[a]);
   return e;
-}, le = (e, t) => ae(e, oe(t));
-const k = B((e, t) => /* @__PURE__ */ s.createElement(Z, le(ne({ ref: t }, e), { weights: ee })));
-k.displayName = "CaretDown";
-function Oe({ label: e, onChange: t, options: o, value: n = [] }) {
+}, ie = (e, t) => oe(e, se(t));
+const S = B((e, t) => /* @__PURE__ */ s.createElement(Z, ie(le({ ref: t }, e), { weights: te })));
+S.displayName = "CaretDown";
+function Me({ label: e, onChange: t, options: a, value: n = [] }) {
   const l = D(), u = d.useCallback(
-    (r, c) => {
+    (r, p) => {
       let i = [...n];
-      c ? i.push(r) : i = i.filter((b) => b !== r), t == null || t(i);
+      p ? i.push(r) : i = i.filter((b) => b !== r), t == null || t(i);
     },
     [t, n]
   );
-  return /* @__PURE__ */ p.jsxs(d.Fragment, { children: [
-    /* @__PURE__ */ p.jsx(
+  return /* @__PURE__ */ c.jsxs(d.Fragment, { children: [
+    /* @__PURE__ */ c.jsx(
       V,
       {
-        endIcon: /* @__PURE__ */ p.jsx(k, {}),
+        endIcon: /* @__PURE__ */ c.jsx(S, {}),
         onClick: l.handleOpen,
         ref: l.anchorRef,
         sx: {
@@ -311,31 +312,32 @@ function Oe({ label: e, onChange: t, options: o, value: n = [] }) {
         children: e
       }
     ),
-    /* @__PURE__ */ p.jsx(
-      H,
+    /* @__PURE__ */ c.jsx(
+      G,
       {
         anchorEl: l.anchorRef.current,
         onClose: l.handleClose,
         open: l.open,
         slotProps: { paper: { sx: { width: "250px" } } },
-        children: o.map((r) => {
-          const c = n.includes(r.value);
-          return /* @__PURE__ */ p.jsx(
+        children: a.map((r) => {
+          const p = n.includes(r.value);
+          return /* @__PURE__ */ c.jsx(
             P,
             {
               onClick: () => {
-                u(r.value, !c);
+                u(r.value, !p);
               },
-              selected: c,
+              selected: p,
               children: r.label
             },
             r.label
           );
         })
       }
-    )
+    ),
+    /* @__PURE__ */ c.jsx(H, { chips: a.filter((r) => n.includes(r.value)).map((r) => r.label) })
   ] });
 }
 export {
-  Oe as default
+  Me as default
 };

package/dist/s-select/s-select.d.ts

@@ -1,15 +1,18 @@
 import { SelectProps } from '@mui/material';
-type SSelectProps = Omit<SelectProps, 'error' | 'variant'> & {
-    options?: any[];
-    optionLabel?: string;
-    optionValue?: any;
+type BaseOption = string | number | {
+    [key: string]: unknown;
+};
+type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'error' | 'variant'> & {
+    options?: T[];
+    optionLabel?: T extends object ? keyof T : never;
+    optionValue?: T extends object ? keyof T : never;
     placeholder?: string;
     variant?: 'outlined' | 'filled' | 'standard';
-    label?: string;
+    label?: string | React.ReactNode;
     error?: string;
     required?: boolean;
     simple?: boolean;
     htmlFor?: string;
 };
-declare const SSelect: import('react').ForwardRefExoticComponent<Omit<SSelectProps, "ref"> & import('react').RefAttributes<unknown>>;
+declare const SSelect: import('react').ForwardRefExoticComponent<Omit<SSelectProps<BaseOption>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export default SSelect;

package/dist/s-select/s-select.js

@@ -1,54 +1,61 @@
-import { j as n } from "../jsx-runtime-C5mzlN2N.js";
-import { forwardRef as E, useState as R, useEffect as g } from "react";
-import { Select as w, MenuItem as I } from "@mui/material";
-import M from "../s-form/s-form.js";
-const z = E(
+import { j as d } from "../jsx-runtime-C5mzlN2N.js";
+import { forwardRef as h, useState as m, useEffect as V } from "react";
+import { Select as E, MenuItem as O } from "@mui/material";
+import R from "../s-form/s-form.js";
+const M = h(
   ({
-    options: e = [],
-    optionLabel: t = "name",
-    optionValue: f = "id",
-    placeholder: s,
-    label: x = "",
-    error: j,
-    required: h = !1,
-    variant: W = "outlined",
-    simple: a = !1,
-    htmlFor: c,
-    ...u
-  }, y) => {
-    const [S, m] = R(u.value ?? null);
-    return g(() => {
-      m(u.value ?? null);
-    }, [u.value]), /* @__PURE__ */ n.jsx(M, { error: j, label: x, required: h, htmlFor: c, children: /* @__PURE__ */ n.jsx(
-      w,
+    options: l = [],
+    optionLabel: o = "name",
+    optionValue: c = "id",
+    placeholder: i,
+    label: v = "",
+    error: x,
+    required: y = !1,
+    variant: $ = "outlined",
+    simple: g = !1,
+    htmlFor: s,
+    ...t
+  }, j) => {
+    const [S, p] = m(t.value ?? null);
+    V(() => {
+      p(t.value ?? null);
+    }, [t.value]);
+    const u = (e) => String(typeof e == "string" || typeof e == "number" ? e : e[o]), n = (e) => typeof e == "string" || typeof e == "number" ? e : e[c];
+    return /* @__PURE__ */ d.jsx(R, { error: x, label: v, required: y, htmlFor: s, children: /* @__PURE__ */ d.jsx(
+      E,
       {
-        id: c,
+        id: s,
         displayEmpty: !0,
         fullWidth: !0,
         defaultValue: "",
-        ref: y,
-        renderValue: u.multiple ? (r) => {
-          var d;
-          return (d = e.filter((l) => r == null ? void 0 : r.includes(l[f]))) == null ? void 0 : d.map((l) => l[t]).join(", ");
-        } : (r) => {
-          var d;
-          return r !== null && typeof r < "u" && r !== "" ? a ? e.find((l) => l == r) : (d = e.find((l) => l[f] == r)) == null ? void 0 : d[t] : /* @__PURE__ */ n.jsx("span", { style: { color: "var(--mui-palette-text-secondary)" }, children: s });
+        ref: j,
+        renderValue: t.multiple ? (e) => e.map((a) => {
+          const f = l.find((b) => n(b) === n(a));
+          return f ? u(f) : "";
+        }).filter(Boolean).join(", ") : (e) => {
+          const r = e;
+          if (r == null || r === "")
+            return /* @__PURE__ */ d.jsx("span", { style: { color: "var(--mui-palette-text-secondary)" }, children: i });
+          if (g)
+            return u(r);
+          const a = l.find((f) => n(f) === n(r));
+          return a ? u(a) : "";
         },
-        ...u,
-        value: e.length ? S ?? "" : "",
-        children: e == null ? void 0 : e.map((r, d) => /* @__PURE__ */ n.jsx(
-          I,
+        ...t,
+        value: l.length ? S ?? "" : "",
+        children: l == null ? void 0 : l.map((e, r) => /* @__PURE__ */ d.jsx(
+          O,
           {
-            disabled: (r == null ? void 0 : r.disabled) ?? !1,
-            value: a ? r : r[f],
-            children: a ? r : r[t]
+            disabled: (e == null ? void 0 : e.disabled) ?? !1,
+            value: n(e),
+            children: u(e)
           },
-          (a ? r : r[f]) + d
+          `${n(e)}-${r}`
         ))
       }
     ) });
   }
 );
 export {
-  z as default
+  M as default
 };

package/dist/s-text-field/s-text-field.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { TextField } from '@mui/material';
 type STextFieldProps = Omit<React.ComponentProps<typeof TextField>, 'error'> & {
-    label?: string;
+    label?: string | React.ReactNode;
     required?: boolean;
     error?: string;
     htmlFor?: string;

package/package.json

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