@conboai/storybook.components 0.1.19 → 0.1.21

package/dist/components/VideoBox/VideoBox.d.ts

@@ -7,7 +7,7 @@ interface IVideoBox {
     autoPlay?: boolean;
     controls?: boolean;
     isHls?: boolean;
-    playVideo?: boolean;
+    isVideoGenerating?: boolean;
 }
 declare const VideoBox: FC<IVideoBox>;
 export default VideoBox;

package/dist/interfaces/tab.d.ts

@@ -15,6 +15,7 @@ export interface ITab {
 }
 export interface ITabsBar {
     tabs: TypeTabs;
+    activeId: string;
     onDelete: (id: string) => void;
     onEdit: (id: string, value: string) => void;
     onAdd: () => void;

package/dist/storybook.components.mjs

@@ -1,5 +1,5 @@
 import * as C from "react";
-import mn, { forwardRef as ex, useContext as _u, Children as tx, isValidElement as wa, cloneElement as Ia, createElement as ag, useState as ut, createContext as nx, useEffect as pr, memo as lg, useMemo as cg, useRef as Da } from "react";
+import mn, { forwardRef as ex, useContext as _u, Children as tx, isValidElement as wa, cloneElement as Ia, createElement as ag, useState as dt, createContext as nx, useEffect as pr, memo as lg, useMemo as cg, useRef as Da } from "react";
 import * as rx from "react-dom";
 import Xi from "react-dom";
 var Kr = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
@@ -12766,7 +12766,7 @@ const PI = Kt(/* @__PURE__ */ E.jsx("path", {
 function LI(t) {
   return Oe("MuiChip", t);
 }
-const dt = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), MI = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"], _I = (t) => {
+const ut = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), MI = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"], _I = (t) => {
   const {
     classes: e,
     disabled: n,
@@ -12799,25 +12799,25 @@ const dt = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colo
       variant: c
     } = n;
     return [{
-      [`& .${dt.avatar}`]: e.avatar
+      [`& .${ut.avatar}`]: e.avatar
     }, {
-      [`& .${dt.avatar}`]: e[`avatar${be(l)}`]
+      [`& .${ut.avatar}`]: e[`avatar${be(l)}`]
     }, {
-      [`& .${dt.avatar}`]: e[`avatarColor${be(r)}`]
+      [`& .${ut.avatar}`]: e[`avatarColor${be(r)}`]
     }, {
-      [`& .${dt.icon}`]: e.icon
+      [`& .${ut.icon}`]: e.icon
     }, {
-      [`& .${dt.icon}`]: e[`icon${be(l)}`]
+      [`& .${ut.icon}`]: e[`icon${be(l)}`]
     }, {
-      [`& .${dt.icon}`]: e[`iconColor${be(o)}`]
+      [`& .${ut.icon}`]: e[`iconColor${be(o)}`]
     }, {
-      [`& .${dt.deleteIcon}`]: e.deleteIcon
+      [`& .${ut.deleteIcon}`]: e.deleteIcon
     }, {
-      [`& .${dt.deleteIcon}`]: e[`deleteIcon${be(l)}`]
+      [`& .${ut.deleteIcon}`]: e[`deleteIcon${be(l)}`]
     }, {
-      [`& .${dt.deleteIcon}`]: e[`deleteIconColor${be(r)}`]
+      [`& .${ut.deleteIcon}`]: e[`deleteIconColor${be(r)}`]
     }, {
-      [`& .${dt.deleteIcon}`]: e[`deleteIcon${be(c)}Color${be(r)}`]
+      [`& .${ut.deleteIcon}`]: e[`deleteIcon${be(c)}Color${be(r)}`]
     }, e.root, e[`size${be(l)}`], e[`color${be(r)}`], i && e.clickable, i && r !== "default" && e[`clickableColor${be(r)})`], a && e.deletable, a && r !== "default" && e[`deletableColor${be(r)}`], e[c], e[`${c}${be(r)}`]];
   }
 })(({
@@ -12849,11 +12849,11 @@ const dt = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colo
     // Remove `button` padding
     verticalAlign: "middle",
     boxSizing: "border-box",
-    [`&.${dt.disabled}`]: {
+    [`&.${ut.disabled}`]: {
       opacity: (t.vars || t).palette.action.disabledOpacity,
       pointerEvents: "none"
     },
-    [`& .${dt.avatar}`]: {
+    [`& .${ut.avatar}`]: {
       marginLeft: 5,
       marginRight: -6,
       width: 24,
@@ -12861,22 +12861,22 @@ const dt = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colo
       color: t.vars ? t.vars.palette.Chip.defaultAvatarColor : n,
       fontSize: t.typography.pxToRem(12)
     },
-    [`& .${dt.avatarColorPrimary}`]: {
+    [`& .${ut.avatarColorPrimary}`]: {
       color: (t.vars || t).palette.primary.contrastText,
       backgroundColor: (t.vars || t).palette.primary.dark
     },
-    [`& .${dt.avatarColorSecondary}`]: {
+    [`& .${ut.avatarColorSecondary}`]: {
       color: (t.vars || t).palette.secondary.contrastText,
       backgroundColor: (t.vars || t).palette.secondary.dark
     },
-    [`& .${dt.avatarSmall}`]: {
+    [`& .${ut.avatarSmall}`]: {
       marginLeft: 4,
       marginRight: -4,
       width: 18,
       height: 18,
       fontSize: t.typography.pxToRem(10)
     },
-    [`& .${dt.icon}`]: T({
+    [`& .${ut.icon}`]: T({
       marginLeft: 5,
       marginRight: -6
     }, e.size === "small" && {
@@ -12888,7 +12888,7 @@ const dt = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colo
     }, e.color !== "default" && {
       color: "inherit"
     })),
-    [`& .${dt.deleteIcon}`]: T({
+    [`& .${ut.deleteIcon}`]: T({
       WebkitTapHighlightColor: "transparent",
       color: t.vars ? `rgba(${t.vars.palette.text.primaryChannel} / 0.26)` : tt(t.palette.text.primary, 0.26),
       fontSize: 22,
@@ -12913,11 +12913,11 @@ const dt = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colo
     backgroundColor: (t.vars || t).palette[e.color].main,
     color: (t.vars || t).palette[e.color].contrastText
   }, e.onDelete && {
-    [`&.${dt.focusVisible}`]: {
+    [`&.${ut.focusVisible}`]: {
       backgroundColor: t.vars ? `rgba(${t.vars.palette.action.selectedChannel} / calc(${t.vars.palette.action.selectedOpacity} + ${t.vars.palette.action.focusOpacity}))` : tt(t.palette.action.selected, t.palette.action.selectedOpacity + t.palette.action.focusOpacity)
     }
   }, e.onDelete && e.color !== "default" && {
-    [`&.${dt.focusVisible}`]: {
+    [`&.${ut.focusVisible}`]: {
       backgroundColor: (t.vars || t).palette[e.color].dark
     }
   });
@@ -12931,14 +12931,14 @@ const dt = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colo
   "&:hover": {
     backgroundColor: t.vars ? `rgba(${t.vars.palette.action.selectedChannel} / calc(${t.vars.palette.action.selectedOpacity} + ${t.vars.palette.action.hoverOpacity}))` : tt(t.palette.action.selected, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity)
   },
-  [`&.${dt.focusVisible}`]: {
+  [`&.${ut.focusVisible}`]: {
     backgroundColor: t.vars ? `rgba(${t.vars.palette.action.selectedChannel} / calc(${t.vars.palette.action.selectedOpacity} + ${t.vars.palette.action.focusOpacity}))` : tt(t.palette.action.selected, t.palette.action.selectedOpacity + t.palette.action.focusOpacity)
   },
   "&:active": {
     boxShadow: (t.vars || t).shadows[1]
   }
 }, e.clickable && e.color !== "default" && {
-  [`&:hover, &.${dt.focusVisible}`]: {
+  [`&:hover, &.${ut.focusVisible}`]: {
     backgroundColor: (t.vars || t).palette[e.color].dark
   }
 }), ({
@@ -12947,40 +12947,40 @@ const dt = we("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorError", "colo
 }) => T({}, e.variant === "outlined" && {
   backgroundColor: "transparent",
   border: t.vars ? `1px solid ${t.vars.palette.Chip.defaultBorder}` : `1px solid ${t.palette.mode === "light" ? t.palette.grey[400] : t.palette.grey[700]}`,
-  [`&.${dt.clickable}:hover`]: {
+  [`&.${ut.clickable}:hover`]: {
     backgroundColor: (t.vars || t).palette.action.hover
   },
-  [`&.${dt.focusVisible}`]: {
+  [`&.${ut.focusVisible}`]: {
     backgroundColor: (t.vars || t).palette.action.focus
   },
-  [`& .${dt.avatar}`]: {
+  [`& .${ut.avatar}`]: {
     marginLeft: 4
   },
-  [`& .${dt.avatarSmall}`]: {
+  [`& .${ut.avatarSmall}`]: {
     marginLeft: 2
   },
-  [`& .${dt.icon}`]: {
+  [`& .${ut.icon}`]: {
     marginLeft: 4
   },
-  [`& .${dt.iconSmall}`]: {
+  [`& .${ut.iconSmall}`]: {
     marginLeft: 2
   },
-  [`& .${dt.deleteIcon}`]: {
+  [`& .${ut.deleteIcon}`]: {
     marginRight: 5
   },
-  [`& .${dt.deleteIconSmall}`]: {
+  [`& .${ut.deleteIconSmall}`]: {
     marginRight: 3
   }
 }, e.variant === "outlined" && e.color !== "default" && {
   color: (t.vars || t).palette[e.color].main,
   border: `1px solid ${t.vars ? `rgba(${t.vars.palette[e.color].mainChannel} / 0.7)` : tt(t.palette[e.color].main, 0.7)}`,
-  [`&.${dt.clickable}:hover`]: {
+  [`&.${ut.clickable}:hover`]: {
     backgroundColor: t.vars ? `rgba(${t.vars.palette[e.color].mainChannel} / ${t.vars.palette.action.hoverOpacity})` : tt(t.palette[e.color].main, t.palette.action.hoverOpacity)
   },
-  [`&.${dt.focusVisible}`]: {
+  [`&.${ut.focusVisible}`]: {
     backgroundColor: t.vars ? `rgba(${t.vars.palette[e.color].mainChannel} / ${t.vars.palette.action.focusOpacity})` : tt(t.palette[e.color].main, t.palette.action.focusOpacity)
   },
-  [`& .${dt.deleteIcon}`]: {
+  [`& .${ut.deleteIcon}`]: {
     color: t.vars ? `rgba(${t.vars.palette[e.color].mainChannel} / 0.7)` : tt(t.palette[e.color].main, 0.7),
     "&:hover, &:active": {
       color: (t.vars || t).palette[e.color].main
@@ -27145,7 +27145,7 @@ function Yt({ fill: t = "black", icon: e, width: n, height: r, fillOpacity: o })
   );
 }
 const CL = ({ options: t, setValue: e, value: n }) => {
-  const [r, o] = ut(
+  const [r, o] = dt(
     t && t[0].value
   ), i = (c) => {
     o(c.target.value);
@@ -40097,9 +40097,9 @@ const Fy = {
   setMasterCheckboxStates: o,
   masterCheckboxStates: i
 }) => {
-  const [a, l] = ut(
+  const [a, l] = dt(
     Array(t.length).fill(!1)
-  ), [c, u] = ut(!1), [d, f] = ut(""), [p, g] = ut(!1), [m, h] = ut(!1), [b, y] = ut(
+  ), [c, u] = dt(!1), [d, f] = dt(""), [p, g] = dt(!1), [m, h] = dt(!1), [b, y] = dt(
     []
   ), {
     setSelectedValues: x,
@@ -40349,7 +40349,7 @@ const Fy = {
   data: n,
   setMasterCheckboxStates: r
 }) => {
-  const [o, i] = ut(!1), { helperText: a, setSelectedValues: l, selectedItems: c } = _u(Zd), u = n.map((b) => {
+  const [o, i] = dt(!1), { helperText: a, setSelectedValues: l, selectedItems: c } = _u(Zd), u = n.map((b) => {
     var y;
     return (y = b.subItemValues) == null ? void 0 : y.length;
   }).reduce((b, y) => b + y, 0), f = (c == null ? void 0 : c.data.length) === n.length && (c == null ? void 0 : c.data.length) !== 0 ? "Unselect all" : "Select all", p = `${u} ${u === 1 ? "item" : "items"}`, g = t.length > 0 && t.length < n.flatMap(
@@ -40433,7 +40433,7 @@ const Fy = {
     }
   ) });
 }, Z2 = lg(X2), Q2 = ({ tabs: t, filterKey: e, data: n }) => {
-  const [r, o] = ut([]), [i, a] = ut(
+  const [r, o] = dt([]), [i, a] = dt(
     Array(t.length).fill(!1)
   );
   return /* @__PURE__ */ E.jsx(mt, { children: t.map((l, c) => /* @__PURE__ */ E.jsxs(Xd, { value: `${c}`, sx: { padding: "0" }, children: [
@@ -40470,7 +40470,7 @@ const Fy = {
   isFilterBlock: c
 }) => {
   var h;
-  const [u, d] = ut("0"), [f, p] = ut((h = t.criterias[0]) == null ? void 0 : h.value), g = {
+  const [u, d] = dt("0"), [f, p] = dt((h = t.criterias[0]) == null ? void 0 : h.value), g = {
     width: "398px",
     height: "auto",
     borderRadius: "4px",
@@ -40644,7 +40644,7 @@ const Fy = {
       criterias: c.criterias
     }),
     [c]
-  ), [g, m] = ut(p), [h, b] = ut(p), [y, x] = ut(p), [S, w] = ut(!1), [v, R] = ut(!1), I = Da(null), D = !g.data.length, $ = !h.data.length || !y.data.length, A = [
+  ), [g, m] = dt(p), [h, b] = dt(p), [y, x] = dt(p), [S, w] = dt(!1), [v, R] = dt(!1), I = Da(null), D = !g.data.length, $ = !h.data.length || !y.data.length, A = [
     {
       name: "arrow",
       enabled: !0,
@@ -40825,7 +40825,7 @@ const Fy = {
   data: n,
   readonly: r = !1
 }) => {
-  const [o, i] = ut(null), [a, l] = ut([]), [c, u] = ut([]), [d, f] = ut([]), p = !!o, g = p ? "simple-popper" : void 0, m = (y) => {
+  const [o, i] = dt(null), [a, l] = dt([]), [c, u] = dt([]), [d, f] = dt([]), p = !!o, g = p ? "simple-popper" : void 0, m = (y) => {
     const x = iB(
       a,
       c
@@ -40901,7 +40901,7 @@ const Fy = {
   selectedRowId: c,
   sx: u
 }) => {
-  const [d, f] = ut(0), [p, g] = ut(r[0]), [m, h] = ut(null), b = (R, I) => {
+  const [d, f] = dt(0), [p, g] = dt(r[0]), [m, h] = dt(null), b = (R, I) => {
     f(I);
   }, y = (R) => {
     g(parseInt(R.target.value, 10)), f(0);
@@ -41062,7 +41062,7 @@ const Fy = {
   color: gn,
   cursor: "pointer",
   "&:hover": {
-    backgroundColor: R1,
+    backgroundColor: t ? "" : R1,
     "& .MuiTypography-root": {
       opacity: 1
     }
@@ -41099,7 +41099,7 @@ const Fy = {
   color: i = "#ffffff",
   isActive: a = !1
 }) => {
-  const [l, c] = ut(!1), [u, d] = ut(t || "Untitled"), f = () => c(!0), p = () => {
+  const [l, c] = dt(!1), [u, d] = dt(t || "Untitled"), f = () => c(!0), p = () => {
     u || d(t || "Untitled"), c(!1);
   }, g = (b) => {
     e(b.target.value), d(b.target.value);
@@ -41140,33 +41140,40 @@ const Fy = {
       ]
     }
   );
-}, t3 = ({ tabs: t, onDelete: e, onEdit: n, onAdd: r, onClick: o }) => {
-  const [i, a] = ut(null), l = () => {
-    r && r();
-  }, c = (d) => {
-    a(d), o(d);
-  }, u = () => t.map((d) => /* @__PURE__ */ E.jsx(
+}, t3 = ({
+  tabs: t,
+  activeId: e,
+  onDelete: n,
+  onEdit: r,
+  onAdd: o,
+  onClick: i
+}) => {
+  const a = () => {
+    o && o();
+  }, l = (u) => {
+    i(u);
+  }, c = () => t.map((u) => /* @__PURE__ */ E.jsx(
     pB,
     {
-      onEdit: (f) => {
-        n(d.id, f);
+      onEdit: (d) => {
+        r(u.id, d);
       },
       onClick: () => {
-        c(d.id);
+        l(u.id);
       },
       onDelete: () => {
-        e(d.id);
+        n(u.id);
       },
-      value: d.title,
-      color: d.color,
+      value: u.title,
+      color: u.color,
       showDelete: t.length > 1,
-      isActive: i === d.id
+      isActive: e === u.id
     },
-    d.id
+    u.id
   ));
   return /* @__PURE__ */ E.jsxs(at, { container: !0, gap: "6px", width: "100%", children: [
-    u(),
-    /* @__PURE__ */ E.jsx(Dn, { onClick: l, variant: "text", sx: { minWidth: "40px" }, children: /* @__PURE__ */ E.jsx(Yt, { icon: "add", fill: "white" }) })
+    c(),
+    /* @__PURE__ */ E.jsx(Dn, { onClick: a, variant: "text", sx: { minWidth: "40px" }, children: /* @__PURE__ */ E.jsx(Yt, { icon: "add", fill: "white" }) })
   ] });
 }, n3 = ({ children: t }) => /* @__PURE__ */ E.jsx(
   at,
@@ -41201,7 +41208,7 @@ const Fy = {
   /* @__PURE__ */ E.jsx(hB, { setValue: t, value: e, tabs: n }),
   /* @__PURE__ */ E.jsx(mB, { tabsContent: r })
 ] }), o3 = ({ tabsContent: t, tabs: e }) => {
-  const [n, r] = ut("0"), o = { background: "none", padding: "20px" };
+  const [n, r] = dt("0"), o = { background: "none", padding: "20px" };
   return /* @__PURE__ */ E.jsx(mt, { sx: o, children: /* @__PURE__ */ E.jsx(
     gB,
     {
@@ -58124,7 +58131,7 @@ const _5 = {
   isHls: n = !1
 }) => {
   var w, v;
-  const [r, o] = ut(!1), [i, a] = ut(0), [l, c] = ut(!0), [u, d] = ut(!1), f = Da(null), p = Da(null), g = Da(null);
+  const [r, o] = dt(!1), [i, a] = dt(0), [l, c] = dt(!0), [u, d] = dt(!1), f = Da(null), p = Da(null), g = Da(null);
   pr(() => {
     if (n && yr.isSupported()) {
       const R = new yr();
@@ -58289,10 +58296,10 @@ const _5 = {
   isLoading: e,
   src: n,
   isHls: r,
-  playVideo: o = !1
+  isVideoGenerating: o = !1
 }) => {
-  const [i, a] = ut(o), l = () => {
-    t(), a(!0);
+  const i = () => {
+    t();
   };
   return /* @__PURE__ */ E.jsx(
     at,
@@ -58302,7 +58309,7 @@ const _5 = {
       justifyContent: "center",
       alignItems: "center",
       sx: { display: "flex", backgroundColor: gn },
-      children: i ? /* @__PURE__ */ E.jsx(N5, { src: n, isLoading: e, isHls: r }) : /* @__PURE__ */ E.jsx(Yr, { onClick: l, size: "large", children: "Generate video" })
+      children: o ? /* @__PURE__ */ E.jsx(N5, { src: n, isLoading: e, isHls: r }) : /* @__PURE__ */ E.jsx(Yr, { onClick: i, size: "large", children: "Generate video" })
     }
   );
 };
@@ -58402,7 +58409,7 @@ const $5 = {
   o && /* @__PURE__ */ E.jsx(ds, { sx: og, children: o })
 ] });
 function g3({ images: t }) {
-  const [e, n] = ut(0), r = () => {
+  const [e, n] = dt(0), r = () => {
     n((i) => (i + 1) % t.length);
   }, o = () => {
     n(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conboai/storybook.components",
-  "version": "0.1.19",
+  "version": "0.1.21",
   "main": "dist/storybook.components.mjs",
   "types": "dist/build/index.d.ts",
   "files": [