@opensite/ui 0.1.0 → 0.1.2

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 (35) hide show
  1. package/dist/{button-variants-CdXVl4bn.d.cts → button-variants-CbpzhUdJ.d.cts} +0 -6
  2. package/dist/{button-variants-CdXVl4bn.d.ts → button-variants-CbpzhUdJ.d.ts} +0 -6
  3. package/dist/button.cjs +139 -25
  4. package/dist/button.cjs.map +1 -1
  5. package/dist/button.d.cts +1 -1
  6. package/dist/button.d.ts +1 -1
  7. package/dist/button.js +139 -25
  8. package/dist/button.js.map +1 -1
  9. package/dist/components.cjs +139 -25
  10. package/dist/components.cjs.map +1 -1
  11. package/dist/components.d.cts +1 -1
  12. package/dist/components.d.ts +1 -1
  13. package/dist/components.js +139 -25
  14. package/dist/components.js.map +1 -1
  15. package/dist/feature-showcase.cjs +139 -25
  16. package/dist/feature-showcase.cjs.map +1 -1
  17. package/dist/feature-showcase.js +139 -25
  18. package/dist/feature-showcase.js.map +1 -1
  19. package/dist/index.cjs +139 -25
  20. package/dist/index.cjs.map +1 -1
  21. package/dist/index.d.cts +1 -1
  22. package/dist/index.d.ts +1 -1
  23. package/dist/index.js +139 -25
  24. package/dist/index.js.map +1 -1
  25. package/dist/pressable.cjs +139 -25
  26. package/dist/pressable.cjs.map +1 -1
  27. package/dist/pressable.d.cts +1 -1
  28. package/dist/pressable.d.ts +1 -1
  29. package/dist/pressable.js +139 -25
  30. package/dist/pressable.js.map +1 -1
  31. package/dist/registry.cjs +139 -25
  32. package/dist/registry.cjs.map +1 -1
  33. package/dist/registry.js +139 -25
  34. package/dist/registry.js.map +1 -1
  35. package/package.json +1 -1
package/dist/{button-variants-CdXVl4bn.d.cts → button-variants-CbpzhUdJ.d.cts} RENAMED
@@ -1,11 +1,5 @@
1
1
  import * as class_variance_authority_types from 'class-variance-authority/types';
2
2
 
3
- /**
4
- * Button variants using class-variance-authority (cva).
5
- *
6
- * This is extracted to a separate file to avoid importing @radix-ui/react-slot
7
- * when only the variants are needed (e.g., in Pressable component).
8
- */
9
3
  declare const buttonVariants: (props?: ({
10
4
  variant?: "secondary" | "link" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
11
5
  size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
package/dist/{button-variants-CdXVl4bn.d.ts → button-variants-CbpzhUdJ.d.ts} RENAMED
@@ -1,11 +1,5 @@
1
1
  import * as class_variance_authority_types from 'class-variance-authority/types';
2
2
 
3
- /**
4
- * Button variants using class-variance-authority (cva).
5
- *
6
- * This is extracted to a separate file to avoid importing @radix-ui/react-slot
7
- * when only the variants are needed (e.g., in Pressable component).
8
- */
9
3
  declare const buttonVariants: (props?: ({
10
4
  variant?: "secondary" | "link" | "outline" | "default" | "destructive" | "ghost" | null | undefined;
11
5
  size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
package/dist/button.cjs CHANGED
@@ -10,34 +10,148 @@ var jsxRuntime = require('react/jsx-runtime');
10
10
  function cn(...inputs) {
11
11
  return tailwindMerge.twMerge(clsx.clsx(inputs));
12
12
  }
13
- var buttonVariants = classVarianceAuthority.cva(
14
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
15
- {
16
- variants: {
17
- variant: {
18
- default: "bg-[var(--button-default-bg,hsl(var(--primary)))] text-[var(--button-default-fg,hsl(var(--primary-foreground)))] hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
19
- destructive: "bg-[var(--button-destructive-bg,hsl(var(--destructive)))] text-[var(--button-destructive-fg,white)] hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
20
- outline: "border-[var(--button-outline-border-width,1px)] border-[var(--button-outline-border,hsl(var(--border)))] bg-[var(--button-outline-bg,hsl(var(--background)))] text-[var(--button-outline-fg,inherit)] shadow-xs hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))] dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
21
- secondary: "bg-[var(--button-secondary-bg,hsl(var(--secondary)))] text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))] hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
22
- ghost: "bg-[var(--button-ghost-bg,transparent)] text-[var(--button-ghost-fg,inherit)] hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))] dark:hover:bg-accent/50",
23
- link: "text-[var(--button-link-fg,hsl(var(--primary)))] underline-offset-4 hover:underline"
24
- },
25
- size: {
26
- default: "h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]",
27
- sm: "h-[var(--button-height-sm,2rem)] rounded-button gap-1.5 px-[var(--button-padding-x-sm,0.75rem)] has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]",
28
- md: "h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]",
29
- lg: "h-[var(--button-height-lg,2.5rem)] rounded-button px-[var(--button-padding-x-lg,1.5rem)] has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]",
30
- icon: "size-[var(--button-height-md,2.25rem)]",
31
- "icon-sm": "size-[var(--button-height-sm,2rem)]",
32
- "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
33
- }
13
+ var baseStyles = [
14
+ // Layout
15
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
16
+ // Typography - using CSS variables with sensible defaults
17
+ "font-[var(--button-font-family,inherit)]",
18
+ "font-[var(--button-font-weight,500)]",
19
+ "tracking-[var(--button-letter-spacing,0)]",
20
+ "leading-[var(--button-line-height,1.25)]",
21
+ "[text-transform:var(--button-text-transform,none)]",
22
+ "text-sm",
23
+ // Border radius
24
+ "rounded-[var(--button-radius,var(--radius,0.375rem))]",
25
+ // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
26
+ "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
27
+ // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
28
+ "[box-shadow:var(--button-shadow,none)]",
29
+ "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
30
+ // Disabled state
31
+ "disabled:pointer-events-none disabled:opacity-50",
32
+ // SVG handling
33
+ "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
34
+ // Focus styles
35
+ "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
36
+ // Invalid state
37
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
38
+ ].join(" ");
39
+ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
40
+ variants: {
41
+ variant: {
42
+ // Default (Primary) variant - full customization
43
+ default: [
44
+ "bg-[var(--button-default-bg,hsl(var(--primary)))]",
45
+ "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
46
+ "border-[length:var(--button-default-border-width,0px)]",
47
+ "border-[color:var(--button-default-border,transparent)]",
48
+ "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
49
+ "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
50
+ "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
51
+ "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
52
+ "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
53
+ ].join(" "),
54
+ // Destructive variant - full customization
55
+ destructive: [
56
+ "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
57
+ "text-[var(--button-destructive-fg,white)]",
58
+ "border-[length:var(--button-destructive-border-width,0px)]",
59
+ "border-[color:var(--button-destructive-border,transparent)]",
60
+ "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
61
+ "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
62
+ "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
63
+ "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
64
+ "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
65
+ "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
66
+ "dark:bg-destructive/60"
67
+ ].join(" "),
68
+ // Outline variant - full customization with proper border handling
69
+ outline: [
70
+ "bg-[var(--button-outline-bg,hsl(var(--background)))]",
71
+ "text-[var(--button-outline-fg,inherit)]",
72
+ "border-[length:var(--button-outline-border-width,1px)]",
73
+ "border-[color:var(--button-outline-border,hsl(var(--border)))]",
74
+ "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
75
+ "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
76
+ "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
77
+ "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
78
+ "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
79
+ "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
80
+ ].join(" "),
81
+ // Secondary variant - full customization
82
+ secondary: [
83
+ "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
84
+ "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
85
+ "border-[length:var(--button-secondary-border-width,0px)]",
86
+ "border-[color:var(--button-secondary-border,transparent)]",
87
+ "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
88
+ "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
89
+ "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
90
+ "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
91
+ "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
92
+ ].join(" "),
93
+ // Ghost variant - full customization
94
+ ghost: [
95
+ "bg-[var(--button-ghost-bg,transparent)]",
96
+ "text-[var(--button-ghost-fg,inherit)]",
97
+ "border-[length:var(--button-ghost-border-width,0px)]",
98
+ "border-[color:var(--button-ghost-border,transparent)]",
99
+ "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
100
+ "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
101
+ "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
102
+ "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
103
+ "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
104
+ "dark:hover:bg-accent/50"
105
+ ].join(" "),
106
+ // Link variant - full customization
107
+ link: [
108
+ "bg-[var(--button-link-bg,transparent)]",
109
+ "text-[var(--button-link-fg,hsl(var(--primary)))]",
110
+ "border-[length:var(--button-link-border-width,0px)]",
111
+ "border-[color:var(--button-link-border,transparent)]",
112
+ "[box-shadow:var(--button-link-shadow,none)]",
113
+ "hover:bg-[var(--button-link-hover-bg,transparent)]",
114
+ "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
115
+ "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
116
+ "underline-offset-4 hover:underline"
117
+ ].join(" ")
34
118
  },
35
- defaultVariants: {
36
- variant: "default",
37
- size: "default"
119
+ size: {
120
+ default: [
121
+ "h-[var(--button-height-md,2.25rem)]",
122
+ "px-[var(--button-padding-x-md,1rem)]",
123
+ "py-[var(--button-padding-y-md,0.5rem)]",
124
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
125
+ ].join(" "),
126
+ sm: [
127
+ "h-[var(--button-height-sm,2rem)]",
128
+ "px-[var(--button-padding-x-sm,0.75rem)]",
129
+ "py-[var(--button-padding-y-sm,0.25rem)]",
130
+ "gap-1.5",
131
+ "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
132
+ ].join(" "),
133
+ md: [
134
+ "h-[var(--button-height-md,2.25rem)]",
135
+ "px-[var(--button-padding-x-md,1rem)]",
136
+ "py-[var(--button-padding-y-md,0.5rem)]",
137
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
138
+ ].join(" "),
139
+ lg: [
140
+ "h-[var(--button-height-lg,2.5rem)]",
141
+ "px-[var(--button-padding-x-lg,1.5rem)]",
142
+ "py-[var(--button-padding-y-lg,0.5rem)]",
143
+ "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
144
+ ].join(" "),
145
+ icon: "size-[var(--button-height-md,2.25rem)]",
146
+ "icon-sm": "size-[var(--button-height-sm,2rem)]",
147
+ "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
38
148
  }
149
+ },
150
+ defaultVariants: {
151
+ variant: "default",
152
+ size: "default"
39
153
  }
40
- );
154
+ });
41
155
  function Button({
42
156
  className,
43
157
  variant = "default",
package/dist/button.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/utils.ts","../lib/button-variants.ts","../components/ui/button.tsx"],"names":["twMerge","clsx","cva","Slot","jsx"],"mappings":";;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGO,IAAM,cAAA,GAAiBC,0BAAA;AAAA,EAC5B,icAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,oLAAA;AAAA,QACT,WAAA,EACE,+QAAA;AAAA,QACF,OAAA,EACE,kZAAA;AAAA,QACF,SAAA,EACE,gMAAA;AAAA,QACF,KAAA,EACE,0OAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,0IAAA;AAAA,QACT,EAAA,EAAI,+JAAA;AAAA,QACJ,EAAA,EAAI,0IAAA;AAAA,QACJ,EAAA,EAAI,uJAAA;AAAA,QACJ,IAAA,EAAM,wCAAA;AAAA,QACN,SAAA,EAAW,qCAAA;AAAA,QACX,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AChCA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAGK;AACH,EAAA,MAAM,IAAA,GAAO,UAAUC,cAAA,GAAO,QAAA;AAE9B,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"button.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cva } from \"class-variance-authority\";\n\n/**\n * Button variants using class-variance-authority (cva).\n * \n * This is extracted to a separate file to avoid importing @radix-ui/react-slot\n * when only the variants are needed (e.g., in Pressable component).\n */\nexport const buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: \"bg-[var(--button-default-bg,hsl(var(--primary)))] text-[var(--button-default-fg,hsl(var(--primary-foreground)))] hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]\",\n destructive:\n \"bg-[var(--button-destructive-bg,hsl(var(--destructive)))] text-[var(--button-destructive-fg,white)] hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border-[var(--button-outline-border-width,1px)] border-[var(--button-outline-border,hsl(var(--border)))] bg-[var(--button-outline-bg,hsl(var(--background)))] text-[var(--button-outline-fg,inherit)] shadow-xs hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))] dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-[var(--button-secondary-bg,hsl(var(--secondary)))] text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))] hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]\",\n ghost:\n \"bg-[var(--button-ghost-bg,transparent)] text-[var(--button-ghost-fg,inherit)] hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))] dark:hover:bg-accent/50\",\n link: \"text-[var(--button-link-fg,hsl(var(--primary)))] underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n sm: \"h-[var(--button-height-sm,2rem)] rounded-button gap-1.5 px-[var(--button-padding-x-sm,0.75rem)] has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]\",\n md: \"h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n lg: \"h-[var(--button-height-lg,2.5rem)] rounded-button px-[var(--button-padding-x-lg,1.5rem)] has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]\",\n icon: \"size-[var(--button-height-md,2.25rem)]\",\n \"icon-sm\": \"size-[var(--button-height-sm,2rem)]\",\n \"icon-lg\": \"size-[var(--button-height-lg,2.5rem)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../../lib/button-variants\"\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"]}
1
+ {"version":3,"sources":["../lib/utils.ts","../lib/button-variants.ts","../components/ui/button.tsx"],"names":["twMerge","clsx","cva","Slot","jsx"],"mappings":";;;;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACkCA,IAAM,UAAA,GAAa;AAAA;AAAA,EAEjB,0EAAA;AAAA;AAAA,EAEA,0CAAA;AAAA,EACA,sCAAA;AAAA,EACA,2CAAA;AAAA,EACA,0CAAA;AAAA,EACA,oDAAA;AAAA,EACA,SAAA;AAAA;AAAA,EAEA,uDAAA;AAAA;AAAA,EAEA,2EAAA;AAAA;AAAA,EAEA,wCAAA;AAAA,EACA,yEAAA;AAAA;AAAA,EAEA,kDAAA;AAAA;AAAA,EAEA,mFAAA;AAAA;AAAA,EAEA,4FAAA;AAAA;AAAA,EAEA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;AAEH,IAAM,cAAA,GAAiBC,2BAAI,UAAA,EAAY;AAAA,EAC5C,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA;AAAA,MAEP,OAAA,EAAS;AAAA,QACP,mDAAA;AAAA,QACA,gEAAA;AAAA,QACA,wDAAA;AAAA,QACA,yDAAA;AAAA,QACA,qEAAA;AAAA,QACA,mEAAA;AAAA,QACA,qGAAA;AAAA,QACA,kGAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MAGV,WAAA,EAAa;AAAA,QACX,2DAAA;AAAA,QACA,2CAAA;AAAA,QACA,4DAAA;AAAA,QACA,6DAAA;AAAA,QACA,yEAAA;AAAA,QACA,2EAAA;AAAA,QACA,oFAAA;AAAA,QACA,0GAAA;AAAA,QACA,iJAAA;AAAA,QACA,0EAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MAGV,OAAA,EAAS;AAAA,QACP,sDAAA;AAAA,QACA,yCAAA;AAAA,QACA,wDAAA;AAAA,QACA,gEAAA;AAAA,QACA,4FAAA;AAAA,QACA,8DAAA;AAAA,QACA,2EAAA;AAAA,QACA,yGAAA;AAAA,QACA,yIAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MAGV,SAAA,EAAW;AAAA,QACT,uDAAA;AAAA,QACA,oEAAA;AAAA,QACA,0DAAA;AAAA,QACA,2DAAA;AAAA,QACA,uEAAA;AAAA,QACA,uEAAA;AAAA,QACA,2GAAA;AAAA,QACA,sGAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MAGV,KAAA,EAAO;AAAA,QACL,yCAAA;AAAA,QACA,uCAAA;AAAA,QACA,sDAAA;AAAA,QACA,uDAAA;AAAA,QACA,mEAAA;AAAA,QACA,4DAAA;AAAA,QACA,yEAAA;AAAA,QACA,8FAAA;AAAA,QACA,qIAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA;AAAA,MAGV,IAAA,EAAM;AAAA,QACJ,wCAAA;AAAA,QACA,kDAAA;AAAA,QACA,qDAAA;AAAA,QACA,sDAAA;AAAA,QACA,6CAAA;AAAA,QACA,oDAAA;AAAA,QACA,oFAAA;AAAA,QACA,yDAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG;AAAA,KACZ;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,OAAA,EAAS;AAAA,QACP,qCAAA;AAAA,QACA,sCAAA;AAAA,QACA,wCAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA,MACV,EAAA,EAAI;AAAA,QACF,kCAAA;AAAA,QACA,yCAAA;AAAA,QACA,yCAAA;AAAA,QACA,SAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA,MACV,EAAA,EAAI;AAAA,QACF,qCAAA;AAAA,QACA,sCAAA;AAAA,QACA,wCAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA,MACV,EAAA,EAAI;AAAA,QACF,oCAAA;AAAA,QACA,wCAAA;AAAA,QACA,wCAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,GAAG,CAAA;AAAA,MACV,IAAA,EAAM,wCAAA;AAAA,MACN,SAAA,EAAW,qCAAA;AAAA,MACX,SAAA,EAAW;AAAA;AACb,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,IAAA,EAAM;AAAA;AAEV,CAAC;ACnLD,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAGK;AACH,EAAA,MAAM,IAAA,GAAO,UAAUC,cAAA,GAAO,QAAA;AAE9B,EAAA,uBACEC,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"button.cjs","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cva } from \"class-variance-authority\";\n\n/**\n * Button variants using class-variance-authority (cva).\n *\n * This is extracted to a separate file to avoid importing @radix-ui/react-slot\n * when only the variants are needed (e.g., in Pressable component).\n *\n * ## CSS Variable Reference\n *\n * ### Master Button Variables (apply to all variants)\n * - `--button-font-family` - Font family (default: inherit)\n * - `--button-font-weight` - Font weight (default: 500)\n * - `--button-letter-spacing` - Letter spacing (default: 0)\n * - `--button-line-height` - Line height (default: 1.25)\n * - `--button-text-transform` - Text transform (default: none)\n * - `--button-transition` - Transition timing (default: all 250ms cubic-bezier(0.4, 0, 0.2, 1))\n * - `--button-radius` - Border radius (default: var(--radius, 0.375rem))\n * - `--button-shadow` - Default box shadow (default: none)\n * - `--button-shadow-hover` - Hover box shadow (default: none)\n *\n * ### Size Variables\n * - `--button-height-sm/md/lg` - Button heights\n * - `--button-padding-x-sm/md/lg` - Horizontal padding\n * - `--button-padding-y-sm/md/lg` - Vertical padding\n *\n * ### Per-Variant Variables (replace {variant} with: default, destructive, outline, secondary, ghost, link)\n * - `--button-{variant}-bg` - Background color\n * - `--button-{variant}-fg` - Text/foreground color\n * - `--button-{variant}-border` - Border color\n * - `--button-{variant}-border-width` - Border width\n * - `--button-{variant}-hover-bg` - Hover background color\n * - `--button-{variant}-hover-fg` - Hover text color\n * - `--button-{variant}-hover-border` - Hover border color\n * - `--button-{variant}-shadow` - Box shadow (overrides master)\n * - `--button-{variant}-shadow-hover` - Hover box shadow (overrides master)\n */\n\n// Base styles applied to all buttons - includes master typography, transition, and layout\nconst baseStyles = [\n // Layout\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0\",\n // Typography - using CSS variables with sensible defaults\n \"font-[var(--button-font-family,inherit)]\",\n \"font-[var(--button-font-weight,500)]\",\n \"tracking-[var(--button-letter-spacing,0)]\",\n \"leading-[var(--button-line-height,1.25)]\",\n \"[text-transform:var(--button-text-transform,none)]\",\n \"text-sm\",\n // Border radius\n \"rounded-[var(--button-radius,var(--radius,0.375rem))]\",\n // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)\n \"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]\",\n // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows\n \"[box-shadow:var(--button-shadow,none)]\",\n \"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]\",\n // Disabled state\n \"disabled:pointer-events-none disabled:opacity-50\",\n // SVG handling\n \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n // Focus styles\n \"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n // Invalid state\n \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n].join(\" \");\n\nexport const buttonVariants = cva(baseStyles, {\n variants: {\n variant: {\n // Default (Primary) variant - full customization\n default: [\n \"bg-[var(--button-default-bg,hsl(var(--primary)))]\",\n \"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]\",\n \"border-[length:var(--button-default-border-width,0px)]\",\n \"border-[color:var(--button-default-border,transparent)]\",\n \"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]\",\n \"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]\",\n \"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]\",\n \"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]\",\n \"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]\",\n ].join(\" \"),\n\n // Destructive variant - full customization\n destructive: [\n \"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]\",\n \"text-[var(--button-destructive-fg,white)]\",\n \"border-[length:var(--button-destructive-border-width,0px)]\",\n \"border-[color:var(--button-destructive-border,transparent)]\",\n \"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]\",\n \"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]\",\n \"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]\",\n \"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]\",\n \"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]\",\n \"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n \"dark:bg-destructive/60\",\n ].join(\" \"),\n\n // Outline variant - full customization with proper border handling\n outline: [\n \"bg-[var(--button-outline-bg,hsl(var(--background)))]\",\n \"text-[var(--button-outline-fg,inherit)]\",\n \"border-[length:var(--button-outline-border-width,1px)]\",\n \"border-[color:var(--button-outline-border,hsl(var(--border)))]\",\n \"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]\",\n \"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]\",\n \"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]\",\n \"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]\",\n \"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]\",\n \"dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n ].join(\" \"),\n\n // Secondary variant - full customization\n secondary: [\n \"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]\",\n \"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]\",\n \"border-[length:var(--button-secondary-border-width,0px)]\",\n \"border-[color:var(--button-secondary-border,transparent)]\",\n \"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]\",\n \"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]\",\n \"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]\",\n \"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]\",\n \"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]\",\n ].join(\" \"),\n\n // Ghost variant - full customization\n ghost: [\n \"bg-[var(--button-ghost-bg,transparent)]\",\n \"text-[var(--button-ghost-fg,inherit)]\",\n \"border-[length:var(--button-ghost-border-width,0px)]\",\n \"border-[color:var(--button-ghost-border,transparent)]\",\n \"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]\",\n \"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]\",\n \"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]\",\n \"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]\",\n \"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]\",\n \"dark:hover:bg-accent/50\",\n ].join(\" \"),\n\n // Link variant - full customization\n link: [\n \"bg-[var(--button-link-bg,transparent)]\",\n \"text-[var(--button-link-fg,hsl(var(--primary)))]\",\n \"border-[length:var(--button-link-border-width,0px)]\",\n \"border-[color:var(--button-link-border,transparent)]\",\n \"[box-shadow:var(--button-link-shadow,none)]\",\n \"hover:bg-[var(--button-link-hover-bg,transparent)]\",\n \"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]\",\n \"hover:[box-shadow:var(--button-link-shadow-hover,none)]\",\n \"underline-offset-4 hover:underline\",\n ].join(\" \"),\n },\n size: {\n default: [\n \"h-[var(--button-height-md,2.25rem)]\",\n \"px-[var(--button-padding-x-md,1rem)]\",\n \"py-[var(--button-padding-y-md,0.5rem)]\",\n \"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n ].join(\" \"),\n sm: [\n \"h-[var(--button-height-sm,2rem)]\",\n \"px-[var(--button-padding-x-sm,0.75rem)]\",\n \"py-[var(--button-padding-y-sm,0.25rem)]\",\n \"gap-1.5\",\n \"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]\",\n ].join(\" \"),\n md: [\n \"h-[var(--button-height-md,2.25rem)]\",\n \"px-[var(--button-padding-x-md,1rem)]\",\n \"py-[var(--button-padding-y-md,0.5rem)]\",\n \"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n ].join(\" \"),\n lg: [\n \"h-[var(--button-height-lg,2.5rem)]\",\n \"px-[var(--button-padding-x-lg,1.5rem)]\",\n \"py-[var(--button-padding-y-lg,0.5rem)]\",\n \"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]\",\n ].join(\" \"),\n icon: \"size-[var(--button-height-md,2.25rem)]\",\n \"icon-sm\": \"size-[var(--button-height-sm,2rem)]\",\n \"icon-lg\": \"size-[var(--button-height-lg,2.5rem)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../../lib/button-variants\"\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"]}
package/dist/button.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
- import { b as buttonVariants } from './button-variants-CdXVl4bn.cjs';
4
+ import { b as buttonVariants } from './button-variants-CbpzhUdJ.cjs';
5
5
  import 'class-variance-authority/types';
6
6
 
7
7
  declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
package/dist/button.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
3
  import { VariantProps } from 'class-variance-authority';
4
- import { b as buttonVariants } from './button-variants-CdXVl4bn.js';
4
+ import { b as buttonVariants } from './button-variants-CbpzhUdJ.js';
5
5
  import 'class-variance-authority/types';
6
6
 
7
7
  declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
package/dist/button.js CHANGED
@@ -8,34 +8,148 @@ import { jsx } from 'react/jsx-runtime';
8
8
  function cn(...inputs) {
9
9
  return twMerge(clsx(inputs));
10
10
  }
11
- var buttonVariants = cva(
12
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
13
- {
14
- variants: {
15
- variant: {
16
- default: "bg-[var(--button-default-bg,hsl(var(--primary)))] text-[var(--button-default-fg,hsl(var(--primary-foreground)))] hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
17
- destructive: "bg-[var(--button-destructive-bg,hsl(var(--destructive)))] text-[var(--button-destructive-fg,white)] hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18
- outline: "border-[var(--button-outline-border-width,1px)] border-[var(--button-outline-border,hsl(var(--border)))] bg-[var(--button-outline-bg,hsl(var(--background)))] text-[var(--button-outline-fg,inherit)] shadow-xs hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))] dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
19
- secondary: "bg-[var(--button-secondary-bg,hsl(var(--secondary)))] text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))] hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
20
- ghost: "bg-[var(--button-ghost-bg,transparent)] text-[var(--button-ghost-fg,inherit)] hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))] dark:hover:bg-accent/50",
21
- link: "text-[var(--button-link-fg,hsl(var(--primary)))] underline-offset-4 hover:underline"
22
- },
23
- size: {
24
- default: "h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]",
25
- sm: "h-[var(--button-height-sm,2rem)] rounded-button gap-1.5 px-[var(--button-padding-x-sm,0.75rem)] has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]",
26
- md: "h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]",
27
- lg: "h-[var(--button-height-lg,2.5rem)] rounded-button px-[var(--button-padding-x-lg,1.5rem)] has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]",
28
- icon: "size-[var(--button-height-md,2.25rem)]",
29
- "icon-sm": "size-[var(--button-height-sm,2rem)]",
30
- "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
31
- }
11
+ var baseStyles = [
12
+ // Layout
13
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0",
14
+ // Typography - using CSS variables with sensible defaults
15
+ "font-[var(--button-font-family,inherit)]",
16
+ "font-[var(--button-font-weight,500)]",
17
+ "tracking-[var(--button-letter-spacing,0)]",
18
+ "leading-[var(--button-line-height,1.25)]",
19
+ "[text-transform:var(--button-text-transform,none)]",
20
+ "text-sm",
21
+ // Border radius
22
+ "rounded-[var(--button-radius,var(--radius,0.375rem))]",
23
+ // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)
24
+ "[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]",
25
+ // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows
26
+ "[box-shadow:var(--button-shadow,none)]",
27
+ "hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]",
28
+ // Disabled state
29
+ "disabled:pointer-events-none disabled:opacity-50",
30
+ // SVG handling
31
+ "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
32
+ // Focus styles
33
+ "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
34
+ // Invalid state
35
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive"
36
+ ].join(" ");
37
+ var buttonVariants = cva(baseStyles, {
38
+ variants: {
39
+ variant: {
40
+ // Default (Primary) variant - full customization
41
+ default: [
42
+ "bg-[var(--button-default-bg,hsl(var(--primary)))]",
43
+ "text-[var(--button-default-fg,hsl(var(--primary-foreground)))]",
44
+ "border-[length:var(--button-default-border-width,0px)]",
45
+ "border-[color:var(--button-default-border,transparent)]",
46
+ "[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]",
47
+ "hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]",
48
+ "hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]",
49
+ "hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]",
50
+ "hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]"
51
+ ].join(" "),
52
+ // Destructive variant - full customization
53
+ destructive: [
54
+ "bg-[var(--button-destructive-bg,hsl(var(--destructive)))]",
55
+ "text-[var(--button-destructive-fg,white)]",
56
+ "border-[length:var(--button-destructive-border-width,0px)]",
57
+ "border-[color:var(--button-destructive-border,transparent)]",
58
+ "[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]",
59
+ "hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]",
60
+ "hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]",
61
+ "hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]",
62
+ "hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]",
63
+ "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
64
+ "dark:bg-destructive/60"
65
+ ].join(" "),
66
+ // Outline variant - full customization with proper border handling
67
+ outline: [
68
+ "bg-[var(--button-outline-bg,hsl(var(--background)))]",
69
+ "text-[var(--button-outline-fg,inherit)]",
70
+ "border-[length:var(--button-outline-border-width,1px)]",
71
+ "border-[color:var(--button-outline-border,hsl(var(--border)))]",
72
+ "[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]",
73
+ "hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]",
74
+ "hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]",
75
+ "hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]",
76
+ "hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]",
77
+ "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
78
+ ].join(" "),
79
+ // Secondary variant - full customization
80
+ secondary: [
81
+ "bg-[var(--button-secondary-bg,hsl(var(--secondary)))]",
82
+ "text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]",
83
+ "border-[length:var(--button-secondary-border-width,0px)]",
84
+ "border-[color:var(--button-secondary-border,transparent)]",
85
+ "[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]",
86
+ "hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]",
87
+ "hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]",
88
+ "hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]",
89
+ "hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]"
90
+ ].join(" "),
91
+ // Ghost variant - full customization
92
+ ghost: [
93
+ "bg-[var(--button-ghost-bg,transparent)]",
94
+ "text-[var(--button-ghost-fg,inherit)]",
95
+ "border-[length:var(--button-ghost-border-width,0px)]",
96
+ "border-[color:var(--button-ghost-border,transparent)]",
97
+ "[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]",
98
+ "hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]",
99
+ "hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]",
100
+ "hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]",
101
+ "hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]",
102
+ "dark:hover:bg-accent/50"
103
+ ].join(" "),
104
+ // Link variant - full customization
105
+ link: [
106
+ "bg-[var(--button-link-bg,transparent)]",
107
+ "text-[var(--button-link-fg,hsl(var(--primary)))]",
108
+ "border-[length:var(--button-link-border-width,0px)]",
109
+ "border-[color:var(--button-link-border,transparent)]",
110
+ "[box-shadow:var(--button-link-shadow,none)]",
111
+ "hover:bg-[var(--button-link-hover-bg,transparent)]",
112
+ "hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]",
113
+ "hover:[box-shadow:var(--button-link-shadow-hover,none)]",
114
+ "underline-offset-4 hover:underline"
115
+ ].join(" ")
32
116
  },
33
- defaultVariants: {
34
- variant: "default",
35
- size: "default"
117
+ size: {
118
+ default: [
119
+ "h-[var(--button-height-md,2.25rem)]",
120
+ "px-[var(--button-padding-x-md,1rem)]",
121
+ "py-[var(--button-padding-y-md,0.5rem)]",
122
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
123
+ ].join(" "),
124
+ sm: [
125
+ "h-[var(--button-height-sm,2rem)]",
126
+ "px-[var(--button-padding-x-sm,0.75rem)]",
127
+ "py-[var(--button-padding-y-sm,0.25rem)]",
128
+ "gap-1.5",
129
+ "has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]"
130
+ ].join(" "),
131
+ md: [
132
+ "h-[var(--button-height-md,2.25rem)]",
133
+ "px-[var(--button-padding-x-md,1rem)]",
134
+ "py-[var(--button-padding-y-md,0.5rem)]",
135
+ "has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]"
136
+ ].join(" "),
137
+ lg: [
138
+ "h-[var(--button-height-lg,2.5rem)]",
139
+ "px-[var(--button-padding-x-lg,1.5rem)]",
140
+ "py-[var(--button-padding-y-lg,0.5rem)]",
141
+ "has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]"
142
+ ].join(" "),
143
+ icon: "size-[var(--button-height-md,2.25rem)]",
144
+ "icon-sm": "size-[var(--button-height-sm,2rem)]",
145
+ "icon-lg": "size-[var(--button-height-lg,2.5rem)]"
36
146
  }
147
+ },
148
+ defaultVariants: {
149
+ variant: "default",
150
+ size: "default"
37
151
  }
38
- );
152
+ });
39
153
  function Button({
40
154
  className,
41
155
  variant = "default",
package/dist/button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../lib/utils.ts","../lib/button-variants.ts","../components/ui/button.tsx"],"names":[],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACGO,IAAM,cAAA,GAAiB,GAAA;AAAA,EAC5B,icAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,oLAAA;AAAA,QACT,WAAA,EACE,+QAAA;AAAA,QACF,OAAA,EACE,kZAAA;AAAA,QACF,SAAA,EACE,gMAAA;AAAA,QACF,KAAA,EACE,0OAAA;AAAA,QACF,IAAA,EAAM;AAAA,OACR;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,0IAAA;AAAA,QACT,EAAA,EAAI,+JAAA;AAAA,QACJ,EAAA,EAAI,0IAAA;AAAA,QACJ,EAAA,EAAI,uJAAA;AAAA,QACJ,IAAA,EAAM,wCAAA;AAAA,QACN,SAAA,EAAW,qCAAA;AAAA,QACX,SAAA,EAAW;AAAA;AACb,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AChCA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV,GAAG;AACL,CAAA,EAGK;AACH,EAAA,MAAM,IAAA,GAAO,UAAU,IAAA,GAAO,QAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"button.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cva } from \"class-variance-authority\";\n\n/**\n * Button variants using class-variance-authority (cva).\n * \n * This is extracted to a separate file to avoid importing @radix-ui/react-slot\n * when only the variants are needed (e.g., in Pressable component).\n */\nexport const buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-button text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: \"bg-[var(--button-default-bg,hsl(var(--primary)))] text-[var(--button-default-fg,hsl(var(--primary-foreground)))] hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]\",\n destructive:\n \"bg-[var(--button-destructive-bg,hsl(var(--destructive)))] text-[var(--button-destructive-fg,white)] hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))] focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border-[var(--button-outline-border-width,1px)] border-[var(--button-outline-border,hsl(var(--border)))] bg-[var(--button-outline-bg,hsl(var(--background)))] text-[var(--button-outline-fg,inherit)] shadow-xs hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))] dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-[var(--button-secondary-bg,hsl(var(--secondary)))] text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))] hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]\",\n ghost:\n \"bg-[var(--button-ghost-bg,transparent)] text-[var(--button-ghost-fg,inherit)] hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))] hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))] dark:hover:bg-accent/50\",\n link: \"text-[var(--button-link-fg,hsl(var(--primary)))] underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n sm: \"h-[var(--button-height-sm,2rem)] rounded-button gap-1.5 px-[var(--button-padding-x-sm,0.75rem)] has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]\",\n md: \"h-[var(--button-height-md,2.25rem)] px-[var(--button-padding-x-md,1rem)] py-2 has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n lg: \"h-[var(--button-height-lg,2.5rem)] rounded-button px-[var(--button-padding-x-lg,1.5rem)] has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]\",\n icon: \"size-[var(--button-height-md,2.25rem)]\",\n \"icon-sm\": \"size-[var(--button-height-sm,2rem)]\",\n \"icon-lg\": \"size-[var(--button-height-lg,2.5rem)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../../lib/button-variants\"\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"]}
1
+ {"version":3,"sources":["../lib/utils.ts","../lib/button-variants.ts","../components/ui/button.tsx"],"names":[],"mappings":"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","file":"button.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { cva } from \"class-variance-authority\";\n\n/**\n * Button variants using class-variance-authority (cva).\n *\n * This is extracted to a separate file to avoid importing @radix-ui/react-slot\n * when only the variants are needed (e.g., in Pressable component).\n *\n * ## CSS Variable Reference\n *\n * ### Master Button Variables (apply to all variants)\n * - `--button-font-family` - Font family (default: inherit)\n * - `--button-font-weight` - Font weight (default: 500)\n * - `--button-letter-spacing` - Letter spacing (default: 0)\n * - `--button-line-height` - Line height (default: 1.25)\n * - `--button-text-transform` - Text transform (default: none)\n * - `--button-transition` - Transition timing (default: all 250ms cubic-bezier(0.4, 0, 0.2, 1))\n * - `--button-radius` - Border radius (default: var(--radius, 0.375rem))\n * - `--button-shadow` - Default box shadow (default: none)\n * - `--button-shadow-hover` - Hover box shadow (default: none)\n *\n * ### Size Variables\n * - `--button-height-sm/md/lg` - Button heights\n * - `--button-padding-x-sm/md/lg` - Horizontal padding\n * - `--button-padding-y-sm/md/lg` - Vertical padding\n *\n * ### Per-Variant Variables (replace {variant} with: default, destructive, outline, secondary, ghost, link)\n * - `--button-{variant}-bg` - Background color\n * - `--button-{variant}-fg` - Text/foreground color\n * - `--button-{variant}-border` - Border color\n * - `--button-{variant}-border-width` - Border width\n * - `--button-{variant}-hover-bg` - Hover background color\n * - `--button-{variant}-hover-fg` - Hover text color\n * - `--button-{variant}-hover-border` - Hover border color\n * - `--button-{variant}-shadow` - Box shadow (overrides master)\n * - `--button-{variant}-shadow-hover` - Hover box shadow (overrides master)\n */\n\n// Base styles applied to all buttons - includes master typography, transition, and layout\nconst baseStyles = [\n // Layout\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap shrink-0\",\n // Typography - using CSS variables with sensible defaults\n \"font-[var(--button-font-family,inherit)]\",\n \"font-[var(--button-font-weight,500)]\",\n \"tracking-[var(--button-letter-spacing,0)]\",\n \"leading-[var(--button-line-height,1.25)]\",\n \"[text-transform:var(--button-text-transform,none)]\",\n \"text-sm\",\n // Border radius\n \"rounded-[var(--button-radius,var(--radius,0.375rem))]\",\n // Smooth transition - using [transition:...] to set full shorthand property (not just transition-property)\n \"[transition:var(--button-transition,all_250ms_cubic-bezier(0.4,0,0.2,1))]\",\n // Box shadow (master level) - using [box-shadow:...] for complex multi-value shadows\n \"[box-shadow:var(--button-shadow,none)]\",\n \"hover:[box-shadow:var(--button-shadow-hover,var(--button-shadow,none))]\",\n // Disabled state\n \"disabled:pointer-events-none disabled:opacity-50\",\n // SVG handling\n \"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n // Focus styles\n \"outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n // Invalid state\n \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n].join(\" \");\n\nexport const buttonVariants = cva(baseStyles, {\n variants: {\n variant: {\n // Default (Primary) variant - full customization\n default: [\n \"bg-[var(--button-default-bg,hsl(var(--primary)))]\",\n \"text-[var(--button-default-fg,hsl(var(--primary-foreground)))]\",\n \"border-[length:var(--button-default-border-width,0px)]\",\n \"border-[color:var(--button-default-border,transparent)]\",\n \"[box-shadow:var(--button-default-shadow,var(--button-shadow,none))]\",\n \"hover:bg-[var(--button-default-hover-bg,hsl(var(--primary)/0.9))]\",\n \"hover:text-[var(--button-default-hover-fg,var(--button-default-fg,hsl(var(--primary-foreground))))]\",\n \"hover:border-[color:var(--button-default-hover-border,var(--button-default-border,transparent))]\",\n \"hover:[box-shadow:var(--button-default-shadow-hover,var(--button-shadow-hover,var(--button-default-shadow,var(--button-shadow,none))))]\",\n ].join(\" \"),\n\n // Destructive variant - full customization\n destructive: [\n \"bg-[var(--button-destructive-bg,hsl(var(--destructive)))]\",\n \"text-[var(--button-destructive-fg,white)]\",\n \"border-[length:var(--button-destructive-border-width,0px)]\",\n \"border-[color:var(--button-destructive-border,transparent)]\",\n \"[box-shadow:var(--button-destructive-shadow,var(--button-shadow,none))]\",\n \"hover:bg-[var(--button-destructive-hover-bg,hsl(var(--destructive)/0.9))]\",\n \"hover:text-[var(--button-destructive-hover-fg,var(--button-destructive-fg,white))]\",\n \"hover:border-[color:var(--button-destructive-hover-border,var(--button-destructive-border,transparent))]\",\n \"hover:[box-shadow:var(--button-destructive-shadow-hover,var(--button-shadow-hover,var(--button-destructive-shadow,var(--button-shadow,none))))]\",\n \"focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40\",\n \"dark:bg-destructive/60\",\n ].join(\" \"),\n\n // Outline variant - full customization with proper border handling\n outline: [\n \"bg-[var(--button-outline-bg,hsl(var(--background)))]\",\n \"text-[var(--button-outline-fg,inherit)]\",\n \"border-[length:var(--button-outline-border-width,1px)]\",\n \"border-[color:var(--button-outline-border,hsl(var(--border)))]\",\n \"[box-shadow:var(--button-outline-shadow,var(--button-shadow,0_1px_2px_0_rgb(0_0_0/0.05)))]\",\n \"hover:bg-[var(--button-outline-hover-bg,hsl(var(--accent)))]\",\n \"hover:text-[var(--button-outline-hover-fg,hsl(var(--accent-foreground)))]\",\n \"hover:border-[color:var(--button-outline-hover-border,var(--button-outline-border,hsl(var(--border))))]\",\n \"hover:[box-shadow:var(--button-outline-shadow-hover,var(--button-shadow-hover,var(--button-outline-shadow,var(--button-shadow,none))))]\",\n \"dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n ].join(\" \"),\n\n // Secondary variant - full customization\n secondary: [\n \"bg-[var(--button-secondary-bg,hsl(var(--secondary)))]\",\n \"text-[var(--button-secondary-fg,hsl(var(--secondary-foreground)))]\",\n \"border-[length:var(--button-secondary-border-width,0px)]\",\n \"border-[color:var(--button-secondary-border,transparent)]\",\n \"[box-shadow:var(--button-secondary-shadow,var(--button-shadow,none))]\",\n \"hover:bg-[var(--button-secondary-hover-bg,hsl(var(--secondary)/0.8))]\",\n \"hover:text-[var(--button-secondary-hover-fg,var(--button-secondary-fg,hsl(var(--secondary-foreground))))]\",\n \"hover:border-[color:var(--button-secondary-hover-border,var(--button-secondary-border,transparent))]\",\n \"hover:[box-shadow:var(--button-secondary-shadow-hover,var(--button-shadow-hover,var(--button-secondary-shadow,var(--button-shadow,none))))]\",\n ].join(\" \"),\n\n // Ghost variant - full customization\n ghost: [\n \"bg-[var(--button-ghost-bg,transparent)]\",\n \"text-[var(--button-ghost-fg,inherit)]\",\n \"border-[length:var(--button-ghost-border-width,0px)]\",\n \"border-[color:var(--button-ghost-border,transparent)]\",\n \"[box-shadow:var(--button-ghost-shadow,var(--button-shadow,none))]\",\n \"hover:bg-[var(--button-ghost-hover-bg,hsl(var(--accent)))]\",\n \"hover:text-[var(--button-ghost-hover-fg,hsl(var(--accent-foreground)))]\",\n \"hover:border-[color:var(--button-ghost-hover-border,var(--button-ghost-border,transparent))]\",\n \"hover:[box-shadow:var(--button-ghost-shadow-hover,var(--button-shadow-hover,var(--button-ghost-shadow,var(--button-shadow,none))))]\",\n \"dark:hover:bg-accent/50\",\n ].join(\" \"),\n\n // Link variant - full customization\n link: [\n \"bg-[var(--button-link-bg,transparent)]\",\n \"text-[var(--button-link-fg,hsl(var(--primary)))]\",\n \"border-[length:var(--button-link-border-width,0px)]\",\n \"border-[color:var(--button-link-border,transparent)]\",\n \"[box-shadow:var(--button-link-shadow,none)]\",\n \"hover:bg-[var(--button-link-hover-bg,transparent)]\",\n \"hover:text-[var(--button-link-hover-fg,var(--button-link-fg,hsl(var(--primary))))]\",\n \"hover:[box-shadow:var(--button-link-shadow-hover,none)]\",\n \"underline-offset-4 hover:underline\",\n ].join(\" \"),\n },\n size: {\n default: [\n \"h-[var(--button-height-md,2.25rem)]\",\n \"px-[var(--button-padding-x-md,1rem)]\",\n \"py-[var(--button-padding-y-md,0.5rem)]\",\n \"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n ].join(\" \"),\n sm: [\n \"h-[var(--button-height-sm,2rem)]\",\n \"px-[var(--button-padding-x-sm,0.75rem)]\",\n \"py-[var(--button-padding-y-sm,0.25rem)]\",\n \"gap-1.5\",\n \"has-[>svg]:px-[calc(var(--button-padding-x-sm,0.75rem)*0.83)]\",\n ].join(\" \"),\n md: [\n \"h-[var(--button-height-md,2.25rem)]\",\n \"px-[var(--button-padding-x-md,1rem)]\",\n \"py-[var(--button-padding-y-md,0.5rem)]\",\n \"has-[>svg]:px-[calc(var(--button-padding-x-md,1rem)*0.75)]\",\n ].join(\" \"),\n lg: [\n \"h-[var(--button-height-lg,2.5rem)]\",\n \"px-[var(--button-padding-x-lg,1.5rem)]\",\n \"py-[var(--button-padding-y-lg,0.5rem)]\",\n \"has-[>svg]:px-[calc(var(--button-padding-x-lg,1.5rem)*0.67)]\",\n ].join(\" \"),\n icon: \"size-[var(--button-height-md,2.25rem)]\",\n \"icon-sm\": \"size-[var(--button-height-sm,2rem)]\",\n \"icon-lg\": \"size-[var(--button-height-lg,2.5rem)]\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n});\n\n","import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { buttonVariants } from \"../../lib/button-variants\"\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"]}