@code0-tech/pictor 0.0.0-mvp.2

package/dist/components/file-tabs/FileTabs.view.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface FileTabsView {
+    id?: string;
+    closeable: boolean;
+    children: React.ReactNode;
+    content: React.ReactNode;
+    active: boolean;
+    lastActive?: Date;
+}

package/dist/components/file-tabs/FileTabs.view.js

@@ -0,0 +1 @@
+

package/dist/components/flex/Flex.d.ts

@@ -0,0 +1,7 @@
+import { Code0Component } from '../../utils/types';
+import { default as React } from 'react';
+interface FlexType extends Code0Component<HTMLDivElement> {
+    children: React.ReactNode | React.ReactNode[];
+}
+export declare const Flex: React.FC<FlexType>;
+export {};

package/dist/components/flex/Flex.js

@@ -0,0 +1,21 @@
+import { jsx as c } from "react/jsx-runtime";
+import { c as s } from "../../compiler-runtime-BNHg76kC.js";
+import { mergeCode0Props as n } from "../../utils/utils.js";
+import '../../assets/Flex.css';/* empty css                        */
+const h = (i) => {
+  const e = s.c(6);
+  let t, r;
+  if (e[0] !== i) {
+    const {
+      children: l,
+      ...m
+    } = i;
+    t = l, r = n("flex", m), e[0] = i, e[1] = t, e[2] = r;
+  } else
+    t = e[1], r = e[2];
+  let o;
+  return e[3] !== t || e[4] !== r ? (o = /* @__PURE__ */ c("div", { ...r, children: t }), e[3] = t, e[4] = r, e[5] = o) : o = e[5], o;
+};
+export {
+  h as Flex
+};

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { CheckboxProps, CheckedState } from '@radix-ui/react-checkbox';
+import { InputProps } from './Input';
+export type CheckboxInputProps = Omit<InputProps<CheckedState>, "wrapperComponent" | "type" | "left" | "right" | "leftType" | "rightType"> & Omit<CheckboxProps, 'defaultChecked' | 'value' | 'defaultValue'>;
+export declare const CheckboxInput: React.FC<CheckboxInputProps>;

package/dist/components/form/CheckboxInput.js

@@ -0,0 +1,67 @@
+import { jsx as r, jsxs as v, Fragment as N } from "react/jsx-runtime";
+import { c as R } from "../../compiler-runtime-BNHg76kC.js";
+import $ from "react";
+import { Checkbox as D, CheckboxIndicator as E } from "@radix-ui/react-checkbox";
+import { InputLabel as F } from "./InputLabel.js";
+import { InputDescription as L } from "./InputDescription.js";
+import { mergeCode0Props as j } from "../../utils/utils.js";
+import { InputMessage as P } from "./InputMessage.js";
+import '../../assets/Input.css';/* empty css                         */
+import { IconMinus as S, IconCheck as T } from "@tabler/icons-react";
+const U = (l) => {
+  const e = R.c(40), [i, z] = $.useState(l.initialValue ?? "indeterminate");
+  let a, t, s, d, n, o, c;
+  if (e[0] !== i || e[1] !== l) {
+    const {
+      title: g,
+      description: x,
+      formValidation: M,
+      ...V
+    } = l;
+    t = M === void 0 ? {
+      valid: !0,
+      notValidMessage: null,
+      setValue: q
+    } : M, e[9] !== g ? (o = g ? /* @__PURE__ */ r(F, { children: g }) : null, e[9] = g, e[10] = o) : o = e[10], e[11] !== x ? (c = x ? /* @__PURE__ */ r(L, { children: x }) : null, e[11] = x, e[12] = c) : c = e[12];
+    const I = `input ${t?.valid ? "" : "input--not-valid"} checkbox-input`;
+    e[13] !== I ? (n = j(I, {}), e[13] = I, e[14] = n) : n = e[14], a = D, s = i, d = j("checkbox-input__button", {
+      ...V,
+      onCheckedChange: (_) => {
+        V.onCheckedChange && V.onCheckedChange(_), z(_), t.setValue(_);
+      }
+    }), e[0] = i, e[1] = l, e[2] = a, e[3] = t, e[4] = s, e[5] = d, e[6] = n, e[7] = o, e[8] = c;
+  } else
+    a = e[2], t = e[3], s = e[4], d = e[5], n = e[6], o = e[7], c = e[8];
+  let m;
+  e[15] !== i ? (m = i === "indeterminate" && /* @__PURE__ */ r(S, { size: 10 }), e[15] = i, e[16] = m) : m = e[16];
+  let f;
+  e[17] !== i ? (f = i === !0 && /* @__PURE__ */ r(T, { size: 10 }), e[17] = i, e[18] = f) : f = e[18];
+  let h;
+  e[19] !== m || e[20] !== f ? (h = /* @__PURE__ */ v(E, { className: "checkbox-input__indicator", children: [
+    m,
+    f
+  ] }), e[19] = m, e[20] = f, e[21] = h) : h = e[21];
+  let u;
+  e[22] !== a || e[23] !== s || e[24] !== d || e[25] !== h ? (u = /* @__PURE__ */ r(a, { defaultChecked: s, ...d, children: h }), e[22] = a, e[23] = s, e[24] = d, e[25] = h, e[26] = u) : u = e[26];
+  let p;
+  e[27] !== l.label ? (p = /* @__PURE__ */ r("div", { className: "input__right input__right--action}", children: l.label }), e[27] = l.label, e[28] = p) : p = e[28];
+  let k;
+  e[29] !== n || e[30] !== u || e[31] !== p ? (k = /* @__PURE__ */ v("div", { ...n, children: [
+    u,
+    p
+  ] }), e[29] = n, e[30] = u, e[31] = p, e[32] = k) : k = e[32];
+  let C;
+  e[33] !== t ? (C = !t?.valid && t?.notValidMessage ? /* @__PURE__ */ r(P, { children: t.notValidMessage }) : null, e[33] = t, e[34] = C) : C = e[34];
+  let b;
+  return e[35] !== k || e[36] !== C || e[37] !== o || e[38] !== c ? (b = /* @__PURE__ */ v(N, { children: [
+    o,
+    c,
+    k,
+    C
+  ] }), e[35] = k, e[36] = C, e[37] = o, e[38] = c, e[39] = b) : b = e[39], b;
+};
+function q(l) {
+}
+export {
+  U as CheckboxInput
+};

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { InputProps } from './Input';
+interface EmailInputProps extends Omit<InputProps<string | null>, "wrapperComponent" | "type"> {
+    clearable?: boolean;
+}
+export declare const emailValidation: (email: string) => boolean;
+export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps>;
+export {};

package/dist/components/form/EmailInput.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import o from "react";
+import { Input as l, setElementKey as m } from "./Input.js";
+import { IconX as s } from "@tabler/icons-react";
+import { Button as f } from "../button/Button.js";
+const z = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/, d = (t) => z.test(t), g = o.forwardRef((t, x) => {
+  x = x || o.useRef(null);
+  const {
+    clearable: r = !1,
+    right: n,
+    ...c
+  } = t, i = () => {
+    x.current && m(x.current, "value", "", "change");
+  }, a = [n];
+  return r && a.push(/* @__PURE__ */ e(f, { onClick: i, children: /* @__PURE__ */ e(s, { size: 13 }) })), /* @__PURE__ */ e(l, { right: a, type: "email", ref: x, ...c });
+});
+export {
+  g as EmailInput,
+  d as emailValidation
+};

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

@@ -0,0 +1,22 @@
+import { default as React, ForwardRefExoticComponent } from 'react';
+import { Code0Component } from '../../utils/types';
+import { ValidationProps } from './useForm';
+import { InputSuggestion } from './InputSuggestion';
+export declare const setElementKey: (element: HTMLElement, key: string, value: any, event: string) => void;
+export type Code0Input = Omit<Omit<Omit<Code0Component<HTMLInputElement>, "left">, "right">, "title">;
+export interface InputProps<T> extends Code0Input, ValidationProps<T> {
+    suggestions?: InputSuggestion[];
+    suggestionsHeader?: React.ReactNode;
+    suggestionsFooter?: React.ReactNode;
+    onSuggestionSelect?: (suggestion: InputSuggestion) => void;
+    transformValue?: (value: T) => React.ReactNode | T;
+    disableOnValue?: (value: T) => boolean;
+    wrapperComponent?: Code0Component<HTMLDivElement>;
+    right?: React.ReactNode;
+    left?: React.ReactNode;
+    leftType?: "action" | "placeholder" | "icon";
+    rightType?: "action" | "placeholder" | "icon";
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+}
+export declare const Input: ForwardRefExoticComponent<InputProps<any>>;

package/dist/components/form/Input.js

@@ -0,0 +1,153 @@
+import { jsxs as f, jsx as r, Fragment as T } from "react/jsx-runtime";
+import h, { useRef as v, useState as x, useEffect as V, useMemo as k } from "react";
+import { mergeCode0Props as y } from "../../utils/utils.js";
+import '../../assets/Input.css';/* empty css                         */
+import { InputLabel as A } from "./InputLabel.js";
+import { InputDescription as K } from "./InputDescription.js";
+import { InputMessage as H } from "./InputMessage.js";
+import { Menu as J, MenuTrigger as U, MenuPortal as q } from "../menu/Menu.js";
+import { InputSuggestionMenuContent as z, InputSuggestionMenuContentItems as B } from "./InputSuggestion.js";
+const G = (t, s, n, a) => {
+  const o = Object.getOwnPropertyDescriptor(t, s)?.set, l = Object.getPrototypeOf(t), i = Object.getOwnPropertyDescriptor(l, s)?.set;
+  o && o !== i ? i?.call(t, n) : o?.call(t, n), t.dispatchEvent(new Event(a, {
+    bubbles: !0
+  }));
+}, oe = h.forwardRef((t, s) => {
+  const n = s || v(null), a = v(null), [o, l] = x(!1), i = v(!0), [c, _] = x(t.defaultValue || t.initialValue || t.placeholder), {
+    wrapperComponent: P = {},
+    // Default empty wrapper props
+    title: b,
+    // Optional input label
+    description: M,
+    // Optional description below label
+    disabled: w = !1,
+    // Input disabled state
+    left: E,
+    // Left element (icon/button)
+    right: I,
+    // Right element (icon/button)
+    leftType: j = "icon",
+    // Visual hint for left
+    rightType: R = "action",
+    // Visual hint for right
+    formValidation: u = {
+      valid: !0,
+      notValidMessage: null,
+      setValue: null
+    },
+    // Validation config
+    suggestions: d,
+    // Optional suggestions array
+    suggestionsHeader: S,
+    // Optional header above suggestion list
+    suggestionsFooter: O,
+    // Optional footer below suggestion list
+    onSuggestionSelect: C = () => {
+    },
+    // Callback for suggestion selection,
+    disableOnValue: D = () => !1,
+    ...m
+    // Remaining native input props
+  } = t;
+  V(() => {
+    const e = n.current;
+    if (!e || !u?.setValue) return;
+    const g = (L) => {
+      const N = m.type !== "checkbox" ? L.target.value : L.target.checked;
+      u.setValue?.(N);
+    };
+    return e.addEventListener("change", g), () => e.removeEventListener("change", g);
+  }, [u?.setValue]), V(() => {
+    if (!d) return;
+    const e = (g) => {
+      i.current = !!n.current?.contains(g.target);
+    };
+    return document.addEventListener("pointerdown", e, !0), () => document.removeEventListener("pointerdown", e, !0);
+  }, [d]);
+  const p = h.useMemo(() => D(c), [c, D]);
+  V(() => {
+    n.current && (n.current.addEventListener("change", (e) => {
+      p || _(e.target.value);
+    }), n.current.addEventListener("input", (e) => {
+      p || _(e.target.value);
+    }));
+  }, [n, p]);
+  const $ = h.useMemo(() => t.transformValue ? /* @__PURE__ */ f("div", { className: "input__syntax", children: [
+    t.transformValue(c),
+    " "
+  ] }) : null, [t.transformValue, c]), F = k(() => /* @__PURE__ */ f(
+    J,
+    {
+      open: o,
+      modal: !1,
+      onOpenChange: (e) => {
+        if (!e && i.current) {
+          i.current = !1;
+          return;
+        }
+        l(e), e && setTimeout(() => n.current?.focus(), 0);
+      },
+      children: [
+        /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ r(
+          "input",
+          {
+            ref: n,
+            ...y(`input__control ${t.transformValue ? "input__control--syntax" : ""}`, m),
+            onFocus: () => !o && l(!0),
+            onKeyDown: (e) => {
+              e.key === "ArrowDown" ? (e.preventDefault(), a.current?.focusFirstItem()) : e.key === "ArrowUp" && (e.preventDefault(), a.current?.focusLastItem());
+            },
+            disabled: w || p
+          }
+        ) }),
+        /* @__PURE__ */ r(q, { children: /* @__PURE__ */ f(z, { children: [
+          S,
+          " ",
+          /* @__PURE__ */ r(
+            B,
+            {
+              ref: a,
+              suggestions: d,
+              onSuggestionSelect: (e) => {
+                C || G(s.current, "value", typeof c == "object" ? JSON.stringify(e.value) : e.value, "change"), C(e), l(!1);
+              }
+            }
+          ),
+          O,
+          " "
+        ] }) })
+      ]
+    }
+  ), [o, d, S, O]);
+  return /* @__PURE__ */ f(T, { children: [
+    b && /* @__PURE__ */ r(A, { children: b }),
+    " ",
+    M && /* @__PURE__ */ r(K, { children: M }),
+    " ",
+    /* @__PURE__ */ f("div", { ...y(
+      `input ${u?.valid ? "" : "input--not-valid"}`,
+      // Add error class if invalid
+      P
+    ), children: [
+      E && /* @__PURE__ */ r("div", { className: `input__left input__left--${j}`, children: E }),
+      " ",
+      d ? F : /* @__PURE__ */ r(
+        "input",
+        {
+          tabIndex: 2,
+          ref: n,
+          disabled: w,
+          ...y(`input__control ${t.transformValue ? "input__control--syntax" : ""}`, m)
+        }
+      ),
+      $,
+      I && /* @__PURE__ */ r("div", { className: `input__right input__right--${R}`, children: I }),
+      " "
+    ] }),
+    !u?.valid && u?.notValidMessage && /* @__PURE__ */ r(H, { children: u.notValidMessage })
+  ] });
+});
+export {
+  oe as Input,
+  G as setElementKey
+};

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface InputDescriptionProps {
+    children: React.ReactNode | React.ReactElement;
+}
+export declare const InputDescription: React.FC<InputDescriptionProps>;

package/dist/components/form/InputDescription.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import { c as i } from "../../compiler-runtime-BNHg76kC.js";
+const p = (s) => {
+  const t = i.c(2), {
+    children: r
+  } = s;
+  let o;
+  return t[0] !== r ? (o = /* @__PURE__ */ e("span", { className: "input__description", children: r }), t[0] = r, t[1] = o) : o = t[1], o;
+};
+export {
+  p as InputDescription
+};

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface InputLabelProps {
+    children: React.ReactNode | React.ReactElement;
+}
+export declare const InputLabel: React.FC<InputLabelProps>;

package/dist/components/form/InputLabel.js

@@ -0,0 +1,12 @@
+import { jsx as r } from "react/jsx-runtime";
+import { c as s } from "../../compiler-runtime-BNHg76kC.js";
+const i = (o) => {
+  const t = s.c(2), {
+    children: l
+  } = o;
+  let e;
+  return t[0] !== l ? (e = /* @__PURE__ */ r("label", { className: "input__label", children: l }), t[0] = l, t[1] = e) : e = t[1], e;
+};
+export {
+  i as InputLabel
+};

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export interface InputMessageProps {
+    children: string;
+}
+export declare const InputMessage: React.FC<InputMessageProps>;

package/dist/components/form/InputMessage.js

@@ -0,0 +1,18 @@
+import { jsx as c, jsxs as i } from "react/jsx-runtime";
+import { c as m } from "../../compiler-runtime-BNHg76kC.js";
+import { IconExclamationCircle as n } from "@tabler/icons-react";
+const f = (r) => {
+  const e = m.c(3), {
+    children: o
+  } = r;
+  let s;
+  e[0] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ c(n, { size: 16 }), e[0] = s) : s = e[0];
+  let t;
+  return e[1] !== o ? (t = /* @__PURE__ */ i("span", { className: "input__message", children: [
+    s,
+    o
+  ] }), e[1] = o, e[2] = t) : t = e[2], t;
+};
+export {
+  f as InputMessage
+};

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

@@ -0,0 +1,19 @@
+import { MenuContentProps } from '../menu/Menu';
+import { default as React } from 'react';
+export interface InputSuggestion {
+    children: React.ReactNode;
+    value: any;
+    ref?: any;
+    groupLabel?: string;
+}
+export type InputSuggestionMenuContentProps = MenuContentProps;
+export interface InputSuggestionMenuContentItemsProps {
+    suggestions?: InputSuggestion[];
+    onSuggestionSelect?: (suggestion: InputSuggestion) => void;
+}
+export interface InputSuggestionMenuContentItemsHandle {
+    focusFirstItem: () => void;
+    focusLastItem: () => void;
+}
+export declare const InputSuggestionMenuContent: React.FC<InputSuggestionMenuContentProps>;
+export declare const InputSuggestionMenuContentItems: React.FC<InputSuggestionMenuContentItemsProps>;

package/dist/components/form/InputSuggestion.js

@@ -0,0 +1,102 @@
+import { jsx as p, jsxs as d } from "react/jsx-runtime";
+import { c as I } from "../../compiler-runtime-BNHg76kC.js";
+import { MenuContent as x, MenuLabel as M, MenuItem as w } from "../menu/Menu.js";
+import l from "react";
+import { ScrollArea as R, ScrollAreaViewport as G, ScrollAreaScrollbar as A, ScrollAreaThumb as D } from "../scroll-area/ScrollArea.js";
+import { IconChevronDown as E, IconChevronUp as y } from "@tabler/icons-react";
+const k = l.forwardRef((o, h) => {
+  const e = I.c(6);
+  let a, u;
+  e[0] !== o ? ({
+    children: a,
+    ...u
+  } = o, e[0] = o, e[1] = a, e[2] = u) : (a = e[1], u = e[2]);
+  const i = l.useRef(null);
+  let c;
+  return e[3] !== a || e[4] !== u ? (c = /* @__PURE__ */ p(x, { ref: i, onContextMenuCapture: j, onInteractOutside: F, onCloseAutoFocus: O, align: "start", sideOffset: 8, ...u, children: a }), e[3] = a, e[4] = u, e[5] = c) : c = e[5], c;
+}), U = l.forwardRef((o, h) => {
+  const {
+    suggestions: e,
+    onSuggestionSelect: a = () => {
+    },
+    ...u
+  } = o, i = l.useRef([]), [c, m] = l.useState({});
+  l.useEffect(() => {
+    if (!e) {
+      m({});
+      return;
+    }
+    m((r) => {
+      const t = {};
+      return e.forEach((n) => {
+        n.groupLabel && (r.hasOwnProperty(n.groupLabel) ? t[n.groupLabel] = r[n.groupLabel] : t[n.groupLabel] = !1);
+      }), t;
+    });
+  }, [e]);
+  const {
+    groupLabelCount: v,
+    visibleSuggestionCount: S
+  } = l.useMemo(() => {
+    if (!e) return {
+      groupLabelCount: 0,
+      visibleSuggestionCount: 0
+    };
+    let r = 0, t = 0;
+    return e.forEach((n, s, b) => {
+      const f = s > 0 ? b[s - 1]?.groupLabel : void 0;
+      n.groupLabel && n.groupLabel !== f && (r += 1), (n.groupLabel ? c[n.groupLabel] : !1) || (t += 1);
+    }), {
+      groupLabelCount: r,
+      visibleSuggestionCount: t
+    };
+  }, [c, e]), g = (r) => {
+    m((t) => ({
+      ...t,
+      [r]: !t[r]
+    }));
+  };
+  return l.useImperativeHandle(h, () => ({
+    focusFirstItem: () => i.current[0]?.focus(),
+    // @ts-ignore
+    focusLastItem: () => i.current.at(-1)?.focus()
+  }), []), i.current = [], /* @__PURE__ */ d(R, { h: `${Math.max(S + v, 1) * 27}px`, mah: "calc(var(--radix-popper-available-height) - 3rem - 69px)", ...u, children: [
+    /* @__PURE__ */ p(G, { children: e?.map((r, t, n) => {
+      const s = t > 0 ? n[t - 1]?.groupLabel : void 0, b = r.groupLabel && r.groupLabel !== s, f = r.groupLabel ? c[r.groupLabel] : !1;
+      let C = i.current.length;
+      return /* @__PURE__ */ d(l.Fragment, { children: [
+        b && r.groupLabel && /* @__PURE__ */ d(M, { onPointerDown: (L) => L.preventDefault(), onClick: () => g(r.groupLabel), style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          cursor: "pointer"
+        }, children: [
+          /* @__PURE__ */ p("span", { children: r.groupLabel }),
+          f ? /* @__PURE__ */ p(E, { size: 16 }) : /* @__PURE__ */ p(y, { size: 16 })
+        ] }),
+        !f && /* @__PURE__ */ p(
+          w,
+          {
+            textValue: "",
+            onSelect: () => setTimeout(() => a(r), 0),
+            ref: (L) => i.current[C] = L,
+            children: r.children
+          }
+        )
+      ] }, t);
+    }) }),
+    /* @__PURE__ */ p(A, { orientation: "vertical", children: /* @__PURE__ */ p(D, {}) })
+  ] });
+});
+function j(o) {
+  return o.stopPropagation();
+}
+function F(o) {
+  return o.target instanceof HTMLInputElement && o.preventDefault();
+}
+function O(o) {
+  return o.preventDefault();
+}
+export {
+  k as InputSuggestionMenuContent,
+  U as InputSuggestionMenuContentItems
+};

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

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { InputProps } from './Input';
+interface NumberInputProps extends Omit<InputProps<string | null>, "wrapperComponent" | "type" | "left" | "right" | "leftType" | "rightType"> {
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps>;
+export {};

package/dist/components/form/NumberInput.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import u from "react";
+import { Input as i } from "./Input.js";
+import { IconMinus as a, IconPlus as l } from "@tabler/icons-react";
+import { Button as e } from "../button/Button.js";
+const d = u.forwardRef((o, n) => {
+  n = n || u.useRef(null);
+  const {
+    step: r = 1,
+    ...c
+  } = o;
+  return /* @__PURE__ */ t(i, { className: "number-input", right: /* @__PURE__ */ t(e, { variant: "none", onClick: () => {
+    n.current && (n.current.value || (n.current.value = "0"), n.current.value = (Number.parseInt(n.current.value) + r).toString());
+  }, children: /* @__PURE__ */ t(l, { size: 13 }) }), left: /* @__PURE__ */ t(e, { variant: "none", onClick: () => {
+    n.current && (n.current.value || (n.current.value = "0"), n.current.value = (Number.parseInt(n.current.value) - r).toString());
+  }, children: /* @__PURE__ */ t(a, { size: 13 }) }), leftType: "action", type: "number", ref: n, ...c });
+});
+export {
+  d as NumberInput
+};

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { InputProps } from './Input';
+interface PasswordInputProps extends Omit<InputProps<string | null>, "wrapperComponent" | "type"> {
+    clearable?: boolean;
+    visible?: boolean;
+}
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps>;
+export {};

package/dist/components/form/PasswordInput.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+import o from "react";
+import { Input as h, setElementKey as y } from "./Input.js";
+import { IconEye as d, IconX as g } from "@tabler/icons-react";
+import { Button as i } from "../button/Button.js";
+const I = o.forwardRef((s, t) => {
+  t = t || o.useRef(null);
+  const {
+    clearable: a = !0,
+    visible: p = !0,
+    right: c,
+    ...u
+  } = s, l = (r) => (t.current && y(t.current, "value", "", "change"), r.stopPropagation(), r.preventDefault(), !1), m = (r) => (t.current && t.current.type == "password" ? t.current.type = "text" : t.current && t.current.type == "text" && (t.current.type = "password"), r.stopPropagation(), r.preventDefault(), !1), n = [c];
+  return p && n.push(/* @__PURE__ */ e(i, { variant: "none", onClick: (r) => m(r), children: /* @__PURE__ */ e(d, { size: 13 }) })), a && n.push(/* @__PURE__ */ e(i, { variant: "none", onClick: (r) => l(r), children: /* @__PURE__ */ e(g, { size: 13 }) })), /* @__PURE__ */ e(h, { right: n, rightType: "action", type: "password", ref: t, ...u });
+});
+export {
+  I as PasswordInput
+};

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

@@ -0,0 +1,11 @@
+import { OneTimePasswordFieldHiddenInputProps, OneTimePasswordFieldInputProps, OneTimePasswordFieldProps } from '@radix-ui/react-one-time-password-field';
+import { Code0ComponentProps } from '../../utils/types';
+import { default as React } from 'react';
+import { InputProps } from './Input';
+type PinInputProps = Omit<InputProps<string | null>, "wrapperComponent" | "type" | "left" | "right" | "leftType" | "rightType"> & OneTimePasswordFieldProps;
+type PinInputFieldProps = Code0ComponentProps & OneTimePasswordFieldInputProps;
+type PinInputHiddenFieldProps = Code0ComponentProps & OneTimePasswordFieldHiddenInputProps;
+export declare const PinInput: React.FC<PinInputProps>;
+export declare const PinInputField: React.FC<PinInputFieldProps>;
+export declare const PinInputHiddenField: React.FC<PinInputHiddenFieldProps>;
+export {};

package/dist/components/form/PinInput.js

@@ -0,0 +1,66 @@
+import { jsx as d, jsxs as F, Fragment as x } from "react/jsx-runtime";
+import { c as I } from "../../compiler-runtime-BNHg76kC.js";
+import { OneTimePasswordFieldInput as C, OneTimePasswordFieldHiddenInput as M, OneTimePasswordField as T } from "@radix-ui/react-one-time-password-field";
+import { mergeCode0Props as V } from "../../utils/utils.js";
+import { InputLabel as _ } from "./InputLabel.js";
+import { InputDescription as $ } from "./InputDescription.js";
+import { InputMessage as w } from "./InputMessage.js";
+import '../../assets/Input.css';/* empty css                         */
+const y = (l) => {
+  const e = I.c(26);
+  let t, i, r, n, o, s;
+  if (e[0] !== l) {
+    const {
+      title: c,
+      description: p,
+      disabled: b,
+      formValidation: P,
+      ...g
+    } = l;
+    i = P === void 0 ? {
+      valid: !0,
+      notValidMessage: null,
+      setValue: O
+    } : P, e[7] !== c ? (o = c ? /* @__PURE__ */ d(_, { children: c }) : null, e[7] = c, e[8] = o) : o = e[8], e[9] !== p ? (s = p ? /* @__PURE__ */ d($, { children: p }) : null, e[9] = p, e[10] = s) : s = e[10];
+    const h = `${i?.valid ? "" : "input--not-valid"}`;
+    e[11] !== h ? (n = V(h, {}), e[11] = h, e[12] = n) : n = e[12], t = T, r = V("pin-input", {
+      ...g,
+      onValueChange: (v) => {
+        g.onValueChange && g.onValueChange(v), i.setValue(v);
+      }
+    }), e[0] = l, e[1] = t, e[2] = i, e[3] = r, e[4] = n, e[5] = o, e[6] = s;
+  } else
+    t = e[1], i = e[2], r = e[3], n = e[4], o = e[5], s = e[6];
+  let a;
+  e[13] !== t || e[14] !== r ? (a = /* @__PURE__ */ d(t, { ...r }), e[13] = t, e[14] = r, e[15] = a) : a = e[15];
+  let u;
+  e[16] !== n || e[17] !== a ? (u = /* @__PURE__ */ d("div", { ...n, children: a }), e[16] = n, e[17] = a, e[18] = u) : u = e[18];
+  let f;
+  e[19] !== i ? (f = !i?.valid && i?.notValidMessage ? /* @__PURE__ */ d(w, { children: i.notValidMessage }) : null, e[19] = i, e[20] = f) : f = e[20];
+  let m;
+  return e[21] !== o || e[22] !== s || e[23] !== u || e[24] !== f ? (m = /* @__PURE__ */ F(x, { children: [
+    o,
+    s,
+    u,
+    f
+  ] }), e[21] = o, e[22] = s, e[23] = u, e[24] = f, e[25] = m) : m = e[25], m;
+}, z = (l) => {
+  const e = I.c(4);
+  let t;
+  e[0] !== l ? (t = V("input pin-input__field", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ d(C, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+}, A = (l) => {
+  const e = I.c(4);
+  let t;
+  e[0] !== l ? (t = V("pin-input__hidden-field", l), e[0] = l, e[1] = t) : t = e[1];
+  let i;
+  return e[2] !== t ? (i = /* @__PURE__ */ d(M, { ...t }), e[2] = t, e[3] = i) : i = e[3], i;
+};
+function O(l) {
+}
+export {
+  y as PinInput,
+  z as PinInputField,
+  A as PinInputHiddenField
+};