Separator

package separator

props {
  // Orientation sets the direction: Horizontal or Vertical.
  Orientation Orientation = Horizontal
  // Decorative hides the separator from assistive technology. Set it to false for the separator
  // role.
  Decorative  bool = true
  // Class adds classes to the root element.
  Class       string = ""
  // Attrs adds HTML attributes to the root element.
  Attrs       gx.Attrs = nil
}

<div data-slot="separator" data-orientation={p.orientation()} class={gx.Cx("shrink-0 bg-border", orientationClass[Orientation(p.orientation())], p.Class)} {...p.attrs()}></div>

package separator

import "github.com/alternayte/gx"

var SeparatorFixtures = gx.Fixtures[SeparatorProps]{
	"Horizontal": {Decorative: true, Class: "w-40"},
	"Vertical":   {Decorative: true, Orientation: Vertical, Class: "h-8"},
	"Semantic":   {Class: "w-40"},
}

package separator

import "github.com/alternayte/gx"

// Orientation is the direction of a separator.
type Orientation string

// The orientations of separator.Separator.
const (
	Horizontal Orientation = "horizontal"
	Vertical   Orientation = "vertical"
)

var orientationClass = gx.Enum[Orientation]{
	Horizontal: "h-px w-full",
	Vertical:   "h-full w-px",
}

// orientation returns the data-orientation value; a zero value is
// Horizontal.
func (p SeparatorProps) orientation() string {
	if p.Orientation == "" {
		return string(Horizontal)
	}
	return string(p.Orientation)
}

// attrs returns the role of one separator, then the caller's attributes. A
// decorative separator has no role. A semantic separator names its
// orientation when it is vertical.
func (p SeparatorProps) attrs() gx.Attrs {
	a := gx.Attrs{{Key: "role", Value: "none"}}
	if !p.Decorative {
		a = gx.Attrs{{Key: "role", Value: "separator"}}
		if p.Orientation == Vertical {
			a = append(a, gx.Attr{Key: "aria-orientation", Value: "vertical"})
		}
	}
	return append(a, p.Attrs...)
}