@intlayer/design-system 6.1.6 → 7.0.0-canary.1

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

@@ -0,0 +1,105 @@
+'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 };
+//# sourceMappingURL=EditableFieldLayout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableFieldLayout.mjs","names":["EditableFieldLayout: FC<EditableFieldLayoutProps>"],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\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 { cn } from '../../utils/cn';\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,MAAaA,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,WACA,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"}

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

@@ -0,0 +1,79 @@
+'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 };
+//# sourceMappingURL=EditableFieldTextArea.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableFieldTextArea.mjs","names":["EditableFieldTextArea: FC<EditableFieldTextAreaProps>"],"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,MAAaA,yBAAyD,EACpE,QACA,UACA,IACA,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"}

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

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

package/dist/esm/components/ExpandCollapse/ExpandCollapse.mjs

@@ -0,0 +1,98 @@
+'use client';
+
+
+import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/ExpandCollapse/ExpandCollapse.tsx
+/** Default minimum height threshold for triggering expand/collapse behavior */
+const DEFAULT_MIN_HEIGHT = 700;
+/**
+* ExpandCollapse Component
+*
+* A smart content container that automatically provides expand/collapse functionality
+* when content exceeds a specified height threshold. Features smooth animations,
+* internationalized toggle text, and intelligent height detection.
+*
+* @example
+* ```tsx
+* <ExpandCollapse minHeight={300}>
+*   <div>Very long content that will be collapsed...</div>
+* </ExpandCollapse>
+* ```
+*
+* ## Key Features
+* - **Smart Detection**: Automatically detects when content exceeds height threshold
+* - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects
+* - **Internationalization**: Toggle text supports multiple languages via Intlayer
+* - **Customizable Height**: Configurable minimum height threshold
+* - **Performance Optimized**: Only applies collapse behavior when necessary
+* - **Accessibility**: Proper ARIA attributes and keyboard support
+*
+* ## Behavior Logic
+* 1. **Measurement Phase**: Measures actual content height on mount
+* 2. **Comparison**: Compares content height against minHeight threshold
+* 3. **Conditional Rendering**:
+*    - If content ≤ minHeight: Renders normally without collapse functionality
+*    - If content > minHeight: Enables expand/collapse with toggle button
+* 4. **State Management**: Manages collapsed/expanded state with smooth transitions
+*
+* ## When to Use
+* - Long-form content (articles, documentation, code blocks)
+* - Lists or tables that may grow beyond comfortable viewing height
+* - User-generated content with unpredictable length
+* - FAQ sections or expandable content cards
+* - Code examples or JSON data display
+*
+* ## Accessibility Features
+* - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible
+* - **Screen Reader Support**: Proper ARIA labels and state announcements
+* - **Visual Indicators**: Clear visual cues for collapsed/expanded states
+* - **Smooth Animations**: Respects user preferences for reduced motion
+*
+* ## Internationalization
+* - Supports multiple languages through Intlayer integration
+* - Toggle text automatically adapts to current locale
+* - Includes translations for "Show all" and "Show less" states
+*
+* @param props - ExpandCollapseProps
+* @returns React functional component
+*/
+const ExpandCollapse = ({ isRollable = true, minHeight = DEFAULT_MIN_HEIGHT, children, className }) => {
+	const [codeContainerHeight, setCodeContainerHeight] = useState(0);
+	const [isCollapsed, setIsCollapsed] = useState(true);
+	const codeContainerRef = useRef(null);
+	const { expandCollapseContent } = useIntlayer("expand-collapse");
+	const isTooBig = codeContainerHeight > minHeight;
+	useEffect(() => {
+		if (codeContainerRef.current) setCodeContainerHeight(codeContainerRef.current.clientHeight);
+	}, []);
+	if (!isRollable) return children;
+	if (!isTooBig) return /* @__PURE__ */ jsx("div", {
+		className: cn("grid w-full", className),
+		ref: codeContainerRef,
+		children
+	});
+	return /* @__PURE__ */ jsxs(MaxHeightSmoother, {
+		isHidden: isCollapsed,
+		minHeight,
+		className: "w-full overflow-x-auto overflow-y-hidden",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: cn("grid w-full", className),
+			ref: codeContainerRef,
+			children
+		}), /* @__PURE__ */ jsx("button", {
+			className: cn("absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400", isCollapsed ? "w-full" : "w-32"),
+			type: "button",
+			onClick: () => setIsCollapsed((prev) => !prev),
+			children: expandCollapseContent(isCollapsed)
+		})]
+	});
+};
+
+//#endregion
+export { ExpandCollapse };
+//# sourceMappingURL=ExpandCollapse.mjs.map

package/dist/esm/components/ExpandCollapse/ExpandCollapse.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandCollapse.mjs","names":["ExpandCollapse: FC<ExpandCollapseProps>"],"sources":["../../../../src/components/ExpandCollapse/ExpandCollapse.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type ReactNode, useEffect, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\n/**\n * Props for the ExpandCollapse component\n */\nexport type ExpandCollapseProps = {\n  /** Whether the component should provide expand/collapse functionality. If false, renders children directly */\n  isRollable?: boolean;\n  /** Minimum height in pixels before showing the expand/collapse toggle */\n  minHeight?: number;\n  /** Content that may overflow and trigger the expand/collapse behavior */\n  children: ReactNode;\n  /** Additional CSS classes for styling customization */\n  className?: string;\n};\n\n/** Default minimum height threshold for triggering expand/collapse behavior */\nconst DEFAULT_MIN_HEIGHT = 700;\n\n/**\n * ExpandCollapse Component\n *\n * A smart content container that automatically provides expand/collapse functionality\n * when content exceeds a specified height threshold. Features smooth animations,\n * internationalized toggle text, and intelligent height detection.\n *\n * @example\n * ```tsx\n * <ExpandCollapse minHeight={300}>\n *   <div>Very long content that will be collapsed...</div>\n * </ExpandCollapse>\n * ```\n *\n * ## Key Features\n * - **Smart Detection**: Automatically detects when content exceeds height threshold\n * - **Smooth Animations**: Uses CSS transitions for smooth expand/collapse effects\n * - **Internationalization**: Toggle text supports multiple languages via Intlayer\n * - **Customizable Height**: Configurable minimum height threshold\n * - **Performance Optimized**: Only applies collapse behavior when necessary\n * - **Accessibility**: Proper ARIA attributes and keyboard support\n *\n * ## Behavior Logic\n * 1. **Measurement Phase**: Measures actual content height on mount\n * 2. **Comparison**: Compares content height against minHeight threshold\n * 3. **Conditional Rendering**:\n *    - If content ≤ minHeight: Renders normally without collapse functionality\n *    - If content > minHeight: Enables expand/collapse with toggle button\n * 4. **State Management**: Manages collapsed/expanded state with smooth transitions\n *\n * ## When to Use\n * - Long-form content (articles, documentation, code blocks)\n * - Lists or tables that may grow beyond comfortable viewing height\n * - User-generated content with unpredictable length\n * - FAQ sections or expandable content cards\n * - Code examples or JSON data display\n *\n * ## Accessibility Features\n * - **Keyboard Navigation**: Toggle button is focusable and keyboard accessible\n * - **Screen Reader Support**: Proper ARIA labels and state announcements\n * - **Visual Indicators**: Clear visual cues for collapsed/expanded states\n * - **Smooth Animations**: Respects user preferences for reduced motion\n *\n * ## Internationalization\n * - Supports multiple languages through Intlayer integration\n * - Toggle text automatically adapts to current locale\n * - Includes translations for \"Show all\" and \"Show less\" states\n *\n * @param props - ExpandCollapseProps\n * @returns React functional component\n */\nexport const ExpandCollapse: FC<ExpandCollapseProps> = ({\n  isRollable = true,\n  minHeight = DEFAULT_MIN_HEIGHT,\n  children,\n  className,\n}) => {\n  const [codeContainerHeight, setCodeContainerHeight] = useState(0);\n  const [isCollapsed, setIsCollapsed] = useState(true);\n  const codeContainerRef = useRef<HTMLDivElement>(null);\n  const { expandCollapseContent } = useIntlayer('expand-collapse');\n\n  const isTooBig = codeContainerHeight > minHeight;\n\n  useEffect(() => {\n    if (codeContainerRef.current) {\n      setCodeContainerHeight(codeContainerRef.current.clientHeight);\n    }\n  }, []);\n\n  if (!isRollable) {\n    return children;\n  }\n\n  if (!isTooBig) {\n    return (\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n    );\n  }\n\n  return (\n    <MaxHeightSmoother\n      isHidden={isCollapsed}\n      minHeight={minHeight}\n      className=\"w-full overflow-x-auto overflow-y-hidden\"\n    >\n      <div className={cn('grid w-full', className)} ref={codeContainerRef}>\n        {children}\n      </div>\n      <button\n        className={cn(\n          'absolute right-0 bottom-0 flex w-full cursor-pointer items-center justify-center rounded-t-2xl bg-gradient-to-t from-card/80 to-transparent px-3 py-0.5 text-md text-neutral-700 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur transition-all duration-300 hover:py-1 dark:text-neutral-400',\n          isCollapsed ? 'w-full' : 'w-32'\n        )}\n        type=\"button\"\n        onClick={() => setIsCollapsed((prev) => !prev)}\n      >\n        {expandCollapseContent(isCollapsed)}\n      </button>\n    </MaxHeightSmoother>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqD3B,MAAaA,kBAA2C,EACtD,aAAa,MACb,YAAY,oBACZ,UACA,gBACI;CACJ,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,EAAE;CACjE,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CACpD,MAAM,mBAAmB,OAAuB,KAAK;CACrD,MAAM,EAAE,0BAA0B,YAAY,kBAAkB;CAEhE,MAAM,WAAW,sBAAsB;AAEvC,iBAAgB;AACd,MAAI,iBAAiB,QACnB,wBAAuB,iBAAiB,QAAQ,aAAa;IAE9D,EAAE,CAAC;AAEN,KAAI,CAAC,WACH,QAAO;AAGT,KAAI,CAAC,SACH,QACE,oBAAC;EAAI,WAAW,GAAG,eAAe,UAAU;EAAE,KAAK;EAChD;GACG;AAIV,QACE,qBAAC;EACC,UAAU;EACC;EACX,WAAU;aAEV,oBAAC;GAAI,WAAW,GAAG,eAAe,UAAU;GAAE,KAAK;GAChD;IACG,EACN,oBAAC;GACC,WAAW,GACT,uSACA,cAAc,WAAW,OAC1B;GACD,MAAK;GACL,eAAe,gBAAgB,SAAS,CAAC,KAAK;aAE7C,sBAAsB,YAAY;IAC5B;GACS"}

package/dist/esm/components/ExpandCollapse/expandCollapse.content.mjs

@@ -0,0 +1,58 @@
+import { cond, t } from "intlayer";
+
+//#region src/components/ExpandCollapse/expandCollapse.content.ts
+const expandCollapseContent = {
+	key: "expand-collapse",
+	content: { expandCollapseContent: cond({
+		true: t({
+			en: "Show all",
+			fr: "Afficher tout",
+			es: "Mostrar todo",
+			"en-GB": "Show all",
+			de: "Mehr anzeigen",
+			ja: "すべて表示",
+			ko: "모두 보기",
+			zh: "显示全部",
+			it: "Mostra tutto",
+			pt: "Mostrar tudo",
+			hi: "सभी दिखाएँ",
+			ar: "عرض الكل",
+			ru: "Показать все",
+			tr: "Hepsini göster",
+			pl: "Pokaż wszystko",
+			id: "Tampilkan semua",
+			vi: "Hiển thị tất cả"
+		}),
+		false: t({
+			en: "Show less",
+			fr: "Afficher moins",
+			es: "Mostrar menos",
+			"en-GB": "Show less",
+			de: "Weniger anzeigen",
+			ja: "表示を減らす",
+			ko: "간략히 보기",
+			zh: "显示较少",
+			it: "Mostra meno",
+			pt: "Mostrar menos",
+			hi: "कम दिखाएँ",
+			ar: "عرض أقل",
+			ru: "Показать меньше",
+			tr: "Daha az göster",
+			pl: "Pokaż mniej",
+			id: "Tampilkan lebih sedikit",
+			vi: "Thu gọn"
+		})
+	}) },
+	title: "Expand collapse toggle",
+	description: "Content declaration for the expand/collapse toggle component, defining the labels shown when content is expanded or collapsed.",
+	tags: [
+		"ui component",
+		"toggle",
+		"expand collapse"
+	]
+};
+var expandCollapse_content_default = expandCollapseContent;
+
+//#endregion
+export { expandCollapse_content_default as default };
+//# sourceMappingURL=expandCollapse.content.mjs.map

package/dist/esm/components/ExpandCollapse/expandCollapse.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandCollapse.content.mjs","names":[],"sources":["../../../../src/components/ExpandCollapse/expandCollapse.content.ts"],"sourcesContent":["import { cond, type Dictionary, t } from 'intlayer';\n\nconst expandCollapseContent = {\n  key: 'expand-collapse',\n  content: {\n    expandCollapseContent: cond({\n      true: t({\n        en: 'Show all',\n        fr: 'Afficher tout',\n        es: 'Mostrar todo',\n        'en-GB': 'Show all',\n        de: 'Mehr anzeigen',\n        ja: 'すべて表示',\n        ko: '모두 보기',\n        zh: '显示全部',\n        it: 'Mostra tutto',\n        pt: 'Mostrar tudo',\n        hi: 'सभी दिखाएँ',\n        ar: 'عرض الكل',\n        ru: 'Показать все',\n        tr: 'Hepsini göster',\n        pl: 'Pokaż wszystko',\n        id: 'Tampilkan semua',\n        vi: 'Hiển thị tất cả',\n      }),\n      false: t({\n        en: 'Show less',\n        fr: 'Afficher moins',\n        es: 'Mostrar menos',\n        'en-GB': 'Show less',\n        de: 'Weniger anzeigen',\n        ja: '表示を減らす',\n        ko: '간략히 보기',\n        zh: '显示较少',\n        it: 'Mostra meno',\n        pt: 'Mostrar menos',\n        hi: 'कम दिखाएँ',\n        ar: 'عرض أقل',\n        ru: 'Показать меньше',\n        tr: 'Daha az göster',\n        pl: 'Pokaż mniej',\n        id: 'Tampilkan lebih sedikit',\n        vi: 'Thu gọn',\n      }),\n    }),\n  },\n  title: 'Expand collapse toggle',\n  description:\n    'Content declaration for the expand/collapse toggle component, defining the labels shown when content is expanded or collapsed.',\n  tags: ['ui component', 'toggle', 'expand collapse'],\n} satisfies Dictionary;\n\nexport default expandCollapseContent;\n"],"mappings":";;;AAEA,MAAM,wBAAwB;CAC5B,KAAK;CACL,SAAS,EACP,uBAAuB,KAAK;EAC1B,MAAM,EAAE;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,OAAO,EAAE;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAgB;EAAU;EAAkB;CACpD;AAED,qCAAe"}

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

@@ -0,0 +1,3 @@
+import { ExpandCollapse } from "./ExpandCollapse.mjs";
+
+export { ExpandCollapse };