@nayhoo/ui 0.16.0 → 0.17.0

package/dist/patterns/index.mjs

@@ -0,0 +1,91 @@
+import {
+  sprinkles
+} from "../chunk-Z6RQ453R.mjs";
+import "../chunk-O62XWWJU.mjs";
+import "../chunk-KH7OG63I.mjs";
+import "../chunk-C4NLMHMQ.mjs";
+import "../chunk-DXKT5AFF.mjs";
+import "../chunk-Y6BNWBLR.mjs";
+import "../chunk-NOIOHUNH.mjs";
+import "../chunk-JGZLOTH3.mjs";
+import "../chunk-P3OUEGR4.mjs";
+import "../chunk-5WJ4KGIE.mjs";
+import "../chunk-WUVNL3DI.mjs";
+import "../chunk-S6KKPOPH.mjs";
+import "../chunk-AXOHCT5Q.mjs";
+import "../chunk-KE7EIF6L.mjs";
+import "../chunk-JZBPCPSP.mjs";
+import "../chunk-HNVVD3WS.mjs";
+import "../chunk-DOHVBMXO.mjs";
+import "../chunk-P2VEMZGS.mjs";
+import "../chunk-EXKRRQYL.mjs";
+import {
+  theme
+} from "../chunk-N535ABFC.mjs";
+import "../chunk-GHCXVMQR.mjs";
+import {
+  Box
+} from "../chunk-LSB5JVS2.mjs";
+import "../chunk-OI24WXH6.mjs";
+import "../chunk-4A7WL3BM.mjs";
+import "../chunk-47YGQSLM.mjs";
+import "../chunk-6RSPMV3B.mjs";
+import "../chunk-IFN22XIN.mjs";
+import "../chunk-5ZOT2LOO.mjs";
+import {
+  Container
+} from "../chunk-IKDQWTMS.mjs";
+import "../chunk-PUW3KNR3.mjs";
+import "../chunk-UPZYS6TE.mjs";
+import "../chunk-7EGQM3ZL.mjs";
+
+// src/patterns/nav.tsx
+import { useScrollPosition } from "@nayhoo/hooks";
+import { jsx } from "react/jsx-runtime";
+var Nav = ({
+  children,
+  variant = "fixed",
+  fullWidth = false,
+  compact = false
+}) => {
+  const scrollPosition = useScrollPosition();
+  const isScrolled = scrollPosition > 24;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      asChild: true,
+      className: sprinkles({
+        paddingY: {
+          initial: void 0,
+          xs: isScrolled || compact ? void 0 : 2
+        }
+      }),
+      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)"
+      },
+      children: /* @__PURE__ */ jsx("nav", { children: /* @__PURE__ */ jsx(
+        Container,
+        {
+          size: fullWidth ? "4" : "3",
+          style: {
+            padding: theme.space[2],
+            width: "100%"
+          },
+          children
+        }
+      ) })
+    }
+  );
+};
+export {
+  Nav
+};
+//# sourceMappingURL=index.mjs.map

package/dist/patterns/index.mjs.map

@@ -0,0 +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":[]}