@intlayer/design-system 8.1.2 → 8.1.3

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

@@ -1 +1 @@
-{"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport type { ComponentProps, FC } from 'react';\nimport {\n  type HTMLRenderer as HTMLRendererIntlayer,\n  type RenderHTMLProps,\n  renderHTML,\n} from 'react-intlayer';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n  () => ({\n    components: {\n      h1: (props: ComponentProps<typeof H1>) => (\n        <H1 isClickable={true} {...props} />\n      ),\n      h2: (props: ComponentProps<typeof H2>) => (\n        <H2 isClickable={true} className=\"mt-16\" {...props} />\n      ),\n      h3: (props: ComponentProps<typeof H3>) => (\n        <H3 isClickable={true} className=\"mt-5\" {...props} />\n      ),\n      h4: (props: ComponentProps<typeof H4>) => (\n        <H4 isClickable={true} className=\"mt-3\" {...props} />\n      ),\n      h5: (props: ComponentProps<typeof H5>) => (\n        <H5 isClickable={true} className=\"mt-3\" {...props} />\n      ),\n      h6: (props: ComponentProps<typeof H6>) => (\n        <H6 isClickable={true} className=\"mt-3\" {...props} />\n      ),\n      a: (props: ComponentProps<typeof Link>) => (\n        <Link\n          color=\"neutral\"\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          {...props}\n        />\n      ),\n    },\n  });\n\n/**\n * HTMLRenderer Component\n *\n * A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  components: componentsProp,\n}) => {\n  const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n  const htmlContent = renderHTML(children, {\n    components: {\n      ...htmlOptions.components,\n      a: (props: ComponentProps<typeof Link>) => (\n        <Link\n          color=\"neutral\"\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          {...props}\n        />\n      ),\n      ...componentsProp,\n    },\n  });\n\n  return <>{htmlContent}</>;\n};\n"],"mappings":";;;;;;AAiBA,MAAa,gCACJ,EACL,YAAY;CACV,KAAK,UACH,oBAAC;EAAG,aAAa;EAAM,GAAI;GAAS;CAEtC,KAAK,UACH,oBAAC;EAAG,aAAa;EAAM,WAAU;EAAQ,GAAI;GAAS;CAExD,KAAK,UACH,oBAAC;EAAG,aAAa;EAAM,WAAU;EAAO,GAAI;GAAS;CAEvD,KAAK,UACH,oBAAC;EAAG,aAAa;EAAM,WAAU;EAAO,GAAI;GAAS;CAEvD,KAAK,UACH,oBAAC;EAAG,aAAa;EAAM,WAAU;EAAO,GAAI;GAAS;CAEvD,KAAK,UACH,oBAAC;EAAG,aAAa;EAAM,WAAU;EAAO,GAAI;GAAS;CAEvD,IAAI,UACF,oBAAC;EACC,OAAM;EACN,gBAAgB,MAAM,MAAM,WAAW,OAAO;EAC9C,YAAY;EACZ,GAAI;GACJ;CAEL,EACF;;;;;;;AAQH,MAAa,gBAAuC,EAClD,UACA,YACA,QACA,YAAY,qBACR;AAmBJ,QAAO,0CAhBa,WAAW,UAAU,EACvC,YAAY;EACV,GAJgB,uBAAuB,cAAc,MAAM,CAI5C;EACf,IAAI,UACF,oBAAC;GACC,OAAM;GACN,gBAAgB,MAAM,MAAM,WAAW,OAAO;GAC9C,YAAY;GACJ;GACR,GAAI;IACJ;EAEJ,GAAG;EACJ,EACF,CAAC,GAEuB"}
+{"version":3,"file":"HTMLRender.mjs","names":[],"sources":["../../../../src/components/HTMLRender/HTMLRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport type { ComponentProps, FC } from 'react';\nimport {\n  type HTMLRenderer as HTMLRendererIntlayer,\n  type RenderHTMLProps,\n  renderHTML,\n} from 'react-intlayer';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Link } from '../Link';\n\ntype HTMLRendererProps = {\n  children: string;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  components?: ComponentProps<typeof HTMLRendererIntlayer>['components'];\n};\n\nexport const getIntlayerHTMLOptions: (isDarkMode: boolean) => RenderHTMLProps =\n  () => ({\n    components: {\n      h1: (props) => <H1 isClickable={true} {...props} />,\n      h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n      h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n      h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n      h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n      h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n    },\n  });\n\n/**\n * HTMLRenderer Component\n *\n * A comprehensive HTML renderer that transforms HTML text into rich,\n * interactive content with custom styling and Intlayer integration.\n */\nexport const HTMLRenderer: FC<HTMLRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  components: componentsProp,\n}) => {\n  const htmlOptions = getIntlayerHTMLOptions(isDarkMode ?? false);\n\n  const htmlContent = renderHTML(children, {\n    components: {\n      ...htmlOptions.components,\n      a: (props) => (\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          label=\"\"\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n  });\n\n  return <>{htmlContent}</>;\n};\n"],"mappings":"4NAiBA,MAAa,OACJ,CACL,WAAY,CACV,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,GAAI,GAAS,CACnD,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,QAAQ,GAAI,GAAS,CACrE,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,OAAO,GAAI,GAAS,CACpE,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,OAAO,GAAI,GAAS,CACpE,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,OAAO,GAAI,GAAS,CACpE,GAAK,GAAU,EAAC,EAAA,CAAG,YAAa,GAAM,UAAU,OAAO,GAAI,GAAS,CACpE,EAAI,GACF,EAAC,EAAA,CACC,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAY,GACZ,MAAM,GACN,GAAI,EACJ,MAAM,WACN,CAEL,CACF,EAQU,GAAuC,CAClD,WACA,aACA,SACA,WAAY,KAqBL,EAAA,EAAA,CAAA,SAjBa,EAAW,EAAU,CACvC,WAAY,CACV,GAJgB,EAAuB,GAAc,GAAM,CAI5C,WACf,EAAI,GACF,EAAC,EAAA,CACC,eAAgB,EAAM,MAAM,WAAW,OAAO,CAC9C,WAAY,GACJ,SACR,MAAM,GACN,GAAI,EACJ,MAAM,WACN,CAEJ,GAAG,EACJ,CACF,CAAC,CAAA,CAEuB"}

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

@@ -1,3 +1 @@
-import { HTMLRenderer, getIntlayerHTMLOptions } from "./HTMLRender.mjs";
-
-export { HTMLRenderer, getIntlayerHTMLOptions };
+import{HTMLRenderer as e,getIntlayerHTMLOptions as t}from"./HTMLRender.mjs";export{e as HTMLRenderer,t as getIntlayerHTMLOptions};

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

@@ -1,217 +1,2 @@
-import { cn } from "../../utils/cn.mjs";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/Headers/index.tsx
-const styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;
-const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;
-/**
-* Styled H1 Component
-*
-* Primary heading component for page titles and main content headers.
-* Does not include clickable anchor functionality.
-*/
-const StyledH1 = ({ className, ...props }) => /* @__PURE__ */ jsx("h1", {
-	className: cn("font-bold text-2xl", className),
-	...props
-});
-/**
-* Styled H2 Component
-*
-* Secondary heading component with anchor link functionality when wrapped.
-* Used for major section headers in content.
-*/
-const StyledH2 = ({ className, ...props }) => /* @__PURE__ */ jsx("h2", {
-	className: cn("mb-2 font-bold text-2xl", styledHeading, className),
-	...props
-});
-/**
-* Styled H3 Component
-*
-* Tertiary heading component with anchor link functionality when wrapped.
-* Used for subsection headers in content.
-*/
-const StyledH3 = ({ className, ...props }) => /* @__PURE__ */ jsx("h3", {
-	className: cn("mb-2 font-bold text-xl", styledHeading, className),
-	...props
-});
-/**
-* Styled H4 Component
-*
-* Quaternary heading component with anchor link functionality when wrapped.
-* Used for minor section headers in content.
-*/
-const StyledH4 = ({ className, ...props }) => /* @__PURE__ */ jsx("h4", {
-	className: cn("font-bold text-lg", styledHeading, className),
-	...props
-});
-/**
-* Styled H5 Component
-*
-* Fifth-level heading component with anchor link functionality when wrapped.
-* Used for detailed subsection headers in content.
-*/
-const StyledH5 = ({ className, ...props }) => /* @__PURE__ */ jsx("h5", {
-	className: cn("font-bold text-base", styledHeading, className),
-	...props
-});
-const StyledH6 = ({ className, ...props }) => /* @__PURE__ */ jsx("h6", {
-	className: cn("ml-3 font-bold text-base", styledHeading, className),
-	...props
-});
-/**
-* Utility function to generate URL-friendly ID from heading text
-* @param children - The heading text content
-* @returns URL-friendly string for use as element ID
-*/
-const getId = (children) => String(children).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").toLowerCase();
-/**
-* Utility function to smoothly scroll to an element by ID
-* @param id - The element ID to scroll to
-*/
-const scrollToHash = (id) => {
-	const y = (document.getElementById(id)?.getBoundingClientRect()?.top ?? 0) + window.scrollY - 150;
-	window.scrollTo({
-		top: y,
-		behavior: "smooth"
-	});
-};
-/**
-* Utility function to detect if the pseudo-element (#) after the heading was clicked
-* @param parentElem - The heading element
-* @param e - Mouse event
-* @returns Whether the after pseudo-element was clicked
-*/
-const afterClick = (parentElem, e) => {
-	const parentLeft = parentElem.getBoundingClientRect().left;
-	const parentTop = parentElem.getBoundingClientRect().top;
-	const after = window.getComputedStyle(parentElem, ":after");
-	const afterStart = parentLeft + parseInt(after.getPropertyValue("left"), 10);
-	const afterEnd = afterStart + parseInt(after.width, 10);
-	const afterYStart = parentTop + parseInt(after.getPropertyValue("top"), 10);
-	const afterYEnd = afterYStart + parseInt(after.height, 10);
-	const mouseX = e.clientX;
-	const mouseY = e.clientY;
-	return mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd;
-};
-/**
-* HeadingWrapper Component
-*
-* Internal wrapper component that adds anchor link functionality to headings.
-* Handles ID generation, click-to-copy URL behavior, and smooth scrolling.
-*
-* @component
-* @accessibility
-* - Generates URL-friendly IDs for deep linking
-* - Provides accessible labels for anchor link functionality
-* - Maintains proper heading hierarchy and semantics
-* - Supports keyboard navigation and screen readers
-*/
-const HeadingWrapper = ({ H, children, className, isClickable, ...props }) => {
-	const id = typeof children === "string" ? getId(children) : void 0;
-	const onClick = (e) => {
-		const { id } = e.currentTarget;
-		if (afterClick(e.currentTarget, e) && typeof id === "string") {
-			const url = `${window.location.href.split("#")[0]}#${id}`;
-			navigator.clipboard.writeText(url);
-			scrollToHash(id);
-		}
-	};
-	return /* @__PURE__ */ jsx(H, {
-		id,
-		onClick: isClickable ? onClick : void 0,
-		"aria-label": isClickable ? `Click to scroll to section ${id} and copy the link to the clipboard` : void 0,
-		className: cn(isClickable && styledAfter, className),
-		...props,
-		children
-	});
-};
-/**
-* H1 Component
-*
-* Primary page heading component. Does not include clickable anchor functionality
-* as it's typically used for main page titles rather than content sections.
-*
-* @example
-* ```tsx
-* <H1>Welcome to Our Website</H1>
-* <H1 className="text-blue-600">Custom Styled Title</H1>
-* ```
-*/
-const H1 = ({ isClickable: _, ...props }) => /* @__PURE__ */ jsx(StyledH1, { ...props });
-/**
-* H2 Component
-*
-* Secondary heading component with optional anchor link functionality.
-* Perfect for major section headers with deep-linking capabilities.
-*
-* @example
-* ```tsx
-* <H2>Getting Started</H2>
-* <H2 isClickable>API Reference</H2>
-* ```
-*/
-const H2 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
-	H: StyledH2,
-	isClickable,
-	...props
-});
-/**
-* H3 Component
-*
-* Tertiary heading component with optional anchor link functionality.
-* Used for subsection headers within major sections.
-*
-* @example
-* ```tsx
-* <H3>Configuration Options</H3>
-* <H3 isClickable>Advanced Settings</H3>
-* ```
-*/
-const H3 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
-	H: StyledH3,
-	isClickable,
-	...props
-});
-/**
-* H4 Component
-*
-* Fourth-level heading component with optional anchor link functionality.
-* Used for detailed section organization.
-*
-* @example
-* ```tsx
-* <H4>Implementation Details</H4>
-* <H4 isClickable>Code Examples</H4>
-* ```
-*/
-const H4 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
-	H: StyledH4,
-	isClickable,
-	...props
-});
-/**
-* H5 Component
-*
-* Fifth-level heading component with optional anchor link functionality.
-* Used for fine-grained content organization.
-*
-* @example
-* ```tsx
-* <H5>Technical Notes</H5>
-* <H5 isClickable>Best Practices</H5>
-* ```
-*/
-const H5 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
-	H: StyledH5,
-	isClickable,
-	...props
-});
-const H6 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
-	H: StyledH6,
-	isClickable,
-	...props
-});
-
-//#endregion
-export { H1, H2, H3, H4, H5, H6 };
+import{cn as e}from"../../utils/cn.mjs";import{jsx as t}from"react/jsx-runtime";const n=`relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`,r=({className:n,...r})=>t(`h1`,{className:e(`font-bold text-2xl`,n),...r}),i=({className:r,...i})=>t(`h2`,{className:e(`mb-2 font-bold text-2xl`,n,r),...i}),a=({className:r,...i})=>t(`h3`,{className:e(`mb-2 font-bold text-xl`,n,r),...i}),o=({className:r,...i})=>t(`h4`,{className:e(`font-bold text-lg`,n,r),...i}),s=({className:r,...i})=>t(`h5`,{className:e(`font-bold text-base`,n,r),...i}),c=({className:r,...i})=>t(`h6`,{className:e(`ml-3 font-bold text-base`,n,r),...i}),l=e=>String(e).normalize(`NFD`).replace(/[\u0300-\u036f]/g,``).replace(/\s+/g,`-`).toLowerCase(),u=e=>{let t=(document.getElementById(e)?.getBoundingClientRect()?.top??0)+window.scrollY-150;window.scrollTo({top:t,behavior:`smooth`})},d=(e,t)=>{let n=e.getBoundingClientRect().left,r=e.getBoundingClientRect().top,i=window.getComputedStyle(e,`:after`),a=n+parseInt(i.getPropertyValue(`left`),10),o=a+parseInt(i.width,10),s=r+parseInt(i.getPropertyValue(`top`),10),c=s+parseInt(i.height,10),l=t.clientX,u=t.clientY;return l>=a&&l<=o&&u>=s&&u<=c},f=({H:n,children:r,className:i,isClickable:a,...o})=>{let s=typeof r==`string`?l(r):void 0;return t(n,{id:s,onClick:a?e=>{let{id:t}=e.currentTarget;if(d(e.currentTarget,e)&&typeof t==`string`){let e=`${window.location.href.split(`#`)[0]}#${t}`;navigator.clipboard.writeText(e),u(t)}}:void 0,"aria-label":a?`Click to scroll to section ${s} and copy the link to the clipboard`:void 0,className:e(a&&`after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`,i),...o,children:r})},p=({isClickable:e,...n})=>t(r,{...n}),m=({isClickable:e=!1,...n})=>t(f,{H:i,isClickable:e,...n}),h=({isClickable:e=!1,...n})=>t(f,{H:a,isClickable:e,...n}),g=({isClickable:e=!1,...n})=>t(f,{H:o,isClickable:e,...n}),_=({isClickable:e=!1,...n})=>t(f,{H:s,isClickable:e,...n}),v=({isClickable:e=!1,...n})=>t(f,{H:c,isClickable:e,...n});export{p as H1,m as H2,h as H3,g as H4,_ as H5,v as H6};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Headers/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\n/**\n * Styled H1 Component\n *\n * Primary heading component for page titles and main content headers.\n * Does not include clickable anchor functionality.\n */\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => <h1 className={cn('font-bold text-2xl', className)} {...props} />;\n\n/**\n * Styled H2 Component\n *\n * Secondary heading component with anchor link functionality when wrapped.\n * Used for major section headers in content.\n */\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h2\n    className={cn('mb-2 font-bold text-2xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H3 Component\n *\n * Tertiary heading component with anchor link functionality when wrapped.\n * Used for subsection headers in content.\n */\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h3\n    className={cn('mb-2 font-bold text-xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H4 Component\n *\n * Quaternary heading component with anchor link functionality when wrapped.\n * Used for minor section headers in content.\n */\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h4\n    className={cn('font-bold text-lg', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H5 Component\n *\n * Fifth-level heading component with anchor link functionality when wrapped.\n * Used for detailed subsection headers in content.\n */\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h5\n    className={cn('font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h6\n    className={cn('ml-3 font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Props for heading components\n */\nexport type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  /**\n   * Whether the heading should be clickable with anchor link functionality.\n   * Enables copy-to-clipboard URL behavior and smooth scrolling.\n   * @default false (for H1), true (for H2-H5)\n   */\n  isClickable?: boolean;\n};\n\n/**\n * Internal props for the HeadingWrapper component\n */\ninterface HeadingGlobalProps extends HeadingProps {\n  /** The styled heading component to render */\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n}\n\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\n/**\n * Utility function to generate URL-friendly ID from heading text\n * @param children - The heading text content\n * @returns URL-friendly string for use as element ID\n */\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\n/**\n * Utility function to smoothly scroll to an element by ID\n * @param id - The element ID to scroll to\n */\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\n/**\n * Utility function to detect if the pseudo-element (#) after the heading was clicked\n * @param parentElem - The heading element\n * @param e - Mouse event\n * @returns Whether the after pseudo-element was clicked\n */\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left;\n  const parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10);\n  const afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10);\n  const afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX;\n  const mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\n/**\n * HeadingWrapper Component\n *\n * Internal wrapper component that adds anchor link functionality to headings.\n * Handles ID generation, click-to-copy URL behavior, and smooth scrolling.\n *\n * @component\n * @accessibility\n * - Generates URL-friendly IDs for deep linking\n * - Provides accessible labels for anchor link functionality\n * - Maintains proper heading hierarchy and semantics\n * - Supports keyboard navigation and screen readers\n */\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\n/**\n * H1 Component\n *\n * Primary page heading component. Does not include clickable anchor functionality\n * as it's typically used for main page titles rather than content sections.\n *\n * @example\n * ```tsx\n * <H1>Welcome to Our Website</H1>\n * <H1 className=\"text-blue-600\">Custom Styled Title</H1>\n * ```\n */\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\n/**\n * H2 Component\n *\n * Secondary heading component with optional anchor link functionality.\n * Perfect for major section headers with deep-linking capabilities.\n *\n * @example\n * ```tsx\n * <H2>Getting Started</H2>\n * <H2 isClickable>API Reference</H2>\n * ```\n */\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\n\n/**\n * H3 Component\n *\n * Tertiary heading component with optional anchor link functionality.\n * Used for subsection headers within major sections.\n *\n * @example\n * ```tsx\n * <H3>Configuration Options</H3>\n * <H3 isClickable>Advanced Settings</H3>\n * ```\n */\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\n\n/**\n * H4 Component\n *\n * Fourth-level heading component with optional anchor link functionality.\n * Used for detailed section organization.\n *\n * @example\n * ```tsx\n * <H4>Implementation Details</H4>\n * <H4 isClickable>Code Examples</H4>\n * ```\n */\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\n\n/**\n * H5 Component\n *\n * Fifth-level heading component with optional anchor link functionality.\n * Used for fine-grained content organization.\n *\n * @example\n * ```tsx\n * <H5>Technical Notes</H5>\n * <H5 isClickable>Best Practices</H5>\n * ```\n */\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n\nexport const H6: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH6} isClickable={isClickable} {...props} />\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Headers/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\n\nconst styledHeading = `relative scroll-mb-8 scroll-mt-[30vh] scroll-p-8`;\nconst styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-neutral after:absolute after:top-0 after:h-full after:-left-12 after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\n/**\n * Styled H1 Component\n *\n * Primary heading component for page titles and main content headers.\n * Does not include clickable anchor functionality.\n */\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => <h1 className={cn('font-bold text-2xl', className)} {...props} />;\n\n/**\n * Styled H2 Component\n *\n * Secondary heading component with anchor link functionality when wrapped.\n * Used for major section headers in content.\n */\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h2\n    className={cn('mb-2 font-bold text-2xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H3 Component\n *\n * Tertiary heading component with anchor link functionality when wrapped.\n * Used for subsection headers in content.\n */\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h3\n    className={cn('mb-2 font-bold text-xl', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H4 Component\n *\n * Quaternary heading component with anchor link functionality when wrapped.\n * Used for minor section headers in content.\n */\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h4\n    className={cn('font-bold text-lg', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Styled H5 Component\n *\n * Fifth-level heading component with anchor link functionality when wrapped.\n * Used for detailed subsection headers in content.\n */\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h5\n    className={cn('font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n  className,\n  ...props\n}) => (\n  <h6\n    className={cn('ml-3 font-bold text-base', styledHeading, className)}\n    {...props}\n  />\n);\n\n/**\n * Props for heading components\n */\nexport type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n  /**\n   * Whether the heading should be clickable with anchor link functionality.\n   * Enables copy-to-clipboard URL behavior and smooth scrolling.\n   * @default false (for H1), true (for H2-H5)\n   */\n  isClickable?: boolean;\n};\n\n/**\n * Internal props for the HeadingWrapper component\n */\ninterface HeadingGlobalProps extends HeadingProps {\n  /** The styled heading component to render */\n  H: FC<HTMLAttributes<HTMLHeadingElement>>;\n}\n\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\n\n/**\n * Utility function to generate URL-friendly ID from heading text\n * @param children - The heading text content\n * @returns URL-friendly string for use as element ID\n */\nconst getId = (children: string) =>\n  String(children)\n    // replace accents\n    .normalize('NFD')\n    .replace(/[\\u0300-\\u036f]/g, '')\n    // replace spaces\n    .replace(/\\s+/g, '-')\n    .toLowerCase();\n\n/**\n * Utility function to smoothly scroll to an element by ID\n * @param id - The element ID to scroll to\n */\nconst scrollToHash = (id: string) => {\n  const element = document.getElementById(id);\n  const offset = 150;\n  const y =\n    (element?.getBoundingClientRect()?.top ?? 0) + window.scrollY - offset;\n\n  window.scrollTo({ top: y, behavior: 'smooth' });\n};\n\n/**\n * Utility function to detect if the pseudo-element (#) after the heading was clicked\n * @param parentElem - The heading element\n * @param e - Mouse event\n * @returns Whether the after pseudo-element was clicked\n */\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n  const parentLeft = parentElem.getBoundingClientRect().left;\n  const parentTop = parentElem.getBoundingClientRect().top;\n\n  const after = window.getComputedStyle(parentElem, ':after');\n\n  const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10);\n  const afterEnd = afterStart + parseInt(after.width, 10);\n\n  const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10);\n  const afterYEnd = afterYStart + parseInt(after.height, 10);\n\n  const mouseX = e.clientX;\n  const mouseY = e.clientY;\n\n  const isAfterClicked: boolean =\n    mouseX >= afterStart &&\n    mouseX <= afterEnd &&\n    mouseY >= afterYStart &&\n    mouseY <= afterYEnd;\n\n  return isAfterClicked;\n};\n\n/**\n * HeadingWrapper Component\n *\n * Internal wrapper component that adds anchor link functionality to headings.\n * Handles ID generation, click-to-copy URL behavior, and smooth scrolling.\n *\n * @component\n * @accessibility\n * - Generates URL-friendly IDs for deep linking\n * - Provides accessible labels for anchor link functionality\n * - Maintains proper heading hierarchy and semantics\n * - Supports keyboard navigation and screen readers\n */\nconst HeadingWrapper: HeadingType = ({\n  H,\n  children,\n  className,\n  isClickable,\n  ...props\n}) => {\n  const id = typeof children === 'string' ? getId(children) : undefined;\n\n  const onClick = (e: MouseEvent<HTMLHeadingElement>) => {\n    const { id } = e.currentTarget;\n\n    const isAfterClicker = afterClick(e.currentTarget, e);\n\n    if (isAfterClicker && typeof id === 'string') {\n      const urlWithoutHash = window.location.href.split('#')[0];\n      const url = `${urlWithoutHash}#${id}`;\n\n      // copy the url to the clipboard\n      navigator.clipboard.writeText(url);\n\n      scrollToHash(id);\n    }\n  };\n\n  return (\n    <H\n      id={id}\n      onClick={isClickable ? onClick : undefined}\n      aria-label={\n        isClickable\n          ? `Click to scroll to section ${id} and copy the link to the clipboard`\n          : undefined\n      }\n      className={cn(isClickable && styledAfter, className)}\n      {...props}\n    >\n      {children}\n    </H>\n  );\n};\n\n/**\n * H1 Component\n *\n * Primary page heading component. Does not include clickable anchor functionality\n * as it's typically used for main page titles rather than content sections.\n *\n * @example\n * ```tsx\n * <H1>Welcome to Our Website</H1>\n * <H1 className=\"text-blue-600\">Custom Styled Title</H1>\n * ```\n */\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n  <StyledH1 {...props} />\n);\n\n/**\n * H2 Component\n *\n * Secondary heading component with optional anchor link functionality.\n * Perfect for major section headers with deep-linking capabilities.\n *\n * @example\n * ```tsx\n * <H2>Getting Started</H2>\n * <H2 isClickable>API Reference</H2>\n * ```\n */\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\n\n/**\n * H3 Component\n *\n * Tertiary heading component with optional anchor link functionality.\n * Used for subsection headers within major sections.\n *\n * @example\n * ```tsx\n * <H3>Configuration Options</H3>\n * <H3 isClickable>Advanced Settings</H3>\n * ```\n */\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\n\n/**\n * H4 Component\n *\n * Fourth-level heading component with optional anchor link functionality.\n * Used for detailed section organization.\n *\n * @example\n * ```tsx\n * <H4>Implementation Details</H4>\n * <H4 isClickable>Code Examples</H4>\n * ```\n */\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\n);\n\n/**\n * H5 Component\n *\n * Fifth-level heading component with optional anchor link functionality.\n * Used for fine-grained content organization.\n *\n * @example\n * ```tsx\n * <H5>Technical Notes</H5>\n * <H5 isClickable>Best Practices</H5>\n * ```\n */\nexport const H5: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH5} isClickable={isClickable} {...props} />\n);\n\nexport const H6: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n  <HeadingWrapper H={StyledH6} isClickable={isClickable} {...props} />\n);\n"],"mappings":"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"}

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

@@ -1,164 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/HeightResizer/index.tsx
-/**
-* HeightResizer Component
-*
-* A resizable container component that allows users to dynamically adjust the height
-* by dragging a visual handle at the top. Provides smooth resizing with optional
-* minimum and maximum height constraints.
-*
-* ## Key Features
-* - **Interactive Resizing**: Drag handle to resize container vertically
-* - **Touch Support**: Full support for touch devices and mobile interactions
-* - **Height Constraints**: Optional minimum and maximum height limits
-* - **Visual Feedback**: Handle with hover and active states for clear interaction
-* - **Accessibility**: ARIA slider role with value announcements for screen readers
-* - **Smooth Animation**: CSS transitions for polished user experience
-*
-* ## Use Cases
-* - Code editors with resizable panels
-* - Chat interfaces with adjustable message areas
-* - Dashboard widgets with user-customizable sizes
-* - Documentation viewers with resizable content panes
-* - Settings panels with expandable sections
-*
-* ## Interaction Model
-* The component uses a drag interaction model where users click and drag the visual
-* handle (rounded bar) at the top of the container. The resize calculation is based
-* on the difference between the current cursor position and the container's top edge.
-*
-* ## Accessibility Features
-* - **ARIA Slider**: Proper slider role for assistive technologies
-* - **Value Announcements**: Current, min, and max values announced to screen readers
-* - **Keyboard Navigation**: Focusable with standard slider keyboard support
-* - **Visual Indicators**: Clear visual handle for drag interaction
-*
-* @component
-* @example
-* ```tsx
-* // Basic usage
-* <HeightResizer initialHeight={200}>
-*   <div>Your resizable content here</div>
-* </HeightResizer>
-*
-* // With height constraints
-* <HeightResizer
-*   initialHeight={300}
-*   minHeight={100}
-*   maxHeight={600}
-* >
-*   <div>Content with size limits</div>
-* </HeightResizer>
-*
-* // In a code editor context
-* <HeightResizer
-*   initialHeight={400}
-*   minHeight={150}
-*   className="border rounded-lg"
-* >
-*   <CodeEditor />
-* </HeightResizer>
-* ```
-*
-* @param props - HeightResizer component props
-* @param props.initialHeight - Starting height in pixels
-* @param props.minHeight - Optional minimum height constraint
-* @param props.maxHeight - Optional maximum height constraint
-* @param props.children - Content to display in the resizable container
-* @param props.className - Additional CSS classes for styling
-* @returns Interactive resizable container component
-*/
-const HeightResizer = ({ initialHeight, maxHeight, minHeight = 0, children, className, ...props }) => {
-	const containerRef = useRef(null);
-	const [height, setHeight] = useState(initialHeight);
-	const [isResizing, setIsResizing] = useState(false);
-	/**
-	* Handler to initiate the resizing process
-	* Prevents default browser behavior and sets the resizing state
-	*
-	* @param mouseDownEvent - Mouse or touch event from the drag handle
-	*/
-	const startResizing = useCallback((mouseDownEvent) => {
-		setIsResizing(true);
-		mouseDownEvent.preventDefault();
-	}, []);
-	/**
-	* Handler to stop the resizing process
-	* Resets the resizing state when user releases the drag handle
-	*/
-	const stopResizing = useCallback(() => {
-		setIsResizing(false);
-	}, []);
-	/**
-	* Core resize logic that calculates new height based on cursor position
-	* Handles both mouse and touch events with boundary checking
-	*
-	* @param mouseMoveEvent - Mouse or touch move event during drag
-	*/
-	const resize = useCallback((mouseMoveEvent) => {
-		const container = containerRef.current;
-		if (isResizing && container) {
-			const { height: containerHeight, top: containerTop } = container.getBoundingClientRect();
-			let clientY = 0;
-			if (mouseMoveEvent instanceof MouseEvent) clientY = mouseMoveEvent.clientY;
-			else if (mouseMoveEvent instanceof TouchEvent) clientY = mouseMoveEvent.touches[0].clientY;
-			const newHeight = containerHeight - (clientY - containerTop);
-			let correctedHeight = Math.max(newHeight, minHeight);
-			if (maxHeight !== void 0) correctedHeight = Math.min(correctedHeight, maxHeight);
-			setHeight(correctedHeight);
-		}
-	}, [
-		isResizing,
-		minHeight,
-		maxHeight
-	]);
-	/**
-	* Effect to manage global event listeners for resize interactions
-	* Handles both mouse and touch events with proper cleanup
-	*/
-	useEffect(() => {
-		window.addEventListener("mousemove", resize, { passive: true });
-		window.addEventListener("mouseup", stopResizing);
-		window.addEventListener("touchmove", resize, { passive: true });
-		window.addEventListener("touchend", stopResizing);
-		return () => {
-			window.removeEventListener("mousemove", resize);
-			window.removeEventListener("mouseup", stopResizing);
-			window.removeEventListener("touchmove", resize);
-			window.removeEventListener("touchend", stopResizing);
-		};
-	}, [resize, stopResizing]);
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950", "before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950", "active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600", className),
-		style: {
-			height: `${height}px`,
-			maxHeight: maxHeight ? `${maxHeight}px` : void 0,
-			minHeight: `${minHeight}px`
-		},
-		ref: containerRef,
-		onMouseDown: startResizing,
-		onTouchStart: startResizing,
-		"aria-valuemin": minHeight,
-		"aria-valuemax": maxHeight,
-		"aria-valuenow": height,
-		"aria-label": "Resizable component - drag the handle to adjust height",
-		role: "slider",
-		tabIndex: 0,
-		...props,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "absolute top-0 left-0 size-full cursor-default overflow-hidden",
-			onMouseDown: (e) => e.stopPropagation(),
-			onTouchStart: (e) => e.stopPropagation(),
-			children
-		})
-	});
-};
-
-//#endregion
-export { HeightResizer };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{useCallback as t,useEffect as n,useRef as r,useState as i}from"react";import{jsx as a}from"react/jsx-runtime";const o=({initialHeight:o,maxHeight:s,minHeight:c=0,children:l,className:u,...d})=>{let f=r(null),[p,m]=i(o),[h,g]=i(!1),_=t(e=>{g(!0),e.preventDefault()},[]),v=t(()=>{g(!1)},[]),y=t(e=>{let t=f.current;if(h&&t){let{height:n,top:r}=t.getBoundingClientRect(),i=0;e instanceof MouseEvent?i=e.clientY:e instanceof TouchEvent&&(i=e.touches[0].clientY);let a=n-(i-r),o=Math.max(a,c);s!==void 0&&(o=Math.min(o,s)),m(o)}},[h,c,s]);return n(()=>(window.addEventListener(`mousemove`,y,{passive:!0}),window.addEventListener(`mouseup`,v),window.addEventListener(`touchmove`,y,{passive:!0}),window.addEventListener(`touchend`,v),()=>{window.removeEventListener(`mousemove`,y),window.removeEventListener(`mouseup`,v),window.removeEventListener(`touchmove`,y),window.removeEventListener(`touchend`,v)}),[y,v]),a(`div`,{className:e(`relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950`,`before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[""] dark:before:bg-neutral-950`,`active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600`,u),style:{height:`${p}px`,maxHeight:s?`${s}px`:void 0,minHeight:`${c}px`},ref:f,onMouseDown:_,onTouchStart:_,"aria-valuemin":c,"aria-valuemax":s,"aria-valuenow":p,"aria-label":`Resizable component - drag the handle to adjust height`,role:`slider`,tabIndex:0,...d,children:a(`div`,{className:`absolute top-0 left-0 size-full cursor-default overflow-hidden`,onMouseDown:e=>e.stopPropagation(),onTouchStart:e=>e.stopPropagation(),children:l})})};export{o as HeightResizer};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type React from 'react';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n/**\n * Props for the HeightResizer component\n *\n * @interface HeightResizerProps\n */\ntype HeightResizerProps = {\n  /**\n   * Initial height in pixels for the resizable container\n   * Sets the default size when the component first loads\n   * @example 200\n   */\n  initialHeight: number;\n\n  /**\n   * Maximum height in pixels that the user can resize to (optional)\n   * When undefined, no maximum limit is enforced\n   * @example 500\n   */\n  maxHeight?: number;\n\n  /**\n   * Minimum height in pixels that the user can resize to (optional)\n   * Prevents the container from being resized below this threshold\n   * @default 0\n   * @example 50\n   */\n  minHeight?: number;\n} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n/**\n * HeightResizer Component\n *\n * A resizable container component that allows users to dynamically adjust the height\n * by dragging a visual handle at the top. Provides smooth resizing with optional\n * minimum and maximum height constraints.\n *\n * ## Key Features\n * - **Interactive Resizing**: Drag handle to resize container vertically\n * - **Touch Support**: Full support for touch devices and mobile interactions\n * - **Height Constraints**: Optional minimum and maximum height limits\n * - **Visual Feedback**: Handle with hover and active states for clear interaction\n * - **Accessibility**: ARIA slider role with value announcements for screen readers\n * - **Smooth Animation**: CSS transitions for polished user experience\n *\n * ## Use Cases\n * - Code editors with resizable panels\n * - Chat interfaces with adjustable message areas\n * - Dashboard widgets with user-customizable sizes\n * - Documentation viewers with resizable content panes\n * - Settings panels with expandable sections\n *\n * ## Interaction Model\n * The component uses a drag interaction model where users click and drag the visual\n * handle (rounded bar) at the top of the container. The resize calculation is based\n * on the difference between the current cursor position and the container's top edge.\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for assistive technologies\n * - **Value Announcements**: Current, min, and max values announced to screen readers\n * - **Keyboard Navigation**: Focusable with standard slider keyboard support\n * - **Visual Indicators**: Clear visual handle for drag interaction\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage\n * <HeightResizer initialHeight={200}>\n *   <div>Your resizable content here</div>\n * </HeightResizer>\n *\n * // With height constraints\n * <HeightResizer\n *   initialHeight={300}\n *   minHeight={100}\n *   maxHeight={600}\n * >\n *   <div>Content with size limits</div>\n * </HeightResizer>\n *\n * // In a code editor context\n * <HeightResizer\n *   initialHeight={400}\n *   minHeight={150}\n *   className=\"border rounded-lg\"\n * >\n *   <CodeEditor />\n * </HeightResizer>\n * ```\n *\n * @param props - HeightResizer component props\n * @param props.initialHeight - Starting height in pixels\n * @param props.minHeight - Optional minimum height constraint\n * @param props.maxHeight - Optional maximum height constraint\n * @param props.children - Content to display in the resizable container\n * @param props.className - Additional CSS classes for styling\n * @returns Interactive resizable container component\n */\nexport const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({\n  initialHeight,\n  maxHeight,\n  minHeight = 0,\n  children,\n  className,\n  ...props\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(initialHeight);\n  const [isResizing, setIsResizing] = useState(false);\n\n  /**\n   * Handler to initiate the resizing process\n   * Prevents default browser behavior and sets the resizing state\n   *\n   * @param mouseDownEvent - Mouse or touch event from the drag handle\n   */\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      setIsResizing(true);\n      mouseDownEvent.preventDefault();\n    },\n    []\n  );\n\n  /**\n   * Handler to stop the resizing process\n   * Resets the resizing state when user releases the drag handle\n   */\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n  }, []);\n\n  /**\n   * Core resize logic that calculates new height based on cursor position\n   * Handles both mouse and touch events with boundary checking\n   *\n   * @param mouseMoveEvent - Mouse or touch move event during drag\n   */\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      const container = containerRef.current;\n      if (isResizing && container) {\n        const { height: containerHeight, top: containerTop } =\n          container.getBoundingClientRect();\n\n        let clientY = 0;\n        if (mouseMoveEvent instanceof MouseEvent) {\n          clientY = mouseMoveEvent.clientY;\n        } else if (mouseMoveEvent instanceof TouchEvent) {\n          clientY = mouseMoveEvent.touches[0].clientY;\n        }\n\n        const resizeDifference = clientY - containerTop;\n        const newHeight = containerHeight - resizeDifference;\n\n        // Apply height constraints\n        let correctedHeight = Math.max(newHeight, minHeight);\n        if (maxHeight !== undefined) {\n          correctedHeight = Math.min(correctedHeight, maxHeight);\n        }\n\n        setHeight(correctedHeight);\n      }\n    },\n    [isResizing, minHeight, maxHeight]\n  );\n\n  /**\n   * Effect to manage global event listeners for resize interactions\n   * Handles both mouse and touch events with proper cleanup\n   */\n  useEffect(() => {\n    window.addEventListener('mousemove', resize, { passive: true });\n    window.addEventListener('mouseup', stopResizing);\n    window.addEventListener('touchmove', resize, { passive: true });\n    window.addEventListener('touchend', stopResizing);\n\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  return (\n    <div\n      className={cn(\n        'relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950',\n        'before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950',\n        'active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600',\n        className\n      )}\n      style={{\n        height: `${height}px`,\n        maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n        minHeight: `${minHeight}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      aria-valuemin={minHeight}\n      aria-valuemax={maxHeight}\n      aria-valuenow={height}\n      aria-label=\"Resizable component - drag the handle to adjust height\"\n      role=\"slider\"\n      tabIndex={0}\n      {...props}\n    >\n      <div\n        className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAa,iBAA4D,EACvE,eACA,WACA,YAAY,GACZ,UACA,WACA,GAAG,YACC;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,QAAQ,aAAa,SAAS,cAAc;CACnD,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;;;;;;;CAQnD,MAAM,gBAAgB,aAElB,mBAGG;AACH,gBAAc,KAAK;AACnB,iBAAe,gBAAgB;IAEjC,EAAE,CACH;;;;;CAMD,MAAM,eAAe,kBAAkB;AACrC,gBAAc,MAAM;IACnB,EAAE,CAAC;;;;;;;CAQN,MAAM,SAAS,aACZ,mBAA4C;EAC3C,MAAM,YAAY,aAAa;AAC/B,MAAI,cAAc,WAAW;GAC3B,MAAM,EAAE,QAAQ,iBAAiB,KAAK,iBACpC,UAAU,uBAAuB;GAEnC,IAAI,UAAU;AACd,OAAI,0BAA0B,WAC5B,WAAU,eAAe;YAChB,0BAA0B,WACnC,WAAU,eAAe,QAAQ,GAAG;GAItC,MAAM,YAAY,mBADO,UAAU;GAInC,IAAI,kBAAkB,KAAK,IAAI,WAAW,UAAU;AACpD,OAAI,cAAc,OAChB,mBAAkB,KAAK,IAAI,iBAAiB,UAAU;AAGxD,aAAU,gBAAgB;;IAG9B;EAAC;EAAY;EAAW;EAAU,CACnC;;;;;AAMD,iBAAgB;AACd,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,WAAW,aAAa;AAChD,SAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAC;AAC/D,SAAO,iBAAiB,YAAY,aAAa;AAEjD,eAAa;AACX,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,WAAW,aAAa;AACnD,UAAO,oBAAoB,aAAa,OAAO;AAC/C,UAAO,oBAAoB,YAAY,aAAa;;IAErD,CAAC,QAAQ,aAAa,CAAC;AAE1B,QACE,oBAAC;EACC,WAAW,GACT,4HACA,sSACA,2HACA,UACD;EACD,OAAO;GACL,QAAQ,GAAG,OAAO;GAClB,WAAW,YAAY,GAAG,UAAU,MAAM;GAC1C,WAAW,GAAG,UAAU;GACzB;EACD,KAAK;EACL,aAAa;EACb,cAAc;EACd,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAW;EACX,MAAK;EACL,UAAU;EACV,GAAI;YAEJ,oBAAC;GACC,WAAU;GACV,cAAc,MAAM,EAAE,iBAAiB;GACvC,eAAe,MAAM,EAAE,iBAAiB;GAEvC;IACG;GACF"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type React from 'react';\nimport {\n  type DetailedHTMLProps,\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n/**\n * Props for the HeightResizer component\n *\n * @interface HeightResizerProps\n */\ntype HeightResizerProps = {\n  /**\n   * Initial height in pixels for the resizable container\n   * Sets the default size when the component first loads\n   * @example 200\n   */\n  initialHeight: number;\n\n  /**\n   * Maximum height in pixels that the user can resize to (optional)\n   * When undefined, no maximum limit is enforced\n   * @example 500\n   */\n  maxHeight?: number;\n\n  /**\n   * Minimum height in pixels that the user can resize to (optional)\n   * Prevents the container from being resized below this threshold\n   * @default 0\n   * @example 50\n   */\n  minHeight?: number;\n} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\n\n/**\n * HeightResizer Component\n *\n * A resizable container component that allows users to dynamically adjust the height\n * by dragging a visual handle at the top. Provides smooth resizing with optional\n * minimum and maximum height constraints.\n *\n * ## Key Features\n * - **Interactive Resizing**: Drag handle to resize container vertically\n * - **Touch Support**: Full support for touch devices and mobile interactions\n * - **Height Constraints**: Optional minimum and maximum height limits\n * - **Visual Feedback**: Handle with hover and active states for clear interaction\n * - **Accessibility**: ARIA slider role with value announcements for screen readers\n * - **Smooth Animation**: CSS transitions for polished user experience\n *\n * ## Use Cases\n * - Code editors with resizable panels\n * - Chat interfaces with adjustable message areas\n * - Dashboard widgets with user-customizable sizes\n * - Documentation viewers with resizable content panes\n * - Settings panels with expandable sections\n *\n * ## Interaction Model\n * The component uses a drag interaction model where users click and drag the visual\n * handle (rounded bar) at the top of the container. The resize calculation is based\n * on the difference between the current cursor position and the container's top edge.\n *\n * ## Accessibility Features\n * - **ARIA Slider**: Proper slider role for assistive technologies\n * - **Value Announcements**: Current, min, and max values announced to screen readers\n * - **Keyboard Navigation**: Focusable with standard slider keyboard support\n * - **Visual Indicators**: Clear visual handle for drag interaction\n *\n * @component\n * @example\n * ```tsx\n * // Basic usage\n * <HeightResizer initialHeight={200}>\n *   <div>Your resizable content here</div>\n * </HeightResizer>\n *\n * // With height constraints\n * <HeightResizer\n *   initialHeight={300}\n *   minHeight={100}\n *   maxHeight={600}\n * >\n *   <div>Content with size limits</div>\n * </HeightResizer>\n *\n * // In a code editor context\n * <HeightResizer\n *   initialHeight={400}\n *   minHeight={150}\n *   className=\"border rounded-lg\"\n * >\n *   <CodeEditor />\n * </HeightResizer>\n * ```\n *\n * @param props - HeightResizer component props\n * @param props.initialHeight - Starting height in pixels\n * @param props.minHeight - Optional minimum height constraint\n * @param props.maxHeight - Optional maximum height constraint\n * @param props.children - Content to display in the resizable container\n * @param props.className - Additional CSS classes for styling\n * @returns Interactive resizable container component\n */\nexport const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({\n  initialHeight,\n  maxHeight,\n  minHeight = 0,\n  children,\n  className,\n  ...props\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(initialHeight);\n  const [isResizing, setIsResizing] = useState(false);\n\n  /**\n   * Handler to initiate the resizing process\n   * Prevents default browser behavior and sets the resizing state\n   *\n   * @param mouseDownEvent - Mouse or touch event from the drag handle\n   */\n  const startResizing = useCallback(\n    (\n      mouseDownEvent:\n        | React.MouseEvent<HTMLDivElement>\n        | React.TouchEvent<HTMLDivElement>\n    ) => {\n      setIsResizing(true);\n      mouseDownEvent.preventDefault();\n    },\n    []\n  );\n\n  /**\n   * Handler to stop the resizing process\n   * Resets the resizing state when user releases the drag handle\n   */\n  const stopResizing = useCallback(() => {\n    setIsResizing(false);\n  }, []);\n\n  /**\n   * Core resize logic that calculates new height based on cursor position\n   * Handles both mouse and touch events with boundary checking\n   *\n   * @param mouseMoveEvent - Mouse or touch move event during drag\n   */\n  const resize = useCallback(\n    (mouseMoveEvent: MouseEvent | TouchEvent) => {\n      const container = containerRef.current;\n      if (isResizing && container) {\n        const { height: containerHeight, top: containerTop } =\n          container.getBoundingClientRect();\n\n        let clientY = 0;\n        if (mouseMoveEvent instanceof MouseEvent) {\n          clientY = mouseMoveEvent.clientY;\n        } else if (mouseMoveEvent instanceof TouchEvent) {\n          clientY = mouseMoveEvent.touches[0].clientY;\n        }\n\n        const resizeDifference = clientY - containerTop;\n        const newHeight = containerHeight - resizeDifference;\n\n        // Apply height constraints\n        let correctedHeight = Math.max(newHeight, minHeight);\n        if (maxHeight !== undefined) {\n          correctedHeight = Math.min(correctedHeight, maxHeight);\n        }\n\n        setHeight(correctedHeight);\n      }\n    },\n    [isResizing, minHeight, maxHeight]\n  );\n\n  /**\n   * Effect to manage global event listeners for resize interactions\n   * Handles both mouse and touch events with proper cleanup\n   */\n  useEffect(() => {\n    window.addEventListener('mousemove', resize, { passive: true });\n    window.addEventListener('mouseup', stopResizing);\n    window.addEventListener('touchmove', resize, { passive: true });\n    window.addEventListener('touchend', stopResizing);\n\n    return () => {\n      window.removeEventListener('mousemove', resize);\n      window.removeEventListener('mouseup', stopResizing);\n      window.removeEventListener('touchmove', resize);\n      window.removeEventListener('touchend', stopResizing);\n    };\n  }, [resize, stopResizing]);\n\n  return (\n    <div\n      className={cn(\n        'relative h-full max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950',\n        'before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[\"\"] dark:before:bg-neutral-950',\n        'active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600',\n        className\n      )}\n      style={{\n        height: `${height}px`,\n        maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n        minHeight: `${minHeight}px`,\n      }}\n      ref={containerRef}\n      onMouseDown={startResizing}\n      onTouchStart={startResizing}\n      aria-valuemin={minHeight}\n      aria-valuemax={maxHeight}\n      aria-valuenow={height}\n      aria-label=\"Resizable component - drag the handle to adjust height\"\n      role=\"slider\"\n      tabIndex={0}\n      {...props}\n    >\n      <div\n        className=\"absolute top-0 left-0 size-full cursor-default overflow-hidden\"\n        onMouseDown={(e) => e.stopPropagation()}\n        onTouchStart={(e) => e.stopPropagation()}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"0KAgHA,MAAa,GAA4D,CACvE,gBACA,YACA,YAAY,EACZ,WACA,YACA,GAAG,KACC,CACJ,IAAM,EAAe,EAAuB,KAAK,CAC3C,CAAC,EAAQ,GAAa,EAAS,EAAc,CAC7C,CAAC,EAAY,GAAiB,EAAS,GAAM,CAQ7C,EAAgB,EAElB,GAGG,CACH,EAAc,GAAK,CACnB,EAAe,gBAAgB,EAEjC,EAAE,CACH,CAMK,EAAe,MAAkB,CACrC,EAAc,GAAM,EACnB,EAAE,CAAC,CAQA,EAAS,EACZ,GAA4C,CAC3C,IAAM,EAAY,EAAa,QAC/B,GAAI,GAAc,EAAW,CAC3B,GAAM,CAAE,OAAQ,EAAiB,IAAK,GACpC,EAAU,uBAAuB,CAE/B,EAAU,EACV,aAA0B,WAC5B,EAAU,EAAe,QAChB,aAA0B,aACnC,EAAU,EAAe,QAAQ,GAAG,SAItC,IAAM,EAAY,GADO,EAAU,GAI/B,EAAkB,KAAK,IAAI,EAAW,EAAU,CAChD,IAAc,IAAA,KAChB,EAAkB,KAAK,IAAI,EAAiB,EAAU,EAGxD,EAAU,EAAgB,GAG9B,CAAC,EAAY,EAAW,EAAU,CACnC,CAoBD,OAdA,OACE,OAAO,iBAAiB,YAAa,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC/D,OAAO,iBAAiB,UAAW,EAAa,CAChD,OAAO,iBAAiB,YAAa,EAAQ,CAAE,QAAS,GAAM,CAAC,CAC/D,OAAO,iBAAiB,WAAY,EAAa,KAEpC,CACX,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,UAAW,EAAa,CACnD,OAAO,oBAAoB,YAAa,EAAO,CAC/C,OAAO,oBAAoB,WAAY,EAAa,GAErD,CAAC,EAAQ,EAAa,CAAC,CAGxB,EAAC,MAAA,CACC,UAAW,EACT,2HACA,mSACA,0HACA,EACD,CACD,MAAO,CACL,OAAQ,GAAG,EAAO,IAClB,UAAW,EAAY,GAAG,EAAU,IAAM,IAAA,GAC1C,UAAW,GAAG,EAAU,IACzB,CACD,IAAK,EACL,YAAa,EACb,aAAc,EACd,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,aAAW,yDACX,KAAK,SACL,SAAU,EACV,GAAI,WAEJ,EAAC,MAAA,CACC,UAAU,iEACV,YAAc,GAAM,EAAE,iBAAiB,CACvC,aAAe,GAAM,EAAE,iBAAiB,CAEvC,YACG,EACF"}

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

@@ -1,71 +1,2 @@
-'use client';
-
-import { cn } from "../../utils/cn.mjs";
-import { Eye, EyeOff } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/HideShow/index.tsx
-const insertBreaks = (str, groupSize = 6) => str.replace(new RegExp(`.{1,${groupSize}}`, "g"), "$&​");
-const HideShow = ({ text, className, visiblePrefixChars = 6, maskChar = "•", revealDurationMs = 1e4 }) => {
-	const [isRevealed, setIsRevealed] = useState(false);
-	const hideTimerRef = useRef(null);
-	const maskedText = useMemo(() => {
-		if (!text) return "";
-		if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);
-		const prefix = text.slice(0, visiblePrefixChars);
-		const remaining = Math.max(0, text.length - visiblePrefixChars);
-		return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);
-	}, [
-		text,
-		visiblePrefixChars,
-		maskChar
-	]);
-	useEffect(() => {
-		return () => {
-			if (hideTimerRef.current) {
-				window.clearTimeout(hideTimerRef.current);
-				hideTimerRef.current = null;
-			}
-		};
-	}, []);
-	const reveal = () => {
-		if (isRevealed) return;
-		setIsRevealed(true);
-		if (hideTimerRef.current) {
-			window.clearTimeout(hideTimerRef.current);
-			hideTimerRef.current = null;
-		}
-		hideTimerRef.current = window.setTimeout(() => {
-			setIsRevealed(false);
-		}, revealDurationMs);
-	};
-	const hide = () => {
-		setIsRevealed(false);
-		if (hideTimerRef.current) {
-			window.clearTimeout(hideTimerRef.current);
-			hideTimerRef.current = null;
-		}
-	};
-	const IconComponent = isRevealed ? EyeOff : Eye;
-	return /* @__PURE__ */ jsxs("span", {
-		className: cn("inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10", className),
-		onClick: isRevealed ? hide : reveal,
-		onKeyDown: (e) => {
-			if (e.key === "Enter" || e.key === " ") {
-				e.preventDefault();
-				isRevealed ? hide() : reveal();
-			}
-		},
-		role: "button",
-		tabIndex: 0,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: "min-w-0 break-all",
-			children: isRevealed ? text : maskedText
-		}), /* @__PURE__ */ jsx(IconComponent, { className: "ml-1 ml-auto size-4 min-w-4 shrink-0" })]
-	});
-};
-
-//#endregion
-export { HideShow };
+"use client";import{cn as e}from"../../utils/cn.mjs";import{Eye as t,EyeOff as n}from"lucide-react";import{useEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=(e,t=6)=>e.replace(RegExp(`.{1,${t}}`,`g`),`$&​`),u=({text:u,className:d,visiblePrefixChars:f=6,maskChar:p=`•`,revealDurationMs:m=1e4})=>{let[h,g]=o(!1),_=a(null),v=i(()=>{if(!u)return``;if(f<=0)return p.repeat(u.length);let e=u.slice(0,f),t=Math.max(0,u.length-f);return l(`${e}${p.repeat(t)}`)},[u,f,p]);r(()=>()=>{_.current&&=(window.clearTimeout(_.current),null)},[]);let y=()=>{h||(g(!0),_.current&&=(window.clearTimeout(_.current),null),_.current=window.setTimeout(()=>{g(!1)},m))},b=()=>{g(!1),_.current&&=(window.clearTimeout(_.current),null)},x=h?n:t;return c(`span`,{className:e(`inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10`,d),onClick:h?b:y,onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),h?b():y())},role:`button`,tabIndex:0,children:[s(`span`,{className:`min-w-0 break-all`,children:h?u:v}),s(x,{className:`ml-1 ml-auto size-4 min-w-4 shrink-0`})]})};export{u as HideShow};
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\n/**\n * Props for the HideShow component\n */\nexport interface HideShowProps {\n  /**\n   * Sensitive text to display masked. Copy is only allowed when revealed.\n   */\n  text: string;\n\n  /** Wrapper classes */\n  className?: string;\n\n  /** Number of prefix characters to keep visible when masked. Default: 6 */\n  visiblePrefixChars?: number;\n\n  /** Character used to mask hidden portion. Default: '•' */\n  maskChar?: string;\n\n  /** Reveal duration in ms before auto-hiding. Default: 10000 (10s) */\n  revealDurationMs?: number;\n\n  /** Copy error callback */\n  onCopyError?: (error: Error) => void;\n}\n\n// Insert zero-width spaces every N chars so Safari can wrap long runs\nconst insertBreaks = (str: string, groupSize = 6) =>\n  str.replace(new RegExp(`.{1,${groupSize}}`, 'g'), '$&\\u200b');\n\nexport const HideShow: FC<HideShowProps> = ({\n  text,\n  className,\n  visiblePrefixChars = 6,\n  maskChar = '•',\n  revealDurationMs = 10000,\n}) => {\n  const [isRevealed, setIsRevealed] = useState(false);\n  const hideTimerRef = useRef<number | null>(null);\n\n  const maskedText = useMemo(() => {\n    if (!text) return '';\n    if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);\n    const prefix = text.slice(0, visiblePrefixChars);\n    const remaining = Math.max(0, text.length - visiblePrefixChars);\n    return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);\n  }, [text, visiblePrefixChars, maskChar]);\n\n  useEffect(() => {\n    return () => {\n      if (hideTimerRef.current) {\n        window.clearTimeout(hideTimerRef.current);\n        hideTimerRef.current = null;\n      }\n    };\n  }, []);\n\n  const reveal = () => {\n    if (isRevealed) return;\n    setIsRevealed(true);\n    if (hideTimerRef.current) {\n      window.clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n    hideTimerRef.current = window.setTimeout(() => {\n      setIsRevealed(false);\n    }, revealDurationMs);\n  };\n\n  const hide = () => {\n    setIsRevealed(false);\n\n    if (hideTimerRef.current) {\n      window.clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n  };\n\n  const IconComponent = isRevealed ? EyeOff : Eye;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10',\n        className\n      )}\n      onClick={isRevealed ? hide : reveal}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          isRevealed ? hide() : reveal();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <span className=\"min-w-0 break-all\">\n        {isRevealed ? text : maskedText}\n      </span>\n      <IconComponent className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\" />\n    </span>\n  );\n};\n"],"mappings":";;;;;;;;AAgCA,MAAM,gBAAgB,KAAa,YAAY,MAC7C,IAAI,QAAQ,IAAI,OAAO,OAAO,UAAU,IAAI,IAAI,EAAE,MAAW;AAE/D,MAAa,YAA+B,EAC1C,MACA,WACA,qBAAqB,GACrB,WAAW,KACX,mBAAmB,UACf;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CACnD,MAAM,eAAe,OAAsB,KAAK;CAEhD,MAAM,aAAa,cAAc;AAC/B,MAAI,CAAC,KAAM,QAAO;AAClB,MAAI,sBAAsB,EAAG,QAAO,SAAS,OAAO,KAAK,OAAO;EAChE,MAAM,SAAS,KAAK,MAAM,GAAG,mBAAmB;EAChD,MAAM,YAAY,KAAK,IAAI,GAAG,KAAK,SAAS,mBAAmB;AAC/D,SAAO,aAAa,GAAG,SAAS,SAAS,OAAO,UAAU,GAAG;IAC5D;EAAC;EAAM;EAAoB;EAAS,CAAC;AAExC,iBAAgB;AACd,eAAa;AACX,OAAI,aAAa,SAAS;AACxB,WAAO,aAAa,aAAa,QAAQ;AACzC,iBAAa,UAAU;;;IAG1B,EAAE,CAAC;CAEN,MAAM,eAAe;AACnB,MAAI,WAAY;AAChB,gBAAc,KAAK;AACnB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;AAEzB,eAAa,UAAU,OAAO,iBAAiB;AAC7C,iBAAc,MAAM;KACnB,iBAAiB;;CAGtB,MAAM,aAAa;AACjB,gBAAc,MAAM;AAEpB,MAAI,aAAa,SAAS;AACxB,UAAO,aAAa,aAAa,QAAQ;AACzC,gBAAa,UAAU;;;CAI3B,MAAM,gBAAgB,aAAa,SAAS;AAE5C,QACE,qBAAC;EACC,WAAW,GACT,uGACA,UACD;EACD,SAAS,aAAa,OAAO;EAC7B,YAAY,MAAM;AAChB,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,MAAE,gBAAgB;AAClB,iBAAa,MAAM,GAAG,QAAQ;;;EAGlC,MAAK;EACL,UAAU;aAEV,oBAAC;GAAK,WAAU;aACb,aAAa,OAAO;IAChB,EACP,oBAAC,iBAAc,WAAU,yCAAyC;GAC7D"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\n\n/**\n * Props for the HideShow component\n */\nexport interface HideShowProps {\n  /**\n   * Sensitive text to display masked. Copy is only allowed when revealed.\n   */\n  text: string;\n\n  /** Wrapper classes */\n  className?: string;\n\n  /** Number of prefix characters to keep visible when masked. Default: 6 */\n  visiblePrefixChars?: number;\n\n  /** Character used to mask hidden portion. Default: '•' */\n  maskChar?: string;\n\n  /** Reveal duration in ms before auto-hiding. Default: 10000 (10s) */\n  revealDurationMs?: number;\n\n  /** Copy error callback */\n  onCopyError?: (error: Error) => void;\n}\n\n// Insert zero-width spaces every N chars so Safari can wrap long runs\nconst insertBreaks = (str: string, groupSize = 6) =>\n  str.replace(new RegExp(`.{1,${groupSize}}`, 'g'), '$&\\u200b');\n\nexport const HideShow: FC<HideShowProps> = ({\n  text,\n  className,\n  visiblePrefixChars = 6,\n  maskChar = '•',\n  revealDurationMs = 10000,\n}) => {\n  const [isRevealed, setIsRevealed] = useState(false);\n  const hideTimerRef = useRef<number | null>(null);\n\n  const maskedText = useMemo(() => {\n    if (!text) return '';\n    if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);\n    const prefix = text.slice(0, visiblePrefixChars);\n    const remaining = Math.max(0, text.length - visiblePrefixChars);\n    return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);\n  }, [text, visiblePrefixChars, maskChar]);\n\n  useEffect(() => {\n    return () => {\n      if (hideTimerRef.current) {\n        window.clearTimeout(hideTimerRef.current);\n        hideTimerRef.current = null;\n      }\n    };\n  }, []);\n\n  const reveal = () => {\n    if (isRevealed) return;\n    setIsRevealed(true);\n    if (hideTimerRef.current) {\n      window.clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n    hideTimerRef.current = window.setTimeout(() => {\n      setIsRevealed(false);\n    }, revealDurationMs);\n  };\n\n  const hide = () => {\n    setIsRevealed(false);\n\n    if (hideTimerRef.current) {\n      window.clearTimeout(hideTimerRef.current);\n      hideTimerRef.current = null;\n    }\n  };\n\n  const IconComponent = isRevealed ? EyeOff : Eye;\n\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full items-center gap-2 rounded-md p-0.5 hover:cursor-pointer hover:bg-neutral/10',\n        className\n      )}\n      onClick={isRevealed ? hide : reveal}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          isRevealed ? hide() : reveal();\n        }\n      }}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <span className=\"min-w-0 break-all\">\n        {isRevealed ? text : maskedText}\n      </span>\n      <IconComponent className=\"ml-1 ml-auto size-4 min-w-4 shrink-0\" />\n    </span>\n  );\n};\n"],"mappings":"+NAgCA,MAAM,GAAgB,EAAa,EAAY,IAC7C,EAAI,QAAY,OAAO,OAAO,EAAU,GAAI,IAAI,CAAE,MAAW,CAElD,GAA+B,CAC1C,OACA,YACA,qBAAqB,EACrB,WAAW,IACX,mBAAmB,OACf,CACJ,GAAM,CAAC,EAAY,GAAiB,EAAS,GAAM,CAC7C,EAAe,EAAsB,KAAK,CAE1C,EAAa,MAAc,CAC/B,GAAI,CAAC,EAAM,MAAO,GAClB,GAAI,GAAsB,EAAG,OAAO,EAAS,OAAO,EAAK,OAAO,CAChE,IAAM,EAAS,EAAK,MAAM,EAAG,EAAmB,CAC1C,EAAY,KAAK,IAAI,EAAG,EAAK,OAAS,EAAmB,CAC/D,OAAO,EAAa,GAAG,IAAS,EAAS,OAAO,EAAU,GAAG,EAC5D,CAAC,EAAM,EAAoB,EAAS,CAAC,CAExC,UACe,CACX,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,OAG1B,EAAE,CAAC,CAEN,IAAM,MAAe,CACf,IACJ,EAAc,GAAK,CACnB,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,MAEzB,EAAa,QAAU,OAAO,eAAiB,CAC7C,EAAc,GAAM,EACnB,EAAiB,GAGhB,MAAa,CACjB,EAAc,GAAM,CAEpB,AAEE,EAAa,WADb,OAAO,aAAa,EAAa,QAAQ,CAClB,OAIrB,EAAgB,EAAa,EAAS,EAE5C,OACE,EAAC,OAAA,CACC,UAAW,EACT,sGACA,EACD,CACD,QAAS,EAAa,EAAO,EAC7B,UAAY,GAAM,EACZ,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,EAAa,GAAM,CAAG,GAAQ,GAGlC,KAAK,SACL,SAAU,YAEV,EAAC,OAAA,CAAK,UAAU,6BACb,EAAa,EAAO,GAChB,CACP,EAAC,EAAA,CAAc,UAAU,uCAAA,CAAyC,CAAA,EAC7D"}