@situaction/traq-ui-ste 1.1.28 → 1.1.29

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/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.29",
   "description": "library react component Situaction",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",