chore(release): refresh private package staging

2026-08-10 00:55:12 +05:30
parent bca9549f3a
commit db612df6cd
69 changed files with 5421 additions and 7243 deletions
@@ -1,25 +1,107 @@
 component Chart {
  outputs {
-    select(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
-    dataPointClick(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
-    legendToggle(payload: { sourceEvent?: Event; value: string | number | boolean | null | object; [key: string]: string | number | boolean | null | object } | string | number | boolean | null | object[])
+    select(payload: { item: object; index: number; sourceEvent?: Event })
+    dataPointClick(payload: { item: object; index: number; sourceEvent?: Event })
+    legendToggle(payload: { item: object; index: number; hidden: boolean; sourceEvent?: Event })
  }

  props {
-size: string = "default"
-    color: string = "primary"
    title: string = "Chart"
    description: string = ""
    items: unknown[] = []
-    variant: string = "default"
+    valueKey: string = "value"
+    labelKey: string = "label"
+    height: number = 240
+    showLegend: boolean = true
+    showValues: boolean = true
+    size: string = "default"
+    color: string = "primary"
+    variant: string = "bar"
    class: string = ""
  }
+
+  state hiddenIndexes = []
+
+  functions {
+    shared function numericValue(item) { return Math.max(0, Number(item[valueKey]) || 0) }
+    shared function maximumValue() {
+      return Math.max(1, ...items.map(function (item) { return numericValue(item) }))
+    }
+    shared function isHidden(index) { return hiddenIndexes.includes(index) }
+    shared function barWidth() { return items.length ? Math.max(4, 80 / items.length) : 80 }
+    shared function barX(index) { return 10 + index * (80 / Math.max(1, items.length)) }
+    shared function barHeight(item) { return numericValue(item) / maximumValue() * 72 }
+    shared function barY(item) { return 84 - barHeight(item) }
+
+    client function selectPoint(item, index, sourceEvent) {
+      output.dataPointClick({ item: item, index: index, sourceEvent: sourceEvent })
+      output.select({ item: item, index: index, sourceEvent: sourceEvent })
+    }
+
+    client function toggleLegend(item, index, sourceEvent, next) {
+      next = hiddenIndexes.slice()
+      if (next.includes(index)) {
+        next = next.filter(function (value) { return value !== index })
+      } else {
+        next.push(index)
+      }
+      hiddenIndexes = next
+      output.legendToggle({ item: item, index: index, hidden: next.includes(index), sourceEvent: sourceEvent })
+    }
+  }
+
  view {
-    <section class="wire-next wire-next--color-{color} wire-next--size-{size} wire-next--chart wire-next--variant-{variant} {class}">
-      {#if title}<strong>{title}</strong>{/if}
-      {#if description}<p>{description}</p>{/if}
-      {#if items}<div class="wire-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
+    <figure {...attrs} data-ui-component="Chart" data-variant='{variant}' class='wire-chart {class}'>
+      {#if title || description}
+        <figcaption class="wire-chart__header">
+          {#if title}<strong>{title}</strong>{/if}
+          {#if description}<span>{description}</span>{/if}
+        </figcaption>
+      {/if}
+      <svg class="wire-chart__plot" viewBox="0 0 100 100" role="img" aria-label='{title}' style='height:{height}px'>
+        <line x1="8" y1="84" x2="96" y2="84" class="wire-chart__axis" />
+        {#each items as item, index}
+          <g data-hidden='{isHidden(index) ? "true" : "false"}'>
+            <rect
+              x='{barX(index)}' y='{barY(item)}' width='{barWidth()}' height='{barHeight(item)}'
+              rx="1.5" class="wire-chart__bar" role="button" tabindex="0"
+              aria-label='{item[labelKey] + ": " + numericValue(item)}'
+              @click='selectPoint(item, index, event)'
+              @keydown='if (event.key === "Enter" || event.key === " ") { event.preventDefault(); selectPoint(item, index, event) }'
+            />
+            {#if showValues}<text x='{barX(index) + barWidth() / 2}' y='{barY(item) - 3}' class="wire-chart__value">{numericValue(item)}</text>{/if}
+            <text x='{barX(index) + barWidth() / 2}' y="94" class="wire-chart__label">{item[labelKey]}</text>
+          </g>
+        {/each}
+      </svg>
+      {#if showLegend}
+        <div class="wire-chart__legend" aria-label="Chart legend">
+          {#each items as item, index}
+            <button type="button" aria-pressed='{isHidden(index) ? "false" : "true"}' @click='toggleLegend(item, index, event)'>
+              <span aria-hidden="true"></span>{item[labelKey]}
+            </button>
+          {/each}
+        </div>
+      {/if}
      <slot />
-    </section>
+    </figure>
+  }
+
+  style {
+    .wire-chart { display: grid; gap: 1rem; min-width: 0; margin: 0; padding: 1rem; border: 1px solid var(--wire-color-border); border-radius: var(--wire-radius); color: var(--wire-color-text); background: var(--wire-color-surface); box-shadow: var(--wire-shadow-1); }
+    .wire-chart__header { display: grid; gap: 0.2rem; }
+    .wire-chart__header > span { color: var(--wire-color-muted); font-size: 0.8rem; }
+    .wire-chart__plot { display: block; width: 100%; min-height: 12rem; overflow: visible; }
+    .wire-chart__axis { stroke: var(--wire-color-border); stroke-width: 0.5; }
+    .wire-chart__bar { fill: var(--wire-color-primary); cursor: pointer; transition: opacity var(--wire-motion-fast), transform var(--wire-motion-fast); transform-box: fill-box; transform-origin: bottom; }
+    .wire-chart__bar:hover { opacity: 0.82; transform: scaleY(1.02); }
+    .wire-chart__bar:focus-visible { outline: 1.5px solid var(--wire-color-focus); outline-offset: 1px; }
+    .wire-chart__plot g[data-hidden="true"] { opacity: 0.18; pointer-events: none; }
+    .wire-chart__value, .wire-chart__label { fill: var(--wire-color-text); font-size: 3.5px; text-anchor: middle; }
+    .wire-chart__label { fill: var(--wire-color-muted); }
+    .wire-chart__legend { display: flex; flex-wrap: wrap; gap: 0.5rem; }
+    .wire-chart__legend button { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.5rem; border: 1px solid var(--wire-color-border); border-radius: 999px; color: var(--wire-color-text); background: transparent; font: inherit; font-size: 0.75rem; cursor: pointer; }
+    .wire-chart__legend button > span { width: 0.65rem; height: 0.65rem; border-radius: 0.2rem; background: var(--wire-color-primary); }
+    .wire-chart__legend button[aria-pressed="false"] { opacity: 0.5; }
  }
 }