@tachui/core 0.7.0-alpha1

package/dist/modifiers/core.js

@@ -0,0 +1,398 @@
+import { AnimationModifier as i, AppearanceModifier as t, LifecycleModifier as u, InteractionModifier as d, LayoutModifier as a } from "./base.js";
+import { BackgroundModifier as g } from "./background.js";
+const f = {
+  /**
+   * Set foreground (text) color
+   */
+  foregroundColor(r) {
+    return new t({ foregroundColor: r });
+  },
+  /**
+   * Set frame dimensions with support for infinity
+   */
+  frame(r, e, o) {
+    return new a({
+      frame: {
+        width: r,
+        height: e,
+        ...o
+      }
+    });
+  },
+  /**
+   * Set padding on all sides
+   */
+  padding(r) {
+    return new a({ padding: r });
+  },
+  /**
+   * Set padding with detailed control
+   */
+  paddingDetailed(r) {
+    return new a({ padding: r });
+  },
+  /**
+   * Set horizontal and vertical padding
+   */
+  paddingSymmetric(r, e) {
+    return new a({
+      padding: {
+        left: r,
+        right: r,
+        top: e,
+        bottom: e
+      }
+    });
+  },
+  /**
+   * Set margin on all sides
+   */
+  margin(r) {
+    return new a({ margin: r });
+  },
+  /**
+   * Set margin with detailed control
+   */
+  marginDetailed(r) {
+    return new a({ margin: r });
+  },
+  /**
+   * Set content alignment
+   */
+  alignment(r) {
+    return new a({ alignment: r });
+  },
+  /**
+   * Set layout priority for ZStack container sizing and flexible layout
+   * Higher priority views determine container size in ZStack
+   */
+  layoutPriority(r) {
+    return new a({ layoutPriority: r });
+  }
+}, n = {
+  /**
+   * Set foreground (text) color
+   */
+  foregroundColor(r) {
+    return new t({ foregroundColor: r });
+  },
+  /**
+   * Set background color
+   */
+  backgroundColor(r) {
+    return new t({ backgroundColor: r });
+  },
+  /**
+   * Set background (supports gradients)
+   */
+  background(r) {
+    return new g({ background: r });
+  },
+  /**
+   * Set font properties
+   */
+  font(r) {
+    return new t({ font: r });
+  },
+  /**
+   * Set font size
+   */
+  fontSize(r) {
+    return new t({ font: { size: r } });
+  },
+  /**
+   * Set font weight
+   */
+  fontWeight(r) {
+    return new t({ font: { weight: r } });
+  },
+  /**
+   * Set font family
+   */
+  fontFamily(r) {
+    return new t({ font: { family: r } });
+  },
+  /**
+   * Set opacity
+   */
+  opacity(r) {
+    return new t({ opacity: r });
+  },
+  /**
+   * Set corner radius (enhanced)
+   */
+  cornerRadius(r) {
+    return new t({ cornerRadius: r });
+  },
+  /**
+   * Set border
+   */
+  border(r, e = "#000000", o = "solid") {
+    return new t({
+      border: { width: r, color: e, style: o }
+    });
+  },
+  /**
+   * Set detailed border properties
+   */
+  borderDetailed(r) {
+    return new t({ border: r });
+  },
+  /**
+   * Add shadow
+   */
+  shadow(r) {
+    return new t({ shadow: r });
+  },
+  /**
+   * Add drop shadow with common settings
+   */
+  dropShadow(r = 0, e = 2, o = 4, s = "rgba(0,0,0,0.25)") {
+    return new t({
+      shadow: { x: r, y: e, radius: o, color: s }
+    });
+  }
+}, c = {
+  /**
+   * Add tap handler
+   */
+  onTap(r) {
+    return new d({ onTap: r });
+  },
+  /**
+   * Add hover handler
+   */
+  onHover(r) {
+    return new d({ onHover: r });
+  },
+  /**
+   * Add focus handler
+   */
+  onFocus(r) {
+    return new d({ onFocus: r });
+  },
+  /**
+   * Set disabled state
+   */
+  disabled(r = !0) {
+    return new d({ disabled: r });
+  },
+  /**
+   * Set accessibility label
+   */
+  accessibilityLabel(r) {
+    return new d({ accessibilityLabel: r });
+  },
+  /**
+   * Set accessibility hint
+   */
+  accessibilityHint(r) {
+    return new d({ accessibilityHint: r });
+  }
+}, l = {
+  /**
+   * Add transition
+   */
+  transition(r = "all", e = 300, o = "ease", s = 0) {
+    return new i({
+      transition: { property: r, duration: e, easing: o, delay: s }
+    });
+  },
+  /**
+   * Add detailed transition
+   */
+  transitionDetailed(r) {
+    return new i({ transition: r });
+  },
+  /**
+   * Add animation
+   */
+  animation(r) {
+    return new i({ animation: r });
+  },
+  /**
+   * Add fade in animation
+   */
+  fadeIn(r = 300) {
+    return new i({
+      animation: {
+        keyframes: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" }
+        },
+        duration: r,
+        easing: "ease-out"
+      }
+    });
+  },
+  /**
+   * Add fade out animation
+   */
+  fadeOut(r = 300) {
+    return new i({
+      animation: {
+        keyframes: {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" }
+        },
+        duration: r,
+        easing: "ease-in"
+      }
+    });
+  },
+  /**
+   * Add slide in animation
+   */
+  slideIn(r = "up", e = 300, o = 20) {
+    const s = {
+      up: [`translateY(${o}px)`, "translateY(0)"],
+      down: [`translateY(-${o}px)`, "translateY(0)"],
+      left: [`translateX(${o}px)`, "translateX(0)"],
+      right: [`translateX(-${o}px)`, "translateX(0)"]
+    }, [p, w] = s[r];
+    return new i({
+      animation: {
+        keyframes: {
+          "0%": { transform: p, opacity: "0" },
+          "100%": { transform: w, opacity: "1" }
+        },
+        duration: e,
+        easing: "ease-out"
+      }
+    });
+  },
+  /**
+   * Add scale animation
+   */
+  scaleAnimation(r = 0.8, e = 1, o = 300) {
+    return new i({
+      animation: {
+        keyframes: {
+          "0%": { transform: `scale(${r})`, opacity: "0" },
+          "100%": { transform: `scale(${e})`, opacity: "1" }
+        },
+        duration: o,
+        easing: "ease-out"
+      }
+    });
+  }
+}, m = {
+  /**
+   * Execute handler when component appears in viewport
+   */
+  onAppear(r) {
+    return new u({ onAppear: r });
+  },
+  /**
+   * Execute handler when component disappears from viewport
+   */
+  onDisappear(r) {
+    return new u({ onDisappear: r });
+  },
+  /**
+   * Execute async task with automatic cancellation on component unmount
+   */
+  task(r, e) {
+    return new u({
+      task: {
+        operation: r,
+        id: e?.id,
+        priority: e?.priority || "default"
+      }
+    });
+  },
+  /**
+   * Add pull-to-refresh functionality
+   */
+  refreshable(r, e) {
+    return new u({
+      refreshable: {
+        onRefresh: r,
+        isRefreshing: e
+      }
+    });
+  }
+}, y = {
+  /**
+   * Card-like appearance
+   */
+  card(r = 16) {
+    return [
+      n.backgroundColor("#ffffff"),
+      n.cornerRadius(8),
+      n.shadow({
+        x: 0,
+        y: 2,
+        radius: 8,
+        color: "rgba(0,0,0,0.1)"
+      }),
+      f.padding(r)
+    ];
+  },
+  /**
+   * Button-like appearance
+   */
+  button(r = "#007AFF", e = "#ffffff") {
+    return [
+      n.backgroundColor(r),
+      n.foregroundColor(e),
+      n.cornerRadius(6),
+      f.paddingSymmetric(16, 8),
+      c.onHover((o) => {
+      }),
+      l.transition("all", 150)
+    ];
+  },
+  /**
+   * Input field appearance
+   */
+  input() {
+    return [
+      n.border(1, "#d1d5db"),
+      n.cornerRadius(4),
+      f.padding(8),
+      l.transition("border-color", 150),
+      c.onFocus((r) => {
+      })
+    ];
+  },
+  /**
+   * Typography presets
+   */
+  typography: {
+    title: () => [
+      n.fontSize(24),
+      n.fontWeight("bold")
+    ],
+    heading: () => [
+      n.fontSize(20),
+      n.fontWeight("600")
+    ],
+    body: () => [
+      n.fontSize(16),
+      n.fontWeight("normal")
+    ],
+    caption: () => [
+      n.fontSize(12),
+      n.fontWeight("normal"),
+      n.opacity(0.7)
+    ]
+  }
+}, k = {
+  ...f,
+  ...n,
+  ...c,
+  ...l,
+  ...m,
+  presets: y
+};
+export {
+  l as animationModifiers,
+  n as appearanceModifiers,
+  k as coreModifiers,
+  c as interactionModifiers,
+  f as layoutModifiers,
+  m as lifecycleModifiers,
+  y as presetModifiers
+};
+//# sourceMappingURL=core.js.map

package/dist/modifiers/core.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"core.js","sources":["../../src/modifiers/core.ts"],"sourcesContent":["/**\n * Core SwiftUI Modifiers\n *\n * Implementation of the most commonly used SwiftUI modifiers\n * for layout, appearance, and interaction.\n */\n\nimport type { Asset } from '../assets/Asset'\nimport type { Signal } from '../reactive/types'\nimport type { Dimension } from '../constants/layout'\nimport type { GradientDefinition } from '../gradients/types'\nimport {\n  AnimationModifier,\n  AppearanceModifier,\n  InteractionModifier,\n  LayoutModifier,\n  LifecycleModifier,\n} from './base'\nimport { BackgroundModifier } from './background'\nimport type {\n  AnimationModifierProps,\n  AppearanceModifierProps,\n  LayoutModifierProps,\n  Modifier,\n} from './types'\n\n/**\n * Layout Modifiers\n */\nexport const layoutModifiers = {\n  /**\n   * Set foreground (text) color\n   */\n  foregroundColor(color: string | Signal<string> | any): Modifier {\n    return new AppearanceModifier({ foregroundColor: color })\n  },\n\n  /**\n   * Set frame dimensions with support for infinity\n   */\n  frame(\n    width?: Dimension,\n    height?: Dimension,\n    options?: Omit<LayoutModifierProps['frame'], 'width' | 'height'>\n  ): Modifier {\n    return new LayoutModifier({\n      frame: {\n        width,\n        height,\n        ...options,\n      },\n    })\n  },\n\n  /**\n   * Set padding on all sides\n   */\n  padding(value: number): Modifier {\n    return new LayoutModifier({ padding: value })\n  },\n\n  /**\n   * Set padding with detailed control\n   */\n  paddingDetailed(options: LayoutModifierProps['padding']): Modifier {\n    return new LayoutModifier({ padding: options })\n  },\n\n  /**\n   * Set horizontal and vertical padding\n   */\n  paddingSymmetric(horizontal?: number, vertical?: number): Modifier {\n    return new LayoutModifier({\n      padding: {\n        left: horizontal,\n        right: horizontal,\n        top: vertical,\n        bottom: vertical,\n      },\n    })\n  },\n\n  /**\n   * Set margin on all sides\n   */\n  margin(value: number): Modifier {\n    return new LayoutModifier({ margin: value })\n  },\n\n  /**\n   * Set margin with detailed control\n   */\n  marginDetailed(options: LayoutModifierProps['margin']): Modifier {\n    return new LayoutModifier({ margin: options })\n  },\n\n  /**\n   * Set content alignment\n   */\n  alignment(value: LayoutModifierProps['alignment']): Modifier {\n    return new LayoutModifier({ alignment: value })\n  },\n\n  /**\n   * Set layout priority for ZStack container sizing and flexible layout\n   * Higher priority views determine container size in ZStack\n   */\n  layoutPriority(priority: number | Signal<number>): Modifier {\n    return new LayoutModifier({ layoutPriority: priority })\n  },\n}\n\n/**\n * Appearance Modifiers\n */\nexport const appearanceModifiers = {\n  /**\n   * Set foreground (text) color\n   */\n  foregroundColor(color: string | Asset | Signal<string>): Modifier {\n    return new AppearanceModifier({ foregroundColor: color })\n  },\n\n  /**\n   * Set background color\n   */\n  backgroundColor(color: string | Asset | Signal<string>): Modifier {\n    return new AppearanceModifier({ backgroundColor: color })\n  },\n\n  /**\n   * Set background (supports gradients)\n   */\n  background(value: string | GradientDefinition | Asset): Modifier {\n    return new BackgroundModifier({ background: value })\n  },\n\n  /**\n   * Set font properties\n   */\n  font(options: AppearanceModifierProps['font']): Modifier {\n    return new AppearanceModifier({ font: options })\n  },\n\n  /**\n   * Set font size\n   */\n  fontSize(size: number | string): Modifier {\n    return new AppearanceModifier({ font: { size } })\n  },\n\n  /**\n   * Set font weight\n   */\n  fontWeight(weight: NonNullable<AppearanceModifierProps['font']>['weight']): Modifier {\n    return new AppearanceModifier({ font: { weight } })\n  },\n\n  /**\n   * Set font family\n   */\n  fontFamily(family: string): Modifier {\n    return new AppearanceModifier({ font: { family } })\n  },\n\n  /**\n   * Set opacity\n   */\n  opacity(value: number | Signal<number>): Modifier {\n    return new AppearanceModifier({ opacity: value })\n  },\n\n  /**\n   * Set corner radius (enhanced)\n   */\n  cornerRadius(radius: number | Signal<number>): Modifier {\n    return new AppearanceModifier({ cornerRadius: radius })\n  },\n\n  /**\n   * Set border\n   */\n  border(\n    width: number,\n    color: string | Asset = '#000000',\n    style: 'solid' | 'dashed' | 'dotted' = 'solid'\n  ): Modifier {\n    return new AppearanceModifier({\n      border: { width, color, style },\n    })\n  },\n\n  /**\n   * Set detailed border properties\n   */\n  borderDetailed(options: AppearanceModifierProps['border']): Modifier {\n    return new AppearanceModifier({ border: options })\n  },\n\n  /**\n   * Add shadow\n   */\n  shadow(options: AppearanceModifierProps['shadow']): Modifier {\n    return new AppearanceModifier({ shadow: options })\n  },\n\n  /**\n   * Add drop shadow with common settings\n   */\n  dropShadow(\n    x: number = 0,\n    y: number = 2,\n    radius: number = 4,\n    color: string = 'rgba(0,0,0,0.25)'\n  ): Modifier {\n    return new AppearanceModifier({\n      shadow: { x, y, radius, color },\n    })\n  },\n}\n\n/**\n * Interaction Modifiers\n */\nexport const interactionModifiers = {\n  /**\n   * Add tap handler\n   */\n  onTap(handler: (event: MouseEvent) => void): Modifier {\n    return new InteractionModifier({ onTap: handler })\n  },\n\n  /**\n   * Add hover handler\n   */\n  onHover(handler: (isHovered: boolean) => void): Modifier {\n    return new InteractionModifier({ onHover: handler })\n  },\n\n  /**\n   * Add focus handler\n   */\n  onFocus(handler: (isFocused: boolean) => void): Modifier {\n    return new InteractionModifier({ onFocus: handler })\n  },\n\n  /**\n   * Set disabled state\n   */\n  disabled(isDisabled: boolean | Signal<boolean> = true): Modifier {\n    return new InteractionModifier({ disabled: isDisabled })\n  },\n\n  /**\n   * Set accessibility label\n   */\n  accessibilityLabel(label: string): Modifier {\n    return new InteractionModifier({ accessibilityLabel: label })\n  },\n\n  /**\n   * Set accessibility hint\n   */\n  accessibilityHint(hint: string): Modifier {\n    return new InteractionModifier({ accessibilityHint: hint })\n  },\n}\n\n/**\n * Animation Modifiers\n */\nexport const animationModifiers = {\n  /**\n   * Add transition\n   */\n  transition(\n    property: string = 'all',\n    duration: number = 300,\n    easing: string = 'ease',\n    delay: number = 0\n  ): Modifier {\n    return new AnimationModifier({\n      transition: { property, duration, easing, delay },\n    })\n  },\n\n  /**\n   * Add detailed transition\n   */\n  transitionDetailed(options: AnimationModifierProps['transition']): Modifier {\n    return new AnimationModifier({ transition: options })\n  },\n\n  /**\n   * Add animation\n   */\n  animation(options: AnimationModifierProps['animation']): Modifier {\n    return new AnimationModifier({ animation: options })\n  },\n\n  /**\n   * Add fade in animation\n   */\n  fadeIn(duration: number = 300): Modifier {\n    return new AnimationModifier({\n      animation: {\n        keyframes: {\n          '0%': { opacity: '0' },\n          '100%': { opacity: '1' },\n        },\n        duration,\n        easing: 'ease-out',\n      },\n    })\n  },\n\n  /**\n   * Add fade out animation\n   */\n  fadeOut(duration: number = 300): Modifier {\n    return new AnimationModifier({\n      animation: {\n        keyframes: {\n          '0%': { opacity: '1' },\n          '100%': { opacity: '0' },\n        },\n        duration,\n        easing: 'ease-in',\n      },\n    })\n  },\n\n  /**\n   * Add slide in animation\n   */\n  slideIn(\n    direction: 'up' | 'down' | 'left' | 'right' = 'up',\n    duration: number = 300,\n    distance: number = 20\n  ): Modifier {\n    const transforms = {\n      up: [`translateY(${distance}px)`, 'translateY(0)'],\n      down: [`translateY(-${distance}px)`, 'translateY(0)'],\n      left: [`translateX(${distance}px)`, 'translateX(0)'],\n      right: [`translateX(-${distance}px)`, 'translateX(0)'],\n    }\n\n    const [from, to] = transforms[direction]\n\n    return new AnimationModifier({\n      animation: {\n        keyframes: {\n          '0%': { transform: from, opacity: '0' },\n          '100%': { transform: to, opacity: '1' },\n        },\n        duration,\n        easing: 'ease-out',\n      },\n    })\n  },\n\n  /**\n   * Add scale animation\n   */\n  scaleAnimation(from: number = 0.8, to: number = 1, duration: number = 300): Modifier {\n    return new AnimationModifier({\n      animation: {\n        keyframes: {\n          '0%': { transform: `scale(${from})`, opacity: '0' },\n          '100%': { transform: `scale(${to})`, opacity: '1' },\n        },\n        duration,\n        easing: 'ease-out',\n      },\n    })\n  },\n}\n\n/**\n * Lifecycle Modifiers\n */\nexport const lifecycleModifiers = {\n  /**\n   * Execute handler when component appears in viewport\n   */\n  onAppear(handler: () => void): Modifier {\n    return new LifecycleModifier({ onAppear: handler })\n  },\n\n  /**\n   * Execute handler when component disappears from viewport\n   */\n  onDisappear(handler: () => void): Modifier {\n    return new LifecycleModifier({ onDisappear: handler })\n  },\n\n  /**\n   * Execute async task with automatic cancellation on component unmount\n   */\n  task(\n    operation: () => Promise<void> | void,\n    options?: {\n      id?: string\n      priority?: 'background' | 'userInitiated' | 'utility' | 'default'\n    }\n  ): Modifier {\n    return new LifecycleModifier({\n      task: {\n        operation,\n        id: options?.id,\n        priority: options?.priority || 'default',\n      },\n    })\n  },\n\n  /**\n   * Add pull-to-refresh functionality\n   */\n  refreshable(onRefresh: () => Promise<void>, isRefreshing?: boolean | Signal<boolean>): Modifier {\n    return new LifecycleModifier({\n      refreshable: {\n        onRefresh,\n        isRefreshing,\n      },\n    })\n  },\n}\n\n/**\n * Preset Modifiers - Common combinations\n */\nexport const presetModifiers = {\n  /**\n   * Card-like appearance\n   */\n  card(padding: number = 16): Modifier[] {\n    return [\n      appearanceModifiers.backgroundColor('#ffffff'),\n      appearanceModifiers.cornerRadius(8),\n      appearanceModifiers.shadow({\n        x: 0,\n        y: 2,\n        radius: 8,\n        color: 'rgba(0,0,0,0.1)',\n      }),\n      layoutModifiers.padding(padding),\n    ]\n  },\n\n  /**\n   * Button-like appearance\n   */\n  button(\n    backgroundColor: string | Asset = '#007AFF',\n    textColor: string | Asset = '#ffffff'\n  ): Modifier[] {\n    return [\n      appearanceModifiers.backgroundColor(backgroundColor),\n      appearanceModifiers.foregroundColor(textColor),\n      appearanceModifiers.cornerRadius(6),\n      layoutModifiers.paddingSymmetric(16, 8),\n      interactionModifiers.onHover((_hovered) => {\n        // This would need a more sophisticated hover state system\n      }),\n      animationModifiers.transition('all', 150),\n    ]\n  },\n\n  /**\n   * Input field appearance\n   */\n  input(): Modifier[] {\n    return [\n      appearanceModifiers.border(1, '#d1d5db'),\n      appearanceModifiers.cornerRadius(4),\n      layoutModifiers.padding(8),\n      animationModifiers.transition('border-color', 150),\n      interactionModifiers.onFocus((_focused) => {\n        // Focus state would need more sophisticated handling\n      }),\n    ]\n  },\n\n  /**\n   * Typography presets\n   */\n  typography: {\n    title: (): Modifier[] => [\n      appearanceModifiers.fontSize(24),\n      appearanceModifiers.fontWeight('bold'),\n    ],\n\n    heading: (): Modifier[] => [\n      appearanceModifiers.fontSize(20),\n      appearanceModifiers.fontWeight('600'),\n    ],\n\n    body: (): Modifier[] => [\n      appearanceModifiers.fontSize(16),\n      appearanceModifiers.fontWeight('normal'),\n    ],\n\n    caption: (): Modifier[] => [\n      appearanceModifiers.fontSize(12),\n      appearanceModifiers.fontWeight('normal'),\n      appearanceModifiers.opacity(0.7),\n    ],\n  },\n}\n\n/**\n * Export all core modifiers\n */\nexport const coreModifiers = {\n  ...layoutModifiers,\n  ...appearanceModifiers,\n  ...interactionModifiers,\n  ...animationModifiers,\n  ...lifecycleModifiers,\n  presets: presetModifiers,\n}\n"],"names":["layoutModifiers","color","AppearanceModifier","width","height","options","LayoutModifier","value","horizontal","vertical","priority","appearanceModifiers","BackgroundModifier","size","weight","family","radius","style","x","y","interactionModifiers","handler","InteractionModifier","isDisabled","label","hint","animationModifiers","property","duration","easing","delay","AnimationModifier","direction","distance","transforms","from","to","lifecycleModifiers","LifecycleModifier","operation","onRefresh","isRefreshing","presetModifiers","padding","backgroundColor","textColor","_hovered","_focused","coreModifiers"],"mappings":"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"}

package/dist/modifiers/css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("./base.cjs");var l=Object.defineProperty,a=(r,e,t)=>e in r?l(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,c=(r,e,t)=>a(r,typeof e!="symbol"?e+"":e,t);class n extends p.BaseModifier{constructor(e){const t={};for(const[o,s]of Object.entries(e))typeof s=="function"&&"peek"in s?t[o]=s.peek():t[o]=s;super(t),c(this,"type","css"),c(this,"priority",5)}apply(e,t){if(!t.element)return;const o=this.computeCSSStyles(this.properties);this.applyStyles(t.element,o)}computeCSSStyles(e){const t={};for(const[o,s]of Object.entries(e))if(s!==void 0){const i=this.toCSSProperty(o);t[i]=this.toCSSValue(s)}return t}}function u(r){return new n(r)}function f(r,e){return new n({[r]:e})}function d(r,e){const t=r.startsWith("--")?r:`--${r}`;return new n({[t]:e})}function y(r,e,t){const o=r.charAt(0).toUpperCase()+r.slice(1),s=`-${r.toLowerCase()}-${e}`,i=o+e.charAt(0).toUpperCase()+e.slice(1);return new n({[s]:t,[i]:t})}exports.CSSModifier=n;exports.css=u;exports.cssProperty=f;exports.cssVariable=d;exports.cssVendor=y;
+//# sourceMappingURL=css.cjs.map

package/dist/modifiers/css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.cjs","sources":["../../src/modifiers/css.ts"],"sourcesContent":["/**\n * CSS Modifier - raw CSS properties\n *\n * Provides an escape hatch for applying raw CSS properties\n * that may not have dedicated modifiers yet, or for experimental\n * CSS features.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface CSSOptions {\n  [property: string]: string | number | undefined\n}\n\nexport type ReactiveCSSOptions = ReactiveModifierProps<CSSOptions>\n\nexport class CSSModifier extends BaseModifier<CSSOptions> {\n  readonly type = 'css'\n  readonly priority = 5 // Very low priority so raw CSS doesn't override specific modifiers\n\n  constructor(options: ReactiveCSSOptions) {\n    // Convert reactive options to regular options for immediate use\n    const resolvedOptions: CSSOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeCSSStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computeCSSStyles(props: CSSOptions) {\n    const styles: Record<string, string> = {}\n\n    for (const [property, value] of Object.entries(props)) {\n      if (value !== undefined) {\n        // Convert camelCase to kebab-case for CSS properties\n        const cssProperty = this.toCSSProperty(property)\n        styles[cssProperty] = this.toCSSValue(value)\n      }\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a CSS modifier with raw CSS properties\n *\n * @example\n * ```typescript\n * // Apply raw CSS properties\n * .css({\n *   backdropFilter: 'blur(10px)',\n *   maskImage: 'linear-gradient(to bottom, black, transparent)',\n *   scrollBehavior: 'smooth',\n *   containerType: 'inline-size'\n * })\n *\n * // Mix camelCase and kebab-case (both work)\n * .css({\n *   backgroundColor: 'red',        // camelCase (recommended)\n *   'background-color': 'red',     // kebab-case (also works)\n *   WebkitTransform: 'scale(1.1)', // vendor prefixes\n *   '--custom-property': '42px'    // CSS custom properties\n * })\n *\n * // Experimental CSS features\n * .css({\n *   aspectRatio: '16/9',\n *   scrollSnapType: 'y mandatory',\n *   containIntrinsicSize: '300px',\n *   accentColor: '#007AFF'\n * })\n * ```\n */\nexport function css(properties: ReactiveCSSOptions): CSSModifier {\n  return new CSSModifier(properties)\n}\n\n/**\n * Convenience function for setting a single CSS property\n *\n * @example\n * ```typescript\n * .cssProperty('backdrop-filter', 'blur(10px)')\n * .cssProperty('scrollBehavior', 'smooth')\n * .cssProperty('aspectRatio', '16/9')\n * ```\n */\nexport function cssProperty(property: string, value: string | number): CSSModifier {\n  return new CSSModifier({ [property]: value })\n}\n\n/**\n * Convenience function for CSS custom properties (CSS variables)\n *\n * @example\n * ```typescript\n * .cssVariable('primary-color', '#007AFF')\n * .cssVariable('spacing-unit', '8px')\n * .cssVariable('border-radius', '12px')\n * ```\n */\nexport function cssVariable(name: string, value: string | number): CSSModifier {\n  // Ensure the property starts with --\n  const propertyName = name.startsWith('--') ? name : `--${name}`\n  return new CSSModifier({ [propertyName]: value })\n}\n\n/**\n * Convenience function for vendor-prefixed properties\n *\n * @example\n * ```typescript\n * .cssVendor('webkit', 'transform', 'scale(1.1)')\n * .cssVendor('moz', 'user-select', 'none')\n * .cssVendor('ms', 'filter', 'blur(5px)')\n * ```\n */\nexport function cssVendor(\n  prefix: 'webkit' | 'moz' | 'ms' | 'o',\n  property: string,\n  value: string | number\n): CSSModifier {\n  // Convert to proper vendor prefix format\n  const capitalizedPrefix = prefix.charAt(0).toUpperCase() + prefix.slice(1)\n  const vendorProperty = `-${prefix.toLowerCase()}-${property}`\n  const camelCaseProperty = capitalizedPrefix + property.charAt(0).toUpperCase() + property.slice(1)\n\n  return new CSSModifier({\n    [vendorProperty]: value,\n    [camelCaseProperty]: value,\n  })\n}\n"],"names":["CSSModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","styles","props","property","cssProperty","css","properties","cssVariable","name","propertyName","cssVendor","prefix","capitalizedPrefix","vendorProperty","camelCaseProperty"],"mappings":"0QAkBO,MAAMA,UAAoBC,EAAAA,YAAyB,CAIxD,YAAYC,EAA6B,CAEvC,MAAMC,EAA8B,CAAA,EACpC,SAAW,CAACC,EAAKC,CAAK,IAAK,OAAO,QAAQH,CAAO,EAC3C,OAAOG,GAAU,YAAc,SAAUA,EACzCF,EAAwBC,CAAG,EAAKC,EAAc,KAAA,EAE9CF,EAAwBC,CAAG,EAAIC,EAGrC,MAAMF,CAAe,EAbvBG,EAAA,KAAS,OAAO,KAAA,EAChBA,EAAA,KAAS,WAAW,CAAA,CAapB,CAEA,MAAMC,EAAgBC,EAA+C,CACnE,GAAI,CAACA,EAAQ,QAAS,OAEtB,MAAMC,EAAS,KAAK,iBAAiB,KAAK,UAAU,EACpD,KAAK,YAAYD,EAAQ,QAASC,CAAM,CAG1C,CAEQ,iBAAiBC,EAAmB,CAC1C,MAAMD,EAAiC,CAAA,EAEvC,SAAW,CAACE,EAAUN,CAAK,IAAK,OAAO,QAAQK,CAAK,EAClD,GAAIL,IAAU,OAAW,CAEvB,MAAMO,EAAc,KAAK,cAAcD,CAAQ,EAC/CF,EAAOG,CAAW,EAAI,KAAK,WAAWP,CAAK,CAC7C,CAGF,OAAOI,CACT,CACF,CAgCO,SAASI,EAAIC,EAA6C,CAC/D,OAAO,IAAId,EAAYc,CAAU,CACnC,CAYO,SAASF,EAAYD,EAAkBN,EAAqC,CACjF,OAAO,IAAIL,EAAY,CAAE,CAACW,CAAQ,EAAGN,EAAO,CAC9C,CAYO,SAASU,EAAYC,EAAcX,EAAqC,CAE7E,MAAMY,EAAeD,EAAK,WAAW,IAAI,EAAIA,EAAO,KAAKA,CAAI,GAC7D,OAAO,IAAIhB,EAAY,CAAE,CAACiB,CAAY,EAAGZ,EAAO,CAClD,CAYO,SAASa,EACdC,EACAR,EACAN,EACa,CAEb,MAAMe,EAAoBD,EAAO,OAAO,CAAC,EAAE,cAAgBA,EAAO,MAAM,CAAC,EACnEE,EAAiB,IAAIF,EAAO,aAAa,IAAIR,CAAQ,GACrDW,EAAoBF,EAAoBT,EAAS,OAAO,CAAC,EAAE,cAAgBA,EAAS,MAAM,CAAC,EAEjG,OAAO,IAAIX,EAAY,CACrB,CAACqB,CAAc,EAAGhB,EAClB,CAACiB,CAAiB,EAAGjB,CAAA,CACtB,CACH"}

package/dist/modifiers/css.d.ts

@@ -0,0 +1,86 @@
+/**
+ * CSS Modifier - raw CSS properties
+ *
+ * Provides an escape hatch for applying raw CSS properties
+ * that may not have dedicated modifiers yet, or for experimental
+ * CSS features.
+ */
+import type { DOMNode } from '../runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from './types';
+export interface CSSOptions {
+    [property: string]: string | number | undefined;
+}
+export type ReactiveCSSOptions = ReactiveModifierProps<CSSOptions>;
+export declare class CSSModifier extends BaseModifier<CSSOptions> {
+    readonly type = "css";
+    readonly priority = 5;
+    constructor(options: ReactiveCSSOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeCSSStyles;
+}
+/**
+ * Create a CSS modifier with raw CSS properties
+ *
+ * @example
+ * ```typescript
+ * // Apply raw CSS properties
+ * .css({
+ *   backdropFilter: 'blur(10px)',
+ *   maskImage: 'linear-gradient(to bottom, black, transparent)',
+ *   scrollBehavior: 'smooth',
+ *   containerType: 'inline-size'
+ * })
+ *
+ * // Mix camelCase and kebab-case (both work)
+ * .css({
+ *   backgroundColor: 'red',        // camelCase (recommended)
+ *   'background-color': 'red',     // kebab-case (also works)
+ *   WebkitTransform: 'scale(1.1)', // vendor prefixes
+ *   '--custom-property': '42px'    // CSS custom properties
+ * })
+ *
+ * // Experimental CSS features
+ * .css({
+ *   aspectRatio: '16/9',
+ *   scrollSnapType: 'y mandatory',
+ *   containIntrinsicSize: '300px',
+ *   accentColor: '#007AFF'
+ * })
+ * ```
+ */
+export declare function css(properties: ReactiveCSSOptions): CSSModifier;
+/**
+ * Convenience function for setting a single CSS property
+ *
+ * @example
+ * ```typescript
+ * .cssProperty('backdrop-filter', 'blur(10px)')
+ * .cssProperty('scrollBehavior', 'smooth')
+ * .cssProperty('aspectRatio', '16/9')
+ * ```
+ */
+export declare function cssProperty(property: string, value: string | number): CSSModifier;
+/**
+ * Convenience function for CSS custom properties (CSS variables)
+ *
+ * @example
+ * ```typescript
+ * .cssVariable('primary-color', '#007AFF')
+ * .cssVariable('spacing-unit', '8px')
+ * .cssVariable('border-radius', '12px')
+ * ```
+ */
+export declare function cssVariable(name: string, value: string | number): CSSModifier;
+/**
+ * Convenience function for vendor-prefixed properties
+ *
+ * @example
+ * ```typescript
+ * .cssVendor('webkit', 'transform', 'scale(1.1)')
+ * .cssVendor('moz', 'user-select', 'none')
+ * .cssVendor('ms', 'filter', 'blur(5px)')
+ * ```
+ */
+export declare function cssVendor(prefix: 'webkit' | 'moz' | 'ms' | 'o', property: string, value: string | number): CSSModifier;
+//# sourceMappingURL=css.d.ts.map

package/dist/modifiers/css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../src/modifiers/css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAErE,MAAM,WAAW,UAAU;IACzB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAA;CAChD;AAED,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,CAAC,UAAU,CAAC,CAAA;AAElE,qBAAa,WAAY,SAAQ,YAAY,CAAC,UAAU,CAAC;IACvD,QAAQ,CAAC,IAAI,SAAQ;IACrB,QAAQ,CAAC,QAAQ,KAAI;gBAET,OAAO,EAAE,kBAAkB;IAavC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,gBAAgB;CAazB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,GAAG,CAAC,UAAU,EAAE,kBAAkB,GAAG,WAAW,CAE/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,CAEjF;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,CAI7E;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CACvB,MAAM,EAAE,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,EACrC,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE,MAAM,GAAG,MAAM,GACrB,WAAW,CAUb"}

package/dist/modifiers/css.js

@@ -0,0 +1,50 @@
+import { BaseModifier as p } from "./base.js";
+var l = Object.defineProperty, a = (r, e, t) => e in r ? l(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, c = (r, e, t) => a(r, typeof e != "symbol" ? e + "" : e, t);
+class n extends p {
+  // Very low priority so raw CSS doesn't override specific modifiers
+  constructor(e) {
+    const t = {};
+    for (const [o, s] of Object.entries(e))
+      typeof s == "function" && "peek" in s ? t[o] = s.peek() : t[o] = s;
+    super(t), c(this, "type", "css"), c(this, "priority", 5);
+  }
+  apply(e, t) {
+    if (!t.element) return;
+    const o = this.computeCSSStyles(this.properties);
+    this.applyStyles(t.element, o);
+  }
+  computeCSSStyles(e) {
+    const t = {};
+    for (const [o, s] of Object.entries(e))
+      if (s !== void 0) {
+        const i = this.toCSSProperty(o);
+        t[i] = this.toCSSValue(s);
+      }
+    return t;
+  }
+}
+function f(r) {
+  return new n(r);
+}
+function y(r, e) {
+  return new n({ [r]: e });
+}
+function d(r, e) {
+  const t = r.startsWith("--") ? r : `--${r}`;
+  return new n({ [t]: e });
+}
+function S(r, e, t) {
+  const o = r.charAt(0).toUpperCase() + r.slice(1), s = `-${r.toLowerCase()}-${e}`, i = o + e.charAt(0).toUpperCase() + e.slice(1);
+  return new n({
+    [s]: t,
+    [i]: t
+  });
+}
+export {
+  n as CSSModifier,
+  f as css,
+  y as cssProperty,
+  d as cssVariable,
+  S as cssVendor
+};
+//# sourceMappingURL=css.js.map

package/dist/modifiers/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","sources":["../../src/modifiers/css.ts"],"sourcesContent":["/**\n * CSS Modifier - raw CSS properties\n *\n * Provides an escape hatch for applying raw CSS properties\n * that may not have dedicated modifiers yet, or for experimental\n * CSS features.\n */\n\nimport type { DOMNode } from '../runtime/types'\nimport { BaseModifier } from './base'\nimport type { ModifierContext, ReactiveModifierProps } from './types'\n\nexport interface CSSOptions {\n  [property: string]: string | number | undefined\n}\n\nexport type ReactiveCSSOptions = ReactiveModifierProps<CSSOptions>\n\nexport class CSSModifier extends BaseModifier<CSSOptions> {\n  readonly type = 'css'\n  readonly priority = 5 // Very low priority so raw CSS doesn't override specific modifiers\n\n  constructor(options: ReactiveCSSOptions) {\n    // Convert reactive options to regular options for immediate use\n    const resolvedOptions: CSSOptions = {}\n    for (const [key, value] of Object.entries(options)) {\n      if (typeof value === 'function' && 'peek' in value) {\n        ;(resolvedOptions as any)[key] = (value as any).peek()\n      } else {\n        ;(resolvedOptions as any)[key] = value\n      }\n    }\n    super(resolvedOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeCSSStyles(this.properties)\n    this.applyStyles(context.element, styles)\n    \n    return undefined\n  }\n\n  private computeCSSStyles(props: CSSOptions) {\n    const styles: Record<string, string> = {}\n\n    for (const [property, value] of Object.entries(props)) {\n      if (value !== undefined) {\n        // Convert camelCase to kebab-case for CSS properties\n        const cssProperty = this.toCSSProperty(property)\n        styles[cssProperty] = this.toCSSValue(value)\n      }\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a CSS modifier with raw CSS properties\n *\n * @example\n * ```typescript\n * // Apply raw CSS properties\n * .css({\n *   backdropFilter: 'blur(10px)',\n *   maskImage: 'linear-gradient(to bottom, black, transparent)',\n *   scrollBehavior: 'smooth',\n *   containerType: 'inline-size'\n * })\n *\n * // Mix camelCase and kebab-case (both work)\n * .css({\n *   backgroundColor: 'red',        // camelCase (recommended)\n *   'background-color': 'red',     // kebab-case (also works)\n *   WebkitTransform: 'scale(1.1)', // vendor prefixes\n *   '--custom-property': '42px'    // CSS custom properties\n * })\n *\n * // Experimental CSS features\n * .css({\n *   aspectRatio: '16/9',\n *   scrollSnapType: 'y mandatory',\n *   containIntrinsicSize: '300px',\n *   accentColor: '#007AFF'\n * })\n * ```\n */\nexport function css(properties: ReactiveCSSOptions): CSSModifier {\n  return new CSSModifier(properties)\n}\n\n/**\n * Convenience function for setting a single CSS property\n *\n * @example\n * ```typescript\n * .cssProperty('backdrop-filter', 'blur(10px)')\n * .cssProperty('scrollBehavior', 'smooth')\n * .cssProperty('aspectRatio', '16/9')\n * ```\n */\nexport function cssProperty(property: string, value: string | number): CSSModifier {\n  return new CSSModifier({ [property]: value })\n}\n\n/**\n * Convenience function for CSS custom properties (CSS variables)\n *\n * @example\n * ```typescript\n * .cssVariable('primary-color', '#007AFF')\n * .cssVariable('spacing-unit', '8px')\n * .cssVariable('border-radius', '12px')\n * ```\n */\nexport function cssVariable(name: string, value: string | number): CSSModifier {\n  // Ensure the property starts with --\n  const propertyName = name.startsWith('--') ? name : `--${name}`\n  return new CSSModifier({ [propertyName]: value })\n}\n\n/**\n * Convenience function for vendor-prefixed properties\n *\n * @example\n * ```typescript\n * .cssVendor('webkit', 'transform', 'scale(1.1)')\n * .cssVendor('moz', 'user-select', 'none')\n * .cssVendor('ms', 'filter', 'blur(5px)')\n * ```\n */\nexport function cssVendor(\n  prefix: 'webkit' | 'moz' | 'ms' | 'o',\n  property: string,\n  value: string | number\n): CSSModifier {\n  // Convert to proper vendor prefix format\n  const capitalizedPrefix = prefix.charAt(0).toUpperCase() + prefix.slice(1)\n  const vendorProperty = `-${prefix.toLowerCase()}-${property}`\n  const camelCaseProperty = capitalizedPrefix + property.charAt(0).toUpperCase() + property.slice(1)\n\n  return new CSSModifier({\n    [vendorProperty]: value,\n    [camelCaseProperty]: value,\n  })\n}\n"],"names":["CSSModifier","BaseModifier","options","resolvedOptions","key","value","__publicField","_node","context","styles","props","property","cssProperty","css","properties","cssVariable","name","propertyName","cssVendor","prefix","capitalizedPrefix","vendorProperty","camelCaseProperty"],"mappings":";;AAkBO,MAAMA,UAAoBC,EAAyB;AAAA;AAAA,EAIxD,YAAYC,GAA6B;AAEvC,UAAMC,IAA8B,CAAA;AACpC,eAAW,CAACC,GAAKC,CAAK,KAAK,OAAO,QAAQH,CAAO;AAC/C,MAAI,OAAOG,KAAU,cAAc,UAAUA,IACzCF,EAAwBC,CAAG,IAAKC,EAAc,KAAA,IAE9CF,EAAwBC,CAAG,IAAIC;AAGrC,UAAMF,CAAe,GAbvBG,EAAA,MAAS,QAAO,KAAA,GAChBA,EAAA,MAAS,YAAW,CAAA;AAAA,EAapB;AAAA,EAEA,MAAMC,GAAgBC,GAA+C;AACnE,QAAI,CAACA,EAAQ,QAAS;AAEtB,UAAMC,IAAS,KAAK,iBAAiB,KAAK,UAAU;AACpD,SAAK,YAAYD,EAAQ,SAASC,CAAM;AAAA,EAG1C;AAAA,EAEQ,iBAAiBC,GAAmB;AAC1C,UAAMD,IAAiC,CAAA;AAEvC,eAAW,CAACE,GAAUN,CAAK,KAAK,OAAO,QAAQK,CAAK;AAClD,UAAIL,MAAU,QAAW;AAEvB,cAAMO,IAAc,KAAK,cAAcD,CAAQ;AAC/C,QAAAF,EAAOG,CAAW,IAAI,KAAK,WAAWP,CAAK;AAAA,MAC7C;AAGF,WAAOI;AAAA,EACT;AACF;AAgCO,SAASI,EAAIC,GAA6C;AAC/D,SAAO,IAAId,EAAYc,CAAU;AACnC;AAYO,SAASF,EAAYD,GAAkBN,GAAqC;AACjF,SAAO,IAAIL,EAAY,EAAE,CAACW,CAAQ,GAAGN,GAAO;AAC9C;AAYO,SAASU,EAAYC,GAAcX,GAAqC;AAE7E,QAAMY,IAAeD,EAAK,WAAW,IAAI,IAAIA,IAAO,KAAKA,CAAI;AAC7D,SAAO,IAAIhB,EAAY,EAAE,CAACiB,CAAY,GAAGZ,GAAO;AAClD;AAYO,SAASa,EACdC,GACAR,GACAN,GACa;AAEb,QAAMe,IAAoBD,EAAO,OAAO,CAAC,EAAE,gBAAgBA,EAAO,MAAM,CAAC,GACnEE,IAAiB,IAAIF,EAAO,aAAa,IAAIR,CAAQ,IACrDW,IAAoBF,IAAoBT,EAAS,OAAO,CAAC,EAAE,gBAAgBA,EAAS,MAAM,CAAC;AAEjG,SAAO,IAAIX,EAAY;AAAA,IACrB,CAACqB,CAAc,GAAGhB;AAAA,IAClB,CAACiB,CAAiB,GAAGjB;AAAA,EAAA,CACtB;AACH;"}

package/dist/modifiers/effects.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("./base.cjs");var C=Object.defineProperty,S=(t,e,r)=>e in t?C(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,s=(t,e,r)=>S(t,typeof e!="symbol"?e+"":e,r);class p extends v.BaseModifier{constructor(e){const r={cursor:"auto"};for(const[n,o]of Object.entries(e))typeof o=="function"&&"peek"in o?r[n]=o.peek():r[n]=o;super(r),s(this,"type","cursor"),s(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 y=class m extends v.BaseModifier{constructor(e){const r={};for(const[n,o]of Object.entries(e))typeof o=="function"&&"peek"in o?r[n]=o.peek():r[n]=o;super(r),s(this,"type","hover"),s(this,"priority",15)}apply(e,r){if(!r.element||!(this.properties.isEnabled!==!1))return;const o=`tachui-hover-${++m.hoverCount}`;r.element.classList.add(o),this.addHoverStyles(o,this.properties)}addHoverStyles(e,r){const n=this.getOrCreateStyleSheet(),o=this.formatTransition(r.transition);if(o){const l=`.${e} { transition: ${o}; }`;try{n.insertRule(l)}catch(c){console.warn("Failed to add transition rule:",c)}}const f=this.computeHoverStyles(r);if(Object.keys(f).length>0){const l=Object.entries(f).map(([d,b])=>{const h=this.toCSSProperty(d),g=["background-color","background","border-color","color"].includes(h);return`${h}: ${b}${g?" !important":""}`}).join("; "),c=`.${e}:hover { ${l} }`;try{n.insertRule(c)}catch(d){console.warn("Failed to add hover rule:",d)}}}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}};s(y,"hoverCount",0);let u=y;function i(t){return new p({cursor:t})}function a(t,e){return new u({effect:t,isEnabled:e})}function w(t,e){return new u({hoverStyles:t,transition:e})}function H(t,e=200){return new u({hoverStyles:t,transition:e})}function O(t,e){return new u({effect:t,isEnabled:e})}function x(){return i("pointer")}function E(){return i("grab")}function M(){return i("text")}function _(){return i("not-allowed")}function $(){return i("wait")}function k(){return i("help")}function j(t="in"){return i(t==="in"?"zoom-in":"zoom-out")}function P(){return a("lift")}function z(){return a("automatic")}function T(){return a("highlight")}function I(){return a("scale")}exports.CursorModifier=p;exports.HoverModifier=u;exports.buttonHover=P;exports.cardHover=z;exports.conditionalHover=O;exports.cursor=i;exports.disabledCursor=_;exports.draggableCursor=E;exports.helpCursor=k;exports.hover=w;exports.hoverEffect=a;exports.hoverWithTransition=H;exports.imageHover=I;exports.interactiveCursor=x;exports.linkHover=T;exports.loadingCursor=$;exports.textCursor=M;exports.zoomCursor=j;
+//# sourceMappingURL=effects.cjs.map