@code0-tech/pictor 0.17.2 → 0.18.1

package/dist/assets/components/command/Command.style.css

@@ -1 +1 @@
-.command{display:flex;height:100%;width:100%;flex-direction:column;overflow:hidden;padding:.563rem;box-sizing:border-box}.command__dialog{padding:0}.command__list:focus{outline:none}.command__input.input:focus,.command .input.input:hover:focus,.command .input.input:active:focus,.command .input.input:focus:focus,.command .input.input:focus-within:focus,.command .input.input:not(:focus):focus{outline:none}.command__input.input,.command .input.input:hover,.command .input.input:active,.command .input.input:focus,.command .input.input:focus-within,.command .input.input:not(:focus){width:100%;border:none!important;outline:none!important;background:transparent;box-shadow:none!important;display:flex;height:2rem;color:#ffffffbf;font-size:.75rem;border-radius:.578rem}.command__input.input::placeholder,.command .input.input:hover::placeholder,.command .input.input:active::placeholder,.command .input.input:focus::placeholder,.command .input.input:focus-within::placeholder,.command .input.input:not(:focus)::placeholder{color:#ffffff40}.command__input.input .input__right,.command .input.input:hover .input__right,.command .input.input:active .input__right,.command .input.input:focus .input__right,.command .input.input:focus-within .input__right,.command .input.input:not(:focus) .input__right{padding-right:0}.command__empty{padding:1rem 0 1.777rem;text-align:center;font-size:.75rem;color:#ffffff80}.command__empty{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.command [cmdk-group-heading]{padding:.422rem .563rem}.command__group{overflow:hidden;text-transform:uppercase;font-size:.563rem;padding:.422rem 0 0;color:#ffffff80}.command__group{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.command__item{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;font-size:.75rem;outline:none;color:#ffffffbf;border-radius:.578rem;padding:.422rem .422rem .422rem .75rem;gap:.563rem;text-transform:none}.command__item[data-disabled=true]{pointer-events:none;color:#ffffff40}.command__item[data-selected=true]{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;width:100%}.command__item svg{pointer-events:none;width:1rem;height:1rem;flex-shrink:0}.command__separator{height:1px;margin:.422rem 0;background:#ffffff1a}.command__shortcut{margin-left:auto;font-size:.563rem;letter-spacing:.1rem;padding:0 .422rem;border-radius:.375rem!important;color:#ffffff80;background:#070514}
+.command{display:flex;height:100%;width:100%;flex-direction:column;overflow:hidden;padding:.563rem;box-sizing:border-box}.command__dialog{padding:0}.command__list:focus{outline:none}.command__empty{padding:1rem 0 1.777rem;text-align:center;font-size:.75rem;color:#ffffff80}.command__empty{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.command [cmdk-group-heading]{padding:.422rem .563rem}.command__group{overflow:hidden;text-transform:uppercase;font-size:.563rem;padding:.422rem 0 0;color:#ffffff80}.command__group{font-family:Inter,sans-serif;font-weight:400;letter-spacing:-.5px}.command__item{position:relative;display:flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;font-size:.75rem;outline:none;color:#ffffffbf;border-radius:.578rem;padding:.422rem .422rem .422rem .75rem;gap:.563rem;text-transform:none}.command__item[data-disabled=true]{pointer-events:none;color:#ffffff40}.command__item[data-selected=true]{background:#201e2c;box-shadow:inset 0 1px 1px #ffffff1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;width:100%}.command__item svg{pointer-events:none;width:1rem;height:1rem;flex-shrink:0}.command__separator{height:1px;margin:.422rem 0;background:#ffffff1a}.command__shortcut{margin-left:auto;font-size:.563rem;letter-spacing:.1rem;padding:0 .422rem;border-radius:.375rem!important;color:#ffffff80;background:#070514}

package/dist/assets/components/progress/Progress.style.css

@@ -1 +1 @@
-.progress{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;box-sizing:border-box;background:transparent;border-radius:1rem;width:100%;height:10px;position:relative;transform:translateZ(0)}.progress:before{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:var(--color);opacity:.1;content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.progress__dot{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;top:50%;transform:translate(50%) translateY(-50%);right:calc(100% - 1% * (var(--progress, 0)))}.progress__indicator{position:absolute;background:var(--color);border-radius:inherit;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progress, 100)) 100%;width:100%;height:100%;z-index:1}.progress__indicator--prediction{background:repeating-linear-gradient(-45deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 2.5px,transparent 2.5px,transparent 5px),var(--color);z-index:0;opacity:.25;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progressPrediction, 100)) 100%}
+.progress-linear{background:#070514;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;box-sizing:border-box;background:transparent;border-radius:1rem;width:100%;height:10px;position:relative;transform:translateZ(0)}.progress-linear:before{background:#201e2c;box-shadow:inset 0 1px 1px #bfbfbf1a;border:none;color:#ffffffbf;position:relative;box-sizing:border-box;background:var(--color);opacity:.1;content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit}.progress-linear__dot{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;top:50%;transform:translate(50%) translateY(-50%);right:calc(100% - 1% * (var(--progress, 0)))}.progress-linear__indicator{position:absolute;background:var(--color);border-radius:inherit;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progress, 100)) 100%;width:100%;height:100%;z-index:1}.progress-linear__indicator--prediction{background:repeating-linear-gradient(-45deg,rgba(0,0,0,.25),rgba(0,0,0,.25) 2.5px,transparent 2.5px,transparent 5px),var(--color);z-index:0;opacity:.25;background-position:left center;background-repeat:no-repeat;background-size:calc(100% * 100 / var(--progressPrediction, 100)) 100%}.progress-circle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--size);height:var(--size)}.progress-circle__circle{display:block;width:var(--size);height:var(--size);transform:translateZ(0)}.progress-circle__track{opacity:.1;stroke:var(--color);stroke-linecap:round}.progress-circle__prediction{opacity:.25;stroke:url(#circle-stripe-overlay);stroke-linecap:round;z-index:1}.progress-circle__range{stroke:var(--color);stroke-linecap:round;z-index:2}.progress-circle__dot{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center}

package/dist/components/command/Command.js

@@ -1,13 +1,13 @@
-import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { jsx as i, jsxs as u } from "react/jsx-runtime";
 import { c } from "../../_virtual/compiler-runtime.js";
 import { Command as a } from "cmdk";
 import "../../utils/contextStore.js";
 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 { DialogPortal as h, DialogContent as g, Dialog as C, DialogOverlay as _ } 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/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 { Badge as $ } from "../badge/Badge.js";
 import "@radix-ui/react-checkbox";
 import "@tabler/icons-react";
 /* empty css                       */
@@ -32,97 +32,104 @@ 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) => {
+import { TextInput as P } from "../form/TextInput.js";
+const y = (e) => {
   const t = c.c(4);
-  let m;
-  t[0] !== e ? (m = r("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;
-}, et = (e) => {
+  t[0] !== e ? (n = r("command", e), t[0] = e, t[1] = n) : n = t[1];
+  const m = n;
+  let o;
+  return t[2] !== m ? (o = /* @__PURE__ */ i(a, { ...m }), t[2] = m, t[3] = o) : o = t[3], o;
+}, nt = (e) => {
   const t = c.c(11);
+  let n;
+  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (n = /* @__PURE__ */ i(_, {}), t[0] = n) : n = t[0];
   let m;
-  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ i(C, {}), t[0] = m) : m = t[0];
+  t[1] !== e ? (m = /* @__PURE__ */ i(y, { ...e, h: "100%", children: e.children }), t[1] = e, t[2] = m) : m = t[2];
   let o;
-  t[1] !== e ? (o = /* @__PURE__ */ i(P, { ...e, h: "100%", children: e.children }), t[1] = e, t[2] = o) : o = t[2];
-  let n;
-  t[3] !== e.contentProps || t[4] !== o ? (n = /* @__PURE__ */ s(u, { children: [
-    m,
-    /* @__PURE__ */ i(h, { className: "command__dialog", ...e.contentProps, children: o })
-  ] }), t[3] = e.contentProps, t[4] = o, t[5] = n) : n = t[5];
+  t[3] !== e.contentProps || t[4] !== m ? (o = /* @__PURE__ */ u(h, { children: [
+    n,
+    /* @__PURE__ */ i(g, { className: "command__dialog", ...e.contentProps, children: m })
+  ] }), t[3] = e.contentProps, t[4] = m, t[5] = o) : o = 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;
-}, nt = (e) => {
+  return t[6] !== e.dialogProps || t[7] !== e.onOpenChange || t[8] !== e.open || t[9] !== o ? (l = /* @__PURE__ */ i(C, { ...e.dialogProps, open: e.open, onOpenChange: e.onOpenChange, children: o }), t[6] = e.dialogProps, t[7] = e.onOpenChange, t[8] = e.open, t[9] = o, t[10] = l) : l = t[10], l;
+}, ot = (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;
+  t[0] !== e ? (n = r("command__list", e), t[0] = e, t[1] = n) : n = t[1];
+  const m = n;
+  let o;
+  return t[2] !== m ? (o = /* @__PURE__ */ i(a.List, { ...m }), t[2] = m, t[3] = o) : o = t[3], o;
 }, mt = (e) => {
-  const t = c.c(10);
+  const t = c.c(11);
+  let n;
+  t[0] !== e.value ? (n = e.value?.toString(), t[0] = e.value, t[1] = n) : n = t[1];
   let m;
-  t[0] !== e.value ? (m = e.value?.toString(), t[0] = e.value, t[1] = m) : m = t[1];
-  let o;
-  t[2] !== e ? (o = (d) => {
+  t[2] !== e ? (m = (s) => {
     if (e.onChange) {
       const f = {
         target: {
-          value: d
+          value: s
         }
       };
       e.onChange(f);
     }
-  }, t[2] = e, t[3] = o) : o = t[3];
-  let n;
-  t[4] !== e ? (n = /* @__PURE__ */ i($, { className: "command__input", ...e }), t[4] = e, t[5] = n) : n = t[5];
+  }, t[2] = e, t[3] = m) : m = t[3];
+  let o;
+  t[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (o = {
+    style: {
+      background: "transparent",
+      boxShadow: "none"
+    }
+  }, t[4] = o) : o = t[4];
   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;
-}, 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;
+  t[5] !== e ? (l = /* @__PURE__ */ i(P, { wrapperComponent: o, className: "command__input", ...e }), t[5] = e, t[6] = l) : l = t[6];
+  let d;
+  return t[7] !== n || t[8] !== m || t[9] !== l ? (d = /* @__PURE__ */ i(a.Input, { value: n, onValueChange: m, asChild: !0, children: l }), t[7] = n, t[8] = m, t[9] = l, t[10] = d) : d = t[10], d;
 }, 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;
+  t[0] !== e ? (n = r("command__empty", e), t[0] = e, t[1] = n) : n = t[1];
+  const m = n;
+  let o;
+  return t[2] !== m ? (o = /* @__PURE__ */ i(a.Empty, { ...m }), t[2] = m, t[3] = o) : o = t[3], o;
 }, 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;
+  t[0] !== e ? (n = r("command__group", e), t[0] = e, t[1] = n) : n = t[1];
+  const m = n;
+  let o;
+  return t[2] !== m ? (o = /* @__PURE__ */ i(a.Group, { ...m }), t[2] = m, t[3] = o) : o = t[3], o;
 }, 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;
+  t[0] !== e ? (n = r("command__item", e), t[0] = e, t[1] = n) : n = t[1];
+  const m = n;
+  let o;
+  return t[2] !== m ? (o = /* @__PURE__ */ i(a.Item, { ...m }), t[2] = m, t[3] = o) : o = t[3], o;
 }, at = (e) => {
+  const t = c.c(4);
+  let n;
+  t[0] !== e ? (n = r("command__separator", e), t[0] = e, t[1] = n) : n = t[1];
+  const m = n;
+  let o;
+  return t[2] !== m ? (o = /* @__PURE__ */ i(a.Separator, { ...m }), t[2] = m, t[3] = o) : o = t[3], o;
+}, rt = (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];
-  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;
+  t[0] !== e ? (n = r("command__shortcut", e), t[0] = e, t[1] = n) : n = t[1];
+  const m = n;
+  let o;
+  return t[2] !== e.children || t[3] !== m ? (o = /* @__PURE__ */ i($, { ...m, children: e.children }), t[2] = e.children, t[3] = m, t[4] = o) : o = t[4], o;
 };
 export {
-  P as Command,
-  et as CommandDialog,
-  ot as CommandEmpty,
-  it as CommandGroup,
+  y as Command,
+  nt as CommandDialog,
+  it as CommandEmpty,
+  lt as CommandGroup,
   mt as CommandInput,
-  lt as CommandItem,
-  nt as CommandList,
-  ct as CommandSeparator,
-  at as CommandShortcut
+  ct as CommandItem,
+  ot as CommandList,
+  at as CommandSeparator,
+  rt as CommandShortcut
 };

package/dist/components/form/InputWrapper.js

@@ -1,66 +1,66 @@
-import { jsxs as E, jsx as a, Fragment as L } from "react/jsx-runtime";
+import { jsxs as T, jsx as s, Fragment as L } from "react/jsx-runtime";
 import { c as N } from "../../_virtual/compiler-runtime.js";
 import "../../utils/contextStore.js";
-import g from "react";
+import p from "react";
 import { mergeComponentProps as P } from "../../utils/component.js";
 import "js-md5";
 import { InputMessage as k } from "./InputMessage.js";
 import { InputLabel as C } from "./InputLabel.js";
 import { InputDescription as D } from "./InputDescription.js";
 import '../../assets/components/form/InputWrapper.style.css';/* empty css                        */
-const S = g.forwardRef((F, W) => {
+const U = p.forwardRef((F, W) => {
   const e = N.c(22), {
-    children: v,
-    left: s,
-    right: p,
+    children: a,
+    left: d,
+    right: c,
     leftType: $,
     rightType: x,
-    title: d,
-    description: c,
-    formValidation: m,
-    ...f
-  } = F, b = $ === void 0 ? "icon" : $, _ = x === void 0 ? "action" : x;
-  let u;
-  e[0] !== m ? (u = m === void 0 ? {
+    title: m,
+    description: f,
+    formValidation: u,
+    ...h
+  } = F, b = $ === void 0 ? "icon" : $, I = x === void 0 ? "action" : x;
+  let g;
+  e[0] !== u ? (g = u === void 0 ? {
     valid: !0,
     notValidMessage: null,
     setValue: null
-  } : m, e[0] = m, e[1] = u) : u = e[1];
-  const t = u, R = g.useId(), I = f.id ?? R, M = `${I}-label`, T = d ? void 0 : f["aria-label"] ?? f.placeholder, j = {
-    id: I,
-    ...d ? {
-      "aria-labelledby": M
+  } : u, e[0] = u, e[1] = g) : g = e[1];
+  const t = g, R = p.useId(), _ = (p.isValidElement(a) ? a.props.id : void 0) ?? h.id ?? R, E = `${_}-label`, M = m ? void 0 : h["aria-label"] ?? h.placeholder, j = {
+    id: _,
+    ...m ? {
+      "aria-labelledby": E
     } : {},
-    ...T ? {
-      "aria-label": T
+    ...M ? {
+      "aria-label": M
     } : {}
-  }, V = d && /* @__PURE__ */ a(C, { htmlFor: I, id: M, children: d });
+  }, V = m && /* @__PURE__ */ s(C, { htmlFor: _, id: E, children: m });
   let i;
-  e[2] !== c ? (i = c && /* @__PURE__ */ a(D, { children: c }), e[2] = c, e[3] = i) : i = e[3];
-  const w = P(`input-wrapper ${t?.valid ? "" : "input-wrapper--not-valid"}`, f);
+  e[2] !== f ? (i = f && /* @__PURE__ */ s(D, { children: f }), e[2] = f, e[3] = i) : i = e[3];
+  const w = P(`input-wrapper ${t?.valid ? "" : "input-wrapper--not-valid"}`, h);
   let l;
-  e[4] !== s || e[5] !== b ? (l = s && /* @__PURE__ */ a("div", { className: `input-wrapper__left input__left--${b}`, children: s }), e[4] = s, e[5] = b, e[6] = l) : l = e[6];
-  const y = g.isValidElement(v) ? g.cloneElement(v, {
+  e[4] !== d || e[5] !== b ? (l = d && /* @__PURE__ */ s("div", { className: `input-wrapper__left input__left--${b}`, children: d }), e[4] = d, e[5] = b, e[6] = l) : l = e[6];
+  const y = p.isValidElement(a) ? p.cloneElement(a, {
     ...j
-  }) : v;
+  }) : a;
   let r;
-  e[7] !== p || e[8] !== _ ? (r = p && /* @__PURE__ */ a("div", { className: `input-wrapper__right input-wrapper__right--${_}`, children: p }), e[7] = p, e[8] = _, e[9] = r) : r = e[9];
+  e[7] !== c || e[8] !== I ? (r = c && /* @__PURE__ */ s("div", { className: `input-wrapper__right input-wrapper__right--${I}`, children: c }), e[7] = c, e[8] = I, e[9] = r) : r = e[9];
   let o;
-  e[10] !== w || e[11] !== l || e[12] !== y || e[13] !== r ? (o = /* @__PURE__ */ E("div", { ...w, children: [
+  e[10] !== w || e[11] !== l || e[12] !== y || e[13] !== r ? (o = /* @__PURE__ */ T("div", { ...w, children: [
     l,
     y,
     r
   ] }), e[10] = w, e[11] = l, e[12] = y, e[13] = r, e[14] = o) : o = e[14];
   let n;
-  e[15] !== t ? (n = !t?.valid && t?.notValidMessage && /* @__PURE__ */ a(k, { children: t.notValidMessage }), e[15] = t, e[16] = n) : n = e[16];
-  let h;
-  return e[17] !== o || e[18] !== n || e[19] !== V || e[20] !== i ? (h = /* @__PURE__ */ E(L, { children: [
+  e[15] !== t ? (n = !t?.valid && t?.notValidMessage && /* @__PURE__ */ s(k, { children: t.notValidMessage }), e[15] = t, e[16] = n) : n = e[16];
+  let v;
+  return e[17] !== o || e[18] !== n || e[19] !== V || e[20] !== i ? (v = /* @__PURE__ */ T(L, { children: [
     V,
     i,
     o,
     n
-  ] }), e[17] = o, e[18] = n, e[19] = V, e[20] = i, e[21] = h) : h = e[21], h;
+  ] }), e[17] = o, e[18] = n, e[19] = V, e[20] = i, e[21] = v) : v = e[21], v;
 });
 export {
-  S as InputWrapper
+  U as InputWrapper
 };

package/dist/components/form/PasswordInput.js

@@ -5,7 +5,7 @@ import { IconEye as R, IconX as z } from "@tabler/icons-react";
 import { Button as p } from "../button/Button.js";
 import { clearInputElement as P } from "./Input.utils.js";
 import { Flex as A } from "../flex/Flex.js";
-import { Progress as B } from "../progress/Progress.js";
+import { ProgressLinear as B } from "../progress/ProgressLinear.js";
 import { InputMessage as D } from "./InputMessage.js";
 import { ButtonGroup as C } from "../button-group/ButtonGroup.js";
 const X = u.forwardRef((r, t) => {

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

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { InputProps } from './Input';
-export interface TextInputProps extends Omit<InputProps<string | null>, "wrapperComponent" | "type"> {
+export interface TextInputProps extends Omit<InputProps<string | null>, "type"> {
     clearable?: boolean;
     onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }

package/dist/components/progress/ProgressCircle.d.ts

@@ -0,0 +1,8 @@
+import { ProgressRootProps } from '@ark-ui/react';
+import { default as React, CSSProperties } from 'react';
+import { ProgressProps } from './ProgressLinear';
+export type ProgressCircleProps = ProgressProps & Omit<ProgressRootProps, 'value' | 'max' | 'color'> & {
+    size?: CSSProperties['width'];
+    thickness?: CSSProperties['strokeWidth'];
+};
+export declare const ProgressCircle: React.FC<ProgressCircleProps>;

package/dist/components/progress/ProgressCircle.js

@@ -0,0 +1,49 @@
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
+import "../../utils/contextStore.js";
+import "react";
+import { mergeComponentProps as m } from "../../utils/component.js";
+import "js-md5";
+import { ProgressRoot as f, ProgressCircle as _, ProgressCircleTrack as P, ProgressCircleRange as c } from "@ark-ui/react";
+import '../../assets/components/progress/Progress.style.css';/* empty css                    */
+const u = (l) => {
+  const {
+    color: n = "white",
+    predictionValue: a = 0,
+    dot: p,
+    value: h,
+    max: g = 100,
+    size: d = 64,
+    thickness: i,
+    ...t
+  } = l, o = (e) => typeof e == "number" ? `${e}px` : e;
+  return /* @__PURE__ */ s(f, { value: h, max: g, ...m("progress-circle", {
+    ...t,
+    style: {
+      ...t.style,
+      "--size": o(d),
+      "--thickness": i !== void 0 ? o(i) : "calc(var(--size) / 8)",
+      "--color": n
+    }
+  }), children: [
+    /* @__PURE__ */ s(_, { className: "progress-circle__circle", children: [
+      /* @__PURE__ */ r(P, { className: "progress-circle__track" }),
+      /* @__PURE__ */ r("svg", { style: {
+        position: "absolute",
+        width: 0,
+        height: 0,
+        overflow: "hidden"
+      }, children: /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ s("pattern", { id: "circle-stripe-overlay", width: "5", height: "5", patternUnits: "userSpaceOnUse", patternTransform: "rotate(-45)", children: [
+        /* @__PURE__ */ r("rect", { width: "5", height: "5", fill: "var(--color)" }),
+        /* @__PURE__ */ r("rect", { width: "2.5", height: "5", fill: "rgba(0, 0, 0, 0.25)" })
+      ] }) }) }),
+      /* @__PURE__ */ r(c, { style: {
+        "--percent": a
+      }, className: "progress-circle__prediction" }),
+      /* @__PURE__ */ r(c, { className: "progress-circle__range" })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "progress-circle__dot", children: p })
+  ] });
+};
+export {
+  u as ProgressCircle
+};

package/dist/components/progress/ProgressLinear.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from '../../utils';
+import { default as React, CSSProperties } from 'react';
+import * as Radix from "@radix-ui/react-progress";
+export type ProgressProps = ComponentProps & {
+    value?: number | null;
+    max?: number;
+    color?: CSSProperties['background'];
+    dot?: React.ReactNode;
+    predictionValue?: number | null;
+};
+export type ProgressLinearProps = ProgressProps & Omit<Radix.ProgressProps, 'value' | 'max' | 'color'>;
+export declare const ProgressLinear: React.FC<ProgressLinearProps>;

package/dist/components/progress/{Progress.js → ProgressLinear.js}

@@ -1,7 +1,7 @@
 import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import "../../utils/contextStore.js";
 import "react";
-import { mergeComponentProps as l } from "../../utils/component.js";
+import { mergeComponentProps as d } from "../../utils/component.js";
 import "js-md5";
 import * as o from "@radix-ui/react-progress";
 import '../../assets/components/progress/Progress.style.css';/* empty css                    */
@@ -9,19 +9,19 @@ const _ = (r) => {
   const {
     color: a = "white",
     predictionValue: g,
-    dot: c,
-    ...t
-  } = r, s = Math.min(r.value ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, m = `translateX(-${100 - s}%)`, i = Math.min(r.predictionValue ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, d = `translateX(-${100 - i}%)`;
-  return /* @__PURE__ */ n(o.Progress, { ...l("progress", {
-    ...t,
+    dot: l,
+    ...i
+  } = r, t = Math.min(r.value ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, c = `translateX(-${100 - t}%)`, s = Math.min(r.predictionValue ?? 0, r.max ?? 100) / (r.max ?? 100) * 100, m = `translateX(-${100 - s}%)`;
+  return /* @__PURE__ */ n(o.Progress, { ...d("progress-linear", {
+    ...i,
     style: {
-      ...t.style,
-      "--progress": s,
-      "--progressPrediction": i,
+      ...i.style,
+      "--progress": t,
+      "--progressPrediction": s,
       "--color": a
     }
   }), children: [
-    /* @__PURE__ */ e("div", { className: "progress__dot", children: c }),
+    /* @__PURE__ */ e("div", { className: "progress-linear__dot", children: l }),
     /* @__PURE__ */ n("div", { style: {
       width: "100%",
       height: "100%",
@@ -29,15 +29,15 @@ const _ = (r) => {
       borderRadius: "inherit",
       position: "relative"
     }, children: [
-      /* @__PURE__ */ e(o.ProgressIndicator, { className: "progress__indicator", style: {
-        transform: m
+      /* @__PURE__ */ e(o.ProgressIndicator, { className: "progress-linear__indicator", style: {
+        transform: c
       } }),
-      typeof r.predictionValue == "number" && /* @__PURE__ */ e(o.ProgressIndicator, { className: "progress__indicator progress__indicator--prediction", style: {
-        transform: d
+      typeof r.predictionValue == "number" && /* @__PURE__ */ e(o.ProgressIndicator, { className: "progress-linear__indicator progress-linear__indicator--prediction", style: {
+        transform: m
       } })
     ] })
   ] });
 };
 export {
-  _ as Progress
+  _ as ProgressLinear
 };

package/dist/index.d.ts

@@ -24,7 +24,8 @@ export * from './components/gantt/Gantt';
 export * from './components/icon/Icon';
 export * from './components/layout/Layout';
 export * from './components/menu/Menu';
-export * from './components/progress/Progress';
+export * from './components/progress/ProgressLinear';
+export * from './components/progress/ProgressCircle';
 export * from './components/quote/Quote';
 export * from './components/resizable/Resizable';
 export * from './components/row/Row';

package/dist/index.js

@@ -50,26 +50,27 @@ import { Gantt as so, getRelativeValue as Do } from "./components/gantt/Gantt.js
 import { Icon as Fo, resolveIcon as Po } from "./components/icon/Icon.js";
 import { Layout as wo } from "./components/layout/Layout.js";
 import { Menu as vo, MenuArrow as Vo, MenuCheckboxItem as Lo, MenuContent as Eo, MenuGroup as Ro, MenuItem as Go, MenuItemIndicator as yo, MenuLabel as zo, MenuPortal as Bo, MenuSeparator as Ho, MenuSub as ko, MenuSubContent as No, MenuSubTrigger as Qo, MenuTrigger as Jo } from "./components/menu/Menu.js";
-import { Progress as jo } from "./components/progress/Progress.js";
-import { Quote as Ko } from "./components/quote/Quote.js";
-import { ResizableHandle as Wo, ResizablePanel as Xo, ResizablePanelGroup as Yo } from "./components/resizable/Resizable.js";
-import { Row as _o } from "./components/row/Row.js";
-import { AutoScrollArea as er, ScrollArea as tr, ScrollAreaCorner as or, ScrollAreaScrollbar as rr, ScrollAreaThumb as nr, ScrollAreaViewport as ar } from "./components/scroll-area/ScrollArea.js";
-import { SegmentedControl as ur, SegmentedControlItem as ir } from "./components/segmented-control/SegmentedControl.js";
-import { Spacing as mr } from "./components/spacing/Spacing.js";
-import { Tab as gr, TabContent as Ir, TabList as fr, TabTrigger as Cr } from "./components/tab/Tab.js";
-import { Text as dr } from "./components/text/Text.js";
-import { Toast as br, toast as cr } from "./components/toast/Toast.js";
-import { Tooltip as Dr, TooltipArrow as Mr, TooltipContent as Fr, TooltipPortal as Pr, TooltipTrigger as Ar } from "./components/tooltip/Tooltip.js";
-import { ContextStore as hr, ContextStoreProvider as vr, useService as Vr, useStore as Lr } from "./utils/contextStore.js";
-import { ReactiveArrayService as Rr, useReactiveArrayService as Gr } from "./utils/reactiveArrayService.js";
-import { mergeComponentProps as zr } from "./utils/component.js";
-import { Colors as Hr, hashToColor as kr, withAlpha as Nr } from "./utils/color.js";
-import { getSize as Jr } from "./utils/size.js";
+import { ProgressLinear as jo } from "./components/progress/ProgressLinear.js";
+import { ProgressCircle as Ko } from "./components/progress/ProgressCircle.js";
+import { Quote as Wo } from "./components/quote/Quote.js";
+import { ResizableHandle as Yo, ResizablePanel as Zo, ResizablePanelGroup as _o } from "./components/resizable/Resizable.js";
+import { Row as er } from "./components/row/Row.js";
+import { AutoScrollArea as or, ScrollArea as rr, ScrollAreaCorner as nr, ScrollAreaScrollbar as ar, ScrollAreaThumb as pr, ScrollAreaViewport as ur } from "./components/scroll-area/ScrollArea.js";
+import { SegmentedControl as lr, SegmentedControlItem as mr } from "./components/segmented-control/SegmentedControl.js";
+import { Spacing as gr } from "./components/spacing/Spacing.js";
+import { Tab as fr, TabContent as Cr, TabList as Tr, TabTrigger as dr } from "./components/tab/Tab.js";
+import { Text as br } from "./components/text/Text.js";
+import { Toast as sr, toast as Dr } from "./components/toast/Toast.js";
+import { Tooltip as Fr, TooltipArrow as Pr, TooltipContent as Ar, TooltipPortal as wr, TooltipTrigger as hr } from "./components/tooltip/Tooltip.js";
+import { ContextStore as Vr, ContextStoreProvider as Lr, useService as Er, useStore as Rr } from "./utils/contextStore.js";
+import { ReactiveArrayService as yr, useReactiveArrayService as zr } from "./utils/reactiveArrayService.js";
+import { mergeComponentProps as Hr } from "./utils/component.js";
+import { Colors as Nr, hashToColor as Qr, withAlpha as Jr } from "./utils/color.js";
+import { getSize as jr } from "./utils/size.js";
 export {
   o as Alert,
   n as AuroraBackground,
-  er as AutoScrollArea,
+  or as AutoScrollArea,
   p as Avatar,
   i as Badge,
   m as Breadcrumb,
@@ -87,7 +88,7 @@ export {
   je as ColorInputSwatch,
   qe as ColorInputTrigger,
   Ke as ColorInputValueText,
-  Hr as Colors,
+  Nr as Colors,
   A as Command,
   w as CommandDialog,
   h as CommandEmpty,
@@ -110,8 +111,8 @@ export {
   U as ContextMenuSubContent,
   W as ContextMenuSubTrigger,
   X as ContextMenuTrigger,
-  hr as ContextStore,
-  vr as ContextStoreProvider,
+  Vr as ContextStore,
+  Lr as ContextStoreProvider,
   Z as DataTable,
   $ as DataTableColumn,
   ge as DataTableFilterInput,
@@ -196,22 +197,23 @@ export {
   Ht as PinInput,
   kt as PinInputField,
   Nt as PinInputHiddenField,
-  jo as Progress,
-  Ko as Quote,
+  Ko as ProgressCircle,
+  jo as ProgressLinear,
+  Wo as Quote,
   Jt as RadioGroup,
   jt as RadioInput,
-  Rr as ReactiveArrayService,
-  Wo as ResizableHandle,
-  Xo as ResizablePanel,
-  Yo as ResizablePanelGroup,
-  _o as Row,
-  tr as ScrollArea,
-  or as ScrollAreaCorner,
-  rr as ScrollAreaScrollbar,
-  nr as ScrollAreaThumb,
-  ar as ScrollAreaViewport,
-  ur as SegmentedControl,
-  ir as SegmentedControlItem,
+  yr as ReactiveArrayService,
+  Yo as ResizableHandle,
+  Zo as ResizablePanel,
+  _o as ResizablePanelGroup,
+  er as Row,
+  rr as ScrollArea,
+  nr as ScrollAreaCorner,
+  ar as ScrollAreaScrollbar,
+  pr as ScrollAreaThumb,
+  ur as ScrollAreaViewport,
+  lr as SegmentedControl,
+  mr as SegmentedControlItem,
   Kt as SelectContent,
   Ut as SelectInput,
   Wt as SelectItem,
@@ -220,40 +222,40 @@ export {
   Zt as SelectTrigger,
   _t as SelectValue,
   $t as SelectViewport,
-  mr as Spacing,
+  gr as Spacing,
   to as SwitchInput,
-  gr as Tab,
-  Ir as TabContent,
-  fr as TabList,
-  Cr as TabTrigger,
+  fr as Tab,
+  Cr as TabContent,
+  Tr as TabList,
+  dr as TabTrigger,
   ro as TagInput,
   no as TagInputMenu,
   ao as TagInputMenuItem,
   po as TagInputSubMenu,
   uo as TagInputTrigger,
   io as TagInputValue,
-  dr as Text,
+  br as Text,
   mo as TextAreaInput,
   go as TextInput,
-  br as Toast,
-  Dr as Tooltip,
-  Mr as TooltipArrow,
-  Fr as TooltipContent,
-  Pr as TooltipPortal,
-  Ar as TooltipTrigger,
+  sr as Toast,
+  Fr as Tooltip,
+  Pr as TooltipArrow,
+  Ar as TooltipContent,
+  wr as TooltipPortal,
+  hr as TooltipTrigger,
   Ie as createFilterQueryLanguage,
   mt as emailValidation,
   Do as getRelativeValue,
-  Jr as getSize,
-  kr as hashToColor,
-  zr as mergeComponentProps,
+  jr as getSize,
+  Qr as hashToColor,
+  Hr as mergeComponentProps,
   zt as passwordValidation,
   Po as resolveIcon,
-  cr as toast,
+  Dr as toast,
   me as useDataTablePagination,
   fo as useForm,
-  Gr as useReactiveArrayService,
-  Vr as useService,
-  Lr as useStore,
-  Nr as withAlpha
+  zr as useReactiveArrayService,
+  Er as useService,
+  Rr as useStore,
+  Jr as withAlpha
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code0-tech/pictor",
-  "version": "0.17.2",
+  "version": "0.18.1",
   "type": "module",
   "description": "A simple template for a custom React component library",
   "scripts": {

package/dist/components/progress/Progress.d.ts

@@ -1,9 +0,0 @@
-import { ComponentProps } from '../../utils';
-import { default as React, CSSProperties } from 'react';
-import * as Radix from "@radix-ui/react-progress";
-export type ProgressProps = ComponentProps & Radix.ProgressProps & {
-    color?: CSSProperties['background'];
-    dot?: React.ReactNode;
-    predictionValue?: number | null;
-};
-export declare const Progress: React.FC<ProgressProps>;