@code0-tech/pictor 0.15.0 → 0.16.0

package/dist/assets/components/avatar/Avatar.style.css

@@ -1 +1 @@
-.avatar{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}.avatar{background:#191825;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:transparent;box-shadow:none}.avatar--image{padding:0}.avatar--identicon>div>div{--color: inherit;background:transparent;width:calc(var(--size) * 1px);height:calc(var(--size) * 1px)}.avatar--identicon>div>div>span>svg{width:calc(var(--size) * .75px);height:calc(var(--size) * .75px)}.avatar--identicon>div>div>span,.avatar--identicon>div>div>p{color:var(--color);font-size:calc(var(--size) * .75px)}
+.avatar{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden}.avatar{background:#191825;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:transparent;box-shadow:none}.avatar--image{padding:0}.avatar--identicon>div>div{--color: inherit;background:transparent;width:calc(var(--size) * .75px);height:calc(var(--size) * .75px)}.avatar--identicon>div>div>span>svg{width:calc(var(--size) * .75px);height:calc(var(--size) * .75px)}.avatar--identicon>div>div>span,.avatar--identicon>div>div>p{color:var(--color);font-size:calc(var(--size) * .75px)}

package/dist/assets/components/chart/Chart.style.css

@@ -0,0 +1 @@
+.chart{display:flex;justify-content:center;aspect-ratio:16/9;font-size:.7rem}.chart{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.chart .recharts-cartesian-axis-tick text,.chart .recharts-cartesian-axis-label text{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.chart .recharts-cartesian-axis-tick text{fill:#ffffffbf}.chart .recharts-cartesian-grid line,.chart .recharts-polar-grid line,.chart .recharts-reference-line line,.chart .recharts-reference-line path{stroke:#bfbfbf1a}.chart .recharts-curve.recharts-tooltip-cursor{stroke:#bfbfbf1a}.chart .recharts-dot,.chart .recharts-sector{stroke:transparent}.chart .recharts-layer,.chart .recharts-sector,.chart .recharts-surface{outline:none}.chart .recharts-radial-bar-background-sector,.chart .recharts-rectangle.recharts-tooltip-cursor{fill:#100e1d}.chart__tooltip{display:grid;min-width:8rem;align-items:start;gap:.35rem;padding:.7rem;font-size:.7rem}.chart__tooltip{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;border-radius:1rem;font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.chart__tooltip-label{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.chart__tooltip-body{display:grid;gap:.35rem}.chart__tooltip-row{display:flex;flex-wrap:wrap;width:100%;align-items:stretch;gap:.7rem}.chart__tooltip-row>svg{width:.7rem;height:.7rem;color:#ffffffbf}.chart__tooltip-row--dot{align-items:center}.chart__tooltip-indicator{flex-shrink:0;border-radius:1rem;border:1px solid var(--color-border);background:var(--color-bg)}.chart__tooltip-indicator--dot{border-radius:.175rem;width:.7rem;height:.7rem}.chart__tooltip-content{display:flex;flex:1;justify-content:space-between;align-items:center;line-height:1;gap:.7rem}.chart__tooltip-meta{display:grid;gap:.35rem;min-width:0}.chart__tooltip-name{color:#ffffffbf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart__tooltip-value{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;color:#fff;font-variant-numeric:tabular-nums;flex-shrink:0}.chart__legend{display:flex;align-items:center;justify-content:center;gap:1rem}.chart__legend--top{padding-bottom:.7rem}.chart__legend--bottom{padding-top:.7rem}.chart__legend-item{display:flex;align-items:center;gap:.35rem}.chart__legend-item>svg{width:.7rem;height:.7rem;color:#ffffffbf}.chart__legend-swatch{width:.5rem;height:.5rem;flex-shrink:0;border-radius:2px}

package/dist/assets/components/form/ColorInput.style.css

@@ -0,0 +1 @@
+.color-input__control{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;gap:.7rem}.color-input__swatch-wrapper{position:relative;width:20px;height:20px;border-radius:.3rem;overflow:hidden;flex-shrink:0;box-shadow:inset 0 0 0 1px #ffffff1a}.color-input__transparency-grid{position:absolute;inset:0}.color-input__swatch{width:100%;height:100%}.color-input__swatch--empty{background:linear-gradient(to top right,transparent calc(50% - 1px),rgba(255,255,255,.4),transparent calc(50% + 1px))}.color-input__value-text{font-variant-numeric:tabular-nums}.color-input__value-text{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.color-input__value-text--placeholder{opacity:.5}.color-input__trigger{cursor:pointer;display:flex;align-items:center}.color-input__content{padding:.35rem}.color-input__body{display:flex;flex-direction:column;gap:.7rem;width:240px;max-width:100%}.color-input__area{position:relative;width:100%;height:140px;border-radius:.65rem;overflow:hidden}.color-input__area-background{width:100%;height:100%;border-radius:inherit}.color-input__area-thumb{width:14px;height:14px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 0 0 1px #00000059}.color-input__area-thumb:focus{outline:none}.color-input__sliders{display:flex;flex-direction:column;gap:.7rem}.color-input__channel-slider{position:relative;height:14px;border-radius:999px;overflow:hidden}.color-input__channel-slider:focus{outline:none}.color-input__channel-slider-grid{position:absolute;inset:0;border-radius:inherit}.color-input__channel-slider-track{width:100%;height:100%;border-radius:inherit}.color-input__channel-slider-thumb{width:14px;height:14px;border-radius:50%;border:2px solid #ffffff;box-shadow:0 0 0 1px #00000059;transform:translate(-50%,-50%)}.color-input__channel-slider-thumb:focus{outline:none}.color-input__channels{display:flex;flex-direction:column;gap:.7rem}.color-input__notation{width:100%}.color-input__notation .segmented-control__item{flex:1;text-align:center;justify-content:center;font-size:.8rem}.color-input__actions{width:100%;gap:.7rem;margin-top:.35rem}.color-input__actions .button{flex:1;gap:.35rem;justify-content:center;align-items:center}.color-input__channel-row{display:flex;align-items:flex-end;gap:.35rem}.color-input__channel{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;min-width:0}.color-input__channel--hex{align-items:stretch}.color-input__channel--hex .color-input__channel-label{text-align:center}.color-input__channel-label{font-size:.7rem;opacity:.6}.color-input__channel-label{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.color-input__channel-input{width:100%;min-width:0;text-align:center;padding:.35rem;border-radius:.65rem;font-variant-numeric:tabular-nums}.color-input__channel-input{background:#070514;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box}.color-input__channel-input:focus{outline:none}.color-input__channel-input{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px;font-size:.8rem}.color-input__channel-input:focus,.color-input__channel-input[data-focus]{background:#bfbfbf33;box-shadow:inset 0 1px 1px #ffffff1a;outline:none}

package/dist/components/alert/Alert.js

@@ -1,40 +1,42 @@
-import { jsxs as z, jsx as r } from "react/jsx-runtime";
-import { c as C } from "../../_virtual/compiler-runtime.js";
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { c as y } from "../../_virtual/compiler-runtime.js";
 import "../../utils/contextStore.js";
 import "react";
-import { mergeComponentProps as I } from "../../utils/component.js";
+import { mergeComponentProps as u } from "../../utils/component.js";
 import "js-md5";
-import { IconCircleX as h, IconAlertCircle as y, IconCircleCheck as x, IconInfoCircle as u, IconCircleDot as a } from "@tabler/icons-react";
+import { IconCircleX as v, IconAlertCircle as x, IconCircleCheck as g, IconInfoCircle as j, IconCircleDot as f } from "@tabler/icons-react";
 import '../../assets/components/alert/Alert.style.css';/* empty css                 */
-const w = (n) => {
-  const e = C.c(10);
-  let o, i, c, t;
-  if (e[0] !== n) {
+const P = (a) => {
+  const e = y.c(14);
+  let t, o, s, i, c, l;
+  if (e[0] !== a) {
     const {
-      color: f,
-      children: p,
-      ...d
-    } = n;
-    o = p, i = f === void 0 ? "secondary" : f;
-    let s;
-    e[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (s = {
-      primary: /* @__PURE__ */ r(a, { size: 16 }),
-      secondary: /* @__PURE__ */ r(a, { size: 16 }),
-      tertiary: /* @__PURE__ */ r(a, { size: 16 }),
-      info: /* @__PURE__ */ r(u, { size: 16 }),
-      success: /* @__PURE__ */ r(x, { size: 16 }),
-      warning: /* @__PURE__ */ r(y, { size: 16 }),
-      error: /* @__PURE__ */ r(h, { size: 16 })
-    }, e[5] = s) : s = e[5], c = s, t = I(`alert alert--${i}`, d), e[0] = n, e[1] = o, e[2] = i, e[3] = c, e[4] = t;
+      color: C,
+      children: z,
+      ...I
+    } = a;
+    t = z, o = C === void 0 ? "secondary" : C;
+    let m;
+    e[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = {
+      primary: /* @__PURE__ */ r(f, { size: 16 }),
+      secondary: /* @__PURE__ */ r(f, { size: 16 }),
+      tertiary: /* @__PURE__ */ r(f, { size: 16 }),
+      info: /* @__PURE__ */ r(j, { size: 16 }),
+      success: /* @__PURE__ */ r(g, { size: 16 }),
+      warning: /* @__PURE__ */ r(x, { size: 16 }),
+      error: /* @__PURE__ */ r(v, { size: 16 })
+    }, e[7] = m) : m = e[7], s = m;
+    const d = o === "error";
+    i = d ? "alert" : "status", c = d ? "assertive" : "polite", l = u(`alert alert--${o}`, I), e[0] = a, e[1] = t, e[2] = o, e[3] = s, e[4] = i, e[5] = c, e[6] = l;
   } else
-    o = e[1], i = e[2], c = e[3], t = e[4];
-  const m = c[i];
-  let l;
-  return e[6] !== o || e[7] !== t || e[8] !== m ? (l = /* @__PURE__ */ z("div", { ...t, children: [
-    m,
-    o
-  ] }), e[6] = o, e[7] = t, e[8] = m, e[9] = l) : l = e[9], l;
+    t = e[1], o = e[2], s = e[3], i = e[4], c = e[5], l = e[6];
+  const p = s[o];
+  let n;
+  return e[8] !== t || e[9] !== i || e[10] !== c || e[11] !== l || e[12] !== p ? (n = /* @__PURE__ */ h("div", { role: i, "aria-live": c, ...l, children: [
+    p,
+    t
+  ] }), e[8] = t, e[9] = i, e[10] = c, e[11] = l, e[12] = p, e[13] = n) : n = e[13], n;
 };
 export {
-  w as Alert
+  P as Alert
 };

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

@@ -0,0 +1,32 @@
+import { Component } from '../../utils';
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+interface ChartItem {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+    color?: string;
+}
+export type ChartConfig = Record<string, ChartItem>;
+interface ChartContainerProps extends Component<HTMLDivElement> {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
+}
+export declare const ChartContainer: React.FC<ChartContainerProps>;
+interface ChartTooltipContentProps extends Omit<React.ComponentProps<typeof RechartsPrimitive.Tooltip>, "content">, Omit<React.ComponentProps<"div">, "content"> {
+    payload?: RechartsPrimitive.TooltipPayload;
+    label?: string | number;
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+}
+export declare const ChartTooltipContent: React.FC<ChartTooltipContentProps>;
+interface ChartLegendContentProps extends Omit<React.ComponentProps<"div">, "dangerouslySetInnerHTML"> {
+    payload?: ReadonlyArray<RechartsPrimitive.LegendPayload>;
+    verticalAlign?: "top" | "bottom" | "middle";
+    hideIcon?: boolean;
+}
+export declare const ChartLegendContent: React.FC<ChartLegendContentProps>;
+export {};

package/dist/components/chart/Chart.js

@@ -0,0 +1,157 @@
+import { jsx as p, jsxs as w } from "react/jsx-runtime";
+import { c as L } from "../../_virtual/compiler-runtime.js";
+import * as j from "react";
+import * as S from "recharts";
+import '../../assets/components/chart/Chart.style.css';/* empty css                 */
+import "../../utils/contextStore.js";
+import { mergeComponentProps as I } from "../../utils/component.js";
+import "js-md5";
+const A = j.createContext(null), D = () => {
+  const o = j.useContext(A);
+  if (!o)
+    throw new Error("useChart must be used within a <ChartContainer />");
+  return o;
+}, H = (o) => {
+  const t = L.c(21), {
+    id: c,
+    className: l,
+    children: i,
+    config: e,
+    initialDimension: r,
+    style: _,
+    ...h
+  } = o;
+  let v;
+  t[0] !== r ? (v = r === void 0 ? {
+    width: 320,
+    height: 200
+  } : r, t[0] = r, t[1] = v) : v = t[1];
+  const a = v, n = j.useId(), d = `chart-${c ?? n.replace(/:/g, "")}`;
+  let f;
+  t[2] !== e ? (f = Object.entries(e).reduce(k, {}), t[2] = e, t[3] = f) : f = t[3];
+  const g = f, x = A;
+  let s;
+  t[4] !== e ? (s = {
+    config: e
+  }, t[4] = e, t[5] = s) : s = t[5];
+  const $ = "chart";
+  let m;
+  t[6] !== g || t[7] !== _ ? (m = {
+    ...g,
+    ..._
+  }, t[6] = g, t[7] = _, t[8] = m) : m = t[8];
+  const b = I("chart", h);
+  let u;
+  t[9] !== i || t[10] !== a ? (u = /* @__PURE__ */ p(S.ResponsiveContainer, { initialDimension: a, children: i }), t[9] = i, t[10] = a, t[11] = u) : u = t[11];
+  let C;
+  t[12] !== d || t[13] !== m || t[14] !== b || t[15] !== u ? (C = /* @__PURE__ */ p("div", { "data-slot": $, "data-chart": d, style: m, ...b, children: u }), t[12] = d, t[13] = m, t[14] = b, t[15] = u, t[16] = C) : C = t[16];
+  let N;
+  return t[17] !== x.Provider || t[18] !== s || t[19] !== C ? (N = /* @__PURE__ */ p(x.Provider, { value: s, children: C }), t[17] = x.Provider, t[18] = s, t[19] = C, t[20] = N) : N = t[20], N;
+}, J = (o) => {
+  const t = L.c(31);
+  let c, l, i, e, r, _, h;
+  t[0] !== o ? ({
+    active: c,
+    payload: e,
+    className: l,
+    hideLabel: _,
+    hideIndicator: h,
+    label: i,
+    ...r
+  } = o, t[0] = o, t[1] = c, t[2] = l, t[3] = i, t[4] = e, t[5] = r, t[6] = _, t[7] = h) : (c = t[1], l = t[2], i = t[3], e = t[4], r = t[5], _ = t[6], h = t[7]);
+  const v = _ === void 0 ? !1 : _, a = h === void 0 ? !1 : h, {
+    config: n
+  } = D();
+  if (!c || !e?.length)
+    return null;
+  const [d] = e, f = `${d?.dataKey ?? d?.name ?? "value"}`;
+  let g;
+  t[8] !== n || t[9] !== d || t[10] !== f ? (g = K(n, d, f), t[8] = n, t[9] = d, t[10] = f, t[11] = g) : g = t[11];
+  const s = typeof i == "string" ? n[i]?.label ?? i : g?.label;
+  let $;
+  t[12] !== l ? ($ = I("chart__tooltip", {
+    className: l
+  }), t[12] = l, t[13] = $) : $ = t[13];
+  let m;
+  t[14] !== v || t[15] !== s ? (m = !v && s && /* @__PURE__ */ p("div", { className: "chart__tooltip-label", children: s }), t[14] = v, t[15] = s, t[16] = m) : m = t[16];
+  let b;
+  if (t[17] !== n || t[18] !== a || t[19] !== e) {
+    let N;
+    t[21] !== n || t[22] !== a ? (N = (y, E) => {
+      const P = K(n, y, `${y.name ?? y.dataKey ?? "value"}`), R = y.payload?.fill ?? y.color;
+      return /* @__PURE__ */ w("div", { className: "chart__tooltip-row chart__tooltip-row--dot", children: [
+        P?.icon ? /* @__PURE__ */ p(P.icon, {}) : !a && /* @__PURE__ */ p("div", { ...I("chart__tooltip-indicator chart__tooltip-indicator--dot", {
+          style: {
+            "--color-bg": R,
+            "--color-border": R
+          }
+        }) }),
+        /* @__PURE__ */ w("div", { className: "chart__tooltip-content", children: [
+          /* @__PURE__ */ p("div", { className: "chart__tooltip-meta", children: /* @__PURE__ */ p("span", { className: "chart__tooltip-name", children: P?.label ?? y.name }) }),
+          y.value != null && /* @__PURE__ */ p("span", { className: "chart__tooltip-value", children: typeof y.value == "number" ? y.value.toLocaleString() : String(y.value) })
+        ] })
+      ] }, E);
+    }, t[21] = n, t[22] = a, t[23] = N) : N = t[23], b = e.filter(q).map(N), t[17] = n, t[18] = a, t[19] = e, t[20] = b;
+  } else
+    b = t[20];
+  let u;
+  t[24] !== b ? (u = /* @__PURE__ */ p("div", { className: "chart__tooltip-body", children: b }), t[24] = b, t[25] = u) : u = t[25];
+  let C;
+  return t[26] !== r || t[27] !== $ || t[28] !== m || t[29] !== u ? (C = /* @__PURE__ */ w("div", { ...$, ...r, children: [
+    m,
+    u
+  ] }), t[26] = r, t[27] = $, t[28] = m, t[29] = u, t[30] = C) : C = t[30], C;
+}, M = (o) => {
+  const t = L.c(13), {
+    className: c,
+    hideIcon: l,
+    payload: i,
+    verticalAlign: e
+  } = o, r = l === void 0 ? !1 : l, _ = e === void 0 ? "bottom" : e, {
+    config: h
+  } = D();
+  if (!i?.length)
+    return null;
+  const v = `chart__legend ${_ === "top" ? "chart__legend--top" : "chart__legend--bottom"}`;
+  let a;
+  t[0] !== c || t[1] !== v ? (a = I(v, {
+    className: c
+  }), t[0] = c, t[1] = v, t[2] = a) : a = t[2];
+  let n;
+  if (t[3] !== h || t[4] !== r || t[5] !== i) {
+    let f;
+    t[7] !== h || t[8] !== r ? (f = (g, x) => {
+      const s = K(h, g, `${g.dataKey ?? "value"}`);
+      return /* @__PURE__ */ w("div", { className: "chart__legend-item", children: [
+        s?.icon && !r ? /* @__PURE__ */ p(s.icon, {}) : /* @__PURE__ */ p("div", { className: "chart__legend-swatch", style: {
+          backgroundColor: g.color
+        } }),
+        s?.label
+      ] }, x);
+    }, t[7] = h, t[8] = r, t[9] = f) : f = t[9], n = i.filter(F).map(f), t[3] = h, t[4] = r, t[5] = i, t[6] = n;
+  } else
+    n = t[6];
+  let d;
+  return t[10] !== a || t[11] !== n ? (d = /* @__PURE__ */ p("div", { ...a, children: n }), t[10] = a, t[11] = n, t[12] = d) : d = t[12], d;
+}, K = (o, t, c) => {
+  if (typeof t != "object" || t === null) return o[c];
+  const l = t, i = [c, typeof l.dataKey == "string" ? l.dataKey : void 0, typeof l.name == "string" ? l.name : void 0];
+  for (const e of i)
+    if (e && e in o)
+      return o[e];
+};
+function k(o, t) {
+  const [c, l] = t;
+  return l.color && (o[`--color-${c}`] = l.color), o;
+}
+function q(o) {
+  return o.type !== "none";
+}
+function F(o) {
+  return o.type !== "none";
+}
+export {
+  H as ChartContainer,
+  M as ChartLegendContent,
+  J as ChartTooltipContent
+};

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

@@ -0,0 +1,27 @@
+import { ChartContainer, ChartConfig } from './Chart';
+import { Component } from 'utils';
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+export type ChartLines = Omit<React.ComponentProps<typeof RechartsPrimitive.Line>, "dataKey" | "name"> & {
+    dataKey: string;
+    label?: React.ReactNode;
+    color?: string;
+    name?: string;
+};
+export type LineChartProps<TData extends Record<string, unknown>> = Omit<React.ComponentProps<typeof RechartsPrimitive.LineChart>, "data"> & Omit<Component<HTMLDivElement>, "height"> & {
+    data: TData[];
+    lines: ChartLines[];
+    xKey: string;
+    config?: ChartConfig;
+    showDots?: boolean;
+    curveType?: React.ComponentProps<typeof RechartsPrimitive.Line>["type"];
+    containerProps?: Omit<React.ComponentProps<typeof ChartContainer>, "children" | "config">;
+    grid?: React.ComponentProps<typeof RechartsPrimitive.CartesianGrid> | false;
+    xAxis?: Omit<React.ComponentProps<typeof RechartsPrimitive.XAxis>, "dataKey">;
+    yAxis?: React.ComponentProps<typeof RechartsPrimitive.YAxis>;
+    tooltip?: React.ComponentProps<typeof RechartsPrimitive.Tooltip> | false;
+    legend?: React.ComponentProps<typeof RechartsPrimitive.Legend> | false;
+};
+type LineChartComponent = <TData extends Record<string, unknown>>(props: LineChartProps<TData>) => React.ReactElement;
+export declare const LineChart: LineChartComponent;
+export {};

package/dist/components/chart/LineChart.js

@@ -0,0 +1,76 @@
+import { jsx as o, jsxs as X } from "react/jsx-runtime";
+import { c as Y } from "../../_virtual/compiler-runtime.js";
+import * as d from "recharts";
+import { ChartTooltipContent as q, ChartLegendContent as z, ChartContainer as B } from "./Chart.js";
+const Q = (a) => {
+  const e = Y.c(48);
+  let m, p, r, y, c, l, t, h, s, n, C, g, u;
+  e[0] !== a ? ({
+    data: y,
+    lines: t,
+    xKey: g,
+    config: m,
+    showDots: s,
+    curveType: r,
+    containerProps: p,
+    grid: c,
+    xAxis: C,
+    yAxis: u,
+    tooltip: n,
+    legend: l,
+    ...h
+  } = a, e[0] = a, e[1] = m, e[2] = p, e[3] = r, e[4] = y, e[5] = c, e[6] = l, e[7] = t, e[8] = h, e[9] = s, e[10] = n, e[11] = C, e[12] = g, e[13] = u) : (m = e[1], p = e[2], r = e[3], y = e[4], c = e[5], l = e[6], t = e[7], h = e[8], s = e[9], n = e[10], C = e[11], g = e[12], u = e[13]);
+  const W = F;
+  let P;
+  e[14] !== m || e[15] !== t ? (P = m ?? t.reduce((f, i) => (f[i.dataKey] = {
+    label: i.label ?? i.name ?? i.dataKey,
+    color: W(i)
+  }, f), {}), e[14] = m, e[15] = t, e[16] = P) : P = e[16];
+  const D = P;
+  let x;
+  e[17] !== C || e[18] !== g ? (x = /* @__PURE__ */ o(d.XAxis, { dataKey: g, ...C }), e[17] = C, e[18] = g, e[19] = x) : x = e[19];
+  let k;
+  e[20] !== u ? (k = /* @__PURE__ */ o(d.YAxis, { ...u }), e[20] = u, e[21] = k) : k = e[21];
+  let v;
+  e[22] !== c ? (v = c !== !1 && /* @__PURE__ */ o(d.CartesianGrid, { strokeDasharray: "4 4", ...c }), e[22] = c, e[23] = v) : v = e[23];
+  let K;
+  e[24] !== n ? (K = n !== !1 && /* @__PURE__ */ o(d.Tooltip, { ...n, content: n?.content ?? /* @__PURE__ */ o(q, {}) }), e[24] = n, e[25] = K) : K = e[25];
+  let L;
+  e[26] !== l ? (L = l !== !1 && /* @__PURE__ */ o(d.Legend, { ...l, content: l?.content ?? /* @__PURE__ */ o(z, {}) }), e[26] = l, e[27] = L) : L = e[27];
+  let b;
+  if (e[28] !== r || e[29] !== t || e[30] !== s) {
+    let f;
+    e[32] !== r || e[33] !== s ? (f = (i) => {
+      const {
+        dataKey: j,
+        label: R,
+        type: $,
+        strokeWidth: w,
+        name: E,
+        dot: G,
+        color: H,
+        stroke: I,
+        ...N
+      } = i, S = typeof R == "string" || typeof R == "number" ? String(R) : E ?? j;
+      return /* @__PURE__ */ o(d.Line, { dataKey: j, name: S, stroke: W(i) ?? `var(--color-${j}, currentColor)`, type: $ ?? r ?? "monotone", strokeWidth: w ?? 2, dot: G ?? s, ...N }, j);
+    }, e[32] = r, e[33] = s, e[34] = f) : f = e[34], b = t.map(f), e[28] = r, e[29] = t, e[30] = s, e[31] = b;
+  } else
+    b = e[31];
+  let A;
+  e[35] !== y || e[36] !== h || e[37] !== x || e[38] !== k || e[39] !== v || e[40] !== K || e[41] !== L || e[42] !== b ? (A = /* @__PURE__ */ X(d.LineChart, { data: y, ...h, children: [
+    x,
+    k,
+    v,
+    K,
+    L,
+    b
+  ] }), e[35] = y, e[36] = h, e[37] = x, e[38] = k, e[39] = v, e[40] = K, e[41] = L, e[42] = b, e[43] = A) : A = e[43];
+  let T;
+  return e[44] !== p || e[45] !== D || e[46] !== A ? (T = /* @__PURE__ */ o(B, { config: D, ...p, children: A }), e[44] = p, e[45] = D, e[46] = A, e[47] = T) : T = e[47], T;
+};
+function F(a) {
+  return a.color ?? (typeof a.stroke == "string" ? a.stroke : void 0);
+}
+export {
+  Q as LineChart
+};

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

@@ -0,0 +1,2 @@
+export * from './LineChart';
+export * from './Chart';

package/dist/components/chart/index.js

@@ -0,0 +1,8 @@
+import { LineChart as r } from "./LineChart.js";
+import { ChartContainer as n, ChartLegendContent as C, ChartTooltipContent as a } from "./Chart.js";
+export {
+  n as ChartContainer,
+  C as ChartLegendContent,
+  a as ChartTooltipContent,
+  r as LineChart
+};

package/dist/components/command/Command.js

@@ -1,9 +1,9 @@
 import { jsx as i, jsxs as s } from "react/jsx-runtime";
 import { c } from "../../_virtual/compiler-runtime.js";
-import { Command as a } from "cmdk";
+import { Command as r } from "cmdk";
 import "../../utils/contextStore.js";
 import "react";
-import { mergeComponentProps as r } from "../../utils/component.js";
+import { mergeComponentProps as a } from "../../utils/component.js";
 import "js-md5";
 import { DialogPortal as u, DialogContent as h, Dialog as g, DialogOverlay as C } from "../dialog/Dialog.js";
 import '../../assets/components/form/FileInput.style.css';import '../../assets/components/form/DateInput.style.css';import '../../assets/components/form/SelectInput.style.css';import '../../assets/components/scroll-area/ScrollArea.style.css';import '../../assets/components/menu/Menu.style.css';import '../../assets/components/flex/Flex.style.css';import '../../assets/components/form/Input.style.css';import '../../assets/components/command/Command.style.css';/* empty css                   */
@@ -11,6 +11,7 @@ import { Badge as _ } from "../badge/Badge.js";
 import "@radix-ui/react-checkbox";
 import "@tabler/icons-react";
 /* empty css                       */
+import "../form/ColorInput.js";
 import "@ark-ui/react";
 import "@internationalized/date";
 import "../form/InputWrapper.js";
@@ -38,11 +39,11 @@ import { TextInput as $ } from "../form/TextInput.js";
 const P = (e) => {
   const t = c.c(4);
   let m;
-  t[0] !== e ? (m = r("command", e), t[0] = e, t[1] = m) : m = t[1];
+  t[0] !== e ? (m = a("command", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ i(a, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, mt = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(r, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, ot = (e) => {
   const t = c.c(11);
   let m;
   t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ i(C, {}), t[0] = m) : m = t[0];
@@ -55,14 +56,14 @@ const P = (e) => {
   ] }), t[3] = e.contentProps, t[4] = o, t[5] = n) : n = t[5];
   let l;
   return t[6] !== e.dialogProps || t[7] !== e.onOpenChange || t[8] !== e.open || t[9] !== n ? (l = /* @__PURE__ */ i(g, { ...e.dialogProps, open: e.open, onOpenChange: e.onOpenChange, children: n }), t[6] = e.dialogProps, t[7] = e.onOpenChange, t[8] = e.open, t[9] = n, t[10] = l) : l = t[10], l;
-}, ot = (e) => {
+}, it = (e) => {
   const t = c.c(4);
   let m;
-  t[0] !== e ? (m = r("command__list", e), t[0] = e, t[1] = m) : m = t[1];
+  t[0] !== e ? (m = a("command__list", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ i(a.List, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, it = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(r.List, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, lt = (e) => {
   const t = c.c(10);
   let m;
   t[0] !== e.value ? (m = e.value?.toString(), t[0] = e.value, t[1] = m) : m = t[1];
@@ -80,51 +81,51 @@ const P = (e) => {
   let n;
   t[4] !== e ? (n = /* @__PURE__ */ i($, { className: "command__input", ...e }), t[4] = e, t[5] = n) : n = t[5];
   let l;
-  return t[6] !== m || t[7] !== o || t[8] !== n ? (l = /* @__PURE__ */ i(a.Input, { value: m, onValueChange: o, asChild: !0, children: n }), t[6] = m, t[7] = o, t[8] = n, t[9] = l) : l = t[9], l;
-}, lt = (e) => {
+  return t[6] !== m || t[7] !== o || t[8] !== n ? (l = /* @__PURE__ */ i(r.Input, { value: m, onValueChange: o, asChild: !0, children: n }), t[6] = m, t[7] = o, t[8] = n, t[9] = l) : l = t[9], l;
+}, ct = (e) => {
   const t = c.c(4);
   let m;
-  t[0] !== e ? (m = r("command__empty", e), t[0] = e, t[1] = m) : m = t[1];
+  t[0] !== e ? (m = a("command__empty", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ i(a.Empty, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, ct = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(r.Empty, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, rt = (e) => {
   const t = c.c(4);
   let m;
-  t[0] !== e ? (m = r("command__group", e), t[0] = e, t[1] = m) : m = t[1];
+  t[0] !== e ? (m = a("command__group", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ i(a.Group, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+  return t[2] !== o ? (n = /* @__PURE__ */ i(r.Group, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
 }, at = (e) => {
   const t = c.c(4);
   let m;
-  t[0] !== e ? (m = r("command__item", e), t[0] = e, t[1] = m) : m = t[1];
+  t[0] !== e ? (m = a("command__item", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ i(a.Item, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, rt = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(r.Item, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, dt = (e) => {
   const t = c.c(4);
   let m;
-  t[0] !== e ? (m = r("command__separator", e), t[0] = e, t[1] = m) : m = t[1];
+  t[0] !== e ? (m = a("command__separator", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
-  return t[2] !== o ? (n = /* @__PURE__ */ i(a.Separator, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
-}, dt = (e) => {
+  return t[2] !== o ? (n = /* @__PURE__ */ i(r.Separator, { ...o }), t[2] = o, t[3] = n) : n = t[3], n;
+}, ft = (e) => {
   const t = c.c(5);
   let m;
-  t[0] !== e ? (m = r("command__shortcut", e), t[0] = e, t[1] = m) : m = t[1];
+  t[0] !== e ? (m = a("command__shortcut", e), t[0] = e, t[1] = m) : m = t[1];
   const o = m;
   let n;
   return t[2] !== e.children || t[3] !== o ? (n = /* @__PURE__ */ i(_, { ...o, children: e.children }), t[2] = e.children, t[3] = o, t[4] = n) : n = t[4], n;
 };
 export {
   P as Command,
-  mt as CommandDialog,
-  lt as CommandEmpty,
-  ct as CommandGroup,
-  it as CommandInput,
+  ot as CommandDialog,
+  ct as CommandEmpty,
+  rt as CommandGroup,
+  lt as CommandInput,
   at as CommandItem,
-  ot as CommandList,
-  rt as CommandSeparator,
-  dt as CommandShortcut
+  it as CommandList,
+  dt as CommandSeparator,
+  ft as CommandShortcut
 };

package/dist/components/form/ColorInput.d.ts

@@ -0,0 +1,33 @@
+import { ColorPicker, Color } from '@ark-ui/react';
+import { ComponentProps } from '../../utils';
+import { default as React } from 'react';
+import { InputWrapperProps } from './InputWrapper';
+import { MenuContentProps, MenuTriggerProps } from '../menu/Menu';
+type ColorNotation = "rgba" | "hsla" | "hexa";
+interface ValueChangeDetails {
+    value: Color;
+    valueAsString: string;
+}
+export type ColorProps = InputWrapperProps & {
+    placeholder?: React.ReactNode;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    closeOnSelect?: boolean;
+    onValueChange?: (details: ValueChangeDetails) => void;
+    children?: React.ReactNode;
+};
+export type ColorInputControlProps = ComponentProps & ColorPicker.ControlProps;
+export type ColorInputSwatchProps = ComponentProps & ColorPicker.ValueSwatchProps;
+export type ColorInputValueTextProps = ComponentProps & Omit<React.HTMLProps<HTMLSpanElement>, "value">;
+export type ColorInputTriggerProps = ComponentProps & MenuTriggerProps;
+export type ColorInputContentProps = ComponentProps & MenuContentProps & {
+    defaultNotation?: ColorNotation;
+};
+export declare const ColorInput: React.FC<ColorProps>;
+export declare const ColorInputControl: React.FC<ColorInputControlProps>;
+export declare const ColorInputSwatch: React.FC<ColorInputSwatchProps>;
+export declare const ColorInputValueText: React.FC<ColorInputValueTextProps>;
+export declare const ColorInputTrigger: React.FC<ColorInputTriggerProps>;
+export declare const ColorInputContent: React.FC<ColorInputContentProps>;
+export {};