@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)!
1 lines • 3.03 kB
Source Map (JSON)
{"version":3,"file":"components\\ui\\badge.cjs","sources":["webpack://@arolariu/components/./src/components/ui/badge.tsx"],"sourcesContent":["\r\n\r\nimport * as React from \"react\";\r\nimport { Slot } from \"@radix-ui/react-slot\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"./../../lib/utils\";\r\n\r\nconst badgeVariants = cva(\r\n \"inline-flex items-center justify-center rounded-md border border-neutral-200 px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:ring-[3px] aria-invalid:ring-red-500/20 dark:aria-invalid:ring-red-500/40 aria-invalid:border-red-500 transition-[color,box-shadow] overflow-hidden dark:border-neutral-800 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:aria-invalid:ring-red-900/20 dark:dark:aria-invalid:ring-red-900/40 dark:aria-invalid:border-red-900\",\r\n {\r\n variants: {\r\n variant: {\r\n default:\r\n \"border-transparent bg-neutral-900 text-neutral-50 [a&]:hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:[a&]:hover:bg-neutral-50/90\",\r\n secondary:\r\n \"border-transparent bg-neutral-100 text-neutral-900 [a&]:hover:bg-neutral-100/90 dark:bg-neutral-800 dark:text-neutral-50 dark:[a&]:hover:bg-neutral-800/90\",\r\n destructive:\r\n \"border-transparent bg-red-500 text-white [a&]:hover:bg-red-500/90 focus-visible:ring-red-500/20 dark:focus-visible:ring-red-500/40 dark:bg-red-900 dark:[a&]:hover:bg-red-900/90 dark:focus-visible:ring-red-900/20 dark:dark:focus-visible:ring-red-900/40\",\r\n outline:\r\n \"text-neutral-950 [a&]:hover:bg-neutral-100 [a&]:hover:text-neutral-900 dark:text-neutral-50 dark:[a&]:hover:bg-neutral-800 dark:[a&]:hover:text-neutral-50\",\r\n },\r\n },\r\n defaultVariants: {\r\n variant: \"default\",\r\n },\r\n }\r\n);\r\n\r\nfunction Badge({\r\n className,\r\n variant,\r\n asChild = false,\r\n ...props\r\n}: React.ComponentProps<\"span\"> &\r\n VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\r\n const Comp = asChild ? Slot : \"span\";\r\n\r\n return (\r\n <Comp\r\n data-slot=\"badge\"\r\n className={cn(badgeVariants({ variant }), className)}\r\n {...props}\r\n />\r\n );\r\n}\r\n\r\nexport { Badge, badgeVariants };\r\n"],"names":["badgeVariants","cva","Badge","className","variant","asChild","props","Comp","Slot","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAMA,gBAAgBC,IAAAA,kDAAAA,GAAAA,EACpB,snBACA;IACE,UAAU;QACR,SAAS;YACP,SACE;YACF,WACE;YACF,aACE;YACF,SACE;QACJ;IACF;IACA,iBAAiB;QACf,SAAS;IACX;AACF;AAGF,SAASC,MAAM,EACbC,SAAS,EACTC,OAAO,EACPC,UAAU,KAAK,EACf,GAAGC,OAEuD;IAC1D,MAAMC,OAAOF,UAAUG,2BAAAA,IAAIA,GAAG;IAE9B,OACE,WADF,GACE,qCAACD,MAAAA;QACC,aAAU;QACV,WAAWE,IAAAA,0BAAAA,EAAAA,EAAGT,cAAc;YAAEI;QAAQ,IAAID;QACzC,GAAGG,KAAK;;AAGf"}