@forgedevstack/bear 1.2.0 → 1.2.1

package/dist/components/Chart/Chart.js

@@ -1,209 +1,23 @@
-import { jsx as t, jsxs as f } from "react/jsx-runtime";
-import { useMemo as b } from "react";
-import { cn as d } from "../../utils/cn.js";
-import { getChartColor as k } from "./Chart.utils.js";
-const R = ({
-  data: l,
-  height: i = 200,
-  showLabels: p = !0,
-  showValues: $ = !1,
-  animated: m = !0,
-  color: h,
-  orientation: g = "vertical",
-  barRadius: u = 4,
-  barGap: v = 0.2,
-  className: y,
-  ...N
-}) => {
-  const n = Math.max(...l.map((s) => s.value));
-  return /* @__PURE__ */ t("div", { className: d("w-full", y), style: { height: i }, ...N, children: g === "vertical" ? /* @__PURE__ */ t("div", { className: "flex items-end justify-between h-full gap-2", children: l.map((s, r) => {
-    const e = s.value / n * 100, a = k(r, s.color || h);
-    return /* @__PURE__ */ f("div", { className: "flex-1 flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ t("div", { className: "w-full flex-1 flex items-end", children: /* @__PURE__ */ t(
-        "div",
-        {
-          className: d(
-            "w-full transition-all duration-500 ease-out",
-            m && "animate-grow-up"
-          ),
-          style: {
-            height: `${e}%`,
-            backgroundColor: a,
-            borderRadius: `${u}px ${u}px 0 0`,
-            opacity: 0.9
-          }
-        }
-      ) }),
-      $ && /* @__PURE__ */ t("span", { className: "text-xs text-gray-500 dark:text-slate-400", children: s.value }),
-      p && /* @__PURE__ */ t("span", { className: "text-xs text-gray-600 dark:text-slate-300 truncate max-w-full", children: s.label })
-    ] }, r);
-  }) }) : /* @__PURE__ */ t("div", { className: "flex flex-col justify-between h-full gap-2", children: l.map((s, r) => {
-    const e = s.value / n * 100, a = k(r, s.color || h);
-    return /* @__PURE__ */ f("div", { className: "flex-1 flex items-center gap-2", children: [
-      p && /* @__PURE__ */ t("span", { className: "text-xs text-gray-600 dark:text-slate-300 w-16 truncate", children: s.label }),
-      /* @__PURE__ */ t("div", { className: "flex-1 h-full flex items-center", children: /* @__PURE__ */ t(
-        "div",
-        {
-          className: d(
-            "h-3/4 transition-all duration-500 ease-out",
-            m && "animate-grow-right"
-          ),
-          style: {
-            width: `${e}%`,
-            backgroundColor: a,
-            borderRadius: `0 ${u}px ${u}px 0`,
-            opacity: 0.9
-          }
-        }
-      ) }),
-      $ && /* @__PURE__ */ t("span", { className: "text-xs text-gray-500 dark:text-slate-400 w-10 text-right", children: s.value })
-    ] }, r);
-  }) }) });
-}, j = ({
-  data: l,
-  height: i = 200,
-  showLabels: p = !0,
-  showDots: $ = !0,
-  smooth: m = !0,
-  fill: h = !1,
-  strokeWidth: g = 2,
-  color: u = "#ec4899",
-  animated: v = !0,
-  className: y,
-  ...N
-}) => {
-  const n = b(() => {
-    const e = Math.max(...l.map((c) => c.value)), a = Math.min(...l.map((c) => c.value)), o = e - a || 1;
-    return l.map((c, x) => ({
-      x: x / (l.length - 1 || 1) * 100,
-      y: 100 - (c.value - a) / o * 80 - 10,
-      ...c
-    }));
-  }, [l]), s = b(() => n.length === 0 ? "" : m ? n.reduce((e, a, o, c) => {
-    if (o === 0) return `M ${a.x},${a.y}`;
-    const x = c[o - 1], w = x.x + (a.x - x.x) / 3, C = a.x - (a.x - x.x) / 3;
-    return `${e} C ${w},${x.y} ${C},${a.y} ${a.x},${a.y}`;
-  }, "") : n.reduce((e, a, o) => `${e} ${o === 0 ? "M" : "L"} ${a.x},${a.y}`, ""), [n, m]), r = b(() => n.length === 0 ? "" : `${s} L 100,100 L 0,100 Z`, [s, n]);
-  return /* @__PURE__ */ f("div", { className: d("w-full", y), style: { height: i }, ...N, children: [
-    /* @__PURE__ */ f("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "w-full h-full", children: [
-      /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ f("linearGradient", { id: "line-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
-        /* @__PURE__ */ t("stop", { offset: "0%", stopColor: u, stopOpacity: "0.3" }),
-        /* @__PURE__ */ t("stop", { offset: "100%", stopColor: u, stopOpacity: "0" })
-      ] }) }),
-      h && /* @__PURE__ */ t(
-        "path",
-        {
-          d: r,
-          fill: "url(#line-gradient)",
-          className: d(v && "animate-fade-in")
-        }
-      ),
-      /* @__PURE__ */ t(
-        "path",
-        {
-          d: s,
-          fill: "none",
-          stroke: u,
-          strokeWidth: g / 10,
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          className: d(v && "animate-draw-line")
-        }
-      ),
-      $ && n.map((e, a) => /* @__PURE__ */ t(
-        "circle",
-        {
-          cx: e.x,
-          cy: e.y,
-          r: 1.5,
-          fill: u,
-          className: d(v && "animate-scale-in"),
-          style: { animationDelay: `${a * 50}ms` }
-        },
-        a
-      ))
-    ] }),
-    p && /* @__PURE__ */ t("div", { className: "flex justify-between mt-2", children: l.map((e, a) => /* @__PURE__ */ t("span", { className: "text-xs text-gray-600 dark:text-slate-300", children: e.label }, a)) })
-  ] });
-}, L = ({
-  data: l,
-  height: i = 200,
-  showLabels: p = !0,
-  innerRadius: $ = 0,
-  startAngle: m = -90,
-  padAngle: h = 2,
-  animated: g = !0,
-  className: u,
-  ...v
-}) => {
-  const y = l.reduce((r, e) => r + e.value, 0), N = b(() => {
-    let r = m;
-    return l.map((e, a) => {
-      const o = e.value / y * 360 - h, c = {
-        startAngle: r,
-        endAngle: r + o,
-        color: k(a, e.color),
-        ...e
-      };
-      return r += o + h, c;
-    });
-  }, [l, y, m, h]), n = (r, e) => {
-    const a = r * Math.PI / 180;
-    return {
-      x: 50 + e * Math.cos(a),
-      y: 50 + e * Math.sin(a)
-    };
-  }, s = (r, e) => {
-    const o = $ * 45, c = n(r, 45), x = n(e, 45), w = n(r, o), C = n(e, o), M = e - r > 180 ? 1 : 0;
-    return $ > 0 ? `M ${c.x},${c.y} A 45,45 0 ${M},1 ${x.x},${x.y} L ${C.x},${C.y} A ${o},${o} 0 ${M},0 ${w.x},${w.y} Z` : `M 50,50 L ${c.x},${c.y} A 45,45 0 ${M},1 ${x.x},${x.y} Z`;
-  };
-  return /* @__PURE__ */ f("div", { className: d("flex items-center gap-4", u), ...v, children: [
-    /* @__PURE__ */ t("div", { style: { width: i, height: i }, children: /* @__PURE__ */ t("svg", { viewBox: "0 0 100 100", className: "w-full h-full", children: N.map((r, e) => /* @__PURE__ */ t(
-      "path",
-      {
-        d: s(r.startAngle, r.endAngle),
-        fill: r.color,
-        className: d(
-          "transition-opacity hover:opacity-80",
-          g && "animate-scale-in"
-        ),
-        style: { animationDelay: `${e * 100}ms` }
-      },
-      e
-    )) }) }),
-    p && /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: l.map((r, e) => /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ t(
-        "div",
-        {
-          className: "w-3 h-3 rounded-full",
-          style: { backgroundColor: k(e, r.color) }
-        }
-      ),
-      /* @__PURE__ */ t("span", { className: "text-sm text-gray-600 dark:text-slate-300", children: r.label }),
-      /* @__PURE__ */ f("span", { className: "text-sm text-gray-400 dark:text-slate-500", children: [
-        Math.round(r.value / y * 100),
-        "%"
-      ] })
-    ] }, e)) })
-  ] });
-}, P = ({ type: l, ...i }) => {
-  switch (l) {
-    case "bar":
-      return /* @__PURE__ */ t(R, { ...i });
-    case "line":
-    case "area":
-      return /* @__PURE__ */ t(j, { ...i, fill: l === "area" });
-    case "pie":
-      return /* @__PURE__ */ t(L, { ...i });
-    case "donut":
-      return /* @__PURE__ */ t(L, { ...i, innerRadius: 0.6 });
+import { jsx as e } from "react/jsx-runtime";
+import { BarChart as i } from "./BarChart.js";
+import { LineChart as n } from "./LineChart.js";
+import { PieChart as m } from "./PieChart.js";
+import { CHART_TYPES as r, CHART as A } from "./Chart.const.js";
+const E = ({ type: a, ...t }) => {
+  switch (a) {
+    case r.BAR:
+      return /* @__PURE__ */ e(i, { ...t });
+    case r.LINE:
+    case r.AREA:
+      return /* @__PURE__ */ e(n, { ...t, fill: a === r.AREA });
+    case r.PIE:
+      return /* @__PURE__ */ e(m, { ...t });
+    case r.DONUT:
+      return /* @__PURE__ */ e(m, { ...t, innerRadius: A.DEFAULT_INNER_RADIUS });
     default:
-      return /* @__PURE__ */ t(R, { ...i });
+      return /* @__PURE__ */ e(i, { ...t });
   }
 };
 export {
-  R as BarChart,
-  P as Chart,
-  j as LineChart,
-  L as PieChart
+  E as Chart
 };

package/dist/components/Chart/Chart.types.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export type ChartType = 'bar' | 'line' | 'area' | 'pie' | 'donut';
 export interface ChartDataPoint {
     label: string;
@@ -48,4 +48,10 @@ export interface PieChartProps extends Omit<ChartProps, 'type'> {
     startAngle?: number;
     /** Padding between slices */
     padAngle?: number;
+    onSliceClick?: (item: ChartDataPoint, index: number) => void;
+    onSliceHover?: (item: ChartDataPoint | null, index: number | null) => void;
+    showSliceTooltip?: boolean;
+    sliceTooltipTitle?: (item: ChartDataPoint, index: number) => ReactNode;
+    sliceTooltipDescription?: (item: ChartDataPoint, index: number) => ReactNode;
+    sliceTooltipContent?: (item: ChartDataPoint, index: number) => ReactNode;
 }

package/dist/components/Chart/LineChart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("react"),u=require("../../utils/cn.cjs"),N=({data:a,height:y=200,showLabels:d=!0,showDots:h=!0,smooth:f=!0,fill:p=!1,strokeWidth:j=2,color:i="#ec4899",animated:x=!0,className:$,...g})=>{const n=m.useMemo(()=>{const t=Math.max(...a.map(r=>r.value)),e=Math.min(...a.map(r=>r.value)),l=t-e||1;return a.map((r,c)=>({x:c/(a.length-1||1)*100,y:100-(r.value-e)/l*80-10,...r}))},[a]),o=m.useMemo(()=>n.length===0?"":f?n.reduce((t,e,l,r)=>{if(l===0)return`M ${e.x},${e.y}`;const c=r[l-1],M=c.x+(e.x-c.x)/3,L=e.x-(e.x-c.x)/3;return`${t} C ${M},${c.y} ${L},${e.y} ${e.x},${e.y}`},""):n.reduce((t,e,l)=>`${t} ${l===0?"M":"L"} ${e.x},${e.y}`,""),[n,f]),v=m.useMemo(()=>n.length===0?"":`${o} L 100,100 L 0,100 Z`,[o,n]);return s.jsxs("div",{className:u.cn("w-full",$),style:{height:y},...g,children:[s.jsxs("svg",{viewBox:"0 0 100 100",preserveAspectRatio:"none",className:"w-full h-full",children:[s.jsx("defs",{children:s.jsxs("linearGradient",{id:"line-gradient",x1:"0%",y1:"0%",x2:"0%",y2:"100%",children:[s.jsx("stop",{offset:"0%",stopColor:i,stopOpacity:"0.3"}),s.jsx("stop",{offset:"100%",stopColor:i,stopOpacity:"0"})]})}),p&&s.jsx("path",{d:v,fill:"url(#line-gradient)",className:u.cn(x&&"animate-fade-in")}),s.jsx("path",{d:o,fill:"none",stroke:i,strokeWidth:j/10,strokeLinecap:"round",strokeLinejoin:"round",className:u.cn(x&&"animate-draw-line")}),h&&n.map((t,e)=>s.jsx("circle",{cx:t.x,cy:t.y,r:1.5,fill:i,className:u.cn(x&&"animate-scale-in"),style:{animationDelay:`${e*50}ms`}},e))]}),d&&s.jsx("div",{className:"flex justify-between mt-2",children:a.map((t,e)=>s.jsx("span",{className:"text-xs text-gray-600 dark:text-slate-300",children:t.label},e))})]})};exports.LineChart=N;

package/dist/components/Chart/LineChart.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { LineChartProps } from './Chart.types';
+export declare const LineChart: FC<LineChartProps>;

package/dist/components/Chart/LineChart.js

@@ -0,0 +1,73 @@
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { useMemo as f } from "react";
+import { cn as u } from "../../utils/cn.js";
+const D = ({
+  data: a,
+  height: y = 200,
+  showLabels: d = !0,
+  showDots: h = !0,
+  smooth: p = !0,
+  fill: $ = !1,
+  strokeWidth: v = 2,
+  color: i = "#ec4899",
+  animated: x = !0,
+  className: g,
+  ...N
+}) => {
+  const n = f(() => {
+    const r = Math.max(...a.map((t) => t.value)), e = Math.min(...a.map((t) => t.value)), l = r - e || 1;
+    return a.map((t, c) => ({
+      x: c / (a.length - 1 || 1) * 100,
+      y: 100 - (t.value - e) / l * 80 - 10,
+      ...t
+    }));
+  }, [a]), o = f(() => n.length === 0 ? "" : p ? n.reduce((r, e, l, t) => {
+    if (l === 0) return `M ${e.x},${e.y}`;
+    const c = t[l - 1], k = c.x + (e.x - c.x) / 3, w = e.x - (e.x - c.x) / 3;
+    return `${r} C ${k},${c.y} ${w},${e.y} ${e.x},${e.y}`;
+  }, "") : n.reduce((r, e, l) => `${r} ${l === 0 ? "M" : "L"} ${e.x},${e.y}`, ""), [n, p]), L = f(() => n.length === 0 ? "" : `${o} L 100,100 L 0,100 Z`, [o, n]);
+  return /* @__PURE__ */ m("div", { className: u("w-full", g), style: { height: y }, ...N, children: [
+    /* @__PURE__ */ m("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "w-full h-full", children: [
+      /* @__PURE__ */ s("defs", { children: /* @__PURE__ */ m("linearGradient", { id: "line-gradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+        /* @__PURE__ */ s("stop", { offset: "0%", stopColor: i, stopOpacity: "0.3" }),
+        /* @__PURE__ */ s("stop", { offset: "100%", stopColor: i, stopOpacity: "0" })
+      ] }) }),
+      $ && /* @__PURE__ */ s(
+        "path",
+        {
+          d: L,
+          fill: "url(#line-gradient)",
+          className: u(x && "animate-fade-in")
+        }
+      ),
+      /* @__PURE__ */ s(
+        "path",
+        {
+          d: o,
+          fill: "none",
+          stroke: i,
+          strokeWidth: v / 10,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: u(x && "animate-draw-line")
+        }
+      ),
+      h && n.map((r, e) => /* @__PURE__ */ s(
+        "circle",
+        {
+          cx: r.x,
+          cy: r.y,
+          r: 1.5,
+          fill: i,
+          className: u(x && "animate-scale-in"),
+          style: { animationDelay: `${e * 50}ms` }
+        },
+        e
+      ))
+    ] }),
+    d && /* @__PURE__ */ s("div", { className: "flex justify-between mt-2", children: a.map((r, e) => /* @__PURE__ */ s("span", { className: "text-xs text-gray-600 dark:text-slate-300", children: r.label }, e)) })
+  ] });
+};
+export {
+  D as LineChart
+};

package/dist/components/Chart/PieChart.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),A=require("../../utils/cn.cjs"),X=require("../Portal/Portal.cjs"),g=require("../Card/Card.cjs"),L=require("./Chart.utils.cjs"),c=45,Y=({data:s,height:N=200,showLabels:R=!0,innerRadius:w=0,startAngle:P=-90,padAngle:f=2,animated:_=!0,onSliceClick:d,onSliceHover:x,showSliceTooltip:j=!0,sliceTooltipTitle:y,sliceTooltipDescription:m,sliceTooltipContent:v,className:B,...C})=>{const h=s.reduce((r,e)=>r+e.value,0),[n,o]=b.useState(null),q=b.useCallback((r,e,a)=>{const u=s[a];if(x==null||x(u,a),!j)return;const l=Math.round(u.value/h*100);o({x:r,y:e,index:a,label:u.label,value:u.value,pct:l})},[s,x,j,h]),E=b.useCallback(()=>{o(null),x==null||x(null,null)},[x]),O=b.useMemo(()=>{let r=P;return s.map((e,a)=>{const u=e.value/h*360-f,l={startAngle:r,endAngle:r+u,color:L.getChartColor(a,e.color),...e};return r+=u+f,l})},[s,h,P,f]),$=(r,e)=>{const a=r*Math.PI/180;return{x:50+e*Math.cos(a),y:50+e*Math.sin(a)}},U=(r,e)=>{const a=w*c,u=$(r,c),l=$(e,c),I=$(r,a),p=$(e,a),M=e-r>180?1:0;return w>0?`M ${u.x},${u.y} A ${c},${c} 0 ${M},1 ${l.x},${l.y} L ${p.x},${p.y} A ${a},${a} 0 ${M},0 ${I.x},${I.y} Z`:`M 50,50 L ${u.x},${u.y} A ${c},${c} 0 ${M},1 ${l.x},${l.y} Z`};return t.jsxs("div",{className:A.cn("relative flex max-w-full flex-wrap items-center gap-4",B),...C,children:[t.jsx("div",{style:{width:N,height:N},className:"min-w-0 shrink-0",children:t.jsx("svg",{viewBox:"0 0 100 100",className:"h-full w-full",children:O.map((r,e)=>t.jsx("path",{d:U(r.startAngle,r.endAngle),fill:r.color,className:A.cn(d&&"cursor-pointer","transition-opacity hover:opacity-80",_&&"animate-scale-in"),style:{animationDelay:`${e*100}ms`},onClick:()=>d==null?void 0:d(s[e],e),tabIndex:0,role:"button","aria-label":`${s[e].label} ${Math.round(s[e].value/h*100)}%`,onKeyDown:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),d==null||d(s[e],e))},onMouseEnter:a=>q(a.clientX,a.clientY,e),onMouseMove:a=>q(a.clientX,a.clientY,e),onMouseLeave:E},e))})}),R&&t.jsx("div",{className:"flex flex-col gap-2",children:s.map((r,e)=>t.jsxs("div",{className:"flex items-center gap-2",children:[t.jsx("div",{className:"w-3 h-3 rounded-full",style:{backgroundColor:L.getChartColor(e,r.color)}}),t.jsx("span",{className:"text-sm text-gray-600 dark:text-slate-300",children:r.label}),t.jsxs("span",{className:"text-sm text-gray-400 dark:text-slate-500",children:[Math.round(r.value/h*100),"%"]})]},e))}),n&&j&&t.jsx(X.Portal,{children:t.jsx("div",{className:"pointer-events-none fixed z-[11500] w-56 max-w-[calc(100vw-24px)]",style:{left:n.x+12,top:n.y+12},children:t.jsxs(g.Card,{variant:"elevated",padding:"none",children:[(y||m)&&t.jsx(g.CardHeader,{title:(y==null?void 0:y(s[n.index],n.index))??n.label,subtitle:m==null?void 0:m(s[n.index],n.index)}),t.jsx(g.CardBody,{className:"bear-text-xs bear-text-gray-500 dark:bear-text-slate-400",children:(v==null?void 0:v(s[n.index],n.index))??t.jsxs("span",{children:[n.value," (",n.pct,"%)"]})})]})})})]})};exports.PieChart=Y;

package/dist/components/Chart/PieChart.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { PieChartProps } from './Chart.types';
+export declare const PieChart: FC<PieChartProps>;

package/dist/components/Chart/PieChart.js

@@ -0,0 +1,110 @@
+import { jsxs as h, jsx as u } from "react/jsx-runtime";
+import { useState as K, useCallback as L, useMemo as O } from "react";
+import { cn as j } from "../../utils/cn.js";
+import { Portal as R } from "../Portal/Portal.js";
+import { Card as q, CardHeader as F, CardBody as G } from "../Card/Card.js";
+import { getChartColor as B } from "./Chart.utils.js";
+const l = 45, C = ({
+  data: t,
+  height: N = 200,
+  showLabels: E = !0,
+  innerRadius: g = 0,
+  startAngle: w = -90,
+  padAngle: b = 2,
+  animated: U = !0,
+  onSliceClick: d,
+  onSliceHover: x,
+  showSliceTooltip: v = !0,
+  sliceTooltipTitle: y,
+  sliceTooltipDescription: f,
+  sliceTooltipContent: M,
+  className: X,
+  ...Y
+}) => {
+  const $ = t.reduce((e, r) => e + r.value, 0), [n, o] = K(null), I = L(
+    (e, r, a) => {
+      const s = t[a];
+      if (x == null || x(s, a), !v) return;
+      const m = Math.round(s.value / $ * 100);
+      o({ x: e, y: r, index: a, label: s.label, value: s.value, pct: m });
+    },
+    [t, x, v, $]
+  ), Z = L(() => {
+    o(null), x == null || x(null, null);
+  }, [x]), _ = O(() => {
+    let e = w;
+    return t.map((r, a) => {
+      const s = r.value / $ * 360 - b, m = {
+        startAngle: e,
+        endAngle: e + s,
+        color: B(a, r.color),
+        ...r
+      };
+      return e += s + b, m;
+    });
+  }, [t, $, w, b]), c = (e, r) => {
+    const a = e * Math.PI / 180;
+    return { x: 50 + r * Math.cos(a), y: 50 + r * Math.sin(a) };
+  }, z = (e, r) => {
+    const a = g * l, s = c(e, l), m = c(r, l), P = c(e, a), A = c(r, a), p = r - e > 180 ? 1 : 0;
+    return g > 0 ? `M ${s.x},${s.y} A ${l},${l} 0 ${p},1 ${m.x},${m.y} L ${A.x},${A.y} A ${a},${a} 0 ${p},0 ${P.x},${P.y} Z` : `M 50,50 L ${s.x},${s.y} A ${l},${l} 0 ${p},1 ${m.x},${m.y} Z`;
+  };
+  return /* @__PURE__ */ h("div", { className: j("relative flex max-w-full flex-wrap items-center gap-4", X), ...Y, children: [
+    /* @__PURE__ */ u("div", { style: { width: N, height: N }, className: "min-w-0 shrink-0", children: /* @__PURE__ */ u("svg", { viewBox: "0 0 100 100", className: "h-full w-full", children: _.map((e, r) => /* @__PURE__ */ u(
+      "path",
+      {
+        d: z(e.startAngle, e.endAngle),
+        fill: e.color,
+        className: j(
+          d && "cursor-pointer",
+          "transition-opacity hover:opacity-80",
+          U && "animate-scale-in"
+        ),
+        style: { animationDelay: `${r * 100}ms` },
+        onClick: () => d == null ? void 0 : d(t[r], r),
+        tabIndex: 0,
+        role: "button",
+        "aria-label": `${t[r].label} ${Math.round(t[r].value / $ * 100)}%`,
+        onKeyDown: (a) => {
+          (a.key === "Enter" || a.key === " ") && (a.preventDefault(), d == null || d(t[r], r));
+        },
+        onMouseEnter: (a) => I(a.clientX, a.clientY, r),
+        onMouseMove: (a) => I(a.clientX, a.clientY, r),
+        onMouseLeave: Z
+      },
+      r
+    )) }) }),
+    E && /* @__PURE__ */ u("div", { className: "flex flex-col gap-2", children: t.map((e, r) => /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ u(
+        "div",
+        {
+          className: "w-3 h-3 rounded-full",
+          style: { backgroundColor: B(r, e.color) }
+        }
+      ),
+      /* @__PURE__ */ u("span", { className: "text-sm text-gray-600 dark:text-slate-300", children: e.label }),
+      /* @__PURE__ */ h("span", { className: "text-sm text-gray-400 dark:text-slate-500", children: [
+        Math.round(e.value / $ * 100),
+        "%"
+      ] })
+    ] }, r)) }),
+    n && v && /* @__PURE__ */ u(R, { children: /* @__PURE__ */ u("div", { className: "pointer-events-none fixed z-[11500] w-56 max-w-[calc(100vw-24px)]", style: { left: n.x + 12, top: n.y + 12 }, children: /* @__PURE__ */ h(q, { variant: "elevated", padding: "none", children: [
+      (y || f) && /* @__PURE__ */ u(
+        F,
+        {
+          title: (y == null ? void 0 : y(t[n.index], n.index)) ?? n.label,
+          subtitle: f == null ? void 0 : f(t[n.index], n.index)
+        }
+      ),
+      /* @__PURE__ */ u(G, { className: "bear-text-xs bear-text-gray-500 dark:bear-text-slate-400", children: (M == null ? void 0 : M(t[n.index], n.index)) ?? /* @__PURE__ */ h("span", { children: [
+        n.value,
+        " (",
+        n.pct,
+        "%)"
+      ] }) })
+    ] }) }) })
+  ] });
+};
+export {
+  C as PieChart
+};

package/dist/components/Chart/index.d.ts

@@ -1,2 +1,5 @@
-export { Chart, BarChart, LineChart, PieChart } from './Chart';
+export { Chart } from './Chart';
+export { BarChart } from './BarChart';
+export { LineChart } from './LineChart';
+export { PieChart } from './PieChart';
 export type { ChartProps, BarChartProps, LineChartProps, PieChartProps, ChartDataPoint, ChartType, } from './Chart.types';

package/dist/components/ColorPicker/ColorPicker.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),E=require("react"),_=require("../../utils/cn.cjs"),t=require("./ColorPicker.const.cjs"),p=({value:c=t.COLOR_PICKER_DEFAULT_VALUE,onChange:s,presets:R=t.COLOR_PICKER_DEFAULT_PRESETS,showInput:O=!0,showPresets:L=!0,disabled:a=!1,label:S,size:P="md",className:I})=>{const[o,u]=E.useState(!1),[d,n]=E.useState(c),i=E.useRef(null);E.useEffect(()=>{n(c)},[c]),E.useEffect(()=>{const e=l=>{i.current&&!i.current.contains(l.target)&&u(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const m=e=>{const l=e.target.value;n(l),t.COLOR_PICKER_HEX_PATTERN.test(l)&&(s==null||s(l))},A=e=>{n(e),s==null||s(e)},C=t.COLOR_PICKER_SWATCH_SIZE[P];return r.jsxs("div",{ref:i,className:_.cn("bear-relative bear-inline-block",I),children:[S&&r.jsx("label",{className:t.COLOR_PICKER_LABEL_CLASSES,children:S}),r.jsxs("div",{className:"bear-flex bear-items-center bear-gap-2",children:[r.jsx("button",{type:"button",onClick:()=>!a&&u(!o),disabled:a,className:_.cn(t.COLOR_PICKER_SWATCH_CLASSES,C.swatch,a&&"bear-opacity-50 bear-cursor-not-allowed"),style:{backgroundColor:c},"aria-label":"Pick color"}),O&&r.jsx("input",{type:"text",value:d,onChange:m,disabled:a,placeholder:"#000000",className:_.cn(t.COLOR_PICKER_INPUT_CLASSES,a&&"bear-opacity-50 bear-cursor-not-allowed")})]}),o&&r.jsxs("div",{className:t.COLOR_PICKER_POPUP_CLASSES,children:[r.jsx("input",{type:"color",value:c,onChange:e=>{s==null||s(e.target.value),n(e.target.value)},className:t.COLOR_PICKER_NATIVE_INPUT_CLASSES}),L&&r.jsx("div",{className:t.COLOR_PICKER_GRID_CLASSES,children:R.map(e=>r.jsx("button",{type:"button",onClick:()=>A(e),className:_.cn(t.COLOR_PICKER_PRESET_ITEM_CLASSES,C.presetSwatch,c===e?t.COLOR_PICKER_PRESET_ACTIVE_CLASSES:t.COLOR_PICKER_PRESET_INACTIVE_CLASSES),style:{backgroundColor:e},"aria-label":`Color ${e}`},e))})]})]})};exports.ColorPicker=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),n=require("react"),f=require("../../utils/cn.cjs"),j=require("../Portal/Portal.cjs"),s=require("./ColorPicker.const.cjs"),u=require("./ColorPicker.utils.cjs"),H=({value:l=s.COLOR_PICKER_DEFAULT_VALUE,onChange:a,presets:x=s.COLOR_PICKER_DEFAULT_PRESETS,showInput:g=!0,showPresets:T=!0,disabled:R=!1,label:P,size:w="md",className:A})=>{const[i,S]=n.useState(!1),[y,_]=n.useState(l),[E,d]=n.useState({h:330,s:80,v:90}),[p,K]=n.useState({top:0,left:0}),b=n.useRef(null),O=n.useRef(null),L=n.useRef(null),m=n.useRef(E);m.current=E,n.useEffect(()=>{_(l)},[l]),n.useEffect(()=>{if(!i||!b.current)return;const e=()=>{const t=b.current.getBoundingClientRect(),r=256;let o=t.left;o=Math.max(8,Math.min(o,window.innerWidth-r-8)),K({top:t.bottom+8,left:o})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[i]),n.useEffect(()=>{if(i){const e=u.hexToRgb(l);e&&d(u.rgbToHsv(e.r,e.g,e.b))}},[i,l]),n.useEffect(()=>{if(!i)return;const e=t=>{var o,C;const r=t.target;(o=b.current)!=null&&o.contains(r)||(C=O.current)!=null&&C.contains(r)||S(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[i]);const I=(e,t,r)=>{d({h:e,s:t,v:r});const o=u.hsvToHex(e,t,r);a==null||a(o),_(o)},h=e=>{const t=L.current;if(!t)return;const r=t.getBoundingClientRect(),o=Math.max(0,Math.min(1,(e.clientX-r.left)/r.width)),C=Math.max(0,Math.min(1,(e.clientY-r.top)/r.height));I(m.current.h,o*100,(1-C)*100)},N=e=>{const t=e.target.value;if(_(t),s.COLOR_PICKER_HEX_PATTERN.test(t)){a==null||a(t);const r=u.hexToRgb(t);r&&d(u.rgbToHsv(r.r,r.g,r.b))}},k=e=>{_(e),a==null||a(e);const t=u.hexToRgb(e);t&&d(u.rgbToHsv(t.r,t.g,t.b))},v=s.COLOR_PICKER_SWATCH_SIZE[w];return c.jsxs("div",{ref:b,className:f.cn("bear-relative bear-inline-block",A),children:[P&&c.jsx("label",{className:s.COLOR_PICKER_LABEL_CLASSES,children:P}),c.jsxs("div",{className:"bear-flex bear-items-center bear-gap-2",children:[c.jsx("button",{type:"button",onClick:()=>!R&&S(!i),disabled:R,className:f.cn(s.COLOR_PICKER_SWATCH_CLASSES,v.swatch,R&&"bear-opacity-50 bear-cursor-not-allowed"),style:{backgroundColor:l},"aria-label":"Pick color"}),g&&c.jsx("input",{type:"text",value:y,onChange:N,disabled:R,placeholder:"#000000",className:f.cn(s.COLOR_PICKER_INPUT_CLASSES,R&&"bear-opacity-50 bear-cursor-not-allowed")})]}),i&&c.jsx(j.Portal,{children:c.jsxs("div",{ref:O,className:s.COLOR_PICKER_POPUP_CLASSES,style:{position:"fixed",top:p.top,left:p.left,zIndex:s.COLOR_PICKER_POPUP_Z_INDEX},children:[c.jsx("div",{ref:L,role:"presentation",className:"bear-relative bear-mb-3 bear-h-28 bear-w-full bear-cursor-crosshair bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-touch-none",style:{backgroundImage:`linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${Math.round(E.h)}, 100%, 50%))`},onPointerDown:e=>{h(e),e.currentTarget.setPointerCapture(e.pointerId)},onPointerMove:e=>{(e.pressure>0||e.buttons>0)&&h(e)}}),c.jsx("input",{type:"range",min:0,max:359,value:Math.round(E.h),"aria-label":"Hue",onChange:e=>I(Number(e.target.value),E.s,E.v),className:s.COLOR_PICKER_HUE_STRIP_CLASSES,style:{background:s.COLOR_PICKER_HUE_BACKGROUND}}),T&&c.jsx("div",{className:s.COLOR_PICKER_GRID_CLASSES,children:x.map(e=>c.jsx("button",{type:"button",onClick:()=>k(e),className:f.cn(s.COLOR_PICKER_PRESET_ITEM_CLASSES,v.presetSwatch,l===e?s.COLOR_PICKER_PRESET_ACTIVE_CLASSES:s.COLOR_PICKER_PRESET_INACTIVE_CLASSES),style:{backgroundColor:e},"aria-label":`Color ${e}`},e))})]})})]})};exports.ColorPicker=H;

package/dist/components/ColorPicker/ColorPicker.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="#ec4899",e=/^#[0-9A-Fa-f]{6}$/,a=["#ef4444","#f97316","#eab308","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#a855f7","#d946ef","#ec4899","#f43f5e","#64748b","#1e293b","#000000","#ffffff"],b={sm:{swatch:"bear-w-6 bear-h-6",presetSwatch:"bear-w-5 bear-h-5"},md:{swatch:"bear-w-8 bear-h-8",presetSwatch:"bear-w-6 bear-h-6"},lg:{swatch:"bear-w-10 bear-h-10",presetSwatch:"bear-w-7 bear-h-7"}},_="bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",E="bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none bear-border-gray-300 dark:bear-border-zinc-600 focus:bear-border-pink-500",C="bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-transition-all hover:bear-scale-105 bear-shadow-sm",S="bear-absolute bear-z-50 bear-mt-2 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-slide-in-from-top-1 bear-duration-150",R="bear-w-full bear-h-32 bear-rounded-lg bear-cursor-pointer bear-mb-3 bear-border bear-border-gray-200 dark:bear-border-zinc-600",o="bear-border-gray-900 dark:bear-border-white bear-ring-2 bear-ring-pink-500",t="bear-border-gray-300 dark:bear-border-zinc-600",O="bear-rounded bear-border bear-transition-transform hover:bear-scale-110 bear-shadow-sm",L="bear-grid bear-grid-cols-6 bear-gap-1.5";exports.COLOR_PICKER_DEFAULT_PRESETS=a;exports.COLOR_PICKER_DEFAULT_VALUE=r;exports.COLOR_PICKER_GRID_CLASSES=L;exports.COLOR_PICKER_HEX_PATTERN=e;exports.COLOR_PICKER_INPUT_CLASSES=E;exports.COLOR_PICKER_LABEL_CLASSES=_;exports.COLOR_PICKER_NATIVE_INPUT_CLASSES=R;exports.COLOR_PICKER_POPUP_CLASSES=S;exports.COLOR_PICKER_PRESET_ACTIVE_CLASSES=o;exports.COLOR_PICKER_PRESET_INACTIVE_CLASSES=t;exports.COLOR_PICKER_PRESET_ITEM_CLASSES=O;exports.COLOR_PICKER_SWATCH_CLASSES=C;exports.COLOR_PICKER_SWATCH_SIZE=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r="#ec4899",e=/^#[0-9A-Fa-f]{6}$/,a=["#ef4444","#f97316","#eab308","#22c55e","#14b8a6","#06b6d4","#3b82f6","#6366f1","#8b5cf6","#a855f7","#d946ef","#ec4899","#f43f5e","#64748b","#1e293b","#000000","#ffffff"],b={sm:{swatch:"bear-w-6 bear-h-6",presetSwatch:"bear-w-5 bear-h-5"},md:{swatch:"bear-w-8 bear-h-8",presetSwatch:"bear-w-6 bear-h-6"},lg:{swatch:"bear-w-10 bear-h-10",presetSwatch:"bear-w-7 bear-h-7"}},_="bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5",E="bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none bear-border-gray-300 dark:bear-border-zinc-600 focus:bear-border-pink-500",C="bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-transition-all hover:bear-scale-105 bear-shadow-sm",S="bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-duration-150 bear-w-64",R="bear-w-full bear-h-2 bear-rounded-full bear-cursor-pointer bear-appearance-none bear-border-0 bear-mb-3",O="bear-border-gray-900 dark:bear-border-white bear-ring-2 bear-ring-pink-500",o="bear-border-gray-300 dark:bear-border-zinc-600",t="bear-rounded bear-border bear-transition-transform hover:bear-scale-110 bear-shadow-sm",L="bear-grid bear-grid-cols-6 bear-gap-1.5",P=11e3,n="linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)";exports.COLOR_PICKER_DEFAULT_PRESETS=a;exports.COLOR_PICKER_DEFAULT_VALUE=r;exports.COLOR_PICKER_GRID_CLASSES=L;exports.COLOR_PICKER_HEX_PATTERN=e;exports.COLOR_PICKER_HUE_BACKGROUND=n;exports.COLOR_PICKER_HUE_STRIP_CLASSES=R;exports.COLOR_PICKER_INPUT_CLASSES=E;exports.COLOR_PICKER_LABEL_CLASSES=_;exports.COLOR_PICKER_POPUP_CLASSES=S;exports.COLOR_PICKER_POPUP_Z_INDEX=P;exports.COLOR_PICKER_PRESET_ACTIVE_CLASSES=O;exports.COLOR_PICKER_PRESET_INACTIVE_CLASSES=o;exports.COLOR_PICKER_PRESET_ITEM_CLASSES=t;exports.COLOR_PICKER_SWATCH_CLASSES=C;exports.COLOR_PICKER_SWATCH_SIZE=b;

package/dist/components/ColorPicker/ColorPicker.const.d.ts

@@ -18,9 +18,11 @@ export declare const COLOR_PICKER_SWATCH_SIZE: {
 export declare const COLOR_PICKER_LABEL_CLASSES = "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5";
 export declare const COLOR_PICKER_INPUT_CLASSES = "bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none bear-border-gray-300 dark:bear-border-zinc-600 focus:bear-border-pink-500";
 export declare const COLOR_PICKER_SWATCH_CLASSES = "bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-transition-all hover:bear-scale-105 bear-shadow-sm";
-export declare const COLOR_PICKER_POPUP_CLASSES = "bear-absolute bear-z-50 bear-mt-2 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-slide-in-from-top-1 bear-duration-150";
-export declare const COLOR_PICKER_NATIVE_INPUT_CLASSES = "bear-w-full bear-h-32 bear-rounded-lg bear-cursor-pointer bear-mb-3 bear-border bear-border-gray-200 dark:bear-border-zinc-600";
+export declare const COLOR_PICKER_POPUP_CLASSES = "bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-duration-150 bear-w-64";
+export declare const COLOR_PICKER_HUE_STRIP_CLASSES = "bear-w-full bear-h-2 bear-rounded-full bear-cursor-pointer bear-appearance-none bear-border-0 bear-mb-3";
 export declare const COLOR_PICKER_PRESET_ACTIVE_CLASSES = "bear-border-gray-900 dark:bear-border-white bear-ring-2 bear-ring-pink-500";
 export declare const COLOR_PICKER_PRESET_INACTIVE_CLASSES = "bear-border-gray-300 dark:bear-border-zinc-600";
 export declare const COLOR_PICKER_PRESET_ITEM_CLASSES = "bear-rounded bear-border bear-transition-transform hover:bear-scale-110 bear-shadow-sm";
 export declare const COLOR_PICKER_GRID_CLASSES = "bear-grid bear-grid-cols-6 bear-gap-1.5";
+export declare const COLOR_PICKER_POPUP_Z_INDEX = 11000;
+export declare const COLOR_PICKER_HUE_BACKGROUND = "linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)";

package/dist/components/ColorPicker/ColorPicker.const.js

@@ -20,19 +20,21 @@ const r = "#ec4899", e = /^#[0-9A-Fa-f]{6}$/, a = [
   sm: { swatch: "bear-w-6 bear-h-6", presetSwatch: "bear-w-5 bear-h-5" },
   md: { swatch: "bear-w-8 bear-h-8", presetSwatch: "bear-w-6 bear-h-6" },
   lg: { swatch: "bear-w-10 bear-h-10", presetSwatch: "bear-w-7 bear-h-7" }
-}, o = "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", t = "bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none bear-border-gray-300 dark:bear-border-zinc-600 focus:bear-border-pink-500", d = "bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-transition-all hover:bear-scale-105 bear-shadow-sm", n = "bear-absolute bear-z-50 bear-mt-2 bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-slide-in-from-top-1 bear-duration-150", _ = "bear-w-full bear-h-32 bear-rounded-lg bear-cursor-pointer bear-mb-3 bear-border bear-border-gray-200 dark:bear-border-zinc-600", E = "bear-border-gray-900 dark:bear-border-white bear-ring-2 bear-ring-pink-500", C = "bear-border-gray-300 dark:bear-border-zinc-600", S = "bear-rounded bear-border bear-transition-transform hover:bear-scale-110 bear-shadow-sm", c = "bear-grid bear-grid-cols-6 bear-gap-1.5";
+}, o = "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-zinc-300 bear-mb-1.5", t = "bear-px-3 bear-py-1.5 bear-rounded-lg bear-border bear-bg-white dark:bear-bg-zinc-800 bear-text-gray-900 dark:bear-text-white bear-text-sm bear-font-mono bear-w-24 bear-outline-none bear-border-gray-300 dark:bear-border-zinc-600 focus:bear-border-pink-500", n = "bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-transition-all hover:bear-scale-105 bear-shadow-sm", _ = "bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-rounded-xl bear-shadow-xl bear-p-4 bear-animate-in bear-fade-in bear-duration-150 bear-w-64", d = "bear-w-full bear-h-2 bear-rounded-full bear-cursor-pointer bear-appearance-none bear-border-0 bear-mb-3", E = "bear-border-gray-900 dark:bear-border-white bear-ring-2 bear-ring-pink-500", C = "bear-border-gray-300 dark:bear-border-zinc-600", c = "bear-rounded bear-border bear-transition-transform hover:bear-scale-110 bear-shadow-sm", S = "bear-grid bear-grid-cols-6 bear-gap-1.5", R = 11e3, s = "linear-gradient(to right,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%)";
 export {
   a as COLOR_PICKER_DEFAULT_PRESETS,
   r as COLOR_PICKER_DEFAULT_VALUE,
-  c as COLOR_PICKER_GRID_CLASSES,
+  S as COLOR_PICKER_GRID_CLASSES,
   e as COLOR_PICKER_HEX_PATTERN,
+  s as COLOR_PICKER_HUE_BACKGROUND,
+  d as COLOR_PICKER_HUE_STRIP_CLASSES,
   t as COLOR_PICKER_INPUT_CLASSES,
   o as COLOR_PICKER_LABEL_CLASSES,
-  _ as COLOR_PICKER_NATIVE_INPUT_CLASSES,
-  n as COLOR_PICKER_POPUP_CLASSES,
+  _ as COLOR_PICKER_POPUP_CLASSES,
+  R as COLOR_PICKER_POPUP_Z_INDEX,
   E as COLOR_PICKER_PRESET_ACTIVE_CLASSES,
   C as COLOR_PICKER_PRESET_INACTIVE_CLASSES,
-  S as COLOR_PICKER_PRESET_ITEM_CLASSES,
-  d as COLOR_PICKER_SWATCH_CLASSES,
+  c as COLOR_PICKER_PRESET_ITEM_CLASSES,
+  n as COLOR_PICKER_SWATCH_CLASSES,
   b as COLOR_PICKER_SWATCH_SIZE
 };