@tachui/modifiers/dist/basic/margin.js

Essential styling modifiers for tachUI framework

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