@ds-mo/ui 0.2.4 → 0.4.0

package/src/components/ToggleButton/ToggleButton.tsx

@@ -1,118 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import { LabelWrap } from '@/components/LabelWrap';
-import type { IconComponent } from '@/types/icons';
-import styles from './ToggleButton.module.css';
-
-export type ToggleButtonElevation  = 'none' | 'flat' | 'elevated' | 'floating';
-export type ToggleButtonSize       = 'md' | 'sm' | 'xs';
-export type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
-
-export interface ToggleButtonProps {
-  /**
-   * Chrome level.
-   *   none     — ghost (transparent, no border, no shadow)
-   *   flat     — border only, transparent bg
-   *   elevated — bg-primary + shadow  [default]
-   *   floating — bg-primary + FAB-strength shadow
-   */
-  elevation?: ToggleButtonElevation;
-  /** Label text. */
-  label?: string;
-  /** Leading icon component. */
-  icon?: IconComponent;
-  /** Size: md (32px), sm (24px), xs (16px). Defaults to 'md'. */
-  size?: ToggleButtonSize;
-  /** Pill shape. */
-  rounded?: boolean;
-  /** Parent surface context. Adjusts hover tokens for toggle buttons on colored backgrounds. */
-  background?: ToggleButtonBackground;
-  /** Controlled pressed state. */
-  pressed: boolean;
-  /** Called when pressed state changes. */
-  onPressedChange: (pressed: boolean) => void;
-  inactive?: boolean;
-  className?: string;
-  id?: string;
-  'aria-label'?: string;
-}
-
-const ICON_SIZE_MAP: Record<ToggleButtonSize, number> = { md: 20, sm: 16, xs: 12 };
-
-const TEXT_STYLE_MAP: Record<ToggleButtonSize, string> = {
-  md: 'text-body-medium-emphasis',
-  sm: 'text-body-small-emphasis',
-  xs: 'text-caption-emphasis',
-};
-
-export const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(
-  (
-    {
-      elevation = 'elevated',
-      label,
-      icon: Icon,
-      size = 'md',
-      rounded = false,
-      background,
-      pressed,
-      onPressedChange,
-      inactive = false,
-      className,
-      id,
-      'aria-label': ariaLabel,
-    },
-    ref
-  ) => {
-    const hasIcon = !!Icon;
-    const hasLabel = !!label;
-    const isIconOnly = hasIcon && !hasLabel;
-    const isLabelOnly = hasLabel && !hasIcon;
-    const isIconAndLabel = hasIcon && hasLabel;
-    const iconSize = ICON_SIZE_MAP[size];
-    const textStyle = TEXT_STYLE_MAP[size];
-
-    const elevKey = elevation.charAt(0).toUpperCase() + elevation.slice(1);
-
-    const classes = cn(
-      styles.toggleButton,
-      styles[`elevation${elevKey}`],
-      size !== 'md' && styles[`size${size.toUpperCase()}`],
-      rounded && styles.rounded,
-      inactive && styles.inactive,
-      isIconOnly && styles.iconOnly,
-      isLabelOnly && styles.labelOnly,
-      isIconAndLabel && styles.iconAndLabel,
-      background && background !== 'faint' && styles[
-        background === 'always-dark' ? 'onAlwaysDark'
-          : `on${background.charAt(0).toUpperCase() + background.slice(1)}`
-      ],
-      pressed && styles.pressed,
-      className,
-    );
-
-    return (
-      <button
-        ref={ref}
-        id={id}
-        className={classes}
-        onClick={inactive ? undefined : () => onPressedChange(!pressed)}
-        type="button"
-        disabled={inactive}
-        aria-label={ariaLabel || label || 'toggle'}
-        aria-pressed={pressed}
-      >
-        {Icon && <Icon size={iconSize} />}
-        {label && (
-          <LabelWrap>
-            <Text variant={textStyle as never} as="span" color="inherit">
-              {label}
-            </Text>
-          </LabelWrap>
-        )}
-      </button>
-    );
-  }
-);
-
-ToggleButton.displayName = 'ToggleButton';

package/src/components/ToggleButton/index.ts

@@ -1,2 +0,0 @@
-export { ToggleButton } from './ToggleButton';
-export type { ToggleButtonProps, ToggleButtonElevation, ToggleButtonSize, ToggleButtonBackground } from './ToggleButton';

package/src/components/ToggleButtonGroup/ToggleButtonGroup.module.css

@@ -1,163 +0,0 @@
-/* ==========================================================================
-   ToggleButtonGroup — flush row of ToggleButton components
-   ========================================================================== */
-
-.group {
-  display: inline-flex;
-  align-items: stretch;
-  border-radius: var(--dimension-radius-050);
-  position: relative;
-}
-
-/* Inset ring / highlight overlay — sits above button children so it isn't
-   covered by their backgrounds. Outset shadow stays on the element itself. */
-.group::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-}
-
-/* ── Group-level elevation ──────────────────────────────────────────────── */
-/* Individual item chrome (shadow/border) is suppressed via .item below.
-   The group container carries the elevation so it wraps the whole control. */
-
-/* Outset shadow on element; inset highlight on ::after (children would cover it otherwise) */
-.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }
-.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }
-
-/* Flat ring lives entirely on ::after — same reasoning as highlight */
-.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }
-
-.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }
-.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }
-/* groupNone = ghost — no shadow, no border */
-
-.groupRounded { border-radius: var(--dimension-radius-half); }
-
-/* ── Base item ─────────────────────────────────────────────────────────────── */
-
-.item {
-  flex-shrink: 0;
-  /* Suppress individual elevation so the group reads as one unit */
-  box-shadow: none !important;
-  /* Suppress noElevation individual border — divider handles separation */
-  border: none !important;
-  /* Suppress scale-on-press: transform would detach the divider from the
-     adjacent button, creating a visible gap. Pressed state is still
-     communicated via the ::after overlay colour. */
-}
-.item:active {
-  transform: none !important;
-}
-
-/* ── Divider ────────────────────────────────────────────────────────────────
- * Rendered as a separate <div> between items so it is never part of any
- * button's stacking context — disabled (opacity: 0.5) or other state changes
- * on adjacent buttons cannot bleed through to the divider.
- * ─────────────────────────────────────────────────────────────────────────── */
-
-/* Full-height divider (elevated / flat / floating).
- * Rendered as a separate element (independent of adjacent button opacity),
- * then nudged ±0.5px so it overlaps each neighbour and paints on top via
- * z-index — this lets the alpha token (rgb(0 0 0 / 0.1)) composite over
- * whatever fill the buttons carry (white, blue pressed state, etc.). */
-.divider {
-  width: 1px;
-  flex-shrink: 0;
-  background-color: var(--color-border-tertiary);
-  position: relative;
-  z-index: 1;
-  margin: 0 -0.5px;
-  pointer-events: none;
-}
-
-/* Ghost (elevation=none): short centred divider at icon height */
-.dividerGhost    { height: 20px; align-self: center; } /* md default */
-.dividerGhostXS  { height: 12px; }
-.dividerGhostSM  { height: 16px; }
-
-/* Ghost hover-fade: hide the divider on either side of a hovered ghost button */
-.item:hover + .dividerGhost,
-.dividerGhost:has(+ .item:hover) { opacity: 0; }
-
-/* Ghost pressed-state: hide the divider on either side of a selected button */
-.itemPressed + .dividerGhost,
-.dividerGhost:has(+ .itemPressed) { opacity: 0; }
-
-
-/* ── Ghost interaction states: rounded chips ──────────────────────────────────
- * Ghost items have no connecting chrome — hover/press overlay and selected
- * state always appear as independent rounded chips (4px on all corners).
- * Rounded groups: outer corners of first/last become pill; inner stay 4px.
- *
- * Uses explicit longhands throughout to avoid shorthand/longhand cascade
- * ordering ambiguity with the !important rules in .first / .last / .middle.
- * ─────────────────────────────────────────────────────────────────────────── */
-
-/* ::after hover/press overlay — all positions: 4px all corners.
-   Uses .group as ancestor (2-class specificity) to reliably beat
-   .first / .last / .middle (1-class) regardless of load order. */
-.group .itemShort::after {
-  border-top-left-radius:     var(--dimension-radius-050) !important;
-  border-top-right-radius:    var(--dimension-radius-050) !important;
-  border-bottom-right-radius: var(--dimension-radius-050) !important;
-  border-bottom-left-radius:  var(--dimension-radius-050) !important;
-}
-
-/* Selected chip — all positions: 4px all corners */
-.group .itemPressed {
-  border-top-left-radius:     var(--dimension-radius-050) !important;
-  border-top-right-radius:    var(--dimension-radius-050) !important;
-  border-bottom-right-radius: var(--dimension-radius-050) !important;
-  border-bottom-left-radius:  var(--dimension-radius-050) !important;
-}
-
-/* ── Border radius: flatten only the inner-facing corners ──────────────────── */
-/* Outer corners keep the button's own radius — works for default + rounded */
-
-.first {
-  border-top-right-radius:    0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.last {
-  border-top-left-radius:    0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-.middle {
-  border-radius: 0 !important;
-}
-
-/* Rounded group: first — left corners become pill (3-class specificity) */
-.groupRounded .first.itemShort::after,
-.groupRounded .first.itemPressed {
-  border-top-left-radius:    var(--dimension-radius-half) !important;
-  border-bottom-left-radius: var(--dimension-radius-half) !important;
-}
-
-/* Rounded group: last — right corners become pill (3-class specificity) */
-.groupRounded .last.itemShort::after,
-.groupRounded .last.itemPressed {
-  border-top-right-radius:    var(--dimension-radius-half) !important;
-  border-bottom-right-radius: var(--dimension-radius-half) !important;
-}
-
-/* ── Rounded: inner-edge padding correction ────────────────────────────────── */
-/*
- * Rounded buttons add `space-050` extra padding on each side.
- * In a group the inner-facing edge should use base (non-pill) padding instead.
- * XS rounded has no extra padding so needs no correction.
- */
-
-/* MD — base padding: space-100 */
-.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }
-.roundedLastMD  { padding-left:  var(--dimension-space-100) !important; }
-.roundedMidMD   { padding-left:  var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }
-
-/* SM — base padding: space-075 */
-.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }
-.roundedLastSM  { padding-left:  var(--dimension-space-075) !important; }
-.roundedMidSM   { padding-left:  var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }

package/src/components/ToggleButtonGroup/ToggleButtonGroup.stories.tsx

@@ -1,341 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
-import { ToggleButtonGroup } from './ToggleButtonGroup';
-import { ToggleButton } from '@/components/ToggleButton';
-import type { ToggleButtonElevation } from '@/components/ToggleButton';
-import type { IconComponent } from '@/types/icons';
-
-const PlaceholderIcon: IconComponent = ({ size = 20 }) => (
-  <svg width={size} height={size} viewBox="0 0 20 20" fill="currentColor">
-    <circle cx="10" cy="10" r="6" />
-  </svg>
-);
-
-interface PlaygroundArgs {
-  elevation: ToggleButtonElevation;
-  size:      'xs' | 'sm' | 'md';
-  rounded:   boolean;
-  showIcon:  boolean;
-}
-
-const meta: Meta<typeof ToggleButtonGroup> = {
-  title: 'Primitives (Reviewed)/ToggleButtonGroup',
-  component: ToggleButtonGroup,
-  args: {
-    elevation: 'elevated',
-    size:      'md',
-    rounded:   false,
-    showIcon:  false,
-  } as PlaygroundArgs,
-  argTypes: {
-    elevation: { control: 'select', options: ['elevated', 'flat', 'none', 'floating'] },
-    size:      { control: 'select', options: ['xs', 'sm', 'md'] },
-    rounded:   { control: 'boolean' },
-    showIcon:  { control: 'boolean' },
-  } as Record<string, unknown>,
-};
-
-export default meta;
-type Story = StoryObj<typeof ToggleButtonGroup>;
-
-// ─── Matrix ───────────────────────────────────────────────────────────────────
-
-const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' };
-const row: React.CSSProperties = { display: 'flex', gap: 16, alignItems: 'center' };
-const labelStyle: React.CSSProperties = { fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 120, flexShrink: 0 };
-const section = (text: string) => (
-  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#555', marginTop: 8 }}>
-    {text}
-  </div>
-);
-const divider = <hr style={{ border: 'none', borderTop: '1px solid #e0e0e0', margin: '8px 0 16px' }} />;
-
-// ─── Playground ──────────────────────────────────────────────────────────────
-
-export const Playground: Story = {
-  render: (args) => {
-    const a = args as unknown as PlaygroundArgs;
-    const opts = ['First', 'Second', 'Third'] as const;
-    const [selected, setSelected] = useState<string>('Second');
-    return (
-      <ToggleButtonGroup>
-        {opts.map(opt => (
-          <ToggleButton
-            key={opt}
-            elevation={a.elevation}
-            size={a.size}
-            rounded={a.rounded}
-            icon={a.showIcon ? PlaceholderIcon : undefined}
-            label={opt}
-            pressed={selected === opt}
-            onPressedChange={() => setSelected(opt)}
-          />
-        ))}
-      </ToggleButtonGroup>
-    );
-  },
-};
-
-// ─── Matrix ───────────────────────────────────────────────────────────────────
-
-export const Matrix: Story = {
-  parameters: { layout: 'padded' },
-  render: () => {
-    const [view, setView] = useState<'grid' | 'list' | 'table'>('grid');
-    const [period, setPeriod] = useState<'day' | 'week' | 'month'>('week');
-    const [multi, setMulti] = useState<Set<string>>(new Set(['b']));
-    const toggleMulti = (key: string) => setMulti(prev => {
-      const next = new Set(prev);
-      next.has(key) ? next.delete(key) : next.add(key);
-      return next;
-    });
-
-    return (
-      <div style={{ ...col, fontFamily: 'sans-serif', gap: 0 }}>
-
-        {section('Elevation — full-height vs short divider')}
-        {divider}
-        <div style={col}>
-          <div style={row}>
-            <span style={labelStyle}>elevated ↓ full</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" label="Day"   pressed={period === 'day'}   onPressedChange={() => setPeriod('day')} />
-              <ToggleButton elevation="elevated" label="Week"  pressed={period === 'week'}  onPressedChange={() => setPeriod('week')} />
-              <ToggleButton elevation="elevated" label="Month" pressed={period === 'month'} onPressedChange={() => setPeriod('month')} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>flat ↓ full</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="flat" label="Day"   pressed={period === 'day'}   onPressedChange={() => setPeriod('day')} />
-              <ToggleButton elevation="flat" label="Week"  pressed={period === 'week'}  onPressedChange={() => setPeriod('week')} />
-              <ToggleButton elevation="flat" label="Month" pressed={period === 'month'} onPressedChange={() => setPeriod('month')} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>none ↓ short</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="none" label="Day"   pressed={period === 'day'}   onPressedChange={() => setPeriod('day')} />
-              <ToggleButton elevation="none" label="Week"  pressed={period === 'week'}  onPressedChange={() => setPeriod('week')} />
-              <ToggleButton elevation="none" label="Month" pressed={period === 'month'} onPressedChange={() => setPeriod('month')} />
-            </ToggleButtonGroup>
-          </div>
-        </div>
-
-        {section('Sizes')}
-        {divider}
-        <div style={col}>
-          {(['md', 'sm', 'xs'] as const).map(size => (
-            <div key={size} style={row}>
-              <span style={labelStyle}>{size}</span>
-              <ToggleButtonGroup>
-                <ToggleButton elevation="elevated" size={size} label="Day"   pressed={false} onPressedChange={() => {}} />
-                <ToggleButton elevation="elevated" size={size} label="Week"  pressed={true}  onPressedChange={() => {}} />
-                <ToggleButton elevation="elevated" size={size} label="Month" pressed={false} onPressedChange={() => {}} />
-              </ToggleButtonGroup>
-            </div>
-          ))}
-        </div>
-
-        {section('Rounded — outer pill padding, inner base padding')}
-        {divider}
-        <div style={col}>
-          <div style={row}>
-            <span style={labelStyle}>elevated label</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" label="Day"   rounded pressed={period === 'day'}   onPressedChange={() => setPeriod('day')} />
-              <ToggleButton elevation="elevated" label="Week"  rounded pressed={period === 'week'}  onPressedChange={() => setPeriod('week')} />
-              <ToggleButton elevation="elevated" label="Month" rounded pressed={period === 'month'} onPressedChange={() => setPeriod('month')} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>none label</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="none" label="Day"   rounded pressed={period === 'day'}   onPressedChange={() => setPeriod('day')} />
-              <ToggleButton elevation="none" label="Week"  rounded pressed={period === 'week'}  onPressedChange={() => setPeriod('week')} />
-              <ToggleButton elevation="none" label="Month" rounded pressed={period === 'month'} onPressedChange={() => setPeriod('month')} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>icon only</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="Grid"  pressed={view === 'grid'}  onPressedChange={() => setView('grid')} />
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="List"  pressed={view === 'list'}  onPressedChange={() => setView('list')} />
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="Table" pressed={view === 'table'} onPressedChange={() => setView('table')} />
-            </ToggleButtonGroup>
-          </div>
-        </div>
-
-        {section('With Icons')}
-        {divider}
-        <div style={col}>
-          <div style={row}>
-            <span style={labelStyle}>icon + label</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} label="Grid"  pressed={view === 'grid'}  onPressedChange={() => setView('grid')} />
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} label="List"  pressed={view === 'list'}  onPressedChange={() => setView('list')} />
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} label="Table" pressed={view === 'table'} onPressedChange={() => setView('table')} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>icon only</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} aria-label="Grid"  pressed={view === 'grid'}  onPressedChange={() => setView('grid')} />
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} aria-label="List"  pressed={view === 'list'}  onPressedChange={() => setView('list')} />
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} aria-label="Table" pressed={view === 'table'} onPressedChange={() => setView('table')} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>icon only rounded</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="Grid"  pressed={view === 'grid'}  onPressedChange={() => setView('grid')} />
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="List"  pressed={view === 'list'}  onPressedChange={() => setView('list')} />
-              <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="Table" pressed={view === 'table'} onPressedChange={() => setView('table')} />
-            </ToggleButtonGroup>
-          </div>
-        </div>
-
-        {section('Multi-select')}
-        {divider}
-        <div style={col}>
-          <div style={row}>
-            <span style={labelStyle}>independent</span>
-            <ToggleButtonGroup>
-              {(['a', 'b', 'c'] as const).map(key => (
-                <ToggleButton
-                  key={key}
-                  elevation="elevated"
-                  label={key.toUpperCase()}
-                  pressed={multi.has(key)}
-                  onPressedChange={() => toggleMulti(key)}
-                />
-              ))}
-            </ToggleButtonGroup>
-          </div>
-        </div>
-
-        {section('States')}
-        {divider}
-        <div style={col}>
-          <div style={row}>
-            <span style={labelStyle}>none pressed</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" label="One"   pressed={false} onPressedChange={() => {}} />
-              <ToggleButton elevation="elevated" label="Two"   pressed={false} onPressedChange={() => {}} />
-              <ToggleButton elevation="elevated" label="Three" pressed={false} onPressedChange={() => {}} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>all pressed</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" label="One"   pressed={true} onPressedChange={() => {}} />
-              <ToggleButton elevation="elevated" label="Two"   pressed={true} onPressedChange={() => {}} />
-              <ToggleButton elevation="elevated" label="Three" pressed={true} onPressedChange={() => {}} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>with inactive</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" label="One"   pressed={false} onPressedChange={() => {}} />
-              <ToggleButton elevation="elevated" label="Two"   pressed={true}  onPressedChange={() => {}} inactive />
-              <ToggleButton elevation="elevated" label="Three" pressed={false} onPressedChange={() => {}} />
-            </ToggleButtonGroup>
-          </div>
-          <div style={row}>
-            <span style={labelStyle}>two items</span>
-            <ToggleButtonGroup>
-              <ToggleButton elevation="elevated" label="Left"  pressed={false} onPressedChange={() => {}} />
-              <ToggleButton elevation="elevated" label="Right" pressed={true}  onPressedChange={() => {}} />
-            </ToggleButtonGroup>
-          </div>
-        </div>
-
-      </div>
-    );
-  },
-};
-
-// ─── Individual stories ───────────────────────────────────────────────────────
-
-export const SingleSelect: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<'day' | 'week' | 'month'>('week');
-    return (
-      <ToggleButtonGroup>
-        {(['day', 'week', 'month'] as const).map(opt => (
-          <ToggleButton
-            key={opt}
-            elevation="elevated"
-            label={opt.charAt(0).toUpperCase() + opt.slice(1)}
-            pressed={selected === opt}
-            onPressedChange={() => setSelected(opt)}
-          />
-        ))}
-      </ToggleButtonGroup>
-    );
-  },
-};
-
-export const MultiSelect: Story = {
-  render: () => {
-    const [active, setActive] = useState(new Set(['bold']));
-    const toggle = (key: string) => setActive(prev => {
-      const next = new Set(prev);
-      next.has(key) ? next.delete(key) : next.add(key);
-      return next;
-    });
-    return (
-      <ToggleButtonGroup>
-        {(['Bold', 'Italic', 'Underline'] as const).map(opt => (
-          <ToggleButton
-            key={opt}
-            elevation="elevated"
-            label={opt}
-            pressed={active.has(opt.toLowerCase())}
-            onPressedChange={() => toggle(opt.toLowerCase())}
-          />
-        ))}
-      </ToggleButtonGroup>
-    );
-  },
-};
-
-export const IconOnly: Story = {
-  render: () => {
-    const [view, setView] = useState<'grid' | 'list' | 'table'>('grid');
-    return (
-      <ToggleButtonGroup>
-        <ToggleButton elevation="elevated" icon={PlaceholderIcon} aria-label="Grid"  pressed={view === 'grid'}  onPressedChange={() => setView('grid')} />
-        <ToggleButton elevation="elevated" icon={PlaceholderIcon} aria-label="List"  pressed={view === 'list'}  onPressedChange={() => setView('list')} />
-        <ToggleButton elevation="elevated" icon={PlaceholderIcon} aria-label="Table" pressed={view === 'table'} onPressedChange={() => setView('table')} />
-      </ToggleButtonGroup>
-    );
-  },
-};
-
-export const Rounded: Story = {
-  render: () => {
-    const [selected, setSelected] = useState<'day' | 'week' | 'month'>('week');
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
-        <ToggleButtonGroup>
-          {(['day', 'week', 'month'] as const).map(opt => (
-            <ToggleButton
-              key={opt}
-              elevation="elevated"
-              label={opt.charAt(0).toUpperCase() + opt.slice(1)}
-              rounded
-              pressed={selected === opt}
-              onPressedChange={() => setSelected(opt)}
-            />
-          ))}
-        </ToggleButtonGroup>
-        <ToggleButtonGroup>
-          <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="Grid"  pressed={false} onPressedChange={() => {}} />
-          <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="List"  pressed={true}  onPressedChange={() => {}} />
-          <ToggleButton elevation="elevated" icon={PlaceholderIcon} rounded aria-label="Table" pressed={false} onPressedChange={() => {}} />
-        </ToggleButtonGroup>
-      </div>
-    );
-  },
-};