@codefast/ui 0.0.13 → 0.0.14

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 (155) hide show
  1. package/dist/accordion.js +3 -9
  2. package/dist/accordion.js.map +1 -1
  3. package/dist/accordion.mjs +3 -9
  4. package/dist/accordion.mjs.map +1 -1
  5. package/dist/alert-dialog.js +6 -19
  6. package/dist/alert-dialog.js.map +1 -1
  7. package/dist/alert-dialog.mjs +4 -17
  8. package/dist/alert-dialog.mjs.map +1 -1
  9. package/dist/breadcrumb.js +1 -2
  10. package/dist/breadcrumb.js.map +1 -1
  11. package/dist/breadcrumb.mjs +1 -2
  12. package/dist/breadcrumb.mjs.map +1 -1
  13. package/dist/button.d.mts +1 -1
  14. package/dist/button.d.ts +1 -1
  15. package/dist/button.js +3 -3
  16. package/dist/button.mjs +2 -2
  17. package/dist/calendar.js +4 -4
  18. package/dist/calendar.mjs +2 -2
  19. package/dist/carousel.js +4 -4
  20. package/dist/carousel.mjs +2 -2
  21. package/dist/checkbox-cards.js +2 -6
  22. package/dist/checkbox-cards.js.map +1 -1
  23. package/dist/checkbox-cards.mjs +2 -6
  24. package/dist/checkbox-cards.mjs.map +1 -1
  25. package/dist/checkbox-group.js +1 -5
  26. package/dist/checkbox-group.js.map +1 -1
  27. package/dist/checkbox-group.mjs +1 -5
  28. package/dist/checkbox-group.mjs.map +1 -1
  29. package/dist/checkbox.js +1 -5
  30. package/dist/checkbox.js.map +1 -1
  31. package/dist/checkbox.mjs +1 -5
  32. package/dist/checkbox.mjs.map +1 -1
  33. package/dist/{chunk-V2254PQL.mjs → chunk-73S45XV3.mjs} +2 -5
  34. package/dist/chunk-73S45XV3.mjs.map +1 -0
  35. package/dist/{chunk-7S4DOWLB.js → chunk-AOIW2XNK.js} +2 -8
  36. package/dist/chunk-AOIW2XNK.js.map +1 -0
  37. package/dist/{chunk-6J6VPUBP.mjs → chunk-AUQEMOIM.mjs} +2 -8
  38. package/dist/chunk-AUQEMOIM.mjs.map +1 -0
  39. package/dist/{chunk-OK63Q6EJ.mjs → chunk-BBQXHKST.mjs} +2 -3
  40. package/dist/chunk-BBQXHKST.mjs.map +1 -0
  41. package/dist/{chunk-LNSEYAPJ.js → chunk-OSFYUOPN.js} +2 -3
  42. package/dist/chunk-OSFYUOPN.js.map +1 -0
  43. package/dist/{chunk-BWCO2ZQQ.js → chunk-TFYKPLNV.js} +4 -8
  44. package/dist/chunk-TFYKPLNV.js.map +1 -0
  45. package/dist/{chunk-IXEJO7ZP.js → chunk-TH24V27M.js} +7 -26
  46. package/dist/chunk-TH24V27M.js.map +1 -0
  47. package/dist/{chunk-XCKLBP2V.mjs → chunk-TXRIFICH.mjs} +7 -26
  48. package/dist/chunk-TXRIFICH.mjs.map +1 -0
  49. package/dist/{chunk-WFXEFJRB.mjs → chunk-U6VR5RJ5.mjs} +3 -7
  50. package/dist/chunk-U6VR5RJ5.mjs.map +1 -0
  51. package/dist/{chunk-MDSPK3M6.js → chunk-Y3DZHPJ5.js} +2 -5
  52. package/dist/chunk-Y3DZHPJ5.js.map +1 -0
  53. package/dist/command.d.mts +14 -14
  54. package/dist/command.d.ts +14 -14
  55. package/dist/command.js +2 -2
  56. package/dist/command.mjs +1 -1
  57. package/dist/data-table.js +12 -12
  58. package/dist/data-table.mjs +3 -3
  59. package/dist/dialog.js +2 -2
  60. package/dist/dialog.mjs +1 -1
  61. package/dist/input-otp.js +1 -1
  62. package/dist/input-otp.js.map +1 -1
  63. package/dist/input-otp.mjs +1 -1
  64. package/dist/input-otp.mjs.map +1 -1
  65. package/dist/input.js +1 -7
  66. package/dist/input.js.map +1 -1
  67. package/dist/input.mjs +1 -7
  68. package/dist/input.mjs.map +1 -1
  69. package/dist/navigation-menu.js +2 -3
  70. package/dist/navigation-menu.js.map +1 -1
  71. package/dist/navigation-menu.mjs +2 -3
  72. package/dist/navigation-menu.mjs.map +1 -1
  73. package/dist/pagination.js +3 -3
  74. package/dist/pagination.mjs +2 -2
  75. package/dist/radio-cards.js +1 -5
  76. package/dist/radio-cards.js.map +1 -1
  77. package/dist/radio-cards.mjs +1 -5
  78. package/dist/radio-cards.mjs.map +1 -1
  79. package/dist/radio-group.js +2 -10
  80. package/dist/radio-group.js.map +1 -1
  81. package/dist/radio-group.mjs +2 -10
  82. package/dist/radio-group.mjs.map +1 -1
  83. package/dist/radio.js +1 -7
  84. package/dist/radio.js.map +1 -1
  85. package/dist/radio.mjs +1 -7
  86. package/dist/radio.mjs.map +1 -1
  87. package/dist/resizable.js +1 -2
  88. package/dist/resizable.js.map +1 -1
  89. package/dist/resizable.mjs +1 -2
  90. package/dist/resizable.mjs.map +1 -1
  91. package/dist/select.js +2 -2
  92. package/dist/select.mjs +1 -1
  93. package/dist/sheet.js +6 -22
  94. package/dist/sheet.js.map +1 -1
  95. package/dist/sheet.mjs +6 -22
  96. package/dist/sheet.mjs.map +1 -1
  97. package/dist/slider.js +7 -8
  98. package/dist/slider.js.map +1 -1
  99. package/dist/slider.mjs +6 -7
  100. package/dist/slider.mjs.map +1 -1
  101. package/dist/spinner.js +2 -2
  102. package/dist/spinner.mjs +1 -1
  103. package/dist/styles.css +1 -1
  104. package/dist/styles.css.map +1 -1
  105. package/dist/switch.js +1 -2
  106. package/dist/switch.js.map +1 -1
  107. package/dist/switch.mjs +1 -2
  108. package/dist/switch.mjs.map +1 -1
  109. package/dist/tabs.js +2 -4
  110. package/dist/tabs.js.map +1 -1
  111. package/dist/tabs.mjs +2 -4
  112. package/dist/tabs.mjs.map +1 -1
  113. package/dist/textarea.js +1 -2
  114. package/dist/textarea.js.map +1 -1
  115. package/dist/textarea.mjs +1 -2
  116. package/dist/textarea.mjs.map +1 -1
  117. package/dist/toggle-group.js +2 -2
  118. package/dist/toggle-group.mjs +1 -1
  119. package/dist/toggle.js +2 -2
  120. package/dist/toggle.mjs +1 -1
  121. package/package.json +3 -4
  122. package/src/accordion.tsx +3 -9
  123. package/src/alert-dialog.tsx +2 -12
  124. package/src/breadcrumb.tsx +1 -2
  125. package/src/button.tsx +1 -5
  126. package/src/checkbox-cards.tsx +2 -6
  127. package/src/checkbox-group.tsx +1 -5
  128. package/src/checkbox.tsx +1 -5
  129. package/src/dialog.tsx +3 -15
  130. package/src/input-otp.tsx +1 -1
  131. package/src/input.tsx +1 -7
  132. package/src/navigation-menu.tsx +3 -3
  133. package/src/radio-cards.tsx +1 -5
  134. package/src/radio-group.tsx +2 -7
  135. package/src/radio.tsx +1 -7
  136. package/src/resizable.tsx +1 -2
  137. package/src/select.tsx +1 -2
  138. package/src/sheet.tsx +3 -12
  139. package/src/slider.tsx +9 -6
  140. package/src/spinner.tsx +1 -4
  141. package/src/switch.tsx +1 -2
  142. package/src/tabs.tsx +2 -4
  143. package/src/textarea.tsx +1 -2
  144. package/src/toggle.tsx +1 -7
  145. package/tailwind.config.ts +4 -1
  146. package/dist/chunk-6J6VPUBP.mjs.map +0 -1
  147. package/dist/chunk-7S4DOWLB.js.map +0 -1
  148. package/dist/chunk-BWCO2ZQQ.js.map +0 -1
  149. package/dist/chunk-IXEJO7ZP.js.map +0 -1
  150. package/dist/chunk-LNSEYAPJ.js.map +0 -1
  151. package/dist/chunk-MDSPK3M6.js.map +0 -1
  152. package/dist/chunk-OK63Q6EJ.mjs.map +0 -1
  153. package/dist/chunk-V2254PQL.mjs.map +0 -1
  154. package/dist/chunk-WFXEFJRB.mjs.map +0 -1
  155. package/dist/chunk-XCKLBP2V.mjs.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: Textarea\n * -------------------------------------------------------------------------- */\n\ntype TextareaElement = HTMLTextAreaElement;\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst Textarea = React.forwardRef<TextareaElement, TextareaProps>(({ className, ...props }, ref) => {\n return (\n <textarea\n className={cn(\n \"border-input placeholder:text-muted-foreground flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50\",\n \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n className,\n )}\n ref={ref}\n {...props}\n />\n );\n});\n\nTextarea.displayName = \"Textarea\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Textarea, type TextareaProps };\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAYnB;AAFJ,IAAM,WAAiB,iBAA2C,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,SAAS,cAAc;","names":[]}
1
+ {"version":3,"sources":["../src/textarea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: Textarea\n * -------------------------------------------------------------------------- */\n\ntype TextareaElement = HTMLTextAreaElement;\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst Textarea = React.forwardRef<TextareaElement, TextareaProps>(({ className, ...props }, ref) => {\n return (\n <textarea\n className={cn(\n \"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n className,\n )}\n ref={ref}\n {...props}\n />\n );\n});\n\nTextarea.displayName = \"Textarea\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Textarea, type TextareaProps };\n"],"mappings":";;;;;AAAA,YAAY,WAAW;AAYnB;AAFJ,IAAM,WAAiB,iBAA2C,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAED,SAAS,cAAc;","names":[]}
@@ -1,7 +1,7 @@
1
1
  "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
2
2
 
3
3
 
4
- var _chunk7S4DOWLBjs = require('./chunk-7S4DOWLB.js');
4
+ var _chunkAOIW2XNKjs = require('./chunk-AOIW2XNK.js');
5
5
 
6
6
 
7
7
  var _chunkG3NP7M2Njs = require('./chunk-G3NP7M2N.js');
@@ -41,7 +41,7 @@ var ToggleGroupItem = React.forwardRef(
41
41
  ToggleGroupPrimitive.Item,
42
42
  {
43
43
  ref,
44
- className: _chunk7S4DOWLBjs.toggleVariants.call(void 0, { ...context, className }),
44
+ className: _chunkAOIW2XNKjs.toggleVariants.call(void 0, { ...context, className }),
45
45
  ...toggleGroupScope,
46
46
  ...props,
47
47
  children
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  toggleVariants
4
- } from "./chunk-6J6VPUBP.mjs";
4
+ } from "./chunk-AUQEMOIM.mjs";
5
5
  import {
6
6
  cn
7
7
  } from "./chunk-UG3URV2Z.mjs";
package/dist/toggle.js CHANGED
@@ -2,10 +2,10 @@
2
2
 
3
3
 
4
4
 
5
- var _chunk7S4DOWLBjs = require('./chunk-7S4DOWLB.js');
5
+ var _chunkAOIW2XNKjs = require('./chunk-AOIW2XNK.js');
6
6
  require('./chunk-G3NP7M2N.js');
7
7
 
8
8
 
9
9
 
10
- exports.Toggle = _chunk7S4DOWLBjs.Toggle; exports.toggleVariants = _chunk7S4DOWLBjs.toggleVariants;
10
+ exports.Toggle = _chunkAOIW2XNKjs.Toggle; exports.toggleVariants = _chunkAOIW2XNKjs.toggleVariants;
11
11
  //# sourceMappingURL=toggle.js.map
package/dist/toggle.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  Toggle,
4
4
  toggleVariants
5
- } from "./chunk-6J6VPUBP.mjs";
5
+ } from "./chunk-AUQEMOIM.mjs";
6
6
  import "./chunk-UG3URV2Z.mjs";
7
7
  export {
8
8
  Toggle,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codefast/ui",
3
- "version": "0.0.13",
3
+ "version": "0.0.14",
4
4
  "license": "MIT",
5
5
  "sideEffects": [
6
6
  "**/*.css"
@@ -386,11 +386,10 @@
386
386
  "postcss": "^8.4.38",
387
387
  "react": "^18.2.0",
388
388
  "tailwindcss": "^3.4.3",
389
- "tailwindcss-animate": "^1.0.7",
390
389
  "tsup": "^8.0.2",
391
390
  "typescript": "^5.4.4",
392
- "@codefast/eslint-config": "0.0.7",
393
- "@codefast/typescript-config": "0.0.1"
391
+ "@codefast/eslint-config": "0.0.8",
392
+ "@codefast/typescript-config": "0.0.2"
394
393
  },
395
394
  "peerDependencies": {
396
395
  "@types/react": "*",
package/src/accordion.tsx CHANGED
@@ -38,8 +38,7 @@ const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTrig
38
38
  <AccordionPrimitive.Trigger
39
39
  ref={ref}
40
40
  className={cn(
41
- "group flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all",
42
- "hover:underline",
41
+ "group flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline",
43
42
  className,
44
43
  )}
45
44
  {...props}
@@ -47,8 +46,7 @@ const AccordionTrigger = React.forwardRef<AccordionTriggerElement, AccordionTrig
47
46
  {children}
48
47
  <ChevronDownIcon
49
48
  className={cn(
50
- "text-muted-foreground size-4 shrink-0 transition-transform duration-200",
51
- "group-data-[state=open]:rotate-180",
49
+ "text-muted-foreground size-4 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-180",
52
50
  )}
53
51
  />
54
52
  </AccordionPrimitive.Trigger>
@@ -69,11 +67,7 @@ const AccordionContent = React.forwardRef<AccordionContentElement, AccordionCont
69
67
  ({ className, children, ...props }, ref) => (
70
68
  <AccordionPrimitive.Content
71
69
  ref={ref}
72
- className={cn(
73
- "overflow-hidden text-sm",
74
- "data-[state=open]:animate-accordion-down",
75
- "data-[state=closed]:animate-accordion-up",
76
- )}
70
+ className="data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up overflow-hidden text-sm"
77
71
  {...props}
78
72
  >
79
73
  <div className={cn("pb-4 pt-0", className)}>{children}</div>
@@ -29,21 +29,11 @@ type AlertDialogContentProps = React.ComponentPropsWithoutRef<typeof AlertDialog
29
29
  const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
30
30
  ({ className, ...props }, ref) => (
31
31
  <AlertDialogPrimitive.Portal>
32
- <AlertDialogPrimitive.Overlay
33
- className={cn(
34
- "fixed inset-0 z-50 bg-black/80",
35
- "data-[state=open]:animate-in data-[state=open]:fade-in-0",
36
- "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
37
- )}
38
- />
32
+ <AlertDialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80" />
39
33
  <AlertDialogPrimitive.Content
40
34
  ref={ref}
41
35
  className={cn(
42
- "bg-background fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200",
43
- "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3",
44
- "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3",
45
- "focus:outline-none",
46
- "sm:rounded-lg",
36
+ "bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3 animation-duration-200 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 focus:outline-none sm:rounded-lg",
47
37
  className,
48
38
  )}
49
39
  {...props}
@@ -30,8 +30,7 @@ const BreadcrumbList = React.forwardRef<BreadcrumbListElement, BreadcrumbListPro
30
30
  <ol
31
31
  ref={ref}
32
32
  className={cn(
33
- "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm",
34
- "sm:gap-2.5",
33
+ "text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5",
35
34
  className,
36
35
  )}
37
36
  {...props}
package/src/button.tsx CHANGED
@@ -11,11 +11,7 @@ import { cva } from "./utils";
11
11
  * -------------------------------------------------------------------------- */
12
12
 
13
13
  const buttonVariants = cva({
14
- base: [
15
- "inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors",
16
- "disabled:pointer-events-none disabled:opacity-50",
17
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
18
- ],
14
+ base: "focus-visible:ring-ring inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
19
15
  variants: {
20
16
  variant: {
21
17
  default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
@@ -33,8 +33,7 @@ const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCar
33
33
  return (
34
34
  <label
35
35
  className={cn(
36
- "border-compound/70 flex items-center justify-center gap-4 rounded-md border p-4",
37
- "hover:border-compound",
36
+ "border-compound/70 hover:border-compound flex items-center justify-center gap-4 rounded-md border p-4",
38
37
  className,
39
38
  )}
40
39
  >
@@ -42,10 +41,7 @@ const CheckboxCardsItem = React.forwardRef<CheckboxCardsItemElement, CheckboxCar
42
41
  <CheckboxGroupPrimitive.Item
43
42
  ref={ref}
44
43
  className={cn(
45
- "border-compound/70 peer size-4 shrink-0 cursor-default rounded-sm border shadow",
46
- "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
47
- "disabled:cursor-not-allowed disabled:opacity-50",
48
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
44
+ "border-compound/70 aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground focus-visible:ring-ring peer size-4 shrink-0 cursor-default rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
49
45
  checkboxClassName,
50
46
  )}
51
47
  {...props}
@@ -31,11 +31,7 @@ const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGro
31
31
  <CheckboxGroupPrimitive.Item
32
32
  ref={ref}
33
33
  className={cn(
34
- "border-compound/70 peer size-4 shrink-0 rounded-sm border shadow",
35
- "hover:border-compound",
36
- "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
37
- "disabled:cursor-not-allowed disabled:opacity-50",
38
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
34
+ "border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground focus-visible:ring-ring peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
39
35
  className,
40
36
  )}
41
37
  {...props}
package/src/checkbox.tsx CHANGED
@@ -16,11 +16,7 @@ const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className,
16
16
  <CheckboxPrimitive.Root
17
17
  ref={ref}
18
18
  className={cn(
19
- "border-compound/70 peer size-4 shrink-0 rounded-sm border shadow",
20
- "hover:border-compound",
21
- "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
22
- "disabled:cursor-not-allowed disabled:opacity-50",
23
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
19
+ "border-compound/70 hover:border-compound aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground focus-visible:ring-ring peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
24
20
  className,
25
21
  )}
26
22
  {...props}
package/src/dialog.tsx CHANGED
@@ -36,29 +36,17 @@ type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.
36
36
  const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
37
37
  ({ className, children, ...props }, ref) => (
38
38
  <DialogPrimitive.Portal>
39
- <DialogPrimitive.Overlay
40
- className={cn(
41
- "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
42
- )}
43
- />
39
+ <DialogPrimitive.Overlay className="data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80" />
44
40
  <DialogPrimitive.Content
45
41
  ref={ref}
46
42
  className={cn(
47
- "bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 focus:outline-none sm:rounded-lg",
43
+ "bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3 animation-duration-200 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 focus:outline-none sm:rounded-lg",
48
44
  className,
49
45
  )}
50
46
  {...props}
51
47
  >
52
48
  {children}
53
- <DialogPrimitive.Close
54
- className={cn(
55
- "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity",
56
- "hover:opacity-100",
57
- "disabled:pointer-events-none",
58
- "data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
59
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
60
- )}
61
- >
49
+ <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground focus-visible:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none">
62
50
  <Cross2Icon className="size-4" />
63
51
  <span className="sr-only">Close</span>
64
52
  </DialogPrimitive.Close>
package/src/input-otp.tsx CHANGED
@@ -71,7 +71,7 @@ const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(({
71
71
  {slot?.char}
72
72
  {slot?.hasFakeCaret ? (
73
73
  <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
74
- <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
74
+ <div className="animate-caret-blink bg-foreground animation-duration-1000 h-4 w-px" />
75
75
  </div>
76
76
  ) : null}
77
77
  </div>
package/src/input.tsx CHANGED
@@ -7,13 +7,7 @@ import { cva } from "./utils";
7
7
  * -------------------------------------------------------------------------- */
8
8
 
9
9
  const inputVariants = cva({
10
- base: [
11
- "border-input flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
12
- "file:border-0 file:bg-transparent file:text-sm file:font-medium",
13
- "disabled:cursor-not-allowed disabled:opacity-50",
14
- "placeholder:text-muted-foreground",
15
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
16
- ],
10
+ base: "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
17
11
  variants: {
18
12
  inputSize: {
19
13
  default: "h-10",
@@ -78,9 +78,9 @@ const NavigationMenuTrigger = React.forwardRef<NavigationMenuTriggerElement, Nav
78
78
  })}
79
79
  {...props}
80
80
  >
81
- {children}{" "}
81
+ {children}
82
82
  <ChevronDownIcon
83
- className={cn("relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180")}
83
+ className={cn("relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180")}
84
84
  aria-hidden="true"
85
85
  />
86
86
  </NavigationMenuPrimitive.Trigger>
@@ -131,7 +131,7 @@ const NavigationMenuViewport = React.forwardRef<NavigationMenuViewportElement, N
131
131
  <div className={cn("perspective-[2000px] absolute left-0 top-full flex justify-center")}>
132
132
  <NavigationMenuPrimitive.Viewport
133
133
  className={cn(
134
- "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
134
+ "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-90 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-md border shadow transition-[width,height] duration-200 md:w-[var(--radix-navigation-menu-viewport-width)]",
135
135
  className,
136
136
  )}
137
137
  ref={ref}
@@ -29,11 +29,7 @@ const RadioCardsItem = React.forwardRef<RadioCardsItemElement, RadioCardsItemPro
29
29
  <RadioGroupPrimitive.Item
30
30
  ref={ref}
31
31
  className={cn(
32
- "border-compound/70 text-compound-foreground group peer flex cursor-default items-center justify-center rounded-md border p-4",
33
- "hover:border-compound",
34
- "aria-checked:border-primary",
35
- "disabled:cursor-not-allowed disabled:opacity-50",
36
- "focus-visible:bg-primary/10 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
32
+ "border-compound/70 text-compound-foreground hover:border-compound aria-checked:border-primary focus-visible:bg-primary/10 focus-visible:ring-ring group peer flex cursor-default items-center justify-center rounded-md border p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
37
33
  className,
38
34
  )}
39
35
  {...props}
@@ -29,17 +29,12 @@ const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemPro
29
29
  <RadioGroupPrimitive.Item
30
30
  ref={ref}
31
31
  className={cn(
32
- "border-compound/70 hover:border-compound text-compound-foreground aria-checked:border-primary group peer aspect-square size-4 rounded-full border disabled:cursor-not-allowed disabled:opacity-50",
33
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
32
+ "border-compound/70 hover:border-compound text-compound-foreground aria-checked:border-primary focus-visible:ring-ring group peer aspect-square size-4 rounded-full border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
34
33
  className,
35
34
  )}
36
35
  {...props}
37
36
  >
38
- <RadioGroupPrimitive.Indicator
39
- className={cn(
40
- "after:bg-primary relative flex h-full w-full items-center justify-center after:block after:size-2.5 after:rounded-full",
41
- )}
42
- />
37
+ <RadioGroupPrimitive.Indicator className="after:bg-primary relative flex h-full w-full items-center justify-center after:block after:size-2.5 after:rounded-full" />
43
38
  </RadioGroupPrimitive.Item>
44
39
  );
45
40
  });
package/src/radio.tsx CHANGED
@@ -21,13 +21,7 @@ const Radio = React.forwardRef<RadioElement, RadioProps>(({ className, onValueCh
21
21
  type="radio"
22
22
  onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
23
23
  className={cn(
24
- "peer relative flex appearance-none items-center justify-center rounded-full",
25
- "disabled:cursor-not-allowed disabled:opacity-50",
26
- "before:border-compound/70 before:size-4 before:rounded-full before:border",
27
- "hover:before:border-compound",
28
- "checked:before:border-primary",
29
- "checked:after:bg-primary checked:after:absolute checked:after:size-2.5 checked:after:rounded-full",
30
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
24
+ "before:border-compound/70 hover:before:border-compound checked:before:border-primary checked:after:bg-primary focus-visible:ring-ring peer relative flex appearance-none items-center justify-center rounded-full before:size-4 before:rounded-full before:border checked:after:absolute checked:after:size-2.5 checked:after:rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
31
25
  className,
32
26
  )}
33
27
  {...props}
package/src/resizable.tsx CHANGED
@@ -41,8 +41,7 @@ function ResizableHandle({
41
41
  return (
42
42
  <ResizablePrimitive.PanelResizeHandle
43
43
  className={cn(
44
- "bg-border relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
45
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
44
+ "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
46
45
  className,
47
46
  )}
48
47
  {...props}
package/src/select.tsx CHANGED
@@ -38,8 +38,7 @@ const SelectTrigger = React.forwardRef<SelectTriggerElement, SelectTriggerProps>
38
38
  <SelectPrimitive.Trigger
39
39
  ref={ref}
40
40
  className={cn(
41
- "border-input placeholder:text-muted-foreground flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
42
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
41
+ "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
43
42
  className,
44
43
  )}
45
44
  {...props}
package/src/sheet.tsx CHANGED
@@ -11,7 +11,7 @@ import { cn, cva } from "./utils";
11
11
  * -------------------------------------------------------------------------- */
12
12
 
13
13
  const sheetVariants = cva({
14
- base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
14
+ base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out animation-ease-in-out data-[state=closed]:animation-duration-300 data-[state=open]:animation-duration-500 fixed z-50 gap-4 p-6 shadow-lg",
15
15
  variants: {
16
16
  side: {
17
17
  top: "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 border-b",
@@ -60,19 +60,10 @@ type SheetContentProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Co
60
60
  const SheetContent = React.forwardRef<SheetContentElement, SheetContentProps>(
61
61
  ({ side = "right", className, children, ...props }, ref) => (
62
62
  <SheetPrimitive.Portal>
63
- <SheetPrimitive.Overlay
64
- className={cn(
65
- "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80",
66
- )}
67
- />
63
+ <SheetPrimitive.Overlay className="data-[state=open]:animate-in animation-duration-200 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80" />
68
64
  <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
69
65
  {children}
70
- <SheetPrimitive.Close
71
- className={cn(
72
- "data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none",
73
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
74
- )}
75
- >
66
+ <SheetPrimitive.Close className="data-[state=open]:bg-secondary focus-visible:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none">
76
67
  <Cross2Icon className="size-4" />
77
68
  <span className="sr-only">Close</span>
78
69
  </SheetPrimitive.Close>
package/src/slider.tsx CHANGED
@@ -20,12 +20,15 @@ const Slider = React.forwardRef<SliderElement, SliderProps>(({ className, ...pro
20
20
  <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
21
21
  <SliderPrimitive.Range className="bg-primary absolute h-full" />
22
22
  </SliderPrimitive.Track>
23
- <SliderPrimitive.Thumb
24
- className={cn(
25
- "border-primary/50 bg-background block size-4 rounded-full border shadow transition-colors disabled:pointer-events-none disabled:opacity-50",
26
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
27
- )}
28
- />
23
+
24
+ {(props.value ?? props.defaultValue ?? []).map((value, index) => (
25
+ <SliderPrimitive.Thumb
26
+ // eslint-disable-next-line react/no-array-index-key -- index is stable
27
+ key={index}
28
+ className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
29
+ {...(props.tabIndex !== undefined ? { tabIndex: props.tabIndex } : undefined)}
30
+ />
31
+ ))}
29
32
  </SliderPrimitive.Root>
30
33
  ));
31
34
 
package/src/spinner.tsx CHANGED
@@ -29,10 +29,7 @@ const Spinner = React.forwardRef<SpinnerElement, SpinnerProps>(
29
29
  {Array.from({ length: spinnerCount }, (_, i) => (
30
30
  <span
31
31
  key={i}
32
- className={cn(
33
- "absolute h-full rotate-[var(--spinner-rotate)]",
34
- "before:fade-out-25 before:animate-out before:repeat-infinite before:block before:h-1/3 before:w-full before:rounded-full before:bg-current before:[animation-delay:var(--spinner-delay)] before:[animation-duration:var(--spinner-duration)]",
35
- )}
32
+ className="before:fade-out-25 before:animate-out before:animation-repeat-infinite before:animation-delay-[var(--spinner-delay)] before:animation-duration-[var(--spinner-duration)] absolute h-full rotate-[var(--spinner-rotate)] before:block before:h-1/3 before:w-full before:rounded-full before:bg-current"
36
33
  style={
37
34
  {
38
35
  width: `${(100 / spinnerCount).toString()}%`,
package/src/switch.tsx CHANGED
@@ -14,8 +14,7 @@ type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
14
14
  const Switch = React.forwardRef<SwitchElement, SwitchProps>(({ className, ...props }, ref) => (
15
15
  <SwitchPrimitives.Root
16
16
  className={cn(
17
- "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50",
18
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
17
+ "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:ring-ring peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
19
18
  className,
20
19
  )}
21
20
  {...props}
package/src/tabs.tsx CHANGED
@@ -42,8 +42,7 @@ const TabsTrigger = React.forwardRef<TabsTriggerElement, TabsTriggerProps>(({ cl
42
42
  <TabsPrimitive.Trigger
43
43
  ref={ref}
44
44
  className={cn(
45
- "data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
46
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
45
+ "data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
47
46
  className,
48
47
  )}
49
48
  {...props}
@@ -63,8 +62,7 @@ const TabsContent = React.forwardRef<TabsContentElement, TabsContentProps>(({ cl
63
62
  <TabsPrimitive.Content
64
63
  ref={ref}
65
64
  className={cn(
66
- "mt-2",
67
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
65
+ "focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
68
66
  className,
69
67
  )}
70
68
  {...props}
package/src/textarea.tsx CHANGED
@@ -12,8 +12,7 @@ const Textarea = React.forwardRef<TextareaElement, TextareaProps>(({ className,
12
12
  return (
13
13
  <textarea
14
14
  className={cn(
15
- "border-input placeholder:text-muted-foreground flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm disabled:cursor-not-allowed disabled:opacity-50",
16
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
15
+ "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
17
16
  className,
18
17
  )}
19
18
  ref={ref}
package/src/toggle.tsx CHANGED
@@ -10,13 +10,7 @@ import { cva } from "./utils";
10
10
  * -------------------------------------------------------------------------- */
11
11
 
12
12
  const toggleVariants = cva({
13
- base: [
14
- "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors",
15
- "hover:bg-muted hover:text-muted-foreground",
16
- "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
17
- "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
18
- "disabled:pointer-events-none disabled:opacity-50",
19
- ],
13
+ base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
20
14
  variants: {
21
15
  variant: {
22
16
  default: "bg-transparent",
@@ -1,7 +1,7 @@
1
1
  import type { Config } from "tailwindcss";
2
2
  import { fontFamily } from "tailwindcss/defaultTheme";
3
- import tailwindcssAnimate from "tailwindcss-animate";
4
3
  import plugin from "tailwindcss/plugin";
4
+ import tailwindcssAnimate from "./animate.plugin";
5
5
 
6
6
  const config: Config = {
7
7
  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
@@ -109,6 +109,9 @@ const config: Config = {
109
109
  },
110
110
  },
111
111
  },
112
+ transitionDuration: {
113
+ 250: "250ms",
114
+ },
112
115
  },
113
116
  },
114
117
  };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { type VariantProps } from \"cva\";\nimport { cva } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Variant: Toggle\n * -------------------------------------------------------------------------- */\n\nconst toggleVariants = cva({\n base: [\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors\",\n \"hover:bg-muted hover:text-muted-foreground\",\n \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n ],\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline: \"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm\",\n },\n size: {\n default: \"h-10 px-3\",\n sm: \"h-9 px-2.5\",\n lg: \"h-11 px-5\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\ntype ToggleVariantsProps = VariantProps<typeof toggleVariants>;\n\n/* -----------------------------------------------------------------------------\n * Component: Toggle\n * -------------------------------------------------------------------------- */\n\ntype ToggleElement = React.ElementRef<typeof TogglePrimitive.Root>;\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & ToggleVariantsProps;\n\nconst Toggle = React.forwardRef<ToggleElement, ToggleProps>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root ref={ref} className={toggleVariants({ variant, size, className })} {...props} />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\nexport { Toggle, toggleVariants, type ToggleProps, type ToggleVariantsProps };\n"],"mappings":";;;;;AAEA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AA2C/B;AAnCF,IAAM,iBAAiB,IAAI;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AAWD,IAAM,SAAe,iBAAuC,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QACnG,oBAAiB,sBAAhB,EAAqB,KAAU,WAAW,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAI,GAAG,OAAO,CACrG;AAED,OAAO,cAA8B,qBAAK;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/toggle.tsx"],"names":[],"mappings":";;;;;AAEA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AA2C/B;AAnCF,IAAM,iBAAiB,IAAI;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AAWD,IAAM,SAAe,iBAAuC,CAAC,EAAE,WAAW,SAAS,MAAM,GAAG,MAAM,GAAG,QACnG,oBAAiB,sBAAhB,EAAqB,KAAU,WAAW,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAI,GAAG,OAAO,CACrG;AAED,OAAO,cAA8B,qBAAK","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { type VariantProps } from \"cva\";\nimport { cva } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Variant: Toggle\n * -------------------------------------------------------------------------- */\n\nconst toggleVariants = cva({\n base: [\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors\",\n \"hover:bg-muted hover:text-muted-foreground\",\n \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n \"data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n ],\n variants: {\n variant: {\n default: \"bg-transparent\",\n outline: \"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-sm\",\n },\n size: {\n default: \"h-10 px-3\",\n sm: \"h-9 px-2.5\",\n lg: \"h-11 px-5\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\ntype ToggleVariantsProps = VariantProps<typeof toggleVariants>;\n\n/* -----------------------------------------------------------------------------\n * Component: Toggle\n * -------------------------------------------------------------------------- */\n\ntype ToggleElement = React.ElementRef<typeof TogglePrimitive.Root>;\ntype ToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & ToggleVariantsProps;\n\nconst Toggle = React.forwardRef<ToggleElement, ToggleProps>(({ className, variant, size, ...props }, ref) => (\n <TogglePrimitive.Root ref={ref} className={toggleVariants({ variant, size, className })} {...props} />\n));\n\nToggle.displayName = TogglePrimitive.Root.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\nexport { Toggle, toggleVariants, type ToggleProps, type ToggleVariantsProps };\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/button.tsx"],"names":[],"mappings":";;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,YAAY;AAErB,SAAS,gBAAgB;AACzB,SAAS,sBAAsB;AAuErB,SACE,KADF;AA/DV,IAAM,iBAAiB,IAAI;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,MACb,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAcD,IAAM,SAAe;AAAA,EACnB,CAAC,EAAE,UAAU,WAAW,SAAS,MAAM,UAAU,OAAO,UAAU,OAAO,GAAG,MAAM,GAAG,QAAQ;AAC3F,UAAM,YAAY,UAAU,OAAO;AACnC,UAAM,mBAAmB,UAAU,SAAS;AAC5C,UAAM,WAAW,WAAW,MAAM;AAElC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,UAAU,SAAY;AAAA,QAC5B,WAAW,eAAe,EAAE,SAAS,MAAM,SAAS,UAAU,CAAC;AAAA,QAC9D,GAAG;AAAA,QACJ;AAAA,QAEC,oBACC,qBAAC,oBACC;AAAA,8BAAC,UAAK,eAAW,MAAC,WAAU,sBACzB,UACH;AAAA,UACA,oBAAC,kBAAgB,UAAS;AAAA,UAC1B,oBAAC,UAAK,WAAU,qDACd,8BAAC,WAAQ,GACX;AAAA,WACF,IAEA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc","sourcesContent":["import * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps } from \"cva\";\nimport { Fragment } from \"react\";\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\nimport { Spinner } from \"./spinner\";\nimport { cva } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Variant: Button\n * -------------------------------------------------------------------------- */\n\nconst buttonVariants = cva({\n base: [\n \"inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n ],\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90 shadow\",\n destructive: \"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n outline: \"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm\",\n },\n size: {\n default: \"h-10 px-4\",\n xs: \"h-8 px-2\",\n sm: \"h-9 px-3\",\n lg: \"h-11 px-8\",\n icon: \"size-10\",\n \"icon-xs\": \"size-8\",\n \"icon-sm\": \"size-9\",\n \"icon-lg\": \"size-11\",\n },\n loading: {\n true: \"relative\",\n },\n },\n defaultVariants: {\n size: \"default\",\n variant: \"default\",\n loading: false,\n },\n});\n\ntype ButtonVariantsProps = VariantProps<typeof buttonVariants>;\n\n/* -----------------------------------------------------------------------------\n * Component: Button\n * -------------------------------------------------------------------------- */\n\ntype ButtonElement = HTMLButtonElement;\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, ButtonVariantsProps {\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<ButtonElement, ButtonProps>(\n ({ children, className, variant, size, loading = false, asChild = false, ...props }, ref) => {\n const Component = asChild ? Slot : \"button\";\n const ComponentLoading = asChild ? \"span\" : Fragment;\n const disabled = loading || props.disabled;\n\n return (\n <Component\n ref={ref}\n type={asChild ? undefined : \"button\"}\n className={buttonVariants({ variant, size, loading, className })}\n {...props}\n disabled={disabled}\n >\n {loading ? (\n <ComponentLoading>\n <span aria-hidden className=\"invisible contents\">\n {children}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <Spinner />\n </span>\n </ComponentLoading>\n ) : (\n children\n )}\n </Component>\n );\n },\n);\n\nButton.displayName = \"Button\";\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport { Button, buttonVariants, type ButtonProps, type ButtonVariantsProps };\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/dialog.tsx"],"names":[],"mappings":";;;;;AAEA,YAAY,WAAW;AACvB,YAAY,qBAAqB;AACjC,SAAS,kBAAkB;AAkCrB,cAcE,YAdF;AA1BN,IAAM,SAAyB;AAO/B,IAAM,gBAAgC;AAOtC,IAAM,cAA8B;AASpC,IAAM,gBAAsB;AAAA,EAC1B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAClC,qBAAiB,wBAAhB,EACC;AAAA;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,QACF;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAiB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACD;AAAA,YAAiB;AAAA,YAAhB;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA,cAEA;AAAA,oCAAC,cAAW,WAAU,UAAS;AAAA,gBAC/B,oBAAC,UAAK,WAAU,WAAU,mBAAK;AAAA;AAAA;AAAA,UACjC;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,cAAc,cAA8B,wBAAQ;AAQpD,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAyC;AACnF,SAAO,oBAAC,SAAI,WAAW,GAAG,sDAAsD,SAAS,GAAI,GAAG,OAAO;AACzG;AAQA,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAyC;AACnF,SAAO,oBAAC,SAAI,WAAW,GAAG,iEAAiE,SAAS,GAAI,GAAG,OAAO;AACpH;AASA,IAAM,cAAoB,iBAAiD,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACnG;AAAA,EAAiB;AAAA,EAAhB;AAAA,IACC;AAAA,IACA,WAAW,GAAG,qDAAqD,SAAS;AAAA,IAC3E,GAAG;AAAA;AACN,CACD;AAED,YAAY,cAA8B,sBAAM;AAShD,IAAM,oBAA0B;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oBAAiB,6BAAhB,EAA4B,KAAU,WAAW,GAAG,iCAAiC,SAAS,GAAI,GAAG,OAAO;AAEjH;AAEA,kBAAkB,cAA8B,4BAAY","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { Cross2Icon } from \"@radix-ui/react-icons\";\nimport { cn } from \"./utils\";\n\n/* -----------------------------------------------------------------------------\n * Component: Dialog\n * -------------------------------------------------------------------------- */\n\ntype DialogProps = React.ComponentProps<typeof DialogPrimitive.Root>;\nconst Dialog = DialogPrimitive.Root;\n\n/* -----------------------------------------------------------------------------\n * Component: DialogTrigger\n * -------------------------------------------------------------------------- */\n\ntype DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;\nconst DialogTrigger = DialogPrimitive.Trigger;\n\n/* -----------------------------------------------------------------------------\n * Component: DialogClose\n * -------------------------------------------------------------------------- */\n\ntype DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;\nconst DialogClose = DialogPrimitive.Close;\n\n/* -----------------------------------------------------------------------------\n * Component: DialogContent\n * -------------------------------------------------------------------------- */\n\ntype DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ntype DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;\n\nconst DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(\n ({ className, children, ...props }, ref) => (\n <DialogPrimitive.Portal>\n <DialogPrimitive.Overlay\n className={cn(\n \"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fixed inset-0 z-50 bg-black/80\",\n )}\n />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n \"bg-background data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-1/3 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-1/3 fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 focus:outline-none sm:rounded-lg\",\n className,\n )}\n {...props}\n >\n {children}\n <DialogPrimitive.Close\n className={cn(\n \"absolute right-4 top-4 rounded-sm opacity-70 transition-opacity\",\n \"hover:opacity-100\",\n \"disabled:pointer-events-none\",\n \"data-[state=open]:bg-accent data-[state=open]:text-muted-foreground\",\n \"focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n )}\n >\n <Cross2Icon className=\"size-4\" />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n ),\n);\n\nDialogContent.displayName = DialogPrimitive.Content.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: DialogHeader\n * -------------------------------------------------------------------------- */\n\ntype DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nfunction DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element {\n return <div className={cn(\"flex flex-col space-y-1.5 text-center sm:text-left\", className)} {...props} />;\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DialogFooter\n * -------------------------------------------------------------------------- */\n\ntype DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nfunction DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element {\n return <div className={cn(\"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\", className)} {...props} />;\n}\n\n/* -----------------------------------------------------------------------------\n * Component: DialogTitle\n * -------------------------------------------------------------------------- */\n\ntype DialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;\ntype DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;\n\nconst DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n {...props}\n />\n));\n\nDialogTitle.displayName = DialogPrimitive.Title.displayName;\n\n/* -----------------------------------------------------------------------------\n * Component: DialogDescription\n * -------------------------------------------------------------------------- */\n\ntype DialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;\ntype DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;\n\nconst DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(\n ({ className, ...props }, ref) => (\n <DialogPrimitive.Description ref={ref} className={cn(\"text-muted-foreground text-sm\", className)} {...props} />\n ),\n);\n\nDialogDescription.displayName = DialogPrimitive.Description.displayName;\n\n/* -----------------------------------------------------------------------------\n * Exports\n * -------------------------------------------------------------------------- */\n\nexport {\n Dialog,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n type DialogProps,\n type DialogTriggerProps,\n type DialogCloseProps,\n type DialogContentProps,\n type DialogHeaderProps,\n type DialogFooterProps,\n type DialogTitleProps,\n type DialogDescriptionProps,\n};\n"]}