🎨 Add new Flux icons: implement multiple reusable icon components (e.g., hand-raised, hand-thumb-up, heart, hashtag, home) with variant support for improved UI consistency.

This commit is contained in:
HolgerHatGarKeineNode
2026-01-23 23:00:02 +01:00
parent 578e4f13fc
commit b30fec150c
792 changed files with 307541 additions and 117 deletions

View File

@@ -0,0 +1,52 @@
@props([
'name' => $attributes->whereStartsWith('wire:model')->first(),
])
@php
$classes = Flux::classes()
->add('w-full flex')
->add('*:data-flux-input:grow')
->add([
// With the external borders, let's always make sure the first and last children have outside borders.
// For internal borders, we will ensure that all left borders are removed, but the right borders remain.
// But when there is a input groupsuffix, then there should be no right internal border.
// That way we shouldn't ever have a double border...
// All inputs borders...
'[&>[data-flux-input]:last-child:not(:first-child)>[data-flux-group-target]:not([data-invalid])]:border-s-0',
'[&>[data-flux-input]:not(:first-child):not(:last-child)>[data-flux-group-target]:not([data-invalid])]:border-s-0',
'[&>[data-flux-input]:has(+[data-flux-input-group-suffix])>[data-flux-group-target]:not([data-invalid])]:border-e-0',
// Selects and date pickers borders...
'[&>*:last-child:not(:first-child)>[data-flux-group-target]:not([data-invalid])]:border-s-0',
'[&>*:not(:first-child):not(:last-child)>[data-flux-group-target]:not([data-invalid])]:border-s-0',
'[&>*:has(+[data-flux-input-group-suffix])>[data-flux-group-target]:not([data-invalid])]:border-e-0',
// Buttons borders...
'[&>[data-flux-group-target]:last-child:not(:first-child)]:border-s-0',
'[&>[data-flux-group-target]:not(:first-child):not(:last-child)]:border-s-0',
'[&>[data-flux-group-target]:has(+[data-flux-input-group-suffix])]:border-e-0',
// "Weld" the borders of inputs together by overriding their border radiuses...
'[&>[data-flux-group-target]:not(:first-child):not(:last-child)]:rounded-none',
'[&>[data-flux-group-target]:first-child:not(:last-child)]:rounded-e-none',
'[&>[data-flux-group-target]:last-child:not(:first-child)]:rounded-s-none',
// "Weld" borders for sub-children of group targets (button element inside ui-select element, etc.)...
'[&>*:not(:first-child):not(:last-child):not(:only-child)>[data-flux-group-target]]:rounded-none',
'[&>*:first-child:not(:last-child)>[data-flux-group-target]]:rounded-e-none',
'[&>*:last-child:not(:first-child)>[data-flux-group-target]]:rounded-s-none',
// "Weld" borders for sub-sub-children of group targets (input element inside div inside ui-select element (combobox))...
'[&>*:not(:first-child):not(:last-child):not(:only-child)>[data-flux-input]>[data-flux-group-target]]:rounded-none',
'[&>*:first-child:not(:last-child)>[data-flux-input]>[data-flux-group-target]]:rounded-e-none',
'[&>*:last-child:not(:first-child)>[data-flux-input]>[data-flux-group-target]]:rounded-s-none',
])
;
@endphp
<flux:with-field :$attributes :$name>
<div {{ $attributes->class($classes) }} data-flux-input-group>
{{ $slot }}
</div>
</flux:with-field>