{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "core-step-division-selector",
  "type": "registry:ui",
  "title": "Step Division Selector",
  "description": "A compact controlled dropdown for rhythmic step divisions, styled by the UI kit theme variables.",
  "dependencies": [
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/step-division-selector.tsx",
      "content": "/**\n * Source: https://maru.audio/ui-kit/step-division-selector\n * Copyright © [Maru](https://maru.audio)\n *\n * Maru UI Kit — https://maru.audio/ui-kit\n *\n * Installed from the Maru UI registry. This file is yours now: edit it\n * freely, it will not be overwritten unless you re-run the add command.\n *\n * Keep this item’s companion files and CSS imports together. Dependencies\n * declared by the registry are installed with the source.\n */\nimport type { CSSProperties } from \"react\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport interface StepDivisionOption {\n  readonly label: string\n  readonly value: string | number\n  readonly description?: string\n}\n\nexport interface StepDivisionSelectorProps {\n  value: string | number\n  options: readonly StepDivisionOption[]\n  onValueChange?: (value: string) => void\n  label?: string\n  showLabel?: boolean\n  /** Surface the selected option's musical consequence beside the fraction,\n   * for example \"16 steps / bar\". */\n  showDescription?: boolean\n  disabled?: boolean\n  compact?: boolean\n  className?: string\n  style?: CSSProperties\n  \"aria-label\"?: string\n}\n\n/**\n * Compact, controlled rhythmic-division dropdown for step sequencers.\n *\n * It deliberately uses the platform select element: the menu stays accessible\n * and compact in rack faces, while the trigger follows the UI kit's skin\n * variables. Hosts own the value and the musical meaning of each option.\n */\nexport function StepDivisionSelector({\n  value,\n  options,\n  onValueChange,\n  label = \"Division\",\n  showLabel = true,\n  showDescription = false,\n  disabled = false,\n  compact = true,\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Step division\",\n}: StepDivisionSelectorProps) {\n  const selected = options.find(\n    (option) => String(option.value) === String(value)\n  )\n  return (\n    <label\n      className={twMerge(\n        \"inline-flex items-center rounded-md border border-[var(--uikit-border,rgba(255,255,255,0.14))] bg-[var(--uikit-track,rgba(0,0,0,0.22))] text-[var(--uikit-text,#eef0f2)]\",\n        compact ? \"gap-2 px-2 py-1\" : \"flex-col items-start gap-1 px-2.5 py-2\",\n        className\n      )}\n      style={style}\n    >\n      {showLabel ? (\n        <span className=\"text-[10px] font-semibold tracking-[0.1em] text-[var(--uikit-text-muted,rgba(238,240,242,0.58))] uppercase\">\n          {label}\n        </span>\n      ) : null}\n      <select\n        aria-label={ariaLabel}\n        value={String(value)}\n        disabled={disabled || !onValueChange}\n        onChange={(event) => onValueChange?.(event.currentTarget.value)}\n        className=\"min-w-16 cursor-pointer appearance-auto rounded border border-[var(--uikit-border,rgba(255,255,255,0.14))] bg-[var(--uikit-surface,#171a1c)] px-1.5 py-1 font-mono text-[11px] text-[var(--uikit-text,#eef0f2)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--uikit-accent,#34d399)] disabled:cursor-default disabled:opacity-60\"\n      >\n        {options.map((option) => (\n          <option key={String(option.value)} value={String(option.value)}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n      {showDescription && selected?.description ? (\n        <span className=\"font-mono text-[9px] whitespace-nowrap text-[var(--uikit-text-muted,rgba(238,240,242,0.58))]\">\n          {selected.description}\n        </span>\n      ) : null}\n    </label>\n  )\n}\n",
      "type": "registry:component",
      "target": "@ui/step-division-selector.tsx"
    }
  ]
}