Toggle

package toggle import (	"context"	"strconv" 	"github.com/axadrn/shadcn-templ/v2/utils") type Variant stringtype Size string const (	VariantDefault Variant = "default"	VariantOutline Variant = "outline") const (	SizeDefault Size = "default"	SizeSm      Size = "sm"	SizeLg      Size = "lg") type ctxKey string const (	variantKey ctxKey = "toggleVariant"	sizeKey    ctxKey = "toggleSize"	spacingKey ctxKey = "toggleSpacing") // WithGroupDefaults stores a group's variant/size/spacing in the context so// child Toggles inherit them and style themselves as group items. Used by the// togglegroup component.func WithGroupDefaults(ctx context.Context, variant Variant, size Size, spacing int) context.Context {	ctx = context.WithValue(ctx, variantKey, variant)	ctx = context.WithValue(ctx, sizeKey, size)	ctx = context.WithValue(ctx, spacingKey, spacing)	return ctx} func variantFromCtx(ctx context.Context) Variant {	if v, ok := ctx.Value(variantKey).(Variant); ok && v != "" {		return v	}	return VariantDefault} func sizeFromCtx(ctx context.Context) Size {	if s, ok := ctx.Value(sizeKey).(Size); ok && s != "" {		return s	}	return SizeDefault} // inGroup reports whether the toggle renders inside a ToggleGroup, and with// which spacing.func spacingFromCtx(ctx context.Context) (int, bool) {	s, ok := ctx.Value(spacingKey).(int)	return s, ok} type Props struct {	ID         string	Class      string	Attributes templ.Attributes	Variant    Variant	Size       Size	Pressed    bool	Disabled   bool	// Value identifies the toggle within a group (exposed in the toggle-change event).	Value string} // 1:1 base/ui/toggle.tsx: structure lives here, the look comes from the// active style-*.css via the cn-toggle-* classes.const baseClasses = "cn-toggle group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0" func variantClasses(v Variant) string {	switch v {	case VariantOutline:		return "cn-toggle-variant-outline"	default:		return "cn-toggle-variant-default"	}} func sizeClasses(s Size) string {	switch s {	case SizeSm:		return "cn-toggle-size-sm"	case SizeLg:		return "cn-toggle-size-lg"	default:		return "cn-toggle-size-default"	}} // groupItemClasses is the verbatim ToggleGroupItem class string from// base/ui/toggle-group.tsx.func groupItemClasses() string {	return "cn-toggle-group-item shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t"} templ Toggle(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Variant == "" {		{{ p.Variant = variantFromCtx(ctx) }}	}	if p.Size == "" {		{{ p.Size = sizeFromCtx(ctx) }}	}	{{ spacing, inGroup := spacingFromCtx(ctx) }}	<button		type="button"		if inGroup {			data-slot="toggle-group-item"			data-variant={ string(p.Variant) }			data-size={ string(p.Size) }			data-spacing={ strconv.Itoa(spacing) }		} else {			data-slot="toggle"		}		if p.ID != "" {			id={ p.ID }		}		data-tui-toggle		if p.Value != "" {			data-tui-toggle-value={ p.Value }		}		aria-pressed={ strconv.FormatBool(p.Pressed) }		if p.Pressed {			data-state="on"		} else {			data-state="off"		}		disabled?={ p.Disabled }		class={ utils.CN(map[string]bool{groupItemClasses(): inGroup}, baseClasses, variantClasses(p.Variant), sizeClasses(p.Size), p.Class) }		{ p.Attributes... }	>		{ children... }	</button>}

(function () {  function isOn(el) {    return el.getAttribute("data-state") === "on";  }   function setState(el, on) {    el.setAttribute("data-state", on ? "on" : "off");    el.setAttribute("aria-pressed", on ? "true" : "false");  }   document.addEventListener("click", (e) => {    const toggle = e.target.closest("[data-tui-toggle]");    if (!toggle || toggle.disabled) return;     const group = toggle.closest("[data-tui-toggle-group]");     if (group && !group.hasAttribute("data-toggle-multiple")) {      const wasOn = isOn(toggle);      group        .querySelectorAll("[data-tui-toggle]")        .forEach((t) => setState(t, false));      setState(toggle, !wasOn);    } else {      setState(toggle, !isOn(toggle));    }     // Expose the group's active value(s) so CSS/HTMX can react without custom JS.    if (group) {      const on = [...group.querySelectorAll('[data-tui-toggle][data-state="on"]')]        .map((t) => t.getAttribute("data-tui-toggle-value"))        .filter(Boolean);      group.setAttribute("data-tui-toggle-group-value", on.join(" "));    }     toggle.dispatchEvent(      new CustomEvent("toggle-change", {        bubbles: true,        detail: {          pressed: isOn(toggle),          value: toggle.getAttribute("data-tui-toggle-value"),        },      }),    );  });})();