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

resources/views/flux/chart/area.blade.php

@@ -0,0 +1,9 @@
+@aware(['field'])
+
+@props([
+    'field' => 'value',
+])
+
+<template name="area" field="{{ $field }}" {{ $attributes->only(['curve']) }}>
+    <path {{ $attributes->except('curve')->merge(['fill' => 'currentColor']) }}></path>
+</template>

resources/views/flux/chart/axis/grid.blade.php

@@ -0,0 +1,21 @@
+@aware(['axis' => 'x'])
+
+@if ($axis === 'x')
+    <template name="grid-line">
+        <line {{ $attributes->merge([
+            'type' => 'horizontal',
+            'class' => 'text-zinc-200/50 dark:text-white/15',
+            'stroke' => 'currentColor',
+            'stroke-width' => '1',
+        ]) }}></line>
+    </template>
+@else
+    <template name="grid-line">
+        <line {{ $attributes->merge([
+            'type' => 'vertical',
+            'class' => 'text-zinc-200/50 dark:text-white/15',
+            'stroke' => 'currentColor',
+            'stroke-width' => '1',
+        ]) }}></line>
+    </template>
+@endif

resources/views/flux/chart/axis/index.blade.php

@@ -0,0 +1,25 @@
+@blaze
+
+@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
+
+<template {{ $attributes->merge([
+    'name' => 'axis',
+    'axis' => $axis,
+    'format' => $format,
+    'position' => $position,
+    'tick-values' => is_string($tickValues) ? $tickValues : json_encode($tickValues),
+]) }} @if ($field) field="{{ $field }}" @endif>
+    {{ $slot }}
+</template>

resources/views/flux/chart/axis/line.blade.php

@@ -0,0 +1,23 @@
+@aware(['axis' => 'x'])
+
+@if ($axis === 'x')
+    <template name="axis-line">
+        <line {{ $attributes->merge([
+            'class' => '[:where(&)]:text-zinc-300 dark:[:where(&)]:text-white/40',
+            'orientation' => 'bottom',
+            'stroke-width' => '1',
+            'stroke' => 'currentColor',
+            'fill' => 'none',
+        ]) }}></line>
+    </template>
+@else
+    <template name="axis-line">
+        <line {{ $attributes->merge([
+            'class' => '[:where(&)]:text-zinc-300 dark:[:where(&)]:text-white/40',
+            'orientation' => 'left',
+            'stroke-width' => '1',
+            'stroke' => 'currentColor',
+            'fill' => 'none',
+        ]) }}></line>
+    </template>
+@endif

resources/views/flux/chart/axis/mark.blade.php

@@ -0,0 +1,31 @@
+@aware(['axis' => 'x', 'position' => null])
+
+@if ($axis === 'x')
+    <template name="tick-mark">
+        <g>
+            <line {{ $attributes->merge([
+                'class' => 'stroke-zinc-300',
+                'orientation' => $position === 'top' ? 'top' : 'bottom',
+                'stroke' => 'currentColor',
+                'stroke-width' => '1',
+                'fill' => 'none',
+                'y1' => '0',
+                'y2' => '6',
+            ]) }}></line>
+        </g>
+    </template>
+@else
+    <template name="tick-mark">
+        <g>
+            <line {{ $attributes->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',
+            ]) }}></line>
+        </g>
+    </template>
+@endif

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')
+    <template name="tick-label" @if ($format) format="{{ $format }}" @endif>
+        <g>
+            <text {{ $attributes->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',
+            ]) }}><slot></slot></text>
+        </g>
+    </template>
+@else
+    <template name="tick-label" @if ($format) format="{{ $format }}" @endif>
+        <g>
+            <text {{ $attributes->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',
+            ]) }}><slot></slot></text>
+        </g>
+    </template>
+@endif

resources/views/flux/chart/cursor.blade.php

@@ -0,0 +1,11 @@
+@blaze
+
+<template name="cursor">
+    <line {{ $attributes->merge([
+        'class' => 'text-zinc-500 dark:text-zinc-300',
+        'type' => 'vertical',
+        'stroke' => 'currentColor',
+        'stroke-width' => '1',
+        'stroke-dasharray' => '4,4',
+    ]) }}></line>
+</template>

resources/views/flux/chart/index.blade.php

@@ -0,0 +1,18 @@
+@blaze
+
+@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
+
+<ui-chart {{ $attributes->class($classes) }} wire:ignore.children @if ($value) value="{{ $value }}" @endif>
+    {{ $slot }}
+</ui-chart>

resources/views/flux/chart/legend/index.blade.php

@@ -0,0 +1,21 @@
+@blaze
+
+@props([
+    'label' => null,
+    'field' => null,
+    'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+<div {{ $attributes->class(['flex items-center gap-2 p-2']) }}>
+    {{ $slot }}
+
+    @if (is_string($label) && $label !== '')
+        <div class="text-xs text-zinc-500 dark:text-zinc-400">{{ $label }}</div>
+    @elseif ($label)
+        {{ $label }}
+    @endif
+</div>

resources/views/flux/chart/legend/indicator.blade.php

@@ -0,0 +1,3 @@
+@blaze
+
+<div {{ $attributes->class('size-2.5 rounded-full') }}></div>

resources/views/flux/chart/line.blade.php

@@ -0,0 +1,15 @@
+@blaze
+
+@props([
+    'field' => 'value',
+])
+
+<template name="line" field="{{ $field }}" {{ $attributes->only(['curve']) }}>
+    <path {{ $attributes->class('[:where(&)]:text-zinc-800')->merge([
+        'stroke' => 'currentColor',
+        'stroke-width' => '2',
+        'fill' => 'none',
+        'stroke-linecap' => 'round',
+        'stroke-linejoin' => 'round',
+    ]) }}></path>
+</template>

resources/views/flux/chart/point.blade.php

@@ -0,0 +1,13 @@
+@blaze
+
+@props([
+    'field' => 'value',
+])
+
+<template name="point" field="{{ $field }}">
+    <circle {{ $attributes->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',
+    ]) }}></circle>
+</template>

resources/views/flux/chart/summary/index.blade.php

@@ -0,0 +1,7 @@
+@blaze
+
+<template name="summary">
+    <div {{ $attributes }}>
+        {{ $slot }}
+    </div>
+</template>

resources/views/flux/chart/summary/value.blade.php

@@ -0,0 +1,15 @@
+@blaze
+
+@props([
+    'field' => null,
+    'format' => null,
+    'fallback' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+<span {{ $attributes }}>
+    <slot @if ($field) field="{{ $field }}" @endif @if ($format) format="{{ $format }}" @endif @if ($fallback) fallback="{{ $fallback }}" @endif></slot>
+</span>

resources/views/flux/chart/svg.blade.php

@@ -0,0 +1,11 @@
+@blaze
+
+@props([
+    'gutter' => null,
+])
+
+<template name="svg" @if (isset($gutter)) gutter="{{ $gutter }}" @endif>
+    <svg {{ $attributes->class('absolute inset-0') }} xmlns="http://www.w3.org/2000/svg" version="1.1">
+        {{ $slot }}
+    </svg>
+</template>

resources/views/flux/chart/tooltip/heading.blade.php

@@ -0,0 +1,17 @@
+@blaze
+
+@props([
+    'field' => 'date',
+    'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+<div {{ $attributes->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'
+    ]) }}>
+    <slot field="{{ $field }}" @if ($format) format="{{ $format }}" @endif></slot>
+</div>

resources/views/flux/chart/tooltip/index.blade.php

@@ -0,0 +1,19 @@
+@blaze
+
+@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
+
+<template name="tooltip">
+    <div {{ $attributes->class($classes) }}>
+        {{ $slot}}
+    </div>
+</template>

resources/views/flux/chart/tooltip/value.blade.php

@@ -0,0 +1,27 @@
+@blaze
+
+@props([
+    'label' => null,
+    'field' => null,
+    'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+<div {{ $attributes->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 !== '')
+        <div class="text-zinc-800 dark:text-white">{{ $label }}</div>
+    @elseif ($label)
+        {{ $label }}
+    @endif
+
+    @if ($field)
+        <div class="flex-1"></div>
+
+        <slot field="{{ $field }}" @if ($format) format="{{ $format }}" @endif></slot>
+    @endif
+</div>

resources/views/flux/chart/value.blade.php

@@ -0,0 +1,14 @@
+@blaze
+
+@props([
+    'field' => null,
+    'format' => null,
+])
+
+@php
+$format = is_array($format) ? \Illuminate\Support\Js::encode($format) : $format;
+@endphp
+
+<span {{ $attributes }}>
+    <slot @if ($field) field="{{ $field }}" @endif @if ($format) format="{{ $format }}" @endif></slot>
+</span>

resources/views/flux/chart/viewport.blade.php

@@ -0,0 +1,5 @@
+@blaze
+
+<div {{ $attributes->class('[:where(&)]:relative') }}>
+    {{ $slot }}
+</div>

resources/views/flux/chart/zero-line.blade.php

@@ -0,0 +1,15 @@
+@aware(['axis' => 'x'])
+
+<template name="zero-line">
+    <line {{ $attributes->merge([
+        'class' => '[:where(&)]:text-zinc-400',
+        'orientation' => 'left',
+        'stroke-width' => '1',
+        'stroke' => 'currentColor',
+        'fill' => 'none',
+        'x1' => '0',
+        'y1' => '0',
+        'x2' => '0',
+        'y2' => '6',
+    ]) }}></line>
+</template>