@moises.ai/design-system 4.18.12 → 4.18.13

package/package.json

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

package/src/components/SegmentedControl/SegmentedControl.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   Flex,
   SegmentedControl as SegmentedControlRadix,
@@ -15,6 +14,9 @@ export const SegmentedControl = ({
   iconProps = {},
   ...props
 }) => {
+  const hasIconWithLabel = items.some((item) => item.icon && item.label)
+  const isIconOnly = items.length > 0 && items.every((item) => item.icon && !item.label)
+
   return (
     <Flex padding="1" width="100%">
       <SegmentedControlRadix.Root
@@ -24,22 +26,31 @@ export const SegmentedControl = ({
         variant="surface"
         radius="medium"
         className={classNames('customSegmentedControl', className, {
-          hasIconSegmentedControl: items.some((item) => item.icon),
+          hasIconSegmentedControl: hasIconWithLabel,
+          isIconOnlySegmentedControl: isIconOnly,
         })}
         {...props}
       >
-        {items.map((item) => (
-          <SegmentedControlRadix.Item
-            key={item.value}
-            value={item.value}
-            className={classNames('customSegmentedControlItem', {
-              hasIcon: item.icon,
-            })}
-          >
-            {item.icon && <item.icon {...iconProps} />}
-            {item.label}
-          </SegmentedControlRadix.Item>
-        ))}
+        {items.map((item) => {
+          const isItemIconOnly = Boolean(item.icon && !item.label)
+
+          return (
+            <SegmentedControlRadix.Item
+              key={item.value}
+              value={item.value}
+              aria-label={
+                isItemIconOnly ? item.ariaLabel || item.value : undefined
+              }
+              className={classNames('customSegmentedControlItem', {
+                hasIcon: item.icon && item.label,
+                isIconOnly: isItemIconOnly,
+              })}
+            >
+              {item.icon && <item.icon {...iconProps} />}
+              {item.label}
+            </SegmentedControlRadix.Item>
+          )
+        })}
       </SegmentedControlRadix.Root>
     </Flex>
   )

package/src/components/SegmentedControl/SegmentedControl.stories.jsx

@@ -2,7 +2,13 @@ import { Flex } from '@radix-ui/themes'
 import { SegmentedControl } from './SegmentedControl'
 import { useState } from 'react'
 
-import { BassIcon, DrumsIcon, ElectricGuitarIcon, PianoIcon } from '../../icons'
+import {
+  AcousticGuitarIcon,
+  BassIcon,
+  DrumsIcon,
+  ElectricGuitarIcon,
+  PianoIcon,
+} from '../../icons'
 
 export default {
   title: 'Components/SegmentedControl',
@@ -30,7 +36,7 @@ import { SegmentedControl } from '@moises.ai/design-system'
   size="2"
 />
 
-// With icons and custom icon props
+// With icons and labels
 <SegmentedControl
   items={[
     { value: 'bass', label: 'Bass', icon: BassIcon },
@@ -40,6 +46,18 @@ import { SegmentedControl } from '@moises.ai/design-system'
   handleTypeChange={handleTypeChange}
   iconProps={{ width: 20, height: 20 }}
 />
+
+// Icon-only (omit label; optionally pass ariaLabel for accessibility)
+<SegmentedControl
+  items={[
+    { value: 'guitar', icon: ElectricGuitarIcon, ariaLabel: 'Electric guitar' },
+    { value: 'piano', icon: PianoIcon, ariaLabel: 'Piano' },
+    { value: 'acoustic', icon: AcousticGuitarIcon, ariaLabel: 'Acoustic guitar' },
+  ]}
+  selectedType={selectedType}
+  handleTypeChange={handleTypeChange}
+  iconProps={{ width: 18, height: 18 }}
+/>
 \`\`\`
 
 ## Component API
@@ -49,8 +67,9 @@ import { SegmentedControl } from '@moises.ai/design-system'
   items: [
     { 
       value: string, // The value of the item
-      label: string, // The label of the item
-      icon?: React.ComponentType // The icon component (optional)
+      label?: string, // The label of the item (omit for icon-only)
+      icon?: React.ComponentType, // The icon component (optional)
+      ariaLabel?: string // Accessible name when using icon-only (falls back to value)
     }
   ],
   selectedType: string, // The value of the selected item
@@ -60,6 +79,8 @@ import { SegmentedControl } from '@moises.ai/design-system'
   iconProps?: object, // Props to pass to all icons (e.g., { width: 20, height: 20 })
 }
 \`\`\`
+
+When every item has an \`icon\` and no \`label\`, the control switches to icon-only layout automatically.
         `,
       },
     },
@@ -131,3 +152,45 @@ export const WithIcons = {
     )
   },
 }
+
+export const IconOnly = {
+  args: {
+    items: [
+      {
+        value: 'guitar',
+        icon: ElectricGuitarIcon,
+        ariaLabel: 'Electric guitar',
+      },
+      { value: 'piano', icon: PianoIcon, ariaLabel: 'Piano' },
+      {
+        value: 'acoustic',
+        icon: AcousticGuitarIcon,
+        ariaLabel: 'Acoustic guitar',
+      },
+    ],
+    iconProps: { width: 18, height: 18 },
+    initialSelectedType: 'guitar',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Omit `label` on every item to enable the icon-only layout. Prefer `ariaLabel` for screen readers.',
+      },
+    },
+  },
+  render: (args) => {
+    const [selectedType, setSelectedType] = useState(args.initialSelectedType)
+    return (
+      <Flex width="200px">
+        <SegmentedControl
+          {...args}
+          selectedType={selectedType}
+          handleTypeChange={(value) => {
+            setSelectedType(value)
+          }}
+        />
+      </Flex>
+    )
+  },
+}

package/src/components/SegmentedControl/SegmentedControl.styles.css

@@ -12,6 +12,10 @@
   height: auto !important;
 }
 
+.isIconOnlySegmentedControl {
+  height: auto !important;
+}
+
 .rt-SegmentedControlIndicator {
   &::before {
     border-radius: 4px !important;
@@ -53,3 +57,17 @@
     padding-top: 16px;
   }
 }
+
+.isIconOnly {
+  .rt-SegmentedControlItemLabel {
+    flex-direction: row;
+    gap: 0;
+    min-width: 0;
+    padding: 8px 12px;
+  }
+
+  svg {
+    display: block;
+    flex-shrink: 0;
+  }
+}