@bccampus/ui-components 0.9.12 → 0.9.14

package/dist/components/ui/horizontal-list.js

@@ -14,7 +14,7 @@ const horizontalListVariants = cva(
     variants: {
       variant: {
         contain: "w-full",
-        overflow: "w-screen px-(--spacing-section) -ms-(--spacing-section) scroll-px-(--spacing-section)"
+        overflow: "w-screen px-section -ms-section scroll-px-section @clamp/page:px-clamp @clamp/page:-ms-clamp @clamp/page:scroll-px-clamp"
       }
     },
     defaultVariants: {

package/dist/components/ui/navigation-menu.js

@@ -1053,7 +1053,7 @@ function NavigationMenuViewport({
     {
       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
+        "w-full": mega
       }),
       children: /* @__PURE__ */ jsx(
         Viewport,
@@ -1063,8 +1063,7 @@ function NavigationMenuViewport({
             "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
+              "mt-1.5 rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]": !mega
             },
             className
           ),

package/dist/components/ui/page-section.d.ts

@@ -3,6 +3,7 @@ export type PageSectionVariantsProps = VariantProps<typeof pageSectionVariants>;
 export declare const pageSectionVariants: (props?: ({
     px?: "none" | "default" | "sm" | "lg" | "xl" | null | undefined;
     py?: "none" | "default" | "sm" | "lg" | "xl" | null | undefined;
+    noClamp?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type PageSectionProps = React.ComponentProps<"div"> & VariantProps<typeof pageSectionVariants>;
-export declare function PageSection({ className, px, py, ...props }: PageSectionProps): import("react").JSX.Element;
+export declare function PageSection({ className, px, py, noClamp, ...props }: PageSectionProps): import("react").JSX.Element;

package/dist/components/ui/page-section.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { c as cn } from "../../_chunks/utils.js";
 import { c as cva } from "../../_chunks/index2.js";
-const pageSectionVariants = cva("group @container/page-section relative w-full text-foreground", {
+const pageSectionVariants = cva("group @container/page-section relative text-foreground", {
   variants: {
     px: {
       none: "px-0",
@@ -16,15 +16,20 @@ const pageSectionVariants = cva("group @container/page-section relative w-full t
       sm: "py-(--spacing-section-sm)",
       lg: "py-(--spacing-section-lg)",
       xl: "py-(--spacing-section-xl)"
+    },
+    noClamp: {
+      true: "w-full",
+      false: "w-full @clamp/page:px-clamp"
     }
   },
   defaultVariants: {
     px: "default",
-    py: "default"
+    py: "default",
+    noClamp: false
   }
 });
-function PageSection({ className, px, py, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "page-section", className: cn(pageSectionVariants({ px, py }), className), ...props });
+function PageSection({ className, px, py, noClamp, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "page-section", className: cn(pageSectionVariants({ px, py, noClamp }), className), ...props });
 }
 export {
   PageSection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bccampus/ui-components",
-  "version": "0.9.12",
+  "version": "0.9.14",
   "description": "BCcampus React components",
   "type": "module",
   "license": "UNLICENSED",
@@ -44,30 +44,30 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
-    "nanostores": "^1.1.0",
+    "lucide-react": "^0.575.0",
+    "nanostores": "^1.1.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^9.39.3",
     "@ladle/react": "^5.1.1",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^24.10.11",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^24.10.14",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react-swc": "^4.2.3",
-    "baseline-browser-mapping": "^2.9.19",
-    "eslint": "^9.39.2",
+    "baseline-browser-mapping": "^2.10.0",
+    "eslint": "^9.39.3",
     "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.0",
-    "glob": "^13.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "glob": "^13.0.6",
     "globals": "^17.3.0",
     "typescript": "~5.9.3",
-    "typescript-eslint": "^8.54.0",
+    "typescript-eslint": "^8.56.1",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }

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

@@ -11,7 +11,8 @@ export const horizontalListVariants = cva(
     variants: {
       variant: {
         contain: "w-full",
-        overflow: "w-screen px-(--spacing-section) -ms-(--spacing-section) scroll-px-(--spacing-section)",
+        overflow:
+          "w-screen px-section -ms-section scroll-px-section @clamp/page:px-clamp @clamp/page:-ms-clamp @clamp/page:scroll-px-clamp",
       },
     },
     defaultVariants: {

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

@@ -22,7 +22,7 @@ function NavigationMenu({
       className={cn(
         "group/navigation-menu flex max-w-max flex-1 items-center justify-center",
         { relative: !mega },
-        className
+        className,
       )}
       {...props}
     >
@@ -83,7 +83,7 @@ function NavigationMenuContent({ className, ...props }: React.ComponentProps<typ
         "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
+        className,
       )}
       {...props}
     />
@@ -101,7 +101,7 @@ function NavigationMenuViewport({
     <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,
+        "w-full": mega,
       })}
     >
       <NavigationMenuPrimitive.Viewport
@@ -111,9 +111,8 @@ function NavigationMenuViewport({
           "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
+          className,
         )}
         {...props}
       />
@@ -127,7 +126,7 @@ function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof
       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
+        className,
       )}
       {...props}
     />
@@ -143,7 +142,7 @@ function NavigationMenuIndicator({
       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
+        className,
       )}
       {...props}
     >

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

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
 import { cva, type VariantProps } from "class-variance-authority";
 
 export type PageSectionVariantsProps = VariantProps<typeof pageSectionVariants>;
-export const pageSectionVariants = cva("group @container/page-section relative w-full text-foreground", {
+export const pageSectionVariants = cva("group @container/page-section relative text-foreground", {
   variants: {
     px: {
       none: "px-0",
@@ -18,15 +18,22 @@ export const pageSectionVariants = cva("group @container/page-section relative w
       lg: "py-(--spacing-section-lg)",
       xl: "py-(--spacing-section-xl)",
     },
+    noClamp: {
+      true: "w-full",
+      false: "w-full @clamp/page:px-clamp",
+    },
   },
   defaultVariants: {
     px: "default",
     py: "default",
+    noClamp: false,
   },
 });
 
 export type PageSectionProps = React.ComponentProps<"div"> & VariantProps<typeof pageSectionVariants>;
 
-export function PageSection({ className, px, py, ...props }: PageSectionProps) {
-  return <div data-slot="page-section" className={cn(pageSectionVariants({ px, py }), className)} {...props} />;
+export function PageSection({ className, px, py, noClamp, ...props }: PageSectionProps) {
+  return (
+    <div data-slot="page-section" className={cn(pageSectionVariants({ px, py, noClamp }), className)} {...props} />
+  );
 }

package/src/styles/theme.css

@@ -38,6 +38,9 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
+  --container-clamp: 96rem;
+  --spacing-clamp: calc((100dvw - var(--container-clamp)) / 2);
+
   --spacing-page-nav: --spacing(18);
 
   --spacing-section: var(--section-p);