{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flow-button",
  "title": "Flow Button",
  "description": "Flow button primitives.",
  "registryDependencies": [
    "@circle-ui/button",
    "@circle-ui/progress-bar",
    "@circle-ui/utils"
  ],
  "files": [
    {
      "path": "registry/berlin/blocks/flow.tsx",
      "content": "// Generated from packages/ui/src/components/flow.tsx\nimport * as React from \"react\";\n\nimport { cn } from \"@/registry/berlin/lib/utils\";\nimport { Button, type ButtonProps } from \"@/registry/berlin/circle-ui/button\";\nimport { ProgressBar } from \"@/registry/berlin/circle-ui/progress-bar\";\n\nfunction CaretLeftIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"m10 3-5 5 5 5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"m4 4 8 8m0-8-8 8\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction CaretRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"m6 3 5 5-5 5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"m3.5 8 2.5 2.5L12.5 4\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport function FlowWrapper({ children }: { children: React.ReactNode }) {\n  return <div className=\"w-full\">{children}</div>;\n}\n\nexport function FlowContainer({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"mx-auto flex w-full max-w-[480px] items-center\">\n      {children}\n    </div>\n  );\n}\n\nexport function ResponsiveButtonContainer({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex w-full flex-col gap-2 bg-[var(--flow-actions-scrim)] px-6 pb-6 pt-16 min-[481px]:bg-[var(--flow-actions-scrim-wide)] min-[481px]:pb-32\">\n      {children}\n    </div>\n  );\n}\n\nexport function FlowActionButton({ className, ...props }: ButtonProps) {\n  return (\n    <Button\n      block\n      className={cn(\n        \"h-14 rounded-full px-8 py-4 text-[16px] leading-6 tracking-[-0.16px]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function FlowActions({ children }: { children: React.ReactNode }) {\n  return (\n    <FlowWrapper>\n      <FlowContainer>\n        <ResponsiveButtonContainer>{children}</ResponsiveButtonContainer>\n      </FlowContainer>\n    </FlowWrapper>\n  );\n}\n\nexport function FlowActionContinue(props: ButtonProps) {\n  return (\n    <FlowActions>\n      <FlowActionButton {...props}>Continue</FlowActionButton>\n    </FlowActions>\n  );\n}\n\nexport function FlowProgress({ progress }: { progress: number }) {\n  return (\n    <div className=\"w-full p-4\">\n      <ProgressBar progress={progress} />\n    </div>\n  );\n}\n\nexport function FlowHeadButton(props: ButtonProps) {\n  const {\n    className,\n    leftIcon: LeftIcon,\n    rightIcon: RightIcon,\n    children,\n    type = \"button\",\n    loading,\n    variant: _variant,\n    size: _size,\n    theme: _theme,\n    block: _block,\n    asChild: _asChild,\n    url: _url,\n    ...buttonProps\n  } = props;\n\n  return (\n    <button\n      type={type}\n      aria-label={props[\"aria-label\"] ?? \"Flow control\"}\n      className={cn(\n        \"flex size-14 shrink-0 items-center justify-center p-4 transition-colors\",\n        \"focus-visible:outline-none focus-visible:text-primary disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      disabled={buttonProps.disabled || loading}\n      {...buttonProps}\n    >\n      {LeftIcon ? <LeftIcon className=\"size-6\" /> : null}\n      {!LeftIcon && RightIcon ? <RightIcon className=\"size-6\" /> : null}\n      {!LeftIcon && !RightIcon ? children : null}\n    </button>\n  );\n}\n\nexport interface FlowHeadProps {\n  progress: number;\n  children?: React.ReactNode;\n  onCloseClick: () => void;\n  onBackClick: () => void;\n}\n\nexport function FlowHead({\n  progress,\n  children,\n  onCloseClick,\n  onBackClick,\n}: FlowHeadProps) {\n  return (\n    <FlowWrapper>\n      <FlowContainer>\n        <FlowHeadButton leftIcon={CaretLeftIcon} onClick={onBackClick} />\n        <FlowProgress progress={progress} />\n        {children ?? (\n          <FlowHeadButton leftIcon={CloseIcon} onClick={onCloseClick} />\n        )}\n      </FlowContainer>\n    </FlowWrapper>\n  );\n}\n\nexport interface OptionButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  \"type\" | \"onClick\" | \"onSelect\"\n> {\n  className?: string;\n  optionType?: \"option\" | \"singleOption\";\n  selected?: boolean;\n  onSelect?: (selected: boolean) => void;\n  onSelectAndContinue?: () => void;\n  value?: string | number;\n  label?: string;\n  subline?: string;\n  info?: string;\n  children?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport function OptionButton({\n  className,\n  optionType = \"option\",\n  selected = false,\n  onSelect,\n  onSelectAndContinue,\n  value,\n  label,\n  subline,\n  info,\n  children,\n  disabled = false,\n  ...props\n}: OptionButtonProps) {\n  function handleClick() {\n    if (disabled) return;\n    if (optionType === \"singleOption\") {\n      if (!selected) {\n        onSelect?.(true);\n        onSelectAndContinue?.();\n      }\n      return;\n    }\n    onSelect?.(!selected);\n  }\n\n  const isInteractive = !disabled;\n  const isActive = isInteractive && selected;\n  const cardClassName = cn(\n    \"flex h-[72px] w-full items-center gap-4 rounded-xl bg-card px-4 text-left transition-[border-color,box-shadow,opacity]\",\n    isActive ? \"border-2 border-primary\" : \"border\",\n    isInteractive &&\n      \"focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary\",\n    disabled && \"cursor-not-allowed opacity-50\",\n    className,\n  );\n  const labelContent = label ?? children;\n\n  return (\n    <button\n      type=\"button\"\n      data-selected={selected}\n      data-value={value}\n      aria-pressed={selected}\n      onClick={handleClick}\n      disabled={disabled}\n      className={cardClassName}\n      {...props}\n    >\n      {optionType === \"option\" ? (\n        <div className=\"flex items-center\">\n          <span\n            className={cn(\n              \"relative mr-4 flex size-6 shrink-0 items-center justify-center\",\n              \"after:block after:size-5 after:rounded-[6px] after:border after:border-checkbox-border after:transition-[background-color,border-color]\",\n              selected && \"after:border-primary after:bg-primary\",\n            )}\n          >\n            {selected ? (\n              <CheckIcon className=\"absolute size-3 text-primary-foreground\" />\n            ) : null}\n          </span>\n          <span className=\"text-base font-medium leading-6 tracking-[-0.02em]\">\n            {labelContent}\n          </span>\n        </div>\n      ) : label || subline || info ? (\n        <div className=\"flex items-center justify-between gap-6\">\n          <div className=\"flex min-w-0 flex-1 flex-col items-start justify-center\">\n            {label ? (\n              <span className=\"w-full text-base font-medium leading-6 tracking-[-0.02em]\">\n                {label}\n              </span>\n            ) : null}\n            {subline ? (\n              <span className=\"w-full text-sm leading-6 tracking-[-0.14px] text-muted-foreground\">\n                {subline}\n              </span>\n            ) : null}\n          </div>\n          {info ? (\n            <span className=\"shrink-0 text-right text-sm leading-6 tracking-[-0.14px] text-muted-foreground\">\n              {info}\n            </span>\n          ) : null}\n          <CaretRightIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n        </div>\n      ) : (\n        <div className=\"flex w-full items-center gap-4\">\n          <span className=\"flex-1 text-base font-medium leading-6 tracking-[-0.02em]\">\n            {labelContent}\n          </span>\n          <CaretRightIcon className=\"size-4 shrink-0 text-muted-foreground\" />\n        </div>\n      )}\n    </button>\n  );\n}\n\nexport function FlowOptionContainer({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return <div className=\"flex w-full flex-col gap-5 p-6\">{children}</div>;\n}\n\nexport function FlowOptionButton({ className, ...props }: OptionButtonProps) {\n  return <OptionButton className={cn(\"w-full\", className)} {...props} />;\n}\n\nexport function FlowOptions({ children }: { children: React.ReactNode }) {\n  return (\n    <FlowWrapper>\n      <FlowContainer>\n        <FlowOptionContainer>{children}</FlowOptionContainer>\n      </FlowContainer>\n    </FlowWrapper>\n  );\n}\n",
      "type": "registry:ui",
      "target": "src/components/ui/flow.tsx"
    }
  ],
  "type": "registry:ui"
}