@nayhoo/ui 0.21.0 → 0.23.0

package/dist/patterns/index.mjs

@@ -2,39 +2,36 @@ import {
   Container
 } from "../chunk-OUMPB4BX.mjs";
 import {
-  sprinkles
-} from "../chunk-SV63RX5X.mjs";
-import "../chunk-GWDU7T23.mjs";
-import "../chunk-O62XWWJU.mjs";
-import "../chunk-P3OUEGR4.mjs";
-import "../chunk-E6E5BANX.mjs";
+  navRecipe
+} from "../chunk-YXNAFARR.mjs";
+import "../chunk-IVA2SE6G.mjs";
 import "../chunk-ZE66ZTIP.mjs";
 import "../chunk-ZBDJRVZE.mjs";
 import "../chunk-W5J5CULC.mjs";
+import "../chunk-ENQ7ORHL.mjs";
+import "../chunk-7RIU5XD3.mjs";
 import "../chunk-DOHVBMXO.mjs";
-import "../chunk-NOIOHUNH.mjs";
 import "../chunk-3QRC6OXA.mjs";
+import "../chunk-P3OUEGR4.mjs";
+import "../chunk-E6E5BANX.mjs";
 import "../chunk-6HL72YC5.mjs";
-import "../chunk-5WJ4KGIE.mjs";
+import "../chunk-BD5MZVXZ.mjs";
 import "../chunk-WUVNL3DI.mjs";
 import "../chunk-ZE5SRIKT.mjs";
 import "../chunk-6BSCPITT.mjs";
 import "../chunk-F6TTRF4S.mjs";
-import "../chunk-7RIU5XD3.mjs";
-import "../chunk-ZDBDV2HW.mjs";
+import "../chunk-KWTNICKO.mjs";
+import "../chunk-A5XHUJ2A.mjs";
 import "../chunk-TCGR6PEH.mjs";
 import "../chunk-TYCD7GHO.mjs";
 import "../chunk-IN7LRE7C.mjs";
 import {
   theme
-} from "../chunk-N535ABFC.mjs";
+} from "../chunk-4Q6FJKVL.mjs";
 import "../chunk-FURY4XP7.mjs";
-import {
-  Box
-} from "../chunk-LSB5JVS2.mjs";
 import "../chunk-OI24WXH6.mjs";
-import "../chunk-4JJB6DUF.mjs";
-import "../chunk-URGU4MLN.mjs";
+import "../chunk-65T2AXGV.mjs";
+import "../chunk-WRIZ5KCE.mjs";
 import "../chunk-6RSPMV3B.mjs";
 import "../chunk-IFN22XIN.mjs";
 import "../chunk-CFP6Z6LT.mjs";
@@ -46,46 +43,30 @@ import { useScrollPosition } from "@nayhoo/hooks";
 import { jsx } from "react/jsx-runtime";
 var Nav = ({
   children,
-  variant = "fixed",
-  fullWidth = false,
-  compact = false
+  compact = false,
+  fixed = false,
+  fullWidth = false
 }) => {
   const scrollPosition = useScrollPosition();
   const isScrolled = scrollPosition > 24;
-  return /* @__PURE__ */ jsx(
-    Box,
+  const nav = navRecipe({
+    compact: {
+      initial: true,
+      xs: compact || isScrolled
+    },
+    fixed
+  });
+  return /* @__PURE__ */ jsx("nav", { className: nav, children: /* @__PURE__ */ jsx(
+    Container,
     {
-      asChild: true,
-      className: sprinkles({
-        paddingY: {
-          initial: void 0,
-          xs: isScrolled || compact ? void 0 : 2
-        }
-      }),
+      size: fullWidth ? "4" : "3",
       style: {
-        borderBottom: "1px solid",
-        borderColor: isScrolled || compact ? theme.semanticColors.line : "transparent",
-        position: variant,
-        top: 0,
-        transition: "border-color 0.4s, padding 0.4s",
-        width: "100%",
-        zIndex: theme.zIndices[1],
-        backgroundColor: `color-mix(in srgb, ${theme.semanticColors.background}, transparent 40%)`,
-        backdropFilter: "blur(10px)"
+        padding: theme.space[2],
+        width: "100%"
       },
-      children: /* @__PURE__ */ jsx("nav", { children: /* @__PURE__ */ jsx(
-        Container,
-        {
-          size: fullWidth ? "4" : "3",
-          style: {
-            padding: theme.space[2],
-            width: "100%"
-          },
-          children
-        }
-      ) })
+      children
     }
-  );
+  ) });
 };
 export {
   Nav

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 { Container } from \"@/components/container\";\nimport { theme } from \"@/theme\";\nimport { navRecipe } from \"@/theme/recipes/nav.css\";\nimport { useScrollPosition } from \"@nayhoo/hooks\";\n\ntype NavProps = {\n  children: React.ReactNode;\n  /**\n   * @default\n   * false\n   */\n  compact?: boolean;\n  /**\n   * @default\n   * false\n   */\n  fixed?: boolean;\n  /**\n   * @default\n   * false\n   */\n  fullWidth?: boolean;\n};\n\nexport const Nav = ({\n  children,\n  compact = false,\n  fixed = false,\n  fullWidth = false,\n}: NavProps) => {\n  const scrollPosition = useScrollPosition();\n\n  const isScrolled = scrollPosition > 24;\n\n  const nav = navRecipe({\n    compact: {\n      initial: true,\n      xs: compact || isScrolled,\n    },\n    fixed,\n  });\n\n  return (\n    <nav className={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  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,yBAAyB;AAyC5B;AApBC,IAAM,MAAM,CAAC;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,YAAY;AACd,MAAgB;AACd,QAAM,iBAAiB,kBAAkB;AAEzC,QAAM,aAAa,iBAAiB;AAEpC,QAAM,MAAM,UAAU;AAAA,IACpB,SAAS;AAAA,MACP,SAAS;AAAA,MACT,IAAI,WAAW;AAAA,IACjB;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oBAAC,SAAI,WAAW,KACd;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,YAAY,MAAM;AAAA,MACxB,OAAO;AAAA,QACL,SAAS,MAAM,MAAM,CAAC;AAAA,QACtB,OAAO;AAAA,MACT;AAAA,MAEC;AAAA;AAAA,EACH,GACF;AAEJ;","names":[]}