@nayhoo/ui 0.7.0 → 0.8.0

package/dist/providers/index.mjs

@@ -1,8 +1,11 @@
 import {
   darkTheme,
-  lightTheme,
+  lightTheme
+} from "../chunk-5WQXUS72.mjs";
+import {
   theme
-} from "../chunk-2IKFUUSU.mjs";
+} from "../chunk-OETJQIMJ.mjs";
+import "../chunk-LZOMFHX3.mjs";
 
 // src/providers/theme-provider.tsx
 import { createContext } from "react";

package/dist/providers/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["import { theme } from \"@/theme-contracts/theme-contract.css\";\nimport { darkTheme } from \"@/themes/dark-theme.css\";\nimport { lightTheme } from \"@/themes/light-theme.css\";\nimport { ThemeMode } from \"@/types/theme-mode\";\nimport React, { createContext } from \"react\";\n\nconst defaultThemeMode: ThemeMode = \"light\";\n\nexport const ThemeContext = createContext<ThemeMode>(defaultThemeMode);\n\ntype ThemeProviderProps = {\n  children: React.ReactNode;\n  themeMode?: ThemeMode;\n};\n\n/**\n * This component applies the theme css. It should preferably be used at the root of your component tree.\n */\nexport const ThemeProvider = ({\n  children,\n  themeMode = defaultThemeMode,\n}: ThemeProviderProps) => {\n  const isDarkMode = themeMode === \"dark\";\n\n  return (\n    <ThemeContext value={themeMode}>\n      <div\n        className={isDarkMode ? darkTheme : lightTheme}\n        style={{\n          backgroundColor: theme.semanticColors.background,\n          color: theme.semanticColors.backgroundTextContrast,\n        }}\n      >\n        {children}\n      </div>\n    </ThemeContext>\n  );\n};\n"],"mappings":";;;;;;;AAIA,SAAgB,qBAAqB;AAsB/B;AApBN,IAAM,mBAA8B;AAE7B,IAAM,eAAe,cAAyB,gBAAgB;AAU9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,YAAY;AACd,MAA0B;AACxB,QAAM,aAAa,cAAc;AAEjC,SACE,oBAAC,gBAAa,OAAO,WACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAa,YAAY;AAAA,MACpC,OAAO;AAAA,QACL,iBAAiB,MAAM,eAAe;AAAA,QACtC,OAAO,MAAM,eAAe;AAAA,MAC9B;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/providers/theme-provider.tsx"],"sourcesContent":["import { theme } from \"@/theme/theme-contracts/theme-contract.css\";\nimport { darkTheme } from \"@/theme/themes/dark-theme.css\";\nimport { lightTheme } from \"@/theme/themes/light-theme.css\";\nimport { ThemeMode } from \"@/types/theme-mode\";\nimport React, { createContext } from \"react\";\n\nconst defaultThemeMode: ThemeMode = \"light\";\n\nexport const ThemeContext = createContext<ThemeMode>(defaultThemeMode);\n\ntype ThemeProviderProps = {\n  children: React.ReactNode;\n  themeMode?: ThemeMode;\n};\n\n/**\n * This component applies the theme css. It should preferably be used at the root of your component tree.\n */\nexport const ThemeProvider = ({\n  children,\n  themeMode = defaultThemeMode,\n}: ThemeProviderProps) => {\n  const isDarkMode = themeMode === \"dark\";\n\n  return (\n    <ThemeContext value={themeMode}>\n      <div\n        className={isDarkMode ? darkTheme : lightTheme}\n        style={{\n          backgroundColor: theme.semanticColors.background,\n          color: theme.semanticColors.backgroundTextContrast,\n        }}\n      >\n        {children}\n      </div>\n    </ThemeContext>\n  );\n};\n"],"mappings":";;;;;;;;;;AAIA,SAAgB,qBAAqB;AAsB/B;AApBN,IAAM,mBAA8B;AAE7B,IAAM,eAAe,cAAyB,gBAAgB;AAU9D,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,YAAY;AACd,MAA0B;AACxB,QAAM,aAAa,cAAc;AAEjC,SACE,oBAAC,gBAAa,OAAO,WACnB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,aAAa,YAAY;AAAA,MACpC,OAAO;AAAA,QACL,iBAAiB,MAAM,eAAe;AAAA,QACtC,OAAO,MAAM,eAAe;AAAA,MAC9B;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}

package/dist/separator.css-Hl8ZhcXR.d.mts

@@ -0,0 +1,7 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const separatorRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
+type SeparatorVariants = NonNullable<RecipeVariants<typeof separatorRecipe>>;
+
+export { type SeparatorVariants as S, separatorRecipe as s };

package/dist/separator.css-Hl8ZhcXR.d.ts

@@ -0,0 +1,7 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const separatorRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
+type SeparatorVariants = NonNullable<RecipeVariants<typeof separatorRecipe>>;
+
+export { type SeparatorVariants as S, separatorRecipe as s };

package/dist/skeleton.css-JJ3Of78e.d.mts

@@ -0,0 +1,54 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const skeletonRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    variant: {
+        avatar1: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar2: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar3: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar4: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar5: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar6: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text: {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        title: {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        heading: {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        button: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type SkeletonVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;
+
+export { type SkeletonVariants as S, skeletonRecipe as s };

package/dist/skeleton.css-JJ3Of78e.d.ts

@@ -0,0 +1,54 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const skeletonRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    variant: {
+        avatar1: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar2: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar3: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar4: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar5: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        avatar6: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        text: {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        title: {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        heading: {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        button: {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type SkeletonVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;
+
+export { type SkeletonVariants as S, skeletonRecipe as s };

package/dist/spinner.css-DDZLGtPI.d.mts

@@ -0,0 +1,46 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const spinnerRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "2": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "3": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "4": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "5": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "6": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "7": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "8": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "9": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type SpinnerVariants = RecipeVariants<typeof spinnerRecipe>;
+
+export { type SpinnerVariants as S, spinnerRecipe as s };

package/dist/spinner.css-DDZLGtPI.d.ts

@@ -0,0 +1,46 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const spinnerRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "2": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "3": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "4": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "5": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "6": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "7": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "8": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "9": {
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type SpinnerVariants = RecipeVariants<typeof spinnerRecipe>;
+
+export { type SpinnerVariants as S, spinnerRecipe as s };

package/dist/status.css-D2Xhx8gm.d.mts

@@ -0,0 +1,35 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const statusRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            width: number;
+            height: number;
+        };
+        "2": {
+            width: number;
+            height: number;
+        };
+    };
+    variant: {
+        gray: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        blue: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        green: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        yellow: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        red: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type StatusVariants = NonNullable<RecipeVariants<typeof statusRecipe>>;
+
+export { type StatusVariants as S, statusRecipe as s };

package/dist/status.css-D2Xhx8gm.d.ts

@@ -0,0 +1,35 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const statusRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            width: number;
+            height: number;
+        };
+        "2": {
+            width: number;
+            height: number;
+        };
+    };
+    variant: {
+        gray: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        blue: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        green: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        yellow: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        red: {
+            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type StatusVariants = NonNullable<RecipeVariants<typeof statusRecipe>>;
+
+export { type StatusVariants as S, statusRecipe as s };

package/dist/switch.css-Ku46q4IP.d.mts

@@ -0,0 +1,41 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const switchRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "2": {
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type SwitchVariants = NonNullable<RecipeVariants<typeof switchRecipe>>;
+declare const switchThumbRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                '&[data-state="checked"]': {
+                    transform: "translateX(10px)";
+                };
+            };
+        };
+        "2": {
+            width: "20px";
+            height: "20px";
+            selectors: {
+                '&[data-state="checked"]': {
+                    transform: "translateX(18px)";
+                };
+            };
+        };
+    };
+}>;
+type SwitchThumbVariants = NonNullable<RecipeVariants<typeof switchThumbRecipe>>;
+
+export { type SwitchThumbVariants as S, type SwitchVariants as a, switchThumbRecipe as b, switchRecipe as s };

package/dist/switch.css-Ku46q4IP.d.ts

@@ -0,0 +1,41 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const switchRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "2": {
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type SwitchVariants = NonNullable<RecipeVariants<typeof switchRecipe>>;
+declare const switchThumbRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                '&[data-state="checked"]': {
+                    transform: "translateX(10px)";
+                };
+            };
+        };
+        "2": {
+            width: "20px";
+            height: "20px";
+            selectors: {
+                '&[data-state="checked"]': {
+                    transform: "translateX(18px)";
+                };
+            };
+        };
+    };
+}>;
+type SwitchThumbVariants = NonNullable<RecipeVariants<typeof switchThumbRecipe>>;
+
+export { type SwitchThumbVariants as S, type SwitchVariants as a, switchThumbRecipe as b, switchRecipe as s };

package/dist/text-field.css-Da2cQDwY.d.mts

@@ -0,0 +1,75 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const textFieldRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        "2": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        "3": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    };
+    error: {
+        true: {
+            boxShadow: `inset 0px 0px 0px 1px var(--${string}) !important` | `inset 0px 0px 0px 1px var(--${string}, ${string}) !important` | `inset 0px 0px 0px 1px var(--${string}, ${number}) !important`;
+        };
+    };
+    cursor: {
+        default: {
+            cursor: "default";
+            selectors: {
+                "&:focus": {
+                    cursor: "text";
+                };
+            };
+        };
+        text: {
+            cursor: "text";
+        };
+    };
+    variant: {
+        outline: {
+            boxShadow: `inset 0px 0px 0px 1px var(--${string})` | `inset 0px 0px 0px 1px var(--${string}, ${string})` | `inset 0px 0px 0px 1px var(--${string}, ${number})`;
+        };
+        ghost: {
+            boxShadow: "none";
+        };
+    };
+}>;
+type TextFieldVariants = NonNullable<RecipeVariants<typeof textFieldRecipe>>;
+
+export { type TextFieldVariants as T, textFieldRecipe as t };

package/dist/text-field.css-Da2cQDwY.d.ts

@@ -0,0 +1,75 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const textFieldRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    size: {
+        "1": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        "2": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+        "3": {
+            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            selectors: {
+                "&:-webkit-autofill::first-line": {
+                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                };
+            };
+        };
+    };
+    error: {
+        true: {
+            boxShadow: `inset 0px 0px 0px 1px var(--${string}) !important` | `inset 0px 0px 0px 1px var(--${string}, ${string}) !important` | `inset 0px 0px 0px 1px var(--${string}, ${number}) !important`;
+        };
+    };
+    cursor: {
+        default: {
+            cursor: "default";
+            selectors: {
+                "&:focus": {
+                    cursor: "text";
+                };
+            };
+        };
+        text: {
+            cursor: "text";
+        };
+    };
+    variant: {
+        outline: {
+            boxShadow: `inset 0px 0px 0px 1px var(--${string})` | `inset 0px 0px 0px 1px var(--${string}, ${string})` | `inset 0px 0px 0px 1px var(--${string}, ${number})`;
+        };
+        ghost: {
+            boxShadow: "none";
+        };
+    };
+}>;
+type TextFieldVariants = NonNullable<RecipeVariants<typeof textFieldRecipe>>;
+
+export { type TextFieldVariants as T, textFieldRecipe as t };

package/dist/text.css-onESqiq6.d.mts

@@ -0,0 +1,62 @@
+import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
+import { RecipeVariants } from '@vanilla-extract/recipes';
+
+declare const textRecipe: _vanilla_extract_recipes.RuntimeFn<{
+    color: {
+        primary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        secondary: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        error: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        subtle: {
+            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+    size: {
+        "1": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "2": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "3": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "4": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "5": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "6": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "7": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "8": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        "9": {
+            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+    weight: {
+        regular: {
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        medium: {
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+        bold: {
+            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        };
+    };
+}>;
+type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;
+
+export { type TextVariants as T, textRecipe as t };