@bccampus/ui-components 0.1.0 → 0.2.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,14 @@
-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 './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/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,16 @@
+import { PageSection } from "./page-section";
+import { LogoBCcampusWithTagline } from "@bccampus/media-kit";
+
+function PageHeader({ children, ...props }: React.ComponentProps<"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" />
+
+        {children}
+      </div>
+    </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-section",
+      sm: "px-sextion-sm",
+      lg: "px-section-lg",
+      xl: "px-section-xl",
+    },
+    py: {
+      none: "py-0",
+      default: "py-section",
+      sm: "py-sextion-sm",
+      lg: "py-section-lg",
+      xl: "py-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,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} />;
+}
+
+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";

package/src/styles/colors.css

@@ -1,4 +1,3 @@
-
 @theme inline {
   --color-brand-1-50: #e3f2ff;
   --color-brand-1-100: #c6e4fe;
@@ -26,10 +25,10 @@
   --color-brand-1-900: oklch(0.29 0.09 245);
   --color-brand-1-950: oklch(0.25 0.08 245);
 
-  --color-complement-1-50: #bdfcff;
-  --color-complement-1-100: #80cacd;
-  --color-complement-1-200: #03e2eb;
-  --color-complement-1-300: #0bbcc4;
+  --color-complement-1-50: #e6f4f5;
+  --color-complement-1-100: #cceaeb;
+  --color-complement-1-200: #80cacd;
+  --color-complement-1-300: #7edde2;
   --color-complement-1: #00949a;
   --color-complement-1-400: #00949a;
   --color-complement-1-500: #047e83;
@@ -39,10 +38,10 @@
   --color-complement-1-900: #003134;
   --color-complement-1-950: #012628;
 
-  --color-complement-1-50: oklch(0.95 0.07 200);
-  --color-complement-1-100: oklch(0.7918 0.0738 199.06);
-  --color-complement-1-200: oklch(0.81 0.18 200);
-  --color-complement-1-300: oklch(0.71 0.16 200);
+  --color-complement-1-50: oklch(0.957 0.0149 200);
+  --color-complement-1-100: oklch(0.9156 0.0315 200);
+  --color-complement-1-200: oklch(0.7918 0.0738 200);
+  --color-complement-1-300: oklch(0.84 0.09 200);
   --color-complement-1-400: oklch(0.6058 0.103 200);
   --color-complement-1: oklch(0.6058 0.103 200);
   --color-complement-1-500: oklch(0.5393 0.0909 200);
@@ -103,4 +102,4 @@
   --color-complement-3-800: oklch(0.35 0.18 260);
   --color-complement-3-900: oklch(0.3 0.15 260);
   --color-complement-3-950: oklch(0.26 0.13 260);
-}
+}

package/src/styles/index.css

@@ -1,7 +1,7 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@import "@/styles/colors.css";
-@import "@/styles/fonts.css";
-@import "@/styles/theme.css";
-@import "@/styles/typography.css";
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@import "@/styles/colors.css";
+@import "@/styles/fonts.css";
+@import "@/styles/theme.css";
+@import "@/styles/typography.css";

package/src/styles/theme.css

@@ -5,7 +5,7 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
-  --container-radius: var(--radius);
+  --radius-container: var(--radius);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -37,6 +37,23 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+
+  --spacing-page-nav: --spacing(18);
+
+  --spacing-section: var(--section-p);
+  --spacing-section-sm: calc(var(--spacing-section) / 2);
+  --spacing-section-lg: calc(var(--spacing-section) * 2);
+  --spacing-section-xl: calc(var(--spacing-section) * 5);
+
+  --spacing-card: var(--card-p);
+  --spacing-card-sm: calc(var(--spacing-card) / 2);
+  --spacing-card-lg: calc(var(--spacing-card) * 2);
+  --spacing-card-xl: calc(var(--spacing-card) * 5);
+
+  --gap-page: var(--page-gap);
+  --gap-card: var(--card-gap);
+  --gap-card-area: var(--card-area-gap);
+  --gap-card-item-group: var(--card-item-group-gap);
 }
 
 :root {
@@ -72,12 +89,38 @@
   --sidebar-accent-foreground: oklch(0.3741 0.0774 245.65);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.5393 0.0909 199.73);
+
+  /* Responsive Layout Spacing */
+  --section-p: --spacing(6);
+  --card-p: --spacing(6);
+  --page-gap: --spacing(0);
+  --card-gap: --spacing(6);
+  --card-area-gap: --spacing(6);
+  --card-item-group-gap: --spacing(2);
+
+  @media (width >= 40rem) {
+    --section-p: --spacing(8);
+    --card-p: --spacing(6);
+    --page-gap: --spacing(4);
+    --card-gap: --spacing(6);
+    --card-area-gap: --spacing(6);
+    --card-item-group-gap: --spacing(2);
+  }
+
+  @media (width >= 80rem) {
+    --section-p: --spacing(12);
+    --card-p: --spacing(6);
+    --page-gap: --spacing(0);
+    --card-gap: --spacing(6);
+    --card-area-gap: --spacing(6);
+    --card-item-group-gap: --spacing(2);
+  }
 }
 
 .dark {
   --background: oklch(0.141 0.005 285.823);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.3741 0.0774 245.65);
+  --card: oklch(0.141 0.005 285.823);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.3741 0.0774 245.65);
   --popover-foreground: oklch(0.985 0 0);
@@ -124,3 +167,14 @@
     display: none;
   }
 }
+
+@utility areas-* {
+  grid-template-areas: --value(*, [*]);
+  grid-template-columns: --modifier(*, [*]);
+}
+
+@utility stick-to-page {
+  position: sticky;
+  top: calc(var(--spacing-section) + var(--spacing-page-nav));
+  height: fit-content;
+}