@tachui/modifiers 0.8.0-alpha → 0.8.5-alpha

package/dist/effects/index.js

@@ -0,0 +1,373 @@
+var b = Object.defineProperty;
+var x = (t, o, e) => o in t ? b(t, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[o] = e;
+var l = (t, o, e) => x(t, typeof o != "symbol" ? o + "" : o, e);
+import { globalModifierRegistry as v } from "@tachui/registry";
+import { blur as C, brightness as k, contrast as E, filter as O, saturate as H, grayscale as I, sepia as T, hueRotate as $, invert as R, filterDropShadow as P, vintagePhoto as j, blackAndWhite as Y, vibrant as z, warmTone as F, coolTone as M, faded as V, highKey as X, lowKey as Z, softFocus as U, highContrastMode as W, subtleBlur as B, darkModeInvert as D, colorInvert as K, saturation as N, hueRotation as A } from "./filters/index.js";
+import { transform as G, scale as L, rotate as _, translate as q, skew as J, rotateX as Q, rotateY as ee, rotateZ as te, perspective as re, advancedTransform as oe, matrix as ne, matrix3d as se, rotate3d as ae, scale3d as ie, translate3d as le, scaleX as ce, scaleY as ue, scaleZ as de, translateX as he, translateY as fe, translateZ as me, perspectiveOrigin as pe, transformStyle as ve, backfaceVisibility as ge } from "./transforms/index.js";
+import { shadow as ye, textShadow as Se, dropShadow as we, insetShadow as be, elevationShadow as xe, glowEffect as Ce, neonEffect as ke, neumorphism as Ee, neumorphismPressed as Oe, layeredShadow as He, textShadowSubtle as Ie, textShadowStrong as Te, textOutline as $e, textEmbossed as Re, textEngraved as Pe, swiftUIShadow as je, reactiveShadow as Ye, animatedShadow as ze } from "./shadows/index.js";
+import { BaseModifier as g } from "@tachui/core/modifiers/base";
+import { backdropFilter as Fe, glassmorphism as Me, customGlassmorphism as Ve } from "./backdrop/index.js";
+class Xe extends g {
+  constructor(e) {
+    const r = { cursor: "auto" };
+    for (const [s, n] of Object.entries(e))
+      typeof n == "function" && "peek" in n ? r[s] = n.peek() : r[s] = n;
+    super(r);
+    l(this, "type", "cursor");
+    l(this, "priority", 10);
+  }
+  apply(e, r) {
+    r.element && (process.env.NODE_ENV === "development" && this.validateCursorValue(this.properties.cursor), this.applyStyles(r.element, { cursor: this.properties.cursor }));
+  }
+  validateCursorValue(e) {
+    ![
+      "auto",
+      "default",
+      "pointer",
+      "text",
+      "wait",
+      "help",
+      "not-allowed",
+      "none",
+      "grab",
+      "grabbing",
+      "zoom-in",
+      "zoom-out",
+      "alias",
+      "cell",
+      "copy"
+    ].includes(e) && !e.includes("url(") && console.warn(
+      `Unknown cursor value: "${e}". See documentation for valid cursor values.`
+    );
+  }
+}
+const u = class u extends g {
+  constructor(e) {
+    const r = {};
+    for (const [s, n] of Object.entries(e))
+      typeof n == "function" && "peek" in n ? r[s] = n.peek() : r[s] = n;
+    super(r);
+    l(this, "type", "hover");
+    l(this, "priority", 15);
+  }
+  apply(e, r) {
+    if (!r.element || !(this.properties.isEnabled !== !1)) return;
+    const n = `tachui-hover-${++u.hoverCount}`;
+    r.element.classList.add(n), this.addHoverStyles(n, this.properties);
+  }
+  addHoverStyles(e, r) {
+    const s = this.getOrCreateStyleSheet(), n = this.formatTransition(r.transition);
+    if (n) {
+      const d = `.${e} { transition: ${n}; }`;
+      try {
+        s.insertRule(d);
+      } catch (h) {
+        console.warn("Failed to add transition rule:", h);
+      }
+    }
+    const m = this.computeHoverStyles(r);
+    if (Object.keys(m).length > 0) {
+      const d = Object.entries(m).map(([f, S]) => {
+        const p = this.toCSSProperty(f), w = [
+          "background-color",
+          "background",
+          "border-color",
+          "color"
+        ].includes(p);
+        return `${p}: ${S}${w ? " !important" : ""}`;
+      }).join("; "), h = `.${e}:hover { ${d} }`;
+      try {
+        s.insertRule(h);
+      } catch (f) {
+        console.warn("Failed to add hover rule:", f);
+      }
+    }
+  }
+  computeHoverStyles(e) {
+    const r = {};
+    return e.effect && Object.assign(r, this.getSwiftUIEffectStyles(e.effect)), e.hoverStyles && Object.assign(r, e.hoverStyles), r;
+  }
+  getSwiftUIEffectStyles(e) {
+    switch (e) {
+      case "automatic":
+        return {
+          transform: "scale(1.02)",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
+        };
+      case "highlight":
+        return {
+          backgroundColor: "rgba(0, 0, 0, 0.05)",
+          filter: "brightness(0.95)"
+        };
+      case "lift":
+        return {
+          transform: "translateY(-2px)",
+          boxShadow: "0 8px 24px rgba(0, 0, 0, 0.15)"
+        };
+      case "scale":
+        return {
+          transform: "scale(1.05)"
+        };
+      default:
+        return {};
+    }
+  }
+  formatTransition(e) {
+    return e === void 0 ? "all 200ms ease" : typeof e == "number" ? `all ${e}ms ease` : e;
+  }
+  getOrCreateStyleSheet() {
+    const e = document.getElementById("tachui-hover-styles");
+    if (e && e instanceof HTMLStyleElement)
+      return e.sheet;
+    const r = document.createElement("style");
+    return r.id = "tachui-hover-styles", document.head.appendChild(r), r.sheet;
+  }
+};
+l(u, "hoverCount", 0);
+let a = u;
+function i(t) {
+  return new Xe({ cursor: t });
+}
+function c(t, o) {
+  return new a({ effect: t, isEnabled: o });
+}
+function Ze(t, o) {
+  return new a({ hoverStyles: t, transition: o });
+}
+function Ue(t, o = 200) {
+  return new a({ hoverStyles: t, transition: o });
+}
+function We(t, o) {
+  return new a({ effect: t, isEnabled: o });
+}
+function Be() {
+  return i("pointer");
+}
+function De() {
+  return i("grab");
+}
+function Ke() {
+  return i("text");
+}
+function Ne() {
+  return i("not-allowed");
+}
+function Ae() {
+  return i("wait");
+}
+function Ge() {
+  return i("help");
+}
+function Le(t = "in") {
+  return i(t === "in" ? "zoom-in" : "zoom-out");
+}
+function _e() {
+  return c("lift");
+}
+function qe() {
+  return c("automatic");
+}
+function Je() {
+  return c("highlight");
+}
+function Qe() {
+  return c("scale");
+}
+function et(t) {
+  return new a({ hoverStyles: t });
+}
+function tt(t) {
+  return new a({ hoverStyles: t });
+}
+function rt(t) {
+  return new a({ hoverStyles: t });
+}
+const y = [
+  // Filter system
+  ["blur", C],
+  ["brightness", k],
+  ["contrast", E],
+  ["filter", O],
+  ["saturate", H],
+  ["grayscale", I],
+  ["sepia", T],
+  ["hueRotate", $],
+  ["invert", R],
+  ["filterDropShadow", P],
+  ["vintagePhoto", j],
+  ["blackAndWhite", Y],
+  ["vibrant", z],
+  ["warmTone", F],
+  ["coolTone", M],
+  ["faded", V],
+  ["highKey", X],
+  ["lowKey", Z],
+  ["softFocus", U],
+  ["highContrastMode", W],
+  ["subtleBlur", B],
+  ["darkModeInvert", D],
+  ["colorInvert", K],
+  ["saturation", N],
+  ["hueRotation", A],
+  // Transform utilities
+  ["transform", G],
+  ["scale", L],
+  ["rotate", _],
+  ["translate", q],
+  ["skew", J],
+  ["rotateX", Q],
+  ["rotateY", ee],
+  ["rotateZ", te],
+  ["perspective", re],
+  ["advancedTransform", oe],
+  ["matrix", ne],
+  ["matrix3d", se],
+  ["rotate3d", ae],
+  ["scale3d", ie],
+  ["translate3d", le],
+  ["scaleX", ce],
+  ["scaleY", ue],
+  ["scaleZ", de],
+  ["translateX", he],
+  ["translateY", fe],
+  ["translateZ", me],
+  ["perspectiveOrigin", pe],
+  ["transformStyle", ve],
+  ["backfaceVisibility", ge],
+  // Shadows
+  ["shadow", ye],
+  ["textShadow", Se],
+  ["dropShadow", we],
+  ["insetShadow", be],
+  ["elevationShadow", xe],
+  ["glowEffect", Ce],
+  ["neonEffect", ke],
+  ["neumorphism", Ee],
+  ["neumorphismPressed", Oe],
+  ["layeredShadow", He],
+  ["textShadowSubtle", Ie],
+  ["textShadowStrong", Te],
+  ["textOutline", $e],
+  ["textEmbossed", Re],
+  ["textEngraved", Pe],
+  ["swiftUIShadow", je],
+  ["reactiveShadow", Ye],
+  ["animatedShadow", ze],
+  // Interactive effects
+  ["hover", Ze],
+  ["active", et],
+  ["focus", tt],
+  ["pressed", rt],
+  ["hoverEffect", c],
+  ["hoverWithTransition", Ue],
+  ["conditionalHover", We],
+  ["interactiveCursor", Be],
+  ["draggableCursor", De],
+  ["textCursor", Ke],
+  ["disabledCursor", Ne],
+  ["loadingCursor", Ae],
+  ["helpCursor", Ge],
+  ["zoomCursor", Le],
+  ["buttonHover", _e],
+  ["cardHover", qe],
+  ["linkHover", Je],
+  ["imageHover", Qe],
+  // Backdrop / glassmorphism
+  ["backdropFilter", Fe],
+  ["glassmorphism", Me],
+  ["customGlassmorphism", Ve]
+];
+y.forEach(([t, o]) => {
+  v.has(t) || v.register(t, o);
+});
+process.env.NODE_ENV === "development" && console.log(`@tachui/modifiers/effects: Preloaded and registered ${y.length} effects modifiers.`);
+export {
+  et as active,
+  oe as advancedTransform,
+  ze as animatedShadow,
+  Fe as backdropFilter,
+  ge as backfaceVisibility,
+  Y as blackAndWhite,
+  C as blur,
+  k as brightness,
+  _e as buttonHover,
+  qe as cardHover,
+  K as colorInvert,
+  We as conditionalHover,
+  E as contrast,
+  M as coolTone,
+  Ve as customGlassmorphism,
+  D as darkModeInvert,
+  Ne as disabledCursor,
+  De as draggableCursor,
+  we as dropShadow,
+  xe as elevationShadow,
+  V as faded,
+  O as filter,
+  P as filterDropShadow,
+  tt as focus,
+  Me as glassmorphism,
+  Ce as glowEffect,
+  I as grayscale,
+  Ge as helpCursor,
+  W as highContrastMode,
+  X as highKey,
+  Ze as hover,
+  c as hoverEffect,
+  Ue as hoverWithTransition,
+  $ as hueRotate,
+  A as hueRotation,
+  Qe as imageHover,
+  be as insetShadow,
+  Be as interactiveCursor,
+  R as invert,
+  He as layeredShadow,
+  Je as linkHover,
+  Ae as loadingCursor,
+  Z as lowKey,
+  ne as matrix,
+  se as matrix3d,
+  ke as neonEffect,
+  Ee as neumorphism,
+  Oe as neumorphismPressed,
+  re as perspective,
+  pe as perspectiveOrigin,
+  rt as pressed,
+  Ye as reactiveShadow,
+  _ as rotate,
+  ae as rotate3d,
+  Q as rotateX,
+  ee as rotateY,
+  te as rotateZ,
+  H as saturate,
+  N as saturation,
+  L as scale,
+  ie as scale3d,
+  ce as scaleX,
+  ue as scaleY,
+  de as scaleZ,
+  T as sepia,
+  ye as shadow,
+  J as skew,
+  U as softFocus,
+  B as subtleBlur,
+  je as swiftUIShadow,
+  Ke as textCursor,
+  Re as textEmbossed,
+  Pe as textEngraved,
+  $e as textOutline,
+  Se as textShadow,
+  Te as textShadowStrong,
+  Ie as textShadowSubtle,
+  G as transform,
+  ve as transformStyle,
+  q as translate,
+  le as translate3d,
+  he as translateX,
+  fe as translateY,
+  me as translateZ,
+  z as vibrant,
+  j as vintagePhoto,
+  F as warmTone,
+  Le as zoomCursor
+};

package/dist/effects/internal-exports.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Internal exports for registry registration
+ * This file collects all modifier factory functions for auto-registration
+ */
+export { filter, blur, brightness, contrast } from './filters';
+export { transform } from './transforms';
+export { cursor, hover } from './effects';
+export { shadow, textShadow } from './shadows';
+//# sourceMappingURL=internal-exports.d.ts.map

package/dist/effects/internal-exports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal-exports.d.ts","sourceRoot":"","sources":["../../src/effects/internal-exports.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAA;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA"}

package/dist/effects/shadows/index.d.ts

@@ -0,0 +1,316 @@
+/**
+ * Shadow Modifiers - Comprehensive shadow system
+ *
+ * Provides comprehensive shadow capabilities including box shadows, text shadows,
+ * inset shadows, multiple shadows, and filter-based drop shadows with SwiftUI compatibility.
+ */
+import type { Signal } from '@tachui/types/reactive';
+import type { DOMNode } from '@tachui/types/runtime';
+import { BaseModifier } from '@tachui/core/modifiers/base';
+import type { ModifierContext, ReactiveModifierProps } from '@tachui/types/modifiers';
+export interface ShadowConfig {
+    x?: number | Signal<number>;
+    y?: number | Signal<number>;
+    blur?: number | Signal<number>;
+    radius?: number | Signal<number>;
+    spread?: number | Signal<number>;
+    color?: string | Signal<string>;
+    inset?: boolean | Signal<boolean>;
+}
+export interface ReactiveTextShadowConfig {
+    x?: number | Signal<number>;
+    y?: number | Signal<number>;
+    blur?: number | Signal<number>;
+    radius?: number | Signal<number>;
+    color?: string | Signal<string>;
+}
+export interface DropShadowConfig {
+    x?: number | Signal<number>;
+    y?: number | Signal<number>;
+    blur?: number | Signal<number>;
+    radius?: number | Signal<number>;
+    color?: string | Signal<string>;
+}
+export interface ShadowOptions {
+    shadow?: ShadowConfig | ShadowConfig[] | string;
+}
+export interface TextShadowOptions {
+    textShadow?: ReactiveTextShadowConfig | ReactiveTextShadowConfig[] | string;
+}
+export interface DropShadowOptions {
+    dropShadow?: DropShadowConfig | DropShadowConfig[] | string;
+}
+export type ReactiveShadowOptions = ReactiveModifierProps<ShadowOptions>;
+export type ReactiveTextShadowOptions = ReactiveModifierProps<TextShadowOptions>;
+export type ReactiveDropShadowOptions = ReactiveModifierProps<DropShadowOptions>;
+export declare class ShadowModifier extends BaseModifier<ShadowOptions> {
+    readonly type = "shadow";
+    readonly priority = 25;
+    constructor(options: ReactiveShadowOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyShadowStyles;
+    private applySingleShadow;
+    private applyMultipleShadows;
+    private generateShadowCSS;
+    private resolveValue;
+}
+export declare class TextShadowModifier extends BaseModifier<TextShadowOptions> {
+    readonly type = "textShadow";
+    readonly priority = 26;
+    constructor(options: ReactiveTextShadowOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyTextShadowStyles;
+    private applySingleTextShadow;
+    private applyMultipleTextShadows;
+    private generateTextShadowCSS;
+    private resolveValue;
+}
+export declare class DropShadowModifier extends BaseModifier<DropShadowOptions> {
+    readonly type = "dropShadow";
+    readonly priority = 27;
+    constructor(options: ReactiveDropShadowOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private applyDropShadowStyles;
+    private applySingleDropShadow;
+    private applyMultipleDropShadows;
+    private applyFilterDropShadow;
+    private generateDropShadowCSS;
+    private resolveValue;
+}
+/**
+ * General box shadow modifier with flexible configuration
+ *
+ * @example
+ * ```typescript
+ * .shadow({ x: 0, y: 2, blur: 4, color: 'rgba(0,0,0,0.1)' })
+ * .shadow('0 2px 4px rgba(0,0,0,0.1)')  // Direct CSS shadow string
+ * ```
+ */
+export declare function shadow(config: ShadowConfig | ShadowConfig[] | string): ShadowModifier;
+/**
+ * Text shadow modifier for typography effects
+ *
+ * @example
+ * ```typescript
+ * .textShadow({ x: 1, y: 1, blur: 2, color: 'rgba(0,0,0,0.5)' })
+ * .textShadow('1px 1px 2px rgba(0,0,0,0.5)')  // Direct CSS text shadow
+ * ```
+ */
+export declare function textShadow(config: ReactiveTextShadowConfig | ReactiveTextShadowConfig[] | string): TextShadowModifier;
+/**
+ * Filter-based drop shadow modifier (alternative to box-shadow)
+ *
+ * @example
+ * ```typescript
+ * .dropShadow({ x: 0, y: 4, blur: 8, color: 'rgba(0,0,0,0.2)' })
+ * .dropShadow('0 4px 8px rgba(0,0,0,0.2)')  // Direct CSS drop shadow
+ * ```
+ */
+export declare function dropShadow(config: DropShadowConfig | DropShadowConfig[] | string): DropShadowModifier;
+/**
+ * Multiple box shadows for complex shadow effects
+ *
+ * @example
+ * ```typescript
+ * .shadows([
+ *   { x: 0, y: 1, blur: 3, color: 'rgba(0,0,0,0.12)' },
+ *   { x: 0, y: 1, blur: 2, color: 'rgba(0,0,0,0.24)' }
+ * ])
+ * ```
+ */
+export declare function shadows(configs: ShadowConfig[]): ShadowModifier;
+/**
+ * Inset shadow for inner depth effects
+ *
+ * @example
+ * ```typescript
+ * .insetShadow({ x: 0, y: 2, blur: 4, color: 'rgba(0,0,0,0.1)' })
+ * ```
+ */
+export declare function insetShadow(config: Omit<ShadowConfig, 'inset'>): ShadowModifier;
+export type ShadowPreset = 'none' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'inner' | 'outline';
+/**
+ * Predefined shadow presets based on common design patterns
+ *
+ * @example
+ * ```typescript
+ * .shadowPreset('small')    // Subtle shadow
+ * .shadowPreset('medium')   // Standard shadow
+ * .shadowPreset('large')    // Prominent shadow
+ * .shadowPreset('inner')    // Inset shadow
+ * ```
+ */
+export declare function shadowPreset(preset: ShadowPreset): ShadowModifier;
+/**
+ * Material Design elevation shadows
+ *
+ * @example
+ * ```typescript
+ * .elevationShadow(1)    // Card elevation
+ * .elevationShadow(4)    // Button elevation
+ * .elevationShadow(8)    // Modal elevation
+ * ```
+ */
+export declare function elevationShadow(level: number): ShadowModifier;
+/**
+ * Glow effect using multiple colored shadows
+ *
+ * @example
+ * ```typescript
+ * .glowEffect('#007AFF', 4)     // Blue glow
+ * .glowEffect('#FF3B30', 8)     // Red glow with larger radius
+ * ```
+ */
+export declare function glowEffect(color: string, intensity?: number): ShadowModifier;
+/**
+ * Neon effect with bright colored glow
+ *
+ * @example
+ * ```typescript
+ * .neonEffect('#00FF00')        // Green neon
+ * .neonEffect('#FF006E', 8)     // Pink neon with custom intensity
+ * ```
+ */
+export declare function neonEffect(color: string, intensity?: number): ShadowModifier;
+/**
+ * Neumorphism (soft UI) shadow effect
+ *
+ * @example
+ * ```typescript
+ * .neumorphism('#f0f0f0')          // Light neumorphism
+ * .neumorphism('#2d2d2d', true)    // Dark neumorphism
+ * ```
+ */
+export declare function neumorphism(_backgroundColor: string, dark?: boolean): ShadowModifier;
+/**
+ * Pressed/inset neumorphism effect
+ *
+ * @example
+ * ```typescript
+ * .neumorphismPressed('#f0f0f0')   // Light pressed effect
+ * ```
+ */
+export declare function neumorphismPressed(_backgroundColor: string, dark?: boolean): ShadowModifier;
+/**
+ * Layered shadow for depth perception
+ *
+ * @example
+ * ```typescript
+ * .layeredShadow()           // Default layered effect
+ * .layeredShadow(3, 0.8)     // 3 layers with 80% opacity multiplier
+ * ```
+ */
+export declare function layeredShadow(layers?: number, opacityMultiplier?: number): ShadowModifier;
+/**
+ * Subtle text shadow for readability on light backgrounds
+ *
+ * @example
+ * ```typescript
+ * .textShadowSubtle()                    // Default subtle shadow
+ * .textShadowSubtle('rgba(0,0,0,0.3)')   // Custom color
+ * ```
+ */
+export declare function textShadowSubtle(color?: string): TextShadowModifier;
+/**
+ * Strong text shadow for readability on busy backgrounds
+ *
+ * @example
+ * ```typescript
+ * .textShadowStrong()                    // Default strong shadow
+ * .textShadowStrong('rgba(0,0,0,0.8)')   // Custom color
+ * ```
+ */
+export declare function textShadowStrong(color?: string): TextShadowModifier;
+/**
+ * Outline text effect using multiple text shadows
+ *
+ * @example
+ * ```typescript
+ * .textOutline('#000000')          // Black outline
+ * .textOutline('#FFFFFF', 2)       // White outline with 2px thickness
+ * ```
+ */
+export declare function textOutline(color: string, thickness?: number): TextShadowModifier;
+/**
+ * Embossed text effect
+ *
+ * @example
+ * ```typescript
+ * .textEmbossed()                      // Default embossed effect
+ * .textEmbossed('#ffffff', '#000000')  // Custom light and dark colors
+ * ```
+ */
+export declare function textEmbossed(lightColor?: string, darkColor?: string): TextShadowModifier;
+/**
+ * Engraved text effect (opposite of embossed)
+ *
+ * @example
+ * ```typescript
+ * .textEngraved()                      // Default engraved effect
+ * .textEngraved('#000000', '#ffffff')  // Custom dark and light colors
+ * ```
+ */
+export declare function textEngraved(darkColor?: string, lightColor?: string): TextShadowModifier;
+/**
+ * SwiftUI-compatible shadow modifier (matches SwiftUI .shadow() behavior)
+ *
+ * @example
+ * ```typescript
+ * .swiftUIShadow()                           // Default SwiftUI shadow
+ * .swiftUIShadow({ radius: 8, y: 4 })        // Custom SwiftUI shadow
+ * ```
+ */
+export declare function swiftUIShadow(config?: {
+    color?: string;
+    radius?: number;
+    x?: number;
+    y?: number;
+}): ShadowModifier;
+/**
+ * Convenience functions for common shadow directions
+ */
+export declare const shadowDirections: {
+    /**
+     * Top shadow (light coming from below)
+     */
+    top: (intensity?: number) => ShadowModifier;
+    /**
+     * Bottom shadow (light coming from above) - most common
+     */
+    bottom: (intensity?: number) => ShadowModifier;
+    /**
+     * Left shadow (light coming from right)
+     */
+    left: (intensity?: number) => ShadowModifier;
+    /**
+     * Right shadow (light coming from left)
+     */
+    right: (intensity?: number) => ShadowModifier;
+    /**
+     * All-around shadow (ambient lighting)
+     */
+    around: (intensity?: number) => ShadowModifier;
+};
+/**
+ * Create a reactive shadow that responds to a signal
+ *
+ * @example
+ * ```typescript
+ * const isHovered = createSignal(false)
+ * .reactiveShadow(isHovered,
+ *   { x: 0, y: 2, blur: 4, color: 'rgba(0,0,0,0.1)' },  // normal
+ *   { x: 0, y: 8, blur: 16, color: 'rgba(0,0,0,0.2)' }  // hovered
+ * )
+ * ```
+ */
+export declare function reactiveShadow(condition: Signal<boolean>, trueShadow: ShadowConfig, falseShadow?: ShadowConfig): ShadowModifier;
+/**
+ * Animated shadow that transitions between states
+ *
+ * @example
+ * ```typescript
+ * .animatedShadow(300)  // 300ms transition
+ * ```
+ */
+export declare function animatedShadow(_duration?: number): ShadowModifier;
+//# sourceMappingURL=index.d.ts.map