Merge pull request #11 from arnaudvolp/feature/1.1.3-fix

Feature/1.1.3 fix

Author: arnaudvolp

.gitignore

@@ -40,6 +40,8 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
+#claude
+.claude
 
 # playwright
 /test-results/

public/r/background-01.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/registry/blocks/background-01/background.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ntype Background01Props = {\n  className?: string;\n  lineColor?: string;\n  gridSizeX?: number;\n  gridSizeY?: number;\n  mask?: MaskPosition;\n};\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background01 = ({\n  className,\n  lineColor = \"var(--border)\",\n  gridSizeX = 20,\n  gridSizeY = 20,\n  mask = \"none\",\n}: Background01Props) => {\n  const maskStyle = getMaskStyle(mask);\n\n  return (\n    <div className={cn(\"absolute inset-0 z-0 h-full w-full\", className)}>\n      <div\n        className=\"absolute inset-0 h-full w-full pointer-events-none\"\n        style={{\n          backgroundImage: `linear-gradient(to right, ${lineColor} 1px, transparent 1px), linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)`,\n          backgroundSize: `${gridSizeX}px ${gridSizeY}px`,\n          ...(mask !== \"none\" && {\n            maskImage: maskStyle,\n            WebkitMaskImage: maskStyle,\n          }),\n        }}\n      />\n    </div>\n  );\n};\n\nexport { Background01 };\n",
+      "content": "import { cn } from \"@/lib/utils\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ntype Background01Props = {\n  className?: string;\n  lineColor?: string;\n  gridSizeX?: number;\n  gridSizeY?: number;\n  mask?: MaskPosition;\n};\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background01 = ({\n  className,\n  lineColor = \"var(--border)\",\n  gridSizeX = 20,\n  gridSizeY = 20,\n  mask = \"none\",\n}: Background01Props) => {\n  const maskStyle = getMaskStyle(mask);\n\n  return (\n    <div className={cn(\"absolute inset-0 z-0 h-full w-full\", className)}>\n      <div\n        className=\"absolute inset-0 h-full w-full pointer-events-none\"\n        style={{\n          backgroundImage: `linear-gradient(to right, ${lineColor} 1px, transparent 1px), linear-gradient(to bottom, ${lineColor} 1px, transparent 1px)`,\n          backgroundSize: `${gridSizeX}px ${gridSizeY}px`,\n          ...(mask !== \"none\" && {\n            maskImage: maskStyle,\n            WebkitMaskImage: maskStyle,\n          }),\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Background01;\n",
       "type": "registry:component",
       "target": "components/background-01.tsx"
     }

public/r/background-02.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/registry/blocks/background-02/background.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ntype Background02Props = {\n  className?: string;\n  dotColor?: string;\n  dotSize?: number;\n  spacingX?: number;\n  spacingY?: number;\n  mask?: MaskPosition;\n};\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background02 = ({\n  className,\n  dotColor = \"var(--border)\",\n  dotSize = 1,\n  spacingX = 16,\n  spacingY = 16,\n  mask = \"none\",\n}: Background02Props) => {\n  const maskStyle = getMaskStyle(mask);\n\n  return (\n    <div className={cn(\"absolute inset-0 z-0 h-full w-full\", className)}>\n      <div\n        className=\"absolute inset-0 h-full w-full pointer-events-none\"\n        style={{\n          backgroundImage: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,\n          backgroundSize: `${spacingX}px ${spacingY}px`,\n          ...(mask !== \"none\" && {\n            maskImage: maskStyle,\n            WebkitMaskImage: maskStyle,\n          }),\n        }}\n      />\n    </div>\n  );\n};\n\nexport { Background02 };\n",
+      "content": "import { cn } from \"@/lib/utils\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ntype Background02Props = {\n  className?: string;\n  dotColor?: string;\n  dotSize?: number;\n  spacingX?: number;\n  spacingY?: number;\n  mask?: MaskPosition;\n};\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background02 = ({\n  className,\n  dotColor = \"var(--border)\",\n  dotSize = 1,\n  spacingX = 16,\n  spacingY = 16,\n  mask = \"none\",\n}: Background02Props) => {\n  const maskStyle = getMaskStyle(mask);\n\n  return (\n    <div className={cn(\"absolute inset-0 z-0 h-full w-full\", className)}>\n      <div\n        className=\"absolute inset-0 h-full w-full pointer-events-none\"\n        style={{\n          backgroundImage: `radial-gradient(${dotColor} ${dotSize}px, transparent ${dotSize}px)`,\n          backgroundSize: `${spacingX}px ${spacingY}px`,\n          ...(mask !== \"none\" && {\n            maskImage: maskStyle,\n            WebkitMaskImage: maskStyle,\n          }),\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Background02;\n",
       "type": "registry:component",
       "target": "components/background-02.tsx"
     }

public/r/background-03.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/registry/blocks/background-03/background.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ntype Background03Props = {\n  className?: string;\n  lineColor?: string;\n  lineWidth?: number;\n  spacing?: number;\n  angle?: number;\n  mask?: MaskPosition;\n};\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background03 = ({\n  className,\n  lineColor = \"var(--border)\",\n  lineWidth = 1,\n  spacing = 24,\n  angle = 135,\n  mask = \"none\",\n}: Background03Props) => {\n  const maskStyle = getMaskStyle(mask);\n\n  return (\n    <div className={cn(\"absolute inset-0 z-0 h-full w-full\", className)}>\n      <div\n        className=\"absolute inset-0 h-full w-full pointer-events-none\"\n        style={{\n          backgroundImage: `repeating-linear-gradient(${angle}deg, ${lineColor} 0px ${lineWidth}px, transparent ${lineWidth}px ${spacing}px)`,\n          ...(mask !== \"none\" && {\n            maskImage: maskStyle,\n            WebkitMaskImage: maskStyle,\n          }),\n        }}\n      />\n    </div>\n  );\n};\n\nexport { Background03 };\n",
+      "content": "import { cn } from \"@/lib/utils\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ntype Background03Props = {\n  className?: string;\n  lineColor?: string;\n  lineWidth?: number;\n  spacing?: number;\n  angle?: number;\n  mask?: MaskPosition;\n};\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background03 = ({\n  className,\n  lineColor = \"var(--border)\",\n  lineWidth = 1,\n  spacing = 24,\n  angle = 135,\n  mask = \"none\",\n}: Background03Props) => {\n  const maskStyle = getMaskStyle(mask);\n\n  return (\n    <div className={cn(\"absolute inset-0 z-0 h-full w-full\", className)}>\n      <div\n        className=\"absolute inset-0 h-full w-full pointer-events-none\"\n        style={{\n          backgroundImage: `repeating-linear-gradient(${angle}deg, ${lineColor} 0px ${lineWidth}px, transparent ${lineWidth}px ${spacing}px)`,\n          ...(mask !== \"none\" && {\n            maskImage: maskStyle,\n            WebkitMaskImage: maskStyle,\n          }),\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Background03;\n",
       "type": "registry:component",
       "target": "components/background-03.tsx"
     }

public/r/background-04.json

@@ -6,7 +6,7 @@
   "files": [
     {
       "path": "src/registry/blocks/background-04/background.tsx",
-      "content": "import { cn } from \"@/lib/utils\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ntype Background04Props = {\n  className?: string;\n  lineCount?: number;\n  lineWidth?: number;\n  lineColor?: string;\n  gap?: number;\n  mask?: MaskPosition;\n};\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background04 = ({\n  className,\n  lineCount = 12,\n  lineWidth = 1,\n  lineColor = \"var(--border)\",\n  gap = 0,\n  mask = \"none\",\n}: Background04Props) => {\n  const maskStyle = getMaskStyle(mask);\n\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-0 overflow-hidden\",\n        className\n      )}\n      style={\n        mask !== \"none\"\n          ? {\n              maskImage: maskStyle,\n              WebkitMaskImage: maskStyle,\n            }\n          : undefined\n      }\n    >\n      <div\n        className=\"flex size-full items-stretch justify-between\"\n        style={{ padding: gap ? `0 ${gap}px` : undefined }}\n      >\n        {Array.from({ length: lineCount }).map((_, i) => (\n          <div\n            key={i}\n            style={{\n              width: `${lineWidth}px`,\n              backgroundColor: lineColor,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport { Background04 };\n",
+      "content": "import { cn } from \"@/lib/utils\";\n\ntype MaskPosition = \"top\" | \"bottom\" | \"center\" | \"none\";\n\ntype Background04Props = {\n  className?: string;\n  lineCount?: number;\n  lineWidth?: number;\n  lineColor?: string;\n  gap?: number;\n  mask?: MaskPosition;\n};\n\nconst getMaskStyle = (mask: MaskPosition): string => {\n  switch (mask) {\n    case \"top\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 0%, transparent 40%, #000 110%)\";\n    case \"bottom\":\n      return \"radial-gradient(ellipse 60% 50% at 50% 100%, transparent 40%, #000 110%)\";\n    case \"center\":\n      return \"radial-gradient(ellipse 50% 50% at 50% 50%, transparent 20%, #000 70%)\";\n    case \"none\":\n    default:\n      return \"none\";\n  }\n};\n\nconst Background04 = ({\n  className,\n  lineCount = 12,\n  lineWidth = 1,\n  lineColor = \"var(--border)\",\n  gap = 0,\n  mask = \"none\",\n}: Background04Props) => {\n  const maskStyle = getMaskStyle(mask);\n\n  return (\n    <div\n      className={cn(\n        \"pointer-events-none absolute inset-0 z-0 overflow-hidden\",\n        className\n      )}\n      style={\n        mask !== \"none\"\n          ? {\n              maskImage: maskStyle,\n              WebkitMaskImage: maskStyle,\n            }\n          : undefined\n      }\n    >\n      <div\n        className=\"flex size-full items-stretch justify-between\"\n        style={{ padding: gap ? `0 ${gap}px` : undefined }}\n      >\n        {Array.from({ length: lineCount }).map((_, i) => (\n          <div\n            key={i}\n            style={{\n              width: `${lineWidth}px`,\n              backgroundColor: lineColor,\n            }}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Background04;\n",
       "type": "registry:component",
       "target": "components/background-04.tsx"
     }