feat(segmented): add demos and fix disabled cursor on items

Add icon, disabled, and size demos. Fix cursor not showing
not-allowed on individual items when the control is disabled.

Author: wangdicoder

components/segmented/demo/disabled.md

@@ -0,0 +1,24 @@
+<demo>
+
+### Disabled
+
+Disable the entire control or individual options.
+
+```jsx live
+() => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Segmented options={['Daily', 'Weekly', 'Monthly']} disabled />
+      <Segmented
+        options={[
+          { label: 'Active', value: 'active' },
+          { label: 'Disabled', value: 'disabled', disabled: true },
+          { label: 'Active', value: 'active2' },
+        ]}
+      />
+    </div>
+  );
+}
+```
+
+</demo>

components/segmented/demo/icon.md

@@ -0,0 +1,21 @@
+<demo>
+
+### With Icons
+
+Add icons to segmented options using the `icon` property.
+
+```jsx live
+() => {
+  return (
+    <Segmented
+      options={[
+        { label: 'User', value: 'user', icon: <Icon name="user" /> },
+        { label: 'Star', value: 'star', icon: <Icon name="star" /> },
+        { label: 'Wifi', value: 'wifi', icon: <Icon name="wifi" /> },
+      ]}
+    />
+  );
+}
+```
+
+</demo>

components/segmented/demo/size.md

@@ -0,0 +1,19 @@
+<demo>
+
+### Size
+
+Three sizes: `sm`, `md`, and `lg`.
+
+```jsx live
+() => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <Segmented options={['Small', 'Medium', 'Large']} size="sm" />
+      <Segmented options={['Small', 'Medium', 'Large']} size="md" />
+      <Segmented options={['Small', 'Medium', 'Large']} size="lg" />
+    </div>
+  );
+}
+```
+
+</demo>

components/segmented/index.md

@@ -1,4 +1,7 @@
 import Basic from './demo/basic.md'
+import Disabled from './demo/disabled.md'
+import IconDemo from './demo/icon.md'
+import Size from './demo/size.md'
 
 # Segmented
 
@@ -19,6 +22,11 @@ import { Segmented } from 'tiny-ui';
 <layout>
   <column>
     <Basic/>
+    <IconDemo/>
+  </column>
+  <column>
+    <Size/>
+    <Disabled/>
   </column>
 </layout>
 

components/segmented/style/_index.scss

@@ -21,6 +21,11 @@
   &_disabled {
     opacity: 0.5;
     cursor: not-allowed;
+
+    .#{$prefix}-segmented__item {
+      cursor: not-allowed;
+      pointer-events: none;
+    }
   }
 
   &_sm .#{$prefix}-segmented__item {