@svgrid/ui 0.2.0

package/recipes/range/gauge.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  // SvGauge - radial arc gauge for a single KPI. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-gauge
+  import { SvGauge } from '@svgrid/grid'
+
+  let value = $state(72)
+</script>
+
+<SvGauge
+  {value}
+  unit="%"
+  bands={[
+    { from: 0, to: 60, color: '#16a34a' },
+    { from: 60, to: 85, color: '#f59e0b' },
+    { from: 85, to: 100, color: '#dc2626' },
+  ]}
+/>

package/recipes/range/progress.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  // SvProgress - linear determinate/indeterminate progress bar. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-progress
+  import { SvProgress } from '@svgrid/grid'
+
+  let value = $state(64)
+</script>
+
+<SvProgress {value} showLabel />
+<SvProgress value={30} color="warning" striped />
+<SvProgress indeterminate color="accent" />

package/recipes/range/slider.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  // SvSlider - single or dual-thumb range slider. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-slider
+  import { SvSlider } from '@svgrid/grid'
+
+  let price = $state<[number, number]>([20, 80])
+</script>
+
+<SvSlider
+  label="Price range"
+  range
+  value={price}
+  min={0}
+  max={200}
+  step={5}
+  ticks={5}
+  labels="endpoints"
+  formatValue={(v) => `$${v}`}
+  onChange={(v) => (price = v)}
+/>

package/recipes/range/sparkline.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // SvSparkline - tiny inline line/area/bar/winloss chart. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-sparkline
+  import { SvSparkline } from '@svgrid/grid'
+
+  let data = $state([3, 7, 4, 9, 6, 11, 8])
+</script>
+
+<SvSparkline {data} type="area" />
+<SvSparkline data={[5, -2, 4, -1, 3, 6, -3]} type="winloss" />

package/recipes/range/stat.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  // SvStat - KPI metric card with delta trend. Your copy, edit freely. Docs: https://www.svgrid.com/docs/help/ui-components/sv-stat
+  import { SvStat } from '@svgrid/grid'
+
+  let value = $state('$48.2k')
+</script>
+
+<SvStat label="Revenue" {value} delta={12.4} hint="vs last month" />
+<SvStat label="Error rate" value="0.8%" delta={-1.2} invert hint="vs last week" />