@bccampus/ui-components 0.1.0 → 0.2.0

package/src/components/ui/card.tsx

@@ -1,147 +1,131 @@
-import { cn } from "@/lib/utils";
-import { Caption } from "./typography/caption";
-import { cva, type VariantProps } from "class-variance-authority";
-
-const cardVariants = cva("group @container/card flex flex-col rounded-2xl gap-3", {
-  variants: {
-    variant: {
-      default: "bg-card text-card-foreground",
-      dark: "bg-card-foreground text-card",
-    },
-    noBorder: {
-      true: "",
-      false: "border border-complement-1-100  dark:border-complement-1-900",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-    noBorder: false,
-  },
-});
-
-type CardProps<T extends boolean> = (T extends true ? React.ComponentProps<"a"> : React.ComponentProps<"div">) &
-  VariantProps<typeof cardVariants> & {
-    asLink?: T;
-  };
-
-function Card<T extends boolean = false>({ className, asLink, variant, noBorder, ...props }: CardProps<T>) {
-  const Comp = asLink ? "a" : "div";  
-
-  const linkClassName = asLink ? "transition-all hover:bg-complement-1-50 dark:hover:border-complement-1-950" : "";
-
-  return (
-    //@ts-expect-error: props type will be correct
-    <Comp data-slot="card" className={cn(cardVariants({ variant, noBorder }), linkClassName, className)} {...props} />
-  );
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn("flex flex-col items-start gap-3 px-6 first:pt-6 last:pb-6", className)}
-      {...props}
-    />
-  );
-}
-
-function CardBody({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-body"
-      className={cn("flex flex-col items-start gap-3 px-6 first:pt-6 last:pb-6", className)}
-      {...props}
-    />
-  );
-}
-
-type CardTitleProps = React.ComponentProps<"div"> & { size?: "sm" | "md" | "lg" };
-function CardTitle({ size = "md", className, ...props }: CardTitleProps) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn(
-        {
-          "heading-1": size === "lg",
-          "heading-2": size === "md",
-          "heading-3": size === "sm",
-        },
-        className
-      )}
-      {...props}
-    />
-  );
-}
-function CardSubtitle({ size = "md", className, ...props }: CardTitleProps) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn(
-        "text-secondary",
-        {
-          "heading-1": size === "lg",
-          "heading-2": size === "md",
-          "heading-3": size === "sm",
-        },
-        className
-      )}
-      {...props}
-    />
-  );
-}
-function CardCaption(props: React.ComponentProps<"div">) {
-  return <Caption data-slot="card-caption" {...props} />;
-}
-
-function CardMeta(props: React.ComponentProps<"div">) {
-  return <Caption data-slot="card-meta" variant="light" {...props} />;
-}
-
-function CardContent(props: React.ComponentProps<"div">) {
-  return <div data-slot="card-content" {...props} />;
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex flex-wrap items-center gap-2 px-6 pt-3 last:pb-6", className)}
-      {...props}
-    />
-  );
-}
-
-function CardMedia({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-media"
-      className={cn(
-        "relative flex-1 p-6 first:pb-3 last:pt-3 group-[.flex-row]:first:pr-0 group-[.flex-row]:first:pb-6 group-[.flex-row]:last:pl-0 group-[.flex-row]:last:pt-6",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function CardImage({ className, ...props }: React.ComponentProps<"img">) {
-  return (
-    <CardMedia>
-      <img className={cn("w-full h-full rounded-lg aspect-9/5 object-cover object-top", className)} {...props} />
-    </CardMedia>
-  );
-}
-
-export {
-  Card,
-  CardHeader,
-  CardBody,
-  CardFooter,
-  CardTitle,
-  CardSubtitle,
-  CardCaption,
-  CardMeta,
-  CardContent,
-  CardMedia,
-  CardImage,
-};
+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", {
+  variants: {
+    bordered: {
+      true: "p-card border border-complement-1-100  dark:border-brand-1-900 ",
+      false: "",
+    },
+    rounded: {
+      true: "rounded-2xl",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    bordered: false,
+    rounded: false,
+  },
+});
+
+export type CardProps<T extends boolean> = (T extends true ? React.ComponentProps<"a"> : React.ComponentProps<"div">) &
+  VariantProps<typeof cardVariants> & {
+    asLink?: T;
+  };
+
+function Card<T extends boolean = false>({ className, asLink, bordered, rounded, ...props }: CardProps<T>) {
+  const Comp = asLink ? "a" : "div";
+
+  const linkClassName = asLink ? "transition-all hover:bg-complement-1-50 dark:hover:bg-gray-900" : "";
+
+  return (
+    //@ts-expect-error: props type will be correct
+    <Comp data-slot="card" className={cn(cardVariants({ bordered, rounded }), linkClassName, className)} {...props} />
+  );
+}
+
+type CardAreaProps = React.ComponentProps<"div"> & { name: string };
+function CardArea({ name, className, ...props }: CardAreaProps) {
+  return (
+    <div
+      style={{ gridArea: name }}
+      className={cn("relative flex flex-col gap-(--card-area-gap)", className)}
+      {...props}
+    />
+  );
+}
+
+function CardItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("flex flex-col gap-(--card-item-group-gap)", className)} {...props} />;
+}
+
+type CardTitleProps = React.ComponentProps<"div"> & { size?: "sm" | "md" | "lg" };
+function CardTitle({ size = "md", className, ...props }: CardTitleProps) {
+  return (
+    <div
+      className={cn(
+        {
+          "heading-1": size === "lg",
+          "heading-2": size === "md",
+          "heading-3": size === "sm",
+        },
+        className
+      )}
+      {...props}
+    />
+  );
+}
+function CardSubtitle({ size = "md", className, ...props }: CardTitleProps) {
+  return (
+    <div
+      className={cn(
+        "text-secondary",
+        {
+          "heading-1": size === "lg",
+          "heading-2": size === "md",
+          "heading-3": size === "sm",
+        },
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardCaption(props: React.ComponentProps<"div">) {
+  return <Caption {...props} />;
+}
+
+function CardSubcaption(props: React.ComponentProps<"div">) {
+  return <Caption variant="light" {...props} />;
+}
+
+function CardMeta(props: React.ComponentProps<"div">) {
+  return <Caption variant="light" {...props} />;
+}
+
+function CardContent(props: React.ComponentProps<"div">) {
+  return <div {...props} />;
+}
+
+function CardToolbar({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("flex flex-wrap items-center gap-(--card-item-group-gap)", className)} {...props} />;
+}
+
+function CardMedia({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("relative w-full h-full", className)} {...props} />;
+}
+
+function CardImage({ className, ...props }: React.ComponentProps<"img">) {
+  return (
+    <CardMedia>
+      <img className={cn("w-full h-full rounded-lg aspect-9/5 object-cover object-top", className)} {...props} />
+    </CardMedia>
+  );
+}
+
+export {
+  Card,
+  CardArea,
+  CardItemGroup,
+  CardToolbar,
+  CardTitle,
+  CardSubtitle,
+  CardCaption,
+  CardSubcaption,
+  CardMeta,
+  CardContent,
+  CardMedia,
+  CardImage,
+};

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

@@ -1,50 +1,75 @@
-import { cn } from "@/lib/utils";
-import { Button } from "./button";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useCallback, useRef } from "react";
-
-interface HorizontalListProps extends React.ComponentProps<"div"> {
-  toolbarLocation?: "bottom" | "top";
-}
-
-function HorizontalList({ className, children, toolbarLocation = "bottom", ...props }: HorizontalListProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const scrollLeft = useCallback(() => {
-    containerRef.current?.scrollBy({ left: -320 });
-  }, []);
-
-  const scrollRight = useCallback(() => {
-    containerRef.current?.scrollBy({ left: 320 });
-  }, []);
-
-  return (
-    <div
-      className={cn("flex gap-4", {
-        "flex-col": toolbarLocation === "bottom",
-        "flex-col-reverse": toolbarLocation === "top",
-      })}
-    >
-      <div
-        ref={containerRef}
-        className={cn(
-          "scrollbar-hidden overscroll-contain -ms-4 py-1 px-4 gap-4 sm:-ms-8 sm:px-8 sm:gap-8 flex flex-row flex-nowrap overflow-x-auto w-screen snap-x snap-mandatory touch-pan-x scroll-smooth",
-          className
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-      <div className="flex justify-center sm:justify-start">
-        <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollLeft}>
-          <ChevronLeft className="size-9" />
-        </Button>
-        <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollRight}>
-          <ChevronRight className="size-9" />
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export { HorizontalList };
+import { cn } from "@/lib/utils";
+import { Button } from "./button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+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",
+  {
+    variants: {
+      variant: {
+        contain: "w-full ",
+        overflow: "w-screen px-section -ms-section scroll-px-(--section-p)",
+      },
+    },
+    defaultVariants: {
+      variant: "contain",
+    },
+  }
+);
+
+export interface HorizontalListProps extends VariantProps<typeof horizontalListVariants>, React.ComponentProps<"div"> {
+  toolbarLocation?: "bottom" | "top";
+  scrollBy?: number;
+}
+
+function HorizontalList({
+  variant,
+  className,
+  children,
+  toolbarLocation = "bottom",
+  scrollBy = 360,
+  ...props
+}: HorizontalListProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const scrollLeft = useCallback(() => {
+    containerRef.current?.scrollBy({ left: -scrollBy });
+  }, [scrollBy]);
+
+  const scrollRight = useCallback(() => {
+    containerRef.current?.scrollBy({ left: scrollBy });
+  }, [scrollBy]);
+
+  return (
+    <div
+      className={cn("flex gap-4", {
+        "flex-col": toolbarLocation === "bottom",
+        "flex-col-reverse": toolbarLocation === "top",
+      })}
+    >
+      <div
+        ref={containerRef}
+        className={cn(
+          horizontalListVariants({ variant }),
+
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+      <div className="flex justify-center sm:justify-start">
+        <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollLeft}>
+          <ChevronLeft className="size-9" />
+        </Button>
+        <Button size="icon" variant="ghost" className="rounded-full" onClick={scrollRight}>
+          <ChevronRight className="size-9" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export { HorizontalList };