🎨 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/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