@bccampus/ui-components 0.2.0 → 0.3.0

package/dist/overlay.js

@@ -1,4 +1,4 @@
-import { j as a } from "./jsx-runtime-BzflLqGi.js";
+import { jsx as a } from "react/jsx-runtime";
 import { c as e } from "./utils-CRiPKpXj.js";
 import { c as n } from "./index-CQhYMnjT.js";
 const i = n("absolute w-fit h-fit z-1 overflow-hidden p-0.25", {
@@ -20,7 +20,7 @@ const i = n("absolute w-fit h-fit z-1 overflow-hidden p-0.25", {
   }
 });
 function p({ className: t, position: o, ...r }) {
-  return /* @__PURE__ */ a.jsx("div", { className: e(i({ position: o }), t), ...r });
+  return /* @__PURE__ */ a("div", { className: e(i({ position: o }), t), ...r });
 }
 export {
   p as Overlay

package/dist/page-header.d.ts

@@ -1,5 +1,9 @@
 import { JSX } from 'react/jsx-runtime';
 
-export declare function PageHeader({ children, ...props }: React.ComponentProps<"div">): JSX.Element;
+export declare function PageHeader({ children, asChild, ...props }: PageHeaderProps): JSX.Element;
+
+export declare type PageHeaderProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+};
 
 export { }

package/dist/page-header.js

@@ -1,5 +1,6 @@
-import { j as s } from "./jsx-runtime-BzflLqGi.js";
-import { PageSection as o } from "./page-section.js";
+import { jsx as s, jsxs as o } from "react/jsx-runtime";
+import { S as i } from "./index-U7DVCmS_.js";
+import { PageSection as u } from "./page-section.js";
 import e, { useMemo as h } from "react";
 const l = {
   DarkBlue: "#174467",
@@ -7,7 +8,7 @@ const l = {
   Light: "#ffffff",
   Dark: "#000000"
 };
-function i({ size: c, style: a, color: t, colors: m, viewBox: n, children: p, ...d }) {
+function g({ size: c, style: a, color: t, colors: m, viewBox: n, children: p, ...d }) {
   const r = h(() => t ? { "--svg-c0": t } : m ? Object.fromEntries(m.map((N, v) => [`--svg-c${v}`, N])) : {}, [t, m]), E = h(
     () => ({
       width: c,
@@ -29,7 +30,7 @@ function i({ size: c, style: a, color: t, colors: m, viewBox: n, children: p, ..
     p
   );
 }
-function g({ variant: c, colors: a, ...t }) {
+function f({ variant: c, colors: a, ...t }) {
   const m = h(() => {
     switch (c) {
       case "white":
@@ -43,7 +44,7 @@ function g({ variant: c, colors: a, ...t }) {
     }
   }, [c, a]);
   return /* @__PURE__ */ e.createElement(
-    i,
+    g,
     {
       ...t,
       viewBox: "0 0 761.23999 180.62666",
@@ -932,12 +933,12 @@ function g({ variant: c, colors: a, ...t }) {
     )))
   );
 }
-function z({ children: c, ...a }) {
-  return /* @__PURE__ */ s.jsx(o, { py: "none", className: "sticky top-0 right-0 left-0 z-10 bg-background", ...a, children: /* @__PURE__ */ s.jsxs("div", { className: "h-page-nav flex flex-row flex-nowrap  place-items-center border-b-1 border-b-complement-1-50 py-4 gap-12", children: [
-    /* @__PURE__ */ s.jsx(g, { height: "100%", variant: "color" }),
+function k({ children: c, asChild: a, ...t }) {
+  return /* @__PURE__ */ s(u, { py: "none", className: "sticky top-0 right-0 left-0 z-50 bg-background", ...t, children: /* @__PURE__ */ o(a ? i : "div", { className: "h-page-nav overflow-hidden flex flex-row flex-nowrap border-b-1 border-b-complement-1-50 gap-2 sm:gap-12 justify-between items-center sm:justify-start", children: [
+    /* @__PURE__ */ s("div", { className: "py-4 h-full", children: /* @__PURE__ */ s(f, { height: "100%", variant: "color" }) }),
     c
   ] }) });
 }
 export {
-  z as PageHeader
+  k as PageHeader
 };

package/dist/page-section.js

@@ -1,21 +1,21 @@
-import { j as s } from "./jsx-runtime-BzflLqGi.js";
-import { c as a } from "./utils-CRiPKpXj.js";
-import { c as i } from "./index-CQhYMnjT.js";
-const p = i("group @container/page-section relative w-full", {
+import { jsx as i } from "react/jsx-runtime";
+import { c as p } from "./utils-CRiPKpXj.js";
+import { c as e } from "./index-CQhYMnjT.js";
+const c = e("group @container/page-section relative w-full", {
   variants: {
     px: {
       none: "px-0",
-      default: "px-section",
-      sm: "px-sextion-sm",
-      lg: "px-section-lg",
-      xl: "px-section-xl"
+      default: "px-(--spacing-section)",
+      sm: "px-(--spacing-section-sm)",
+      lg: "px-(--spacing-section-lg)",
+      xl: "px-(--spacing-section-xl)"
     },
     py: {
       none: "py-0",
-      default: "py-section",
-      sm: "py-sextion-sm",
-      lg: "py-section-lg",
-      xl: "py-section-xl"
+      default: "py-(--spacing-section)",
+      sm: "py-(--spacing-section-sm)",
+      lg: "py-(--spacing-section-lg)",
+      xl: "py-(--spacing-section-xl)"
     }
   },
   defaultVariants: {
@@ -23,8 +23,8 @@ const p = i("group @container/page-section relative w-full", {
     py: "default"
   }
 });
-function r({ className: t, px: e, py: n, ...o }) {
-  return /* @__PURE__ */ s.jsx("div", { "data-slot": "page-section", className: a(p({ px: e, py: n }), t), ...o });
+function r({ className: n, px: a, py: s, ...t }) {
+  return /* @__PURE__ */ i("div", { "data-slot": "page-section", className: p(c({ px: a, py: s }), n), ...t });
 }
 export {
   r as PageSection

package/dist/page.js

@@ -1,7 +1,7 @@
-import { j as t } from "./jsx-runtime-BzflLqGi.js";
-import { c as e } from "./utils-CRiPKpXj.js";
-function i({ className: a, ...r }) {
-  return /* @__PURE__ */ t.jsx("div", { "data-slot": "page", className: e("group @container/page relative w-full", a), ...r });
+import { jsx as r } from "react/jsx-runtime";
+import { c as o } from "./utils-CRiPKpXj.js";
+function i({ className: a, ...e }) {
+  return /* @__PURE__ */ r("div", { "data-slot": "page", className: o("group/page @container/page relative w-full", a), ...e });
 }
 export {
   i as Page

package/dist/search-input.js

@@ -1,23 +1,23 @@
-import { j as e } from "./jsx-runtime-BzflLqGi.js";
-import { c } from "./utils-CRiPKpXj.js";
-import { Input as o } from "./input.js";
-import { c as s } from "./createLucideIcon-CzehbSja.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { c as o } from "./utils-CRiPKpXj.js";
+import { Input as a } from "./input.js";
+import { c as n } from "./createLucideIcon-CzehbSja.js";
 /**
  * @license lucide-react v0.544.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const a = [
+const s = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], n = s("search", a);
-function u({ className: r, ...t }) {
-  return /* @__PURE__ */ e.jsxs("div", { className: c("relative", r), children: [
-    /* @__PURE__ */ e.jsx(o, { ...t }),
-    /* @__PURE__ */ e.jsx(n, { className: "absolute size-4 top-1/2 right-3 -translate-y-1/2 pointer-events-none text-primary" })
+], i = n("search", s);
+function h({ className: r, ...t }) {
+  return /* @__PURE__ */ c("div", { className: o("relative", r), children: [
+    /* @__PURE__ */ e(a, { ...t }),
+    /* @__PURE__ */ e(i, { className: "absolute size-4 top-1/2 right-3 -translate-y-1/2 pointer-events-none text-primary" })
   ] });
 }
 export {
-  u as SearchInput
+  h as SearchInput
 };

package/dist/tag.js

@@ -1,8 +1,8 @@
-import { j as n } from "./jsx-runtime-BzflLqGi.js";
-import { S as o } from "./index-DlfV3JTY.js";
-import { c as l } from "./index-CQhYMnjT.js";
-import { c as p } from "./utils-CRiPKpXj.js";
-const d = l(
+import { jsx as r } from "react/jsx-runtime";
+import { S as n } from "./index-U7DVCmS_.js";
+import { c as o } from "./index-CQhYMnjT.js";
+import { c as l } from "./utils-CRiPKpXj.js";
+const p = o(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm bg-complement-3 text-white [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0",
   {
     variants: {
@@ -23,11 +23,10 @@ const d = l(
     }
   }
 );
-function u({ className: i, size: t, variant: e, asChild: s = !1, ...a }) {
-  const r = s ? o : "div";
-  return /* @__PURE__ */ n.jsx(r, { "data-slot": "tag", className: p(d({ variant: e, size: t }), i), ...a });
+function u({ className: i, size: e, variant: t, asChild: s = !1, ...a }) {
+  return /* @__PURE__ */ r(s ? n : "div", { "data-slot": "tag", className: l(p({ variant: t, size: e }), i), ...a });
 }
 export {
   u as Tag,
-  d as tagVariants
+  p as tagVariants
 };

package/dist/ui-components.d.ts

@@ -1,6 +1,7 @@
 import { ClassProp } from 'class-variance-authority/types';
 import { JSX } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import { VariantProps } from 'class-variance-authority';
 
 export declare function Banner({ className, size, variant, dismissible, children, ...props }: BannerProps): JSX_2.Element | null;
@@ -21,7 +22,7 @@ export declare type ButtonProps = React.ComponentProps<"button"> & VariantProps<
 };
 
 export declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    variant?: "default" | "secondary" | "outline" | "ghost" | "item" | "destructive" | null | undefined;
     block?: boolean | null | undefined;
     size?: "text" | "default" | "sm" | "lg" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
@@ -110,6 +111,29 @@ declare interface MaskedImageGeneratorProps extends IconGeneratorProps {
     maskType?: "alpha" | "luminance";
 }
 
+export declare function NavigationMenu({ className, children, noViewport, mega, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+    noViewport?: boolean;
+    mega?: boolean;
+}): JSX_2.Element;
+
+export declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): JSX_2.Element;
+
+export declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): JSX_2.Element;
+
+export declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): JSX_2.Element;
+
+export declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): JSX_2.Element;
+
+export declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): JSX_2.Element;
+
+export declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): JSX_2.Element;
+
+export declare const navigationMenuTriggerStyle: string;
+
+export declare function NavigationMenuViewport({ className, mega, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport> & {
+    mega?: boolean;
+}): JSX_2.Element;
+
 export declare function Overlay({ className, position, ...props }: OverlayProps): JSX_2.Element;
 
 export declare type OverlayProps = React.ComponentProps<"div"> & VariantProps<typeof overlayVariants>;
@@ -120,7 +144,11 @@ declare const overlayVariants: (props?: ({
 
 export declare function Page({ className, ...props }: PageProps): JSX_2.Element;
 
-export declare function PageHeader({ children, ...props }: React.ComponentProps<"div">): JSX_2.Element;
+export declare function PageHeader({ children, asChild, ...props }: PageHeaderProps): JSX_2.Element;
+
+export declare type PageHeaderProps = React.ComponentProps<"div"> & {
+    asChild?: boolean;
+};
 
 export declare type PageProps = React.ComponentProps<"div">;
 

package/dist/ui-components.js

@@ -1,44 +1,54 @@
-import { IconGenerator as a } from "./icon-generator.js";
+import { IconGenerator as o } from "./icon-generator.js";
 import { MaskedImageGenerator as e } from "./masked-image-generator.js";
-import { Caption as n, captionVariants as m } from "./caption.js";
-import { Banner as C } from "./banner.js";
-import { Button as x, buttonVariants as i } from "./button.js";
-import { Card as u, CardArea as I, CardCaption as c, CardContent as l, CardImage as s, CardItemGroup as b, CardMedia as S, CardMeta as G, CardSubcaption as M, CardSubtitle as P, CardTitle as T, CardToolbar as V } from "./card.js";
-import { HorizontalList as H } from "./horizontal-list.js";
+import { Caption as i, captionVariants as p } from "./caption.js";
+import { Banner as m } from "./banner.js";
+import { Button as u, buttonVariants as C } from "./button.js";
+import { Card as x, CardArea as M, CardCaption as v, CardContent as I, CardImage as N, CardItemGroup as c, CardMedia as l, CardMeta as s, CardSubcaption as S, CardSubtitle as T, CardTitle as b, CardToolbar as V } from "./card.js";
+import { HorizontalList as L } from "./horizontal-list.js";
 import { Input as k } from "./input.js";
-import { Overlay as y } from "./overlay.js";
-import { PageHeader as A } from "./page-header.js";
-import { PageSection as O } from "./page-section.js";
-import { Page as q } from "./page.js";
-import { SearchInput as D } from "./search-input.js";
-import { Tag as F, tagVariants as J } from "./tag.js";
+import { NavigationMenu as B, NavigationMenuContent as H, NavigationMenuIndicator as h, NavigationMenuItem as w, NavigationMenuLink as z, NavigationMenuList as A, NavigationMenuTrigger as O, NavigationMenuViewport as j, navigationMenuTriggerStyle as q } from "./navigation-menu.js";
+import { Overlay as E } from "./overlay.js";
+import { PageHeader as J } from "./page-header.js";
+import { PageSection as Q } from "./page-section.js";
+import { Page as U } from "./page.js";
+import { SearchInput as X } from "./search-input.js";
+import { Tag as Z, tagVariants as _ } from "./tag.js";
 export {
-  C as Banner,
-  x as Button,
-  n as Caption,
-  u as Card,
-  I as CardArea,
-  c as CardCaption,
-  l as CardContent,
-  s as CardImage,
-  b as CardItemGroup,
-  S as CardMedia,
-  G as CardMeta,
-  M as CardSubcaption,
-  P as CardSubtitle,
-  T as CardTitle,
+  m as Banner,
+  u as Button,
+  i as Caption,
+  x as Card,
+  M as CardArea,
+  v as CardCaption,
+  I as CardContent,
+  N as CardImage,
+  c as CardItemGroup,
+  l as CardMedia,
+  s as CardMeta,
+  S as CardSubcaption,
+  T as CardSubtitle,
+  b as CardTitle,
   V as CardToolbar,
-  H as HorizontalList,
-  a as IconGenerator,
+  L as HorizontalList,
+  o as IconGenerator,
   k as Input,
   e as MaskedImageGenerator,
-  y as Overlay,
-  q as Page,
-  A as PageHeader,
-  O as PageSection,
-  D as SearchInput,
-  F as Tag,
-  i as buttonVariants,
-  m as captionVariants,
-  J as tagVariants
+  B as NavigationMenu,
+  H as NavigationMenuContent,
+  h as NavigationMenuIndicator,
+  w as NavigationMenuItem,
+  z as NavigationMenuLink,
+  A as NavigationMenuList,
+  O as NavigationMenuTrigger,
+  j as NavigationMenuViewport,
+  E as Overlay,
+  U as Page,
+  J as PageHeader,
+  Q as PageSection,
+  X as SearchInput,
+  Z as Tag,
+  C as buttonVariants,
+  p as captionVariants,
+  q as navigationMenuTriggerStyle,
+  _ as tagVariants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "packageManager": "yarn@4.10.3",
   "exports": {
@@ -40,6 +40,10 @@
       "types": "./dist/input.d.ts",
       "import": "./dist/input.js"
     },
+    "./navigation-menu": {
+      "types": "./dist/navigation-menu.d.ts",
+      "import": "./dist/navigation-menu.js"
+    },
     "./overlay": {
       "types": "./dist/overlay.d.ts",
       "import": "./dist/overlay.js"
@@ -85,6 +89,7 @@
     "@bcgov/bc-sans": "^2.1.0",
     "@fontsource-variable/inter-tight": "^5.2.7",
     "@ladle/react": "^5.0.3",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/components/ui/banner.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Button } from "./button";
 import { X } from "lucide-react";
 
-const bannerVariants = cva("flex flex-row items-center justify-between px-section text-sm", {
+const bannerVariants = cva("flex flex-row items-center justify-between px-(--spacing-section) text-sm", {
   variants: {
     variant: {
       default: "bg-complement-3 text-white",
@@ -32,7 +32,7 @@ function Banner({ className, size, variant, dismissible, children, ...props }: B
   if (dismissed) return null;
 
   return (
-    <div className={cn(bannerVariants({ variant, size }), className)} {...props}>
+    <div data-slot="banner" className={cn(bannerVariants({ variant, size }), className)} {...props}>
       <div className="flex-auto text-center">{children}</div>
       {dismissible && (
         <div>

package/src/components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 px-6 has-[>svg]:px-4 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -15,6 +15,7 @@ const buttonVariants = cva(
         outline:
           "border border-primary bg-transparent hover:border-secondary hover:bg-secondary/10 dark:border-input dark:hover:bg-input/50",
         ghost: "text-primary hover:text-secondary dark:text-foreground dark:hover:bg-complement-1-800",
+        item: "justify-between px-2 has-[>svg]:px-2 text-primary hover:bg-complement-1-50 dark:text-foreground dark:hover:bg-complement-1-800",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
       },
@@ -23,17 +24,17 @@ const buttonVariants = cva(
         true: "w-full",
       },
       size: {
-        default: "h-9 px-6 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        default: "h-9",
+        sm: "h-8 gap-1.5",
+        lg: "h-10 text-base",
         icon: "size-9",
-        text: "py-2",
+        text: "h-9 text-base",
       },
     },
     defaultVariants: {
-      variant: "default",
       size: "default",
       block: false,
+      variant: "default",
     },
   }
 );
@@ -46,7 +47,7 @@ export type ButtonProps = React.ComponentProps<"button"> &
 function Button({ className, variant, size, block, asChild = false, ...props }: ButtonProps) {
   const Comp = asChild ? Slot : "button";
 
-  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, block }), className)} {...props} />;
+  return <Comp data-slot="button" className={cn(buttonVariants({ size, block, variant }), className)} {...props} />;
 }
 
 export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -2,10 +2,10 @@ import { cn } from "@/lib/utils";
 import { Caption } from "./typography/caption";
 import { cva, type VariantProps } from "class-variance-authority";
 
-const cardVariants = cva("group @container/card w-full max-w-full bg-card text-card-foreground grid gap-card", {
+const cardVariants = cva("group @container/card w-full max-w-full bg-card text-card-foreground grid gap-(--gap-card)", {
   variants: {
     bordered: {
-      true: "p-card border border-complement-1-100  dark:border-brand-1-900 ",
+      true: "p-(--spacing-card) border border-complement-1-100  dark:border-brand-1-900 ",
       false: "",
     },
     rounded: {
@@ -40,14 +40,14 @@ function CardArea({ name, className, ...props }: CardAreaProps) {
   return (
     <div
       style={{ gridArea: name }}
-      className={cn("relative flex flex-col gap-(--card-area-gap)", className)}
+      className={cn("@container/card-area relative flex flex-col gap-(--gap-card-area)", className)}
       {...props}
     />
   );
 }
 
 function CardItemGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("flex flex-col gap-(--card-item-group-gap)", className)} {...props} />;
+  return <div className={cn("flex flex-col gap-(--gap-card-item-group)", className)} {...props} />;
 }
 
 type CardTitleProps = React.ComponentProps<"div"> & { size?: "sm" | "md" | "lg" };
@@ -100,7 +100,7 @@ function CardContent(props: React.ComponentProps<"div">) {
 }
 
 function CardToolbar({ className, ...props }: React.ComponentProps<"div">) {
-  return <div className={cn("flex flex-wrap items-center gap-(--card-item-group-gap)", className)} {...props} />;
+  return <div className={cn("flex flex-wrap items-center gap-(--gap-card-item-group)", className)} {...props} />;
 }
 
 function CardMedia({ className, ...props }: React.ComponentProps<"div">) {

package/src/components/ui/horizontal-list.tsx

@@ -5,12 +5,12 @@ import { useCallback, useRef } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 const horizontalListVariants = cva(
-  "scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-card overflow-x-auto snap-x snap-mandatory touch-pan-x scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
+  "scrollbar-hidden overscroll-x-contain flex flex-row flex-nowrap py-1 gap-(--gap-card) overflow-x-auto snap-x snap-mandatory touch-pan-x scroll-smooth *:shrink-0 *:grow-0 *:snap-center *:select-none",
   {
     variants: {
       variant: {
         contain: "w-full ",
-        overflow: "w-screen px-section -ms-section scroll-px-(--section-p)",
+        overflow: "w-screen px-(--spacing-section) -ms-(--spacing-section) scroll-px-(--spacing-section)",
       },
     },
     defaultVariants: {

package/src/components/ui/index.ts

@@ -6,6 +6,7 @@ export * from './button.tsx'
 export * from './card.tsx'
 export * from './horizontal-list.tsx'
 export * from './input.tsx'
+export * from './navigation-menu.tsx'
 export * from './overlay.tsx'
 export * from './page-header.tsx'
 export * from './page-section.tsx'