@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1,178 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { Button } from "../Button/Button.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/DropDown/index.tsx
-/**
-* DropDown Component
-*
-* A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.
-* Supports hover, focus, and controlled visibility states with proper accessibility features.
-*
-* @example
-* ```tsx
-* // Basic hover dropdown
-* <DropDown identifier="menu">
-*   <DropDown.Trigger identifier="menu">
-*     Open Menu
-*   </DropDown.Trigger>
-*   <DropDown.Panel identifier="menu" isOverable>
-*     <div>Menu content</div>
-*   </DropDown.Panel>
-* </DropDown>
-*
-* // Focus-based dropdown for accessibility
-* <DropDown identifier="accessible-menu">
-*   <DropDown.Trigger identifier="accessible-menu">
-*     Keyboard Accessible Menu
-*   </DropDown.Trigger>
-*   <DropDown.Panel identifier="accessible-menu" isFocusable>
-*     <div>Accessible content</div>
-*   </DropDown.Panel>
-* </DropDown>
-*
-* // Controlled dropdown
-* <DropDown identifier="controlled">
-*   <DropDown.Trigger identifier="controlled">
-*     Controlled Menu
-*   </DropDown.Trigger>
-*   <DropDown.Panel identifier="controlled" isHidden={!isOpen}>
-*     <div>Controlled content</div>
-*   </DropDown.Panel>
-* </DropDown>
-* ```
-*
-* @component
-* @accessibility
-* - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)
-* - Supports keyboard navigation with focus management
-* - Screen reader compatible with proper role and labeling
-* - Maintains focus trap within dropdown when needed
-*/
-const DropDown = ({ children, className, identifier, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn(`group/dropdown relative flex`, className),
-	"aria-label": `DropDown ${identifier}`,
-	id: `dropdown-container-${identifier}`,
-	...props,
-	children
-});
-/**
-* DropDown.Trigger Component
-*
-* The clickable/focusable element that controls the dropdown panel visibility.
-* Built on top of the Button component with enhanced dropdown-specific behaviors.
-*
-* @example
-* ```tsx
-* <DropDown.Trigger identifier="menu">
-*   <div>Click to open</div>
-* </DropDown.Trigger>
-* ```
-*
-* @component
-* @accessibility
-* - Automatically generates appropriate ARIA attributes
-* - Maintains proper focus management across browsers
-* - Works with keyboard navigation (Tab, Enter, Space)
-* - Announces dropdown state to screen readers
-*
-* @note Don't nest Button components inside the Trigger - it's already a button
-*/
-const Trigger = ({ children, identifier, className, label, ...props }) => /* @__PURE__ */ jsx(Button, {
-	className: cn([
-		"w-full cursor-pointer",
-		"group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4",
-		className
-	]),
-	label: label ?? `Open panel ${identifier}`,
-	"aria-haspopup": "true",
-	"aria-controls": `dropdown-panel-${identifier}`,
-	id: `dropdown-trigger-${identifier}`,
-	onClick: (e) => {
-		e.currentTarget.focus();
-	},
-	variant: "none",
-	...props,
-	children
-});
-/**
-* Horizontal alignment options for the dropdown panel relative to the trigger
-*/
-let DropDownAlign = /* @__PURE__ */ function(DropDownAlign) {
-	/** Align panel to the start (left in LTR, right in RTL) of the trigger */
-	DropDownAlign["START"] = "start";
-	/** Align panel to the end (right in LTR, left in RTL) of the trigger */
-	DropDownAlign["END"] = "end";
-	return DropDownAlign;
-}({});
-/**
-* Vertical alignment options for the dropdown panel relative to the trigger
-*/
-let DropDownYAlign = /* @__PURE__ */ function(DropDownYAlign) {
-	/** Position panel below the trigger (default) */
-	DropDownYAlign["BELOW"] = "below";
-	/** Position panel above the trigger */
-	DropDownYAlign["ABOVE"] = "above";
-	return DropDownYAlign;
-}({});
-/**
-* DropDown.Panel Component
-*
-* The content area that appears when the dropdown is triggered.
-* Supports multiple trigger methods (hover, focus, controlled) with smooth animations.
-*
-* @example
-* ```tsx
-* // Hover-triggered panel
-* <DropDown.Panel identifier="menu" isOverable>
-*   <div>Content appears on hover</div>
-* </DropDown.Panel>
-*
-* // Focus-triggered panel (accessible)
-* <DropDown.Panel identifier="menu" isFocusable>
-*   <div>Content appears on focus</div>
-* </DropDown.Panel>
-*
-* // Controlled panel
-* <DropDown.Panel identifier="menu" isHidden={!isOpen}>
-*   <div>Content visibility controlled externally</div>
-* </DropDown.Panel>
-*
-* // Right-aligned panel
-* <DropDown.Panel identifier="menu" align={DropDownAlign.END} isOverable>
-*   <div>Right-aligned content</div>
-* </DropDown.Panel>
-*
-* // Panel opening above the trigger
-* <DropDown.Panel identifier="menu" yAlign={DropDownYAlign.ABOVE} isOverable>
-*   <div>Content appears above</div>
-* </DropDown.Panel>
-* ```
-*
-* @component
-* @accessibility
-* - Proper ARIA attributes (role, aria-labelledby, aria-hidden)
-* - Smooth height transitions with MaxHeightSmoother
-* - Keyboard navigation support when isFocusable is enabled
-* - Screen reader announcements for state changes
-*/
-const Panel = ({ children, isHidden = void 0, isOverable = false, isFocusable = false, align = DropDownAlign.START, yAlign = DropDownYAlign.BELOW, identifier, className, ...props }) => /* @__PURE__ */ jsx("div", {
-	className: cn("absolute z-100 min-w-full", align === DropDownAlign.START && "left-0", align === DropDownAlign.END && "right-0", yAlign === DropDownYAlign.BELOW && "top-[calc(100%+0.5rem)]", yAlign === DropDownYAlign.ABOVE && "bottom-[calc(100%+0.5rem)]", className),
-	"aria-hidden": isHidden,
-	role: "region",
-	"aria-labelledby": `dropdown-trigger-${identifier}`,
-	id: `dropdown-panel-${identifier}`,
-	children: /* @__PURE__ */ jsx(MaxHeightSmoother, {
-		isHidden,
-		className: cn("overflow-x-visible", isHidden === false && "invisible", isHidden === true && "visible", isOverable && "group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]", isFocusable && "group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]"),
-		...props,
-		children
-	})
-});
-DropDown.Trigger = Trigger;
-DropDown.Panel = Panel;
-
-//#endregion
-export { DropDown, DropDownAlign, DropDownYAlign };
+import{cn as e}from"../../utils/cn.mjs";import{Button as t}from"../Button/Button.mjs";import{MaxHeightSmoother as n}from"../MaxHeightSmoother/index.mjs";import{jsx as r}from"react/jsx-runtime";const i=({children:t,className:n,identifier:i,...a})=>r(`div`,{className:e(`group/dropdown relative flex`,n),"aria-label":`DropDown ${i}`,id:`dropdown-container-${i}`,...a,children:t}),a=({children:n,identifier:i,className:a,label:o,...s})=>r(t,{className:e([`w-full cursor-pointer`,`group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4`,a]),label:o??`Open panel ${i}`,"aria-haspopup":`true`,"aria-controls":`dropdown-panel-${i}`,id:`dropdown-trigger-${i}`,onClick:e=>{e.currentTarget.focus()},variant:`none`,...s,children:n});let o=function(e){return e.START=`start`,e.END=`end`,e}({}),s=function(e){return e.BELOW=`below`,e.ABOVE=`above`,e}({});i.Trigger=a,i.Panel=({children:t,isHidden:i=void 0,isOverable:a=!1,isFocusable:c=!1,align:l=o.START,yAlign:u=s.BELOW,identifier:d,className:f,...p})=>r(`div`,{className:e(`absolute z-100 min-w-full`,l===o.START&&`left-0`,l===o.END&&`right-0`,u===s.BELOW&&`top-[calc(100%+0.5rem)]`,u===s.ABOVE&&`bottom-[calc(100%+0.5rem)]`,f),"aria-hidden":i,role:`region`,"aria-labelledby":`dropdown-trigger-${d}`,id:`dropdown-panel-${d}`,children:r(n,{isHidden:i,className:e(`overflow-x-visible`,i===!1&&`invisible`,i===!0&&`visible`,a&&`group-hover/dropdown:visible group-hover/dropdown:grid-rows-[1fr]`,c&&`group-focus-within/dropdown:visible group-focus-within/dropdown:grid-rows-[1fr]`),...p,children:t})});export{i as DropDown,o as DropDownAlign,s as DropDownYAlign};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport { Button, type ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the DropDown component\n */\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Unique identifier that links the trigger and panel for accessibility.\n   * This is used to generate proper ARIA attributes.\n   * @example \"user-menu\"\n   * @example \"language-selector\"\n   */\n  identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * DropDown Component\n *\n * A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n *\n * @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n *   <DropDown.Trigger identifier=\"menu\">\n *     Open Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"menu\" isOverable>\n *     <div>Menu content</div>\n *   </DropDown.Panel>\n * </DropDown>\n *\n * // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n *   <DropDown.Trigger identifier=\"accessible-menu\">\n *     Keyboard Accessible Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n *     <div>Accessible content</div>\n *   </DropDown.Panel>\n * </DropDown>\n *\n * // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n *   <DropDown.Trigger identifier=\"controlled\">\n *     Controlled Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n *     <div>Controlled content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\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={`dropdown-container-${identifier}`}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the DropDown.Trigger component\n */\nexport interface TriggerProps extends Partial<ButtonProps> {\n  /**\n   * Unique identifier that matches the parent DropDown identifier\n   * @example \"user-menu\"\n   */\n  identifier: string;\n}\n\n/**\n * DropDown.Trigger Component\n *\n * The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n *\n * @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n *   <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n *\n * @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n *\n * @note Don't nest Button components inside the Trigger - it's already a button\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  label,\n  ...props\n}) => (\n  <Button\n    className={cn([\n      'w-full cursor-pointer',\n      'group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4',\n      className,\n    ])}\n    label={label ?? `Open panel ${identifier}`}\n    aria-haspopup=\"true\"\n    aria-controls={`dropdown-panel-${identifier}`}\n    id={`dropdown-trigger-${identifier}`}\n    onClick={(e) => {\n      // Ensure focus behavior is consistent across all mobile browsers\n      (e.currentTarget as HTMLButtonElement).focus();\n    }}\n    variant=\"none\"\n    {...props}\n  >\n    {children}\n  </Button>\n);\n\n/**\n * Horizontal alignment options for the dropdown panel relative to the trigger\n */\nexport enum DropDownAlign {\n  /** Align panel to the start (left in LTR, right in RTL) of the trigger */\n  START = 'start',\n  /** Align panel to the end (right in LTR, left in RTL) of the trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for the dropdown panel relative to the trigger\n */\nexport enum DropDownYAlign {\n  /** Position panel below the trigger (default) */\n  BELOW = 'below',\n  /** Position panel above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Props for the DropDown.Panel component\n */\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether the panel should be visible when the trigger is focused.\n   * Enables keyboard accessibility for the dropdown.\n   * @default false\n   */\n  isFocusable?: boolean;\n\n  /**\n   * Controls panel visibility explicitly.\n   * - `true`: Panel is hidden\n   * - `false`: Panel is visible\n   * - `undefined`: Panel visibility controlled by hover/focus states\n   * @default undefined\n   */\n  isHidden?: boolean;\n\n  /**\n   * Whether the panel should be visible when hovering over the trigger.\n   * Provides quick access via mouse interaction.\n   * @default false\n   */\n  isOverable?: boolean;\n\n  /**\n   * Unique identifier that matches the parent DropDown identifier\n   * @example \"user-menu\"\n   */\n  identifier: string;\n\n  /**\n   * Horizontal alignment of the panel relative to the trigger\n   * @default DropDownAlign.START\n   */\n  align?: DropDownAlign | `${DropDownAlign}`;\n\n  /**\n   * Vertical alignment of the panel relative to the trigger\n   * @default DropDownYAlign.BELOW\n   */\n  yAlign?: DropDownYAlign | `${DropDownYAlign}`;\n}\n\n/**\n * DropDown.Panel Component\n *\n * The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n *\n * @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n *   <div>Content appears on hover</div>\n * </DropDown.Panel>\n *\n * // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n *   <div>Content appears on focus</div>\n * </DropDown.Panel>\n *\n * // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n *   <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n *\n * // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n *   <div>Right-aligned content</div>\n * </DropDown.Panel>\n *\n * // Panel opening above the trigger\n * <DropDown.Panel identifier=\"menu\" yAlign={DropDownYAlign.ABOVE} isOverable>\n *   <div>Content appears above</div>\n * </DropDown.Panel>\n * ```\n *\n * @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = DropDownAlign.START,\n  yAlign = DropDownYAlign.BELOW,\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute z-100 min-w-full',\n      /* Horizontal positioning */\n      align === DropDownAlign.START && 'left-0',\n      align === DropDownAlign.END && 'right-0',\n      /* Vertical positioning */\n      yAlign === DropDownYAlign.BELOW && 'top-[calc(100%+0.5rem)]',\n      yAlign === DropDownYAlign.ABOVE && 'bottom-[calc(100%+0.5rem)]',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`dropdown-trigger-${identifier}`}\n    id={`dropdown-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden === false && 'invisible',\n        isHidden === true && '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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,MAAa,YAA0B,EACrC,UACA,WACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,gCAAgC,UAAU;CACxD,cAAY,YAAY;CACxB,IAAI,sBAAsB;CAC1B,GAAI;CAEH;EACG;;;;;;;;;;;;;;;;;;;;;;;AAoCR,MAAM,WAA6B,EACjC,UACA,YACA,WACA,OACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG;EACZ;EACA;EACA;EACD,CAAC;CACF,OAAO,SAAS,cAAc;CAC9B,iBAAc;CACd,iBAAe,kBAAkB;CACjC,IAAI,oBAAoB;CACxB,UAAU,MAAM;AAEd,EAAC,EAAE,cAAoC,OAAO;;CAEhD,SAAQ;CACR,GAAI;CAEH;EACM;;;;AAMX,IAAY,wDAAL;;AAEL;;AAEA;;;;;;AAMF,IAAY,0DAAL;;AAEL;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FF,MAAM,SAAyB,EAC7B,UACA,WAAW,QACX,aAAa,OACb,cAAc,OACd,QAAQ,cAAc,OACtB,SAAS,eAAe,OACxB,YACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,6BAEA,UAAU,cAAc,SAAS,UACjC,UAAU,cAAc,OAAO,WAE/B,WAAW,eAAe,SAAS,2BACnC,WAAW,eAAe,SAAS,8BACnC,UACD;CACD,eAAa;CACb,MAAK;CACL,mBAAiB,oBAAoB;CACrC,IAAI,kBAAkB;WAEtB,oBAAC;EACW;EACV,WAAW,GACT,sBACA,aAAa,SAAS,aACtB,aAAa,QAAQ,WACrB,cACE,qEACF,eACE,kFACH;EACD,GAAI;EAEH;GACiB;EAChB;AAGR,SAAS,UAAU;AACnB,SAAS,QAAQ"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/DropDown/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes } from 'react';\nimport { Button, type ButtonProps } from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the DropDown component\n */\nexport interface DropDownProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Unique identifier that links the trigger and panel for accessibility.\n   * This is used to generate proper ARIA attributes.\n   * @example \"user-menu\"\n   * @example \"language-selector\"\n   */\n  identifier: string;\n}\n\nexport type DropDownType = FC<DropDownProps> & {\n  Trigger: FC<TriggerProps>;\n  Panel: FC<PanelProps>;\n};\n\n/**\n * DropDown Component\n *\n * A compound component that provides dropdown/popover functionality with flexible trigger mechanisms.\n * Supports hover, focus, and controlled visibility states with proper accessibility features.\n *\n * @example\n * ```tsx\n * // Basic hover dropdown\n * <DropDown identifier=\"menu\">\n *   <DropDown.Trigger identifier=\"menu\">\n *     Open Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"menu\" isOverable>\n *     <div>Menu content</div>\n *   </DropDown.Panel>\n * </DropDown>\n *\n * // Focus-based dropdown for accessibility\n * <DropDown identifier=\"accessible-menu\">\n *   <DropDown.Trigger identifier=\"accessible-menu\">\n *     Keyboard Accessible Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"accessible-menu\" isFocusable>\n *     <div>Accessible content</div>\n *   </DropDown.Panel>\n * </DropDown>\n *\n * // Controlled dropdown\n * <DropDown identifier=\"controlled\">\n *   <DropDown.Trigger identifier=\"controlled\">\n *     Controlled Menu\n *   </DropDown.Trigger>\n *   <DropDown.Panel identifier=\"controlled\" isHidden={!isOpen}>\n *     <div>Controlled content</div>\n *   </DropDown.Panel>\n * </DropDown>\n * ```\n *\n * @component\n * @accessibility\n * - Uses proper ARIA attributes (aria-haspopup, aria-labelledby, etc.)\n * - Supports keyboard navigation with focus management\n * - Screen reader compatible with proper role and labeling\n * - Maintains focus trap within dropdown when needed\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={`dropdown-container-${identifier}`}\n    {...props}\n  >\n    {children}\n  </div>\n);\n\n/**\n * Props for the DropDown.Trigger component\n */\nexport interface TriggerProps extends Partial<ButtonProps> {\n  /**\n   * Unique identifier that matches the parent DropDown identifier\n   * @example \"user-menu\"\n   */\n  identifier: string;\n}\n\n/**\n * DropDown.Trigger Component\n *\n * The clickable/focusable element that controls the dropdown panel visibility.\n * Built on top of the Button component with enhanced dropdown-specific behaviors.\n *\n * @example\n * ```tsx\n * <DropDown.Trigger identifier=\"menu\">\n *   <div>Click to open</div>\n * </DropDown.Trigger>\n * ```\n *\n * @component\n * @accessibility\n * - Automatically generates appropriate ARIA attributes\n * - Maintains proper focus management across browsers\n * - Works with keyboard navigation (Tab, Enter, Space)\n * - Announces dropdown state to screen readers\n *\n * @note Don't nest Button components inside the Trigger - it's already a button\n */\nconst Trigger: FC<TriggerProps> = ({\n  children,\n  identifier,\n  className,\n  label,\n  ...props\n}) => (\n  <Button\n    className={cn([\n      'w-full cursor-pointer',\n      'group-focus-within/dropdown:bg-current/20 group-focus-within/dropdown:ring-4',\n      className,\n    ])}\n    label={label ?? `Open panel ${identifier}`}\n    aria-haspopup=\"true\"\n    aria-controls={`dropdown-panel-${identifier}`}\n    id={`dropdown-trigger-${identifier}`}\n    onClick={(e) => {\n      // Ensure focus behavior is consistent across all mobile browsers\n      (e.currentTarget as HTMLButtonElement).focus();\n    }}\n    variant=\"none\"\n    {...props}\n  >\n    {children}\n  </Button>\n);\n\n/**\n * Horizontal alignment options for the dropdown panel relative to the trigger\n */\nexport enum DropDownAlign {\n  /** Align panel to the start (left in LTR, right in RTL) of the trigger */\n  START = 'start',\n  /** Align panel to the end (right in LTR, left in RTL) of the trigger */\n  END = 'end',\n}\n\n/**\n * Vertical alignment options for the dropdown panel relative to the trigger\n */\nexport enum DropDownYAlign {\n  /** Position panel below the trigger (default) */\n  BELOW = 'below',\n  /** Position panel above the trigger */\n  ABOVE = 'above',\n}\n\n/**\n * Props for the DropDown.Panel component\n */\nexport interface PanelProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether the panel should be visible when the trigger is focused.\n   * Enables keyboard accessibility for the dropdown.\n   * @default false\n   */\n  isFocusable?: boolean;\n\n  /**\n   * Controls panel visibility explicitly.\n   * - `true`: Panel is hidden\n   * - `false`: Panel is visible\n   * - `undefined`: Panel visibility controlled by hover/focus states\n   * @default undefined\n   */\n  isHidden?: boolean;\n\n  /**\n   * Whether the panel should be visible when hovering over the trigger.\n   * Provides quick access via mouse interaction.\n   * @default false\n   */\n  isOverable?: boolean;\n\n  /**\n   * Unique identifier that matches the parent DropDown identifier\n   * @example \"user-menu\"\n   */\n  identifier: string;\n\n  /**\n   * Horizontal alignment of the panel relative to the trigger\n   * @default DropDownAlign.START\n   */\n  align?: DropDownAlign | `${DropDownAlign}`;\n\n  /**\n   * Vertical alignment of the panel relative to the trigger\n   * @default DropDownYAlign.BELOW\n   */\n  yAlign?: DropDownYAlign | `${DropDownYAlign}`;\n}\n\n/**\n * DropDown.Panel Component\n *\n * The content area that appears when the dropdown is triggered.\n * Supports multiple trigger methods (hover, focus, controlled) with smooth animations.\n *\n * @example\n * ```tsx\n * // Hover-triggered panel\n * <DropDown.Panel identifier=\"menu\" isOverable>\n *   <div>Content appears on hover</div>\n * </DropDown.Panel>\n *\n * // Focus-triggered panel (accessible)\n * <DropDown.Panel identifier=\"menu\" isFocusable>\n *   <div>Content appears on focus</div>\n * </DropDown.Panel>\n *\n * // Controlled panel\n * <DropDown.Panel identifier=\"menu\" isHidden={!isOpen}>\n *   <div>Content visibility controlled externally</div>\n * </DropDown.Panel>\n *\n * // Right-aligned panel\n * <DropDown.Panel identifier=\"menu\" align={DropDownAlign.END} isOverable>\n *   <div>Right-aligned content</div>\n * </DropDown.Panel>\n *\n * // Panel opening above the trigger\n * <DropDown.Panel identifier=\"menu\" yAlign={DropDownYAlign.ABOVE} isOverable>\n *   <div>Content appears above</div>\n * </DropDown.Panel>\n * ```\n *\n * @component\n * @accessibility\n * - Proper ARIA attributes (role, aria-labelledby, aria-hidden)\n * - Smooth height transitions with MaxHeightSmoother\n * - Keyboard navigation support when isFocusable is enabled\n * - Screen reader announcements for state changes\n */\nconst Panel: FC<PanelProps> = ({\n  children,\n  isHidden = undefined,\n  isOverable = false,\n  isFocusable = false,\n  align = DropDownAlign.START,\n  yAlign = DropDownYAlign.BELOW,\n  identifier,\n  className,\n  ...props\n}) => (\n  <div\n    className={cn(\n      'absolute z-100 min-w-full',\n      /* Horizontal positioning */\n      align === DropDownAlign.START && 'left-0',\n      align === DropDownAlign.END && 'right-0',\n      /* Vertical positioning */\n      yAlign === DropDownYAlign.BELOW && 'top-[calc(100%+0.5rem)]',\n      yAlign === DropDownYAlign.ABOVE && 'bottom-[calc(100%+0.5rem)]',\n      className\n    )}\n    aria-hidden={isHidden}\n    role=\"region\"\n    aria-labelledby={`dropdown-trigger-${identifier}`}\n    id={`dropdown-panel-${identifier}`}\n  >\n    <MaxHeightSmoother\n      isHidden={isHidden}\n      className={cn(\n        'overflow-x-visible',\n        isHidden === false && 'invisible',\n        isHidden === true && '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"],"mappings":"iMAqEA,MAAa,GAA0B,CACrC,WACA,YACA,aACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EAAG,+BAAgC,EAAU,CACxD,aAAY,YAAY,IACxB,GAAI,sBAAsB,IAC1B,GAAI,EAEH,YACG,CAoCF,GAA6B,CACjC,WACA,aACA,YACA,QACA,GAAG,KAEH,EAAC,EAAA,CACC,UAAW,EAAG,CACZ,wBACA,+EACA,EACD,CAAC,CACF,MAAO,GAAS,cAAc,IAC9B,gBAAc,OACd,gBAAe,kBAAkB,IACjC,GAAI,oBAAoB,IACxB,QAAU,GAAM,CAEb,EAAE,cAAoC,OAAO,EAEhD,QAAQ,OACR,GAAI,EAEH,YACM,CAMX,IAAY,EAAA,SAAA,EAAL,OAEL,GAAA,MAAA,QAEA,EAAA,IAAA,aAMU,EAAA,SAAA,EAAL,OAEL,GAAA,MAAA,QAEA,EAAA,MAAA,eAuIF,EAAS,QAAU,EACnB,EAAS,OA9CsB,CAC7B,WACA,WAAW,IAAA,GACX,aAAa,GACb,cAAc,GACd,QAAQ,EAAc,MACtB,SAAS,EAAe,MACxB,aACA,YACA,GAAG,KAEH,EAAC,MAAA,CACC,UAAW,EACT,4BAEA,IAAU,EAAc,OAAS,SACjC,IAAU,EAAc,KAAO,UAE/B,IAAW,EAAe,OAAS,0BACnC,IAAW,EAAe,OAAS,6BACnC,EACD,CACD,cAAa,EACb,KAAK,SACL,kBAAiB,oBAAoB,IACrC,GAAI,kBAAkB,aAEtB,EAAC,EAAA,CACW,WACV,UAAW,EACT,qBACA,IAAa,IAAS,YACtB,IAAa,IAAQ,UACrB,GACE,oEACF,GACE,kFACH,CACD,GAAI,EAEH,YACiB,EAChB"}

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

@@ -1,69 +1,2 @@
-'use client';
-
-import { Input } from "../Input/Input.mjs";
-import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
-import { useImperativeHandle, useMemo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/EditableField/EditableFieldInput.tsx
-/**
-* EditableFieldInput Component
-*
-* An inline editable input field that displays as read-only text until clicked.
-* When activated, it shows an input field with save and cancel buttons.
-*
-* @example
-* ```tsx
-* <EditableFieldInput
-*   defaultValue="Edit me"
-*   placeholder="Click to edit..."
-*   onSave={(value) => console.log('Saved:', value)}
-*   onCancel={() => console.log('Cancelled')}
-* />
-* ```
-*
-* ## Features
-* - **Inline Editing**: Click to edit, displays as text when not editing
-* - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
-* - **Keyboard Support**: Accessible keyboard navigation
-* - **Input Variants**: Supports all Input component variants and sizes
-* - **Auto-save on Click Away**: Saves automatically when clicking outside
-* - **Ref Forwarding**: Exposes the underlying input element reference
-*
-* ## Accessibility
-* - Uses semantic HTML with proper ARIA attributes
-* - Keyboard accessible with tab navigation
-* - Screen reader friendly with descriptive labels
-* - Focus management for edit mode transitions
-*
-* @param props - EditableFieldInputProps extending InputProps
-* @returns React functional component
-*/
-const EditableFieldInput = ({ onSave, onCancel, ref, ...props }) => {
-	const inputRef = useRef(null);
-	const handleSave = () => {
-		onSave?.(inputRef.current?.value ?? "");
-	};
-	const handleCancel = () => {
-		if (inputRef.current) inputRef.current.value = inputRef.current.defaultValue ?? "";
-		onCancel?.();
-	};
-	useImperativeHandle(ref, () => inputRef.current);
-	return /* @__PURE__ */ jsx(EditableFieldLayout, {
-		value: useMemo(() => props.value ?? inputRef.current?.value ?? props.defaultValue, [
-			props.value,
-			props.defaultValue,
-			inputRef.current?.value
-		]),
-		onCancel: handleCancel,
-		onSave: handleSave,
-		children: /* @__PURE__ */ jsx(Input, {
-			ref: inputRef,
-			...props
-		})
-	});
-};
-
-//#endregion
-export { EditableFieldInput };
+"use client";import{Input as e}from"../Input/Input.mjs";import{EditableFieldLayout as t}from"./EditableFieldLayout.mjs";import{useImperativeHandle as n,useMemo as r,useRef as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=({onSave:o,onCancel:s,ref:c,...l})=>{let u=i(null);return n(c,()=>u.current),a(t,{value:r(()=>l.value??u.current?.value??l.defaultValue,[l.value,l.defaultValue,u.current?.value]),onCancel:()=>{u.current&&(u.current.value=u.current.defaultValue??``),s?.()},onSave:()=>{o?.(u.current?.value??``)},children:a(e,{ref:u,...l})})};export{o as EditableFieldInput};
 //# sourceMappingURL=EditableFieldInput.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldInput.mjs","names":[],"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\n/**\n * Props for the EditableFieldInput component, extending standard Input props\n */\ntype EditableFieldInputProps = InputProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldInput Component\n *\n * An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n *\n * @example\n * ```tsx\n * <EditableFieldInput\n *   defaultValue=\"Edit me\"\n *   placeholder=\"Click to edit...\"\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as text when not editing\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Keyboard Support**: Accessible keyboard navigation\n * - **Input Variants**: Supports all Input component variants and sizes\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying input element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n *\n * @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAa,sBAAmD,EAC9D,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,mBAAmB;AAEvB,WAAS,SAAS,SAAS,SAAS,GAAG;;CAGzC,MAAM,qBAAqB;AACzB,MAAI,SAAS,QACX,UAAS,QAAQ,QAAQ,SAAS,QAAQ,gBAAgB;AAE5D,cAAY;;AAId,qBAAoB,WAA+B,SAAS,QAAS;AAWrE,QACE,oBAAC;EACC,OAXU,cAET,MAAM,SACP,SAAS,SAAS,SACjB,MAAM,cAET;GAAC,MAAM;GAAO,MAAM;GAAc,SAAS,SAAS;GAAM,CAC3D;EAKG,UAAU;EACV,QAAQ;YAER,oBAAC;GAAM,KAAK;GAAU,GAAI;IAAS;GACf"}
+{"version":3,"file":"EditableFieldInput.mjs","names":[],"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\n/**\n * Props for the EditableFieldInput component, extending standard Input props\n */\ntype EditableFieldInputProps = InputProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldInput Component\n *\n * An inline editable input field that displays as read-only text until clicked.\n * When activated, it shows an input field with save and cancel buttons.\n *\n * @example\n * ```tsx\n * <EditableFieldInput\n *   defaultValue=\"Edit me\"\n *   placeholder=\"Click to edit...\"\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as text when not editing\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Keyboard Support**: Accessible keyboard navigation\n * - **Input Variants**: Supports all Input component variants and sizes\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying input element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n *\n * @param props - EditableFieldInputProps extending InputProps\n * @returns React functional component\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"],"mappings":"qOAiDA,MAAa,GAAmD,CAC9D,SACA,WACA,MACA,GAAG,KACC,CACJ,IAAM,EAAW,EAAyB,KAAK,CA0B/C,OAXA,EAAoB,MAA+B,EAAS,QAAS,CAYnE,EAAC,EAAA,CACC,MAXU,MAET,EAAM,OACP,EAAS,SAAS,OACjB,EAAM,aAET,CAAC,EAAM,MAAO,EAAM,aAAc,EAAS,SAAS,MAAM,CAC3D,CAKG,aAtBuB,CACrB,EAAS,UACX,EAAS,QAAQ,MAAQ,EAAS,QAAQ,cAAgB,IAE5D,KAAY,EAmBV,WA5BqB,CAEvB,IAAS,EAAS,SAAS,OAAS,GAAG,WA4BrC,EAAC,EAAA,CAAM,IAAK,EAAU,GAAI,GAAS,EACf"}

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

@@ -1,104 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { Check, Pencil, X } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/EditableField/EditableFieldLayout.tsx
-const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children, isDisabled, ...props }) => {
-	const [isEditing, setIsEditing] = useState(false);
-	const editableFieldRef = useRef(null);
-	const handleSave = (e) => {
-		e.stopPropagation();
-		setIsEditing(false);
-		onSave();
-	};
-	const handleCancel = (e) => {
-		e.stopPropagation();
-		setIsEditing(false);
-		onCancel();
-	};
-	const result = !value || value === "" ? "-" : value;
-	const handleClickOutside = useCallback((e) => {
-		const selection = window.getSelection();
-		if (selection && selection.toString().trim() !== "") return;
-		if (editableFieldRef.current && !editableFieldRef.current.contains(e.target)) {
-			setIsEditing(false);
-			onSave();
-		}
-	}, [onSave]);
-	useEffect(() => {
-		if (isEditing) document.addEventListener("click", handleClickOutside);
-		else document.removeEventListener("click", handleClickOutside);
-		return () => document.removeEventListener("click", handleClickOutside);
-	}, [handleClickOutside, isEditing]);
-	return /* @__PURE__ */ jsxs("span", {
-		className: "group/editable-field flex gap-2",
-		role: "button",
-		tabIndex: 0,
-		onClick: (e) => {
-			setIsEditing(true);
-			onClick?.(e);
-		},
-		ref: editableFieldRef,
-		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cn("flex flex-1 gap-2", isEditing ? "display" : "hidden"),
-			children: [
-				children,
-				/* @__PURE__ */ jsx(Button, {
-					label: "Save",
-					variant: ButtonVariant.HOVERABLE,
-					size: ButtonSize.ICON_SM,
-					color: ButtonColor.TEXT,
-					Icon: Check,
-					onClick: handleSave,
-					disabled: isDisabled,
-					className: "!text-current",
-					role: "button",
-					tabIndex: 0,
-					"aria-label": "Save changes",
-					"data-testid": "editable-field-save-button"
-				}),
-				/* @__PURE__ */ jsx(Button, {
-					label: "Cancel",
-					color: ButtonColor.TEXT,
-					variant: ButtonVariant.HOVERABLE,
-					className: "!text-current",
-					size: ButtonSize.ICON_SM,
-					Icon: X,
-					onClick: handleCancel,
-					disabled: isDisabled,
-					role: "button",
-					tabIndex: 0,
-					"aria-label": "Cancel changes",
-					"data-testid": "editable-field-cancel-button"
-				})
-			]
-		}, String(isEditing)), /* @__PURE__ */ jsxs("div", {
-			className: cn("flex flex-1 gap-2", isEditing ? "hidden" : "display"),
-			children: [/* @__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",
-				Icon: Pencil,
-				color: ButtonColor.TEXT,
-				variant: ButtonVariant.HOVERABLE,
-				size: ButtonSize.ICON_SM,
-				className: "!text-current invisible group-hover/editable-field:visible",
-				disabled: isDisabled,
-				onClick: (e) => {
-					e.stopPropagation();
-					setIsEditing(true);
-				}
-			})]
-		})]
-	});
-};
-
-//#endregion
-export { EditableFieldLayout };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Button as t,ButtonColor as n,ButtonSize as r,ButtonVariant as i}from"../Button/Button.mjs";import{Check as a,Pencil as o,X as s}from"lucide-react";import{useCallback as c,useEffect as l,useRef as u,useState as d}from"react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=({value:m=``,onCancel:h,onSave:g,onClick:_,children:v,isDisabled:y,...b})=>{let[x,S]=d(!1),C=u(null),w=e=>{e.stopPropagation(),S(!1),g()},T=e=>{e.stopPropagation(),S(!1),h()},E=!m||m===``?`-`:m,D=c(e=>{let t=window.getSelection();t&&t.toString().trim()!==``||C.current&&!C.current.contains(e.target)&&(S(!1),g())},[g]);return l(()=>(x?document.addEventListener(`click`,D):document.removeEventListener(`click`,D),()=>document.removeEventListener(`click`,D)),[D,x]),p(`span`,{className:`group/editable-field flex gap-2`,role:`button`,tabIndex:0,onClick:e=>{S(!0),_?.(e)},ref:C,...b,children:[p(`div`,{className:e(`flex flex-1 gap-2`,x?`display`:`hidden`),children:[v,f(t,{label:`Save`,variant:i.HOVERABLE,size:r.ICON_SM,color:n.TEXT,Icon:a,onClick:w,disabled:y,className:`!text-current`,role:`button`,tabIndex:0,"aria-label":`Save changes`,"data-testid":`editable-field-save-button`}),f(t,{label:`Cancel`,color:n.TEXT,variant:i.HOVERABLE,className:`!text-current`,size:r.ICON_SM,Icon:s,onClick:T,disabled:y,role:`button`,tabIndex:0,"aria-label":`Cancel changes`,"data-testid":`editable-field-cancel-button`})]},String(x)),p(`div`,{className:e(`flex flex-1 gap-2`,x?`hidden`:`display`),children:[f(`span`,{className:`ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6`,children:E}),f(t,{label:`Edit`,Icon:o,color:n.TEXT,variant:i.HOVERABLE,size:r.ICON_SM,className:`!text-current invisible group-hover/editable-field:visible`,disabled:y,onClick:e=>{e.stopPropagation(),S(!0)}})]})]})};export{m as EditableFieldLayout};
 //# sourceMappingURL=EditableFieldLayout.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldLayout.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } 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={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Save changes\"\n          data-testid=\"editable-field-save-button\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Cancel changes\"\n          data-testid=\"editable-field-cancel-button\"\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={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"!text-current invisible 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"],"mappings":";;;;;;;;;AAuBA,MAAa,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,mBAAmB,OAAwB,KAAK;CAEtD,MAAM,cAAc,MAA2C;AAC7D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,UAAQ;;CAGV,MAAM,gBAAgB,MAA2C;AAC/D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,YAAU;;CAGZ,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,cAAc;AACvC,MAAI,aAAa,UAAU,UAAU,CAAC,MAAM,KAAK,GAE/C;AAIF,MACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,OAAe,EACpD;AACA,gBAAa,MAAM;AACnB,WAAQ;;IAGZ,CAAC,OAAO,CACT;AAED,iBAAgB;AACd,MAAI,UACF,UAAS,iBAAiB,SAAS,mBAAmB;MAEtD,UAAS,oBAAoB,SAAS,mBAAmB;AAG3D,eAAa,SAAS,oBAAoB,SAAS,mBAAmB;IACrE,CAAC,oBAAoB,UAAU,CAAC;AAEnC,QACE,qBAAC;EACC,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;AACd,gBAAa,KAAK;AAClB,aAAU,EAAE;;EAEd,KAAK;EACL,GAAI;aAEJ,qBAAC;GACC,WAAW,GAAG,qBAAqB,YAAY,YAAY,SAAS;;IAGnE;IACD,oBAAC;KACC,OAAM;KACN,SAAS,cAAc;KACvB,MAAM,WAAW;KACjB,OAAO,YAAY;KACnB,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;MACZ;IACF,oBAAC;KACC,OAAM;KACN,OAAO,YAAY;KACnB,SAAS,cAAc;KACvB,WAAU;KACV,MAAM,WAAW;KACjB,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;MACZ;;KA9BG,OAAO,UAAU,CA+BlB,EAEN,qBAAC;GACC,WAAW,GAAG,qBAAqB,YAAY,WAAW,UAAU;cAEpE,oBAAC;IAAK,WAAU;cACb;KACI,EACP,oBAAC;IACC,OAAM;IACN,MAAM;IACN,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,MAAM,WAAW;IACjB,WAAU;IACV,UAAU;IACV,UAAU,MAAM;AACd,OAAE,iBAAiB;AACnB,kBAAa,KAAK;;KAEpB;IACE;GACD"}
+{"version":3,"file":"EditableFieldLayout.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } 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={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          color={ButtonColor.TEXT}\n          Icon={Check}\n          onClick={handleSave}\n          disabled={isDisabled}\n          className=\"!text-current\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Save changes\"\n          data-testid=\"editable-field-save-button\"\n        />\n        <Button\n          label=\"Cancel\"\n          color={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          className=\"!text-current\"\n          size={ButtonSize.ICON_SM}\n          Icon={X}\n          onClick={handleCancel}\n          disabled={isDisabled}\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Cancel changes\"\n          data-testid=\"editable-field-cancel-button\"\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={ButtonColor.TEXT}\n          variant={ButtonVariant.HOVERABLE}\n          size={ButtonSize.ICON_SM}\n          className=\"!text-current invisible 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"],"mappings":"8UAuBA,MAAa,GAAqD,CAChE,QAAQ,GACR,WACA,SACA,UACA,WACA,aACA,GAAG,KACC,CACJ,GAAM,CAAC,EAAW,GAAgB,EAAS,GAAM,CAC3C,EAAmB,EAAwB,KAAK,CAEhD,EAAc,GAA2C,CAC7D,EAAE,iBAAiB,CACnB,EAAa,GAAM,CACnB,GAAQ,EAGJ,EAAgB,GAA2C,CAC/D,EAAE,iBAAiB,CACnB,EAAa,GAAM,CACnB,GAAU,EAGN,EAAS,CAAC,GAAS,IAAU,GAAK,IAAM,EAExC,EAAqB,EACxB,GAAkB,CAEjB,IAAM,EAAY,OAAO,cAAc,CACnC,GAAa,EAAU,UAAU,CAAC,MAAM,GAAK,IAO/C,EAAiB,SACjB,CAAC,EAAiB,QAAQ,SAAS,EAAE,OAAe,GAEpD,EAAa,GAAM,CACnB,GAAQ,GAGZ,CAAC,EAAO,CACT,CAYD,OAVA,OACM,EACF,SAAS,iBAAiB,QAAS,EAAmB,CAEtD,SAAS,oBAAoB,QAAS,EAAmB,KAG9C,SAAS,oBAAoB,QAAS,EAAmB,EACrE,CAAC,EAAoB,EAAU,CAAC,CAGjC,EAAC,OAAA,CACC,UAAU,kCACV,KAAK,SACL,SAAU,EACV,QAAU,GAAM,CACd,EAAa,GAAK,CAClB,IAAU,EAAE,EAEd,IAAK,EACL,GAAI,YAEJ,EAAC,MAAA,CACC,UAAW,EAAG,oBAAqB,EAAY,UAAY,SAAS,WAGnE,EACD,EAAC,EAAA,CACC,MAAM,OACN,QAAS,EAAc,UACvB,KAAM,EAAW,QACjB,MAAO,EAAY,KACnB,KAAM,EACN,QAAS,EACT,SAAU,EACV,UAAU,gBACV,KAAK,SACL,SAAU,EACV,aAAW,eACX,cAAY,8BACZ,CACF,EAAC,EAAA,CACC,MAAM,SACN,MAAO,EAAY,KACnB,QAAS,EAAc,UACvB,UAAU,gBACV,KAAM,EAAW,QACjB,KAAM,EACN,QAAS,EACT,SAAU,EACV,KAAK,SACL,SAAU,EACV,aAAW,iBACX,cAAY,gCACZ,GA9BG,OAAO,EAAU,CA+BlB,CAEN,EAAC,MAAA,CACC,UAAW,EAAG,oBAAqB,EAAY,SAAW,UAAU,WAEpE,EAAC,OAAA,CAAK,UAAU,sEACb,GACI,CACP,EAAC,EAAA,CACC,MAAM,OACN,KAAM,EACN,MAAO,EAAY,KACnB,QAAS,EAAc,UACvB,KAAM,EAAW,QACjB,UAAU,6DACV,SAAU,EACV,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,EAAa,GAAK,GAEpB,CAAA,EACE,CAAA,EACD"}

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

@@ -1,78 +1,2 @@
-'use client';
-
-import { EditableFieldLayout } from "./EditableFieldLayout.mjs";
-import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
-import { useImperativeHandle, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/EditableField/EditableFieldTextArea.tsx
-/**
-* EditableFieldTextArea Component
-*
-* An inline editable textarea field that displays as read-only text until clicked.
-* When activated, it shows an auto-sized textarea with save and cancel buttons.
-* Perfect for multiline text editing with automatic height adjustment.
-*
-* @example
-* ```tsx
-* <EditableFieldTextArea
-*   defaultValue="Multiline text content"
-*   placeholder="Click to edit..."
-*   maxRows={10}
-*   onSave={(value) => console.log('Saved:', value)}
-*   onCancel={() => console.log('Cancelled')}
-* />
-* ```
-*
-* ## Features
-* - **Inline Editing**: Click to edit, displays as formatted text when not editing
-* - **Auto-Sizing**: Automatically adjusts height to fit content
-* - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks
-* - **Multiline Support**: Preserves line breaks and formatting
-* - **Max Rows Control**: Configurable maximum height with scroll
-* - **Auto-save on Click Away**: Saves automatically when clicking outside
-* - **Ref Forwarding**: Exposes the underlying textarea element reference
-*
-* ## Accessibility
-* - Uses semantic HTML with proper ARIA attributes
-* - Keyboard accessible with tab navigation
-* - Screen reader friendly with descriptive labels
-* - Focus management for edit mode transitions
-* - Preserves whitespace and formatting for screen readers
-*
-* @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps
-* @returns React functional component
-*/
-const EditableFieldTextArea = ({ onSave, onCancel, ref, ...props }) => {
-	const textAreaRef = useRef(null);
-	useImperativeHandle(ref, () => textAreaRef.current);
-	const handleSave = () => {
-		onSave?.(textAreaRef.current?.value ?? "");
-	};
-	const handleCancel = () => {
-		if (textAreaRef.current) textAreaRef.current.value = textAreaRef.current.defaultValue ?? "";
-		onCancel?.();
-	};
-	return /* @__PURE__ */ jsx(EditableFieldLayout, {
-		value: props.value ?? textAreaRef.current?.value ?? props.defaultValue ?? "",
-		onCancel: handleCancel,
-		onSave: handleSave,
-		onClick: (e) => {
-			e.preventDefault();
-			e.stopPropagation();
-		},
-		children: /* @__PURE__ */ jsx(AutoSizedTextArea, {
-			className: "leading-6",
-			ref: textAreaRef,
-			onClick: (e) => {
-				e.preventDefault();
-				e.stopPropagation();
-			},
-			...props
-		})
-	});
-};
-
-//#endregion
-export { EditableFieldTextArea };
+"use client";import{EditableFieldLayout as e}from"./EditableFieldLayout.mjs";import{AutoSizedTextArea as t}from"../TextArea/AutoSizeTextArea.mjs";import{useImperativeHandle as n,useRef as r}from"react";import{jsx as i}from"react/jsx-runtime";const a=({onSave:a,onCancel:o,ref:s,...c})=>{let l=r(null);return n(s,()=>l.current),i(e,{value:c.value??l.current?.value??c.defaultValue??``,onCancel:()=>{l.current&&(l.current.value=l.current.defaultValue??``),o?.()},onSave:()=>{a?.(l.current?.value??``)},onClick:e=>{e.preventDefault(),e.stopPropagation()},children:i(t,{className:`leading-6`,ref:l,onClick:e=>{e.preventDefault(),e.stopPropagation()},...c})})};export{a as EditableFieldTextArea};
 //# sourceMappingURL=EditableFieldTextArea.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditableFieldTextArea.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useRef } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n */\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldTextArea Component\n *\n * An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n *\n * @example\n * ```tsx\n * <EditableFieldTextArea\n *   defaultValue=\"Multiline text content\"\n *   placeholder=\"Click to edit...\"\n *   maxRows={10}\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as formatted text when not editing\n * - **Auto-Sizing**: Automatically adjusts height to fit content\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Multiline Support**: Preserves line breaks and formatting\n * - **Max Rows Control**: Configurable maximum height with scroll\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying textarea element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n *\n * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,MAAa,yBAAyD,EACpE,QACA,UACA,KACA,GAAG,YACC;CACJ,MAAM,cAAc,OAA4B,KAAK;AAGrD,qBAAoB,WAA+B,YAAY,QAAS;CAExE,MAAM,mBAAmB;AAEvB,WAAS,YAAY,SAAS,SAAS,GAAG;;CAG5C,MAAM,qBAAqB;AACzB,MAAI,YAAY,QACd,aAAY,QAAQ,QAAQ,YAAY,QAAQ,gBAAgB;AAElE,cAAY;;AASd,QACE,oBAAC;EACC,OAPD,MAAM,SACP,YAAY,SAAS,SACpB,MAAM,gBACP;EAKE,UAAU;EACV,QAAQ;EACR,UAAU,MAAM;AACd,KAAE,gBAAgB;AAClB,KAAE,iBAAiB;;YAGrB,oBAAC;GACC,WAAU;GACV,KAAK;GACL,UAAU,MAAM;AACd,MAAE,gBAAgB;AAClB,MAAE,iBAAiB;;GAErB,GAAI;IACJ;GACkB"}
+{"version":3,"file":"EditableFieldTextArea.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type Ref, useImperativeHandle, useRef } from 'react';\nimport { AutoSizedTextArea, type AutoSizedTextAreaProps } from '../TextArea';\nimport { EditableFieldLayout } from './EditableFieldLayout';\n\n/**\n * Props for the EditableFieldTextArea component, extending AutoSizedTextAreaProps\n */\ntype EditableFieldTextAreaProps = AutoSizedTextAreaProps & {\n  /** Callback function called when the user saves the edited value */\n  onSave?: (value: string) => void;\n  /** Callback function called when the user cancels the edit operation */\n  onCancel?: () => void;\n};\n\n/**\n * EditableFieldTextArea Component\n *\n * An inline editable textarea field that displays as read-only text until clicked.\n * When activated, it shows an auto-sized textarea with save and cancel buttons.\n * Perfect for multiline text editing with automatic height adjustment.\n *\n * @example\n * ```tsx\n * <EditableFieldTextArea\n *   defaultValue=\"Multiline text content\"\n *   placeholder=\"Click to edit...\"\n *   maxRows={10}\n *   onSave={(value) => console.log('Saved:', value)}\n *   onCancel={() => console.log('Cancelled')}\n * />\n * ```\n *\n * ## Features\n * - **Inline Editing**: Click to edit, displays as formatted text when not editing\n * - **Auto-Sizing**: Automatically adjusts height to fit content\n * - **Save/Cancel Actions**: Built-in save and cancel buttons with callbacks\n * - **Multiline Support**: Preserves line breaks and formatting\n * - **Max Rows Control**: Configurable maximum height with scroll\n * - **Auto-save on Click Away**: Saves automatically when clicking outside\n * - **Ref Forwarding**: Exposes the underlying textarea element reference\n *\n * ## Accessibility\n * - Uses semantic HTML with proper ARIA attributes\n * - Keyboard accessible with tab navigation\n * - Screen reader friendly with descriptive labels\n * - Focus management for edit mode transitions\n * - Preserves whitespace and formatting for screen readers\n *\n * @param props - EditableFieldTextAreaProps extending AutoSizedTextAreaProps\n * @returns React functional component\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"],"mappings":"kPAqDA,MAAa,GAAyD,CACpE,SACA,WACA,MACA,GAAG,KACC,CACJ,IAAM,EAAc,EAA4B,KAAK,CAuBrD,OApBA,EAAoB,MAA+B,EAAY,QAAS,CAqBtE,EAAC,EAAA,CACC,MAPD,EAAM,OACP,EAAY,SAAS,OACpB,EAAM,cACP,GAKE,aAhBuB,CACrB,EAAY,UACd,EAAY,QAAQ,MAAQ,EAAY,QAAQ,cAAgB,IAElE,KAAY,EAaV,WAtBqB,CAEvB,IAAS,EAAY,SAAS,OAAS,GAAG,EAqBxC,QAAU,GAAM,CACd,EAAE,gBAAgB,CAClB,EAAE,iBAAiB,WAGrB,EAAC,EAAA,CACC,UAAU,YACV,IAAK,EACL,QAAU,GAAM,CACd,EAAE,gBAAgB,CAClB,EAAE,iBAAiB,EAErB,GAAI,GACJ,EACkB"}

package/dist/esm/components/EditableField/index.mjs

@@ -1,4 +1 @@
-import { EditableFieldInput } from "./EditableFieldInput.mjs";
-import { EditableFieldTextArea } from "./EditableFieldTextArea.mjs";
-
-export { EditableFieldInput, EditableFieldTextArea };
+import{EditableFieldInput as e}from"./EditableFieldInput.mjs";import{EditableFieldTextArea as t}from"./EditableFieldTextArea.mjs";export{e as EditableFieldInput,t as EditableFieldTextArea};