einundzwanzig-app/.junie/guidelines.md

Livewire Flux Component Guidelines

Usage Pattern

Components use the format: <flux:name />

Component Reference

Layout & Structure

• flux:card - Basic container with default slot
• flux:field - Form field wrapper with label/description support
• flux:brand - Logo/company name display with href navigation

Navigation

• flux:breadcrumbs - Navigation breadcrumbs

  • flux:breadcrumbs.item - Individual breadcrumb with href/icon

• flux:accordion - Collapsible content sections

  • flux:accordion.item - Individual accordion item with heading/content
  • flux:accordion.heading - Accordion header
  • flux:accordion.content - Accordion body

Form Controls

• flux:input - Text input with wire:model, validation, icons, masks
• flux:select - Select input
• flux:select.option - Select options
• flux:autocomplete - Searchable input with dropdown items
• flux:checkbox - Single checkbox or grouped checkboxes
• flux:date-picker - Date selection with calendar, ranges, presets
• flux:editor - Rich text editor with toolbar

Interactive Elements

• flux:button - Button with variants (primary, outline, danger), icons, loading states
• flux:dropdown - Dropdown menu with positioning options
• flux:menu - Complex menu with items, submenus, separators, checkboxes, radio buttons
• flux:command - Command palette with searchable items
• flux:context - Right-click context menu wrapper

Display Components

• flux:avatar - User avatar with initials, images, badges, grouping
• flux:badge - Status/label badges with colors and variants
• flux:callout - Highlighted information blocks with icons and actions
• flux:calendar - Calendar display with date selection modes
• flux:chart - Data visualization with lines, areas, axes, tooltips

Key Props

• wire:model - Livewire property binding
• variant - Visual style options (outline, primary, filled, etc.)
• size - Component sizing (xs, sm, base, lg, xl, 2xl)
• disabled/invalid - State management
• icon/icon:trailing - Icon placement with variants
• label/description - Form field labeling
• color - Color theming options

Common Patterns

• Most form components support wire:model binding
• Many components have label/description props for field wrapping
• Icon components accept variant options (outline, solid, mini, micro)
• Size props typically offer xs, sm, base, lg, xl, 2xl options
• Variant props provide visual style alternatives