zynaui 0.1.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Binary Tech Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,491 @@
+# Zyna UI
+
+> Tailwind CSS component library + D3-powered chart Web Components
+> Built by [Binary Tech Ltd](https://binary.ly) · Open source · MIT License
+
+[![npm version](https://img.shields.io/npm/v/zynaui)](https://www.npmjs.com/package/zynaui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Website](https://img.shields.io/badge/website-zyna.dev-gold)](https://zyna.dev)
+
+---
+
+## What's included
+
+| Package | Description |
+|---------|-------------|
+| **Tailwind plugin** | Semantic classes: `.btn`, `.card`, `.badge`, `.alert` |
+| **Chart Web Components** | `<zyna-waffle>`, `<zyna-timeline>`, `<zyna-nightingale>`, `<zyna-lollipop>`, `<zyna-orbital>` |
+
+Framework-agnostic — works in React, Vue, Svelte, Blade, or plain HTML.
+
+---
+
+## UI Components (Tailwind Plugin)
+
+### Installation
+
+```bash
+npm install zynaui tailwindcss
+```
+
+**Tailwind v3** — `tailwind.config.js`:
+
+```js
+module.exports = {
+  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}'],
+  plugins: [require('zynaui')],
+}
+```
+
+**Tailwind v4** — `app.css`:
+
+```css
+@import "tailwindcss";
+@plugin "zynaui";
+```
+
+---
+
+### Plugin options
+
+#### `prefix` — avoid class name conflicts
+
+If another library in your project already uses `.btn`, `.card`, `.badge`, or `.alert`, add a prefix:
+
+**Tailwind v3:**
+
+```js
+plugins: [require('zynaui')({ prefix: 'z-' })]
+// → .z-btn, .z-btn-primary, .z-card, .z-badge, .z-alert …
+```
+
+**Tailwind v4:**
+
+```css
+@plugin "zynaui" {
+  prefix: z-;
+}
+```
+
+---
+
+### Tailwind utilities
+
+ZynaUI extends the Tailwind theme with semantic color and radius tokens, so you can use them as native utility classes:
+
+```html
+<!-- Status colors -->
+<span class="text-zyna-success">Operational</span>
+<span class="text-zyna-danger">Critical</span>
+<span class="text-zyna-warning">Degraded</span>
+<span class="text-zyna-info">Updating</span>
+<span class="text-zyna-muted">Offline</span>
+
+<!-- Brand color -->
+<span class="text-zyna">Gold accent</span>
+
+<!-- Corner radius (respects active genre) -->
+<div class="rounded-zyna-sm">…</div>
+<div class="rounded-zyna">…</div>
+<div class="rounded-zyna-lg">…</div>
+```
+
+These resolve to CSS variables (e.g. `text-zyna-success` → `color: var(--z-color-success)`) and update automatically when the active genre changes.
+
+---
+
+### Buttons
+
+```html
+<button class="btn btn-primary">Primary</button>
+<button class="btn btn-secondary">Secondary</button>
+<button class="btn btn-ghost">Ghost</button>
+<button class="btn btn-danger">Danger</button>
+
+<!-- Sizes -->
+<button class="btn btn-primary btn-sm">Small</button>
+<button class="btn btn-primary btn-lg">Large</button>
+
+<!-- Icon button -->
+<button class="btn btn-primary btn-icon">
+  <svg>…</svg>
+</button>
+```
+
+**Custom button variant** — set CSS variables, no plugin changes needed:
+
+```css
+.btn-plasma {
+  --btn-bg:                rgba(139, 0, 255, 0.38);
+  --btn-color:             #BF5FFF;
+  --btn-filter:            drop-shadow(0 0 8px rgba(139,0,255,0.45));
+  --btn-scan-color:        rgba(139, 0, 255, 0.18);
+  --btn-hover-filter:      drop-shadow(0 0 22px rgba(139,0,255,1)) brightness(1.10);
+  --btn-hover-text-shadow: 0 0 16px rgba(200,100,255,0.7);
+}
+```
+
+---
+
+### Badges
+
+```html
+<span class="badge badge-primary">New</span>
+<span class="badge badge-success badge-pulse">Active</span>
+<span class="badge badge-danger">Error</span>
+<span class="badge badge-warning">Pending</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-neutral">Draft</span>
+
+<!-- Large -->
+<span class="badge badge-primary badge-lg">Featured</span>
+```
+
+**Custom badge variant:**
+
+```css
+.badge-plasma {
+  --badge-bg:    rgba(139, 0, 255, 0.10);
+  --badge-color: #BF5FFF;
+  --badge-glow:  drop-shadow(0 0 5px rgba(139,0,255,0.45))
+                 drop-shadow(0 0 14px rgba(139,0,255,0.14));
+}
+```
+
+---
+
+### Cards
+
+```html
+<div class="card">
+  <div class="card-header">System Status</div>
+  <div class="card-body">
+    <p class="card-title">Card Title</p>
+    <p class="card-subtitle">Supporting subtitle</p>
+    <p>Body content here.</p>
+  </div>
+  <div class="card-footer">Footer</div>
+</div>
+
+<!-- Variants -->
+<div class="card card-dark">…</div>
+<div class="card card-glow">…</div>
+<div class="card card-compact">…</div>
+```
+
+**Custom card variant:**
+
+```css
+.card-cyber {
+  --card-gradient:      linear-gradient(145deg, rgba(0,20,30,0.97) 0%, rgba(0,10,18,0.97) 100%);
+  --card-border-color:  rgba(0,212,255,0.22);
+  --card-bracket-color: rgba(0,212,255,0.55);
+  --card-bar-gradient:  linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.55) 25%, rgba(0,212,255,0.55) 75%, transparent 100%);
+  --card-glow-lo:       rgba(0,212,255,0.12);
+  --card-glow-hi:       rgba(0,212,255,0.26);
+  --card-animation:     zyna-card-pulse 4s ease-in-out infinite;
+}
+```
+
+---
+
+### Alerts
+
+```html
+<div class="alert alert-success">
+  <p class="alert-title">Success</p>
+  <p>Your changes have been saved.</p>
+</div>
+
+<div class="alert alert-danger">…</div>
+<div class="alert alert-warning">…</div>
+<div class="alert alert-info">…</div>
+```
+
+**Custom alert variant:**
+
+```css
+.alert-plasma {
+  --alert-bar-color:    #BF5FFF;
+  --alert-bg:           rgba(139, 0, 255, 0.055);
+  --alert-color:        rgba(191, 95, 255, 0.88);
+  --alert-shadow:       0 0 30px rgba(139,0,255,0.08),
+                        inset 4px 0 18px rgba(139,0,255,0.05);
+  --alert-title-shadow: 0 0 12px rgba(191,95,255,0.65);
+}
+```
+
+---
+
+## Chart Web Components
+
+### React & Next.js — typed wrapper components
+
+Install the wrapper and get typed React components that accept native arrays and numbers:
+
+```bash
+npm install zynaui
+```
+
+```tsx
+import { ZynaWaffle, ZynaTimeline, ZynaNightingale, ZynaLollipop, ZynaOrbital } from 'zynaui/react'
+
+export default function Charts() {
+  const data = [
+    { label: 'Food',    value: 35, color: '#C9A84C' },
+    { label: 'Shelter', value: 25, color: '#009EDB', outline: true },
+  ]
+  return <ZynaWaffle data={data} cols={10} gap={3} />
+}
+```
+
+The `'use client'` directive is baked into the package — works with Next.js App Router out of the box. The IIFE bundle is inlined, so no file copying or `next/script` setup is needed.
+
+---
+
+### Via bundler (Vue / Svelte / Astro)
+
+```js
+import 'zynaui/charts'
+```
+
+### Individual chart imports
+
+```js
+import 'zynaui/charts/waffle'
+import 'zynaui/charts/timeline'
+import 'zynaui/charts/nightingale'
+import 'zynaui/charts/lollipop'
+import 'zynaui/charts/orbital'
+```
+
+### Via CDN / Vanilla HTML (no bundler)
+
+Link the pre-compiled CSS and load the IIFE bundle — no build step needed:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/zynaui/dist/zynaui.css" />
+<script src="https://cdn.jsdelivr.net/npm/zynaui/dist/zyna-charts.iife.js"></script>
+```
+
+Or if installed via npm:
+
+```html
+<link rel="stylesheet" href="node_modules/zynaui/dist/zynaui.css" />
+<script src="node_modules/zynaui/dist/zyna-charts.iife.js"></script>
+```
+
+---
+
+### `<zyna-waffle>`
+
+Waffle chart — square-grid cells, each filled or outline-only.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data` | JSON array | `[]` | `[{ label, value, color?, outline? }]` |
+| `color` | hex | `#C9A84C` | Fallback cell color |
+| `cols` | number | `10` | Grid columns |
+| `gap` | number | `3` | Gap between cells (px) |
+
+```html
+<zyna-waffle
+  data='[
+    { "label": "UK",  "value": 24, "color": "#1A3A6B" },
+    { "label": "US",  "value": 28, "color": "#009EDB" },
+    { "label": "EU",  "value": 20, "color": "#4A6741", "outline": true }
+  ]'
+></zyna-waffle>
+```
+
+---
+
+### `<zyna-timeline>`
+
+Proportional-circle timeline — bubble area encodes value.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data` | JSON array | `[]` | `[{ label, value, note? }]` |
+| `color` | hex | `#C9A84C` | Accent color for highlighted item |
+| `theme` | `dark`/`light` | `dark` | Color theme |
+| `highlight` | string | highest value | Label of the item to emphasize |
+
+```html
+<zyna-timeline
+  data='[
+    { "label": "2019", "value": 120 },
+    { "label": "2020", "value": 95, "note": "COVID" },
+    { "label": "2021", "value": 180 },
+    { "label": "2022", "value": 210 }
+  ]'
+  highlight="2022"
+></zyna-timeline>
+```
+
+---
+
+### `<zyna-nightingale>`
+
+Nightingale (rose) chart — sector radius encodes value.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data` | JSON array | `[]` | `[{ label, value, color? }]` |
+| `color` | hex | `#C9A84C` | Fallback sector color |
+| `theme` | `dark`/`light` | `dark` | Color theme |
+
+```html
+<zyna-nightingale
+  data='[
+    { "label": "Food",      "value": 42, "color": "#C9A84C" },
+    { "label": "Shelter",   "value": 31, "color": "#009EDB" },
+    { "label": "Education", "value": 18, "color": "#00FFB2" },
+    { "label": "Health",    "value": 27, "color": "#FF3366" }
+  ]'
+></zyna-nightingale>
+```
+
+---
+
+### `<zyna-lollipop>`
+
+Horizontal lollipop chart — line + circle encodes value.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data` | JSON array | `[]` | `[{ label, value }]` sorted descending recommended |
+| `color` | hex | `#C9A84C` | Accent color for the top item |
+| `theme` | `dark`/`light` | `dark` | Color theme |
+
+```html
+<zyna-lollipop
+  data='[
+    { "label": "Libya",  "value": 820 },
+    { "label": "Sudan",  "value": 610 },
+    { "label": "Syria",  "value": 490 },
+    { "label": "Yemen",  "value": 380 }
+  ]'
+></zyna-lollipop>
+```
+
+---
+
+### `<zyna-orbital>`
+
+Concentric arc chart — each ring filled as a proportion of a full circle.
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `data` | JSON array | `[]` | `[{ label, value, color? }]` — `value` is `0`–`1` |
+| `color` | hex | `#C9A84C` | Fallback ring color |
+| `theme` | `dark`/`light` | `dark` | Color theme |
+
+```html
+<zyna-orbital
+  data='[
+    { "label": "Delivered", "value": 0.78, "color": "#C9A84C" },
+    { "label": "In Transit","value": 0.55, "color": "#009EDB" },
+    { "label": "Planned",   "value": 0.32, "color": "#00FFB2" }
+  ]'
+></zyna-orbital>
+```
+
+---
+
+## Custom genres
+
+Create a fully custom visual paradigm with `defineGenre`:
+
+```js
+import { defineGenre, registerGenre } from 'zynaui/genres'
+
+const aurora = defineGenre({
+  name: 'Aurora',
+  palette: { brand: '#BF5FFF' },
+  tokens: {
+    '--zyna':            '#BF5FFF',
+    '--z-ease-enter':    'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    '--z-duration-fast': '0.14s',
+  },
+  styles: {
+    'html[data-genre="aurora"]': {
+      '--z-btn-clip':   'inset(0)',
+      '--z-badge-clip': 'inset(0 round 4px)',
+    },
+  },
+})
+
+registerGenre(aurora)
+```
+
+Activate at runtime:
+
+```js
+document.documentElement.setAttribute('data-genre', 'aurora')
+```
+
+> **Note:** Genre structural styles (`styles`) are compiled into `zynaui.css` at Tailwind build time. Register custom genres before your build step runs so their rules are included in the output.
+
+---
+
+## Build
+
+```bash
+npm install
+npm run build
+```
+
+Outputs:
+
+| File | Format | Use case |
+|------|--------|----------|
+| `dist/zyna-plugin.cjs` | CommonJS | Tailwind config `require()` |
+| `dist/zyna-plugin.js` | ESM | Bundler import |
+| `dist/genres.js` | ESM | `import { defineGenre } from 'zynaui/genres'` |
+| `dist/zyna-charts.js` | ESM | Bundler `import 'zynaui/charts'` |
+| `dist/zyna-charts.iife.js` | IIFE | `<script src>` with no bundler |
+| `dist/zyna-charts-stub.cjs` | CJS stub | SSR environments (auto-selected) |
+| `dist/react.js` | ESM | `import { ZynaWaffle } from 'zynaui/react'` |
+| `dist/zynaui.css` | CSS | Pre-compiled CSS for CDN / vanilla HTML |
+
+```bash
+# Build only the Tailwind plugin
+npm run build:lib
+
+# Build only the IIFE bundle (CDN)
+npm run build:iife
+
+# Build only the docs CSS
+npm run build:css
+```
+
+---
+
+## CSS Variable API
+
+All components are driven entirely by CSS custom properties. Create custom variants without touching plugin source:
+
+```css
+/* A custom button — just set variables */
+.btn-ocean {
+  --btn-bg:           linear-gradient(135deg, #006994 0%, #003d5b 100%);
+  --btn-color:        #7ED8F6;
+  --btn-filter:       drop-shadow(0 0 8px rgba(0,105,148,0.5));
+  --btn-hover-filter: drop-shadow(0 0 22px rgba(0,185,255,0.9)) brightness(1.12);
+}
+```
+
+See the JSDoc at the top of each component file in `src/plugin/components/` for the full variable reference.
+
+---
+
+## Credits
+
+The semantic component class naming convention (`.btn`, `.btn-primary`, `.card`, `.badge`, `.alert`, etc.) is inspired by [DaisyUI](https://daisyui.com) by Pouya Saadeghi — the leading semantic Tailwind component library. Zyna UI takes that convention and applies a dark, HUD-style aesthetic with CSS custom properties, clip-path geometry, and D3-powered chart Web Components.
+
+---
+
+## License
+
+MIT © [Binary Tech Ltd](https://binary.ly)

package/dist/base-CaP9Us8w.js

@@ -0,0 +1,89 @@
+class l extends HTMLElement {
+  connectedCallback() {
+    this._lastW = 0, this._rafId = null, this._timerId = null, this._genreHandler = () => this._render(), window.addEventListener("zyna-genre", this._genreHandler), this._ro = new ResizeObserver((t) => {
+      var r;
+      const e = ((r = t[0]) == null ? void 0 : r.contentRect.width) ?? this.clientWidth;
+      if (Math.abs(e - this._lastW) < 3) return;
+      const i = this._lastW === 0;
+      this._lastW = e, this._rafId && cancelAnimationFrame(this._rafId), this._rafId = requestAnimationFrame(() => {
+        this._rafId = null, clearTimeout(this._timerId), i ? this._render() : this._timerId = setTimeout(() => this._render(), 150);
+      });
+    }), this._ro.observe(this), requestAnimationFrame(() => {
+      this._lastW === 0 && (this._lastW = this.clientWidth, this._render());
+    });
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this._ro) == null || t.disconnect(), this._rafId && cancelAnimationFrame(this._rafId), this._timerId && clearTimeout(this._timerId), window.removeEventListener("zyna-genre", this._genreHandler);
+  }
+  attributeChangedCallback() {
+    this.isConnected && this._render();
+  }
+  /**
+   * Returns the raw string value of an attribute, or `fallback` if absent.
+   * @param {string} name
+   * @param {*} fallback
+   * @returns {string|*}
+   */
+  _attr(t, e) {
+    const i = this.getAttribute(t);
+    return i !== null ? i : e;
+  }
+  /**
+   * Returns the JSON-parsed value of an attribute, or `fallback` if absent or unparseable.
+   * @param {string} name
+   * @param {*} fallback
+   * @returns {*}
+   */
+  _json(t, e) {
+    const i = this.getAttribute(t);
+    if (i === null) return e;
+    try {
+      return JSON.parse(i);
+    } catch {
+      return e;
+    }
+  }
+  /**
+   * A stable, per-instance unique string for use in SVG `id` / `url()` references.
+   * Uses `crypto.randomUUID()` when available, falling back to `Math.random()`.
+   * @returns {string}
+   */
+  get _uid() {
+    return this.__uid || (this.__uid = typeof crypto < "u" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Math.random().toString(36).slice(2, 10)), this.__uid;
+  }
+  /**
+   * Logs a dev-friendly warning when a chart is mounted with no data.
+   * Silenced in production by a `data-silent` attribute on the element.
+   * @param {string} tag  Custom element tag name e.g. 'zyna-waffle'
+   */
+  _warnEmpty(t) {
+    this.hasAttribute("data-silent") || console.warn(`[${t}] No data provided. Add a \`data\` attribute with a JSON array.`);
+  }
+  /**
+   * Formats a numeric value using a D3-style format string.
+   * Supports: '$' prefix, ',' thousands separator, '.Nf' decimals, '%' (×100 + suffix).
+   * Returns the value unchanged if no format string is provided.
+   * @param {number|string} value
+   * @param {string} fmt  e.g. '$,.0f' | ',.2f' | '.1%' | ''
+   * @returns {string}
+   */
+  _fmt(t, e) {
+    if (!e) return t;
+    const i = Number(t);
+    if (isNaN(i)) return String(t);
+    const r = e.includes("%"), d = e.includes("$"), o = e.includes(","), s = e.match(/\.(\d+)/), n = s ? parseInt(s[1]) : r ? 1 : 0, a = r ? i * 100 : i, c = o ? a.toLocaleString("en-US", { minimumFractionDigits: n, maximumFractionDigits: n }) : a.toFixed(n);
+    return (d ? "$" : "") + c + (r ? "%" : "");
+  }
+  _brand() {
+    return getComputedStyle(document.documentElement).getPropertyValue("--zyna").trim() || "#C9A84C";
+  }
+  _brandDark() {
+    return getComputedStyle(document.documentElement).getPropertyValue("--zyna-dark").trim() || "#7A6230";
+  }
+  _render() {
+  }
+}
+export {
+  l as Z
+};

package/dist/base-DyLOr2iL.cjs

@@ -0,0 +1 @@
+"use strict";class h extends HTMLElement{connectedCallback(){this._lastW=0,this._rafId=null,this._timerId=null,this._genreHandler=()=>this._render(),window.addEventListener("zyna-genre",this._genreHandler),this._ro=new ResizeObserver(t=>{var r;const e=((r=t[0])==null?void 0:r.contentRect.width)??this.clientWidth;if(Math.abs(e-this._lastW)<3)return;const i=this._lastW===0;this._lastW=e,this._rafId&&cancelAnimationFrame(this._rafId),this._rafId=requestAnimationFrame(()=>{this._rafId=null,clearTimeout(this._timerId),i?this._render():this._timerId=setTimeout(()=>this._render(),150)})}),this._ro.observe(this),requestAnimationFrame(()=>{this._lastW===0&&(this._lastW=this.clientWidth,this._render())})}disconnectedCallback(){var t;(t=this._ro)==null||t.disconnect(),this._rafId&&cancelAnimationFrame(this._rafId),this._timerId&&clearTimeout(this._timerId),window.removeEventListener("zyna-genre",this._genreHandler)}attributeChangedCallback(){this.isConnected&&this._render()}_attr(t,e){const i=this.getAttribute(t);return i!==null?i:e}_json(t,e){const i=this.getAttribute(t);if(i===null)return e;try{return JSON.parse(i)}catch{return e}}get _uid(){return this.__uid||(this.__uid=typeof crypto<"u"&&crypto.randomUUID?crypto.randomUUID().slice(0,8):Math.random().toString(36).slice(2,10)),this.__uid}_warnEmpty(t){this.hasAttribute("data-silent")||console.warn(`[${t}] No data provided. Add a \`data\` attribute with a JSON array.`)}_fmt(t,e){if(!e)return t;const i=Number(t);if(isNaN(i))return String(t);const r=e.includes("%"),d=e.includes("$"),o=e.includes(","),s=e.match(/\.(\d+)/),n=s?parseInt(s[1]):r?1:0,a=r?i*100:i,c=o?a.toLocaleString("en-US",{minimumFractionDigits:n,maximumFractionDigits:n}):a.toFixed(n);return(d?"$":"")+c+(r?"%":"")}_brand(){return getComputedStyle(document.documentElement).getPropertyValue("--zyna").trim()||"#C9A84C"}_brandDark(){return getComputedStyle(document.documentElement).getPropertyValue("--zyna-dark").trim()||"#7A6230"}_render(){}}exports.ZynaChart=h;

package/dist/charts/lollipop.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("../base-DyLOr2iL.cjs"),d=require("d3-selection"),T=require("d3-array"),W=require("d3-scale");class y extends H.ZynaChart{static get observedAttributes(){return["data","color","theme","highlight","muted-color","height","show-values","label-format","ticks"]}_render(){var g;const o=this._json("data",[]),b=this._attr("color",this._brand()),f=this._attr("muted-color",""),k=f||this._brandDark(),_=f||"#8A8478",v=this._attr("highlight","")||((g=o[0])==null?void 0:g.label)||"",w=this._attr("label-format",""),A=t=>this._fmt(t,w),M=this._attr("show-values","true")!=="false",u=parseInt(this._attr("height","0")),E=parseInt(this._attr("ticks","5")),z=this._attr("theme","dark")!=="light"?"#F0EBE0":"#1A1A20";if(!o.length){this._warnEmpty("zyna-lollipop");return}const S=(T.max(o,t=>t.value)||1)*1.1,l=this.clientWidth||420,$=Math.max(44,Math.min(70,l*.14)),r=u>0?u:Math.max(200,o.length*$+60),e={left:Math.max(60,l*.18),right:Math.max(50,l*.15),top:10,bottom:28},j=l-e.left-e.right,q=r-e.top-e.bottom,m=W.scaleLinear().domain([0,S]).range([0,j]),i=Math.max(9,l*.022),L=Math.max(11,l*.026);let n=d.select(this).select("svg");n.empty()&&(n=d.select(this).append("svg").style("display","block")),n.attr("viewBox",`0 0 ${l} ${r}`).attr("width",l).attr("height",r);const V=m.ticks(E);n.selectAll("g.ll-tick").data(V,t=>t).join(t=>{const a=t.append("g").attr("class","ll-tick");return a.append("line").attr("class","ll-tick-line"),a.append("text").attr("class","ll-tick-label"),a}).each(function(t){const a=d.select(this),s=e.left+m(t);a.select(".ll-tick-line").attr("x1",s).attr("x2",s).attr("y1",e.top).attr("y2",r-e.bottom+4).attr("stroke","#1E1E24").attr("stroke-width",.8),a.select(".ll-tick-label").attr("x",s).attr("y",r-e.bottom+16).attr("text-anchor","middle").attr("font-family","monospace").attr("font-size",`${i}px`).attr("fill","#5A5050").text(t)}),n.selectAll("g.ll-row").data(o,t=>t.label).join(t=>{const a=t.append("g").attr("class","ll-row");return a.append("line").attr("class","ll-stem"),a.append("circle").attr("class","ll-dot"),a.append("text").attr("class","ll-label"),a.append("text").attr("class","ll-value"),a}).each(function(t,a){const s=d.select(this),c=e.top+(a+.5)*(q/o.length),p=e.left+m(t.value),h=t.label===v,x=h?b:k,C=h?z:_;s.select(".ll-stem").attr("x1",e.left).attr("x2",p).attr("y1",c).attr("y2",c).attr("stroke",x).attr("stroke-width",h?1.5:1),s.select(".ll-dot").attr("cx",p).attr("cy",c).attr("r",h?7:5).attr("fill",x),s.select(".ll-label").attr("x",e.left-6).attr("y",c+i*.4).attr("text-anchor","end").attr("font-size",`${L}px`).attr("fill",C).text(t.label),s.select(".ll-value").attr("display",M?null:"none").attr("x",p+10).attr("y",c+i*.4).attr("font-family","monospace").attr("font-size",`${i}px`).attr("fill",x).text(A(t.value))})}}customElements.get("zyna-lollipop")||customElements.define("zyna-lollipop",y);exports.ZynaLollipop=y;

package/dist/charts/lollipop.js

@@ -0,0 +1,38 @@
+import { Z as W } from "../base-CaP9Us8w.js";
+import { select as m } from "d3-selection";
+import { max as Z } from "d3-array";
+import { scaleLinear as B } from "d3-scale";
+class I extends W {
+  static get observedAttributes() {
+    return ["data", "color", "theme", "highlight", "muted-color", "height", "show-values", "label-format", "ticks"];
+  }
+  _render() {
+    var u;
+    const o = this._json("data", []), y = this._attr("color", this._brand()), f = this._attr("muted-color", ""), b = f || this._brandDark(), k = f || "#8A8478", _ = this._attr("highlight", "") || ((u = o[0]) == null ? void 0 : u.label) || "", v = this._attr("label-format", ""), w = (t) => this._fmt(t, v), A = this._attr("show-values", "true") !== "false", g = parseInt(this._attr("height", "0")), M = parseInt(this._attr("ticks", "5")), E = this._attr("theme", "dark") !== "light" ? "#F0EBE0" : "#1A1A20";
+    if (!o.length) {
+      this._warnEmpty("zyna-lollipop");
+      return;
+    }
+    const z = (Z(o, (t) => t.value) || 1) * 1.1, e = this.clientWidth || 420, $ = Math.max(44, Math.min(70, e * 0.14)), r = g > 0 ? g : Math.max(200, o.length * $ + 60), l = { left: Math.max(60, e * 0.18), right: Math.max(50, e * 0.15), top: 10, bottom: 28 }, V = e - l.left - l.right, j = r - l.top - l.bottom, p = B().domain([0, z]).range([0, V]), i = Math.max(9, e * 0.022), C = Math.max(11, e * 0.026);
+    let n = m(this).select("svg");
+    n.empty() && (n = m(this).append("svg").style("display", "block")), n.attr("viewBox", `0 0 ${e} ${r}`).attr("width", e).attr("height", r);
+    const H = p.ticks(M);
+    n.selectAll("g.ll-tick").data(H, (t) => t).join((t) => {
+      const a = t.append("g").attr("class", "ll-tick");
+      return a.append("line").attr("class", "ll-tick-line"), a.append("text").attr("class", "ll-tick-label"), a;
+    }).each(function(t) {
+      const a = m(this), s = l.left + p(t);
+      a.select(".ll-tick-line").attr("x1", s).attr("x2", s).attr("y1", l.top).attr("y2", r - l.bottom + 4).attr("stroke", "#1E1E24").attr("stroke-width", 0.8), a.select(".ll-tick-label").attr("x", s).attr("y", r - l.bottom + 16).attr("text-anchor", "middle").attr("font-family", "monospace").attr("font-size", `${i}px`).attr("fill", "#5A5050").text(t);
+    }), n.selectAll("g.ll-row").data(o, (t) => t.label).join((t) => {
+      const a = t.append("g").attr("class", "ll-row");
+      return a.append("line").attr("class", "ll-stem"), a.append("circle").attr("class", "ll-dot"), a.append("text").attr("class", "ll-label"), a.append("text").attr("class", "ll-value"), a;
+    }).each(function(t, a) {
+      const s = m(this), c = l.top + (a + 0.5) * (j / o.length), d = l.left + p(t.value), h = t.label === _, x = h ? y : b, L = h ? E : k;
+      s.select(".ll-stem").attr("x1", l.left).attr("x2", d).attr("y1", c).attr("y2", c).attr("stroke", x).attr("stroke-width", h ? 1.5 : 1), s.select(".ll-dot").attr("cx", d).attr("cy", c).attr("r", h ? 7 : 5).attr("fill", x), s.select(".ll-label").attr("x", l.left - 6).attr("y", c + i * 0.4).attr("text-anchor", "end").attr("font-size", `${C}px`).attr("fill", L).text(t.label), s.select(".ll-value").attr("display", A ? null : "none").attr("x", d + 10).attr("y", c + i * 0.4).attr("font-family", "monospace").attr("font-size", `${i}px`).attr("fill", x).text(w(t.value));
+    });
+  }
+}
+customElements.get("zyna-lollipop") || customElements.define("zyna-lollipop", I);
+export {
+  I as ZynaLollipop
+};

package/dist/charts/nightingale.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("../base-DyLOr2iL.cjs"),b=require("d3-selection"),O=require("d3-array"),W=require("d3-shape");class C extends N.ZynaChart{static get observedAttributes(){return["data","color","theme","height","show-values","label-format"]}_render(){const i=this._json("data",[]),R=this._attr("color",this._brand()),p=this._attr("theme","dark")!=="light",S=this._attr("label-format",""),j=t=>this._fmt(t,S),B=this._attr("show-values","true")!=="false",v=parseInt(this._attr("height","0")),I=p?"#F0EBE0":"#1A1A20",$=p?"#0C0C0F":"#FFFFFF";if(!i.length){this._warnEmpty("zyna-nightingale");return}const e=this.clientWidth||700,f=v>0?v:Math.max(400,e*.8);let s=b.select(this).select("svg");s.empty()&&(s=b.select(this).append("svg").style("display","block")),s.attr("viewBox",`0 0 ${e} ${f}`).attr("width",e).attr("height",f);const n=e/2,r=f/2,x=Math.min(n,r)*.52,P=O.max(i,t=>t.value)||1,V=i.length,A=2*Math.PI/V,_=x+Math.max(70,e*.14),k=Math.max(6,x*.06),h=Math.max(10,e*.015),Z=Math.max(12,e*.018);s.selectAll("g.ng-sector").data(i,t=>t.label).join(t=>{const a=t.append("g").attr("class","ng-sector");return a.append("path").attr("class","ng-arc"),a.append("text").attr("class","ng-label"),a.append("text").attr("class","ng-value"),a.append("polyline").attr("class","ng-leader"),a.append("circle").attr("class","ng-dot"),a}).each(function(t,a){const l=b.select(this),y=a*A-Math.PI/2,w=y+A,M=x*Math.sqrt(t.value/P),c=(y+w)/2,g=t.color||R;l.select(".ng-arc").attr("d",W.arc().innerRadius(k).outerRadius(M).startAngle(y).endAngle(w)).attr("transform",`translate(${n},${r})`).attr("fill",g).attr("stroke",$).attr("stroke-width",1.5);const E=n+(M+10)*Math.sin(c),F=r-(M+10)*Math.cos(c),d=n+_*Math.sin(c),m=r-_*Math.cos(c),o=Math.sin(c),q=o<-.1?"end":o>.1?"start":"middle",z=o>.1?6:o<-.1?-6:0;l.select(".ng-label").attr("x",d+z).attr("y",m-4).attr("text-anchor",q).attr("font-size",`${Z}px`).attr("fill",I).text(t.label),l.select(".ng-value").attr("display",B?null:"none").attr("x",d+z).attr("y",m+h+2).attr("text-anchor",q).attr("font-family","monospace").attr("font-size",`${h}px`).attr("fill",g).text(j(t.value)),l.select(".ng-leader").attr("points",`${d},${m+h+12} ${d-o*24},${m+h+12} ${E},${F}`).attr("fill","none").attr("stroke",g).attr("stroke-width",.8).attr("opacity",.5),l.select(".ng-dot").attr("cx",E).attr("cy",F).attr("r",3).attr("fill",g)});let u=s.select(".ng-cap");u.empty()&&(u=s.append("circle").attr("class","ng-cap")),u.attr("cx",n).attr("cy",r).attr("r",k*1.4).attr("fill",$).attr("stroke",p?"#2A2A30":"#E5E7EB").attr("stroke-width",1)}}customElements.get("zyna-nightingale")||customElements.define("zyna-nightingale",C);exports.ZynaNightingale=C;