{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "loaders",
	"title": "Loading Primitives",
	"description": "Accessible loaders, pending buttons, section and page indicators, local overlays, and list/table skeleton recipes",
	"dependencies": ["daisyui"],
	"files": [
		{
			"path": "registry/default/ui/loaders/loader.tsx",
			"content": "import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { Children } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type LoaderVariant = 'spinner' | 'dots' | 'bars' | 'ring';\nexport type LoaderSize = 'xs' | 'sm' | 'md' | 'lg';\n\nconst variantClass: Record<LoaderVariant, string> = {\n\tspinner: 'loading-spinner',\n\tdots: 'loading-dots',\n\tbars: 'loading-bars',\n\tring: 'loading-ring',\n};\n\nconst sizeClass: Record<LoaderSize, string> = {\n\txs: 'loading-xs',\n\tsm: 'loading-sm',\n\tmd: 'loading-md',\n\tlg: 'loading-lg',\n};\n\nfunction hasNode(value: ReactNode) {\n\treturn Children.toArray(value).some((node) => typeof node !== 'string' || node.trim().length > 0);\n}\n\nexport type LoaderProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {\n\tvariant?: LoaderVariant;\n\tsize?: LoaderSize;\n\tlabel?: string;\n\tdecorative?: boolean;\n};\n\nexport function Loader({\n\tvariant = 'spinner',\n\tsize = 'sm',\n\tlabel = '加载中',\n\tdecorative = false,\n\tclassName,\n\trole,\n\t'aria-label': ariaLabel,\n\t'aria-hidden': ariaHidden,\n\t...props\n}: LoaderProps) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot='loader'\n\t\t\tdata-variant={variant}\n\t\t\tdata-size={size}\n\t\t\trole={decorative ? undefined : (role ?? 'status')}\n\t\t\taria-live={decorative ? undefined : 'polite'}\n\t\t\taria-label={decorative ? undefined : (ariaLabel ?? label)}\n\t\t\taria-hidden={decorative ? true : ariaHidden}\n\t\t\tclassName={cn('inline-grid shrink-0 place-items-center align-middle leading-none', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span\n\t\t\t\taria-hidden='true'\n\t\t\t\tclassName={cn('loading motion-reduce:animate-none', variantClass[variant], sizeClass[size])}\n\t\t\t/>\n\t\t</span>\n\t);\n}\n\nexport type LoadingIndicatorLayout = 'inline' | 'section' | 'page';\n\nexport type LoadingIndicatorProps = ComponentPropsWithRef<'div'> & {\n\tvariant?: LoaderVariant;\n\tsize?: LoaderSize;\n\tlayout?: LoadingIndicatorLayout;\n\tlabel?: ReactNode;\n\tdescription?: ReactNode;\n\tloaderLabel?: string;\n\tcontentClassName?: string;\n};\n\nconst layoutClass: Record<LoadingIndicatorLayout, string> = {\n\tinline: 'inline-flex min-h-0 flex-row items-center gap-2 text-left',\n\tsection: 'flex min-h-40 flex-col items-center justify-center gap-2 text-center',\n\tpage: 'flex min-h-[24rem] flex-col items-center justify-center gap-3 text-center',\n};\n\nexport function LoadingIndicator({\n\tvariant = 'dots',\n\tsize = 'md',\n\tlayout = 'section',\n\tlabel = '正在加载',\n\tdescription,\n\tloaderLabel = '加载中',\n\tcontentClassName,\n\tclassName,\n\t'aria-label': ariaLabel,\n\t...props\n}: LoadingIndicatorProps) {\n\tconst showLabel = hasNode(label);\n\tconst showDescription = hasNode(description);\n\treturn (\n\t\t<div\n\t\t\tdata-slot='loading-indicator'\n\t\t\tdata-layout={layout}\n\t\t\trole='status'\n\t\t\taria-live='polite'\n\t\t\taria-busy='true'\n\t\t\taria-label={ariaLabel ?? (showLabel ? undefined : loaderLabel)}\n\t\t\tclassName={cn('text-base-content min-w-0', layoutClass[layout], className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Loader decorative variant={variant} size={size} />\n\t\t\t{showLabel || showDescription ? (\n\t\t\t\t<div className={cn('min-w-0', layout === 'inline' && 'flex items-baseline gap-2', contentClassName)}>\n\t\t\t\t\t{showLabel ? <div className='text-sm font-medium'>{label}</div> : null}\n\t\t\t\t\t{showDescription ? <div className='text-base-content/65 text-xs leading-5'>{description}</div> : null}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n",
			"type": "registry:component",
			"target": "@components/loaders/loader.tsx"
		},
		{
			"path": "registry/default/ui/loaders/pending-button.tsx",
			"content": "import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport type { LoaderSize, LoaderVariant } from './loader';\nimport { Loader } from './loader';\n\nexport type PendingButtonProps = ComponentPropsWithRef<'button'> & {\n\tpending?: boolean;\n\tpendingLabel?: ReactNode;\n\tpendingAriaLabel?: string;\n\tloaderVariant?: LoaderVariant;\n\tloaderSize?: LoaderSize;\n};\n\nexport function PendingButton({\n\tpending = false,\n\tpendingLabel = '处理中',\n\tpendingAriaLabel,\n\tloaderVariant = 'spinner',\n\tloaderSize = 'xs',\n\tdisabled,\n\ttype = 'button',\n\tchildren,\n\tclassName,\n\t'aria-label': ariaLabel,\n\t...props\n}: PendingButtonProps) {\n\tconst inferredIdleLabel = typeof children === 'string' || typeof children === 'number' ? String(children) : undefined;\n\tconst inferredPendingLabel =\n\t\ttypeof pendingLabel === 'string' || typeof pendingLabel === 'number' ? String(pendingLabel) : undefined;\n\treturn (\n\t\t<button\n\t\t\tdata-slot='pending-button'\n\t\t\tdata-pending={pending ? 'true' : 'false'}\n\t\t\ttype={type}\n\t\t\tdisabled={disabled || pending}\n\t\t\taria-busy={pending || undefined}\n\t\t\taria-label={pending ? (pendingAriaLabel ?? inferredPendingLabel ?? ariaLabel) : (ariaLabel ?? inferredIdleLabel)}\n\t\t\tclassName={cn('btn', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<span className='grid min-w-0 place-items-center'>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden={pending || undefined}\n\t\t\t\t\tclassName={cn('col-start-1 row-start-1 inline-flex min-w-0 items-center gap-2', pending && 'invisible')}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</span>\n\t\t\t\t<span\n\t\t\t\t\taria-hidden={!pending || undefined}\n\t\t\t\t\tclassName={cn('col-start-1 row-start-1 inline-flex min-w-0 items-center gap-2', !pending && 'invisible')}\n\t\t\t\t>\n\t\t\t\t\t<Loader decorative size={loaderSize} variant={loaderVariant} />\n\t\t\t\t\t{pendingLabel}\n\t\t\t\t</span>\n\t\t\t</span>\n\t\t</button>\n\t);\n}\n",
			"type": "registry:component",
			"target": "@components/loaders/pending-button.tsx"
		},
		{
			"path": "registry/default/ui/loaders/loading-overlay.tsx",
			"content": "import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\nimport type { LoaderSize, LoaderVariant } from './loader';\nimport { LoadingIndicator } from './loader';\n\nexport type LoadingOverlayBackdrop = 'subtle' | 'solid' | 'transparent';\n\nexport type LoadingOverlayProps = ComponentPropsWithRef<'div'> & {\n\tactive?: boolean;\n\tlabel?: ReactNode;\n\tdescription?: ReactNode;\n\tvariant?: LoaderVariant;\n\tsize?: LoaderSize;\n\tbackdrop?: LoadingOverlayBackdrop;\n\tcontentClassName?: string;\n};\n\nconst backdropClass: Record<LoadingOverlayBackdrop, string> = {\n\tsubtle: 'bg-base-100/70 backdrop-blur-[1px]',\n\tsolid: 'bg-base-100',\n\ttransparent: 'bg-transparent',\n};\n\nexport function LoadingOverlay({\n\tactive = false,\n\tlabel = '正在刷新',\n\tdescription,\n\tvariant = 'spinner',\n\tsize = 'md',\n\tbackdrop = 'subtle',\n\tcontentClassName,\n\tchildren,\n\tclassName,\n\t...props\n}: LoadingOverlayProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot='loading-overlay'\n\t\t\tdata-active={active ? 'true' : 'false'}\n\t\t\taria-busy={active || undefined}\n\t\t\tclassName={cn('relative min-w-0', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div\n\t\t\t\tdata-slot='loading-overlay-content'\n\t\t\t\tinert={active || undefined}\n\t\t\t\taria-hidden={active || undefined}\n\t\t\t\tclassName={cn('min-w-0', contentClassName)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t\t{active ? (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot='loading-overlay-backdrop'\n\t\t\t\t\tclassName={cn('absolute inset-0 z-10 grid place-items-center', backdropClass[backdrop])}\n\t\t\t\t>\n\t\t\t\t\t<LoadingIndicator\n\t\t\t\t\t\tclassName='bg-base-100/90 rounded-box border-base-300 max-w-[min(90%,24rem)] border px-4 py-3 shadow-sm'\n\t\t\t\t\t\tcontentClassName='block'\n\t\t\t\t\t\tlayout='inline'\n\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\tdescription={description}\n\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}\n",
			"type": "registry:component",
			"target": "@components/loaders/loading-overlay.tsx"
		},
		{
			"path": "registry/default/ui/loaders/skeleton.tsx",
			"content": "import type { ComponentPropsWithRef } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport type SkeletonShape = 'text' | 'rect' | 'circle';\n\nexport type SkeletonProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n\tshape?: SkeletonShape;\n};\n\nconst skeletonShapeClass: Record<SkeletonShape, string> = {\n\ttext: 'h-4 w-full rounded-sm',\n\trect: 'h-20 w-full rounded-md',\n\tcircle: 'size-10 shrink-0 rounded-full',\n};\n\nexport function Skeleton({ shape = 'text', className, 'aria-hidden': ariaHidden = true, ...props }: SkeletonProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot='skeleton'\n\t\t\tdata-shape={shape}\n\t\t\taria-hidden={ariaHidden}\n\t\t\tclassName={cn('skeleton bg-base-300/70 motion-reduce:animate-none', skeletonShapeClass[shape], className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport type LoadingRowsVariant = 'list' | 'table';\nexport type LoadingRowsDensity = 'compact' | 'comfortable';\nexport type LoadingRowsColumns = 1 | 2 | 3 | 4;\n\nexport type LoadingRowsProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n\tvariant?: LoadingRowsVariant;\n\tdensity?: LoadingRowsDensity;\n\trows?: number;\n\tcolumns?: LoadingRowsColumns;\n\tshowHeader?: boolean;\n\tshowLeading?: boolean;\n\tshowTrailing?: boolean;\n\tlabel?: string;\n};\n\nconst tableColumnsClass: Record<LoadingRowsColumns, string> = {\n\t1: 'grid-cols-1',\n\t2: 'grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)]',\n\t3: 'grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_minmax(0,.75fr)]',\n\t4: 'grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_minmax(0,.75fr)_minmax(0,.5fr)]',\n};\n\nconst cellWidthClass = ['w-4/5', 'w-2/3', 'w-3/4', 'w-1/2'] as const;\nconst rowPaddingClass: Record<LoadingRowsDensity, string> = {\n\tcompact: 'py-2',\n\tcomfortable: 'py-3',\n};\n\nfunction normalizeRows(rows: number) {\n\treturn Number.isFinite(rows) ? Math.min(20, Math.max(1, Math.floor(rows))) : 5;\n}\n\nexport function LoadingRows({\n\tvariant = 'list',\n\tdensity = 'comfortable',\n\trows = 5,\n\tcolumns = 4,\n\tshowHeader = true,\n\tshowLeading = true,\n\tshowTrailing = true,\n\tlabel = '正在加载列表',\n\tclassName,\n\t'aria-label': ariaLabel,\n\t...props\n}: LoadingRowsProps) {\n\tconst rowCount = normalizeRows(rows);\n\treturn (\n\t\t<div\n\t\t\tdata-slot='loading-rows'\n\t\t\tdata-variant={variant}\n\t\t\tdata-rows={rowCount}\n\t\t\trole='status'\n\t\t\taria-live='polite'\n\t\t\taria-busy='true'\n\t\t\taria-label={ariaLabel ?? label}\n\t\t\tclassName={cn('min-w-0', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div aria-hidden='true' className='min-w-0'>\n\t\t\t\t{variant === 'table' && showHeader ? (\n\t\t\t\t\t<div className={cn('border-base-300 grid gap-4 border-b px-3 py-2', tableColumnsClass[columns])}>\n\t\t\t\t\t\t{Array.from({ length: columns }, (_, column) => (\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: Deterministic skeleton slots have no state.\n\t\t\t\t\t\t\t<Skeleton key={`header-${column}`} className={cn('h-3', cellWidthClass[column])} />\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t{Array.from({ length: rowCount }, (_, row) =>\n\t\t\t\t\tvariant === 'table' ? (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: Deterministic skeleton rows have no state.\n\t\t\t\t\t\t\tkey={`row-${row}`}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'border-base-300 grid items-center gap-4 border-b px-3 last:border-b-0',\n\t\t\t\t\t\t\t\ttableColumnsClass[columns],\n\t\t\t\t\t\t\t\trowPaddingClass[density],\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{Array.from({ length: columns }, (_, column) => (\n\t\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: Deterministic skeleton cells have no state.\n\t\t\t\t\t\t\t\t<Skeleton key={`cell-${column}`} className={cn('h-3.5', cellWidthClass[(row + column) % 4])} />\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: Deterministic skeleton rows have no state.\n\t\t\t\t\t\t\tkey={`row-${row}`}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t'border-base-300 flex min-w-0 items-center gap-3 border-b px-3 last:border-b-0',\n\t\t\t\t\t\t\t\trowPaddingClass[density],\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{showLeading ? <Skeleton className='size-9' shape='circle' /> : null}\n\t\t\t\t\t\t\t<div className='min-w-0 flex-1 space-y-2'>\n\t\t\t\t\t\t\t\t<Skeleton className={cn('h-3.5', row % 2 === 0 ? 'w-3/5' : 'w-2/3')} />\n\t\t\t\t\t\t\t\t<Skeleton className={cn('h-3', row % 3 === 0 ? 'w-4/5' : 'w-3/4')} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{showTrailing ? <Skeleton className='h-3 w-12 shrink-0' /> : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n",
			"type": "registry:component",
			"target": "@components/loaders/skeleton.tsx"
		},
		{
			"path": "registry/default/ui/loaders/index.ts",
			"content": "export * from './loader';\nexport * from './loading-overlay';\nexport * from './pending-button';\nexport * from './skeleton';\n",
			"type": "registry:component",
			"target": "@components/loaders/index.ts"
		}
	],
	"type": "registry:component"
}