50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T15df,import { cva, type VariantProps } from "class-variance-authority"; import { Children, cloneElement, createContext, useContext, useMemo, } from "react"; import { ActivityIndicator, Pressable, Text } from "react-native"; import { cn } from "@/lib/utils"; // Types type InternalButtonContextType = VariantProps & { busy?: boolean; disabled?: boolean; }; type ButtonChildProps = { children: React.ReactNode; className?: string; }; export type ButtonProps = React.ComponentProps & InternalButtonContextType & { children: React.ReactNode; }; // Context const ButtonContext = createContext(null); const useButtonContext = () => { const context = useContext(ButtonContext); if (!context) { throw new Error("useButtonContext must be used within a Button component"); } return context; }; // Components export const Button = ({ className, variant, size, busy, disabled, children, accessibilityRole = "button", accessibilityState, ...props }: ButtonProps) => { const ctx = useMemo(() => { return { busy, disabled, size, variant, }; }, [variant, size, busy, disabled]); return ( {Children.map(children, (child) => { if (typeof child === "string") { if (size === "icon") { // Icon buttons shouldn't render text return null; } return {child}; } return child; })} {busy ? : null} ); }; export const ButtonText = (props: ButtonChildProps) => { const ctx = useButtonContext(); return ( ); }; export const ButtonIcon = ({ children, ...props }: ButtonChildProps) => { const ctx = useButtonContext(); const child = Children.only(children); if (!child) { if (__DEV__) { throw new Error("ButtonIcon expects a single React element as children"); } return null; } return cloneElement(child as React.ReactElement, { ...props, className: cn( buttonIconVariants(ctx), ctx.busy && "opacity-0", props.className ), }); }; const ButtonSpinner = () => { const ctx = useButtonContext(); return ( ); }; // Styles export const buttonVariants = cva( "flex w-full shrink-0 flex-row items-center justify-center gap-2 whitespace-nowrap rounded-lg border-continuous font-medium text-sm", { defaultVariants: { size: "default", variant: "default", }, variants: { size: { default: "h-12 px-4", icon: "size-12", "icon-lg": "size-14", "icon-sm": "size-8", lg: "h-14 px-6", sm: "h-8 gap-1 px-3", }, variant: { default: "bg-primary active:bg-primary/80", destructive: "bg-destructive active:bg-destructive/80 dark:bg-destructive/60", ghost: "bg-background active:bg-accent/90 dark:active:bg-accent/50", link: "h-auto w-auto p-0 active:opacity-50", outline: "border border-border bg-background active:bg-accent/90 dark:border-input dark:bg-input/30 dark:active:bg-input/50", secondary: "bg-secondary active:bg-secondary/50", }, }, } ); export const buttonTextVariants = cva( "whitespace-nowrap font-semibold text-sm", { defaultVariants: { size: "default", variant: "default", }, variants: { size: { default: "text-lg", icon: "", "icon-lg": "", "icon-sm": "", lg: "text-xl", sm: "text-sm", }, variant: { default: "text-primary-foreground", destructive: "text-white", ghost: "text-accent-foreground", link: "text-primary", outline: "text-foreground dark:text-accent-foreground", secondary: "text-secondary-foreground", }, }, } ); export const buttonIconVariants = cva("", { defaultVariants: { size: "default", variant: "default", }, variants: { size: { default: "size-6", icon: "size-7", "icon-lg": "size-8", "icon-sm": "size-6", lg: "size-7", sm: "size-5", }, variant: { default: "text-primary-foreground", destructive: "text-white", ghost: "text-accent-foreground", link: "text-primary", outline: "text-foreground dark:text-accent-foreground", secondary: "text-secondary-foreground", }, }, }); export const buttonSpinnerVariants = cva("", { defaultVariants: { variant: "default", }, variants: { variant: { default: "accent-primary-foreground", destructive: "accent-white", ghost: "accent-accent-foreground", link: "accent-primary", outline: "accent-foreground dark:accent-accent-foreground", secondary: "accent-secondary-foreground", }, }, }); 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"ui/button.tsx","content":"$51","type":"registry:ui","target":"@ui/button.tsx"}],"className":"h-[70svh] min-h-80"}]]}]