@bccampus/ui-components 0.2.0 → 0.3.0

package/src/components/ui/navigation-menu.tsx

@@ -0,0 +1,165 @@
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "./button";
+
+function NavigationMenu({
+  className,
+  children,
+  noViewport = false,
+  mega = false,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  noViewport?: boolean;
+  mega?: boolean;
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-mega={mega}
+      data-viewport={!noViewport || mega}
+      className={cn(
+        "group/navigation-menu flex max-w-max flex-1 items-center justify-center",
+        { relative: !mega },
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {(!noViewport || mega) && <NavigationMenuViewport mega={mega} />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item data-slot="navigation-menu-item" className={cn("relative", className)} {...props} />
+  );
+}
+
+const navigationMenuTriggerStyle = buttonVariants({
+  variant: "ghost",
+  className:
+    "data-[state=open]:hover:text-secondary data-[state=open]:focus:text-secondary data-[state=open]:text-secondary",
+});
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle, "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "max-md:h-[calc(100vh-var(--spacing-page-nav))] top-0 left-0 min-w-xs w-auto absolute group-data-[mega=true]/navigation-menu:w-full",
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52",
+        "group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  mega = false,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport> & {
+  mega?: boolean;
+}) {
+  return (
+    <div
+      className={cn("absolute top-full left-0 isolate z-50 flex justify-center bg-popover", {
+        "min-w-xs": !mega,
+        "w-full  px-(--spacing-section)": mega,
+      })}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center duration-150 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+          "bg-popover text-popover-foreground relative overflow-hidden w-full h-[var(--radix-navigation-menu-viewport-height)] overscroll-contain",
+          {
+            "mt-1.5 rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]": !mega,
+            "border-b-1 border-complement-1-50": mega,
+          },
+          className
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "[&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+};

package/src/components/ui/page-header.tsx

@@ -1,14 +1,22 @@
+import { Slot } from "@radix-ui/react-slot";
 import { PageSection } from "./page-section";
 import { LogoBCcampusWithTagline } from "@bccampus/media-kit";
 
-function PageHeader({ children, ...props }: React.ComponentProps<"div">) {
+export type PageHeaderProps = React.ComponentProps<"div"> & {
+  asChild?: boolean;
+};
+
+function PageHeader({ children, asChild, ...props }: PageHeaderProps) {
+  const Comp = asChild ? Slot : "div";
   return (
-    <PageSection py="none" className="sticky top-0 right-0 left-0 z-10 bg-background" {...props}>
-      <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">
-        <LogoBCcampusWithTagline height="100%" variant="color" />
+    <PageSection py="none" className="sticky top-0 right-0 left-0 z-50 bg-background" {...props}>
+      <Comp 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">
+        <div className="py-4 h-full">
+          <LogoBCcampusWithTagline height="100%" variant="color" />
+        </div>
 
         {children}
-      </div>
+      </Comp>
     </PageSection>
   );
 }

package/src/components/ui/page-section.tsx

@@ -5,17 +5,17 @@ const pageSectionVariants = cva("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: {

package/src/components/ui/page.tsx

@@ -3,7 +3,9 @@ import { cn } from "@/lib/utils";
 export type PageProps = React.ComponentProps<"div">;
 
 function Page({ className, ...props }: PageProps) {
-  return <div data-slot="page" className={cn("group @container/page relative w-full", className)} {...props} />;
+  return (
+    <div data-slot="page" className={cn("group/page @container/page relative w-full", className)} {...props} />
+  );
 }
 
 export { Page };

package/src/styles/theme.css

@@ -69,7 +69,7 @@
   --secondary: oklch(0.5393 0.0909 200);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
+  --muted-foreground: oklch(0.45 0.0236 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.3741 0.0774 245.65);
   --destructive: oklch(0.577 0.245 27.325);
@@ -91,11 +91,11 @@
   --sidebar-ring: oklch(0.5393 0.0909 199.73);
 
   /* Responsive Layout Spacing */
-  --section-p: --spacing(6);
-  --card-p: --spacing(6);
+  --section-p: --spacing(4);
+  --card-p: --spacing(4);
   --page-gap: --spacing(0);
-  --card-gap: --spacing(6);
-  --card-area-gap: --spacing(6);
+  --card-gap: --spacing(4);
+  --card-area-gap: --spacing(4);
   --card-item-group-gap: --spacing(2);
 
   @media (width >= 40rem) {
@@ -169,8 +169,8 @@
 }
 
 @utility areas-* {
-  grid-template-areas: --value(*, [*]);
-  grid-template-columns: --modifier(*, [*]);
+  grid-template-areas: --value(*, [ *]);
+  grid-template-columns: --modifier(*, [ *]);
 }
 
 @utility stick-to-page {