{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "billui", "homepage": "https://billui.com", "items": [ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "billing-address", "type": "registry:ui", "title": "Billing Address", "description": "Composable address form with correct autocomplete attributes. Country and state selects are automatically linked.", "files": [ { "path": "src/registry/ui/billing-address.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport {\n COUNTRIES,\n getStatesForCountry,\n type IState,\n} from \"@/lib/billing-address-data\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\nimport { cn } from \"@/lib/utils\";\n\ninterface BillingAddressContextValue {\n countryCode: string;\n setCountryCode: (code: string) => void;\n states: IState[];\n}\n\nconst BillingAddressContext =\n React.createContext(null);\n\nfunction useBillingAddressContext() {\n const context = React.useContext(BillingAddressContext);\n if (!context) {\n throw new Error(\n \"BillingAddress components must be used within a BillingAddress provider\",\n );\n }\n return context;\n}\n\ninterface BillingAddressProps\n extends Omit, \"defaultValue\"> {\n /** Controlled country code (ISO 3166-1 alpha-2) */\n country?: string;\n /** Default country code for uncontrolled mode */\n defaultCountry?: string;\n /** Callback when country changes */\n onCountryChange?: (code: string) => void;\n}\n\nconst BillingAddress = React.forwardRef(\n (\n {\n className,\n country,\n defaultCountry = \"US\",\n onCountryChange,\n children,\n ...props\n },\n ref,\n ) => {\n const [countryCode, setCountryCode] = useControllableState(\n country,\n defaultCountry,\n onCountryChange,\n );\n\n const states = React.useMemo(\n () => getStatesForCountry(countryCode),\n [countryCode],\n );\n\n const contextValue = React.useMemo(\n () => ({ countryCode, setCountryCode, states }),\n [countryCode, setCountryCode, states],\n );\n\n return (\n \n \n {children}\n \n \n );\n },\n);\nBillingAddress.displayName = \"BillingAddress\";\n\n/**\n * Configuration for billing address fields.\n * Ensures proper browser autofill, accessibility, and UX.\n */\nconst billingFieldConfig = {\n name: {\n autocomplete: \"billing name\",\n inputMode: \"text\" as const,\n spellCheck: true,\n },\n line1: {\n autocomplete: \"billing address-line1\",\n inputMode: \"text\" as const,\n spellCheck: true,\n },\n line2: {\n autocomplete: \"billing address-line2\",\n inputMode: \"text\" as const,\n spellCheck: true,\n },\n city: {\n autocomplete: \"billing address-level2\",\n inputMode: \"text\" as const,\n spellCheck: true,\n },\n postalCode: {\n autocomplete: \"billing postal-code\",\n inputMode: \"text\" as const,\n spellCheck: false, // Disabled per UI guidelines for codes\n },\n} as const;\n\ntype BillingAddressInputField = keyof typeof billingFieldConfig;\n\ninterface BillingAddressInputProps\n extends Omit<\n React.ComponentPropsWithoutRef,\n | \"autoComplete\"\n | \"inputMode\"\n | \"spellCheck\"\n | \"value\"\n | \"defaultValue\"\n | \"onChange\"\n > {\n /** Address field type - automatically sets autocomplete, inputMode, and spellCheck */\n field: BillingAddressInputField;\n /** Controlled value */\n value?: string;\n /** Default value for uncontrolled mode */\n defaultValue?: string;\n /** Callback fired when value changes */\n onValueChange?: (value: string) => void;\n /** Trim whitespace on blur (default: true) */\n trimOnBlur?: boolean;\n}\n\nconst BillingAddressInput = React.forwardRef<\n HTMLInputElement,\n BillingAddressInputProps\n>(\n (\n {\n field,\n className,\n value,\n defaultValue = \"\",\n onValueChange,\n trimOnBlur = true,\n onBlur,\n ...props\n },\n ref,\n ) => {\n const config = billingFieldConfig[field];\n const [currentValue, setValue] = useControllableState(\n value,\n defaultValue,\n onValueChange,\n );\n\n const handleBlur = (e: React.FocusEvent) => {\n if (trimOnBlur) {\n const trimmed = currentValue.trim();\n if (trimmed !== currentValue) {\n setValue(trimmed);\n }\n }\n onBlur?.(e);\n };\n\n return (\n setValue(e.target.value)}\n onBlur={handleBlur}\n autoComplete={config.autocomplete}\n inputMode={config.inputMode}\n spellCheck={config.spellCheck}\n className={cn(\"w-full\", className)}\n {...props}\n />\n );\n },\n);\nBillingAddressInput.displayName = \"BillingAddressInput\";\n\ninterface BillingAddressCountryProps {\n /** Placeholder text */\n placeholder?: string;\n /** Additional class name */\n className?: string;\n /** Callback fired when country changes */\n onValueChange?: (value: string) => void;\n /** Name attribute for form submission */\n name?: string;\n /** ID attribute */\n id?: string;\n /** Whether the select is disabled */\n disabled?: boolean;\n}\n\nconst BillingAddressCountry = React.forwardRef<\n HTMLButtonElement,\n BillingAddressCountryProps\n>(\n (\n {\n placeholder = \"Select country…\",\n className,\n onValueChange,\n name,\n id,\n disabled,\n },\n ref,\n ) => {\n const { countryCode, setCountryCode } = useBillingAddressContext();\n\n const handleValueChange = (newValue: string) => {\n setCountryCode(newValue);\n onValueChange?.(newValue);\n };\n\n return (\n <>\n {name && }\n \n \n \n \n \n {COUNTRIES.map((country) => (\n \n {country.name}\n \n ))}\n \n \n \n );\n },\n);\nBillingAddressCountry.displayName = \"BillingAddressCountry\";\n\ninterface BillingAddressStateProps {\n /** Placeholder text */\n placeholder?: string;\n /** Additional class name */\n className?: string;\n /** Controlled value */\n value?: string;\n /** Default value for uncontrolled mode */\n defaultValue?: string;\n /** Callback fired when state changes */\n onValueChange?: (value: string) => void;\n /** Name attribute for form submission */\n name?: string;\n /** ID attribute */\n id?: string;\n /** Whether the input/select is disabled */\n disabled?: boolean;\n /** Trim whitespace on blur for input mode (default: true) */\n trimOnBlur?: boolean;\n}\n\n/**\n * Renders a Select when states are available for the country,\n * otherwise renders an Input for free-form entry.\n *\n * Note: Ref points to a wrapper div with `display: contents` for consistent typing.\n * Use `ref.current?.querySelector('input, button')` if you need the inner element.\n */\nconst BillingAddressState = React.forwardRef<\n HTMLDivElement,\n BillingAddressStateProps\n>(\n (\n {\n placeholder = \"State / Province…\",\n className,\n value,\n defaultValue = \"\",\n onValueChange,\n name,\n id,\n disabled,\n trimOnBlur = true,\n },\n ref,\n ) => {\n const { states, countryCode } = useBillingAddressContext();\n\n const [currentValue, setValue] = useControllableState(\n value,\n defaultValue,\n onValueChange,\n );\n\n const isControlled = value !== undefined;\n\n // Reset state when country changes\n const prevCountryRef = React.useRef(countryCode);\n React.useEffect(() => {\n if (prevCountryRef.current !== countryCode) {\n prevCountryRef.current = countryCode;\n if (!isControlled) {\n setValue(\"\");\n } else {\n onValueChange?.(\"\");\n }\n }\n }, [countryCode, isControlled, setValue, onValueChange]);\n\n const handleInputBlur = () => {\n if (trimOnBlur) {\n const trimmed = currentValue.trim();\n if (trimmed !== currentValue) {\n setValue(trimmed);\n }\n }\n };\n\n // No states available → free-form input\n if (states.length === 0) {\n return (\n
\n setValue(e.target.value)}\n onBlur={handleInputBlur}\n placeholder={placeholder}\n autoComplete=\"billing address-level1\"\n disabled={disabled}\n className={cn(\"w-full\", className)}\n />\n
\n );\n }\n\n // States available → select dropdown\n return (\n
\n {name && }\n \n \n \n \n \n {states.map((state) => (\n \n {state.name}\n \n ))}\n \n \n
\n );\n },\n);\nBillingAddressState.displayName = \"BillingAddressState\";\n\nexport {\n BillingAddress,\n BillingAddressInput,\n BillingAddressCountry,\n BillingAddressState,\n billingFieldConfig,\n};\n\nexport type {\n BillingAddressProps,\n BillingAddressInputProps,\n BillingAddressInputField,\n BillingAddressCountryProps,\n BillingAddressStateProps,\n};\n", "type": "registry:ui", "target": "components/ui/billing-address.tsx" } ], "registryDependencies": [ "input", "select", "https://billui.com/r/billing-address-data.json", "https://billui.com/r/use-controllable-state.json", "https://billui.com/r/utils.json" ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-icons", "type": "registry:ui", "title": "Card Icons", "description": "Card Icons component", "files": [ { "path": "src/registry/ui/card-icons.tsx", "content": "import { CreditCard } from \"lucide-react\";\n\nexport type CardBrand =\n | \"visa\"\n | \"mastercard\"\n | \"amex\"\n | \"discover\"\n | \"diners\"\n | \"jcb\"\n | \"unionpay\"\n | \"unknown\";\n\nexport const brandLabels: Record = {\n visa: \"Visa\",\n mastercard: \"Mastercard\",\n amex: \"American Express\",\n discover: \"Discover\",\n diners: \"Diners Club\",\n jcb: \"JCB\",\n unionpay: \"UnionPay\",\n unknown: \"Card\",\n};\n\nexport const CardBrandIcons: Record<\n CardBrand,\n React.FC<{ className?: string }>\n> = {\n visa: ({ className }) => (\n \n \n \n \n ),\n mastercard: ({ className }) => (\n \n \n \n \n \n \n \n ),\n amex: ({ className }) => (\n \n \n \n \n \n \n \n \n \n \n \n \n ),\n discover: ({ className }) => (\n // TODO: Copiar SVG de discover\n \n ),\n diners: ({ className }) => (\n // TODO: Copiar SVG de diners\n \n ),\n jcb: ({ className }) => (\n // TODO: Copiar SVG de jcb\n \n ),\n unionpay: ({ className }) => (\n // TODO: Copiar SVG de unionpay\n \n ),\n unknown: ({ className }) => (\n \n ),\n};\n", "type": "registry:ui", "target": "components/ui/card-icons.tsx" } ], "dependencies": [ "lucide-react" ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "card-input", "type": "registry:ui", "title": "Card Input", "description": "Native formatted card inputs with auto-formatting, brand detection, and masking.", "files": [ { "path": "src/registry/ui/card-input.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\nimport { cn } from \"@/lib/utils\";\nimport { type CardBrand, CardBrandIcons } from \"./card-icons\";\n\ninterface CardInputContextValue {\n brand: CardBrand;\n setBrand: (brand: CardBrand) => void;\n}\n\nconst CardInputContext = React.createContext(\n null,\n);\n\nfunction useCardInputContext() {\n return React.useContext(CardInputContext);\n}\n\nfunction detectCardBrand(cardNumber: string): CardBrand {\n const number = cardNumber.replace(/\\s/g, \"\");\n\n if (!number) return \"unknown\";\n\n // Visa: starts with 4\n if (/^4/.test(number)) return \"visa\";\n\n // Mastercard: starts with 51-55 or 2221-2720\n if (/^5[1-5]/.test(number) || /^2[2-7]/.test(number)) return \"mastercard\";\n\n // Amex: starts with 34 or 37\n if (/^3[47]/.test(number)) return \"amex\";\n\n // Discover: starts with 6011, 644-649, 65\n if (/^6011|^64[4-9]|^65/.test(number)) return \"discover\";\n\n // Diners Club: starts with 36, 38, or 300-305\n if (/^36|^38|^30[0-5]/.test(number)) return \"diners\";\n\n // JCB: starts with 35\n if (/^35/.test(number)) return \"jcb\";\n\n // UnionPay: starts with 62\n if (/^62/.test(number)) return \"unionpay\";\n\n return \"unknown\";\n}\n\nfunction validateLuhn(cardNumber: string): boolean {\n const number = cardNumber.replace(/\\s/g, \"\");\n\n if (!number || !/^\\d+$/.test(number)) return false;\n\n let sum = 0;\n let isEven = false;\n\n // Loop through digits from right to left\n for (let i = number.length - 1; i >= 0; i--) {\n let digit = parseInt(number[i], 10);\n\n if (isEven) {\n digit *= 2;\n if (digit > 9) {\n digit -= 9;\n }\n }\n\n sum += digit;\n isEven = !isEven;\n }\n\n return sum % 10 === 0;\n}\n\nfunction isCardNumberComplete(cardNumber: string, brand: CardBrand): boolean {\n const number = cardNumber.replace(/\\s/g, \"\");\n const maxLength = getCardMaxLength(brand);\n return number.length === maxLength;\n}\n\nfunction validateCardNumber(cardNumber: string): {\n isValid: boolean;\n isComplete: boolean;\n brand: CardBrand;\n} {\n const brand = detectCardBrand(cardNumber);\n const isComplete = isCardNumberComplete(cardNumber, brand);\n const isValid = isComplete && validateLuhn(cardNumber);\n\n return { isValid, isComplete, brand };\n}\n\nfunction getCardMaxLength(brand: CardBrand): number {\n // Amex has 15 digits, others have 16\n return brand === \"amex\" ? 15 : 16;\n}\n\nfunction getCvcMaxLength(brand: CardBrand): number {\n // Amex has 4-digit CVC, others have 3\n return brand === \"amex\" ? 4 : 3;\n}\n\nfunction formatCardNumber(value: string, brand: CardBrand): string {\n const number = value.replace(/\\D/g, \"\");\n const maxLength = getCardMaxLength(brand);\n const truncated = number.slice(0, maxLength);\n\n // Amex format: 4-6-5\n if (brand === \"amex\") {\n const parts = [\n truncated.slice(0, 4),\n truncated.slice(4, 10),\n truncated.slice(10, 15),\n ].filter(Boolean);\n return parts.join(\" \");\n }\n\n // Standard format: 4-4-4-4\n const parts = truncated.match(/.{1,4}/g) || [];\n return parts.join(\" \");\n}\n\nfunction formatExpiry(value: string): string {\n const number = value.replace(/\\D/g, \"\");\n const truncated = number.slice(0, 4);\n\n if (truncated.length >= 2) {\n return `${truncated.slice(0, 2)}/${truncated.slice(2)}`;\n }\n return truncated;\n}\n\nfunction validateExpiry(expiry: string): {\n isValid: boolean;\n isComplete: boolean;\n isExpired: boolean;\n} {\n const cleaned = expiry.replace(/\\D/g, \"\");\n\n // Not complete until we have 4 digits (MMYY)\n if (cleaned.length < 4) {\n return { isValid: false, isComplete: false, isExpired: false };\n }\n\n const month = parseInt(cleaned.slice(0, 2), 10);\n const year = parseInt(cleaned.slice(2, 4), 10);\n\n // Invalid month\n if (month < 1 || month > 12) {\n return { isValid: false, isComplete: true, isExpired: false };\n }\n\n // Check if expired\n const now = new Date();\n const currentYear = now.getFullYear() % 100; // Get last 2 digits\n const currentMonth = now.getMonth() + 1; // 1-indexed\n\n const isExpired =\n year < currentYear || (year === currentYear && month < currentMonth);\n\n return {\n isValid: !isExpired,\n isComplete: true,\n isExpired,\n };\n}\n\ninterface CardInputGroupProps extends React.HTMLAttributes {\n error?: boolean;\n}\n\nconst CardInputGroup = React.forwardRef(\n ({ className, children, error, ...props }, ref) => {\n const [brand, setBrand] = React.useState(\"unknown\");\n\n return (\n \n \n {children}\n \n \n );\n },\n);\nCardInputGroup.displayName = \"CardInputGroup\";\n\ninterface CardNumberInputProps\n extends Omit<\n React.InputHTMLAttributes,\n \"onChange\" | \"value\" | \"defaultValue\"\n > {\n /** The current value (controlled) */\n value?: string;\n /** The default value (uncontrolled) */\n defaultValue?: string;\n /** Callback fired when the value changes */\n onValueChange?: (value: string) => void;\n /** Callback fired when the card brand is detected */\n onBrandChange?: (brand: CardBrand) => void;\n /** Callback fired when validation state changes */\n onValidationChange?: (validation: {\n isValid: boolean;\n isComplete: boolean;\n }) => void;\n}\n\nconst CardNumberInput = React.forwardRef<\n HTMLInputElement,\n CardNumberInputProps\n>(\n (\n {\n className,\n id,\n name,\n value,\n defaultValue = \"\",\n onValueChange,\n onBrandChange,\n onValidationChange,\n placeholder = \"1234 1234 1234 1234\",\n disabled,\n ...props\n },\n ref,\n ) => {\n const context = useCardInputContext();\n const generatedId = React.useId();\n const inputId = id ?? generatedId;\n const errorId = `${inputId}-error`;\n const inputName = name ?? \"cc-number\";\n\n const [currentValue, setValue] = useControllableState(\n value,\n defaultValue,\n onValueChange,\n );\n\n const [internalBrand, setInternalBrand] =\n React.useState(\"unknown\");\n const [validationState, setValidationState] = React.useState<{\n isComplete: boolean;\n isValid: boolean;\n }>({ isComplete: false, isValid: false });\n\n // Use context brand if available, otherwise use internal state\n const brand = context?.brand ?? internalBrand;\n const BrandIcon = CardBrandIcons[brand];\n\n const hasError = validationState.isComplete && !validationState.isValid;\n const isValidComplete =\n validationState.isComplete && validationState.isValid;\n\n const handleChange = (e: React.ChangeEvent) => {\n const rawValue = e.target.value;\n // Detect brand first to know how to format\n const detectedBrand = detectCardBrand(rawValue);\n // Format (and truncate) the value\n const formatted = formatCardNumber(rawValue, detectedBrand);\n // Validate with the formatted/truncated value to ensure correct state\n const validation = validateCardNumber(formatted);\n\n // Update both context (if available) and internal state\n context?.setBrand(validation.brand);\n setInternalBrand(validation.brand);\n setValidationState({\n isComplete: validation.isComplete,\n isValid: validation.isValid,\n });\n onBrandChange?.(validation.brand);\n onValidationChange?.({\n isValid: validation.isValid,\n isComplete: validation.isComplete,\n });\n\n setValue(formatted);\n };\n\n return (\n \n \n
\n {validationState.isComplete && (\n
\n {hasError ? (\n \n \n \n \n \n ) : isValidComplete ? (\n \n \n \n ) : null}\n
\n )}\n
\n \n
\n
\n {hasError && (\n \n Invalid card number\n \n )}\n \n );\n },\n);\nCardNumberInput.displayName = \"CardNumberInput\";\n\ninterface CardExpiryInputProps\n extends Omit<\n React.InputHTMLAttributes,\n \"onChange\" | \"value\" | \"defaultValue\"\n > {\n /** The current value (controlled) */\n value?: string;\n /** The default value (uncontrolled) */\n defaultValue?: string;\n /** Callback fired when the value changes */\n onValueChange?: (value: string) => void;\n /** Callback fired when validation state changes */\n onValidationChange?: (validation: {\n isValid: boolean;\n isComplete: boolean;\n isExpired: boolean;\n }) => void;\n}\n\nconst CardExpiryInput = React.forwardRef<\n HTMLInputElement,\n CardExpiryInputProps\n>(\n (\n {\n className,\n id,\n name,\n value,\n defaultValue = \"\",\n onValueChange,\n onValidationChange,\n placeholder = \"MM/YY\",\n disabled,\n ...props\n },\n ref,\n ) => {\n const context = useCardInputContext();\n const generatedId = React.useId();\n const inputId = id ?? generatedId;\n const errorId = `${inputId}-error`;\n const inputName = name ?? \"cc-exp\";\n\n const [currentValue, setValue] = useControllableState(\n value,\n defaultValue,\n onValueChange,\n );\n\n const [validationState, setValidationState] = React.useState<{\n isComplete: boolean;\n isValid: boolean;\n isExpired: boolean;\n }>({ isComplete: false, isValid: false, isExpired: false });\n\n // When inside CardInputGroup, center text; otherwise left-align\n const isGrouped = context !== null;\n\n const hasError = validationState.isComplete && !validationState.isValid;\n\n const handleChange = (e: React.ChangeEvent) => {\n const formatted = formatExpiry(e.target.value);\n const validation = validateExpiry(formatted);\n\n setValidationState(validation);\n onValidationChange?.(validation);\n\n setValue(formatted);\n };\n\n return (\n
\n \n {validationState.isComplete && (\n
\n {hasError ? (\n \n \n \n \n \n ) : (\n \n \n \n )}\n
\n )}\n {hasError && (\n \n {validationState.isExpired\n ? \"Card has expired\"\n : \"Invalid expiration date\"}\n \n )}\n
\n );\n },\n);\nCardExpiryInput.displayName = \"CardExpiryInput\";\n\ninterface CardCvcInputProps\n extends Omit<\n React.InputHTMLAttributes,\n \"onChange\" | \"value\" | \"defaultValue\"\n > {\n /** The current value (controlled) */\n value?: string;\n /** The default value (uncontrolled) */\n defaultValue?: string;\n /** Callback fired when the value changes */\n onValueChange?: (value: string) => void;\n}\n\nconst CardCvcInput = React.forwardRef(\n (\n {\n className,\n id,\n name,\n value,\n defaultValue = \"\",\n onValueChange,\n disabled,\n ...props\n },\n ref,\n ) => {\n const context = useCardInputContext();\n const generatedId = React.useId();\n const inputId = id ?? generatedId;\n const inputName = name ?? \"cc-csc\";\n\n // Get brand from context (auto-detected from card number)\n const brand = context?.brand ?? \"unknown\";\n const maxLength = getCvcMaxLength(brand);\n\n const [currentValue, setCurrentValue] = useControllableState(\n value,\n defaultValue,\n onValueChange,\n );\n\n // When inside CardInputGroup, center text; otherwise left-align\n const isGrouped = context !== null;\n\n const handleChange = (e: React.ChangeEvent) => {\n const rawValue = e.target.value.replace(/\\D/g, \"\").slice(0, maxLength);\n setCurrentValue(rawValue);\n };\n\n return (\n
\n \n
\n );\n },\n);\nCardCvcInput.displayName = \"CardCvcInput\";\n\nexport {\n CardInputGroup,\n CardNumberInput,\n CardExpiryInput,\n CardCvcInput,\n CardBrandIcons,\n};\n\nexport type {\n CardBrand,\n CardInputGroupProps,\n CardNumberInputProps,\n CardExpiryInputProps,\n CardCvcInputProps,\n};\n", "type": "registry:ui", "target": "components/ui/card-input.tsx" } ], "registryDependencies": [ "https://billui.com/r/use-controllable-state.json", "https://billui.com/r/utils.json", "https://billui.com/r/card-icons.json" ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "invoice-card", "type": "registry:ui", "title": "Invoice Card", "description": "A card for displaying invoice details and billing history.", "files": [ { "path": "src/registry/ui/invoice-card.tsx", "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Download, ExternalLink, FileText } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst invoiceCardVariants = cva(\n \"relative flex items-center gap-4 rounded-xl border bg-card p-4 text-card-foreground transition-colors hover:bg-accent/50\",\n {\n variants: {\n variant: {\n default: \"border-border\",\n compact: \"gap-3 p-3\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\ninterface InvoiceCardProps\n extends React.HTMLAttributes,\n VariantProps {}\n\nconst InvoiceCard = React.forwardRef(\n ({ className, variant, ...props }, ref) => (\n \n ),\n);\nInvoiceCard.displayName = \"InvoiceCard\";\n\nconst InvoiceCardIcon = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n \n \n));\nInvoiceCardIcon.displayName = \"InvoiceCardIcon\";\n\nconst InvoiceCardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nInvoiceCardContent.displayName = \"InvoiceCardContent\";\n\nconst InvoiceCardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nInvoiceCardHeader.displayName = \"InvoiceCardHeader\";\n\nconst InvoiceCardNumber = React.forwardRef<\n HTMLSpanElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nInvoiceCardNumber.displayName = \"InvoiceCardNumber\";\n\ntype InvoiceStatus = \"paid\" | \"pending\" | \"failed\" | \"refunded\" | \"draft\";\n\nconst statusConfig: Record<\n InvoiceStatus,\n {\n label: string;\n variant: \"default\" | \"secondary\" | \"destructive\" | \"outline\";\n }\n> = {\n paid: { label: \"Paid\", variant: \"default\" },\n pending: { label: \"Pending\", variant: \"secondary\" },\n failed: { label: \"Failed\", variant: \"destructive\" },\n refunded: { label: \"Refunded\", variant: \"outline\" },\n draft: { label: \"Draft\", variant: \"outline\" },\n};\n\ninterface InvoiceCardStatusProps\n extends Omit, \"variant\"> {\n status: InvoiceStatus;\n}\n\nconst InvoiceCardStatus = React.forwardRef<\n HTMLDivElement,\n InvoiceCardStatusProps\n>(({ className, status, ...props }, ref) => {\n const config = statusConfig[status];\n return (\n \n {config.label}\n \n );\n});\nInvoiceCardStatus.displayName = \"InvoiceCardStatus\";\n\ninterface InvoiceCardDateProps extends React.HTMLAttributes {\n date: Date | string;\n format?: \"short\" | \"long\";\n}\n\nconst InvoiceCardDate = React.forwardRef(\n ({ className, date, format = \"short\", ...props }, ref) => {\n const dateObj = typeof date === \"string\" ? new Date(date) : date;\n const formatted = dateObj.toLocaleDateString(\"en-US\", {\n year: \"numeric\",\n month: format === \"long\" ? \"long\" : \"short\",\n day: \"numeric\",\n });\n\n return (\n \n {formatted}\n \n );\n },\n);\nInvoiceCardDate.displayName = \"InvoiceCardDate\";\n\ninterface InvoiceCardAmountProps extends React.HTMLAttributes {\n amount: number;\n currency?: string;\n}\n\nconst InvoiceCardAmount = React.forwardRef<\n HTMLSpanElement,\n InvoiceCardAmountProps\n>(({ className, amount, currency = \"$\", ...props }, ref) => (\n \n {currency}\n {amount.toLocaleString(\"en-US\", { minimumFractionDigits: 2 })}\n \n));\nInvoiceCardAmount.displayName = \"InvoiceCardAmount\";\n\nconst InvoiceCardActions = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nInvoiceCardActions.displayName = \"InvoiceCardActions\";\n\ninterface InvoiceCardActionProps\n extends React.ComponentPropsWithoutRef {\n action?: \"download\" | \"view\";\n}\n\nconst InvoiceCardAction = React.forwardRef<\n HTMLButtonElement,\n InvoiceCardActionProps\n>(({ className, action = \"download\", children, ...props }, ref) => {\n const Icon = action === \"download\" ? Download : ExternalLink;\n\n return (\n \n {children ?? }\n \n {action === \"download\" ? \"Download\" : \"View\"}\n \n \n );\n});\nInvoiceCardAction.displayName = \"InvoiceCardAction\";\n\nexport {\n InvoiceCard,\n InvoiceCardIcon,\n InvoiceCardContent,\n InvoiceCardHeader,\n InvoiceCardNumber,\n InvoiceCardStatus,\n InvoiceCardDate,\n InvoiceCardAmount,\n InvoiceCardActions,\n InvoiceCardAction,\n invoiceCardVariants,\n statusConfig,\n};\n\nexport type {\n InvoiceCardProps,\n InvoiceCardStatusProps,\n InvoiceCardDateProps,\n InvoiceCardAmountProps,\n InvoiceCardActionProps,\n InvoiceStatus,\n};\n", "type": "registry:ui", "target": "components/ui/invoice-card.tsx" } ], "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [ "badge", "button", "https://billui.com/r/utils.json" ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "payment-method", "type": "registry:ui", "title": "Payment Method", "description": "A composable card for displaying saved payment methods like credit cards.", "files": [ { "path": "src/registry/ui/payment-method.tsx", "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { MoreHorizontal, Pencil, Trash2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { brandLabels, type CardBrand, CardBrandIcons } from \"./card-icons\";\n\nconst paymentMethodVariants = cva(\n \"relative flex items-center gap-4 rounded-xl border bg-card p-4 text-card-foreground transition-colors\",\n {\n variants: {\n variant: {\n default: \"border-border\",\n selected: \"border-primary ring-1 ring-primary\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\ninterface PaymentMethodProps\n extends React.HTMLAttributes,\n VariantProps {}\n\nconst PaymentMethod = React.forwardRef(\n ({ className, variant, ...props }, ref) => (\n \n ),\n);\nPaymentMethod.displayName = \"PaymentMethod\";\n\ninterface PaymentMethodIconProps extends React.HTMLAttributes {\n brand?: CardBrand;\n}\n\nconst PaymentMethodIcon = React.forwardRef<\n HTMLDivElement,\n PaymentMethodIconProps\n>(({ className, brand = \"unknown\", ...props }, ref) => {\n const Logo = CardBrandIcons[brand] ?? CardBrandIcons.unknown;\n const isGeneric = brand === \"unknown\";\n\n return (\n \n \n \n );\n});\nPaymentMethodIcon.displayName = \"PaymentMethodIcon\";\n\nconst PaymentMethodDetails = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nPaymentMethodDetails.displayName = \"PaymentMethodDetails\";\n\ninterface PaymentMethodNumberProps\n extends React.HTMLAttributes {\n last4?: string;\n}\n\nconst PaymentMethodNumber = React.forwardRef<\n HTMLSpanElement,\n PaymentMethodNumberProps\n>(({ className, last4, children, ...props }, ref) => (\n \n {children ?? `•••• ${last4}`}\n \n));\nPaymentMethodNumber.displayName = \"PaymentMethodNumber\";\n\ninterface PaymentMethodExpiryProps\n extends React.HTMLAttributes {\n month?: number;\n year?: number;\n expired?: boolean;\n}\n\nconst PaymentMethodExpiry = React.forwardRef<\n HTMLSpanElement,\n PaymentMethodExpiryProps\n>(({ className, month, year, expired, children, ...props }, ref) => {\n const expiryText =\n children ??\n (month && year\n ? `Expires ${month.toString().padStart(2, \"0\")}/${year.toString().slice(-2)}`\n : null);\n\n return (\n \n {expiryText}\n {expired && \" (Expired)\"}\n \n );\n});\nPaymentMethodExpiry.displayName = \"PaymentMethodExpiry\";\n\ninterface PaymentMethodBadgeProps\n extends React.ComponentPropsWithoutRef {}\n\nconst PaymentMethodBadge = React.forwardRef<\n HTMLDivElement,\n PaymentMethodBadgeProps\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n));\nPaymentMethodBadge.displayName = \"PaymentMethodBadge\";\n\nconst PaymentMethodActions = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nPaymentMethodActions.displayName = \"PaymentMethodActions\";\n\ninterface PaymentMethodActionProps\n extends React.ComponentPropsWithoutRef {\n action?: \"edit\" | \"delete\" | \"more\";\n}\n\nconst PaymentMethodAction = React.forwardRef<\n HTMLButtonElement,\n PaymentMethodActionProps\n>(({ className, action = \"more\", children, ...props }, ref) => {\n const icons = {\n edit: Pencil,\n delete: Trash2,\n more: MoreHorizontal,\n };\n const labels = {\n edit: \"Edit\",\n delete: \"Delete\",\n more: \"More options\",\n };\n const Icon = icons[action];\n\n return (\n \n {children ?? }\n {labels[action]}\n \n );\n});\nPaymentMethodAction.displayName = \"PaymentMethodAction\";\n\nexport {\n PaymentMethod,\n PaymentMethodIcon,\n PaymentMethodDetails,\n PaymentMethodNumber,\n PaymentMethodExpiry,\n PaymentMethodBadge,\n PaymentMethodActions,\n PaymentMethodAction,\n paymentMethodVariants,\n brandLabels,\n CardBrandIcons,\n};\n\nexport type {\n PaymentMethodProps,\n PaymentMethodIconProps,\n PaymentMethodNumberProps,\n PaymentMethodExpiryProps,\n PaymentMethodBadgeProps,\n PaymentMethodActionProps,\n CardBrand,\n};\n", "type": "registry:ui", "target": "components/ui/payment-method.tsx" } ], "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [ "badge", "button", "https://billui.com/r/utils.json", "https://billui.com/r/card-icons.json" ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "plan-card", "type": "registry:ui", "title": "Plan Card", "description": "A card for displaying pricing tiers and subscription plans.", "files": [ { "path": "src/registry/ui/plan-card.tsx", "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst planCardVariants = cva(\n \"relative rounded-2xl border bg-card text-card-foreground transition-all duration-200\",\n {\n variants: {\n variant: {\n default: \"border-border\",\n highlighted:\n \"border-primary shadow-lg shadow-primary/10 ring-1 ring-primary\",\n compact: \"border-border p-4\",\n },\n size: {\n default: \"p-6\",\n lg: \"p-8\",\n },\n layout: {\n vertical: \"flex flex-col min-w-[280px]\",\n horizontal: \"flex flex-row items-center gap-6 w-full\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n layout: \"vertical\",\n },\n },\n);\n\ninterface PlanCardProps\n extends React.HTMLAttributes,\n VariantProps {}\n\nconst PlanCard = React.forwardRef(\n ({ className, variant, size, layout, ...props }, ref) => (\n \n ),\n);\nPlanCard.displayName = \"PlanCard\";\n\nconst PlanCardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n
\n));\nPlanCardHeader.displayName = \"PlanCardHeader\";\n\ninterface PlanCardBadgeProps\n extends React.ComponentPropsWithoutRef {}\n\nconst PlanCardBadge = React.forwardRef(\n ({ className, ...props }, ref) => (\n \n ),\n);\nPlanCardBadge.displayName = \"PlanCardBadge\";\n\nconst PlanCardTitle = React.forwardRef<\n HTMLHeadingElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nPlanCardTitle.displayName = \"PlanCardTitle\";\n\nconst PlanCardDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nPlanCardDescription.displayName = \"PlanCardDescription\";\n\ninterface PlanCardPriceProps extends React.HTMLAttributes {\n amount: number;\n currency?: string;\n period?: \"month\" | \"year\" | \"once\";\n originalAmount?: number;\n}\n\nconst PlanCardPrice = React.forwardRef(\n (\n {\n className,\n amount,\n currency = \"$\",\n period = \"month\",\n originalAmount,\n ...props\n },\n ref,\n ) => {\n const periodLabel = {\n month: \"/mo\",\n year: \"/yr\",\n once: \"\",\n };\n\n return (\n \n {originalAmount && (\n \n {currency}\n {originalAmount}\n \n )}\n \n {currency}\n {amount}\n \n {period !== \"once\" && (\n {periodLabel[period]}\n )}\n
\n );\n },\n);\nPlanCardPrice.displayName = \"PlanCardPrice\";\n\nconst PlanCardFeatures = React.forwardRef<\n HTMLUListElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nPlanCardFeatures.displayName = \"PlanCardFeatures\";\n\ninterface PlanCardFeatureProps extends React.HTMLAttributes {\n included?: boolean;\n}\n\nconst PlanCardFeature = React.forwardRef(\n ({ className, included = true, children, ...props }, ref) => (\n \n {included ? (\n \n ) : (\n \n )}\n {children}\n \n ),\n);\nPlanCardFeature.displayName = \"PlanCardFeature\";\n\ninterface PlanCardActionProps\n extends React.ComponentPropsWithoutRef {}\n\nconst PlanCardAction = React.forwardRef(\n ({ className, ...props }, ref) => (\n \n setPeriod(\"year\")}\n className={cn(\n \"inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all\",\n period === \"year\"\n ? \"bg-background text-foreground shadow-sm\"\n : \"text-muted-foreground hover:text-foreground\",\n )}\n >\n {yearLabel}\n {yearDiscount && (\n \n {yearDiscount}\n \n )}\n \n \n );\n },\n);\nPlanGroupToggle.displayName = \"PlanGroupToggle\";\n\ninterface PlanGroupContentProps\n extends React.HTMLAttributes,\n VariantProps {}\n\nconst PlanGroupContent = React.forwardRef<\n HTMLDivElement,\n PlanGroupContentProps\n>(({ className, layout, columns, ...props }, ref) => (\n \n));\nPlanGroupContent.displayName = \"PlanGroupContent\";\n\ninterface PlanPriceProps\n extends Omit<\n React.ComponentPropsWithoutRef,\n \"amount\" | \"originalAmount\" | \"period\"\n > {\n monthlyAmount: number;\n yearlyAmount: number;\n originalMonthlyAmount?: number;\n originalYearlyAmount?: number;\n}\n\nconst PlanPrice = React.forwardRef(\n (\n {\n monthlyAmount,\n yearlyAmount,\n originalMonthlyAmount,\n originalYearlyAmount,\n ...props\n },\n ref,\n ) => {\n const { period } = usePlanGroup();\n\n const amount = period === \"month\" ? monthlyAmount : yearlyAmount;\n const originalAmount =\n period === \"month\" ? originalMonthlyAmount : originalYearlyAmount;\n\n return (\n \n );\n },\n);\nPlanPrice.displayName = \"PlanPrice\";\n\nexport {\n PlanGroup,\n PlanGroupHeader,\n PlanGroupTitle,\n PlanGroupDescription,\n PlanGroupToggle,\n PlanGroupContent,\n PlanPrice,\n usePlanGroup,\n planGroupVariants,\n};\n\nexport type {\n PlanGroupProps,\n PlanGroupToggleProps,\n PlanGroupContentProps,\n PlanPriceProps,\n BillingPeriod,\n};\n", "type": "registry:ui", "target": "components/ui/plan-group.tsx" } ], "dependencies": [ "class-variance-authority" ], "registryDependencies": [ "https://billui.com/r/utils.json", "https://billui.com/r/plan-card.json" ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pricing-table", "type": "registry:ui", "title": "Pricing Table", "description": "A comparison table for displaying multiple pricing plans side by side with feature comparison.", "files": [ { "path": "src/registry/ui/pricing-table.tsx", "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { Check, Minus, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst GRID_COLS = {\n 3: \"grid-cols-3\",\n 4: \"grid-cols-4\",\n 5: \"grid-cols-5\",\n} as const;\n\ntype ColumnCount = keyof typeof GRID_COLS;\n\nconst pricingTableVariants = cva(\n \"relative w-full overflow-hidden rounded-2xl border bg-card text-card-foreground\",\n {\n variants: {\n variant: {\n default: \"border-border\",\n elevated: \"border-border shadow-lg\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\ninterface PricingTableProps\n extends React.HTMLAttributes,\n VariantProps {\n /** Accessible label for the pricing table */\n \"aria-label\"?: string;\n}\n\nconst PricingTable = React.forwardRef(\n (\n {\n className,\n variant,\n \"aria-label\": ariaLabel = \"Pricing comparison\",\n ...props\n },\n ref,\n ) => (\n \n ),\n);\nPricingTable.displayName = \"PricingTable\";\n\ninterface PricingTableHeaderProps extends React.HTMLAttributes {\n columns?: ColumnCount;\n}\n\nconst PricingTableHeader = React.forwardRef<\n HTMLDivElement,\n PricingTableHeaderProps\n>(({ className, columns = 4, ...props }, ref) => (\n \n));\nPricingTableHeader.displayName = \"PricingTableHeader\";\n\ninterface PricingTablePlanProps extends React.HTMLAttributes {\n highlighted?: boolean;\n}\n\nconst PricingTablePlan = React.forwardRef<\n HTMLDivElement,\n PricingTablePlanProps\n>(({ className, highlighted, ...props }, ref) => (\n \n));\nPricingTablePlan.displayName = \"PricingTablePlan\";\n\ninterface PricingTablePlanNameProps\n extends React.HTMLAttributes {\n /** Heading level (default: 3) */\n as?: \"h2\" | \"h3\" | \"h4\";\n}\n\nconst PricingTablePlanName = React.forwardRef<\n HTMLHeadingElement,\n PricingTablePlanNameProps\n>(({ className, as: Component = \"h3\", ...props }, ref) => (\n \n));\nPricingTablePlanName.displayName = \"PricingTablePlanName\";\n\ninterface PricingTablePriceProps extends React.HTMLAttributes {\n amount: number;\n currency?: string;\n period?: \"month\" | \"year\" | \"once\";\n}\n\nconst PricingTablePrice = React.forwardRef<\n HTMLDivElement,\n PricingTablePriceProps\n>(({ className, amount, currency = \"$\", period = \"month\", ...props }, ref) => {\n const periodLabel = {\n month: \"/mo\",\n year: \"/yr\",\n once: \"\",\n };\n\n const periodFullLabel = {\n month: \"per month\",\n year: \"per year\",\n once: \"one-time payment\",\n };\n\n // Screen reader friendly price\n const srLabel =\n period === \"once\"\n ? `${currency}${amount}, ${periodFullLabel[period]}`\n : `${currency}${amount} ${periodFullLabel[period]}`;\n\n return (\n \n {srLabel}\n \n {currency}\n {amount}\n \n {period !== \"once\" && (\n \n {periodLabel[period]}\n \n )}\n \n );\n});\nPricingTablePrice.displayName = \"PricingTablePrice\";\n\nconst PricingTablePlanDescription = React.forwardRef<\n HTMLParagraphElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => (\n \n));\nPricingTablePlanDescription.displayName = \"PricingTablePlanDescription\";\n\ninterface PricingTableActionProps\n extends React.ComponentPropsWithoutRef {}\n\nconst PricingTableAction = React.forwardRef<\n HTMLButtonElement,\n PricingTableActionProps\n>(({ className, ...props }, ref) => (\n \n )}\n \n \n );\n },\n);\nUsageCardList.displayName = \"UsageCardList\";\n\ninterface UsageCardItemProps extends React.HTMLAttributes {\n highlighted?: boolean;\n}\n\nconst UsageCardItem = React.forwardRef(\n ({ className, highlighted = false, children, ...props }, ref) => {\n return (\n \n {children}\n \n );\n },\n);\nUsageCardItem.displayName = \"UsageCardItem\";\n\ninterface UsageCardItemLabelProps\n extends React.HTMLAttributes {}\n\nconst UsageCardItemLabel = React.forwardRef<\n HTMLSpanElement,\n UsageCardItemLabelProps\n>(({ className, ...props }, ref) => (\n \n));\nUsageCardItemLabel.displayName = \"UsageCardItemLabel\";\n\ninterface UsageCardItemValueProps\n extends React.HTMLAttributes {\n amount?: number;\n currency?: string;\n unit?: string;\n}\n\nconst UsageCardItemValue = React.forwardRef<\n HTMLSpanElement,\n UsageCardItemValueProps\n>(({ className, amount, currency = \"$\", unit, children, ...props }, ref) => (\n \n {children ??\n (amount !== undefined ? (\n <>\n {currency}\n {amount.toLocaleString(\"en-US\", {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}\n {unit && {unit}}\n \n ) : null)}\n \n));\nUsageCardItemValue.displayName = \"UsageCardItemValue\";\n\n// Metric bar for showing usage with visual indicator\ninterface UsageCardMeterProps extends React.HTMLAttributes {\n used: number;\n limit: number;\n label: string;\n unit?: string;\n showPercentage?: boolean;\n}\n\nconst UsageCardMeter = React.forwardRef(\n (\n { className, used, limit, label, unit, showPercentage = false, ...props },\n ref,\n ) => {\n const percentage = Math.min((used / limit) * 100, 100);\n const isWarning = percentage >= 80;\n const isCritical = percentage >= 95;\n\n return (\n \n
\n {label}\n \n {used.toLocaleString()}\n {unit && ` ${unit}`}\n \n {\" \"}\n / {limit.toLocaleString()}\n {unit && ` ${unit}`}\n \n {showPercentage && (\n \n ({percentage.toFixed(0)}%)\n \n )}\n \n
\n
\n \n
\n \n );\n },\n);\nUsageCardMeter.displayName = \"UsageCardMeter\";\n\n// Total row for the bottom\ninterface UsageCardTotalProps extends React.HTMLAttributes {\n label?: string;\n amount: number;\n currency?: string;\n}\n\nconst UsageCardTotal = React.forwardRef(\n ({ className, label = \"Total\", amount, currency = \"$\", ...props }, ref) => (\n \n {label}\n \n {currency}\n {amount.toLocaleString(\"en-US\", {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}\n \n \n ),\n);\nUsageCardTotal.displayName = \"UsageCardTotal\";\n\nexport {\n UsageCard,\n UsageCardHeader,\n UsageCardPeriod,\n UsageCardAction,\n UsageCardSummary,\n UsageCardLabels,\n UsageCardLabel,\n UsageCardProgress,\n UsageCardList,\n UsageCardItem,\n UsageCardItemLabel,\n UsageCardItemValue,\n UsageCardMeter,\n UsageCardTotal,\n usageCardVariants,\n useUsageCardList,\n};\n\nexport type {\n UsageCardProps,\n UsageCardHeaderProps,\n UsageCardPeriodProps,\n UsageCardActionProps,\n UsageCardSummaryProps,\n UsageCardLabelsProps,\n UsageCardLabelProps,\n UsageCardProgressProps,\n UsageCardListProps,\n UsageCardItemProps,\n UsageCardItemLabelProps,\n UsageCardItemValueProps,\n UsageCardMeterProps,\n UsageCardTotalProps,\n UsageCardListContextValue,\n};\n", "type": "registry:ui", "target": "components/ui/usage-card.tsx" } ], "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button", "progress", "https://billui.com/r/utils.json" ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "animated-usage-card", "type": "registry:ui", "title": "Animated Usage Card", "description": "An animated version of usage-card with smooth spring animations powered by motion.", "files": [ { "path": "src/registry/animated/animated-usage-card.tsx", "content": "\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { ChevronDown } from \"lucide-react\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport * as React from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst animatedUsageCardVariants = cva(\n \"relative min-w-[280px] rounded-2xl border bg-card text-card-foreground\",\n {\n variants: {\n variant: {\n default: \"border-border\",\n elevated: \"border-border shadow-lg\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n },\n);\n\ninterface AnimatedUsageCardProps\n extends VariantProps {\n className?: string;\n children?: React.ReactNode;\n}\n\nconst AnimatedUsageCard = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardProps\n>(({ className, variant, children }, ref) => (\n \n {children}\n \n));\nAnimatedUsageCard.displayName = \"AnimatedUsageCard\";\n\ninterface AnimatedUsageCardHeaderProps\n extends React.HTMLAttributes {}\n\nconst AnimatedUsageCardHeader = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardHeaderProps\n>(({ className, ...props }, ref) => (\n \n));\nAnimatedUsageCardHeader.displayName = \"AnimatedUsageCardHeader\";\n\ninterface AnimatedUsageCardPeriodProps\n extends React.HTMLAttributes {\n daysRemaining?: number;\n}\n\nconst AnimatedUsageCardPeriod = React.forwardRef<\n HTMLSpanElement,\n AnimatedUsageCardPeriodProps\n>(({ className, daysRemaining, children, ...props }, ref) => (\n \n {children ??\n (daysRemaining !== undefined &&\n `${daysRemaining} days remaining in cycle`)}\n \n));\nAnimatedUsageCardPeriod.displayName = \"AnimatedUsageCardPeriod\";\n\ninterface AnimatedUsageCardActionProps\n extends React.ComponentPropsWithoutRef {}\n\nconst AnimatedUsageCardAction = React.forwardRef<\n HTMLButtonElement,\n AnimatedUsageCardActionProps\n>(({ className, ...props }, ref) => (\n \n));\nAnimatedUsageCardAction.displayName = \"AnimatedUsageCardAction\";\n\ninterface AnimatedUsageCardSummaryProps\n extends React.HTMLAttributes {}\n\nconst AnimatedUsageCardSummary = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardSummaryProps\n>(({ className, ...props }, ref) => (\n
\n));\nAnimatedUsageCardSummary.displayName = \"AnimatedUsageCardSummary\";\n\ninterface AnimatedUsageCardLabelsProps\n extends React.HTMLAttributes {}\n\nconst AnimatedUsageCardLabels = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardLabelsProps\n>(({ className, ...props }, ref) => (\n \n));\nAnimatedUsageCardLabels.displayName = \"AnimatedUsageCardLabels\";\n\ninterface AnimatedUsageCardLabelProps\n extends React.HTMLAttributes {\n label: string;\n amount: number;\n limit?: number;\n currency?: string;\n align?: \"left\" | \"right\";\n}\n\nconst AnimatedUsageCardLabel = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardLabelProps\n>(\n (\n {\n className,\n label,\n amount,\n limit,\n currency = \"$\",\n align = \"left\",\n ...props\n },\n ref,\n ) => (\n \n {label}\n \n {currency}\n {amount.toLocaleString(\"en-US\", {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}\n {limit !== undefined && (\n \n {\" / \"}\n {currency}\n {limit.toLocaleString(\"en-US\", {\n minimumFractionDigits: 0,\n maximumFractionDigits: 0,\n })}\n \n )}\n \n
\n ),\n);\nAnimatedUsageCardLabel.displayName = \"AnimatedUsageCardLabel\";\n\ninterface AnimatedUsageCardProgressProps\n extends React.HTMLAttributes {\n value: number;\n max?: number;\n showOverage?: boolean;\n}\n\nconst AnimatedUsageCardProgress = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardProgressProps\n>(({ className, value, max = 100, showOverage = false, ...props }, ref) => {\n const percentage = Math.min((value / max) * 100, 100);\n const isOverage = value > max;\n\n const motionValue = useMotionValue(0);\n const springValue = useSpring(motionValue, {\n stiffness: 120,\n damping: 14,\n mass: 0.8,\n });\n const width = useTransform(springValue, (v) => `${v}%`);\n\n React.useEffect(() => {\n motionValue.set(percentage);\n }, [percentage, motionValue]);\n\n return (\n \n \n \n );\n});\nAnimatedUsageCardProgress.displayName = \"AnimatedUsageCardProgress\";\n\ninterface AnimatedUsageCardListContextValue {\n expanded: boolean;\n setExpanded: (expanded: boolean) => void;\n itemCount: number;\n collapsedHeight: number;\n expandedHeight: number;\n}\n\nconst AnimatedUsageCardListContext =\n React.createContext(null);\n\nfunction useAnimatedUsageCardList() {\n const context = React.useContext(AnimatedUsageCardListContext);\n if (!context) {\n throw new Error(\n \"useAnimatedUsageCardList must be used within AnimatedUsageCardList\",\n );\n }\n return context;\n}\n\nconst ITEM_HEIGHT = 44;\n\ninterface AnimatedUsageCardListProps {\n className?: string;\n children?: React.ReactNode;\n defaultExpanded?: boolean;\n /** Number of items to show when collapsed (can be decimal like 1.5 to show partial item) */\n visibleItems?: number;\n /** Enable collapse/expand functionality */\n collapsible?: boolean;\n /** Show dividers between items */\n dividers?: boolean;\n}\n\nconst AnimatedUsageCardList = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardListProps\n>(\n (\n {\n className,\n defaultExpanded = false,\n visibleItems = 1.5,\n collapsible = false,\n dividers = true,\n children,\n },\n ref,\n ) => {\n const [expanded, setExpanded] = React.useState(defaultExpanded);\n const childrenArray = React.Children.toArray(children).filter((child) =>\n React.isValidElement(child),\n );\n const itemCount = childrenArray.length;\n\n const bounceTransition = {\n type: \"spring\" as const,\n stiffness: 400,\n damping: 25,\n mass: 1,\n };\n\n const collapsedHeight = visibleItems * ITEM_HEIGHT;\n const expandedHeight = itemCount * ITEM_HEIGHT;\n\n return (\n \n \n \n {childrenArray}\n \n\n {collapsible && (\n \n )}\n\n {collapsible && itemCount > 1 && (\n setExpanded(!expanded)}\n className=\"absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2 z-10 flex h-7 w-7 items-center justify-center rounded-full border border-border bg-card text-muted-foreground shadow-sm hover:bg-muted hover:text-foreground transition-colors\"\n aria-label={expanded ? \"Collapse\" : \"Expand\"}\n whileHover={{ scale: 1.15 }}\n whileTap={{ scale: 0.9 }}\n transition={{\n type: \"spring\",\n stiffness: 500,\n damping: 20,\n }}\n layout\n >\n \n \n \n \n )}\n \n \n );\n },\n);\nAnimatedUsageCardList.displayName = \"AnimatedUsageCardList\";\n\ninterface AnimatedUsageCardItemProps\n extends React.HTMLAttributes {\n highlighted?: boolean;\n}\n\nconst AnimatedUsageCardItem = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardItemProps\n>(({ className, highlighted = false, children, ...props }, ref) => {\n return (\n \n {children}\n \n );\n});\nAnimatedUsageCardItem.displayName = \"AnimatedUsageCardItem\";\n\ninterface AnimatedUsageCardItemLabelProps\n extends React.HTMLAttributes {}\n\nconst AnimatedUsageCardItemLabel = React.forwardRef<\n HTMLSpanElement,\n AnimatedUsageCardItemLabelProps\n>(({ className, ...props }, ref) => (\n \n));\nAnimatedUsageCardItemLabel.displayName = \"AnimatedUsageCardItemLabel\";\n\ninterface AnimatedUsageCardItemValueProps\n extends React.HTMLAttributes {\n amount?: number;\n currency?: string;\n unit?: string;\n}\n\nconst AnimatedUsageCardItemValue = React.forwardRef<\n HTMLSpanElement,\n AnimatedUsageCardItemValueProps\n>(({ className, amount, currency = \"$\", unit, children, ...props }, ref) => (\n \n {children ??\n (amount !== undefined ? (\n <>\n {currency}\n {amount.toLocaleString(\"en-US\", {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n })}\n {unit && {unit}}\n \n ) : null)}\n \n));\nAnimatedUsageCardItemValue.displayName = \"AnimatedUsageCardItemValue\";\n\ninterface AnimatedUsageCardMeterProps\n extends React.HTMLAttributes {\n used: number;\n limit: number;\n label: string;\n unit?: string;\n showPercentage?: boolean;\n}\n\nconst AnimatedUsageCardMeter = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardMeterProps\n>(\n (\n { className, used, limit, label, unit, showPercentage = false, ...props },\n ref,\n ) => {\n const percentage = Math.min((used / limit) * 100, 100);\n const isWarning = percentage >= 80;\n const isCritical = percentage >= 95;\n\n const motionValue = useMotionValue(0);\n const springValue = useSpring(motionValue, {\n stiffness: 120,\n damping: 12,\n mass: 0.8,\n });\n const width = useTransform(springValue, (v) => `${v}%`);\n\n React.useEffect(() => {\n motionValue.set(percentage);\n }, [percentage, motionValue]);\n\n return (\n \n
\n {label}\n \n \n {unit && ` ${unit}`}\n \n {\" \"}\n / {limit.toLocaleString()}\n {unit && ` ${unit}`}\n \n {showPercentage && (\n \n (\n %)\n \n )}\n \n
\n
\n \n
\n \n );\n },\n);\nAnimatedUsageCardMeter.displayName = \"AnimatedUsageCardMeter\";\n\ninterface AnimatedNumberProps {\n value: number;\n decimals?: number;\n}\n\nfunction AnimatedNumber({ value, decimals = 0 }: AnimatedNumberProps) {\n const motionValue = useMotionValue(0);\n const springValue = useSpring(motionValue, {\n stiffness: 150,\n damping: 15,\n mass: 0.5,\n });\n const display = useTransform(springValue, (v) =>\n decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString(),\n );\n\n React.useEffect(() => {\n motionValue.set(value);\n }, [value, motionValue]);\n\n return {display};\n}\n\ninterface AnimatedUsageCardTotalProps {\n className?: string;\n label?: string;\n amount: number;\n currency?: string;\n}\n\nconst AnimatedUsageCardTotal = React.forwardRef<\n HTMLDivElement,\n AnimatedUsageCardTotalProps\n>(({ className, label = \"Total\", amount, currency = \"$\" }, ref) => {\n const motionValue = useMotionValue(0);\n const springValue = useSpring(motionValue, {\n stiffness: 150,\n damping: 15,\n mass: 0.5,\n });\n const display = useTransform(springValue, (v) =>\n v.toLocaleString(\"en-US\", {\n minimumFractionDigits: 2,\n maximumFractionDigits: 2,\n }),\n );\n\n React.useEffect(() => {\n motionValue.set(amount);\n }, [amount, motionValue]);\n\n return (\n \n {label}\n \n {currency}\n {display}\n \n \n );\n});\nAnimatedUsageCardTotal.displayName = \"AnimatedUsageCardTotal\";\n\nexport {\n AnimatedUsageCard,\n AnimatedUsageCardHeader,\n AnimatedUsageCardPeriod,\n AnimatedUsageCardAction,\n AnimatedUsageCardSummary,\n AnimatedUsageCardLabels,\n AnimatedUsageCardLabel,\n AnimatedUsageCardProgress,\n AnimatedUsageCardList,\n AnimatedUsageCardItem,\n AnimatedUsageCardItemLabel,\n AnimatedUsageCardItemValue,\n AnimatedUsageCardMeter,\n AnimatedUsageCardTotal,\n animatedUsageCardVariants,\n useAnimatedUsageCardList,\n};\n\nexport type {\n AnimatedUsageCardProps,\n AnimatedUsageCardHeaderProps,\n AnimatedUsageCardPeriodProps,\n AnimatedUsageCardActionProps,\n AnimatedUsageCardSummaryProps,\n AnimatedUsageCardLabelsProps,\n AnimatedUsageCardLabelProps,\n AnimatedUsageCardProgressProps,\n AnimatedUsageCardListProps,\n AnimatedUsageCardItemProps,\n AnimatedUsageCardItemLabelProps,\n AnimatedUsageCardItemValueProps,\n AnimatedUsageCardMeterProps,\n AnimatedUsageCardTotalProps,\n AnimatedUsageCardListContextValue,\n};\n", "type": "registry:ui", "target": "components/ui/animated-usage-card.tsx" } ], "dependencies": [ "class-variance-authority", "lucide-react" ], "registryDependencies": [ "button", "https://billui.com/r/utils.json" ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "billing-address-data", "type": "registry:lib", "title": "Billing Address Data", "description": "Billing Address Data component", "files": [ { "path": "src/registry/lib/billing-address-data.ts", "content": "import { Country, type ICountry, type IState, State } from \"country-state-city\";\n\n/** All countries sorted alphabetically */\nexport const COUNTRIES: ICountry[] = Country.getAllCountries().sort((a, b) =>\n a.name.localeCompare(b.name),\n);\n\n/** Get states/provinces for a country by ISO code */\nexport function getStatesForCountry(countryCode: string): IState[] {\n return State.getStatesOfCountry(countryCode);\n}\n\nexport type { ICountry, IState };\n", "type": "registry:lib", "target": "lib/billing-address-data.ts" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "use-controllable-state", "type": "registry:lib", "title": "Use Controllable State", "description": "Use Controllable State component", "files": [ { "path": "src/registry/lib/use-controllable-state.ts", "content": "\"use client\";\n\nimport * as React from \"react\";\n\n/**\n * Hook for components that support both controlled and uncontrolled modes.\n *\n * @param controlledValue - The controlled value (if provided)\n * @param defaultValue - The default value for uncontrolled mode\n * @param onChange - Callback fired when value changes\n * @returns A tuple of [currentValue, setValue]\n *\n * @example\n * ```tsx\n * interface Props {\n * value?: string;\n * defaultValue?: string;\n * onValueChange?: (value: string) => void;\n * }\n *\n * function Input({ value, defaultValue = \"\", onValueChange }: Props) {\n * const [currentValue, setValue] = useControllableState(\n * value,\n * defaultValue,\n * onValueChange,\n * );\n *\n * return (\n * setValue(e.target.value)}\n * />\n * );\n * }\n * ```\n */\nexport function useControllableState(\n controlledValue: T | undefined,\n defaultValue: T,\n onChange?: (value: T) => void,\n): [T, (value: T) => void] {\n const [internalValue, setInternalValue] = React.useState(defaultValue);\n const isControlled = controlledValue !== undefined;\n const value = isControlled ? controlledValue : internalValue;\n\n const setValue = React.useCallback(\n (newValue: T) => {\n if (!isControlled) {\n setInternalValue(newValue);\n }\n onChange?.(newValue);\n },\n [isControlled, onChange],\n );\n\n return [value, setValue];\n}\n", "type": "registry:lib", "target": "lib/use-controllable-state.ts" } ] }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "utils", "type": "registry:lib", "title": "Utils", "description": "Utils component", "files": [ { "path": "src/registry/lib/utils.ts", "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n", "type": "registry:lib", "target": "lib/utils.ts" } ], "dependencies": [ "clsx", "tailwind-merge" ] } ] }