npm - @intlayer/design-system - Versions diffs - 6.1.4 → 6.1.6-canary.0 - Mend

@intlayer/design-system 6.1.4 → 6.1.6-canary.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (320) hide show

package/dist/components/Headers/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\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:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />;\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h2\n className={cn('mt-16 mb-2 text-2xl font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h3\n className={cn('mt-5 mb-2 text-xl font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h4\n className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h5\n className={cn('mt-3 text-base font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h6\n className={cn('mt-3 ml-3 text-base font-bold', styledHeading, className)}\n {...props}\n />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\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\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\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n const parentLeft = parentElem.getBoundingClientRect().left,\n parentTop = parentElem.getBoundingClientRect().top;\n\n const after = window.getComputedStyle(parentElem, ':after');\n\n const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n afterEnd = afterStart + parseInt(after.width, 10);\n\n const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n afterYEnd = afterYStart + parseInt(after.height, 10);\n\n const mouseX = e.clientX,\n 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\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\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\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"],"names":["jsx","cn","id"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\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:hover:cursor-pointer 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('mt-5 text-2xl font-bold', 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('mt-16 mb-2 text-2xl font-bold', 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('mt-5 mb-2 text-xl font-bold', 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('mt-3 text-lg font-bold', 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('mt-3 text-base font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h6\n className={cn('mt-3 ml-3 text-base font-bold', 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 parentTop = parentElem.getBoundingClientRect().top;\n\n const after = window.getComputedStyle(parentElem, ':after');\n\n const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n afterEnd = afterStart + parseInt(after.width, 10);\n\n const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n afterYEnd = afterYStart + parseInt(after.height, 10);\n\n const mouseX = e.clientX,\n 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"],"names":["jsx","cn","id"],"mappings":"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"}

package/dist/components/Headers/index.d.ts CHANGED Viewed

@@ -1,12 +1,79 @@
 import { FC, HTMLAttributes } from 'react';
-type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
+/**
+ * Props for heading components
+ */
+export type HeadingProps = HTMLAttributes<HTMLHeadingElement> & {
+    /**
+     * Whether the heading should be clickable with anchor link functionality.
+     * Enables copy-to-clipboard URL behavior and smooth scrolling.
+     * @default false (for H1), true (for H2-H5)
+     */
     isClickable?: boolean;
 };
+/**
+ * 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>
+ * ```
+ */
 export declare const H1: FC<HeadingProps>;
+/**
+ * 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>
+ * ```
+ */
 export declare const H2: FC<HeadingProps>;
+/**
+ * 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>
+ * ```
+ */
 export declare const H3: FC<HeadingProps>;
+/**
+ * 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>
+ * ```
+ */
 export declare const H4: FC<HeadingProps>;
+/**
+ * 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>
+ * ```
+ */
 export declare const H5: FC<HeadingProps>;
 export declare const H6: FC<HeadingProps>;
-export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Headers/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Headers/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAmB,MAAM,OAAO,CAAC;~~AA6DjE~~,~~KAAK~~,YAAY,GAAG,cAAc,CAAC,kBAAkB,CAAC,GAAG;~~IACvD~~,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;~~AA0FF~~,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AAEF,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;~~AACF~~,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;~~AACF~~,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;~~AACF~~,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AAEF,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Headers/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAmB,MAAM,OAAO,CAAC;AA2FjE;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,kBAAkB,CAAC,GAAG;IAC9D;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AA4HF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC;AAEF,eAAO,MAAM,EAAE,EAAE,EAAE,CAAC,YAAY,CAE/B,CAAC"}

package/dist/components/Headers/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\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:hover:cursor-pointer after:absolute after:to-neutral after:md:opacity-0 after:transition-opacity hover:after:opacity-80 after:duration-200 after:delay-100`;\n\nconst StyledH1: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => <h1 className={cn('mt-5 text-2xl font-bold', className)} {...props} />;\n\nconst StyledH2: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h2\n className={cn('mt-16 mb-2 text-2xl font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH3: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h3\n className={cn('mt-5 mb-2 text-xl font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH4: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h4\n className={cn('mt-3 text-lg font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH5: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h5\n className={cn('mt-3 text-base font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h6\n className={cn('mt-3 ml-3 text-base font-bold', styledHeading, className)}\n {...props}\n />\n);\n\ntype HeadingProps = HTMLAttributes<HTMLHeadingElement> & {\n isClickable?: boolean;\n};\ntype HeadingGlobalProps = HeadingProps & {\n H: FC<HTMLAttributes<HTMLHeadingElement>>;\n};\ntype HeadingType = (props: HeadingGlobalProps) => JSX.Element;\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\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\nconst afterClick = (parentElem: Element, e: MouseEvent<HTMLHeadingElement>) => {\n const parentLeft = parentElem.getBoundingClientRect().left,\n parentTop = parentElem.getBoundingClientRect().top;\n\n const after = window.getComputedStyle(parentElem, ':after');\n\n const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n afterEnd = afterStart + parseInt(after.width, 10);\n\n const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n afterYEnd = afterYStart + parseInt(after.height, 10);\n\n const mouseX = e.clientX,\n 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\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\nexport const H1: FC<HeadingProps> = ({ isClickable: _, ...props }) => (\n <StyledH1 {...props} />\n);\n\nexport const H2: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH2} isClickable={isClickable} {...props} />\n);\nexport const H3: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH3} isClickable={isClickable} {...props} />\n);\nexport const H4: FC<HeadingProps> = ({ isClickable = false, ...props }) => (\n <HeadingWrapper H={StyledH4} isClickable={isClickable} {...props} />\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"],"names":["id"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/Headers/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes, JSX, MouseEvent } from 'react';\nimport { cn } from '../../utils/cn';\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:hover:cursor-pointer 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('mt-5 text-2xl font-bold', 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('mt-16 mb-2 text-2xl font-bold', 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('mt-5 mb-2 text-xl font-bold', 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('mt-3 text-lg font-bold', 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('mt-3 text-base font-bold', styledHeading, className)}\n {...props}\n />\n);\n\nconst StyledH6: FC<HTMLAttributes<HTMLHeadingElement>> = ({\n className,\n ...props\n}) => (\n <h6\n className={cn('mt-3 ml-3 text-base font-bold', 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 parentTop = parentElem.getBoundingClientRect().top;\n\n const after = window.getComputedStyle(parentElem, ':after');\n\n const afterStart = parentLeft + parseInt(after.getPropertyValue('left'), 10),\n afterEnd = afterStart + parseInt(after.width, 10);\n\n const afterYStart = parentTop + parseInt(after.getPropertyValue('top'), 10),\n afterYEnd = afterYStart + parseInt(after.height, 10);\n\n const mouseX = e.clientX,\n 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"],"names":["id"],"mappings":"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"}

package/dist/components/HeightResizer/index.cjs CHANGED Viewed

@@ -28,7 +28,7 @@ const HeightResizer = ({
   const resize = ReactExports.useCallback(
     (mouseMoveEvent) => {
       const container = containerRef.current;
-      if (isResizing && container && parent) {
+      if (isResizing && container) {
         const { height: containerHeight, top: containerTop } = container.getBoundingClientRect();
         let clientY = 0;
         if (mouseMoveEvent instanceof MouseEvent) {
@@ -38,11 +38,14 @@ const HeightResizer = ({
         }
         const resizeDifference = clientY - containerTop;
         const newHeight = containerHeight - resizeDifference;
-        const correctedHeight = Math.max(newHeight, 0);
+        let correctedHeight = Math.max(newHeight, minHeight);
+        if (maxHeight !== void 0) {
+          correctedHeight = Math.min(correctedHeight, maxHeight);
+        }
         setHeight(correctedHeight);
       }
     },
-    [isResizing]
+    [isResizing, minHeight, maxHeight]
   );
   ReactExports.useEffect(() => {
     window.addEventListener("mousemove", resize, { passive: true });
@@ -60,15 +63,15 @@ const HeightResizer = ({
     "div",
     {
       className: utils_cn.cn(
-        minHeight && `max-w-[${maxHeight}px]`,
-        maxHeight && `min-w-[${minHeight}px]`,
         "relative h-full w-full max-h-[80%] cursor-ns-resize border-t-[2px] border-neutral-200 transition dark:border-neutral-950",
         'before:absolute before:top-0 before:z-10 before:left-1/2 before:block before:w-10 before:h-2 before:-translate-y-1/2 before:-translate-x-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`
+        height: `${height}px`,
+        maxHeight: maxHeight ? `${maxHeight}px` : void 0,
+        minHeight: `${minHeight}px`
       },
       ref: containerRef,
       onMouseDown: startResizing,
@@ -76,7 +79,7 @@ const HeightResizer = ({
       "aria-valuemin": minHeight,
       "aria-valuemax": maxHeight,
       "aria-valuenow": height,
-      "aria-label": "Resizable component",
+      "aria-label": "Resizable component - drag the handle to adjust height",
       role: "slider",
       tabIndex: 0,
       ...props,

package/dist/components/HeightResizer/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n DetailedHTMLProps,\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n type FC,\n type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\ntype HeightResizerProps = {\n initialHeight: number;\n maxHeight?: number;\n minHeight?: number;\n} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\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 // Handler to ~~start~~ resizing\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 // Handler to stop resizing\n const stopResizing = useCallback(() => {\n setIsResizing(false);\n }, []);\n\n // ~~Handler~~ to resize ~~the~~ ~~div~~\n const resize = useCallback(\n (mouseMoveEvent: MouseEvent \| TouchEvent) => {\n const container = containerRef.current;\n if (isResizing && container ~~&& parent~~) {\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 ~~const~~ correctedHeight = Math.max(newHeight, 0);\n\n setHeight(correctedHeight);\n }\n },\n [isResizing]\n );\n\n // ~~Add~~ event listeners for ~~mouse~~ ~~move~~ ~~and~~ mouse up\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 ~~minHeight && `max-w-[${maxHeight}px]`,\n maxHeight && `min-w-[${minHeight}px]`,\n~~ 'relative h-full w-full max-h-[80%] cursor-ns-resize border-t-[2px] border-neutral-200 transition dark:border-neutral-950',\n 'before:absolute before:top-0 before:z-10 before:left-1/2 before:block before:w-10 before:h-2 before:-translate-y-1/2 before:-translate-x-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 }}\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\"\n role=\"slider\"\n tabIndex={0}\n {...props}\n >\n <div\n className=\"absolute left-0 top-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"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;~~AAoBO~~,MAAM,gBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAeA,aAAAA,OAAuB,IAAI;AAChD,QAAM,CAAC,QAAQ,SAAS,IAAIC,aAAAA,SAAS,aAAa;AAClD,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAS,KAAK;~~AAGlD~~,QAAM,gBAAgBC,aAAAA;AAAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;~~AAIH~~,QAAM,eAAeA,aAAAA,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;~~AAGL~~,QAAM,SAASA,aAAAA;AAAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,~~aAAa,QAAQ~~;~~AACrC~~,cAAM,EAAE,QAAQ,iBAAiB,KAAK,aAAA,IACpC,UAAU,sBAAA;AAEZ,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,mBAAmB,UAAU;AACnC,cAAM,YAAY,kBAAkB;~~AACpC~~,~~cAAM~~,kBAAkB,KAAK,IAAI,WAAW,~~CAAC~~;~~AAE7C~~,kBAAU,eAAe;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,~~UAAU~~;AAAA,EAAA;~~AAIbC~~,eAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT~~,aAAa,UAAU,SAAS~~;AAAA,~~QAChC,aAAa,UAAU,SAAS;AAAA,QAChC;AAAA,~~QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,MAAA;AAAA,~~MAEnB~~,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n DetailedHTMLProps,\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n type FC,\n type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\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 w-full max-h-[80%] cursor-ns-resize border-t-[2px] border-neutral-200 transition dark:border-neutral-950',\n 'before:absolute before:top-0 before:z-10 before:left-1/2 before:block before:w-10 before:h-2 before:-translate-y-1/2 before:-translate-x-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 left-0 top-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"],"names":["useRef","useState","useCallback","useEffect","jsx","cn"],"mappings":";;;;;;AA+GO,MAAM,gBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAeA,aAAAA,OAAuB,IAAI;AAChD,QAAM,CAAC,QAAQ,SAAS,IAAIC,aAAAA,SAAS,aAAa;AAClD,QAAM,CAAC,YAAY,aAAa,IAAIA,aAAAA,SAAS,KAAK;AAQlD,QAAM,gBAAgBC,aAAAA;AAAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAOH,QAAM,eAAeA,aAAAA,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAQL,QAAM,SAASA,aAAAA;AAAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,WAAW;AAC3B,cAAM,EAAE,QAAQ,iBAAiB,KAAK,aAAA,IACpC,UAAU,sBAAA;AAEZ,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,mBAAmB,UAAU;AACnC,cAAM,YAAY,kBAAkB;AAGpC,YAAI,kBAAkB,KAAK,IAAI,WAAW,SAAS;AACnD,YAAI,cAAc,QAAW;AAC3B,4BAAkB,KAAK,IAAI,iBAAiB,SAAS;AAAA,QACvD;AAEA,kBAAU,eAAe;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,YAAY,WAAW,SAAS;AAAA,EAAA;AAOnCC,eAAAA,UAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,SAAAA;AAAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,QACjB,WAAW,YAAY,GAAG,SAAS,OAAO;AAAA,QAC1C,WAAW,GAAG,SAAS;AAAA,MAAA;AAAA,MAEzB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}

package/dist/components/HeightResizer/index.d.ts CHANGED Viewed

@@ -1,9 +1,98 @@
 import { DetailedHTMLProps, HTMLAttributes, FC, PropsWithChildren } from 'react';
+/**
+ * Props for the HeightResizer component
+ *
+ * @interface HeightResizerProps
+ */
 type HeightResizerProps = {
+    /**
+     * Initial height in pixels for the resizable container
+     * Sets the default size when the component first loads
+     * @example 200
+     */
     initialHeight: number;
+    /**
+     * Maximum height in pixels that the user can resize to (optional)
+     * When undefined, no maximum limit is enforced
+     * @example 500
+     */
     maxHeight?: number;
+    /**
+     * Minimum height in pixels that the user can resize to (optional)
+     * Prevents the container from being resized below this threshold
+     * @default 0
+     * @example 50
+     */
     minHeight?: number;
 } & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+/**
+ * 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
+ */
 export declare const HeightResizer: FC<PropsWithChildren<HeightResizerProps>>;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/HeightResizer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HeightResizer/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EACZ,iBAAiB,EACjB,cAAc,EAKd,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf,KAAK,kBAAkB,GAAG;IACxB,aAAa,EAAE,MAAM,CAAC;~~IACtB~~,SAAS,CAAC,EAAE,MAAM,CAAC;~~IACnB~~,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC;AAEtE,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,~~CAuGnE~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HeightResizer/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EACZ,iBAAiB,EACjB,cAAc,EAKd,KAAK,EAAE,EACP,KAAK,iBAAiB,EACvB,MAAM,OAAO,CAAC;AAGf;;;;GAIG;AACH,KAAK,kBAAkB,GAAG;IACxB;;;;OAIG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,iBAAiB,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,CA4HnE,CAAC"}

package/dist/components/HeightResizer/index.mjs CHANGED Viewed

@@ -26,7 +26,7 @@ const HeightResizer = ({
   const resize = useCallback(
     (mouseMoveEvent) => {
       const container = containerRef.current;
-      if (isResizing && container && parent) {
+      if (isResizing && container) {
         const { height: containerHeight, top: containerTop } = container.getBoundingClientRect();
         let clientY = 0;
         if (mouseMoveEvent instanceof MouseEvent) {
@@ -36,11 +36,14 @@ const HeightResizer = ({
         }
         const resizeDifference = clientY - containerTop;
         const newHeight = containerHeight - resizeDifference;
-        const correctedHeight = Math.max(newHeight, 0);
+        let correctedHeight = Math.max(newHeight, minHeight);
+        if (maxHeight !== void 0) {
+          correctedHeight = Math.min(correctedHeight, maxHeight);
+        }
         setHeight(correctedHeight);
       }
     },
-    [isResizing]
+    [isResizing, minHeight, maxHeight]
   );
   useEffect(() => {
     window.addEventListener("mousemove", resize, { passive: true });
@@ -58,15 +61,15 @@ const HeightResizer = ({
     "div",
     {
       className: cn(
-        minHeight && `max-w-[${maxHeight}px]`,
-        maxHeight && `min-w-[${minHeight}px]`,
         "relative h-full w-full max-h-[80%] cursor-ns-resize border-t-[2px] border-neutral-200 transition dark:border-neutral-950",
         'before:absolute before:top-0 before:z-10 before:left-1/2 before:block before:w-10 before:h-2 before:-translate-y-1/2 before:-translate-x-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`
+        height: `${height}px`,
+        maxHeight: maxHeight ? `${maxHeight}px` : void 0,
+        minHeight: `${minHeight}px`
       },
       ref: containerRef,
       onMouseDown: startResizing,
@@ -74,7 +77,7 @@ const HeightResizer = ({
       "aria-valuemin": minHeight,
       "aria-valuemax": maxHeight,
       "aria-valuenow": height,
-      "aria-label": "Resizable component",
+      "aria-label": "Resizable component - drag the handle to adjust height",
       role: "slider",
       tabIndex: 0,
       ...props,

package/dist/components/HeightResizer/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sources":["../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n DetailedHTMLProps,\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n type FC,\n type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\ntype HeightResizerProps = {\n initialHeight: number;\n maxHeight?: number;\n minHeight?: number;\n} & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;\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 // Handler to ~~start~~ resizing\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 // Handler to stop resizing\n const stopResizing = useCallback(() => {\n setIsResizing(false);\n }, []);\n\n // ~~Handler~~ to resize ~~the~~ ~~div~~\n const resize = useCallback(\n (mouseMoveEvent: MouseEvent \| TouchEvent) => {\n const container = containerRef.current;\n if (isResizing && container ~~&& parent~~) {\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 ~~const~~ correctedHeight = Math.max(newHeight, 0);\n\n setHeight(correctedHeight);\n }\n },\n [isResizing]\n );\n\n // ~~Add~~ event listeners for ~~mouse~~ ~~move~~ ~~and~~ mouse up\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 ~~minHeight && `max-w-[${maxHeight}px]`,\n maxHeight && `min-w-[${minHeight}px]`,\n~~ 'relative h-full w-full max-h-[80%] cursor-ns-resize border-t-[2px] border-neutral-200 transition dark:border-neutral-950',\n 'before:absolute before:top-0 before:z-10 before:left-1/2 before:block before:w-10 before:h-2 before:-translate-y-1/2 before:-translate-x-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 }}\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\"\n role=\"slider\"\n tabIndex={0}\n {...props}\n >\n <div\n className=\"absolute left-0 top-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"],"names":[],"mappings":";;;;~~AAoBO~~,MAAM,gBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa;AAClD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;~~AAGlD~~,QAAM,gBAAgB;AAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;~~AAIH~~,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;~~AAGL~~,QAAM,SAAS;AAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,~~aAAa,QAAQ~~;~~AACrC~~,cAAM,EAAE,QAAQ,iBAAiB,KAAK,aAAA,IACpC,UAAU,sBAAA;AAEZ,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,mBAAmB,UAAU;AACnC,cAAM,YAAY,kBAAkB;~~AACpC~~,~~cAAM~~,kBAAkB,KAAK,IAAI,WAAW,~~CAAC~~;~~AAE7C~~,kBAAU,eAAe;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,~~UAAU~~;AAAA,EAAA;~~AAIb~~,YAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT~~,aAAa,UAAU,SAAS~~;AAAA,~~QAChC,aAAa,UAAU,SAAS;AAAA,QAChC;AAAA,~~QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,MAAA;AAAA,~~MAEnB~~,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"index.mjs","sources":["../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n DetailedHTMLProps,\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n type FC,\n type PropsWithChildren,\n} from 'react';\nimport { cn } from '../../utils/cn';\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 w-full max-h-[80%] cursor-ns-resize border-t-[2px] border-neutral-200 transition dark:border-neutral-950',\n 'before:absolute before:top-0 before:z-10 before:left-1/2 before:block before:w-10 before:h-2 before:-translate-y-1/2 before:-translate-x-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 left-0 top-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"],"names":[],"mappings":";;;;AA+GO,MAAM,gBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,aAAa;AAClD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAQlD,QAAM,gBAAgB;AAAA,IACpB,CACE,mBAGG;AACH,oBAAc,IAAI;AAClB,qBAAe,eAAA;AAAA,IACjB;AAAA,IACA,CAAA;AAAA,EAAC;AAOH,QAAM,eAAe,YAAY,MAAM;AACrC,kBAAc,KAAK;AAAA,EACrB,GAAG,CAAA,CAAE;AAQL,QAAM,SAAS;AAAA,IACb,CAAC,mBAA4C;AAC3C,YAAM,YAAY,aAAa;AAC/B,UAAI,cAAc,WAAW;AAC3B,cAAM,EAAE,QAAQ,iBAAiB,KAAK,aAAA,IACpC,UAAU,sBAAA;AAEZ,YAAI,UAAU;AACd,YAAI,0BAA0B,YAAY;AACxC,oBAAU,eAAe;AAAA,QAC3B,WAAW,0BAA0B,YAAY;AAC/C,oBAAU,eAAe,QAAQ,CAAC,EAAE;AAAA,QACtC;AAEA,cAAM,mBAAmB,UAAU;AACnC,cAAM,YAAY,kBAAkB;AAGpC,YAAI,kBAAkB,KAAK,IAAI,WAAW,SAAS;AACnD,YAAI,cAAc,QAAW;AAC3B,4BAAkB,KAAK,IAAI,iBAAiB,SAAS;AAAA,QACvD;AAEA,kBAAU,eAAe;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,YAAY,WAAW,SAAS;AAAA,EAAA;AAOnC,YAAU,MAAM;AACd,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,WAAW,YAAY;AAC/C,WAAO,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM;AAC9D,WAAO,iBAAiB,YAAY,YAAY;AAEhD,WAAO,MAAM;AACX,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,WAAW,YAAY;AAClD,aAAO,oBAAoB,aAAa,MAAM;AAC9C,aAAO,oBAAoB,YAAY,YAAY;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,YAAY,CAAC;AAEzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,QACjB,WAAW,YAAY,GAAG,SAAS,OAAO;AAAA,QAC1C,WAAW,GAAG,SAAS;AAAA,MAAA;AAAA,MAEzB,KAAK;AAAA,MACL,aAAa;AAAA,MACb,cAAc;AAAA,MACd,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,cAAW;AAAA,MACX,MAAK;AAAA,MACL,UAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,aAAa,CAAC,MAAM,EAAE,gBAAA;AAAA,UACtB,cAAc,CAAC,MAAM,EAAE,gBAAA;AAAA,UAEtB;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/components/IDE/MarkDownRender.cjs CHANGED Viewed

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const Markdown = require("markdown-to-jsx");
+const components_MarkDownRender_processor = require("../MarkDownRender/processor.cjs");
 const components_IDE_Code = require("./Code.cjs");
 const MarkdownRenderer = ({
   children,
   isDarkMode
 }) => /* @__PURE__ */ jsxRuntime.jsx(
-  Markdown,
+  components_MarkDownRender_processor.MarkdownProcessor,
   {
     options: {
       overrides: {

package/dist/components/IDE/MarkDownRender.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkDownRender.cjs","sources":["../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import ~~Markdown~~ from '~~markdown-to-jsx~~';\nimport ~~type~~ { FC } from '~~react~~';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n isDarkMode?: boolean;\n children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode,\n}) => (\n <~~Markdown~~\n options={{\n overrides: {\n code: {\n component: (props) => (\n <Code\n {...props}\n isDarkMode={isDarkMode}\n language={props.className?.replace('lang-', '')}\n showHeader={false}\n className=\"text-xs leading-5\"\n />\n ),\n },\n pre: (props) => props.children,\n },\n }}\n >\n {children ?? ''}\n </~~Markdown~~>\n);\n"],"names":["jsx","Code"],"mappings":";;;;;~~AASO~~,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AACF,MACEA,2BAAAA;AAAAA,~~EAAC~~;~~AAAA~~,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,UACJ,WAAW,CAAC,~~UACVA~~,2BAAAA;AAAAA,~~YAACC~~,oBAAAA;AAAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ;AAAA,cACA,~~UAAU~~,MAAM,WAAW,QAAQ,SAAS,EAAE;AAAA,~~cAC9C~~,YAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,QAGJ,KAAK,CAAC,~~UAAU~~,MAAM;AAAA,MAAA;AAAA,~~IACxB~~;AAAA,IAGD,UAAA,YAAY;AAAA,EAAA;AACf;;"}
1	+ {"version":3,"file":"MarkDownRender.cjs","sources":["../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { BundledLanguage } from 'shiki';\nimport { MarkdownProcessor } from '../MarkDownRender/processor';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n isDarkMode?: boolean;\n children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode,\n}) => (\n <MarkdownProcessor\n options={{\n overrides: {\n code: {\n component: (props: ComponentProps<typeof Code>) => (\n <Code\n {...props}\n isDarkMode={isDarkMode}\n language={\n props.className?.replace('lang-', '') as BundledLanguage\n }\n showHeader={false}\n className=\"text-xs leading-5\"\n />\n ),\n },\n pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n },\n }}\n >\n {children ?? ''}\n </MarkdownProcessor>\n);\n"],"names":["jsx","MarkdownProcessor","Code"],"mappings":";;;;;AAUO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AACF,MACEA,2BAAAA;AAAAA,EAACC,oCAAAA;AAAAA,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,UACJ,WAAW,CAAC,UACVD,2BAAAA;AAAAA,YAACE,oBAAAA;AAAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ;AAAA,cACA,UACE,MAAM,WAAW,QAAQ,SAAS,EAAE;AAAA,cAEtC,YAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,QAGJ,KAAK,CAAC,UAA2C,MAAM;AAAA,MAAA;AAAA,IACzD;AAAA,IAGD,UAAA,YAAY;AAAA,EAAA;AACf;;"}

package/dist/components/IDE/MarkDownRender.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkDownRender.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/MarkDownRender.tsx"],"names":[],"mappings":"~~AACA~~,OAAO,KAAK,~~EAAE~~,EAAE,EAAE,MAAM,OAAO,CAAC;~~AAGhC~~,KAAK,qBAAqB,GAAG;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,~~CAwBtD~~,CAAC"}
1	+ {"version":3,"file":"MarkDownRender.d.ts","sourceRoot":"","sources":["../../../src/components/IDE/MarkDownRender.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAA4C,EAAE,EAAE,MAAM,OAAO,CAAC;AAK1E,KAAK,qBAAqB,GAAG;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA0BtD,CAAC"}

package/dist/components/IDE/MarkDownRender.mjs CHANGED Viewed

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import Markdown from "markdown-to-jsx";
+import { MarkdownProcessor } from "../MarkDownRender/processor.mjs";
 import { Code } from "./Code.mjs";
 const MarkdownRenderer = ({
   children,
   isDarkMode
 }) => /* @__PURE__ */ jsx(
-  Markdown,
+  MarkdownProcessor,
   {
     options: {
       overrides: {

package/dist/components/IDE/MarkDownRender.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkDownRender.mjs","sources":["../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import ~~Markdown~~ from '~~markdown-to-jsx~~';\nimport ~~type~~ { FC } from '~~react~~';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n isDarkMode?: boolean;\n children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode,\n}) => (\n <~~Markdown~~\n options={{\n overrides: {\n code: {\n component: (props) => (\n <Code\n {...props}\n isDarkMode={isDarkMode}\n language={props.className?.replace('lang-', '')}\n showHeader={false}\n className=\"text-xs leading-5\"\n />\n ),\n },\n pre: (props) => props.children,\n },\n }}\n >\n {children ?? ''}\n </~~Markdown~~>\n);\n"],"names":[],"mappings":";;;~~AASO~~,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,UACJ,WAAW,CAAC,UACV;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ;AAAA,cACA,~~UAAU~~,MAAM,WAAW,QAAQ,SAAS,EAAE;AAAA,~~cAC9C~~,YAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,QAGJ,KAAK,CAAC,~~UAAU~~,MAAM;AAAA,MAAA;AAAA,~~IACxB~~;AAAA,IAGD,UAAA,YAAY;AAAA,EAAA;AACf;"}
1	+ {"version":3,"file":"MarkDownRender.mjs","sources":["../../../src/components/IDE/MarkDownRender.tsx"],"sourcesContent":["import type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { BundledLanguage } from 'shiki';\nimport { MarkdownProcessor } from '../MarkDownRender/processor';\nimport { Code } from './Code';\n\ntype MarkdownRendererProps = {\n isDarkMode?: boolean;\n children: string;\n};\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode,\n}) => (\n <MarkdownProcessor\n options={{\n overrides: {\n code: {\n component: (props: ComponentProps<typeof Code>) => (\n <Code\n {...props}\n isDarkMode={isDarkMode}\n language={\n props.className?.replace('lang-', '') as BundledLanguage\n }\n showHeader={false}\n className=\"text-xs leading-5\"\n />\n ),\n },\n pre: (props: ComponentPropsWithoutRef<'pre'>) => props.children,\n },\n }}\n >\n {children ?? ''}\n </MarkdownProcessor>\n);\n"],"names":[],"mappings":";;;AAUO,MAAM,mBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAS;AAAA,MACP,WAAW;AAAA,QACT,MAAM;AAAA,UACJ,WAAW,CAAC,UACV;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAG;AAAA,cACJ;AAAA,cACA,UACE,MAAM,WAAW,QAAQ,SAAS,EAAE;AAAA,cAEtC,YAAY;AAAA,cACZ,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,QAGJ,KAAK,CAAC,UAA2C,MAAM;AAAA,MAAA;AAAA,IACzD;AAAA,IAGD,UAAA,YAAY;AAAA,EAAA;AACf;"}

package/dist/components/InformationTag/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../../src/components/InformationTag/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype CopiedTextInformationProps = DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n>;\n\nexport const InformationTag: FC<CopiedTextInformationProps> = ({\n className,\n children,\n ...props\n}) => (\n <i className={cn('text-xs text-neutral-400', className)} {...props}>\n ⓘ {children}\n </i>\n);\n"],"names":["jsxs","cn"],"mappings":";;;;~~AAQO~~,MAAM,iBAAiD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA,KAAC,OAAE,WAAWC,SAAAA,GAAG,4BAA4B,SAAS,GAAI,GAAG,OAAO,UAAA;AAAA,EAAA;AAAA,EAC/D;AAAA,EAAA,CACL;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../../src/components/InformationTag/index.tsx"],"sourcesContent":["import type { DetailedHTMLProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\n\n/*\n Props for the InformationTag component.\n * Extends standard HTML element attributes for maximum flexibility.\n /\ntype CopiedTextInformationProps = DetailedHTMLProps<\n React.HTMLAttributes<HTMLElement>,\n HTMLElement\n>;\n\n/\n InformationTag Component\n \n A lightweight component that displays informational text with a distinctive info icon (ⓘ).\n * Perfect for showing contextual hints, supplementary information, or subtle guidance text.\n \n @component\n * @example\n * Basic usage:\n * ```tsx\n * <InformationTag>This field is required</InformationTag>\n * ```\n \n @example\n * With custom styling:\n * ```tsx\n * <InformationTag className=\"text-blue-600 font-medium\">\n * Pro tip: Use keyboard shortcuts for faster navigation\n * </InformationTag>\n * ```\n \n @example\n * Form field context:\n * ```tsx\n * <div>\n * <input type=\"email\" placeholder=\"your@email.com\" />\n * <InformationTag>We'll never share your email address</InformationTag>\n * </div>\n * ```\n \n @example\n * Status information:\n * ```tsx\n * <InformationTag className=\"text-green-500\">\n * Changes saved automatically\n * </InformationTag>\n * ```\n \n Features:\n * - Lightweight and semantic HTML structure using <i> tag\n * - Distinctive info icon (ⓘ) for visual recognition\n * - Default subtle styling with neutral colors\n * - Fully customizable with className overrides\n * - Supports all standard HTML element attributes\n * - Screen reader friendly with meaningful semantic content\n \n Accessibility:\n * - Uses semantic <i> tag which is announced by screen readers\n * - Info icon (ⓘ) provides visual context for sighted users\n * - Text content is fully accessible and readable\n * - Supports ARIA attributes through props spreading\n \n @param props - Component props extending HTML element attributes\n * @param props.children - The informational text content to display\n * @param props.className - Additional CSS classes for custom styling\n * @param props.title - Optional tooltip text (HTML title attribute)\n * @param props.role - ARIA role (defaults to implicit role from <i> tag)\n * @param props.aria-label - ARIA label for screen readers\n * @param props.id - Unique identifier for the element\n * @param props.onClick - Click event handler\n * @param props.onMouseEnter - Mouse enter event handler\n * @param props.onMouseLeave - Mouse leave event handler\n * @param props.style - Inline styles object\n * @param props.data-* - Data attributes for testing or tracking\n * @param props...rest - All other standard HTML element attributes\n \n @returns A rendered information tag with icon and text content\n */\nexport const InformationTag: FC<CopiedTextInformationProps> = ({\n className,\n children,\n ...props\n}) => (\n <i className={cn('text-xs text-neutral-400', className)} {...props}>\n ⓘ {children}\n </i>\n);\n"],"names":["jsxs","cn"],"mappings":";;;;AAgFO,MAAM,iBAAiD,CAAC;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,MACEA,2BAAAA,KAAC,OAAE,WAAWC,SAAAA,GAAG,4BAA4B,SAAS,GAAI,GAAG,OAAO,UAAA;AAAA,EAAA;AAAA,EAC/D;AAAA,EAAA,CACL;;"}