import * as React from "react"; import { cn } from "@/registry/berlin/lib/utils"; import { Button, type ButtonProps } from "@/registry/berlin/circle-ui/button"; import { ProgressBar } from "@/registry/berlin/circle-ui/progress-bar"; function CaretLeftIcon({ className }: { className?: string }) { return ( ); } function CloseIcon({ className }: { className?: string }) { return ( ); } function CaretRightIcon({ className }: { className?: string }) { return ( ); } function CheckIcon({ className }: { className?: string }) { return ( ); } export function FlowWrapper({ children }: { children: React.ReactNode }) { return

{children}

; } export function FlowContainer({ children }: { children: React.ReactNode }) { return (

{children}

); } export function ResponsiveButtonContainer({ children, }: { children: React.ReactNode; }) { return (

{children}

); } export function FlowActionButton({ className, ...props }: ButtonProps) { return ( ); } export interface FlowHeadProps { progress: number; children?: React.ReactNode; onCloseClick: () => void; onBackClick: () => void; } export function FlowHead({ progress, children, onCloseClick, onBackClick, }: FlowHeadProps) { return ( {children ?? ( )} ); } export interface OptionButtonProps extends Omit< React.ButtonHTMLAttributes, "type" | "onClick" | "onSelect" > { className?: string; optionType?: "option" | "singleOption"; selected?: boolean; onSelect?: (selected: boolean) => void; onSelectAndContinue?: () => void; value?: string | number; label?: string; subline?: string; info?: string; children?: React.ReactNode; disabled?: boolean; } export function OptionButton({ className, optionType = "option", selected = false, onSelect, onSelectAndContinue, value, label, subline, info, children, disabled = false, ...props }: OptionButtonProps) { function handleClick() { if (disabled) return; if (optionType === "singleOption") { if (!selected) { onSelect?.(true); onSelectAndContinue?.(); } return; } onSelect?.(!selected); } const isInteractive = !disabled; const isActive = isInteractive && selected; const cardClassName = cn( "flex h-[72px] w-full items-center gap-4 rounded-xl bg-card px-4 text-left transition-[border-color,box-shadow,opacity]", isActive ? "border-2 border-primary" : "border", isInteractive && "focus-visible:outline-none focus-visible:border-2 focus-visible:border-primary", disabled && "cursor-not-allowed opacity-50", className, ); const labelContent = label ?? children; return ( ); } export function FlowOptionContainer({ children, }: { children: React.ReactNode; }) { return

{children}

; } export function FlowOptionButton({ className, ...props }: OptionButtonProps) { return ; } export function FlowOptions({ children }: { children: React.ReactNode }) { return ( {children} ); }

Installation

About

Usage

Dependencies

Source