@nayhoo/ui 0.17.0 → 0.18.0

package/dist/patterns/index.mjs

@@ -1,9 +1,10 @@
 import {
   sprinkles
-} from "../chunk-Z6RQ453R.mjs";
+} from "../chunk-BBTIKGXS.mjs";
 import "../chunk-O62XWWJU.mjs";
 import "../chunk-KH7OG63I.mjs";
 import "../chunk-C4NLMHMQ.mjs";
+import "../chunk-P3KR7WP5.mjs";
 import "../chunk-DXKT5AFF.mjs";
 import "../chunk-Y6BNWBLR.mjs";
 import "../chunk-NOIOHUNH.mjs";

package/dist/patterns/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/patterns/nav.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Container } from \"@/components/container\";\nimport { sprinkles, theme } from \"@/theme\";\nimport { useScrollPosition } from \"@nayhoo/hooks\";\n\n/** Common Nav component for Nayhoo apps */\nexport const Nav = ({\n  children,\n  variant = \"fixed\",\n  fullWidth = false,\n  compact = false,\n}: {\n  children: React.ReactNode;\n  variant?: \"fixed\" | \"sticky\";\n  fullWidth?: boolean;\n  compact?: boolean;\n}) => {\n  const scrollPosition = useScrollPosition();\n\n  const isScrolled = scrollPosition > 24;\n\n  return (\n    <Box\n      asChild\n      className={sprinkles({\n        paddingY: {\n          initial: undefined,\n          xs: isScrolled || compact ? undefined : 2,\n        },\n      })}\n      style={{\n        borderBottom: \"1px solid\",\n        borderColor:\n          isScrolled || compact ? theme.semanticColors.line : \"transparent\",\n        position: variant,\n        top: 0,\n        transition: \"border-color 0.4s, padding 0.4s\",\n        width: \"100%\",\n        zIndex: theme.zIndices[1],\n        backgroundColor: `color-mix(in srgb, ${theme.semanticColors.background}, transparent 40%)`,\n        backdropFilter: \"blur(10px)\",\n      }}\n    >\n      <nav>\n        <Container\n          size={fullWidth ? \"4\" : \"3\"}\n          style={{\n            padding: theme.space[2],\n            width: \"100%\",\n          }}\n        >\n          {children}\n        </Container>\n      </nav>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,yBAAyB;AAyC1B;AAtCD,IAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AACZ,MAKM;AACJ,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,aAAa,iBAAiB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAO;AAAA,MACP,WAAW,UAAU;AAAA,QACnB,UAAU;AAAA,UACR,SAAS;AAAA,UACT,IAAI,cAAc,UAAU,SAAY;AAAA,QAC1C;AAAA,MACF,CAAC;AAAA,MACD,OAAO;AAAA,QACL,cAAc;AAAA,QACd,aACE,cAAc,UAAU,MAAM,eAAe,OAAO;AAAA,QACtD,UAAU;AAAA,QACV,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ,MAAM,SAAS,CAAC;AAAA,QACxB,iBAAiB,sBAAsB,MAAM,eAAe,UAAU;AAAA,QACtE,gBAAgB;AAAA,MAClB;AAAA,MAEA,8BAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,YAAY,MAAM;AAAA,UACxB,OAAO;AAAA,YACL,SAAS,MAAM,MAAM,CAAC;AAAA,YACtB,OAAO;AAAA,UACT;AAAA,UAEC;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/patterns/nav.tsx"],"sourcesContent":["import { Box } from \"@/components/box\";\nimport { Container } from \"@/components/container\";\nimport { sprinkles, theme } from \"@/theme\";\nimport { useScrollPosition } from \"@nayhoo/hooks\";\n\n/** Common Nav component for Nayhoo apps */\nexport const Nav = ({\n  children,\n  variant = \"fixed\",\n  fullWidth = false,\n  compact = false,\n}: {\n  children: React.ReactNode;\n  variant?: \"fixed\" | \"sticky\";\n  fullWidth?: boolean;\n  compact?: boolean;\n}) => {\n  const scrollPosition = useScrollPosition();\n\n  const isScrolled = scrollPosition > 24;\n\n  return (\n    <Box\n      asChild\n      className={sprinkles({\n        paddingY: {\n          initial: undefined,\n          xs: isScrolled || compact ? undefined : 2,\n        },\n      })}\n      style={{\n        borderBottom: \"1px solid\",\n        borderColor:\n          isScrolled || compact ? theme.semanticColors.line : \"transparent\",\n        position: variant,\n        top: 0,\n        transition: \"border-color 0.4s, padding 0.4s\",\n        width: \"100%\",\n        zIndex: theme.zIndices[1],\n        backgroundColor: `color-mix(in srgb, ${theme.semanticColors.background}, transparent 40%)`,\n        backdropFilter: \"blur(10px)\",\n      }}\n    >\n      <nav>\n        <Container\n          size={fullWidth ? \"4\" : \"3\"}\n          style={{\n            padding: theme.space[2],\n            width: \"100%\",\n          }}\n        >\n          {children}\n        </Container>\n      </nav>\n    </Box>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,yBAAyB;AAyC1B;AAtCD,IAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,UAAU;AACZ,MAKM;AACJ,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,aAAa,iBAAiB;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAO;AAAA,MACP,WAAW,UAAU;AAAA,QACnB,UAAU;AAAA,UACR,SAAS;AAAA,UACT,IAAI,cAAc,UAAU,SAAY;AAAA,QAC1C;AAAA,MACF,CAAC;AAAA,MACD,OAAO;AAAA,QACL,cAAc;AAAA,QACd,aACE,cAAc,UAAU,MAAM,eAAe,OAAO;AAAA,QACtD,UAAU;AAAA,QACV,KAAK;AAAA,QACL,YAAY;AAAA,QACZ,OAAO;AAAA,QACP,QAAQ,MAAM,SAAS,CAAC;AAAA,QACxB,iBAAiB,sBAAsB,MAAM,eAAe,UAAU;AAAA,QACtE,gBAAgB;AAAA,MAClB;AAAA,MAEA,8BAAC,SACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,YAAY,MAAM;AAAA,UACxB,OAAO;AAAA,YACL,SAAS,MAAM,MAAM,CAAC;AAAA,YACtB,OAAO;AAAA,UACT;AAAA,UAEC;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/text-area.css-cTlj2yii.d.mts

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

package/dist/text-area.css-cTlj2yii.d.ts

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

package/dist/theme/index.css

@@ -2415,6 +2415,102 @@
   transform: translateX(18px);
 }
 
+/* vanilla-extract-css-ns:src/theme/recipes/text-area.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7VWTW/bMAy951d4GAY0wFTE6dq07qnYpcdhOw6DQVu0rVWRDEpO0gz774Pkz6xNnCxdjDgxRb1HPVK0Li1uLANCiN2/B0L4iqkoMY7DVb4I1c0s+DUJAihLBAKVYhQorfB+EgSJJo7E1oLbIgpmtWnDjNgKlUftcKI3biTTyrIMlkI+R4FQBZKwzr4EyoVqpuvKSqEGFCVw7sH8cMMUzmYf3CNbY/IkLLNQskLkhRR5YVmqpaYooDyBi9lHf019aJA+5aQrxVsXS6BMCYTKR9JYB7H5mFdAApRlqloiiTQKLCSVBHIG47wIjdhiFKyQrEhB3k9+Ty7HZY0KvULy4r4MbQV0wZjBJSgr0s/OaNgg3kc3N47DO5XgLZ9n2fRY1ggy29LuSdaRQAlmmvANkLgwkEjkB7VIaw2MBIv1fd6tP3z+Oe2qrwCu1y6NBm0w81dYbl5BeWh+Fj3Oti6VEeLbAXFZT6jIuBlKWwZS6jVyX71aKIvEcIXKmraqjxMl02llvCLdpnDLMFoKHryf+c+xWITAmVby+UyFj2L7zsECE2oFUvAffXns5qXcdN8+O3/VOxJpqu93fa3j/LRISgkpFlpypDqag1sMN/ZLP2Gww/gIq+sBcdiRh83C/V4g4KIyLaV7EizssfPCF1GBrn91gYktGnY98EqnXU9qGo53dIZv3rmHvJsOmieTmPWwJaTIBond8aSdCF51daXIjgn1FLGitpVDZXUmpIyiTJCxzLF5JY9e9ijtvKOdj+VoPliSGFP/qnNO9gnlTI/eYtjNoLZWe/M/8Mr5SFL7AOZjSd11PUWyszK1K9Eo7VVHe/WmmfrUOaeHS3oxQMW9OXrptT9HPfXVWI52XU8R66wc7YpziNY35thS1bfcT/+l3QfvxLLUZMGd0w5FVL+GY44ZVNJ2UV3Xbb95Rzej/4Y0eC23eG7mUWDO2iHdnIjRnELj5jDQ4SzOUbxBatsQjiS8jSEvtOlXcvsiguaY8wcYbtOsWwwAAA== */
+.text-area_textAreaRecipe__1vg71n60 {
+  appearance: none;
+  border-width: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  width: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  background-color: transparent;
+  color: inherit;
+  font-variant-numeric: tabular-nums;
+  resize: vertical;
+}
+.text-area_textAreaRecipe__1vg71n60:hover {
+  background-color: var(--semanticColors-transparentHover__19nbe8d2ff);
+}
+.text-area_textAreaRecipe__1vg71n60::after {
+  box-sizing: border-box;
+}
+.text-area_textAreaRecipe__1vg71n60::before {
+  box-sizing: border-box;
+}
+.text-area_textAreaRecipe__1vg71n60:disabled {
+  background-color: var(--colors-slate-slate2__19nbe8d1yj);
+  box-shadow: inset 0 0 0 1px var(--colors-slateA-slateA7__19nbe8d1z0);
+  color: var(--colors-slate-slate8__19nbe8d1yp);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.text-area_textAreaRecipe__1vg71n60:focus {
+  outline: 1px solid #000000;
+}
+.text-area_textAreaRecipe__1vg71n60:read-only {
+  background-color: var(--colors-slate-slate2__19nbe8d1yj);
+}
+.text-area_textAreaRecipe__1vg71n60[data-invalid] {
+  box-shadow: inset 0px 0px 0px 1px var(--semanticColors-error-error9__19nbe8d2e2);
+}
+.text-area_textAreaRecipe__1vg71n60[data-placeholder] {
+  color: var(--semanticColors-textPlaceholder__19nbe8d2fd);
+}
+.text-area_textAreaRecipe_size_1__1vg71n61 {
+  border-radius: var(--radii-1__19nbe8d2gh);
+  height: var(--sizes-5__19nbe8d2gc);
+  font-size: var(--fontSizes-1__19nbe8d9);
+  padding-left: var(--space-2__19nbe8d1);
+  padding-right: var(--space-2__19nbe8d1);
+  line-height: var(--sizes-5__19nbe8d2gc);
+}
+.text-area_textAreaRecipe_size_1__1vg71n61:-webkit-autofill::first-line {
+  font-size: var(--fontSizes-1__19nbe8d9);
+}
+.text-area_textAreaRecipe_size_2__1vg71n62 {
+  border-radius: var(--radii-2__19nbe8d2gi);
+  font-size: var(--fontSizes-3__19nbe8db);
+  line-height: var(--lineHeights-6__19nbe8d2fv);
+  height: var(--sizes-6__19nbe8d2gd);
+  padding-left: var(--space-3__19nbe8d2);
+  padding-right: var(--space-3__19nbe8d2);
+}
+.text-area_textAreaRecipe_size_2__1vg71n62:-webkit-autofill::first-line {
+  font-size: var(--fontSizes-3__19nbe8db);
+}
+.text-area_textAreaRecipe_size_3__1vg71n63 {
+  border-radius: var(--radii-2__19nbe8d2gi);
+  font-size: var(--fontSizes-4__19nbe8dc);
+  line-height: var(--sizes-7__19nbe8d2ge);
+  height: var(--sizes-7__19nbe8d2ge);
+  padding-left: var(--space-4__19nbe8d3);
+  padding-right: var(--space-4__19nbe8d3);
+}
+.text-area_textAreaRecipe_size_3__1vg71n63:-webkit-autofill::first-line {
+  font-size: var(--fontSizes-4__19nbe8dc);
+}
+.text-area_textAreaRecipe_error_true__1vg71n64 {
+  box-shadow: inset 0px 0px 0px 1px var(--semanticColors-error-error9__19nbe8d2e2) !important;
+}
+.text-area_textAreaRecipe_cursor_default__1vg71n65 {
+  cursor: default;
+}
+.text-area_textAreaRecipe_cursor_default__1vg71n65:focus {
+  cursor: text;
+}
+.text-area_textAreaRecipe_cursor_text__1vg71n66 {
+  cursor: text;
+}
+.text-area_textAreaRecipe_variant_outline__1vg71n67 {
+  box-shadow: inset 0px 0px 0px 1px var(--semanticColors-line__19nbe8d2fe);
+}
+.text-area_textAreaRecipe_variant_ghost__1vg71n68 {
+  box-shadow: none;
+}
+
 /* vanilla-extract-css-ns:src/theme/recipes/text-field.css.ts.vanilla.css?source=#H4sIAAAAAAAAA7VW247TMBB971cEIaSthFdpy96yTwgJ7SOCR4SiSTxJzLp2ZDttt4h/R3biXNhtk9KlUdN0PD5nfGY88aXBnSEZQ05j+/jZPn3FlJUYxyws6BbC4NcsCKAsERSIFKNASIH3syBIpKKoyJZRU0RBWJt2RLM9E3nkhxO5syOZFIZksGb8KQqYKFAxY+1rUDkTzXRZGc5Ej6IESh2YG26YFmH4zv4lW0wemSEGSlKwvOAsLwxJJZcqClSewEX43l1zFxqkj7mSlaDexSgQugSFwkXSWHuxuZg3oBgIQ0S1RsXSKDCQVByUNej72e/Z5QQNo0JuUDkln8exAXVBiMY1CMPST9aoSS+4Bzs3jhd3IsFbusyy+WTaCDLjeQ+kZipSgplU+BpQlGlIONKjcqS1DJqDwfq+bCVYPP2ct9VWAJVbmzaNJgjdtSh3L6B8bH5uOpx9XRojxLc94rKeUCltZwhpCHAut0hdtUomDCqCGxRG+yqeqEom00o7SdpdYNehJWc0eBu6z2QwhUCJFPzpTI2n0X2nYIAwsQHO6I+uRIapKXftt0vQX1WPSklV3++6isfliaGUHFIsJKeo6nCO7jTcmS/dhN5Go6O0mu0xXnj2RbN0tyMUUFZpz2n/MbLowPPCVVKBtmm1kbE9anLV80rnbSOyg97RGr455w7ybt7rmIRj1sGWkCLp5XbgqQYRvOhqy5FMCfUktSLfwKEyMmOcR1HGlDbE0jkpJ697Au/S8y7HsrTsLYqN6b9qnZNDUlnTg7Noct0rr83BCuh55XQkrV0Ay7G0Dl1P0uysXA01msC78ryrV83Vh9Y5PV7WNz1UPJil516Hs9RRr8ayNHQ9Sa2zsjRU5ziv69CxUVXbeT/8l7YfvGHrUioD9oh2PKT6nRxTzKDixod1Vbf/5n3dDP4jVO8V7QHtzIlo1uyhrk8GaU6hcXM28EA356heA7XtCEez7oPIC6nbtdw+C6E59vwBDpIHZFwMAAA= */
 .text-field_textFieldRecipe__i0hdwa0 {
   appearance: none;