@opensite/ui 0.8.1 → 0.8.2

package/dist/feature-pattern-grid-links.cjs

@@ -554,22 +554,6 @@ var Pressable = React__namespace.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-
-// lib/patternSvgs.ts
-var patternSvgs = {
-  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
-  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
-  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
-  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
-  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
-  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
-  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
-  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
-  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
-  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
-  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
-  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
-};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -598,6 +582,22 @@ var Container = React__namespace.default.forwardRef(
   }
 );
 Container.displayName = "Container";
+
+// lib/patternSvgs.ts
+var patternSvgs = {
+  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
+  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
+  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
+  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
+  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
+  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
+  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
+  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
+  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
+  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
+  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
+  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
+};
 var maskTop = "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)";
 var maskBottom = "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)";
 var maskCenter = "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)";
@@ -932,7 +932,6 @@ Section.displayName = "Section";
 function FeaturePatternGridLinks({
   features,
   featuresSlot,
-  patternUrl = patternSvgs.dotPattern,
   className,
   containerClassName,
   gridClassName,
@@ -943,26 +942,28 @@ function FeaturePatternGridLinks({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = React.useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
     return null;
-  };
-  const renderFeatureLink = (feature) => {
+  }, []);
+  const renderFeatureLink = React.useCallback((feature) => {
     if (feature.linkSlot) return feature.linkSlot;
-    if (!feature.link) return null;
+    if (!feature.link && !feature.linkLabel) return null;
+    const label = feature.linkLabel || (feature.link ? "Learn more" : null);
+    if (!label) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Pressable,
       {
         href: feature.link,
         className: cn("flex items-center gap-2 text-sm font-medium", feature.linkClassName),
         children: [
-          feature.linkLabel || "Learn more",
+          label,
           /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
         ]
       }
     );
-  };
+  }, []);
   const featuresContent = React.useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -981,7 +982,7 @@ function FeaturePatternGridLinks({
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName]);
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -990,12 +991,8 @@ function FeaturePatternGridLinks({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-muted/30", className),
+      className,
       containerClassName,
-      style: {
-        backgroundImage: `url(${patternUrl})`,
-        backgroundRepeat: "repeat"
-      },
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
     }
   );

package/dist/feature-pattern-grid-links.d.cts

@@ -66,10 +66,6 @@ interface FeaturePatternGridLinksProps {
      * Custom slot for rendering features (overrides features array)
      */
     featuresSlot?: React.ReactNode;
-    /**
-     * Background pattern URL
-     */
-    patternUrl?: string;
     /**
      * Additional CSS classes for the section
      */
@@ -124,6 +120,6 @@ interface FeaturePatternGridLinksProps {
  * />
  * ```
  */
-declare function FeaturePatternGridLinks({ features, featuresSlot, patternUrl, className, containerClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeaturePatternGridLinksProps): React.JSX.Element;
+declare function FeaturePatternGridLinks({ features, featuresSlot, className, containerClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeaturePatternGridLinksProps): React.JSX.Element;
 
 export { FeaturePatternGridLinks, type FeaturePatternGridLinksProps };

package/dist/feature-pattern-grid-links.d.ts

@@ -66,10 +66,6 @@ interface FeaturePatternGridLinksProps {
      * Custom slot for rendering features (overrides features array)
      */
     featuresSlot?: React.ReactNode;
-    /**
-     * Background pattern URL
-     */
-    patternUrl?: string;
     /**
      * Additional CSS classes for the section
      */
@@ -124,6 +120,6 @@ interface FeaturePatternGridLinksProps {
  * />
  * ```
  */
-declare function FeaturePatternGridLinks({ features, featuresSlot, patternUrl, className, containerClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeaturePatternGridLinksProps): React.JSX.Element;
+declare function FeaturePatternGridLinks({ features, featuresSlot, className, containerClassName, gridClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeaturePatternGridLinksProps): React.JSX.Element;
 
 export { FeaturePatternGridLinks, type FeaturePatternGridLinksProps };

package/dist/feature-pattern-grid-links.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import React__default, { useCallback, useMemo } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -533,22 +533,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-
-// lib/patternSvgs.ts
-var patternSvgs = {
-  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
-  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
-  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
-  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
-  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
-  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
-  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
-  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
-  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
-  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
-  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
-  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
-};
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -577,6 +561,22 @@ var Container = React__default.forwardRef(
   }
 );
 Container.displayName = "Container";
+
+// lib/patternSvgs.ts
+var patternSvgs = {
+  squareAltGrid: "https://cdn.ing/assets/files/record/286187/4gpn0yq2ptra8iwlvmwwv860ggwv",
+  grid1: "https://cdn.ing/assets/files/record/286186/nbdflpgp4ostrno079hygibsflp3",
+  noise: "https://cdn.ing/assets/i/r/286188/zrqcp9hynh3j7p2laihwzfbujgrl/noise.png",
+  dots: "https://cdn.ing/assets/files/record/286198/yfsjx9thvtxzhl2qtshxyhkrm524",
+  dotPattern: "https://cdn.ing/assets/files/record/286192/7ig0cku8aqbboiza8nuk6hw0nnsr",
+  dotPattern2: "https://cdn.ing/assets/files/record/286189/arez6gd2s7isn9i1o6c7sexdq7bl",
+  circles: "https://cdn.ing/assets/files/record/286190/gtmia3sncjtzetdshc20zf1d3c17",
+  waves: "https://cdn.ing/assets/files/record/286191/mqlb33fzxz9cdth1bx7if0wmpkp1",
+  crossPattern: "https://cdn.ing/assets/files/record/286193/9yfqwdbnqaipbp7fsb3wbzzmq472",
+  architect: "https://cdn.ing/assets/files/record/286194/vgs88ugpvyhxu13wqgy0acvae6re",
+  tinyCheckers: "https://cdn.ing/assets/files/record/286195/65efaknsw8kcpf9o3c2gybytsl5b",
+  p6: "https://cdn.ing/assets/i/r/286196/6kl0rqnd6mjk8j7e525fo8fo0vkc/p6.webp"
+};
 var maskTop = "radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%)";
 var maskBottom = "radial-gradient(ellipse 100% 80% at 50% 100%, #000 50%, transparent 90%)";
 var maskCenter = "radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 70%)";
@@ -911,7 +911,6 @@ Section.displayName = "Section";
 function FeaturePatternGridLinks({
   features,
   featuresSlot,
-  patternUrl = patternSvgs.dotPattern,
   className,
   containerClassName,
   gridClassName,
@@ -922,26 +921,28 @@ function FeaturePatternGridLinks({
   patternOpacity,
   patternClassName
 }) {
-  const renderFeatureIcon = (feature) => {
+  const renderFeatureIcon = useCallback((feature) => {
     if (feature.icon) return feature.icon;
     if (feature.iconName) return /* @__PURE__ */ jsx(DynamicIcon, { name: feature.iconName, size: 24, className: feature.iconClassName });
     return null;
-  };
-  const renderFeatureLink = (feature) => {
+  }, []);
+  const renderFeatureLink = useCallback((feature) => {
     if (feature.linkSlot) return feature.linkSlot;
-    if (!feature.link) return null;
+    if (!feature.link && !feature.linkLabel) return null;
+    const label = feature.linkLabel || (feature.link ? "Learn more" : null);
+    if (!label) return null;
     return /* @__PURE__ */ jsxs(
       Pressable,
       {
         href: feature.link,
         className: cn("flex items-center gap-2 text-sm font-medium", feature.linkClassName),
         children: [
-          feature.linkLabel || "Learn more",
+          label,
           /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
         ]
       }
     );
-  };
+  }, []);
   const featuresContent = useMemo(() => {
     if (featuresSlot) return featuresSlot;
     if (!features || features.length === 0) return null;
@@ -960,7 +961,7 @@ function FeaturePatternGridLinks({
       },
       index
     ));
-  }, [featuresSlot, features, cardClassName]);
+  }, [featuresSlot, features, cardClassName, renderFeatureIcon, renderFeatureLink]);
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -969,12 +970,8 @@ function FeaturePatternGridLinks({
       pattern,
       patternOpacity,
       patternClassName,
-      className: cn("bg-muted/30", className),
+      className,
       containerClassName,
-      style: {
-        backgroundImage: `url(${patternUrl})`,
-        backgroundRepeat: "repeat"
-      },
       children: /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 md:grid-cols-2 lg:grid-cols-3", gridClassName), children: featuresContent })
     }
   );