@code0-tech/pictor 0.15.0 → 0.17.0

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

@@ -6,19 +6,17 @@ import "react";
 import { mergeComponentProps as r } 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                   */
+import '../../assets/components/form/FileInput.style.css';import '../../assets/components/form/DateInput.style.css';import '../../assets/components/form/SelectInput.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                   */
 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";
 /* empty css                      */
-/* empty css                      */
-import "@radix-ui/react-dropdown-menu";
-import "@radix-ui/react-scroll-area";
-/* empty css                                   */
+import "../menu/Menu.js";
 import "@radix-ui/react-select";
 /* empty css                             */
 /* empty css                           */
@@ -27,12 +25,12 @@ import "../form/EditorInput.js";
 import "../form/EmailInput.js";
 /* empty css                           */
 import "../form/Input.js";
-import "../form/InputSuggestion.js";
 import "../form/NumberInput.js";
 import "../form/PasswordInput.js";
 import "@radix-ui/react-one-time-password-field";
 import "@radix-ui/react-radio-group";
 import "../form/SwitchInput.js";
+import "../form/TagInput.js";
 import "../form/TextAreaInput.js";
 import { TextInput as $ } from "../form/TextInput.js";
 const P = (e) => {
@@ -42,7 +40,7 @@ const P = (e) => {
   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) => {
+}, et = (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 +53,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) => {
+}, nt = (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];
   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) => {
+}, mt = (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];
@@ -81,35 +79,35 @@ const P = (e) => {
   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) => {
+}, ot = (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];
   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) => {
+}, it = (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];
   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;
-}, at = (e) => {
+}, lt = (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];
   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) => {
+}, ct = (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];
   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) => {
+}, at = (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];
@@ -119,12 +117,12 @@ const P = (e) => {
 };
 export {
   P as Command,
-  mt as CommandDialog,
-  lt as CommandEmpty,
-  ct as CommandGroup,
-  it as CommandInput,
-  at as CommandItem,
-  ot as CommandList,
-  rt as CommandSeparator,
-  dt as CommandShortcut
+  et as CommandDialog,
+  ot as CommandEmpty,
+  it as CommandGroup,
+  mt as CommandInput,
+  lt as CommandItem,
+  nt as CommandList,
+  ct as CommandSeparator,
+  at 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 {};