@almadar/ui 2.24.5 → 2.24.9

package/dist/avl/index.cjs

@@ -3604,30 +3604,30 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h3: "text-2xl font-bold text-[var(--color-foreground)]",
-  h4: "text-xl font-bold text-[var(--color-foreground)]",
-  h5: "text-lg font-bold text-[var(--color-foreground)]",
-  h6: "text-base font-bold text-[var(--color-foreground)]",
-  heading: "text-2xl font-bold text-[var(--color-foreground)]",
-  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
-  body1: "text-base font-normal text-[var(--color-foreground)]",
-  body2: "text-sm font-normal text-[var(--color-foreground)]",
-  body: "text-base font-normal text-[var(--color-foreground)]",
-  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
-  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
-  small: "text-sm font-normal text-[var(--color-foreground)]",
-  large: "text-lg font-medium text-[var(--color-foreground)]",
-  label: "text-sm font-medium text-[var(--color-foreground)]"
+  h1: "text-4xl font-bold tracking-tight text-foreground",
+  h2: "text-3xl font-bold tracking-tight text-foreground",
+  h3: "text-2xl font-bold text-foreground",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
 };
 var colorStyles = {
-  primary: "text-[var(--color-foreground)]",
-  secondary: "text-[var(--color-muted-foreground)]",
-  muted: "text-[var(--color-muted-foreground)]",
-  error: "text-[var(--color-error)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
   inherit: "text-inherit"
 };
 var weightStyles = {
@@ -3842,28 +3842,28 @@ var marginYStyles = {
 };
 var bgStyles = {
   transparent: "bg-transparent",
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
-  surface: "bg-[var(--color-card)]",
-  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
 var roundedStyles = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
-  "2xl": "rounded-[var(--radius-xl)]",
-  full: "rounded-[var(--radius-full)]"
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
 var shadowStyles = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]",
-  xl: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
 };
 var displayStyles = {
   block: "block",
@@ -3951,7 +3951,7 @@ var Box = React8__default.default.forwardRef(
           // Background
           bgStyles[bg],
           // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          border && "border-[length:var(--border-width)] border-border",
           // Rounded
           roundedStyles[rounded],
           // Shadow
@@ -6752,7 +6752,7 @@ var AvlCosmicZoom = ({
           {
             gap: "xs",
             align: "center",
-            className: "absolute top-2 left-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-3 py-1.5",
+            className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
             children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -6775,12 +6775,12 @@ var AvlCosmicZoom = ({
             {
               gap: "xs",
               align: "center",
-              className: "absolute top-2 right-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-1.5 py-1",
+              className: "absolute top-2 right-2 z-10 bg-surface/80 backdrop-blur rounded-md px-1.5 py-1",
               children: orbData.traits.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
                 Box,
                 {
                   as: "button",
-                  className: `px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer border-none ${t.name === state.selectedTrait ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-transparent text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-surface)]"}`,
+                  className: `px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer border-none ${t.name === state.selectedTrait ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground hover:bg-surface"}`,
                   onClick: () => handleTraitSwitch(t.name),
                   children: t.name
                 },
@@ -6794,7 +6794,7 @@ var AvlCosmicZoom = ({
           {
             variant: "small",
             color: "muted",
-            className: "absolute bottom-2 right-2 z-10 bg-[var(--color-surface)]/60 backdrop-blur rounded px-2 py-1",
+            className: "absolute bottom-2 right-2 z-10 bg-surface/60 backdrop-blur rounded px-2 py-1",
             children: "Press Esc to zoom out"
           }
         ),

package/dist/avl/index.js

@@ -3597,30 +3597,30 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var variantStyles = {
-  h1: "text-4xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h2: "text-3xl font-bold tracking-tight text-[var(--color-foreground)]",
-  h3: "text-2xl font-bold text-[var(--color-foreground)]",
-  h4: "text-xl font-bold text-[var(--color-foreground)]",
-  h5: "text-lg font-bold text-[var(--color-foreground)]",
-  h6: "text-base font-bold text-[var(--color-foreground)]",
-  heading: "text-2xl font-bold text-[var(--color-foreground)]",
-  subheading: "text-lg font-semibold text-[var(--color-foreground)]",
-  body1: "text-base font-normal text-[var(--color-foreground)]",
-  body2: "text-sm font-normal text-[var(--color-foreground)]",
-  body: "text-base font-normal text-[var(--color-foreground)]",
-  caption: "text-xs font-normal text-[var(--color-muted-foreground)]",
-  overline: "text-xs uppercase tracking-wide font-bold text-[var(--color-muted-foreground)]",
-  small: "text-sm font-normal text-[var(--color-foreground)]",
-  large: "text-lg font-medium text-[var(--color-foreground)]",
-  label: "text-sm font-medium text-[var(--color-foreground)]"
+  h1: "text-4xl font-bold tracking-tight text-foreground",
+  h2: "text-3xl font-bold tracking-tight text-foreground",
+  h3: "text-2xl font-bold text-foreground",
+  h4: "text-xl font-bold text-foreground",
+  h5: "text-lg font-bold text-foreground",
+  h6: "text-base font-bold text-foreground",
+  heading: "text-2xl font-bold text-foreground",
+  subheading: "text-lg font-semibold text-foreground",
+  body1: "text-base font-normal text-foreground",
+  body2: "text-sm font-normal text-foreground",
+  body: "text-base font-normal text-foreground",
+  caption: "text-xs font-normal text-muted-foreground",
+  overline: "text-xs uppercase tracking-wide font-bold text-muted-foreground",
+  small: "text-sm font-normal text-foreground",
+  large: "text-lg font-medium text-foreground",
+  label: "text-sm font-medium text-foreground"
 };
 var colorStyles = {
-  primary: "text-[var(--color-foreground)]",
-  secondary: "text-[var(--color-muted-foreground)]",
-  muted: "text-[var(--color-muted-foreground)]",
-  error: "text-[var(--color-error)]",
-  success: "text-[var(--color-success)]",
-  warning: "text-[var(--color-warning)]",
+  primary: "text-foreground",
+  secondary: "text-muted-foreground",
+  muted: "text-muted-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning",
   inherit: "text-inherit"
 };
 var weightStyles = {
@@ -3835,28 +3835,28 @@ var marginYStyles = {
 };
 var bgStyles = {
   transparent: "bg-transparent",
-  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
-  secondary: "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
-  muted: "bg-[var(--color-muted)] text-[var(--color-foreground)]",
-  accent: "bg-[var(--color-accent)] text-[var(--color-accent-foreground)]",
-  surface: "bg-[var(--color-card)]",
-  overlay: "bg-[var(--color-card)]/80 backdrop-blur-sm"
+  primary: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  muted: "bg-muted text-foreground",
+  accent: "bg-accent text-accent-foreground",
+  surface: "bg-card",
+  overlay: "bg-card/80 backdrop-blur-sm"
 };
 var roundedStyles = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
-  "2xl": "rounded-[var(--radius-xl)]",
-  full: "rounded-[var(--radius-full)]"
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-xl",
+  full: "rounded-full"
 };
 var shadowStyles = {
   none: "shadow-none",
-  sm: "shadow-[var(--shadow-sm)]",
-  md: "shadow-[var(--shadow-main)]",
-  lg: "shadow-[var(--shadow-lg)]",
-  xl: "shadow-[var(--shadow-lg)]"
+  sm: "shadow-sm",
+  md: "shadow",
+  lg: "shadow-lg",
+  xl: "shadow-lg"
 };
 var displayStyles = {
   block: "block",
@@ -3944,7 +3944,7 @@ var Box = React8.forwardRef(
           // Background
           bgStyles[bg],
           // Border - uses theme variables
-          border && "border-[length:var(--border-width)] border-[var(--color-border)]",
+          border && "border-[length:var(--border-width)] border-border",
           // Rounded
           roundedStyles[rounded],
           // Shadow
@@ -6745,7 +6745,7 @@ var AvlCosmicZoom = ({
           {
             gap: "xs",
             align: "center",
-            className: "absolute top-2 left-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-3 py-1.5",
+            className: "absolute top-2 left-2 z-10 bg-surface/80 backdrop-blur rounded-md px-3 py-1.5",
             children: breadcrumbs.map((crumb, i) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
               i > 0 && /* @__PURE__ */ jsx(Typography, { variant: "small", color: "muted", className: "mx-1", children: "/" }),
               i < breadcrumbs.length - 1 ? /* @__PURE__ */ jsx(
@@ -6768,12 +6768,12 @@ var AvlCosmicZoom = ({
             {
               gap: "xs",
               align: "center",
-              className: "absolute top-2 right-2 z-10 bg-[var(--color-surface)]/80 backdrop-blur rounded-md px-1.5 py-1",
+              className: "absolute top-2 right-2 z-10 bg-surface/80 backdrop-blur rounded-md px-1.5 py-1",
               children: orbData.traits.map((t) => /* @__PURE__ */ jsx(
                 Box,
                 {
                   as: "button",
-                  className: `px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer border-none ${t.name === state.selectedTrait ? "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]" : "bg-transparent text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] hover:bg-[var(--color-surface)]"}`,
+                  className: `px-2.5 py-1 rounded-md text-xs font-medium transition-all cursor-pointer border-none ${t.name === state.selectedTrait ? "bg-primary text-primary-foreground" : "bg-transparent text-muted-foreground hover:text-foreground hover:bg-surface"}`,
                   onClick: () => handleTraitSwitch(t.name),
                   children: t.name
                 },
@@ -6787,7 +6787,7 @@ var AvlCosmicZoom = ({
           {
             variant: "small",
             color: "muted",
-            className: "absolute bottom-2 right-2 z-10 bg-[var(--color-surface)]/60 backdrop-blur rounded px-2 py-1",
+            className: "absolute bottom-2 right-2 z-10 bg-surface/60 backdrop-blur rounded px-2 py-1",
             children: "Press Esc to zoom out"
           }
         ),

package/dist/components/atoms/AnimatedGraphic.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+export type GraphicAnimation = 'draw' | 'fill' | 'pulse' | 'morph';
+export interface AnimatedGraphicProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** URL to an SVG file. Fetched and inlined to enable stroke/fill animations. */
+    src?: string;
+    /** Inline SVG string. Takes precedence over src if both provided. */
+    svgContent?: string;
+    /** Animation type applied to SVG paths/shapes */
+    animation?: GraphicAnimation;
+    /** Whether to run the animation (default: false). Controlled externally or via AnimatedReveal. */
+    animate?: boolean;
+    /** Animation duration in ms (default: 1200) */
+    duration?: number;
+    /** Delay before animation starts in ms (default: 0) */
+    delay?: number;
+    /** Easing function (default: cubic-bezier(0.16, 1, 0.3, 1)) */
+    easing?: string;
+    /** Width of the graphic container */
+    width?: string | number;
+    /** Height of the graphic container */
+    height?: string | number;
+    /** Stroke color override for SVG paths */
+    strokeColor?: string;
+    /** Fill color for the 'fill' animation end state */
+    fillColor?: string;
+    /** Alt text for accessibility */
+    alt?: string;
+}
+export declare const AnimatedGraphic: React.ForwardRefExoticComponent<AnimatedGraphicProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/atoms/AnimatedReveal.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export type RevealTrigger = 'scroll' | 'hover' | 'manual';
+export type RevealAnimation = 'fade-up' | 'fade-down' | 'fade-in' | 'fade-left' | 'fade-right' | 'scale' | 'scale-up' | 'none';
+export interface AnimatedRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** What triggers the animation */
+    trigger?: RevealTrigger;
+    /** Built-in animation preset */
+    animation?: RevealAnimation;
+    /** Animation duration in ms (default: 600) */
+    duration?: number;
+    /** Delay before animation starts in ms (default: 0) */
+    delay?: number;
+    /** How much of the element must be visible before triggering, 0-1 (default: 0.15) */
+    threshold?: number;
+    /** Animate only the first time the element enters the viewport (default: true) */
+    once?: boolean;
+    /** Manual control: when trigger='manual', set this to true to animate */
+    animate?: boolean;
+    /** Easing function (default: cubic-bezier(0.16, 1, 0.3, 1)) */
+    easing?: string;
+    /** Children: ReactNode or render function receiving animated state */
+    children: React.ReactNode | ((animated: boolean) => React.ReactNode);
+}
+export declare const AnimatedReveal: React.ForwardRefExoticComponent<AnimatedRevealProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -38,4 +38,6 @@ export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";
 export { MarketingStatCard, type StatCardProps as MarketingStatCardProps, type StatCardSize } from "./StatCard";
 export { ContentSection, type ContentSectionProps, type ContentSectionBackground, type ContentSectionPadding, } from "./ContentSection";
 export { PatternTile, getTileDimensions, type PatternTileProps, type PatternVariant } from "./PatternTile";
+export { AnimatedReveal, type AnimatedRevealProps, type RevealTrigger, type RevealAnimation } from "./AnimatedReveal";
+export { AnimatedGraphic, type AnimatedGraphicProps, type GraphicAnimation } from "./AnimatedGraphic";
 export * from "./game";