dgz-ui-shared/dist/components/form/index.es.js

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library

import { t as k } from "../../MyInput-B-QCpehg.js";
import { M as xe } from "../../MyInput-B-QCpehg.js";
import { M as oe } from "../../MySelect-C5uWRVJh.js";
import { j as e } from "../../jsx-runtime-DS1N_tNq.js";
import { l as f } from "../../lodash-CYNxjS-I.js";
import { K as h, z as u, G as g, a as y, W as N, H as x, v as C, c as S, t as M, d as w, f as F, g as E } from "../../input-mask-DBLFIvhN-BBxoZxnd.js";
import { k as he, b as ue, y as ge, o as ye, h as pe, Z as Ne, J as ve, X as fe, e as be, V as ke, i as Ce, l as Se, $ as Me, j as we, Q as Fe, U as Ee, m as Ge, n as Ie } from "../../input-mask-DBLFIvhN-BBxoZxnd.js";
import { _ as G, w as I, u as R } from "../../popover-OZcfKDD9-C2PVWPLS.js";
import { u as z } from "../../button-CdZDBhmr-BT_j3ig5.js";
import { d as D, n as V, L, D as P, G as _ } from "../../DateRangePicker-DFsQ10c7.js";
import { m as p } from "../../utils-B6fNqzRf-B1_jG1K7.js";
import { c as K } from "../../createLucideIcon-B950nf2d.js";
import "react";
import { z as ze } from "../../react-select-DVPHHTAP-D2u3DqGr.js";
/**
 * @license lucide-react v0.511.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const B = [
  ["path", { d: "M8 2v4", key: "1cmpym" }],
  ["path", { d: "M16 2v4", key: "4m81vk" }],
  ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
  ["path", { d: "M3 10h18", key: "8toen8" }]
], H = K("calendar", B), T = ({
  control: r,
  name: a,
  label: s,
  helperText: n,
  required: l,
  rules: t,
  format: c = V,
  placeholder: d,
  floatingError: i,
  register: m,
  className: o,
  ...j
}) => {
  const b = s && /* @__PURE__ */ e.jsxs(x, { children: [
    s,
    " ",
    l && /* @__PURE__ */ e.jsx("span", { className: "text-red-600", children: "*" })
  ] });
  return /* @__PURE__ */ e.jsx(e.Fragment, { children: a && r ? /* @__PURE__ */ e.jsx(
    h,
    {
      control: r,
      name: a,
      rules: t,
      render: ({ field: v, formState: $ }) => /* @__PURE__ */ e.jsxs(u, { children: [
        b,
        /* @__PURE__ */ e.jsxs(G, { children: [
          /* @__PURE__ */ e.jsx(I, { asChild: !0, children: /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsxs(
            z,
            {
              variant: "secondary",
              className: p(
                "text-secondary !text-body-sm-regular border-border-alpha-strong focus:ring-item-primary mt-2 flex w-full bg-transparent pl-3 text-left font-normal hover:bg-transparent",
                f.get($.errors, `${a}`) && "focus:ring-item-destructive border-item-destructive bg-item-destructive-focus text-item-destructive hover:bg-item-destructive-focus dark:bg-transparent",
                v.value && "text-primary",
                o
              ),
              children: [
                v.value ? D(v.value).format(c) : d || "Pick a date",
                /* @__PURE__ */ e.jsx(H, { className: "ml-auto h-4 w-4" })
              ]
            }
          ) }) }),
          /* @__PURE__ */ e.jsx(R, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ e.jsx(
            L,
            {
              ...j,
              mode: "single",
              selected: v.value,
              onSelect: v.onChange
            }
          ) })
        ] }),
        /* @__PURE__ */ e.jsx(y, { children: n }),
        /* @__PURE__ */ e.jsx("div", { className: "relative", children: /* @__PURE__ */ e.jsx(N, {}) })
      ] })
    }
  ) : /* @__PURE__ */ e.jsxs("div", { className: "relative flex flex-col space-y-2", children: [
    b,
    /* @__PURE__ */ e.jsxs(G, { children: [
      /* @__PURE__ */ e.jsx(I, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
        z,
        {
          variant: "secondary",
          className: p(
            "text-secondary !text-body-sm-regular border-border-alpha-strong focus:ring-item-primary mt-2 bg-transparent pl-3 text-left font-normal hover:bg-transparent",
            j.selected && "text-primary",
            o
          ),
          children: [
            j.selected ? D(j.selected).format(c) : d || "Pick a date",
            /* @__PURE__ */ e.jsx(H, { className: "ml-auto h-4 w-4" })
          ]
        }
      ) }),
      /* @__PURE__ */ e.jsx(R, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ e.jsx(L, { ...j, mode: "single" }) })
    ] })
  ] }) });
}, ee = ({
  control: r,
  name: a,
  label: s,
  helperText: n,
  required: l,
  rules: t,
  format: c = V,
  placeholder: d,
  ...i
}) => {
  const m = s && /* @__PURE__ */ e.jsxs(x, { className: "text-body-xs-medium my-3", children: [
    s,
    " ",
    l && /* @__PURE__ */ e.jsx("span", { className: "text-red-600", children: "*" })
  ] });
  return /* @__PURE__ */ e.jsx(e.Fragment, { children: a && r ? /* @__PURE__ */ e.jsx(
    h,
    {
      control: r,
      name: a,
      rules: t,
      render: ({ field: o, formState: j }) => /* @__PURE__ */ e.jsxs(u, { children: [
        m,
        /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(
          P,
          {
            ...i,
            error: `${f.get(j.errors, a, "")}`,
            selected: o.value,
            onRangeSelected: o.onChange,
            format: c,
            placeholder: d
          }
        ) }),
        n && /* @__PURE__ */ e.jsx(y, { children: n }),
        /* @__PURE__ */ e.jsx("div", { className: "relative", children: /* @__PURE__ */ e.jsx(N, {}) })
      ] })
    }
  ) : /* @__PURE__ */ e.jsx(P, { ...i }) });
}, se = ({
  control: r,
  name: a,
  label: s,
  rules: n,
  helperText: l,
  ...t
}) => a && r ? /* @__PURE__ */ e.jsx(
  h,
  {
    control: r,
    name: a,
    rules: n,
    render: ({ field: c }) => /* @__PURE__ */ e.jsxs(u, { className: "flex flex-row items-start space-x-3", children: [
      /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(
        C,
        {
          checked: c.value,
          onCheckedChange: c.onChange,
          ...t
        }
      ) }),
      /* @__PURE__ */ e.jsxs("div", { className: "space-y-1 leading-none", children: [
        s && /* @__PURE__ */ e.jsx(x, { children: s }),
        l && /* @__PURE__ */ e.jsx(y, { children: l })
      ] })
    ] })
  }
) : /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4", children: [
  /* @__PURE__ */ e.jsx(C, { ...t }),
  /* @__PURE__ */ e.jsx("div", { className: "space-y-1 leading-none", children: s && /* @__PURE__ */ e.jsx(x, { children: s }) })
] }), ae = ({
  control: r,
  name: a,
  label: s,
  helperText: n,
  rules: l,
  ...t
}) => a && r ? /* @__PURE__ */ e.jsx(
  h,
  {
    control: r,
    name: a,
    rules: l,
    render: ({ field: c }) => /* @__PURE__ */ e.jsxs(u, { className: "flex items-center gap-2", children: [
      /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(
        S,
        {
          className: "m-0",
          checked: c.value,
          onCheckedChange: c.onChange,
          ...t
        }
      ) }),
      /* @__PURE__ */ e.jsxs("div", { className: "mb-1 space-y-1 leading-none", children: [
        s && /* @__PURE__ */ e.jsx(
          x,
          {
            className: p("text-primary", t.disabled && "opacity-40"),
            children: s
          }
        ),
        n && /* @__PURE__ */ e.jsx(y, { children: n })
      ] })
    ] })
  }
) : /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-center space-x-3", children: [
  /* @__PURE__ */ e.jsx(S, { ...t }),
  /* @__PURE__ */ e.jsx("div", { className: "mb-1 space-y-1 leading-none", children: s && /* @__PURE__ */ e.jsx(
    x,
    {
      className: p("text-primary", t.disabled && "opacity-40"),
      children: s
    }
  ) })
] }), re = ({
  control: r,
  name: a,
  label: s,
  helperText: n,
  required: l,
  className: t,
  rules: c,
  floatingError: d,
  ...i
}) => {
  const m = s && /* @__PURE__ */ e.jsxs(x, { children: [
    s,
    " ",
    l && /* @__PURE__ */ e.jsx("span", { className: "text-red-600", children: "*" })
  ] });
  return a && r ? /* @__PURE__ */ e.jsx(
    h,
    {
      control: r,
      name: a,
      rules: c,
      render: ({ field: o }) => /* @__PURE__ */ e.jsxs(u, { children: [
        m,
        /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(_, { className: "mt-2", ...o, ...i }) }),
        n && /* @__PURE__ */ e.jsx(y, { children: n }),
        /* @__PURE__ */ e.jsx(N, { className: p(d && "absolute") })
      ] })
    }
  ) : /* @__PURE__ */ e.jsx(_, { className: "mt-2", ...i });
}, te = ({
  control: r,
  name: a,
  label: s,
  helperText: n,
  required: l,
  rules: t,
  className: c,
  floatingError: d,
  ...i
}) => {
  const m = s && /* @__PURE__ */ e.jsxs(x, { className: "text-body-xs-medium my-3", children: [
    s,
    " ",
    l && /* @__PURE__ */ e.jsx("span", { className: "text-red-600", children: "*" })
  ] });
  return a && r ? /* @__PURE__ */ e.jsx(
    h,
    {
      control: r,
      name: a,
      rules: t,
      render: ({ field: o, formState: j }) => /* @__PURE__ */ e.jsxs(u, { children: [
        m,
        /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(
          M,
          {
            variant: f.get(j.errors, `${a}`) ? "failure" : "default",
            ...i,
            ...o,
            className: k(["mt-2", c])
          }
        ) }),
        n && /* @__PURE__ */ e.jsx(y, { children: n }),
        /* @__PURE__ */ e.jsx(N, { className: p(d && "absolute") })
      ] })
    }
  ) : /* @__PURE__ */ e.jsx(M, { ...i, className: k(["mt-2", c]) });
}, ce = ({
  control: r,
  name: a,
  label: s,
  rules: n,
  helperText: l,
  value: t,
  ...c
}) => a && r ? /* @__PURE__ */ e.jsx(
  h,
  {
    control: r,
    name: a,
    rules: n,
    render: ({ field: d }) => /* @__PURE__ */ e.jsxs(u, { className: "flex flex-row items-start space-x-3", children: [
      /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(
        w,
        {
          value: t,
          checked: d.value === t,
          onClick: () => d.onChange(t),
          ...c
        }
      ) }),
      /* @__PURE__ */ e.jsxs("div", { className: "space-y-1 leading-none", children: [
        s && /* @__PURE__ */ e.jsx(x, { children: s }),
        l && /* @__PURE__ */ e.jsx(y, { children: l })
      ] })
    ] })
  }
) : /* @__PURE__ */ e.jsxs("div", { className: "flex flex-row items-start space-y-0 space-x-3 rounded-md border p-4", children: [
  /* @__PURE__ */ e.jsx(w, { value: t, ...c }),
  /* @__PURE__ */ e.jsx("div", { className: "space-y-1 leading-none", children: s && /* @__PURE__ */ e.jsx(x, { children: s }) })
] }), ne = ({
  control: r,
  name: a,
  label: s,
  rules: n,
  helperText: l,
  required: t,
  floatingError: c,
  ...d
}) => {
  const i = s && /* @__PURE__ */ e.jsxs(x, { className: "text-body-xs-medium my-3", children: [
    s,
    " ",
    t && /* @__PURE__ */ e.jsx("span", { className: "text-red-600", children: "*" })
  ] });
  return a && r ? /* @__PURE__ */ e.jsx(
    h,
    {
      control: r,
      name: a,
      rules: n,
      render: ({ field: m }) => /* @__PURE__ */ e.jsxs(u, { children: [
        i,
        /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(F, { ...m, ...d }) }),
        l && /* @__PURE__ */ e.jsx(y, { children: l }),
        /* @__PURE__ */ e.jsx(N, { className: p(c && "absolute") })
      ] })
    }
  ) : /* @__PURE__ */ e.jsx(F, { ...d });
}, le = ({
  control: r,
  name: a,
  label: s,
  rules: n,
  helperText: l,
  required: t,
  floatingError: c,
  ...d
}) => {
  const i = s && /* @__PURE__ */ e.jsxs(x, { className: "text-body-xs-medium my-3", children: [
    s,
    " ",
    t && /* @__PURE__ */ e.jsx("span", { className: "text-red-600", children: "*" })
  ] });
  return a && r ? /* @__PURE__ */ e.jsx(
    h,
    {
      control: r,
      name: a,
      rules: n,
      render: ({ field: m }) => /* @__PURE__ */ e.jsxs(u, { children: [
        i,
        /* @__PURE__ */ e.jsx(g, { children: /* @__PURE__ */ e.jsx(
          E,
          {
            thousandsSeparator: " ",
            lazy: !1,
            placeholderChar: "_",
            unmask: !0,
            ...m,
            ...d,
            onAccept: (o) => m.onChange(o)
          }
        ) }),
        l && /* @__PURE__ */ e.jsx(y, { children: l }),
        /* @__PURE__ */ e.jsx(N, { className: p(c && "absolute") })
      ] })
    }
  ) : /* @__PURE__ */ e.jsx(
    E,
    {
      thousandsSeparator: " ",
      lazy: !1,
      placeholderChar: "_",
      unmask: !0,
      ...d
    }
  );
};
export {
  C as Checkbox,
  he as FilepondContainer,
  ue as Form,
  g as FormControl,
  y as FormDescription,
  h as FormField,
  u as FormItem,
  x as FormLabel,
  N as FormMessage,
  F as HtmlEditor,
  ge as Input,
  ye as Label,
  E as MaskInput,
  se as MyCheckbox,
  T as MyDatePicker,
  ee as MyDateRangePicker,
  ne as MyHtmlEditor,
  xe as MyInput,
  le as MyMaskInput,
  ce as MyRadio,
  oe as MySelect,
  ae as MySwitch,
  te as MyTextarea,
  re as MyTimePicker,
  pe as RadioGroup,
  w as RadioGroupItem,
  ze as ReactSelect,
  Ne as Select,
  ve as SelectContent,
  fe as SelectGroup,
  be as SelectItem,
  ke as SelectLabel,
  Ce as SelectScrollDownButton,
  Se as SelectScrollUpButton,
  Me as SelectSeparator,
  we as SelectTrigger,
  Fe as SelectValue,
  S as Switch,
  M as Textarea,
  Ee as VirtualizedSelectContent,
  Ge as inputVariants,
  Ie as useFormField
};