@nayhoo/ui 0.14.0 → 0.15.0

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 (100) hide show
  1. package/README.md +32 -28
  2. package/dist/{avatar.css-Lh26jRUS.d.mts → avatar.css-C22jQqLD.d.mts} +18 -18
  3. package/dist/{avatar.css-Lh26jRUS.d.ts → avatar.css-C22jQqLD.d.ts} +18 -18
  4. package/dist/{badge.css-ToNvOJof.d.mts → badge.css-saeodjWf.d.mts} +14 -14
  5. package/dist/{badge.css-ToNvOJof.d.ts → badge.css-saeodjWf.d.ts} +14 -14
  6. package/dist/{button.css-BLr4KDtC.d.mts → button.css-BQdFVzyM.d.mts} +40 -40
  7. package/dist/{button.css-BLr4KDtC.d.ts → button.css-BQdFVzyM.d.ts} +40 -40
  8. package/dist/{checkbox.css-C3L6B1cb.d.mts → checkbox.css-DbB07gs9.d.mts} +6 -6
  9. package/dist/{checkbox.css-C3L6B1cb.d.ts → checkbox.css-DbB07gs9.d.ts} +6 -6
  10. package/dist/chunk-DOHVBMXO.mjs +7 -0
  11. package/dist/chunk-DOHVBMXO.mjs.map +1 -0
  12. package/dist/components/aspect-ratio.d.mts +9 -0
  13. package/dist/components/aspect-ratio.d.ts +9 -0
  14. package/dist/components/aspect-ratio.js +42 -0
  15. package/dist/components/aspect-ratio.js.map +1 -0
  16. package/dist/components/aspect-ratio.mjs +7 -0
  17. package/dist/components/aspect-ratio.mjs.map +1 -0
  18. package/dist/components/avatar.d.mts +2 -2
  19. package/dist/components/avatar.d.ts +2 -2
  20. package/dist/components/avatar.mjs +3 -3
  21. package/dist/components/badge.d.mts +1 -1
  22. package/dist/components/badge.d.ts +1 -1
  23. package/dist/components/button.d.mts +1 -1
  24. package/dist/components/button.d.ts +1 -1
  25. package/dist/components/checkbox.d.mts +1 -1
  26. package/dist/components/checkbox.d.ts +1 -1
  27. package/dist/components/flex.d.mts +1 -1
  28. package/dist/components/flex.d.ts +1 -1
  29. package/dist/components/form.d.mts +1 -1
  30. package/dist/components/form.d.ts +1 -1
  31. package/dist/components/grid.d.mts +1 -1
  32. package/dist/components/grid.d.ts +1 -1
  33. package/dist/components/heading.d.mts +1 -1
  34. package/dist/components/heading.d.ts +1 -1
  35. package/dist/components/icon-button.d.mts +1 -1
  36. package/dist/components/icon-button.d.ts +1 -1
  37. package/dist/components/image.css +6 -0
  38. package/dist/components/image.css.map +1 -0
  39. package/dist/components/image.d.mts +11 -0
  40. package/dist/components/image.d.ts +11 -0
  41. package/dist/components/image.js +47 -0
  42. package/dist/components/image.js.map +1 -0
  43. package/dist/components/image.mjs +19 -0
  44. package/dist/components/image.mjs.map +1 -0
  45. package/dist/components/label.d.mts +1 -1
  46. package/dist/components/label.d.ts +1 -1
  47. package/dist/components/link.d.mts +1 -1
  48. package/dist/components/link.d.ts +1 -1
  49. package/dist/components/paragraph.d.mts +1 -1
  50. package/dist/components/paragraph.d.ts +1 -1
  51. package/dist/components/select.d.mts +1 -1
  52. package/dist/components/select.d.ts +1 -1
  53. package/dist/components/select.mjs +6 -6
  54. package/dist/components/skeleton.d.mts +1 -1
  55. package/dist/components/skeleton.d.ts +1 -1
  56. package/dist/components/spinner.d.mts +1 -1
  57. package/dist/components/spinner.d.ts +1 -1
  58. package/dist/components/status.d.mts +1 -1
  59. package/dist/components/status.d.ts +1 -1
  60. package/dist/components/switch.d.mts +1 -1
  61. package/dist/components/switch.d.ts +1 -1
  62. package/dist/components/text-field.d.mts +1 -1
  63. package/dist/components/text-field.d.ts +1 -1
  64. package/dist/components/text.d.mts +1 -1
  65. package/dist/components/text.d.ts +1 -1
  66. package/dist/{flex.css-7asy3CjM.d.mts → flex.css-wpH47_rr.d.mts} +9 -9
  67. package/dist/{flex.css-7asy3CjM.d.ts → flex.css-wpH47_rr.d.ts} +9 -9
  68. package/dist/{form.css-QulER1wj.d.mts → form.css-s3B8O22Z.d.mts} +1 -1
  69. package/dist/{form.css-QulER1wj.d.ts → form.css-s3B8O22Z.d.ts} +1 -1
  70. package/dist/{grid.css-nAw5xuD0.d.mts → grid.css-Z-qoRIGI.d.mts} +27 -27
  71. package/dist/{grid.css-nAw5xuD0.d.ts → grid.css-Z-qoRIGI.d.ts} +27 -27
  72. package/dist/{icon-button.css-yt0wizml.d.mts → icon-button.css-4pTw87C1.d.mts} +18 -18
  73. package/dist/{icon-button.css-yt0wizml.d.ts → icon-button.css-4pTw87C1.d.ts} +18 -18
  74. package/dist/{link.css-J250gDi8.d.mts → link.css-Dt6mcRb1.d.mts} +8 -8
  75. package/dist/{link.css-J250gDi8.d.ts → link.css-Dt6mcRb1.d.ts} +8 -8
  76. package/dist/providers/index.js +3 -9
  77. package/dist/providers/index.js.map +1 -1
  78. package/dist/providers/index.mjs +3 -9
  79. package/dist/providers/index.mjs.map +1 -1
  80. package/dist/{skeleton.css-JJ3Of78e.d.mts → skeleton.css-D17yFXPB.d.mts} +24 -24
  81. package/dist/{skeleton.css-JJ3Of78e.d.ts → skeleton.css-D17yFXPB.d.ts} +24 -24
  82. package/dist/{spinner.css-DDZLGtPI.d.mts → spinner.css-ChFZg-w0.d.mts} +18 -18
  83. package/dist/{spinner.css-DDZLGtPI.d.ts → spinner.css-ChFZg-w0.d.ts} +18 -18
  84. package/dist/{status.css-D2Xhx8gm.d.mts → status.css-BB1Lk0Lb.d.mts} +5 -5
  85. package/dist/{status.css-D2Xhx8gm.d.ts → status.css-BB1Lk0Lb.d.ts} +5 -5
  86. package/dist/{switch.css-Ku46q4IP.d.mts → switch.css-CQUuPRD7.d.mts} +6 -6
  87. package/dist/{switch.css-Ku46q4IP.d.ts → switch.css-CQUuPRD7.d.ts} +6 -6
  88. package/dist/{text-field.css-Da2cQDwY.d.mts → text-field.css-Ct3ZoW7k.d.mts} +23 -23
  89. package/dist/{text-field.css-Da2cQDwY.d.ts → text-field.css-Ct3ZoW7k.d.ts} +23 -23
  90. package/dist/{text.css-onESqiq6.d.mts → text.css-DU9FwT1v.d.mts} +16 -16
  91. package/dist/{text.css-onESqiq6.d.ts → text.css-DU9FwT1v.d.ts} +16 -16
  92. package/dist/theme/index.css +6 -0
  93. package/dist/theme/index.css.map +1 -1
  94. package/dist/theme/index.d.mts +3223 -3221
  95. package/dist/theme/index.d.ts +3223 -3221
  96. package/dist/theme/index.js +5 -0
  97. package/dist/theme/index.js.map +1 -1
  98. package/dist/theme/index.mjs +26 -22
  99. package/dist/theme/index.mjs.map +1 -1
  100. package/package.json +51 -7
package/README.md CHANGED
@@ -32,6 +32,23 @@ const nextConfig: NextConfig = {
32
32
  export default withVanillaExtract(nextConfig);
33
33
  ```
34
34
 
35
+ ```tsx
36
+ // src/app/provider.tsx
37
+
38
+ "use client";
39
+
40
+ import { ThemeProvider } from "@nayhoo/ui/providers";
41
+ import React from "react";
42
+
43
+ type AppProviderProps = {
44
+ children: React.ReactNode;
45
+ };
46
+
47
+ export const AppProvider = ({ children }: AppProviderProps) => {
48
+ return <ThemeProvider>{children}</ThemeProvider>;
49
+ };
50
+ ```
51
+
35
52
  ```tsx
36
53
  // src/app/layout.tsx
37
54
 
@@ -61,20 +78,15 @@ export default function RootLayout({
61
78
  ```
62
79
 
63
80
  ```tsx
64
- // src/app/provider.tsx
81
+ // src/app/page.tsx
65
82
 
66
83
  "use client";
67
84
 
68
- import { ThemeProvider } from "@nayhoo/ui/providers";
69
- import React from "react";
70
-
71
- type AppProviderProps = {
72
- children: React.ReactNode;
73
- };
85
+ import { Button } from "@nayhoo/ui/button";
74
86
 
75
- export const AppProvider = ({ children }: AppProviderProps) => {
76
- return <ThemeProvider>{children}</ThemeProvider>;
77
- };
87
+ export default function Home() {
88
+ return <Button />;
89
+ }
78
90
  ```
79
91
 
80
92
  ### Vite
@@ -93,9 +105,6 @@ import { defineConfig } from "vite";
93
105
  // https://vite.dev/config/
94
106
  export default defineConfig({
95
107
  plugins: [react(), vanillaExtractPlugin()],
96
- optimizeDeps: {
97
- include: ["@nayhoo/ui"],
98
- },
99
108
  });
100
109
  ```
101
110
 
@@ -105,8 +114,8 @@ export default defineConfig({
105
114
  import "@nayhoo/ui/theme/index.css"; // REQUIRED
106
115
  import { StrictMode } from "react";
107
116
  import { createRoot } from "react-dom/client";
108
- import "./index.css";
109
117
  import App from "./App.tsx";
118
+ import "./index.css";
110
119
 
111
120
  createRoot(document.getElementById("root")!).render(
112
121
  <StrictMode>
@@ -116,23 +125,18 @@ createRoot(document.getElementById("root")!).render(
116
125
  ```
117
126
 
118
127
  ```tsx
119
- // src/app.tsx
128
+ // src/App.tsx
120
129
 
130
+ import { Button } from "@nayhoo/ui/button";
121
131
  import { ThemeProvider } from "@nayhoo/ui/providers";
122
132
 
123
- function App({ children }: { children: React.ReactNode }) {
124
- return <ThemeProvider>{children}</ThemeProvider>;
133
+ function App() {
134
+ return (
135
+ <ThemeProvider>
136
+ <Button onClick={() => alert("Hello!")}>Press me</Button>
137
+ </ThemeProvider>
138
+ );
125
139
  }
126
- ```
127
-
128
- ## Usage
129
-
130
- ```tsx
131
- "use client";
132
140
 
133
- import { Button } from "@nayhoo/ui/button";
134
-
135
- export const Component = () => {
136
- return <Button onClick={() => alert("Hello!")}>Press me</Button>;
137
- };
141
+ export default App;
138
142
  ```
package/dist/{avatar.css-Lh26jRUS.d.mts → avatar.css-C22jQqLD.d.mts} RENAMED
@@ -4,33 +4,33 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
4
4
  declare const avatarRecipe: _vanilla_extract_recipes.RuntimeFn<{
5
5
  size: {
6
6
  "1": {
7
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7
+ height: `var(--${string})` | `var(--${string}, ${string})`;
8
+ width: `var(--${string})` | `var(--${string}, ${string})`;
9
9
  };
10
10
  "2": {
11
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11
+ height: `var(--${string})` | `var(--${string}, ${string})`;
12
+ width: `var(--${string})` | `var(--${string}, ${string})`;
13
13
  };
14
14
  "3": {
15
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
+ height: `var(--${string})` | `var(--${string}, ${string})`;
16
+ width: `var(--${string})` | `var(--${string}, ${string})`;
17
17
  };
18
18
  "4": {
19
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
20
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
19
+ height: `var(--${string})` | `var(--${string}, ${string})`;
20
+ width: `var(--${string})` | `var(--${string}, ${string})`;
21
21
  };
22
22
  "5": {
23
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
+ height: `var(--${string})` | `var(--${string}, ${string})`;
24
+ width: `var(--${string})` | `var(--${string}, ${string})`;
25
25
  };
26
26
  "6": {
27
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
+ height: `var(--${string})` | `var(--${string}, ${string})`;
28
+ width: `var(--${string})` | `var(--${string}, ${string})`;
29
29
  };
30
30
  };
31
31
  shape: {
32
32
  square: {
33
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
34
34
  };
35
35
  circle: {
36
36
  borderRadius: "50%";
@@ -75,19 +75,19 @@ declare const avatarFallbackRecipe: _vanilla_extract_recipes.RuntimeFn<{
75
75
  lineHeight: "15px";
76
76
  };
77
77
  "2": {
78
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
78
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
79
79
  };
80
80
  "3": {
81
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
82
82
  };
83
83
  "4": {
84
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
85
85
  };
86
86
  "5": {
87
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
88
88
  };
89
89
  "6": {
90
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
90
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
91
91
  };
92
92
  };
93
93
  }>;
package/dist/{avatar.css-Lh26jRUS.d.ts → avatar.css-C22jQqLD.d.ts} RENAMED
@@ -4,33 +4,33 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
4
4
  declare const avatarRecipe: _vanilla_extract_recipes.RuntimeFn<{
5
5
  size: {
6
6
  "1": {
7
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7
+ height: `var(--${string})` | `var(--${string}, ${string})`;
8
+ width: `var(--${string})` | `var(--${string}, ${string})`;
9
9
  };
10
10
  "2": {
11
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11
+ height: `var(--${string})` | `var(--${string}, ${string})`;
12
+ width: `var(--${string})` | `var(--${string}, ${string})`;
13
13
  };
14
14
  "3": {
15
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
+ height: `var(--${string})` | `var(--${string}, ${string})`;
16
+ width: `var(--${string})` | `var(--${string}, ${string})`;
17
17
  };
18
18
  "4": {
19
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
20
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
19
+ height: `var(--${string})` | `var(--${string}, ${string})`;
20
+ width: `var(--${string})` | `var(--${string}, ${string})`;
21
21
  };
22
22
  "5": {
23
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
+ height: `var(--${string})` | `var(--${string}, ${string})`;
24
+ width: `var(--${string})` | `var(--${string}, ${string})`;
25
25
  };
26
26
  "6": {
27
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
- width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
+ height: `var(--${string})` | `var(--${string}, ${string})`;
28
+ width: `var(--${string})` | `var(--${string}, ${string})`;
29
29
  };
30
30
  };
31
31
  shape: {
32
32
  square: {
33
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
34
34
  };
35
35
  circle: {
36
36
  borderRadius: "50%";
@@ -75,19 +75,19 @@ declare const avatarFallbackRecipe: _vanilla_extract_recipes.RuntimeFn<{
75
75
  lineHeight: "15px";
76
76
  };
77
77
  "2": {
78
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
78
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
79
79
  };
80
80
  "3": {
81
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
81
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
82
82
  };
83
83
  "4": {
84
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
84
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
85
85
  };
86
86
  "5": {
87
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
87
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
88
88
  };
89
89
  "6": {
90
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
90
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
91
91
  };
92
92
  };
93
93
  }>;
package/dist/{badge.css-ToNvOJof.d.mts → badge.css-saeodjWf.d.mts} RENAMED
@@ -4,30 +4,30 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
4
4
  declare const badgeRecipe: _vanilla_extract_recipes.RuntimeFn<{
5
5
  color: {
6
6
  primary: {
7
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
8
+ color: `var(--${string})` | `var(--${string}, ${string})`;
9
9
  };
10
10
  secondary: {
11
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
12
+ color: `var(--${string})` | `var(--${string}, ${string})`;
13
13
  };
14
14
  error: {
15
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17
17
  };
18
18
  };
19
19
  size: {
20
20
  "1": {
21
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
21
+ height: `var(--${string})` | `var(--${string}, ${string})`;
22
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
23
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
24
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
25
25
  };
26
26
  "2": {
27
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
+ height: `var(--${string})` | `var(--${string}, ${string})`;
28
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
29
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
30
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
31
31
  };
32
32
  };
33
33
  }>;
package/dist/{badge.css-ToNvOJof.d.ts → badge.css-saeodjWf.d.ts} RENAMED
@@ -4,30 +4,30 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
4
4
  declare const badgeRecipe: _vanilla_extract_recipes.RuntimeFn<{
5
5
  color: {
6
6
  primary: {
7
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
8
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
7
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
8
+ color: `var(--${string})` | `var(--${string}, ${string})`;
9
9
  };
10
10
  secondary: {
11
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
12
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
11
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
12
+ color: `var(--${string})` | `var(--${string}, ${string})`;
13
13
  };
14
14
  error: {
15
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
16
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
15
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
16
+ color: `var(--${string})` | `var(--${string}, ${string})`;
17
17
  };
18
18
  };
19
19
  size: {
20
20
  "1": {
21
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
21
+ height: `var(--${string})` | `var(--${string}, ${string})`;
22
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
23
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
24
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
25
25
  };
26
26
  "2": {
27
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
+ height: `var(--${string})` | `var(--${string}, ${string})`;
28
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
29
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
30
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
31
31
  };
32
32
  };
33
33
  }>;
package/dist/{button.css-BLr4KDtC.d.mts → button.css-BQdFVzyM.d.mts} RENAMED
@@ -17,64 +17,64 @@ declare const buttonRecipe: homemade_recipes.RuntimeFn<{
17
17
  };
18
18
  size: {
19
19
  "1": {
20
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
21
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
25
- lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
20
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
21
+ height: `var(--${string})` | `var(--${string}, ${string})`;
22
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
23
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
24
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
25
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
26
26
  };
27
27
  "2": {
28
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
- lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
29
+ height: `var(--${string})` | `var(--${string}, ${string})`;
30
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
31
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
32
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
33
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
34
34
  };
35
35
  "3": {
36
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
39
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
40
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
41
- lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
37
+ height: `var(--${string})` | `var(--${string}, ${string})`;
38
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
39
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
40
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
41
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
42
42
  };
43
43
  };
44
44
  variant: {
45
45
  primary: {
46
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
47
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
46
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
47
+ color: `var(--${string})` | `var(--${string}, ${string})`;
48
48
  selectors: {
49
49
  "&:hover": {
50
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
50
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
51
51
  };
52
52
  "&:active": {
53
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
53
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
54
54
  };
55
55
  };
56
56
  };
57
57
  secondary: {
58
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
59
+ color: `var(--${string})` | `var(--${string}, ${string})`;
60
60
  selectors: {
61
61
  "&:hover": {
62
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
63
63
  };
64
64
  "&:active": {
65
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
66
66
  };
67
67
  };
68
68
  };
69
69
  outline: {
70
70
  backgroundColor: "transparent";
71
- boxShadow: `inset 0 0 0 1px var(--${string})` | `inset 0 0 0 1px var(--${string}, ${string})` | `inset 0 0 0 1px var(--${string}, ${number})`;
71
+ boxShadow: `inset 0 0 0 1px var(--${string})` | `inset 0 0 0 1px var(--${string}, ${string})`;
72
72
  selectors: {
73
73
  "&:hover": {
74
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
74
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
75
75
  };
76
76
  "&:active": {
77
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
77
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
78
78
  };
79
79
  };
80
80
  };
@@ -82,41 +82,41 @@ declare const buttonRecipe: homemade_recipes.RuntimeFn<{
82
82
  backgroundColor: "transparent";
83
83
  selectors: {
84
84
  "&:hover": {
85
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
85
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
86
86
  };
87
87
  "&:active": {
88
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
89
89
  };
90
90
  };
91
91
  };
92
92
  error: {
93
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
94
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
93
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
94
+ color: `var(--${string})` | `var(--${string}, ${string})`;
95
95
  selectors: {
96
96
  "&:hover": {
97
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
97
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
98
98
  };
99
99
  "&:active": {
100
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
100
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
101
101
  };
102
102
  };
103
103
  };
104
104
  success: {
105
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
106
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
105
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
106
+ color: `var(--${string})` | `var(--${string}, ${string})`;
107
107
  selectors: {
108
108
  "&:hover": {
109
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
110
110
  };
111
111
  "&:active": {
112
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
113
113
  };
114
114
  };
115
115
  };
116
116
  };
117
117
  round: {
118
118
  true: {
119
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
119
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
120
120
  };
121
121
  };
122
122
  }, "sm"[]>;
package/dist/{button.css-BLr4KDtC.d.ts → button.css-BQdFVzyM.d.ts} RENAMED
@@ -17,64 +17,64 @@ declare const buttonRecipe: homemade_recipes.RuntimeFn<{
17
17
  };
18
18
  size: {
19
19
  "1": {
20
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
21
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
22
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
23
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
24
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
25
- lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
20
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
21
+ height: `var(--${string})` | `var(--${string}, ${string})`;
22
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
23
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
24
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
25
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
26
26
  };
27
27
  "2": {
28
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
29
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
30
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
31
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
32
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
33
- lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
28
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
29
+ height: `var(--${string})` | `var(--${string}, ${string})`;
30
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
31
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
32
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
33
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
34
34
  };
35
35
  "3": {
36
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
37
- height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
38
- paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
39
- paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
40
- fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
41
- lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
36
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
37
+ height: `var(--${string})` | `var(--${string}, ${string})`;
38
+ paddingLeft: `var(--${string})` | `var(--${string}, ${string})`;
39
+ paddingRight: `var(--${string})` | `var(--${string}, ${string})`;
40
+ fontSize: `var(--${string})` | `var(--${string}, ${string})`;
41
+ lineHeight: `var(--${string})` | `var(--${string}, ${string})`;
42
42
  };
43
43
  };
44
44
  variant: {
45
45
  primary: {
46
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
47
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
46
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
47
+ color: `var(--${string})` | `var(--${string}, ${string})`;
48
48
  selectors: {
49
49
  "&:hover": {
50
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
50
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
51
51
  };
52
52
  "&:active": {
53
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
53
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
54
54
  };
55
55
  };
56
56
  };
57
57
  secondary: {
58
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
59
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
58
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
59
+ color: `var(--${string})` | `var(--${string}, ${string})`;
60
60
  selectors: {
61
61
  "&:hover": {
62
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
62
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
63
63
  };
64
64
  "&:active": {
65
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
65
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
66
66
  };
67
67
  };
68
68
  };
69
69
  outline: {
70
70
  backgroundColor: "transparent";
71
- boxShadow: `inset 0 0 0 1px var(--${string})` | `inset 0 0 0 1px var(--${string}, ${string})` | `inset 0 0 0 1px var(--${string}, ${number})`;
71
+ boxShadow: `inset 0 0 0 1px var(--${string})` | `inset 0 0 0 1px var(--${string}, ${string})`;
72
72
  selectors: {
73
73
  "&:hover": {
74
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
74
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
75
75
  };
76
76
  "&:active": {
77
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
77
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
78
78
  };
79
79
  };
80
80
  };
@@ -82,41 +82,41 @@ declare const buttonRecipe: homemade_recipes.RuntimeFn<{
82
82
  backgroundColor: "transparent";
83
83
  selectors: {
84
84
  "&:hover": {
85
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
85
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
86
86
  };
87
87
  "&:active": {
88
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
88
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
89
89
  };
90
90
  };
91
91
  };
92
92
  error: {
93
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
94
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
93
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
94
+ color: `var(--${string})` | `var(--${string}, ${string})`;
95
95
  selectors: {
96
96
  "&:hover": {
97
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
97
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
98
98
  };
99
99
  "&:active": {
100
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
100
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
101
101
  };
102
102
  };
103
103
  };
104
104
  success: {
105
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
106
- color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
105
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
106
+ color: `var(--${string})` | `var(--${string}, ${string})`;
107
107
  selectors: {
108
108
  "&:hover": {
109
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
109
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
110
110
  };
111
111
  "&:active": {
112
- backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
112
+ backgroundColor: `var(--${string})` | `var(--${string}, ${string})`;
113
113
  };
114
114
  };
115
115
  };
116
116
  };
117
117
  round: {
118
118
  true: {
119
- borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
119
+ borderRadius: `var(--${string})` | `var(--${string}, ${string})`;
120
120
  };
121
121
  };
122
122
  }, "sm"[]>;