{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "table-pagination-support", "title": "Table Pagination Support", "dependencies": [ "@radix-ui/react-slot", "@rc-component/util", "lucide-react", "radix-ui", "tailwind-variants" ], "registryDependencies": [ "table-shared-core" ], "files": [ { "path": "components/pagination/index.ts", "content": "export * from \"./pagination\";\nexport * from \"./_components\";\n", "type": "registry:file", "target": "components/pagination/index.ts" }, { "path": "components/pagination/pagination.tsx", "content": "/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport React from \"react\";\nimport { useMergedState } from \"@rc-component/util\";\nimport KeyCode from \"@rc-component/util/es/KeyCode\";\n\nimport type { PaginationItemProps } from \"./_components\";\nimport type { SizeChangerRender } from \"./_components/page-size-options\";\nimport type { PagerProps } from \"./pager\";\nimport type { PaginationLocale } from \"./types\";\nimport { Icon } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport { useComponentConfig } from \"../config-provider/context\";\nimport {\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n PaginationRoot,\n PaginationTotal,\n} from \"./_components\";\nimport { PageSizeOptions } from \"./_components/page-size-options\";\nimport enUS from \"./locale/en-us\";\nimport { Pager } from \"./pager\";\n\nexport type PaginationProps = {\n className?: string;\n\n // control\n defaultCurrent?: number;\n current?: number;\n defaultPageSize?: number;\n pageSize?: number;\n total?: number;\n onChange?: (page: number, pageSize: number) => void;\n\n disabled?: boolean;\n hideOnSinglePage?: boolean;\n locale?: PaginationLocale;\n simple?: boolean;\n showLessItems?: boolean;\n showPrevNextJumpers?: boolean;\n showSizeChanger?: boolean;\n showTitle?: boolean;\n showTotal?: (total: number, range: [number, number]) => React.ReactNode;\n totalBoundaryShowSizeChanger?: number;\n sizeChangerRender?: SizeChangerRender;\n pageSizeOptions?: number[];\n onShowSizeChange?: (page: number, pageSize: number) => void;\n\n itemRender?: (\n page: number,\n type: \"page\" | \"prev\" | \"next\" | \"jump-prev\" | \"jump-next\",\n originalElement: React.ReactNode,\n ) => React.ReactElement<{ children?: React.ReactNode }>;\n\n // hrefGenerator?: (page: number) => string;\n};\nexport const Pagination = (props: PaginationProps) => {\n const {\n disabled,\n className,\n\n // control\n current: currentProp,\n defaultCurrent = 1,\n total = 0,\n pageSize: pageSizeProp = 10,\n defaultPageSize = 10,\n onChange,\n\n // config\n hideOnSinglePage,\n locale = enUS,\n simple,\n showLessItems,\n showPrevNextJumpers = true,\n showTitle = true,\n showTotal,\n totalBoundaryShowSizeChanger = 50,\n showSizeChanger = total > totalBoundaryShowSizeChanger,\n sizeChangerRender,\n pageSizeOptions,\n onShowSizeChange: onShowSizeChangeProp,\n\n itemRender: itemRenderProp,\n // itemRender = defaultItemRender,\n // hrefGenerator,\n } = props;\n const {\n itemRender: itemRenderConfig,\n onShowSizeChange: onShowSizeChangeConfig,\n } = useComponentConfig(\"pagination\");\n const itemRender = itemRenderProp ?? itemRenderConfig;\n const onShowSizeChange = onShowSizeChangeProp ?? onShowSizeChangeConfig;\n\n const [pageSize, setPageSize] = useMergedState(10, {\n value: pageSizeProp,\n defaultValue: defaultPageSize,\n });\n\n const [current, setCurrent] = useMergedState(1, {\n value: currentProp,\n defaultValue: defaultCurrent,\n postState: (c) =>\n Math.max(1, Math.min(c, calculatePage(undefined, pageSize, total))),\n });\n\n const jumpPrevPage = Math.max(1, current - (showLessItems ? 3 : 5));\n const jumpNextPage = Math.min(\n calculatePage(undefined, pageSize, total),\n current + (showLessItems ? 3 : 5),\n );\n\n function isValid(page: number) {\n return isInteger(page) && page !== current && isInteger(total) && total > 0;\n }\n\n function changePageSize(size: number) {\n const newCurrent = calculatePage(size, pageSize, total);\n const nextCurrent =\n current > newCurrent && newCurrent !== 0 ? newCurrent : current;\n\n setPageSize(size);\n onShowSizeChange?.(current, size);\n setCurrent(nextCurrent);\n onChange?.(nextCurrent, size);\n }\n\n function handleChange(page: number) {\n if (isValid(page) && !disabled) {\n const currentPage = calculatePage(undefined, pageSize, total);\n let newPage = page;\n if (page > currentPage) {\n newPage = currentPage;\n } else if (page < 1) {\n newPage = 1;\n }\n\n setCurrent(newPage);\n onChange?.(newPage, pageSize);\n\n return newPage;\n }\n\n return current;\n }\n\n const hasPrev = current > 1;\n const hasNext = current < calculatePage(undefined, pageSize, total);\n\n function prevHandle() {\n if (hasPrev) handleChange(current - 1);\n }\n\n function nextHandle() {\n if (hasNext) handleChange(current + 1);\n }\n\n function jumpPrevHandle() {\n handleChange(jumpPrevPage);\n }\n\n function jumpNextHandle() {\n handleChange(jumpNextPage);\n }\n\n function runIfEnter(\n event: React.KeyboardEvent,\n\n callback: any,\n\n ...restParams: any[]\n ) {\n if (event.key === \"Enter\" || event.code === KeyCode.ENTER.toString()) {\n callback(...restParams);\n }\n }\n\n function runIfEnterPrev(event: React.KeyboardEvent) {\n runIfEnter(event, prevHandle);\n }\n\n function runIfEnterNext(event: React.KeyboardEvent) {\n runIfEnter(event, nextHandle);\n }\n\n function runIfEnterJumpPrev(event: React.KeyboardEvent) {\n runIfEnter(event, jumpPrevHandle);\n }\n\n function runIfEnterJumpNext(event: React.KeyboardEvent) {\n runIfEnter(event, jumpNextHandle);\n }\n\n function renderPrev(prevPage: number) {\n const originalElement = (\n \n );\n const prevButton = itemRender ? (\n \n {itemRender(prevPage, \"prev\", originalElement)}\n \n ) : (\n originalElement\n );\n return React.isValidElement(prevButton)\n ? React.cloneElement(prevButton, { disabled: !hasPrev })\n : prevButton;\n }\n\n function renderNext(nextPage: number) {\n const originalElement = ;\n const nextButton = itemRender ? (\n \n {itemRender(nextPage, \"next\", originalElement)}\n \n ) : (\n originalElement\n );\n return React.isValidElement(nextButton)\n ? React.cloneElement(nextButton, { disabled: !hasNext })\n : nextButton;\n }\n\n let jumpPrev: React.ReactElement = <>;\n\n // const dataOrAriaAttributeProps = pickAttrs(props, {\n // aria: true,\n // data: true,\n // });\n\n const totalText = showTotal && (\n \n {showTotal(total, [\n total === 0 ? 0 : (current - 1) * pageSize + 1,\n Math.min(current * pageSize, total),\n ])}\n \n );\n\n let jumpNext: React.ReactElement = <>;\n\n const allPages = calculatePage(undefined, pageSize, total);\n\n // ================== Render ==================\n // When hideOnSinglePage is true and there is only 1 page, hide the pager\n if (hideOnSinglePage && total <= pageSize) {\n return;\n }\n\n const pagerProps: PagerProps = {\n onClick: handleChange,\n onKeyPress: runIfEnter,\n showTitle,\n itemRender,\n page: -1,\n };\n\n // ====================== Normal ======================\n const pagerList: React.ReactElement[] = [];\n\n const prevPage = Math.max(current - 1, 0);\n const nextPage = Math.min(current + 1, allPages);\n // ====================== Normal ======================\n const pageBufferSize = showLessItems ? 1 : 2;\n if (allPages <= 3 + pageBufferSize * 2) {\n if (!allPages) {\n pagerList.push();\n }\n\n for (let index = 1; index <= allPages; index += 1) {\n pagerList.push(\n ,\n );\n }\n } else {\n const prevItemTitle = showLessItems ? locale.prev_3 : locale.prev_5;\n const nextItemTitle = showLessItems ? locale.next_3 : locale.next_5;\n\n const originalJumpPrevElement = (\n \n );\n const jumpPrevContent = itemRender ? (\n \n {itemRender(jumpPrevPage, \"jump-prev\", originalJumpPrevElement)}\n \n ) : (\n originalJumpPrevElement\n );\n\n const originalJumpNextElement = (\n \n );\n const jumpNextContent = itemRender ? (\n \n {itemRender(jumpNextPage, \"jump-next\", originalJumpNextElement)}\n \n ) : (\n originalJumpNextElement\n );\n\n if (showPrevNextJumpers) {\n jumpPrev = (\n {\n handleChange(jumpPrevPage);\n }}\n onKeyDown={runIfEnterJumpPrev}\n tabIndex={0}\n role=\"presentation\"\n className=\"group relative\"\n >\n {jumpPrevContent}\n \n \n );\n\n jumpNext = (\n \n {jumpNextContent}\n \n \n );\n }\n\n let left = Math.max(1, current - pageBufferSize);\n let right = Math.min(current + pageBufferSize, allPages);\n\n if (current - 1 <= pageBufferSize) {\n right = 1 + pageBufferSize * 2;\n }\n if (allPages - current <= pageBufferSize) {\n left = allPages - pageBufferSize * 2;\n }\n\n for (let index = left; index <= right; index += 1) {\n pagerList.push(\n ,\n );\n }\n\n if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {\n pagerList[0] = React.cloneElement(pagerList[0]!, {\n // className: classNames(\n // `${prefixCls}-item-after-jump-prev`,\n // pagerList[0].props.className,\n // ),\n });\n\n pagerList.unshift(jumpPrev);\n }\n\n if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {\n const lastOne = pagerList.at(-1)!;\n pagerList[pagerList.length - 1] = React.cloneElement(lastOne, {\n // className: classNames(\n // `${prefixCls}-item-before-jump-next`,\n // lastOne.props.className,\n // ),\n });\n\n pagerList.push(jumpNext);\n }\n\n if (left !== 1) {\n pagerList.unshift();\n }\n if (right !== allPages) {\n pagerList.push();\n }\n }\n\n /*\n * Prev Button\n */\n let prev = renderPrev(prevPage);\n // if (prev) {\n const prevDisabled = !hasPrev || !allPages;\n prev = (\n \n {prev}\n \n );\n // }\n\n /*\n * Next Button\n */\n let next = renderNext(nextPage);\n // if (next) {\n let nextDisabled: boolean, nextTabIndex: number | undefined;\n if (simple) {\n nextDisabled = !hasNext;\n nextTabIndex = hasPrev ? 0 : undefined;\n } else {\n nextDisabled = !hasNext || !allPages;\n nextTabIndex = nextDisabled ? undefined : 0;\n }\n\n next = (\n \n {next}\n \n );\n // }\n\n const sizeChanger = showSizeChanger ? (\n \n ) : (\n <>\n );\n\n return (\n \n \n {totalText}\n {prev}\n {pagerList}\n {next}\n {sizeChanger}\n \n \n );\n};\n\n// const defaultItemRender: PaginationProps[\"itemRender\"] = (\n// _page,\n// _type,\n// element,\n// ) => element;\n\nexport function generateHref(page: number) {\n const searchParams = new URLSearchParams(globalThis.location.search);\n searchParams.set(\"page\", String(page));\n const newSearch = searchParams.toString();\n const { origin, pathname } = globalThis.location;\n return `${origin}${pathname}?${newSearch}`;\n}\n\nfunction isInteger(v: number) {\n const value = Number(v);\n return (\n typeof value === \"number\" &&\n !Number.isNaN(value) &&\n Number.isFinite(value) &&\n Math.floor(value) === value\n );\n}\n\nfunction calculatePage(p: number | undefined, pageSize: number, total: number) {\n const _pageSize = p ?? pageSize;\n return Math.floor((total - 1) / _pageSize) + 1;\n}\n", "type": "registry:file", "target": "components/pagination/pagination.tsx" }, { "path": "components/pagination/pager.tsx", "content": "import type { PaginationProps } from \"./pagination\";\nimport { PaginationItem, PaginationLink } from \"./_components\";\nimport { generateHref } from \"./pagination\";\n\ntype PagerProps = Pick & {\n showTitle: boolean;\n className?: string;\n\n page: number;\n active?: boolean;\n onClick?: (page: number) => void;\n onKeyPress?: (\n e: React.KeyboardEvent,\n onClick: PagerProps[\"onClick\"],\n page: PagerProps[\"page\"],\n ) => void;\n};\n\nconst Pager = ({\n showTitle,\n className,\n\n page,\n active,\n onClick,\n onKeyPress,\n itemRender,\n}: PagerProps) => {\n const handleClick = () => {\n onClick?.(page);\n };\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n onKeyPress?.(e, onClick, page);\n };\n\n const originalElement = (\n \n {page}\n \n );\n const pager = itemRender ? (\n \n {itemRender(page, \"page\", originalElement)}\n \n ) : (\n originalElement\n );\n\n return (\n \n {pager}\n \n );\n};\n\nexport type { PagerProps };\nexport { Pager };\n", "type": "registry:file", "target": "components/pagination/pager.tsx" }, { "path": "components/pagination/types.ts", "content": "export interface PaginationLocale {\n // Options\n items_per_page?: string;\n jump_to?: string;\n jump_to_confirm?: string;\n page?: string;\n\n // Pagination\n prev_page?: string;\n next_page?: string;\n prev_5?: string;\n next_5?: string;\n prev_3?: string;\n next_3?: string;\n page_size?: string;\n}\n", "type": "registry:file", "target": "components/pagination/types.ts" }, { "path": "components/pagination/locale/en-us.ts", "content": "import type { PaginationLocale } from \"../types\";\n\nconst locale: PaginationLocale = {\n // Options\n items_per_page: \"/ page\",\n jump_to: \"Go to\",\n jump_to_confirm: \"confirm\",\n page: \"Page\",\n\n // Pagination\n prev_page: \"Previous Page\",\n next_page: \"Next Page\",\n prev_5: \"Previous 5 Pages\",\n next_5: \"Next 5 Pages\",\n prev_3: \"Previous 3 Pages\",\n next_3: \"Next 3 Pages\",\n page_size: \"Page Size\",\n};\n\nexport default locale;\n", "type": "registry:file", "target": "components/pagination/locale/en-us.ts" }, { "path": "components/pagination/_components/index.tsx", "content": "import * as React from \"react\";\n\nimport { Icon } from \"../../../icons\";\nimport { cn } from \"../../../lib/utils\";\nimport {\n buttonColorVariants,\n buttonVariants,\n} from \"../../button/button-variants\";\nimport { GenericSlot } from \"../../slot\";\n\nfunction PaginationRoot({ className, ...props }: React.ComponentProps<\"nav\">) {\n return (\n \n );\n}\n\nfunction PaginationContent({\n className,\n ...props\n}: React.ComponentProps<\"ul\">) {\n return (\n \n );\n}\n\ntype PaginationItemProps = React.ComponentProps<\"li\">;\nfunction PaginationItem({ ...props }: React.ComponentProps<\"li\">) {\n return
  • ;\n}\n\ntype PaginationLinkProps = {\n isActive?: boolean;\n disabled?: boolean;\n size?: \"small\" | \"middle\" | \"large\";\n shape?: \"default\" | \"icon\" | \"circle\";\n} & React.ComponentProps<\"a\"> & {\n asChild?: boolean;\n };\n\nfunction PaginationLink({\n className,\n disabled,\n isActive,\n size,\n shape = \"icon\",\n\n asChild,\n ...props\n}: PaginationLinkProps) {\n const LinkComp = asChild ? GenericSlot : \"a\";\n return (\n \n );\n}\n\nfunction PaginationPrevious({\n asChild,\n className,\n children: childrenProp,\n ...props\n}: Omit, \"children\"> & {\n children?: React.ReactElement<{ children?: React.ReactNode }>;\n}) {\n const icon = (\n <>\n \n {/* Previous */}\n \n );\n const children = childrenProp\n ? React.cloneElement(childrenProp, {\n ...props,\n children: icon,\n })\n : icon;\n return (\n \n {children}\n \n );\n}\n\nfunction PaginationNext({\n asChild,\n className,\n children: childrenProp,\n ...props\n}: Omit, \"children\"> & {\n children?: React.ReactElement<{ children?: React.ReactNode }>;\n}) {\n const icon = (\n <>\n {/* Next */}\n \n \n );\n const children = childrenProp\n ? React.cloneElement(childrenProp, {\n ...props,\n children: icon,\n })\n : icon;\n\n return (\n \n {children}\n \n );\n}\n\nfunction PaginationEllipsis({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n \n More pages\n \n );\n}\n\nfunction PaginationTotal({ className, ...props }: React.ComponentProps<\"li\">) {\n return (\n \n );\n}\n\nexport type { PaginationItemProps };\nexport {\n PaginationRoot,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n PaginationTotal,\n};\n", "type": "registry:file", "target": "components/pagination/_components/index.tsx" }, { "path": "components/pagination/_components/page-size-options.tsx", "content": "import {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@acme/ui/components/select\";\n\nimport type { PaginationLocale } from \"../types\";\n\nconst defaultPageSizeOptions = [10, 20, 50, 100];\n\ntype SizeChangerRender = (info: {\n disabled: boolean | undefined;\n size: number;\n onSizeChange: (value: string | number) => void;\n \"aria-label\": string | undefined;\n className: string;\n options: {\n label: string;\n value: string | number;\n }[];\n}) => React.ReactNode;\n\ninterface OptionsProps {\n disabled?: boolean;\n locale: PaginationLocale;\n pageSize: number;\n pageSizeOptions?: number[];\n // goButton?: boolean | string;\n changeSize?: (size: number) => void;\n // quickGo?: (value: number) => void;\n buildOptionText?: (value: number | string) => string;\n sizeChangerRender?: SizeChangerRender;\n}\n\nconst PageSizeOptions = ({\n pageSizeOptions = defaultPageSizeOptions,\n locale,\n changeSize,\n pageSize,\n // goButton,\n // quickGo,\n // rootPrefixCls,\n disabled,\n buildOptionText,\n sizeChangerRender,\n}: OptionsProps) => {\n const mergeBuildOptionText =\n typeof buildOptionText === \"function\"\n ? buildOptionText\n : (value: string | number) => `${value} ${locale.items_per_page}`;\n\n const getPageSizeOptions = () => {\n if (\n pageSizeOptions.some(\n (option) => option.toString() === pageSize.toString(),\n )\n ) {\n return pageSizeOptions;\n }\n return [...pageSizeOptions, pageSize].toSorted((a, b) => {\n const numberA = Number.isNaN(Number(a)) ? 0 : Number(a);\n const numberB = Number.isNaN(Number(b)) ? 0 : Number(b);\n return numberA - numberB;\n });\n };\n\n // ============== render ==============\n // >>>>> Size Changer\n const changeSelect = sizeChangerRender ? (\n sizeChangerRender({\n disabled,\n size: pageSize,\n onSizeChange: (nextValue) => {\n changeSize?.(Number(nextValue));\n },\n \"aria-label\": locale.page_size,\n className: ``,\n options: getPageSizeOptions().map((opt) => ({\n label: mergeBuildOptionText(opt),\n value: opt,\n })),\n })\n ) : (\n {\n if (value) {\n changeSize?.(Number(value));\n }\n }}\n >\n \n \n \n \n \n {getPageSizeOptions().map((opt) => (\n \n {mergeBuildOptionText(opt)}\n \n ))}\n \n \n \n );\n return
  • {changeSelect}
    • ;\n};\n\nexport type { OptionsProps, SizeChangerRender };\nexport { PageSizeOptions };\n", "type": "registry:file", "target": "components/pagination/_components/page-size-options.tsx" }, { "path": "shadcn/select.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@acme/ui/lib/utils\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", "type": "registry:file", "target": "shadcn/select.tsx" }, { "path": "components/button/button-variants.ts", "content": "import type { VariantProps } from \"tailwind-variants\";\nimport { tv } from \"tailwind-variants\";\n\nexport const buttonVariants = tv({\n base: [\n \"inline-flex shrink-0 items-center justify-center gap-2 border text-sm font-medium whitespace-nowrap ring-offset-white transition-all outline-none\",\n // \"disabled:pointer-events-none disabled:opacity-50\",\n \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n // own\n // \"shrink-0\", // disable flex box sizing - added by shadcn\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n \"[&_span[role='img']]:pointer-events-none [&_span[role='img']]:shrink-0 [&_span[role='img']:not([class*='size-'])]:size-4\",\n ],\n variants: {\n action: {\n true: [],\n },\n\n size: {\n small: \"h-6 gap-1.5 rounded-sm px-2 py-0\",\n middle: \"h-8 rounded-md px-[15px] has-[>svg]:px-2.5\",\n large: \"h-10 rounded-lg px-4 py-2 has-[>svg]:px-4\",\n },\n shape: {\n default: \"\",\n icon: [\n 'sm:has-[span[class*=\"sm::not-sr-only\"]]:w-auto',\n 'max-sm:has-[span[class*=\"sm::not-sr-only\"]]:p-0',\n '[&:not(:has(span[class*=\"sm::not-sr-only\"]))]:p-0',\n ],\n circle: \"rounded-full\",\n },\n /* Whenever to hidden text at mobile view */\n srOnly: {\n true: \"\",\n false: \"\",\n },\n },\n compoundVariants: [\n // Size\n {\n size: \"small\",\n shape: [\"icon\", \"circle\"],\n className: \"w-6\",\n },\n {\n size: \"middle\",\n shape: [\"icon\", \"circle\"],\n className: \"size-8\",\n },\n {\n size: \"large\",\n shape: [\"icon\", \"circle\"],\n className: \"w-10\",\n },\n ],\n defaultVariants: {\n size: \"middle\",\n shape: \"default\",\n },\n});\n\nexport type ButtonColorVariants = VariantProps;\n\nexport const buttonColorVariants = tv({\n variants: {\n disabled: {\n true: \"cursor-not-allowed\",\n },\n variant: {\n solid: [\"text-white\", \"hover:text-white\"],\n outlined: [\n \"border-border bg-background hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs\",\n ],\n dashed: [],\n filled: [\"border-transparent\", \"hover:bg-background-hover\"],\n link: [\"border-transparent\"],\n text: \"border-transparent\",\n },\n color: {\n default: [],\n primary: [],\n danger: [],\n link: [],\n success: [],\n gray: [],\n red: [],\n orange: [],\n amber: [],\n yellow: [],\n lime: [],\n green: [],\n emerald: [],\n teal: [],\n cyan: [],\n sky: [],\n blue: [],\n indigo: [],\n violet: [],\n purple: [],\n fuchsia: [],\n pink: [],\n rose: [],\n },\n },\n compoundVariants: [\n // solid\n {\n variant: \"solid\",\n color: \"default\",\n className: [\n \"border-button-solid bg-button-solid\",\n \"hover:border-button-solid-hover hover:bg-button-solid-hover\",\n \"active:border-button-solid-active active:bg-button-solid-active\",\n ],\n },\n {\n variant: \"solid\",\n color: \"primary\",\n className: [\n \"border-primary bg-primary\",\n \"hover:border-primary-hover hover:bg-primary-hover\",\n \"active:border-primary-active active:bg-primary-active\",\n ],\n },\n {\n variant: \"solid\",\n color: \"danger\",\n className: [\n \"border-red-600 bg-red-600\",\n \"hover:border-red-500 hover:bg-red-500\",\n \"active:border-red-700 active:bg-red-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"orange\",\n className: [\n \"border-orange-700 bg-orange-700\",\n \"hover:border-orange-600 hover:bg-orange-600\",\n \"active:border-orange-800 active:bg-orange-800\",\n ],\n },\n {\n variant: \"solid\",\n color: \"green\",\n className: [\n \"border-green-700 bg-green-700\",\n \"hover:border-green-600 hover:bg-green-600\",\n \"active:border-green-800 active:bg-green-800\",\n ],\n },\n {\n variant: \"solid\",\n color: \"emerald\",\n className: [\n \"border-emerald-600 bg-emerald-600\",\n \"hover:border-emerald-500 hover:bg-emerald-500\",\n \"active:border-emerald-700 active:bg-emerald-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"cyan\",\n className: [\n \"border-cyan-600 bg-cyan-600\",\n \"hover:border-cyan-500 hover:bg-cyan-500\",\n \"active:border-cyan-700 active:bg-cyan-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"teal\",\n className: [\n \"border-teal-600 bg-teal-600\",\n \"hover:border-teal-500 hover:bg-teal-500\",\n \"active:border-teal-700 active:bg-teal-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"blue\",\n className: [\n \"border-blue-600 bg-blue-600\",\n \"hover:border-blue-500 hover:bg-blue-500\",\n \"active:border-blue-700 active:bg-blue-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"indigo\",\n className: [\n \"border-indigo-600 bg-indigo-600\",\n \"hover:border-indigo-500 hover:bg-indigo-500\",\n \"active:border-indigo-700 active:bg-indigo-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"purple\",\n className: [\n \"border-purple-600 bg-purple-600\",\n \"hover:border-purple-500 hover:bg-purple-500\",\n \"active:border-purple-700 active:bg-purple-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"pink\",\n className: [\n \"border-pink-600 bg-pink-600\",\n \"hover:border-pink-500 hover:bg-pink-500\",\n \"active:border-pink-700 active:bg-pink-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"link\",\n className: [\n \"border-blue-600 bg-blue-600\",\n \"hover:border-blue-500 hover:bg-blue-500\",\n \"active:border-blue-700 active:bg-blue-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"success\",\n className: [\n \"border-green-700 bg-green-700\",\n \"hover:border-green-600 hover:bg-green-600\",\n \"active:border-green-800 active:bg-green-800\",\n ],\n },\n {\n variant: \"solid\",\n color: \"gray\",\n className: [\n \"border-gray-600 bg-gray-600\",\n \"hover:border-gray-500 hover:bg-gray-500\",\n \"active:border-gray-700 active:bg-gray-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"red\",\n className: [\n \"border-red-600 bg-red-600\",\n \"hover:border-red-500 hover:bg-red-500\",\n \"active:border-red-700 active:bg-red-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"amber\",\n className: [\n \"border-amber-600 bg-amber-600\",\n \"hover:border-amber-500 hover:bg-amber-500\",\n \"active:border-amber-700 active:bg-amber-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"yellow\",\n className: [\n \"border-yellow-600 bg-yellow-600\",\n \"hover:border-yellow-500 hover:bg-yellow-500\",\n \"active:border-yellow-700 active:bg-yellow-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"lime\",\n className: [\n \"border-lime-600 bg-lime-600\",\n \"hover:border-lime-500 hover:bg-lime-500\",\n \"active:border-lime-700 active:bg-lime-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"sky\",\n className: [\n \"border-sky-600 bg-sky-600\",\n \"hover:border-sky-500 hover:bg-sky-500\",\n \"active:border-sky-700 active:bg-sky-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"violet\",\n className: [\n \"border-violet-600 bg-violet-600\",\n \"hover:border-violet-500 hover:bg-violet-500\",\n \"active:border-violet-700 active:bg-violet-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"fuchsia\",\n className: [\n \"border-fuchsia-600 bg-fuchsia-600\",\n \"hover:border-fuchsia-500 hover:bg-fuchsia-500\",\n \"active:border-fuchsia-700 active:bg-fuchsia-700\",\n ],\n },\n {\n variant: \"solid\",\n color: \"rose\",\n className: [\n \"border-rose-600 bg-rose-600\",\n \"hover:border-rose-500 hover:bg-rose-500\",\n \"active:border-rose-700 active:bg-rose-700\",\n ],\n },\n // outlined\n {\n variant: \"outlined\",\n color: \"default\",\n className: [\n \"\",\n \"hover:border-primary-hover hover:text-primary-hover\",\n \"active:border-primary-active active:text-primary-active\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"primary\",\n className: [\n \"border-primary text-primary\",\n \"hover:border-primary-hover hover:text-primary-hover\",\n \"active:border-primary-active active:text-primary-active\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"link\",\n className: [\"text-link\", \"hover:bg-link-hover hover:text-white\"],\n },\n {\n variant: \"outlined\",\n color: \"danger\",\n className: [\n \"border-red-600 text-red-600\",\n \"hover:border-red-500 hover:text-red-500\",\n \"active:border-red-700 active:text-red-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"orange\",\n className: [\n \"border-orange-600 text-orange-600\",\n \"hover:border-orange-500 hover:text-orange-500\",\n \"active:border-orange-700 active:text-orange-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"green\",\n className: [\n \"border-green-600 text-green-600\",\n \"hover:border-green-500 hover:text-green-500\",\n \"active:border-green-700 active:text-green-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"emerald\",\n className: [\n \"border-emerald-600 text-emerald-600\",\n \"hover:border-emerald-500 hover:text-emerald-500\",\n \"active:border-emerald-700 active:text-emerald-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"cyan\",\n className: [\n \"border-cyan-600 text-cyan-600\",\n \"hover:border-cyan-500 hover:text-cyan-500\",\n \"active:border-cyan-700 active:text-cyan-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"teal\",\n className: [\n \"border-teal-600 text-teal-600\",\n \"hover:border-teal-500 hover:text-teal-500\",\n \"active:border-teal-700 active:text-teal-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"blue\",\n className: [\n \"border-blue-600 text-blue-600\",\n \"hover:border-blue-500 hover:text-blue-500\",\n \"active:border-blue-700 active:text-blue-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"indigo\",\n className: [\n \"border-indigo-600 text-indigo-600\",\n \"hover:border-indigo-500 hover:text-indigo-500\",\n \"active:border-indigo-700 active:text-indigo-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"purple\",\n className: [\n \"border-purple-600 text-purple-600\",\n \"hover:border-purple-500 hover:text-purple-500\",\n \"active:border-purple-700 active:text-purple-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"pink\",\n className: [\n \"border-pink-600 text-pink-600\",\n \"hover:border-pink-500 hover:text-pink-500\",\n \"active:border-pink-700 active:text-pink-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"success\",\n className: [\n \"border-green-600 text-green-600\",\n \"hover:border-green-500 hover:text-green-500\",\n \"active:border-green-700 active:text-green-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"gray\",\n className: [\n \"border-gray-600 text-gray-600\",\n \"hover:border-gray-500 hover:text-gray-500\",\n \"active:border-gray-700 active:text-gray-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"red\",\n className: [\n \"border-red-600 text-red-600\",\n \"hover:border-red-500 hover:text-red-500\",\n \"active:border-red-700 active:text-red-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"amber\",\n className: [\n \"border-amber-600 text-amber-600\",\n \"hover:border-amber-500 hover:text-amber-500\",\n \"active:border-amber-700 active:text-amber-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"yellow\",\n className: [\n \"border-yellow-600 text-yellow-600\",\n \"hover:border-yellow-500 hover:text-yellow-500\",\n \"active:border-yellow-700 active:text-yellow-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"lime\",\n className: [\n \"border-lime-600 text-lime-600\",\n \"hover:border-lime-500 hover:text-lime-500\",\n \"active:border-lime-700 active:text-lime-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"sky\",\n className: [\n \"border-sky-600 text-sky-600\",\n \"hover:border-sky-500 hover:text-sky-500\",\n \"active:border-sky-700 active:text-sky-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"violet\",\n className: [\n \"border-violet-600 text-violet-600\",\n \"hover:border-violet-500 hover:text-violet-500\",\n \"active:border-violet-700 active:text-violet-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"fuchsia\",\n className: [\n \"border-fuchsia-600 text-fuchsia-600\",\n \"hover:border-fuchsia-500 hover:text-fuchsia-500\",\n \"active:border-fuchsia-700 active:text-fuchsia-700\",\n ],\n },\n {\n variant: \"outlined\",\n color: \"rose\",\n className: [\n \"border-rose-600 text-rose-600\",\n \"hover:border-rose-500 hover:text-rose-500\",\n \"active:border-rose-700 active:text-rose-700\",\n ],\n },\n // filled | light\n {\n variant: \"filled\",\n color: \"default\",\n className: [\n \"bg-secondary\",\n \"hover:bg-secondary-hover\",\n \"active:bg-secondary-active\",\n ],\n },\n {\n variant: \"filled\",\n color: \"primary\",\n className: [\n \"bg-primary-50 text-primary-700\",\n \"hover:bg-primary-100 hover:text-primary-700\",\n \"active:bg-primary-200 active:text-primary-active\",\n ],\n },\n {\n variant: \"filled\",\n color: \"danger\",\n className: [\n \"bg-red-50 text-red-600\",\n \"hover:bg-red-100 hover:text-red-600\",\n \"active:bg-red-200 active:text-red-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"orange\",\n className: [\n \"bg-orange-50 text-orange-600\",\n \"hover:bg-orange-100 hover:text-orange-600\",\n \"active:bg-orange-200 active:text-orange-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"green\",\n className: [\n \"bg-green-50 text-green-600\",\n \"hover:bg-green-100 hover:text-green-600\",\n \"active:bg-green-200 active:text-green-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"emerald\",\n className: [\n \"bg-emerald-50 text-emerald-600\",\n \"hover:bg-emerald-100 hover:text-emerald-600\",\n \"active:bg-emerald-200 active:text-emerald-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"cyan\",\n className: [\n \"bg-cyan-50 text-cyan-600\",\n \"hover:bg-cyan-100 hover:text-cyan-600\",\n \"active:bg-cyan-200 active:text-cyan-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"teal\",\n className: [\n \"bg-teal-50 text-teal-600\",\n \"hover:bg-teal-100 hover:text-teal-600\",\n \"active:bg-teal-200 active:text-teal-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"blue\",\n className: [\n \"bg-blue-50 text-blue-600\",\n \"hover:bg-blue-100 hover:text-blue-600\",\n \"active:bg-blue-200 active:text-blue-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"indigo\",\n className: [\n \"bg-indigo-50 text-indigo-600\",\n \"hover:bg-indigo-100 hover:text-indigo-600\",\n \"active:bg-indigo-200 active:text-indigo-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"link\",\n className: [\n \"bg-blue-50 text-blue-600\",\n \"hover:bg-blue-100 hover:text-blue-600\",\n \"active:bg-blue-200 active:text-blue-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"purple\",\n className: [\n \"bg-purple-50 text-purple-600\",\n \"hover:bg-purple-100 hover:text-purple-600\",\n \"active:bg-purple-200 active:text-purple-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"pink\",\n className: [\n \"bg-pink-50 text-pink-600\",\n \"hover:bg-pink-100 hover:text-pink-600\",\n \"active:bg-pink-200 active:text-pink-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"success\",\n className: [\n \"bg-green-50 text-green-600\",\n \"hover:bg-green-100 hover:text-green-600\",\n \"active:bg-green-200 active:text-green-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"gray\",\n className: [\n \"bg-gray-50 text-gray-600\",\n \"hover:bg-gray-100 hover:text-gray-600\",\n \"active:bg-gray-200 active:text-gray-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"red\",\n className: [\n \"bg-red-50 text-red-600\",\n \"hover:bg-red-100 hover:text-red-600\",\n \"active:bg-red-200 active:text-red-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"amber\",\n className: [\n \"bg-amber-50 text-amber-600\",\n \"hover:bg-amber-100 hover:text-amber-600\",\n \"active:bg-amber-200 active:text-amber-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"yellow\",\n className: [\n \"bg-yellow-50 text-yellow-600\",\n \"hover:bg-yellow-100 hover:text-yellow-600\",\n \"active:bg-yellow-200 active:text-yellow-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"lime\",\n className: [\n \"bg-lime-50 text-lime-600\",\n \"hover:bg-lime-100 hover:text-lime-600\",\n \"active:bg-lime-200 active:text-lime-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"sky\",\n className: [\n \"bg-sky-50 text-sky-600\",\n \"hover:bg-sky-100 hover:text-sky-600\",\n \"active:bg-sky-200 active:text-sky-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"violet\",\n className: [\n \"bg-violet-50 text-violet-600\",\n \"hover:bg-violet-100 hover:text-violet-600\",\n \"active:bg-violet-200 active:text-violet-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"fuchsia\",\n className: [\n \"bg-fuchsia-50 text-fuchsia-600\",\n \"hover:bg-fuchsia-100 hover:text-fuchsia-600\",\n \"active:bg-fuchsia-200 active:text-fuchsia-700\",\n ],\n },\n {\n variant: \"filled\",\n color: \"rose\",\n className: [\n \"bg-rose-50 text-rose-600\",\n \"hover:bg-rose-100 hover:text-rose-600\",\n \"active:bg-rose-200 active:text-rose-700\",\n ],\n },\n // Text\n {\n variant: \"text\",\n color: \"default\",\n className: [\"\", \"hover:bg-secondary\", \"active:bg-secondary-active\"],\n },\n {\n variant: \"text\",\n color: \"primary\",\n className: [\n \"text-primary\",\n \"hover:bg-primary-100 hover:text-primary-hover\",\n \"active:bg-primary-300 active:text-primary-active\",\n ],\n },\n {\n variant: \"text\",\n color: \"danger\",\n className: [\n \"text-red-600\",\n \"hover:bg-red-100 hover:text-red-500\",\n \"active:bg-red-300 active:text-red-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"green\",\n className: [\n \"text-green-600\",\n \"hover:bg-green-100 hover:text-green-500\",\n \"active:bg-green-300 active:text-green-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"emerald\",\n className: [\n \"text-emerald-600\",\n \"hover:bg-emerald-100 hover:text-emerald-500\",\n \"active:bg-emerald-300 active:text-emerald-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"cyan\",\n className: [\n \"text-cyan-600\",\n \"hover:bg-cyan-100 hover:text-cyan-500\",\n \"active:bg-cyan-300 active:text-cyan-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"teal\",\n className: [\n \"text-teal-600\",\n \"hover:bg-teal-100 hover:text-teal-500\",\n \"active:bg-teal-300 active:text-teal-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"blue\",\n className: [\n \"text-blue-600\",\n \"hover:bg-blue-100 hover:text-blue-500\",\n \"active:bg-blue-300 active:text-blue-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"indigo\",\n className: [\n \"text-indigo-600\",\n \"hover:bg-indigo-100 hover:text-indigo-500\",\n \"active:bg-indigo-300 active:text-indigo-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"purple\",\n className: [\n \"text-purple-600\",\n \"hover:bg-purple-100 hover:text-purple-500\",\n \"active:bg-purple-300 active:text-purple-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"pink\",\n className: [\n \"text-pink-600\",\n \"hover:bg-pink-100 hover:text-pink-500\",\n \"active:bg-pink-300 active:text-pink-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"link\",\n className: [\n \"text-blue-600\",\n \"hover:bg-blue-100 hover:text-blue-500\",\n \"active:bg-blue-300 active:text-blue-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"success\",\n className: [\n \"text-green-600\",\n \"hover:bg-green-100 hover:text-green-500\",\n \"active:bg-green-300 active:text-green-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"gray\",\n className: [\n \"text-gray-600\",\n \"hover:bg-gray-100 hover:text-gray-500\",\n \"active:bg-gray-300 active:text-gray-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"red\",\n className: [\n \"text-red-600\",\n \"hover:bg-red-100 hover:text-red-500\",\n \"active:bg-red-300 active:text-red-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"orange\",\n className: [\n \"text-orange-600\",\n \"hover:bg-orange-100 hover:text-orange-500\",\n \"active:bg-orange-300 active:text-orange-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"amber\",\n className: [\n \"text-amber-600\",\n \"hover:bg-amber-100 hover:text-amber-500\",\n \"active:bg-amber-300 active:text-amber-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"yellow\",\n className: [\n \"text-yellow-600\",\n \"hover:bg-yellow-100 hover:text-yellow-500\",\n \"active:bg-yellow-300 active:text-yellow-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"lime\",\n className: [\n \"text-lime-600\",\n \"hover:bg-lime-100 hover:text-lime-500\",\n \"active:bg-lime-300 active:text-lime-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"sky\",\n className: [\n \"text-sky-600\",\n \"hover:bg-sky-100 hover:text-sky-500\",\n \"active:bg-sky-300 active:text-sky-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"violet\",\n className: [\n \"text-violet-600\",\n \"hover:bg-violet-100 hover:text-violet-500\",\n \"active:bg-violet-300 active:text-violet-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"fuchsia\",\n className: [\n \"text-fuchsia-600\",\n \"hover:bg-fuchsia-100 hover:text-fuchsia-500\",\n \"active:bg-fuchsia-300 active:text-fuchsia-700\",\n ],\n },\n {\n variant: \"text\",\n color: \"rose\",\n className: [\n \"text-rose-600\",\n \"hover:bg-rose-100 hover:text-rose-500\",\n \"active:bg-rose-300 active:text-rose-700\",\n ],\n },\n\n // Link\n {\n variant: \"link\",\n color: \"default\",\n className: [\"\", \"hover:text-primary-hover\", \"active:text-primary-active\"],\n },\n {\n variant: \"link\",\n color: \"primary\",\n className: [\n \"text-primary\",\n \"hover:text-primary-hover\",\n \"active:text-primary-active\",\n ],\n },\n {\n variant: \"link\",\n color: \"link\",\n className: [\n \"text-primary\",\n \"hover:text-primary-hover\",\n \"active:text-primary-active\",\n ],\n },\n {\n variant: \"link\",\n color: \"danger\",\n className: [\"text-red-500\", \"hover:text-red-400\", \"active:text-red-600\"],\n },\n {\n variant: \"link\",\n color: \"pink\",\n className: [\n \"text-pink-500\",\n \"hover:text-pink-400\",\n \"active:text-pink-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"purple\",\n className: [\n \"text-purple-500\",\n \"hover:text-purple-400\",\n \"active:text-purple-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"cyan\",\n className: [\n \"text-cyan-500\",\n \"hover:text-cyan-400\",\n \"active:text-cyan-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"teal\",\n className: [\n \"text-teal-500\",\n \"hover:text-teal-400\",\n \"active:text-teal-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"orange\",\n className: [\n \"text-orange-500\",\n \"hover:text-orange-400\",\n \"active:text-orange-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"amber\",\n className: [\n \"text-amber-500\",\n \"hover:text-amber-400\",\n \"active:text-amber-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"yellow\",\n className: [\n \"text-yellow-500\",\n \"hover:text-yellow-400\",\n \"active:text-yellow-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"lime\",\n className: [\n \"text-lime-500\",\n \"hover:text-lime-400\",\n \"active:text-lime-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"green\",\n className: [\n \"text-green-500\",\n \"hover:text-green-400\",\n \"active:text-green-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"emerald\",\n className: [\n \"text-emerald-500\",\n \"hover:text-emerald-400\",\n \"active:text-emerald-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"sky\",\n className: [\"text-sky-500\", \"hover:text-sky-400\", \"active:text-sky-600\"],\n },\n {\n variant: \"link\",\n color: \"blue\",\n className: [\n \"text-blue-500\",\n \"hover:text-blue-400\",\n \"active:text-blue-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"indigo\",\n className: [\n \"text-indigo-500\",\n \"hover:text-indigo-400\",\n \"active:text-indigo-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"violet\",\n className: [\n \"text-violet-500\",\n \"hover:text-violet-400\",\n \"active:text-violet-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"fuchsia\",\n className: [\n \"text-fuchsia-500\",\n \"hover:text-fuchsia-400\",\n \"active:text-fuchsia-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"rose\",\n className: [\n \"text-rose-500\",\n \"hover:text-rose-400\",\n \"active:text-rose-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"red\",\n className: [\"text-red-500\", \"hover:text-red-400\", \"active:text-red-600\"],\n },\n {\n variant: \"link\",\n color: \"success\",\n className: [\n \"text-green-500\",\n \"hover:text-green-400\",\n \"active:text-green-600\",\n ],\n },\n {\n variant: \"link\",\n color: \"gray\",\n className: [\n \"text-gray-500\",\n \"hover:text-gray-400\",\n \"active:text-gray-600\",\n ],\n },\n // Disabled states - use muted colors instead of opacity\n {\n disabled: true,\n variant: \"solid\",\n className: [\n \"bg-muted/80 border-input text-muted-foreground/50\",\n \"hover:bg-muted/80! hover:border-input! hover:text-muted-foreground/50!\",\n \"active:bg-muted/80! active:border-input! active:text-muted-foreground/50!\",\n ],\n },\n {\n disabled: true,\n variant: \"outlined\",\n className: [\n \"border-input text-muted-foreground/50 bg-muted/80\",\n \"hover:border-input! hover:text-muted-foreground/50! hover:bg-muted/80!\",\n \"active:border-input! active:text-muted-foreground/50! active:bg-muted/80!\",\n ],\n },\n {\n disabled: true,\n variant: \"filled\",\n className: [\n \"bg-muted/80 text-muted-foreground/50 border-transparent\",\n \"hover:bg-muted/80! hover:text-muted-foreground/50! hover:border-transparent!\",\n \"active:bg-muted/80! active:text-muted-foreground/50! active:border-transparent!\",\n ],\n },\n {\n disabled: true,\n variant: \"text\",\n className: [\n \"text-muted-foreground/50 border-transparent bg-transparent\",\n \"hover:text-muted-foreground/50! hover:border-transparent! hover:bg-transparent!\",\n \"active:text-muted-foreground/50! active:border-transparent! active:bg-transparent!\",\n ],\n },\n {\n disabled: true,\n variant: \"link\",\n className: [\n \"text-muted-foreground/50 border-transparent\",\n \"hover:text-muted-foreground/50! hover:border-transparent!\",\n \"active:text-muted-foreground/50! active:border-transparent!\",\n ],\n },\n ],\n});\n\nexport type ButtonVariants = VariantProps;\n", "type": "registry:file", "target": "components/button/button-variants.ts" } ], "type": "registry:component" }