@intlayer/design-system 5.0.5 → 5.1.0

package/dist/components/DropDown/index.mjs

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
+import { jsx } from "react/jsx-runtime";
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 const DropDown = ({
@@ -6,7 +6,7 @@ const DropDown = ({
   className,
   identifier,
   ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(`group/dropdown relative flex`, className),
@@ -22,7 +22,7 @@ const Trigger = ({
   identifier,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+}) => /* @__PURE__ */ jsx(
   "button",
   {
     className: cn("w-full cursor-pointer", className),
@@ -40,7 +40,7 @@ const Panel = ({
   identifier,
   className,
   ...props
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+}) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
@@ -53,7 +53,7 @@ const Panel = ({
     role: "region",
     "aria-labelledby": `unrollable-panel-button-${identifier}`,
     id: `unrollable-panel-${identifier}`,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    children: /* @__PURE__ */ jsx(
       MaxHeightSmoother,
       {
         isHidden,

package/dist/components/DropDown/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = HTMLAttributes<HTMLButtonElement> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: 'start' | 'end';\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":["jsx"],"mappings":";;;AA+BO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACnC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAqBF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,kCAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/DropDown/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport type DropDownProps = HTMLAttributes<HTMLDivElement> & {\n  identifier: string;\n};\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown identifier=\"dropdown\">\n *   <DropDown.Trigger>\n *     Open dropdown\n *   </DropDown.Trigger>\n *\n *   <DropDown.Panel identifier=\"dropdown\">\n *     <div>Content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nexport const DropDown: DropDownType = ({\n  children,\n  className,\n  identifier,\n  ...props\n}) => (\n  <div\n    className={cn(`group/dropdown relative flex`, className)}\n    aria-label={`DropDown ${identifier}`}\n    id={`unrollable-panel-button-${identifier}`}\n    aria-haspopup\n    {...props}\n  >\n    {children}\n  </div>\n);\n\nexport type TriggerProps = HTMLAttributes<HTMLButtonElement> & {\n  identifier: string;\n};\n\n/**\n * Trigger allowing to open a dropdown menu.\n *\n * Example:\n * ```jsx\n * <DropDown.Trigger identifier=\"dropdown\">\n *   <div>Open dropdown</div>\n * </DropDown.Trigger>\n * ```\n *\n * > Note DropDown.Trigger can be replaced by a button. Don't add a button inside the trigger.\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  ...props\n}) => (\n  <button\n    className={cn('w-full cursor-pointer', className)}\n    aria-label={`Open panel ${identifier}`}\n    {...props}\n  >\n    {children}\n  </button>\n);\n\nexport type PanelProps = HTMLAttributes<HTMLDivElement> & {\n  isFocusable?: boolean;\n  isHidden?: boolean;\n  isOverable?: boolean;\n  identifier: string;\n  align?: 'start' | 'end';\n};\n\n/**\n * Component that opens a dropdown menu when the trigger is clicked.\n *\n * Example:\n * ```jsx\n * <DropDown.Panel identifier=\"dropdown\">\n *   <div>Content</div>\n * </DropDown.Panel>\n * ```\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = 'start',\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute top-[calc(100%+0.5rem)] z-[1000] min-w-full',\n      align === 'start' && 'left-0',\n      align === 'end' && 'right-0',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`unrollable-panel-button-${identifier}`}\n    id={`unrollable-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden !== false ? 'invisible' : 'visible',\n        isOverable &&\n          'group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]',\n        isFocusable &&\n          'group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]'\n      )}\n      {...props}\n    >\n      {children}\n    </MaxHeightSmoother>\n  </div>\n);\n\nDropDown.Trigger = Trigger;\nDropDown.Panel = Panel;\n"],"names":[],"mappings":";;;AA+BO,MAAM,WAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,gCAAgC,SAAS;AAAA,IACvD,cAAY,YAAY,UAAU;AAAA,IAClC,IAAI,2BAA2B,UAAU;AAAA,IACzC,iBAAa;AAAA,IACZ,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAmBF,MAAM,UAA4B,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,yBAAyB,SAAS;AAAA,IAChD,cAAY,cAAc,UAAU;AAAA,IACnC,GAAG;AAAA,IAEH;AAAA,EAAA;AACH;AAqBF,MAAM,QAAwB,CAAC;AAAA,EAC7B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA,UAAU,WAAW;AAAA,MACrB,UAAU,SAAS;AAAA,MACnB;AAAA,IACF;AAAA,IACA,eAAa;AAAA,IACb,MAAK;AAAA,IACL,mBAAiB,2BAA2B,UAAU;AAAA,IACtD,IAAI,oBAAoB,UAAU;AAAA,IAElC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA,aAAa,QAAQ,cAAc;AAAA,UACnC,cACE;AAAA,UACF,eACE;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AACF;AAGF,SAAS,UAAU;AACnB,SAAS,QAAQ;"}

package/dist/components/EditableField/EditableFieldInput.cjs

@@ -1,14 +1,19 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const ReactExports = require("react");
 const components_Input_Input = require("../Input/Input.cjs");
-require("../Input/InputPassword.cjs");
+require("lucide-react");
 require("../Input/Checkbox.cjs");
 const components_EditableField_EditableFieldLayout = require("./EditableFieldLayout.cjs");
-const EditableFieldInput = require$$0.forwardRef(({ onSave, onCancel, ...props }, ref) => {
-  const inputRef = require$$0.useRef(null);
+const EditableFieldInput = ({
+  onSave,
+  onCancel,
+  ref,
+  ...props
+}) => {
+  const inputRef = ReactExports.useRef(null);
   const handleSave = () => {
     onSave?.(inputRef.current?.value ?? "");
   };
@@ -18,22 +23,20 @@ const EditableFieldInput = require$$0.forwardRef(({ onSave, onCancel, ...props }
     }
     onCancel?.();
   };
-  require$$0.useImperativeHandle(ref, () => inputRef.current);
-  const value = require$$0.useMemo(
+  ReactExports.useImperativeHandle(ref, () => inputRef.current);
+  const value = ReactExports.useMemo(
     () => props.value ?? inputRef.current?.value ?? props.defaultValue,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.value, props.defaultValue, inputRef.current?.value]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     components_EditableField_EditableFieldLayout.EditableFieldLayout,
     {
       value,
       onCancel: handleCancel,
       onSave: handleSave,
-      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(components_Input_Input.Input, { ref: inputRef, ...props })
+      children: /* @__PURE__ */ jsxRuntime.jsx(components_Input_Input.Input, { ref: inputRef, ...props })
     }
   );
-});
-EditableFieldInput.displayName = "EditableFieldInput";
+};
 exports.EditableFieldInput = EditableFieldInput;
 //# sourceMappingURL=EditableFieldInput.cjs.map

package/dist/components/EditableField/EditableFieldInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.cjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["forwardRef","useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","Input"],"mappings":";;;;;;;;;AAWa,MAAA,qBAAqBA,sBAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAWC,kBAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoBC,aAAAA,oBAAA,KAAK,MAAM,SAAS,OAAQ;AAEhD,QAAM,QAAQC,WAAA;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAC3D;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACD,2BAAA,kBAAA,IAAAE,uBAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;;"}
+{"version":3,"file":"EditableFieldInput.cjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n};\n"],"names":["useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","Input"],"mappings":";;;;;;;;;AAWO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,WAAWA,oBAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoBC,eAAAA,oBAAA,KAAyB,MAAM,SAAS,OAAQ;AAEpE,QAAM,QAAQC,aAAA;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAC3D;AAGE,SAAAC,2BAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACD,2BAAA,IAAAE,uBAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ;;"}

package/dist/components/EditableField/EditableFieldInput.d.ts

@@ -1,8 +1,9 @@
+import { FC } from 'react';
 import { InputProps } from '../Input';
 type EditableFieldInputProps = InputProps & {
     onSave?: (value: string) => void;
     onCancel?: () => void;
 };
-export declare const EditableFieldInput: import('react').ForwardRefExoticComponent<Omit<EditableFieldInputProps, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export declare const EditableFieldInput: FC<EditableFieldInputProps>;
 export {};
 //# sourceMappingURL=EditableFieldInput.d.ts.map

package/dist/components/EditableField/EditableFieldInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mIAuC7B,CAAC"}
+{"version":3,"file":"EditableFieldInput.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,EAAkD,MAAM,OAAO,CAAC;AAChF,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAGlD,KAAK,uBAAuB,GAAG,UAAU,GAAG;IAC1C,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyC1D,CAAC"}

package/dist/components/EditableField/EditableFieldInput.mjs

@@ -1,11 +1,16 @@
 "use client";
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
-import { forwardRef, useRef, useImperativeHandle, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useImperativeHandle, useMemo } from "react";
 import { Input } from "../Input/Input.mjs";
-import "../Input/InputPassword.mjs";
+import "lucide-react";
 import "../Input/Checkbox.mjs";
 import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
-const EditableFieldInput = forwardRef(({ onSave, onCancel, ...props }, ref) => {
+const EditableFieldInput = ({
+  onSave,
+  onCancel,
+  ref,
+  ...props
+}) => {
   const inputRef = useRef(null);
   const handleSave = () => {
     onSave?.(inputRef.current?.value ?? "");
@@ -19,20 +24,18 @@ const EditableFieldInput = forwardRef(({ onSave, onCancel, ...props }, ref) => {
   useImperativeHandle(ref, () => inputRef.current);
   const value = useMemo(
     () => props.value ?? inputRef.current?.value ?? props.defaultValue,
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [props.value, props.defaultValue, inputRef.current?.value]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     EditableFieldLayout,
     {
       value,
       onCancel: handleCancel,
       onSave: handleSave,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { ref: inputRef, ...props })
+      children: /* @__PURE__ */ jsx(Input, { ref: inputRef, ...props })
     }
   );
-});
-EditableFieldInput.displayName = "EditableFieldInput";
+};
 export {
   EditableFieldInput
 };

package/dist/components/EditableField/EditableFieldInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.mjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput = forwardRef<\n  HTMLInputElement,\n  EditableFieldInputProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldInput.displayName = 'EditableFieldInput';\n"],"names":["jsx"],"mappings":";;;;;;;AAWa,MAAA,qBAAqB,WAGhC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoB,sBAAA,KAAK,MAAM,SAAS,OAAQ;AAEhD,QAAM,QAAQ;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAC3D;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAACA,kCAAA,IAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ,CAAC;AAED,mBAAmB,cAAc;"}
+{"version":3,"file":"EditableFieldInput.mjs","sources":["../../../src/components/EditableField/EditableFieldInput.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport { Input, type InputProps } from '../Input';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldInputProps = InputProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldInput: FC<EditableFieldInputProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(inputRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (inputRef.current) {\n      inputRef.current.value = inputRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  // Expose the input ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => inputRef.current!);\n\n  const value = useMemo(\n    () =>\n      (props.value as string) ??\n      inputRef.current?.value ??\n      (props.defaultValue as string),\n\n    [props.value, props.defaultValue, inputRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={value}\n      onCancel={handleCancel}\n      onSave={handleSave}\n    >\n      <Input ref={inputRef} {...props} />\n    </EditableFieldLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAWO,MAAM,qBAAkD,CAAC;AAAA,EAC9D;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,WAAW,OAAyB,IAAI;AAE9C,QAAM,aAAa,MAAM;AAEd,aAAA,SAAS,SAAS,SAAS,EAAE;AAAA,EACxC;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,SAAS,SAAS;AACpB,eAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAAA,IAAA;AAEjD,eAAA;AAAA,EACb;AAGoB,sBAAA,KAAyB,MAAM,SAAS,OAAQ;AAEpE,QAAM,QAAQ;AAAA,IACZ,MACG,MAAM,SACP,SAAS,SAAS,SACjB,MAAM;AAAA,IAET,CAAC,MAAM,OAAO,MAAM,cAAc,SAAS,SAAS,KAAK;AAAA,EAC3D;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,UAAC,oBAAA,OAAA,EAAM,KAAK,UAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EACnC;AAEJ;"}

package/dist/components/EditableField/EditableFieldLayout.cjs

@@ -1,9 +1,9 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
+const jsxRuntime = require("react/jsx-runtime");
 const lucideReact = require("lucide-react");
-const require$$0 = require("react");
+const ReactExports = require("react");
 const utils_cn = require("../../utils/cn.cjs");
 const components_Button_Button = require("../Button/Button.cjs");
 const EditableFieldLayout = ({
@@ -15,8 +15,8 @@ const EditableFieldLayout = ({
   isDisabled,
   ...props
 }) => {
-  const [isEditing, setIsEditing] = require$$0.useState(false);
-  const editableFieldRef = require$$0.useRef(null);
+  const [isEditing, setIsEditing] = ReactExports.useState(false);
+  const editableFieldRef = ReactExports.useRef(null);
   const handleSave = (e) => {
     e.stopPropagation();
     setIsEditing(false);
@@ -28,7 +28,7 @@ const EditableFieldLayout = ({
     onCancel();
   };
   const result = !value || value === "" ? "-" : value;
-  const handleClickOutside = require$$0.useCallback(
+  const handleClickOutside = ReactExports.useCallback(
     (e) => {
       const selection = window.getSelection();
       if (selection && selection.toString().trim() !== "") {
@@ -41,7 +41,7 @@ const EditableFieldLayout = ({
     },
     [onSave]
   );
-  require$$0.useEffect(() => {
+  ReactExports.useEffect(() => {
     if (isEditing) {
       document.addEventListener("click", handleClickOutside);
     } else {
@@ -49,7 +49,7 @@ const EditableFieldLayout = ({
     }
     return () => document.removeEventListener("click", handleClickOutside);
   }, [handleClickOutside, isEditing]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
       className: "group/editable-field flex gap-2",
@@ -62,13 +62,13 @@ const EditableFieldLayout = ({
       ref: editableFieldRef,
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: utils_cn.cn("flex flex-1 gap-2", isEditing ? "display" : "hidden"),
             children: [
               children,
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 components_Button_Button.Button,
                 {
                   label: "Save",
@@ -81,7 +81,7 @@ const EditableFieldLayout = ({
                   className: "!text-current"
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 components_Button_Button.Button,
                 {
                   label: "Cancel",
@@ -98,13 +98,13 @@ const EditableFieldLayout = ({
           },
           String(isEditing)
         ),
-        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: utils_cn.cn("flex flex-1 gap-2", isEditing ? "hidden" : "display"),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6", children: result }),
-              /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6", children: result }),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 components_Button_Button.Button,
                 {
                   label: "Edit",

package/dist/components/EditableField/EditableFieldLayout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldLayout.cjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n\n'use client';\n\nimport { Pencil, Check, X } from 'lucide-react';\nimport {\n  type FC,\n  type ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          color=\"text\"\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n        />\n        <Button\n          label=\"Cancel\"\n          color=\"text\"\n          variant=\"hoverable\"\n          className=\"!text-current\"\n          size=\"icon-sm\"\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color=\"text\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","jsxs","cn","jsx","Button","Check","X","Pencil"],"mappings":"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"}
+{"version":3,"file":"EditableFieldLayout.cjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n\n'use client';\n\nimport { Pencil, Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type FC,\n  type ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          color=\"text\"\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n        />\n        <Button\n          label=\"Cancel\"\n          color=\"text\"\n          variant=\"hoverable\"\n          className=\"!text-current\"\n          size=\"icon-sm\"\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color=\"text\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":["useState","useRef","useCallback","useEffect","jsxs","cn","jsx","Button","Check","X","Pencil"],"mappings":"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"}

package/dist/components/EditableField/EditableFieldLayout.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode, HTMLAttributes } from 'react';
+import { HTMLAttributes, FC, ReactNode } from 'react';
 type EditableFieldLayoutProps = {
     value?: string | null | undefined;
     onCancel: () => void;

package/dist/components/EditableField/EditableFieldLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldLayout.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,EAAE,EACP,KAAK,SAAS,EAKd,cAAc,EACf,MAAM,OAAO,CAAC;AAIf,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsH5D,CAAC"}
+{"version":3,"file":"EditableFieldLayout.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,EAAE,EACP,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,KAAK,wBAAwB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC;AAEpC,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsH5D,CAAC"}

package/dist/components/EditableField/EditableFieldLayout.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Check, X, Pencil } from "lucide-react";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { cn } from "../../utils/cn.mjs";
@@ -47,7 +47,7 @@ const EditableFieldLayout = ({
     }
     return () => document.removeEventListener("click", handleClickOutside);
   }, [handleClickOutside, isEditing]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       className: "group/editable-field flex gap-2",
@@ -60,13 +60,13 @@ const EditableFieldLayout = ({
       ref: editableFieldRef,
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn("flex flex-1 gap-2", isEditing ? "display" : "hidden"),
             children: [
               children,
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsx(
                 Button,
                 {
                   label: "Save",
@@ -79,7 +79,7 @@ const EditableFieldLayout = ({
                   className: "!text-current"
                 }
               ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsx(
                 Button,
                 {
                   label: "Cancel",
@@ -96,13 +96,13 @@ const EditableFieldLayout = ({
           },
           String(isEditing)
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn("flex flex-1 gap-2", isEditing ? "hidden" : "display"),
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6", children: result }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
+              /* @__PURE__ */ jsx("span", { className: "ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6", children: result }),
+              /* @__PURE__ */ jsx(
                 Button,
                 {
                   label: "Edit",

package/dist/components/EditableField/EditableFieldLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldLayout.mjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n\n'use client';\n\nimport { Pencil, Check, X } from 'lucide-react';\nimport {\n  type FC,\n  type ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  HTMLAttributes,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          color=\"text\"\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n        />\n        <Button\n          label=\"Cancel\"\n          color=\"text\"\n          variant=\"hoverable\"\n          className=\"!text-current\"\n          size=\"icon-sm\"\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color=\"text\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":["jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"EditableFieldLayout.mjs","sources":["../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/click-events-have-key-events */\n\n'use client';\n\nimport { Pencil, Check, X } from 'lucide-react';\nimport {\n  type HTMLAttributes,\n  type FC,\n  type ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button } from '../Button';\n\ntype EditableFieldLayoutProps = {\n  value?: string | null | undefined;\n  onCancel: () => void;\n  onSave: () => void;\n  children: ReactNode;\n  isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n  value = '',\n  onCancel,\n  onSave,\n  onClick,\n  children,\n  isDisabled,\n  ...props\n}) => {\n  const [isEditing, setIsEditing] = useState(false);\n  const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n  const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onSave();\n  };\n\n  const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    setIsEditing(false);\n    onCancel();\n  };\n\n  const result = !value || value === '' ? '-' : value;\n\n  const handleClickOutside = useCallback(\n    (e: MouseEvent) => {\n      // Check if there's any text selected\n      const selection = window.getSelection();\n      if (selection && selection.toString().trim() !== '') {\n        // If there is a selection, do not trigger the save and exit early.\n        return;\n      }\n\n      // Proceed if the click is truly outside the component.\n      if (\n        editableFieldRef.current &&\n        !editableFieldRef.current.contains(e.target as Node)\n      ) {\n        setIsEditing(false);\n        onSave();\n      }\n    },\n    [onSave]\n  );\n\n  useEffect(() => {\n    if (isEditing) {\n      document.addEventListener('click', handleClickOutside);\n    } else {\n      document.removeEventListener('click', handleClickOutside);\n    }\n\n    return () => document.removeEventListener('click', handleClickOutside);\n  }, [handleClickOutside, isEditing]);\n\n  return (\n    <span\n      className=\"group/editable-field flex gap-2\"\n      role=\"button\"\n      tabIndex={0}\n      onClick={(e) => {\n        setIsEditing(true);\n        onClick?.(e);\n      }}\n      ref={editableFieldRef}\n      {...props}\n    >\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n        key={String(isEditing)}\n      >\n        {children}\n        <Button\n          label=\"Save\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          color=\"text\"\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n        />\n        <Button\n          label=\"Cancel\"\n          color=\"text\"\n          variant=\"hoverable\"\n          className=\"!text-current\"\n          size=\"icon-sm\"\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n        />\n      </div>\n\n      <div\n        className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n      >\n        <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n          {result}\n        </span>\n        <Button\n          label=\"Edit\"\n          Icon={Pencil}\n          color=\"text\"\n          variant=\"hoverable\"\n          size=\"icon-sm\"\n          className=\"invisible !text-current group-hover/editable-field:visible\"\n          disabled={isDisabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            setIsEditing(true);\n          }}\n        />\n      </div>\n    </span>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAyBO,MAAM,sBAAoD,CAAC;AAAA,EAChE,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAC1C,QAAA,mBAAmB,OAAwB,IAAI;AAE/C,QAAA,aAAa,CAAC,MAA2C;AAC7D,MAAE,gBAAgB;AAClB,iBAAa,KAAK;AACX,WAAA;AAAA,EACT;AAEM,QAAA,eAAe,CAAC,MAA2C;AAC/D,MAAE,gBAAgB;AAClB,iBAAa,KAAK;AACT,aAAA;AAAA,EACX;AAEA,QAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;AAE9C,QAAM,qBAAqB;AAAA,IACzB,CAAC,MAAkB;AAEX,YAAA,YAAY,OAAO,aAAa;AACtC,UAAI,aAAa,UAAU,SAAW,EAAA,KAAA,MAAW,IAAI;AAEnD;AAAA,MAAA;AAKA,UAAA,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,MAAc,GACnD;AACA,qBAAa,KAAK;AACX,eAAA;AAAA,MAAA;AAAA,IAEX;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,YAAU,MAAM;AACd,QAAI,WAAW;AACJ,eAAA,iBAAiB,SAAS,kBAAkB;AAAA,IAAA,OAChD;AACI,eAAA,oBAAoB,SAAS,kBAAkB;AAAA,IAAA;AAG1D,WAAO,MAAM,SAAS,oBAAoB,SAAS,kBAAkB;AAAA,EAAA,GACpE,CAAC,oBAAoB,SAAS,CAAC;AAGhC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,CAAC,MAAM;AACd,qBAAa,IAAI;AACjB,kBAAU,CAAC;AAAA,MACb;AAAA,MACA,KAAK;AAAA,MACJ,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,qBAAqB,YAAY,YAAY,QAAQ;AAAA,YAGlE,UAAA;AAAA,cAAA;AAAA,cACD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,OAAM;AAAA,kBACN,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,WAAU;AAAA,gBAAA;AAAA,cACZ;AAAA,cACA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,OAAM;AAAA,kBACN,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,MAAK;AAAA,kBACL,MAAM;AAAA,kBACN,SAAS;AAAA,kBACT,UAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,UAtBK,OAAO,SAAS;AAAA,QAuBvB;AAAA,QAEA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,qBAAqB,YAAY,WAAW,SAAS;AAAA,YAEnE,UAAA;AAAA,cAAC,oBAAA,QAAA,EAAK,WAAU,8DACb,UACH,QAAA;AAAA,cACA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,MAAM;AAAA,kBACN,OAAM;AAAA,kBACN,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,WAAU;AAAA,kBACV,UAAU;AAAA,kBACV,SAAS,CAAC,MAAM;AACd,sBAAE,gBAAgB;AAClB,iCAAa,IAAI;AAAA,kBAAA;AAAA,gBACnB;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/EditableField/EditableFieldTextArea.cjs

@@ -1,14 +1,23 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("../../jsx-runtime-CgFM7lM3.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const ReactExports = require("react");
 const components_TextArea_AutoSizeTextArea = require("../TextArea/AutoSizeTextArea.cjs");
-require("../TextArea/TextArea.cjs");
+require("clsx");
+require("tailwind-merge");
+require("../Input/Input.cjs");
+require("lucide-react");
+require("../Input/Checkbox.cjs");
 const components_EditableField_EditableFieldLayout = require("./EditableFieldLayout.cjs");
-const EditableFieldTextArea = require$$0.forwardRef(({ onSave, onCancel, ...props }, ref) => {
-  const textAreaRef = require$$0.useRef(null);
-  require$$0.useImperativeHandle(ref, () => textAreaRef.current);
+const EditableFieldTextArea = ({
+  onSave,
+  onCancel,
+  ref,
+  ...props
+}) => {
+  const textAreaRef = ReactExports.useRef(null);
+  ReactExports.useImperativeHandle(ref, () => textAreaRef.current);
   const handleSave = () => {
     onSave?.(textAreaRef.current?.value ?? "");
   };
@@ -18,12 +27,8 @@ const EditableFieldTextArea = require$$0.forwardRef(({ onSave, onCancel, ...prop
     }
     onCancel?.();
   };
-  const memoValue = require$$0.useMemo(
-    () => props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.value, props.defaultValue, textAreaRef.current?.value]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  const memoValue = props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
     components_EditableField_EditableFieldLayout.EditableFieldLayout,
     {
       value: memoValue,
@@ -33,7 +38,7 @@ const EditableFieldTextArea = require$$0.forwardRef(({ onSave, onCancel, ...prop
         e.preventDefault();
         e.stopPropagation();
       },
-      children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         components_TextArea_AutoSizeTextArea.AutoSizedTextArea,
         {
           className: "leading-6",
@@ -47,7 +52,6 @@ const EditableFieldTextArea = require$$0.forwardRef(({ onSave, onCancel, ...prop
       )
     }
   );
-});
-EditableFieldTextArea.displayName = "EditableFieldTextArea";
+};
 exports.EditableFieldTextArea = EditableFieldTextArea;
 //# sourceMappingURL=EditableFieldTextArea.cjs.map

package/dist/components/EditableField/EditableFieldTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.cjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue = useMemo(\n    () =>\n      (props.value as string) ??\n      textAreaRef.current?.value ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, textAreaRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["forwardRef","useRef","useImperativeHandle","useMemo","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;AAWa,MAAA,wBAAwBA,sBAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAcC,kBAA4B,IAAI;AAGhCC,aAAAA,oBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAYC,WAAA;AAAA,IAChB,MACG,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAAA;AAAA,IAEF,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,SAAS,KAAK;AAAA,EAC9D;AAGE,SAAAC,2BAAA,kBAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAD,2BAAA,kBAAA;AAAA,QAACE,qCAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;;"}
+{"version":3,"file":"EditableFieldTextArea.cjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useImperativeHandle, type FC, type Ref } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue =\n    (props.value as string) ??\n    textAreaRef.current?.value ??\n    (props.defaultValue as string) ??\n    '';\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n};\n"],"names":["useRef","useImperativeHandle","jsx","EditableFieldLayout","AutoSizedTextArea"],"mappings":";;;;;;;;;;;;AAWO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAcA,oBAA4B,IAAI;AAGhCC,eAAAA,oBAAA,KAAyB,MAAM,YAAY,OAAQ;AAEvE,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAGA,SAAAC,2BAAA;AAAA,IAACC,6CAAA;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAD,2BAAA;AAAA,QAACE,qCAAA;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;;"}

package/dist/components/EditableField/EditableFieldTextArea.d.ts

@@ -1,8 +1,9 @@
+import { FC } from 'react';
 import { AutoSizedTextAreaProps } from '../TextArea';
 type EditableFieldTextAreaProps = AutoSizedTextAreaProps & {
     onSave?: (value: string) => void;
     onCancel?: () => void;
 };
-export declare const EditableFieldTextArea: import('react').ForwardRefExoticComponent<Omit<EditableFieldTextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>;
+export declare const EditableFieldTextArea: FC<EditableFieldTextAreaProps>;
 export {};
 //# sourceMappingURL=EditableFieldTextArea.d.ts.map

package/dist/components/EditableField/EditableFieldTextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG7E,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,yIAoDhC,CAAC"}
+{"version":3,"file":"EditableFieldTextArea.d.ts","sourceRoot":"","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,EAAE,EAAY,MAAM,OAAO,CAAC;AACvE,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAG7E,KAAK,0BAA0B,GAAG,sBAAsB,GAAG;IACzD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAkDhE,CAAC"}

package/dist/components/EditableField/EditableFieldTextArea.mjs

@@ -1,10 +1,19 @@
 "use client";
-import { j as jsxRuntimeExports } from "../../jsx-runtime-DQkoUcjV.js";
-import { forwardRef, useRef, useImperativeHandle, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useImperativeHandle } from "react";
 import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
-import "../TextArea/TextArea.mjs";
+import "clsx";
+import "tailwind-merge";
+import "../Input/Input.mjs";
+import "lucide-react";
+import "../Input/Checkbox.mjs";
 import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
-const EditableFieldTextArea = forwardRef(({ onSave, onCancel, ...props }, ref) => {
+const EditableFieldTextArea = ({
+  onSave,
+  onCancel,
+  ref,
+  ...props
+}) => {
   const textAreaRef = useRef(null);
   useImperativeHandle(ref, () => textAreaRef.current);
   const handleSave = () => {
@@ -16,12 +25,8 @@ const EditableFieldTextArea = forwardRef(({ onSave, onCancel, ...props }, ref) =
     }
     onCancel?.();
   };
-  const memoValue = useMemo(
-    () => props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [props.value, props.defaultValue, textAreaRef.current?.value]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const memoValue = props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "";
+  return /* @__PURE__ */ jsx(
     EditableFieldLayout,
     {
       value: memoValue,
@@ -31,7 +36,7 @@ const EditableFieldTextArea = forwardRef(({ onSave, onCancel, ...props }, ref) =
         e.preventDefault();
         e.stopPropagation();
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsx(
         AutoSizedTextArea,
         {
           className: "leading-6",
@@ -45,8 +50,7 @@ const EditableFieldTextArea = forwardRef(({ onSave, onCancel, ...props }, ref) =
       )
     }
   );
-});
-EditableFieldTextArea.displayName = "EditableFieldTextArea";
+};
 export {
   EditableFieldTextArea
 };

package/dist/components/EditableField/EditableFieldTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.mjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useRef, useImperativeHandle, useMemo } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea = forwardRef<\n  HTMLTextAreaElement,\n  EditableFieldTextAreaProps\n>(({ onSave, onCancel, ...props }, ref) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue = useMemo(\n    () =>\n      (props.value as string) ??\n      textAreaRef.current?.value ??\n      (props.defaultValue as string) ??\n      '',\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.value, props.defaultValue, textAreaRef.current?.value]\n  );\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n});\n\nEditableFieldTextArea.displayName = 'EditableFieldTextArea';\n"],"names":["jsx"],"mappings":";;;;;;AAWa,MAAA,wBAAwB,WAGnC,CAAC,EAAE,QAAQ,UAAU,GAAG,MAAM,GAAG,QAAQ;AACnC,QAAA,cAAc,OAA4B,IAAI;AAGhC,sBAAA,KAAK,MAAM,YAAY,OAAQ;AAEnD,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YAAY;AAAA,IAChB,MACG,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAAA;AAAA,IAEF,CAAC,MAAM,OAAO,MAAM,cAAc,YAAY,SAAS,KAAK;AAAA,EAC9D;AAGE,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAAA,kCAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ,CAAC;AAED,sBAAsB,cAAc;"}
+{"version":3,"file":"EditableFieldTextArea.mjs","sources":["../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useRef, useImperativeHandle, type FC, type Ref } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  onSave?: (value: string) => void;\n  onCancel?: () => void;\n};\n\nexport const EditableFieldTextArea: FC<EditableFieldTextAreaProps> = ({\n  onSave,\n  onCancel,\n  ref,\n  ...props\n}) => {\n  const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Expose the text area ref to parent components\n  useImperativeHandle(ref as Ref<HTMLElement>, () => textAreaRef.current!);\n\n  const handleSave = () => {\n    // Your save logic here\n    onSave?.(textAreaRef.current?.value ?? '');\n  };\n\n  const handleCancel = () => {\n    if (textAreaRef.current) {\n      textAreaRef.current.value = textAreaRef.current.defaultValue ?? '';\n    }\n    onCancel?.();\n  };\n\n  const memoValue =\n    (props.value as string) ??\n    textAreaRef.current?.value ??\n    (props.defaultValue as string) ??\n    '';\n\n  return (\n    <EditableFieldLayout\n      value={memoValue}\n      onCancel={handleCancel}\n      onSave={handleSave}\n      onClick={(e) => {\n        e.preventDefault();\n        e.stopPropagation();\n      }}\n    >\n      <AutoSizedTextArea\n        className=\"leading-6\"\n        ref={textAreaRef}\n        onClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        {...props}\n      />\n    </EditableFieldLayout>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAWO,MAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACE,QAAA,cAAc,OAA4B,IAAI;AAGhC,sBAAA,KAAyB,MAAM,YAAY,OAAQ;AAEvE,QAAM,aAAa,MAAM;AAEd,aAAA,YAAY,SAAS,SAAS,EAAE;AAAA,EAC3C;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY,SAAS;AACvB,kBAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAAA,IAAA;AAEvD,eAAA;AAAA,EACb;AAEA,QAAM,YACH,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;AAGA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS,CAAC,MAAM;AACd,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAAA,MACpB;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,KAAK;AAAA,UACL,SAAS,CAAC,MAAM;AACd,cAAE,eAAe;AACjB,cAAE,gBAAgB;AAAA,UACpB;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EACF;AAEJ;"}