[BarStack] Support passing color for data item (along with `classes…

…` and `style`)

.changeset/healthy-countries-unite.md

@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+[BarStack] Support passing `color` for data item (along with `classes` and `style`)

packages/svelte-ux/src/lib/components/BarStack.svelte

@@ -12,6 +12,7 @@
   export let data: {
     label: string;
     value: number;
+    color?: string;
     style?: string;
     classes?: {
       root?: string;
@@ -45,6 +46,7 @@
         <slot {item} total={total ?? sum(data, (d) => d.value)}>
           <div
             class={cls('group-first:rounded-l group-last:rounded-r', item.classes?.bar)}
+            style:background-color={item.color}
             style={item.style}
           >
             <slot name="bar" {item} total={total ?? sum(data, (d) => d.value)}>

packages/svelte-ux/src/routes/docs/components/BarStack/+page.svelte

@@ -10,12 +10,19 @@
   import { cls } from '$lib/utils/styles.js';
 
   const data = [
-    { label: 'Chrome', value: 65, classes: { bar: 'bg-warning' }, _style: 'background:red' },
+    { label: 'Chrome', value: 65, classes: { bar: 'bg-warning' } },
     { label: 'Safari', value: 18.55, classes: { bar: 'bg-info' } },
     { label: 'Edge', value: 5.03, classes: { bar: 'bg-success' } },
     { label: 'Firefox', value: 2.8, classes: { bar: 'bg-danger' } },
   ];
 
+  const dataWithColorProp = [
+    { label: 'Chrome', value: 65, color: 'yellow' },
+    { label: 'Safari', value: 18.55, color: 'blue' },
+    { label: 'Edge', value: 5.03, color: 'green' },
+    { label: 'Firefox', value: 2.8, color: 'red' },
+  ];
+
   function randomDataGen() {
     return data.map((d) => {
       return {
@@ -44,6 +51,12 @@
   <BarStack {data} class="gap-1" />
 </Preview>
 
+<h2>Color via prop</h2>
+
+<Preview>
+  <BarStack data={dataWithColorProp} class="gap-1" />
+</Preview>
+
 <h2>Bar slot</h2>
 
 <Preview>