@tachui/modifiers 0.8.0-alpha

package/dist/basic/margin.d.ts

@@ -0,0 +1,266 @@
+/**
+ * Margin Modifier - Best-in-class external spacing around elements
+ *
+ * Comprehensive interface for element margins with full SwiftUI compatibility,
+ * CSS-in-JS support, reactive values, design system presets, and RTL awareness.
+ */
+export type MarginValue = number | string | `${number}px` | `${number}rem` | `${number}em` | `${number}%` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | 'auto';
+export type MarginOptions = {
+    all: MarginValue;
+    vertical?: never;
+    horizontal?: never;
+    top?: never;
+    right?: never;
+    bottom?: never;
+    left?: never;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical: MarginValue;
+    horizontal: MarginValue;
+    top?: never;
+    right?: never;
+    bottom?: never;
+    left?: never;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical?: MarginValue;
+    horizontal?: MarginValue;
+    top?: MarginValue;
+    right?: MarginValue;
+    bottom?: MarginValue;
+    left?: MarginValue;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical?: MarginValue;
+    horizontal?: MarginValue;
+    top?: MarginValue;
+    leading?: MarginValue;
+    trailing?: MarginValue;
+    bottom?: MarginValue;
+    right?: never;
+    left?: never;
+};
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from '@tachui/core/modifiers/types';
+export type ReactiveMarginOptions = ReactiveModifierProps<MarginOptions>;
+export declare class MarginModifier extends BaseModifier<MarginOptions> {
+    readonly type = "margin";
+    readonly priority = 50;
+    constructor(options: ReactiveMarginOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeMarginStyles;
+}
+/**
+ * Create a margin modifier with comprehensive flexibility
+ *
+ * Best-in-class implementation with full type safety, SwiftUI compatibility,
+ * and modern CSS unit support.
+ *
+ * @example
+ * ```typescript
+ * // All sides equal
+ * .margin({ all: 16 })
+ * .margin(16) // Shorthand
+ * .margin('auto') // Center horizontally
+ *
+ * // Symmetric spacing
+ * .margin({ vertical: 12, horizontal: 8 })
+ * .margin({ vertical: 30, horizontal: 'auto' })
+ *
+ * // Individual sides with modern CSS units
+ * .margin({ top: '1rem', bottom: 16, left: '2vw', right: 12 })
+ *
+ * // SwiftUI-style leading/trailing
+ * .margin({ leading: 16, trailing: 8, vertical: 12 })
+ *
+ * // Mixed approach with overrides
+ * .margin({ horizontal: 16, top: 8, bottom: 24 })
+ *
+ * // Modern CSS units
+ * .margin({ all: '1rem' })
+ * .margin({ vertical: '2vh', horizontal: 'auto' })
+ * ```
+ */
+export declare function margin(options: ReactiveMarginOptions): MarginModifier;
+export declare function margin(all: MarginValue): MarginModifier;
+/**
+ * Convenience function for top margin only
+ *
+ * @example
+ * ```typescript
+ * .marginTop(16)
+ * .marginTop('1rem')
+ * .marginTop('2vh')
+ * ```
+ */
+export declare function marginTop(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for bottom margin only
+ *
+ * @example
+ * ```typescript
+ * .marginBottom(24)
+ * .marginBottom('2rem')
+ * ```
+ */
+export declare function marginBottom(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for left margin only
+ *
+ * @example
+ * ```typescript
+ * .marginLeft(12)
+ * .marginLeft('1rem')
+ * ```
+ */
+export declare function marginLeft(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for right margin only
+ *
+ * @example
+ * ```typescript
+ * .marginRight(12)
+ * .marginRight('1rem')
+ * ```
+ */
+export declare function marginRight(value: MarginValue): MarginModifier;
+/**
+ * SwiftUI-style leading margin (left in LTR, right in RTL)
+ *
+ * @example
+ * ```typescript
+ * .marginLeading(16)
+ * .marginLeading('1rem')
+ * ```
+ */
+export declare function marginLeading(value: MarginValue): MarginModifier;
+/**
+ * SwiftUI-style trailing margin (right in LTR, left in RTL)
+ *
+ * @example
+ * ```typescript
+ * .marginTrailing(8)
+ * .marginTrailing('0.5rem')
+ * ```
+ */
+export declare function marginTrailing(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for left and right margin
+ *
+ * @example
+ * ```typescript
+ * .marginHorizontal(20)
+ * .marginHorizontal('2rem')
+ * .marginHorizontal('auto') // Center horizontally
+ * .marginHorizontal('5vw')
+ * ```
+ */
+export declare function marginHorizontal(value: MarginValue): MarginModifier;
+/**
+ * Convenience function for top and bottom margin
+ *
+ * @example
+ * ```typescript
+ * .marginVertical(16)
+ * .marginVertical('1rem')
+ * .marginVertical('3vh')
+ * ```
+ */
+export declare function marginVertical(value: MarginValue): MarginModifier;
+/**
+ * Design system margin presets for consistent spacing
+ *
+ * Based on modern design system principles with t-shirt sizing
+ * and semantic naming for common UI patterns.
+ */
+export declare const marginPresets: {
+    /**
+     * Extra small margin (4px) - For tight spacing
+     */
+    readonly xs: () => MarginModifier;
+    /**
+     * Small margin (8px) - For compact components
+     */
+    readonly sm: () => MarginModifier;
+    /**
+     * Medium margin (12px) - Default comfortable spacing
+     */
+    readonly md: () => MarginModifier;
+    /**
+     * Large margin (16px) - For prominent separation
+     */
+    readonly lg: () => MarginModifier;
+    /**
+     * Extra large margin (24px) - For emphasis
+     */
+    readonly xl: () => MarginModifier;
+    /**
+     * Extra extra large margin (32px) - For major sections
+     */
+    readonly xxl: () => MarginModifier;
+    /**
+     * Huge margin (48px) - For hero sections
+     */
+    readonly xxxl: () => MarginModifier;
+    /**
+     * Component separation (vertical: 16, horizontal: 0)
+     * For spacing between stacked components
+     */
+    readonly component: () => MarginModifier;
+    /**
+     * Section separation (vertical: 24, horizontal: 0)
+     * For major content sections
+     */
+    readonly section: () => MarginModifier;
+    /**
+     * Page margin (horizontal: auto)
+     * For centering page content
+     */
+    readonly page: () => MarginModifier;
+    /**
+     * Card margin (all: 16)
+     * Standard margin around card components
+     */
+    readonly card: () => MarginModifier;
+    /**
+     * Compact card margin (all: 8)
+     */
+    readonly cardSm: () => MarginModifier;
+    /**
+     * Spacious card margin (all: 24)
+     */
+    readonly cardLg: () => MarginModifier;
+    /**
+     * Button margin (horizontal: 8, vertical: 4)
+     * For spacing between inline buttons
+     */
+    readonly button: () => MarginModifier;
+    /**
+     * List item margin (vertical: 8, horizontal: 0)
+     * For spacing between list items
+     */
+    readonly listItem: () => MarginModifier;
+    /**
+     * Form field margin (vertical: 12, horizontal: 0)
+     * For spacing between form fields
+     */
+    readonly field: () => MarginModifier;
+    /**
+     * Zero margin utility
+     * For removing default margins
+     */
+    readonly none: () => MarginModifier;
+    /**
+     * Auto margin utility
+     * For centering elements
+     */
+    readonly auto: () => MarginModifier;
+};
+//# sourceMappingURL=margin.d.ts.map

package/dist/basic/margin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"margin.d.ts","sourceRoot":"","sources":["../../src/basic/margin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,MAAM,MAAM,WAAW,GACnB,MAAM,GACN,MAAM,GACN,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,KAAK,GACd,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,GAAG,GACZ,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,IAAI,GACb,GAAG,MAAM,MAAM,GACf,GAAG,MAAM,MAAM,GACf,MAAM,CAAA;AAGV,MAAM,MAAM,aAAa,GACrB;IACE,GAAG,EAAE,WAAW,CAAA;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,QAAQ,EAAE,WAAW,CAAA;IACrB,UAAU,EAAE,WAAW,CAAA;IACvB,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,QAAQ,CAAC,EAAE,WAAW,CAAA;IACtB,UAAU,CAAC,EAAE,WAAW,CAAA;IACxB,GAAG,CAAC,EAAE,WAAW,CAAA;IACjB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAA;CACjB,GACD;IACE,GAAG,CAAC,EAAE,KAAK,CAAA;IACX,QAAQ,CAAC,EAAE,WAAW,CAAA;IACtB,UAAU,CAAC,EAAE,WAAW,CAAA;IACxB,GAAG,CAAC,EAAE,WAAW,CAAA;IACjB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,QAAQ,CAAC,EAAE,WAAW,CAAA;IACtB,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAEL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,8BAA8B,CAAA;AAGrC,MAAM,MAAM,qBAAqB,GAAG,qBAAqB,CAAC,aAAa,CAAC,CAAA;AAExE,qBAAa,cAAe,SAAQ,YAAY,CAAC,aAAa,CAAC;IAC7D,QAAQ,CAAC,IAAI,YAAW;IACxB,QAAQ,CAAC,QAAQ,MAAK;gBAEV,OAAO,EAAE,qBAAqB;IAK1C,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,mBAAmB;CAkE5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,MAAM,CAAC,OAAO,EAAE,qBAAqB,GAAG,cAAc,CAAA;AACtE,wBAAgB,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,cAAc,CAAA;AAUxD;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAE5D;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAE/D;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAE7D;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAE9D;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAEhE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAEjE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAEnE;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,WAAW,GAAG,cAAc,CAEjE;AAED;;;;;GAKG;AACH,eAAO,MAAM,aAAa;IACxB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;IAKH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;OAEG;;IAGH;;OAEG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;IAGH;;;OAGG;;CAEK,CAAA"}

package/dist/basic/margin.js

@@ -0,0 +1,160 @@
+var l = Object.defineProperty;
+var f = (t, g, i) => g in t ? l(t, g, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[g] = i;
+var m = (t, g, i) => f(t, typeof g != "symbol" ? g + "" : g, i);
+import { B as c } from "../base-CkGf4b9G.js";
+import { isSignal as u, isComputed as d } from "@tachui/core/reactive";
+class o extends c {
+  // Optimized priority for external spacing (after padding at 45)
+  constructor(i) {
+    super(i);
+    m(this, "type", "margin");
+    m(this, "priority", 50);
+  }
+  apply(i, r) {
+    if (!r.element) return;
+    const a = this.computeMarginStyles(this.properties);
+    this.applyStyles(r.element, a);
+  }
+  computeMarginStyles(i) {
+    const r = {}, a = (n) => u(n) || d(n) ? n : typeof n == "number" ? `${n}px` : n === "auto" ? n : typeof n == "string" ? /^-?\d*\.?\d+(px|rem|em|%|vw|vh|vmin|vmax)$/.test(n) ? n : `${n}px` : String(n);
+    if ("all" in i && i.all !== void 0)
+      r.margin = a(i.all);
+    else {
+      if ("vertical" in i && i.vertical !== void 0) {
+        const n = a(i.vertical);
+        r.marginTop = n, r.marginBottom = n;
+      }
+      if ("horizontal" in i && i.horizontal !== void 0) {
+        const n = a(i.horizontal);
+        r.marginLeft = n, r.marginRight = n;
+      }
+      "top" in i && i.top !== void 0 && (r.marginTop = a(i.top)), "right" in i && i.right !== void 0 && (r.marginRight = a(i.right)), "bottom" in i && i.bottom !== void 0 && (r.marginBottom = a(i.bottom)), "left" in i && i.left !== void 0 && (r.marginLeft = a(i.left)), "leading" in i && i.leading !== void 0 && (r.marginLeft = a(i.leading)), "trailing" in i && i.trailing !== void 0 && (r.marginRight = a(i.trailing));
+    }
+    return r;
+  }
+}
+function e(t) {
+  return typeof t == "number" || typeof t == "string" ? new o({ all: t }) : new o(t);
+}
+function s(t) {
+  return new o({ top: t });
+}
+function w(t) {
+  return new o({ bottom: t });
+}
+function z(t) {
+  return new o({ left: t });
+}
+function b(t) {
+  return new o({ right: t });
+}
+function L(t) {
+  return new o({ leading: t });
+}
+function R(t) {
+  return new o({ trailing: t });
+}
+function S(t) {
+  return new o({ horizontal: t });
+}
+function B(t) {
+  return new o({ vertical: t });
+}
+const M = {
+  /**
+   * Extra small margin (4px) - For tight spacing
+   */
+  xs: () => e(4),
+  /**
+   * Small margin (8px) - For compact components
+   */
+  sm: () => e(8),
+  /**
+   * Medium margin (12px) - Default comfortable spacing
+   */
+  md: () => e(12),
+  /**
+   * Large margin (16px) - For prominent separation
+   */
+  lg: () => e(16),
+  /**
+   * Extra large margin (24px) - For emphasis
+   */
+  xl: () => e(24),
+  /**
+   * Extra extra large margin (32px) - For major sections
+   */
+  xxl: () => e(32),
+  /**
+   * Huge margin (48px) - For hero sections
+   */
+  xxxl: () => e(48),
+  // Semantic presets for common UI patterns
+  /**
+   * Component separation (vertical: 16, horizontal: 0)
+   * For spacing between stacked components
+   */
+  component: () => e({ vertical: 16, horizontal: 0 }),
+  /**
+   * Section separation (vertical: 24, horizontal: 0)
+   * For major content sections
+   */
+  section: () => e({ vertical: 24, horizontal: 0 }),
+  /**
+   * Page margin (horizontal: auto)
+   * For centering page content
+   */
+  page: () => e({ horizontal: "auto" }),
+  /**
+   * Card margin (all: 16)
+   * Standard margin around card components
+   */
+  card: () => e(16),
+  /**
+   * Compact card margin (all: 8)
+   */
+  cardSm: () => e(8),
+  /**
+   * Spacious card margin (all: 24)
+   */
+  cardLg: () => e(24),
+  /**
+   * Button margin (horizontal: 8, vertical: 4)
+   * For spacing between inline buttons
+   */
+  button: () => e({ horizontal: 8, vertical: 4 }),
+  /**
+   * List item margin (vertical: 8, horizontal: 0)
+   * For spacing between list items
+   */
+  listItem: () => e({ vertical: 8, horizontal: 0 }),
+  /**
+   * Form field margin (vertical: 12, horizontal: 0)
+   * For spacing between form fields
+   */
+  field: () => e({ vertical: 12, horizontal: 0 }),
+  /**
+   * Zero margin utility
+   * For removing default margins
+   */
+  none: () => e(0),
+  /**
+   * Auto margin utility
+   * For centering elements
+   */
+  auto: () => e("auto")
+};
+export {
+  o as MarginModifier,
+  e as margin,
+  w as marginBottom,
+  S as marginHorizontal,
+  L as marginLeading,
+  z as marginLeft,
+  M as marginPresets,
+  b as marginRight,
+  s as marginTop,
+  R as marginTrailing,
+  B as marginVertical
+};
+//# sourceMappingURL=margin.js.map

package/dist/basic/margin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"margin.js","sources":["../../src/basic/margin.ts"],"sourcesContent":["/**\n * Margin Modifier - Best-in-class external spacing around elements\n *\n * Comprehensive interface for element margins with full SwiftUI compatibility,\n * CSS-in-JS support, reactive values, design system presets, and RTL awareness.\n */\n\n// Comprehensive CSS-compatible margin values including modern CSS units\nexport type MarginValue =\n  | number\n  | string\n  | `${number}px`\n  | `${number}rem`\n  | `${number}em`\n  | `${number}%`\n  | `${number}vw`\n  | `${number}vh`\n  | `${number}vmin`\n  | `${number}vmax`\n  | 'auto'\n\n// Advanced type-safe options with comprehensive conflict prevention and SwiftUI compatibility\nexport type MarginOptions =\n  | {\n      all: MarginValue\n      vertical?: never\n      horizontal?: never\n      top?: never\n      right?: never\n      bottom?: never\n      left?: never\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical: MarginValue\n      horizontal: MarginValue\n      top?: never\n      right?: never\n      bottom?: never\n      left?: never\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical?: MarginValue\n      horizontal?: MarginValue\n      top?: MarginValue\n      right?: MarginValue\n      bottom?: MarginValue\n      left?: MarginValue\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical?: MarginValue\n      horizontal?: MarginValue\n      top?: MarginValue\n      leading?: MarginValue\n      trailing?: MarginValue\n      bottom?: MarginValue\n      right?: never\n      left?: never\n    }\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport { BaseModifier } from './base'\nimport type {\n  ModifierContext,\n  ReactiveModifierProps,\n} from '@tachui/core/modifiers/types'\nimport { isSignal, isComputed } from '@tachui/core/reactive'\n\nexport type ReactiveMarginOptions = ReactiveModifierProps<MarginOptions>\n\nexport class MarginModifier extends BaseModifier<MarginOptions> {\n  readonly type = 'margin'\n  readonly priority = 50 // Optimized priority for external spacing (after padding at 45)\n\n  constructor(options: ReactiveMarginOptions) {\n    // Enhanced reactive value handling\n    super(options as unknown as MarginOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeMarginStyles(this.properties)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private computeMarginStyles(props: MarginOptions) {\n    const styles: Record<string, any> = {}\n\n    // Enhanced value formatter with comprehensive CSS unit support\n    // Now handles reactive signals properly by passing them through unchanged\n    const formatValue = (value: MarginValue): any => {\n      // Pass reactive signals through directly to applyStyles\n      if (isSignal(value) || isComputed(value)) {\n        return value\n      }\n\n      if (typeof value === 'number') {\n        return `${value}px`\n      }\n      if (value === 'auto') return value\n      if (typeof value === 'string') {\n        // Validate and normalize CSS values\n        const cssValueRegex = /^-?\\d*\\.?\\d+(px|rem|em|%|vw|vh|vmin|vmax)$/\n        return cssValueRegex.test(value) ? value : `${value}px`\n      }\n      return String(value)\n    }\n\n    // Priority-based application with enhanced logic\n    if ('all' in props && props.all !== undefined) {\n      // All sides - highest priority, most efficient CSS\n      styles.margin = formatValue(props.all)\n    } else {\n      // Handle shorthand properties with optimal CSS generation\n      if ('vertical' in props && props.vertical !== undefined) {\n        const value = formatValue(props.vertical)\n        styles.marginTop = value\n        styles.marginBottom = value\n      }\n      if ('horizontal' in props && props.horizontal !== undefined) {\n        const value = formatValue(props.horizontal)\n        styles.marginLeft = value\n        styles.marginRight = value\n      }\n\n      // Individual sides override shorthand (maintain specificity)\n      if ('top' in props && props.top !== undefined) {\n        styles.marginTop = formatValue(props.top)\n      }\n      if ('right' in props && props.right !== undefined) {\n        styles.marginRight = formatValue(props.right)\n      }\n      if ('bottom' in props && props.bottom !== undefined) {\n        styles.marginBottom = formatValue(props.bottom)\n      }\n      if ('left' in props && props.left !== undefined) {\n        styles.marginLeft = formatValue(props.left)\n      }\n\n      // SwiftUI-style leading/trailing with RTL awareness\n      // TODO: Add RTL detection for proper leading/trailing mapping\n      if ('leading' in props && props.leading !== undefined) {\n        styles.marginLeft = formatValue(props.leading) // LTR assumption\n      }\n      if ('trailing' in props && props.trailing !== undefined) {\n        styles.marginRight = formatValue(props.trailing) // LTR assumption\n      }\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a margin modifier with comprehensive flexibility\n *\n * Best-in-class implementation with full type safety, SwiftUI compatibility,\n * and modern CSS unit support.\n *\n * @example\n * ```typescript\n * // All sides equal\n * .margin({ all: 16 })\n * .margin(16) // Shorthand\n * .margin('auto') // Center horizontally\n *\n * // Symmetric spacing\n * .margin({ vertical: 12, horizontal: 8 })\n * .margin({ vertical: 30, horizontal: 'auto' })\n *\n * // Individual sides with modern CSS units\n * .margin({ top: '1rem', bottom: 16, left: '2vw', right: 12 })\n *\n * // SwiftUI-style leading/trailing\n * .margin({ leading: 16, trailing: 8, vertical: 12 })\n *\n * // Mixed approach with overrides\n * .margin({ horizontal: 16, top: 8, bottom: 24 })\n *\n * // Modern CSS units\n * .margin({ all: '1rem' })\n * .margin({ vertical: '2vh', horizontal: 'auto' })\n * ```\n */\nexport function margin(options: ReactiveMarginOptions): MarginModifier\nexport function margin(all: MarginValue): MarginModifier\nexport function margin(\n  optionsOrAll: ReactiveMarginOptions | MarginValue\n): MarginModifier {\n  if (typeof optionsOrAll === 'number' || typeof optionsOrAll === 'string') {\n    return new MarginModifier({ all: optionsOrAll })\n  }\n  return new MarginModifier(optionsOrAll)\n}\n\n/**\n * Convenience function for top margin only\n *\n * @example\n * ```typescript\n * .marginTop(16)\n * .marginTop('1rem')\n * .marginTop('2vh')\n * ```\n */\nexport function marginTop(value: MarginValue): MarginModifier {\n  return new MarginModifier({ top: value })\n}\n\n/**\n * Convenience function for bottom margin only\n *\n * @example\n * ```typescript\n * .marginBottom(24)\n * .marginBottom('2rem')\n * ```\n */\nexport function marginBottom(value: MarginValue): MarginModifier {\n  return new MarginModifier({ bottom: value })\n}\n\n/**\n * Convenience function for left margin only\n *\n * @example\n * ```typescript\n * .marginLeft(12)\n * .marginLeft('1rem')\n * ```\n */\nexport function marginLeft(value: MarginValue): MarginModifier {\n  return new MarginModifier({ left: value })\n}\n\n/**\n * Convenience function for right margin only\n *\n * @example\n * ```typescript\n * .marginRight(12)\n * .marginRight('1rem')\n * ```\n */\nexport function marginRight(value: MarginValue): MarginModifier {\n  return new MarginModifier({ right: value })\n}\n\n/**\n * SwiftUI-style leading margin (left in LTR, right in RTL)\n *\n * @example\n * ```typescript\n * .marginLeading(16)\n * .marginLeading('1rem')\n * ```\n */\nexport function marginLeading(value: MarginValue): MarginModifier {\n  return new MarginModifier({ leading: value })\n}\n\n/**\n * SwiftUI-style trailing margin (right in LTR, left in RTL)\n *\n * @example\n * ```typescript\n * .marginTrailing(8)\n * .marginTrailing('0.5rem')\n * ```\n */\nexport function marginTrailing(value: MarginValue): MarginModifier {\n  return new MarginModifier({ trailing: value })\n}\n\n/**\n * Convenience function for left and right margin\n *\n * @example\n * ```typescript\n * .marginHorizontal(20)\n * .marginHorizontal('2rem')\n * .marginHorizontal('auto') // Center horizontally\n * .marginHorizontal('5vw')\n * ```\n */\nexport function marginHorizontal(value: MarginValue): MarginModifier {\n  return new MarginModifier({ horizontal: value })\n}\n\n/**\n * Convenience function for top and bottom margin\n *\n * @example\n * ```typescript\n * .marginVertical(16)\n * .marginVertical('1rem')\n * .marginVertical('3vh')\n * ```\n */\nexport function marginVertical(value: MarginValue): MarginModifier {\n  return new MarginModifier({ vertical: value })\n}\n\n/**\n * Design system margin presets for consistent spacing\n *\n * Based on modern design system principles with t-shirt sizing\n * and semantic naming for common UI patterns.\n */\nexport const marginPresets = {\n  /**\n   * Extra small margin (4px) - For tight spacing\n   */\n  xs: () => margin(4),\n\n  /**\n   * Small margin (8px) - For compact components\n   */\n  sm: () => margin(8),\n\n  /**\n   * Medium margin (12px) - Default comfortable spacing\n   */\n  md: () => margin(12),\n\n  /**\n   * Large margin (16px) - For prominent separation\n   */\n  lg: () => margin(16),\n\n  /**\n   * Extra large margin (24px) - For emphasis\n   */\n  xl: () => margin(24),\n\n  /**\n   * Extra extra large margin (32px) - For major sections\n   */\n  xxl: () => margin(32),\n\n  /**\n   * Huge margin (48px) - For hero sections\n   */\n  xxxl: () => margin(48),\n\n  // Semantic presets for common UI patterns\n\n  /**\n   * Component separation (vertical: 16, horizontal: 0)\n   * For spacing between stacked components\n   */\n  component: () => margin({ vertical: 16, horizontal: 0 }),\n\n  /**\n   * Section separation (vertical: 24, horizontal: 0)\n   * For major content sections\n   */\n  section: () => margin({ vertical: 24, horizontal: 0 }),\n\n  /**\n   * Page margin (horizontal: auto)\n   * For centering page content\n   */\n  page: () => margin({ horizontal: 'auto' }),\n\n  /**\n   * Card margin (all: 16)\n   * Standard margin around card components\n   */\n  card: () => margin(16),\n\n  /**\n   * Compact card margin (all: 8)\n   */\n  cardSm: () => margin(8),\n\n  /**\n   * Spacious card margin (all: 24)\n   */\n  cardLg: () => margin(24),\n\n  /**\n   * Button margin (horizontal: 8, vertical: 4)\n   * For spacing between inline buttons\n   */\n  button: () => margin({ horizontal: 8, vertical: 4 }),\n\n  /**\n   * List item margin (vertical: 8, horizontal: 0)\n   * For spacing between list items\n   */\n  listItem: () => margin({ vertical: 8, horizontal: 0 }),\n\n  /**\n   * Form field margin (vertical: 12, horizontal: 0)\n   * For spacing between form fields\n   */\n  field: () => margin({ vertical: 12, horizontal: 0 }),\n\n  /**\n   * Zero margin utility\n   * For removing default margins\n   */\n  none: () => margin(0),\n\n  /**\n   * Auto margin utility\n   * For centering elements\n   */\n  auto: () => margin('auto'),\n} as const\n\n// Types are exported above - avoiding duplicate exports\n"],"names":["MarginModifier","BaseModifier","options","__publicField","_node","context","styles","props","formatValue","value","isSignal","isComputed","margin","optionsOrAll","marginTop","marginBottom","marginLeft","marginRight","marginLeading","marginTrailing","marginHorizontal","marginVertical","marginPresets"],"mappings":"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"}