diff --git a/composer.json b/composer.json
index d652b4c..c007da7 100644
--- a/composer.json
+++ b/composer.json
@@ -9,8 +9,16 @@
"php": "^8.2",
"laravel/framework": "^12.0",
"laravel/tinker": "^2.10.1",
+ "livewire/flux": "2.2.5",
+ "livewire/flux-pro": "2.2.5",
"livewire/livewire": "^3.6"
},
+ "repositories": [
+ {
+ "type": "artifact",
+ "url": "./packages"
+ }
+ ],
"require-dev": {
"fakerphp/faker": "^1.23",
"laravel/pail": "^1.2.2",
diff --git a/composer.lock b/composer.lock
index fad1464..c04db2e 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
- "content-hash": "76d252b947b006bd1c45471a80bd8c06",
+ "content-hash": "941e8044314064aca16bfdbd439cf9ff",
"packages": [
{
"name": "brick/math",
@@ -2009,6 +2009,124 @@
],
"time": "2024-12-08T08:18:47+00:00"
},
+ {
+ "name": "livewire/flux",
+ "version": "v2.2.5",
+ "source": {
+ "type": "git",
+ "url": "https://github.com/livewire/flux.git",
+ "reference": "2295f14766f86006d889f37ee208bcf347a0d013"
+ },
+ "dist": {
+ "type": "zip",
+ "url": "https://api.github.com/repos/livewire/flux/zipball/2295f14766f86006d889f37ee208bcf347a0d013",
+ "reference": "2295f14766f86006d889f37ee208bcf347a0d013",
+ "shasum": ""
+ },
+ "require": {
+ "illuminate/console": "^10.0|^11.0|^12.0",
+ "illuminate/support": "^10.0|^11.0|^12.0",
+ "illuminate/view": "^10.0|^11.0|^12.0",
+ "laravel/prompts": "^0.1|^0.2|^0.3",
+ "livewire/livewire": "^3.5.19",
+ "php": "^8.1",
+ "symfony/console": "^6.0|^7.0"
+ },
+ "type": "library",
+ "extra": {
+ "laravel": {
+ "aliases": {
+ "Flux": "Flux\\Flux"
+ },
+ "providers": [
+ "Flux\\FluxServiceProvider"
+ ]
+ }
+ },
+ "autoload": {
+ "psr-4": {
+ "Flux\\": "src/"
+ }
+ },
+ "notification-url": "https://packagist.org/downloads/",
+ "license": [
+ "proprietary"
+ ],
+ "authors": [
+ {
+ "name": "Caleb Porzio",
+ "email": "calebporzio@gmail.com"
+ }
+ ],
+ "description": "The official UI component library for Livewire.",
+ "keywords": [
+ "components",
+ "flux",
+ "laravel",
+ "livewire",
+ "ui"
+ ],
+ "support": {
+ "issues": "https://github.com/livewire/flux/issues",
+ "source": "https://github.com/livewire/flux/tree/v2.2.5"
+ },
+ "time": "2025-08-19T22:41:54+00:00"
+ },
+ {
+ "name": "livewire/flux-pro",
+ "version": "2.2.5",
+ "dist": {
+ "type": "zip",
+ "url": "./packages/flux-pro-2.2.5.zip",
+ "shasum": "fcbd455fad3ec1a5b0483a9124746392c7b11f2d"
+ },
+ "require": {
+ "illuminate/console": "^10.0|^11.0|^12.0",
+ "illuminate/support": "^10.0|^11.0|^12.0",
+ "illuminate/view": "^10.0|^11.0|^12.0",
+ "laravel/prompts": "^0.1.24|^0.2|^0.3",
+ "livewire/flux": "2.2.5|dev-main",
+ "livewire/livewire": "^3.6.2",
+ "php": "^8.1",
+ "symfony/console": "^6.0|^7.0"
+ },
+ "type": "library",
+ "extra": {
+ "laravel": {
+ "providers": [
+ "FluxPro\\FluxProServiceProvider"
+ ],
+ "aliases": {
+ "Flux": "FluxPro\\FluxPro"
+ }
+ }
+ },
+ "autoload": {
+ "psr-4": {
+ "FluxPro\\": "src/"
+ },
+ "files": [
+ "src/helpers.php"
+ ]
+ },
+ "license": [
+ "proprietary"
+ ],
+ "authors": [
+ {
+ "name": "Caleb Porzio",
+ "email": "calebporzio@gmail.com"
+ }
+ ],
+ "description": "The pro version of Flux, the official UI component library for Livewire.",
+ "keywords": [
+ "components",
+ "flux",
+ "laravel",
+ "livewire",
+ "ui"
+ ]
+ },
{
"name": "livewire/livewire",
"version": "v3.6.4",
diff --git a/packages/flux-pro-2.2.5.zip b/packages/flux-pro-2.2.5.zip
new file mode 100644
index 0000000..22c24cd
Binary files /dev/null and b/packages/flux-pro-2.2.5.zip differ
diff --git a/resources/views/flux/accent.blade.php b/resources/views/flux/accent.blade.php
new file mode 100644
index 0000000..e4e1411
--- /dev/null
+++ b/resources/views/flux/accent.blade.php
@@ -0,0 +1,36 @@
+@props([
+ 'color' => null,
+])
+
+@php
+ $classes = Flux::classes()
+ ->add(match ($color) {
+ 'slate' => '[--color-accent:var(--color-slate-800)] [--color-accent-content:var(--color-slate-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-slate-800)]',
+ 'gray' => '[--color-accent:var(--color-gray-800)] [--color-accent-content:var(--color-gray-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-gray-800)]',
+ 'zinc' => '[--color-accent:var(--color-zinc-800)] [--color-accent-content:var(--color-zinc-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-zinc-800)]',
+ 'neutral' => '[--color-accent:var(--color-neutral-800)] [--color-accent-content:var(--color-neutral-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-neutral-800)]',
+ 'stone' => '[--color-accent:var(--color-stone-800)] [--color-accent-content:var(--color-stone-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-stone-800)]',
+ 'red' => '[--color-accent:var(--color-red-500)] [--color-accent-content:var(--color-red-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-red-500)] dark:[--color-accent-content:var(--color-red-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'orange' => '[--color-accent:var(--color-orange-500)] [--color-accent-content:var(--color-orange-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-orange-400)] dark:[--color-accent-content:var(--color-orange-400)] dark:[--color-accent-foreground:var(--color-orange-950)]',
+ 'amber' => '[--color-accent:var(--color-amber-400)] [--color-accent-content:var(--color-amber-600)] [--color-accent-foreground:var(--color-amber-950)] dark:[--color-accent:var(--color-amber-400)] dark:[--color-accent-content:var(--color-amber-400)] dark:[--color-accent-foreground:var(--color-amber-950)]',
+ 'yellow' => '[--color-accent:var(--color-yellow-400)] [--color-accent-content:var(--color-yellow-600)] [--color-accent-foreground:var(--color-yellow-950)] dark:[--color-accent:var(--color-yellow-400)] dark:[--color-accent-content:var(--color-yellow-400)] dark:[--color-accent-foreground:var(--color-yellow-950)]',
+ 'lime' => '[--color-accent:var(--color-lime-400)] [--color-accent-content:var(--color-lime-600)] [--color-accent-foreground:var(--color-lime-900)] dark:[--color-accent:var(--color-lime-400)] dark:[--color-accent-content:var(--color-lime-400)] dark:[--color-accent-foreground:var(--color-lime-950)]',
+ 'green' => '[--color-accent:var(--color-green-600)] [--color-accent-content:var(--color-green-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-green-600)] dark:[--color-accent-content:var(--color-green-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'emerald' => '[--color-accent:var(--color-emerald-600)] [--color-accent-content:var(--color-emerald-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-emerald-600)] dark:[--color-accent-content:var(--color-emerald-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'teal' => '[--color-accent:var(--color-teal-600)] [--color-accent-content:var(--color-teal-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-teal-600)] dark:[--color-accent-content:var(--color-teal-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'cyan' => '[--color-accent:var(--color-cyan-600)] [--color-accent-content:var(--color-cyan-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-cyan-600)] dark:[--color-accent-content:var(--color-cyan-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'sky' => '[--color-accent:var(--color-sky-600)] [--color-accent-content:var(--color-sky-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-sky-600)] dark:[--color-accent-content:var(--color-sky-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'blue' => '[--color-accent:var(--color-blue-500)] [--color-accent-content:var(--color-blue-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-blue-500)] dark:[--color-accent-content:var(--color-blue-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'indigo' => '[--color-accent:var(--color-indigo-500)] [--color-accent-content:var(--color-indigo-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-indigo-500)] dark:[--color-accent-content:var(--color-indigo-300)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'violet' => '[--color-accent:var(--color-violet-500)] [--color-accent-content:var(--color-violet-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-violet-500)] dark:[--color-accent-content:var(--color-violet-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'purple' => '[--color-accent:var(--color-purple-500)] [--color-accent-content:var(--color-purple-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-purple-500)] dark:[--color-accent-content:var(--color-purple-300)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'fuchsia' => '[--color-accent:var(--color-fuchsia-600)] [--color-accent-content:var(--color-fuchsia-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-fuchsia-600)] dark:[--color-accent-content:var(--color-fuchsia-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'pink' => '[--color-accent:var(--color-pink-600)] [--color-accent-content:var(--color-pink-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-pink-600)] dark:[--color-accent-content:var(--color-pink-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'rose' => '[--color-accent:var(--color-rose-500)] [--color-accent-content:var(--color-rose-500)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-rose-500)] dark:[--color-accent-content:var(--color-rose-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ })
+ ;
+@endphp
+
+class($classes) }}>
+ {{ $slot }}
+
\ No newline at end of file
diff --git a/resources/views/flux/accordion/content.blade.php b/resources/views/flux/accordion/content.blade.php
new file mode 100644
index 0000000..54e633b
--- /dev/null
+++ b/resources/views/flux/accordion/content.blade.php
@@ -0,0 +1,23 @@
+@aware([ 'transition', 'expanded' ])
+
+@props([
+ 'transition' => false,
+ 'expanded' => false,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('pt-2 text-sm text-zinc-500 dark:text-zinc-300')
+ ;
+@endphp
+
+
+
class($classes) }}>
+ {{ $slot }}
+
+
class($classes) }} @if ($disabled) disabled @endif data-flux-accordion-heading>
+ {{ $slot }}
+
+
+
diff --git a/resources/views/flux/accordion/icon.blade.php b/resources/views/flux/accordion/icon.blade.php
new file mode 100644
index 0000000..0856031
--- /dev/null
+++ b/resources/views/flux/accordion/icon.blade.php
@@ -0,0 +1,17 @@
+@aware([ 'disabled' ])
+
+@props([
+ 'pointing' => 'down',
+ 'disabled' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('text-zinc-300 dark:text-zinc-400')
+ ->add($disabled ? ''
+ : 'group-hover/accordion-heading:text-zinc-800 dark:group-hover/accordion-heading:text-white'
+ )
+ ;
+@endphp
+
+class('block') }} data-flux-accordion-heading>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/accordion/item.blade.php b/resources/views/flux/accordion/item.blade.php
new file mode 100644
index 0000000..e0fdfa1
--- /dev/null
+++ b/resources/views/flux/accordion/item.blade.php
@@ -0,0 +1,39 @@
+@aware([ 'transition' ])
+
+@props([
+ 'transition' => false,
+ 'disabled' => false,
+ 'expanded' => false,
+ 'heading' => null,
+])
+
+@php
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+ unset($attributes[$wireModel->directive]);
+
+ $wireModel->directive .= '.self';
+
+ $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+
+$classes = Flux::classes()
+ ->add('block pt-4 first:pt-0 pb-4 last:pb-0')
+ ->add('border-b last:border-b-0 border-zinc-800/10 dark:border-white/10')
+ ;
+@endphp
+
+class($classes) }}
+ x-data="{ open: @json($expanded) }"
+ x-model.self="open"
+ data-flux-accordion-item
+>
+
+ {{ $heading }}
+
+ {{ $slot }}
+
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/aside.blade.php b/resources/views/flux/aside.blade.php
new file mode 100644
index 0000000..5f73c2c
--- /dev/null
+++ b/resources/views/flux/aside.blade.php
@@ -0,0 +1,19 @@
+@props([
+ 'sticky' => null,
+])
+
+@php
+$classes = Flux::classes('[grid-area:aside]');
+
+if ($sticky) {
+ $attributes = $attributes->merge([
+ 'x-data' => '',
+ 'x-bind:style' => '{ position: \'sticky\', top: $el.offsetTop + \'px\', \'max-height\': \'calc(100dvh - \' + $el.offsetTop + \'px)\' }',
+ 'class' => 'max-h-[100vh] overflow-y-auto',
+ ]);
+}
+@endphp
+
+class($classes) }} data-flux-aside>
+ {{ $slot }}
+
diff --git a/resources/views/flux/autocomplete/index.blade.php b/resources/views/flux/autocomplete/index.blade.php
new file mode 100644
index 0000000..2de90b6
--- /dev/null
+++ b/resources/views/flux/autocomplete/index.blade.php
@@ -0,0 +1,7 @@
+only('filter')->merge(['filter' => true]) }}>
+
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/autocomplete/item.blade.php b/resources/views/flux/autocomplete/item.blade.php
new file mode 100644
index 0000000..2bdc9b6
--- /dev/null
+++ b/resources/views/flux/autocomplete/item.blade.php
@@ -0,0 +1,12 @@
+@php
+$classes = Flux::classes()
+ ->add('data-hidden:hidden flex items-center px-2 py-1.5 w-full focus:outline-hidden rounded-md')
+ ->add('text-start text-sm font-medium')
+ ->add('text-zinc-800 data-active:bg-zinc-100 dark:text-white dark:data-active:bg-zinc-600')
+ ->add('scroll-my-[.3125rem]') // This is here so that when a user scrolls to the top or bottom of the list, the padding is included...
+ ;
+@endphp
+
+class($classes) }} data-flux-autocomplete-item>
+ {{ $slot }}
+
diff --git a/resources/views/flux/autocomplete/items.blade.php b/resources/views/flux/autocomplete/items.blade.php
new file mode 100644
index 0000000..f02e84e
--- /dev/null
+++ b/resources/views/flux/autocomplete/items.blade.php
@@ -0,0 +1,16 @@
+@php
+$classes = Flux::classes()
+ ->add('[:where(&)]:max-h-[20rem]') // "[:where(&)]:" means it can be overriden without "!"...
+ ->add('p-[.3125rem] overflow-y-auto rounded-lg shadow-xs')
+ ->add('border border-zinc-200 dark:border-zinc-600')
+ ->add('bg-white dark:bg-zinc-700')
+ ->add('[&:not(:has(ui-empty[data-hidden]))]:hidden') // Hide this entire panel if there are no results...
+ ;
+@endphp
+
+class($classes) }} data-flux-autocomplete-items>
+ {{ $slot }}
+
+
+
diff --git a/resources/views/flux/avatar/group.blade.php b/resources/views/flux/avatar/group.blade.php
new file mode 100644
index 0000000..aff9203
--- /dev/null
+++ b/resources/views/flux/avatar/group.blade.php
@@ -0,0 +1,12 @@
+
+@php
+$classes = Flux::classes()
+ ->add('flex isolate')
+ ->add('*:not-first:-ml-2 **:ring-white **:dark:ring-zinc-900')
+ ->add('**:data-[slot=avatar]:ring-4 **:data-[slot=avatar]:data-[size=sm]:ring-2 **:data-[slot=avatar]:data-[size=xs]:ring-2')
+ ;
+@endphp
+
+class($classes) }}>
+ {{ $slot }}
+
diff --git a/resources/views/flux/avatar/index.blade.php b/resources/views/flux/avatar/index.blade.php
new file mode 100644
index 0000000..8981899
--- /dev/null
+++ b/resources/views/flux/avatar/index.blade.php
@@ -0,0 +1,187 @@
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'solid',
+ 'initials' => null,
+ 'tooltip' => null,
+ 'circle' => null,
+ 'color' => null,
+ 'badge' => null,
+ 'name' => null,
+ 'icon' => null,
+ 'size' => 'md',
+ 'src' => null,
+ 'href' => null,
+ 'alt' => null,
+ 'as' => 'div',
+])
+
+@php
+if ($name && ! $initials) {
+ $parts = explode(' ', trim($name));
+
+ if ($attributes->pluck('initials:single')) {
+ $initials = strtoupper(mb_substr($parts[0], 0, 1));
+ } else {
+ // Remove empty strings from the array...
+ $parts = collect($parts)->filter()->values()->all();
+
+ if (count($parts) > 1) {
+ $initials = strtoupper(mb_substr($parts[0], 0, 1) . mb_substr($parts[1], 0, 1));
+ } else if (count($parts) === 1) {
+ $initials = strtoupper(mb_substr($parts[0], 0, 1)) . strtolower(mb_substr($parts[0], 1, 1));
+ }
+ }
+}
+
+if ($name && $tooltip === true) {
+ $tooltip = $name;
+}
+
+$hasTextContent = $icon ?? $initials ?? $slot->isNotEmpty();
+
+// If there's no text content, we'll fallback to using the user icon otherwise there will be an empty white square...
+if (! $hasTextContent) {
+ $icon = 'user';
+ $hasTextContent = true;
+}
+
+// Be careful not to change the order of these colors.
+// They're used in the hash function below and changing them would change actual user avatar colors that they might have grown to identify with.
+$colors = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'];
+
+if ($hasTextContent && $color === 'auto') {
+ $colorSeed = $attributes->pluck('color:seed') ?? $name ?? $icon ?? $initials ?? $slot;
+ $hash = crc32((string) $colorSeed);
+ $color = $colors[$hash % count($colors)];
+}
+
+$classes = Flux::classes()
+ ->add(match($size) {
+ 'xl' => '[:where(&)]:size-16 [:where(&)]:text-base',
+ 'lg' => '[:where(&)]:size-12 [:where(&)]:text-base',
+ default => '[:where(&)]:size-10 [:where(&)]:text-sm',
+ 'sm' => '[:where(&)]:size-8 [:where(&)]:text-sm',
+ 'xs' => '[:where(&)]:size-6 [:where(&)]:text-xs',
+ })
+ ->add($circle ? '[--avatar-radius:calc(infinity*1px)]' : match($size) {
+ 'xl' => '[--avatar-radius:var(--radius-xl)]',
+ 'lg' => '[--avatar-radius:var(--radius-lg)]',
+ default => '[--avatar-radius:var(--radius-lg)]',
+ 'sm' => '[--avatar-radius:var(--radius-md)]',
+ 'xs' => '[--avatar-radius:var(--radius-sm)]',
+ })
+ ->add('relative flex-none isolate flex items-center justify-center')
+ ->add('[:where(&)]:font-medium')
+ ->add('rounded-[var(--avatar-radius)]')
+ ->add($hasTextContent ? '[:where(&)]:bg-zinc-200 [:where(&)]:dark:bg-zinc-600 [:where(&)]:text-zinc-800 [:where(&)]:dark:text-white' : '')
+ ->add(match($color) {
+ 'red' => 'bg-red-200 text-red-800',
+ 'orange' => 'bg-orange-200 text-orange-800',
+ 'amber' => 'bg-amber-200 text-amber-800',
+ 'yellow' => 'bg-yellow-200 text-yellow-800',
+ 'lime' => 'bg-lime-200 text-lime-800',
+ 'green' => 'bg-green-200 text-green-800',
+ 'emerald' => 'bg-emerald-200 text-emerald-800',
+ 'teal' => 'bg-teal-200 text-teal-800',
+ 'cyan' => 'bg-cyan-200 text-cyan-800',
+ 'sky' => 'bg-sky-200 text-sky-800',
+ 'blue' => 'bg-blue-200 text-blue-800',
+ 'indigo' => 'bg-indigo-200 text-indigo-800',
+ 'violet' => 'bg-violet-200 text-violet-800',
+ 'purple' => 'bg-purple-200 text-purple-800',
+ 'fuchsia' => 'bg-fuchsia-200 text-fuchsia-800',
+ 'pink' => 'bg-pink-200 text-pink-800',
+ 'rose' => 'bg-rose-200 text-rose-800',
+ default => '',
+ })
+ ->add(true ? [
+ 'after:absolute after:inset-0 after:inset-ring-[1px] after:inset-ring-black/7 dark:after:inset-ring-white/10',
+ $circle ? 'after:rounded-full' : match($size) {
+ 'xl' => 'after:rounded-xl',
+ 'lg' => 'after:rounded-lg',
+ default => 'after:rounded-lg',
+ 'sm' => 'after:rounded-md',
+ 'xs' => 'after:rounded-sm',
+ },
+ ] : []);
+
+$iconClasses = Flux::classes()
+ ->add('opacity-75')
+ ->add(match($size) {
+ 'lg' => 'size-8',
+ default => 'size-6',
+ 'sm' => 'size-5',
+ 'xs' => 'size-4',
+ });
+
+$badgeColor = $attributes->pluck('badge:color') ?: (is_object($badge) ? $badge?->attributes?->pluck('color') : null);
+$badgeCircle = $attributes->pluck('badge:circle') ?: (is_object($badge) ? $badge?->attributes?->pluck('circle') : null);
+$badgePosition = $attributes->pluck('badge:position') ?: (is_object($badge) ? $badge?->attributes?->pluck('position') : null);
+$badgeVariant = $attributes->pluck('badge:variant') ?: (is_object($badge) ? $badge?->attributes?->pluck('variant') : null);
+
+$badgeClasses = Flux::classes()
+ ->add('absolute ring-[2px] ring-white dark:ring-zinc-900 z-10')
+ ->add(match($size) {
+ default => 'h-3 min-w-3',
+ 'sm' => 'h-2 min-w-2',
+ 'xs' => 'h-2 min-w-2',
+ })
+ ->add('flex items-center justify-center tabular-nums overflow-hidden')
+ ->add('text-[.625rem] text-zinc-800 dark:text-white font-medium')
+ ->add($badgeCircle ? 'rounded-full' : 'rounded-[3px]')
+ ->add($badgeVariant === 'outline' ? [
+ 'after:absolute after:inset-[3px] after:bg-white dark:after:bg-zinc-900',
+ $badgeCircle ? 'after:rounded-full' : 'after:rounded-[1px]',
+ ] : [])
+ ->add(match($badgePosition) {
+ 'top left' => 'top-0 left-0',
+ 'top right' => 'top-0 right-0',
+ 'bottom left' => 'bottom-0 left-0',
+ 'bottom right' => 'bottom-0 right-0',
+ default => 'bottom-0 right-0',
+ })
+ ->add(match($badgeColor) {
+ 'red' => 'bg-red-500 dark:bg-red-400',
+ 'orange' => 'bg-orange-500 dark:bg-orange-400',
+ 'amber' => 'bg-amber-500 dark:bg-amber-400',
+ 'yellow' => 'bg-yellow-500 dark:bg-yellow-400',
+ 'lime' => 'bg-lime-500 dark:bg-lime-400',
+ 'green' => 'bg-green-500 dark:bg-green-400',
+ 'emerald' => 'bg-emerald-500 dark:bg-emerald-400',
+ 'teal' => 'bg-teal-500 dark:bg-teal-400',
+ 'cyan' => 'bg-cyan-500 dark:bg-cyan-400',
+ 'sky' => 'bg-sky-500 dark:bg-sky-400',
+ 'blue' => 'bg-blue-500 dark:bg-blue-400',
+ 'indigo' => 'bg-indigo-500 dark:bg-indigo-400',
+ 'violet' => 'bg-violet-500 dark:bg-violet-400',
+ 'purple' => 'bg-purple-500 dark:bg-purple-400',
+ 'fuchsia' => 'bg-fuchsia-500 dark:bg-fuchsia-400',
+ 'pink' => 'bg-pink-500 dark:bg-pink-400',
+ 'rose' => 'bg-rose-500 dark:bg-rose-400',
+ 'zinc' => 'bg-zinc-400 dark:bg-zinc-300',
+ 'gray' => 'bg-zinc-400 dark:bg-zinc-300',
+ default => 'bg-white dark:bg-zinc-900',
+ })
+ ;
+
+$label = $alt ?? $name;
+@endphp
+
+
+
+
+ {{ $initials ?? $slot }}
+
+
+
+ attributes->class($badgeClasses) }} aria-hidden="true">{{ $badge }}
+
+ {{ is_string($badge) ? $badge : '' }}
+
+
+
diff --git a/resources/views/flux/badge/close.blade.php b/resources/views/flux/badge/close.blade.php
new file mode 100644
index 0000000..4817c15
--- /dev/null
+++ b/resources/views/flux/badge/close.blade.php
@@ -0,0 +1,23 @@
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'micro',
+ 'icon' => 'x-mark',
+])
+
+@php
+// When using the outline icon variant, we need to size it down to match the default icon sizes...
+$iconClasses = Flux::classes()->add($iconVariant === 'outline' ? 'size-4' : '');
+
+$classes = Flux::classes()
+ ->add('p-1 -my-1 -me-1 opacity-50 hover:opacity-100')
+ ;
+@endphp
+
+class($classes) }} data-flux-badge-close>
+
+
diff --git a/resources/views/flux/badge/index.blade.php b/resources/views/flux/badge/index.blade.php
new file mode 100644
index 0000000..26fbb59
--- /dev/null
+++ b/resources/views/flux/badge/index.blade.php
@@ -0,0 +1,96 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'micro',
+ 'iconTrailing' => null,
+ 'variant' => null,
+ 'color' => null,
+ 'inset' => null,
+ 'size' => null,
+ 'icon' => null,
+])
+
+@php
+$insetClasses = Flux::applyInset($inset, top: '-mt-1', right: '-me-2', bottom: '-mb-1', left: '-ms-2');
+
+// When using the outline icon variant, we need to size it down to match the default icon sizes...
+$iconClasses = Flux::classes()->add($iconVariant === 'outline' ? 'size-4' : '');
+
+$classes = Flux::classes()
+ ->add('inline-flex items-center font-medium whitespace-nowrap')
+ ->add($insetClasses)
+ ->add('[print-color-adjust:exact]')
+ ->add(match ($size) {
+ 'lg' => 'text-sm py-1.5 **:data-flux-badge-icon:me-2',
+ default => 'text-sm py-1 **:data-flux-badge-icon:me-1.5',
+ 'sm' => 'text-xs py-1 **:data-flux-badge-icon:size-3 **:data-flux-badge-icon:me-1',
+ })
+ ->add(match ($variant) {
+ 'pill' => 'rounded-full px-3',
+ default => 'rounded-md px-2',
+ })
+ /**
+ * We can't compile classes for each color because of variants color to color and Tailwind's JIT compiler.
+ * We instead need to write out each one by hand. Sorry...
+ */
+ ->add($variant === 'solid' ? match ($color) {
+ default => 'text-white dark:text-white bg-zinc-600 dark:bg-zinc-600 [&:is(button)]:hover:bg-zinc-700 dark:[button]:hover:bg-zinc-500',
+ 'red' => 'text-white dark:text-white bg-red-500 dark:bg-red-600 [&:is(button)]:hover:bg-red-600 dark:[button]:hover:bg-red-500',
+ 'orange' => 'text-white dark:text-white bg-orange-500 dark:bg-orange-600 [&:is(button)]:hover:bg-orange-600 dark:[button]:hover:bg-orange-500',
+ 'amber' => 'text-white dark:text-zinc-950 bg-amber-500 dark:bg-amber-500 [&:is(button)]:hover:bg-amber-600 dark:[button]:hover:bg-amber-400',
+ 'yellow' => 'text-white dark:text-zinc-950 bg-yellow-500 dark:bg-yellow-400 [&:is(button)]:hover:bg-yellow-600 dark:[button]:hover:bg-yellow-300',
+ 'lime' => 'text-white dark:text-white bg-lime-500 dark:bg-lime-600 [&:is(button)]:hover:bg-lime-600 dark:[button]:hover:bg-lime-500',
+ 'green' => 'text-white dark:text-white bg-green-500 dark:bg-green-600 [&:is(button)]:hover:bg-green-600 dark:[button]:hover:bg-green-500',
+ 'emerald' => 'text-white dark:text-white bg-emerald-500 dark:bg-emerald-600 [&:is(button)]:hover:bg-emerald-600 dark:[button]:hover:bg-emerald-500',
+ 'teal' => 'text-white dark:text-white bg-teal-500 dark:bg-teal-600 [&:is(button)]:hover:bg-teal-600 dark:[button]:hover:bg-teal-500',
+ 'cyan' => 'text-white dark:text-white bg-cyan-500 dark:bg-cyan-600 [&:is(button)]:hover:bg-cyan-600 dark:[button]:hover:bg-cyan-500',
+ 'sky' => 'text-white dark:text-white bg-sky-500 dark:bg-sky-600 [&:is(button)]:hover:bg-sky-600 dark:[button]:hover:bg-sky-500',
+ 'blue' => 'text-white dark:text-white bg-blue-500 dark:bg-blue-600 [&:is(button)]:hover:bg-blue-600 dark:[button]:hover:bg-blue-500',
+ 'indigo' => 'text-white dark:text-white bg-indigo-500 dark:bg-indigo-600 [&:is(button)]:hover:bg-indigo-600 dark:[button]:hover:bg-indigo-500',
+ 'violet' => 'text-white dark:text-white bg-violet-500 dark:bg-violet-600 [&:is(button)]:hover:bg-violet-600 dark:[button]:hover:bg-violet-500',
+ 'purple' => 'text-white dark:text-white bg-purple-500 dark:bg-purple-600 [&:is(button)]:hover:bg-purple-600 dark:[button]:hover:bg-purple-500',
+ 'fuchsia' => 'text-white dark:text-white bg-fuchsia-500 dark:bg-fuchsia-600 [&:is(button)]:hover:bg-fuchsia-600 dark:[button]:hover:bg-fuchsia-500',
+ 'pink' => 'text-white dark:text-white bg-pink-500 dark:bg-pink-600 [&:is(button)]:hover:bg-pink-600 dark:[button]:hover:bg-pink-500',
+ 'rose' => 'text-white dark:text-white bg-rose-500 dark:bg-rose-600 [&:is(button)]:hover:bg-rose-600 dark:[button]:hover:bg-rose-500',
+ } : match ($color) {
+ default => 'text-zinc-700 [&_button]:text-zinc-700! dark:text-zinc-200 dark:[&_button]:text-zinc-200! bg-zinc-400/15 dark:bg-zinc-400/40 [&:is(button)]:hover:bg-zinc-400/25 dark:[button]:hover:bg-zinc-400/50',
+ 'red' => 'text-red-700 [&_button]:text-red-700! dark:text-red-200 dark:[&_button]:text-red-200! bg-red-400/20 dark:bg-red-400/40 [&:is(button)]:hover:bg-red-400/30 dark:[button]:hover:bg-red-400/50',
+ 'orange' => 'text-orange-700 [&_button]:text-orange-700! dark:text-orange-200 dark:[&_button]:text-orange-200! bg-orange-400/20 dark:bg-orange-400/40 [&:is(button)]:hover:bg-orange-400/30 dark:[button]:hover:bg-orange-400/50',
+ 'amber' => 'text-amber-700 [&_button]:text-amber-700! dark:text-amber-200 dark:[&_button]:text-amber-200! bg-amber-400/25 dark:bg-amber-400/40 [&:is(button)]:hover:bg-amber-400/40 dark:[button]:hover:bg-amber-400/50',
+ 'yellow' => 'text-yellow-800 [&_button]:text-yellow-800! dark:text-yellow-200 dark:[&_button]:text-yellow-200! bg-yellow-400/25 dark:bg-yellow-400/40 [&:is(button)]:hover:bg-yellow-400/40 dark:[button]:hover:bg-yellow-400/50',
+ 'lime' => 'text-lime-800 [&_button]:text-lime-800! dark:text-lime-200 dark:[&_button]:text-lime-200! bg-lime-400/25 dark:bg-lime-400/40 [&:is(button)]:hover:bg-lime-400/35 dark:[button]:hover:bg-lime-400/50',
+ 'green' => 'text-green-800 [&_button]:text-green-800! dark:text-green-200 dark:[&_button]:text-green-200! bg-green-400/20 dark:bg-green-400/40 [&:is(button)]:hover:bg-green-400/30 dark:[button]:hover:bg-green-400/50',
+ 'emerald' => 'text-emerald-800 [&_button]:text-emerald-800! dark:text-emerald-200 dark:[&_button]:text-emerald-200! bg-emerald-400/20 dark:bg-emerald-400/40 [&:is(button)]:hover:bg-emerald-400/30 dark:[button]:hover:bg-emerald-400/50',
+ 'teal' => 'text-teal-800 [&_button]:text-teal-800! dark:text-teal-200 dark:[&_button]:text-teal-200! bg-teal-400/20 dark:bg-teal-400/40 [&:is(button)]:hover:bg-teal-400/30 dark:[button]:hover:bg-teal-400/50',
+ 'cyan' => 'text-cyan-800 [&_button]:text-cyan-800! dark:text-cyan-200 dark:[&_button]:text-cyan-200! bg-cyan-400/20 dark:bg-cyan-400/40 [&:is(button)]:hover:bg-cyan-400/30 dark:[button]:hover:bg-cyan-400/50',
+ 'sky' => 'text-sky-800 [&_button]:text-sky-800! dark:text-sky-200 dark:[&_button]:text-sky-200! bg-sky-400/20 dark:bg-sky-400/40 [&:is(button)]:hover:bg-sky-400/30 dark:[button]:hover:bg-sky-400/50',
+ 'blue' => 'text-blue-800 [&_button]:text-blue-800! dark:text-blue-200 dark:[&_button]:text-blue-200! bg-blue-400/20 dark:bg-blue-400/40 [&:is(button)]:hover:bg-blue-400/30 dark:[button]:hover:bg-blue-400/50',
+ 'indigo' => 'text-indigo-700 [&_button]:text-indigo-700! dark:text-indigo-200 dark:[&_button]:text-indigo-200! bg-indigo-400/20 dark:bg-indigo-400/40 [&:is(button)]:hover:bg-indigo-400/30 dark:[button]:hover:bg-indigo-400/50',
+ 'violet' => 'text-violet-700 [&_button]:text-violet-700! dark:text-violet-200 dark:[&_button]:text-violet-200! bg-violet-400/20 dark:bg-violet-400/40 [&:is(button)]:hover:bg-violet-400/30 dark:[button]:hover:bg-violet-400/50',
+ 'purple' => 'text-purple-700 [&_button]:text-purple-700! dark:text-purple-200 dark:[&_button]:text-purple-200! bg-purple-400/20 dark:bg-purple-400/40 [&:is(button)]:hover:bg-purple-400/30 dark:[button]:hover:bg-purple-400/50',
+ 'fuchsia' => 'text-fuchsia-700 [&_button]:text-fuchsia-700! dark:text-fuchsia-200 dark:[&_button]:text-fuchsia-200! bg-fuchsia-400/20 dark:bg-fuchsia-400/40 [&:is(button)]:hover:bg-fuchsia-400/30 dark:[button]:hover:bg-fuchsia-400/50',
+ 'pink' => 'text-pink-700 [&_button]:text-pink-700! dark:text-pink-200 dark:[&_button]:text-pink-200! bg-pink-400/20 dark:bg-pink-400/40 [&:is(button)]:hover:bg-pink-400/30 dark:[button]:hover:bg-pink-400/50',
+ 'rose' => 'text-rose-700 [&_button]:text-rose-700! dark:text-rose-200 dark:[&_button]:text-rose-200! bg-rose-400/20 dark:bg-rose-400/40 [&:is(button)]:hover:bg-rose-400/30 dark:[button]:hover:bg-rose-400/50',
+ });
+@endphp
+
+
+
+
+
+
+
+
diff --git a/resources/views/flux/brand.blade.php b/resources/views/flux/brand.blade.php
new file mode 100644
index 0000000..f23c9ba
--- /dev/null
+++ b/resources/views/flux/brand.blade.php
@@ -0,0 +1,52 @@
+@props([
+ 'name' => null,
+ 'logo' => null,
+ 'alt' => null,
+ 'href' => '/',
+])
+
+@php
+$classes = Flux::classes()
+ ->add('h-10 flex items-center me-4')
+ ;
+
+$textClasses = Flux::classes()
+ ->add('text-sm font-medium truncate [:where(&)]:text-zinc-800 dark:[:where(&)]:text-zinc-100')
+ ;
+@endphp
+
+
+ class([ $classes, 'gap-2' ]) }} data-flux-brand>
+
+ attributes->class('flex items-center justify-center [:where(&)]:h-6 [:where(&)]:min-w-6 [:where(&)]:rounded-sm overflow-hidden shrink-0') }}>
+ {{ $logo }}
+
+
+
+
+
+
+ {{ $slot }}
+
+
{{ $name }}
+
+
+ class($classes) }} data-flux-brand>
+
+ attributes->class('flex items-center justify-center [:where(&)]:h-6 [:where(&)]:min-w-6 [:where(&)]:rounded-sm overflow-hidden shrink-0') }}>
+ {{ $logo }}
+
+
+
+
+
+
+ {{ $slot }}
+
+
+
diff --git a/resources/views/flux/breadcrumbs/index.blade.php b/resources/views/flux/breadcrumbs/index.blade.php
new file mode 100644
index 0000000..7f4af2e
--- /dev/null
+++ b/resources/views/flux/breadcrumbs/index.blade.php
@@ -0,0 +1,4 @@
+
+class('flex') }} data-flux-breadcrumbs>
+ {{ $slot }}
+
diff --git a/resources/views/flux/breadcrumbs/item.blade.php b/resources/views/flux/breadcrumbs/item.blade.php
new file mode 100644
index 0000000..94adecc
--- /dev/null
+++ b/resources/views/flux/breadcrumbs/item.blade.php
@@ -0,0 +1,67 @@
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'separator' => null,
+ 'iconVariant' => 'mini',
+ 'icon' => null,
+ 'href' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('flex items-center')
+ ->add('text-sm font-medium')
+ ->add('group/breadcrumb')
+ ;
+
+$linkClasses = Flux::classes()
+ ->add('text-zinc-800 dark:text-white')
+ ->add('hover:underline decoration-zinc-800/20 underline-offset-4');
+
+$staticTextClasses = Flux::classes()
+ ->add('text-gray-500 dark:text-white/80')
+ ;
+
+$separatorClasses = Flux::classes()
+ ->add('mx-1 text-zinc-300 dark:text-white/80')
+ ->add('group-last/breadcrumb:hidden')
+ ;
+
+$iconClasses = Flux::classes()
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : '')
+ ;
+
+[ $styleAttributes, $attributes ] = Flux::splitAttributes($attributes);
+@endphp
+
+
diff --git a/resources/views/flux/button/group.blade.php b/resources/views/flux/button/group.blade.php
new file mode 100644
index 0000000..67aecc4
--- /dev/null
+++ b/resources/views/flux/button/group.blade.php
@@ -0,0 +1,45 @@
+@php
+$classes = Flux::classes()
+ ->add('flex group/button')
+ ->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
+
+class($classes) }} data-flux-button-group>
+ {{ $slot }}
+
diff --git a/resources/views/flux/button/index.blade.php b/resources/views/flux/button/index.blade.php
new file mode 100644
index 0000000..7c676cc
--- /dev/null
+++ b/resources/views/flux/button/index.blade.php
@@ -0,0 +1,198 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconLeading = $iconLeading ??= $attributes->pluck('icon:leading'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconTrailing' => null,
+ 'variant' => 'outline',
+ 'iconVariant' => null,
+ 'iconLeading' => null,
+ 'type' => 'button',
+ 'loading' => null,
+ 'size' => 'base',
+ 'square' => null,
+ 'color' => null,
+ 'inset' => null,
+ 'icon' => null,
+ 'kbd' => null,
+])
+
+@php
+$iconLeading = $icon ??= $iconLeading;
+
+// Button should be a square if it has no text contents...
+$square ??= $slot->isEmpty();
+
+// Size-up icons in square/icon-only buttons... (xs buttons just get micro size/style...)
+$iconVariant ??= ($size === 'xs')
+ ? ($square ? 'micro' : 'micro')
+ : ($square ? 'mini' : 'micro');
+
+$iconTrailingVariant ??= $attributes->pluck('icon-trailing:variant', $iconVariant);
+
+// When using the outline icon variant, we need to size it down to match the default icon sizes...
+$iconClasses = Flux::classes()
+ ->add($iconVariant === 'outline' ? ($square && $size !== 'xs' ? 'size-5' : 'size-4') : '')
+ ->add($attributes->pluck('icon:class'))
+ ;
+
+$iconTrailingClasses = Flux::classes()
+ ->add($iconTrailingVariant === 'outline' ? ($square && $size !== 'xs' ? 'size-5' : 'size-4') : '')
+ ->add($attributes->pluck('icon-trailing:class'))
+ ;
+
+$isTypeSubmitAndNotDisabledOnRender = $type === 'submit' && ! $attributes->has('disabled');
+
+$isJsMethod = str_starts_with($attributes->whereStartsWith('wire:click')->first() ?? '', '$js.');
+
+$loading ??= $loading ?? ($isTypeSubmitAndNotDisabledOnRender || $attributes->whereStartsWith('wire:click')->isNotEmpty() && ! $isJsMethod);
+
+if ($loading && $type !== 'submit' && ! $isJsMethod) {
+ $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+
+ // We need to add `wire:target` here because without it the loading indicator won't be scoped
+ // by method params, causing multiple buttons with the same method but different params to
+ // trigger each other's loading indicators...
+ if (! $attributes->has('wire:target') && $target = $attributes->whereStartsWith('wire:click')->first()) {
+ $attributes = $attributes->merge(['wire:target' => $target], escape: false);
+ }
+}
+
+$classes = Flux::classes()
+ ->add('relative items-center font-medium justify-center gap-2 whitespace-nowrap')
+ ->add('disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none')
+ ->add(match ($size) { // Size...
+ 'base' => 'h-10 text-sm rounded-lg' . ' ' . (
+ $square
+ ? 'w-10'
+ // If we have an icon, we want to reduce the padding on the side that has the icon...
+ : ($iconLeading && $iconLeading !== '' ? 'ps-3' : 'ps-4') . ' ' . ($iconTrailing && $iconTrailing !== '' ? 'pe-3' : 'pe-4')
+ ),
+ 'sm' => 'h-8 text-sm rounded-md' . ' ' . ($square ? 'w-8' : 'px-3'),
+ 'xs' => 'h-6 text-xs rounded-md' . ' ' . ($square ? 'w-6' : 'px-2'),
+ })
+ ->add('inline-flex') // Buttons are inline by default but links are blocks, so inline-flex is needed here to ensure link-buttons are displayed the same as buttons...
+ ->add($inset ? match ($size) { // Inset...
+ 'base' => $square
+ ? Flux::applyInset($inset, top: '-mt-2.5', right: '-me-2.5', bottom: '-mb-2.5', left: '-ms-2.5')
+ : Flux::applyInset($inset, top: '-mt-2.5', right: '-me-4', bottom: '-mb-3', left: '-ms-4'),
+ 'sm' => $square
+ ? Flux::applyInset($inset, top: '-mt-1.5', right: '-me-1.5', bottom: '-mb-1.5', left: '-ms-1.5')
+ : Flux::applyInset($inset, top: '-mt-1.5', right: '-me-3', bottom: '-mb-1.5', left: '-ms-3'),
+ 'xs' => $square
+ ? Flux::applyInset($inset, top: '-mt-1', right: '-me-1', bottom: '-mb-1', left: '-ms-1')
+ : Flux::applyInset($inset, top: '-mt-1', right: '-me-2', bottom: '-mb-1', left: '-ms-2'),
+ } : '')
+ ->add(match ($variant) { // Background color...
+ 'primary' => 'bg-[var(--color-accent)] hover:bg-[color-mix(in_oklab,_var(--color-accent),_transparent_10%)]',
+ 'filled' => 'bg-zinc-800/5 hover:bg-zinc-800/10 dark:bg-white/10 dark:hover:bg-white/20',
+ 'outline' => 'bg-white hover:bg-zinc-50 dark:bg-zinc-700 dark:hover:bg-zinc-600/75',
+ 'danger' => 'bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-500',
+ 'ghost' => 'bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15',
+ 'subtle' => 'bg-transparent hover:bg-zinc-800/5 dark:hover:bg-white/15',
+ })
+ ->add(match ($variant) { // Text color...
+ 'primary' => 'text-[var(--color-accent-foreground)]',
+ 'filled' => 'text-zinc-800 dark:text-white',
+ 'outline' => 'text-zinc-800 dark:text-white',
+ 'danger' => 'text-white',
+ 'ghost' => 'text-zinc-800 dark:text-white',
+ 'subtle' => 'text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-white',
+ })
+ ->add(match ($variant) { // Border color...
+ 'primary' => 'border border-black/10 dark:border-0',
+ 'outline' => 'border border-zinc-200 hover:border-zinc-200 border-b-zinc-300/80 dark:border-zinc-600 dark:hover:border-zinc-600',
+ default => '',
+ })
+ ->add(match ($variant) { // Shadows...
+ 'primary' => 'shadow-[inset_0px_1px_--theme(--color-white/.2)]',
+ 'danger' => 'shadow-[inset_0px_1px_var(--color-red-500),inset_0px_2px_--theme(--color-white/.15)] dark:shadow-none',
+ 'outline' => match ($size) {
+ 'base' => 'shadow-xs',
+ 'sm' => 'shadow-xs',
+ 'xs' => 'shadow-none',
+ },
+ default => '',
+ })
+ ->add(match ($variant) { // Grouped border treatments...
+ 'ghost' => '',
+ 'subtle' => '',
+ 'outline' => '[[data-flux-button-group]_&]:border-s-0 [:is([data-flux-button-group]>&:first-child,_[data-flux-button-group]_:first-child>&)]:border-s-[1px]',
+ 'filled' => '[[data-flux-button-group]_&]:border-e [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-e-0 [[data-flux-button-group]_&]:border-zinc-200/80 dark:[[data-flux-button-group]_&]:border-zinc-900/50',
+ 'danger' => '[[data-flux-button-group]_&]:border-e [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-e-0 [[data-flux-button-group]_&]:border-red-600 dark:[[data-flux-button-group]_&]:border-red-900/25',
+ 'primary' => '[[data-flux-button-group]_&]:border-e-0 [:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-e-[1px] dark:[:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-e-0 dark:[:is([data-flux-button-group]>&:last-child,_[data-flux-button-group]_:last-child>&)]:border-s-[1px] [:is([data-flux-button-group]>&:not(:first-child),_[data-flux-button-group]_:not(:first-child)>&)]:border-s-[color-mix(in_srgb,var(--color-accent-foreground),transparent_85%)]',
+ })
+ ->add($loading ? [ // Loading states...
+ '*:transition-opacity',
+ $type === 'submit' ? '[&[disabled]>:not([data-flux-loading-indicator])]:opacity-0' : '[&[data-flux-loading]>:not([data-flux-loading-indicator])]:opacity-0',
+ $type === 'submit' ? '[&[disabled]>[data-flux-loading-indicator]]:opacity-100' : '[&[data-flux-loading]>[data-flux-loading-indicator]]:opacity-100',
+ $type === 'submit' ? '[&[disabled]]:pointer-events-none' : 'data-flux-loading:pointer-events-none',
+ ] : [])
+ ->add($variant === 'primary' ? match ($color) {
+ 'slate' => '[--color-accent:var(--color-slate-800)] [--color-accent-content:var(--color-slate-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-slate-800)]',
+ 'gray' => '[--color-accent:var(--color-gray-800)] [--color-accent-content:var(--color-gray-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-gray-800)]',
+ 'zinc' => '[--color-accent:var(--color-zinc-800)] [--color-accent-content:var(--color-zinc-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-zinc-800)]',
+ 'neutral' => '[--color-accent:var(--color-neutral-800)] [--color-accent-content:var(--color-neutral-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-neutral-800)]',
+ 'stone' => '[--color-accent:var(--color-stone-800)] [--color-accent-content:var(--color-stone-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-stone-800)]',
+ 'red' => '[--color-accent:var(--color-red-500)] [--color-accent-content:var(--color-red-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-red-500)] dark:[--color-accent-content:var(--color-red-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'orange' => '[--color-accent:var(--color-orange-500)] [--color-accent-content:var(--color-orange-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-orange-400)] dark:[--color-accent-content:var(--color-orange-400)] dark:[--color-accent-foreground:var(--color-orange-950)]',
+ 'amber' => '[--color-accent:var(--color-amber-400)] [--color-accent-content:var(--color-amber-600)] [--color-accent-foreground:var(--color-amber-950)] dark:[--color-accent:var(--color-amber-400)] dark:[--color-accent-content:var(--color-amber-400)] dark:[--color-accent-foreground:var(--color-amber-950)]',
+ 'yellow' => '[--color-accent:var(--color-yellow-400)] [--color-accent-content:var(--color-yellow-600)] [--color-accent-foreground:var(--color-yellow-950)] dark:[--color-accent:var(--color-yellow-400)] dark:[--color-accent-content:var(--color-yellow-400)] dark:[--color-accent-foreground:var(--color-yellow-950)]',
+ 'lime' => '[--color-accent:var(--color-lime-400)] [--color-accent-content:var(--color-lime-600)] [--color-accent-foreground:var(--color-lime-900)] dark:[--color-accent:var(--color-lime-400)] dark:[--color-accent-content:var(--color-lime-400)] dark:[--color-accent-foreground:var(--color-lime-950)]',
+ 'green' => '[--color-accent:var(--color-green-600)] [--color-accent-content:var(--color-green-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-green-600)] dark:[--color-accent-content:var(--color-green-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'emerald' => '[--color-accent:var(--color-emerald-600)] [--color-accent-content:var(--color-emerald-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-emerald-600)] dark:[--color-accent-content:var(--color-emerald-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'teal' => '[--color-accent:var(--color-teal-600)] [--color-accent-content:var(--color-teal-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-teal-600)] dark:[--color-accent-content:var(--color-teal-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'cyan' => '[--color-accent:var(--color-cyan-600)] [--color-accent-content:var(--color-cyan-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-cyan-600)] dark:[--color-accent-content:var(--color-cyan-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'sky' => '[--color-accent:var(--color-sky-600)] [--color-accent-content:var(--color-sky-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-sky-600)] dark:[--color-accent-content:var(--color-sky-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'blue' => '[--color-accent:var(--color-blue-500)] [--color-accent-content:var(--color-blue-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-blue-500)] dark:[--color-accent-content:var(--color-blue-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'indigo' => '[--color-accent:var(--color-indigo-500)] [--color-accent-content:var(--color-indigo-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-indigo-500)] dark:[--color-accent-content:var(--color-indigo-300)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'violet' => '[--color-accent:var(--color-violet-500)] [--color-accent-content:var(--color-violet-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-violet-500)] dark:[--color-accent-content:var(--color-violet-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'purple' => '[--color-accent:var(--color-purple-500)] [--color-accent-content:var(--color-purple-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-purple-500)] dark:[--color-accent-content:var(--color-purple-300)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'fuchsia' => '[--color-accent:var(--color-fuchsia-600)] [--color-accent-content:var(--color-fuchsia-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-fuchsia-600)] dark:[--color-accent-content:var(--color-fuchsia-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'pink' => '[--color-accent:var(--color-pink-600)] [--color-accent-content:var(--color-pink-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-pink-600)] dark:[--color-accent-content:var(--color-pink-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ 'rose' => '[--color-accent:var(--color-rose-500)] [--color-accent-content:var(--color-rose-500)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-rose-500)] dark:[--color-accent-content:var(--color-rose-400)] dark:[--color-accent-foreground:var(--color-white)]',
+ default => '',
+ } : '')
+ ;
+
+ // Exempt subtle and ghost buttons from receiving border roundness overrides from button.group...
+ $attributes = $attributes->merge([
+ 'data-flux-group-target' => ! in_array($variant, ['subtle', 'ghost']),
+ ]);
+@endphp
+
+
+
+
+
+
+
+
+
+ {{ $slot }}
+
+ {{ $slot }}
+
+
+
+ {{ $kbd }}
+
+
+
+ {{-- Adding the extra margin class inline on the icon component below was causing a double up, so it needs to be added here first... --}}
+ add($square ? '' : '-ms-1'); ?>
+
+
diff --git a/resources/views/flux/calendar/index.blade.php b/resources/views/flux/calendar/index.blade.php
new file mode 100644
index 0000000..e7d9a1d
--- /dev/null
+++ b/resources/views/flux/calendar/index.blade.php
@@ -0,0 +1,222 @@
+@props([
+ 'selectableHeader' => null,
+ 'weekNumbers' => null,
+ 'unavailable' => null,
+ 'withInputs' => null,
+ 'navigation' => null,
+ 'withToday' => null,
+ 'months' => null,
+ 'value' => null,
+ 'mode' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute if it has been set manually
+// but not if it has been set from the `wire:model` attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+ unset($attributes[$wireModel->directive]);
+
+ $wireModel->directive .= '.self';
+
+ $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+
+$months = $months ?? ($mode === 'range' ? 2 : 1);
+
+$range = $mode === 'range';
+
+// Mark it invalid if the property or any of it's nested attributes have errors...
+$invalid ??= ($name && ($errors->has($name) || $errors->has($name . '.*')));
+
+$class= Flux::classes()
+ ->add('isolate relative')
+ ;
+
+$sizeClasses = match ($size) {
+ '2xl' => $weekNumbers ? 'size-12 sm:size-16' : 'size-13 sm:size-16',
+ 'xl' => $weekNumbers ? 'size-11 sm:size-14' : 'size-12 sm:size-14',
+ 'lg' => $weekNumbers ? 'size-10 sm:size-12' : 'size-11 sm:size-12',
+ default => $weekNumbers ? 'size-10 sm:size-11' : 'size-11 sm:size-11',
+ 'sm' => $weekNumbers ? 'size-9 sm:size-10' : 'size-11 sm:size-10',
+ 'xs' => $weekNumbers ? 'size-8 sm:size-9' : 'size-10 sm:size-9',
+};
+
+// Add support for `$value` being an array, if for example it's coming from
+// the `old()` helper or if a user prefers to pass data in as an array...
+if (is_array($value)) {
+ $value = match (true) {
+ $mode === 'range' => isset($value['start']) && isset($value['end']) ? $value['start'] . '/' . $value['end'] : null,
+ default => collect($value)->join(','),
+ };
+}
+
+if (isset($unavailable)) {
+ $unavailable = collect($unavailable)->implode(',');
+}
+@endphp
+
+class($class) }}
+ data-flux-calendar
+ @if ($mode) mode="{{ $mode }}" @endif
+ months="1"
+ sm:months="{{ $months }}"
+ @if (isset($unavailable)) unavailable="{{ $unavailable }}" @endif
+ @if ($showName) name="{{ $name }}" @endif
+ @if (isset($value)) value="{{ $value }}" @endif
+>
+
+
+
+
+
{{ __('Start') }}
+
{{ __('End') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ has('static')): ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/resources/views/flux/callout/heading.blade.php b/resources/views/flux/callout/heading.blade.php
new file mode 100644
index 0000000..615d785
--- /dev/null
+++ b/resources/views/flux/callout/heading.blade.php
@@ -0,0 +1,27 @@
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'mini',
+ 'icon' => null,
+])
+
+@php
+ $classes = Flux::classes()
+ ->add('flex items-center gap-2 text-sm font-medium')
+ ;
+
+ $iconClasses = Flux::classes()
+ ->add('inline-block size-5 text-[var(--callout-icon)] dark:text-[var(--callout-icon)]')
+ ->add($attributes->pluck('class:icon'))
+ ;
+@endphp
+
+class($classes) }} data-slot="heading">
+
+
diff --git a/resources/views/flux/callout/index.blade.php b/resources/views/flux/callout/index.blade.php
new file mode 100644
index 0000000..675e428
--- /dev/null
+++ b/resources/views/flux/callout/index.blade.php
@@ -0,0 +1,220 @@
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'mini',
+ 'controls' => null,
+ 'heading' => null,
+ 'color' => 'white',
+ 'variant' => null,
+ 'actions' => null,
+ 'content' => null,
+ 'inline' => null,
+ 'text' => null,
+ 'icon' => null,
+])
+
+@php
+ if ($color === 'gray') $color = 'zinc';
+
+ $color = match($variant) {
+ 'success' => 'green',
+ 'danger' => 'red',
+ 'warning' => 'yellow',
+ 'secondary' => 'zinc',
+ default => $color,
+ };
+
+ $classes = Flux::classes()
+ ->add('@container p-2 flex border rounded-xl')
+ ->add([
+ 'border-(--callout-border) bg-(--callout-background)',
+ '[&_[data-slot=heading]]:text-(--callout-heading)',
+ '[&_[data-slot=text]]:text-(--callout-text)',
+ ])
+ ->add(match($color) {
+ 'blue' => [
+ '[--callout-border:var(--color-blue-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-blue-400),transparent_50%)]',
+ '[--callout-background:var(--color-blue-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-blue-400),transparent_90%)]',
+ '[--callout-heading:var(--color-blue-600)] dark:[--callout-heading:var(--color-blue-200)]',
+ '[--callout-text:var(--color-blue-600)] dark:[--callout-text:var(--color-blue-300)]',
+ '[--callout-icon:var(--color-blue-500)] dark:[--callout-icon:var(--color-blue-400)]',
+ ],
+ 'sky' => [
+ '[--callout-border:var(--color-sky-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-sky-400),transparent_50%)]',
+ '[--callout-background:var(--color-sky-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-sky-400),transparent_90%)]',
+ '[--callout-heading:var(--color-sky-600)] dark:[--callout-heading:var(--color-sky-200)]',
+ '[--callout-text:var(--color-sky-600)] dark:[--callout-text:var(--color-sky-300)]',
+ '[--callout-icon:var(--color-sky-500)] dark:[--callout-icon:var(--color-sky-400)]',
+ ],
+ 'red' => [
+ '[--callout-border:var(--color-red-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-red-400),transparent_50%)]',
+ '[--callout-background:var(--color-red-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-red-400),transparent_90%)]',
+ '[--callout-heading:var(--color-red-700)] dark:[--callout-heading:var(--color-red-200)]',
+ '[--callout-text:var(--color-red-700)] dark:[--callout-text:var(--color-red-300)]',
+ '[--callout-icon:var(--color-red-400)] dark:[--callout-icon:var(--color-red-400)]',
+ ],
+ 'orange' => [
+ '[--callout-border:var(--color-orange-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-orange-400),transparent_50%)]',
+ '[--callout-background:var(--color-orange-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-orange-400),transparent_90%)]',
+ '[--callout-heading:var(--color-orange-600)] dark:[--callout-heading:var(--color-orange-200)]',
+ '[--callout-text:var(--color-orange-600)] dark:[--callout-text:var(--color-orange-300)]',
+ '[--callout-icon:var(--color-orange-500)] dark:[--callout-icon:var(--color-orange-400)]',
+ ],
+ 'amber' => [
+ '[--callout-border:var(--color-amber-400)] dark:[--callout-border:color-mix(in_oklab,var(--color-amber-400),transparent_50%)]',
+ '[--callout-background:var(--color-amber-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-amber-400),transparent_90%)]',
+ '[--callout-heading:var(--color-amber-600)] dark:[--callout-heading:var(--color-amber-200)]',
+ '[--callout-text:var(--color-amber-600)] dark:[--callout-text:var(--color-amber-300)]',
+ '[--callout-icon:var(--color-amber-500)] dark:[--callout-icon:var(--color-amber-400)]',
+ ],
+ 'yellow' => [
+ '[--callout-border:var(--color-yellow-400)] dark:[--callout-border:color-mix(in_oklab,var(--color-yellow-400),transparent_50%)]',
+ '[--callout-background:var(--color-yellow-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-yellow-400),transparent_90%)]',
+ '[--callout-heading:var(--color-yellow-600)] dark:[--callout-heading:var(--color-yellow-200)]',
+ '[--callout-text:var(--color-yellow-700)] dark:[--callout-text:var(--color-yellow-300)]',
+ '[--callout-icon:var(--color-yellow-500)] dark:[--callout-icon:var(--color-yellow-400)]',
+ ],
+ 'lime' => [
+ '[--callout-border:var(--color-lime-400)] dark:[--callout-border:color-mix(in_oklab,var(--color-lime-400),transparent_50%)]',
+ '[--callout-background:var(--color-lime-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-lime-400),transparent_90%)]',
+ '[--callout-heading:var(--color-lime-700)] dark:[--callout-heading:var(--color-lime-200)]',
+ '[--callout-text:var(--color-lime-600)] dark:[--callout-text:var(--color-lime-300)]',
+ '[--callout-icon:var(--color-lime-500)] dark:[--callout-icon:var(--color-lime-400)]',
+ ],
+ 'green' => [
+ '[--callout-border:var(--color-green-300)] dark:[--callout-border:color-mix(in_oklab,var(--color-green-400),transparent_50%)]',
+ '[--callout-background:var(--color-green-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-green-400),transparent_90%)]',
+ '[--callout-heading:var(--color-green-600)] dark:[--callout-heading:var(--color-green-200)]',
+ '[--callout-text:var(--color-green-600)] dark:[--callout-text:var(--color-green-300)]',
+ '[--callout-icon:var(--color-green-500)] dark:[--callout-icon:var(--color-green-400)]',
+ ],
+ 'emerald' => [
+ '[--callout-border:var(--color-emerald-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-emerald-400),transparent_50%)]',
+ '[--callout-background:var(--color-emerald-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-emerald-400),transparent_90%)]',
+ '[--callout-heading:var(--color-emerald-600)] dark:[--callout-heading:var(--color-emerald-200)]',
+ '[--callout-text:var(--color-emerald-600)] dark:[--callout-text:var(--color-emerald-300)]',
+ '[--callout-icon:var(--color-emerald-500)] dark:[--callout-icon:var(--color-emerald-400)]',
+ ],
+ 'teal' => [
+ '[--callout-border:var(--color-teal-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-teal-400),transparent_50%)]',
+ '[--callout-background:var(--color-teal-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-teal-400),transparent_90%)]',
+ '[--callout-heading:var(--color-teal-600)] dark:[--callout-heading:var(--color-teal-200)]',
+ '[--callout-text:var(--color-teal-600)] dark:[--callout-text:var(--color-teal-300)]',
+ '[--callout-icon:var(--color-teal-500)] dark:[--callout-icon:var(--color-teal-400)]',
+ ],
+ 'cyan' => [
+ '[--callout-border:var(--color-cyan-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-cyan-400),transparent_50%)]',
+ '[--callout-background:var(--color-cyan-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-cyan-400),transparent_90%)]',
+ '[--callout-heading:var(--color-cyan-600)] dark:[--callout-heading:var(--color-cyan-200)]',
+ '[--callout-text:var(--color-cyan-600)] dark:[--callout-text:var(--color-cyan-300)]',
+ '[--callout-icon:var(--color-cyan-500)] dark:[--callout-icon:var(--color-cyan-400)]',
+ ],
+ 'indigo' => [
+ '[--callout-border:var(--color-indigo-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-indigo-400),transparent_50%)]',
+ '[--callout-background:var(--color-indigo-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-indigo-400),transparent_90%)]',
+ '[--callout-heading:var(--color-indigo-600)] dark:[--callout-heading:var(--color-indigo-200)]',
+ '[--callout-text:var(--color-indigo-600)] dark:[--callout-text:var(--color-indigo-300)]',
+ '[--callout-icon:var(--color-indigo-500)] dark:[--callout-icon:var(--color-indigo-400)]',
+ ],
+ 'violet' => [
+ '[--callout-border:var(--color-violet-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-violet-400),transparent_50%)]',
+ '[--callout-background:var(--color-violet-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-violet-400),transparent_90%)]',
+ '[--callout-heading:var(--color-violet-600)] dark:[--callout-heading:var(--color-violet-200)]',
+ '[--callout-text:var(--color-violet-600)] dark:[--callout-text:var(--color-violet-300)]',
+ '[--callout-icon:var(--color-violet-500)] dark:[--callout-icon:var(--color-violet-400)]',
+ ],
+ 'purple' => [
+ '[--callout-border:var(--color-purple-300)] dark:[--callout-border:color-mix(in_oklab,var(--color-purple-400),transparent_50%)]',
+ '[--callout-background:var(--color-purple-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-purple-400),transparent_90%)]',
+ '[--callout-heading:var(--color-purple-800)] dark:[--callout-heading:var(--color-purple-200)]',
+ '[--callout-text:var(--color-purple-700)] dark:[--callout-text:var(--color-purple-300)]',
+ '[--callout-icon:var(--color-purple-500)] dark:[--callout-icon:var(--color-purple-400)]',
+ ],
+ 'fuchsia' => [
+ '[--callout-border:var(--color-fuchsia-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-fuchsia-400),transparent_50%)]',
+ '[--callout-background:var(--color-fuchsia-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-fuchsia-400),transparent_90%)]',
+ '[--callout-heading:var(--color-fuchsia-600)] dark:[--callout-heading:var(--color-fuchsia-200)]',
+ '[--callout-text:var(--color-fuchsia-600)] dark:[--callout-text:var(--color-fuchsia-300)]',
+ '[--callout-icon:var(--color-fuchsia-500)] dark:[--callout-icon:var(--color-fuchsia-400)]',
+ ],
+ 'pink' => [
+ '[--callout-border:var(--color-pink-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-pink-400),transparent_50%)]',
+ '[--callout-background:var(--color-pink-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-pink-400),transparent_90%)]',
+ '[--callout-heading:var(--color-pink-600)] dark:[--callout-heading:var(--color-pink-200)]',
+ '[--callout-text:var(--color-pink-600)] dark:[--callout-text:var(--color-pink-300)]',
+ '[--callout-icon:var(--color-pink-500)] dark:[--callout-icon:var(--color-pink-400)]',
+ ],
+ 'rose' => [
+ '[--callout-border:var(--color-rose-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-rose-400),transparent_50%)]',
+ '[--callout-background:var(--color-rose-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-rose-400),transparent_90%)]',
+ '[--callout-heading:var(--color-rose-600)] dark:[--callout-heading:var(--color-rose-200)]',
+ '[--callout-text:var(--color-rose-600)] dark:[--callout-text:var(--color-rose-300)]',
+ '[--callout-icon:var(--color-rose-500)] dark:[--callout-icon:var(--color-rose-400)]',
+ ],
+ 'zinc' => [
+ '[--callout-border:var(--color-zinc-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-white),transparent_95%)]',
+ '[--callout-background:var(--color-zinc-50)] dark:[--callout-background:color-mix(in_oklab,var(--color-zinc-400),transparent_90%)]',
+ '[--callout-heading:var(--color-zinc-800)] dark:[--callout-heading:var(--color-zinc-200)]',
+ '[--callout-text:var(--color-zinc-500)] dark:[--callout-text:var(--color-zinc-300)]',
+ '[--callout-icon:var(--color-zinc-400)] dark:[--callout-icon:var(--color-zinc-400)]',
+ ],
+ default => [
+ '[--callout-border:var(--color-zinc-200)] dark:[--callout-border:color-mix(in_oklab,var(--color-white),transparent_95%)]',
+ '[--callout-background:var(--color-white)] dark:[--callout-background:color-mix(in_oklab,var(--color-zinc-400),transparent_90%)]',
+ '[--callout-heading:var(--color-zinc-800)] dark:[--callout-heading:var(--color-zinc-200)]',
+ '[--callout-text:var(--color-zinc-500)] dark:[--callout-text:var(--color-zinc-300)]',
+ '[--callout-icon:var(--color-zinc-400)] dark:[--callout-icon:var(--color-zinc-400)]',
+ ],
+ })
+ ;
+
+ $iconWrapperClasses = Flux::classes()
+ ->add('ps-2 py-2 pe-0 flex items-baseline')
+ ;
+
+ $iconClasses = Flux::classes()
+ ->add('inline-block size-5 text-[var(--callout-icon)] dark:text-[var(--callout-icon)]')
+ ->add($attributes->pluck('class:icon'))
+ ;
+@endphp
+
+class($classes) }} data-flux-callout>
+
+
+
+
+
attributes->class($iconWrapperClasses) }}>
+ {{ $icon }}
+
+
+
+
+
+
+ {{ $heading }}
+
+
+
+ {{ $text }}
+
+
+ {{ $content ?? $slot }}
+
+
+
+
attributes->class([
+ $inline ? '@max-md:py-2 @md:m-[-2px] @md:ps-4 @md:justify-end @md:flex-row-reverse' : 'py-2',
+ 'self-start flex items-center gap-2'
+ ]) }} data-slot="actions">
+ {{ $actions }}
+
+
+
+
+
+
attributes->class($inline ? 'ps-2 m-[-2px]' : 'ps-2') }}>
+ {{ $controls }}
+
+
+
class($classes) }} target="_blank">{{ $slot }}
\ No newline at end of file
diff --git a/resources/views/flux/callout/text.blade.php b/resources/views/flux/callout/text.blade.php
new file mode 100644
index 0000000..67cd987
--- /dev/null
+++ b/resources/views/flux/callout/text.blade.php
@@ -0,0 +1,4 @@
+
+class('text-sm') }} data-slot="text">
+ {{ $slot }}
+
diff --git a/resources/views/flux/card/index.blade.php b/resources/views/flux/card/index.blade.php
new file mode 100644
index 0000000..877b24c
--- /dev/null
+++ b/resources/views/flux/card/index.blade.php
@@ -0,0 +1,18 @@
+@props([
+ 'size' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('bg-white dark:bg-white/10')
+ ->add('border border-zinc-200 dark:border-white/10')
+ ->add(match ($size) {
+ default => '[:where(&)]:p-6 [:where(&)]:rounded-xl',
+ 'sm' => '[:where(&)]:p-4 [:where(&)]:rounded-lg',
+ })
+ ;
+@endphp
+
+class($classes) }} data-flux-card>
+ {{ $slot }}
+
diff --git a/resources/views/flux/chart/area.blade.php b/resources/views/flux/chart/area.blade.php
new file mode 100644
index 0000000..8753da4
--- /dev/null
+++ b/resources/views/flux/chart/area.blade.php
@@ -0,0 +1,9 @@
+@aware(['field'])
+
+@props([
+ 'field' => 'value',
+])
+
+only(['curve']) }}>
+ except('curve') }}>
+
diff --git a/resources/views/flux/chart/axis/grid.blade.php b/resources/views/flux/chart/axis/grid.blade.php
new file mode 100644
index 0000000..c01c7c7
--- /dev/null
+++ b/resources/views/flux/chart/axis/grid.blade.php
@@ -0,0 +1,21 @@
+@aware(['axis' => 'x'])
+
+@if ($axis === 'x')
+
+ merge([
+ 'type' => 'horizontal',
+ 'class' => 'text-zinc-200/50 dark:text-white/15',
+ 'stroke' => 'currentColor',
+ 'stroke-width' => '1',
+ ]) }}>
+
+@else
+
+ merge([
+ 'type' => 'vertical',
+ 'class' => 'text-zinc-200/50 dark:text-white/15',
+ 'stroke' => 'currentColor',
+ 'stroke-width' => '1',
+ ]) }}>
+
+@endif
diff --git a/resources/views/flux/chart/axis/index.blade.php b/resources/views/flux/chart/axis/index.blade.php
new file mode 100644
index 0000000..2f93537
--- /dev/null
+++ b/resources/views/flux/chart/axis/index.blade.php
@@ -0,0 +1,23 @@
+@props([
+ 'axis' => 'x',
+ 'format' => null,
+ 'field' => 'index',
+ 'position' => null,
+ 'tickValues' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+
+$field ??= $axis === 'x' ? 'date' : $field;
+@endphp
+
+merge([
+ 'name' => 'axis',
+ 'axis' => $axis,
+ 'format' => $format,
+ 'position' => $position,
+ 'tick-values' => is_string($tickValues) ? $tickValues : json_encode($tickValues),
+]) }} @if ($field) field="{{ $field }}" @endif>
+ {{ $slot }}
+
\ No newline at end of file
diff --git a/resources/views/flux/chart/axis/line.blade.php b/resources/views/flux/chart/axis/line.blade.php
new file mode 100644
index 0000000..85da3cf
--- /dev/null
+++ b/resources/views/flux/chart/axis/line.blade.php
@@ -0,0 +1,23 @@
+@aware(['axis' => 'x'])
+
+@if ($axis === 'x')
+
+ merge([
+ 'class' => '[:where(&)]:text-zinc-300 dark:[:where(&)]:text-white/40',
+ 'orientation' => 'bottom',
+ 'stroke-width' => '1',
+ 'stroke' => 'currentColor',
+ 'fill' => 'none',
+ ]) }}>
+
+@else
+
+ merge([
+ 'class' => '[:where(&)]:text-zinc-300 dark:[:where(&)]:text-white/40',
+ 'orientation' => 'left',
+ 'stroke-width' => '1',
+ 'stroke' => 'currentColor',
+ 'fill' => 'none',
+ ]) }}>
+
+@endif
\ No newline at end of file
diff --git a/resources/views/flux/chart/axis/mark.blade.php b/resources/views/flux/chart/axis/mark.blade.php
new file mode 100644
index 0000000..3a38921
--- /dev/null
+++ b/resources/views/flux/chart/axis/mark.blade.php
@@ -0,0 +1,31 @@
+@aware(['axis' => 'x', 'position' => null])
+
+@if ($axis === 'x')
+
+
+ merge([
+ 'class' => 'stroke-zinc-300',
+ 'orientation' => $position === 'top' ? 'top' : 'bottom',
+ 'stroke' => 'currentColor',
+ 'stroke-width' => '1',
+ 'fill' => 'none',
+ 'y1' => '0',
+ 'y2' => '6',
+ ]) }}>
+
+
+@else
+
+
+ merge([
+ 'class' => 'stroke-zinc-300',
+ 'orientation' => $position === 'right' ? 'right' : 'left',
+ 'stroke' => 'currentColor',
+ 'stroke-width' => '1',
+ 'fill' => 'none',
+ 'x1' => $position === 'right' ? '0' : '-6',
+ 'x2' => $position === 'right' ? '6' : '0',
+ ]) }}>
+
+
+@endif
\ No newline at end of file
diff --git a/resources/views/flux/chart/axis/tick.blade.php b/resources/views/flux/chart/axis/tick.blade.php
new file mode 100644
index 0000000..764ff38
--- /dev/null
+++ b/resources/views/flux/chart/axis/tick.blade.php
@@ -0,0 +1,35 @@
+@aware(['axis' => 'x', 'position' => null ])
+
+@props([
+ 'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+@if ($axis === 'x')
+
+
+ merge([
+ 'class' => '[:where(&)]:text-xs [:where(&)]:text-zinc-400 [:where(&)]:font-medium [:where(&)]:dark:text-zinc-300',
+ 'text-anchor' => 'middle',
+ 'fill' => 'currentColor',
+ 'dominant-baseline' => $position === 'top' ? 'text-after-edge' : 'text-before-edge',
+ 'dy' => $position === 'top' ? '-1em' : '1em',
+ ]) }}>
+
+
+@else
+
+
+ merge([
+ 'class' => '[:where(&)]:text-xs [:where(&)]:text-zinc-400 [:where(&)]:dark:text-zinc-300',
+ 'dominant-baseline' => 'central',
+ 'fill' => 'currentColor',
+ 'text-anchor' => $position === 'right' ? 'start' : 'end',
+ 'dx' => $position === 'right' ? '1em' : '-1em',
+ ]) }}>
+
+
+@endif
\ No newline at end of file
diff --git a/resources/views/flux/chart/cursor.blade.php b/resources/views/flux/chart/cursor.blade.php
new file mode 100644
index 0000000..5bd9991
--- /dev/null
+++ b/resources/views/flux/chart/cursor.blade.php
@@ -0,0 +1,10 @@
+
+
+ merge([
+ 'class' => 'text-zinc-500 dark:text-zinc-300',
+ 'type' => 'vertical',
+ 'stroke' => 'currentColor',
+ 'stroke-width' => '1',
+ 'stroke-dasharray' => '4,4',
+ ]) }}>
+
diff --git a/resources/views/flux/chart/index.blade.php b/resources/views/flux/chart/index.blade.php
new file mode 100644
index 0000000..2500808
--- /dev/null
+++ b/resources/views/flux/chart/index.blade.php
@@ -0,0 +1,16 @@
+@props([
+ 'tooltip' => null,
+ 'summary' => null,
+ 'value' => null,
+ 'svg' => null,
+])
+
+@php
+$classes = Flux::classes('block [:where(&)]:relative');
+
+$value = is_array($value) ? \Illuminate\Support\Js::encode($value) : $value;
+@endphp
+
+class($classes) }} wire:ignore.children @if ($value) value="{{ $value }}" @endif>
+ {{ $slot }}
+
diff --git a/resources/views/flux/chart/legend/index.blade.php b/resources/views/flux/chart/legend/index.blade.php
new file mode 100644
index 0000000..fddc2f6
--- /dev/null
+++ b/resources/views/flux/chart/legend/index.blade.php
@@ -0,0 +1,19 @@
+@props([
+ 'label' => null,
+ 'field' => null,
+ 'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+class(['flex items-center gap-2 p-2']) }}>
+ {{ $slot }}
+
+ @if (is_string($label) && $label !== '')
+
{{ $label }}
+ @elseif ($label)
+ {{ $label }}
+ @endif
+
class('size-2.5 rounded-full') }}>
diff --git a/resources/views/flux/chart/line.blade.php b/resources/views/flux/chart/line.blade.php
new file mode 100644
index 0000000..b283a73
--- /dev/null
+++ b/resources/views/flux/chart/line.blade.php
@@ -0,0 +1,14 @@
+
+@props([
+ 'field' => 'value',
+])
+
+only(['curve']) }}>
+ class('[:where(&)]:text-zinc-800')->merge([
+ 'stroke' => 'currentColor',
+ 'stroke-width' => '2',
+ 'fill' => 'none',
+ 'stroke-linecap' => 'round',
+ 'stroke-linejoin' => 'round',
+ ]) }}>
+
diff --git a/resources/views/flux/chart/point.blade.php b/resources/views/flux/chart/point.blade.php
new file mode 100644
index 0000000..5af51cc
--- /dev/null
+++ b/resources/views/flux/chart/point.blade.php
@@ -0,0 +1,12 @@
+
+@props([
+ 'field' => 'value',
+])
+
+
+ class('[:where(&)]:text-zinc-800 dark:[:where(&)]:text-zinc-100 [:where(&)]:stroke-white dark:[:where(&)]:stroke-zinc-900')->merge([
+ 'r' => '4',
+ 'fill' => 'currentColor',
+ 'stroke-width' => '1',
+ ]) }}>
+
diff --git a/resources/views/flux/chart/summary/index.blade.php b/resources/views/flux/chart/summary/index.blade.php
new file mode 100644
index 0000000..bd01522
--- /dev/null
+++ b/resources/views/flux/chart/summary/index.blade.php
@@ -0,0 +1,6 @@
+
+
+
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/chart/summary/value.blade.php b/resources/views/flux/chart/summary/value.blade.php
new file mode 100644
index 0000000..678503d
--- /dev/null
+++ b/resources/views/flux/chart/summary/value.blade.php
@@ -0,0 +1,13 @@
+@props([
+ 'field' => null,
+ 'format' => null,
+ 'fallback' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+
+
diff --git a/resources/views/flux/chart/svg.blade.php b/resources/views/flux/chart/svg.blade.php
new file mode 100644
index 0000000..1580c96
--- /dev/null
+++ b/resources/views/flux/chart/svg.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'gutter' => null,
+])
+
+
+ class('absolute inset-0') }} xmlns="http://www.w3.org/2000/svg" version="1.1">
+ {{ $slot }}
+
+
\ No newline at end of file
diff --git a/resources/views/flux/chart/tooltip/heading.blade.php b/resources/views/flux/chart/tooltip/heading.blade.php
new file mode 100644
index 0000000..305f711
--- /dev/null
+++ b/resources/views/flux/chart/tooltip/heading.blade.php
@@ -0,0 +1,15 @@
+@props([
+ 'field' => 'date',
+ 'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+class([
+ 'bg-zinc-50 border-b border-zinc-200 dark:bg-zinc-600 dark:border-zinc-500 flex justify-between items-center p-2',
+ 'text-xs font-medium [:where(&)]:text-zinc-800 dark:[:where(&)]:text-zinc-100'
+ ]) }}>
+
diff --git a/resources/views/flux/chart/tooltip/index.blade.php b/resources/views/flux/chart/tooltip/index.blade.php
new file mode 100644
index 0000000..eb52bf8
--- /dev/null
+++ b/resources/views/flux/chart/tooltip/index.blade.php
@@ -0,0 +1,17 @@
+@props([
+ 'field' => null,
+ 'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+
+$classes = Flux::classes()
+ ->add('opacity-0 data-active:opacity-100 absolute flex flex-col rounded-lg overflow-hidden shadow-lg border border-zinc-200 bg-white dark:border-zinc-500 dark:bg-zinc-700');
+@endphp
+
+
+ class($classes) }}>
+ {{ $slot}}
+
+
\ No newline at end of file
diff --git a/resources/views/flux/chart/tooltip/value.blade.php b/resources/views/flux/chart/tooltip/value.blade.php
new file mode 100644
index 0000000..a6da680
--- /dev/null
+++ b/resources/views/flux/chart/tooltip/value.blade.php
@@ -0,0 +1,25 @@
+@props([
+ 'label' => null,
+ 'field' => null,
+ 'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+class(['flex items-center gap-2 p-2 text-xs [:where(&)]:text-zinc-500 dark:[:where(&)]:text-zinc-300']) }}>
+ {{ $slot }}
+
+ @if (is_string($label) && $label !== '')
+
{{ $label }}
+ @elseif ($label)
+ {{ $label }}
+ @endif
+
+ @if ($field)
+
+
+
+ @endif
+
+
diff --git a/resources/views/flux/chart/viewport.blade.php b/resources/views/flux/chart/viewport.blade.php
new file mode 100644
index 0000000..bd4aefc
--- /dev/null
+++ b/resources/views/flux/chart/viewport.blade.php
@@ -0,0 +1,4 @@
+
+class('[:where(&)]:relative') }}>
+ {{ $slot }}
+
\ No newline at end of file
diff --git a/resources/views/flux/chart/zero-line.blade.php b/resources/views/flux/chart/zero-line.blade.php
new file mode 100644
index 0000000..9912bb7
--- /dev/null
+++ b/resources/views/flux/chart/zero-line.blade.php
@@ -0,0 +1,15 @@
+@aware(['axis' => 'x'])
+
+
+ merge([
+ 'class' => '[:where(&)]:text-zinc-400',
+ 'orientation' => 'left',
+ 'stroke-width' => '1',
+ 'stroke' => 'currentColor',
+ 'fill' => 'none',
+ 'x1' => '0',
+ 'y1' => '0',
+ 'x2' => '0',
+ 'y2' => '6',
+ ]) }}>
+
\ No newline at end of file
diff --git a/resources/views/flux/checkbox/all.blade.php b/resources/views/flux/checkbox/all.blade.php
new file mode 100644
index 0000000..72a78b7
--- /dev/null
+++ b/resources/views/flux/checkbox/all.blade.php
@@ -0,0 +1,2 @@
+
+{{ $slot }}
diff --git a/resources/views/flux/checkbox/group/variants/buttons.blade.php b/resources/views/flux/checkbox/group/variants/buttons.blade.php
new file mode 100644
index 0000000..c927458
--- /dev/null
+++ b/resources/views/flux/checkbox/group/variants/buttons.blade.php
@@ -0,0 +1,25 @@
+@props([
+ 'variant' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('flex flex-wrap gap-2')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-checkbox-group-buttons>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/checkbox/group/variants/cards.blade.php b/resources/views/flux/checkbox/group/variants/cards.blade.php
new file mode 100644
index 0000000..ce1c92e
--- /dev/null
+++ b/resources/views/flux/checkbox/group/variants/cards.blade.php
@@ -0,0 +1,25 @@
+@props([
+ 'variant' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('flex gap-3')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-checkbox-group-cards>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/checkbox/group/variants/default.blade.php b/resources/views/flux/checkbox/group/variants/default.blade.php
new file mode 100644
index 0000000..9612cb0
--- /dev/null
+++ b/resources/views/flux/checkbox/group/variants/default.blade.php
@@ -0,0 +1,22 @@
+@php
+$classes = Flux::classes()
+ ->add('*:data-flux-field:mb-3')
+ ->add('[&>[data-flux-field]:has(>[data-flux-description])]:mb-4')
+ ->add('[&>[data-flux-field]:last-child]:mb-0!')
+ ;
+
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+ unset($attributes[$wireModel->directive]);
+
+ $wireModel->directive .= '.self';
+
+ $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+@endphp
+
+
+ class($classes) }} data-flux-checkbox-group>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/checkbox/group/variants/pills.blade.php b/resources/views/flux/checkbox/group/variants/pills.blade.php
new file mode 100644
index 0000000..2b33f7f
--- /dev/null
+++ b/resources/views/flux/checkbox/group/variants/pills.blade.php
@@ -0,0 +1,25 @@
+@props([
+ 'variant' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('flex flex-wrap gap-3')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-checkbox-group-pills>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/checkbox/index.blade.php b/resources/views/flux/checkbox/index.blade.php
new file mode 100644
index 0000000..2fddc79
--- /dev/null
+++ b/resources/views/flux/checkbox/index.blade.php
@@ -0,0 +1,14 @@
+@aware([ 'variant' ])
+
+@props([
+ 'variant' => 'default',
+])
+
+@php
+// This prevents variants picked up by `@aware()` from other wrapping components like flux::modal from being used here...
+$variant = $variant !== 'default' && Flux::componentExists('checkbox.variants.' . $variant)
+ ? $variant
+ : 'default';
+@endphp
+
+{{ $slot }}
diff --git a/resources/views/flux/checkbox/indicator.blade.php b/resources/views/flux/checkbox/indicator.blade.php
new file mode 100644
index 0000000..ca260ef
--- /dev/null
+++ b/resources/views/flux/checkbox/indicator.blade.php
@@ -0,0 +1,31 @@
+
+@php
+$classes = Flux::classes()
+ ->add('shrink-0 size-[1.125rem] rounded-[.3rem] flex justify-center items-center')
+ ->add('text-sm text-zinc-700 dark:text-zinc-800')
+ ->add('shadow-xs [ui-checkbox[disabled]_&]:opacity-75 [ui-checkbox[data-checked][disabled]_&]:opacity-50 [ui-checkbox[disabled]_&]:shadow-none [ui-checkbox[data-checked]_&]:shadow-none [ui-checkbox[data-indeterminate]_&]:shadow-none')
+ ->add('[ui-checkbox[data-checked]:not([data-indeterminate])_&>svg:first-child]:block [ui-checkbox[data-indeterminate]_&>svg:last-child]:block')
+ ->add([
+ 'border',
+ 'border-zinc-300 dark:border-white/10',
+ '[ui-checkbox[disabled]_&]:border-zinc-200 dark:[ui-checkbox[disabled]_&]:border-white/5',
+ '[ui-checkbox[data-checked]_&]:border-transparent [ui-checkbox[data-indeterminate]_&]:border-transparent',
+ '[ui-checkbox[disabled][data-checked]_&]:border-transparent [ui-checkbox[disabled][data-indeterminate]_&]:border-transparent',
+ '[print-color-adjust:exact]',
+ ])
+ ->add([
+ 'bg-white dark:bg-white/10',
+ '[ui-checkbox[data-checked]_&]:bg-[var(--color-accent)]',
+ 'hover:[ui-checkbox[data-checked]_&]:bg-(--color-accent)',
+ 'focus:[ui-checkbox[data-checked]_&]:bg-(--color-accent)',
+ '[ui-checkbox[data-indeterminate]_&]:bg-[var(--color-accent)]',
+ 'hover:[ui-checkbox[data-indeterminate]_&]:bg-(--color-accent)',
+ 'focus:[ui-checkbox[data-indeterminate]_&]:bg-(--color-accent)',
+ ])
+ ;
+@endphp
+
+class($classes) }} data-flux-checkbox-indicator>
+
diff --git a/resources/views/flux/checkbox/variants/buttons.blade.php b/resources/views/flux/checkbox/variants/buttons.blade.php
new file mode 100644
index 0000000..de66a92
--- /dev/null
+++ b/resources/views/flux/checkbox/variants/buttons.blade.php
@@ -0,0 +1,65 @@
+@props([
+ 'accent' => true,
+ 'size' => 'base',
+ 'label' => null,
+ 'icon' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('flex relative items-center font-medium justify-center gap-2 whitespace-nowrap')
+ ->add(match ($size) {
+ 'base' => 'h-10 text-sm rounded-lg px-4 [&:has(>:not(span):first-child)]:ps-3 [&:has(>:not(span):last-child)]:pe-3',
+ 'sm' => 'h-8 text-sm rounded-md px-3',
+ 'xs' => 'h-6 text-xs rounded-md px-2',
+ })
+ ->add(match ($size) {
+ 'base' => 'shadow-xs',
+ 'sm' => 'shadow-xs',
+ 'xs' => 'shadow-none',
+ })
+ ->add('text-zinc-800 dark:text-white')
+ ->add('bg-white dark:bg-zinc-700')
+ ->add('after:absolute after:-inset-px after:rounded-lg')
+ ->add('border border-zinc-200 border-b-zinc-300/80 dark:border-zinc-600')
+ ->add([
+ '[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_97.5%)]',
+ '[--haze-border:color-mix(in_oklab,_var(--color-accent-content),_transparent_80%)]',
+ '[--haze-light:color-mix(in_oklab,_var(--color-accent),_transparent_98%)]',
+ 'dark:[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_90%)]',
+ ])
+ ->add(match ($accent) {
+ true => [
+ 'hover:border-[var(--haze-border)] dark:hover:border-zinc-500',
+ 'dark:data-checked:bg-white/15 data-checked:border-(--color-accent) hover:data-checked:border-(--color-accent)',
+ 'hover:after:bg-[var(--haze-light)] dark:hover:after:bg-white/[4%] data-checked:after:bg-(--haze) hover:data-checked:after:bg-(--haze)',
+ ],
+ false => [
+ 'hover:border-zinc-200 dark:hover:border-zinc-500',
+ 'data-checked:bg-zinc-50 dark:data-checked:bg-white/15 data-checked:border-zinc-800 dark:data-checked:border-white',
+ 'hover:bg-zinc-50 dark:hover:bg-zinc-600/75',
+ ],
+ })
+ ->add('disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none')
+ ;
+
+$iconAttributes = Flux::attributesAfter('icon:', $attributes, [
+ 'class' => 'text-zinc-300 dark:text-zinc-400 in-data-checked:text-zinc-800 dark:in-data-checked:text-white',
+ 'variant' => 'micro',
+]);
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
+class($classes) }} data-flux-control data-flux-checkbox-buttons tabindex="-1" data-flux-field>
+
+ {{ $label ?? $slot }}
+ @endif
+
diff --git a/resources/views/flux/checkbox/variants/cards.blade.php b/resources/views/flux/checkbox/variants/cards.blade.php
new file mode 100644
index 0000000..4ec7b1b
--- /dev/null
+++ b/resources/views/flux/checkbox/variants/cards.blade.php
@@ -0,0 +1,76 @@
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'indicator' ])
+
+@props([
+ 'iconVariant' => 'micro',
+ 'description' => null,
+ 'indicator' => true,
+ 'accent' => true,
+ 'label' => null,
+ 'icon' => null,
+])
+
+@php
+
+$iconClasses = Flux::classes()
+ ->add('inline-block mt-0.5 text-zinc-400 [ui-checkbox[data-checked]_&]:text-zinc-800 dark:[ui-checkbox[data-checked]_&]:text-white')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-4' : '')
+ ;
+
+$classes = Flux::classes()
+ ->add('relative flex justify-between gap-3 flex-1 p-4')
+ ->add('rounded-lg shadow-xs')
+ ->add('bg-white dark:bg-white/10 dark:hover:bg-white/15 dark:data-checked:bg-white/15')
+ ->add('after:absolute after:-inset-px after:rounded-lg')
+ ->add('border border-zinc-800/15 dark:border-white/10')
+ ->add([
+ '[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_97.5%)]',
+ '[--haze-border:color-mix(in_oklab,_var(--color-accent-content),_transparent_80%)]',
+ '[--haze-light:color-mix(in_oklab,_var(--color-accent),_transparent_98%)]',
+ 'dark:[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_90%)]',
+ ])
+ ->add(match ($accent) {
+ true => [
+ '[&:hover_[data-flux-checkbox-indicator]]:border-[var(--haze-border)] dark:[&:hover_[data-flux-checkbox-indicator]]:border-white/10',
+ 'hover:border-[var(--haze-border)] dark:hover:border-white/10',
+
+ 'data-checked:border-(--color-accent) hover:data-checked:border-(--color-accent) dark:data-checked:bg-white/15 ',
+ 'hover:after:bg-[var(--haze-light)] dark:hover:after:bg-white/[4%] data-checked:after:bg-(--haze) hover:data-checked:after:bg-(--haze)',
+ ],
+ false => [
+ 'data-checked:bg-zinc-50 dark:data-checked:bg-white/15 data-checked:border-zinc-800 dark:data-checked:border-white',
+ 'hover:bg-zinc-50 dark:hover:bg-white/15',
+ ],
+ })
+ ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+ ;
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
+class($classes) }} data-flux-control data-flux-checkbox-cards tabindex="-1" data-flux-field>
+
+
+
+
+
+ {{ $icon }}
+
+
+
+ {{ $label ?? $slot }}
+
+
+ {{ $description }}
+
+
+
diff --git a/resources/views/flux/checkbox/variants/default.blade.php b/resources/views/flux/checkbox/variants/default.blade.php
new file mode 100644
index 0000000..601975a
--- /dev/null
+++ b/resources/views/flux/checkbox/variants/default.blade.php
@@ -0,0 +1,23 @@
+@props([
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('flex size-[1.125rem] rounded-[.3rem] mt-px outline-offset-2')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-control data-flux-checkbox>
+
+
diff --git a/resources/views/flux/checkbox/variants/pills.blade.php b/resources/views/flux/checkbox/variants/pills.blade.php
new file mode 100644
index 0000000..23d69b5
--- /dev/null
+++ b/resources/views/flux/checkbox/variants/pills.blade.php
@@ -0,0 +1,27 @@
+@props([
+ 'accent' => true,
+ 'label' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('flex whitespace-nowrap gap-2 items-center py-1 px-2 rounded-full text-sm font-medium leading-4')
+ ->add('bg-zinc-800/6 dark:bg-white/10 hover:bg-zinc-800/10 dark:hover:bg-white/15 text-zinc-800 hover:text-zinc-800 dark:text-white/70 dark:hover:text-white')
+ ->add(match ($accent) {
+ true => 'data-checked:bg-(--color-accent) hover:data-checked:bg-(--color-accent)',
+ false => 'data-checked:bg-zinc-800 dark:data-checked:bg-white',
+ })
+ ->add(match ($accent) {
+ true => 'data-checked:text-(--color-accent-foreground) hover:data-checked:text-(--color-accent-foreground)',
+ false => 'data-checked:text-white dark:data-checked:text-zinc-800',
+ })
+ ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+ ;
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
+class($classes) }} data-flux-control data-flux-checkbox-pills tabindex="-1" data-flux-field>
+ {{ $label ?? $slot }}
+
diff --git a/resources/views/flux/command/empty.blade.php b/resources/views/flux/command/empty.blade.php
new file mode 100644
index 0000000..0f75d08
--- /dev/null
+++ b/resources/views/flux/command/empty.blade.php
@@ -0,0 +1,8 @@
+
+
+
+
diff --git a/resources/views/flux/command/index.blade.php b/resources/views/flux/command/index.blade.php
new file mode 100644
index 0000000..16c3908
--- /dev/null
+++ b/resources/views/flux/command/index.blade.php
@@ -0,0 +1,15 @@
+@props([
+ 'placeholder' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('w-full block rounded-xl overflow-hidden shadow-xs')
+ ->add('border border-zinc-200 dark:border-zinc-600')
+ ;
+@endphp
+
+class($classes)->merge(['filter' => true]) }} data-flux-command>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/command/input.blade.php b/resources/views/flux/command/input.blade.php
new file mode 100644
index 0000000..9d291fd
--- /dev/null
+++ b/resources/views/flux/command/input.blade.php
@@ -0,0 +1,49 @@
+@props([
+ 'clearable' => null,
+ 'closable' => null,
+ 'icon' => 'magnifying-glass',
+])
+
+@php
+$classes = Flux::classes()
+ ->add('h-12 w-full flex items-center px-3 py-2')
+ ->add('font-medium text-base sm:text-sm text-zinc-800 dark:text-white')
+ ->add('ps-11') // Make room for magnifying glass icon...
+ ->add(($closable || $clearable) ? 'pe-11' : '') // Make room for close/clear button...
+ ->add('outline-hidden')
+ ->add('border-b border-zinc-200 dark:border-zinc-600')
+ ->add('bg-white dark:bg-zinc-700')
+ // The below reverts styles added by Tailwind Forms plugin
+ ->add('border-t-0 border-s-0 border-e-0 focus:ring-0 focus:border-zinc-200 dark:focus:border-zinc-600')
+ ;
+@endphp
+
+
+
+
+
+
+
class($classes) }} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
class($classes) }} data-flux-command-item>
+
+
+
+
+
+
+ {{ $slot }}
+
+
+
+ {{ $kbd }}
+
+
+
diff --git a/resources/views/flux/command/items.blade.php b/resources/views/flux/command/items.blade.php
new file mode 100644
index 0000000..8a11c47
--- /dev/null
+++ b/resources/views/flux/command/items.blade.php
@@ -0,0 +1,13 @@
+@php
+$classes = Flux::classes()
+ ->add('p-[.3125rem]')
+ ->add('overflow-y-auto')
+ ->add('bg-white dark:bg-zinc-700')
+ ;
+@endphp
+
+class($classes) }} data-flux-command-items>
+ {{ $slot }}
+
+ {!! __('No results found') !!}
+
diff --git a/resources/views/flux/container.blade.php b/resources/views/flux/container.blade.php
new file mode 100644
index 0000000..c804382
--- /dev/null
+++ b/resources/views/flux/container.blade.php
@@ -0,0 +1,9 @@
+@php
+$classes = Flux::classes()
+ ->add('mx-auto w-full [:where(&)]:max-w-7xl px-6 lg:px-8')
+ ;
+@endphp
+
+class($classes) }} data-flux-container>
+ {{ $slot }}
+
diff --git a/resources/views/flux/context.blade.php b/resources/views/flux/context.blade.php
new file mode 100644
index 0000000..68dc815
--- /dev/null
+++ b/resources/views/flux/context.blade.php
@@ -0,0 +1,18 @@
+@props([
+ 'position' => 'bottom end',
+])
+
+@php
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+ unset($attributes[$wireModel->directive]);
+
+ $wireModel->directive .= '.self';
+
+ $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+@endphp
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/date-picker/button.blade.php b/resources/views/flux/date-picker/button.blade.php
new file mode 100644
index 0000000..f3a24c8
--- /dev/null
+++ b/resources/views/flux/date-picker/button.blade.php
@@ -0,0 +1,54 @@
+@aware([ 'placeholder' ])
+
+@props([
+ 'placeholder' => null,
+ 'clearable' => null,
+ 'invalid' => false,
+ 'size' => null,
+])
+
+@php
+
+$classes = Flux::classes()
+ ->add('group/select-button cursor-default py-2')
+ ->add('overflow-hidden') // Overflow hidden is here to prevent the button from growing if the selected date text is too long.
+ ->add('flex items-center')
+ ->add('shadow-xs')
+ ->add('bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]')
+ // Make the placeholder match the text color of standard input placeholders...
+ ->add('disabled:shadow-none')
+ ->add(match ($size) {
+ default => 'h-10 text-base sm:text-sm rounded-lg px-3 block w-full',
+ 'sm' => 'h-8 text-sm rounded-md ps-3 pe-2 block w-full',
+ 'xs' => 'h-6 text-xs rounded-md ps-3 pe-2 block w-full',
+ })
+ ->add($invalid
+ ? 'border border-red-500'
+ : 'border border-zinc-200 border-b-zinc-300/80 dark:border-white/10'
+ )
+ ;
+@endphp
+
+class($classes) }} @if ($invalid) data-invalid @endif data-flux-group-target data-flux-date-picker-button>
+
+
+
+
diff --git a/resources/views/flux/date-picker/index.blade.php b/resources/views/flux/date-picker/index.blade.php
new file mode 100644
index 0000000..7eb449f
--- /dev/null
+++ b/resources/views/flux/date-picker/index.blade.php
@@ -0,0 +1,292 @@
+@props([
+ 'selectableHeader' => null,
+ 'withConfirmation' => null,
+ 'weekNumbers' => null,
+ 'placeholder' => null,
+ 'withPresets' => null,
+ 'unavailable' => null,
+ 'withInputs' => null,
+ 'clearable' => null,
+ 'withToday' => null,
+ 'presets' => null,
+ 'trigger' => null,
+ 'invalid' => null,
+ 'months' => null,
+ 'value' => null,
+ 'size' => null,
+ 'name' => null,
+ 'mode' => null,
+])
+
+@php
+// We only want to show the name attribute if it has been set manually
+// but not if it has been set from the `wire:model` attribute...
+$showName = isset($name);
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+ unset($attributes[$wireModel->directive]);
+
+ $wireModel->directive .= '.self';
+
+ $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+
+$months = $months ?? ($mode === 'range' ? 2 : 1);
+
+$range = $mode === 'range';
+
+$placeholder = $placeholder ?? ($range ? __('Select a date range') : __('Select a date'));
+
+// Mark it invalid if the property or any of it's nested attributes have errors...
+$invalid ??= ($name && ($errors->has($name) || $errors->has($name . '.*')));
+
+$class= Flux::classes()
+ ->add('block min-w-0')
+ // The below reverts styles added by Tailwind Forms plugin...
+ ->add('border-0 p-0 bg-transparent')
+ ;
+
+$sizeClasses = match ($size) {
+ '2xl' => $weekNumbers ? 'size-11 sm:size-14' : 'size-12 sm:size-12',
+ 'xl' => $weekNumbers ? 'size-11 sm:size-12' : 'size-12 sm:size-12',
+ 'lg' => $weekNumbers ? 'size-10 sm:size-11' : 'size-11 sm:size-11',
+ default => $weekNumbers ? 'size-10 sm:size-10' : 'size-11 sm:size-10',
+ 'sm' => $weekNumbers ? 'size-10 sm:size-9' : 'size-11 sm:size-9',
+};
+
+if ($withPresets) {
+ $presets = $presets ?? 'today yesterday thisWeek last7Days thisMonth yearToDate allTime';
+}
+
+$presetArrayOfStrings = (string) is_string($presets) ? explode(' ', $presets) : [];
+
+$presetArray = array_map(function ($preset) {
+ return Flux\DateRangePreset::from($preset);
+}, $presetArrayOfStrings);
+
+// Add support for `$value` being an array, if for example it's coming from
+// the `old()` helper or if a user prefers to pass data in as an array...
+if (is_array($value)) {
+ $value = match (true) {
+ $mode === 'range' => isset($value['start']) && isset($value['end']) ? $value['start'] . '/' . $value['end'] : null,
+ default => collect($value)->join(','),
+ };
+}
+
+if (isset($unavailable)) {
+ $unavailable = collect($unavailable)->implode(',');
+}
+@endphp
+
+
+ class($class) }}
+ data-flux-control
+ data-flux-date-picker
+ @if ($mode) mode="{{ $mode }}" @endif
+ months="1"
+ sm:months="{{ $months }}"
+ @if ($unavailable) unavailable="{{ $unavailable }}" @endif
+ @if ($showName) name="{{ $name }}" @endif
+ @if (isset($value)) value="{{ $value }}" @endif
+ >
+
+
+
+
+
+
+ @foreach ($presetArray as $preset)
+ {{ $preset->label() }}
+ @endforeach
+
+
+
+
+
+
+
+
+
+
+
{{ __('Start') }}
+
{{ __('End') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ #
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ has('static')): ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ __('Choose predefined range...') }}
+ @foreach ($presetArray as $preset)
+ {{ $preset->label() }}
+ @endforeach
+
+
+
+
+
+
+ {{ __('Cancel') }}
+
+
+
+
+
+ {{ __('Select range') }}
+
+ {{ __('Select date') }}
+
+
+
+
+
+
+
+
diff --git a/resources/views/flux/date-picker/input.blade.php b/resources/views/flux/date-picker/input.blade.php
new file mode 100644
index 0000000..bd201b1
--- /dev/null
+++ b/resources/views/flux/date-picker/input.blade.php
@@ -0,0 +1,27 @@
+@aware([ 'placeholder' ])
+
+@props([
+ 'placeholder' => null,
+ 'clearable' => false,
+ 'invalid' => null,
+ 'size' => null,
+])
+
+{{-- For Firefox, we need to reset the inputs padding back to the default as if there is no trailing icon, so the native date input calendar icon is correctly positioned... --}}
+
+
+
+
+
+
+
+ {{-- Hide this button on Firefox because we can't get rid of the default date input calendar icon, so hide ours instead... --}}
+
+
+
+ {{-- Show this button only on Firefox as it's a clickable overlay that sits over the top of the default date input calendar icon to display our date picker... --}}
+
+
diff --git a/resources/views/flux/date-picker/selected.blade.php b/resources/views/flux/date-picker/selected.blade.php
new file mode 100644
index 0000000..3f3461e
--- /dev/null
+++ b/resources/views/flux/date-picker/selected.blade.php
@@ -0,0 +1,15 @@
+@props([
+ 'placeholder' => null,
+])
+
+
+
+
+ {{ $placeholder ?? new Illuminate\Support\HtmlString('
+
+
+
+
+
+
\ No newline at end of file
diff --git a/resources/views/flux/description.blade.php b/resources/views/flux/description.blade.php
new file mode 100644
index 0000000..d01bb28
--- /dev/null
+++ b/resources/views/flux/description.blade.php
@@ -0,0 +1,4 @@
+
+class('text-sm text-zinc-500 dark:text-white/60') }} data-flux-description>
+ {{ $slot }}
+
diff --git a/resources/views/flux/dropdown.blade.php b/resources/views/flux/dropdown.blade.php
new file mode 100644
index 0000000..2c6f798
--- /dev/null
+++ b/resources/views/flux/dropdown.blade.php
@@ -0,0 +1,19 @@
+@props([
+ 'position' => 'bottom',
+ 'align' => 'start',
+])
+
+@php
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+ unset($attributes[$wireModel->directive]);
+
+ $wireModel->directive .= '.self';
+
+ $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+@endphp
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/editor/align.blade.php b/resources/views/flux/editor/align.blade.php
new file mode 100644
index 0000000..8c9f2ea
--- /dev/null
+++ b/resources/views/flux/editor/align.blade.php
@@ -0,0 +1,33 @@
+@props([
+ 'kbd' => null,
+])
+
+
+
+
+
+
+ {{ __('Left') }}
+
+
+
+
+
+
+
+
+
+ {{ __('Left') }}
+
+
+
+
+ {{ __('Center') }}
+
+
+
+
+ {{ __('Right') }}
+
+
+
diff --git a/resources/views/flux/editor/blockquote.blade.php b/resources/views/flux/editor/blockquote.blade.php
new file mode 100644
index 0000000..dd877bd
--- /dev/null
+++ b/resources/views/flux/editor/blockquote.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => '⌘+Shift+B',
+])
+
+
+
+
+
+
diff --git a/resources/views/flux/editor/bold.blade.php b/resources/views/flux/editor/bold.blade.php
new file mode 100644
index 0000000..8027909
--- /dev/null
+++ b/resources/views/flux/editor/bold.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => '⌘B',
+])
+
+
+
+
+
+
diff --git a/resources/views/flux/editor/bullet.blade.php b/resources/views/flux/editor/bullet.blade.php
new file mode 100644
index 0000000..26ec6b2
--- /dev/null
+++ b/resources/views/flux/editor/bullet.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => null,
+])
+
+
+
+
+
+
diff --git a/resources/views/flux/editor/button.blade.php b/resources/views/flux/editor/button.blade.php
new file mode 100644
index 0000000..013712c
--- /dev/null
+++ b/resources/views/flux/editor/button.blade.php
@@ -0,0 +1,34 @@
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => null,
+ 'icon' => null,
+])
+
+@php
+$iconClasses = Flux::classes()
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? ($slot->isEmpty() ? 'size-5' : 'size-4') : '')
+ ;
+
+$classes = Flux::classes()
+ ->add('p-0.5 flex items-center justify-center text-sm font-medium rounded-sm touch-manipulation')
+ ->add('text-zinc-400 data-open:text-zinc-800 hover:text-zinc-800 focus:text-zinc-800 data-match:text-zinc-800')
+ ->add('disabled:opacity-75 dark:disabled:opacity-75 disabled:cursor-default disabled:pointer-events-none')
+ ->add('dark:text-zinc-400 dark:data-open:text-white dark:hover:text-white dark:focus:text-white dark:data-match:text-white')
+ ->add('hover:bg-zinc-200 hover:text-zinc-800')
+ ->add('dark:hover:bg-white/10 dark:hover:text-white')
+;
+@endphp
+
+
+ class($classes) }}>
+
+
+
diff --git a/resources/views/flux/editor/code.blade.php b/resources/views/flux/editor/code.blade.php
new file mode 100644
index 0000000..700c620
--- /dev/null
+++ b/resources/views/flux/editor/code.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => '⌘E',
+])
+
+
+
+
+
+
diff --git a/resources/views/flux/editor/content.blade.php b/resources/views/flux/editor/content.blade.php
new file mode 100644
index 0000000..2f3f9f0
--- /dev/null
+++ b/resources/views/flux/editor/content.blade.php
@@ -0,0 +1,2 @@
+
+{{ $slot }}
diff --git a/resources/views/flux/editor/heading.blade.php b/resources/views/flux/editor/heading.blade.php
new file mode 100644
index 0000000..2751599
--- /dev/null
+++ b/resources/views/flux/editor/heading.blade.php
@@ -0,0 +1,38 @@
+@props([
+ 'kbd' => null,
+])
+
+
+
+
+
+
+ {{ __('Text') }}
+
+
+
+
+
+
+
+
+
+ {{ __('Text') }}
+
+
+
+
+ {{ __('Heading 1') }}
+
+
+
+
+ {{ __('Heading 2') }}
+
+
+
+
+ {{ __('Heading 3') }}
+
+
+
diff --git a/resources/views/flux/editor/highlight.blade.php b/resources/views/flux/editor/highlight.blade.php
new file mode 100644
index 0000000..12f3558
--- /dev/null
+++ b/resources/views/flux/editor/highlight.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => null,
+])
+
+
+
+
+
diff --git a/resources/views/flux/editor/index.blade.php b/resources/views/flux/editor/index.blade.php
new file mode 100644
index 0000000..fc1baea
--- /dev/null
+++ b/resources/views/flux/editor/index.blade.php
@@ -0,0 +1,44 @@
+@props([
+ 'toolbar' => null,
+ 'invalid' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$classes = Flux::classes()
+ ->add('block w-full')
+ ->add('shadow-xs [&[disabled]]:shadow-none border rounded-lg')
+ ->add('bg-white dark:bg-white/10 dark:[&[disabled]]:bg-white/[7%]')
+ ->add('**:data-[slot=content]:text-base! sm:**:data-[slot=content]:text-sm!')
+ ->add('**:data-[slot=content]:text-zinc-700 dark:**:data-[slot=content]:text-zinc-300')
+ ->add('[&[disabled]_[data-slot=content]]:text-zinc-500 dark:[&[disabled]_[data-slot=content]]:text-zinc-400')
+ ->add($invalid ? 'border-red-500' : 'border-zinc-200 border-b-zinc-300/80 dark:border-white/10')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif aria-label="{{ __('Rich text editor') }}" data-flux-control data-flux-editor>
+ isEmpty()): ?>
+
+
+
+@assets
+
+
+
+
+
diff --git a/resources/views/flux/editor/link.blade.php b/resources/views/flux/editor/link.blade.php
new file mode 100644
index 0000000..22c3266
--- /dev/null
+++ b/resources/views/flux/editor/link.blade.php
@@ -0,0 +1,31 @@
+@props([
+ 'kbd' => '⌘K',
+])
+
+
+
+
+
+
+
+
+
+
diff --git a/resources/views/flux/editor/option.blade.php b/resources/views/flux/editor/option.blade.php
new file mode 100644
index 0000000..afd3918
--- /dev/null
+++ b/resources/views/flux/editor/option.blade.php
@@ -0,0 +1,4 @@
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/editor/ordered.blade.php b/resources/views/flux/editor/ordered.blade.php
new file mode 100644
index 0000000..0d4e175
--- /dev/null
+++ b/resources/views/flux/editor/ordered.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => null,
+])
+
+
+
+
+
+
diff --git a/resources/views/flux/editor/redo.blade.php b/resources/views/flux/editor/redo.blade.php
new file mode 100644
index 0000000..dc8c747
--- /dev/null
+++ b/resources/views/flux/editor/redo.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => '⌘+Shift+Z',
+])
+
+
+
+
+
diff --git a/resources/views/flux/editor/scripts.blade.php b/resources/views/flux/editor/scripts.blade.php
new file mode 100644
index 0000000..ffb0a9a
--- /dev/null
+++ b/resources/views/flux/editor/scripts.blade.php
@@ -0,0 +1,2 @@
+
+{!! app('flux')->editorScripts() !!}
diff --git a/resources/views/flux/editor/separator.blade.php b/resources/views/flux/editor/separator.blade.php
new file mode 100644
index 0000000..949e430
--- /dev/null
+++ b/resources/views/flux/editor/separator.blade.php
@@ -0,0 +1,2 @@
+
+
diff --git a/resources/views/flux/editor/spacer.blade.php b/resources/views/flux/editor/spacer.blade.php
new file mode 100644
index 0000000..7253259
--- /dev/null
+++ b/resources/views/flux/editor/spacer.blade.php
@@ -0,0 +1,2 @@
+
+
diff --git a/resources/views/flux/editor/strike.blade.php b/resources/views/flux/editor/strike.blade.php
new file mode 100644
index 0000000..d149cd3
--- /dev/null
+++ b/resources/views/flux/editor/strike.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => '⌘+Shift+S',
+])
+
+
+
+
+
+
diff --git a/resources/views/flux/editor/styles.blade.php b/resources/views/flux/editor/styles.blade.php
new file mode 100644
index 0000000..6f6c56d
--- /dev/null
+++ b/resources/views/flux/editor/styles.blade.php
@@ -0,0 +1,2 @@
+
+{!! app('flux')->editorStyles() !!}
diff --git a/resources/views/flux/editor/subscript.blade.php b/resources/views/flux/editor/subscript.blade.php
new file mode 100644
index 0000000..4c25c55
--- /dev/null
+++ b/resources/views/flux/editor/subscript.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => null,
+])
+
+
+
+
+
diff --git a/resources/views/flux/editor/superscript.blade.php b/resources/views/flux/editor/superscript.blade.php
new file mode 100644
index 0000000..9ef50df
--- /dev/null
+++ b/resources/views/flux/editor/superscript.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => null,
+])
+
+
+
+
+
diff --git a/resources/views/flux/editor/toolbar.blade.php b/resources/views/flux/editor/toolbar.blade.php
new file mode 100644
index 0000000..d50d4f6
--- /dev/null
+++ b/resources/views/flux/editor/toolbar.blade.php
@@ -0,0 +1,41 @@
+@props([
+ 'items' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('block overflow-x-auto border-b border-zinc-200 dark:border-white/10 bg-zinc-50 rounded-t-[calc(0.5rem-1px)] w-full')
+ ->add('dark:bg-white/[6%]')
+ ->add('dark:border-white/5')
+;
+@endphp
+
+class($classes) }} wire:ignore aria-label="{{ __('Formatting') }}">
+
+ isNotEmpty()): ?>
+ {{ $slot }}
+
+
+ explode(' ') as $item): ?>
+
+
+
+
diff --git a/resources/views/flux/editor/underline.blade.php b/resources/views/flux/editor/underline.blade.php
new file mode 100644
index 0000000..53ec05b
--- /dev/null
+++ b/resources/views/flux/editor/underline.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => '⌘U',
+])
+
+
+
+
+
+
diff --git a/resources/views/flux/editor/undo.blade.php b/resources/views/flux/editor/undo.blade.php
new file mode 100644
index 0000000..46265c5
--- /dev/null
+++ b/resources/views/flux/editor/undo.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'kbd' => '⌘Z',
+])
+
+
+
+
+
diff --git a/resources/views/flux/error.blade.php b/resources/views/flux/error.blade.php
new file mode 100644
index 0000000..f3d3eb6
--- /dev/null
+++ b/resources/views/flux/error.blade.php
@@ -0,0 +1,26 @@
+@props([
+ 'name' => null,
+ 'message' => null,
+ 'nested' => true,
+ 'bag' => 'default',
+])
+
+@php
+$errorBag = $errors->getBag($bag);
+$message ??= $name ? $errorBag->first($name) : null;
+
+if ($name && (is_null($message) || $message === '') && filter_var($nested, FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE) !== false) {
+ $message = $errorBag->first($name . '.*');
+}
+
+$classes = Flux::classes('mt-3 text-sm font-medium text-red-500 dark:text-red-400')
+ ->add($message ? '' : 'hidden');
+@endphp
+
+class($classes) }} data-flux-error>
+
+
diff --git a/resources/views/flux/field.blade.php b/resources/views/flux/field.blade.php
new file mode 100644
index 0000000..c526b29
--- /dev/null
+++ b/resources/views/flux/field.blade.php
@@ -0,0 +1,40 @@
+@props([
+ 'variant' => 'block',
+])
+
+@php
+$classes = Flux::classes()
+ ->add('min-w-0') // This is here to allow nested input elements like flux::input.file to truncate properly...
+ ->add('[&:not(:has([data-flux-field])):has([data-flux-control][disabled])>[data-flux-label]]:opacity-50') // Dim labels for fields with no nested fields when a control is disabled...
+ ->add('[&:has(>[data-flux-radio-group][disabled])>[data-flux-label]]:opacity-50') // Special case for radio groups because they are nested fields...
+ ->add('[&:has(>[data-flux-checkbox-group][disabled])>[data-flux-label]]:opacity-50') // Special case for checkbox groups because they are nested fields...
+ ->add(match ($variant) {
+ default => 'block',
+ 'inline' => [
+ 'grid gap-x-3 gap-y-1.5',
+ 'has-[[data-flux-label]~[data-flux-control]]:grid-cols-[1fr_auto]',
+ 'has-[[data-flux-control]~[data-flux-label]]:grid-cols-[auto_1fr]',
+ '[&>[data-flux-control]~[data-flux-description]]:row-start-2 [&>[data-flux-control]~[data-flux-description]]:col-start-2',
+ '[&>[data-flux-control]~[data-flux-error]]:col-span-2 [&>[data-flux-control]~[data-flux-error]]:mt-1', // Position error messages...
+ '[&>[data-flux-label]~[data-flux-control]]:row-start-1 [&>[data-flux-label]~[data-flux-control]]:col-start-2',
+ ],
+ })
+ ->add(match ($variant) {
+ default => [ // Adjust spacing around label...
+ '*:data-flux-label:mb-3 [&>[data-flux-label]:has(+[data-flux-description])]:mb-2',
+ ],
+ 'inline' => '',
+ })
+ ->add(match ($variant) {
+ default => [ // Adjust spacing around description...
+ '[&>[data-flux-label]+[data-flux-description]]:mt-0',
+ '[&>[data-flux-label]+[data-flux-description]]:mb-3',
+ '[&>*:not([data-flux-label])+[data-flux-description]]:mt-3',
+ ],
+ 'inline' => '',
+ });
+@endphp
+
+class($classes) }} data-flux-field>
+ {{ $slot }}
+
diff --git a/resources/views/flux/fieldset.blade.php b/resources/views/flux/fieldset.blade.php
new file mode 100644
index 0000000..7d27713
--- /dev/null
+++ b/resources/views/flux/fieldset.blade.php
@@ -0,0 +1,38 @@
+@props([
+ 'legend' => null,
+ 'description' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('[&[disabled]_[data-flux-label]]:opacity-50') // Dim labels when the fieldset is disabled...
+ ->add('[&[disabled]_[data-flux-legend]]:opacity-50') // Dim legend when the fieldset is disabled...
+
+ // Adjust spacing between fields...
+ ->add('*:data-flux-field:mb-3')
+
+ // Adjust spacing between fields...
+ ->add('*:data-flux-field:mb-3')
+ ->add('[&>[data-flux-field]:has(>[data-flux-description])]:mb-4')
+ ->add('[&>[data-flux-field]:last-child]:mb-0!')
+
+ // Adjust spacing below legend...
+ ->add('[&>legend]:mb-4')
+ ->add('[&>legend:has(+[data-flux-description])]:mb-2')
+
+ // Adjust spacing below description...
+ ->add('[&>legend+[data-flux-description]]:mb-4')
+ ;
+@endphp
+
+class($classes) }} data-flux-fieldset>
+
+ {{ $legend }}
+
+
+
+ {{ $description }}
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/footer.blade.php b/resources/views/flux/footer.blade.php
new file mode 100644
index 0000000..e2e5523
--- /dev/null
+++ b/resources/views/flux/footer.blade.php
@@ -0,0 +1,11 @@
+@php
+$classes = Flux::classes('[grid-area:footer]')
+ ->add($attributes->has('container') ? '' : 'p-6 lg:p-8')
+ ;
+@endphp
+
+class($classes) }} data-flux-footer>
+
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/header.blade.php b/resources/views/flux/header.blade.php
new file mode 100644
index 0000000..9940d9b
--- /dev/null
+++ b/resources/views/flux/header.blade.php
@@ -0,0 +1,28 @@
+@props([
+ 'sticky' => null,
+ 'container' => null,
+])
+
+@php
+$classes = Flux::classes('[grid-area:header]')
+ ->add('z-10 min-h-14')
+ ->add($container ? '' : 'flex items-center px-6 lg:px-8')
+ ;
+
+if ($sticky) {
+ $attributes = $attributes->merge([
+ 'x-data' => '',
+ 'x-bind:style' => '{ position: \'sticky\', top: $el.offsetTop + \'px\', \'max-height\': \'calc(100vh - \' + $el.offsetTop + \'px)\' }',
+ ]);
+}
+@endphp
+
+class($classes) }} data-flux-header>
+ @if ($container)
+
+ {{ $slot }}
+
+ @else
+ {{ $slot }}
+ @endif
+
diff --git a/resources/views/flux/heading.blade.php b/resources/views/flux/heading.blade.php
new file mode 100644
index 0000000..60fcced
--- /dev/null
+++ b/resources/views/flux/heading.blade.php
@@ -0,0 +1,40 @@
+@props([
+ 'size' => 'base',
+ 'accent' => false,
+ 'level' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('font-medium')
+ ->add(match ($accent) {
+ true => 'text-[var(--color-accent-content)]',
+ default => '[:where(&)]:text-zinc-800 [:where(&)]:dark:text-white',
+ })
+ ->add(match ($size) {
+ 'xl' => 'text-2xl [&:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&]:mt-2',
+ 'lg' => 'text-base [&:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&]:mt-2',
+ default => 'text-sm [&:has(+[data-flux-subheading])]:mb-2 [[data-flux-subheading]+&]:mt-2',
+ })
+ ;
+@endphp
+
+
+ class($classes) }} data-flux-heading>{{ $slot }}
+
+ @break
+
+ class($classes) }} data-flux-heading>{{ $slot }}
+
+ @break
+
+ class($classes) }} data-flux-heading>{{ $slot }}
+
+ @break
+
+ class($classes) }} data-flux-heading>{{ $slot }}
+
+ @break
+
+ class($classes) }} data-flux-heading>{{ $slot }}
+
diff --git a/resources/views/flux/icon/academic-cap.blade.php b/resources/views/flux/icon/academic-cap.blade.php
new file mode 100644
index 0000000..5e03b20
--- /dev/null
+++ b/resources/views/flux/icon/academic-cap.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/adjustments-horizontal.blade.php b/resources/views/flux/icon/adjustments-horizontal.blade.php
new file mode 100644
index 0000000..8d4cb37
--- /dev/null
+++ b/resources/views/flux/icon/adjustments-horizontal.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/adjustments-vertical.blade.php b/resources/views/flux/icon/adjustments-vertical.blade.php
new file mode 100644
index 0000000..dae23f6
--- /dev/null
+++ b/resources/views/flux/icon/adjustments-vertical.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/archive-box-arrow-down.blade.php b/resources/views/flux/icon/archive-box-arrow-down.blade.php
new file mode 100644
index 0000000..a4dfa81
--- /dev/null
+++ b/resources/views/flux/icon/archive-box-arrow-down.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/archive-box-x-mark.blade.php b/resources/views/flux/icon/archive-box-x-mark.blade.php
new file mode 100644
index 0000000..9949aed
--- /dev/null
+++ b/resources/views/flux/icon/archive-box-x-mark.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/archive-box.blade.php b/resources/views/flux/icon/archive-box.blade.php
new file mode 100644
index 0000000..9c3c05c
--- /dev/null
+++ b/resources/views/flux/icon/archive-box.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-down-circle.blade.php b/resources/views/flux/icon/arrow-down-circle.blade.php
new file mode 100644
index 0000000..42f45c9
--- /dev/null
+++ b/resources/views/flux/icon/arrow-down-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-down-left.blade.php b/resources/views/flux/icon/arrow-down-left.blade.php
new file mode 100644
index 0000000..717b91d
--- /dev/null
+++ b/resources/views/flux/icon/arrow-down-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-down-on-square-stack.blade.php b/resources/views/flux/icon/arrow-down-on-square-stack.blade.php
new file mode 100644
index 0000000..c0dd86d
--- /dev/null
+++ b/resources/views/flux/icon/arrow-down-on-square-stack.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-down-on-square.blade.php b/resources/views/flux/icon/arrow-down-on-square.blade.php
new file mode 100644
index 0000000..a1475b6
--- /dev/null
+++ b/resources/views/flux/icon/arrow-down-on-square.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-down-right.blade.php b/resources/views/flux/icon/arrow-down-right.blade.php
new file mode 100644
index 0000000..4143d88
--- /dev/null
+++ b/resources/views/flux/icon/arrow-down-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-down-tray.blade.php b/resources/views/flux/icon/arrow-down-tray.blade.php
new file mode 100644
index 0000000..b0a01aa
--- /dev/null
+++ b/resources/views/flux/icon/arrow-down-tray.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-down.blade.php b/resources/views/flux/icon/arrow-down.blade.php
new file mode 100644
index 0000000..680134e
--- /dev/null
+++ b/resources/views/flux/icon/arrow-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-left-circle.blade.php b/resources/views/flux/icon/arrow-left-circle.blade.php
new file mode 100644
index 0000000..df5ccc6
--- /dev/null
+++ b/resources/views/flux/icon/arrow-left-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-left-end-on-rectangle.blade.php b/resources/views/flux/icon/arrow-left-end-on-rectangle.blade.php
new file mode 100644
index 0000000..bfbe3fc
--- /dev/null
+++ b/resources/views/flux/icon/arrow-left-end-on-rectangle.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-left-start-on-rectangle.blade.php b/resources/views/flux/icon/arrow-left-start-on-rectangle.blade.php
new file mode 100644
index 0000000..532239b
--- /dev/null
+++ b/resources/views/flux/icon/arrow-left-start-on-rectangle.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-left.blade.php b/resources/views/flux/icon/arrow-left.blade.php
new file mode 100644
index 0000000..6aecedc
--- /dev/null
+++ b/resources/views/flux/icon/arrow-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-long-down.blade.php b/resources/views/flux/icon/arrow-long-down.blade.php
new file mode 100644
index 0000000..4b28d29
--- /dev/null
+++ b/resources/views/flux/icon/arrow-long-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-long-left.blade.php b/resources/views/flux/icon/arrow-long-left.blade.php
new file mode 100644
index 0000000..261b79c
--- /dev/null
+++ b/resources/views/flux/icon/arrow-long-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-long-right.blade.php b/resources/views/flux/icon/arrow-long-right.blade.php
new file mode 100644
index 0000000..bc0a5bd
--- /dev/null
+++ b/resources/views/flux/icon/arrow-long-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-long-up.blade.php b/resources/views/flux/icon/arrow-long-up.blade.php
new file mode 100644
index 0000000..9685813
--- /dev/null
+++ b/resources/views/flux/icon/arrow-long-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-path-rounded-square.blade.php b/resources/views/flux/icon/arrow-path-rounded-square.blade.php
new file mode 100644
index 0000000..c412c82
--- /dev/null
+++ b/resources/views/flux/icon/arrow-path-rounded-square.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-path.blade.php b/resources/views/flux/icon/arrow-path.blade.php
new file mode 100644
index 0000000..99e8fc1
--- /dev/null
+++ b/resources/views/flux/icon/arrow-path.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-right-circle.blade.php b/resources/views/flux/icon/arrow-right-circle.blade.php
new file mode 100644
index 0000000..14e4ffd
--- /dev/null
+++ b/resources/views/flux/icon/arrow-right-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-right-end-on-rectangle.blade.php b/resources/views/flux/icon/arrow-right-end-on-rectangle.blade.php
new file mode 100644
index 0000000..cc0d0ff
--- /dev/null
+++ b/resources/views/flux/icon/arrow-right-end-on-rectangle.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-right-start-on-rectangle.blade.php b/resources/views/flux/icon/arrow-right-start-on-rectangle.blade.php
new file mode 100644
index 0000000..b714416
--- /dev/null
+++ b/resources/views/flux/icon/arrow-right-start-on-rectangle.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-right.blade.php b/resources/views/flux/icon/arrow-right.blade.php
new file mode 100644
index 0000000..609c0e3
--- /dev/null
+++ b/resources/views/flux/icon/arrow-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-top-right-on-square.blade.php b/resources/views/flux/icon/arrow-top-right-on-square.blade.php
new file mode 100644
index 0000000..c686905
--- /dev/null
+++ b/resources/views/flux/icon/arrow-top-right-on-square.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-trending-down.blade.php b/resources/views/flux/icon/arrow-trending-down.blade.php
new file mode 100644
index 0000000..586210b
--- /dev/null
+++ b/resources/views/flux/icon/arrow-trending-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-trending-up.blade.php b/resources/views/flux/icon/arrow-trending-up.blade.php
new file mode 100644
index 0000000..3aa69f3
--- /dev/null
+++ b/resources/views/flux/icon/arrow-trending-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-turn-down-left.blade.php b/resources/views/flux/icon/arrow-turn-down-left.blade.php
new file mode 100644
index 0000000..c4ff66e
--- /dev/null
+++ b/resources/views/flux/icon/arrow-turn-down-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-turn-down-right.blade.php b/resources/views/flux/icon/arrow-turn-down-right.blade.php
new file mode 100644
index 0000000..a28217b
--- /dev/null
+++ b/resources/views/flux/icon/arrow-turn-down-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-turn-left-down.blade.php b/resources/views/flux/icon/arrow-turn-left-down.blade.php
new file mode 100644
index 0000000..57ab796
--- /dev/null
+++ b/resources/views/flux/icon/arrow-turn-left-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-turn-left-up.blade.php b/resources/views/flux/icon/arrow-turn-left-up.blade.php
new file mode 100644
index 0000000..e1b5251
--- /dev/null
+++ b/resources/views/flux/icon/arrow-turn-left-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-turn-right-down.blade.php b/resources/views/flux/icon/arrow-turn-right-down.blade.php
new file mode 100644
index 0000000..294e7fe
--- /dev/null
+++ b/resources/views/flux/icon/arrow-turn-right-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-turn-right-up.blade.php b/resources/views/flux/icon/arrow-turn-right-up.blade.php
new file mode 100644
index 0000000..c1cf59a
--- /dev/null
+++ b/resources/views/flux/icon/arrow-turn-right-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-turn-up-left.blade.php b/resources/views/flux/icon/arrow-turn-up-left.blade.php
new file mode 100644
index 0000000..df5efbc
--- /dev/null
+++ b/resources/views/flux/icon/arrow-turn-up-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-turn-up-right.blade.php b/resources/views/flux/icon/arrow-turn-up-right.blade.php
new file mode 100644
index 0000000..3f58f4b
--- /dev/null
+++ b/resources/views/flux/icon/arrow-turn-up-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-up-circle.blade.php b/resources/views/flux/icon/arrow-up-circle.blade.php
new file mode 100644
index 0000000..fded673
--- /dev/null
+++ b/resources/views/flux/icon/arrow-up-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-up-left.blade.php b/resources/views/flux/icon/arrow-up-left.blade.php
new file mode 100644
index 0000000..9a206c9
--- /dev/null
+++ b/resources/views/flux/icon/arrow-up-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-up-on-square-stack.blade.php b/resources/views/flux/icon/arrow-up-on-square-stack.blade.php
new file mode 100644
index 0000000..d35fd37
--- /dev/null
+++ b/resources/views/flux/icon/arrow-up-on-square-stack.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-up-on-square.blade.php b/resources/views/flux/icon/arrow-up-on-square.blade.php
new file mode 100644
index 0000000..5f960cb
--- /dev/null
+++ b/resources/views/flux/icon/arrow-up-on-square.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-up-right.blade.php b/resources/views/flux/icon/arrow-up-right.blade.php
new file mode 100644
index 0000000..0651181
--- /dev/null
+++ b/resources/views/flux/icon/arrow-up-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-up-tray.blade.php b/resources/views/flux/icon/arrow-up-tray.blade.php
new file mode 100644
index 0000000..3bd2189
--- /dev/null
+++ b/resources/views/flux/icon/arrow-up-tray.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-up.blade.php b/resources/views/flux/icon/arrow-up.blade.php
new file mode 100644
index 0000000..09ee998
--- /dev/null
+++ b/resources/views/flux/icon/arrow-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-uturn-down.blade.php b/resources/views/flux/icon/arrow-uturn-down.blade.php
new file mode 100644
index 0000000..4226637
--- /dev/null
+++ b/resources/views/flux/icon/arrow-uturn-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-uturn-left.blade.php b/resources/views/flux/icon/arrow-uturn-left.blade.php
new file mode 100644
index 0000000..3d67193
--- /dev/null
+++ b/resources/views/flux/icon/arrow-uturn-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-uturn-right.blade.php b/resources/views/flux/icon/arrow-uturn-right.blade.php
new file mode 100644
index 0000000..095b929
--- /dev/null
+++ b/resources/views/flux/icon/arrow-uturn-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrow-uturn-up.blade.php b/resources/views/flux/icon/arrow-uturn-up.blade.php
new file mode 100644
index 0000000..780f3aa
--- /dev/null
+++ b/resources/views/flux/icon/arrow-uturn-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrows-pointing-in.blade.php b/resources/views/flux/icon/arrows-pointing-in.blade.php
new file mode 100644
index 0000000..2788860
--- /dev/null
+++ b/resources/views/flux/icon/arrows-pointing-in.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrows-pointing-out.blade.php b/resources/views/flux/icon/arrows-pointing-out.blade.php
new file mode 100644
index 0000000..1feb5c6
--- /dev/null
+++ b/resources/views/flux/icon/arrows-pointing-out.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrows-right-left.blade.php b/resources/views/flux/icon/arrows-right-left.blade.php
new file mode 100644
index 0000000..7b3696f
--- /dev/null
+++ b/resources/views/flux/icon/arrows-right-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/arrows-up-down.blade.php b/resources/views/flux/icon/arrows-up-down.blade.php
new file mode 100644
index 0000000..1359186
--- /dev/null
+++ b/resources/views/flux/icon/arrows-up-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/at-symbol.blade.php b/resources/views/flux/icon/at-symbol.blade.php
new file mode 100644
index 0000000..e2dde9d
--- /dev/null
+++ b/resources/views/flux/icon/at-symbol.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/backspace.blade.php b/resources/views/flux/icon/backspace.blade.php
new file mode 100644
index 0000000..083f064
--- /dev/null
+++ b/resources/views/flux/icon/backspace.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/backward.blade.php b/resources/views/flux/icon/backward.blade.php
new file mode 100644
index 0000000..4ab3d1e
--- /dev/null
+++ b/resources/views/flux/icon/backward.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/banknotes.blade.php b/resources/views/flux/icon/banknotes.blade.php
new file mode 100644
index 0000000..5fc4882
--- /dev/null
+++ b/resources/views/flux/icon/banknotes.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bars-2.blade.php b/resources/views/flux/icon/bars-2.blade.php
new file mode 100644
index 0000000..da11205
--- /dev/null
+++ b/resources/views/flux/icon/bars-2.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bars-3-bottom-left.blade.php b/resources/views/flux/icon/bars-3-bottom-left.blade.php
new file mode 100644
index 0000000..4bac79d
--- /dev/null
+++ b/resources/views/flux/icon/bars-3-bottom-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bars-3-bottom-right.blade.php b/resources/views/flux/icon/bars-3-bottom-right.blade.php
new file mode 100644
index 0000000..9d750f5
--- /dev/null
+++ b/resources/views/flux/icon/bars-3-bottom-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bars-3-center-left.blade.php b/resources/views/flux/icon/bars-3-center-left.blade.php
new file mode 100644
index 0000000..ebfc55a
--- /dev/null
+++ b/resources/views/flux/icon/bars-3-center-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bars-3.blade.php b/resources/views/flux/icon/bars-3.blade.php
new file mode 100644
index 0000000..c7defe6
--- /dev/null
+++ b/resources/views/flux/icon/bars-3.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bars-4.blade.php b/resources/views/flux/icon/bars-4.blade.php
new file mode 100644
index 0000000..a67e274
--- /dev/null
+++ b/resources/views/flux/icon/bars-4.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bars-arrow-down.blade.php b/resources/views/flux/icon/bars-arrow-down.blade.php
new file mode 100644
index 0000000..3e843a5
--- /dev/null
+++ b/resources/views/flux/icon/bars-arrow-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bars-arrow-up.blade.php b/resources/views/flux/icon/bars-arrow-up.blade.php
new file mode 100644
index 0000000..effeaa4
--- /dev/null
+++ b/resources/views/flux/icon/bars-arrow-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/battery-0.blade.php b/resources/views/flux/icon/battery-0.blade.php
new file mode 100644
index 0000000..ab1b790
--- /dev/null
+++ b/resources/views/flux/icon/battery-0.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/battery-100.blade.php b/resources/views/flux/icon/battery-100.blade.php
new file mode 100644
index 0000000..72ec26e
--- /dev/null
+++ b/resources/views/flux/icon/battery-100.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/battery-50.blade.php b/resources/views/flux/icon/battery-50.blade.php
new file mode 100644
index 0000000..074c747
--- /dev/null
+++ b/resources/views/flux/icon/battery-50.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/beaker.blade.php b/resources/views/flux/icon/beaker.blade.php
new file mode 100644
index 0000000..d3d69b8
--- /dev/null
+++ b/resources/views/flux/icon/beaker.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bell-alert.blade.php b/resources/views/flux/icon/bell-alert.blade.php
new file mode 100644
index 0000000..cf20fd1
--- /dev/null
+++ b/resources/views/flux/icon/bell-alert.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bell-slash.blade.php b/resources/views/flux/icon/bell-slash.blade.php
new file mode 100644
index 0000000..c47213f
--- /dev/null
+++ b/resources/views/flux/icon/bell-slash.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bell-snooze.blade.php b/resources/views/flux/icon/bell-snooze.blade.php
new file mode 100644
index 0000000..b3c95c2
--- /dev/null
+++ b/resources/views/flux/icon/bell-snooze.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bell.blade.php b/resources/views/flux/icon/bell.blade.php
new file mode 100644
index 0000000..5001311
--- /dev/null
+++ b/resources/views/flux/icon/bell.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bold.blade.php b/resources/views/flux/icon/bold.blade.php
new file mode 100644
index 0000000..176f0c3
--- /dev/null
+++ b/resources/views/flux/icon/bold.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bolt-slash.blade.php b/resources/views/flux/icon/bolt-slash.blade.php
new file mode 100644
index 0000000..530ff5e
--- /dev/null
+++ b/resources/views/flux/icon/bolt-slash.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bolt.blade.php b/resources/views/flux/icon/bolt.blade.php
new file mode 100644
index 0000000..cd92bef
--- /dev/null
+++ b/resources/views/flux/icon/bolt.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/book-open.blade.php b/resources/views/flux/icon/book-open.blade.php
new file mode 100644
index 0000000..cc666a4
--- /dev/null
+++ b/resources/views/flux/icon/book-open.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bookmark-slash.blade.php b/resources/views/flux/icon/bookmark-slash.blade.php
new file mode 100644
index 0000000..8cd42b6
--- /dev/null
+++ b/resources/views/flux/icon/bookmark-slash.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bookmark-square.blade.php b/resources/views/flux/icon/bookmark-square.blade.php
new file mode 100644
index 0000000..87e9734
--- /dev/null
+++ b/resources/views/flux/icon/bookmark-square.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bookmark.blade.php b/resources/views/flux/icon/bookmark.blade.php
new file mode 100644
index 0000000..30aa9c0
--- /dev/null
+++ b/resources/views/flux/icon/bookmark.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/briefcase.blade.php b/resources/views/flux/icon/briefcase.blade.php
new file mode 100644
index 0000000..0c81106
--- /dev/null
+++ b/resources/views/flux/icon/briefcase.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/bug-ant.blade.php b/resources/views/flux/icon/bug-ant.blade.php
new file mode 100644
index 0000000..8d1d10b
--- /dev/null
+++ b/resources/views/flux/icon/bug-ant.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/building-library.blade.php b/resources/views/flux/icon/building-library.blade.php
new file mode 100644
index 0000000..c6172f6
--- /dev/null
+++ b/resources/views/flux/icon/building-library.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/building-office-2.blade.php b/resources/views/flux/icon/building-office-2.blade.php
new file mode 100644
index 0000000..3d3aa2f
--- /dev/null
+++ b/resources/views/flux/icon/building-office-2.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/building-office.blade.php b/resources/views/flux/icon/building-office.blade.php
new file mode 100644
index 0000000..3ab9179
--- /dev/null
+++ b/resources/views/flux/icon/building-office.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/building-storefront.blade.php b/resources/views/flux/icon/building-storefront.blade.php
new file mode 100644
index 0000000..59137a2
--- /dev/null
+++ b/resources/views/flux/icon/building-storefront.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cake.blade.php b/resources/views/flux/icon/cake.blade.php
new file mode 100644
index 0000000..54d6c9f
--- /dev/null
+++ b/resources/views/flux/icon/cake.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/calculator.blade.php b/resources/views/flux/icon/calculator.blade.php
new file mode 100644
index 0000000..63e8dab
--- /dev/null
+++ b/resources/views/flux/icon/calculator.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/calendar-date-range.blade.php b/resources/views/flux/icon/calendar-date-range.blade.php
new file mode 100644
index 0000000..8243eef
--- /dev/null
+++ b/resources/views/flux/icon/calendar-date-range.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/calendar-days.blade.php b/resources/views/flux/icon/calendar-days.blade.php
new file mode 100644
index 0000000..684cc1f
--- /dev/null
+++ b/resources/views/flux/icon/calendar-days.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/calendar.blade.php b/resources/views/flux/icon/calendar.blade.php
new file mode 100644
index 0000000..4d4ccf0
--- /dev/null
+++ b/resources/views/flux/icon/calendar.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/camera.blade.php b/resources/views/flux/icon/camera.blade.php
new file mode 100644
index 0000000..9f762a3
--- /dev/null
+++ b/resources/views/flux/icon/camera.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chart-bar-square.blade.php b/resources/views/flux/icon/chart-bar-square.blade.php
new file mode 100644
index 0000000..1168f45
--- /dev/null
+++ b/resources/views/flux/icon/chart-bar-square.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chart-bar.blade.php b/resources/views/flux/icon/chart-bar.blade.php
new file mode 100644
index 0000000..b9bdcb2
--- /dev/null
+++ b/resources/views/flux/icon/chart-bar.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chart-pie.blade.php b/resources/views/flux/icon/chart-pie.blade.php
new file mode 100644
index 0000000..85d0ef2
--- /dev/null
+++ b/resources/views/flux/icon/chart-pie.blade.php
@@ -0,0 +1,49 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chat-bubble-bottom-center-text.blade.php b/resources/views/flux/icon/chat-bubble-bottom-center-text.blade.php
new file mode 100644
index 0000000..26d200a
--- /dev/null
+++ b/resources/views/flux/icon/chat-bubble-bottom-center-text.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chat-bubble-bottom-center.blade.php b/resources/views/flux/icon/chat-bubble-bottom-center.blade.php
new file mode 100644
index 0000000..e722293
--- /dev/null
+++ b/resources/views/flux/icon/chat-bubble-bottom-center.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chat-bubble-left-ellipsis.blade.php b/resources/views/flux/icon/chat-bubble-left-ellipsis.blade.php
new file mode 100644
index 0000000..0fe3132
--- /dev/null
+++ b/resources/views/flux/icon/chat-bubble-left-ellipsis.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chat-bubble-left-right.blade.php b/resources/views/flux/icon/chat-bubble-left-right.blade.php
new file mode 100644
index 0000000..2adfab9
--- /dev/null
+++ b/resources/views/flux/icon/chat-bubble-left-right.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chat-bubble-left.blade.php b/resources/views/flux/icon/chat-bubble-left.blade.php
new file mode 100644
index 0000000..aea41a9
--- /dev/null
+++ b/resources/views/flux/icon/chat-bubble-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chat-bubble-oval-left-ellipsis.blade.php b/resources/views/flux/icon/chat-bubble-oval-left-ellipsis.blade.php
new file mode 100644
index 0000000..9e8a569
--- /dev/null
+++ b/resources/views/flux/icon/chat-bubble-oval-left-ellipsis.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chat-bubble-oval-left.blade.php b/resources/views/flux/icon/chat-bubble-oval-left.blade.php
new file mode 100644
index 0000000..baa79e8
--- /dev/null
+++ b/resources/views/flux/icon/chat-bubble-oval-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/check-badge.blade.php b/resources/views/flux/icon/check-badge.blade.php
new file mode 100644
index 0000000..b94415e
--- /dev/null
+++ b/resources/views/flux/icon/check-badge.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/check-circle.blade.php b/resources/views/flux/icon/check-circle.blade.php
new file mode 100644
index 0000000..0d1ab60
--- /dev/null
+++ b/resources/views/flux/icon/check-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/check.blade.php b/resources/views/flux/icon/check.blade.php
new file mode 100644
index 0000000..e78c36f
--- /dev/null
+++ b/resources/views/flux/icon/check.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-double-down.blade.php b/resources/views/flux/icon/chevron-double-down.blade.php
new file mode 100644
index 0000000..f778f7b
--- /dev/null
+++ b/resources/views/flux/icon/chevron-double-down.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-double-left.blade.php b/resources/views/flux/icon/chevron-double-left.blade.php
new file mode 100644
index 0000000..e1dc712
--- /dev/null
+++ b/resources/views/flux/icon/chevron-double-left.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-double-right.blade.php b/resources/views/flux/icon/chevron-double-right.blade.php
new file mode 100644
index 0000000..8e25acd
--- /dev/null
+++ b/resources/views/flux/icon/chevron-double-right.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-double-up.blade.php b/resources/views/flux/icon/chevron-double-up.blade.php
new file mode 100644
index 0000000..b830c58
--- /dev/null
+++ b/resources/views/flux/icon/chevron-double-up.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-down.blade.php b/resources/views/flux/icon/chevron-down.blade.php
new file mode 100644
index 0000000..46f7d6d
--- /dev/null
+++ b/resources/views/flux/icon/chevron-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-left.blade.php b/resources/views/flux/icon/chevron-left.blade.php
new file mode 100644
index 0000000..d7f1efa
--- /dev/null
+++ b/resources/views/flux/icon/chevron-left.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-right.blade.php b/resources/views/flux/icon/chevron-right.blade.php
new file mode 100644
index 0000000..c36bd81
--- /dev/null
+++ b/resources/views/flux/icon/chevron-right.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-up-down.blade.php b/resources/views/flux/icon/chevron-up-down.blade.php
new file mode 100644
index 0000000..9e34e03
--- /dev/null
+++ b/resources/views/flux/icon/chevron-up-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/chevron-up.blade.php b/resources/views/flux/icon/chevron-up.blade.php
new file mode 100644
index 0000000..6b9b4ef
--- /dev/null
+++ b/resources/views/flux/icon/chevron-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/circle-stack.blade.php b/resources/views/flux/icon/circle-stack.blade.php
new file mode 100644
index 0000000..9f2f0ef
--- /dev/null
+++ b/resources/views/flux/icon/circle-stack.blade.php
@@ -0,0 +1,50 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/clipboard-document-check.blade.php b/resources/views/flux/icon/clipboard-document-check.blade.php
new file mode 100644
index 0000000..8af8792
--- /dev/null
+++ b/resources/views/flux/icon/clipboard-document-check.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/clipboard-document-list.blade.php b/resources/views/flux/icon/clipboard-document-list.blade.php
new file mode 100644
index 0000000..80cf704
--- /dev/null
+++ b/resources/views/flux/icon/clipboard-document-list.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/clipboard-document.blade.php b/resources/views/flux/icon/clipboard-document.blade.php
new file mode 100644
index 0000000..b652de9
--- /dev/null
+++ b/resources/views/flux/icon/clipboard-document.blade.php
@@ -0,0 +1,49 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/clipboard.blade.php b/resources/views/flux/icon/clipboard.blade.php
new file mode 100644
index 0000000..0ee9fe9
--- /dev/null
+++ b/resources/views/flux/icon/clipboard.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/clock.blade.php b/resources/views/flux/icon/clock.blade.php
new file mode 100644
index 0000000..3bd9655
--- /dev/null
+++ b/resources/views/flux/icon/clock.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cloud-arrow-down.blade.php b/resources/views/flux/icon/cloud-arrow-down.blade.php
new file mode 100644
index 0000000..e12bef9
--- /dev/null
+++ b/resources/views/flux/icon/cloud-arrow-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cloud-arrow-up.blade.php b/resources/views/flux/icon/cloud-arrow-up.blade.php
new file mode 100644
index 0000000..40c865b
--- /dev/null
+++ b/resources/views/flux/icon/cloud-arrow-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cloud.blade.php b/resources/views/flux/icon/cloud.blade.php
new file mode 100644
index 0000000..0a0f12f
--- /dev/null
+++ b/resources/views/flux/icon/cloud.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/code-bracket-square.blade.php b/resources/views/flux/icon/code-bracket-square.blade.php
new file mode 100644
index 0000000..1283588
--- /dev/null
+++ b/resources/views/flux/icon/code-bracket-square.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/code-bracket.blade.php b/resources/views/flux/icon/code-bracket.blade.php
new file mode 100644
index 0000000..56cd9be
--- /dev/null
+++ b/resources/views/flux/icon/code-bracket.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cog-6-tooth.blade.php b/resources/views/flux/icon/cog-6-tooth.blade.php
new file mode 100644
index 0000000..a3f4ace
--- /dev/null
+++ b/resources/views/flux/icon/cog-6-tooth.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cog-8-tooth.blade.php b/resources/views/flux/icon/cog-8-tooth.blade.php
new file mode 100644
index 0000000..01f21f8
--- /dev/null
+++ b/resources/views/flux/icon/cog-8-tooth.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cog.blade.php b/resources/views/flux/icon/cog.blade.php
new file mode 100644
index 0000000..66ea9f9
--- /dev/null
+++ b/resources/views/flux/icon/cog.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/command-line.blade.php b/resources/views/flux/icon/command-line.blade.php
new file mode 100644
index 0000000..a8511cf
--- /dev/null
+++ b/resources/views/flux/icon/command-line.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/computer-desktop.blade.php b/resources/views/flux/icon/computer-desktop.blade.php
new file mode 100644
index 0000000..e30926a
--- /dev/null
+++ b/resources/views/flux/icon/computer-desktop.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cpu-chip.blade.php b/resources/views/flux/icon/cpu-chip.blade.php
new file mode 100644
index 0000000..f7020c8
--- /dev/null
+++ b/resources/views/flux/icon/cpu-chip.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/credit-card.blade.php b/resources/views/flux/icon/credit-card.blade.php
new file mode 100644
index 0000000..6439172
--- /dev/null
+++ b/resources/views/flux/icon/credit-card.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cube-transparent.blade.php b/resources/views/flux/icon/cube-transparent.blade.php
new file mode 100644
index 0000000..5ce3ddc
--- /dev/null
+++ b/resources/views/flux/icon/cube-transparent.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cube.blade.php b/resources/views/flux/icon/cube.blade.php
new file mode 100644
index 0000000..10f36d8
--- /dev/null
+++ b/resources/views/flux/icon/cube.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/currency-bangladeshi.blade.php b/resources/views/flux/icon/currency-bangladeshi.blade.php
new file mode 100644
index 0000000..37516cc
--- /dev/null
+++ b/resources/views/flux/icon/currency-bangladeshi.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/currency-dollar.blade.php b/resources/views/flux/icon/currency-dollar.blade.php
new file mode 100644
index 0000000..fd83437
--- /dev/null
+++ b/resources/views/flux/icon/currency-dollar.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/currency-euro.blade.php b/resources/views/flux/icon/currency-euro.blade.php
new file mode 100644
index 0000000..b3d78d7
--- /dev/null
+++ b/resources/views/flux/icon/currency-euro.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/currency-pound.blade.php b/resources/views/flux/icon/currency-pound.blade.php
new file mode 100644
index 0000000..b05fe72
--- /dev/null
+++ b/resources/views/flux/icon/currency-pound.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/currency-rupee.blade.php b/resources/views/flux/icon/currency-rupee.blade.php
new file mode 100644
index 0000000..459a921
--- /dev/null
+++ b/resources/views/flux/icon/currency-rupee.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/currency-yen.blade.php b/resources/views/flux/icon/currency-yen.blade.php
new file mode 100644
index 0000000..d43f8cd
--- /dev/null
+++ b/resources/views/flux/icon/currency-yen.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cursor-arrow-rays.blade.php b/resources/views/flux/icon/cursor-arrow-rays.blade.php
new file mode 100644
index 0000000..289e9a0
--- /dev/null
+++ b/resources/views/flux/icon/cursor-arrow-rays.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/cursor-arrow-ripple.blade.php b/resources/views/flux/icon/cursor-arrow-ripple.blade.php
new file mode 100644
index 0000000..8f09543
--- /dev/null
+++ b/resources/views/flux/icon/cursor-arrow-ripple.blade.php
@@ -0,0 +1,49 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/device-phone-mobile.blade.php b/resources/views/flux/icon/device-phone-mobile.blade.php
new file mode 100644
index 0000000..6c7e366
--- /dev/null
+++ b/resources/views/flux/icon/device-phone-mobile.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/device-tablet.blade.php b/resources/views/flux/icon/device-tablet.blade.php
new file mode 100644
index 0000000..ccdc6ed
--- /dev/null
+++ b/resources/views/flux/icon/device-tablet.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/divide.blade.php b/resources/views/flux/icon/divide.blade.php
new file mode 100644
index 0000000..68b1f68
--- /dev/null
+++ b/resources/views/flux/icon/divide.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-arrow-down.blade.php b/resources/views/flux/icon/document-arrow-down.blade.php
new file mode 100644
index 0000000..04aac2a
--- /dev/null
+++ b/resources/views/flux/icon/document-arrow-down.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-arrow-up.blade.php b/resources/views/flux/icon/document-arrow-up.blade.php
new file mode 100644
index 0000000..c9fedcc
--- /dev/null
+++ b/resources/views/flux/icon/document-arrow-up.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-chart-bar.blade.php b/resources/views/flux/icon/document-chart-bar.blade.php
new file mode 100644
index 0000000..978a8d4
--- /dev/null
+++ b/resources/views/flux/icon/document-chart-bar.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-check.blade.php b/resources/views/flux/icon/document-check.blade.php
new file mode 100644
index 0000000..69829b0
--- /dev/null
+++ b/resources/views/flux/icon/document-check.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-currency-bangladeshi.blade.php b/resources/views/flux/icon/document-currency-bangladeshi.blade.php
new file mode 100644
index 0000000..684e23a
--- /dev/null
+++ b/resources/views/flux/icon/document-currency-bangladeshi.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-currency-dollar.blade.php b/resources/views/flux/icon/document-currency-dollar.blade.php
new file mode 100644
index 0000000..8df1114
--- /dev/null
+++ b/resources/views/flux/icon/document-currency-dollar.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-currency-euro.blade.php b/resources/views/flux/icon/document-currency-euro.blade.php
new file mode 100644
index 0000000..9eefa2a
--- /dev/null
+++ b/resources/views/flux/icon/document-currency-euro.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-currency-pound.blade.php b/resources/views/flux/icon/document-currency-pound.blade.php
new file mode 100644
index 0000000..8f36ba9
--- /dev/null
+++ b/resources/views/flux/icon/document-currency-pound.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-currency-rupee.blade.php b/resources/views/flux/icon/document-currency-rupee.blade.php
new file mode 100644
index 0000000..82d7797
--- /dev/null
+++ b/resources/views/flux/icon/document-currency-rupee.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-currency-yen.blade.php b/resources/views/flux/icon/document-currency-yen.blade.php
new file mode 100644
index 0000000..f1a00c9
--- /dev/null
+++ b/resources/views/flux/icon/document-currency-yen.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-duplicate.blade.php b/resources/views/flux/icon/document-duplicate.blade.php
new file mode 100644
index 0000000..74bf21e
--- /dev/null
+++ b/resources/views/flux/icon/document-duplicate.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-magnifying-glass.blade.php b/resources/views/flux/icon/document-magnifying-glass.blade.php
new file mode 100644
index 0000000..3ba65d1
--- /dev/null
+++ b/resources/views/flux/icon/document-magnifying-glass.blade.php
@@ -0,0 +1,49 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-minus.blade.php b/resources/views/flux/icon/document-minus.blade.php
new file mode 100644
index 0000000..657bc6a
--- /dev/null
+++ b/resources/views/flux/icon/document-minus.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-plus.blade.php b/resources/views/flux/icon/document-plus.blade.php
new file mode 100644
index 0000000..08d6696
--- /dev/null
+++ b/resources/views/flux/icon/document-plus.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document-text.blade.php b/resources/views/flux/icon/document-text.blade.php
new file mode 100644
index 0000000..69de413
--- /dev/null
+++ b/resources/views/flux/icon/document-text.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/document.blade.php b/resources/views/flux/icon/document.blade.php
new file mode 100644
index 0000000..4692858
--- /dev/null
+++ b/resources/views/flux/icon/document.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/ellipsis-horizontal-circle.blade.php b/resources/views/flux/icon/ellipsis-horizontal-circle.blade.php
new file mode 100644
index 0000000..5729e08
--- /dev/null
+++ b/resources/views/flux/icon/ellipsis-horizontal-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/ellipsis-horizontal.blade.php b/resources/views/flux/icon/ellipsis-horizontal.blade.php
new file mode 100644
index 0000000..f3b2df8
--- /dev/null
+++ b/resources/views/flux/icon/ellipsis-horizontal.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/ellipsis-vertical.blade.php b/resources/views/flux/icon/ellipsis-vertical.blade.php
new file mode 100644
index 0000000..b2e4c26
--- /dev/null
+++ b/resources/views/flux/icon/ellipsis-vertical.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/envelope-open.blade.php b/resources/views/flux/icon/envelope-open.blade.php
new file mode 100644
index 0000000..702a956
--- /dev/null
+++ b/resources/views/flux/icon/envelope-open.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/envelope.blade.php b/resources/views/flux/icon/envelope.blade.php
new file mode 100644
index 0000000..4056a50
--- /dev/null
+++ b/resources/views/flux/icon/envelope.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/equals.blade.php b/resources/views/flux/icon/equals.blade.php
new file mode 100644
index 0000000..416bc3e
--- /dev/null
+++ b/resources/views/flux/icon/equals.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/exclamation-circle.blade.php b/resources/views/flux/icon/exclamation-circle.blade.php
new file mode 100644
index 0000000..91b2bce
--- /dev/null
+++ b/resources/views/flux/icon/exclamation-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/exclamation-triangle.blade.php b/resources/views/flux/icon/exclamation-triangle.blade.php
new file mode 100644
index 0000000..f801f26
--- /dev/null
+++ b/resources/views/flux/icon/exclamation-triangle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/eye-dropper.blade.php b/resources/views/flux/icon/eye-dropper.blade.php
new file mode 100644
index 0000000..d602cdb
--- /dev/null
+++ b/resources/views/flux/icon/eye-dropper.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/eye-slash.blade.php b/resources/views/flux/icon/eye-slash.blade.php
new file mode 100644
index 0000000..932848d
--- /dev/null
+++ b/resources/views/flux/icon/eye-slash.blade.php
@@ -0,0 +1,49 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/eye.blade.php b/resources/views/flux/icon/eye.blade.php
new file mode 100644
index 0000000..dd4f013
--- /dev/null
+++ b/resources/views/flux/icon/eye.blade.php
@@ -0,0 +1,49 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/face-frown.blade.php b/resources/views/flux/icon/face-frown.blade.php
new file mode 100644
index 0000000..4a08b0b
--- /dev/null
+++ b/resources/views/flux/icon/face-frown.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/face-smile.blade.php b/resources/views/flux/icon/face-smile.blade.php
new file mode 100644
index 0000000..ae89134
--- /dev/null
+++ b/resources/views/flux/icon/face-smile.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/film.blade.php b/resources/views/flux/icon/film.blade.php
new file mode 100644
index 0000000..73e3e32
--- /dev/null
+++ b/resources/views/flux/icon/film.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/finger-print.blade.php b/resources/views/flux/icon/finger-print.blade.php
new file mode 100644
index 0000000..cd6d67c
--- /dev/null
+++ b/resources/views/flux/icon/finger-print.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/fire.blade.php b/resources/views/flux/icon/fire.blade.php
new file mode 100644
index 0000000..4d3895d
--- /dev/null
+++ b/resources/views/flux/icon/fire.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/flag.blade.php b/resources/views/flux/icon/flag.blade.php
new file mode 100644
index 0000000..d5b0140
--- /dev/null
+++ b/resources/views/flux/icon/flag.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/folder-arrow-down.blade.php b/resources/views/flux/icon/folder-arrow-down.blade.php
new file mode 100644
index 0000000..fec8aa5
--- /dev/null
+++ b/resources/views/flux/icon/folder-arrow-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/folder-minus.blade.php b/resources/views/flux/icon/folder-minus.blade.php
new file mode 100644
index 0000000..45cee03
--- /dev/null
+++ b/resources/views/flux/icon/folder-minus.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/folder-open.blade.php b/resources/views/flux/icon/folder-open.blade.php
new file mode 100644
index 0000000..fe1b0f0
--- /dev/null
+++ b/resources/views/flux/icon/folder-open.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/folder-plus.blade.php b/resources/views/flux/icon/folder-plus.blade.php
new file mode 100644
index 0000000..d078529
--- /dev/null
+++ b/resources/views/flux/icon/folder-plus.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/folder.blade.php b/resources/views/flux/icon/folder.blade.php
new file mode 100644
index 0000000..1eebf16
--- /dev/null
+++ b/resources/views/flux/icon/folder.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/forward.blade.php b/resources/views/flux/icon/forward.blade.php
new file mode 100644
index 0000000..a4798a6
--- /dev/null
+++ b/resources/views/flux/icon/forward.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/funnel.blade.php b/resources/views/flux/icon/funnel.blade.php
new file mode 100644
index 0000000..19c11d9
--- /dev/null
+++ b/resources/views/flux/icon/funnel.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/gif.blade.php b/resources/views/flux/icon/gif.blade.php
new file mode 100644
index 0000000..981df7a
--- /dev/null
+++ b/resources/views/flux/icon/gif.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/gift-top.blade.php b/resources/views/flux/icon/gift-top.blade.php
new file mode 100644
index 0000000..71abecd
--- /dev/null
+++ b/resources/views/flux/icon/gift-top.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/gift.blade.php b/resources/views/flux/icon/gift.blade.php
new file mode 100644
index 0000000..e178f7f
--- /dev/null
+++ b/resources/views/flux/icon/gift.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/globe-alt.blade.php b/resources/views/flux/icon/globe-alt.blade.php
new file mode 100644
index 0000000..59cc5d4
--- /dev/null
+++ b/resources/views/flux/icon/globe-alt.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/globe-americas.blade.php b/resources/views/flux/icon/globe-americas.blade.php
new file mode 100644
index 0000000..aa4b112
--- /dev/null
+++ b/resources/views/flux/icon/globe-americas.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/globe-asia-australia.blade.php b/resources/views/flux/icon/globe-asia-australia.blade.php
new file mode 100644
index 0000000..88c8067
--- /dev/null
+++ b/resources/views/flux/icon/globe-asia-australia.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/globe-europe-africa.blade.php b/resources/views/flux/icon/globe-europe-africa.blade.php
new file mode 100644
index 0000000..9a1484b
--- /dev/null
+++ b/resources/views/flux/icon/globe-europe-africa.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/h1.blade.php b/resources/views/flux/icon/h1.blade.php
new file mode 100644
index 0000000..8576a18
--- /dev/null
+++ b/resources/views/flux/icon/h1.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/h2.blade.php b/resources/views/flux/icon/h2.blade.php
new file mode 100644
index 0000000..28cb4bb
--- /dev/null
+++ b/resources/views/flux/icon/h2.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/h3.blade.php b/resources/views/flux/icon/h3.blade.php
new file mode 100644
index 0000000..84542e3
--- /dev/null
+++ b/resources/views/flux/icon/h3.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/hand-raised.blade.php b/resources/views/flux/icon/hand-raised.blade.php
new file mode 100644
index 0000000..4c16ef9
--- /dev/null
+++ b/resources/views/flux/icon/hand-raised.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/hand-thumb-down.blade.php b/resources/views/flux/icon/hand-thumb-down.blade.php
new file mode 100644
index 0000000..47f7382
--- /dev/null
+++ b/resources/views/flux/icon/hand-thumb-down.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/hand-thumb-up.blade.php b/resources/views/flux/icon/hand-thumb-up.blade.php
new file mode 100644
index 0000000..a068638
--- /dev/null
+++ b/resources/views/flux/icon/hand-thumb-up.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/hashtag.blade.php b/resources/views/flux/icon/hashtag.blade.php
new file mode 100644
index 0000000..f2e411a
--- /dev/null
+++ b/resources/views/flux/icon/hashtag.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/heart.blade.php b/resources/views/flux/icon/heart.blade.php
new file mode 100644
index 0000000..9586a07
--- /dev/null
+++ b/resources/views/flux/icon/heart.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/home-modern.blade.php b/resources/views/flux/icon/home-modern.blade.php
new file mode 100644
index 0000000..b02fe40
--- /dev/null
+++ b/resources/views/flux/icon/home-modern.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/home.blade.php b/resources/views/flux/icon/home.blade.php
new file mode 100644
index 0000000..8e5b754
--- /dev/null
+++ b/resources/views/flux/icon/home.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/identification.blade.php b/resources/views/flux/icon/identification.blade.php
new file mode 100644
index 0000000..8210e1b
--- /dev/null
+++ b/resources/views/flux/icon/identification.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/inbox-arrow-down.blade.php b/resources/views/flux/icon/inbox-arrow-down.blade.php
new file mode 100644
index 0000000..c071784
--- /dev/null
+++ b/resources/views/flux/icon/inbox-arrow-down.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/inbox-stack.blade.php b/resources/views/flux/icon/inbox-stack.blade.php
new file mode 100644
index 0000000..0a269f0
--- /dev/null
+++ b/resources/views/flux/icon/inbox-stack.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/inbox.blade.php b/resources/views/flux/icon/inbox.blade.php
new file mode 100644
index 0000000..dd45984
--- /dev/null
+++ b/resources/views/flux/icon/inbox.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/index.blade.php b/resources/views/flux/icon/index.blade.php
new file mode 100644
index 0000000..674bc81
--- /dev/null
+++ b/resources/views/flux/icon/index.blade.php
@@ -0,0 +1,12 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'icon' => null,
+ 'name' => null,
+])
+
+@php
+$icon = $name ?? $icon;
+@endphp
+
+{{ $slot }}
diff --git a/resources/views/flux/icon/information-circle.blade.php b/resources/views/flux/icon/information-circle.blade.php
new file mode 100644
index 0000000..3ac4394
--- /dev/null
+++ b/resources/views/flux/icon/information-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/italic.blade.php b/resources/views/flux/icon/italic.blade.php
new file mode 100644
index 0000000..d8c0174
--- /dev/null
+++ b/resources/views/flux/icon/italic.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/key.blade.php b/resources/views/flux/icon/key.blade.php
new file mode 100644
index 0000000..b1c71a5
--- /dev/null
+++ b/resources/views/flux/icon/key.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/language.blade.php b/resources/views/flux/icon/language.blade.php
new file mode 100644
index 0000000..2611edf
--- /dev/null
+++ b/resources/views/flux/icon/language.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/lifebuoy.blade.php b/resources/views/flux/icon/lifebuoy.blade.php
new file mode 100644
index 0000000..d63e92c
--- /dev/null
+++ b/resources/views/flux/icon/lifebuoy.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/light-bulb.blade.php b/resources/views/flux/icon/light-bulb.blade.php
new file mode 100644
index 0000000..81a809d
--- /dev/null
+++ b/resources/views/flux/icon/light-bulb.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/link-slash.blade.php b/resources/views/flux/icon/link-slash.blade.php
new file mode 100644
index 0000000..7f46ba5
--- /dev/null
+++ b/resources/views/flux/icon/link-slash.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/link.blade.php b/resources/views/flux/icon/link.blade.php
new file mode 100644
index 0000000..3a65cda
--- /dev/null
+++ b/resources/views/flux/icon/link.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/list-bullet.blade.php b/resources/views/flux/icon/list-bullet.blade.php
new file mode 100644
index 0000000..6b5f8c2
--- /dev/null
+++ b/resources/views/flux/icon/list-bullet.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/loading.blade.php b/resources/views/flux/icon/loading.blade.php
new file mode 100644
index 0000000..d141b87
--- /dev/null
+++ b/resources/views/flux/icon/loading.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class([$classes, 'animate-spin']) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
+
+
+
+
+class([$classes, 'animate-spin']) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
+
+
+
+
+class([$classes, 'animate-spin']) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
+
+
+
+
+class([$classes, 'animate-spin']) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" data-slot="icon">
+
+
+
+
diff --git a/resources/views/flux/icon/lock-closed.blade.php b/resources/views/flux/icon/lock-closed.blade.php
new file mode 100644
index 0000000..9a7650f
--- /dev/null
+++ b/resources/views/flux/icon/lock-closed.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/lock-open.blade.php b/resources/views/flux/icon/lock-open.blade.php
new file mode 100644
index 0000000..407cad2
--- /dev/null
+++ b/resources/views/flux/icon/lock-open.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/magnifying-glass-circle.blade.php b/resources/views/flux/icon/magnifying-glass-circle.blade.php
new file mode 100644
index 0000000..81ff6ba
--- /dev/null
+++ b/resources/views/flux/icon/magnifying-glass-circle.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/magnifying-glass-minus.blade.php b/resources/views/flux/icon/magnifying-glass-minus.blade.php
new file mode 100644
index 0000000..0f04ffa
--- /dev/null
+++ b/resources/views/flux/icon/magnifying-glass-minus.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/magnifying-glass-plus.blade.php b/resources/views/flux/icon/magnifying-glass-plus.blade.php
new file mode 100644
index 0000000..d5f13bd
--- /dev/null
+++ b/resources/views/flux/icon/magnifying-glass-plus.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/magnifying-glass.blade.php b/resources/views/flux/icon/magnifying-glass.blade.php
new file mode 100644
index 0000000..50bff8e
--- /dev/null
+++ b/resources/views/flux/icon/magnifying-glass.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/map-pin.blade.php b/resources/views/flux/icon/map-pin.blade.php
new file mode 100644
index 0000000..4c6e72b
--- /dev/null
+++ b/resources/views/flux/icon/map-pin.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/map.blade.php b/resources/views/flux/icon/map.blade.php
new file mode 100644
index 0000000..ce07757
--- /dev/null
+++ b/resources/views/flux/icon/map.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/megaphone.blade.php b/resources/views/flux/icon/megaphone.blade.php
new file mode 100644
index 0000000..9c2950e
--- /dev/null
+++ b/resources/views/flux/icon/megaphone.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/microphone.blade.php b/resources/views/flux/icon/microphone.blade.php
new file mode 100644
index 0000000..736aed6
--- /dev/null
+++ b/resources/views/flux/icon/microphone.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/minus-circle.blade.php b/resources/views/flux/icon/minus-circle.blade.php
new file mode 100644
index 0000000..c05b3e7
--- /dev/null
+++ b/resources/views/flux/icon/minus-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/minus.blade.php b/resources/views/flux/icon/minus.blade.php
new file mode 100644
index 0000000..e32053c
--- /dev/null
+++ b/resources/views/flux/icon/minus.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/moon.blade.php b/resources/views/flux/icon/moon.blade.php
new file mode 100644
index 0000000..f9033ab
--- /dev/null
+++ b/resources/views/flux/icon/moon.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/musical-note.blade.php b/resources/views/flux/icon/musical-note.blade.php
new file mode 100644
index 0000000..ce2e5f6
--- /dev/null
+++ b/resources/views/flux/icon/musical-note.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/newspaper.blade.php b/resources/views/flux/icon/newspaper.blade.php
new file mode 100644
index 0000000..cf28a98
--- /dev/null
+++ b/resources/views/flux/icon/newspaper.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/no-symbol.blade.php b/resources/views/flux/icon/no-symbol.blade.php
new file mode 100644
index 0000000..8daf54e
--- /dev/null
+++ b/resources/views/flux/icon/no-symbol.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/numbered-list.blade.php b/resources/views/flux/icon/numbered-list.blade.php
new file mode 100644
index 0000000..f732ea6
--- /dev/null
+++ b/resources/views/flux/icon/numbered-list.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/paint-brush.blade.php b/resources/views/flux/icon/paint-brush.blade.php
new file mode 100644
index 0000000..1bb5ac5
--- /dev/null
+++ b/resources/views/flux/icon/paint-brush.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/paper-airplane.blade.php b/resources/views/flux/icon/paper-airplane.blade.php
new file mode 100644
index 0000000..12c16db
--- /dev/null
+++ b/resources/views/flux/icon/paper-airplane.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/paper-clip.blade.php b/resources/views/flux/icon/paper-clip.blade.php
new file mode 100644
index 0000000..a014608
--- /dev/null
+++ b/resources/views/flux/icon/paper-clip.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/pause-circle.blade.php b/resources/views/flux/icon/pause-circle.blade.php
new file mode 100644
index 0000000..5fab7e4
--- /dev/null
+++ b/resources/views/flux/icon/pause-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/pause.blade.php b/resources/views/flux/icon/pause.blade.php
new file mode 100644
index 0000000..198ee2e
--- /dev/null
+++ b/resources/views/flux/icon/pause.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/pencil-square.blade.php b/resources/views/flux/icon/pencil-square.blade.php
new file mode 100644
index 0000000..b5974a1
--- /dev/null
+++ b/resources/views/flux/icon/pencil-square.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/pencil.blade.php b/resources/views/flux/icon/pencil.blade.php
new file mode 100644
index 0000000..6012f96
--- /dev/null
+++ b/resources/views/flux/icon/pencil.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/percent-badge.blade.php b/resources/views/flux/icon/percent-badge.blade.php
new file mode 100644
index 0000000..7fa2bfd
--- /dev/null
+++ b/resources/views/flux/icon/percent-badge.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/phone-arrow-down-left.blade.php b/resources/views/flux/icon/phone-arrow-down-left.blade.php
new file mode 100644
index 0000000..f0d1b6c
--- /dev/null
+++ b/resources/views/flux/icon/phone-arrow-down-left.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/phone-arrow-up-right.blade.php b/resources/views/flux/icon/phone-arrow-up-right.blade.php
new file mode 100644
index 0000000..f8ca56b
--- /dev/null
+++ b/resources/views/flux/icon/phone-arrow-up-right.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/phone-x-mark.blade.php b/resources/views/flux/icon/phone-x-mark.blade.php
new file mode 100644
index 0000000..9100946
--- /dev/null
+++ b/resources/views/flux/icon/phone-x-mark.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/phone.blade.php b/resources/views/flux/icon/phone.blade.php
new file mode 100644
index 0000000..2c0348f
--- /dev/null
+++ b/resources/views/flux/icon/phone.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/photo.blade.php b/resources/views/flux/icon/photo.blade.php
new file mode 100644
index 0000000..8bb8540
--- /dev/null
+++ b/resources/views/flux/icon/photo.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/play-circle.blade.php b/resources/views/flux/icon/play-circle.blade.php
new file mode 100644
index 0000000..e987012
--- /dev/null
+++ b/resources/views/flux/icon/play-circle.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/play-pause.blade.php b/resources/views/flux/icon/play-pause.blade.php
new file mode 100644
index 0000000..d3737ca
--- /dev/null
+++ b/resources/views/flux/icon/play-pause.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/play.blade.php b/resources/views/flux/icon/play.blade.php
new file mode 100644
index 0000000..717ae70
--- /dev/null
+++ b/resources/views/flux/icon/play.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/plus-circle.blade.php b/resources/views/flux/icon/plus-circle.blade.php
new file mode 100644
index 0000000..fc8d6b1
--- /dev/null
+++ b/resources/views/flux/icon/plus-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/plus.blade.php b/resources/views/flux/icon/plus.blade.php
new file mode 100644
index 0000000..6d94b09
--- /dev/null
+++ b/resources/views/flux/icon/plus.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/power.blade.php b/resources/views/flux/icon/power.blade.php
new file mode 100644
index 0000000..bfcb4c5
--- /dev/null
+++ b/resources/views/flux/icon/power.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/presentation-chart-bar.blade.php b/resources/views/flux/icon/presentation-chart-bar.blade.php
new file mode 100644
index 0000000..f44f659
--- /dev/null
+++ b/resources/views/flux/icon/presentation-chart-bar.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/presentation-chart-line.blade.php b/resources/views/flux/icon/presentation-chart-line.blade.php
new file mode 100644
index 0000000..ce23742
--- /dev/null
+++ b/resources/views/flux/icon/presentation-chart-line.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/printer.blade.php b/resources/views/flux/icon/printer.blade.php
new file mode 100644
index 0000000..e08de77
--- /dev/null
+++ b/resources/views/flux/icon/printer.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/puzzle-piece.blade.php b/resources/views/flux/icon/puzzle-piece.blade.php
new file mode 100644
index 0000000..51771c4
--- /dev/null
+++ b/resources/views/flux/icon/puzzle-piece.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/qr-code.blade.php b/resources/views/flux/icon/qr-code.blade.php
new file mode 100644
index 0000000..901c8c2
--- /dev/null
+++ b/resources/views/flux/icon/qr-code.blade.php
@@ -0,0 +1,52 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/question-mark-circle.blade.php b/resources/views/flux/icon/question-mark-circle.blade.php
new file mode 100644
index 0000000..d3e87a0
--- /dev/null
+++ b/resources/views/flux/icon/question-mark-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/queue-list.blade.php b/resources/views/flux/icon/queue-list.blade.php
new file mode 100644
index 0000000..310a6a2
--- /dev/null
+++ b/resources/views/flux/icon/queue-list.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/radio.blade.php b/resources/views/flux/icon/radio.blade.php
new file mode 100644
index 0000000..9ef6dfc
--- /dev/null
+++ b/resources/views/flux/icon/radio.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/receipt-percent.blade.php b/resources/views/flux/icon/receipt-percent.blade.php
new file mode 100644
index 0000000..4b6ee99
--- /dev/null
+++ b/resources/views/flux/icon/receipt-percent.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/receipt-refund.blade.php b/resources/views/flux/icon/receipt-refund.blade.php
new file mode 100644
index 0000000..eb0e720
--- /dev/null
+++ b/resources/views/flux/icon/receipt-refund.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/rectangle-group.blade.php b/resources/views/flux/icon/rectangle-group.blade.php
new file mode 100644
index 0000000..02c1d1b
--- /dev/null
+++ b/resources/views/flux/icon/rectangle-group.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/rectangle-stack.blade.php b/resources/views/flux/icon/rectangle-stack.blade.php
new file mode 100644
index 0000000..892cc6c
--- /dev/null
+++ b/resources/views/flux/icon/rectangle-stack.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/rocket-launch.blade.php b/resources/views/flux/icon/rocket-launch.blade.php
new file mode 100644
index 0000000..036a873
--- /dev/null
+++ b/resources/views/flux/icon/rocket-launch.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/rss.blade.php b/resources/views/flux/icon/rss.blade.php
new file mode 100644
index 0000000..cc78902
--- /dev/null
+++ b/resources/views/flux/icon/rss.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/scale.blade.php b/resources/views/flux/icon/scale.blade.php
new file mode 100644
index 0000000..0c799e3
--- /dev/null
+++ b/resources/views/flux/icon/scale.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/scissors.blade.php b/resources/views/flux/icon/scissors.blade.php
new file mode 100644
index 0000000..284c11c
--- /dev/null
+++ b/resources/views/flux/icon/scissors.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/server-stack.blade.php b/resources/views/flux/icon/server-stack.blade.php
new file mode 100644
index 0000000..a947762
--- /dev/null
+++ b/resources/views/flux/icon/server-stack.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/server.blade.php b/resources/views/flux/icon/server.blade.php
new file mode 100644
index 0000000..6d80c95
--- /dev/null
+++ b/resources/views/flux/icon/server.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/share.blade.php b/resources/views/flux/icon/share.blade.php
new file mode 100644
index 0000000..955ad19
--- /dev/null
+++ b/resources/views/flux/icon/share.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/shield-check.blade.php b/resources/views/flux/icon/shield-check.blade.php
new file mode 100644
index 0000000..6d64719
--- /dev/null
+++ b/resources/views/flux/icon/shield-check.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/shield-exclamation.blade.php b/resources/views/flux/icon/shield-exclamation.blade.php
new file mode 100644
index 0000000..50620de
--- /dev/null
+++ b/resources/views/flux/icon/shield-exclamation.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/shopping-bag.blade.php b/resources/views/flux/icon/shopping-bag.blade.php
new file mode 100644
index 0000000..32a9ec5
--- /dev/null
+++ b/resources/views/flux/icon/shopping-bag.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/shopping-cart.blade.php b/resources/views/flux/icon/shopping-cart.blade.php
new file mode 100644
index 0000000..d511a6b
--- /dev/null
+++ b/resources/views/flux/icon/shopping-cart.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/signal-slash.blade.php b/resources/views/flux/icon/signal-slash.blade.php
new file mode 100644
index 0000000..0b5dc51
--- /dev/null
+++ b/resources/views/flux/icon/signal-slash.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/signal.blade.php b/resources/views/flux/icon/signal.blade.php
new file mode 100644
index 0000000..b50b36c
--- /dev/null
+++ b/resources/views/flux/icon/signal.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/slash.blade.php b/resources/views/flux/icon/slash.blade.php
new file mode 100644
index 0000000..0e32d23
--- /dev/null
+++ b/resources/views/flux/icon/slash.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/sparkles.blade.php b/resources/views/flux/icon/sparkles.blade.php
new file mode 100644
index 0000000..6320975
--- /dev/null
+++ b/resources/views/flux/icon/sparkles.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/speaker-wave.blade.php b/resources/views/flux/icon/speaker-wave.blade.php
new file mode 100644
index 0000000..e1e6308
--- /dev/null
+++ b/resources/views/flux/icon/speaker-wave.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/speaker-x-mark.blade.php b/resources/views/flux/icon/speaker-x-mark.blade.php
new file mode 100644
index 0000000..6a8bf93
--- /dev/null
+++ b/resources/views/flux/icon/speaker-x-mark.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/square-2-stack.blade.php b/resources/views/flux/icon/square-2-stack.blade.php
new file mode 100644
index 0000000..123ad5e
--- /dev/null
+++ b/resources/views/flux/icon/square-2-stack.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/square-3-stack-3d.blade.php b/resources/views/flux/icon/square-3-stack-3d.blade.php
new file mode 100644
index 0000000..36edac9
--- /dev/null
+++ b/resources/views/flux/icon/square-3-stack-3d.blade.php
@@ -0,0 +1,51 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/squares-2x2.blade.php b/resources/views/flux/icon/squares-2x2.blade.php
new file mode 100644
index 0000000..71378b7
--- /dev/null
+++ b/resources/views/flux/icon/squares-2x2.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/squares-plus.blade.php b/resources/views/flux/icon/squares-plus.blade.php
new file mode 100644
index 0000000..3ffb49a
--- /dev/null
+++ b/resources/views/flux/icon/squares-plus.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/star.blade.php b/resources/views/flux/icon/star.blade.php
new file mode 100644
index 0000000..f931969
--- /dev/null
+++ b/resources/views/flux/icon/star.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/stop-circle.blade.php b/resources/views/flux/icon/stop-circle.blade.php
new file mode 100644
index 0000000..7926202
--- /dev/null
+++ b/resources/views/flux/icon/stop-circle.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/stop.blade.php b/resources/views/flux/icon/stop.blade.php
new file mode 100644
index 0000000..25fa03f
--- /dev/null
+++ b/resources/views/flux/icon/stop.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/strikethrough.blade.php b/resources/views/flux/icon/strikethrough.blade.php
new file mode 100644
index 0000000..6fa1bf0
--- /dev/null
+++ b/resources/views/flux/icon/strikethrough.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/sun.blade.php b/resources/views/flux/icon/sun.blade.php
new file mode 100644
index 0000000..40cee74
--- /dev/null
+++ b/resources/views/flux/icon/sun.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/swatch.blade.php b/resources/views/flux/icon/swatch.blade.php
new file mode 100644
index 0000000..8147d96
--- /dev/null
+++ b/resources/views/flux/icon/swatch.blade.php
@@ -0,0 +1,47 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/table-cells.blade.php b/resources/views/flux/icon/table-cells.blade.php
new file mode 100644
index 0000000..7d2bc52
--- /dev/null
+++ b/resources/views/flux/icon/table-cells.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/tag.blade.php b/resources/views/flux/icon/tag.blade.php
new file mode 100644
index 0000000..7590734
--- /dev/null
+++ b/resources/views/flux/icon/tag.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/ticket.blade.php b/resources/views/flux/icon/ticket.blade.php
new file mode 100644
index 0000000..41f1f54
--- /dev/null
+++ b/resources/views/flux/icon/ticket.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/trash.blade.php b/resources/views/flux/icon/trash.blade.php
new file mode 100644
index 0000000..84bccbb
--- /dev/null
+++ b/resources/views/flux/icon/trash.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/trophy.blade.php b/resources/views/flux/icon/trophy.blade.php
new file mode 100644
index 0000000..b1c74d4
--- /dev/null
+++ b/resources/views/flux/icon/trophy.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/truck.blade.php b/resources/views/flux/icon/truck.blade.php
new file mode 100644
index 0000000..b591821
--- /dev/null
+++ b/resources/views/flux/icon/truck.blade.php
@@ -0,0 +1,50 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/tv.blade.php b/resources/views/flux/icon/tv.blade.php
new file mode 100644
index 0000000..b325f2b
--- /dev/null
+++ b/resources/views/flux/icon/tv.blade.php
@@ -0,0 +1,48 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/underline.blade.php b/resources/views/flux/icon/underline.blade.php
new file mode 100644
index 0000000..a355a4e
--- /dev/null
+++ b/resources/views/flux/icon/underline.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/user-circle.blade.php b/resources/views/flux/icon/user-circle.blade.php
new file mode 100644
index 0000000..04a6113
--- /dev/null
+++ b/resources/views/flux/icon/user-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/user-group.blade.php b/resources/views/flux/icon/user-group.blade.php
new file mode 100644
index 0000000..403fda7
--- /dev/null
+++ b/resources/views/flux/icon/user-group.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/user-minus.blade.php b/resources/views/flux/icon/user-minus.blade.php
new file mode 100644
index 0000000..5560669
--- /dev/null
+++ b/resources/views/flux/icon/user-minus.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/user-plus.blade.php b/resources/views/flux/icon/user-plus.blade.php
new file mode 100644
index 0000000..2f03539
--- /dev/null
+++ b/resources/views/flux/icon/user-plus.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/user.blade.php b/resources/views/flux/icon/user.blade.php
new file mode 100644
index 0000000..d574276
--- /dev/null
+++ b/resources/views/flux/icon/user.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/users.blade.php b/resources/views/flux/icon/users.blade.php
new file mode 100644
index 0000000..e9a0976
--- /dev/null
+++ b/resources/views/flux/icon/users.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/variable.blade.php b/resources/views/flux/icon/variable.blade.php
new file mode 100644
index 0000000..6aec7e8
--- /dev/null
+++ b/resources/views/flux/icon/variable.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/video-camera-slash.blade.php b/resources/views/flux/icon/video-camera-slash.blade.php
new file mode 100644
index 0000000..39f52e2
--- /dev/null
+++ b/resources/views/flux/icon/video-camera-slash.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/video-camera.blade.php b/resources/views/flux/icon/video-camera.blade.php
new file mode 100644
index 0000000..2778bcb
--- /dev/null
+++ b/resources/views/flux/icon/video-camera.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/view-columns.blade.php b/resources/views/flux/icon/view-columns.blade.php
new file mode 100644
index 0000000..b2b5e68
--- /dev/null
+++ b/resources/views/flux/icon/view-columns.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/viewfinder-circle.blade.php b/resources/views/flux/icon/viewfinder-circle.blade.php
new file mode 100644
index 0000000..c8a7062
--- /dev/null
+++ b/resources/views/flux/icon/viewfinder-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/wallet.blade.php b/resources/views/flux/icon/wallet.blade.php
new file mode 100644
index 0000000..0363dda
--- /dev/null
+++ b/resources/views/flux/icon/wallet.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/wifi.blade.php b/resources/views/flux/icon/wifi.blade.php
new file mode 100644
index 0000000..2d2d73c
--- /dev/null
+++ b/resources/views/flux/icon/wifi.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/window.blade.php b/resources/views/flux/icon/window.blade.php
new file mode 100644
index 0000000..b16505d
--- /dev/null
+++ b/resources/views/flux/icon/window.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/wrench-screwdriver.blade.php b/resources/views/flux/icon/wrench-screwdriver.blade.php
new file mode 100644
index 0000000..d7c6ef7
--- /dev/null
+++ b/resources/views/flux/icon/wrench-screwdriver.blade.php
@@ -0,0 +1,49 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/wrench.blade.php b/resources/views/flux/icon/wrench.blade.php
new file mode 100644
index 0000000..bcd35fc
--- /dev/null
+++ b/resources/views/flux/icon/wrench.blade.php
@@ -0,0 +1,46 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/x-circle.blade.php b/resources/views/flux/icon/x-circle.blade.php
new file mode 100644
index 0000000..670e845
--- /dev/null
+++ b/resources/views/flux/icon/x-circle.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/icon/x-mark.blade.php b/resources/views/flux/icon/x-mark.blade.php
new file mode 100644
index 0000000..2b02a21
--- /dev/null
+++ b/resources/views/flux/icon/x-mark.blade.php
@@ -0,0 +1,45 @@
+{{-- Credit: Heroicons (https://heroicons.com) --}}
+
+@props([
+ 'variant' => 'outline',
+])
+
+@php
+$classes = Flux::classes('shrink-0')
+ ->add(match($variant) {
+ 'outline' => '[:where(&)]:size-6',
+ 'solid' => '[:where(&)]:size-6',
+ 'mini' => '[:where(&)]:size-5',
+ 'micro' => '[:where(&)]:size-4',
+ });
+@endphp
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
+class($classes) }} data-flux-icon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
+
+
+
+
+
diff --git a/resources/views/flux/input/clearable.blade.php b/resources/views/flux/input/clearable.blade.php
new file mode 100644
index 0000000..8368b66
--- /dev/null
+++ b/resources/views/flux/input/clearable.blade.php
@@ -0,0 +1,20 @@
+@php
+$attributes = $attributes->merge([
+ 'variant' => 'subtle',
+ 'class' => '-me-1 [[data-flux-input]:has(input:placeholder-shown)_&]:hidden [[data-flux-input]:has(input[disabled])_&]:hidden',
+ 'square' => true,
+ 'size' => null,
+]);
+@endphp
+
+
+
diff --git a/resources/views/flux/input/copyable.blade.php b/resources/views/flux/input/copyable.blade.php
new file mode 100644
index 0000000..ef9bfc2
--- /dev/null
+++ b/resources/views/flux/input/copyable.blade.php
@@ -0,0 +1,20 @@
+@php
+$attributes = $attributes->merge([
+ 'variant' => 'subtle',
+ 'class' => '-me-1',
+ 'square' => true,
+ 'size' => null,
+]);
+@endphp
+
+
+
diff --git a/resources/views/flux/input/expandable.blade.php b/resources/views/flux/input/expandable.blade.php
new file mode 100644
index 0000000..4c3ae1e
--- /dev/null
+++ b/resources/views/flux/input/expandable.blade.php
@@ -0,0 +1,16 @@
+@php
+$attributes = $attributes->merge([
+ 'variant' => 'subtle',
+ 'class' => '-me-1',
+ 'square' => true,
+ 'size' => null,
+]);
+@endphp
+
+
+
diff --git a/resources/views/flux/input/file.blade.php b/resources/views/flux/input/file.blade.php
new file mode 100644
index 0000000..d970dec
--- /dev/null
+++ b/resources/views/flux/input/file.blade.php
@@ -0,0 +1,68 @@
+@php
+extract(Flux::forwardedAttributes($attributes, [
+ 'name',
+ 'multiple',
+ 'size',
+]));
+@endphp
+
+@props([
+ 'name' => $attributes->whereStartsWith('wire:model')->first(),
+ 'multiple' => null,
+ 'size' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('w-full flex items-center gap-4')
+ // NOTE: We need to add relative positioning here to prevent odd overflow behaviors because of
+ // "sr-only": https://github.com/tailwindlabs/tailwindcss/discussions/12429
+ ->add('relative')
+ ;
+
+[ $styleAttributes, $attributes ] = Flux::splitAttributes($attributes);
+@endphp
+
+class($classes) }}
+ data-flux-input-file
+ wire:ignore
+ tabindex="0"
+ x-data {{-- This is here to "scope" the x-ref references inside this component from interfering with others outside... --}}
+ x-on:click.prevent.stop="$refs.input.click()"
+ x-on:keydown.enter.prevent.stop="$refs.input.click()"
+ x-on:keydown.space.prevent.stop
+ x-on:keyup.space.prevent.stop="$refs.input.click()"
+ x-on:change="$refs.name.textContent = $event.target.files[1] ? ($event.target.files.length + ' {!! __('files') !!}') : ($event.target.files[0]?.name || '{!! __('No file chosen') !!}')"
+>
+
+
+
+
+ {!! __('Choose files') !!}
+
+ {!! __('Choose file') !!}
+
+
+
+
+ {!! __('No file chosen') !!}
+
+
class($classes) }} data-flux-input-group-label>
+ {{ $slot }}
+
diff --git a/resources/views/flux/input/group/index.blade.php b/resources/views/flux/input/group/index.blade.php
new file mode 100644
index 0000000..e8bf961
--- /dev/null
+++ b/resources/views/flux/input/group/index.blade.php
@@ -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
+
+
+ class($classes) }} data-flux-input-group>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/input/group/prefix.blade.php b/resources/views/flux/input/group/prefix.blade.php
new file mode 100644
index 0000000..a8c1a3e
--- /dev/null
+++ b/resources/views/flux/input/group/prefix.blade.php
@@ -0,0 +1,14 @@
+@php
+$classes = Flux::classes([
+ 'flex items-center px-4 text-sm whitespace-nowrap',
+ 'text-zinc-800 dark:text-zinc-200',
+ 'bg-zinc-800/5 dark:bg-white/20',
+ 'border-zinc-200 dark:border-white/10',
+ 'rounded-s-lg',
+ 'border-s border-t border-b shadow-xs',
+]);
+@endphp
+
+class($classes) }} data-flux-input-group-prefix>
+ {{ $slot }}
+
diff --git a/resources/views/flux/input/group/suffix.blade.php b/resources/views/flux/input/group/suffix.blade.php
new file mode 100644
index 0000000..135dd20
--- /dev/null
+++ b/resources/views/flux/input/group/suffix.blade.php
@@ -0,0 +1,14 @@
+@php
+$classes = Flux::classes([
+ 'flex items-center px-4 text-sm whitespace-nowrap',
+ 'text-zinc-800 dark:text-zinc-200',
+ 'bg-zinc-800/5 dark:bg-white/20',
+ 'border-zinc-200 dark:border-white/10',
+ 'rounded-e-lg',
+ 'border-e border-t border-b shadow-xs',
+]);
+@endphp
+
+class($classes) }} data-flux-input-group-suffix>
+ {{ $slot }}
+
diff --git a/resources/views/flux/input/index.blade.php b/resources/views/flux/input/index.blade.php
new file mode 100644
index 0000000..c04966f
--- /dev/null
+++ b/resources/views/flux/input/index.blade.php
@@ -0,0 +1,225 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconLeading = $iconLeading ??= $attributes->pluck('icon:leading'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'name' => $attributes->whereStartsWith('wire:model')->first(),
+ 'iconVariant' => 'mini',
+ 'variant' => 'outline',
+ 'iconTrailing' => null,
+ 'iconLeading' => null,
+ 'expandable' => null,
+ 'clearable' => null,
+ 'copyable' => null,
+ 'viewable' => null,
+ 'invalid' => null,
+ 'loading' => null,
+ 'type' => 'text',
+ 'mask' => null,
+ 'size' => null,
+ 'icon' => null,
+ 'kbd' => null,
+ 'as' => null,
+])
+
+@php
+
+// There are a few loading scenarios that this covers:
+// If `:loading="false"` then never show loading.
+// If `:loading="true"` then always show loading.
+// If `:loading="foo"` then show loading when `foo` request is happening.
+// If `wire:model` then never show loading.
+// If `wire:model.live` then show loading when the `wire:model` value request is happening.
+$wireModel = $attributes->wire('model');
+$wireTarget = null;
+
+if ($loading !== false) {
+ if ($loading === true) {
+ $loading = true;
+ } elseif ($wireModel?->directive) {
+ $loading = $wireModel->hasModifier('live');
+ $wireTarget = $loading ? $wireModel->value() : null;
+ } else {
+ $wireTarget = $loading;
+ $loading = (bool) $loading;
+ }
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$iconLeading ??= $icon;
+
+$hasLeadingIcon = (bool) ($iconLeading);
+$countOfTrailingIcons = collect([
+ (bool) $iconTrailing,
+ (bool) $kbd,
+ (bool) $clearable,
+ (bool) $copyable,
+ (bool) $viewable,
+ (bool) $expandable,
+])->filter()->count();
+
+$iconClasses = Flux::classes()
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : '')
+ ;
+
+$inputLoadingClasses = Flux::classes()
+ // When loading, we need to add some extra padding to the input to account for the loading icon...
+ ->add(match ($countOfTrailingIcons) {
+ 0 => 'pe-10',
+ 1 => 'pe-16',
+ 2 => 'pe-23',
+ 3 => 'pe-30',
+ 4 => 'pe-37',
+ 5 => 'pe-44',
+ 6 => 'pe-51',
+ })
+ ;
+
+$classes = Flux::classes()
+ ->add('w-full border rounded-lg block disabled:shadow-none dark:shadow-none')
+ ->add('appearance-none') // Without this, input[type="date"] on mobile doesn't respect w-full...
+ ->add(match ($size) {
+ default => 'text-base sm:text-sm py-2 h-10 leading-[1.375rem]', // This makes the height of the input 40px (same as buttons and such...)
+ 'sm' => 'text-sm py-1.5 h-8 leading-[1.125rem]',
+ 'xs' => 'text-xs py-1.5 h-6 leading-[1.125rem]',
+ })
+ ->add(match ($hasLeadingIcon) {
+ true => 'ps-10',
+ false => 'ps-3',
+ })
+ ->add(match ($countOfTrailingIcons) {
+ // Make sure there's enough padding on the right side of the input to account for all the icons...
+ 0 => 'pe-3',
+ 1 => 'pe-10',
+ 2 => 'pe-16',
+ 3 => 'pe-23',
+ 4 => 'pe-30',
+ 5 => 'pe-37',
+ 6 => 'pe-44',
+ })
+ ->add(match ($variant) { // Background...
+ 'outline' => 'bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]',
+ 'filled' => 'bg-zinc-800/5 dark:bg-white/10 dark:disabled:bg-white/[7%]',
+ })
+ ->add(match ($variant) { // Text color
+ 'outline' => 'text-zinc-700 disabled:text-zinc-500 placeholder-zinc-400 disabled:placeholder-zinc-400/70 dark:text-zinc-300 dark:disabled:text-zinc-400 dark:placeholder-zinc-400 dark:disabled:placeholder-zinc-500',
+ 'filled' => 'text-zinc-700 placeholder-zinc-500 disabled:placeholder-zinc-400 dark:text-zinc-200 dark:placeholder-white/60 dark:disabled:placeholder-white/40',
+ })
+ ->add(match ($variant) { // Border...
+ 'outline' => $invalid ? 'border-red-500' : 'shadow-xs border-zinc-200 border-b-zinc-300/80 disabled:border-b-zinc-200 dark:border-white/10 dark:disabled:border-white/5',
+ 'filled' => $invalid ? 'border-red-500' : 'border-0',
+ })
+ ->add($attributes->pluck('class:input'))
+ ;
+@endphp
+
+
+
+
+
+
+ only('class')->class('w-full relative block group/input') }} data-flux-input>
+
+
+
+
+
attributes->class('absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 ps-3 start-0') }}>
+ {{ $iconLeading }}
+
+
+
+
except('class')->class($type === 'file' ? '' : $classes) }}
+ @isset ($name) name="{{ $name }}" @endisset
+ @if ($mask) x-mask="{{ $mask }}" @endif
+ @if ($invalid) aria-invalid="true" data-invalid @endif
+ @if (is_numeric($size)) size="{{ $size }}" @endif
+ data-flux-control
+ data-flux-group-target
+ @if ($loading) wire:loading.class="{{ $inputLoadingClasses }}" @endif
+ @if ($loading && $wireTarget) wire:target="{{ $wireTarget }}" @endif
+ >
+
+
+ {{-- Icon should be text-zinc-400/75 --}}
+
+ {{ $kbd }}
+
+
+
+
+
+
+ merge(['type' => 'button'])->class([$classes, 'w-full relative flex']) }}>
+
+
+
+
+ attributes->class('absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 ps-3 start-0') }}>
+ {{ $iconLeading }}
+
+
+
+ has('placeholder')): ?>
+
+ {{ $attributes->get('placeholder') }}
+
+
+
+ {{ $slot }}
+
+
+
+
+
+ {{ $kbd }}
+
+
+
+
+
+
+
+ attributes->class('absolute top-0 bottom-0 flex items-center justify-center text-xs text-zinc-400/75 pe-2 end-0') }}>
+ {{ $iconTrailing }}
+
+
+
+
diff --git a/resources/views/flux/input/viewable.blade.php b/resources/views/flux/input/viewable.blade.php
new file mode 100644
index 0000000..e14b586
--- /dev/null
+++ b/resources/views/flux/input/viewable.blade.php
@@ -0,0 +1,35 @@
+@php
+$attributes = $attributes->merge([
+ 'variant' => 'subtle',
+ 'class' => '-me-1',
+ 'square' => true,
+ 'size' => null,
+]);
+@endphp
+
+
+
diff --git a/resources/views/flux/label.blade.php b/resources/views/flux/label.blade.php
new file mode 100644
index 0000000..7cdde21
--- /dev/null
+++ b/resources/views/flux/label.blade.php
@@ -0,0 +1,32 @@
+@props([
+ 'badge' => null,
+ 'aside' => null,
+])
+
+@php
+ $classes = Flux::classes()
+ ->add('inline-flex items-center')
+ ->add('text-sm font-medium')
+ ->add('[:where(&)]:text-zinc-800 [:where(&)]:dark:text-white')
+ ;
+@endphp
+
+class($classes) }} data-flux-label>
+ {{ $slot }}
+
+
+
+ {{ $badge }}
+
+
+
+ {{ $badge }}
+
+
+
+
+
+ {{ $aside }}
+
+
+
diff --git a/resources/views/flux/legend.blade.php b/resources/views/flux/legend.blade.php
new file mode 100644
index 0000000..4168b50
--- /dev/null
+++ b/resources/views/flux/legend.blade.php
@@ -0,0 +1,4 @@
+
+class('text-base font-medium text-zinc-800 dark:text-white') }} data-flux-legend>
+ {{ $slot }}
+
diff --git a/resources/views/flux/link.blade.php b/resources/views/flux/link.blade.php
new file mode 100644
index 0000000..bd470cd
--- /dev/null
+++ b/resources/views/flux/link.blade.php
@@ -0,0 +1,28 @@
+@props([
+ 'external' => null,
+ 'accent' => true,
+ 'variant' => null,
+ 'strong' => false,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('inline font-medium')
+ ->add('underline-offset-[6px] hover:decoration-current')
+ ->add(match ($variant) {
+ 'ghost' => 'no-underline hover:underline',
+ 'subtle' => 'no-underline',
+ default => 'underline',
+ })
+ ->add('[[data-color]>&]:text-inherit [[data-color]>&]:decoration-current/20 dark:[[data-color]>&]:decoration-current/50 [[data-color]>&]:hover:decoration-current')
+ ->add(match ($variant) {
+ 'subtle' => 'text-zinc-500 dark:text-white/70 hover:text-zinc-800 dark:hover:text-white',
+ default => match ($accent) {
+ true => 'text-[var(--color-accent-content)] decoration-[color-mix(in_oklab,var(--color-accent-content),transparent_80%)]',
+ false => 'text-zinc-800 dark:text-white decoration-zinc-800/20 dark:decoration-white/20',
+ },
+ })
+ ;
+@endphp
+{{-- NOTE: It's important that this file has NO newline at the end of the file. --}}
+class($classes) }} data-flux-link target="_blank">{{ $slot }}
\ No newline at end of file
diff --git a/resources/views/flux/main.blade.php b/resources/views/flux/main.blade.php
new file mode 100644
index 0000000..bf5c20c
--- /dev/null
+++ b/resources/views/flux/main.blade.php
@@ -0,0 +1,15 @@
+@props([
+ 'container' => null,
+])
+
+@php
+$classes = Flux::classes('[grid-area:main]')
+ ->add('p-6 lg:p-8')
+ ->add('[[data-flux-container]_&]:px-0') // If there is a wrapping container, let IT handle the x padding...
+ ->add($container ? 'mx-auto w-full [:where(&)]:max-w-7xl' : '')
+ ;
+@endphp
+
+class($classes) }} data-flux-main>
+ {{ $slot }}
+
diff --git a/resources/views/flux/menu/checkbox/group.blade.php b/resources/views/flux/menu/checkbox/group.blade.php
new file mode 100644
index 0000000..6e31197
--- /dev/null
+++ b/resources/views/flux/menu/checkbox/group.blade.php
@@ -0,0 +1,4 @@
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/menu/checkbox/index.blade.php b/resources/views/flux/menu/checkbox/index.blade.php
new file mode 100644
index 0000000..0a2c0bf
--- /dev/null
+++ b/resources/views/flux/menu/checkbox/index.blade.php
@@ -0,0 +1,60 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'mini',
+ 'iconTrailing' => null,
+ 'variant' => 'default',
+ 'indent' => false,
+ 'suffix' => null,
+ 'label' => null,
+ 'kbd' => null,
+])
+
+@php
+if ($kbd) $suffix = $kbd;
+
+$iconClasses = Flux::classes()
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : null)
+ ;
+
+$iconTrailingClasses = Flux::classes()
+ ->add('ms-auto')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : null)
+ ;
+
+$classes = Flux::classes()
+ ->add('group/menu-checkbox flex items-center px-2 py-1.5 w-full focus:outline-hidden')
+ ->add('rounded-md')
+ ->add('text-start text-sm font-medium')
+ ->add('[[disabled]_&]:opacity-50 [&[disabled]]:opacity-50')
+ ->add([
+ 'text-zinc-800 data-active:bg-zinc-50 dark:text-white dark:data-active:bg-zinc-600',
+ '**:data-flux-menu-item-icon:text-zinc-400 dark:**:data-flux-menu-item-icon:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
+ ])
+ ;
+@endphp
+
+class($classes) }} data-flux-menu-item-has-icon data-flux-menu-checkbox>
+
+
+
+
+ {{ $label ?? $slot }}
+
+
+
+ {{ $suffix }}
+
+
+
+
+
diff --git a/resources/views/flux/menu/group.blade.php b/resources/views/flux/menu/group.blade.php
new file mode 100644
index 0000000..e949124
--- /dev/null
+++ b/resources/views/flux/menu/group.blade.php
@@ -0,0 +1,22 @@
+@props([
+ 'heading' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('-mx-[.3125rem] px-[.3125rem]')
+ ->add('[&+&>[data-flux-menu-separator-top]]:hidden [&:first-child>[data-flux-menu-separator-top]]:hidden [&:last-child>[data-flux-menu-separator-bottom]]:hidden')
+ ;
+@endphp
+
+class($classes) }} role="group" data-flux-menu-group>
+ {{ $heading }}
+
+
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/menu/heading.blade.php b/resources/views/flux/menu/heading.blade.php
new file mode 100644
index 0000000..f5cb563
--- /dev/null
+++ b/resources/views/flux/menu/heading.blade.php
@@ -0,0 +1,14 @@
+@php
+$classes = Flux::classes([
+ 'p-2 pb-1 w-full',
+ 'flex items-center',
+ 'text-start text-xs font-medium',
+ 'text-zinc-500 font-medium dark:text-zinc-300',
+]);
+@endphp
+
+class($classes) }} data-flux-menu-heading>
+
+
+
{{ $slot }}
+
class($classes) }}
+ popover="manual"
+ data-flux-menu
+>
+ {{ $slot }}
+
diff --git a/resources/views/flux/menu/item.blade.php b/resources/views/flux/menu/item.blade.php
new file mode 100644
index 0000000..a8f8260
--- /dev/null
+++ b/resources/views/flux/menu/item.blade.php
@@ -0,0 +1,79 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconTrailing' => null,
+ 'iconVariant' => 'mini',
+ 'variant' => 'default',
+ 'suffix' => null,
+ 'value' => null,
+ 'icon' => null,
+ 'kbd' => null,
+])
+
+@php
+if ($kbd) $suffix = $kbd;
+
+$iconClasses = Flux::classes()
+ ->add('me-2')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : null)
+ ;
+
+$trailingIconClasses = Flux::classes()
+ ->add('ms-auto text-zinc-400 [[data-flux-menu-item-icon]:hover_&]:text-current')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : null)
+ ;
+
+$classes = Flux::classes()
+ ->add('flex items-center px-2 py-1.5 w-full focus:outline-hidden')
+ ->add('rounded-md')
+ ->add('text-start text-sm font-medium')
+ ->add('[&[disabled]]:opacity-50')
+ ->add(match ($variant) {
+ 'danger' => [
+ 'text-zinc-800 data-active:text-red-600 data-active:bg-red-50 dark:text-white dark:data-active:bg-red-400/20 dark:data-active:text-red-400',
+ '**:data-flux-menu-item-icon:text-zinc-400 dark:**:data-flux-menu-item-icon:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
+ ],
+ 'default' => [
+ 'text-zinc-800 data-active:bg-zinc-50 dark:text-white dark:data-active:bg-zinc-600',
+ '**:data-flux-menu-item-icon:text-zinc-400 dark:**:data-flux-menu-item-icon:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
+ ]
+ })
+ ;
+
+$suffixClasses = Flux::classes()
+ ->add('ms-auto text-xs text-zinc-400')
+ ;
+@endphp
+
+
+
+
+ {{ $suffix }}
+
+
+ {{ $suffix }}
+
+
+
+
+
diff --git a/resources/views/flux/menu/radio/group.blade.php b/resources/views/flux/menu/radio/group.blade.php
new file mode 100644
index 0000000..24619dd
--- /dev/null
+++ b/resources/views/flux/menu/radio/group.blade.php
@@ -0,0 +1,4 @@
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/menu/radio/index.blade.php b/resources/views/flux/menu/radio/index.blade.php
new file mode 100644
index 0000000..e9a74bb
--- /dev/null
+++ b/resources/views/flux/menu/radio/index.blade.php
@@ -0,0 +1,60 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'mini',
+ 'iconTrailing' => null,
+ 'variant' => 'default',
+ 'indent' => false,
+ 'suffix' => null,
+ 'label' => null,
+ 'kbd' => null,
+])
+
+@php
+if ($kbd) $suffix = $kbd;
+
+$iconClasses = Flux::classes()
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : null)
+ ;
+
+$iconTrailingClasses = Flux::classes()
+ ->add('ms-auto')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : null)
+ ;
+
+$classes = Flux::classes()
+ ->add('group/menu-radio flex items-center px-2 py-1.5 w-full focus:outline-hidden')
+ ->add('rounded-md')
+ ->add('text-start text-sm font-medium')
+ ->add('[[disabled]_&]:opacity-50 [&[disabled]]:opacity-50')
+ ->add([
+ 'text-zinc-800 data-active:bg-zinc-50 dark:text-white dark:data-active:bg-zinc-600',
+ '**:data-flux-menu-item-icon:text-zinc-400 dark:**:data-flux-menu-item-icon:text-white/60 [&[data-active]_[data-flux-menu-item-icon]]:text-current',
+ ])
+ ;
+@endphp
+
+class($classes) }} data-flux-menu-item-has-icon data-flux-menu-radio>
+
+
+
+
+ {{ $label ?? $slot }}
+
+
+
+ {{ $suffix }}
+
+
+
+
+
diff --git a/resources/views/flux/menu/separator.blade.php b/resources/views/flux/menu/separator.blade.php
new file mode 100644
index 0000000..9f44388
--- /dev/null
+++ b/resources/views/flux/menu/separator.blade.php
@@ -0,0 +1,4 @@
+
+
+
diff --git a/resources/views/flux/menu/submenu.blade.php b/resources/views/flux/menu/submenu.blade.php
new file mode 100644
index 0000000..57b7e34
--- /dev/null
+++ b/resources/views/flux/menu/submenu.blade.php
@@ -0,0 +1,38 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'mini',
+ 'iconTrailing' => null,
+ 'heading' => '',
+ 'icon' => null,
+ 'keepOpen' => false,
+])
+
+@php
+$iconClasses = Flux::classes()
+ ->add('ms-auto text-zinc-400 [[data-flux-menu-item]:hover_&]:text-current')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : '');
+@endphp
+
+
+
+ {{ $heading }}
+
+
+
+
+
+
+
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/modal/close.blade.php b/resources/views/flux/modal/close.blade.php
new file mode 100644
index 0000000..91934b9
--- /dev/null
+++ b/resources/views/flux/modal/close.blade.php
@@ -0,0 +1,4 @@
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/modal/index.blade.php b/resources/views/flux/modal/index.blade.php
new file mode 100644
index 0000000..26ce1da
--- /dev/null
+++ b/resources/views/flux/modal/index.blade.php
@@ -0,0 +1,94 @@
+@props([
+ 'dismissible' => null,
+ 'position' => null,
+ 'closable' => null,
+ 'trigger' => null,
+ 'variant' => null,
+ 'name' => null,
+])
+
+@php
+$closable ??= $variant === 'bare' ? false : true;
+
+$classes = Flux::classes()
+ ->add(match ($variant) {
+ default => 'p-6 [:where(&)]:max-w-xl shadow-lg rounded-xl',
+ 'flyout' => match($position) {
+ 'bottom' => 'fixed m-0 p-8 min-w-[100vw] overflow-y-auto mt-auto [--fx-flyout-translate:translateY(50px)] border-t',
+ 'left' => 'fixed m-0 p-8 max-h-dvh min-h-dvh md:[:where(&)]:min-w-[25rem] overflow-y-auto mr-auto [--fx-flyout-translate:translateX(-50px)] border-e rtl:mr-0 rtl:ml-auto rtl:[--fx-flyout-translate:translateX(50px)]',
+ default => 'fixed m-0 p-8 max-h-dvh min-h-dvh md:[:where(&)]:min-w-[25rem] overflow-y-auto ml-auto [--fx-flyout-translate:translateX(50px)] border-s rtl:ml-0 rtl:mr-auto rtl:[--fx-flyout-translate:translateX(-50px)]',
+ },
+ 'bare' => '',
+ })
+ ->add(match ($variant) {
+ default => 'bg-white dark:bg-zinc-800 border border-transparent dark:border-zinc-700',
+ 'flyout' => 'bg-white dark:bg-zinc-800 border-transparent dark:border-zinc-700',
+ 'bare' => 'bg-transparent',
+ });
+
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+ unset($attributes[$wireModel->directive]);
+
+ $wireModel->directive .= '.self';
+
+ $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+
+// Support syntax...
+if ($attributes['@close'] ?? null) {
+ $attributes['wire:close'] = $attributes['@close'];
+
+ unset($attributes['@close']);
+}
+
+// Support syntax...
+if ($attributes['@cancel'] ?? null) {
+ $attributes['wire:cancel'] = $attributes['@cancel'];
+
+ unset($attributes['@cancel']);
+}
+
+if ($dismissible === false) {
+ $attributes = $attributes->merge(['disable-click-outside' => '']);
+}
+
+[ $styleAttributes, $attributes ] = Flux::splitAttributes($attributes, ['autofocus', 'class', 'style', 'wire:close', 'x-on:close', 'wire:cancel', 'x-on:cancel']);
+@endphp
+
+
+
+ {{ $trigger }}
+
+
+ class($classes) }}
+ @if ($name) data-modal="{{ $name }}" @endif
+ @if ($variant === 'flyout') data-flux-flyout @endif
+ x-data
+ @isset($__livewire)
+ x-on:modal-show.document="
+ if ($event.detail.name === @js($name) && ($event.detail.scope === @js($__livewire->getId()))) $el.showModal();
+ if ($event.detail.name === @js($name) && (! $event.detail.scope)) $el.showModal();
+ "
+ x-on:modal-close.document="
+ if ($event.detail.name === @js($name) && ($event.detail.scope === @js($__livewire->getId()))) $el.close();
+ if (! $event.detail.name || ($event.detail.name === @js($name) && (! $event.detail.scope))) $el.close();
+ "
+ @else
+ x-on:modal-show.document="if ($event.detail.name === @js($name) && (! $event.detail.scope)) $el.showModal()"
+ x-on:modal-close.document="if (! $event.detail.name || ($event.detail.name === @js($name) && (! $event.detail.scope))) $el.close()"
+ @endif
+ >
+ {{ $slot }}
+
+
+
+
+
+
+
+
+
diff --git a/resources/views/flux/modal/trigger.blade.php b/resources/views/flux/modal/trigger.blade.php
new file mode 100644
index 0000000..6374c71
--- /dev/null
+++ b/resources/views/flux/modal/trigger.blade.php
@@ -0,0 +1,16 @@
+@props([
+ 'shortcut' => null,
+ 'name' => null,
+])
+
+class('contents') }}
+ x-data
+ x-on:click="$el.querySelector('button[disabled]') || $dispatch('modal-show', { name: '{{ $name }}' })"
+ @if ($shortcut)
+ x-on:keydown.{{ $shortcut }}.document="$event.preventDefault(); $dispatch('modal-show', { name: '{{ $name }}' })"
+ @endif
+ data-flux-modal-trigger
+>
+ {{ $slot }}
+
diff --git a/resources/views/flux/navbar/badge.blade.php b/resources/views/flux/navbar/badge.blade.php
new file mode 100644
index 0000000..da2f736
--- /dev/null
+++ b/resources/views/flux/navbar/badge.blade.php
@@ -0,0 +1,54 @@
+@props([
+ 'variant' => null,
+ 'color' => null,
+])
+
+@php
+$class = Flux::classes()
+ ->add('text-xs font-medium rounded-sm px-1 py-0.5')
+ /**
+ * We can't compile classes for each color because of variants color to color and Tailwind's JIT compiler.
+ * We instead need to write out each one by hand. Sorry...
+ */
+ ->add($variant === 'solid' ? match ($color) {
+ default => 'text-white dark:text-white bg-zinc-600 dark:bg-zinc-600',
+ 'red' => 'text-white dark:text-white bg-red-500 dark:bg-red-600',
+ 'orange' => 'text-white dark:text-white bg-orange-500 dark:bg-orange-600',
+ 'amber' => 'text-white dark:text-zinc-950 bg-amber-500 dark:bg-amber-500',
+ 'yellow' => 'text-white dark:text-zinc-950 bg-yellow-500 dark:bg-yellow-400',
+ 'lime' => 'text-white dark:text-white bg-lime-500 dark:bg-lime-600',
+ 'green' => 'text-white dark:text-white bg-green-500 dark:bg-green-600',
+ 'emerald' => 'text-white dark:text-white bg-emerald-500 dark:bg-emerald-600',
+ 'teal' => 'text-white dark:text-white bg-teal-500 dark:bg-teal-600',
+ 'cyan' => 'text-white dark:text-white bg-cyan-500 dark:bg-cyan-600',
+ 'sky' => 'text-white dark:text-white bg-sky-500 dark:bg-sky-600',
+ 'blue' => 'text-white dark:text-white bg-blue-500 dark:bg-blue-600',
+ 'indigo' => 'text-white dark:text-white bg-indigo-500 dark:bg-indigo-600',
+ 'violet' => 'text-white dark:text-white bg-violet-500 dark:bg-violet-600',
+ 'purple' => 'text-white dark:text-white bg-purple-500 dark:bg-purple-600',
+ 'fuchsia' => 'text-white dark:text-white bg-fuchsia-500 dark:bg-fuchsia-600',
+ 'pink' => 'text-white dark:text-white bg-pink-500 dark:bg-pink-600',
+ 'rose' => 'text-white dark:text-white bg-rose-500 dark:bg-rose-600',
+ } : match ($color) {
+ default => 'text-zinc-700 dark:text-zinc-200 bg-zinc-400/15 dark:bg-zinc-400/40',
+ 'red' => 'text-red-700 dark:text-red-200 bg-red-400/20 dark:bg-red-400/40',
+ 'orange' => 'text-orange-700 dark:text-orange-200 bg-orange-400/20 dark:bg-orange-400/40',
+ 'amber' => 'text-amber-700 dark:text-amber-200 bg-amber-400/25 dark:bg-amber-400/40',
+ 'yellow' => 'text-yellow-800 dark:text-yellow-200 bg-yellow-400/25 dark:bg-yellow-400/40',
+ 'lime' => 'text-lime-800 dark:text-lime-200 bg-lime-400/25 dark:bg-lime-400/40',
+ 'green' => 'text-green-800 dark:text-green-200 bg-green-400/20 dark:bg-green-400/40',
+ 'emerald' => 'text-emerald-800 dark:text-emerald-200 bg-emerald-400/20 dark:bg-emerald-400/40',
+ 'teal' => 'text-teal-800 dark:text-teal-200 bg-teal-400/20 dark:bg-teal-400/40',
+ 'cyan' => 'text-cyan-800 dark:text-cyan-200 bg-cyan-400/20 dark:bg-cyan-400/40',
+ 'sky' => 'text-sky-800 dark:text-sky-200 bg-sky-400/20 dark:bg-sky-400/40',
+ 'blue' => 'text-blue-800 dark:text-blue-200 bg-blue-400/20 dark:bg-blue-400/40',
+ 'indigo' => 'text-indigo-700 dark:text-indigo-200 bg-indigo-400/20 dark:bg-indigo-400/40',
+ 'violet' => 'text-violet-700 dark:text-violet-200 bg-violet-400/20 dark:bg-violet-400/40',
+ 'purple' => 'text-purple-700 dark:text-purple-200 bg-purple-400/20 dark:bg-purple-400/40',
+ 'fuchsia' => 'text-fuchsia-700 dark:text-fuchsia-200 bg-fuchsia-400/20 dark:bg-fuchsia-400/40',
+ 'pink' => 'text-pink-700 dark:text-pink-200 bg-pink-400/20 dark:bg-pink-400/40',
+ 'rose' => 'text-rose-700 dark:text-rose-200 bg-rose-400/20 dark:bg-rose-400/40',
+ });
+@endphp
+
+class($class) }}>{{ $slot }}
diff --git a/resources/views/flux/navbar/index.blade.php b/resources/views/flux/navbar/index.blade.php
new file mode 100644
index 0000000..3d5df47
--- /dev/null
+++ b/resources/views/flux/navbar/index.blade.php
@@ -0,0 +1,15 @@
+@props([
+ 'scrollable' => false,
+ 'variant' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('flex items-center gap-1 py-3')
+ ->add($scrollable ? ['overflow-x-auto overflow-y-hidden'] : [])
+ ;
+@endphp
+
+class($classes) }} data-flux-navbar>
+ {{ $slot }}
+
diff --git a/resources/views/flux/navbar/item.blade.php b/resources/views/flux/navbar/item.blade.php
new file mode 100644
index 0000000..262ee6b
--- /dev/null
+++ b/resources/views/flux/navbar/item.blade.php
@@ -0,0 +1,81 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'variant' ])
+
+@props([
+ 'iconVariant' => 'outline',
+ 'iconTrailing' => null,
+ 'badgeColor' => null,
+ 'variant' => null,
+ 'iconDot' => null,
+ 'accent' => true,
+ 'square' => null,
+ 'badge' => null,
+ 'icon' => null,
+])
+
+@php
+// Button should be a square if it has no text contents...
+$square ??= $slot->isEmpty();
+
+// Size-up icons in square/icon-only buttons...
+$iconClasses = Flux::classes($square ? 'size-6' : 'size-5');
+
+$classes = Flux::classes()
+ ->add('px-3 h-8 flex items-center rounded-lg')
+ ->add('relative') // This is here for the "active" bar at the bottom to be positioned correctly...
+ ->add($square ? '' : 'px-2.5!')
+ ->add('text-zinc-500 dark:text-white/80 ')
+ // Styles for when this link is the "current" one...
+ ->add('data-current:after:absolute data-current:after:-bottom-3 data-current:after:inset-x-0 data-current:after:h-[2px]')
+ ->add([
+ '[--hover-fill:color-mix(in_oklab,_var(--color-accent-content),_transparent_90%)]',
+
+ ])
+ ->add(match ($accent) {
+ true => [
+ 'hover:text-zinc-800 dark:hover:text-white',
+ 'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content) hover:bg-zinc-800/5 dark:hover:bg-white/10 hover:data-current:bg-(--hover-fill)',
+ 'data-current:after:bg-(--color-accent-content)',
+ ],
+ false => [
+ 'hover:text-zinc-800 dark:hover:text-white',
+ 'data-current:text-zinc-800 dark:data-current:text-zinc-100 hover:bg-zinc-100 dark:hover:bg-white/10',
+ 'data-current:after:bg-zinc-800 dark:data-current:after:bg-white',
+ ],
+ })
+ ;
+@endphp
+
+
+
+
+
+
+
+ {{ $icon }}
+
+
+
+
+
+
{{ $badge }}
+
+
diff --git a/resources/views/flux/navlist/badge.blade.php b/resources/views/flux/navlist/badge.blade.php
new file mode 100644
index 0000000..da2f736
--- /dev/null
+++ b/resources/views/flux/navlist/badge.blade.php
@@ -0,0 +1,54 @@
+@props([
+ 'variant' => null,
+ 'color' => null,
+])
+
+@php
+$class = Flux::classes()
+ ->add('text-xs font-medium rounded-sm px-1 py-0.5')
+ /**
+ * We can't compile classes for each color because of variants color to color and Tailwind's JIT compiler.
+ * We instead need to write out each one by hand. Sorry...
+ */
+ ->add($variant === 'solid' ? match ($color) {
+ default => 'text-white dark:text-white bg-zinc-600 dark:bg-zinc-600',
+ 'red' => 'text-white dark:text-white bg-red-500 dark:bg-red-600',
+ 'orange' => 'text-white dark:text-white bg-orange-500 dark:bg-orange-600',
+ 'amber' => 'text-white dark:text-zinc-950 bg-amber-500 dark:bg-amber-500',
+ 'yellow' => 'text-white dark:text-zinc-950 bg-yellow-500 dark:bg-yellow-400',
+ 'lime' => 'text-white dark:text-white bg-lime-500 dark:bg-lime-600',
+ 'green' => 'text-white dark:text-white bg-green-500 dark:bg-green-600',
+ 'emerald' => 'text-white dark:text-white bg-emerald-500 dark:bg-emerald-600',
+ 'teal' => 'text-white dark:text-white bg-teal-500 dark:bg-teal-600',
+ 'cyan' => 'text-white dark:text-white bg-cyan-500 dark:bg-cyan-600',
+ 'sky' => 'text-white dark:text-white bg-sky-500 dark:bg-sky-600',
+ 'blue' => 'text-white dark:text-white bg-blue-500 dark:bg-blue-600',
+ 'indigo' => 'text-white dark:text-white bg-indigo-500 dark:bg-indigo-600',
+ 'violet' => 'text-white dark:text-white bg-violet-500 dark:bg-violet-600',
+ 'purple' => 'text-white dark:text-white bg-purple-500 dark:bg-purple-600',
+ 'fuchsia' => 'text-white dark:text-white bg-fuchsia-500 dark:bg-fuchsia-600',
+ 'pink' => 'text-white dark:text-white bg-pink-500 dark:bg-pink-600',
+ 'rose' => 'text-white dark:text-white bg-rose-500 dark:bg-rose-600',
+ } : match ($color) {
+ default => 'text-zinc-700 dark:text-zinc-200 bg-zinc-400/15 dark:bg-zinc-400/40',
+ 'red' => 'text-red-700 dark:text-red-200 bg-red-400/20 dark:bg-red-400/40',
+ 'orange' => 'text-orange-700 dark:text-orange-200 bg-orange-400/20 dark:bg-orange-400/40',
+ 'amber' => 'text-amber-700 dark:text-amber-200 bg-amber-400/25 dark:bg-amber-400/40',
+ 'yellow' => 'text-yellow-800 dark:text-yellow-200 bg-yellow-400/25 dark:bg-yellow-400/40',
+ 'lime' => 'text-lime-800 dark:text-lime-200 bg-lime-400/25 dark:bg-lime-400/40',
+ 'green' => 'text-green-800 dark:text-green-200 bg-green-400/20 dark:bg-green-400/40',
+ 'emerald' => 'text-emerald-800 dark:text-emerald-200 bg-emerald-400/20 dark:bg-emerald-400/40',
+ 'teal' => 'text-teal-800 dark:text-teal-200 bg-teal-400/20 dark:bg-teal-400/40',
+ 'cyan' => 'text-cyan-800 dark:text-cyan-200 bg-cyan-400/20 dark:bg-cyan-400/40',
+ 'sky' => 'text-sky-800 dark:text-sky-200 bg-sky-400/20 dark:bg-sky-400/40',
+ 'blue' => 'text-blue-800 dark:text-blue-200 bg-blue-400/20 dark:bg-blue-400/40',
+ 'indigo' => 'text-indigo-700 dark:text-indigo-200 bg-indigo-400/20 dark:bg-indigo-400/40',
+ 'violet' => 'text-violet-700 dark:text-violet-200 bg-violet-400/20 dark:bg-violet-400/40',
+ 'purple' => 'text-purple-700 dark:text-purple-200 bg-purple-400/20 dark:bg-purple-400/40',
+ 'fuchsia' => 'text-fuchsia-700 dark:text-fuchsia-200 bg-fuchsia-400/20 dark:bg-fuchsia-400/40',
+ 'pink' => 'text-pink-700 dark:text-pink-200 bg-pink-400/20 dark:bg-pink-400/40',
+ 'rose' => 'text-rose-700 dark:text-rose-200 bg-rose-400/20 dark:bg-rose-400/40',
+ });
+@endphp
+
+class($class) }}>{{ $slot }}
diff --git a/resources/views/flux/navlist/group.blade.php b/resources/views/flux/navlist/group.blade.php
new file mode 100644
index 0000000..038219d
--- /dev/null
+++ b/resources/views/flux/navlist/group.blade.php
@@ -0,0 +1,38 @@
+@props([
+ 'expandable' => false,
+ 'expanded' => true,
+ 'heading' => null,
+])
+
+
+ class('group/disclosure') }} @if ($expanded === true) open @endif data-flux-navlist-group>
+
+
+
+
+ {{ $heading }}
+
+
+
+
+
+ class('block space-y-[2px]') }}>
+
+
+
+ {{ $slot }}
+
+
class('block space-y-[2px]') }}>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/navlist/index.blade.php b/resources/views/flux/navlist/index.blade.php
new file mode 100644
index 0000000..8aa99c8
--- /dev/null
+++ b/resources/views/flux/navlist/index.blade.php
@@ -0,0 +1,14 @@
+@props([
+ 'variant' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('flex flex-col')
+ ->add('overflow-visible min-h-auto')
+ ;
+@endphp
+
+class($classes) }} data-flux-navlist>
+ {{ $slot }}
+
diff --git a/resources/views/flux/navlist/item.blade.php b/resources/views/flux/navlist/item.blade.php
new file mode 100644
index 0000000..67bc241
--- /dev/null
+++ b/resources/views/flux/navlist/item.blade.php
@@ -0,0 +1,89 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'variant' ])
+
+@props([
+ 'iconVariant' => 'outline',
+ 'iconTrailing' => null,
+ 'badgeColor' => null,
+ 'variant' => null,
+ 'iconDot' => null,
+ 'accent' => true,
+ 'badge' => null,
+ 'icon' => null,
+])
+
+@php
+// Button should be a square if it has no text contents...
+$square ??= $slot->isEmpty();
+
+// Size-up icons in square/icon-only buttons...
+$iconClasses = Flux::classes($square ? 'size-5!' : 'size-4!');
+
+$classes = Flux::classes()
+ ->add('h-10 lg:h-8 relative flex items-center gap-3 rounded-lg')
+ ->add($square ? 'px-2.5!' : '')
+ ->add('py-0 text-start w-full px-3 my-px')
+ ->add('text-zinc-500 dark:text-white/80')
+ ->add(match ($variant) {
+ 'outline' => match ($accent) {
+ true => [
+ 'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content)',
+ 'data-current:bg-white dark:data-current:bg-white/[7%] data-current:border data-current:border-zinc-200 dark:data-current:border-transparent',
+ 'hover:text-zinc-800 dark:hover:text-white dark:hover:bg-white/[7%] hover:bg-zinc-800/5 ',
+ 'border border-transparent',
+ ],
+ false => [
+ 'data-current:text-zinc-800 dark:data-current:text-zinc-100 data-current:border-zinc-200',
+ 'data-current:bg-white dark:data-current:bg-white/10 data-current:border data-current:border-zinc-200 dark:data-current:border-white/10 data-current:shadow-xs',
+ 'hover:text-zinc-800 dark:hover:text-white',
+ ],
+ },
+ default => match ($accent) {
+ true => [
+ 'data-current:text-(--color-accent-content) hover:data-current:text-(--color-accent-content)',
+ 'data-current:bg-zinc-800/[4%] dark:data-current:bg-white/[7%]',
+ 'hover:text-zinc-800 dark:hover:text-white hover:bg-zinc-800/[4%] dark:hover:bg-white/[7%]',
+ ],
+ false => [
+ 'data-current:text-zinc-800 dark:data-current:text-zinc-100',
+ 'data-current:bg-zinc-800/[4%] dark:data-current:bg-white/10',
+ 'hover:text-zinc-800 dark:hover:text-white hover:bg-zinc-800/[4%] dark:hover:bg-white/10',
+ ],
+ },
+ })
+ ;
+@endphp
+
+
+
+
+
+
+
+ {{ $icon }}
+
+
+
+
+
+
{{ $badge }}
+
+
diff --git a/resources/views/flux/navmenu/index.blade.php b/resources/views/flux/navmenu/index.blade.php
new file mode 100644
index 0000000..bfcc400
--- /dev/null
+++ b/resources/views/flux/navmenu/index.blade.php
@@ -0,0 +1,12 @@
+@php
+$classes = Flux::classes()
+ ->add('[:where(&)]:min-w-48 p-[.3125rem]')
+ ->add('rounded-lg shadow-xs')
+ ->add('border border-zinc-200 dark:border-zinc-600')
+ ->add('bg-white dark:bg-zinc-700')
+ ;
+@endphp
+
+class($classes) }} popover="manual" data-flux-navmenu>
+ {{ $slot }}
+
diff --git a/resources/views/flux/navmenu/item.blade.php b/resources/views/flux/navmenu/item.blade.php
new file mode 100644
index 0000000..c96fdd3
--- /dev/null
+++ b/resources/views/flux/navmenu/item.blade.php
@@ -0,0 +1,77 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@props([
+ 'iconVariant' => 'mini',
+ 'iconTrailing' => null,
+ 'variant' => 'default',
+ 'disabled' => false,
+ 'indent' => false,
+ 'suffix' => null,
+ 'value' => null,
+ 'icon' => null,
+ 'kbd' => null,
+])
+
+@php
+if ($kbd) $suffix = $kbd;
+
+$iconClasses = Flux::classes()
+ ->add('me-2')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : null)
+ ;
+
+$trailingIconClasses = Flux::classes()
+ ->add('ms-auto')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : null)
+ ;
+
+$classes = Flux::classes()
+ ->add('group flex items-center px-2 py-2 lg:py-1.5 w-full')
+ ->add('rounded-md')
+ ->add('text-start text-sm font-medium')
+ ->add(match ($variant) {
+ 'danger' => [
+ 'text-zinc-800 hover:text-red-600 hover:bg-red-50 dark:text-white dark:hover:bg-red-400/20 dark:hover:text-red-400',
+ '**:data-navmenu-icon:text-zinc-400 dark:**:data-navmenu-icon:text-white/60 [&:hover_[data-navmenu-icon]]:text-current',
+ ],
+ 'default' => [
+ 'text-zinc-800 hover:bg-zinc-50 dark:text-white dark:hover:bg-zinc-600',
+ '**:data-navmenu-icon:text-zinc-400 dark:**:data-navmenu-icon:text-white/60 [&:hover_[data-navmenu-icon]]:text-current',
+ ]
+ })
+ ->add($disabled ? 'text-zinc-400' : '')
+ ;
+@endphp
+
+
+
+
+
+
+
+
+ {{ $suffix }}
+
+
+ {{ $suffix }}
+
+
+
+
+
diff --git a/resources/views/flux/navmenu/separator.blade.php b/resources/views/flux/navmenu/separator.blade.php
new file mode 100644
index 0000000..b8c0e82
--- /dev/null
+++ b/resources/views/flux/navmenu/separator.blade.php
@@ -0,0 +1,4 @@
+
+
+
diff --git a/resources/views/flux/pagination.blade.php b/resources/views/flux/pagination.blade.php
new file mode 100644
index 0000000..2742734
--- /dev/null
+++ b/resources/views/flux/pagination.blade.php
@@ -0,0 +1,137 @@
+@props([
+ 'paginator' => null,
+])
+
+@php
+$simple = ! $paginator instanceof \Illuminate\Contracts\Pagination\LengthAwarePaginator;
+@endphp
+
+@if ($simple)
+ class('pt-3 border-t border-zinc-100 dark:border-zinc-700 flex justify-between items-center') }} data-flux-pagination>
+
+
+ @if ($paginator->hasPages())
+
+ @if ($paginator->onFirstPage())
+
+
+ @else
+ @if(method_exists($paginator,'getCursorName'))
+
+
+ @else
+
+
+ @endif
+ @endif
+
+ @if ($paginator->hasMorePages())
+ @if(method_exists($paginator,'getCursorName'))
+
+
+ @else
+
+
+ @endif
+ @else
+
+
+ @endif
+
+ @endif
+
class('@container pt-3 border-t border-zinc-100 dark:border-zinc-700 flex justify-between items-center gap-3') }} data-flux-pagination>
+ @if ($paginator->total() > 0)
+
+ {!! __('Showing') !!} {{ $paginator->firstItem() }} {!! __('to') !!} {{ $paginator->lastItem() }} {!! __('of') !!} {{ $paginator->total() }} {!! __('results') !!}
+
+ @else
+
+ @endif
+
+ @if ($paginator->hasPages())
+ {{-- Mobile pagination --}}
+
+ @if ($paginator->onFirstPage())
+
+
+ @else
+
+
+ @endif
+
+ @if ($paginator->hasMorePages())
+
+
+ @else
+
+
+ @endif
+
+
+ {{-- Desktop pagination --}}
+
+ @if ($paginator->onFirstPage())
+
+
+ @else
+
+
+ @endif
+
+ @foreach (\Livewire\invade($paginator)->elements() as $element)
+ {{-- "Three Dots" Separator --}}
+ @if (is_string($element))
+
{{ $element }}
+ @endif
+
+ {{-- Array Of Links --}}
+ @if (is_array($element))
+ @foreach ($element as $page => $url)
+ @if ($page == $paginator->currentPage())
+
{{ $page }}
+ @else
+
{{ $page }}
+ @endif
+ @endforeach
+ @endif
+ @endforeach
+
+ @if ($paginator->hasMorePages())
+
+
+ @else
+
+
+ @endif
+
+ @endif
+
class($classes) }} data-flux-profile>
+
+
+ {{ $avatar }}
+
+
+
+
+
+ {{ $name }}
+
+
+
+
+
+
+
+ {{ $iconTrailing }}
+
+
diff --git a/resources/views/flux/radio/group/index.blade.php b/resources/views/flux/radio/group/index.blade.php
new file mode 100644
index 0000000..97f65e3
--- /dev/null
+++ b/resources/views/flux/radio/group/index.blade.php
@@ -0,0 +1,5 @@
+@props([
+ 'variant' => 'default',
+])
+
+{{ $slot }}
diff --git a/resources/views/flux/radio/group/variants/buttons.blade.php b/resources/views/flux/radio/group/variants/buttons.blade.php
new file mode 100644
index 0000000..bc5561d
--- /dev/null
+++ b/resources/views/flux/radio/group/variants/buttons.blade.php
@@ -0,0 +1,25 @@
+@props([
+ 'variant' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the radio if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('flex flex-wrap gap-2')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-buttons>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/radio/group/variants/cards.blade.php b/resources/views/flux/radio/group/variants/cards.blade.php
new file mode 100644
index 0000000..f16d468
--- /dev/null
+++ b/resources/views/flux/radio/group/variants/cards.blade.php
@@ -0,0 +1,25 @@
+@props([
+ 'variant' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the radio if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('flex gap-3')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-cards>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/radio/group/variants/default.blade.php b/resources/views/flux/radio/group/variants/default.blade.php
new file mode 100644
index 0000000..7c0713b
--- /dev/null
+++ b/resources/views/flux/radio/group/variants/default.blade.php
@@ -0,0 +1,26 @@
+@props([
+ 'name' => null,
+ 'variant' => null,
+])
+
+@php
+// We only want to show the name attribute it has been set manually
+// but not if it has been set from the `wire:model` attribute...
+$showName = isset($name);
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ // Adjust spacing between fields...
+ ->add('*:data-flux-field:mb-3')
+ ->add('[&>[data-flux-field]:has(>[data-flux-description])]:mb-4')
+ ->add('[&>[data-flux-field]:last-child]:mb-0!')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/radio/group/variants/pills.blade.php b/resources/views/flux/radio/group/variants/pills.blade.php
new file mode 100644
index 0000000..1502494
--- /dev/null
+++ b/resources/views/flux/radio/group/variants/pills.blade.php
@@ -0,0 +1,25 @@
+@props([
+ 'variant' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the radio if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('flex flex-wrap gap-3')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-pills>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/radio/group/variants/segmented.blade.php b/resources/views/flux/radio/group/variants/segmented.blade.php
new file mode 100644
index 0000000..18e8fda
--- /dev/null
+++ b/resources/views/flux/radio/group/variants/segmented.blade.php
@@ -0,0 +1,28 @@
+@props([
+ 'name' => null,
+ 'variant' => null,
+ 'size' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('block flex p-1')
+ ->add('rounded-lg bg-zinc-800/5 dark:bg-white/10')
+ ->add($size === 'sm' ? 'h-8 py-[3px] px-[3px]' : 'h-10 p-1')
+ ->add($size === 'sm' ? '-my-px h-[calc(2rem+2px)]' : '')
+ ;
+@endphp
+
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-radio-group-segmented>
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/radio/index.blade.php b/resources/views/flux/radio/index.blade.php
new file mode 100644
index 0000000..ab425fc
--- /dev/null
+++ b/resources/views/flux/radio/index.blade.php
@@ -0,0 +1,14 @@
+@aware([ 'variant' ])
+
+@props([
+ 'variant' => 'default',
+])
+
+@php
+// This prevents variants picked up by `@aware()` from other wrapping components like flux::modal from being used here...
+$variant = $variant !== 'default' && Flux::componentExists('radio.variants.' . $variant)
+ ? $variant
+ : 'default';
+@endphp
+
+{{ $slot }}
diff --git a/resources/views/flux/radio/indicator.blade.php b/resources/views/flux/radio/indicator.blade.php
new file mode 100644
index 0000000..a347522
--- /dev/null
+++ b/resources/views/flux/radio/indicator.blade.php
@@ -0,0 +1,27 @@
+
+@php
+$classes = Flux::classes()
+ ->add('shrink-0 size-[1.125rem] rounded-full')
+ ->add('text-sm text-zinc-700 dark:text-zinc-800')
+ ->add('shadow-xs [ui-radio[disabled]_&]:opacity-75 [ui-radio[data-checked][disabled]_&]:opacity-50 [ui-radio[disabled]_&]:shadow-none [ui-radio[data-checked]_&]:shadow-none')
+ ->add('flex justify-center items-center [ui-radio[data-checked]_&>div]:block')
+ ->add([
+ 'border',
+ 'border-zinc-300 dark:border-white/10',
+ '[ui-radio[disabled]_&]:border-zinc-200 dark:[ui-radio[disabled]_&]:border-white/5',
+ '[ui-radio[data-checked]_&]:border-transparent data-indeterminate:border-transparent',
+ '[ui-radio[data-checked]_&]:[ui-radio[disabled]_&]:border-transparent data-indeterminate:border-transparent',
+ '[print-color-adjust:exact]',
+ ])
+ ->add([
+ 'bg-white dark:bg-white/10',
+ '[ui-radio[data-checked]_&]:bg-[var(--color-accent)]',
+ 'hover:[ui-radio[data-checked]_&]:bg-(--color-accent)',
+ 'focus:[ui-radio[data-checked]_&]:bg-(--color-accent)',
+ ])
+ ;
+@endphp
+
+class($classes) }} data-flux-radio-indicator>
+
+
class($classes) }} data-flux-control data-flux-radio-buttons tabindex="-1" data-flux-field>
+
+ {{ $label ?? $slot }}
+ @endif
+
diff --git a/resources/views/flux/radio/variants/cards.blade.php b/resources/views/flux/radio/variants/cards.blade.php
new file mode 100644
index 0000000..d71d911
--- /dev/null
+++ b/resources/views/flux/radio/variants/cards.blade.php
@@ -0,0 +1,77 @@
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'indicator' ])
+
+@props([
+ 'iconVariant' => 'micro',
+ 'description' => null,
+ 'indicator' => true,
+ 'accent' => true,
+ 'label' => null,
+ 'icon' => null,
+])
+
+@php
+$iconClasses = Flux::classes()
+ ->add('inline-block mt-0.5 text-zinc-400 [ui-radio[data-checked]_&]:text-zinc-800 dark:[ui-radio[data-checked]_&]:text-white')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-4' : '')
+ ;
+
+$classes = Flux::classes()
+ ->add('relative flex justify-between gap-3 flex-1 p-4')
+ ->add('rounded-lg shadow-xs')
+ ->add('bg-white dark:bg-white/10 dark:hover:bg-white/15 dark:data-checked:bg-white/15')
+ ->add('after:absolute after:-inset-px after:rounded-lg')
+ ->add('border border-zinc-800/15 dark:border-white/10')
+ ->add([
+ '[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_97.5%)]',
+ '[--haze-border:color-mix(in_oklab,_var(--color-accent-content),_transparent_80%)]',
+ '[--haze-light:color-mix(in_oklab,_var(--color-accent),_transparent_98%)]',
+ 'dark:[--haze:color-mix(in_oklab,_var(--color-accent-content),_transparent_90%)]',
+ ])
+ ->add(match ($accent) {
+ true => [
+ '[&:hover_[data-flux-radio-indicator]]:border-[var(--haze-border)] dark:[&:hover_[data-flux-radio-indicator]]:border-white/10',
+ 'hover:border-[var(--haze-border)] dark:hover:border-white/10',
+
+ 'data-checked:border-(--color-accent) hover:data-checked:border-(--color-accent) dark:data-checked:bg-white/15 ',
+ 'hover:after:bg-[var(--haze-light)] dark:hover:after:bg-white/[4%] data-checked:after:bg-(--haze) hover:data-checked:after:bg-(--haze)',
+ ],
+ false => [
+ 'data-checked:bg-zinc-50 dark:data-checked:bg-white/15 data-checked:border-zinc-800 dark:data-checked:border-white',
+ 'hover:bg-zinc-50 dark:hover:bg-white/15',
+ ],
+ })
+ ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+ ;
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
+class($classes) }} data-flux-control data-flux-radio-cards tabindex="-1" data-flux-field>
+
+
+
+
+
+ {{ $icon }}
+
+
+
+ {{ $label ?? $slot }}
+
+
+ {{ $description }}
+
+
+
diff --git a/resources/views/flux/radio/variants/default.blade.php b/resources/views/flux/radio/variants/default.blade.php
new file mode 100644
index 0000000..f2fe592
--- /dev/null
+++ b/resources/views/flux/radio/variants/default.blade.php
@@ -0,0 +1,12 @@
+@props([
+ 'name' => $attributes->whereStartsWith('wire:model')->first(),
+])
+
+
+ {{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+ {{-- even with durable attributes for some reason... --}}
+ {{-- We are redundantly setting the size of this container to 1.125rem so that the focus outline isn't oblong. --}}
+ class('flex size-[1.125rem] rounded-full mt-px outline-offset-2') }} data-flux-control data-flux-radio tabindex="-1">
+
+
diff --git a/resources/views/flux/radio/variants/pills.blade.php b/resources/views/flux/radio/variants/pills.blade.php
new file mode 100644
index 0000000..9949fc7
--- /dev/null
+++ b/resources/views/flux/radio/variants/pills.blade.php
@@ -0,0 +1,27 @@
+@props([
+ 'accent' => true,
+ 'label' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('flex whitespace-nowrap gap-2 items-center py-1 px-2 rounded-full text-sm font-medium leading-4')
+ ->add('bg-zinc-800/6 dark:bg-white/10 hover:bg-zinc-800/10 dark:hover:bg-white/15 text-zinc-800 hover:text-zinc-800 dark:text-white/70 dark:hover:text-white')
+ ->add(match ($accent) {
+ true => 'data-checked:bg-(--color-accent) hover:data-checked:bg-(--color-accent)',
+ false => 'data-checked:bg-zinc-800 dark:data-checked:bg-white',
+ })
+ ->add(match ($accent) {
+ true => 'data-checked:text-(--color-accent-foreground) hover:data-checked:text-(--color-accent-foreground)',
+ false => 'data-checked:text-white dark:data-checked:text-zinc-800',
+ })
+ ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+ ;
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+{{-- We have to put "data-flux-field" so that a single box can be disabled without "disabling" the group field label... --}}
+class($classes) }} data-flux-control data-flux-radio-pills tabindex="-1" data-flux-field>
+ {{ $label ?? $slot }}
+
diff --git a/resources/views/flux/radio/variants/segmented.blade.php b/resources/views/flux/radio/variants/segmented.blade.php
new file mode 100644
index 0000000..c7b100a
--- /dev/null
+++ b/resources/views/flux/radio/variants/segmented.blade.php
@@ -0,0 +1,52 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'size' ])
+
+@props([
+ 'iconTrailing' => null,
+ 'iconVariant' => null,
+ 'label' => null,
+ 'icon' => null,
+ 'size' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('flex whitespace-nowrap flex-1 justify-center items-center gap-2')
+ ->add('rounded-md data-checked:shadow-xs')
+ ->add('text-sm font-medium text-zinc-600 hover:text-zinc-800 dark:hover:text-white dark:text-white/70 data-checked:text-zinc-800 dark:data-checked:text-white')
+ ->add('data-checked:bg-white dark:data-checked:bg-white/20')
+ ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+ ->add(match ($size) {
+ 'sm' => 'px-3 text-sm',
+ default => 'px-4',
+ })
+ ;
+
+$iconVariant ??= 'mini';
+
+$iconClasses = Flux::classes('text-zinc-500 dark:text-zinc-400 [ui-radio[data-checked]_&]:text-zinc-800 dark:[ui-radio[data-checked]_&]:text-white')
+ // When using the outline icon variant, we need to size it down to match the default icon sizes...
+ ->add($iconVariant === 'outline' ? 'size-5' : '')
+ ;
+
+@endphp
+
+{{-- We have to put tabindex="-1" here because otherwise, Livewire requests will wipe out tabindex state, --}}
+{{-- even with durable attributes for some reason... --}}
+class($classes) }} data-flux-control data-flux-radio-segmented tabindex="-1">
+
+
diff --git a/resources/views/flux/select/button.blade.php b/resources/views/flux/select/button.blade.php
new file mode 100644
index 0000000..cd2782d
--- /dev/null
+++ b/resources/views/flux/select/button.blade.php
@@ -0,0 +1,58 @@
+@aware([ 'placeholder' ])
+
+@props([
+ 'placeholder' => null,
+ 'clearable' => null,
+ 'invalid' => false,
+ 'suffix' => null,
+ 'size' => null,
+ 'max' => null,
+])
+
+@php
+// Clearable is not supported on xs size...
+if ($size === 'xs') $clearable = null;
+
+$classes = Flux::classes()
+ ->add('group/select-button cursor-default py-2')
+ ->add('overflow-hidden') // Overflow hidden is here to prevent the button from growing when selected text is too long.
+ ->add('flex items-center')
+ ->add('shadow-xs')
+ ->add('bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]')
+ // Make the placeholder match the text color of standard input placeholders...
+ ->add('disabled:shadow-none')
+ ->add(match ($size) {
+ default => 'h-10 text-base sm:text-sm rounded-lg px-3 block w-full',
+ 'sm' => 'h-8 text-sm rounded-md ps-3 pe-2 block w-full',
+ 'xs' => 'h-6 text-xs rounded-md ps-3 pe-2 block w-full',
+ })
+ ->add($invalid
+ ? 'border border-red-500'
+ : 'border border-zinc-200 border-b-zinc-300/80 dark:border-white/10'
+ )
+ ;
+@endphp
+
+class($classes) }} @if ($invalid) data-invalid @endif data-flux-group-target data-flux-select-button>
+ isNotEmpty()): ?>
+ {{ $slot }}
+
+
+
+
+
+
diff --git a/resources/views/flux/select/empty.blade.php b/resources/views/flux/select/empty.blade.php
new file mode 100644
index 0000000..386d958
--- /dev/null
+++ b/resources/views/flux/select/empty.blade.php
@@ -0,0 +1,12 @@
+@php
+$classes = Flux::classes()
+ ->add('data-hidden:hidden block items-center px-2 py-1.5 w-full')
+ ->add('rounded-md')
+ ->add('text-start text-sm font-medium')
+ ->add('text-zinc-500 data-active:bg-zinc-100 dark:text-zinc-300 dark:data-active:bg-zinc-600')
+ ;
+@endphp
+
+class($classes) }}>
+ {{ $slot }}
+
diff --git a/resources/views/flux/select/index.blade.php b/resources/views/flux/select/index.blade.php
new file mode 100644
index 0000000..dcb91b4
--- /dev/null
+++ b/resources/views/flux/select/index.blade.php
@@ -0,0 +1,7 @@
+@props([
+ 'variant' => 'default',
+])
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/select/indicator/index.blade.php b/resources/views/flux/select/indicator/index.blade.php
new file mode 100644
index 0000000..e18386a
--- /dev/null
+++ b/resources/views/flux/select/indicator/index.blade.php
@@ -0,0 +1,14 @@
+@aware([ 'variant' ])
+
+@props([
+ 'variant' => 'check',
+])
+
+@php
+// This prevents variants picked up by `@aware()` from other wrapping components like flux::modal from being used here...
+$variant = $variant !== 'check' && Flux::componentExists('select.indicator.variants.' . $variant)
+ ? $variant
+ : 'check';
+@endphp
+
+{{ $slot }}
diff --git a/resources/views/flux/select/indicator/variants/check.blade.php b/resources/views/flux/select/indicator/variants/check.blade.php
new file mode 100644
index 0000000..0e5409f
--- /dev/null
+++ b/resources/views/flux/select/indicator/variants/check.blade.php
@@ -0,0 +1,2 @@
+
+class($classes) }}>
+
diff --git a/resources/views/flux/select/indicator/variants/radio.blade.php b/resources/views/flux/select/indicator/variants/radio.blade.php
new file mode 100644
index 0000000..470fdfb
--- /dev/null
+++ b/resources/views/flux/select/indicator/variants/radio.blade.php
@@ -0,0 +1,26 @@
+
+@php
+$classes = Flux::classes()
+ ->add('shrink-0 size-[1.125rem] rounded-full')
+ ->add('text-sm text-zinc-700 dark:text-zinc-800')
+ ->add('[ui-option[disabled]_&]:opacity-75 [ui-option[data-selected][disabled]_&]:opacity-50')
+ ->add('flex justify-center items-center [ui-option[data-selected]_&>div]:block')
+ ->add([
+ 'border',
+ 'border-zinc-300 dark:border-white/10',
+ '[ui-option[disabled]_&]:border-zinc-200 dark:[ui-option[disabled]_&]:border-white/5',
+ '[ui-option[data-selected]_&]:border-transparent data-indeterminate:border-transparent',
+ '[ui-option[data-selected]_&]:[ui-option[disabled]_&]:border-transparent data-indeterminate:border-transparent',
+ ])
+ ->add([
+ 'bg-white dark:bg-white/10',
+ '[ui-option[data-selected]_&]:bg-[var(--color-accent)]',
+ 'hover:[ui-option[data-selected]_&]:bg-(--color-accent)',
+ 'focus:[ui-option[data-selected]_&]:bg-(--color-accent)',
+ ])
+ ;
+@endphp
+
+
diff --git a/resources/views/flux/select/input.blade.php b/resources/views/flux/select/input.blade.php
new file mode 100644
index 0000000..bbc2406
--- /dev/null
+++ b/resources/views/flux/select/input.blade.php
@@ -0,0 +1,30 @@
+@aware([ 'placeholder' ])
+
+@props([
+ 'placeholder' => null,
+ 'clearable' => null,
+ 'invalid' => false,
+ 'size' => null,
+])
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/resources/views/flux/select/option/index.blade.php b/resources/views/flux/select/option/index.blade.php
new file mode 100644
index 0000000..59150aa
--- /dev/null
+++ b/resources/views/flux/select/option/index.blade.php
@@ -0,0 +1,14 @@
+@aware([ 'variant' ])
+
+@props([
+ 'variant' => 'default',
+])
+
+@php
+// This prevents variants picked up by `@aware()` from other wrapping components like flux::modal from being used here...
+$variant = $variant !== 'default' && Flux::componentExists('select.variants.' . $variant)
+ ? 'custom'
+ : 'default';
+@endphp
+
+{{ $slot }}
diff --git a/resources/views/flux/select/option/variants/custom.blade.php b/resources/views/flux/select/option/variants/custom.blade.php
new file mode 100644
index 0000000..c3fca97
--- /dev/null
+++ b/resources/views/flux/select/option/variants/custom.blade.php
@@ -0,0 +1,45 @@
+@aware([ 'indicator' ])
+
+@props([
+ 'filterable' => null,
+ 'indicator' => null,
+ 'loading' => null,
+ 'value' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('group/option overflow-hidden data-hidden:hidden group flex items-center px-2 py-1.5 w-full focus:outline-hidden')
+ ->add('rounded-md')
+ ->add('text-start text-sm font-medium')
+ ->add('text-zinc-800 data-active:bg-zinc-100 [&[disabled]]:text-zinc-400 dark:text-white dark:data-active:bg-zinc-600 dark:[&[disabled]]:text-zinc-400')
+ ;
+
+$livewireAction = $attributes->whereStartsWith('wire:click')->isNotEmpty();
+$alpineAction = $attributes->whereStartsWith('x-on:click')->isNotEmpty();
+
+$loading ??= $loading ?? $livewireAction;
+
+if ($loading) {
+ $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+}
+@endphp
+
+class($classes) }}
+ data-flux-option
+>
+
+
+
+ {{ $slot }}
+
+
+
+
+
diff --git a/resources/views/flux/select/option/variants/default.blade.php b/resources/views/flux/select/option/variants/default.blade.php
new file mode 100644
index 0000000..c0cd845
--- /dev/null
+++ b/resources/views/flux/select/option/variants/default.blade.php
@@ -0,0 +1,9 @@
+@props([
+ 'value' => null,
+])
+
+{{ $slot }}
\ No newline at end of file
diff --git a/resources/views/flux/select/options.blade.php b/resources/views/flux/select/options.blade.php
new file mode 100644
index 0000000..51ac022
--- /dev/null
+++ b/resources/views/flux/select/options.blade.php
@@ -0,0 +1,41 @@
+@aware([ 'searchable' ])
+
+@props([
+ 'searchable' => null,
+ 'search' => null,
+ 'empty' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('[:where(&)]:min-w-48 [:where(&)]:max-h-[20rem] p-[.3125rem]')
+ ->add('rounded-lg shadow-xs')
+ ->add('border border-zinc-200 dark:border-zinc-600')
+ ->add('bg-white dark:bg-zinc-700')
+ ;
+
+// Searchable can also be a slot...
+if (is_object($searchable)) $search = $searchable;
+@endphp
+
+
+ class($classes) }} data-flux-options>
+ {{ $slot }}
+
+
+
+ {{ $search }}
+
+ {{ $slot }}
+
+
+ {{ $empty }}
+
+ {!! __('No results found') !!}
+
+
+
+
diff --git a/resources/views/flux/select/search.blade.php b/resources/views/flux/select/search.blade.php
new file mode 100644
index 0000000..ec316cc
--- /dev/null
+++ b/resources/views/flux/select/search.blade.php
@@ -0,0 +1,67 @@
+@props([
+ 'clearable' => true,
+ 'closable' => null,
+ 'loading' => null,
+ 'icon' => null,
+])
+
+@php
+// Clerable or closable, not both...
+if ($closable !== null) $clearable = null;
+
+$classes = Flux::classes()
+ ->add('h-10 w-full flex items-center px-3 py-2')
+ ->add('font-medium text-base sm:text-sm text-zinc-800 dark:text-white')
+ ->add('ps-9') // Make room for magnifying glass icon...
+ ->add('pe-9') // Make room for clear/clos button and loading indicator...
+ ->add('outline-hidden')
+ ->add('border-b border-zinc-200 dark:border-zinc-600')
+ ->add('bg-white dark:bg-zinc-700')
+ // The below reverts styles added by Tailwind Forms plugin
+ ->add('border-t-0 border-s-0 border-e-0 focus:ring-0 focus:border-zinc-200 dark:focus:border-zinc-600')
+ ;
+
+$loading ??= $loading ?? $attributes->whereStartsWith('wire:model.live')->isNotEmpty();
+
+if ($loading) {
+ $attributes = $attributes->merge(['wire:loading.attr' => 'data-flux-loading']);
+}
+@endphp
+
+
+
+
+
+
+
class($classes)->merge(['placeholder' => __('Search...')]) }} autofocus />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
class($classes) }}>
+
+
+ {{ $placeholder }}
+
+
+
+
+
+
+
diff --git a/resources/views/flux/select/variants/combobox.blade.php b/resources/views/flux/select/variants/combobox.blade.php
new file mode 100644
index 0000000..811e0cb
--- /dev/null
+++ b/resources/views/flux/select/variants/combobox.blade.php
@@ -0,0 +1,45 @@
+@props([
+ 'placeholder' => null,
+ 'searchable' => null,
+ 'clearable' => null,
+ 'multiple' => null,
+ 'invalid' => null,
+ 'input' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+if ($searchable) {
+ throw new \Exception('Comboboxes do not support the searchable prop.');
+}
+
+if ($multiple) {
+ throw new \Exception('Comboboxes do not support the multiple prop.');
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$class= Flux::classes()
+ ->add('w-full');
+@endphp
+
+class($class)->merge(['filter' => true]) }} @if($showName) name="{{ $name }}" @endif data-flux-control data-flux-select>
+ {{ $input }}
+
+ {{ $slot}}
+
+ {!! __('No results found') !!}
+
+
diff --git a/resources/views/flux/select/variants/custom.blade.php b/resources/views/flux/select/variants/custom.blade.php
new file mode 100644
index 0000000..fd08ccd
--- /dev/null
+++ b/resources/views/flux/select/variants/custom.blade.php
@@ -0,0 +1,33 @@
+@props([
+ 'invalid' => null,
+ 'clear' => null,
+ 'close' => null,
+ 'size' => null,
+ 'name' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$class= Flux::classes()
+ ->add('w-full');
+@endphp
+
+class($class)->merge(['filter' => true]) }}
+ @if($showName) name="{{ $name }}" @endif
+ data-flux-control
+ data-flux-select
+>
+ {{ $slot}}
+
diff --git a/resources/views/flux/select/variants/default.blade.php b/resources/views/flux/select/variants/default.blade.php
new file mode 100644
index 0000000..4b36502
--- /dev/null
+++ b/resources/views/flux/select/variants/default.blade.php
@@ -0,0 +1,48 @@
+@props([
+ 'name' => $attributes->whereStartsWith('wire:model')->first(),
+ 'placeholder' => null,
+ 'invalid' => null,
+ 'size' => null,
+])
+
+@php
+$invalid ??= ($name && $errors->has($name));
+
+$classes = Flux::classes()
+ ->add('appearance-none') // Strip the browser's default styles...
+ ->add('w-full ps-3 pe-10 block')
+ ->add(match ($size) {
+ default => 'h-10 py-2 text-base sm:text-sm leading-[1.375rem] rounded-lg',
+ 'sm' => 'h-8 py-1.5 text-sm leading-[1.125rem] rounded-md',
+ 'xs' => 'h-6 text-xs leading-[1.125rem] rounded-md',
+ })
+ ->add('shadow-xs border')
+ ->add('bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]')
+ ->add('text-zinc-700 dark:text-zinc-300 disabled:text-zinc-500 dark:disabled:text-zinc-400')
+ // Make the placeholder match the text color of standard input placeholders...
+ ->add('has-[option.placeholder:checked]:text-zinc-400 dark:has-[option.placeholder:checked]:text-zinc-400')
+ // Options on Windows don't inherit dark mode styles, so we need to force them...
+ ->add('dark:[&>option]:bg-zinc-700 dark:[&>option]:text-white')
+ ->add('disabled:shadow-none')
+ ->add($invalid
+ ? 'border border-red-500'
+ : 'border border-zinc-200 border-b-zinc-300/80 dark:border-white/10'
+ )
+ ;
+@endphp
+
+class($classes) }}
+ @if ($invalid) aria-invalid="true" data-invalid @endif
+ @isset ($name) name="{{ $name }}" @endisset
+ @if (is_numeric($size)) size="{{ $size }}" @endif
+ data-flux-control
+ data-flux-select-native
+ data-flux-group-target
+>
+
+ {{ $placeholder }}
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/select/variants/listbox.blade.php b/resources/views/flux/select/variants/listbox.blade.php
new file mode 100644
index 0000000..cd46945
--- /dev/null
+++ b/resources/views/flux/select/variants/listbox.blade.php
@@ -0,0 +1,52 @@
+@props([
+ 'selectedSuffix' => null,
+ 'placeholder' => null,
+ 'searchable' => null,
+ 'clearable' => null,
+ 'invalid' => null,
+ 'button' => null, // Deprecated...
+ 'trigger' => null,
+ 'search' => null, // Slot forwarding...
+ 'empty' => null, // Slot forwarding...
+ 'clear' => null,
+ 'close' => null,
+ 'name' => null,
+ 'size' => null,
+])
+
+@php
+// We only want to show the name attribute on the checkbox if it has been set
+// manually, but not if it has been set from the wire:model attribute...
+$showName = isset($name);
+
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$invalid ??= ($name && $errors->has($name));
+
+$class= Flux::classes()
+ ->add('w-full')
+ // The below reverts styles added by Tailwind Forms plugin
+ ->add('border-0 p-0 bg-transparent')
+ ;
+
+$trigger ??= $button;
+@endphp
+
+class($class)->merge(['filter' => true]) }}
+ @if($showName) name="{{ $name }}" @endif
+ data-flux-control
+ data-flux-select
+>
+ {{ $trigger }}
+
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/separator.blade.php b/resources/views/flux/separator.blade.php
new file mode 100644
index 0000000..520f6dd
--- /dev/null
+++ b/resources/views/flux/separator.blade.php
@@ -0,0 +1,34 @@
+@props([
+ 'orientation' => null,
+ 'vertical' => false,
+ 'variant' => null,
+ 'faint' => false,
+ 'text' => null,
+])
+
+@php
+$orientation ??= $vertical ? 'vertical' : 'horizontal';
+
+$classes = Flux::classes('border-0 [print-color-adjust:exact]')
+ ->add(match ($variant) {
+ 'subtle' => 'bg-zinc-800/5 dark:bg-white/10',
+ default => 'bg-zinc-800/15 dark:bg-white/20',
+ })
+ ->add(match ($orientation) {
+ 'horizontal' => 'h-px w-full',
+ 'vertical' => 'self-stretch self-center w-px',
+ })
+ ;
+@endphp
+
+
+
+
class([$classes, 'grow']) }}>
+
+
{{ $text }}
+
+
class([$classes, 'grow']) }}>
+
class($classes, 'shrink-0') }} data-flux-separator>
+
diff --git a/resources/views/flux/sidebar/backdrop.blade.php b/resources/views/flux/sidebar/backdrop.blade.php
new file mode 100644
index 0000000..f8dd14c
--- /dev/null
+++ b/resources/views/flux/sidebar/backdrop.blade.php
@@ -0,0 +1,5 @@
+
+
diff --git a/resources/views/flux/sidebar/index.blade.php b/resources/views/flux/sidebar/index.blade.php
new file mode 100644
index 0000000..2066236
--- /dev/null
+++ b/resources/views/flux/sidebar/index.blade.php
@@ -0,0 +1,37 @@
+@props([
+ 'stashable' => null,
+ 'sticky' => null,
+])
+
+@php
+$classes = Flux::classes('[grid-area:sidebar]')
+ ->add('z-1 flex flex-col gap-4 [:where(&)]:w-64 p-4')
+ ;
+
+if ($sticky) {
+ $attributes = $attributes->merge([
+ 'x-bind:style' => '{ position: \'sticky\', top: $el.offsetTop + \'px\', \'max-height\': \'calc(100dvh - \' + $el.offsetTop + \'px)\' }',
+ 'class' => 'max-h-dvh overflow-y-auto overscroll-contain',
+ ]);
+}
+
+if ($stashable) {
+ $attributes = $attributes->merge([
+ 'x-bind:data-stashed' => '! screenLg',
+ 'x-resize.document' => 'screenLg = window.innerWidth >= 1024',
+ 'x-init' => '$el.classList.add(\'-translate-x-full\', \'rtl:translate-x-full\'); $el.removeAttribute(\'data-mobile-cloak\'); $el.classList.add(\'transition-transform\')',
+ ])->class([
+ 'max-lg:data-mobile-cloak:hidden',
+ '[[data-show-stashed-sidebar]_&]:translate-x-0! lg:translate-x-0!',
+ 'z-20! data-stashed:start-0! data-stashed:fixed! data-stashed:top-0! data-stashed:min-h-dvh! data-stashed:max-h-dvh!'
+ ]);
+}
+@endphp
+
+@if ($stashable)
+ class($classes) }} x-data="{ screenLg: window.innerWidth >= 1024 }" data-mobile-cloak data-flux-sidebar>
+ {{ $slot }}
+
diff --git a/resources/views/flux/sidebar/toggle.blade.php b/resources/views/flux/sidebar/toggle.blade.php
new file mode 100644
index 0000000..da0f544
--- /dev/null
+++ b/resources/views/flux/sidebar/toggle.blade.php
@@ -0,0 +1,12 @@
+
+class('flex-1') }} data-flux-spacer>
diff --git a/resources/views/flux/subheading.blade.php b/resources/views/flux/subheading.blade.php
new file mode 100644
index 0000000..74060e8
--- /dev/null
+++ b/resources/views/flux/subheading.blade.php
@@ -0,0 +1,19 @@
+@props([
+ 'size' => 'base',
+])
+
+@php
+$classes = Flux::classes()
+ ->add(match ($size) {
+ 'xl' => 'text-lg',
+ 'lg' => 'text-base',
+ default => 'text-sm',
+ 'sm' => 'text-xs',
+ })
+ ->add('[:where(&)]:text-zinc-500 [:where(&)]:dark:text-white/70')
+ ;
+@endphp
+
+class($classes) }} data-flux-subheading>
+ {{ $slot }}
+
diff --git a/resources/views/flux/switch.blade.php b/resources/views/flux/switch.blade.php
new file mode 100644
index 0000000..9abebe5
--- /dev/null
+++ b/resources/views/flux/switch.blade.php
@@ -0,0 +1,49 @@
+@props([
+ 'name' => null,
+ 'align' => 'right',
+])
+
+@php
+// We only want to show the name attribute it has been set manually
+// but not if it has been set from the `wire:model` attribute...
+$showName = isset($name);
+if (! isset($name)) {
+ $name = $attributes->whereStartsWith('wire:model')->first();
+}
+
+$classes = Flux::classes()
+ ->add('group h-5 w-8 min-w-8 relative inline-flex items-center outline-offset-2')
+ ->add('rounded-full')
+ ->add('transition')
+ ->add('bg-zinc-800/15 [&[disabled]]:opacity-50 dark:bg-transparent dark:border dark:border-white/20 dark:[&[disabled]]:border-white/10')
+ ->add('[print-color-adjust:exact]')
+ ->add([
+ 'data-checked:bg-(--color-accent)',
+ 'data-checked:border-0',
+ ])
+ ;
+
+$indicatorClasses = Flux::classes()
+ ->add('size-3.5')
+ ->add('rounded-full')
+ ->add('transition translate-x-[3px] dark:translate-x-[2px] rtl:-translate-x-[3px] dark:rtl:-translate-x-[2px]')
+ ->add('bg-white')
+ ->add([
+ 'group-data-checked:translate-x-[15px] rtl:group-data-checked:-translate-x-[15px]',
+ 'group-data-checked:bg-(--color-accent-foreground)',
+ ]);
+@endphp
+
+@if ($align === 'left' || $align === 'start')
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-control data-flux-switch>
+
+
+@else
+
+ class($classes) }} @if($showName) name="{{ $name }}" @endif data-flux-control data-flux-switch>
+
+
+@endif
diff --git a/resources/views/flux/tab/group.blade.php b/resources/views/flux/tab/group.blade.php
new file mode 100644
index 0000000..ae1b588
--- /dev/null
+++ b/resources/views/flux/tab/group.blade.php
@@ -0,0 +1,4 @@
+
+class('block') }} data-flux-tab-group>
+ {{ $slot }}
+
diff --git a/resources/views/flux/tab/index.blade.php b/resources/views/flux/tab/index.blade.php
new file mode 100644
index 0000000..4ff26f7
--- /dev/null
+++ b/resources/views/flux/tab/index.blade.php
@@ -0,0 +1,88 @@
+@php $iconTrailing = $iconTrailing ??= $attributes->pluck('icon:trailing'); @endphp
+@php $iconVariant = $iconVariant ??= $attributes->pluck('icon:variant'); @endphp
+
+@aware([ 'variant', 'size' ])
+
+@props([
+ 'iconTrailing' => null,
+ 'iconVariant' => null, // This is null as the default is set below depending on the tab variant...
+ 'variant' => null,
+ 'accent' => true,
+ 'name' => null,
+ 'icon' => null,
+ 'size' => null,
+])
+
+@php
+if ($variant === 'pills') {
+ $classes = Flux::classes()
+ ->add('flex whitespace-nowrap gap-2 items-center px-3 rounded-full text-sm font-medium')
+ ->add('bg-zinc-800/5 dark:bg-white/5 hover:bg-zinc-800/10 dark:hover:bg-white/10 text-zinc-600 hover:text-zinc-800 dark:text-white/70 dark:hover:text-white')
+ ->add(match ($accent) {
+ true => 'data-selected:bg-(--color-accent) hover:data-selected:bg-(--color-accent)',
+ false => 'data-selected:bg-zinc-800 dark:data-selected:bg-white',
+ })
+ ->add(match ($accent) {
+ true => 'data-selected:text-(--color-accent-foreground) hover:data-selected:text-(--color-accent-foreground)',
+ false => 'data-selected:text-white dark:data-selected:text-zinc-800',
+ })
+ ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+ ;
+
+ $iconClasses = Flux::classes('size-5');
+ $iconVariant ??= 'outline';
+} elseif ($variant === 'segmented') {
+ $classes = Flux::classes()
+ ->add('flex whitespace-nowrap flex-1 justify-center items-center gap-2')
+ ->add('rounded-md data-selected:shadow-xs')
+ ->add('text-sm font-medium text-zinc-600 hover:text-zinc-800 dark:hover:text-white dark:text-white/70 data-selected:text-zinc-800 dark:data-selected:text-white')
+ ->add('data-selected:bg-white dark:data-selected:bg-white/20')
+ ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+ ->add(match ($size) {
+ 'sm' => 'px-3 text-sm',
+ default => 'px-4',
+ })
+ ;
+
+ $iconClasses = Flux::classes('size-5 text-zinc-500 dark:text-zinc-400 [[data-flux-tab][data-selected]_&]:text-zinc-800 dark:[[data-flux-tab][data-selected]_&]:text-white');
+ $iconVariant ??= 'mini';
+} else {
+ $classes = Flux::classes()
+ ->add('flex whitespace-nowrap gap-2 items-center px-2')
+ ->add('-mb-px') // We want the "selected" tab's bottom border to overlap the tab group's bottom border...
+ ->add('border-b-[2px] border-transparent')
+ ->add('text-sm font-medium text-zinc-400 dark:text-white/50')
+ ->add(match($accent) {
+ true => 'data-selected:border-(--color-accent-content) data-selected:text-(--color-accent-content) hover:data-selected:text-(--color-accent-content) hover:text-zinc-800 dark:hover:text-white',
+ false => 'data-selected:border-zinc-800 data-selected:text-zinc-800 dark:data-selected:border-white dark:data-selected:text-white hover:text-zinc-800 dark:hover:text-white',
+ })
+ ->add('[&[disabled]]:opacity-50 dark:[&[disabled]]:opacity-75 [&[disabled]]:cursor-default [&[disabled]]:pointer-events-none')
+ ;
+
+ $iconClasses = Flux::classes('size-5');
+ $iconVariant ??= 'outline';
+}
+
+if ($name) {
+ $attributes = $attributes->merge([
+ 'name' => $name,
+ 'wire:key' => $name,
+ ]);
+}
+@endphp
+
+
+
+
diff --git a/resources/views/flux/tab/panel.blade.php b/resources/views/flux/tab/panel.blade.php
new file mode 100644
index 0000000..fb7fd9c
--- /dev/null
+++ b/resources/views/flux/tab/panel.blade.php
@@ -0,0 +1,20 @@
+@props([
+ 'name' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('[&:not([data-selected])]:hidden pt-8')
+;
+
+if ($name) {
+ $attributes = $attributes->merge([
+ 'name' => $name,
+ 'wire:key' => $name,
+ ]);
+}
+@endphp
+
+class($classes) }} data-flux-tab-panel>
+ {{ $slot }}
+
diff --git a/resources/views/flux/table/cell.blade.php b/resources/views/flux/table/cell.blade.php
new file mode 100644
index 0000000..8268886
--- /dev/null
+++ b/resources/views/flux/table/cell.blade.php
@@ -0,0 +1,23 @@
+@props([
+ 'align' => 'start',
+ 'variant' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('py-3 px-3 first:ps-0 last:pe-0 text-sm')
+ ->add(match($align) {
+ 'center' => 'text-center',
+ 'end' => 'text-end',
+ default => '',
+ })
+ ->add(match ($variant) {
+ 'strong' => 'font-medium text-zinc-800 dark:text-white',
+ default => 'text-zinc-500 dark:text-zinc-300',
+ })
+ ;
+@endphp
+
+class($classes) }} data-flux-cell>
+ {{ $slot }}
+
diff --git a/resources/views/flux/table/column.blade.php b/resources/views/flux/table/column.blade.php
new file mode 100644
index 0000000..6d23a1a
--- /dev/null
+++ b/resources/views/flux/table/column.blade.php
@@ -0,0 +1,35 @@
+@props([
+ 'direction' => null,
+ 'sortable' => false,
+ 'sorted' => false,
+ 'align' => 'start',
+])
+
+@php
+$classes = Flux::classes()
+ ->add('py-3 px-3 first:ps-0 last:pe-0')
+ ->add('text-start text-sm font-medium text-zinc-800 dark:text-white')
+ ->add(match($align) {
+ 'center' => 'group/center-align',
+ 'end' => 'group/end-align',
+ // Right is @deprecated but needed for backwards compatibility...
+ 'right' => 'group/end-align',
+ default => '',
+ })
+ // If the last column is sortable, remove the right negative margin that the sortable applies to itself, as the
+ // negative margin caused the last column to overflow the table creating an unnecessary horizontal scrollbar...
+ ->add('**:data-flux-table-sortable:last:me-0')
+ ;
+@endphp
+
+class($classes) }} data-flux-column>
+
+
+
+ {{ $slot }}
+
+
diff --git a/resources/views/flux/table/columns.blade.php b/resources/views/flux/table/columns.blade.php
new file mode 100644
index 0000000..2bea2f2
--- /dev/null
+++ b/resources/views/flux/table/columns.blade.php
@@ -0,0 +1,5 @@
+
+ attributes : '' }}>
+ {{ $tr ?? $slot }}
+
+
diff --git a/resources/views/flux/table/index.blade.php b/resources/views/flux/table/index.blade.php
new file mode 100644
index 0000000..38040cf
--- /dev/null
+++ b/resources/views/flux/table/index.blade.php
@@ -0,0 +1,29 @@
+@props([
+ 'paginate' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('[:where(&)]:min-w-full table-fixed')
+ ->add('text-zinc-800')
+ ->add('divide-y divide-zinc-800/10 dark:divide-white/20 text-zinc-800')
+ // We want whitespace-nowrap for the table, but not for modals and dropdowns...
+ ->add('whitespace-nowrap [&_dialog]:whitespace-normal [&_[popover]]:whitespace-normal')
+ ;
+@endphp
+
+
+ {{ $header ?? '' }}
+
+
+
class($classes) }} data-flux-table>
+ {{ $slot }}
+
+
+
+ {{ $footer ?? '' }}
+
+
+
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/table/rows.blade.php b/resources/views/flux/table/rows.blade.php
new file mode 100644
index 0000000..6e0c2ab
--- /dev/null
+++ b/resources/views/flux/table/rows.blade.php
@@ -0,0 +1,10 @@
+@php
+$classes = Flux::classes()
+ ->add('divide-y divide-zinc-800/10 dark:divide-white/20')
+ ->add('[&:not(:has(*))]:border-t-0!') // This removes the top border when there are no rows (which causes an errant scrollbar aside the columns)...
+ ;
+@endphp
+
+class($classes) }} data-flux-rows>
+ {{ $slot }}
+
diff --git a/resources/views/flux/table/sortable.blade.php b/resources/views/flux/table/sortable.blade.php
new file mode 100644
index 0000000..4f0d271
--- /dev/null
+++ b/resources/views/flux/table/sortable.blade.php
@@ -0,0 +1,31 @@
+@props([
+ 'direction' => null,
+ 'sorted' => false,
+])
+
+@php
+$classes = Flux::classes()
+ ->add('group/sortable flex items-center gap-1 -my-1 -ms-2 -me-2 px-2 py-1 ')
+ ->add('in-[.group\/end-align]:flex-row-reverse in-[.group\/end-align]:-me-2 in-[.group\/end-align]:-ms-8')
+ ;
+@endphp
+
+class($classes) }} data-flux-table-sortable>
+ {{ $slot }}
+
+
+ @if ($sorted)
+ @if ($direction === 'asc')
+
+ @elseif ($direction === 'desc')
+
+ @else
+
+ @endif
+ @else
+
+
+ @endif
+
diff --git a/resources/views/flux/tabs.blade.php b/resources/views/flux/tabs.blade.php
new file mode 100644
index 0000000..98979fe
--- /dev/null
+++ b/resources/views/flux/tabs.blade.php
@@ -0,0 +1,33 @@
+@aware([ 'variant' ])
+
+@props([
+ 'size' => null,
+ 'variant' => null,
+])
+
+@php
+if ($variant === 'pills') {
+ $classes = Flux::classes()
+ ->add('flex gap-4 h-8')
+ ;
+} elseif ($variant === 'segmented') {
+ $classes = Flux::classes()
+ ->add('block inline-flex p-1')
+ ->add('rounded-lg bg-zinc-800/5 dark:bg-white/10')
+ ->add($size === 'sm' ? 'h-8 py-[3px] px-[3px]' : 'h-10 p-1')
+ ->add($size === 'sm' ? match ($variant) {
+ 'segmented' => '-my-px h-[calc(2rem+2px)]',
+ default => '',
+ } : '')
+ ;
+} else {
+ $classes = Flux::classes()
+ ->add('flex gap-4 h-10')
+ ->add('border-b border-zinc-800/10 dark:border-white/20')
+ ;
+}
+@endphp
+
+class($classes) }} data-flux-tabs>
+ {{ $slot }}
+
diff --git a/resources/views/flux/text.blade.php b/resources/views/flux/text.blade.php
new file mode 100644
index 0000000..8a8f826
--- /dev/null
+++ b/resources/views/flux/text.blade.php
@@ -0,0 +1,42 @@
+@props([
+ 'inline' => false,
+ 'variant' => null,
+ 'color' => null,
+ 'size' => null,
+])
+
+@php
+$classes = Flux::classes()
+ ->add(match ($size) {
+ 'xl' => 'text-lg',
+ 'lg' => 'text-base',
+ default => '[:where(&)]:text-sm',
+ 'sm' => 'text-xs',
+ })
+ ->add($color ? match($color) {
+ 'red' => 'text-red-600 dark:text-red-400',
+ 'orange' => 'text-orange-600 dark:text-orange-400',
+ 'amber' => 'text-amber-600 dark:text-amber-500',
+ 'yellow' => 'text-yellow-600 dark:text-yellow-500',
+ 'lime' => 'text-lime-600 dark:text-lime-500',
+ 'green' => 'text-green-600 dark:text-green-500',
+ 'emerald' => 'text-emerald-600 dark:text-emerald-400',
+ 'teal' => 'text-teal-600 dark:text-teal-400',
+ 'cyan' => 'text-cyan-600 dark:text-cyan-400',
+ 'sky' => 'text-sky-600 dark:text-sky-400',
+ 'blue' => 'text-blue-600 dark:text-blue-400',
+ 'indigo' => 'text-indigo-600 dark:text-indigo-400',
+ 'violet' => 'text-violet-600 dark:text-violet-400',
+ 'purple' => 'text-purple-600 dark:text-purple-400',
+ 'fuchsia' => 'text-fuchsia-600 dark:text-fuchsia-400',
+ 'pink' => 'text-pink-600 dark:text-pink-400',
+ 'rose' => 'text-rose-600 dark:text-rose-400',
+ } : match ($variant) {
+ 'strong' => '[:where(&)]:text-zinc-800 [:where(&)]:dark:text-white',
+ 'subtle' => '[:where(&)]:text-zinc-400 [:where(&)]:dark:text-white/50',
+ default => '[:where(&)]:text-zinc-500 [:where(&)]:dark:text-white/70',
+ })
+ ;
+@endphp
+{{-- NOTE: It's important that this file has NO newline at the end of the file. --}}
+class($classes) }} data-flux-text @if ($color) color="{{ $color }}" @endif>{{ $slot }} class($classes) }} data-flux-text @if ($color) data-color="{{ $color }}" @endif>{{ $slot }}
\ No newline at end of file
diff --git a/resources/views/flux/textarea.blade.php b/resources/views/flux/textarea.blade.php
new file mode 100644
index 0000000..620014f
--- /dev/null
+++ b/resources/views/flux/textarea.blade.php
@@ -0,0 +1,38 @@
+@props([
+ 'name' => $attributes->whereStartsWith('wire:model')->first(),
+ 'resize' => 'vertical',
+ 'invalid' => null,
+ 'rows' => 4,
+])
+
+@php
+$invalid ??= ($name && $errors->has($name));
+
+$classes = Flux::classes()
+ ->add('block p-3 w-full')
+ ->add('shadow-xs disabled:shadow-none border rounded-lg')
+ ->add('bg-white dark:bg-white/10 dark:disabled:bg-white/[7%]')
+ ->add($resize ? 'resize-y' : 'resize-none')
+ ->add('text-base sm:text-sm text-zinc-700 disabled:text-zinc-500 placeholder-zinc-400 disabled:placeholder-zinc-400/70 dark:text-zinc-300 dark:disabled:text-zinc-400 dark:placeholder-zinc-400 dark:disabled:placeholder-zinc-500')
+ ->add($invalid ? 'border-red-500' : 'border-zinc-200 border-b-zinc-300/80 dark:border-white/10')
+ ;
+
+$resizeStyle = match ($resize) {
+ 'none' => 'resize: none',
+ 'both' => 'resize: both',
+ 'horizontal' => 'resize: horizontal',
+ 'vertical' => 'resize: vertical',
+};
+@endphp
+
+
+
+
diff --git a/resources/views/flux/toast/group.blade.php b/resources/views/flux/toast/group.blade.php
new file mode 100644
index 0000000..adba4a1
--- /dev/null
+++ b/resources/views/flux/toast/group.blade.php
@@ -0,0 +1,8 @@
+@props([
+ 'position' => 'bottom end',
+ 'expanded' => false,
+])
+
+
+ {{ $slot }}
+
diff --git a/resources/views/flux/toast/index.blade.php b/resources/views/flux/toast/index.blade.php
new file mode 100644
index 0000000..064d82b
--- /dev/null
+++ b/resources/views/flux/toast/index.blade.php
@@ -0,0 +1,49 @@
+@props([
+ 'position' => 'bottom end',
+])
+
+
+
+ only(['class']) }} data-variant="" data-flux-toast-dialog>
+
+
+
+ {{-- Success icon --}}
+
+
+
+ {{-- Warning icon --}}
+
+
+
+ {{-- Danger icon --}}
+
+
+
+
+ {{-- Heading --}}
+
+
+ {{-- Text --}}
+
+
+
+
+ {{-- Close button --}}
+
+
+
+
+
+
+
+
+
diff --git a/resources/views/flux/tooltip/content.blade.php b/resources/views/flux/tooltip/content.blade.php
new file mode 100644
index 0000000..88fb3b7
--- /dev/null
+++ b/resources/views/flux/tooltip/content.blade.php
@@ -0,0 +1,21 @@
+@props([
+ 'kbd' => null,
+])
+
+@php
+$classes = Flux::classes([
+ 'relative py-2 px-2.5',
+ 'rounded-md',
+ 'text-xs text-white font-medium',
+ 'bg-zinc-800 dark:bg-zinc-700 dark:border dark:border-white/10',
+ 'p-0 overflow-visible',
+]);
+@endphp
+
+class($classes) }} data-flux-tooltip-content>
+ {{ $slot }}
+
+
+ {{ $kbd }}
+
+
diff --git a/resources/views/flux/tooltip/index.blade.php b/resources/views/flux/tooltip/index.blade.php
new file mode 100644
index 0000000..fcba868
--- /dev/null
+++ b/resources/views/flux/tooltip/index.blade.php
@@ -0,0 +1,37 @@
+@props([
+ 'interactive' => null,
+ 'position' => 'top',
+ 'align' => 'center',
+ 'content' => null,
+ 'kbd' => null,
+ 'toggleable' => null,
+])
+
+@php
+// Support adding the .self modifier to the wire:model directive...
+if (($wireModel = $attributes->wire('model')) && $wireModel->directive && ! $wireModel->hasModifier('self')) {
+ unset($attributes[$wireModel->directive]);
+
+ $wireModel->directive .= '.self';
+
+ $attributes = $attributes->merge([$wireModel->directive => $wireModel->value]);
+}
+@endphp
+
+
+
+ {{ $slot }}
+
+
+ {{ $content }}
+
+
+
+
+ {{ $slot }}
+
+
+ {{ $content }}
+
+
+