{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "split-button",
  "title": "SplitButton",
  "description": "The common action, with alternatives in a menu.",
  "registryDependencies": [
    "https://creance.pages.dev/r/button.json",
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/menu.json"
  ],
  "files": [
    {
      "path": "split-button/SplitButton.css",
      "content": ".cr-split-button {\n  display: inline-flex;\n  /* Keep its own height when a grid or flex parent would stretch it. */\n  align-self: flex-start;\n  border-radius: var(--cr-radius-full);\n}\n\n.cr-split-button[data-variant='primary'] {\n  box-shadow: var(--cr-shadow-accent);\n}\n\n.cr-split-button .cr-button {\n  box-shadow: none;\n}\n\n.cr-split-button__main {\n  padding-inline-end: var(--cr-space-4);\n  border-start-end-radius: 0;\n  border-end-end-radius: 0;\n}\n\n.cr-split-button__arrow {\n  min-width: 42px;\n  padding: 0;\n  border-inline-start: 1px solid var(--cr-color-border-default);\n  border-start-start-radius: 0;\n  border-end-start-radius: 0;\n}\n\n.cr-split-button[data-variant='primary'] .cr-split-button__arrow {\n  border-inline-start-color: var(--cr-color-glass-edge);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/split-button/SplitButton.css"
    },
    {
      "path": "split-button/SplitButton.tsx",
      "content": "import type { ReactNode } from 'react';\nimport { Button, type ButtonProps } from '@/components/creance/button/Button';\nimport { cx } from '@/lib/creance/cx';\nimport { ChevronDownIcon } from '@/lib/creance/icons';\nimport { Menu, MenuContent, MenuTrigger } from '@/components/creance/menu/Menu';\nimport './SplitButton.css';\n\nexport interface SplitButtonProps extends Omit<ButtonProps, 'children'> {\n  /** The main action. */\n  children: ReactNode;\n  /** `MenuItem`s for the other ways to do it. */\n  menu: ReactNode;\n  /** Accessible name of the arrow: \"More ways to hand off\". */\n  menuLabel: string;\n}\n\n/** The common action, with related alternatives one click away in a menu. */\nexport function SplitButton({ children, menu, menuLabel, variant = 'primary', size, className, ...props }: SplitButtonProps) {\n  return (\n    <span className={cx('cr-split-button', className)} data-variant={variant}>\n      <Button variant={variant} size={size} className=\"cr-split-button__main\" {...props}>\n        {children}\n      </Button>\n      <Menu>\n        <MenuTrigger asChild>\n          <Button variant={variant} size={size} className=\"cr-split-button__arrow\" aria-label={menuLabel}>\n            <ChevronDownIcon />\n          </Button>\n        </MenuTrigger>\n        <MenuContent align=\"end\">{menu}</MenuContent>\n      </Menu>\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/split-button/SplitButton.tsx"
    }
  ],
  "categories": [
    "molecule",
    "actions"
  ],
  "type": "registry:ui"
}