@tachui/modifiers 0.8.0-alpha

package/dist/basic/padding.d.ts

@@ -0,0 +1,258 @@
+/**
+ * Padding Modifier - Best-in-class internal spacing within elements
+ *
+ * Comprehensive interface for element padding with full SwiftUI compatibility,
+ * CSS-in-JS support, reactive values, design system presets, and RTL awareness.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from '@tachui/core/modifiers/types';
+export type PaddingValue = number | string | `${number}px` | `${number}rem` | `${number}em` | `${number}%` | `${number}vw` | `${number}vh` | `${number}vmin` | `${number}vmax` | 'auto';
+export type PaddingOptions = {
+    all: PaddingValue;
+    vertical?: never;
+    horizontal?: never;
+    top?: never;
+    right?: never;
+    bottom?: never;
+    left?: never;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical: PaddingValue;
+    horizontal: PaddingValue;
+    top?: never;
+    right?: never;
+    bottom?: never;
+    left?: never;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical?: PaddingValue;
+    horizontal?: PaddingValue;
+    top?: PaddingValue;
+    right?: PaddingValue;
+    bottom?: PaddingValue;
+    left?: PaddingValue;
+    leading?: never;
+    trailing?: never;
+} | {
+    all?: never;
+    vertical?: PaddingValue;
+    horizontal?: PaddingValue;
+    top?: PaddingValue;
+    leading?: PaddingValue;
+    trailing?: PaddingValue;
+    bottom?: PaddingValue;
+    right?: never;
+    left?: never;
+};
+export type ReactivePaddingOptions = ReactiveModifierProps<PaddingOptions>;
+export declare class PaddingModifier extends BaseModifier<PaddingOptions> {
+    readonly type = "padding";
+    readonly priority = 45;
+    constructor(options: ReactivePaddingOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computePaddingStyles;
+}
+/**
+ * Create a padding modifier with comprehensive flexibility
+ *
+ * Best-in-class implementation with full type safety, SwiftUI compatibility,
+ * and modern CSS unit support.
+ *
+ * @example
+ * ```typescript
+ * // All sides equal
+ * .padding({ all: 16 })
+ * .padding(16) // Shorthand
+ *
+ * // Symmetric spacing
+ * .padding({ vertical: 12, horizontal: 8 })
+ *
+ * // Individual sides with modern CSS units
+ * .padding({ top: '1rem', bottom: 16, left: '2vw', right: 12 })
+ *
+ * // SwiftUI-style leading/trailing
+ * .padding({ leading: 16, trailing: 8, vertical: 12 })
+ *
+ * // Mixed approach with overrides
+ * .padding({ horizontal: 16, top: 8, bottom: 24 })
+ *
+ * // Modern CSS units
+ * .padding({ all: '1rem' })
+ * .padding({ vertical: '2vh', horizontal: '10vw' })
+ * ```
+ */
+export declare function padding(options: ReactivePaddingOptions): PaddingModifier;
+export declare function padding(all: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for top padding only
+ *
+ * @example
+ * ```typescript
+ * .paddingTop(16)
+ * .paddingTop('1rem')
+ * .paddingTop('2vh')
+ * ```
+ */
+export declare function paddingTop(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for bottom padding only
+ *
+ * @example
+ * ```typescript
+ * .paddingBottom(24)
+ * .paddingBottom('2rem')
+ * ```
+ */
+export declare function paddingBottom(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for left padding only
+ *
+ * @example
+ * ```typescript
+ * .paddingLeft(12)
+ * .paddingLeft('1rem')
+ * ```
+ */
+export declare function paddingLeft(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for right padding only
+ *
+ * @example
+ * ```typescript
+ * .paddingRight(12)
+ * .paddingRight('1rem')
+ * ```
+ */
+export declare function paddingRight(value: PaddingValue): PaddingModifier;
+/**
+ * SwiftUI-style leading padding (left in LTR, right in RTL)
+ *
+ * @example
+ * ```typescript
+ * .paddingLeading(16)
+ * .paddingLeading('1rem')
+ * ```
+ */
+export declare function paddingLeading(value: PaddingValue): PaddingModifier;
+/**
+ * SwiftUI-style trailing padding (right in LTR, left in RTL)
+ *
+ * @example
+ * ```typescript
+ * .paddingTrailing(8)
+ * .paddingTrailing('0.5rem')
+ * ```
+ */
+export declare function paddingTrailing(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for left and right padding
+ *
+ * @example
+ * ```typescript
+ * .paddingHorizontal(20)
+ * .paddingHorizontal('2rem')
+ * .paddingHorizontal('5vw')
+ * ```
+ */
+export declare function paddingHorizontal(value: PaddingValue): PaddingModifier;
+/**
+ * Convenience function for top and bottom padding
+ *
+ * @example
+ * ```typescript
+ * .paddingVertical(16)
+ * .paddingVertical('1rem')
+ * .paddingVertical('3vh')
+ * ```
+ */
+export declare function paddingVertical(value: PaddingValue): PaddingModifier;
+/**
+ * Design system padding presets for consistent spacing
+ *
+ * Based on modern design system principles with t-shirt sizing
+ * and semantic naming for common UI patterns.
+ */
+export declare const paddingPresets: {
+    /**
+     * Extra small padding (4px) - For tight spacing
+     */
+    readonly xs: () => PaddingModifier;
+    /**
+     * Small padding (8px) - For compact components
+     */
+    readonly sm: () => PaddingModifier;
+    /**
+     * Medium padding (12px) - Default comfortable spacing
+     */
+    readonly md: () => PaddingModifier;
+    /**
+     * Large padding (16px) - For prominent components
+     */
+    readonly lg: () => PaddingModifier;
+    /**
+     * Extra large padding (24px) - For emphasis
+     */
+    readonly xl: () => PaddingModifier;
+    /**
+     * Extra extra large padding (32px) - For major sections
+     */
+    readonly xxl: () => PaddingModifier;
+    /**
+     * Huge padding (48px) - For hero sections
+     */
+    readonly xxxl: () => PaddingModifier;
+    /**
+     * Button padding preset (horizontal: 16, vertical: 8)
+     * Optimized for interactive elements
+     */
+    readonly button: () => PaddingModifier;
+    /**
+     * Small button padding (horizontal: 12, vertical: 6)
+     */
+    readonly buttonSm: () => PaddingModifier;
+    /**
+     * Large button padding (horizontal: 24, vertical: 12)
+     */
+    readonly buttonLg: () => PaddingModifier;
+    /**
+     * Card padding preset (all: 16)
+     * Standard for card-like containers
+     */
+    readonly card: () => PaddingModifier;
+    /**
+     * Compact card padding (all: 12)
+     */
+    readonly cardSm: () => PaddingModifier;
+    /**
+     * Spacious card padding (all: 24)
+     */
+    readonly cardLg: () => PaddingModifier;
+    /**
+     * Section padding preset (horizontal: 20, vertical: 12)
+     * For content sections and layout blocks
+     */
+    readonly section: () => PaddingModifier;
+    /**
+     * Page padding preset (horizontal: 24, vertical: 16)
+     * For top-level page containers
+     */
+    readonly page: () => PaddingModifier;
+    /**
+     * Form field padding (horizontal: 12, vertical: 8)
+     */
+    readonly field: () => PaddingModifier;
+    /**
+     * Navigation item padding (horizontal: 16, vertical: 8)
+     */
+    readonly nav: () => PaddingModifier;
+    /**
+     * List item padding (horizontal: 16, vertical: 12)
+     */
+    readonly listItem: () => PaddingModifier;
+};
+//# sourceMappingURL=padding.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"padding.d.ts","sourceRoot":"","sources":["../../src/basic/padding.ts"],"names":[],"mappings":"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"}

package/dist/basic/padding.js

@@ -0,0 +1,155 @@
+var l = Object.defineProperty;
+var f = (t, o, i) => o in t ? l(t, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[o] = i;
+var g = (t, o, i) => f(t, typeof o != "symbol" ? o + "" : o, i);
+import { B as c } from "../base-CkGf4b9G.js";
+import { isSignal as u, isComputed as m } from "@tachui/core/reactive";
+class r extends c {
+  // Optimized priority for internal spacing (before margin at 50)
+  constructor(i) {
+    super(i);
+    g(this, "type", "padding");
+    g(this, "priority", 45);
+  }
+  apply(i, d) {
+    if (!d.element) return;
+    const a = this.computePaddingStyles(this.properties);
+    this.applyStyles(d.element, a);
+  }
+  computePaddingStyles(i) {
+    const d = {}, a = (n) => u(n) || m(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)
+      d.padding = a(i.all);
+    else {
+      if ("vertical" in i && i.vertical !== void 0) {
+        const n = a(i.vertical);
+        d.paddingTop = n, d.paddingBottom = n;
+      }
+      if ("horizontal" in i && i.horizontal !== void 0) {
+        const n = a(i.horizontal);
+        d.paddingLeft = n, d.paddingRight = n;
+      }
+      "top" in i && i.top !== void 0 && (d.paddingTop = a(i.top)), "right" in i && i.right !== void 0 && (d.paddingRight = a(i.right)), "bottom" in i && i.bottom !== void 0 && (d.paddingBottom = a(i.bottom)), "left" in i && i.left !== void 0 && (d.paddingLeft = a(i.left)), "leading" in i && i.leading !== void 0 && (d.paddingLeft = a(i.leading)), "trailing" in i && i.trailing !== void 0 && (d.paddingRight = a(i.trailing));
+    }
+    return d;
+  }
+}
+function e(t) {
+  return typeof t == "number" || typeof t == "string" ? new r({ all: t }) : new r(t);
+}
+function z(t) {
+  return new r({ top: t });
+}
+function s(t) {
+  return new r({ bottom: t });
+}
+function w(t) {
+  return new r({ left: t });
+}
+function b(t) {
+  return new r({ right: t });
+}
+function L(t) {
+  return new r({ leading: t });
+}
+function S(t) {
+  return new r({ trailing: t });
+}
+function R(t) {
+  return new r({ horizontal: t });
+}
+function B(t) {
+  return new r({ vertical: t });
+}
+const P = {
+  /**
+   * Extra small padding (4px) - For tight spacing
+   */
+  xs: () => e(4),
+  /**
+   * Small padding (8px) - For compact components
+   */
+  sm: () => e(8),
+  /**
+   * Medium padding (12px) - Default comfortable spacing
+   */
+  md: () => e(12),
+  /**
+   * Large padding (16px) - For prominent components
+   */
+  lg: () => e(16),
+  /**
+   * Extra large padding (24px) - For emphasis
+   */
+  xl: () => e(24),
+  /**
+   * Extra extra large padding (32px) - For major sections
+   */
+  xxl: () => e(32),
+  /**
+   * Huge padding (48px) - For hero sections
+   */
+  xxxl: () => e(48),
+  // Semantic presets for common UI patterns
+  /**
+   * Button padding preset (horizontal: 16, vertical: 8)
+   * Optimized for interactive elements
+   */
+  button: () => e({ horizontal: 16, vertical: 8 }),
+  /**
+   * Small button padding (horizontal: 12, vertical: 6)
+   */
+  buttonSm: () => e({ horizontal: 12, vertical: 6 }),
+  /**
+   * Large button padding (horizontal: 24, vertical: 12)
+   */
+  buttonLg: () => e({ horizontal: 24, vertical: 12 }),
+  /**
+   * Card padding preset (all: 16)
+   * Standard for card-like containers
+   */
+  card: () => e(16),
+  /**
+   * Compact card padding (all: 12)
+   */
+  cardSm: () => e(12),
+  /**
+   * Spacious card padding (all: 24)
+   */
+  cardLg: () => e(24),
+  /**
+   * Section padding preset (horizontal: 20, vertical: 12)
+   * For content sections and layout blocks
+   */
+  section: () => e({ horizontal: 20, vertical: 12 }),
+  /**
+   * Page padding preset (horizontal: 24, vertical: 16)
+   * For top-level page containers
+   */
+  page: () => e({ horizontal: 24, vertical: 16 }),
+  /**
+   * Form field padding (horizontal: 12, vertical: 8)
+   */
+  field: () => e({ horizontal: 12, vertical: 8 }),
+  /**
+   * Navigation item padding (horizontal: 16, vertical: 8)
+   */
+  nav: () => e({ horizontal: 16, vertical: 8 }),
+  /**
+   * List item padding (horizontal: 16, vertical: 12)
+   */
+  listItem: () => e({ horizontal: 16, vertical: 12 })
+};
+export {
+  r as PaddingModifier,
+  e as padding,
+  s as paddingBottom,
+  R as paddingHorizontal,
+  L as paddingLeading,
+  w as paddingLeft,
+  P as paddingPresets,
+  b as paddingRight,
+  z as paddingTop,
+  S as paddingTrailing,
+  B as paddingVertical
+};
+//# sourceMappingURL=padding.js.map

package/dist/basic/padding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"padding.js","sources":["../../src/basic/padding.ts"],"sourcesContent":["/**\n * Padding Modifier - Best-in-class internal spacing within elements\n *\n * Comprehensive interface for element padding with full SwiftUI compatibility,\n * CSS-in-JS support, reactive values, design system presets, and RTL awareness.\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\n// Comprehensive CSS-compatible padding values including modern CSS units\nexport type PaddingValue =\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 PaddingOptions =\n  | {\n      all: PaddingValue\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: PaddingValue\n      horizontal: PaddingValue\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?: PaddingValue\n      horizontal?: PaddingValue\n      top?: PaddingValue\n      right?: PaddingValue\n      bottom?: PaddingValue\n      left?: PaddingValue\n      leading?: never\n      trailing?: never\n    }\n  | {\n      all?: never\n      vertical?: PaddingValue\n      horizontal?: PaddingValue\n      top?: PaddingValue\n      leading?: PaddingValue\n      trailing?: PaddingValue\n      bottom?: PaddingValue\n      right?: never\n      left?: never\n    }\n\nexport type ReactivePaddingOptions = ReactiveModifierProps<PaddingOptions>\n\nexport class PaddingModifier extends BaseModifier<PaddingOptions> {\n  readonly type = 'padding'\n  readonly priority = 45 // Optimized priority for internal spacing (before margin at 50)\n\n  constructor(options: ReactivePaddingOptions) {\n    // Enhanced reactive value handling\n    super(options as unknown as PaddingOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computePaddingStyles(this.properties)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private computePaddingStyles(props: PaddingOptions) {\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: PaddingValue): 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.padding = 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.paddingTop = value\n        styles.paddingBottom = value\n      }\n      if ('horizontal' in props && props.horizontal !== undefined) {\n        const value = formatValue(props.horizontal)\n        styles.paddingLeft = value\n        styles.paddingRight = value\n      }\n\n      // Individual sides override shorthand (maintain specificity)\n      if ('top' in props && props.top !== undefined) {\n        styles.paddingTop = formatValue(props.top)\n      }\n      if ('right' in props && props.right !== undefined) {\n        styles.paddingRight = formatValue(props.right)\n      }\n      if ('bottom' in props && props.bottom !== undefined) {\n        styles.paddingBottom = formatValue(props.bottom)\n      }\n      if ('left' in props && props.left !== undefined) {\n        styles.paddingLeft = 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.paddingLeft = formatValue(props.leading) // LTR assumption\n      }\n      if ('trailing' in props && props.trailing !== undefined) {\n        styles.paddingRight = formatValue(props.trailing) // LTR assumption\n      }\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a padding 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 * .padding({ all: 16 })\n * .padding(16) // Shorthand\n *\n * // Symmetric spacing\n * .padding({ vertical: 12, horizontal: 8 })\n *\n * // Individual sides with modern CSS units\n * .padding({ top: '1rem', bottom: 16, left: '2vw', right: 12 })\n *\n * // SwiftUI-style leading/trailing\n * .padding({ leading: 16, trailing: 8, vertical: 12 })\n *\n * // Mixed approach with overrides\n * .padding({ horizontal: 16, top: 8, bottom: 24 })\n *\n * // Modern CSS units\n * .padding({ all: '1rem' })\n * .padding({ vertical: '2vh', horizontal: '10vw' })\n * ```\n */\nexport function padding(options: ReactivePaddingOptions): PaddingModifier\nexport function padding(all: PaddingValue): PaddingModifier\nexport function padding(\n  optionsOrAll: ReactivePaddingOptions | PaddingValue\n): PaddingModifier {\n  if (typeof optionsOrAll === 'number' || typeof optionsOrAll === 'string') {\n    return new PaddingModifier({ all: optionsOrAll })\n  }\n  return new PaddingModifier(optionsOrAll)\n}\n\n/**\n * Convenience function for top padding only\n *\n * @example\n * ```typescript\n * .paddingTop(16)\n * .paddingTop('1rem')\n * .paddingTop('2vh')\n * ```\n */\nexport function paddingTop(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ top: value })\n}\n\n/**\n * Convenience function for bottom padding only\n *\n * @example\n * ```typescript\n * .paddingBottom(24)\n * .paddingBottom('2rem')\n * ```\n */\nexport function paddingBottom(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ bottom: value })\n}\n\n/**\n * Convenience function for left padding only\n *\n * @example\n * ```typescript\n * .paddingLeft(12)\n * .paddingLeft('1rem')\n * ```\n */\nexport function paddingLeft(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ left: value })\n}\n\n/**\n * Convenience function for right padding only\n *\n * @example\n * ```typescript\n * .paddingRight(12)\n * .paddingRight('1rem')\n * ```\n */\nexport function paddingRight(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ right: value })\n}\n\n/**\n * SwiftUI-style leading padding (left in LTR, right in RTL)\n *\n * @example\n * ```typescript\n * .paddingLeading(16)\n * .paddingLeading('1rem')\n * ```\n */\nexport function paddingLeading(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ leading: value })\n}\n\n/**\n * SwiftUI-style trailing padding (right in LTR, left in RTL)\n *\n * @example\n * ```typescript\n * .paddingTrailing(8)\n * .paddingTrailing('0.5rem')\n * ```\n */\nexport function paddingTrailing(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ trailing: value })\n}\n\n/**\n * Convenience function for left and right padding\n *\n * @example\n * ```typescript\n * .paddingHorizontal(20)\n * .paddingHorizontal('2rem')\n * .paddingHorizontal('5vw')\n * ```\n */\nexport function paddingHorizontal(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ horizontal: value })\n}\n\n/**\n * Convenience function for top and bottom padding\n *\n * @example\n * ```typescript\n * .paddingVertical(16)\n * .paddingVertical('1rem')\n * .paddingVertical('3vh')\n * ```\n */\nexport function paddingVertical(value: PaddingValue): PaddingModifier {\n  return new PaddingModifier({ vertical: value })\n}\n\n/**\n * Design system padding 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 paddingPresets = {\n  /**\n   * Extra small padding (4px) - For tight spacing\n   */\n  xs: () => padding(4),\n\n  /**\n   * Small padding (8px) - For compact components\n   */\n  sm: () => padding(8),\n\n  /**\n   * Medium padding (12px) - Default comfortable spacing\n   */\n  md: () => padding(12),\n\n  /**\n   * Large padding (16px) - For prominent components\n   */\n  lg: () => padding(16),\n\n  /**\n   * Extra large padding (24px) - For emphasis\n   */\n  xl: () => padding(24),\n\n  /**\n   * Extra extra large padding (32px) - For major sections\n   */\n  xxl: () => padding(32),\n\n  /**\n   * Huge padding (48px) - For hero sections\n   */\n  xxxl: () => padding(48),\n\n  // Semantic presets for common UI patterns\n\n  /**\n   * Button padding preset (horizontal: 16, vertical: 8)\n   * Optimized for interactive elements\n   */\n  button: () => padding({ horizontal: 16, vertical: 8 }),\n\n  /**\n   * Small button padding (horizontal: 12, vertical: 6)\n   */\n  buttonSm: () => padding({ horizontal: 12, vertical: 6 }),\n\n  /**\n   * Large button padding (horizontal: 24, vertical: 12)\n   */\n  buttonLg: () => padding({ horizontal: 24, vertical: 12 }),\n\n  /**\n   * Card padding preset (all: 16)\n   * Standard for card-like containers\n   */\n  card: () => padding(16),\n\n  /**\n   * Compact card padding (all: 12)\n   */\n  cardSm: () => padding(12),\n\n  /**\n   * Spacious card padding (all: 24)\n   */\n  cardLg: () => padding(24),\n\n  /**\n   * Section padding preset (horizontal: 20, vertical: 12)\n   * For content sections and layout blocks\n   */\n  section: () => padding({ horizontal: 20, vertical: 12 }),\n\n  /**\n   * Page padding preset (horizontal: 24, vertical: 16)\n   * For top-level page containers\n   */\n  page: () => padding({ horizontal: 24, vertical: 16 }),\n\n  /**\n   * Form field padding (horizontal: 12, vertical: 8)\n   */\n  field: () => padding({ horizontal: 12, vertical: 8 }),\n\n  /**\n   * Navigation item padding (horizontal: 16, vertical: 8)\n   */\n  nav: () => padding({ horizontal: 16, vertical: 8 }),\n\n  /**\n   * List item padding (horizontal: 16, vertical: 12)\n   */\n  listItem: () => padding({ horizontal: 16, vertical: 12 }),\n} as const\n\n// Types are exported above - avoiding duplicate exports\n"],"names":["PaddingModifier","BaseModifier","options","__publicField","_node","context","styles","props","formatValue","value","isSignal","isComputed","padding","optionsOrAll","paddingTop","paddingBottom","paddingLeft","paddingRight","paddingLeading","paddingTrailing","paddingHorizontal","paddingVertical","paddingPresets"],"mappings":"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"}

package/dist/basic/size.d.ts

@@ -0,0 +1,113 @@
+/**
+ * Size Modifier - width, height, min/max dimensions
+ *
+ * Provides a unified interface for setting element dimensions
+ * with support for SwiftUI-style infinity constants.
+ */
+import type { DOMNode } from '@tachui/core/runtime/types';
+import type { Dimension } from '@tachui/core/constants/layout';
+import { BaseModifier } from './base';
+import type { ModifierContext, ReactiveModifierProps } from '@tachui/core/modifiers/types';
+export interface SizeOptions {
+    width?: Dimension;
+    height?: Dimension;
+    minWidth?: Dimension;
+    maxWidth?: Dimension;
+    minHeight?: Dimension;
+    maxHeight?: Dimension;
+}
+export type ReactiveSizeOptions = ReactiveModifierProps<SizeOptions>;
+export declare class SizeModifier extends BaseModifier<SizeOptions> {
+    readonly type = "size";
+    readonly priority = 80;
+    constructor(options: ReactiveSizeOptions);
+    apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined;
+    private computeSizeStyles;
+}
+/**
+ * Create a size modifier with multiple dimension properties
+ * Now supports SwiftUI-style infinity for responsive layouts
+ *
+ * @example
+ * ```typescript
+ * // Set both width and height
+ * .size({ width: 200, height: 100 })
+ *
+ * // Set responsive width with constraints
+ * .size({ width: '100%', maxWidth: 800, minWidth: 320 })
+ *
+ * // SwiftUI-style infinity support
+ * .size({ width: infinity, height: 200 })
+ * .size({ maxWidth: infinity, maxHeight: infinity })
+ * ```
+ */
+export declare function size(options: ReactiveSizeOptions): SizeModifier;
+/**
+ * Convenience function for setting width only
+ * Supports infinity for fill-available behavior
+ *
+ * @example
+ * ```typescript
+ * .width('100%')
+ * .width(280)
+ * .width(infinity) // Fill available space
+ * ```
+ */
+export declare function width(value: Dimension): SizeModifier;
+/**
+ * Convenience function for setting height only
+ * Supports infinity for fill-available behavior
+ *
+ * @example
+ * ```typescript
+ * .height('100vh')
+ * .height(64)
+ * .height(infinity) // Fill available space
+ * ```
+ */
+export declare function height(value: Dimension): SizeModifier;
+/**
+ * Convenience function for setting max-width only
+ * Supports infinity to remove width constraints
+ *
+ * @example
+ * ```typescript
+ * .maxWidth(800)
+ * .maxWidth('100%')
+ * .maxWidth(infinity) // Remove width constraints
+ * ```
+ */
+export declare function maxWidth(value: Dimension): SizeModifier;
+/**
+ * Convenience function for setting min-width only
+ *
+ * @example
+ * ```typescript
+ * .minWidth(320)
+ * .minWidth('50%')
+ * ```
+ */
+export declare function minWidth(value: Dimension): SizeModifier;
+/**
+ * Convenience function for setting max-height only
+ * Supports infinity to remove height constraints
+ *
+ * @example
+ * ```typescript
+ * .maxHeight(600)
+ * .maxHeight('80vh')
+ * .maxHeight(infinity) // Remove height constraints
+ * ```
+ */
+export declare function maxHeight(value: Dimension): SizeModifier;
+/**
+ * Convenience function for setting min-height only
+ *
+ * @example
+ * ```typescript
+ * .minHeight(200)
+ * .minHeight('30vh')
+ * ```
+ */
+export declare function minHeight(value: Dimension): SizeModifier;
+//# sourceMappingURL=size.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../src/basic/size.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AAM9D,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAA;AACrC,OAAO,KAAK,EACV,eAAe,EACf,qBAAqB,EACtB,MAAM,8BAA8B,CAAA;AAErC,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;CACtB;AAED,MAAM,MAAM,mBAAmB,GAAG,qBAAqB,CAAC,WAAW,CAAC,CAAA;AAEpE,qBAAa,YAAa,SAAQ,YAAY,CAAC,WAAW,CAAC;IACzD,QAAQ,CAAC,IAAI,UAAS;IACtB,QAAQ,CAAC,QAAQ,MAAK;gBAEV,OAAO,EAAE,mBAAmB;IAKxC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,GAAG,SAAS;IASpE,OAAO,CAAC,iBAAiB;CA0D1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,IAAI,CAAC,OAAO,EAAE,mBAAmB,GAAG,YAAY,CAE/D;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CAEpD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CAErD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CAEvD;AAED;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CAEvD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CAExD;AAED;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,GAAG,YAAY,CAExD"}

package/dist/basic/size.js

@@ -0,0 +1,78 @@
+var f = Object.defineProperty;
+var u = (t, h, i) => h in t ? f(t, h, { enumerable: !0, configurable: !0, writable: !0, value: i }) : t[h] = i;
+var a = (t, h, i) => u(t, typeof h != "symbol" ? h + "" : h, i);
+import { shouldExpandForInfinity as c, dimensionToCSS as m, isInfinity as s } from "@tachui/core/constants/layout";
+import { B as g } from "../base-CkGf4b9G.js";
+class d extends g {
+  // Priority 80 for layout
+  constructor(i) {
+    super(i);
+    a(this, "type", "size");
+    a(this, "priority", 80);
+  }
+  apply(i, n) {
+    if (!n.element) return;
+    const o = this.computeSizeStyles(this.properties);
+    this.applyStyles(n.element, o);
+  }
+  computeSizeStyles(i) {
+    const n = {}, o = c(i);
+    if (Object.assign(n, o.cssProps), i.width !== void 0) {
+      const e = m(i.width);
+      e !== void 0 && !s(i.width) && (n.width = e);
+    }
+    if (i.height !== void 0) {
+      const e = m(i.height);
+      e !== void 0 && !s(i.height) && (n.height = e);
+    }
+    if (i.minWidth !== void 0) {
+      const e = m(i.minWidth);
+      e !== void 0 && (n.minWidth = e);
+    }
+    if (i.maxWidth !== void 0 && !s(i.maxWidth)) {
+      const e = m(i.maxWidth);
+      e !== void 0 && (n.maxWidth = e);
+    } else s(i.maxWidth) && (n.maxWidth = "none");
+    if (i.minHeight !== void 0) {
+      const e = m(i.minHeight);
+      e !== void 0 && (n.minHeight = e);
+    }
+    if (i.maxHeight !== void 0 && !s(i.maxHeight)) {
+      const e = m(i.maxHeight);
+      e !== void 0 && (n.maxHeight = e);
+    } else s(i.maxHeight) && (n.maxHeight = "none");
+    return n;
+  }
+}
+function v(t) {
+  return new d(t);
+}
+function w(t) {
+  return new d({ width: t });
+}
+function H(t) {
+  return new d({ height: t });
+}
+function W(t) {
+  return new d({ maxWidth: t });
+}
+function y(t) {
+  return new d({ minWidth: t });
+}
+function S(t) {
+  return new d({ maxHeight: t });
+}
+function V(t) {
+  return new d({ minHeight: t });
+}
+export {
+  d as SizeModifier,
+  H as height,
+  S as maxHeight,
+  W as maxWidth,
+  V as minHeight,
+  y as minWidth,
+  v as size,
+  w as width
+};
+//# sourceMappingURL=size.js.map

package/dist/basic/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sources":["../../src/basic/size.ts"],"sourcesContent":["/**\n * Size Modifier - width, height, min/max dimensions\n *\n * Provides a unified interface for setting element dimensions\n * with support for SwiftUI-style infinity constants.\n */\n\nimport type { DOMNode } from '@tachui/core/runtime/types'\nimport type { Dimension } from '@tachui/core/constants/layout'\nimport {\n  dimensionToCSS,\n  isInfinity,\n  shouldExpandForInfinity,\n} from '@tachui/core/constants/layout'\nimport { BaseModifier } from './base'\nimport type {\n  ModifierContext,\n  ReactiveModifierProps,\n} from '@tachui/core/modifiers/types'\n\nexport interface SizeOptions {\n  width?: Dimension\n  height?: Dimension\n  minWidth?: Dimension\n  maxWidth?: Dimension\n  minHeight?: Dimension\n  maxHeight?: Dimension\n}\n\nexport type ReactiveSizeOptions = ReactiveModifierProps<SizeOptions>\n\nexport class SizeModifier extends BaseModifier<SizeOptions> {\n  readonly type = 'size'\n  readonly priority = 80 // Priority 80 for layout\n\n  constructor(options: ReactiveSizeOptions) {\n    // Preserve reactive values; BaseModifier.applyStyles will create effects\n    super(options as unknown as SizeOptions)\n  }\n\n  apply(_node: DOMNode, context: ModifierContext): DOMNode | undefined {\n    if (!context.element) return\n\n    const styles = this.computeSizeStyles(this.properties)\n    this.applyStyles(context.element, styles)\n\n    return undefined\n  }\n\n  private computeSizeStyles(props: SizeOptions) {\n    const styles: Record<string, any> = {}\n\n    // Check for infinity constraints and apply appropriate flex/size styles\n    const infinityResult = shouldExpandForInfinity(props)\n    Object.assign(styles, infinityResult.cssProps)\n\n    // Convert dimensions to CSS, handling infinity appropriately\n    if (props.width !== undefined) {\n      const cssValue = dimensionToCSS(props.width)\n      if (cssValue !== undefined && !isInfinity(props.width)) {\n        styles.width = cssValue\n      }\n    }\n\n    if (props.height !== undefined) {\n      const cssValue = dimensionToCSS(props.height)\n      if (cssValue !== undefined && !isInfinity(props.height)) {\n        styles.height = cssValue\n      }\n    }\n\n    if (props.minWidth !== undefined) {\n      const cssValue = dimensionToCSS(props.minWidth)\n      if (cssValue !== undefined) {\n        styles.minWidth = cssValue\n      }\n    }\n\n    if (props.maxWidth !== undefined && !isInfinity(props.maxWidth)) {\n      const cssValue = dimensionToCSS(props.maxWidth)\n      if (cssValue !== undefined) {\n        styles.maxWidth = cssValue\n      }\n    } else if (isInfinity(props.maxWidth)) {\n      // Remove maxWidth constraint for infinity\n      styles.maxWidth = 'none'\n    }\n\n    if (props.minHeight !== undefined) {\n      const cssValue = dimensionToCSS(props.minHeight)\n      if (cssValue !== undefined) {\n        styles.minHeight = cssValue\n      }\n    }\n\n    if (props.maxHeight !== undefined && !isInfinity(props.maxHeight)) {\n      const cssValue = dimensionToCSS(props.maxHeight)\n      if (cssValue !== undefined) {\n        styles.maxHeight = cssValue\n      }\n    } else if (isInfinity(props.maxHeight)) {\n      // Remove maxHeight constraint for infinity\n      styles.maxHeight = 'none'\n    }\n\n    return styles\n  }\n}\n\n/**\n * Create a size modifier with multiple dimension properties\n * Now supports SwiftUI-style infinity for responsive layouts\n *\n * @example\n * ```typescript\n * // Set both width and height\n * .size({ width: 200, height: 100 })\n *\n * // Set responsive width with constraints\n * .size({ width: '100%', maxWidth: 800, minWidth: 320 })\n *\n * // SwiftUI-style infinity support\n * .size({ width: infinity, height: 200 })\n * .size({ maxWidth: infinity, maxHeight: infinity })\n * ```\n */\nexport function size(options: ReactiveSizeOptions): SizeModifier {\n  return new SizeModifier(options)\n}\n\n/**\n * Convenience function for setting width only\n * Supports infinity for fill-available behavior\n *\n * @example\n * ```typescript\n * .width('100%')\n * .width(280)\n * .width(infinity) // Fill available space\n * ```\n */\nexport function width(value: Dimension): SizeModifier {\n  return new SizeModifier({ width: value })\n}\n\n/**\n * Convenience function for setting height only\n * Supports infinity for fill-available behavior\n *\n * @example\n * ```typescript\n * .height('100vh')\n * .height(64)\n * .height(infinity) // Fill available space\n * ```\n */\nexport function height(value: Dimension): SizeModifier {\n  return new SizeModifier({ height: value })\n}\n\n/**\n * Convenience function for setting max-width only\n * Supports infinity to remove width constraints\n *\n * @example\n * ```typescript\n * .maxWidth(800)\n * .maxWidth('100%')\n * .maxWidth(infinity) // Remove width constraints\n * ```\n */\nexport function maxWidth(value: Dimension): SizeModifier {\n  return new SizeModifier({ maxWidth: value })\n}\n\n/**\n * Convenience function for setting min-width only\n *\n * @example\n * ```typescript\n * .minWidth(320)\n * .minWidth('50%')\n * ```\n */\nexport function minWidth(value: Dimension): SizeModifier {\n  return new SizeModifier({ minWidth: value })\n}\n\n/**\n * Convenience function for setting max-height only\n * Supports infinity to remove height constraints\n *\n * @example\n * ```typescript\n * .maxHeight(600)\n * .maxHeight('80vh')\n * .maxHeight(infinity) // Remove height constraints\n * ```\n */\nexport function maxHeight(value: Dimension): SizeModifier {\n  return new SizeModifier({ maxHeight: value })\n}\n\n/**\n * Convenience function for setting min-height only\n *\n * @example\n * ```typescript\n * .minHeight(200)\n * .minHeight('30vh')\n * ```\n */\nexport function minHeight(value: Dimension): SizeModifier {\n  return new SizeModifier({ minHeight: value })\n}\n"],"names":["SizeModifier","BaseModifier","options","__publicField","_node","context","styles","props","infinityResult","shouldExpandForInfinity","cssValue","dimensionToCSS","isInfinity","size","width","value","height","maxWidth","minWidth","maxHeight","minHeight"],"mappings":";;;;;AA+BO,MAAMA,UAAqBC,EAA0B;AAAA;AAAA,EAI1D,YAAYC,GAA8B;AAExC,UAAMA,CAAiC;AALhC,IAAAC,EAAA,cAAO;AACP,IAAAA,EAAA,kBAAW;AAAA,EAKpB;AAAA,EAEA,MAAMC,GAAgBC,GAA+C;AACnE,QAAI,CAACA,EAAQ,QAAS;AAEtB,UAAMC,IAAS,KAAK,kBAAkB,KAAK,UAAU;AACrD,SAAK,YAAYD,EAAQ,SAASC,CAAM;AAAA,EAG1C;AAAA,EAEQ,kBAAkBC,GAAoB;AAC5C,UAAMD,IAA8B,CAAA,GAG9BE,IAAiBC,EAAwBF,CAAK;AAIpD,QAHA,OAAO,OAAOD,GAAQE,EAAe,QAAQ,GAGzCD,EAAM,UAAU,QAAW;AAC7B,YAAMG,IAAWC,EAAeJ,EAAM,KAAK;AAC3C,MAAIG,MAAa,UAAa,CAACE,EAAWL,EAAM,KAAK,MACnDD,EAAO,QAAQI;AAAA,IAEnB;AAEA,QAAIH,EAAM,WAAW,QAAW;AAC9B,YAAMG,IAAWC,EAAeJ,EAAM,MAAM;AAC5C,MAAIG,MAAa,UAAa,CAACE,EAAWL,EAAM,MAAM,MACpDD,EAAO,SAASI;AAAA,IAEpB;AAEA,QAAIH,EAAM,aAAa,QAAW;AAChC,YAAMG,IAAWC,EAAeJ,EAAM,QAAQ;AAC9C,MAAIG,MAAa,WACfJ,EAAO,WAAWI;AAAA,IAEtB;AAEA,QAAIH,EAAM,aAAa,UAAa,CAACK,EAAWL,EAAM,QAAQ,GAAG;AAC/D,YAAMG,IAAWC,EAAeJ,EAAM,QAAQ;AAC9C,MAAIG,MAAa,WACfJ,EAAO,WAAWI;AAAA,IAEtB,MAAA,CAAWE,EAAWL,EAAM,QAAQ,MAElCD,EAAO,WAAW;AAGpB,QAAIC,EAAM,cAAc,QAAW;AACjC,YAAMG,IAAWC,EAAeJ,EAAM,SAAS;AAC/C,MAAIG,MAAa,WACfJ,EAAO,YAAYI;AAAA,IAEvB;AAEA,QAAIH,EAAM,cAAc,UAAa,CAACK,EAAWL,EAAM,SAAS,GAAG;AACjE,YAAMG,IAAWC,EAAeJ,EAAM,SAAS;AAC/C,MAAIG,MAAa,WACfJ,EAAO,YAAYI;AAAA,IAEvB,MAAA,CAAWE,EAAWL,EAAM,SAAS,MAEnCD,EAAO,YAAY;AAGrB,WAAOA;AAAA,EACT;AACF;AAmBO,SAASO,EAAKX,GAA4C;AAC/D,SAAO,IAAIF,EAAaE,CAAO;AACjC;AAaO,SAASY,EAAMC,GAAgC;AACpD,SAAO,IAAIf,EAAa,EAAE,OAAOe,GAAO;AAC1C;AAaO,SAASC,EAAOD,GAAgC;AACrD,SAAO,IAAIf,EAAa,EAAE,QAAQe,GAAO;AAC3C;AAaO,SAASE,EAASF,GAAgC;AACvD,SAAO,IAAIf,EAAa,EAAE,UAAUe,GAAO;AAC7C;AAWO,SAASG,EAASH,GAAgC;AACvD,SAAO,IAAIf,EAAa,EAAE,UAAUe,GAAO;AAC7C;AAaO,SAASI,EAAUJ,GAAgC;AACxD,SAAO,IAAIf,EAAa,EAAE,WAAWe,GAAO;AAC9C;AAWO,SAASK,EAAUL,GAAgC;AACxD,SAAO,IAAIf,EAAa,EAAE,WAAWe,GAAO;AAC9C;"}