@tachui/core 0.7.0-alpha1

package/dist/components/Section.js

@@ -0,0 +1,323 @@
+import "../reactive/cleanup.js";
+import "../reactive/unified-scheduler.js";
+import { isSignal as l } from "../reactive/signal.js";
+import "../reactive/scheduler.js";
+import "../reactive/theme.js";
+import "../runtime/component.js";
+import "../runtime/context.js";
+import "../runtime/dev-tools.js";
+import "../runtime/dom-bridge.js";
+import "../runtime/error-boundary.js";
+import "../runtime/error-reporting.js";
+import "../runtime/performance.js";
+import { h as s, text as p } from "../runtime/renderer.js";
+import "../runtime/element-override.js";
+import "../runtime/semantic-role-manager.js";
+import "../runtime/development-warnings.js";
+import { withModifiers as a } from "./wrapper.js";
+var d = Object.defineProperty, c = (r, e, t) => e in r ? d(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, i = (r, e, t) => c(r, typeof e != "symbol" ? e + "" : e, t);
+class u {
+  constructor(e) {
+    this.props = e, i(this, "type", "component"), i(this, "id"), i(this, "mounted", !1), i(this, "cleanup", []), i(this, "handleToggle", () => {
+      this.props.onToggle && this.props.onToggle(!this.isCollapsed());
+    }), this.id = `section-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  /**
+   * Resolve dynamic content
+   */
+  resolveContent(e) {
+    return e ? typeof e == "string" ? e : typeof e == "function" || l(e) ? e() : e : null;
+  }
+  /**
+   * Check if section is collapsed
+   */
+  isCollapsed() {
+    const { collapsed: e } = this.props;
+    return typeof e == "boolean" ? e : l(e) ? e() : !1;
+  }
+  /**
+   * Helper to render component content safely
+   */
+  renderComponentContent(e) {
+    const t = e.render();
+    return Array.isArray(t) ? t : [t];
+  }
+  /**
+   * Get section styles based on style prop
+   */
+  getSectionStyles() {
+    const { style: e = "automatic" } = this.props, t = {
+      marginBottom: "20px"
+    };
+    switch (e) {
+      case "grouped":
+        return {
+          ...t,
+          backgroundColor: "#ffffff",
+          border: "1px solid #e0e0e0",
+          borderRadius: "12px",
+          overflow: "hidden"
+        };
+      case "inset":
+        return {
+          ...t,
+          backgroundColor: "#f8f9fa",
+          border: "1px solid #e9ecef",
+          borderRadius: "8px",
+          margin: "0 16px 20px 16px"
+        };
+      case "sidebar":
+        return {
+          ...t,
+          borderLeft: "3px solid #007AFF",
+          paddingLeft: "16px",
+          backgroundColor: "#f8f9fa",
+          borderRadius: "0 8px 8px 0"
+        };
+      case "plain":
+        return t;
+      default:
+        return {
+          ...t,
+          backgroundColor: "#ffffff",
+          border: "1px solid #f0f0f0",
+          borderRadius: "8px"
+        };
+    }
+  }
+  /**
+   * Get header styles
+   */
+  getHeaderStyles() {
+    const { style: e = "automatic" } = this.props, t = {
+      fontSize: "16px",
+      fontWeight: "600",
+      color: "#1a1a1a",
+      margin: "0 0 12px 0"
+    };
+    switch (e) {
+      case "grouped":
+      case "inset":
+        return {
+          ...t,
+          padding: "12px 16px 0 16px",
+          backgroundColor: "#f8f9fa",
+          borderBottom: "1px solid #e9ecef"
+        };
+      case "sidebar":
+        return {
+          ...t,
+          fontSize: "14px",
+          textTransform: "uppercase",
+          letterSpacing: "0.5px",
+          color: "#666",
+          marginBottom: "8px"
+        };
+      default:
+        return {
+          ...t,
+          padding: "0 0 8px 0"
+        };
+    }
+  }
+  /**
+   * Get content styles
+   */
+  getContentStyles() {
+    const { style: e = "automatic", spacing: t = 12 } = this.props, o = {
+      display: "flex",
+      flexDirection: "column",
+      gap: `${t}px`
+    };
+    switch (e) {
+      case "grouped":
+      case "inset":
+        return {
+          ...o,
+          padding: "16px"
+        };
+      case "sidebar":
+        return {
+          ...o,
+          padding: "8px 0"
+        };
+      default:
+        return {
+          ...o,
+          padding: "12px"
+        };
+    }
+  }
+  /**
+   * Get footer styles
+   */
+  getFooterStyles() {
+    const { style: e = "automatic" } = this.props, t = {
+      fontSize: "14px",
+      color: "#666",
+      margin: "8px 0 0 0"
+    };
+    switch (e) {
+      case "grouped":
+      case "inset":
+        return {
+          ...t,
+          padding: "0 16px 12px 16px",
+          backgroundColor: "#f8f9fa",
+          borderTop: "1px solid #e9ecef"
+        };
+      default:
+        return {
+          ...t,
+          padding: "0 0 4px 0"
+        };
+    }
+  }
+  /**
+   * Render header content
+   */
+  renderHeader() {
+    const e = this.resolveContent(this.props.header);
+    if (!e) return null;
+    const t = this.getHeaderStyles();
+    if (this.props.collapsible) {
+      const o = this.isCollapsed() ? "▶" : "▼";
+      return s(
+        "div",
+        {
+          style: {
+            ...t,
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            gap: "8px"
+          },
+          onClick: this.handleToggle
+        },
+        s(
+          "span",
+          {
+            style: {
+              fontSize: "12px",
+              color: "#666"
+            }
+          },
+          p(o)
+        ),
+        ...typeof e == "string" ? [p(e)] : this.renderComponentContent(e)
+      );
+    }
+    return s(
+      "div",
+      { style: t },
+      ...typeof e == "string" ? [p(e)] : this.renderComponentContent(e)
+    );
+  }
+  /**
+   * Render content
+   */
+  renderContent() {
+    const { children: e = [] } = this.props;
+    return this.props.collapsible && this.isCollapsed() || e.length === 0 ? null : s(
+      "div",
+      {
+        style: this.getContentStyles()
+      },
+      ...e.flatMap((t) => {
+        const o = t.render();
+        return Array.isArray(o) ? o : [o];
+      })
+    );
+  }
+  /**
+   * Render footer content
+   */
+  renderFooter() {
+    const e = this.resolveContent(this.props.footer);
+    return e ? s(
+      "div",
+      {
+        style: this.getFooterStyles()
+      },
+      ...typeof e == "string" ? [p(e)] : this.renderComponentContent(e)
+    ) : null;
+  }
+  render() {
+    const { accessibilityLabel: e, accessibilityRole: t = "group" } = this.props;
+    return s(
+      "div",
+      {
+        style: this.getSectionStyles(),
+        "aria-label": e,
+        role: t
+      },
+      ...[this.renderHeader(), this.renderContent(), this.renderFooter()].filter(
+        (o) => o !== null
+      )
+    );
+  }
+}
+function n(r, e = {}) {
+  console.warn(
+    "Section from @tachui/core is deprecated. Use FormSection from @tachui/forms for form contexts, or VStack for general layout grouping."
+  );
+  const t = { ...e, children: r }, o = new u(t);
+  return a(o);
+}
+function R(r, e, t = {}) {
+  return n(e, { ...t, header: r });
+}
+function k(r, e, t, o = {}) {
+  return n(t, { ...o, header: r, footer: e });
+}
+const z = {
+  /**
+   * Automatic section styling (default)
+   */
+  Automatic(r, e = {}) {
+    return n(r, { ...e, style: "automatic" });
+  },
+  /**
+   * Grouped section with container styling
+   */
+  Grouped(r, e = {}) {
+    return n(r, { ...e, style: "grouped" });
+  },
+  /**
+   * Inset section styling
+   */
+  Inset(r, e = {}) {
+    return n(r, { ...e, style: "inset" });
+  },
+  /**
+   * Sidebar-style section
+   */
+  Sidebar(r, e = {}) {
+    return n(r, { ...e, style: "sidebar" });
+  },
+  /**
+   * Plain section without styling
+   */
+  Plain(r, e = {}) {
+    return n(r, { ...e, style: "plain" });
+  },
+  /**
+   * Collapsible section
+   */
+  Collapsible(r, e, t = !1, o = {}) {
+    return n(e, {
+      ...o,
+      header: r,
+      collapsible: !0,
+      collapsed: t
+    });
+  }
+};
+export {
+  u as EnhancedSection,
+  n as Section,
+  z as SectionStyles,
+  R as SectionWithHeader,
+  k as SectionWithHeaderFooter
+};
+//# sourceMappingURL=Section.js.map

package/dist/components/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sources":["../../src/components/Section.ts"],"sourcesContent":["/**\n * Enhanced Section Component (Phase 6.4.2)\n *\n * @deprecated This component has been superseded by FormSection from @tachui/forms \n * for form contexts, which provides the same features with better semantic HTML.\n * For general layout grouping, use VStack or HStack with styling instead.\n *\n * Migration Guide:\n * - For forms: Replace with FormSection from @tachui/forms\n * - For general grouping: Use VStack with styling modifiers\n * - All props are compatible between Section and FormSection\n *\n * SwiftUI-inspired Section component for grouping form content\n * with headers, footers, and automatic styling.\n */\n\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { isSignal } from '../reactive'\nimport type { Signal } from '../reactive/types'\nimport { h, text } from '../runtime'\nimport type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'\nimport { withModifiers } from './wrapper'\n\n/**\n * Section component properties\n */\nexport interface SectionProps extends ComponentProps {\n  children?: ComponentInstance[]\n\n  // Content\n  header?: string | (() => string) | Signal<string> | ComponentInstance\n  footer?: string | (() => string) | Signal<string> | ComponentInstance\n\n  // Styling\n  style?: 'automatic' | 'grouped' | 'inset' | 'plain' | 'sidebar'\n  spacing?: number\n\n  // Behavior\n  collapsible?: boolean\n  collapsed?: boolean | Signal<boolean>\n  onToggle?: (collapsed: boolean) => void\n\n  // Accessibility\n  accessibilityLabel?: string\n  accessibilityRole?: string\n}\n\n/**\n * Enhanced Section component class\n */\nexport class EnhancedSection implements ComponentInstance<SectionProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public mounted = false\n  public cleanup: (() => void)[] = []\n\n  constructor(public props: SectionProps) {\n    this.id = `section-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n  }\n\n  /**\n   * Resolve dynamic content\n   */\n  private resolveContent(\n    content: string | (() => string) | Signal<string> | ComponentInstance | undefined\n  ): string | ComponentInstance | null {\n    if (!content) return null\n\n    if (typeof content === 'string') {\n      return content\n    } else if (typeof content === 'function') {\n      return content()\n    } else if (isSignal(content)) {\n      return (content as () => string)()\n    } else {\n      return content as ComponentInstance\n    }\n  }\n\n  /**\n   * Check if section is collapsed\n   */\n  private isCollapsed(): boolean {\n    const { collapsed } = this.props\n    if (typeof collapsed === 'boolean') return collapsed\n    if (isSignal(collapsed)) return (collapsed as () => boolean)()\n    return false\n  }\n\n  /**\n   * Handle toggle action\n   */\n  private handleToggle = () => {\n    if (this.props.onToggle) {\n      this.props.onToggle(!this.isCollapsed())\n    }\n  }\n\n  /**\n   * Helper to render component content safely\n   */\n  private renderComponentContent(content: ComponentInstance): DOMNode[] {\n    const rendered = content.render()\n    return Array.isArray(rendered) ? rendered : [rendered]\n  }\n\n  /**\n   * Get section styles based on style prop\n   */\n  private getSectionStyles() {\n    const { style = 'automatic' } = this.props\n\n    const baseStyles = {\n      marginBottom: '20px',\n    }\n\n    switch (style) {\n      case 'grouped':\n        return {\n          ...baseStyles,\n          backgroundColor: '#ffffff',\n          border: '1px solid #e0e0e0',\n          borderRadius: '12px',\n          overflow: 'hidden' as const,\n        }\n\n      case 'inset':\n        return {\n          ...baseStyles,\n          backgroundColor: '#f8f9fa',\n          border: '1px solid #e9ecef',\n          borderRadius: '8px',\n          margin: '0 16px 20px 16px',\n        }\n\n      case 'sidebar':\n        return {\n          ...baseStyles,\n          borderLeft: '3px solid #007AFF',\n          paddingLeft: '16px',\n          backgroundColor: '#f8f9fa',\n          borderRadius: '0 8px 8px 0',\n        }\n\n      case 'plain':\n        return baseStyles\n      default:\n        return {\n          ...baseStyles,\n          backgroundColor: '#ffffff',\n          border: '1px solid #f0f0f0',\n          borderRadius: '8px',\n        }\n    }\n  }\n\n  /**\n   * Get header styles\n   */\n  private getHeaderStyles() {\n    const { style = 'automatic' } = this.props\n\n    const baseStyles = {\n      fontSize: '16px',\n      fontWeight: '600' as const,\n      color: '#1a1a1a',\n      margin: '0 0 12px 0',\n    }\n\n    switch (style) {\n      case 'grouped':\n      case 'inset':\n        return {\n          ...baseStyles,\n          padding: '12px 16px 0 16px',\n          backgroundColor: '#f8f9fa',\n          borderBottom: '1px solid #e9ecef',\n        }\n\n      case 'sidebar':\n        return {\n          ...baseStyles,\n          fontSize: '14px',\n          textTransform: 'uppercase' as const,\n          letterSpacing: '0.5px',\n          color: '#666',\n          marginBottom: '8px',\n        }\n\n      default:\n        return {\n          ...baseStyles,\n          padding: '0 0 8px 0',\n        }\n    }\n  }\n\n  /**\n   * Get content styles\n   */\n  private getContentStyles() {\n    const { style = 'automatic', spacing = 12 } = this.props\n\n    const baseStyles = {\n      display: 'flex',\n      flexDirection: 'column' as const,\n      gap: `${spacing}px`,\n    }\n\n    switch (style) {\n      case 'grouped':\n      case 'inset':\n        return {\n          ...baseStyles,\n          padding: '16px',\n        }\n\n      case 'sidebar':\n        return {\n          ...baseStyles,\n          padding: '8px 0',\n        }\n\n      default:\n        return {\n          ...baseStyles,\n          padding: '12px',\n        }\n    }\n  }\n\n  /**\n   * Get footer styles\n   */\n  private getFooterStyles() {\n    const { style = 'automatic' } = this.props\n\n    const baseStyles = {\n      fontSize: '14px',\n      color: '#666',\n      margin: '8px 0 0 0',\n    }\n\n    switch (style) {\n      case 'grouped':\n      case 'inset':\n        return {\n          ...baseStyles,\n          padding: '0 16px 12px 16px',\n          backgroundColor: '#f8f9fa',\n          borderTop: '1px solid #e9ecef',\n        }\n\n      default:\n        return {\n          ...baseStyles,\n          padding: '0 0 4px 0',\n        }\n    }\n  }\n\n  /**\n   * Render header content\n   */\n  private renderHeader() {\n    const headerContent = this.resolveContent(this.props.header)\n    if (!headerContent) return null\n\n    const headerStyles = this.getHeaderStyles()\n\n    // Add collapse toggle if collapsible\n    if (this.props.collapsible) {\n      const toggleIcon = this.isCollapsed() ? '▶' : '▼'\n\n      return h(\n        'div',\n        {\n          style: {\n            ...headerStyles,\n            cursor: 'pointer',\n            display: 'flex',\n            alignItems: 'center',\n            gap: '8px',\n          },\n          onClick: this.handleToggle,\n        },\n        h(\n          'span',\n          {\n            style: {\n              fontSize: '12px',\n              color: '#666',\n            },\n          },\n          text(toggleIcon)\n        ),\n\n        ...(typeof headerContent === 'string'\n          ? [text(headerContent)]\n          : this.renderComponentContent(headerContent as ComponentInstance))\n      )\n    }\n\n    return h(\n      'div',\n      { style: headerStyles },\n      ...(typeof headerContent === 'string'\n        ? [text(headerContent)]\n        : this.renderComponentContent(headerContent as ComponentInstance))\n    )\n  }\n\n  /**\n   * Render content\n   */\n  private renderContent() {\n    const { children = [] } = this.props\n\n    // Don't render content if collapsed\n    if (this.props.collapsible && this.isCollapsed()) {\n      return null\n    }\n\n    if (children.length === 0) return null\n\n    return h(\n      'div',\n      {\n        style: this.getContentStyles(),\n      },\n      ...children.flatMap((child) => {\n        const rendered = child.render()\n        return Array.isArray(rendered) ? rendered : [rendered]\n      })\n    )\n  }\n\n  /**\n   * Render footer content\n   */\n  private renderFooter() {\n    const footerContent = this.resolveContent(this.props.footer)\n    if (!footerContent) return null\n\n    return h(\n      'div',\n      {\n        style: this.getFooterStyles(),\n      },\n      ...(typeof footerContent === 'string'\n        ? [text(footerContent)]\n        : this.renderComponentContent(footerContent as ComponentInstance))\n    )\n  }\n\n  render() {\n    const { accessibilityLabel, accessibilityRole = 'group' } = this.props\n\n    return h(\n      'div',\n      {\n        style: this.getSectionStyles(),\n        'aria-label': accessibilityLabel,\n        role: accessibilityRole,\n      },\n      ...[this.renderHeader(), this.renderContent(), this.renderFooter()].filter(\n        (item): item is DOMNode => item !== null\n      )\n    )\n  }\n}\n\n/**\n * Section component function\n * @deprecated Use FormSection from @tachui/forms for form contexts, or VStack for general grouping\n */\nexport function Section(\n  children: ComponentInstance[],\n  props: Omit<SectionProps, 'children'> = {}\n): ModifiableComponent<SectionProps> & {\n  modifier: ModifierBuilder<ModifiableComponent<SectionProps>>\n} {\n  console.warn(\n    'Section from @tachui/core is deprecated. Use FormSection from @tachui/forms for form contexts, or VStack for general layout grouping.'\n  )\n  const sectionProps: SectionProps = { ...props, children }\n  const component = new EnhancedSection(sectionProps)\n  return withModifiers(component)\n}\n\n/**\n * Section with header\n * @deprecated Use FormSection from @tachui/forms\n */\nexport function SectionWithHeader(\n  header: string | (() => string) | Signal<string> | ComponentInstance,\n  children: ComponentInstance[],\n  props: Omit<SectionProps, 'children' | 'header'> = {}\n) {\n  return Section(children, { ...props, header })\n}\n\n/**\n * Section with header and footer\n * @deprecated Use FormSection from @tachui/forms\n */\nexport function SectionWithHeaderFooter(\n  header: string | (() => string) | Signal<string> | ComponentInstance,\n  footer: string | (() => string) | Signal<string> | ComponentInstance,\n  children: ComponentInstance[],\n  props: Omit<SectionProps, 'children' | 'header' | 'footer'> = {}\n) {\n  return Section(children, { ...props, header, footer })\n}\n\n/**\n * Section style variants\n * @deprecated Use FormSection from @tachui/forms with style prop\n */\nexport const SectionStyles = {\n  /**\n   * Automatic section styling (default)\n   */\n  Automatic(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {\n    return Section(children, { ...props, style: 'automatic' })\n  },\n\n  /**\n   * Grouped section with container styling\n   */\n  Grouped(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {\n    return Section(children, { ...props, style: 'grouped' })\n  },\n\n  /**\n   * Inset section styling\n   */\n  Inset(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {\n    return Section(children, { ...props, style: 'inset' })\n  },\n\n  /**\n   * Sidebar-style section\n   */\n  Sidebar(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {\n    return Section(children, { ...props, style: 'sidebar' })\n  },\n\n  /**\n   * Plain section without styling\n   */\n  Plain(children: ComponentInstance[], props: Omit<SectionProps, 'children' | 'style'> = {}) {\n    return Section(children, { ...props, style: 'plain' })\n  },\n\n  /**\n   * Collapsible section\n   */\n  Collapsible(\n    header: string | (() => string) | Signal<string> | ComponentInstance,\n    children: ComponentInstance[],\n    collapsed: boolean | Signal<boolean> = false,\n    props: Omit<SectionProps, 'children' | 'header' | 'collapsible' | 'collapsed'> = {}\n  ) {\n    return Section(children, {\n      ...props,\n      header,\n      collapsible: true,\n      collapsed,\n    })\n  },\n}\n"],"names":["EnhancedSection","props","__publicField","content","isSignal","collapsed","rendered","style","baseStyles","spacing","headerContent","headerStyles","toggleIcon","h","text","children","child","footerContent","accessibilityLabel","accessibilityRole","item","Section","sectionProps","component","withModifiers","SectionWithHeader","header","SectionWithHeaderFooter","footer","SectionStyles"],"mappings":"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"}

package/dist/components/Show.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../reactive/cleanup.cjs");const u=require("../reactive/computed.cjs"),m=require("../reactive/context.cjs"),y=require("../reactive/effect.cjs");require("../reactive/unified-scheduler.cjs");const p=require("../reactive/signal.cjs");require("../reactive/scheduler.cjs");require("../reactive/theme.cjs");const C=require("../runtime/renderer.cjs");var g=Object.defineProperty,w=(n,e,r)=>e in n?g(n,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[e]=r,d=(n,e,r)=>w(n,typeof e!="symbol"?e+"":e,r);class h{constructor(e){d(this,"type","component"),d(this,"id"),d(this,"props"),d(this,"mounted",!1),d(this,"cleanup",[]),this.props=e,this.id=`show-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}evaluateCondition(){const{when:e}=this.props;return typeof e=="boolean"?e:typeof e=="function"||p.isSignal(e)||u.isComputed(e)?e():!1}getContent(){const e=this.evaluateCondition(),{children:r,fallback:t}=this.props,c=e?r:t;return c||null}render(){const{when:e}=this.props;if(!(typeof e=="function"||p.isSignal(e)||u.isComputed(e))){const o=this.getContent();if(!o)return[];const i=o.render();return Array.isArray(i)?i:[i]}const t={type:"element",tag:"div",props:{style:{display:"contents"}},children:[],dispose:void 0},c=m.createRoot(()=>{const o=y.createEffect(()=>{const i=this.getContent();if(i){const a=i.render(),f=Array.isArray(a)?a:[a];t.children=f}else t.children=[];t.element&&t.element instanceof HTMLElement&&this.updateContainerDOM(t.element,t.children)});return()=>o.dispose()});t.dispose=c;const s=this.getContent();if(s){const o=s.render(),i=Array.isArray(o)?o:[o];t.children=i}return[t]}updateContainerDOM(e,r){e.innerHTML="";const t=new C.DOMRenderer;r.forEach(c=>{try{const s=t.render(c);s&&e.appendChild(s)}catch(s){console.error("Error rendering Show component child:",s)}})}dispose(){this.cleanup.forEach(e=>{try{e()}catch(r){console.error("Show component cleanup error:",r)}}),this.cleanup=[]}}function l(n){return new h(n)}function S(n,e){return l({when:n,children:e})}function b(n,e){return l({when:typeof n=="function"?()=>!n():!n,children:e})}exports.Show=l;exports.ShowComponent=h;exports.Unless=b;exports.When=S;
+//# sourceMappingURL=Show.cjs.map

package/dist/components/Show.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Show.cjs","sources":["../../src/components/Show.ts"],"sourcesContent":["/**\n * Show component for conditional rendering\n *\n * Reactive implementation that works with TachUI's reactive architecture\n */\n\nimport { createEffect, createRoot, isComputed, isSignal } from '../reactive'\nimport type { ComponentInstance, DOMNode } from '../runtime/types'\nimport { DOMRenderer } from '../runtime/renderer'\n\nexport interface ShowProps {\n  /**\n   * Condition to determine if content should be shown\n   */\n  when: boolean | (() => boolean)\n\n  /**\n   * Content to render when condition is true\n   */\n  children: ComponentInstance\n\n  /**\n   * Optional fallback content when condition is false\n   */\n  fallback?: ComponentInstance\n}\n\n/**\n * Show component implementation that integrates with TachUI's reactive system\n */\nexport class ShowComponent implements ComponentInstance<ShowProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public readonly props: ShowProps\n  public mounted = false\n  public cleanup: (() => void)[] = []\n\n  constructor(props: ShowProps) {\n    this.props = props\n    this.id = `show-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n  }\n\n  /**\n   * Evaluate the condition\n   */\n  private evaluateCondition(): boolean {\n    const { when } = this.props\n\n    if (typeof when === 'boolean') {\n      return when\n    } else if (typeof when === 'function') {\n      return when()\n    } else if (isSignal(when) || isComputed(when)) {\n      return (when as () => boolean)()\n    }\n\n    return false\n  }\n\n  /**\n   * Get the content to render based on condition\n   */\n  private getContent(): ComponentInstance | null {\n    const condition = this.evaluateCondition()\n\n    const { children, fallback } = this.props\n    const content = condition ? children : fallback\n\n    if (!content) {\n      return null\n    }\n\n    return content\n  }\n\n  /**\n   * Render the Show component with self-contained reactivity like text() function\n   */\n  render(): DOMNode[] {\n    // Check if condition is reactive\n    const { when } = this.props\n    const isReactive = typeof when === 'function' || isSignal(when) || isComputed(when)\n    \n    if (!isReactive) {\n      // Static condition - simple render\n      const content = this.getContent()\n      if (!content) return []\n      \n      const rendered = content.render()\n      return Array.isArray(rendered) ? rendered : [rendered]\n    }\n\n    // Reactive condition - always create reactive container for consistency\n    const containerNode: DOMNode = {\n      type: 'element',\n      tag: 'div',\n      props: {\n        style: { display: 'contents' } // Make container invisible\n      },\n      children: [],\n      dispose: undefined,\n    }\n\n    // Create reactive effect that updates the container\n    const cleanup = createRoot(() => {\n      const effect = createEffect(() => {\n        const content = this.getContent()\n        \n        if (content) {\n          const rendered = content.render()\n          const nodes = Array.isArray(rendered) ? rendered : [rendered]\n          containerNode.children = nodes\n        } else {\n          containerNode.children = []\n        }\n        \n        // Update DOM if already rendered\n        if (containerNode.element && containerNode.element instanceof HTMLElement) {\n          this.updateContainerDOM(containerNode.element, containerNode.children)\n        }\n      })\n\n      return () => effect.dispose()\n    })\n\n    containerNode.dispose = cleanup\n\n    // Initialize with current content\n    const initialContent = this.getContent()\n    if (initialContent) {\n      const rendered = initialContent.render()\n      const nodes = Array.isArray(rendered) ? rendered : [rendered]\n      containerNode.children = nodes\n    }\n\n    return [containerNode]\n  }\n\n  /**\n   * Update the container DOM element with new children using TachUI's renderer\n   */\n  private updateContainerDOM(container: HTMLElement, children: DOMNode[]): void {\n    // Clear existing content\n    container.innerHTML = ''\n    \n    // Use TachUI's renderer to properly handle modifiers and reactivity\n    const renderer = new DOMRenderer()\n    \n    // Render new content using TachUI's renderer which handles modifiers\n    children.forEach(child => {\n      try {\n        const element = renderer.render(child)\n        if (element) {\n          container.appendChild(element)\n        }\n      } catch (error) {\n        console.error('Error rendering Show component child:', error)\n      }\n    })\n  }\n\n  /**\n   * Cleanup resources\n   */\n  dispose(): void {\n    this.cleanup.forEach(fn => {\n      try {\n        fn()\n      } catch (error) {\n        console.error('Show component cleanup error:', error)\n      }\n    })\n    this.cleanup = []\n  }\n}\n\n/**\n * Create Show component for conditional rendering\n */\nexport function Show(props: ShowProps): ShowComponent {\n  return new ShowComponent(props)\n}\n\n/**\n * Convenience function for simple conditional rendering\n */\nexport function When(\n  condition: boolean | (() => boolean),\n  content: ComponentInstance\n): ShowComponent {\n  return Show({ when: condition, children: content })\n}\n\n/**\n * Convenience function for negated conditional rendering\n */\nexport function Unless(\n  condition: boolean | (() => boolean),\n  content: ComponentInstance\n): ShowComponent {\n  // Negate the condition for unless semantics\n  const negatedCondition = typeof condition === 'function' ? () => !condition() : !condition\n\n  return Show({ when: negatedCondition, children: content })\n}\n"],"names":["ShowComponent","props","__publicField","when","isSignal","isComputed","condition","children","fallback","content","rendered","containerNode","cleanup","createRoot","effect","createEffect","nodes","initialContent","container","renderer","DOMRenderer","child","element","error","fn","Show","When","Unless"],"mappings":"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"}

package/dist/components/Show.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Show component for conditional rendering
+ *
+ * Reactive implementation that works with TachUI's reactive architecture
+ */
+import type { ComponentInstance, DOMNode } from '../runtime/types';
+export interface ShowProps {
+    /**
+     * Condition to determine if content should be shown
+     */
+    when: boolean | (() => boolean);
+    /**
+     * Content to render when condition is true
+     */
+    children: ComponentInstance;
+    /**
+     * Optional fallback content when condition is false
+     */
+    fallback?: ComponentInstance;
+}
+/**
+ * Show component implementation that integrates with TachUI's reactive system
+ */
+export declare class ShowComponent implements ComponentInstance<ShowProps> {
+    readonly type: "component";
+    readonly id: string;
+    readonly props: ShowProps;
+    mounted: boolean;
+    cleanup: (() => void)[];
+    constructor(props: ShowProps);
+    /**
+     * Evaluate the condition
+     */
+    private evaluateCondition;
+    /**
+     * Get the content to render based on condition
+     */
+    private getContent;
+    /**
+     * Render the Show component with self-contained reactivity like text() function
+     */
+    render(): DOMNode[];
+    /**
+     * Update the container DOM element with new children using TachUI's renderer
+     */
+    private updateContainerDOM;
+    /**
+     * Cleanup resources
+     */
+    dispose(): void;
+}
+/**
+ * Create Show component for conditional rendering
+ */
+export declare function Show(props: ShowProps): ShowComponent;
+/**
+ * Convenience function for simple conditional rendering
+ */
+export declare function When(condition: boolean | (() => boolean), content: ComponentInstance): ShowComponent;
+/**
+ * Convenience function for negated conditional rendering
+ */
+export declare function Unless(condition: boolean | (() => boolean), content: ComponentInstance): ShowComponent;
+//# sourceMappingURL=Show.d.ts.map

package/dist/components/Show.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Show.d.ts","sourceRoot":"","sources":["../../src/components/Show.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAGlE,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,IAAI,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,CAAA;IAE/B;;OAEG;IACH,QAAQ,EAAE,iBAAiB,CAAA;IAE3B;;OAEG;IACH,QAAQ,CAAC,EAAE,iBAAiB,CAAA;CAC7B;AAED;;GAEG;AACH,qBAAa,aAAc,YAAW,iBAAiB,CAAC,SAAS,CAAC;IAChE,SAAgB,IAAI,EAAG,WAAW,CAAS;IAC3C,SAAgB,EAAE,EAAE,MAAM,CAAA;IAC1B,SAAgB,KAAK,EAAE,SAAS,CAAA;IACzB,OAAO,UAAQ;IACf,OAAO,EAAE,CAAC,MAAM,IAAI,CAAC,EAAE,CAAK;gBAEvB,KAAK,EAAE,SAAS;IAK5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAczB;;OAEG;IACH,OAAO,CAAC,UAAU;IAalB;;OAEG;IACH,MAAM,IAAI,OAAO,EAAE;IA4DnB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;OAEG;IACH,OAAO,IAAI,IAAI;CAUhB;AAED;;GAEG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,aAAa,CAEpD;AAED;;GAEG;AACH,wBAAgB,IAAI,CAClB,SAAS,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,EACpC,OAAO,EAAE,iBAAiB,GACzB,aAAa,CAEf;AAED;;GAEG;AACH,wBAAgB,MAAM,CACpB,SAAS,EAAE,OAAO,GAAG,CAAC,MAAM,OAAO,CAAC,EACpC,OAAO,EAAE,iBAAiB,GACzB,aAAa,CAKf"}

package/dist/components/Show.js

@@ -0,0 +1,112 @@
+import "../reactive/cleanup.js";
+import { isComputed as a } from "../reactive/computed.js";
+import { createRoot as u } from "../reactive/context.js";
+import { createEffect as m } from "../reactive/effect.js";
+import "../reactive/unified-scheduler.js";
+import { isSignal as l } from "../reactive/signal.js";
+import "../reactive/scheduler.js";
+import "../reactive/theme.js";
+import { DOMRenderer as y } from "../runtime/renderer.js";
+var C = Object.defineProperty, w = (t, e, r) => e in t ? C(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, p = (t, e, r) => w(t, typeof e != "symbol" ? e + "" : e, r);
+class g {
+  constructor(e) {
+    p(this, "type", "component"), p(this, "id"), p(this, "props"), p(this, "mounted", !1), p(this, "cleanup", []), this.props = e, this.id = `show-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  /**
+   * Evaluate the condition
+   */
+  evaluateCondition() {
+    const { when: e } = this.props;
+    return typeof e == "boolean" ? e : typeof e == "function" || l(e) || a(e) ? e() : !1;
+  }
+  /**
+   * Get the content to render based on condition
+   */
+  getContent() {
+    const e = this.evaluateCondition(), { children: r, fallback: n } = this.props, c = e ? r : n;
+    return c || null;
+  }
+  /**
+   * Render the Show component with self-contained reactivity like text() function
+   */
+  render() {
+    const { when: e } = this.props;
+    if (!(typeof e == "function" || l(e) || a(e))) {
+      const o = this.getContent();
+      if (!o) return [];
+      const i = o.render();
+      return Array.isArray(i) ? i : [i];
+    }
+    const n = {
+      type: "element",
+      tag: "div",
+      props: {
+        style: { display: "contents" }
+        // Make container invisible
+      },
+      children: [],
+      dispose: void 0
+    }, c = u(() => {
+      const o = m(() => {
+        const i = this.getContent();
+        if (i) {
+          const d = i.render(), f = Array.isArray(d) ? d : [d];
+          n.children = f;
+        } else
+          n.children = [];
+        n.element && n.element instanceof HTMLElement && this.updateContainerDOM(n.element, n.children);
+      });
+      return () => o.dispose();
+    });
+    n.dispose = c;
+    const s = this.getContent();
+    if (s) {
+      const o = s.render(), i = Array.isArray(o) ? o : [o];
+      n.children = i;
+    }
+    return [n];
+  }
+  /**
+   * Update the container DOM element with new children using TachUI's renderer
+   */
+  updateContainerDOM(e, r) {
+    e.innerHTML = "";
+    const n = new y();
+    r.forEach((c) => {
+      try {
+        const s = n.render(c);
+        s && e.appendChild(s);
+      } catch (s) {
+        console.error("Error rendering Show component child:", s);
+      }
+    });
+  }
+  /**
+   * Cleanup resources
+   */
+  dispose() {
+    this.cleanup.forEach((e) => {
+      try {
+        e();
+      } catch (r) {
+        console.error("Show component cleanup error:", r);
+      }
+    }), this.cleanup = [];
+  }
+}
+function h(t) {
+  return new g(t);
+}
+function R(t, e) {
+  return h({ when: t, children: e });
+}
+function P(t, e) {
+  return h({ when: typeof t == "function" ? () => !t() : !t, children: e });
+}
+export {
+  h as Show,
+  g as ShowComponent,
+  P as Unless,
+  R as When
+};
+//# sourceMappingURL=Show.js.map

package/dist/components/Show.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Show.js","sources":["../../src/components/Show.ts"],"sourcesContent":["/**\n * Show component for conditional rendering\n *\n * Reactive implementation that works with TachUI's reactive architecture\n */\n\nimport { createEffect, createRoot, isComputed, isSignal } from '../reactive'\nimport type { ComponentInstance, DOMNode } from '../runtime/types'\nimport { DOMRenderer } from '../runtime/renderer'\n\nexport interface ShowProps {\n  /**\n   * Condition to determine if content should be shown\n   */\n  when: boolean | (() => boolean)\n\n  /**\n   * Content to render when condition is true\n   */\n  children: ComponentInstance\n\n  /**\n   * Optional fallback content when condition is false\n   */\n  fallback?: ComponentInstance\n}\n\n/**\n * Show component implementation that integrates with TachUI's reactive system\n */\nexport class ShowComponent implements ComponentInstance<ShowProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public readonly props: ShowProps\n  public mounted = false\n  public cleanup: (() => void)[] = []\n\n  constructor(props: ShowProps) {\n    this.props = props\n    this.id = `show-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n  }\n\n  /**\n   * Evaluate the condition\n   */\n  private evaluateCondition(): boolean {\n    const { when } = this.props\n\n    if (typeof when === 'boolean') {\n      return when\n    } else if (typeof when === 'function') {\n      return when()\n    } else if (isSignal(when) || isComputed(when)) {\n      return (when as () => boolean)()\n    }\n\n    return false\n  }\n\n  /**\n   * Get the content to render based on condition\n   */\n  private getContent(): ComponentInstance | null {\n    const condition = this.evaluateCondition()\n\n    const { children, fallback } = this.props\n    const content = condition ? children : fallback\n\n    if (!content) {\n      return null\n    }\n\n    return content\n  }\n\n  /**\n   * Render the Show component with self-contained reactivity like text() function\n   */\n  render(): DOMNode[] {\n    // Check if condition is reactive\n    const { when } = this.props\n    const isReactive = typeof when === 'function' || isSignal(when) || isComputed(when)\n    \n    if (!isReactive) {\n      // Static condition - simple render\n      const content = this.getContent()\n      if (!content) return []\n      \n      const rendered = content.render()\n      return Array.isArray(rendered) ? rendered : [rendered]\n    }\n\n    // Reactive condition - always create reactive container for consistency\n    const containerNode: DOMNode = {\n      type: 'element',\n      tag: 'div',\n      props: {\n        style: { display: 'contents' } // Make container invisible\n      },\n      children: [],\n      dispose: undefined,\n    }\n\n    // Create reactive effect that updates the container\n    const cleanup = createRoot(() => {\n      const effect = createEffect(() => {\n        const content = this.getContent()\n        \n        if (content) {\n          const rendered = content.render()\n          const nodes = Array.isArray(rendered) ? rendered : [rendered]\n          containerNode.children = nodes\n        } else {\n          containerNode.children = []\n        }\n        \n        // Update DOM if already rendered\n        if (containerNode.element && containerNode.element instanceof HTMLElement) {\n          this.updateContainerDOM(containerNode.element, containerNode.children)\n        }\n      })\n\n      return () => effect.dispose()\n    })\n\n    containerNode.dispose = cleanup\n\n    // Initialize with current content\n    const initialContent = this.getContent()\n    if (initialContent) {\n      const rendered = initialContent.render()\n      const nodes = Array.isArray(rendered) ? rendered : [rendered]\n      containerNode.children = nodes\n    }\n\n    return [containerNode]\n  }\n\n  /**\n   * Update the container DOM element with new children using TachUI's renderer\n   */\n  private updateContainerDOM(container: HTMLElement, children: DOMNode[]): void {\n    // Clear existing content\n    container.innerHTML = ''\n    \n    // Use TachUI's renderer to properly handle modifiers and reactivity\n    const renderer = new DOMRenderer()\n    \n    // Render new content using TachUI's renderer which handles modifiers\n    children.forEach(child => {\n      try {\n        const element = renderer.render(child)\n        if (element) {\n          container.appendChild(element)\n        }\n      } catch (error) {\n        console.error('Error rendering Show component child:', error)\n      }\n    })\n  }\n\n  /**\n   * Cleanup resources\n   */\n  dispose(): void {\n    this.cleanup.forEach(fn => {\n      try {\n        fn()\n      } catch (error) {\n        console.error('Show component cleanup error:', error)\n      }\n    })\n    this.cleanup = []\n  }\n}\n\n/**\n * Create Show component for conditional rendering\n */\nexport function Show(props: ShowProps): ShowComponent {\n  return new ShowComponent(props)\n}\n\n/**\n * Convenience function for simple conditional rendering\n */\nexport function When(\n  condition: boolean | (() => boolean),\n  content: ComponentInstance\n): ShowComponent {\n  return Show({ when: condition, children: content })\n}\n\n/**\n * Convenience function for negated conditional rendering\n */\nexport function Unless(\n  condition: boolean | (() => boolean),\n  content: ComponentInstance\n): ShowComponent {\n  // Negate the condition for unless semantics\n  const negatedCondition = typeof condition === 'function' ? () => !condition() : !condition\n\n  return Show({ when: negatedCondition, children: content })\n}\n"],"names":["ShowComponent","props","__publicField","when","isSignal","isComputed","condition","children","fallback","content","rendered","containerNode","cleanup","createRoot","effect","createEffect","nodes","initialContent","container","renderer","DOMRenderer","child","element","error","fn","Show","When","Unless"],"mappings":"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"}

package/dist/components/Spacer.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../runtime/component.cjs");require("../runtime/context.cjs");require("../runtime/dev-tools.cjs");require("../runtime/dom-bridge.cjs");require("../runtime/error-boundary.cjs");require("../reactive/cleanup.cjs");require("../reactive/unified-scheduler.cjs");require("../reactive/signal.cjs");require("../reactive/scheduler.cjs");require("../reactive/theme.cjs");require("../runtime/error-reporting.cjs");require("../runtime/performance.cjs");const o=require("../runtime/renderer.cjs");require("../runtime/element-override.cjs");require("../runtime/semantic-role-manager.cjs");require("../runtime/development-warnings.cjs");const u=require("./wrapper.cjs");require("../css-classes/css-class-manager.cjs");const p=require("../css-classes/component-base.cjs");var a=Object.defineProperty,c=(r,e,t)=>e in r?a(r,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[e]=t,i=(r,e,t)=>c(r,typeof e!="symbol"?e+"":e,t);class s extends p.ComponentWithCSSClasses{constructor(e){super(),i(this,"type","component"),i(this,"id"),i(this,"props"),this.props=e,this.id=`spacer-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}render(){const e=this.props.minLength??0,t=["tachui-spacer"],n=this.createClassString(this.props,t);return o.h("div",{className:n,style:{flexGrow:"1",flexShrink:"1",flexBasis:"0",minWidth:`${e}px`,minHeight:`${e}px`,alignSelf:"stretch"}})}}function l(r){let e;return typeof r=="number"?e={minLength:r}:e=r||{},u.withModifiers(new s(e))}exports.Spacer=l;exports.SpacerComponent=s;
+//# sourceMappingURL=Spacer.cjs.map

package/dist/components/Spacer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.cjs","sources":["../../src/components/Spacer.ts"],"sourcesContent":["/**\n * Spacer Component\n *\n * SwiftUI-inspired Spacer component that expands to fill available space\n * along the main axis of its container. Behaves like SwiftUI.Spacer.\n */\n\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { h } from '../runtime'\nimport type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types'\nimport { withModifiers } from './wrapper'\nimport {\n  ComponentWithCSSClasses,\n  type CSSClassesProps\n} from '../css-classes'\n\n/**\n * Spacer component properties with CSS classes support\n */\nexport interface SpacerProps extends ComponentProps, CSSClassesProps {\n  minLength?: number // Minimum space along the main axis\n}\n\n/**\n * Spacer component implementation with CSS classes support\n */\nexport class SpacerComponent extends ComponentWithCSSClasses implements ComponentInstance<SpacerProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public readonly props: SpacerProps\n\n  constructor(props: SpacerProps) {\n    super()\n    this.props = props\n    this.id = `spacer-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n  }\n\n  render(): DOMNode {\n    const minLength = this.props.minLength ?? 0\n    \n    // Process CSS classes for this component\n    const baseClasses = ['tachui-spacer']\n    const classString = this.createClassString(this.props, baseClasses)\n\n    // Create a div element that acts as a flexible spacer\n    const element = h('div', {\n      className: classString,\n      style: {\n        // Core flex properties for expansion\n        flexGrow: '1',\n        flexShrink: '1',\n        flexBasis: '0',\n\n        // Minimum size constraints\n        minWidth: `${minLength}px`,\n        minHeight: `${minLength}px`,\n\n        // Ensure proper behavior in both directions\n        alignSelf: 'stretch',\n\n        // Visual debugging (remove in production)\n        // backgroundColor: 'rgba(255, 0, 0, 0.1)', // Uncomment to visualize spacers\n      },\n    })\n\n    return element\n  }\n}\n\n/**\n * Create a Spacer component with optional minimum length\n */\nexport function Spacer(minLength?: number): ModifiableComponent<SpacerProps> & {\n  modifier: ModifierBuilder<ModifiableComponent<SpacerProps>>\n}\nexport function Spacer(props?: SpacerProps): ModifiableComponent<SpacerProps> & {\n  modifier: ModifierBuilder<ModifiableComponent<SpacerProps>>\n}\nexport function Spacer(\n  minLengthOrProps?: number | SpacerProps\n): ModifiableComponent<SpacerProps> & {\n  modifier: ModifierBuilder<ModifiableComponent<SpacerProps>>\n} {\n  let props: SpacerProps\n\n  if (typeof minLengthOrProps === 'number') {\n    props = { minLength: minLengthOrProps }\n  } else {\n    props = minLengthOrProps || {}\n  }\n\n  return withModifiers(new SpacerComponent(props))\n}\n"],"names":["SpacerComponent","ComponentWithCSSClasses","props","__publicField","minLength","baseClasses","classString","h","Spacer","minLengthOrProps","withModifiers"],"mappings":"u+BA0BO,MAAMA,UAAwBC,EAAAA,uBAAkE,CAKrG,YAAYC,EAAoB,CAC9B,MAAA,EALFC,EAAA,KAAgB,OAAO,WAAA,EACvBA,EAAA,KAAgB,IAAA,EAChBA,EAAA,KAAgB,OAAA,EAId,KAAK,MAAQD,EACb,KAAK,GAAK,UAAU,KAAK,IAAA,CAAK,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,OAAO,EAAG,CAAC,CAAC,EAC3E,CAEA,QAAkB,CAChB,MAAME,EAAY,KAAK,MAAM,WAAa,EAGpCC,EAAc,CAAC,eAAe,EAC9BC,EAAc,KAAK,kBAAkB,KAAK,MAAOD,CAAW,EAuBlE,OApBgBE,EAAAA,EAAE,MAAO,CACvB,UAAWD,EACX,MAAO,CAEL,SAAU,IACV,WAAY,IACZ,UAAW,IAGX,SAAU,GAAGF,CAAS,KACtB,UAAW,GAAGA,CAAS,KAGvB,UAAW,SAAA,CAIb,CACD,CAGH,CACF,CAWO,SAASI,EACdC,EAGA,CACA,IAAIP,EAEJ,OAAI,OAAOO,GAAqB,SAC9BP,EAAQ,CAAE,UAAWO,CAAA,EAErBP,EAAQO,GAAoB,CAAA,EAGvBC,gBAAc,IAAIV,EAAgBE,CAAK,CAAC,CACjD"}

package/dist/components/Spacer.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Spacer Component
+ *
+ * SwiftUI-inspired Spacer component that expands to fill available space
+ * along the main axis of its container. Behaves like SwiftUI.Spacer.
+ */
+import type { ModifiableComponent, ModifierBuilder } from '../modifiers/types';
+import type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types';
+import { ComponentWithCSSClasses, type CSSClassesProps } from '../css-classes';
+/**
+ * Spacer component properties with CSS classes support
+ */
+export interface SpacerProps extends ComponentProps, CSSClassesProps {
+    minLength?: number;
+}
+/**
+ * Spacer component implementation with CSS classes support
+ */
+export declare class SpacerComponent extends ComponentWithCSSClasses implements ComponentInstance<SpacerProps> {
+    readonly type: "component";
+    readonly id: string;
+    readonly props: SpacerProps;
+    constructor(props: SpacerProps);
+    render(): DOMNode;
+}
+/**
+ * Create a Spacer component with optional minimum length
+ */
+export declare function Spacer(minLength?: number): ModifiableComponent<SpacerProps> & {
+    modifier: ModifierBuilder<ModifiableComponent<SpacerProps>>;
+};
+export declare function Spacer(props?: SpacerProps): ModifiableComponent<SpacerProps> & {
+    modifier: ModifierBuilder<ModifiableComponent<SpacerProps>>;
+};
+//# sourceMappingURL=Spacer.d.ts.map

package/dist/components/Spacer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.d.ts","sourceRoot":"","sources":["../../src/components/Spacer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAA;AAE9E,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAElF,OAAO,EACL,uBAAuB,EACvB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAA;AAEvB;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc,EAAE,eAAe;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,qBAAa,eAAgB,SAAQ,uBAAwB,YAAW,iBAAiB,CAAC,WAAW,CAAC;IACpG,SAAgB,IAAI,EAAG,WAAW,CAAS;IAC3C,SAAgB,EAAE,EAAE,MAAM,CAAA;IAC1B,SAAgB,KAAK,EAAE,WAAW,CAAA;gBAEtB,KAAK,EAAE,WAAW;IAM9B,MAAM,IAAI,OAAO;CA8BlB;AAED;;GAEG;AACH,wBAAgB,MAAM,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC,WAAW,CAAC,GAAG;IAC7E,QAAQ,EAAE,eAAe,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAA;CAC5D,CAAA;AACD,wBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,mBAAmB,CAAC,WAAW,CAAC,GAAG;IAC9E,QAAQ,EAAE,eAAe,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAA;CAC5D,CAAA"}