@almadar/ui 2.23.0 → 2.24.0

package/dist/components/molecules/EdgeDecoration.d.ts

@@ -0,0 +1,35 @@
+/**
+ * EdgeDecoration Molecule
+ *
+ * Standalone SVG decorative elements positioned on section edges.
+ * Unlike GeometricPattern (which tiles small units), these are large
+ * singular shapes placed at specific positions: left edge, right edge,
+ * or both.
+ *
+ * Variants:
+ *   arch       — Concentric pointed mihrab arches (half-circles opening inward)
+ *   vine       — Flowing arabesque scroll tendrils running vertically
+ *   lattice    — Fine curved diamond lattice mesh
+ *
+ * Each variant renders as an absolutely-positioned SVG on one or both
+ * sides of the parent container.
+ */
+import React from 'react';
+export type EdgeVariant = 'arch' | 'vine' | 'lattice';
+export type EdgeSide = 'left' | 'right' | 'both';
+export interface EdgeDecorationProps {
+    /** Which decorative element */
+    variant?: EdgeVariant;
+    /** Which side(s) to place the decoration */
+    side?: EdgeSide;
+    /** Overall opacity (default: 0.15) */
+    opacity?: number;
+    /** Stroke color */
+    color?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Width of the decoration area as percentage of container (default: 15) */
+    width?: number;
+    className?: string;
+}
+export declare const EdgeDecoration: React.FC<EdgeDecorationProps>;

package/dist/components/molecules/GeometricPattern.d.ts

@@ -0,0 +1,33 @@
+/**
+ * GeometricPattern Molecule
+ *
+ * Composes PatternTile into reusable layout modes for Islamic geometric
+ * background decoration. Supports four modes:
+ *
+ *   background — full tiling fill behind content
+ *   left/right — pattern fades from one side toward the other
+ *   frame      — thin decorative strips above and below content
+ *
+ * Uses SVG <pattern> for efficient tiling and <mask> for fade effects.
+ * All rendering is pure SVG (SSR-safe, no browser APIs).
+ */
+import React from 'react';
+import type { PatternVariant } from '../atoms/PatternTile';
+export interface GeometricPatternProps {
+    /** Which geometric tile design */
+    variant?: PatternVariant;
+    /** Layout mode */
+    mode?: 'background' | 'left' | 'right' | 'dual' | 'around' | 'frame';
+    /** Overall opacity (default: 0.06) */
+    opacity?: number;
+    /** Stroke color passed to PatternTile */
+    color?: string;
+    /** Tile scale multiplier (default: 1) */
+    scale?: number;
+    /** Stroke width passed to PatternTile */
+    strokeWidth?: number;
+    /** Content to wrap (used in frame mode) */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const GeometricPattern: React.FC<GeometricPatternProps>;

package/dist/components/molecules/index.d.ts

@@ -76,3 +76,5 @@ export { TagCloud, type TagCloudProps, type TagCloudItem } from './TagCloud';
 export { CommunityLinks, type CommunityLinksProps } from './CommunityLinks';
 export { TeamCard, type TeamCardProps } from './TeamCard';
 export { ShowcaseCard, type ShowcaseCardProps } from './ShowcaseCard';
+export { GeometricPattern, type GeometricPatternProps } from './GeometricPattern';
+export { EdgeDecoration, type EdgeDecorationProps, type EdgeVariant, type EdgeSide } from './EdgeDecoration';

package/dist/docs/index.cjs

@@ -3047,9 +3047,9 @@ var variantStyles2 = {
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-transparent text-[var(--color-accent)]",
+    "border-[length:var(--border-width)] border-[var(--color-accent)]",
+    "hover:bg-[var(--color-accent)] hover:text-white",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [

package/dist/docs/index.js

@@ -3023,9 +3023,9 @@ var variantStyles2 = {
     "active:scale-[var(--active-scale)] active:shadow-[var(--shadow-active)]"
   ].join(" "),
   secondary: [
-    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
-    "hover:bg-[var(--color-secondary-hover)]",
+    "bg-transparent text-[var(--color-accent)]",
+    "border-[length:var(--border-width)] border-[var(--color-accent)]",
+    "hover:bg-[var(--color-accent)] hover:text-white",
     "active:scale-[var(--active-scale)]"
   ].join(" "),
   ghost: [