🚀 initial commit

.junie/guidelines.md

@@ -0,0 +1,56 @@
+# 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