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

Essential styling modifiers for tachUI framework

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