triafly-ui-kit 1.0.22 → 1.0.24

package/dist/assets/DatePicker.css

@@ -0,0 +1 @@
+.datepicker{position:relative;width:160px;font-family:Arial,sans-serif}.datepicker .native-input{position:absolute;opacity:0;pointer-events:none;height:0;width:0}.datepicker-input{display:flex;align-items:center;gap:8px;height:44px;padding:8px;border:1px solid var(--color-border-primary-default);border-radius:8px;background-color:var(--color-bg-neutral-basic-default);cursor:pointer;transition:border-color .2s}.datepicker-input:hover{border-color:#9ca3af}.datepicker-input .calendar-icon{color:#6b7280}.datepicker-input .placeholder{color:#6b7280;margin:0 auto 0 0}.datepicker-input .placeholder:not(:empty){color:#111827}.datepicker-input .caret *{fill:var(--color-icon-secondary-default)}.datepicker-calendar{position:absolute;top:100%;left:0;z-index:100;padding:16px;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default)}.datepicker-calendar .calendar-controls{display:flex;justify-content:space-between;margin-bottom:16px}.datepicker-calendar .month-control,.datepicker-calendar .year-control{display:flex;align-items:center;justify-content:space-between}.datepicker-calendar .month-control{width:160px}.datepicker-calendar .year-control{width:99px}.datepicker-calendar .current-month,.datepicker-calendar .current-year{min-width:60px;text-align:center;font-weight:600}.datepicker-calendar .nav-button{display:flex;align-items:center;justify-content:center;border:none;background-color:transparent;cursor:pointer;transition:background-color .2s}.datepicker-calendar .calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:8px;text-align:center;font-size:12px;color:#6b7280}.datepicker-calendar .calendar-weekdays .weekday{font-weight:600}.datepicker-calendar .calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.datepicker-calendar .calendar-days .day{display:flex;align-items:center;justify-content:center;height:40px;width:40px;cursor:pointer;font-size:14px;flex-direction:column;border-radius:4px}.datepicker-calendar .calendar-days .day:hover{background-color:var(--color-bg-neutral-light-default)}.datepicker-calendar .calendar-days .day.selected{background-color:#3b82f6;color:#fff}.datepicker-calendar .calendar-days .day.disabled{color:#d1d5db;pointer-events:none}.datepicker-calendar .calendar-days .day.other-month{color:#9ca3af;opacity:.7}.datepicker-calendar .calendar-days .day.today{position:relative}.datepicker-calendar .calendar-days .day.today:after{content:"";display:block;position:absolute;width:5px;height:5px;border-radius:50%;background-color:var(--color-bg-brand-default);bottom:4px}.datepicker-calendar .calendar-days .day.today.selected:after{background-color:var(--color-bg-neutral-basic-default)}

package/dist/components/Ui/DatePicker/DatePicker.js

@@ -0,0 +1,175 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { useState as w, useRef as $, useEffect as N } from "react";
+import { IconCalendarBlank as A, IconCaretUpDown as G, IconCaretLeft as I, IconCaretRight as S } from "../Icons/Icons.js";
+import '../../../assets/DatePicker.css';const H = [
+  "Январь",
+  "Февраль",
+  "Март",
+  "Апрель",
+  "Май",
+  "Июнь",
+  "Июль",
+  "Август",
+  "Сентябрь",
+  "Октябрь",
+  "Ноябрь",
+  "Декабрь"
+], X = ({
+  name: O = "date",
+  value: r = null,
+  onChange: x = () => {
+  },
+  placeholder: L = "Любая дата",
+  className: R = "",
+  inputClassName: T = "",
+  calendarClassName: E = "",
+  minDate: M,
+  maxDate: v
+}) => {
+  const [c, k] = w(r), [d, u] = w(r ? new Date(r) : /* @__PURE__ */ new Date()), [F, g] = w(!1), m = $(null), D = $(null), j = (t) => {
+    const o = t.getDate(), e = t.getMonth() + 1, p = t.getFullYear();
+    return `${o}-${e < 10 ? "0" + e : e}-${p}`;
+  };
+  N(() => {
+    k(r), r && u(new Date(r));
+  }, [r]), N(() => {
+    D.current && (D.current.value = c ? c.toISOString().split("T")[0] : "");
+  }, [c]), N(() => {
+    const t = (o) => {
+      m.current && !m.current.contains(o.target) && g(!1);
+    };
+    return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+  }, []);
+  const y = (t, o = 0) => {
+    const e = new Date(
+      d.getFullYear(),
+      d.getMonth() + o,
+      t
+    );
+    k(e), x(e), u(new Date(e)), g(!1);
+  }, Y = (t) => {
+    u((o) => {
+      const e = new Date(o);
+      return e.setMonth(e.getMonth() + t), e;
+    });
+  }, b = (t) => {
+    u((o) => {
+      const e = new Date(o);
+      return e.setFullYear(e.getFullYear() + t), e;
+    });
+  }, P = () => {
+    const t = d.getFullYear(), o = d.getMonth(), e = /* @__PURE__ */ new Date(), p = new Date(t, o, 1), B = new Date(t, o + 1, 0).getDate(), U = p.getDay() || 7, W = new Date(t, o, 0).getDate(), q = U - 1, h = [];
+    for (let a = q; a > 0; a--) {
+      const s = W - a + 1, l = new Date(t, o - 1, s), f = l.getDate() === e.getDate() && l.getMonth() === e.getMonth() && l.getFullYear() === e.getFullYear();
+      h.push(
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `day other-month ${f ? "today" : ""}`,
+            onClick: () => y(s, -1),
+            children: s
+          },
+          `prev-${s}`
+        )
+      );
+    }
+    for (let a = 1; a <= B; a++) {
+      const s = new Date(t, o, a), l = c && s.getDate() === c.getDate() && s.getMonth() === c.getMonth() && s.getFullYear() === c.getFullYear(), f = s.getDate() === e.getDate() && s.getMonth() === e.getMonth() && s.getFullYear() === e.getFullYear(), C = M && s < M || v && s > v;
+      h.push(
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `day ${l ? "selected" : ""} ${C ? "disabled" : ""} ${f ? "today" : ""}`,
+            onClick: () => !C && y(a),
+            children: a
+          },
+          `current-${a}`
+        )
+      );
+    }
+    const z = 42 - h.length;
+    for (let a = 1; a <= z; a++) {
+      const s = new Date(t, o + 1, a), l = s.getDate() === e.getDate() && s.getMonth() === e.getMonth() && s.getFullYear() === e.getFullYear();
+      h.push(
+        /* @__PURE__ */ n(
+          "div",
+          {
+            className: `day other-month ${l ? "today" : ""}`,
+            onClick: () => y(a, 1),
+            children: a
+          },
+          `next-${a}`
+        )
+      );
+    }
+    return h;
+  };
+  return /* @__PURE__ */ i("div", { className: `datepicker ${R}`, ref: m, children: [
+    /* @__PURE__ */ n(
+      "input",
+      {
+        type: "date",
+        ref: D,
+        name: O,
+        className: "native-input",
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ i("div", { className: `datepicker-input ${T}`, onClick: () => g(!F), children: [
+      /* @__PURE__ */ n(A, {}),
+      /* @__PURE__ */ n("span", { className: "placeholder", children: c ? j(c) : L }),
+      /* @__PURE__ */ n(G, { className: "caret" })
+    ] }),
+    F && /* @__PURE__ */ i("div", { className: `datepicker-calendar ${E}`, children: [
+      /* @__PURE__ */ i("div", { className: "calendar-controls", children: [
+        /* @__PURE__ */ i("div", { className: "month-control", children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "nav-button",
+              onClick: () => Y(-1),
+              "aria-label": "Предыдущий месяц",
+              children: /* @__PURE__ */ n(I, {})
+            }
+          ),
+          /* @__PURE__ */ n("span", { className: "current-month", children: H[d.getMonth()] }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "nav-button",
+              onClick: () => Y(1),
+              "aria-label": "Следующий месяц",
+              children: /* @__PURE__ */ n(S, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ i("div", { className: "year-control", children: [
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "nav-button",
+              onClick: () => b(-1),
+              "aria-label": "Предыдущий год",
+              children: /* @__PURE__ */ n(I, {})
+            }
+          ),
+          /* @__PURE__ */ n("span", { className: "current-year", children: d.getFullYear() }),
+          /* @__PURE__ */ n(
+            "button",
+            {
+              className: "nav-button",
+              onClick: () => b(1),
+              "aria-label": "Следующий год",
+              children: /* @__PURE__ */ n(S, {})
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ n("div", { className: "calendar-weekdays", children: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"].map((t) => /* @__PURE__ */ n("div", { className: "weekday", children: t }, t)) }),
+      /* @__PURE__ */ n("div", { className: "calendar-days", children: P() })
+    ] })
+  ] });
+};
+export {
+  X as DatePicker
+};

package/dist/components/Ui/DatePicker/DatePicker.stories.js

@@ -0,0 +1,114 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import l from "react";
+import { DatePicker as r } from "./DatePicker.js";
+const m = {
+  title: "UIKit/DatePicker",
+  component: r,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "date",
+      description: "Выбранная дата (timestamp)"
+    },
+    onChange: {
+      action: "dateChanged",
+      description: "Обработчик изменения даты"
+    },
+    className: {
+      control: "text",
+      description: "Класс для основного контейнера"
+    },
+    inputClassName: {
+      control: "text",
+      description: "Класс для кастомного инпута"
+    },
+    calendarClassName: {
+      control: "text",
+      description: "Класс для календаря"
+    },
+    placeholder: {
+      control: "text",
+      description: "Текст плейсхолдера"
+    },
+    minDate: {
+      control: "date",
+      description: "Минимальная доступная дата"
+    },
+    maxDate: {
+      control: "date",
+      description: "Максимальная доступная дата"
+    }
+  }
+}, u = {
+  args: {
+    placeholder: "Любая дата"
+  }
+}, x = {
+  args: {
+    value: new Date(2023, 5, 15),
+    placeholder: "Выберите дату"
+  }
+}, h = {
+  args: {
+    minDate: new Date(2023, 0, 1),
+    maxDate: new Date(2023, 11, 31)
+  }
+}, g = {
+  args: {
+    inputClassName: "custom-input",
+    calendarClassName: "custom-calendar"
+  },
+  decorators: [
+    (o) => /* @__PURE__ */ a("div", { children: [
+      /* @__PURE__ */ e("style", { children: `
+          .custom-input {
+            border: 2px solid #6366f1;
+            background-color: #f0f0ff;
+            padding: 12px;
+            border-radius: 8px;
+          }
+          .custom-calendar {
+            border: 2px solid #6366f1;
+            box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
+          }
+          .custom-calendar .day.selected {
+            background-color: #6366f1;
+          }
+        ` }),
+      /* @__PURE__ */ e(o, {})
+    ] })
+  ]
+}, D = {
+  render: function() {
+    const [t, n] = l.useState(null);
+    return /* @__PURE__ */ a("div", { style: { maxWidth: "300px" }, children: [
+      /* @__PURE__ */ e(r, { value: t, onChange: n, placeholder: "Контролируемый выбор" }),
+      /* @__PURE__ */ a("div", { style: { marginTop: "16px", fontSize: "14px" }, children: [
+        "Выбрано: ",
+        t ? t.toLocaleDateString("ru-RU") : "дата не выбрана"
+      ] })
+    ] });
+  }
+}, f = {
+  render: function() {
+    const [t, n] = l.useState(null);
+    return /* @__PURE__ */ a("form", { onSubmit: (i) => {
+      i.preventDefault(), alert(`Выбрана дата: ${t == null ? void 0 : t.toLocaleDateString("ru-RU")}`);
+    }, style: { maxWidth: "300px" }, children: [
+      /* @__PURE__ */ a("div", { style: { marginBottom: "16px" }, children: [
+        /* @__PURE__ */ e("label", { style: { display: "block", marginBottom: "4px" }, children: "Дата события:" }),
+        /* @__PURE__ */ e(r, { name: "eventDate", value: t, onChange: n })
+      ] }),
+      /* @__PURE__ */ e("button", { type: "submit", children: "Отправить" })
+    ] });
+  }
+};
+export {
+  D as Controlled,
+  g as CustomStyled,
+  u as Default,
+  f as InForm,
+  h as WithDateRange,
+  x as WithInitialDate,
+  m as default
+};

package/dist/components/Ui/DatePicker/index.js

@@ -0,0 +1,4 @@
+import { DatePicker as o } from "./DatePicker.js";
+export {
+  o as DatePicker
+};

package/dist/main.d.ts

@@ -132,6 +132,20 @@ export declare type Column<T extends object = Record<string, unknown>> = {
 
 export declare const CustomLink: default_2.FC<LinkProps>;
 
+export declare const DatePicker: default_2.FC<DatePickerProps>;
+
+declare interface DatePickerProps {
+    name?: string;
+    value?: Date | null;
+    onChange?: (date: Date | null) => void;
+    placeholder?: string;
+    className?: string;
+    inputClassName?: string;
+    calendarClassName?: string;
+    minDate?: Date;
+    maxDate?: Date;
+}
+
 export declare const DropdownInput: default_2.FC<DropdownInputProps>;
 
 declare type DropdownInputProps = {

package/dist/main.js

@@ -3,160 +3,162 @@ import { Alert as I } from "./components/Ui/Alert/Alert.js";
 import { Avatar as i } from "./components/Ui/Avatar/Avatar.js";
 import { ModalWindow as p } from "./components/Ui/ModalWindow/ModalWindow.js";
 import { Badge as f } from "./components/Ui/Badge/Badge.js";
-import { Button as x } from "./components/Ui/Button/Button.js";
-import { ButtonsArray as u } from "./components/Ui/ButtonsArray/ButtonsArray.js";
-import { Checkbox as C } from "./components/Ui/Checkbox/Checkbox.js";
-import { CliTextareaInput as h } from "./components/Ui/CliTextareaInput/CliTextareaInput.js";
+import { DatePicker as x } from "./components/Ui/DatePicker/DatePicker.js";
+import { Button as u } from "./components/Ui/Button/Button.js";
+import { ButtonsArray as C } from "./components/Ui/ButtonsArray/ButtonsArray.js";
+import { Checkbox as h } from "./components/Ui/Checkbox/Checkbox.js";
+import { CliTextareaInput as T } from "./components/Ui/CliTextareaInput/CliTextareaInput.js";
 import "react";
-import { CustomLink as T } from "./components/Ui/CustomLink/CustomLink.js";
-import { DropdownInput as A } from "./components/Ui/DropdownInput/DropdownInput.js";
-import { DropdownMenu as k } from "./components/Ui/DropdownMenu/DropdownMenu.js";
-import { FileUpload as P } from "./components/Ui/FileUpload/FileUpload.js";
-import { Form as U } from "./components/Ui/Form/FormRoot/FormRoot.js";
-import { useForm as F } from "./components/Ui/Form/useForm/useForm.js";
-import { Loader as v } from "./components/Ui/Loader/Loader.js";
-import { Pagination as X } from "./components/Ui/Pagination/Pagination.js";
-import { Radio as H } from "./components/Ui/Radio/Radio.js";
-import { SearchInput as O } from "./components/Ui/SearchInput/SearchInput.js";
-import { Skeleton as E } from "./components/Ui/Skeleton/Skeleton.js";
-import { Switch as W } from "./components/Ui/Switch/Switch.js";
-import { Table as z } from "./components/Ui/Table/Table.js";
-import { TextInput as Y } from "./components/Ui/TextInput/TextInput.js";
-import { TextareaInput as q } from "./components/Ui/TextareaInput/TextareaInput.js";
-import { Tooltip as Z } from "./components/Ui/Tooltip/Tooltip.js";
-import { Tabs as $ } from "./components/Ui/Tabs/Tabs.js";
-import { IconArrowBendUpRight as no, IconArrowClockwise as ro, IconArrowDown as eo, IconArrowLeft as co, IconArrowLineDown as Io, IconArrowLineLeft as to, IconArrowLineRight as io, IconArrowLineUp as ao, IconArrowRight as po, IconArrowUp as lo, IconArrowsOut as fo, IconArticle as mo, IconAt as xo, IconBellSimple as so, IconBookOpenText as uo, IconCalendarBlank as Co, IconCaretDown as wo, IconCaretLeft as ho, IconCaretRight as So, IconCaretUp as To, IconCaretUpDown as go, IconChartPieSlice as Ao, IconChatText as Lo, IconCheck as ko, IconCheckCircle as Do, IconChecks as Po, IconCircleNotch as yo, IconCopy as Uo, IconCornersOut as Bo, IconCsv as Fo, IconCube as Mo, IconDatabase as vo, IconDotsNine as Ro, IconDotsThreeVertical as Xo, IconExport as bo, IconEye as Ho, IconEyeSlash as No, IconFile as Oo, IconFiles as Qo, IconFloppyDisk as Eo, IconFolderSimple as Go, IconFolderSimpleX as Wo, IconFunnel as Vo, IconGauge as zo, IconGear as Jo, IconGoogleDrive as Yo, IconHand as jo, IconHeadCircuit as qo, IconHouse as Ko, IconIcon as Zo, IconInfo as _o, IconJoin as $o, IconLanguage as on, IconLink as nn, IconList as rn, IconLock as en, IconLockOpen as cn, IconMariaDB as In, IconMinus as tn, IconMongoDB as an, IconMoon as pn, IconMySQL as ln, IconNavigationArrow as fn, IconNotePencil as mn, IconPassword as xn, IconPen as sn, IconPlay as un, IconPlugsX as dn, IconPlus as Cn, IconPorsgteSQL as wn, IconPresentationChart as hn, IconQuestion as Sn, IconQuestionFullfilled as Tn, IconRedo as gn, IconRoleX as An, IconSearch as Ln, IconSearchX as kn, IconSelection as Dn, IconServer as Pn, IconSlidersHorizontal as yn, IconSticker as Un, IconSun as Bn, IconThreeDot as Fn, IconTrash as Mn, IconTriangleDown as vn, IconTriangleUp as Rn, IconUndo as Xn, IconUploadSimple as bn, IconUser as Hn, IconUserX as Nn, IconWarningCircle as On, IconWrench as Qn, IconX as En, IconYandexDisk as Gn } from "./components/Ui/Icons/Icons.js";
-import { ToastProvider as Vn } from "./context/ToastContext/ToastContext.js";
-import { TriaflyContext as Jn, TriaflyProvider as Yn, useTriafly as jn } from "./context/TriaflyContext/TriaflyProvider.js";
-import { useBreakpointValueTriafly as Kn } from "./context/TriaflyContext/hooks/useBreakpointValue/useBreakpointValue.js";
-import { useThemeLogic as _n } from "./context/TriaflyContext/hooks/useTheme/useTheme.js";
-import { useModalState as or } from "./context/TriaflyContext/hooks/useModal/useModal.js";
+import { CustomLink as A } from "./components/Ui/CustomLink/CustomLink.js";
+import { DropdownInput as D } from "./components/Ui/DropdownInput/DropdownInput.js";
+import { DropdownMenu as P } from "./components/Ui/DropdownMenu/DropdownMenu.js";
+import { FileUpload as U } from "./components/Ui/FileUpload/FileUpload.js";
+import { Form as F } from "./components/Ui/Form/FormRoot/FormRoot.js";
+import { useForm as v } from "./components/Ui/Form/useForm/useForm.js";
+import { Loader as X } from "./components/Ui/Loader/Loader.js";
+import { Pagination as H } from "./components/Ui/Pagination/Pagination.js";
+import { Radio as O } from "./components/Ui/Radio/Radio.js";
+import { SearchInput as E } from "./components/Ui/SearchInput/SearchInput.js";
+import { Skeleton as W } from "./components/Ui/Skeleton/Skeleton.js";
+import { Switch as z } from "./components/Ui/Switch/Switch.js";
+import { Table as Y } from "./components/Ui/Table/Table.js";
+import { TextInput as q } from "./components/Ui/TextInput/TextInput.js";
+import { TextareaInput as Z } from "./components/Ui/TextareaInput/TextareaInput.js";
+import { Tooltip as $ } from "./components/Ui/Tooltip/Tooltip.js";
+import { Tabs as no } from "./components/Ui/Tabs/Tabs.js";
+import { IconArrowBendUpRight as eo, IconArrowClockwise as co, IconArrowDown as Io, IconArrowLeft as to, IconArrowLineDown as io, IconArrowLineLeft as ao, IconArrowLineRight as po, IconArrowLineUp as lo, IconArrowRight as fo, IconArrowUp as mo, IconArrowsOut as xo, IconArticle as so, IconAt as uo, IconBellSimple as Co, IconBookOpenText as wo, IconCalendarBlank as ho, IconCaretDown as So, IconCaretLeft as To, IconCaretRight as go, IconCaretUp as Ao, IconCaretUpDown as ko, IconChartPieSlice as Do, IconChatText as Lo, IconCheck as Po, IconCheckCircle as yo, IconChecks as Uo, IconCircleNotch as Bo, IconCopy as Fo, IconCornersOut as Mo, IconCsv as vo, IconCube as Ro, IconDatabase as Xo, IconDotsNine as bo, IconDotsThreeVertical as Ho, IconExport as No, IconEye as Oo, IconEyeSlash as Qo, IconFile as Eo, IconFiles as Go, IconFloppyDisk as Wo, IconFolderSimple as Vo, IconFolderSimpleX as zo, IconFunnel as Jo, IconGauge as Yo, IconGear as jo, IconGoogleDrive as qo, IconHand as Ko, IconHeadCircuit as Zo, IconHouse as _o, IconIcon as $o, IconInfo as on, IconJoin as nn, IconLanguage as rn, IconLink as en, IconList as cn, IconLock as In, IconLockOpen as tn, IconMariaDB as an, IconMinus as pn, IconMongoDB as ln, IconMoon as fn, IconMySQL as mn, IconNavigationArrow as xn, IconNotePencil as sn, IconPassword as un, IconPen as dn, IconPlay as Cn, IconPlugsX as wn, IconPlus as hn, IconPorsgteSQL as Sn, IconPresentationChart as Tn, IconQuestion as gn, IconQuestionFullfilled as An, IconRedo as kn, IconRoleX as Dn, IconSearch as Ln, IconSearchX as Pn, IconSelection as yn, IconServer as Un, IconSlidersHorizontal as Bn, IconSticker as Fn, IconSun as Mn, IconThreeDot as vn, IconTrash as Rn, IconTriangleDown as Xn, IconTriangleUp as bn, IconUndo as Hn, IconUploadSimple as Nn, IconUser as On, IconUserX as Qn, IconWarningCircle as En, IconWrench as Gn, IconX as Wn, IconYandexDisk as Vn } from "./components/Ui/Icons/Icons.js";
+import { ToastProvider as Jn } from "./context/ToastContext/ToastContext.js";
+import { TriaflyContext as jn, TriaflyProvider as qn, useTriafly as Kn } from "./context/TriaflyContext/TriaflyProvider.js";
+import { useBreakpointValueTriafly as _n } from "./context/TriaflyContext/hooks/useBreakpointValue/useBreakpointValue.js";
+import { useThemeLogic as or } from "./context/TriaflyContext/hooks/useTheme/useTheme.js";
+import { useModalState as rr } from "./context/TriaflyContext/hooks/useModal/useModal.js";
 export {
   e as Accordeon,
   I as Alert,
   i as Avatar,
   f as Badge,
-  x as Button,
-  u as ButtonsArray,
-  C as Checkbox,
-  h as CliTextareaInput,
-  T as CustomLink,
-  A as DropdownInput,
-  k as DropdownMenu,
-  P as FileUpload,
-  U as Form,
-  no as IconArrowBendUpRight,
-  ro as IconArrowClockwise,
-  eo as IconArrowDown,
-  co as IconArrowLeft,
-  Io as IconArrowLineDown,
-  to as IconArrowLineLeft,
-  io as IconArrowLineRight,
-  ao as IconArrowLineUp,
-  po as IconArrowRight,
-  lo as IconArrowUp,
-  fo as IconArrowsOut,
-  mo as IconArticle,
-  xo as IconAt,
-  so as IconBellSimple,
-  uo as IconBookOpenText,
-  Co as IconCalendarBlank,
-  wo as IconCaretDown,
-  ho as IconCaretLeft,
-  So as IconCaretRight,
-  To as IconCaretUp,
-  go as IconCaretUpDown,
-  Ao as IconChartPieSlice,
+  u as Button,
+  C as ButtonsArray,
+  h as Checkbox,
+  T as CliTextareaInput,
+  A as CustomLink,
+  x as DatePicker,
+  D as DropdownInput,
+  P as DropdownMenu,
+  U as FileUpload,
+  F as Form,
+  eo as IconArrowBendUpRight,
+  co as IconArrowClockwise,
+  Io as IconArrowDown,
+  to as IconArrowLeft,
+  io as IconArrowLineDown,
+  ao as IconArrowLineLeft,
+  po as IconArrowLineRight,
+  lo as IconArrowLineUp,
+  fo as IconArrowRight,
+  mo as IconArrowUp,
+  xo as IconArrowsOut,
+  so as IconArticle,
+  uo as IconAt,
+  Co as IconBellSimple,
+  wo as IconBookOpenText,
+  ho as IconCalendarBlank,
+  So as IconCaretDown,
+  To as IconCaretLeft,
+  go as IconCaretRight,
+  Ao as IconCaretUp,
+  ko as IconCaretUpDown,
+  Do as IconChartPieSlice,
   Lo as IconChatText,
-  ko as IconCheck,
-  Do as IconCheckCircle,
-  Po as IconChecks,
-  yo as IconCircleNotch,
-  Uo as IconCopy,
-  Bo as IconCornersOut,
-  Fo as IconCsv,
-  Mo as IconCube,
-  vo as IconDatabase,
-  Ro as IconDotsNine,
-  Xo as IconDotsThreeVertical,
-  bo as IconExport,
-  Ho as IconEye,
-  No as IconEyeSlash,
-  Oo as IconFile,
-  Qo as IconFiles,
-  Eo as IconFloppyDisk,
-  Go as IconFolderSimple,
-  Wo as IconFolderSimpleX,
-  Vo as IconFunnel,
-  zo as IconGauge,
-  Jo as IconGear,
-  Yo as IconGoogleDrive,
-  jo as IconHand,
-  qo as IconHeadCircuit,
-  Ko as IconHouse,
-  Zo as IconIcon,
-  _o as IconInfo,
-  $o as IconJoin,
-  on as IconLanguage,
-  nn as IconLink,
-  rn as IconList,
-  en as IconLock,
-  cn as IconLockOpen,
-  In as IconMariaDB,
-  tn as IconMinus,
-  an as IconMongoDB,
-  pn as IconMoon,
-  ln as IconMySQL,
-  fn as IconNavigationArrow,
-  mn as IconNotePencil,
-  xn as IconPassword,
-  sn as IconPen,
-  un as IconPlay,
-  dn as IconPlugsX,
-  Cn as IconPlus,
-  wn as IconPorsgteSQL,
-  hn as IconPresentationChart,
-  Sn as IconQuestion,
-  Tn as IconQuestionFullfilled,
-  gn as IconRedo,
-  An as IconRoleX,
+  Po as IconCheck,
+  yo as IconCheckCircle,
+  Uo as IconChecks,
+  Bo as IconCircleNotch,
+  Fo as IconCopy,
+  Mo as IconCornersOut,
+  vo as IconCsv,
+  Ro as IconCube,
+  Xo as IconDatabase,
+  bo as IconDotsNine,
+  Ho as IconDotsThreeVertical,
+  No as IconExport,
+  Oo as IconEye,
+  Qo as IconEyeSlash,
+  Eo as IconFile,
+  Go as IconFiles,
+  Wo as IconFloppyDisk,
+  Vo as IconFolderSimple,
+  zo as IconFolderSimpleX,
+  Jo as IconFunnel,
+  Yo as IconGauge,
+  jo as IconGear,
+  qo as IconGoogleDrive,
+  Ko as IconHand,
+  Zo as IconHeadCircuit,
+  _o as IconHouse,
+  $o as IconIcon,
+  on as IconInfo,
+  nn as IconJoin,
+  rn as IconLanguage,
+  en as IconLink,
+  cn as IconList,
+  In as IconLock,
+  tn as IconLockOpen,
+  an as IconMariaDB,
+  pn as IconMinus,
+  ln as IconMongoDB,
+  fn as IconMoon,
+  mn as IconMySQL,
+  xn as IconNavigationArrow,
+  sn as IconNotePencil,
+  un as IconPassword,
+  dn as IconPen,
+  Cn as IconPlay,
+  wn as IconPlugsX,
+  hn as IconPlus,
+  Sn as IconPorsgteSQL,
+  Tn as IconPresentationChart,
+  gn as IconQuestion,
+  An as IconQuestionFullfilled,
+  kn as IconRedo,
+  Dn as IconRoleX,
   Ln as IconSearch,
-  kn as IconSearchX,
-  Dn as IconSelection,
-  Pn as IconServer,
-  yn as IconSlidersHorizontal,
-  Un as IconSticker,
-  Bn as IconSun,
-  Fn as IconThreeDot,
-  Mn as IconTrash,
-  vn as IconTriangleDown,
-  Rn as IconTriangleUp,
-  Xn as IconUndo,
-  bn as IconUploadSimple,
-  Hn as IconUser,
-  Nn as IconUserX,
-  On as IconWarningCircle,
-  Qn as IconWrench,
-  En as IconX,
-  Gn as IconYandexDisk,
-  v as Loader,
+  Pn as IconSearchX,
+  yn as IconSelection,
+  Un as IconServer,
+  Bn as IconSlidersHorizontal,
+  Fn as IconSticker,
+  Mn as IconSun,
+  vn as IconThreeDot,
+  Rn as IconTrash,
+  Xn as IconTriangleDown,
+  bn as IconTriangleUp,
+  Hn as IconUndo,
+  Nn as IconUploadSimple,
+  On as IconUser,
+  Qn as IconUserX,
+  En as IconWarningCircle,
+  Gn as IconWrench,
+  Wn as IconX,
+  Vn as IconYandexDisk,
+  X as Loader,
   p as ModalWindow,
-  X as Pagination,
-  H as Radio,
-  O as SearchInput,
-  E as Skeleton,
-  W as Switch,
-  z as Table,
-  $ as Tabs,
-  Y as TextInput,
-  q as TextareaInput,
-  Vn as ToastProvider,
-  Z as Tooltip,
-  Jn as TriaflyContext,
-  Yn as TriaflyProvider,
-  Kn as useBreakpointValueTriafly,
-  F as useForm,
-  or as useModalState,
-  _n as useThemeLogic,
-  jn as useTriafly
+  H as Pagination,
+  O as Radio,
+  E as SearchInput,
+  W as Skeleton,
+  z as Switch,
+  Y as Table,
+  no as Tabs,
+  q as TextInput,
+  Z as TextareaInput,
+  Jn as ToastProvider,
+  $ as Tooltip,
+  jn as TriaflyContext,
+  qn as TriaflyProvider,
+  _n as useBreakpointValueTriafly,
+  v as useForm,
+  rr as useModalState,
+  or as useThemeLogic,
+  Kn as useTriafly
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "triafly-ui-kit",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "UI Kit from Triafly",
   "main": "./dist/main.js",
   "module": "./dist/main.js",