@tachui/core 0.7.0-alpha1

package/dist/components/Toggle.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../reactive/cleanup.cjs");require("../reactive/unified-scheduler.cjs");const m=require("../reactive/effect.cjs"),d=require("../reactive/signal.cjs");require("../reactive/scheduler.cjs");require("../reactive/theme.cjs");require("../runtime/component.cjs");require("../runtime/context.cjs");require("../runtime/dev-tools.cjs");require("../runtime/dom-bridge.cjs");require("../runtime/error-boundary.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 y=require("./wrapper.cjs");var S=Object.defineProperty,x=(i,e,t)=>e in i?S(i,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[e]=t,h=(i,e,t)=>x(i,typeof e!="symbol"?e+"":e,t);class p{constructor(e){this.props=e,h(this,"type","component"),h(this,"id"),h(this,"mounted",!1),h(this,"cleanup",[]),h(this,"toggleElement",null),h(this,"setIsAnimating"),h(this,"handleToggle",async r=>{if(r.preventDefault(),this.isDisabled())return;const s=!this.getIsOn();this.props.animated!==!1&&(this.setIsAnimating(!0),setTimeout(()=>{this.setIsAnimating(!1)},200)),this.props.onToggle&&this.props.onToggle(s)}),this.id=`toggle-${Date.now()}-${Math.random().toString(36).substr(2,9)}`;const[,t]=d.createSignal(!1);this.setIsAnimating=t,m.createEffect(()=>{const r=this.getIsOn();this.toggleElement&&this.toggleElement.checked!==r&&(this.toggleElement.checked=r)})}getIsOn(){const{isOn:e}=this.props;return d.isSignal(e)?e():e}isDisabled(){const{disabled:e}=this.props;return typeof e=="boolean"?e:d.isSignal(e)?e():!1}resolveLabel(){const{label:e}=this.props;return e?typeof e=="string"?e:typeof e=="function"||d.isSignal(e)?e():e:null}renderComponentContent(e){const t=e.render();return Array.isArray(t)?t:[t]}getSizeStyles(){const{size:e="medium"}=this.props;switch(e){case"small":return{width:"36px",height:"20px",thumbSize:"16px",fontSize:"14px"};case"large":return{width:"56px",height:"32px",thumbSize:"28px",fontSize:"18px"};default:return{width:"46px",height:"26px",thumbSize:"22px",fontSize:"16px"}}}renderSwitch(){const e=this.getIsOn(),t=this.isDisabled(),r=this.getSizeStyles(),{color:s="#007AFF",offColor:n="#e2e8f0",thumbColor:a="#ffffff",animated:u=!0}=this.props,b=e?s:n,f=e?`translateX(${parseInt(r.width)-parseInt(r.thumbSize)-2}px)`:"translateX(2px)";return o.h("div",{style:{position:"relative",display:"inline-block"}},o.h("input",{ref:c=>{this.toggleElement=c,c&&!this.mounted&&(c.addEventListener("change",this.handleToggle),this.cleanup.push(()=>{c.removeEventListener("change",this.handleToggle)}))},type:"checkbox",checked:e,disabled:t,style:{position:"absolute",opacity:0,width:"100%",height:"100%",margin:0,cursor:t?"not-allowed":"pointer"},"aria-label":this.props.accessibilityLabel,"aria-describedby":this.props.accessibilityHint?`${this.id}-hint`:void 0}),o.h("div",{style:{width:r.width,height:r.height,backgroundColor:b,borderRadius:r.height,position:"relative",cursor:t?"not-allowed":"pointer",opacity:t?.5:1,transition:u?"background-color 0.2s ease":"none",border:"1px solid rgba(0,0,0,0.1)",boxShadow:"inset 0 1px 2px rgba(0,0,0,0.1)"},onClick:this.handleToggle},o.h("div",{style:{width:r.thumbSize,height:r.thumbSize,backgroundColor:a,borderRadius:"50%",position:"absolute",top:"50%",transform:`translateY(-50%) ${f}`,transition:u?"transform 0.2s ease":"none",boxShadow:"0 2px 4px rgba(0,0,0,0.2)",border:"1px solid rgba(0,0,0,0.1)"}})))}renderCheckbox(){const e=this.getIsOn(),t=this.isDisabled(),r=this.getSizeStyles(),{color:s="#007AFF"}=this.props;return o.h("div",{style:{position:"relative",display:"inline-block"}},o.h("input",{ref:n=>{this.toggleElement=n,n&&!this.mounted&&(n.addEventListener("change",this.handleToggle),this.cleanup.push(()=>{n.removeEventListener("change",this.handleToggle)}))},type:"checkbox",checked:e,disabled:t,style:{position:"absolute",opacity:0,width:"100%",height:"100%",margin:0,cursor:t?"not-allowed":"pointer"}}),o.h("div",{style:{width:r.thumbSize,height:r.thumbSize,border:`2px solid ${e?s:"#d1d5db"}`,borderRadius:"4px",backgroundColor:e?s:"#ffffff",display:"flex",alignItems:"center",justifyContent:"center",cursor:t?"not-allowed":"pointer",opacity:t?.5:1,transition:"all 0.2s ease"},onClick:this.handleToggle},...e?[o.h("div",{style:{width:"6px",height:"10px",border:"2px solid white",borderTop:"none",borderLeft:"none",transform:"rotate(45deg) translateY(-1px)",opacity:e?1:0,transition:"opacity 0.1s ease"}})]:[]))}renderButton(){const e=this.getIsOn(),t=this.isDisabled(),r=this.getSizeStyles(),{color:s="#007AFF",offColor:n="#f3f4f6"}=this.props;return o.h("button",{ref:a=>{a&&!this.mounted&&(a.addEventListener("click",this.handleToggle),this.cleanup.push(()=>{a.removeEventListener("click",this.handleToggle)}))},type:"button",disabled:t,style:{padding:"8px 16px",backgroundColor:e?s:n,color:e?"#ffffff":"#374151",border:`1px solid ${e?s:"#d1d5db"}`,borderRadius:"6px",fontSize:r.fontSize,fontWeight:"500",cursor:t?"not-allowed":"pointer",opacity:t?.5:1,transition:"all 0.2s ease",outline:"none"},"aria-pressed":e,"aria-label":this.props.accessibilityLabel},o.text(e?"ON":"OFF"))}renderToggleControl(){const{variant:e="switch"}=this.props;switch(e){case"checkbox":return this.renderCheckbox();case"button":return this.renderButton();default:return this.renderSwitch()}}renderLabel(){const e=this.resolveLabel();if(!e)return null;const t=this.getSizeStyles();return o.h("span",{style:{fontSize:t.fontSize,color:this.isDisabled()?"#9ca3af":"#374151",cursor:this.isDisabled()?"not-allowed":"pointer"},onClick:this.isDisabled()?void 0:this.handleToggle},...typeof e=="string"?[o.text(e)]:this.renderComponentContent(e))}render(){const{labelPosition:e="trailing",spacing:t=8,accessibilityHint:r}=this.props,s=this.renderLabel(),n=this.renderToggleControl(),a=e==="leading"&&s?[s,n]:s?[n,s]:[n];return o.h("div",{style:{display:"flex",alignItems:"center",gap:s?`${t}px`:"0",cursor:this.isDisabled()?"not-allowed":"pointer"},"aria-describedby":r?`${this.id}-hint`:void 0},...a,...r?[o.h("div",{id:`${this.id}-hint`,style:{fontSize:"12px",color:"#6b7280",marginTop:"4px",display:"block",width:"100%"}},o.text(r))]:[])}}function l(i,e={}){const t={...e,isOn:i},r=new p(t);return y.withModifiers(r)}function g(i,e,t={}){return l(e,{...t,label:i})}const v={Switch(i,e={}){return l(i,{...e,variant:"switch"})},Checkbox(i,e={}){return l(i,{...e,variant:"checkbox"})},Button(i,e={}){return l(i,{...e,variant:"button"})},Small(i,e={}){return l(i,{...e,size:"small"})},Large(i,e={}){return l(i,{...e,size:"large"})},CustomColor(i,e,t={}){return l(i,{...t,color:e})},WithLeadingLabel(i,e,t={}){return l(e,{...t,label:i,labelPosition:"leading"})},WithTrailingLabel(i,e,t={}){return l(e,{...t,label:i,labelPosition:"trailing"})}},w={createGroup(i,e={}){return i.map(t=>g(t.label,t.isOn,{...e,onToggle:t.onToggle}))},createExclusiveGroup(i,e,t,r={}){const s=()=>d.isSignal(e)?e():e;return i.map(n=>g(n.label,s()===n.key,{...r,onToggle:a=>{a&&t&&t(n.key)}}))},batch:{toggleAll(i,e){i.forEach(t=>{t.onToggle&&t.onToggle(e)})},getStates(i){return i.map(e=>d.isSignal(e.isOn)?e.isOn():e.isOn)},allOn(i){return this.getStates(i).every(e=>e)},anyOn(i){return this.getStates(i).some(e=>e)}}};exports.EnhancedToggle=p;exports.Toggle=l;exports.ToggleStyles=v;exports.ToggleUtils=w;exports.ToggleWithLabel=g;
+//# sourceMappingURL=Toggle.cjs.map

package/dist/components/Toggle.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.cjs","sources":["../../src/components/Toggle.ts"],"sourcesContent":["/**\n * Enhanced Toggle Component (Phase 6.4.5)\n *\n * SwiftUI-inspired Toggle component with switch-style boolean controls,\n * smooth animations, and multiple style variants.\n */\n\nimport type { ModifiableComponent, ModifierBuilder } from '../modifiers/types'\nimport { createEffect, createSignal, 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 * Toggle component properties\n */\nexport interface ToggleProps extends ComponentProps {\n  // Value binding\n  isOn: boolean | Signal<boolean>\n  onToggle?: (isOn: boolean) => void\n\n  // Content\n  label?: string | (() => string) | Signal<string> | ComponentInstance\n\n  // Appearance\n  variant?: 'switch' | 'checkbox' | 'button'\n  size?: 'small' | 'medium' | 'large'\n  color?: string\n  offColor?: string\n  thumbColor?: string\n\n  // Behavior\n  disabled?: boolean | Signal<boolean>\n  animated?: boolean\n\n  // Styling\n  labelPosition?: 'leading' | 'trailing'\n  spacing?: number\n\n  // Accessibility\n  accessibilityLabel?: string\n  accessibilityHint?: string\n}\n\n/**\n * Enhanced Toggle component class\n */\nexport class EnhancedToggle implements ComponentInstance<ToggleProps> {\n  public readonly type = 'component' as const\n  public readonly id: string\n  public mounted = false\n  public cleanup: (() => void)[] = []\n  private toggleElement: HTMLInputElement | null = null\n  // isAnimating state removed - not used in current implementation\n  private setIsAnimating: (animating: boolean) => boolean\n\n  constructor(public props: ToggleProps) {\n    this.id = `toggle-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`\n\n    // Initialize internal state\n    const [, setAnimating] = createSignal(false)\n    // this.isAnimating = animating - removed unused accessor\n    this.setIsAnimating = setAnimating\n\n    // Handle value changes reactively\n    createEffect(() => {\n      const currentValue = this.getIsOn()\n      if (this.toggleElement && this.toggleElement.checked !== currentValue) {\n        this.toggleElement.checked = currentValue\n      }\n    })\n  }\n\n  /**\n   * Get current toggle state\n   */\n  private getIsOn(): boolean {\n    const { isOn } = this.props\n    if (isSignal(isOn)) {\n      return (isOn as () => boolean)()\n    }\n    return isOn as boolean\n  }\n\n  // /**\n  //  * Get toggle state as signal or static value for DOM renderer\n  //  */\n  // private getIsOnForDOM(): boolean | (() => boolean) {\n  //   const { isOn } = this.props\n  //   if (isSignal(isOn)) {\n  //     return isOn as () => boolean\n  //   }\n  //   return isOn as boolean\n  // }\n\n  /**\n   * Check if toggle is disabled\n   */\n  private isDisabled(): boolean {\n    const { disabled } = this.props\n    if (typeof disabled === 'boolean') return disabled\n    if (isSignal(disabled)) return (disabled as () => boolean)()\n    return false\n  }\n\n  // /**\n  //  * Get disabled state as signal or static value for DOM renderer\n  //  */\n  // private getDisabledForDOM(): boolean | (() => boolean) {\n  //   const { disabled } = this.props\n  //   if (typeof disabled === 'boolean') return disabled\n  //   if (isSignal(disabled)) return disabled as () => boolean\n  //   return false\n  // }\n\n  /**\n   * Resolve label content\n   */\n  private resolveLabel(): string | ComponentInstance | null {\n    const { label } = this.props\n    if (!label) return null\n\n    if (typeof label === 'string') {\n      return label\n    } else if (typeof label === 'function') {\n      return label()\n    } else if (isSignal(label)) {\n      return (label as () => string)()\n    } else {\n      return label as ComponentInstance\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   * Handle toggle change\n   */\n  private handleToggle = async (event: Event) => {\n    event.preventDefault()\n\n    if (this.isDisabled()) return\n\n    const newValue = !this.getIsOn()\n\n    if (this.props.animated !== false) {\n      this.setIsAnimating(true)\n\n      // Brief animation delay\n      setTimeout(() => {\n        this.setIsAnimating(false)\n      }, 200)\n    }\n\n    if (this.props.onToggle) {\n      this.props.onToggle(newValue)\n    }\n  }\n\n  /**\n   * Get toggle size styles\n   */\n  private getSizeStyles() {\n    const { size = 'medium' } = this.props\n\n    switch (size) {\n      case 'small':\n        return {\n          width: '36px',\n          height: '20px',\n          thumbSize: '16px',\n          fontSize: '14px',\n        }\n      case 'large':\n        return {\n          width: '56px',\n          height: '32px',\n          thumbSize: '28px',\n          fontSize: '18px',\n        }\n      default:\n        return {\n          width: '46px',\n          height: '26px',\n          thumbSize: '22px',\n          fontSize: '16px',\n        }\n    }\n  }\n\n  /**\n   * Render switch variant\n   */\n  private renderSwitch() {\n    const isOn = this.getIsOn()\n    const isDisabled = this.isDisabled()\n    const sizeStyles = this.getSizeStyles()\n    const {\n      color = '#007AFF',\n      offColor = '#e2e8f0',\n      thumbColor = '#ffffff',\n      animated = true,\n    } = this.props\n\n    const trackColor = isOn ? color : offColor\n    const thumbTransform = isOn\n      ? `translateX(${parseInt(sizeStyles.width) - parseInt(sizeStyles.thumbSize) - 2}px)`\n      : 'translateX(2px)'\n\n    return h(\n      'div',\n      {\n        style: {\n          position: 'relative',\n          display: 'inline-block',\n        },\n      },\n      // Hidden input for form integration\n      h('input', {\n        ref: (el: HTMLInputElement) => {\n          this.toggleElement = el\n\n          if (el && !this.mounted) {\n            el.addEventListener('change', this.handleToggle)\n\n            this.cleanup.push(() => {\n              el.removeEventListener('change', this.handleToggle)\n            })\n          }\n        },\n        type: 'checkbox',\n        checked: isOn,\n        disabled: isDisabled,\n        style: {\n          position: 'absolute',\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          margin: 0,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n        },\n        'aria-label': this.props.accessibilityLabel,\n        'aria-describedby': this.props.accessibilityHint ? `${this.id}-hint` : undefined,\n      }),\n\n      // Switch track\n      h(\n        'div',\n        {\n          style: {\n            width: sizeStyles.width,\n            height: sizeStyles.height,\n            backgroundColor: trackColor,\n            borderRadius: sizeStyles.height,\n            position: 'relative',\n            cursor: isDisabled ? 'not-allowed' : 'pointer',\n            opacity: isDisabled ? 0.5 : 1,\n            transition: animated ? 'background-color 0.2s ease' : 'none',\n            border: '1px solid rgba(0,0,0,0.1)',\n            boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.1)',\n          },\n          onClick: this.handleToggle,\n        },\n        // Switch thumb\n        h('div', {\n          style: {\n            width: sizeStyles.thumbSize,\n            height: sizeStyles.thumbSize,\n            backgroundColor: thumbColor,\n            borderRadius: '50%',\n            position: 'absolute',\n            top: '50%',\n            transform: `translateY(-50%) ${thumbTransform}`,\n            transition: animated ? 'transform 0.2s ease' : 'none',\n            boxShadow: '0 2px 4px rgba(0,0,0,0.2)',\n            border: '1px solid rgba(0,0,0,0.1)',\n          },\n        })\n      )\n    )\n  }\n\n  /**\n   * Render checkbox variant\n   */\n  private renderCheckbox() {\n    const isOn = this.getIsOn()\n    const isDisabled = this.isDisabled()\n    const sizeStyles = this.getSizeStyles()\n    const { color = '#007AFF' } = this.props\n\n    return h(\n      'div',\n      {\n        style: {\n          position: 'relative',\n          display: 'inline-block',\n        },\n      },\n      // Hidden input\n      h('input', {\n        ref: (el: HTMLInputElement) => {\n          this.toggleElement = el\n\n          if (el && !this.mounted) {\n            el.addEventListener('change', this.handleToggle)\n\n            this.cleanup.push(() => {\n              el.removeEventListener('change', this.handleToggle)\n            })\n          }\n        },\n        type: 'checkbox',\n        checked: isOn,\n        disabled: isDisabled,\n        style: {\n          position: 'absolute',\n          opacity: 0,\n          width: '100%',\n          height: '100%',\n          margin: 0,\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n        },\n      }),\n\n      // Checkbox visual\n      h(\n        'div',\n        {\n          style: {\n            width: sizeStyles.thumbSize,\n            height: sizeStyles.thumbSize,\n            border: `2px solid ${isOn ? color : '#d1d5db'}`,\n            borderRadius: '4px',\n            backgroundColor: isOn ? color : '#ffffff',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            cursor: isDisabled ? 'not-allowed' : 'pointer',\n            opacity: isDisabled ? 0.5 : 1,\n            transition: 'all 0.2s ease',\n          },\n          onClick: this.handleToggle,\n        },\n        ...(isOn\n          ? [\n              // Checkmark\n              h('div', {\n                style: {\n                  width: '6px',\n                  height: '10px',\n                  border: '2px solid white',\n                  borderTop: 'none',\n                  borderLeft: 'none',\n                  transform: 'rotate(45deg) translateY(-1px)',\n                  opacity: isOn ? 1 : 0,\n                  transition: 'opacity 0.1s ease',\n                },\n              }),\n            ]\n          : [])\n      )\n    )\n  }\n\n  /**\n   * Render button variant\n   */\n  private renderButton() {\n    const isOn = this.getIsOn()\n    const isDisabled = this.isDisabled()\n    const sizeStyles = this.getSizeStyles()\n    const { color = '#007AFF', offColor = '#f3f4f6' } = this.props\n\n    return h(\n      'button',\n      {\n        ref: (el: HTMLButtonElement) => {\n          if (el && !this.mounted) {\n            el.addEventListener('click', this.handleToggle)\n\n            this.cleanup.push(() => {\n              el.removeEventListener('click', this.handleToggle)\n            })\n          }\n        },\n        type: 'button',\n        disabled: isDisabled,\n        style: {\n          padding: '8px 16px',\n          backgroundColor: isOn ? color : offColor,\n          color: isOn ? '#ffffff' : '#374151',\n          border: `1px solid ${isOn ? color : '#d1d5db'}`,\n          borderRadius: '6px',\n          fontSize: sizeStyles.fontSize,\n          fontWeight: '500',\n          cursor: isDisabled ? 'not-allowed' : 'pointer',\n          opacity: isDisabled ? 0.5 : 1,\n          transition: 'all 0.2s ease',\n          outline: 'none',\n        },\n        'aria-pressed': isOn,\n        'aria-label': this.props.accessibilityLabel,\n      },\n      text(isOn ? 'ON' : 'OFF')\n    )\n  }\n\n  /**\n   * Render toggle control based on variant\n   */\n  private renderToggleControl() {\n    const { variant = 'switch' } = this.props\n\n    switch (variant) {\n      case 'checkbox':\n        return this.renderCheckbox()\n      case 'button':\n        return this.renderButton()\n      default:\n        return this.renderSwitch()\n    }\n  }\n\n  /**\n   * Render label content\n   */\n  private renderLabel() {\n    const labelContent = this.resolveLabel()\n    if (!labelContent) return null\n\n    const sizeStyles = this.getSizeStyles()\n\n    return h(\n      'span',\n      {\n        style: {\n          fontSize: sizeStyles.fontSize,\n          color: this.isDisabled() ? '#9ca3af' : '#374151',\n          cursor: this.isDisabled() ? 'not-allowed' : 'pointer',\n        },\n        onClick: this.isDisabled() ? undefined : this.handleToggle,\n      },\n      ...(typeof labelContent === 'string'\n        ? [text(labelContent)]\n        : this.renderComponentContent(labelContent as ComponentInstance))\n    )\n  }\n\n  render() {\n    const { labelPosition = 'trailing', spacing = 8, accessibilityHint } = this.props\n\n    const label = this.renderLabel()\n    const control = this.renderToggleControl()\n\n    // Arrange label and control based on position\n    const children =\n      labelPosition === 'leading' && label ? [label, control] : label ? [control, label] : [control]\n\n    return h(\n      'div',\n      {\n        style: {\n          display: 'flex',\n          alignItems: 'center',\n          gap: label ? `${spacing}px` : '0',\n          cursor: this.isDisabled() ? 'not-allowed' : 'pointer',\n        },\n        'aria-describedby': accessibilityHint ? `${this.id}-hint` : undefined,\n      },\n      ...children,\n\n      // Accessibility hint\n      ...(accessibilityHint\n        ? [\n            h(\n              'div',\n              {\n                id: `${this.id}-hint`,\n                style: {\n                  fontSize: '12px',\n                  color: '#6b7280',\n                  marginTop: '4px',\n                  display: 'block',\n                  width: '100%',\n                },\n              },\n              text(accessibilityHint)\n            ),\n          ]\n        : [])\n    )\n  }\n}\n\n/**\n * Toggle component function\n */\nexport function Toggle(\n  isOn: boolean | Signal<boolean>,\n  props: Omit<ToggleProps, 'isOn'> = {}\n): ModifiableComponent<ToggleProps> & {\n  modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>\n} {\n  const toggleProps: ToggleProps = { ...props, isOn }\n  const component = new EnhancedToggle(toggleProps)\n  return withModifiers(component)\n}\n\n/**\n * Toggle with label\n */\nexport function ToggleWithLabel(\n  label: string | (() => string) | Signal<string> | ComponentInstance,\n  isOn: boolean | Signal<boolean>,\n  props: Omit<ToggleProps, 'isOn' | 'label'> = {}\n) {\n  return Toggle(isOn, { ...props, label })\n}\n\n/**\n * Toggle style variants\n */\nexport const ToggleStyles = {\n  /**\n   * Switch toggle (default)\n   */\n  Switch(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'variant'> = {}) {\n    return Toggle(isOn, { ...props, variant: 'switch' })\n  },\n\n  /**\n   * Checkbox toggle\n   */\n  Checkbox(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'variant'> = {}) {\n    return Toggle(isOn, { ...props, variant: 'checkbox' })\n  },\n\n  /**\n   * Button toggle\n   */\n  Button(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'variant'> = {}) {\n    return Toggle(isOn, { ...props, variant: 'button' })\n  },\n\n  /**\n   * Small toggle\n   */\n  Small(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'size'> = {}) {\n    return Toggle(isOn, { ...props, size: 'small' })\n  },\n\n  /**\n   * Large toggle\n   */\n  Large(isOn: boolean | Signal<boolean>, props: Omit<ToggleProps, 'isOn' | 'size'> = {}) {\n    return Toggle(isOn, { ...props, size: 'large' })\n  },\n\n  /**\n   * Custom color toggle\n   */\n  CustomColor(\n    isOn: boolean | Signal<boolean>,\n    color: string,\n    props: Omit<ToggleProps, 'isOn' | 'color'> = {}\n  ) {\n    return Toggle(isOn, { ...props, color })\n  },\n\n  /**\n   * Toggle with leading label\n   */\n  WithLeadingLabel(\n    label: string | (() => string) | Signal<string> | ComponentInstance,\n    isOn: boolean | Signal<boolean>,\n    props: Omit<ToggleProps, 'isOn' | 'label' | 'labelPosition'> = {}\n  ) {\n    return Toggle(isOn, { ...props, label, labelPosition: 'leading' })\n  },\n\n  /**\n   * Toggle with trailing label (default)\n   */\n  WithTrailingLabel(\n    label: string | (() => string) | Signal<string> | ComponentInstance,\n    isOn: boolean | Signal<boolean>,\n    props: Omit<ToggleProps, 'isOn' | 'label' | 'labelPosition'> = {}\n  ) {\n    return Toggle(isOn, { ...props, label, labelPosition: 'trailing' })\n  },\n}\n\n/**\n * Toggle utilities\n */\nexport const ToggleUtils = {\n  /**\n   * Create a toggle group with multiple options\n   */\n  createGroup(\n    options: Array<{\n      key: string\n      label: string\n      isOn: boolean | Signal<boolean>\n      onToggle?: (isOn: boolean) => void\n    }>,\n    props: Omit<ToggleProps, 'isOn' | 'label' | 'onToggle'> = {}\n  ) {\n    return options.map((option) =>\n      ToggleWithLabel(option.label, option.isOn, {\n        ...props,\n        onToggle: option.onToggle,\n      })\n    )\n  },\n\n  /**\n   * Create exclusive toggle group (radio-like behavior)\n   */\n  createExclusiveGroup(\n    options: Array<{\n      key: string\n      label: string\n    }>,\n    selectedKey: string | Signal<string>,\n    onSelectionChange?: (key: string) => void,\n    props: Omit<ToggleProps, 'isOn' | 'label' | 'onToggle'> = {}\n  ) {\n    const getSelectedKey = () => {\n      if (isSignal(selectedKey)) {\n        return (selectedKey as () => string)()\n      }\n      return selectedKey as string\n    }\n\n    return options.map((option) =>\n      ToggleWithLabel(option.label, getSelectedKey() === option.key, {\n        ...props,\n        onToggle: (isOn: boolean) => {\n          if (isOn && onSelectionChange) {\n            onSelectionChange(option.key)\n          }\n        },\n      })\n    )\n  },\n\n  /**\n   * Batch toggle operations\n   */\n  batch: {\n    /**\n     * Toggle all items in a group\n     */\n    toggleAll(\n      toggles: Array<{ isOn: boolean | Signal<boolean>; onToggle?: (isOn: boolean) => void }>,\n      newState: boolean\n    ) {\n      toggles.forEach((toggle) => {\n        if (toggle.onToggle) {\n          toggle.onToggle(newState)\n        }\n      })\n    },\n\n    /**\n     * Get state of all toggles in a group\n     */\n    getStates(toggles: Array<{ isOn: boolean | Signal<boolean> }>): boolean[] {\n      return toggles.map((toggle) => {\n        if (isSignal(toggle.isOn)) {\n          return (toggle.isOn as () => boolean)()\n        }\n        return toggle.isOn as boolean\n      })\n    },\n\n    /**\n     * Check if all toggles are on\n     */\n    allOn(toggles: Array<{ isOn: boolean | Signal<boolean> }>): boolean {\n      return this.getStates(toggles).every((state) => state)\n    },\n\n    /**\n     * Check if any toggle is on\n     */\n    anyOn(toggles: Array<{ isOn: boolean | Signal<boolean> }>): boolean {\n      return this.getStates(toggles).some((state) => state)\n    },\n  },\n}\n"],"names":["EnhancedToggle","props","__publicField","event","newValue","setAnimating","createSignal","createEffect","currentValue","isOn","isSignal","disabled","label","content","rendered","size","isDisabled","sizeStyles","color","offColor","thumbColor","animated","trackColor","thumbTransform","h","el","text","variant","labelContent","labelPosition","spacing","accessibilityHint","control","children","Toggle","toggleProps","component","withModifiers","ToggleWithLabel","ToggleStyles","ToggleUtils","options","option","selectedKey","onSelectionChange","getSelectedKey","toggles","newState","toggle","state"],"mappings":"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"}

package/dist/components/Toggle.d.ts

@@ -0,0 +1,207 @@
+/**
+ * Enhanced Toggle Component (Phase 6.4.5)
+ *
+ * SwiftUI-inspired Toggle component with switch-style boolean controls,
+ * smooth animations, and multiple style variants.
+ */
+import type { ModifiableComponent, ModifierBuilder } from '../modifiers/types';
+import type { Signal } from '../reactive/types';
+import type { ComponentInstance, ComponentProps, DOMNode } from '../runtime/types';
+/**
+ * Toggle component properties
+ */
+export interface ToggleProps extends ComponentProps {
+    isOn: boolean | Signal<boolean>;
+    onToggle?: (isOn: boolean) => void;
+    label?: string | (() => string) | Signal<string> | ComponentInstance;
+    variant?: 'switch' | 'checkbox' | 'button';
+    size?: 'small' | 'medium' | 'large';
+    color?: string;
+    offColor?: string;
+    thumbColor?: string;
+    disabled?: boolean | Signal<boolean>;
+    animated?: boolean;
+    labelPosition?: 'leading' | 'trailing';
+    spacing?: number;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+/**
+ * Enhanced Toggle component class
+ */
+export declare class EnhancedToggle implements ComponentInstance<ToggleProps> {
+    props: ToggleProps;
+    readonly type: "component";
+    readonly id: string;
+    mounted: boolean;
+    cleanup: (() => void)[];
+    private toggleElement;
+    private setIsAnimating;
+    constructor(props: ToggleProps);
+    /**
+     * Get current toggle state
+     */
+    private getIsOn;
+    /**
+     * Check if toggle is disabled
+     */
+    private isDisabled;
+    /**
+     * Resolve label content
+     */
+    private resolveLabel;
+    /**
+     * Helper to render component content safely
+     */
+    private renderComponentContent;
+    /**
+     * Handle toggle change
+     */
+    private handleToggle;
+    /**
+     * Get toggle size styles
+     */
+    private getSizeStyles;
+    /**
+     * Render switch variant
+     */
+    private renderSwitch;
+    /**
+     * Render checkbox variant
+     */
+    private renderCheckbox;
+    /**
+     * Render button variant
+     */
+    private renderButton;
+    /**
+     * Render toggle control based on variant
+     */
+    private renderToggleControl;
+    /**
+     * Render label content
+     */
+    private renderLabel;
+    render(): DOMNode;
+}
+/**
+ * Toggle component function
+ */
+export declare function Toggle(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, 'isOn'>): ModifiableComponent<ToggleProps> & {
+    modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+};
+/**
+ * Toggle with label
+ */
+export declare function ToggleWithLabel(label: string | (() => string) | Signal<string> | ComponentInstance, isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, 'isOn' | 'label'>): ModifiableComponent<ToggleProps> & {
+    modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+};
+/**
+ * Toggle style variants
+ */
+export declare const ToggleStyles: {
+    /**
+     * Switch toggle (default)
+     */
+    Switch(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "variant">): ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    };
+    /**
+     * Checkbox toggle
+     */
+    Checkbox(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "variant">): ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    };
+    /**
+     * Button toggle
+     */
+    Button(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "variant">): ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    };
+    /**
+     * Small toggle
+     */
+    Small(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "size">): ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    };
+    /**
+     * Large toggle
+     */
+    Large(isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "size">): ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    };
+    /**
+     * Custom color toggle
+     */
+    CustomColor(isOn: boolean | Signal<boolean>, color: string, props?: Omit<ToggleProps, "isOn" | "color">): ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    };
+    /**
+     * Toggle with leading label
+     */
+    WithLeadingLabel(label: string | (() => string) | Signal<string> | ComponentInstance, isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "label" | "labelPosition">): ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    };
+    /**
+     * Toggle with trailing label (default)
+     */
+    WithTrailingLabel(label: string | (() => string) | Signal<string> | ComponentInstance, isOn: boolean | Signal<boolean>, props?: Omit<ToggleProps, "isOn" | "label" | "labelPosition">): ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    };
+};
+/**
+ * Toggle utilities
+ */
+export declare const ToggleUtils: {
+    /**
+     * Create a toggle group with multiple options
+     */
+    createGroup(options: Array<{
+        key: string;
+        label: string;
+        isOn: boolean | Signal<boolean>;
+        onToggle?: (isOn: boolean) => void;
+    }>, props?: Omit<ToggleProps, "isOn" | "label" | "onToggle">): (ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    })[];
+    /**
+     * Create exclusive toggle group (radio-like behavior)
+     */
+    createExclusiveGroup(options: Array<{
+        key: string;
+        label: string;
+    }>, selectedKey: string | Signal<string>, onSelectionChange?: (key: string) => void, props?: Omit<ToggleProps, "isOn" | "label" | "onToggle">): (ModifiableComponent<ToggleProps> & {
+        modifier: ModifierBuilder<ModifiableComponent<ToggleProps>>;
+    })[];
+    /**
+     * Batch toggle operations
+     */
+    batch: {
+        /**
+         * Toggle all items in a group
+         */
+        toggleAll(toggles: Array<{
+            isOn: boolean | Signal<boolean>;
+            onToggle?: (isOn: boolean) => void;
+        }>, newState: boolean): void;
+        /**
+         * Get state of all toggles in a group
+         */
+        getStates(toggles: Array<{
+            isOn: boolean | Signal<boolean>;
+        }>): boolean[];
+        /**
+         * Check if all toggles are on
+         */
+        allOn(toggles: Array<{
+            isOn: boolean | Signal<boolean>;
+        }>): boolean;
+        /**
+         * Check if any toggle is on
+         */
+        anyOn(toggles: Array<{
+            isOn: boolean | Signal<boolean>;
+        }>): boolean;
+    };
+};
+//# sourceMappingURL=Toggle.d.ts.map

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

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