@bccampus/ui-components 0.1.0 → 0.3.0

package/src/components/ui/icon-generator/masked-image-generator.tsx

@@ -1,38 +1,38 @@
-import { useId, useMemo } from "react";
-import type { MaskedImageGeneratorProps } from "./types";
-
-import { IconGenerator } from "./icon-generator";
-
-const MaskedImageFit = { cover: "slice", contain: "meet", fill: "none" };
-const MaskedImagePosition = { top: "xMidYMin", center: "xMidYMid", bottom: "xMidYMax" };
-
-function MaskedImageGenerator({
-  src,
-  imageFit = "cover",
-  imagePosition = "top",
-  maskType = "alpha",
-  ...props
-}: MaskedImageGeneratorProps) {
-  const id = useId();
-
-  const aspectRatio = useMemo(
-    () => (imageFit !== "fill" ? `${MaskedImagePosition[imagePosition]} ${MaskedImageFit[imageFit]}` : "none"),
-    [imageFit, imagePosition]
-  );
-
-  return (
-    <IconGenerator
-      {...props}
-      renderChildren={(paths) => (
-        <>
-          <mask id={`svg-mask${id}`} mask-type={maskType}>
-            {paths}
-          </mask>
-          <image href={src} width="100%" height="100%" mask={`url(#svg-mask${id})`} preserveAspectRatio={aspectRatio} />
-        </>
-      )}
-    />
-  );
-}
-
-export { MaskedImageGenerator };
+import { useId, useMemo } from "react";
+import type { MaskedImageGeneratorProps } from "./types";
+
+import { IconGenerator } from "./icon-generator";
+
+const MaskedImageFit = { cover: "slice", contain: "meet", fill: "none" };
+const MaskedImagePosition = { top: "xMidYMin", center: "xMidYMid", bottom: "xMidYMax" };
+
+function MaskedImageGenerator({
+  src,
+  imageFit = "cover",
+  imagePosition = "top",
+  maskType = "alpha",
+  ...props
+}: MaskedImageGeneratorProps) {
+  const id = useId();
+
+  const aspectRatio = useMemo(
+    () => (imageFit !== "fill" ? `${MaskedImagePosition[imagePosition]} ${MaskedImageFit[imageFit]}` : "none"),
+    [imageFit, imagePosition]
+  );
+
+  return (
+    <IconGenerator
+      {...props}
+      renderChildren={(paths) => (
+        <>
+          <mask id={`svg-mask${id}`} mask-type={maskType}>
+            {paths}
+          </mask>
+          <image href={src} width="100%" height="100%" mask={`url(#svg-mask${id})`} preserveAspectRatio={aspectRatio} />
+        </>
+      )}
+    />
+  );
+}
+
+export { MaskedImageGenerator };

package/src/components/ui/icon-generator/types.ts

@@ -1,53 +1,54 @@
-import type { JSX } from "react";
-
-export const TileShape = {
-    Blank: 0,
-    Rand: 1,
-    Mosaic: 2,
-    MosaicCircle: 3,
-    MosaicDiamond: 4,
-    Square: 6,
-    Circle: 7,
-    Diamond: 8,
-    Hexagon: 9,
-    RandBasic: 10,
-    TriangleSE: 11,
-    TriangleSW: 12,
-    TriangleNW: 13,
-    TriangleNE: 14,
-    TriangleRand: 15,
-    CaretN: 16,
-    CaretE: 17,
-    CaretS: 18,
-    CaretW: 19,
-    CaretRand: 20,
-    PieSE: 21,
-    PieSW: 22,
-    PieNW: 23,
-    PieNE: 24,
-    PieRand: 25,
-} as const;
-
-export type TileShape = (typeof TileShape)[keyof typeof TileShape];
-
-export interface TileConfig {
-    shape: TileShape;
-    scale?: number;
-    className?: string;
-}
-
-export interface IconGeneratorProps extends Omit<React.ComponentProps<"svg">, "children" | "width" | "height" | "overflow"> {
-    pattern?: (TileShape | TileConfig)[][];
-    tileSize?: number;
-    tileClassName?: string;
-    tileBgClassName?: string;
-
-    renderChildren?: (paths: (JSX.Element | null)[], width: number, height: number) => React.ReactNode;
-}
-
-export interface MaskedImageGeneratorProps extends IconGeneratorProps {
-    src: string;
-    imageFit?: "cover" | "contain" | "fill";
-    imagePosition?: "top" | "center" | "bottom";
-    maskType?: "alpha" | "luminance";
+import type { JSX } from "react";
+
+export const TileShape = {
+    Blank: 0,
+    Rand: 1,
+    Mosaic: 2,
+    MosaicCircle: 3,
+    MosaicDiamond: 4,
+    Square: 6,
+    Circle: 7,
+    Diamond: 8,
+    Hexagon: 9,
+    RandBasic: 10,
+    TriangleSE: 11,
+    TriangleSW: 12,
+    TriangleNW: 13,
+    TriangleNE: 14,
+    TriangleRand: 15,
+    CaretN: 16,
+    CaretE: 17,
+    CaretS: 18,
+    CaretW: 19,
+    CaretRand: 20,
+    PieSE: 21,
+    PieSW: 22,
+    PieNW: 23,
+    PieNE: 24,
+    PieRand: 25,
+} as const;
+
+export type TileShape = (typeof TileShape)[keyof typeof TileShape];
+
+export interface TileConfig {
+    shape: TileShape;
+    scale?: number;
+    className?: string;
+}
+
+export interface IconGeneratorProps extends Omit<React.ComponentProps<"svg">, "children" | "width" | "height" | "overflow"> {
+    pattern?: (TileShape | TileConfig)[][];
+    tileSize?: number;
+    tileClassName?: string;
+    tileBgClassName?: string;
+    fit?: "none" | "fill" | "width" | "height"
+
+    renderChildren?: (paths: (JSX.Element | null)[], width: number, height: number) => React.ReactNode;
+}
+
+export interface MaskedImageGeneratorProps extends IconGeneratorProps {
+    src: string;
+    imageFit?: "cover" | "contain" | "fill";
+    imagePosition?: "top" | "center" | "bottom";
+    maskType?: "alpha" | "luminance";
 }

package/src/components/ui/index.ts

@@ -1,7 +1,15 @@
-export * from './button.tsx'
+export * from './icon-generator/icon-generator.tsx'
+export * from './icon-generator/masked-image-generator.tsx'
 export * from './typography/caption.tsx'
+export * from './banner.tsx'
+export * from './button.tsx'
 export * from './card.tsx'
-export * from './tag.tsx'
 export * from './horizontal-list.tsx'
-export * from './icon-generator/icon-generator.tsx'
-export * from './icon-generator/masked-image-generator.tsx'
+export * from './input.tsx'
+export * from './navigation-menu.tsx'
+export * from './overlay.tsx'
+export * from './page-header.tsx'
+export * from './page-section.tsx'
+export * from './page.tsx'
+export * from './search-input.tsx'
+export * from './tag.tsx'

package/src/components/ui/input.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+export type InputProps = React.ComponentProps<"input">;
+
+function Input({ className, ...props }: InputProps) {
+  return (
+    <input
+      className={cn(
+        "w-full p-2 pr-8 text-brand-1 placeholder:text-brand-1 rounded-sm bg-complement-1-50 outline-none focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-2",
+        className
+      )}
+      name="search" 
+      {...props}
+    />
+  );
+}
+
+export { Input };

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/overlay.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const overlayVariants = cva("absolute w-fit h-fit z-1 overflow-hidden p-0.25", {
+  variants: {
+    position: {
+      t: "top-0 left-1/2 -translate-x-1/2",
+      b: "bottom-0 left-1/2 -translate-x-1/2",
+      l: "top-1/2 left-0 -translate-y-1/2",
+      r: "top-1/2 right-0 -translate-y-1/2",
+      tl: "top-0 left-0 rounded-tl-container",
+      tr: "top-0 right-0 rounded-tr-container",
+      bl: "bottom-0 left-0 rounded-bl-container",
+      br: "bottom-0 right-0 rounded-br-container",
+      c: "top-1/2 left-1/2 -translate-1/2",
+    },
+  },
+  defaultVariants: {
+    position: "br",
+  },
+});
+
+export type OverlayProps = React.ComponentProps<"div"> & VariantProps<typeof overlayVariants>;
+
+function Overlay({ className, position, ...props }: OverlayProps) {
+  return <div className={cn(overlayVariants({ position }), className)} {...props} />;
+}
+
+export { Overlay };

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

@@ -0,0 +1,24 @@
+import { Slot } from "@radix-ui/react-slot";
+import { PageSection } from "./page-section";
+import { LogoBCcampusWithTagline } from "@bccampus/media-kit";
+
+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-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}
+      </Comp>
+    </PageSection>
+  );
+}
+
+export { PageHeader };

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

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const pageSectionVariants = cva("group @container/page-section relative w-full", {
+  variants: {
+    px: {
+      none: "px-0",
+      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-(--spacing-section)",
+      sm: "py-(--spacing-section-sm)",
+      lg: "py-(--spacing-section-lg)",
+      xl: "py-(--spacing-section-xl)",
+    },
+  },
+  defaultVariants: {
+    px: "default",
+    py: "default",
+  },
+});
+
+export type PageSectionProps = React.ComponentProps<"div"> & VariantProps<typeof pageSectionVariants>;
+
+function PageSection({ className, px, py, ...props }: PageSectionProps) {
+  return <div data-slot="page-section" className={cn(pageSectionVariants({ px, py }), className)} {...props} />;
+}
+
+export { PageSection };

package/src/components/ui/page.tsx

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

package/src/components/ui/search-input.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+import { Search } from "lucide-react";
+import { Input } from "./input";
+
+export type SearchInputProps = React.ComponentProps<"input">;
+
+function SearchInput({ className, ...props }: SearchInputProps) {
+  return (
+    <div className={cn("relative", className)}>
+      <Input {...props} />
+      <Search className="absolute size-4 top-1/2 right-3 -translate-y-1/2 pointer-events-none text-primary" />
+    </div>
+  );
+}
+
+export { SearchInput };

package/src/components/ui/tag.tsx

@@ -1,39 +1,39 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const tagVariants = cva(
-  "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: {
-      variant: {
-        default: "",
-        button:
-          "hover:bg-primary transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-      },
-      size: {
-        default: "h-8 px-4 py-1.5 has-[>svg]:px-3",
-        sm: "h-6 gap-1 px-3 has-[>svg]:px-2.5",
-        lg: "scroll-mr-6 text-xl/5 font-medium h-16 px-8 has-[>svg]:px-4",
-        icon: "size-8",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-interface TagProps extends VariantProps<typeof tagVariants>, React.ComponentProps<"div"> {
-  asChild?: boolean;
-}
-
-function Tag({ className, size, variant, asChild = false, ...props }: TagProps) {
-  const Comp = asChild ? Slot : "div";
-
-  return <Comp data-slot="tag" className={cn(tagVariants({ variant, size, className }))} {...props} />;
-}
-
-export { Tag, tagVariants };
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const tagVariants = cva(
+  "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: {
+      variant: {
+        default: "",
+        button:
+          "hover:bg-primary transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+      },
+      size: {
+        default: "h-8 px-4 py-1.5 has-[>svg]:px-3",
+        sm: "h-6 gap-1 px-3 has-[>svg]:px-2.5",
+        lg: "scroll-mr-6 text-xl/5 font-medium h-16 px-8 has-[>svg]:px-4",
+        icon: "size-8",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface TagProps extends VariantProps<typeof tagVariants>, React.ComponentProps<"div"> {
+  asChild?: boolean;
+}
+
+function Tag({ className, size, variant, asChild = false, ...props }: TagProps) {
+  const Comp = asChild ? Slot : "div";
+
+  return <Comp data-slot="tag" className={cn(tagVariants({ variant, size }), className)} {...props} />;
+}
+
+export { Tag, tagVariants };

package/src/components/ui/typography/caption.tsx

@@ -1,32 +1,32 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const captionVariants = cva("tracking-tight text-balance", {
-  variants: {
-    variant: {
-      default: "scroll-mr-5 text-lg/5 font-bold text-secondary dark:text-foreground",
-      light: "scroll-mr-4 text-sm/4 font-normal text-primary",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-});
-
-function Caption({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"div"> &
-  VariantProps<typeof captionVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "div";
-
-  return <Comp data-slot="caption" className={cn(captionVariants({ variant, className }))} {...props} />;
-}
-
-export { Caption, captionVariants };
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const captionVariants = cva("tracking-tight text-balance", {
+  variants: {
+    variant: {
+      default: "scroll-mr-5 text-lg/5 font-bold text-secondary dark:text-foreground",
+      light: "scroll-mr-4 text-sm/4 font-normal text-primary",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+function Caption({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof captionVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "div";
+
+  return <Comp className={cn(captionVariants({ variant, className }))} {...props} />;
+}
+
+export { Caption, captionVariants };

package/src/styles/all.css

@@ -1,4 +1,4 @@
-@import "./colors.css";
-@import "./fonts.css";
-@import "./theme.css";
-@import "./typography.css";
+@import "./colors.css";
+@import "./fonts.css";
+@import "./theme.css";
+@import "./typography.css";