@situaction/traq-ui-ste 1.1.28 → 1.1.30

package/dist/components/editable-field/EditableField.d.ts

@@ -0,0 +1,24 @@
+import { LabelInputProps } from '../input-label/InputLabel';
+
+/**
+ * Props for the EditableField component.
+ * Extends all props from InputLabel to allow reuse.
+ */
+interface EditableFieldProps extends Partial<LabelInputProps> {
+    /** Text displayed as the label above the field */
+    label: string;
+    /** Value to display or edit */
+    value?: string;
+    /** Placeholder shown when the input is empty (in edit mode) */
+    placeholder?: string;
+    /** If true, renders an editable input field */
+    edit: boolean;
+    /** Callback when value is changed (only in edit mode) */
+    onChange?: (val: string) => void;
+}
+/**
+ * EditableField displays either a read-only value or an editable input.
+ * It supports all props from InputLabel.
+ */
+export declare const EditableField: ({ label, value, placeholder, edit, onChange, ...inputLabelProps }: EditableFieldProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editable-field/EditableField.js

@@ -0,0 +1,30 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { InputLabel as c } from "../input-label/InputLabel.js";
+import '../../styles/EditableField.css';const m = "_editableField_1lhi9_30", o = "_statiqueField_1lhi9_39", l = {
+  editableField: m,
+  statiqueField: o
+}, h = ({
+  label: i,
+  value: e,
+  placeholder: d,
+  edit: s,
+  onChange: a,
+  ...r
+  // Spread to pass all remaining props to InputLabel
+}) => s ? /* @__PURE__ */ t(
+  c,
+  {
+    label: i,
+    defaultValue: e || "",
+    placeholder: d || "",
+    onSubmit: a || (() => {
+    }),
+    ...r
+  }
+) : /* @__PURE__ */ n("div", { className: l.editableField, children: [
+  /* @__PURE__ */ t("span", { className: "textSmall", children: i }),
+  /* @__PURE__ */ t("div", { className: `${l.statiqueField} textSmall`, children: (e == null ? void 0 : e.trim()) || " " })
+] });
+export {
+  h as EditableField
+};

package/dist/components/input/Input.js

@@ -1,42 +1,42 @@
-import { jsxs as a, jsx as t, Fragment as c } from "react/jsx-runtime";
-import { useState as p, useRef as d } from "react";
-import '../../styles/Input.css';const j = "_flexHorizontalBetween_84wd5_152", N = "_flexHorizontal_84wd5_152", e = {
-  "input-style": "_input-style_84wd5_47",
-  "input-style-disabled": "_input-style-disabled_84wd5_59",
-  "input-style-focused": "_input-style-focused_84wd5_70",
-  "input-style-secondary": "_input-style-secondary_84wd5_77",
-  "input-style-ghost": "_input-style-ghost_84wd5_91",
-  "input-style-error": "_input-style-error_84wd5_94",
-  "input-container": "_input-container_84wd5_104",
-  "input-style-size-xl": "_input-style-size-xl_84wd5_108",
-  "input-style-size-l": "_input-style-size-l_84wd5_118",
-  "input-style-size-m": "_input-style-size-m_84wd5_128",
-  "input-style-size-s": "_input-style-size-s_84wd5_138",
-  "input-style-radius": "_input-style-radius_84wd5_148",
-  flexHorizontalBetween: j,
+import { jsxs as a, jsx as t, Fragment as y } from "react/jsx-runtime";
+import { useState as c, useRef as p } from "react";
+import '../../styles/Input.css';const F = "_flexHorizontalBetween_xyzdj_157", N = "_flexHorizontal_xyzdj_157", e = {
+  "input-style": "_input-style_xyzdj_52",
+  "input-style-disabled": "_input-style-disabled_xyzdj_64",
+  "input-style-focused": "_input-style-focused_xyzdj_75",
+  "input-style-secondary": "_input-style-secondary_xyzdj_82",
+  "input-style-ghost": "_input-style-ghost_xyzdj_96",
+  "input-style-error": "_input-style-error_xyzdj_99",
+  "input-container": "_input-container_xyzdj_109",
+  "input-style-size-xl": "_input-style-size-xl_xyzdj_113",
+  "input-style-size-l": "_input-style-size-l_xyzdj_123",
+  "input-style-size-m": "_input-style-size-m_xyzdj_133",
+  "input-style-size-s": "_input-style-size-s_xyzdj_143",
+  "input-style-radius": "_input-style-radius_xyzdj_153",
+  flexHorizontalBetween: F,
   flexHorizontal: N
 }, R = ({
-  sizeStyle: _ = "m",
+  sizeStyle: d = "m",
   labelUnit: l,
   status: n = "default",
   childrenLeft: i,
   childrenRight: o,
-  round: y,
+  round: _,
   disabled: u,
-  defaultValue: f,
-  ...w
+  defaultValue: z,
+  ...f
 }) => {
-  const [z, r] = p(!1), [h, x] = p(f || ""), m = d(null), s = d(null), g = () => r(!0), B = () => r(!1), C = (F) => {
-    x(F.target.value);
+  const [x, r] = c(!1), [j, h] = c(z || ""), m = p(null), s = p(null), g = () => r(!0), B = () => r(!1), C = (w) => {
+    h(w.target.value);
   }, H = () => {
     s.current && s.current.focus();
   }, S = [
     e["input-style"],
-    e[`input-style-size-${_}`],
-    y && e["input-style-radius"],
+    e[`input-style-size-${d}`],
+    _ && e["input-style-radius"],
     e.flexHorizontalBetween
   ].filter(Boolean).join(" "), v = [
-    z && e["input-style-focused"],
+    x && e["input-style-focused"],
     u && e["input-style-disabled"],
     n === "secondary" && e["input-style-secondary"],
     n === "ghost" && e["input-style-ghost"]
@@ -57,19 +57,19 @@ import '../../styles/Input.css';const j = "_flexHorizontalBetween_84wd5_152", N
       onBlur: B,
       onClick: H,
       children: [
-        i && /* @__PURE__ */ t(c, { children: i }),
+        i && /* @__PURE__ */ t(y, { children: i }),
         /* @__PURE__ */ t("div", { className: e["input-container"], children: /* @__PURE__ */ t(
           "input",
           {
             autoCorrect: "false",
             disabled: u,
-            value: h,
+            value: j,
             onChange: C,
             ref: s,
-            ...w
+            ...f
           }
         ) }),
-        /* @__PURE__ */ a(c, { children: [
+        /* @__PURE__ */ a(y, { children: [
           l && /* @__PURE__ */ t("div", { children: l }),
           o && /* @__PURE__ */ t("span", { className: e.flexHorizontal, children: o })
         ] })

package/dist/components/input-label/InputLabel.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+
+export interface LabelInputProps {
+    /** Label text displayed above the input */
+    label: string;
+    /** Default value of the input (optional) */
+    defaultValue?: string;
+    /** Size of the input: small, medium, or large (optional, default: "s") */
+    size?: "s" | "m" | "l";
+    /** Callback triggered when the value is submitted */
+    onSubmit: (newValue: string) => void;
+    /** Placeholder shown when the input is empty (in edit mode) */
+    placeholder?: string;
+}
+/** InputLabel is a labeled input component with submit-on-blur and Enter support */
+export declare const InputLabel: FC<LabelInputProps>;

package/dist/components/input-label/InputLabel.js

@@ -0,0 +1,43 @@
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { useState as d, useEffect as f } from "react";
+import { Input as b } from "../input/Input.js";
+import '../../styles/InputLabel.css';const x = "_inputLabel_1x3uf_30", _ = "_fullWidth_1x3uf_39", o = {
+  inputLabel: x,
+  fullWidth: _
+}, W = ({
+  label: a,
+  defaultValue: t,
+  size: u = "s",
+  onSubmit: r,
+  placeholder: y,
+  ...c
+}) => {
+  const [e, s] = d("");
+  f(() => {
+    s(t ?? "");
+  }, [t]);
+  const i = () => {
+    e.trim() !== t && r(e.trim());
+  }, m = (l) => {
+    l.key === "Enter" && i();
+  }, p = () => {
+    i();
+  };
+  return /* @__PURE__ */ h("div", { className: o.inputLabel, children: [
+    /* @__PURE__ */ n("label", { className: "textSmall", children: a }),
+    /* @__PURE__ */ n("div", { className: o.fullWidth, children: /* @__PURE__ */ n(
+      b,
+      {
+        value: e,
+        sizeStyle: u,
+        onChange: (l) => s(l.target.value),
+        onKeyDown: m,
+        onBlur: p,
+        ...c
+      }
+    ) })
+  ] });
+};
+export {
+  W as InputLabel
+};

package/dist/components/panel/side-panel-header/SidePanelHeader.js

@@ -1,60 +1,76 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as C, jsx as e } from "react/jsx-runtime";
 import '../../../styles/Size.css';import '../../../styles/index.css';import '../../../styles/SidePanelHeader.css';/* empty css                       */
 import "react";
-import { IconButton as r } from "../../icon-button/IconButton.js";
-import { Icon as i } from "../../icon/Icon.js";
+import { IconButton as i } from "../../icon-button/IconButton.js";
+import { Icon as t } from "../../icon/Icon.js";
 import "../../modal/Modal.js";
 import "../../theme/ThemeContext.js";
 /* empty css                      */
-const b = "_sidePanelHeader_72g7b_6", h = "_buttonArrow_72g7b_13", p = "_title_72g7b_20", o = {
-  sidePanelHeader: b,
-  buttonArrow: h,
-  title: p
-}, w = ({
-  title: n,
-  icon: s,
-  onClickBack: l,
-  onClickForward: a,
-  onClickClose: d,
-  disabledBack: c = !1,
-  disabledForward: m = !1
-}) => /* @__PURE__ */ t("div", { className: o.sidePanelHeader, children: [
-  /* @__PURE__ */ t("div", { className: o.buttonArrow, children: [
+const c = "_sidePanelHeader_72g7b_6", m = "_buttonArrow_72g7b_13", h = "_title_72g7b_20", r = {
+  sidePanelHeader: c,
+  buttonArrow: m,
+  title: h
+}, v = ({
+  title: s,
+  icon: o,
+  onClickBack: L,
+  onClickForward: l,
+  onClickClose: n,
+  disabledBack: d = !1,
+  disabledForward: a = !1
+}) => /* @__PURE__ */ C("div", { className: r.sidePanelHeader, children: [
+  /* @__PURE__ */ C("div", { className: r.buttonArrow, children: [
     /* @__PURE__ */ e(
-      r,
+      i,
       {
-        disabled: c,
+        disabled: d,
         mode: "tertiary",
         size: "s",
-        onClick: l,
-        children: /* @__PURE__ */ e(i, { icon: "CaretLeft", size: 18 })
+        onClick: L,
+        children: /* @__PURE__ */ e(t, { icon: "CaretLeft", size: 18 })
       }
     ),
     /* @__PURE__ */ e(
-      r,
+      i,
       {
-        disabled: m,
+        disabled: a,
         mode: "tertiary",
         size: "s",
-        onClick: a,
-        children: /* @__PURE__ */ e(i, { icon: "CaretRight", size: 18 })
+        onClick: l,
+        children: /* @__PURE__ */ e(t, { icon: "CaretRight", size: 18 })
       }
     )
   ] }),
-  /* @__PURE__ */ t("div", { className: o.title, children: [
-    s && /* @__PURE__ */ e(i, { icon: s, size: 22 }),
-    /* @__PURE__ */ e("h3", { children: n })
+  /* @__PURE__ */ C("div", { className: r.title, children: [
+    o && /* @__PURE__ */ e(t, { icon: o, size: 22 }),
+    /* @__PURE__ */ e("h3", { children: s })
   ] }),
   /* @__PURE__ */ e(
-    r,
+    i,
     {
       size: "s",
       mode: "tertiary",
-      children: /* @__PURE__ */ e(i, { icon: "SquareHalf", size: 18 }),
-      onClick: d
+      children: /* @__PURE__ */ C("svg", { xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 16 16", fill: "none", children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            opacity: "0.2",
+            d: "M3 2.5L10 2.5L10 4.79312C9.99995 4.85881 10.0128 4.92385 10.0379 4.98455C10.063 5.04525 10.0998 5.10041 10.1462 5.14688L9.88 6.35375C9.92642 6.40022 9.96322 6.45538 9.98832 6.51608C10.0134 6.57677 10.0263 6.64182 10.0262 6.7075L10.0262 9.29312C10.0263 9.3588 10.0134 9.42385 9.98832 9.48455C9.96322 9.54525 9.92642 9.60041 9.88 9.64687L10.1462 10.8538C10.0998 10.9002 10.063 10.9554 10.0379 11.0161C10.0128 11.0768 9.99995 11.1418 10 11.2075L10 13.5L3 13.5C2.86739 13.5 2.74021 13.4473 2.64645 13.3536C2.55268 13.2598 2.5 13.1326 2.5 13L2.5 3C2.5 2.86739 2.55268 2.74022 2.64645 2.64645C2.74021 2.55268 2.86739 2.5 3 2.5Z",
+            fill: "#FFFFFF"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M2 3L2 13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14L13 14C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13L14 3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2L3 2C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73479 2 3ZM3 3L9.5 3L9.5 4.79375C9.49966 4.92502 9.5 5.02 9.5 5.16C9.5 5.3 9.5 5.58 9.5 5.73L9.5 6.70688L9.5 8L9.5 9.29313L9.5 10.43C9.5 10.59 9.5 10.69 9.5 10.85C9.5 10.98 9.49958 11.0755 9.5 11.2069L9.5 13L3 13L3 3ZM13 3L13 13L10.5 13L10.5 11.2069L10.5 10.69C10.5 10.5 10.5 9.87401 10.5 9.73C10.5 9.66401 10.5004 9.4245 10.5 9.29313L10.5 6.70688C10.5004 6.57551 10.5 6.41 10.5 6.28C10.5 6.13 10.5 6 10.5 5.89L10.5 4.79313L10.5 3L13 3ZM6.85375 10.3538C6.80731 10.4002 6.75217 10.4371 6.69147 10.4623C6.63077 10.4874 6.56571 10.5004 6.5 10.5004C6.43429 10.5004 6.36923 10.4874 6.30853 10.4623C6.24783 10.4371 6.19269 10.4002 6.14625 10.3538L4.14625 8.35375C4.09976 8.30731 4.06288 8.25217 4.03772 8.19147C4.01256 8.13077 3.99961 8.06571 3.99961 8C3.99961 7.93429 4.01256 7.86923 4.03772 7.80853C4.06288 7.74783 4.09976 7.69269 4.14625 7.64625L6.14625 5.64625C6.1927 5.5998 6.24785 5.56295 6.30855 5.5378C6.36925 5.51266 6.4343 5.49972 6.5 5.49972C6.5657 5.49972 6.63075 5.51266 6.69145 5.5378C6.75214 5.56295 6.80729 5.5998 6.85375 5.64625C6.9002 5.69271 6.93705 5.74786 6.9622 5.80855C6.98734 5.86925 7.00028 5.9343 7.00028 6C7.00028 6.0657 6.98734 6.13075 6.9622 6.19145C6.93705 6.25215 6.9002 6.3073 6.85375 6.35375L5.70687 7.5L9.5 7.5C9.5 7.54 9.5 7.58 9.5 7.64645C9.5 7.7 9.5 7.86739 9.5 8C9.5 8.13261 9.5 8.25 9.5 8.35355C9.5 8.41 9.5 8.45 9.5 8.5L5.70687 8.5L6.85375 9.64625C6.90024 9.69269 6.93712 9.74783 6.96228 9.80853C6.98744 9.86923 7.00039 9.93429 7.00039 10C7.00039 10.0657 6.98744 10.1308 6.96228 10.1915C6.93712 10.2522 6.90024 10.3073 6.85375 10.3538Z",
+            fill: "#FFFFFF"
+          }
+        )
+      ] }),
+      onClick: n
     }
   )
 ] });
 export {
-  w as SidePanelHeader
+  v as SidePanelHeader
 };

package/dist/components/tabs/Tabs.d.ts

@@ -11,7 +11,10 @@ export interface TabsProps {
     position?: 'center' | 'right' | 'left';
     /** Callback function to handle tab selection, receiving the selected tab's label */
     onTabSelect: (selectedItem: string | ReactNode) => void;
+    /** Full width*/
     fullWidth?: boolean;
+    /** tabs disabled */
+    disabledTabs?: number[];
 }
 /**
  * Tabs component that allows tab navigation with text, icons, or buttons.

package/dist/components/tabs/Tabs.js

@@ -1,9 +1,9 @@
-import { jsxs as $, jsx as a } from "react/jsx-runtime";
-import { useState as u, useRef as s, useLayoutEffect as C } from "react";
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import { useState as f, useRef as u, useLayoutEffect as w } from "react";
 import '../../styles/index.css';import '../../styles/Tabs.css';/* empty css                    */
-import { Button as N } from "../button/Button.js";
-import { IconButton as p } from "../icon-button/IconButton.js";
-const w = "_underline_6o3gh_70", n = {
+import { Button as B } from "../button/Button.js";
+import { IconButton as S } from "../icon-button/IconButton.js";
+const j = "_underline_6o3gh_70", e = {
   "tab-container": "_tab-container_6o3gh_30",
   "tab-container-button": "_tab-container-button_6o3gh_34",
   "tab-container-icon": "_tab-container-icon_6o3gh_39",
@@ -13,68 +13,85 @@ const w = "_underline_6o3gh_70", n = {
   "tab-full-width": "_tab-full-width_6o3gh_51",
   "selected-button": "_selected-button_6o3gh_57",
   "selected-text": "_selected-text_6o3gh_63",
-  underline: w,
+  underline: j,
   "flexHorizontal-center": "_flexHorizontal-center_6o3gh_78",
   "flexHorizontal-left": "_flexHorizontal-left_6o3gh_84",
   "flexHorizontal-right": "_flexHorizontal-right_6o3gh_90"
-}, A = ({
-  listItems: i,
+}, y = ({
+  listItems: c,
   type: o,
-  onTabSelect: f,
-  defaultActiveTab: d = 0,
-  position: h = "left",
-  fullWidth: m = !1
+  onTabSelect: h,
+  defaultActiveTab: m = 0,
+  position: g = "left",
+  fullWidth: x = !1,
+  disabledTabs: b = []
+  // ✅ par défaut vide
 }) => {
-  const [l, g] = u(d), [x, z] = u({}), c = s(null), v = s(null), _ = s([]), b = (t) => {
-    g(t), f(i[t]);
-  }, R = (t) => {
-    if (c.current && t) {
-      const e = t.getBoundingClientRect(), r = c.current.getBoundingClientRect();
-      z({
-        left: `${e.left - r.left}px`,
-        width: `${e.width}px`
+  const [s, v] = f(m), [z, $] = f({}), r = u(null), R = u(null), _ = u([]), d = (t) => {
+    b.includes(t) || (v(t), h(c[t]));
+  }, H = (t) => {
+    if (r.current && t) {
+      const n = t.getBoundingClientRect(), i = r.current.getBoundingClientRect();
+      $({
+        left: `${n.left - i.left}px`,
+        width: `${n.width}px`
       });
     }
-  }, H = [
-    n[`flexHorizontal-${h}`],
-    o === "button" ? n["tab-items-button"] : n["tab-items"]
+  }, C = [
+    e[`flexHorizontal-${g}`],
+    o === "button" ? e["tab-items-button"] : e["tab-items"]
   ].filter(Boolean).join(" ");
-  return C(() => {
-    const t = _.current[l];
+  return w(() => {
+    const t = _.current[s];
     t && requestAnimationFrame(() => {
-      R(t);
+      H(t);
     });
-  }, [l, i.length]), /* @__PURE__ */ $("div", { className: `tab ${n["tab-container"]} ${n[`tab-container-${o}`]} ${m && n["tab-full-width"]}`, ref: c, children: [
-    /* @__PURE__ */ a("div", { className: H, children: i.map((t, e) => /* @__PURE__ */ a(
-      "div",
-      {
-        ref: (r) => _.current[e] = r,
-        className: o === "button" && e === l ? n["selected-button"] : "",
-        children: o === "icon" ? /* @__PURE__ */ a(
-          p,
-          {
-            mode: "icon",
-            size: "s",
-            selected: e === l,
-            onClick: () => b(e),
-            children: t
-          }
-        ) : /* @__PURE__ */ a("div", { className: e === l ? n["selected-text"] : void 0, children: /* @__PURE__ */ a(
-          N,
-          {
-            size: "s",
-            label: t,
-            mode: o === "text" ? "text" : "ghost",
-            selected: e === l,
-            onClick: () => b(e)
-          }
-        ) })
-      },
-      e
-    )) }),
-    o !== "button" && /* @__PURE__ */ a("div", { ref: v, className: n.underline, style: x })
-  ] });
+  }, [s, c.length]), /* @__PURE__ */ p(
+    "div",
+    {
+      className: `tab ${e["tab-container"]} ${e[`tab-container-${o}`]} ${x && e["tab-full-width"]}`,
+      ref: r,
+      children: [
+        /* @__PURE__ */ l("div", { className: C, children: c.map((t, n) => {
+          const i = b.includes(n), a = n === s;
+          return /* @__PURE__ */ l(
+            "div",
+            {
+              ref: (N) => _.current[n] = N,
+              className: `
+                ${o === "button" && a ? e["selected-button"] : ""}
+                ${i ? e["tab-disabled"] : ""}
+              `,
+              children: o === "icon" ? /* @__PURE__ */ l(
+                S,
+                {
+                  mode: "icon",
+                  size: "s",
+                  selected: a,
+                  onClick: () => d(n),
+                  disabled: i,
+                  children: t
+                }
+              ) : /* @__PURE__ */ l("div", { className: a ? e["selected-text"] : void 0, children: /* @__PURE__ */ l(
+                B,
+                {
+                  size: "s",
+                  label: t,
+                  mode: o === "text" ? "text" : "ghost",
+                  selected: a,
+                  onClick: () => d(n),
+                  disabled: i
+                }
+              ) })
+            },
+            n
+          );
+        }) }),
+        o !== "button" && /* @__PURE__ */ l("div", { ref: R, className: e.underline, style: z })
+      ]
+    }
+  );
 };
 export {
-  A as Tabs
+  y as Tabs
 };

package/dist/main.d.ts

@@ -25,4 +25,6 @@ export { NestedListItem } from './components/list/nested-list/item/NestedListIte
 export { Switch } from './components/switch/Switch';
 export { SidePanel } from './components/panel/side-panel/SidePanel';
 export { SidePanelHeader } from './components/panel/side-panel-header/SidePanelHeader';
+export { InputLabel } from './components/input-label/InputLabel';
+export { EditableField } from './components/editable-field/EditableField';
 export { ThemeProvider, useTheme } from './components/theme/ThemeContext';

package/dist/main.js

@@ -1,21 +1,21 @@
 import { Button as m } from "./components/button/Button.js";
 import { ButtonControlledScroll as x } from "./components/buttonControledScroll/ButtonControlledScroll.js";
 import { Input as l } from "./components/input/Input.js";
-import { Tabs as i } from "./components/tabs/Tabs.js";
-import { IconButton as d } from "./components/icon-button/IconButton.js";
+import { Tabs as n } from "./components/tabs/Tabs.js";
+import { IconButton as a } from "./components/icon-button/IconButton.js";
 import { Tag as s } from "./components/tag/Tag.js";
-import { Title as T } from "./components/title/Title.js";
+import { Title as I } from "./components/title/Title.js";
 import { TagCounter as S } from "./components/tag-counter/TagCounter.js";
-import { Checkbox as h } from "./components/checkbox/Checkbox.js";
-import { Tooltip as B } from "./components/tooltip/Tooltip.js";
-import { Select as M } from "./components/select/Select.js";
-import { Calendar as b } from "./components/calendar/Calendar.js";
-import { Accordion as N } from "./components/accordion/Accordion.js";
-import { AccordionItem as v } from "./components/accordion/item/AccordionItem.js";
-import { Card as F } from "./components/card/Card.js";
-import { Icon as j } from "./components/icon/Icon.js";
-import { Menu as y } from "./components/menu/Menu.js";
-import { Modal as D } from "./components/modal/Modal.js";
+import { Checkbox as b } from "./components/checkbox/Checkbox.js";
+import { Tooltip as L } from "./components/tooltip/Tooltip.js";
+import { Select as B } from "./components/select/Select.js";
+import { Calendar as P } from "./components/calendar/Calendar.js";
+import { Accordion as F } from "./components/accordion/Accordion.js";
+import { AccordionItem as k } from "./components/accordion/item/AccordionItem.js";
+import { Card as w } from "./components/card/Card.js";
+import { Icon as H } from "./components/icon/Icon.js";
+import { Menu as q } from "./components/menu/Menu.js";
+import { Modal as z } from "./components/modal/Modal.js";
 import { SelectMultiItems as G } from "./components/select-multi-items/SelectMultiItems.js";
 import { SelectFilterInputTags as K } from "./components/select-filter-input-tags/SelectFilterInputTags.js";
 import { ListControls as Q } from "./components/list/list-controls/ListControls.js";
@@ -24,36 +24,40 @@ import { NestedListItem as W } from "./components/list/nested-list/item/NestedLi
 import { Switch as Y } from "./components/switch/Switch.js";
 import { SidePanel as _ } from "./components/panel/side-panel/SidePanel.js";
 import { SidePanelHeader as oo } from "./components/panel/side-panel-header/SidePanelHeader.js";
-import { ThemeProvider as eo, useTheme as to } from "./components/theme/ThemeContext.js";
+import { InputLabel as eo } from "./components/input-label/InputLabel.js";
+import { EditableField as mo } from "./components/editable-field/EditableField.js";
+import { ThemeProvider as xo, useTheme as fo } from "./components/theme/ThemeContext.js";
 import './styles/Size.css';import './styles/index.css';/* empty css                */
 /* empty css               */
 export {
-  N as Accordion,
-  v as AccordionItem,
+  F as Accordion,
+  k as AccordionItem,
   m as Button,
   x as ButtonControlledScroll,
-  b as Calendar,
-  F as Card,
-  h as Checkbox,
-  j as Icon,
-  d as IconButton,
+  P as Calendar,
+  w as Card,
+  b as Checkbox,
+  mo as EditableField,
+  H as Icon,
+  a as IconButton,
   l as Input,
+  eo as InputLabel,
   Q as ListControls,
-  y as Menu,
-  D as Modal,
+  q as Menu,
+  z as Modal,
   U as NestedList,
   W as NestedListItem,
-  M as Select,
+  B as Select,
   K as SelectFilterInputTags,
   G as SelectMultiItems,
   _ as SidePanel,
   oo as SidePanelHeader,
   Y as Switch,
-  i as Tabs,
+  n as Tabs,
   s as Tag,
   S as TagCounter,
-  eo as ThemeProvider,
-  T as Title,
-  B as Tooltip,
-  to as useTheme
+  xo as ThemeProvider,
+  I as Title,
+  L as Tooltip,
+  fo as useTheme
 };

package/dist/styles/EditableField.css

@@ -0,0 +1 @@
+._editableField_1lhi9_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem}._statiqueField_1lhi9_39{width:100%;border-radius:4px;border:1px solid var(--input-primary-default-border);padding:.5rem}

package/dist/styles/Input.css

@@ -1 +1 @@
-input{font-family:Urbanist,sans-serif;border:none;background-color:transparent;width:100%}input:focus{outline:none;box-shadow:none;border-color:transparent}input::placeholder{font-family:Urbanist,sans-serif;color:var(--input-primary-default-text)}._input-style_84wd5_47{font-family:Urbanist,sans-serif;border:1px solid var(--input-primary-default-border);color:var(--input-primary-default-text)}._input-style_84wd5_47 input{color:var(--input-primary-actived-text)}._input-style_84wd5_47 *{fill:var(--input-primary-default-icons)}._input-style-disabled_84wd5_59{background-color:#0000000d;border-color:var(--input-primary-disabled-border);pointer-events:none}._input-style-disabled_84wd5_59 input{color:var(--input-primary-disabled-text)}._input-style-disabled_84wd5_59 *{fill:var(--input-primary-disabled-icons)}._input-style-focused_84wd5_70{color:var(--input-primary-actived-text);border-color:var(--input-primary-actived-border)}._input-style-focused_84wd5_70 *{fill:var(--icon-selector-button-default-icon)}._input-style-secondary_84wd5_77{color:var(--input-secondary-default-text);border:1px solid var(--input-secondary-default-border);background:var(--input-secondary-default-background)}._input-style-secondary_84wd5_77 input{color:var(--input-primary-actived-text)}._input-style-secondary_84wd5_77 input::placeholder{color:var(--input-secondary-default-text)}._input-style-secondary_84wd5_77 *{fill:var(--input-secondary-default-icons)}._input-style-ghost_84wd5_91{border:none}._input-style-error_84wd5_94{border-color:var(--input-primary-error-border);color:var(--input-primary-error-text)}._input-style-error_84wd5_94 input::placeholder{color:var(--input-primary-error-text)}._input-style-error_84wd5_94 *{fill:var(--input-primary-error-icons)}._input-style_84wd5_47 ._input-container_84wd5_104{position:relative;width:100%}._input-style-size-xl_84wd5_108{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px;gap:.625rem}._input-style-size-xl_84wd5_108 input{line-height:28px}._input-style-size-l_84wd5_118{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px;gap:.5rem}._input-style-size-l_84wd5_118 input{line-height:24px}._input-style-size-m_84wd5_128{padding:.5rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.375rem}._input-style-size-m_84wd5_128 input{line-height:20px}._input-style-size-s_84wd5_138{padding:.375rem;font-size:.875em;line-height:16px;border-radius:4px;gap:.25rem}._input-style-size-s_84wd5_138 input{line-height:16px}._input-style-radius_84wd5_148{border-radius:50px}._flexHorizontalBetween_84wd5_152{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_84wd5_152{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}
+input{font-family:Urbanist,sans-serif;border:none;background-color:transparent;width:100%}input:focus{outline:none;box-shadow:none;border-color:transparent}input::placeholder{font-family:Urbanist,sans-serif;color:var(--input-primary-default-text)}input:-webkit-autofill{box-shadow:0 0 0 1000px transparent inset!important;-webkit-text-fill-color:inherit!important;background-color:transparent!important}._input-style_xyzdj_52{font-family:Urbanist,sans-serif;border:1px solid var(--input-primary-default-border);color:var(--input-primary-default-text)}._input-style_xyzdj_52 input{color:var(--input-primary-actived-text)}._input-style_xyzdj_52 *{fill:var(--input-primary-default-icons)}._input-style-disabled_xyzdj_64{background-color:#0000000d;border-color:var(--input-primary-disabled-border);pointer-events:none}._input-style-disabled_xyzdj_64 input{color:var(--input-primary-disabled-text)}._input-style-disabled_xyzdj_64 *{fill:var(--input-primary-disabled-icons)}._input-style-focused_xyzdj_75{color:var(--input-primary-actived-text);border-color:var(--input-primary-actived-border)}._input-style-focused_xyzdj_75 *{fill:var(--icon-selector-button-default-icon)}._input-style-secondary_xyzdj_82{color:var(--input-secondary-default-text);border:1px solid var(--input-secondary-default-border);background:var(--input-secondary-default-background)}._input-style-secondary_xyzdj_82 input{color:var(--input-primary-actived-text)}._input-style-secondary_xyzdj_82 input::placeholder{color:var(--input-secondary-default-text)}._input-style-secondary_xyzdj_82 *{fill:var(--input-secondary-default-icons)}._input-style-ghost_xyzdj_96{border:none}._input-style-error_xyzdj_99{border-color:var(--input-primary-error-border);color:var(--input-primary-error-text)}._input-style-error_xyzdj_99 input::placeholder{color:var(--input-primary-error-text)}._input-style-error_xyzdj_99 *{fill:var(--input-primary-error-icons)}._input-style_xyzdj_52 ._input-container_xyzdj_109{position:relative;width:100%}._input-style-size-xl_xyzdj_113{padding:1rem;font-size:1.125em;line-height:28px;border-radius:8px;gap:.625rem}._input-style-size-xl_xyzdj_113 input{line-height:28px}._input-style-size-l_xyzdj_123{padding:.75rem;font-size:1em;line-height:24px;border-radius:8px;gap:.5rem}._input-style-size-l_xyzdj_123 input{line-height:24px}._input-style-size-m_xyzdj_133{padding:.5rem;font-size:.875em;line-height:20px;border-radius:4px;gap:.375rem}._input-style-size-m_xyzdj_133 input{line-height:20px}._input-style-size-s_xyzdj_143{padding:.375rem;font-size:.875em;line-height:16px;border-radius:4px;gap:.25rem}._input-style-size-s_xyzdj_143 input{line-height:16px}._input-style-radius_xyzdj_153{border-radius:50px}._flexHorizontalBetween_xyzdj_157{display:flex;justify-content:space-between;align-items:center;flex-direction:row}._flexHorizontal_xyzdj_157{display:flex;justify-content:flex-start;align-items:center;flex-direction:row}

package/dist/styles/InputLabel.css

@@ -0,0 +1 @@
+._inputLabel_1x3uf_30{width:100%;display:flex;justify-content:flex-start;align-items:start;flex-direction:column;gap:.25rem}._fullWidth_1x3uf_39{width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@situaction/traq-ui-ste",
-  "version": "1.1.28",
+  "version": "1.1.30",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",