@moises.ai/design-system 3.14.0 → 4.14.1

package/dist/index.js

@@ -1455,7 +1455,7 @@ const Bi = h.forwardRef(({ children: n, ...t }, r) => h.createElement(sc, { ...t
 Bi.displayName = "AlertDialog.Action";
 const xi = h.forwardRef(({ children: n, ...t }, r) => h.createElement(ac, { ...t, ref: r, asChild: !0 }, Dt(n)));
 xi.displayName = "AlertDialog.Cancel";
-const ww = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Rw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Action: Bi,
   Cancel: xi,
@@ -1464,7 +1464,7 @@ const ww = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   Root: Si,
   Title: Ri,
   Trigger: Ei
-}, Symbol.toStringTag, { value: "Module" })), Rw = Ac, ph = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], gh = ["solid", "soft"], mh = { ...ge, size: { type: "enum", className: "rt-r-size", values: ph, default: "3", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: gh, default: "soft" }, ...gn, ...Qe, ...st, fallback: { type: "ReactNode", required: !0 } };
+}, Symbol.toStringTag, { value: "Module" })), Nw = Ac, ph = ["1", "2", "3", "4", "5", "6", "7", "8", "9"], gh = ["solid", "soft"], mh = { ...ge, size: { type: "enum", className: "rt-r-size", values: ph, default: "3", responsive: !0 }, variant: { type: "enum", className: "rt-variant", values: gh, default: "soft" }, ...gn, ...Qe, ...st, fallback: { type: "ReactNode", required: !0 } };
 function Vs(n, t) {
   const { asChild: r, children: s } = n;
   if (!r) return typeof t == "function" ? t(s) : t;
@@ -1626,7 +1626,7 @@ const Hi = h.forwardRef((n, t) => {
 Hi.displayName = "DataList.Label";
 const Ki = h.forwardRef(({ children: n, className: t, ...r }, s) => h.createElement("dd", { ...r, ref: s, className: b(t, "rt-DataListValue") }, n));
 Ki.displayName = "DataList.Value";
-const Nw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Bw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Item: Wi,
   Label: Hi,
@@ -1647,7 +1647,7 @@ const na = h.forwardRef((n, t) => h.createElement(Ic, { asChild: !0 }, h.createE
 na.displayName = "Dialog.Description";
 const ra = h.forwardRef(({ children: n, ...t }, r) => h.createElement(vc, { ...t, ref: r, asChild: !0 }, Dt(n)));
 ra.displayName = "Dialog.Close";
-const Bw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const xw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Close: ra,
   Content: ea,
@@ -1669,7 +1669,7 @@ const Gi = h.forwardRef((n, t) => {
   return h.createElement(Rc, { container: o, forceMount: s }, h.createElement(Jt, { asChild: !0 }, h.createElement(Nc, { align: "start", sideOffset: 8, collisionPadding: 10, ...i, ref: t, className: b("rt-PopperContent", "rt-HoverCardContent", r) })));
 });
 Gi.displayName = "HoverCard.Content";
-const xw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Tw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Content: Gi,
   Root: ji,
@@ -1708,7 +1708,7 @@ const Yi = h.forwardRef(({ children: n, ...t }, r) => h.createElement(Jc, { ...t
 Yi.displayName = "Popover.Close";
 const Xi = h.forwardRef(({ children: n, ...t }, r) => h.createElement(Tc, { ...t, ref: r }));
 Xi.displayName = "Popover.Anchor";
-const Tw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Jw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Anchor: Xi,
   Close: Yi,
@@ -1747,7 +1747,7 @@ const fs = h.forwardRef(({ __scopeRadioGroup: n, ...t }, r) => {
   return h.createElement(oo, { ...o, "data-accent-color": i, ...t, asChild: !1, ref: r, className: b("rt-reset", "rt-BaseRadioRoot", l) });
 });
 fs.displayName = "RadioGroup.ItemRadio";
-const Jw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Dw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Item: tl,
   Root: el
@@ -1859,7 +1859,7 @@ const al = h.forwardRef((n, t) => {
   return h.createElement("th", { className: b("rt-TableCell", "rt-TableRowHeaderCell", r), scope: "row", ref: t, ...s });
 });
 al.displayName = "Table.RowHeaderCell";
-const Dw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Qw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Body: Aa,
   Cell: St,
@@ -1888,7 +1888,7 @@ const cl = h.forwardRef((n, t) => {
   return h.createElement(zc, { ...s, ref: t, className: b("rt-TabsContent", r) });
 });
 cl.displayName = "Tabs.Content";
-const Qw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Mw = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Content: cl,
   List: il,
@@ -3996,15 +3996,15 @@ const HC = "_content_1cwsl_2", KC = "_iconWrapper_1cwsl_10", LC = "_iconWrapperL
 };
 tv.displayName = "EmptyState";
 const ga = un(null), vl = un(null), ys = un(null);
-function Mw() {
+function Uw() {
   return dt(ga);
 }
-function Uw() {
+function Ow() {
   const n = dt(vl);
   if (!n) throw new Error("useNavigation must be used inside an <Extension> with initialScreen");
   return n;
 }
-function Ow() {
+function Fw() {
   const n = dt(ys);
   if (!n) throw new Error("useScreen must be used inside an <Extension.Screen> component");
   return n;
@@ -4612,7 +4612,7 @@ const Fr = we.forwardRef(
 Fr.displayName = "HeaderPanel";
 Fr.Button = bl;
 Fr.Details = Il;
-const Fw = Fr, Qv = "_sliderRoot_19e7a_23", Mv = "_sliderTrack_19e7a_31", Uv = "_sliderRange_19e7a_46", Ov = "_sliderThumb_19e7a_65", Fv = "_tooltipContent_19e7a_85", Pv = "_tooltipArrow_19e7a_101", zv = "_sliderContainer_19e7a_116", zt = {
+const Pw = Fr, Qv = "_sliderRoot_19e7a_23", Mv = "_sliderTrack_19e7a_31", Uv = "_sliderRange_19e7a_46", Ov = "_sliderThumb_19e7a_65", Fv = "_tooltipContent_19e7a_85", Pv = "_tooltipArrow_19e7a_101", zv = "_sliderContainer_19e7a_116", zt = {
   sliderRoot: Qv,
   sliderTrack: Mv,
   sliderRange: Uv,
@@ -5719,7 +5719,7 @@ const tk = "_listCardsItem_rjypk_1", nk = "_listCardsItemDescriptionWrappable_rj
 Yt.Card = Ek;
 Yt.CardDetails = wk;
 Yt.displayName = "ListCards";
-const Pw = ({
+const zw = ({
   i18n: n = { _: (d) => d },
   subDivision: t = 1,
   volume: r,
@@ -8237,7 +8237,7 @@ const xI = "_sectionTitle_bwlze_1", TI = "_separator_bwlze_17", Ka = {
     orientation: "horizontal",
     className: Ka.separator
   }
-) : /* @__PURE__ */ a(z, { size: "1", weight: "medium", className: Ka.sectionTitle, children: n }) }), zw = ({
+) : /* @__PURE__ */ a(z, { size: "1", weight: "medium", className: Ka.sectionTitle, children: n }) }), Ww = ({
   additionalItems: n,
   selectedAdditionalItemId: t,
   userProfileItems: r,
@@ -9482,7 +9482,7 @@ const Va = {
   toms: ["drums"],
   hiHat: ["drums"],
   cymbals: ["drums"]
-}, Ww = ({
+}, Hw = ({
   i18n: n = { _: (m) => m },
   freeStems: t,
   paidStems: r,
@@ -10235,7 +10235,7 @@ const es = (n, t) => typeof n == "string" ? { title: n, description: "", variant
   description: (n == null ? void 0 : n.description) ?? "",
   variant: (n == null ? void 0 : n.variant) ?? t,
   duration: n == null ? void 0 : n.duration
-}, Hw = ({
+}, Kw = ({
   children: n,
   duration: t = 1e4,
   maxToasts: r = 4,
@@ -10325,7 +10325,7 @@ const es = (n, t) => typeof n == "string" ? { title: n, description: "", variant
       ]
     }
   ) });
-}, Kw = () => {
+}, Lw = () => {
   const n = dt(Ml);
   if (!n)
     throw new Error("useToast must be used inside ToastProvider");
@@ -10721,7 +10721,7 @@ function mE({ name: n, errorsRef: t, children: r }) {
     s && /* @__PURE__ */ a(G, { size: "1", color: "red", children: s })
   ] });
 }
-function Lw({ schema: n }) {
+function jw({ schema: n }) {
   const [t, r] = V(() => n.parse({})), [s, o] = V({}), i = te(s);
   i.current = s;
   const l = te([]), c = te(!1);
@@ -12819,7 +12819,7 @@ const cw = "_root_1bt4i_2", dw = "_item_1bt4i_9", uw = "_surface_1bt4i_29", hw =
   labelSelected: pw,
   indicator: gw,
   indicatorSelected: mw
-}, fw = ({
+}, fw = (n, t) => n == null || t == null ? !1 : n === t ? !0 : n.value != null && t.value != null && n.value === t.value, Cw = ({
   items: n,
   selectedType: t,
   handleTypeChange: r,
@@ -12835,7 +12835,7 @@ const cw = "_root_1bt4i_2", dw = "_item_1bt4i_9", uw = "_surface_1bt4i_29", hw =
     "aria-label": o,
     ...i,
     children: n.map((l) => {
-      const c = t === l.value;
+      const c = fw(t, l);
       return /* @__PURE__ */ f(
         "button",
         {
@@ -12843,7 +12843,7 @@ const cw = "_root_1bt4i_2", dw = "_item_1bt4i_9", uw = "_surface_1bt4i_29", hw =
           role: "radio",
           "aria-checked": c,
           className: kt.item,
-          onClick: () => r(l.value),
+          onClick: () => r(l),
           children: [
             /* @__PURE__ */ a(
               "div",
@@ -12877,11 +12877,11 @@ const cw = "_root_1bt4i_2", dw = "_item_1bt4i_9", uw = "_surface_1bt4i_29", hw =
     })
   }
 );
-fw.displayName = "VerticalSegmentControl";
+Cw.displayName = "VerticalSegmentControl";
 export {
   pg as AdditionalItems,
-  ww as AlertDialog,
-  Rw as AspectRatio,
+  Rw as AlertDialog,
+  Nw as AspectRatio,
   rt as Avatar,
   Gs as Badge,
   tm as BannerAnnouncement,
@@ -12898,9 +12898,9 @@ export {
   hA as Container,
   xf as ContextMenu,
   fl as Countdown,
-  Nw as DataList,
+  Bw as DataList,
   JC as DataTable,
-  Bw as Dialog,
+  xw as Dialog,
   WC as DropdownButton,
   dn as DropdownMenu,
   IA as Em,
@@ -12913,10 +12913,10 @@ export {
   AS as GenerationStatus,
   Oi as Grid,
   Dv as GroupButtons,
-  Fw as HeaderPanel,
+  Pw as HeaderPanel,
   Rr as Heading,
   Wv as HorizontalVolume,
-  xw as HoverCard,
+  Tw as HoverCard,
   be as IconButton,
   ma as InputLevelMeter,
   BA as Inset,
@@ -12926,13 +12926,13 @@ export {
   UA as Link,
   Yt as ListCards,
   je as MessageWithAction,
-  Pw as MetronomeForm,
+  zw as MetronomeForm,
   Mr as MoreButton,
   Qk as MultiSelect,
   ws as MultiSelectCards,
   Rl as PanControl,
   oy as PeakLevel,
-  Tw as Popover,
+  Jw as Popover,
   Pr as ProductsBrandPattern,
   ky as ProductsList,
   Jy as ProfileMenu,
@@ -12941,7 +12941,7 @@ export {
   LA as Quote,
   tp as Radio,
   ob as RadioCardsGroup,
-  Jw as RadioGroup,
+  Dw as RadioGroup,
   Cb as Rating,
   l0 as RecordingForm,
   _t as ScrollArea,
@@ -12951,7 +12951,7 @@ export {
   Rt as Select,
   ct as Separator,
   eI as SetlistList,
-  zw as Shell,
+  Ww as Shell,
   Jl as Sidebar,
   La as SidebarSection,
   bp as Skeleton,
@@ -12959,30 +12959,30 @@ export {
   lw as SpecialDialog,
   Nr as Spinner,
   hS as StemGenerationForm,
-  Ww as StemSeparationForm,
+  Hw as StemSeparationForm,
   Sp as Strong,
   Bt as Switch,
-  Dw as Table,
-  Qw as Tabs,
+  Qw as Table,
+  Mw as Tabs,
   FS as TempoControlsForm,
   G as Text,
   Dl as TextArea,
   Ql as TextField,
   Cs as Theme,
   wl as ThumbnailPicker,
-  Hw as ToastProvider,
+  Kw as ToastProvider,
   _e as Tooltip,
   Ge as TooltipWithInfoIcon,
   Ul as TrackControlButton,
   cr as TrackControlsToggle,
   gE as TrackHeader,
-  fw as VerticalSegmentControl,
+  Cw as VerticalSegmentControl,
   Fh as VisuallyHidden,
   nw as VoiceConversionForm,
   Hl as Waveform,
-  Mw as useExtension,
-  Lw as useForm,
-  Uw as useNavigation,
-  Ow as useScreen,
-  Kw as useToast
+  Uw as useExtension,
+  jw as useForm,
+  Ow as useNavigation,
+  Fw as useScreen,
+  Lw as useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.14.0",
+  "version": "4.14.1",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/VerticalSegmentControl/VerticalSegmentControl.jsx

@@ -3,6 +3,12 @@ import classNames from 'classnames'
 import { Text } from '../Text/Text'
 import styles from './VerticalSegmentControl.module.css'
 
+const isSelectedItem = (selected, item) => {
+  if (selected == null || item == null) return false
+  if (selected === item) return true
+  return selected.value != null && item.value != null && selected.value === item.value
+}
+
 export const VerticalSegmentControl = ({
   items,
   selectedType,
@@ -20,7 +26,7 @@ export const VerticalSegmentControl = ({
       {...props}
     >
       {items.map((item) => {
-        const isSelected = selectedType === item.value
+        const isSelected = isSelectedItem(selectedType, item)
         return (
           <button
             key={item.value}
@@ -28,7 +34,7 @@ export const VerticalSegmentControl = ({
             role="radio"
             aria-checked={isSelected}
             className={styles.item}
-            onClick={() => handleTypeChange(item.value)}
+            onClick={() => handleTypeChange(item)}
           >
             <div
               className={classNames(styles.surface, isSelected && styles.surfaceSelected)}

package/src/components/VerticalSegmentControl/VerticalSegmentControl.stories.jsx

@@ -29,7 +29,7 @@ export default {
 export const Default = {
   args: {
     items: sixItems,
-    initialSelectedType: '1',
+    initialSelectedType: sixItems[0],
     'aria-label': 'Mixer segment',
   },
   render: (args) => {
@@ -40,9 +40,9 @@ export const Default = {
         <VerticalSegmentControl
           items={args.items}
           selectedType={selectedType}
-          handleTypeChange={(value) => {
-            setSelectedType(value)
-            args.handleTypeChange(value)
+          handleTypeChange={(item) => {
+            setSelectedType(item)
+            args.handleTypeChange(item)
           }}
           aria-label={args['aria-label']}
         />
@@ -51,14 +51,16 @@ export const Default = {
   },
 }
 
+const compactItems = [
+  { value: 'a', label: 'Preset' },
+  { value: 'b', label: 'Model' },
+  { value: 'c', label: 'Prompt' },
+]
+
 export const CompactList = {
   args: {
-    items: [
-      { value: 'a', label: 'Preset' },
-      { value: 'b', label: 'Model' },
-      { value: 'c', label: 'Prompt' },
-    ],
-    initialSelectedType: 'b',
+    items: compactItems,
+    initialSelectedType: compactItems[1],
   },
   render: (args) => {
     const [selectedType, setSelectedType] = useState(args.initialSelectedType)
@@ -68,9 +70,9 @@ export const CompactList = {
         <VerticalSegmentControl
           items={args.items}
           selectedType={selectedType}
-          handleTypeChange={(value) => {
-            setSelectedType(value)
-            args.handleTypeChange?.(value)
+          handleTypeChange={(item) => {
+            setSelectedType(item)
+            args.handleTypeChange?.(item)
           }}
         />
       </Flex>