@almadar/ui 2.22.2 → 2.24.0

package/dist/marketing/index.d.cts

@@ -828,4 +828,115 @@ interface AnimatedCounterProps {
 }
 declare const AnimatedCounter: React.FC<AnimatedCounterProps>;
 
-export { AnimatedCounter, type AnimatedCounterProps, ArticleSection, type ArticleSectionProps, Badge, Box, Button, CTABanner, type CTABannerProps, Card, CaseStudyCard, type CaseStudyCardProps, Center, CommunityLinks, type CommunityLinksProps, ContentSection, type ContentSectionProps, Divider, FeatureCard, type FeatureCardProps, FeatureGrid, type FeatureGridProps, type FooterLinkColumn, type FooterLinkItem, GradientDivider, type GradientDividerProps, HStack, HeroSection, type HeroSectionProps, Icon, InstallBox, type InstallBoxProps, MarketingFooter, type MarketingFooterProps, PricingCard, type PricingCardProps, PricingGrid, type PricingGridProps, PullQuote, type PullQuoteProps, ServiceCatalog, type ServiceCatalogProps, ShowcaseCard, type ShowcaseCardProps, SimpleGrid, Spacer, SplitSection, type SplitSectionProps, StatsGrid, type StatsGridProps, StepFlow, type StepFlowProps, type StepItemProps, TagCloud, type TagCloudProps, TeamCard, type TeamCardProps, Typography, VStack };
+/**
+ * PatternTile Atom
+ *
+ * Mathematically correct Islamic geometric pattern tiles using the
+ * Polygons-in-Contact (PIC) method (Hankin 1925, formalized by Kaplan 2005).
+ *
+ * Construction: A regular polygon tiling is overlaid with star motifs.
+ * Each motif touches the enclosing polygon at EDGE MIDPOINTS only.
+ * Two rays emanate from each midpoint into the polygon at a specific
+ * CONTACT ANGLE (theta). Where rays from adjacent midpoints intersect,
+ * they form the star points. Gap tiles (squares, triangles) between
+ * polygons receive inferred geometry by extending boundary rays inward.
+ *
+ * Variants:
+ *   star8  — 8-fold star-and-cross on 4.8.8 tiling (theta = 67.5 deg)
+ *   star6  — 6-fold star on hexagonal tiling (theta = 60 deg)
+ *   khatam — 8-fold rosette with interlocking kites (theta = 72 deg)
+ *   star10 — 10-fold girih on decagonal tiling (theta = 72 deg)
+ *   star12 — 12-fold on dodecagonal tiling (theta = 75 deg)
+ *
+ * All tiles use stroke only (no fill), rendering as transparent overlays.
+ */
+
+type PatternVariant = 'star8' | 'star6' | 'khatam' | 'star10' | 'star12' | 'rosette-double' | 'rosette-filled' | 'seigaiha' | 'greek-key' | 'celtic-knot' | 'kolam' | 'arch' | 'arabesque-vine' | 'arabesque-net';
+interface PatternTileProps {
+    /** Which geometric pattern to render */
+    variant?: PatternVariant;
+    /** Tile unit size in SVG units */
+    size?: number;
+    /** Stroke color (CSS variable or hex) */
+    color?: string;
+    /** Line thickness */
+    strokeWidth?: number;
+    className?: string;
+}
+declare const PatternTile: React.FC<PatternTileProps>;
+/** Returns the tile dimensions for a given variant and size */
+declare function getTileDimensions(variant: PatternVariant, size: number): {
+    width: number;
+    height: number;
+};
+
+/**
+ * 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).
+ */
+
+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;
+}
+declare const GeometricPattern: React.FC<GeometricPatternProps>;
+
+/**
+ * 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.
+ */
+
+type EdgeVariant = 'arch' | 'vine' | 'lattice';
+type EdgeSide = 'left' | 'right' | 'both';
+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;
+}
+declare const EdgeDecoration: React.FC<EdgeDecorationProps>;
+
+export { AnimatedCounter, type AnimatedCounterProps, ArticleSection, type ArticleSectionProps, Badge, Box, Button, CTABanner, type CTABannerProps, Card, CaseStudyCard, type CaseStudyCardProps, Center, CommunityLinks, type CommunityLinksProps, ContentSection, type ContentSectionProps, Divider, EdgeDecoration, type EdgeDecorationProps, type EdgeSide, type EdgeVariant, FeatureCard, type FeatureCardProps, FeatureGrid, type FeatureGridProps, type FooterLinkColumn, type FooterLinkItem, GeometricPattern, type GeometricPatternProps, GradientDivider, type GradientDividerProps, HStack, HeroSection, type HeroSectionProps, Icon, InstallBox, type InstallBoxProps, MarketingFooter, type MarketingFooterProps, PatternTile, type PatternTileProps, type PatternVariant, PricingCard, type PricingCardProps, PricingGrid, type PricingGridProps, PullQuote, type PullQuoteProps, ServiceCatalog, type ServiceCatalogProps, ShowcaseCard, type ShowcaseCardProps, SimpleGrid, Spacer, SplitSection, type SplitSectionProps, StatsGrid, type StatsGridProps, StepFlow, type StepFlowProps, type StepItemProps, TagCloud, type TagCloudProps, TeamCard, type TeamCardProps, Typography, VStack, getTileDimensions };

package/dist/marketing/index.d.ts

@@ -60,3 +60,9 @@ export { PullQuote } from '../components/molecules/PullQuote';
 export type { PullQuoteProps } from '../components/molecules/PullQuote';
 export { AnimatedCounter } from '../components/molecules/AnimatedCounter';
 export type { AnimatedCounterProps } from '../components/molecules/AnimatedCounter';
+export { PatternTile, getTileDimensions } from '../components/atoms/PatternTile';
+export type { PatternTileProps, PatternVariant } from '../components/atoms/PatternTile';
+export { GeometricPattern } from '../components/molecules/GeometricPattern';
+export type { GeometricPatternProps } from '../components/molecules/GeometricPattern';
+export { EdgeDecoration } from '../components/molecules/EdgeDecoration';
+export type { EdgeDecorationProps, EdgeVariant, EdgeSide } from '../components/molecules/EdgeDecoration';