@bccampus/ui-components 0.1.0 → 0.2.0

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

@@ -1,243 +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();
+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

@@ -1,51 +1,84 @@
-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 };
+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,
+  fit = "none",
+  ...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]);
+
+  const width = useMemo(() => {
+    switch (fit) {
+      case "fill":
+        return patternSize.width <= patternSize.height ? "100%" : undefined;
+      case "width":
+        return "100%";
+      case "none":
+        return patternSize.width;
+      default:
+        return undefined;
+    }
+  }, [fit, patternSize]);
+
+  const height = useMemo(() => {
+    switch (fit) {
+      case "fill":
+        return patternSize.height < patternSize.width ? "100%" : undefined;
+      case "height":
+        return "100%";
+      case "none":
+        return patternSize.height;
+      default:
+        return undefined;
+    }
+  }, [fit, patternSize]);
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${patternSize.width} ${patternSize.height}`}
+      overflow="visible"
+      {...props}
+    >
+      {renderChildren ? renderChildren(paths, patternSize.width, patternSize.height) : paths}
+    </svg>
+  );
+}
+
+export { IconGenerator };