{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-row",
  "type": "registry:ui",
  "title": "ButtonRow",
  "description": "Side-by-side buttons that share a row and stack full-width when they no longer fit.",
  "categories": [
    "actions",
    "layout"
  ],
  "registryDependencies": [
    "https://whiskeyjack.net/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/button-row.tsx",
      "type": "registry:ui",
      "target": "components/ui/button-row.tsx",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface ButtonRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Minimum width each button keeps before the row wraps to a stack.\n   * Once two buttons can no longer sit side by side at this floor they wrap,\n   * each taking the full row width on its own line. Default `140px`.\n   */\n  minItemWidth?: string;\n}\n\n/**\n * Lays buttons in a horizontal row that WRAPS to a stack when they no longer\n * fit. Each child grows equally (`flex-1`) down to a `minItemWidth` floor; below\n * that the buttons stack one beneath the other, each full width. Pair with the\n * Button component, whose labels wrap to two lines rather than overflow -- so a\n * single long (e.g. translated) label breaks inside its pill while the row\n * itself only stacks when the buttons genuinely cannot share a line.\n *\n * Drop-in replacement for the hand-rolled `flex flex-wrap gap-3` +\n * `flex-1 min-w-[140px]` idiom: just wrap the buttons. Tune the wrap point for\n * the whole row with `minItemWidth` (raise it to make the buttons stack sooner\n * so labels stay on one line).\n *\n * @example\n * ```tsx\n * <ButtonRow>\n *   <Button variant=\"secondary\" onClick={onImport}>{t('settings.import')}</Button>\n *   <Button variant=\"secondary\" onClick={onExport}>{t('settings.export')}</Button>\n * </ButtonRow>\n * ```\n */\nconst ButtonRow = React.forwardRef<HTMLDivElement, ButtonRowProps>(\n  ({ className, children, minItemWidth = \"140px\", ...props }, ref) => (\n    <div ref={ref} className={cn(\"flex flex-wrap gap-3\", className)} {...props}>\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child)\n          ? React.cloneElement(\n              child as React.ReactElement<{ className?: string; style?: React.CSSProperties }>,\n              {\n                className: cn(\"flex-1\", (child.props as { className?: string }).className),\n                style: {\n                  minWidth: minItemWidth,\n                  ...((child.props as { style?: React.CSSProperties }).style ?? {}),\n                },\n              }\n            )\n          : child\n      )}\n    </div>\n  )\n);\nButtonRow.displayName = \"ButtonRow\";\n\nexport { ButtonRow };\n"
    }
  ],
  "docs": "Wrap side-by-side button pairs in ButtonRow instead of hand-rolling flex flex-wrap with a min-width floor. Each child grows equally down to minItemWidth (140px by default), then stacks. Raise minItemWidth to stack sooner and keep labels on one line.",
  "meta": {
    "group": "actions",
    "related": [
      "button"
    ],
    "exports": [
      "ButtonRow"
    ],
    "siteSlug": "button-row"
  }
}