@auvyx/ui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (73) hide show
  1. package/README.md +2 -2
  2. package/dist/auvyx.bundle.css +8 -8
  3. package/dist/auvyx.chart.min.js +2 -2
  4. package/dist/auvyx.js +27 -26
  5. package/dist/auvyx.min.css +1 -1
  6. package/dist/auvyx.min.js +3 -3
  7. package/dist/custom-elements.json +1 -1
  8. package/dist/elements/calendar.min.js +1 -1
  9. package/dist/elements/context-menu.min.js +1 -1
  10. package/dist/elements/data-table.min.js +1 -1
  11. package/dist/elements/date-picker.min.js +1 -1
  12. package/dist/elements/index.min.js +1 -1
  13. package/dist/elements/menu.min.js +1 -1
  14. package/dist/elements/resizable.min.js +1 -1
  15. package/dist/js/accordion.min.js +2 -2
  16. package/dist/js/calendar.min.js +1 -1
  17. package/dist/js/combobox.min.js +2 -2
  18. package/dist/js/command.min.js +2 -2
  19. package/dist/js/context-menu.min.js +1 -1
  20. package/dist/js/copy.min.js +1 -1
  21. package/dist/js/data-table.min.js +1 -1
  22. package/dist/js/date-picker.min.js +1 -1
  23. package/dist/js/drawer.min.js +2 -2
  24. package/dist/js/dropdown-menu.min.js +2 -2
  25. package/dist/js/manifest.json +18 -18
  26. package/dist/js/menu.min.js +1 -1
  27. package/dist/js/popover.min.js +2 -2
  28. package/dist/js/resizable.min.js +1 -1
  29. package/dist/js/select.min.js +2 -2
  30. package/dist/js/sidebar.min.js +2 -2
  31. package/dist/js/slider.min.js +2 -2
  32. package/dist/js/tabs.min.js +2 -2
  33. package/dist/js/toast.min.js +6 -6
  34. package/dist/styles/auvyx-luma.min.css +1 -1
  35. package/dist/styles/auvyx-lyra.min.css +1 -1
  36. package/dist/styles/auvyx-maia.min.css +1 -1
  37. package/dist/styles/auvyx-mira.min.css +1 -1
  38. package/dist/styles/auvyx-nova.min.css +1 -1
  39. package/dist/styles/auvyx-rhea.min.css +1 -1
  40. package/dist/styles/auvyx-sera.min.css +1 -1
  41. package/dist/styles/auvyx-vega.min.css +1 -1
  42. package/dist/types/elements.d.ts +23 -0
  43. package/dist/ui/accordion.js +9 -8
  44. package/dist/ui/calendar.js +1 -1
  45. package/dist/ui/combobox.js +9 -8
  46. package/dist/ui/command.js +9 -8
  47. package/dist/ui/context-menu.js +1 -1
  48. package/dist/ui/copy.js +1 -1
  49. package/dist/ui/data-table.js +1 -1
  50. package/dist/ui/date-picker.js +1 -1
  51. package/dist/ui/drawer.js +9 -8
  52. package/dist/ui/dropdown-menu.js +9 -8
  53. package/dist/ui/menu.js +1 -1
  54. package/dist/ui/popover.js +9 -8
  55. package/dist/ui/resizable.js +1 -1
  56. package/dist/ui/select.js +9 -8
  57. package/dist/ui/sidebar.js +9 -8
  58. package/dist/ui/slider.js +9 -8
  59. package/dist/ui/tabs.js +9 -8
  60. package/dist/ui/toast.js +10 -9
  61. package/dist/wc/accordion.min.js +2 -2
  62. package/dist/wc/combobox.min.js +2 -2
  63. package/dist/wc/command.min.js +2 -2
  64. package/dist/wc/drawer.min.js +2 -2
  65. package/dist/wc/dropdown-menu.min.js +2 -2
  66. package/dist/wc/manifest.json +11 -11
  67. package/dist/wc/popover.min.js +2 -2
  68. package/dist/wc/select.min.js +2 -2
  69. package/dist/wc/sidebar.min.js +2 -2
  70. package/dist/wc/slider.min.js +2 -2
  71. package/dist/wc/tabs.min.js +2 -2
  72. package/dist/wc/toast.min.js +5 -5
  73. package/package.json +4 -4
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @auvyx/ui
2
2
 
3
- A drop-in design system with the shadcn/ui look: plain HTML and CSS classes, optional JavaScript, no build step. Based on [Basecoat](https://github.com/hunvreus/basecoat).
3
+ A drop-in design system with the shadcn/ui look: plain HTML and CSS classes, optional JavaScript, no build step.
4
4
 
5
5
  Docs: https://auvyx-ui.vercel.app
6
6
 
@@ -41,4 +41,4 @@ Components and blocks can also be copied into your project with [`@auvyx/cli`](h
41
41
 
42
42
  ## License
43
43
 
44
- MIT. Includes Basecoat (MIT, Ronan Berder); see LICENSE.
44
+ MIT, see LICENSE.
@@ -1,4 +1,4 @@
1
- /*! @auvyx/ui v0.1.0 source bundle | MIT | import after "tailwindcss" */
1
+ /*! @auvyx/ui v0.1.1 source bundle | MIT | import after "tailwindcss" */
2
2
  /* @auvyx/ui source: components + layout primitives + themes, no Tailwind import.
3
3
  *
4
4
  * Shared by both channels:
@@ -3730,11 +3730,11 @@ html[data-motion='off'] {
3730
3730
  }
3731
3731
 
3732
3732
  /* Fork additions */
3733
- /* Fork additions: shadcn/ui components Basecoat does not ship yet.
3733
+ /* Fork additions: shadcn/ui components the core set does not ship yet.
3734
3734
  Structure in components/, visuals per style pack in styles/. */
3735
3735
  /* Radius roles for fork-added components (fork addition).
3736
3736
  *
3737
- * Basecoat's style packs set each component's corners with their own scale
3737
+ * The style packs set each component's corners with their own scale
3738
3738
  * (Vega: buttons rounded-md, cards rounded-xl; Maia: pill buttons, ...).
3739
3739
  * Components added by the fork read these roles instead of a fixed scale:
3740
3740
  * --auvyx-r-control buttons, toggles, menu items, calendar days
@@ -4577,7 +4577,7 @@ html[data-motion='off'] {
4577
4577
  * </fieldset>
4578
4578
  * <footer><button class="btn">Continue</button></footer>
4579
4579
  * </form>
4580
- * Inputs take class="input" for the Basecoat radio/checkbox look; type="checkbox" for multiple answers. A <kbd> at the end of a label shows a shortcut.
4580
+ * Inputs take class="input" for the radio/checkbox look; type="checkbox" for multiple answers. A <kbd> at the end of a label shows a shortcut.
4581
4581
  */
4582
4582
  @layer components {
4583
4583
  .questionnaire {
@@ -4979,7 +4979,7 @@ html[data-motion='off'] {
4979
4979
  }
4980
4980
  }
4981
4981
  }
4982
- /* Sidebar extensions (fork addition), on top of Basecoat's .sidebar.
4982
+ /* Sidebar extensions (fork addition), on top of the core .sidebar.
4983
4983
  *
4984
4984
  * <aside class="sidebar" data-collapsible="icon" data-variant="floating" id="app-sidebar">…</aside>
4985
4985
  * <main>…<button class="btn" data-variant="ghost" data-size="icon" data-sidebar-toggle="app-sidebar">…</button></main>
@@ -5661,7 +5661,7 @@ html[data-motion='off'] {
5661
5661
  }
5662
5662
  }
5663
5663
  /* Fork addition: zero-JS variants built on native platform features.
5664
- Import after the Basecoat components and style pack. */
5664
+ Import after the core components and style pack. */
5665
5665
  /* Native popover (fork addition)
5666
5666
  *
5667
5667
  * Opt-in, zero-JS variant of `.popover` and `.dropdown-menu`:
@@ -5813,7 +5813,7 @@ html[data-motion='off'] {
5813
5813
  }
5814
5814
  /* Native dialog triggers (fork addition)
5815
5815
  *
5816
- * Basecoat's .dialog / .alert-dialog already style native <dialog>.
5816
+ * The core .dialog / .alert-dialog already style native <dialog>.
5817
5817
  * Open and close them without JS using Invoker Commands:
5818
5818
  *
5819
5819
  * <button class="btn" commandfor="d1" command="show-modal">Open</button>
@@ -5831,7 +5831,7 @@ html[data-motion='off'] {
5831
5831
  }
5832
5832
  }
5833
5833
  /* Brand themes: CSS variables only, no rebuild needed to switch.
5834
- * Default (neutral) tokens live in Basecoat's base.css on :root / .dark.
5834
+ * Default (neutral) tokens live in src/css/base/base.css on :root / .dark.
5835
5835
  * A theme overrides only what changes. Apply on <html> or any subtree:
5836
5836
  * <html data-theme="ocean" class="dark">
5837
5837
  */
@@ -1,2 +1,2 @@
1
- /*! @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
2
- (()=>{const A=new WeakMap,C=new Set,_=["var(--chart-1)","var(--chart-2)","var(--chart-3)","var(--chart-4)","var(--chart-5)"];let E=null;const N=e=>e&&typeof e=="object"&&Array.isArray(e.datasets),w=e=>{if(typeof e=="string"){const r=Array.from(document.querySelectorAll(e));if(r.length===0)throw new Error(`Chart target not found: ${e}`);return r}if(e instanceof HTMLCanvasElement)return[e];if(e instanceof Element){const r=e.matches("canvas")?e:e.querySelector("canvas");if(r)return[r]}if(e instanceof NodeList||Array.isArray(e))return Array.from(e).flatMap(w);throw new Error("Chart target must be a selector, canvas, element, NodeList, or array.")},S=(e,r,t,o)=>r[t]!==void 0?r[t]:e.dataset[o],j=(e,r,t,o,n)=>{const a=S(e,r,t,o);return a===void 0?n:typeof a=="boolean"?a:a!=="false"},B=(e,r)=>{const t=e.getAttribute(r);if(t)try{return JSON.parse(t)}catch(o){console.error(`Invalid JSON in ${r}:`,o);return}},h=e=>_[e%_.length],v=e=>N(e)?{...e,labels:Array.isArray(e.labels)?[...e.labels]:e.labels,datasets:e.datasets.map(r=>({...r,data:Array.isArray(r.data)?[...r.data]:r.data,backgroundColor:Array.isArray(r.backgroundColor)?[...r.backgroundColor]:r.backgroundColor,borderColor:Array.isArray(r.borderColor)?[...r.borderColor]:r.borderColor,hoverBackgroundColor:Array.isArray(r.hoverBackgroundColor)?[...r.hoverBackgroundColor]:r.hoverBackgroundColor,hoverBorderColor:Array.isArray(r.hoverBorderColor)?[...r.hoverBorderColor]:r.hoverBorderColor}))}:e,y=e=>!e||typeof e!="object"||Array.isArray(e)?e:Object.fromEntries(Object.entries(e).map(([r,t])=>[r,t&&typeof t=="object"&&!Array.isArray(t)?y(t):t])),p=(e,r)=>{if(Array.isArray(e))return e.map(n=>p(n,r));if(typeof e!="string")return e;const t=document.createElement("span");t.style.color=e,t.style.display="none",(r.parentElement||document.body).appendChild(t);const o=getComputedStyle(t).color;return t.remove(),o||e},k=(e,r,t)=>{const o=document.createElement("canvas");o.width=1,o.height=1;const n=o.getContext("2d",{willReadFrequently:!0});if(!n)return e;n.clearRect(0,0,1,1),n.fillStyle="#000",n.fillStyle=p(e,t),n.fillRect(0,0,1,1);const[a,c,l,s]=n.getImageData(0,0,1,1).data;return`rgba(${a}, ${c}, ${l}, ${s/255*r})`},M=(e,r,{from:t=.4,to:o}={})=>{if(o===void 0)return k(e,t,r);let n=null;return({chart:a})=>{if(n||(n=[k(e,t,r),k(e,o,r)]),!a.chartArea)return n[0];const c=a.ctx.createLinearGradient(0,a.chartArea.top,0,a.chartArea.bottom);return c.addColorStop(0,n[0]),c.addColorStop(1,n[1]),c}},q=(e,r)=>(e.datasets?.forEach(t=>{t.borderColor=p(t.borderColor,r),t.backgroundColor=p(t.backgroundColor,r),t.hoverBorderColor=p(t.hoverBorderColor,r),t.hoverBackgroundColor=p(t.hoverBackgroundColor,r)}),e),V=(e,r)=>(Object.values(e||{}).forEach(t=>{["border","grid","ticks","angleLines","pointLabels"].forEach(o=>{t[o]?.color!==void 0&&(t[o].color=p(t[o].color,r))})}),e),T=(e,r)=>p(`var(${r})`,e),J=(e,r)=>`color-mix(in oklab, ${e} ${r*100}%, transparent)`,K=(e,r,t=0)=>{const o=getComputedStyle(e).getPropertyValue(r).trim();if(!o)return t;const n=Number.parseFloat(o);return Number.isFinite(n)?n:t},D=(e,r,{barRadius:t,element:o})=>(e.datasets?.forEach(n=>{(r==="bar"||n.type==="bar")&&n.borderRadius===void 0&&(n.borderRadius=t),n._basecoatSurface&&(n.backgroundColor=M(n.borderColor||n.backgroundColor,o,n._basecoatSurface),delete n._basecoatSurface)}),e),z=e=>!["pie","doughnut","polarArea","radar"].includes(e),O=(e,r)=>{const t=Array.from(e.classList).filter(o=>o!=="chart");t.length!==0&&(r.classList.add(...t),e.classList.remove(...t))},G=e=>{if(e.parentElement?.classList.contains("chart"))return e.parentElement.dataset.basecoatChartContainer="true",O(e,e.parentElement),e.parentElement;const r=document.createElement("div");return r.className="chart",r.dataset.basecoatChartContainer="true",O(e,r),e.insertAdjacentElement("beforebegin",r),r.append(e),r},W=e=>Object.entries(e||{}),x=(e,r)=>{if(e&&typeof e=="object")return e[r]},H=({type:e,labelKey:r,data:t,series:o})=>{if(N(t))return v(t);const n=Array.isArray(t)?t:[],a=W(o),c=n.map(l=>x(l,r));if(e==="pie"||e==="doughnut"||e==="polarArea"){const[l,s={}]=a[0]||[];return{labels:c,datasets:[{label:s.label||l||"Value",data:n.map(i=>x(i,l)),backgroundColor:n.map((i,d)=>i?.color||i?.fill||h(d)),borderColor:n.map((i,d)=>i?.color||i?.fill||h(d)),...s.dataset||{}}]}}return{labels:c,datasets:a.map(([l,s],i)=>{const d=s.color||h(i),u=s.dataset||{},b=s.surface===!0?{from:.4}:s.surface==="gradient"?{from:.8,to:.1}:s.surface;return{label:s.label||l,data:n.map(f=>x(f,l)),borderColor:d,backgroundColor:s.backgroundColor||d,fill:e==="line"?!1:void 0,type:s.type,yAxisID:s.axis,hidden:s.hidden,...u,...b&&s.backgroundColor===void 0&&u.backgroundColor===void 0?{_basecoatSurface:b}:{}}})}},U=e=>typeof e=="number"?e.toLocaleString():String(e),X=e=>{const r=e.element?.options?.backgroundColor||e.element?.options?.borderColor;if(typeof r=="string")return r;const t=Array.isArray(e.dataset.backgroundColor)?e.dataset.backgroundColor[e.dataIndex]:e.dataset.backgroundColor;if(typeof t=="string")return t;const o=Array.isArray(e.dataset.borderColor)?e.dataset.borderColor[e.dataIndex]:e.dataset.borderColor;return typeof o=="string"?o:h(e.datasetIndex)},Y=e=>{let r=e._basecoatChartTooltip;return r||(r=document.createElement("div"),r.className="chart-tooltip",r.hidden=!0,r.setAttribute("role","status"),r.setAttribute("aria-live","polite"),document.body.appendChild(r),e._basecoatChartTooltip=r,r)},Q=e=>{const{chart:r,tooltip:t}=e,o=Y(r.canvas);if(t.opacity===0){o.hidden=!0;return}const n=[];if(t.title?.length){const l=document.createElement("div");l.className="chart-tooltip-title",l.textContent=t.title.join(", "),n.push(l)}const a=document.createElement("div");a.className="chart-tooltip-items",t.dataPoints.forEach(l=>{const s=X(l),i=l.formattedValue||U(l.raw),d=document.createElement("div");d.className="chart-tooltip-item";const u=document.createElement("span");u.className="chart-tooltip-indicator",u.style.setProperty("--chart-indicator-color",s);const b=document.createElement("span");b.className="chart-tooltip-label",b.textContent=l.dataset.label||l.label;const f=document.createElement("span");f.className="chart-tooltip-value",f.textContent=i,d.append(u,b,f),a.append(d)}),n.push(a);const c=r.canvas.getBoundingClientRect();o.replaceChildren(...n),o.hidden=!1,o.style.left=`${c.left+t.caretX}px`,o.style.top=`${c.top+t.caretY}px`},Z=(e,r)=>({id:`basecoatLegend-${Math.random().toString(36).slice(2)}`,afterUpdate(t){if(!r)return;let o=e._basecoatChartLegend;o||(o=document.createElement("ul"),o.className="chart-legend",e._basecoatChartContainer.insertAdjacentElement("afterend",o),e._basecoatChartLegend=o);const n=t.options.plugins.legend.labels.generateLabels(t);o.replaceChildren(...n.map(a=>{const c=document.createElement("span");c.className="chart-legend-item";const l=document.createElement("span");l.className="chart-legend-indicator";const s=typeof a.fillStyle=="string"?a.fillStyle:typeof a.strokeStyle=="string"?a.strokeStyle:h(a.datasetIndex||a.index||0);l.style.setProperty("--chart-indicator-color",s);const i=document.createElement("span");i.textContent=a.text,c.append(l,i);const d=document.createElement("li");return d.append(c),d}))}}),$=e=>{e._basecoatChartTooltip?.remove(),e._basecoatChartLegend?.remove(),delete e._basecoatChartTooltip,delete e._basecoatChartLegend},I=(e,r={})=>{const t=r.Chart||window.Chart;if(!t)throw new Error("Chart.js is required before calling basecoat.chart().");const o=A.get(e);o&&o.destroy(),$(e);const n=S(e,r,"type","chartType")||"bar",a=S(e,r,"labelKey","chartLabelKey")||"label",c=j(e,r,"legend","chartLegend",!1),l=j(e,r,"tooltip","chartTooltip",!0),s=r.data||B(e,"data-chart-data")||[],i=r.series||B(e,"data-chart-series")||{},d=r.chartData?v(r.chartData):H({type:n,labelKey:a,data:s,series:i}),u=r.options||{},b=Z(e,c),f=G(e),F=T(e,"--border"),R=p(J("var(--border)",.5),e),P=T(e,"--muted-foreground"),oe=K(e,"--chart-bar-radius"),ne={...z(n)?{x:{border:{display:!1,color:F},grid:{display:!1,color:R},ticks:{color:P,padding:8},...y(u.scales?.x||{})},y:{border:{display:!1,color:F},grid:{color:R},ticks:{display:!1,color:P},...y(u.scales?.y||{})}}:{},...Object.fromEntries(Object.entries(u.scales||{}).filter(([g])=>g!=="x"&&g!=="y").map(([g,ae])=>[g,y(ae)]))};e.classList.remove("chart"),e._basecoatChartContainer=f,e.dataset.chartLegend=String(c);const m=new t(e,{type:n,data:q(D(d,n,{barRadius:oe,element:e}),e),options:{responsive:!0,maintainAspectRatio:!1,interaction:{mode:"index",intersect:!1},...u,scales:V(ne,e),plugins:{...u.plugins,legend:{display:!1,...u.plugins?.legend||{}},tooltip:{enabled:!1,external:l?Q:void 0,...u.plugins?.tooltip||{}}}},plugins:[b,...r.plugins||[]]});return A.set(e,m),C.add(e),e.dataset.chartInitialized="true",e.chart=m,e._basecoatChartConfig=r,e._destroy=()=>{m.destroy(),$(e),A.delete(e),C.delete(e),e.removeAttribute("data-chart-initialized"),delete e._basecoatChartContainer,delete e._basecoatChartConfig,delete e.chart,delete e._destroy},m},ee=(e,r={})=>{const o=w(e).map(n=>I(n,r));return o.length===1?o[0]:o},re=()=>{E=null,Array.from(C).forEach(e=>{if(!e.isConnected){e._destroy?.(),C.delete(e);return}I(e,e._basecoatChartConfig||{})})},L=()=>{E===null&&(E=requestAnimationFrame(re))},te=()=>{new MutationObserver(r=>{r.some(t=>t.attributeName==="class"||t.attributeName==="data-style-variant")&&L()}).observe(document.documentElement,{attributes:!0,attributeFilter:["class","data-style-variant"]}),document.addEventListener("basecoat:themechange",L),document.addEventListener("basecoat:stylechange",L)};window.basecoat&&(window.basecoat.chart=ee),te()})();
1
+ /*! @auvyx/ui v0.1.1 | MIT License | see LICENSE */
2
+ (()=>{const A=new WeakMap,C=new Set,_=["var(--chart-1)","var(--chart-2)","var(--chart-3)","var(--chart-4)","var(--chart-5)"];let E=null;const N=e=>e&&typeof e=="object"&&Array.isArray(e.datasets),w=e=>{if(typeof e=="string"){const r=Array.from(document.querySelectorAll(e));if(r.length===0)throw new Error(`Chart target not found: ${e}`);return r}if(e instanceof HTMLCanvasElement)return[e];if(e instanceof Element){const r=e.matches("canvas")?e:e.querySelector("canvas");if(r)return[r]}if(e instanceof NodeList||Array.isArray(e))return Array.from(e).flatMap(w);throw new Error("Chart target must be a selector, canvas, element, NodeList, or array.")},x=(e,r,t,o)=>r[t]!==void 0?r[t]:e.dataset[o],j=(e,r,t,o,n)=>{const a=x(e,r,t,o);return a===void 0?n:typeof a=="boolean"?a:a!=="false"},v=(e,r)=>{const t=e.getAttribute(r);if(t)try{return JSON.parse(t)}catch(o){console.error(`Invalid JSON in ${r}:`,o);return}},h=e=>_[e%_.length],B=e=>N(e)?{...e,labels:Array.isArray(e.labels)?[...e.labels]:e.labels,datasets:e.datasets.map(r=>({...r,data:Array.isArray(r.data)?[...r.data]:r.data,backgroundColor:Array.isArray(r.backgroundColor)?[...r.backgroundColor]:r.backgroundColor,borderColor:Array.isArray(r.borderColor)?[...r.borderColor]:r.borderColor,hoverBackgroundColor:Array.isArray(r.hoverBackgroundColor)?[...r.hoverBackgroundColor]:r.hoverBackgroundColor,hoverBorderColor:Array.isArray(r.hoverBorderColor)?[...r.hoverBorderColor]:r.hoverBorderColor}))}:e,y=e=>!e||typeof e!="object"||Array.isArray(e)?e:Object.fromEntries(Object.entries(e).map(([r,t])=>[r,t&&typeof t=="object"&&!Array.isArray(t)?y(t):t])),p=(e,r)=>{if(Array.isArray(e))return e.map(n=>p(n,r));if(typeof e!="string")return e;const t=document.createElement("span");t.style.color=e,t.style.display="none",(r.parentElement||document.body).appendChild(t);const o=getComputedStyle(t).color;return t.remove(),o||e},S=(e,r,t)=>{const o=document.createElement("canvas");o.width=1,o.height=1;const n=o.getContext("2d",{willReadFrequently:!0});if(!n)return e;n.clearRect(0,0,1,1),n.fillStyle="#000",n.fillStyle=p(e,t),n.fillRect(0,0,1,1);const[a,c,l,s]=n.getImageData(0,0,1,1).data;return`rgba(${a}, ${c}, ${l}, ${s/255*r})`},M=(e,r,{from:t=.4,to:o}={})=>{if(o===void 0)return S(e,t,r);let n=null;return({chart:a})=>{if(n||(n=[S(e,t,r),S(e,o,r)]),!a.chartArea)return n[0];const c=a.ctx.createLinearGradient(0,a.chartArea.top,0,a.chartArea.bottom);return c.addColorStop(0,n[0]),c.addColorStop(1,n[1]),c}},q=(e,r)=>(e.datasets?.forEach(t=>{t.borderColor=p(t.borderColor,r),t.backgroundColor=p(t.backgroundColor,r),t.hoverBorderColor=p(t.hoverBorderColor,r),t.hoverBackgroundColor=p(t.hoverBackgroundColor,r)}),e),V=(e,r)=>(Object.values(e||{}).forEach(t=>{["border","grid","ticks","angleLines","pointLabels"].forEach(o=>{t[o]?.color!==void 0&&(t[o].color=p(t[o].color,r))})}),e),T=(e,r)=>p(`var(${r})`,e),J=(e,r)=>`color-mix(in oklab, ${e} ${r*100}%, transparent)`,K=(e,r,t=0)=>{const o=getComputedStyle(e).getPropertyValue(r).trim();if(!o)return t;const n=Number.parseFloat(o);return Number.isFinite(n)?n:t},D=(e,r,{barRadius:t,element:o})=>(e.datasets?.forEach(n=>{(r==="bar"||n.type==="bar")&&n.borderRadius===void 0&&(n.borderRadius=t),n._basecoatSurface&&(n.backgroundColor=M(n.borderColor||n.backgroundColor,o,n._basecoatSurface),delete n._basecoatSurface)}),e),z=e=>!["pie","doughnut","polarArea","radar"].includes(e),O=(e,r)=>{const t=Array.from(e.classList).filter(o=>o!=="chart");t.length!==0&&(r.classList.add(...t),e.classList.remove(...t))},G=e=>{if(e.parentElement?.classList.contains("chart"))return e.parentElement.dataset.basecoatChartContainer="true",O(e,e.parentElement),e.parentElement;const r=document.createElement("div");return r.className="chart",r.dataset.basecoatChartContainer="true",O(e,r),e.insertAdjacentElement("beforebegin",r),r.append(e),r},W=e=>Object.entries(e||{}),k=(e,r)=>{if(e&&typeof e=="object")return e[r]},H=({type:e,labelKey:r,data:t,series:o})=>{if(N(t))return B(t);const n=Array.isArray(t)?t:[],a=W(o),c=n.map(l=>k(l,r));if(e==="pie"||e==="doughnut"||e==="polarArea"){const[l,s={}]=a[0]||[];return{labels:c,datasets:[{label:s.label||l||"Value",data:n.map(i=>k(i,l)),backgroundColor:n.map((i,d)=>i?.color||i?.fill||h(d)),borderColor:n.map((i,d)=>i?.color||i?.fill||h(d)),...s.dataset||{}}]}}return{labels:c,datasets:a.map(([l,s],i)=>{const d=s.color||h(i),u=s.dataset||{},b=s.surface===!0?{from:.4}:s.surface==="gradient"?{from:.8,to:.1}:s.surface;return{label:s.label||l,data:n.map(f=>k(f,l)),borderColor:d,backgroundColor:s.backgroundColor||d,fill:e==="line"?!1:void 0,type:s.type,yAxisID:s.axis,hidden:s.hidden,...u,...b&&s.backgroundColor===void 0&&u.backgroundColor===void 0?{_basecoatSurface:b}:{}}})}},U=e=>typeof e=="number"?e.toLocaleString():String(e),X=e=>{const r=e.element?.options?.backgroundColor||e.element?.options?.borderColor;if(typeof r=="string")return r;const t=Array.isArray(e.dataset.backgroundColor)?e.dataset.backgroundColor[e.dataIndex]:e.dataset.backgroundColor;if(typeof t=="string")return t;const o=Array.isArray(e.dataset.borderColor)?e.dataset.borderColor[e.dataIndex]:e.dataset.borderColor;return typeof o=="string"?o:h(e.datasetIndex)},Y=e=>{let r=e._basecoatChartTooltip;return r||(r=document.createElement("div"),r.className="chart-tooltip",r.hidden=!0,r.setAttribute("role","status"),r.setAttribute("aria-live","polite"),document.body.appendChild(r),e._basecoatChartTooltip=r,r)},Q=e=>{const{chart:r,tooltip:t}=e,o=Y(r.canvas);if(t.opacity===0){o.hidden=!0;return}const n=[];if(t.title?.length){const l=document.createElement("div");l.className="chart-tooltip-title",l.textContent=t.title.join(", "),n.push(l)}const a=document.createElement("div");a.className="chart-tooltip-items",t.dataPoints.forEach(l=>{const s=X(l),i=l.formattedValue||U(l.raw),d=document.createElement("div");d.className="chart-tooltip-item";const u=document.createElement("span");u.className="chart-tooltip-indicator",u.style.setProperty("--chart-indicator-color",s);const b=document.createElement("span");b.className="chart-tooltip-label",b.textContent=l.dataset.label||l.label;const f=document.createElement("span");f.className="chart-tooltip-value",f.textContent=i,d.append(u,b,f),a.append(d)}),n.push(a);const c=r.canvas.getBoundingClientRect();o.replaceChildren(...n),o.hidden=!1,o.style.left=`${c.left+t.caretX}px`,o.style.top=`${c.top+t.caretY}px`},Z=(e,r)=>({id:`basecoatLegend-${Math.random().toString(36).slice(2)}`,afterUpdate(t){if(!r)return;let o=e._basecoatChartLegend;o||(o=document.createElement("ul"),o.className="chart-legend",e._basecoatChartContainer.insertAdjacentElement("afterend",o),e._basecoatChartLegend=o);const n=t.options.plugins.legend.labels.generateLabels(t);o.replaceChildren(...n.map(a=>{const c=document.createElement("span");c.className="chart-legend-item";const l=document.createElement("span");l.className="chart-legend-indicator";const s=typeof a.fillStyle=="string"?a.fillStyle:typeof a.strokeStyle=="string"?a.strokeStyle:h(a.datasetIndex||a.index||0);l.style.setProperty("--chart-indicator-color",s);const i=document.createElement("span");i.textContent=a.text,c.append(l,i);const d=document.createElement("li");return d.append(c),d}))}}),$=e=>{e._basecoatChartTooltip?.remove(),e._basecoatChartLegend?.remove(),delete e._basecoatChartTooltip,delete e._basecoatChartLegend},I=(e,r={})=>{const t=r.Chart||window.Chart;if(!t)throw new Error("Chart.js is required before calling basecoat.chart().");const o=A.get(e);o&&o.destroy(),$(e);const n=x(e,r,"type","chartType")||"bar",a=x(e,r,"labelKey","chartLabelKey")||"label",c=j(e,r,"legend","chartLegend",!1),l=j(e,r,"tooltip","chartTooltip",!0),s=r.data||v(e,"data-chart-data")||[],i=r.series||v(e,"data-chart-series")||{},d=r.chartData?B(r.chartData):H({type:n,labelKey:a,data:s,series:i}),u=r.options||{},b=Z(e,c),f=G(e),F=T(e,"--border"),R=p(J("var(--border)",.5),e),P=T(e,"--muted-foreground"),oe=K(e,"--chart-bar-radius"),ne={...z(n)?{x:{border:{display:!1,color:F},grid:{display:!1,color:R},ticks:{color:P,padding:8},...y(u.scales?.x||{})},y:{border:{display:!1,color:F},grid:{color:R},ticks:{display:!1,color:P},...y(u.scales?.y||{})}}:{},...Object.fromEntries(Object.entries(u.scales||{}).filter(([g])=>g!=="x"&&g!=="y").map(([g,ae])=>[g,y(ae)]))};e.classList.remove("chart"),e._basecoatChartContainer=f,e.dataset.chartLegend=String(c);const m=new t(e,{type:n,data:q(D(d,n,{barRadius:oe,element:e}),e),options:{responsive:!0,maintainAspectRatio:!1,interaction:{mode:"index",intersect:!1},...u,scales:V(ne,e),plugins:{...u.plugins,legend:{display:!1,...u.plugins?.legend||{}},tooltip:{enabled:!1,external:l?Q:void 0,...u.plugins?.tooltip||{}}}},plugins:[b,...r.plugins||[]]});return A.set(e,m),C.add(e),e.dataset.chartInitialized="true",e.chart=m,e._basecoatChartConfig=r,e._destroy=()=>{m.destroy(),$(e),A.delete(e),C.delete(e),e.removeAttribute("data-chart-initialized"),delete e._basecoatChartContainer,delete e._basecoatChartConfig,delete e.chart,delete e._destroy},m},ee=(e,r={})=>{const o=w(e).map(n=>I(n,r));return o.length===1?o[0]:o},re=()=>{E=null,Array.from(C).forEach(e=>{if(!e.isConnected){e._destroy?.(),C.delete(e);return}I(e,e._basecoatChartConfig||{})})},L=()=>{E===null&&(E=requestAnimationFrame(re))},te=()=>{new MutationObserver(r=>{r.some(t=>t.attributeName==="class"||t.attributeName==="data-style-variant")&&L()}).observe(document.documentElement,{attributes:!0,attributeFilter:["class","data-style-variant"]}),document.addEventListener("basecoat:themechange",L),document.addEventListener("basecoat:stylechange",L)};window.auvyx&&(window.auvyx.chart=ee),te()})();
package/dist/auvyx.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
1
+ /*! @auvyx/ui v0.1.1 | MIT License | see LICENSE */
2
2
  (() => {
3
3
  const componentRegistry = {};
4
4
  let observer = null;
@@ -47,7 +47,7 @@
47
47
  try {
48
48
  element._destroy();
49
49
  } catch (error) {
50
- console.error('Failed to destroy Basecoat component:', error);
50
+ console.error('Failed to destroy component:', error);
51
51
  }
52
52
  }
53
53
 
@@ -155,7 +155,8 @@
155
155
 
156
156
  const getTheme = () => document.documentElement.classList.contains('dark') ? 'dark' : 'light';
157
157
 
158
- window.basecoat = {
158
+ // window.auvyx is the API; window.auvyx is the same object, kept as an alias.
159
+ window.auvyx = window.basecoat = {
159
160
  register: registerComponent,
160
161
  init: initRegisteredComponent,
161
162
  initAll: initAllRegisteredComponents,
@@ -239,8 +240,8 @@
239
240
  root.dispatchEvent(new CustomEvent('basecoat:initialized'));
240
241
  };
241
242
 
242
- if (window.basecoat) {
243
- window.basecoat.register('accordion', '.accordion:not([data-accordion-initialized])', initAccordion);
243
+ if (window.auvyx) {
244
+ window.auvyx.register('accordion', '.accordion:not([data-accordion-initialized])', initAccordion);
244
245
  }
245
246
  })();
246
247
 
@@ -812,8 +813,8 @@
812
813
  root.dispatchEvent(new CustomEvent('basecoat:initialized'));
813
814
  };
814
815
 
815
- if (window.basecoat) {
816
- window.basecoat.register('combobox', {
816
+ if (window.auvyx) {
817
+ window.auvyx.register('combobox', {
817
818
  selector: '.combobox:not([data-combobox-initialized])',
818
819
  init: initCombobox,
819
820
  refresh: refreshCombobox,
@@ -1014,8 +1015,8 @@
1014
1015
  container.dispatchEvent(new CustomEvent('basecoat:initialized'));
1015
1016
  };
1016
1017
 
1017
- if (window.basecoat) {
1018
- window.basecoat.register('command', {
1018
+ if (window.auvyx) {
1019
+ window.auvyx.register('command', {
1019
1020
  selector: '.command:not([data-command-initialized])',
1020
1021
  init: initCommand,
1021
1022
  refresh: refreshCommand,
@@ -1159,8 +1160,8 @@
1159
1160
  drawer.dispatchEvent(new CustomEvent('basecoat:initialized'));
1160
1161
  };
1161
1162
 
1162
- if (window.basecoat) {
1163
- window.basecoat.register('drawer', '.drawer:not([data-drawer-initialized])', initDrawer);
1163
+ if (window.auvyx) {
1164
+ window.auvyx.register('drawer', '.drawer:not([data-drawer-initialized])', initDrawer);
1164
1165
  }
1165
1166
  })();
1166
1167
 
@@ -1363,8 +1364,8 @@
1363
1364
  root.dispatchEvent(new CustomEvent('basecoat:initialized'));
1364
1365
  };
1365
1366
 
1366
- if (window.basecoat) {
1367
- window.basecoat.register('dropdown-menu', {
1367
+ if (window.auvyx) {
1368
+ window.auvyx.register('dropdown-menu', {
1368
1369
  selector: '.dropdown-menu:not([data-dropdown-menu-initialized]):not(:has(> [data-popover][popover]))',
1369
1370
  init: initDropdownMenu,
1370
1371
  refresh: refreshDropdownMenu,
@@ -1455,8 +1456,8 @@
1455
1456
  popoverComponent.dispatchEvent(new CustomEvent('basecoat:initialized'));
1456
1457
  };
1457
1458
 
1458
- if (window.basecoat) {
1459
- window.basecoat.register('popover', '.popover:not([data-popover-initialized]):not(:has(> [data-popover][popover]))', initPopover);
1459
+ if (window.auvyx) {
1460
+ window.auvyx.register('popover', '.popover:not([data-popover-initialized]):not(:has(> [data-popover][popover]))', initPopover);
1460
1461
  }
1461
1462
  })();
1462
1463
 
@@ -1481,8 +1482,8 @@
1481
1482
  element.dataset.rangeInitialized = 'true';
1482
1483
  }
1483
1484
 
1484
- if (window.basecoat) {
1485
- window.basecoat.register('range', 'input[type="range"]:not([data-range-initialized])', initRange);
1485
+ if (window.auvyx) {
1486
+ window.auvyx.register('range', 'input[type="range"]:not([data-range-initialized])', initRange);
1486
1487
  }
1487
1488
  })();
1488
1489
 
@@ -1943,8 +1944,8 @@
1943
1944
  root.dispatchEvent(new CustomEvent('basecoat:initialized'));
1944
1945
  };
1945
1946
 
1946
- if (window.basecoat) {
1947
- window.basecoat.register('select', {
1947
+ if (window.auvyx) {
1948
+ window.auvyx.register('select', {
1948
1949
  selector: 'div.select:not([data-select-initialized])',
1949
1950
  init: initSelect,
1950
1951
  refresh: refreshSelect,
@@ -2054,8 +2055,8 @@
2054
2055
  sidebar.toggle();
2055
2056
  });
2056
2057
 
2057
- if (window.basecoat) {
2058
- window.basecoat.register('sidebar', '.sidebar', initSidebar);
2058
+ if (window.auvyx) {
2059
+ window.auvyx.register('sidebar', '.sidebar', initSidebar);
2059
2060
  }
2060
2061
  })();
2061
2062
 
@@ -2158,8 +2159,8 @@
2158
2159
  root.dispatchEvent(new CustomEvent('basecoat:initialized'));
2159
2160
  };
2160
2161
 
2161
- if (window.basecoat) {
2162
- window.basecoat.register('tabs', {
2162
+ if (window.auvyx) {
2163
+ window.auvyx.register('tabs', {
2163
2164
  selector: '.tabs:not([data-tabs-initialized])',
2164
2165
  init: initTabs,
2165
2166
  refresh: refreshTabs,
@@ -2359,9 +2360,9 @@
2359
2360
  return template.content.firstChild;
2360
2361
  }
2361
2362
 
2362
- if (window.basecoat) {
2363
- window.basecoat.register('toaster', '#toaster:not([data-toaster-initialized])', initToaster);
2364
- window.basecoat.register('toast', '.toast:not([data-toast-initialized])', initToast);
2363
+ if (window.auvyx) {
2364
+ window.auvyx.register('toaster', '#toaster:not([data-toaster-initialized])', initToaster);
2365
+ window.auvyx.register('toast', '.toast:not([data-toast-initialized])', initToast);
2365
2366
  }
2366
2367
  })();
2367
2368