@bccampus/ui-components 0.1.0

package/src/components/ui/card.tsx

@@ -0,0 +1,147 @@
+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,
+};

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

@@ -0,0 +1,50 @@
+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 };

package/src/components/ui/icon-generator/generate-tiles.tsx

@@ -0,0 +1,243 @@
+import type { JSX } from "react";
+import type { TileConfig } from "./types";
+import { cn } from "@/lib/utils";
+import { TileShape } from "./types";
+
+const randomSet = [
+  TileShape.Square,
+  TileShape.Circle,
+  TileShape.Diamond,
+  TileShape.Hexagon,
+  TileShape.TriangleSE,
+  TileShape.TriangleSW,
+  TileShape.TriangleNW,
+  TileShape.TriangleNE,
+  TileShape.PieSE,
+  TileShape.PieSW,
+  TileShape.PieNW,
+  TileShape.PieNE,
+];
+
+type TileTemplatesConfig = TileConfig & Required<Pick<TileConfig, "scale">>;
+
+const TileTemplates: Record<
+  TileShape,
+  (tileX: number, tileY: number, tileSize: number, tileConfig: TileTemplatesConfig) => JSX.Element | null
+> = {
+  [TileShape.Blank]: () => null,
+
+  [TileShape.Rand]: (tileX, tileY, tileSize, tileConfig) =>
+    TileTemplates[randomSet[Math.floor(Math.random() * randomSet.length)]](tileX, tileY, tileSize, tileConfig),
+
+  [TileShape.Mosaic]: (tileX, tileY, tileSize, tileConfig) =>
+    TileTemplates[Math.random() > 0.8 ? TileShape.Blank : TileShape.Square](tileX, tileY, tileSize, tileConfig),
+  [TileShape.MosaicCircle]: (tileX, tileY, tileSize, tileConfig) =>
+    TileTemplates[Math.random() > 0.8 ? TileShape.Blank : TileShape.Circle](tileX, tileY, tileSize, tileConfig),
+  [TileShape.MosaicDiamond]: (tileX, tileY, tileSize, tileConfig) =>
+    TileTemplates[Math.random() > 0.8 ? TileShape.Blank : TileShape.Diamond](tileX, tileY, tileSize, tileConfig),
+
+  [TileShape.Square]: (tileX, tileY, tileSize, tileConfig) => (
+    <rect
+      key={`tile-${tileX}-${tileY}`}
+      x={tileSize * tileX}
+      y={tileSize * tileY}
+      width={tileSize * tileConfig.scale}
+      height={tileSize * tileConfig.scale}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+
+  [TileShape.Circle]: (tileX, tileY, tileSize, tileConfig) => (
+    <circle
+      key={`tile-${tileX}-${tileY}`}
+      cx={tileSize * (tileX + 0.5 * tileConfig.scale)}
+      cy={tileSize * (tileY + 0.5 * tileConfig.scale)}
+      r={(tileSize / 2) * tileConfig.scale}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+
+  [TileShape.Diamond]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * (tileX + 0.5 * tileConfig.scale)} ${tileSize * tileY} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * (tileY + 0.5 * tileConfig.scale)} 
+      L ${tileSize * (tileX + 0.5 * tileConfig.scale)} ${tileSize * (tileY + tileConfig.scale)} 
+      L ${tileSize * tileX} ${tileSize * (tileY + 0.5 * tileConfig.scale)}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.Hexagon]: (tileX, tileY, tileSize, tileConfig) => {
+    const side = tileSize / Math.sqrt(3);
+    const start = (tileSize - side) / 2;
+    return (
+      <path
+        rotate={45}
+        key={`tile-${tileX}-${tileY}`}
+        d={`M ${tileSize * tileX + start * tileConfig.scale} ${tileSize * tileY}
+        L ${tileSize * tileX + (start + side) * tileConfig.scale} ${tileSize * tileY}
+        L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * (tileY + 0.5 * tileConfig.scale)}
+        L ${tileSize * tileX + (start + side) * tileConfig.scale} ${tileSize * (tileY + tileConfig.scale)}
+        L ${tileSize * tileX + start * tileConfig.scale} ${tileSize * (tileY + tileConfig.scale)}
+        L ${tileSize * tileX} ${tileSize * (tileY + 0.5 * tileConfig.scale)}  Z`}
+        className={cn("fill-current stroke-none", tileConfig?.className)}
+      />
+    );
+  },
+  [TileShape.RandBasic]: (tileX, tileY, tileSize, tileConfig) =>
+    TileTemplates[(TileShape.Square + Math.floor(Math.random() * 4)) as TileShape](tileX, tileY, tileSize, tileConfig),
+
+  [TileShape.TriangleSE]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * (tileX + tileConfig.scale)} ${tileSize * tileY} 
+      L ${tileSize * tileX} ${tileSize * (tileY + tileConfig.scale)} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * (tileY + tileConfig.scale)}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.TriangleSW]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileX} ${tileSize * tileY} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * (tileY + tileConfig.scale)} 
+      L ${tileSize * tileX} ${tileSize * (tileY + tileConfig.scale)}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.TriangleNW]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * (tileX + tileConfig.scale)} ${tileSize * tileY} 
+      L ${tileSize * tileX} ${tileSize * (tileY + tileConfig.scale)} 
+      L ${tileSize * tileX} ${tileSize * tileY}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.TriangleNE]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileX} ${tileSize * tileY} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * (tileY + tileConfig.scale)} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * tileY}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.TriangleRand]: (tileX, tileY, tileSize, tileConfig) =>
+    TileTemplates[(TileShape.TriangleSE + Math.floor(Math.random() * 4)) as TileShape](
+      tileX,
+      tileY,
+      tileSize,
+      tileConfig
+    ),
+
+  [TileShape.CaretN]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileX} ${tileSize * (tileY + tileConfig.scale)} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * (tileY + tileConfig.scale)} 
+      L ${tileSize * (tileX + 0.5 * tileConfig.scale)} ${tileSize * tileY}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.CaretE]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileX} ${tileSize * tileY} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * (tileY + 0.5 * tileConfig.scale)} 
+      L ${tileSize * tileX} ${tileSize * (tileY + tileConfig.scale)}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.CaretS]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileX} ${tileSize * tileY} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * tileY} 
+      L ${tileSize * (tileX + 0.5 * tileConfig.scale)} ${tileSize * (tileY + tileConfig.scale)}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.CaretW]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * (tileX + tileConfig.scale)} ${tileSize * tileY} 
+      L ${tileSize * tileX} ${tileSize * (tileY + 0.5 * tileConfig.scale)} 
+      L ${tileSize * (tileX + tileConfig.scale)} ${tileSize * (tileY + tileConfig.scale)}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.CaretRand]: (tileX, tileY, tileSize, tileConfig) =>
+    TileTemplates[(TileShape.CaretN + Math.floor(Math.random() * 4)) as TileShape](tileX, tileY, tileSize, tileConfig),
+
+  [TileShape.PieSE]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileConfig.scale + tileSize * tileX} ${tileSize * tileY} 
+      A ${tileSize * tileConfig.scale} ${tileSize * tileConfig.scale}, 0, 0, 0, ${tileSize * tileX} ${
+        tileSize * tileConfig.scale + tileSize * tileY
+      } 
+      L ${tileSize * tileConfig.scale + tileSize * tileX} ${tileSize * tileConfig.scale + tileSize * tileY}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.PieSW]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileConfig.scale + tileSize * tileX} ${tileSize * tileConfig.scale + tileSize * tileY} 
+      A ${tileSize * tileConfig.scale} ${tileSize * tileConfig.scale}, 0, 0, 0, ${tileSize * tileX} ${tileSize * tileY} 
+      L ${tileSize * tileX} ${tileSize * tileConfig.scale + tileSize * tileY}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.PieNW]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileX} ${tileSize * tileConfig.scale + tileSize * tileY} 
+      A ${tileSize * tileConfig.scale} ${tileSize * tileConfig.scale}, 0, 0, 0, ${
+        tileSize * tileConfig.scale + tileSize * tileX
+      } ${tileSize * tileY} 
+      L ${tileSize * tileX} ${tileSize * tileY}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.PieNE]: (tileX, tileY, tileSize, tileConfig) => (
+    <path
+      key={`tile-${tileX}-${tileY}`}
+      d={`M ${tileSize * tileX} ${tileSize * tileY} 
+      A ${tileSize * tileConfig.scale} ${tileSize * tileConfig.scale}, 0, 0, 0, ${
+        tileSize * tileConfig.scale + tileSize * tileX
+      } ${tileSize * tileConfig.scale + tileSize * tileY} 
+      L ${tileSize * tileConfig.scale + tileSize * tileX} ${tileSize * tileY}  Z`}
+      className={cn("fill-current stroke-none", tileConfig?.className)}
+    />
+  ),
+  [TileShape.PieRand]: (tileX, tileY, tileSize, tileConfig) =>
+    TileTemplates[(TileShape.PieSE + Math.floor(Math.random() * 4)) as TileShape](tileX, tileY, tileSize, tileConfig),
+};
+
+export const generateIconPattern = (width: number, height: number, tileConfig: TileShape | TileConfig) => {
+  const pattern: (TileShape | TileConfig)[][] = [];
+  for (let y = 0; y < height; y++) {
+    pattern[y] = [];
+    for (let x = 0; x < width; x++) {
+      pattern[y].push(tileConfig);
+    }
+  }
+
+  return pattern;
+};
+
+export const generateTiles = (pattern: (TileShape | TileConfig)[][], tileSize: number, tileClassName?: string) =>
+  pattern
+    .map((rows, y) =>
+      rows.map((item, x) => {
+        const tileConfig: TileTemplatesConfig =
+          typeof item === "object"
+            ? { className: cn(tileClassName, item.className), scale: item.scale ?? 1, shape: item.shape }
+            : { className: tileClassName, scale: 1, shape: item };
+
+        return TileTemplates[tileConfig.shape](x, y, tileSize, tileConfig);
+      })
+    )
+    .flat();

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

@@ -0,0 +1,51 @@
+import { useMemo } from "react";
+import { TileShape, type IconGeneratorProps } from "./types";
+import { generateTiles } from "./generate-tiles";
+import { cn } from "@/lib/utils";
+
+const defaultIconPattern: TileShape[][] = [
+  [TileShape.PieRand, TileShape.PieRand],
+  [TileShape.PieRand, TileShape.PieRand],
+];
+
+function IconGenerator({
+  pattern = defaultIconPattern,
+  tileSize = 64,
+  tileClassName,
+  tileBgClassName,
+  renderChildren,
+  ...props
+}: IconGeneratorProps) {
+  const patternSize = useMemo(
+    () => ({
+      width: pattern.reduce((longestRow, row) => Math.max(longestRow, row.length), 0) * tileSize,
+      height: pattern.length * tileSize,
+    }),
+    [pattern, tileSize]
+  );
+
+  const paths = useMemo(() => {
+    const tiles = generateTiles(pattern, tileSize, tileClassName);
+    if (tileBgClassName)
+      tiles.unshift(
+        <rect
+          key="svg-mask-invert"
+          x={0}
+          y={0}
+          width={patternSize.width}
+          height={patternSize.height}
+          className={cn("fill-black stroke-2 stroke-black", tileBgClassName)}
+        />
+      );
+
+    return tiles;
+  }, [pattern, patternSize, tileClassName, tileBgClassName, tileSize]);
+
+  return (
+    <svg width={patternSize.width} height={patternSize.height} viewBox={`0 0 ${patternSize.width} ${patternSize.height}`} overflow="visible" {...props}>
+      {renderChildren ? renderChildren(paths, patternSize.width, patternSize.height) : paths}
+    </svg>
+  );
+}
+
+export { IconGenerator };

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

@@ -0,0 +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 };

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

@@ -0,0 +1,53 @@
+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";
+}

package/src/components/ui/index.ts

@@ -0,0 +1,7 @@
+export * from './button.tsx'
+export * from './typography/caption.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'

package/src/components/ui/tag.tsx

@@ -0,0 +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 };

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

@@ -0,0 +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 };

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/main.tsx

@@ -0,0 +1,12 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+import App from "./App.tsx";
+
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);