@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.6 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (388) hide show
  1. package/README.md +80 -95
  2. package/dist/fa814698dcde12f86a37ac31dd3aedf9.css +1 -1
  3. package/dist/perisai-ui.es.js +97 -94
  4. package/dist/perisai-ui.umd.js +1 -1
  5. package/package.json +45 -45
  6. package/src/globals.css +575 -575
  7. package/src/index.ts +178 -177
  8. package/src/lib/utils.ts +6 -6
  9. package/src/shadcn/accordion/Accordion.vue +19 -19
  10. package/src/shadcn/accordion/AccordionContent.vue +23 -23
  11. package/src/shadcn/accordion/AccordionItem.vue +23 -23
  12. package/src/shadcn/accordion/AccordionTrigger.vue +38 -38
  13. package/src/shadcn/accordion/index.ts +4 -4
  14. package/src/shadcn/avatar/Avatar.vue +18 -18
  15. package/src/shadcn/avatar/AvatarFallback.vue +21 -21
  16. package/src/shadcn/avatar/AvatarImage.vue +16 -16
  17. package/src/shadcn/avatar/index.ts +3 -3
  18. package/src/shadcn/breadcrumb/Breadcrumb.vue +8 -8
  19. package/src/shadcn/breadcrumb/BreadcrumbEllipsis.vue +9 -9
  20. package/src/shadcn/breadcrumb/BreadcrumbItem.vue +8 -8
  21. package/src/shadcn/breadcrumb/BreadcrumbLink.vue +8 -8
  22. package/src/shadcn/breadcrumb/BreadcrumbList.vue +8 -8
  23. package/src/shadcn/breadcrumb/BreadcrumbPage.vue +8 -8
  24. package/src/shadcn/breadcrumb/BreadcrumbSeparator.vue +8 -8
  25. package/src/shadcn/breadcrumb/index.ts +7 -7
  26. package/src/shadcn/button/Button.vue +29 -29
  27. package/src/shadcn/button/index.ts +38 -38
  28. package/src/shadcn/calendar/Calendar.vue +64 -64
  29. package/src/shadcn/calendar/CalendarCell.vue +23 -23
  30. package/src/shadcn/calendar/CalendarCellTrigger.vue +39 -39
  31. package/src/shadcn/calendar/CalendarGrid.vue +23 -23
  32. package/src/shadcn/calendar/CalendarGridBody.vue +15 -15
  33. package/src/shadcn/calendar/CalendarGridHead.vue +16 -16
  34. package/src/shadcn/calendar/CalendarGridRow.vue +22 -22
  35. package/src/shadcn/calendar/CalendarHeadCell.vue +23 -23
  36. package/src/shadcn/calendar/CalendarHeader.vue +23 -23
  37. package/src/shadcn/calendar/CalendarHeading.vue +30 -30
  38. package/src/shadcn/calendar/CalendarNextButton.vue +32 -32
  39. package/src/shadcn/calendar/CalendarPrevButton.vue +32 -32
  40. package/src/shadcn/calendar/index.ts +12 -12
  41. package/src/shadcn/card/Card.vue +8 -8
  42. package/src/shadcn/card/CardContent.vue +8 -8
  43. package/src/shadcn/card/CardDescription.vue +8 -8
  44. package/src/shadcn/card/CardHeader.vue +8 -8
  45. package/src/shadcn/card/CardTitle.vue +8 -8
  46. package/src/shadcn/card/index.ts +5 -5
  47. package/src/shadcn/checkbox/Checkbox.vue +38 -38
  48. package/src/shadcn/checkbox/index.ts +1 -1
  49. package/src/shadcn/command/Command.vue +87 -87
  50. package/src/shadcn/command/CommandDialog.vue +31 -31
  51. package/src/shadcn/command/CommandEmpty.vue +27 -27
  52. package/src/shadcn/command/CommandGroup.vue +45 -45
  53. package/src/shadcn/command/CommandInput.vue +39 -39
  54. package/src/shadcn/command/CommandItem.vue +76 -76
  55. package/src/shadcn/command/CommandList.vue +25 -25
  56. package/src/shadcn/command/CommandSeparator.vue +21 -21
  57. package/src/shadcn/command/CommandShortcut.vue +17 -17
  58. package/src/shadcn/command/index.ts +25 -25
  59. package/src/shadcn/context-menu/ContextMenu.vue +18 -18
  60. package/src/shadcn/context-menu/ContextMenuCheckboxItem.vue +38 -38
  61. package/src/shadcn/context-menu/ContextMenuContent.vue +34 -34
  62. package/src/shadcn/context-menu/ContextMenuGroup.vue +15 -15
  63. package/src/shadcn/context-menu/ContextMenuItem.vue +39 -39
  64. package/src/shadcn/context-menu/ContextMenuLabel.vue +22 -22
  65. package/src/shadcn/context-menu/ContextMenuPortal.vue +15 -15
  66. package/src/shadcn/context-menu/ContextMenuRadioGroup.vue +22 -22
  67. package/src/shadcn/context-menu/ContextMenuRadioItem.vue +38 -38
  68. package/src/shadcn/context-menu/ContextMenuSeparator.vue +22 -22
  69. package/src/shadcn/context-menu/ContextMenuShortcut.vue +17 -17
  70. package/src/shadcn/context-menu/ContextMenuSub.vue +22 -22
  71. package/src/shadcn/context-menu/ContextMenuSubContent.vue +33 -33
  72. package/src/shadcn/context-menu/ContextMenuSubTrigger.vue +33 -33
  73. package/src/shadcn/context-menu/ContextMenuTrigger.vue +17 -17
  74. package/src/shadcn/context-menu/index.ts +15 -15
  75. package/src/shadcn/dialog/Dialog.vue +18 -18
  76. package/src/shadcn/dialog/DialogClose.vue +15 -15
  77. package/src/shadcn/dialog/DialogContent.vue +46 -46
  78. package/src/shadcn/dialog/DialogDescription.vue +23 -23
  79. package/src/shadcn/dialog/DialogFooter.vue +15 -15
  80. package/src/shadcn/dialog/DialogHeader.vue +17 -17
  81. package/src/shadcn/dialog/DialogOverlay.vue +21 -21
  82. package/src/shadcn/dialog/DialogScrollContent.vue +56 -56
  83. package/src/shadcn/dialog/DialogTitle.vue +23 -23
  84. package/src/shadcn/dialog/DialogTrigger.vue +15 -15
  85. package/src/shadcn/dialog/index.ts +10 -10
  86. package/src/shadcn/dropdown-menu/DropdownMenu.vue +18 -18
  87. package/src/shadcn/dropdown-menu/DropdownMenuCheckboxItem.vue +38 -38
  88. package/src/shadcn/dropdown-menu/DropdownMenuContent.vue +36 -36
  89. package/src/shadcn/dropdown-menu/DropdownMenuGroup.vue +15 -15
  90. package/src/shadcn/dropdown-menu/DropdownMenuItem.vue +31 -31
  91. package/src/shadcn/dropdown-menu/DropdownMenuLabel.vue +23 -23
  92. package/src/shadcn/dropdown-menu/DropdownMenuRadioGroup.vue +22 -22
  93. package/src/shadcn/dropdown-menu/DropdownMenuRadioItem.vue +39 -39
  94. package/src/shadcn/dropdown-menu/DropdownMenuSeparator.vue +24 -24
  95. package/src/shadcn/dropdown-menu/DropdownMenuShortcut.vue +17 -17
  96. package/src/shadcn/dropdown-menu/DropdownMenuSub.vue +19 -19
  97. package/src/shadcn/dropdown-menu/DropdownMenuSubContent.vue +28 -28
  98. package/src/shadcn/dropdown-menu/DropdownMenuSubTrigger.vue +31 -31
  99. package/src/shadcn/dropdown-menu/DropdownMenuTrigger.vue +17 -17
  100. package/src/shadcn/dropdown-menu/index.ts +16 -16
  101. package/src/shadcn/menubar/Menubar.vue +33 -33
  102. package/src/shadcn/menubar/MenubarCheckboxItem.vue +38 -38
  103. package/src/shadcn/menubar/MenubarContent.vue +42 -42
  104. package/src/shadcn/menubar/MenubarGroup.vue +15 -15
  105. package/src/shadcn/menubar/MenubarItem.vue +37 -37
  106. package/src/shadcn/menubar/MenubarLabel.vue +20 -20
  107. package/src/shadcn/menubar/MenubarMenu.vue +15 -15
  108. package/src/shadcn/menubar/MenubarPortal.vue +5 -5
  109. package/src/shadcn/menubar/MenubarRadioGroup.vue +22 -22
  110. package/src/shadcn/menubar/MenubarRadioItem.vue +38 -38
  111. package/src/shadcn/menubar/MenubarSeparator.vue +21 -21
  112. package/src/shadcn/menubar/MenubarShortcut.vue +17 -17
  113. package/src/shadcn/menubar/MenubarSub.vue +23 -23
  114. package/src/shadcn/menubar/MenubarSubContent.vue +36 -36
  115. package/src/shadcn/menubar/MenubarSubTrigger.vue +28 -28
  116. package/src/shadcn/menubar/MenubarTrigger.vue +28 -28
  117. package/src/shadcn/menubar/index.ts +15 -15
  118. package/src/shadcn/navigation-menu/NavigationMenu.vue +35 -35
  119. package/src/shadcn/navigation-menu/NavigationMenuContent.vue +31 -31
  120. package/src/shadcn/navigation-menu/NavigationMenuIndicator.vue +23 -23
  121. package/src/shadcn/navigation-menu/NavigationMenuItem.vue +21 -21
  122. package/src/shadcn/navigation-menu/NavigationMenuLink.vue +26 -26
  123. package/src/shadcn/navigation-menu/NavigationMenuList.vue +28 -28
  124. package/src/shadcn/navigation-menu/NavigationMenuTrigger.vue +24 -24
  125. package/src/shadcn/navigation-menu/NavigationMenuViewport.vue +31 -31
  126. package/src/shadcn/navigation-menu/index.ts +14 -14
  127. package/src/shadcn/pagination/Pagination.vue +151 -151
  128. package/src/shadcn/pagination/PaginationContent.vue +22 -22
  129. package/src/shadcn/pagination/PaginationEllipsis.vue +25 -25
  130. package/src/shadcn/pagination/PaginationFirst.vue +33 -33
  131. package/src/shadcn/pagination/PaginationItem.vue +31 -31
  132. package/src/shadcn/pagination/PaginationLast.vue +33 -33
  133. package/src/shadcn/pagination/PaginationLink.vue +13 -13
  134. package/src/shadcn/pagination/PaginationNext.vue +22 -22
  135. package/src/shadcn/pagination/PaginationPrevious.vue +33 -33
  136. package/src/shadcn/pagination/index.ts +9 -9
  137. package/src/shadcn/popover/Popover.vue +18 -18
  138. package/src/shadcn/popover/PopoverAnchor.vue +15 -15
  139. package/src/shadcn/popover/PopoverContent.vue +46 -46
  140. package/src/shadcn/popover/PopoverTrigger.vue +15 -15
  141. package/src/shadcn/popover/index.ts +4 -4
  142. package/src/shadcn/radio-group/RadioGroup.vue +24 -24
  143. package/src/shadcn/radio-group/RadioGroupItem.vue +39 -39
  144. package/src/shadcn/radio-group/index.ts +2 -2
  145. package/src/shadcn/range-calendar/RangeCalendar.vue +71 -71
  146. package/src/shadcn/range-calendar/RangeCalendarCell.vue +23 -23
  147. package/src/shadcn/range-calendar/RangeCalendarCellTrigger.vue +41 -41
  148. package/src/shadcn/range-calendar/RangeCalendarGrid.vue +23 -23
  149. package/src/shadcn/range-calendar/RangeCalendarGridBody.vue +15 -15
  150. package/src/shadcn/range-calendar/RangeCalendarGridHead.vue +15 -15
  151. package/src/shadcn/range-calendar/RangeCalendarGridRow.vue +22 -22
  152. package/src/shadcn/range-calendar/RangeCalendarHeadCell.vue +23 -23
  153. package/src/shadcn/range-calendar/RangeCalendarHeader.vue +23 -23
  154. package/src/shadcn/range-calendar/RangeCalendarHeading.vue +30 -30
  155. package/src/shadcn/range-calendar/RangeCalendarNextButton.vue +32 -32
  156. package/src/shadcn/range-calendar/RangeCalendarPrevButton.vue +32 -32
  157. package/src/shadcn/range-calendar/index.ts +12 -12
  158. package/src/shadcn/select/Select.vue +18 -18
  159. package/src/shadcn/select/SelectContent.vue +52 -52
  160. package/src/shadcn/select/SelectGroup.vue +15 -15
  161. package/src/shadcn/select/SelectItem.vue +43 -43
  162. package/src/shadcn/select/SelectItemText.vue +15 -15
  163. package/src/shadcn/select/SelectLabel.vue +17 -17
  164. package/src/shadcn/select/SelectScrollDownButton.vue +26 -26
  165. package/src/shadcn/select/SelectScrollUpButton.vue +26 -26
  166. package/src/shadcn/select/SelectSeparator.vue +19 -19
  167. package/src/shadcn/select/SelectTrigger.vue +33 -33
  168. package/src/shadcn/select/SelectValue.vue +15 -15
  169. package/src/shadcn/select/index.ts +11 -11
  170. package/src/shadcn/separator/Separator.vue +31 -31
  171. package/src/shadcn/separator/index.ts +1 -1
  172. package/src/shadcn/sidebar/MenuGroup.vue +28 -28
  173. package/src/shadcn/sidebar/MenuItemRenderer.vue +23 -23
  174. package/src/shadcn/sidebar/Sidebar.vue +14 -14
  175. package/src/shadcn/sidebar/SidebarDemoContent.vue +26 -26
  176. package/src/shadcn/sidebar/SidebarMenuGroupWithLabel.vue +29 -29
  177. package/src/shadcn/sidebar/SidebarMenuItemWithIcon.vue +103 -103
  178. package/src/shadcn/sidebar/SidebarMenuSub.vue +10 -10
  179. package/src/shadcn/sidebar/SidebarMenuSubItemStyled.vue +38 -38
  180. package/src/shadcn/sidebar/SidebarTrigger.vue +8 -8
  181. package/src/shadcn/sidebar/index.ts +5 -5
  182. package/src/shadcn/slider/Slider.vue +43 -43
  183. package/src/shadcn/slider/index.ts +1 -1
  184. package/src/shadcn/sonner/Sonner.vue +19 -19
  185. package/src/shadcn/sonner/index.ts +1 -1
  186. package/src/shadcn/spinner/Spinner.vue +17 -17
  187. package/src/shadcn/spinner/index.ts +1 -1
  188. package/src/shadcn/switch/Switch.vue +38 -38
  189. package/src/shadcn/switch/index.ts +1 -1
  190. package/src/shadcn/tabs/CardTabsContent.vue +16 -16
  191. package/src/shadcn/tabs/CornerCutTabsTrigger.vue +102 -102
  192. package/src/shadcn/tabs/GridTabsList.vue +30 -30
  193. package/src/shadcn/tabs/ScrollableTabsList.vue +8 -8
  194. package/src/shadcn/tabs/Tabs.vue +23 -23
  195. package/src/shadcn/tabs/TabsContent.vue +21 -21
  196. package/src/shadcn/tabs/TabsList.vue +24 -24
  197. package/src/shadcn/tabs/TabsTrigger.vue +30 -30
  198. package/src/shadcn/tabs/VerticalTabsList.vue +28 -28
  199. package/src/shadcn/tabs/VerticalTabsTrigger.vue +16 -16
  200. package/src/shadcn/tabs/index.ts +10 -10
  201. package/src/shadcn/toggle/Toggle.vue +35 -35
  202. package/src/shadcn/toggle/index.ts +28 -28
  203. package/src/shadcn/tooltip/Tooltip.vue +18 -18
  204. package/src/shadcn/tooltip/TooltipContent.vue +34 -34
  205. package/src/shadcn/tooltip/TooltipProvider.vue +14 -14
  206. package/src/shadcn/tooltip/TooltipTrigger.vue +15 -15
  207. package/src/shadcn/tooltip/index.ts +4 -4
  208. package/src/shadcn/tree/index.ts +2 -0
  209. package/src/ui/InputOTP.vue +69 -69
  210. package/src/ui/InputOTPContext.ts +9 -9
  211. package/src/ui/InputOTPGroup.vue +7 -7
  212. package/src/ui/InputOTPSeparator.vue +8 -8
  213. package/src/ui/InputOTPSlot.vue +61 -61
  214. package/src/ui/PopoverContent.vue +27 -27
  215. package/src/ui/PopoverTrigger.vue +9 -9
  216. package/src/ui/SelectContent.vue +23 -23
  217. package/src/ui/SelectGroup.vue +12 -12
  218. package/src/ui/SelectItem.vue +25 -25
  219. package/src/ui/SelectLabel.vue +16 -16
  220. package/src/ui/SelectSeparator.vue +17 -17
  221. package/src/ui/SelectTrigger.vue +22 -22
  222. package/src/ui/SelectValue.vue +9 -9
  223. package/src/ui/SheetContent.vue +34 -34
  224. package/src/ui/SheetDescription.vue +9 -9
  225. package/src/ui/SheetHeader.vue +11 -11
  226. package/src/ui/SheetTitle.vue +9 -9
  227. package/src/ui/accordion-content.vue +21 -21
  228. package/src/ui/accordion-item.vue +18 -18
  229. package/src/ui/accordion-trigger.vue +14 -14
  230. package/src/ui/accordion.vue +9 -9
  231. package/src/ui/alert-actions.vue +13 -13
  232. package/src/ui/alert-description.vue +13 -13
  233. package/src/ui/alert-title.vue +13 -13
  234. package/src/ui/alert.vue +63 -63
  235. package/src/ui/avatar-fallback.vue +38 -38
  236. package/src/ui/avatar-group.vue +32 -32
  237. package/src/ui/avatar-image.vue +19 -19
  238. package/src/ui/avatar.vue +32 -32
  239. package/src/ui/badge.vue +90 -90
  240. package/src/ui/breadcrumb-item.vue +11 -11
  241. package/src/ui/breadcrumb-separator.vue +9 -9
  242. package/src/ui/breadcrumb.vue +11 -11
  243. package/src/ui/button.vue +76 -76
  244. package/src/ui/card-content.vue +16 -16
  245. package/src/ui/card-description.vue +16 -16
  246. package/src/ui/card-footer.vue +13 -13
  247. package/src/ui/card-header.vue +19 -19
  248. package/src/ui/card-title.vue +16 -16
  249. package/src/ui/card.vue +73 -73
  250. package/src/ui/category-breakdown-metric.vue +205 -205
  251. package/src/ui/checkbox.vue +84 -84
  252. package/src/ui/cn.ts +6 -6
  253. package/src/ui/dialog-body.vue +13 -13
  254. package/src/ui/dialog-close.vue +9 -9
  255. package/src/ui/dialog-content.vue +36 -36
  256. package/src/ui/dialog-description.vue +13 -13
  257. package/src/ui/dialog-footer.vue +13 -13
  258. package/src/ui/dialog-header.vue +13 -13
  259. package/src/ui/dialog-overlay.vue +14 -14
  260. package/src/ui/dialog-portal.vue +9 -9
  261. package/src/ui/dialog-title.vue +13 -13
  262. package/src/ui/dialog-trigger.vue +9 -9
  263. package/src/ui/dialog.vue +9 -9
  264. package/src/ui/dismissible-badges-demo.vue +94 -94
  265. package/src/ui/drawer-content.vue +53 -53
  266. package/src/ui/drawer-description.vue +23 -23
  267. package/src/ui/drawer-footer.vue +22 -22
  268. package/src/ui/drawer-header.vue +22 -22
  269. package/src/ui/drawer-title.vue +23 -23
  270. package/src/ui/drawer-trigger.vue +23 -23
  271. package/src/ui/drawer.vue +34 -34
  272. package/src/ui/dropdown-menu-checkbox-item.vue +27 -27
  273. package/src/ui/dropdown-menu-content.vue +23 -23
  274. package/src/ui/dropdown-menu-group.vue +7 -7
  275. package/src/ui/dropdown-menu-item.vue +19 -19
  276. package/src/ui/dropdown-menu-label.vue +17 -17
  277. package/src/ui/dropdown-menu-portal.vue +8 -8
  278. package/src/ui/dropdown-menu-radio-group.vue +14 -14
  279. package/src/ui/dropdown-menu-radio-item.vue +30 -30
  280. package/src/ui/dropdown-menu-separator.vue +13 -13
  281. package/src/ui/dropdown-menu-shortcut.vue +15 -15
  282. package/src/ui/dropdown-menu-sub-content.vue +8 -8
  283. package/src/ui/dropdown-menu-sub-trigger.vue +8 -8
  284. package/src/ui/dropdown-menu-sub.vue +8 -8
  285. package/src/ui/dropdown-menu-trigger.vue +8 -8
  286. package/src/ui/dropdown-menu.vue +9 -9
  287. package/src/ui/grouped-avatar.vue +19 -19
  288. package/src/ui/icons/Accessibility.vue +7 -7
  289. package/src/ui/icons/AlignLeft.vue +6 -6
  290. package/src/ui/icons/ArrowDown.vue +7 -7
  291. package/src/ui/icons/ArrowUp.vue +7 -7
  292. package/src/ui/icons/ArrowUpDown.vue +8 -8
  293. package/src/ui/icons/BookOpen.vue +6 -6
  294. package/src/ui/icons/Calendar.vue +9 -9
  295. package/src/ui/icons/Check.vue +6 -6
  296. package/src/ui/icons/ChevronRight.vue +6 -6
  297. package/src/ui/icons/Circle.vue +6 -6
  298. package/src/ui/icons/Copy.vue +7 -7
  299. package/src/ui/icons/Dot.vue +6 -6
  300. package/src/ui/icons/Edit.vue +6 -6
  301. package/src/ui/icons/FileText.vue +9 -9
  302. package/src/ui/icons/Folder.vue +6 -6
  303. package/src/ui/icons/FolderOpen.vue +7 -7
  304. package/src/ui/icons/Hash.vue +6 -6
  305. package/src/ui/icons/Home.vue +6 -6
  306. package/src/ui/icons/Minus.vue +6 -6
  307. package/src/ui/icons/MoreHorizontal.vue +8 -8
  308. package/src/ui/icons/Settings.vue +7 -7
  309. package/src/ui/icons/Slash.vue +6 -6
  310. package/src/ui/icons/Trash2.vue +6 -6
  311. package/src/ui/icons/Type.vue +6 -6
  312. package/src/ui/icons/User.vue +7 -7
  313. package/src/ui/input-otp.vue +52 -52
  314. package/src/ui/input.vue +98 -98
  315. package/src/ui/label.vue +19 -19
  316. package/src/ui/pagination.vue +41 -41
  317. package/src/ui/popover.vue +9 -9
  318. package/src/ui/progress.vue +67 -67
  319. package/src/ui/radio-group-item.vue +53 -53
  320. package/src/ui/radio-group.vue +27 -27
  321. package/src/ui/scrollable-tabs-list.vue +148 -148
  322. package/src/ui/select-multiple.vue +135 -135
  323. package/src/ui/select.vue +77 -77
  324. package/src/ui/separator.vue +60 -60
  325. package/src/ui/sheet.vue +50 -50
  326. package/src/ui/sidebar/BaseSidebar.vue +97 -97
  327. package/src/ui/sidebar/BasicSearch.vue +27 -27
  328. package/src/ui/sidebar/ResponsiveSearch.vue +54 -54
  329. package/src/ui/sidebar/Sidebar.vue +227 -227
  330. package/src/ui/sidebar/SidebarCollapseButton.vue +10 -10
  331. package/src/ui/sidebar/SidebarContent.vue +31 -31
  332. package/src/ui/sidebar/SidebarDescription.vue +10 -10
  333. package/src/ui/sidebar/SidebarExpandButton.vue +10 -10
  334. package/src/ui/sidebar/SidebarFooter.vue +10 -10
  335. package/src/ui/sidebar/SidebarGroup.vue +11 -11
  336. package/src/ui/sidebar/SidebarGroupContent.vue +10 -10
  337. package/src/ui/sidebar/SidebarGroupLabel.vue +7 -7
  338. package/src/ui/sidebar/SidebarHeader.vue +10 -10
  339. package/src/ui/sidebar/SidebarInset.vue +19 -19
  340. package/src/ui/sidebar/SidebarMenu.vue +7 -7
  341. package/src/ui/sidebar/SidebarMenuBadge.vue +7 -7
  342. package/src/ui/sidebar/SidebarMenuButton.vue +17 -17
  343. package/src/ui/sidebar/SidebarMenuItem.vue +10 -10
  344. package/src/ui/sidebar/SidebarMenuSub.vue +18 -18
  345. package/src/ui/sidebar/SidebarMenuSubContent.vue +10 -10
  346. package/src/ui/sidebar/SidebarMenuSubItem.vue +10 -10
  347. package/src/ui/sidebar/SidebarMenuSubTrigger.vue +10 -10
  348. package/src/ui/sidebar/SidebarProvider.vue +108 -108
  349. package/src/ui/sidebar/SidebarScrollArea.vue +10 -10
  350. package/src/ui/sidebar/SidebarSection.vue +10 -10
  351. package/src/ui/sidebar/SidebarSeparator.vue +8 -8
  352. package/src/ui/sidebar/SidebarShortcut.vue +10 -10
  353. package/src/ui/sidebar/SidebarTitle.vue +10 -10
  354. package/src/ui/sidebar/SidebarTrigger.vue +27 -27
  355. package/src/ui/sidebar/Wrapper.vue +12 -12
  356. package/src/ui/sidebar/context.ts +8 -8
  357. package/src/ui/sidebar/index.ts +27 -27
  358. package/src/ui/sidebar/sidebarStore.ts +40 -40
  359. package/src/ui/sidebar/types.ts +30 -30
  360. package/src/ui/sidebar/useAutoCollapse.ts +81 -81
  361. package/src/ui/sidebar.vue +24 -24
  362. package/src/ui/skeleton.vue +15 -15
  363. package/src/ui/slider.vue +32 -32
  364. package/src/ui/sonner.vue +67 -67
  365. package/src/ui/switch.vue +33 -33
  366. package/src/ui/tab-content.vue +28 -28
  367. package/src/ui/tab-list.vue +31 -31
  368. package/src/ui/tab-panel.vue +19 -19
  369. package/src/ui/tab-trigger.vue +34 -34
  370. package/src/ui/tab.vue +30 -30
  371. package/src/ui/table-body.vue +16 -16
  372. package/src/ui/table-caption.vue +20 -20
  373. package/src/ui/table-cell.vue +16 -16
  374. package/src/ui/table-footer.vue +16 -16
  375. package/src/ui/table-header.vue +132 -132
  376. package/src/ui/table-row.vue +16 -16
  377. package/src/ui/table.vue +55 -55
  378. package/src/ui/tabs.vue +33 -33
  379. package/src/ui/textarea.vue +91 -91
  380. package/src/ui/threat-gauge.vue +137 -137
  381. package/src/ui/toggle.vue +69 -69
  382. package/src/ui/tooltip-content.vue +52 -52
  383. package/src/ui/tooltip-provider.vue +13 -13
  384. package/src/ui/tooltip-root.vue +9 -9
  385. package/src/ui/tooltip-trigger.vue +13 -13
  386. package/src/ui/tooltip.vue +22 -22
  387. package/src/ui/utils.ts +6 -6
  388. package/vite.config.ts +39 -39
@@ -1,17 +1,17 @@
1
- <script setup>
2
- import { SelectSeparator } from "reka-ui"
3
- import { cn } from "./utils"
4
-
5
- const props = defineProps({
6
- class: String
7
- })
8
- </script>
9
-
10
- <template>
11
- <SelectSeparator
12
- data-slot="select-separator"
13
- :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
14
- v-bind="$attrs"
15
- />
16
- </template>
17
-
1
+ <script setup>
2
+ import { SelectSeparator } from "reka-ui"
3
+ import { cn } from "./utils"
4
+
5
+ const props = defineProps({
6
+ class: String
7
+ })
8
+ </script>
9
+
10
+ <template>
11
+ <SelectSeparator
12
+ data-slot="select-separator"
13
+ :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
14
+ v-bind="$attrs"
15
+ />
16
+ </template>
17
+
@@ -1,22 +1,22 @@
1
- <script setup lang="ts">
2
- import { cn } from './utils';
3
- import { SelectTrigger } from '@/shadcn/select';
4
- import { ChevronDown } from 'lucide-vue-next';
5
- defineProps({
6
- class: String,
7
- size: { type: String, default: 'default' },
8
- });
9
- </script>
10
- <template>
11
- <SelectTrigger
12
- data-slot="select-trigger"
13
- :data-size="size"
14
- :class="cn(
15
- 'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-select-hover flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:min-h-9 data-[size=sm]:min-h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:overflow-hidden [&_[data-slot=select-value]_div]:flex [&_[data-slot=select-value]_div]:items-center [&_[data-slot=select-value]_div]:gap-2 [&_[data-slot=select-value]_.text-xs]:hidden [&_[data-slot=select-value]_svg]:shrink-0',
16
- $props.class,
17
- )"
18
- v-bind="$attrs"
19
- >
20
- <slot />
21
- </SelectTrigger>
22
- </template>
1
+ <script setup lang="ts">
2
+ import { cn } from './utils';
3
+ import { SelectTrigger } from '@/shadcn/select';
4
+ import { ChevronDown } from 'lucide-vue-next';
5
+ defineProps({
6
+ class: String,
7
+ size: { type: String, default: 'default' },
8
+ });
9
+ </script>
10
+ <template>
11
+ <SelectTrigger
12
+ data-slot="select-trigger"
13
+ :data-size="size"
14
+ :class="cn(
15
+ 'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-select-hover flex w-full items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:min-h-9 data-[size=sm]:min-h-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 *:data-[slot=select-value]:overflow-hidden [&_[data-slot=select-value]_div]:flex [&_[data-slot=select-value]_div]:items-center [&_[data-slot=select-value]_div]:gap-2 [&_[data-slot=select-value]_.text-xs]:hidden [&_[data-slot=select-value]_svg]:shrink-0',
16
+ $props.class,
17
+ )"
18
+ v-bind="$attrs"
19
+ >
20
+ <slot />
21
+ </SelectTrigger>
22
+ </template>
@@ -1,9 +1,9 @@
1
- <script setup lang="ts">
2
- import { SelectValue } from '@/shadcn/select';
3
- </script>
4
-
5
- <template>
6
- <SelectValue data-slot="select-value" v-bind="$attrs">
7
- <slot />
8
- </SelectValue>
9
- </template>
1
+ <script setup lang="ts">
2
+ import { SelectValue } from '@/shadcn/select';
3
+ </script>
4
+
5
+ <template>
6
+ <SelectValue data-slot="select-value" v-bind="$attrs">
7
+ <slot />
8
+ </SelectValue>
9
+ </template>
@@ -1,34 +1,34 @@
1
- <script setup lang="ts">
2
- import { cn } from '@/lib/utils';
3
- import { computed } from 'vue';
4
-
5
- const props = defineProps({
6
- side: { type: String, default: 'right' },
7
- class: String,
8
- });
9
- </script>
10
- <template>
11
- <div
12
- :data-slot="'sheet-content'"
13
- :class="[
14
- cn(
15
- 'bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out',
16
- side === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
17
- side === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
18
- side === 'top' && 'inset-x-0 top-0 h-auto border-b',
19
- side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t',
20
- props.class,
21
- )
22
- ]"
23
- >
24
- <slot />
25
- <button
26
- class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
27
- @click="$emit('close')"
28
- >
29
- <span class="sr-only">Close</span>
30
- <!-- Replace with your icon component -->
31
- <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
32
- </button>
33
- </div>
34
- </template>
1
+ <script setup lang="ts">
2
+ import { cn } from '@/lib/utils';
3
+ import { computed } from 'vue';
4
+
5
+ const props = defineProps({
6
+ side: { type: String, default: 'right' },
7
+ class: String,
8
+ });
9
+ </script>
10
+ <template>
11
+ <div
12
+ :data-slot="'sheet-content'"
13
+ :class="[
14
+ cn(
15
+ 'bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out',
16
+ side === 'right' && 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
17
+ side === 'left' && 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
18
+ side === 'top' && 'inset-x-0 top-0 h-auto border-b',
19
+ side === 'bottom' && 'inset-x-0 bottom-0 h-auto border-t',
20
+ props.class,
21
+ )
22
+ ]"
23
+ >
24
+ <slot />
25
+ <button
26
+ class="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
27
+ @click="$emit('close')"
28
+ >
29
+ <span class="sr-only">Close</span>
30
+ <!-- Replace with your icon component -->
31
+ <svg class="size-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
32
+ </button>
33
+ </div>
34
+ </template>
@@ -1,9 +1,9 @@
1
- <script setup lang="ts">
2
- import { cn } from '@/lib/utils';
3
- const props = defineProps({
4
- class: String,
5
- });
6
- </script>
7
- <template>
8
- <p :data-slot="'sheet-description'" :class="cn('text-muted-foreground text-sm', props.class)"><slot /></p>
9
- </template>
1
+ <script setup lang="ts">
2
+ import { cn } from '@/lib/utils';
3
+ const props = defineProps({
4
+ class: String,
5
+ });
6
+ </script>
7
+ <template>
8
+ <p :data-slot="'sheet-description'" :class="cn('text-muted-foreground text-sm', props.class)"><slot /></p>
9
+ </template>
@@ -1,11 +1,11 @@
1
- <script setup lang="ts">
2
- import { cn } from '@/lib/utils';
3
- const props = defineProps({
4
- class: String,
5
- });
6
- </script>
7
- <template>
8
- <div :data-slot="'sheet-header'" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
9
- <slot />
10
- </div>
11
- </template>
1
+ <script setup lang="ts">
2
+ import { cn } from '@/lib/utils';
3
+ const props = defineProps({
4
+ class: String,
5
+ });
6
+ </script>
7
+ <template>
8
+ <div :data-slot="'sheet-header'" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
9
+ <slot />
10
+ </div>
11
+ </template>
@@ -1,9 +1,9 @@
1
- <script setup lang="ts">
2
- import { cn } from '@/lib/utils';
3
- const props = defineProps({
4
- class: String,
5
- });
6
- </script>
7
- <template>
8
- <h2 :data-slot="'sheet-title'" :class="cn('text-foreground font-semibold', props.class)"><slot /></h2>
9
- </template>
1
+ <script setup lang="ts">
2
+ import { cn } from '@/lib/utils';
3
+ const props = defineProps({
4
+ class: String,
5
+ });
6
+ </script>
7
+ <template>
8
+ <h2 :data-slot="'sheet-title'" :class="cn('text-foreground font-semibold', props.class)"><slot /></h2>
9
+ </template>
@@ -1,21 +1,21 @@
1
-
2
-
3
- <script setup lang="ts">
4
- import { AccordionContent } from '@/shadcn/accordion';
5
- import { cn } from '@/lib/utils';
6
- import { useAttrs } from 'vue';
7
-
8
- const attrs = useAttrs();
9
- </script>
10
-
11
- <template>
12
- <AccordionContent
13
- data-slot="accordion-content"
14
- v-bind="attrs"
15
- class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
16
- >
17
- <div :class="cn('pt-0 pb-4', attrs.class)">
18
- <slot />
19
- </div>
20
- </AccordionContent>
21
- </template>
1
+
2
+
3
+ <script setup lang="ts">
4
+ import { AccordionContent } from '@/shadcn/accordion';
5
+ import { cn } from '@/lib/utils';
6
+ import { useAttrs } from 'vue';
7
+
8
+ const attrs = useAttrs();
9
+ </script>
10
+
11
+ <template>
12
+ <AccordionContent
13
+ data-slot="accordion-content"
14
+ v-bind="attrs"
15
+ class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
16
+ >
17
+ <div :class="cn('pt-0 pb-4', attrs.class)">
18
+ <slot />
19
+ </div>
20
+ </AccordionContent>
21
+ </template>
@@ -1,18 +1,18 @@
1
-
2
- <script setup lang="ts">
3
- import { AccordionItem } from '@/shadcn/accordion';
4
- import { cn } from '@/lib/utils';
5
-
6
- const props = defineProps({
7
- class: { type: [String, Array, Object], default: '' },
8
- });
9
- </script>
10
-
11
- <template>
12
- <AccordionItem
13
- data-slot="accordion-item"
14
- v-bind="{ ...$attrs, class: cn('border-b last:border-b-0', props.class) }"
15
- >
16
- <slot />
17
- </AccordionItem>
18
- </template>
1
+
2
+ <script setup lang="ts">
3
+ import { AccordionItem } from '@/shadcn/accordion';
4
+ import { cn } from '@/lib/utils';
5
+
6
+ const props = defineProps({
7
+ class: { type: [String, Array, Object], default: '' },
8
+ });
9
+ </script>
10
+
11
+ <template>
12
+ <AccordionItem
13
+ data-slot="accordion-item"
14
+ v-bind="{ ...$attrs, class: cn('border-b last:border-b-0', props.class) }"
15
+ >
16
+ <slot />
17
+ </AccordionItem>
18
+ </template>
@@ -1,14 +1,14 @@
1
- <template>
2
- <AccordionTrigger
3
- data-slot="accordion-trigger"
4
- :class="cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', $attrs['custom-class'])"
5
- v-bind="$attrs"
6
- >
7
- <slot />
8
- </AccordionTrigger>
9
- </template>
10
-
11
- <script setup>
12
- import { cn } from './cn';
13
- import { AccordionTrigger } from "@/shadcn/accordion/index";
14
- </script>
1
+ <template>
2
+ <AccordionTrigger
3
+ data-slot="accordion-trigger"
4
+ :class="cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', $attrs['custom-class'])"
5
+ v-bind="$attrs"
6
+ >
7
+ <slot />
8
+ </AccordionTrigger>
9
+ </template>
10
+
11
+ <script setup>
12
+ import { cn } from './cn';
13
+ import { AccordionTrigger } from "@/shadcn/accordion/index";
14
+ </script>
@@ -1,9 +1,9 @@
1
- <script setup lang="ts">
2
- import { Accordion } from '@/shadcn/accordion';
3
- </script>
4
-
5
- <template>
6
- <Accordion data-slot="accordion" v-bind="$attrs">
7
- <slot />
8
- </Accordion>
9
- </template>
1
+ <script setup lang="ts">
2
+ import { Accordion } from '@/shadcn/accordion';
3
+ </script>
4
+
5
+ <template>
6
+ <Accordion data-slot="accordion" v-bind="$attrs">
7
+ <slot />
8
+ </Accordion>
9
+ </template>
@@ -1,13 +1,13 @@
1
- <template>
2
- <div
3
- data-slot="alert-actions"
4
- :class="['col-start-2 mt-3 flex gap-2', $attrs.class]"
5
- v-bind="$attrs"
6
- >
7
- <slot />
8
- </div>
9
- </template>
10
-
11
- <script setup>
12
- // No additional logic needed; all props/attrs are passed through
13
- </script>
1
+ <template>
2
+ <div
3
+ data-slot="alert-actions"
4
+ :class="['col-start-2 mt-3 flex gap-2', $attrs.class]"
5
+ v-bind="$attrs"
6
+ >
7
+ <slot />
8
+ </div>
9
+ </template>
10
+
11
+ <script setup>
12
+ // No additional logic needed; all props/attrs are passed through
13
+ </script>
@@ -1,13 +1,13 @@
1
- <template>
2
- <div
3
- data-slot="alert-description"
4
- :class="['col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed opacity-90', $attrs.class]"
5
- v-bind="$attrs"
6
- >
7
- <slot />
8
- </div>
9
- </template>
10
-
11
- <script setup>
12
- // No additional logic needed; all props/attrs are passed through
13
- </script>
1
+ <template>
2
+ <div
3
+ data-slot="alert-description"
4
+ :class="['col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed opacity-90', $attrs.class]"
5
+ v-bind="$attrs"
6
+ >
7
+ <slot />
8
+ </div>
9
+ </template>
10
+
11
+ <script setup>
12
+ // No additional logic needed; all props/attrs are passed through
13
+ </script>
@@ -1,13 +1,13 @@
1
- <template>
2
- <div
3
- data-slot="alert-title"
4
- :class="['col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', $attrs.class]"
5
- v-bind="$attrs"
6
- >
7
- <slot />
8
- </div>
9
- </template>
10
-
11
- <script setup>
12
- // No additional logic needed; all props/attrs are passed through
13
- </script>
1
+ <template>
2
+ <div
3
+ data-slot="alert-title"
4
+ :class="['col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', $attrs.class]"
5
+ v-bind="$attrs"
6
+ >
7
+ <slot />
8
+ </div>
9
+ </template>
10
+
11
+ <script setup>
12
+ // No additional logic needed; all props/attrs are passed through
13
+ </script>
package/src/ui/alert.vue CHANGED
@@ -1,63 +1,63 @@
1
- <template>
2
- <div
3
- v-if="visible"
4
- data-slot="alert"
5
- role="alert"
6
- :class="computedClass"
7
- >
8
- <slot />
9
- <button
10
- v-if="dismissible"
11
- data-slot="alert-close"
12
- type="button"
13
- class="absolute right-2 top-2 p-1 h-6 w-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none inline-flex items-center justify-center text-current hover:bg-muted"
14
- @click="$emit('dismiss')"
15
- >
16
- <X class="size-4" />
17
- <span class="sr-only">Close alert</span>
18
- </button>
19
- </div>
20
- </template>
21
-
22
- <script setup>
23
- import { computed, toRefs } from 'vue';
24
- import { X } from 'lucide-vue-next';
25
-
26
- const props = defineProps({
27
- variant: {
28
- type: String,
29
- default: 'default',
30
- },
31
- dismissible: {
32
- type: Boolean,
33
- default: false,
34
- },
35
- visible: {
36
- type: Boolean,
37
- default: true,
38
- },
39
- class: {
40
- type: String,
41
- default: '',
42
- },
43
- });
44
-
45
- const emit = defineEmits(['dismiss']);
46
-
47
- const variantClasses = {
48
- default: 'bg-card text-card-foreground border-border',
49
- destructive: 'border-red-200 bg-red-50 text-red-700 [&>svg]:text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-300 dark:[&>svg]:text-red-400',
50
- success: 'border-green-200 bg-green-50 text-green-700 [&>svg]:text-green-600 dark:border-green-800 dark:bg-green-950 dark:text-green-300 dark:[&>svg]:text-green-400',
51
- warning: 'border-yellow-200 bg-yellow-50 text-yellow-700 [&>svg]:text-yellow-600 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300 dark:[&>svg]:text-yellow-400',
52
- info: 'border-blue-200 bg-blue-50 text-blue-700 [&>svg]:text-blue-600 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300 dark:[&>svg]:text-blue-400',
53
- 'soft-primary': 'border-cyan-200 bg-cyan-50 text-cyan-700 [&>svg]:text-cyan-600 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-300 dark:[&>svg]:text-cyan-400',
54
- 'soft-secondary': 'border-gray-200 bg-gray-50 text-gray-700 [&>svg]:text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:[&>svg]:text-gray-400',
55
- 'soft-neutral': 'border-stone-200 bg-stone-50 text-stone-700 [&>svg]:text-stone-600 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300 dark:[&>svg]:text-stone-400',
56
- };
57
-
58
- const computedClass = computed(() =>
59
- 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current ' +
60
- (variantClasses[props.variant] || variantClasses.default) +
61
- (props.class ? ' ' + props.class : '')
62
- );
63
- </script>
1
+ <template>
2
+ <div
3
+ v-if="visible"
4
+ data-slot="alert"
5
+ role="alert"
6
+ :class="computedClass"
7
+ >
8
+ <slot />
9
+ <button
10
+ v-if="dismissible"
11
+ data-slot="alert-close"
12
+ type="button"
13
+ class="absolute right-2 top-2 p-1 h-6 w-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none inline-flex items-center justify-center text-current hover:bg-muted"
14
+ @click="$emit('dismiss')"
15
+ >
16
+ <X class="size-4" />
17
+ <span class="sr-only">Close alert</span>
18
+ </button>
19
+ </div>
20
+ </template>
21
+
22
+ <script setup>
23
+ import { computed, toRefs } from 'vue';
24
+ import { X } from 'lucide-vue-next';
25
+
26
+ const props = defineProps({
27
+ variant: {
28
+ type: String,
29
+ default: 'default',
30
+ },
31
+ dismissible: {
32
+ type: Boolean,
33
+ default: false,
34
+ },
35
+ visible: {
36
+ type: Boolean,
37
+ default: true,
38
+ },
39
+ class: {
40
+ type: String,
41
+ default: '',
42
+ },
43
+ });
44
+
45
+ const emit = defineEmits(['dismiss']);
46
+
47
+ const variantClasses = {
48
+ default: 'bg-card text-card-foreground border-border',
49
+ destructive: 'border-red-200 bg-red-50 text-red-700 [&>svg]:text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-300 dark:[&>svg]:text-red-400',
50
+ success: 'border-green-200 bg-green-50 text-green-700 [&>svg]:text-green-600 dark:border-green-800 dark:bg-green-950 dark:text-green-300 dark:[&>svg]:text-green-400',
51
+ warning: 'border-yellow-200 bg-yellow-50 text-yellow-700 [&>svg]:text-yellow-600 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300 dark:[&>svg]:text-yellow-400',
52
+ info: 'border-blue-200 bg-blue-50 text-blue-700 [&>svg]:text-blue-600 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300 dark:[&>svg]:text-blue-400',
53
+ 'soft-primary': 'border-cyan-200 bg-cyan-50 text-cyan-700 [&>svg]:text-cyan-600 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-300 dark:[&>svg]:text-cyan-400',
54
+ 'soft-secondary': 'border-gray-200 bg-gray-50 text-gray-700 [&>svg]:text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:[&>svg]:text-gray-400',
55
+ 'soft-neutral': 'border-stone-200 bg-stone-50 text-stone-700 [&>svg]:text-stone-600 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300 dark:[&>svg]:text-stone-400',
56
+ };
57
+
58
+ const computedClass = computed(() =>
59
+ 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current ' +
60
+ (variantClasses[props.variant] || variantClasses.default) +
61
+ (props.class ? ' ' + props.class : '')
62
+ );
63
+ </script>