@devalok/shilp-sutra 0.51.0 → 0.52.0

package/dist/ui/split-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { type Placement } from '@floating-ui/dom'\nimport { type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /** @default 'accent' */\n  color?: SplitButtonColor\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: Placement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n  solid: {\n    accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n    warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n  },\n  soft: {\n    accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n    warning: 'bg-warning-6', neutral: 'bg-surface-border',\n  },\n  outline: {\n    accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n    warning: 'bg-warning-7', neutral: 'bg-surface-border-strong',\n  },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-body-sm', sm: 'text-body-sm', md: 'text-body-md',\n  'icon-xs': 'text-body-sm', 'icon-sm': 'text-body-sm', 'icon-md': 'text-body-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n  'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  const map: Record<SplitButtonVariant, Record<string, string>> = {\n    solid: {\n      accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n      error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n      success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n      warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n      neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n    },\n    soft: {\n      accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n      error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n      success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n      warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n      neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n    },\n    outline: {\n      accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n      error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n      success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n      warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n      neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n    },\n  }\n  return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  const map: Record<string, string> = {\n    accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n    warning: 'border-warning-7', neutral: 'border-surface-border-strong',\n  }\n  return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    // Map the floating-ui `placement` (e.g. 'top-end') to Radix side + align.\n    // Positioning, focus-in/return, outside-click, and Escape all come from the\n    // Popover primitive now — no hand-rolled floating-ui / listeners.\n    const [side, align] = React.useMemo(() => {\n      const [s, a] = placementProp.split('-')\n      return [\n        s as 'top' | 'right' | 'bottom' | 'left',\n        (a === 'start' ? 'start' : a === 'end' ? 'end' : 'center') as\n          | 'start'\n          | 'center'\n          | 'end',\n      ]\n    }, [placementProp])\n\n    const halfClasses = getHalfClasses(variant, color)\n    const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    // Dropdown trigger (the chevron half). PopoverTrigger wires aria-haspopup /\n    // aria-expanded / focus-return for us.\n    const dropdownTrigger = (\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={dropdownLabel}\n          className={cn(\n            'inline-flex items-center justify-center select-none',\n            'transition-colors duration-fast-01 ease-productive-standard',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n            'disabled:pointer-events-none disabled:opacity-action-disabled',\n            halfClasses,\n            heightClass[size],\n            triggerPadding[size],\n          )}\n          style={triggerStyle}\n        >\n          {dropdownIcon ?? <ChevronDown />}\n        </button>\n      </PopoverTrigger>\n    )\n\n    return (\n      <Popover open={openProp} onOpenChange={onOpenChange}>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {dropdownTrigger}\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClasses,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {dropdownTrigger}\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Dropdown panel — Popover handles focus, Escape, outside-click, return */}\n        {dropdownContent && (\n          <PopoverContent\n            side={side}\n            align={align}\n            sideOffset={8}\n            className=\"w-auto min-w-[10rem] p-ds-01\"\n          >\n            {dropdownContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":";;;;;;AAoDA,IAAM,IAAmE;CACvE,OAAO;EACL,QAAQ;EAAmB,OAAO;EAAkB,SAAS;EAC7D,SAAS;EAAoB,SAAS;CACxC;CACA,MAAM;EACJ,QAAQ;EAAe,OAAO;EAAc,SAAS;EACrD,SAAS;EAAgB,SAAS;CACpC;CACA,SAAS;EACP,QAAQ;EAAe,OAAO;EAAc,SAAS;EACrD,SAAS;EAAgB,SAAS;CACpC;AACF,GAEM,IAA+C;CACnD,IAAI;CAAgB,IAAI;CAAW,IAAI;CACvC,WAAW;CAAgB,WAAW;CAAW,WAAW;AAC9D,GAEM,IAA6C;CACjD,IAAI;CAAgB,IAAI;CAAgB,IAAI;CAC5C,WAAW;CAAgB,WAAW;CAAgB,WAAW;AACnE,GAEM,IAAkD;CACtD,IAAI;CAAkB,IAAI;CAAoB,IAAI;CAClD,WAAW;CAAY,WAAW;CAAY,WAAW;AAC3D,GAEM,IAAkD;CACtD,IAAI;CAAY,IAAI;CAAY,IAAI;CACpC,WAAW;CAAY,WAAW;CAAY,WAAW;AAC3D,GAEM,IAA+C;CACnD,IAAI;CAAmB,IAAI;CAAmB,IAAI;CAClD,WAAW;CAAmB,WAAW;CAAmB,WAAW;AACzE;AAEA,SAAS,EAAe,GAA6B,GAAuB;CAC1E,IAAM,IAA0D;EAC9D,OAAO;GACL,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,SAAS;EACX;EACA,SAAS;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,SAAS;EACX;CACF;CACA,OAAO,EAAI,EAAQ,CAAC,MAAU,EAAI,EAAQ,CAAC;AAC7C;AAEA,SAAS,EAAsB,GAAuB;CACpD,IAAM,IAA8B;EAClC,QAAQ;EAAmB,OAAO;EAAkB,SAAS;EAC7D,SAAS;EAAoB,SAAS;CACxC;CACA,OAAO,EAAI,MAAU,EAAI;AAC3B;AAIA,SAAS,EAAY,EAAE,gBAAqC;CAC1D,OACE,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAkB;EAAW,eAAY;YAC5F,kBAAC,QAAD;GAAM,GAAE;GAAqB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;EAAS,CAAA;CAChH,CAAA;AAET;AAIA,IAAM,IAAc,EAAM,WACxB,SACE,EACE,aACA,YACA,oBACA,MAAM,GACN,iBACA,aAAU,SACV,WAAQ,UACR,UAAO,MACP,cAAW,IACX,cAAc,GACd,mBAAgB,gBAChB,iBACA,iBAAc,SACd,WAAW,IAAgB,WAC3B,iBACA,gBAEF,GACA;CAIA,IAAM,CAAC,GAAM,KAAS,EAAM,cAAc;EACxC,IAAM,CAAC,GAAG,KAAK,EAAc,MAAM,GAAG;EACtC,OAAO,CACL,GACC,MAAM,UAAU,UAAU,MAAM,QAAQ,QAAQ,QAInD;CACF,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAc,EAAe,GAAS,CAAK,GAC3C,IAAU,EAAa,EAAQ,CAAC,MAAU,EAAa,EAAQ,CAAC,QAEhE,IAAe,KAAgB,OAEjC,KAAA,IADA,EAAE,OAAO,OAAO,KAAiB,WAAW,GAAG,EAAa,MAAM,EAAa,GAK7E,IACJ,kBAAC,GAAD;EAAgB,SAAA;YACd,kBAAC,UAAD;GACE,MAAK;GACK;GACV,cAAY;GACZ,WAAW,EACT,uDACA,+DACA,0GACA,iEACA,GACA,EAAY,IACZ,EAAe,EACjB;GACA,OAAO;aAEN,KAAgB,kBAAC,GAAD,CAAc,CAAA;EACzB,CAAA;CACM,CAAA;CAGlB,OACE,kBAAC,GAAD;EAAS,MAAM;EAAwB;YAAvC,CAEE,kBAAC,OAAD;GACO;GACL,MAAK;GACL,cAAY,KAAa,KAAA;GACzB,WAAW,EAAG,wBAAwB,CAAS;aAE/C,kBAAC,OAAD;IACE,WAAW,EACT,6CACA,EAAY,IACZ,MAAY,WAAW,iBACvB,MAAY,aAAa,UAAU,EAAsB,CAAK,GAChE;cANF;KAQG,MAAgB,UACf,kBAAA,GAAA,EAAA,UAAA,CACG,GACD,kBAAC,OAAD,EAAK,WAAW,EAAG,qBAAqB,CAAO,EAAI,CAAA,CACnD,EAAA,CAAA;KAIJ,kBAAC,UAAD;MACE,MAAK;MACI;MACC;MACV,cAAY;MACZ,WAAW,EACT,uFACA,2EACA,uBACA,0GACA,iEACA,GACA,EAAY,IACZ,EAAU,IACV,EAAe,EACjB;MAEC;KACK,CAAA;KAEP,MAAgB,WACf,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD,EAAK,WAAW,EAAG,qBAAqB,CAAO,EAAI,CAAA,GAClD,CACD,EAAA,CAAA;IAED;;EACF,CAAA,GAGJ,KACC,kBAAC,GAAD;GACQ;GACC;GACP,YAAY;GACZ,WAAU;aAET;EACa,CAAA,CAEX;;AAEb,CACF;AAEA,EAAY,cAAc"}
+{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport { type Placement } from '@floating-ui/dom'\nimport { type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\n\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { Popover, PopoverContent, PopoverTrigger } from './popover'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /** @default 'accent' */\n  color?: SplitButtonColor\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: Placement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n  solid: {\n    accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n    warning: 'bg-warning-11/20', info: 'bg-info-11/20', neutral: 'bg-neutral-8/30',\n  },\n  soft: {\n    accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n    warning: 'bg-warning-6', info: 'bg-info-6', neutral: 'bg-surface-border',\n  },\n  outline: {\n    accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n    warning: 'bg-warning-7', info: 'bg-info-7', neutral: 'bg-surface-border-strong',\n  },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-body-sm', sm: 'text-body-sm', md: 'text-body-md',\n  'icon-xs': 'text-body-sm', 'icon-sm': 'text-body-sm', 'icon-md': 'text-body-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-control', sm: 'rounded-control', md: 'rounded-control',\n  'icon-xs': 'rounded-control', 'icon-sm': 'rounded-control', 'icon-md': 'rounded-control',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  const map: Record<SplitButtonVariant, Record<string, string>> = {\n    solid: {\n      accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n      error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n      success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n      warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n      info: 'bg-info-9 text-info-fg hover:bg-info-10 active:bg-info-11',\n      neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n    },\n    soft: {\n      accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n      error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n      success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n      warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n      info: 'bg-info-3 text-info-11 hover:bg-info-4 active:bg-info-5',\n      neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n    },\n    outline: {\n      accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n      error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n      success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n      warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n      info: 'bg-transparent text-info-11 hover:bg-info-3 active:bg-info-4',\n      neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n    },\n  }\n  return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  const map: Record<string, string> = {\n    accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n    warning: 'border-warning-7', info: 'border-info-7', neutral: 'border-surface-border-strong',\n  }\n  return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    // Map the floating-ui `placement` (e.g. 'top-end') to Radix side + align.\n    // Positioning, focus-in/return, outside-click, and Escape all come from the\n    // Popover primitive now — no hand-rolled floating-ui / listeners.\n    const [side, align] = React.useMemo(() => {\n      const [s, a] = placementProp.split('-')\n      return [\n        s as 'top' | 'right' | 'bottom' | 'left',\n        (a === 'start' ? 'start' : a === 'end' ? 'end' : 'center') as\n          | 'start'\n          | 'center'\n          | 'end',\n      ]\n    }, [placementProp])\n\n    const halfClasses = getHalfClasses(variant, color)\n    const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    // Dropdown trigger (the chevron half). PopoverTrigger wires aria-haspopup /\n    // aria-expanded / focus-return for us.\n    const dropdownTrigger = (\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          disabled={disabled}\n          aria-label={dropdownLabel}\n          className={cn(\n            'inline-flex items-center justify-center select-none',\n            'transition-colors duration-fast-01 ease-productive-standard',\n            'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n            'disabled:pointer-events-none disabled:opacity-action-disabled',\n            halfClasses,\n            heightClass[size],\n            triggerPadding[size],\n          )}\n          style={triggerStyle}\n        >\n          {dropdownIcon ?? <ChevronDown />}\n        </button>\n      </PopoverTrigger>\n    )\n\n    return (\n      <Popover open={openProp} onOpenChange={onOpenChange}>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {dropdownTrigger}\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClasses,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {dropdownTrigger}\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Dropdown panel — Popover handles focus, Escape, outside-click, return */}\n        {dropdownContent && (\n          <PopoverContent\n            side={side}\n            align={align}\n            sideOffset={8}\n            className=\"w-auto min-w-[10rem] p-ds-01\"\n          >\n            {dropdownContent}\n          </PopoverContent>\n        )}\n      </Popover>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonColor, SplitButtonSize,SplitButtonVariant }\n"],"mappings":";;;;;;AAoDA,IAAM,IAAmE;CACvE,OAAO;EACL,QAAQ;EAAmB,OAAO;EAAkB,SAAS;EAC7D,SAAS;EAAoB,MAAM;EAAiB,SAAS;CAC/D;CACA,MAAM;EACJ,QAAQ;EAAe,OAAO;EAAc,SAAS;EACrD,SAAS;EAAgB,MAAM;EAAa,SAAS;CACvD;CACA,SAAS;EACP,QAAQ;EAAe,OAAO;EAAc,SAAS;EACrD,SAAS;EAAgB,MAAM;EAAa,SAAS;CACvD;AACF,GAEM,IAA+C;CACnD,IAAI;CAAgB,IAAI;CAAW,IAAI;CACvC,WAAW;CAAgB,WAAW;CAAW,WAAW;AAC9D,GAEM,IAA6C;CACjD,IAAI;CAAgB,IAAI;CAAgB,IAAI;CAC5C,WAAW;CAAgB,WAAW;CAAgB,WAAW;AACnE,GAEM,IAAkD;CACtD,IAAI;CAAkB,IAAI;CAAoB,IAAI;CAClD,WAAW;CAAY,WAAW;CAAY,WAAW;AAC3D,GAEM,IAAkD;CACtD,IAAI;CAAY,IAAI;CAAY,IAAI;CACpC,WAAW;CAAY,WAAW;CAAY,WAAW;AAC3D,GAEM,IAA+C;CACnD,IAAI;CAAmB,IAAI;CAAmB,IAAI;CAClD,WAAW;CAAmB,WAAW;CAAmB,WAAW;AACzE;AAEA,SAAS,EAAe,GAA6B,GAAuB;CAC1E,IAAM,IAA0D;EAC9D,OAAO;GACL,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,SAAS;EACX;EACA,MAAM;GACJ,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,SAAS;EACX;EACA,SAAS;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,SAAS;EACX;CACF;CACA,OAAO,EAAI,EAAQ,CAAC,MAAU,EAAI,EAAQ,CAAC;AAC7C;AAEA,SAAS,EAAsB,GAAuB;CACpD,IAAM,IAA8B;EAClC,QAAQ;EAAmB,OAAO;EAAkB,SAAS;EAC7D,SAAS;EAAoB,MAAM;EAAiB,SAAS;CAC/D;CACA,OAAO,EAAI,MAAU,EAAI;AAC3B;AAIA,SAAS,EAAY,EAAE,gBAAqC;CAC1D,OACE,kBAAC,OAAD;EAAK,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,MAAK;EAAkB;EAAW,eAAY;YAC5F,kBAAC,QAAD;GAAM,GAAE;GAAqB,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;EAAS,CAAA;CAChH,CAAA;AAET;AAIA,IAAM,IAAc,EAAM,WACxB,SACE,EACE,aACA,YACA,oBACA,MAAM,GACN,iBACA,aAAU,SACV,WAAQ,UACR,UAAO,MACP,cAAW,IACX,cAAc,GACd,mBAAgB,gBAChB,iBACA,iBAAc,SACd,WAAW,IAAgB,WAC3B,iBACA,gBAEF,GACA;CAIA,IAAM,CAAC,GAAM,KAAS,EAAM,cAAc;EACxC,IAAM,CAAC,GAAG,KAAK,EAAc,MAAM,GAAG;EACtC,OAAO,CACL,GACC,MAAM,UAAU,UAAU,MAAM,QAAQ,QAAQ,QAInD;CACF,GAAG,CAAC,CAAa,CAAC,GAEZ,IAAc,EAAe,GAAS,CAAK,GAC3C,IAAU,EAAa,EAAQ,CAAC,MAAU,EAAa,EAAQ,CAAC,QAEhE,IAAe,KAAgB,OAEjC,KAAA,IADA,EAAE,OAAO,OAAO,KAAiB,WAAW,GAAG,EAAa,MAAM,EAAa,GAK7E,IACJ,kBAAC,GAAD;EAAgB,SAAA;YACd,kBAAC,UAAD;GACE,MAAK;GACK;GACV,cAAY;GACZ,WAAW,EACT,uDACA,+DACA,0GACA,iEACA,GACA,EAAY,IACZ,EAAe,EACjB;GACA,OAAO;aAEN,KAAgB,kBAAC,GAAD,CAAc,CAAA;EACzB,CAAA;CACM,CAAA;CAGlB,OACE,kBAAC,GAAD;EAAS,MAAM;EAAwB;YAAvC,CAEE,kBAAC,OAAD;GACO;GACL,MAAK;GACL,cAAY,KAAa,KAAA;GACzB,WAAW,EAAG,wBAAwB,CAAS;aAE/C,kBAAC,OAAD;IACE,WAAW,EACT,6CACA,EAAY,IACZ,MAAY,WAAW,iBACvB,MAAY,aAAa,UAAU,EAAsB,CAAK,GAChE;cANF;KAQG,MAAgB,UACf,kBAAA,GAAA,EAAA,UAAA,CACG,GACD,kBAAC,OAAD,EAAK,WAAW,EAAG,qBAAqB,CAAO,EAAI,CAAA,CACnD,EAAA,CAAA;KAIJ,kBAAC,UAAD;MACE,MAAK;MACI;MACC;MACV,cAAY;MACZ,WAAW,EACT,uFACA,2EACA,uBACA,0GACA,iEACA,GACA,EAAY,IACZ,EAAU,IACV,EAAe,EACjB;MAEC;KACK,CAAA;KAEP,MAAgB,WACf,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD,EAAK,WAAW,EAAG,qBAAqB,CAAO,EAAI,CAAA,GAClD,CACD,EAAA,CAAA;IAED;;EACF,CAAA,GAGJ,KACC,kBAAC,GAAD;GACQ;GACC;GACP,YAAY;GACZ,WAAU;aAET;EACa,CAAA,CAEX;;AAEb,CACF;AAEA,EAAY,cAAc"}

package/docs/components/ui/button.md

@@ -6,7 +6,7 @@
 
 ## Props
     variant: "solid" | "soft" | "outline" | "ghost" | "link"
-    color: "accent" | "error" | "success" | "warning" | "neutral"
+    color: "accent" | "error" | "success" | "warning" | "info" | "neutral"
     size: "xs" | "sm" | "md" | "lg" | "compact-xs" | "compact-sm" | "compact-md" | "icon" | "icon-xs" | "icon-sm" | "icon-md" | "icon-lg"
     weight: "semibold" | "normal"
     shape: "default" | "pill"
@@ -17,7 +17,7 @@
     fullWidth: boolean
     asChild: boolean
     processing: boolean | 'ambient' | 'working' | 'urgent' (marching ants SVG border)
-    processingColor: 'accent' | 'error' | 'success' | 'warning' | 'neutral' (override animation color)
+    processingColor: 'accent' | 'error' | 'success' | 'warning' | 'info' | 'neutral' (override animation color)
     processingDisabled: boolean (disable button during processing, default: true)
     onClickAsync: (e: MouseEvent) => Promise<void> (auto loading->success/error->idle, auto-activates processing)
     asyncFeedbackDuration: number (ms, default 1500)

package/docs/components/ui/segmented-control.md

@@ -6,32 +6,37 @@
 
 ## Props
     size: "sm" | "md" | "lg"
-    variant: "default" | "solid"
+    variant: "soft" | "solid"
     options: SegmentedControlOption[] (REQUIRED)
-    selectedId: string (REQUIRED)
-    onSelect: (id: string) => void (REQUIRED)
+    value: string                          // controlled
+    defaultValue: string                   // uncontrolled initial
+    onValueChange: (id: string) => void
     disabled: boolean
+    fullWidth: boolean
+    selectedId: string                     // @deprecated — use value
+    onSelect: (id: string) => void         // @deprecated — use onValueChange
 
 ## Types
-    SegmentedControlOption = { id: string, text: string, icon?: ComponentType<{ className?: string }> }
+    SegmentedControlOption = { id: string, text?: React.ReactNode, icon?: IconInput, ariaLabel?: string }
     SegmentedControlSize = 'sm' | 'md' | 'lg'
-    SegmentedControlVariant = 'default' | 'solid'
+    SegmentedControlVariant = 'soft' | 'solid'
 
 ## Defaults
     size: "md"
-    variant: "default"
+    variant: "soft"
+    fullWidth: false
 
 ## Example
 ```jsx
 <SegmentedControl
   size="md"
-  variant="default"
+  variant="soft"
   options={[
     { id: 'list', text: 'List' },
     { id: 'grid', text: 'Grid' },
   ]}
-  selectedId={viewMode}
-  onSelect={setViewMode}
+  value={viewMode}
+  onValueChange={setViewMode}
 />
 ```
 
@@ -39,15 +44,30 @@
 - **Data-driven, not compound** — unlike Tabs/ToggleGroup, SegmentedControl takes an `options` array rather than children. This makes it easier to render from a list but harder to customize per-option styling; use Tabs if you need compound children.
 - **When to use vs Tabs:** SegmentedControl is for mutually-exclusive VIEW-MODE toggles (List/Grid/Kanban) — short labels, no associated content panel. Tabs is for content switching where each tab has a corresponding TabsContent. SegmentedControl renders `role="radiogroup"` with `role="radio"` segments (a panel-less single-select); Tabs renders `role="tablist"`.
 - **Option icons** auto-size based on the `size` prop — don't set explicit icon sizes.
-- Fully controlled — there's no `defaultSelectedId`. Manage state in parent.
+- **`fullWidth`** switches segments from content-hug (default) to equal-fill: each segment takes an equal share of the container (a 2-item toggle splits 50/50, a 3-item switcher gives each a third). Use for view switchers and toolbar toggles that should fill their column; leave off for compact inline toolbars.
+- **Visual model:** a rounded-rect track (not a full pill) — a translucent recessed groove with a single soft-shadowed sliding thumb. The track has no border/inset shadow; the thumb carries the only edge. Elevation inverts in dark so the groove stays visible.
+- **Controlled or uncontrolled** — pass `value` + `onValueChange` to control it, or `defaultValue` (optional; falls back to the first option) to let it own state. Matches the Tabs/ToggleGroup vocabulary. `selectedId`/`onSelect` are deprecated aliases that still work.
+- **Option labels accept `ReactNode`** — a segment can hold a count badge or custom node, not just a string. `text` is optional: omit it for an **icon-only** segment and set `ariaLabel` so the segment still has an accessible name.
+- **Touch targets** — each segment has a 44px minimum hit area (via `touch-target`) even though the visual height stays dense.
+- **RTL** — Arrow-key navigation tracks reading order: in a right-to-left context `ArrowLeft` moves to the next option and `ArrowRight` to the previous (detected from the nearest `dir` attribute).
 - Built from scratch (no Radix primitive) — standard HTML buttons with `role="radio"` + `aria-checked` and roving tabindex.
 
 ## Gotchas
-- Controlled only — selectedId + onSelect are required
+- Controlled (`value`) or uncontrolled (`defaultValue`) — `selectedId`/`onSelect` are deprecated aliases
 - Uses data-driven API (options prop), not compound children
 - Use Tabs (not SegmentedControl) when you need associated content panels per option
 
 ## Changes
+### v0.52.0
+- **Changed** Visual rebuild — rounded-rect track (was full pill), translucent recessed track with no border/inset, single ring-less soft-shadow thumb. Dark-mode elevation inverts so the groove stays visible. New tokens: `--color-segment-track`, `--color-segment-thumb`, `--shadow-segment`.
+- **Added** `value` / `defaultValue` / `onValueChange` — canonical controlled+uncontrolled API (aligns with Tabs/ToggleGroup).
+- **Added** `fullWidth` prop — segments split the container equally.
+- **Added** 44px minimum touch targets (`touch-target`), keeping dense visual height.
+- **Added** Crisp bounce-free thumb motion (reduced-motion aware) + `motion-safe` press-scale feedback.
+- **Changed** Option `text` widened from `string` to `ReactNode`, and made optional (omit for icon-only segments).
+- **Added** `ariaLabel` per option for icon-only segments; RTL-aware Arrow-key navigation.
+- **Deprecated** `variant="default"` → `variant="soft"`; `selectedId` → `value`; `onSelect` → `onValueChange`. All old names still accepted as aliases; update call sites.
+
 ### v0.38.0
 - **Removed** (BREAKING) deprecated `variant="accent"` alias. Use `variant="solid"`.
 

package/docs/recipes/install-remix.md

@@ -127,10 +127,10 @@ For runtime toggling inside React components, use `useColorMode`:
 import { useColorMode } from "@devalok/shilp-sutra/hooks/use-color-mode";
 
 export function ThemeToggle() {
-  const { mode, toggle } = useColorMode();
+  const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <button onClick={toggle} aria-label="Toggle theme">
-      {mode === "dark" ? "☀" : "☾"}
+    <button onClick={toggleColorMode} aria-label="Toggle theme">
+      {colorMode === "dark" ? "☀" : "☾"}
     </button>
   );
 }

package/docs/recipes/install-vite.md

@@ -121,10 +121,10 @@ Wire the runtime hook from anywhere in the app (e.g., a header button):
 import { useColorMode } from "@devalok/shilp-sutra/hooks/use-color-mode";
 
 export function ThemeToggle() {
-  const { mode, toggle } = useColorMode();
+  const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <button onClick={toggle} aria-label="Toggle theme">
-      {mode === "dark" ? "☀" : "☾"}
+    <button onClick={toggleColorMode} aria-label="Toggle theme">
+      {colorMode === "dark" ? "☀" : "☾"}
     </button>
   );
 }

package/docs/recipes/server-components.md

@@ -151,8 +151,8 @@ Both `<Suspense>` and `<LoadingSkeleton>` are server-safe.
 import { useColorMode } from "@devalok/shilp-sutra/hooks/use-color-mode";
 
 export default function ServerPage() {
-  const { mode } = useColorMode(); // breaks
-  return <div>{mode}</div>;
+  const { colorMode } = useColorMode(); // breaks
+  return <div>{colorMode}</div>;
 }
 ```
 

package/llms.txt

@@ -1,6 +1,6 @@
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.51.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.52.0.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 

package/make-kit/foundations/color.md

@@ -103,6 +103,26 @@ Available as `accent-1` … `accent-12`. Apply via `bg-accent-N`, `text-accent-N
 
 The same 12-step pattern repeats for `error-*`, `success-*`, `warning-*`, `info-*` (subset: 2, 3, 4, 5, 6, 7, 9, 10, 11).
 
+## Component `color` prop — support matrix
+
+The `color` prop accepts a different set per component, because each serves a different job. **The shared intent set — safe to pass to all three from one token — is `accent` · `error` · `success` · `warning` · `info` · `neutral`.**
+
+| color | Button | Card | Badge |
+|---|:---:|:---:|:---:|
+| `accent` | ✅ | ✅ | ✅ |
+| `error` | ✅ | ✅ | ✅ |
+| `success` | ✅ | ✅ | ✅ |
+| `warning` | ✅ | ✅ | ✅ |
+| `info` | ✅ | ✅ | ✅ |
+| `neutral` | ✅ | ✅ | ✅ |
+| `default` | — | ✅ | ✅ |
+| `teal` `amber` `slate` `indigo` `cyan` `orange` `emerald` | — | — | ✅ |
+| `custom` (`--badge-color`) | — | — | ✅ |
+
+- **Button / Card** carry the six **semantic intents** — they communicate *state or emphasis* (a destructive action, a warning panel). That set is aligned across both.
+- **Badge** adds a **category palette** (`teal`, `amber`, `indigo`, …) plus `custom`, because badges label/categorize many peer items where hue is a taxonomy, not a status. Those category hues are intentionally **not** on Button/Card — a "teal primary button" would read as an intent that doesn't exist.
+- To tint a Card + Badge + Button set from one variable, constrain the token to the shared intent set above.
+
 ## Theming — never hardcode
 
 Consumers swap the accent by overriding `--color-accent-1` through `--color-accent-12` in a `:root { }` block placed **after** the kit's CSS import. Dark mode is derived algorithmically — no separate dark overrides needed.

package/make-kit/foundations/dark-mode.md

@@ -18,17 +18,14 @@ Dark tokens are **algorithmically derived** from the OKLCH primitives, not hand-
 import { useColorMode } from '@devalok/shilp-sutra/hooks/use-color-mode'
 
 function ThemeToggle() {
-  const { mode, resolvedMode, setMode } = useColorMode()
-  // mode: 'light' | 'dark' | 'system'
-  // resolvedMode: 'light' | 'dark' (after resolving 'system')
+  const { colorMode, setColorMode, toggleColorMode } = useColorMode()
+  // colorMode: 'light' | 'dark' | 'system'
+  // setColorMode(next): set an explicit mode  ·  toggleColorMode(): flip light↔dark
 
   return (
-    <Button
-      variant="soft"
-      onClick={() => setMode(resolvedMode === 'dark' ? 'light' : 'dark')}
-    >
-      <Icon icon={resolvedMode === 'dark' ? IconSun : IconMoon} />
-      {resolvedMode === 'dark' ? 'Light' : 'Dark'}
+    <Button variant="soft" onClick={toggleColorMode}>
+      <Icon icon={colorMode === 'dark' ? IconSun : IconMoon} />
+      {colorMode === 'dark' ? 'Light' : 'Dark'}
     </Button>
   )
 }

package/make-kit/foundations/icons.md

@@ -17,7 +17,7 @@ import { Icon } from '@devalok/shilp-sutra/ui/icon'
 import { IconHome, IconUser, IconSettings } from '@tabler/icons-react'
 
 <Icon icon={IconHome} />
-<Icon icon={IconUser} size={20} />
+<Icon icon={IconUser} size="lg" />
 <Icon icon={IconSettings} className="text-fg-muted" />
 ```
 
@@ -55,7 +55,7 @@ Don't add `className="h-4 w-4"` on every Icon. Wrap a subtree:
 ```tsx
 import { IconProvider } from '@devalok/shilp-sutra/ui/icon-context'
 
-<IconProvider size={16}>
+<IconProvider size="sm">
   <NavSection>
     <Icon icon={IconHome} />
     <Icon icon={IconUser} />
@@ -64,7 +64,7 @@ import { IconProvider } from '@devalok/shilp-sutra/ui/icon-context'
 </IconProvider>
 ```
 
-Override per-icon with `<Icon icon={...} size={24} />`.
+Override per-icon with `<Icon icon={...} size="xl" />`.
 
 Default sizes by component context:
 

package/make-kit/setup.md

@@ -53,7 +53,7 @@ import { IconProvider } from '@devalok/shilp-sutra/ui/icon-context'
 export default function App({ children }) {
   return (
     <MotionProvider reducedMotion="user">
-      <IconProvider size={16}>
+      <IconProvider size="sm">
         {children}
         <Toaster />
       </IconProvider>
@@ -63,7 +63,7 @@ export default function App({ children }) {
 ```
 
 - `MotionProvider` — required. `reducedMotion="user"` respects OS preference. Without this provider, motion primitives still work but reduced-motion is ignored.
-- `IconProvider` — optional but recommended. Sets default icon size for all `<Icon>` children. Override per-call with `<Icon size={20} />`.
+- `IconProvider` — optional but recommended. Sets default icon size for all `<Icon>` children. Size is a tier (`"xs" | "sm" | "md" | "lg" | "xl" | "2xl"`), not a pixel number. Override per-call with `<Icon size="lg" />`.
 - `Toaster` — only needed if the app calls `toast(...)`. Mount exactly once.
 
 ## Dark mode toggle
@@ -74,9 +74,9 @@ Add the `.dark` class on `<html>` or `<body>` to flip the entire token system to
 import { useColorMode } from '@devalok/shilp-sutra/hooks/use-color-mode'
 
 function ThemeToggle() {
-  const { mode, setMode } = useColorMode() // 'light' | 'dark' | 'system'
+  const { colorMode, setColorMode } = useColorMode() // 'light' | 'dark' | 'system'
   return (
-    <Button onClick={() => setMode(mode === 'dark' ? 'light' : 'dark')}>
+    <Button onClick={() => setColorMode(colorMode === 'dark' ? 'light' : 'dark')}>
       Toggle theme
     </Button>
   )

package/mcp-manifest.json

@@ -2,7 +2,7 @@
   "$schema": "./mcp-manifest.schema.json",
   "manifestVersion": "1.2.0",
   "package": "@devalok/shilp-sutra",
-  "packageVersion": "0.51.0",
+  "packageVersion": "0.52.0",
   "components": {
     "accordion": {
       "displayName": "Accordion",
@@ -1192,6 +1192,7 @@
               "error",
               "success",
               "warning",
+              "info",
               "neutral"
             ]
           },
@@ -1302,6 +1303,7 @@
               "error",
               "success",
               "warning",
+              "info",
               "neutral"
             ]
           },
@@ -5250,7 +5252,7 @@
           "type": {
             "name": "enum",
             "value": [
-              "default",
+              "soft",
               "solid"
             ]
           },
@@ -5263,16 +5265,24 @@
           },
           "required": true
         },
-        "selectedId": {
+        "value": {
           "type": {
-            "name": "string"
+            "name": "object",
+            "raw": "string                          // controlled"
           },
-          "required": true
+          "required": false
         },
-        "onSelect": {
+        "defaultValue": {
+          "type": {
+            "name": "object",
+            "raw": "string                   // uncontrolled initial"
+          },
+          "required": false
+        },
+        "onValueChange": {
           "type": {
             "name": "function",
-            "raw": "(id: string) => void (REQUIRED)"
+            "raw": "(id: string) => void"
           },
           "required": false
         },
@@ -5281,6 +5291,26 @@
             "name": "boolean"
           },
           "required": false
+        },
+        "fullWidth": {
+          "type": {
+            "name": "boolean"
+          },
+          "required": false
+        },
+        "selectedId": {
+          "type": {
+            "name": "object",
+            "raw": "string                     // @deprecated — use value"
+          },
+          "required": false
+        },
+        "onSelect": {
+          "type": {
+            "name": "function",
+            "raw": "(id: string) => void         // @deprecated — use onValueChange"
+          },
+          "required": false
         }
       },
       "composition": {
@@ -5288,20 +5318,29 @@
           "**Data-driven, not compound** — unlike Tabs/ToggleGroup, SegmentedControl takes an `options` array rather than children. This makes it easier to render from a list but harder to customize per-option styling; use Tabs if you need compound children.",
           "**When to use vs Tabs:** SegmentedControl is for mutually-exclusive VIEW-MODE toggles (List/Grid/Kanban) — short labels, no associated content panel. Tabs is for content switching where each tab has a corresponding TabsContent. SegmentedControl renders `role=\"radiogroup\"` with `role=\"radio\"` segments (a panel-less single-select); Tabs renders `role=\"tablist\"`.",
           "**Option icons** auto-size based on the `size` prop — don't set explicit icon sizes.",
-          "Fully controlled — there's no `defaultSelectedId`. Manage state in parent.",
+          "**`fullWidth`** switches segments from content-hug (default) to equal-fill: each segment takes an equal share of the container (a 2-item toggle splits 50/50, a 3-item switcher gives each a third). Use for view switchers and toolbar toggles that should fill their column; leave off for compact inline toolbars.",
+          "**Visual model:** a rounded-rect track (not a full pill) — a translucent recessed groove with a single soft-shadowed sliding thumb. The track has no border/inset shadow; the thumb carries the only edge. Elevation inverts in dark so the groove stays visible.",
+          "**Controlled or uncontrolled** — pass `value` + `onValueChange` to control it, or `defaultValue` (optional; falls back to the first option) to let it own state. Matches the Tabs/ToggleGroup vocabulary. `selectedId`/`onSelect` are deprecated aliases that still work.",
+          "**Option labels accept `ReactNode`** — a segment can hold a count badge or custom node, not just a string. `text` is optional: omit it for an **icon-only** segment and set `ariaLabel` so the segment still has an accessible name.",
+          "**Touch targets** — each segment has a 44px minimum hit area (via `touch-target`) even though the visual height stays dense.",
+          "**RTL** — Arrow-key navigation tracks reading order: in a right-to-left context `ArrowLeft` moves to the next option and `ArrowRight` to the previous (detected from the nearest `dir` attribute).",
           "Built from scratch (no Radix primitive) — standard HTML buttons with `role=\"radio\"` + `aria-checked` and roving tabindex."
         ]
       },
       "docPath": "docs/components/ui/segmented-control.md",
       "examples": [
-        "<SegmentedControl\n  size=\"md\"\n  variant=\"default\"\n  options={[\n    { id: 'list', text: 'List' },\n    { id: 'grid', text: 'Grid' },\n  ]}\n  selectedId={viewMode}\n  onSelect={setViewMode}\n/>"
+        "<SegmentedControl\n  size=\"md\"\n  variant=\"soft\"\n  options={[\n    { id: 'list', text: 'List' },\n    { id: 'grid', text: 'Grid' },\n  ]}\n  value={viewMode}\n  onValueChange={setViewMode}\n/>"
       ],
       "gotchas": [
-        "Controlled only — selectedId + onSelect are required",
+        "Controlled (`value`) or uncontrolled (`defaultValue`) — `selectedId`/`onSelect` are deprecated aliases",
         "Uses data-driven API (options prop), not compound children",
         "Use Tabs (not SegmentedControl) when you need associated content panels per option"
       ],
       "changes": [
+        {
+          "version": "0.52.0",
+          "summary": "**Changed** Visual rebuild — rounded-rect track (was full pill), translucent recessed track with no border/inset, single ring-less soft-shadow thumb. Dark-mode elevation inverts so the groove stays visible. New tokens: `--color-segment-track`, `--color-segment-thumb`, `--shadow-segment`."
+        },
         {
           "version": "0.38.0",
           "summary": "**Removed** (BREAKING) deprecated `variant=\"accent\"` alias. Use `variant=\"solid\"`."
@@ -13279,6 +13318,14 @@
         "name": "--color-backdrop",
         "value": "Canvas"
       },
+      {
+        "name": "--color-segment-track",
+        "value": "color-mix(in oklch, oklch(1 0 0) 7%, transparent)"
+      },
+      {
+        "name": "--color-segment-thumb",
+        "value": "var(--neutral-3)"
+      },
       {
         "name": "--color-overlay",
         "value": "Canvas"
@@ -13933,6 +13980,10 @@
         "name": "--shadow-raised-hover",
         "value": "var(--shadow-sm-internal)"
       },
+      {
+        "name": "--shadow-segment",
+        "value": "0 1px 2px -0.5px oklch(var(--shadow-color) / calc(0.10 * var(--shadow-strength))), 0 3px 8px -2px oklch(var(--shadow-color) / calc(0.09 * var(--shadow-strength)))"
+      },
       {
         "name": "--shadow-floating",
         "value": "var(--shadow-md-internal)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.51.0",
+  "version": "0.52.0",
   "description": "Devalok Design System — accessible React components, OKLCH design tokens, and Tailwind 4 CSS-first setup. Ships with AI-agent setup recipes.",
   "license": "MIT",
   "author": "Devalok Design & Strategy Studios <shilp-sutra@devalok.in>",

package/scripts/welcome.mjs

@@ -183,7 +183,7 @@ function buildFullBanner(version, prevVersion) {
   lines.push(row(`     ${colour('https://shilp-sutra.devalok.in/themer', DIM)}`))
   lines.push(colour(EMPTY, PINK_DIM))
   lines.push(row(`   ${colour('▸', PINK)} Wire your AI agent (Claude Code / Cursor / Codex):`))
-  lines.push(row(`     ${colour('connect the live docs MCP → https://shilp-sutra.devalok.in/mcp', DIM)}`))
+  lines.push(row(`     ${colour('live docs MCP added to .mcp.json — approve it to enable', DIM)}`))
   lines.push(row(`     ${colour('(version-exact setup + peer preflight; beats guessing)', DIM)}`))
   lines.push(row(`     ${colour('or copy the skill: cp -r node_modules/@devalok/shilp-sutra/skill \\', DIM)}`))
   lines.push(row(`        ${colour('~/.claude/skills/shilp-sutra', DIM)}`))
@@ -215,6 +215,59 @@ function buildCompactBanner(version, prevVersion) {
   ].join('\n')
 }
 
+// ── MCP auto-discovery ───────────────────────────────────────────────────────
+// Write a project-scoped `.mcp.json` pointing at the hosted docs MCP so an AI
+// coding agent DISCOVERS it right after install. This runs even when stdout is
+// piped (unlike the banner) — a config file is not console noise, and the agent
+// that just ran `install` is exactly who should find it. It is never silent-
+// forced: Claude Code (and peers) still PROMPT the user to approve a project
+// MCP server before enabling it. Safety: additive merge (never clobbers other
+// servers or an existing shilp-sutra entry), skips CI and dev installs, honours
+// opt-out, and a write-once sentinel so a user who deletes it is not re-nagged.
+const SEP = process.platform === 'win32' ? '\\' : '/'
+const MCP_URL = 'https://shilp-sutra.devalok.in/mcp'
+
+function tryWriteMcpConfig() {
+  try {
+    if (process.env.SHILP_SUTRA_NO_WELCOME === '1' || process.env.SHILP_SUTRA_NO_WELCOME === 'true') return
+    if (process.env.SHILP_SUTRA_NO_MCP === '1' || process.env.SHILP_SUTRA_NO_MCP === 'true') return
+    if (process.env.CI) return // writing agent config into a CI checkout is pointless/unwanted
+
+    const initCwd = process.env.INIT_CWD
+    const cwd = process.cwd()
+    const isInsideNodeModules = cwd.includes(`${SEP}node_modules${SEP}`) || cwd.includes('/node_modules/')
+    if (!isInsideNodeModules) return // dev install inside the DS repo itself
+    if (!initCwd || initCwd === cwd) return // no consumer root → unusual context
+
+    // Write-once-ever sentinel (survives re-installs; respects user deletion of .mcp.json)
+    const parts = PKG_DIR.split(/[/\\]/)
+    const nmIdx = parts.lastIndexOf('node_modules')
+    const sentinel = nmIdx === -1 ? null : join(parts.slice(0, nmIdx + 1).join(SEP), '.shilp-sutra-mcp-written')
+    if (sentinel && existsSync(sentinel)) return
+
+    const target = join(initCwd, '.mcp.json')
+    let config = { mcpServers: {} }
+    if (existsSync(target)) {
+      try {
+        config = JSON.parse(readFileSync(target, 'utf-8'))
+      } catch {
+        return // existing but unparseable — never clobber a hand-authored config
+      }
+      if (!config || typeof config !== 'object') return
+      if (!config.mcpServers || typeof config.mcpServers !== 'object') config.mcpServers = {}
+      if (config.mcpServers['shilp-sutra']) {
+        if (sentinel) writeFileSync(sentinel, MCP_URL + '\n')
+        return // already declared — leave the consumer's version untouched
+      }
+    }
+    config.mcpServers['shilp-sutra'] = { type: 'http', url: MCP_URL }
+    writeFileSync(target, JSON.stringify(config, null, 2) + '\n')
+    if (sentinel) writeFileSync(sentinel, MCP_URL + '\n')
+  } catch {
+    // Never break the consumer install — a failed config write is a no-op.
+  }
+}
+
 // ── Main ────────────────────────────────────────────────────────────────────
 function main() {
   // --preview / --compact bypass all guards. Used by maintainers + by the
@@ -223,6 +276,11 @@ function main() {
   const preview = process.argv.includes('--preview')
   const forceCompact = process.argv.includes('--compact')
 
+  // MCP auto-discovery runs regardless of TTY — an agent-run (piped) install is
+  // precisely when the agent should discover the docs MCP. Must come before the
+  // TTY skip below, which only governs the human-facing banner.
+  if (!preview) tryWriteMcpConfig()
+
   if (!preview) {
     const skipReason = shouldSkip()
     if (skipReason) return // silent

package/skill/SKILL.md

@@ -3,7 +3,7 @@ name: shilp-sutra
 description: Add, configure, and use components from Devalok's shilp-sutra design system (@devalok/shilp-sutra) — a Tailwind 4 + React 19 + CVA library with 110+ accessible components, OKLCH design tokens, framer-motion animations, and per-component RSC-safe entry points. Use this skill whenever the user mentions shilp-sutra, Devalok, the @devalok npm scope, or asks to install/add/style/theme UI in any React project that already depends on the package — even if they don't name it explicitly. Use it instead of generic shadcn/ui, MUI, or Chakra knowledge when shilp-sutra is in the project. Covers Next.js (App + Pages), Vite, Astro, Remix, TanStack Start setup playbooks; component API and variant reference; brand token customization; Server Component import patterns; and a troubleshoot tree for the thirteen most common breakages.
 license: MIT
 metadata:
-  version: "0.51.0"
+  version: "0.52.0"
   author: Devalok Design & Strategy Studios
   homepage: https://github.com/devalok-design/shilp-sutra
   npm: https://www.npmjs.com/package/@devalok/shilp-sutra

package/skill/references/components.md

@@ -2,7 +2,7 @@
 
 # @devalok/shilp-sutra
 
-> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.51.0.
+> Radix UI + Tailwind 4 (CSS-first) + CVA design system for Devalok apps, v0.52.0.
 > Built on the same primitives as shadcn/ui but with DIFFERENT prop APIs — never guess from shadcn knowledge; verify every prop.
 > This file is a ROUTER: it tells you what exists and where to get details. Do not look for prop tables here — fetch them per component (MCP tool or per-component doc file below).
 

package/skill/references/server-components.md

@@ -153,8 +153,8 @@ Both `<Suspense>` and `<LoadingSkeleton>` are server-safe.
 import { useColorMode } from "@devalok/shilp-sutra/hooks/use-color-mode";
 
 export default function ServerPage() {
-  const { mode } = useColorMode(); // breaks
-  return <div>{mode}</div>;
+  const { colorMode } = useColorMode(); // breaks
+  return <div>{colorMode}</div>;
 }
 ```
 

package/skill/references/setup-remix.md

@@ -129,10 +129,10 @@ For runtime toggling inside React components, use `useColorMode`:
 import { useColorMode } from "@devalok/shilp-sutra/hooks/use-color-mode";
 
 export function ThemeToggle() {
-  const { mode, toggle } = useColorMode();
+  const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <button onClick={toggle} aria-label="Toggle theme">
-      {mode === "dark" ? "☀" : "☾"}
+    <button onClick={toggleColorMode} aria-label="Toggle theme">
+      {colorMode === "dark" ? "☀" : "☾"}
     </button>
   );
 }