{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "load-more-button",
  "title": "LoadMoreButton",
  "description": "A full-width button under a list that says when it is loading.",
  "registryDependencies": [
    "https://creance.pages.dev/r/button.json",
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/spinner.json"
  ],
  "files": [
    {
      "path": "load-more-button/LoadMoreButton.css",
      "content": ".cr-load-more {\n  width: 100%;\n}\n\n.cr-load-more[aria-busy='true'] {\n  cursor: progress;\n  opacity: 0.7;\n}\n",
      "type": "registry:file",
      "target": "@components/creance/load-more-button/LoadMoreButton.css"
    },
    {
      "path": "load-more-button/LoadMoreButton.tsx",
      "content": "'use client';\n\nimport { forwardRef } from 'react';\nimport { Button, type ButtonProps } from '@/components/creance/button/Button';\nimport { Spinner } from '@/components/creance/spinner/Spinner';\nimport { cx } from '@/lib/creance/cx';\nimport './LoadMoreButton.css';\n\nexport interface LoadMoreButtonProps extends ButtonProps {\n  loading?: boolean;\n  /** Shown while loading. Default \"Loading\". */\n  loadingLabel?: string;\n}\n\n/**\n * A full-width button under a list. While loading it stays focused and says so, so keyboard users\n * keep their place; move focus to the first new item yourself if that suits the list better.\n */\nexport const LoadMoreButton = forwardRef<HTMLButtonElement, LoadMoreButtonProps>(function LoadMoreButton(\n  { loading, loadingLabel = 'Loading', children = 'Load more', className, onClick, ...props },\n  ref,\n) {\n  return (\n    <Button\n      ref={ref}\n      className={cx('cr-load-more', className)}\n      aria-busy={loading || undefined}\n      aria-disabled={loading || undefined}\n      onClick={(e) => !loading && onClick?.(e)}\n      {...props}\n    >\n      {loading ? (\n        <>\n          <Spinner size=\"sm\" />\n          {loadingLabel}\n        </>\n      ) : (\n        children\n      )}\n    </Button>\n  );\n});\n",
      "type": "registry:ui",
      "target": "@components/creance/load-more-button/LoadMoreButton.tsx"
    }
  ],
  "categories": [
    "molecule",
    "actions"
  ],
  "type": "registry:ui"
}