@intlayer/design-system 7.0.8 → 7.0.9-canary.2

package/dist/esm/components/Form/elements/SwitchSelectorElement.mjs

@@ -9,28 +9,39 @@ import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 
 //#region src/components/Form/elements/SwitchSelectorElement.tsx
-const SwitchSelectorElement = ({ name, description, label, isRequired, info, showErrorMessage, children,...props }) => {
+const SwitchSelectorFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, ...props }) => {
+	const { error } = useFormField();
+	return /* @__PURE__ */ jsx(FormItemLayout, {
+		htmlFor: name,
+		label,
+		description,
+		isRequired,
+		info,
+		showErrorMessage,
+		"aria-invalid": !!error,
+		children: /* @__PURE__ */ jsx(SwitchSelector, {
+			...field,
+			...props,
+			children
+		})
+	});
+};
+const SwitchSelectorElement = ({ name, description, label, isRequired, info, showErrorMessage, children, ...props }) => {
 	const { control } = useFormContext();
 	return /* @__PURE__ */ jsx(Form.Field, {
 		control,
 		name,
-		render: ({ field }) => {
-			const { error } = useFormField();
-			return /* @__PURE__ */ jsx(FormItemLayout, {
-				htmlFor: name,
-				label,
-				description,
-				isRequired,
-				info,
-				showErrorMessage,
-				"aria-invalid": !!error,
-				children: /* @__PURE__ */ jsx(SwitchSelector, {
-					...field,
-					...props,
-					children
-				})
-			});
-		}
+		render: ({ field }) => /* @__PURE__ */ jsx(SwitchSelectorFieldContent, {
+			field,
+			name,
+			label,
+			description,
+			isRequired,
+			info,
+			showErrorMessage,
+			...props,
+			children
+		})
 	});
 };
 

package/dist/esm/components/Form/elements/SwitchSelectorElement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchSelectorElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { SwitchSelector } from '../../SwitchSelector';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SwitchSelectorElementProps = Omit<\n  FormElementProps<typeof SwitchSelector>,\n  'Element'\n> &\n  ComponentProps<typeof SwitchSelector> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nexport const SwitchSelectorElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SwitchSelectorElementProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => {\n        const { error } = useFormField();\n\n        return (\n          <FormItemLayout\n            htmlFor={name}\n            label={label}\n            description={description}\n            isRequired={isRequired}\n            info={info}\n            showErrorMessage={showErrorMessage}\n            aria-invalid={!!error}\n          >\n            <SwitchSelector {...field} {...props}>\n              {children}\n            </SwitchSelector>\n          </FormItemLayout>\n        );\n      }}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAa,yBAAyB,EACpC,MACA,aACA,OACA,YACA,MACA,kBACA,SACA,GAAG,YAC6B;CAChC,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YAAY;GACrB,MAAM,EAAE,UAAU,cAAc;AAEhC,UACE,oBAAC;IACC,SAAS;IACF;IACM;IACD;IACN;IACY;IAClB,gBAAc,CAAC,CAAC;cAEhB,oBAAC;KAAe,GAAI;KAAO,GAAI;KAC5B;MACc;KACF;;GAGrB"}
+{"version":3,"file":"SwitchSelectorElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SwitchSelectorElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { SwitchSelector } from '../../SwitchSelector';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SwitchSelectorElementProps = Omit<\n  FormElementProps<typeof SwitchSelector>,\n  'Element'\n> &\n  ComponentProps<typeof SwitchSelector> & {\n    name: string;\n    description?: string;\n    placeholder?: string;\n    className?: string;\n    children?: ReactNode;\n  };\n\nconst SwitchSelectorFieldContent = ({\n  field,\n  name,\n  label,\n  description,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: Omit<SwitchSelectorElementProps, 'control'> & { field: any }) => {\n  const { error } = useFormField();\n\n  return (\n    <FormItemLayout\n      htmlFor={name}\n      label={label}\n      description={description}\n      isRequired={isRequired}\n      info={info}\n      showErrorMessage={showErrorMessage}\n      aria-invalid={!!error}\n    >\n      <SwitchSelector {...field} {...props}>\n        {children}\n      </SwitchSelector>\n    </FormItemLayout>\n  );\n};\n\nexport const SwitchSelectorElement = ({\n  name,\n  description,\n  label,\n  isRequired,\n  info,\n  showErrorMessage,\n  children,\n  ...props\n}: SwitchSelectorElementProps) => {\n  const { control } = useFormContext();\n\n  return (\n    <Form.Field\n      control={control}\n      name={name}\n      render={({ field }) => (\n        <SwitchSelectorFieldContent\n          field={field}\n          name={name}\n          label={label}\n          description={description}\n          isRequired={isRequired}\n          info={info}\n          showErrorMessage={showErrorMessage}\n          {...props}\n        >\n          {children}\n        </SwitchSelectorFieldContent>\n      )}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;AAsBA,MAAM,8BAA8B,EAClC,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YAC+D;CAClE,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GAAe,GAAI;GAAO,GAAI;GAC5B;IACc;GACF;;AAIrB,MAAa,yBAAyB,EACpC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YAC6B;CAChC,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GAClB,GAAI;GAEH;IAC0B;GAE/B"}

package/dist/esm/components/Form/elements/index.mjs

@@ -3,6 +3,8 @@ import { EditableFieldInputElement } from "./EditableFieldInputElement.mjs";
 import { EditableFieldTextAreaElement } from "./EditableFieldTextAreaElement.mjs";
 import { InputElement } from "./InputElement.mjs";
 import { InputPasswordElement } from "./InputPasswordElement.mjs";
+import { OTPElement } from "./OTPElement.mjs";
+import { SearchInputElement } from "./SearchInputElement.mjs";
 import { TextAreaElement } from "./TextAreaElement.mjs";
 
-export { EditableFieldInputElement, EditableFieldTextAreaElement, FormElement, InputElement, InputPasswordElement, TextAreaElement };
+export { EditableFieldInputElement, EditableFieldTextAreaElement, FormElement, InputElement, InputPasswordElement, OTPElement, SearchInputElement, TextAreaElement };

package/dist/esm/components/Form/layout/FormItemLayout.mjs

@@ -4,8 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Form/layout/FormItemLayout.tsx
 const FormItemLayout = ({ label, description, isRequired, info, children, showErrorMessage = true, htmlFor }) => /* @__PURE__ */ jsxs(Form.Item, {
-	id: htmlFor,
-	className: "flex w-full flex-col gap-2 p-2",
+	className: "flex w-full flex-col gap-2 px-1 py-2",
 	children: [
 		(description || label) && /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-1 p-1 leading-none",

package/dist/esm/components/Form/layout/FormItemLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormItemLayout.mjs","names":["FormItemLayout: FC<FormItemLayoutProps>"],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  showErrorMessage?: boolean;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n  label,\n  description,\n  isRequired,\n  info,\n  children,\n  showErrorMessage = true,\n  htmlFor,\n}) => (\n  <Form.Item id={htmlFor} className=\"flex w-full flex-col gap-2 p-2\">\n    {(description || label) && (\n      <div className=\"flex flex-col gap-1 p-1 leading-none\">\n        {label && (\n          <FormLabelLayout\n            isRequired={isRequired}\n            info={info}\n            htmlFor={htmlFor}\n          >\n            {label}\n          </FormLabelLayout>\n        )}\n        {description && <Form.Description>{description}</Form.Description>}\n      </div>\n    )}\n    <Form.Control>{children}</Form.Control>\n\n    {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n  </Form.Item>\n);\n"],"mappings":";;;;;AAWA,MAAaA,kBAA2C,EACtD,OACA,aACA,YACA,MACA,UACA,mBAAmB,MACnB,cAEA,qBAAC,KAAK;CAAK,IAAI;CAAS,WAAU;;GAC9B,eAAe,UACf,qBAAC;GAAI,WAAU;cACZ,SACC,oBAAC;IACa;IACN;IACG;cAER;KACe,EAEnB,eAAe,oBAAC,KAAK,yBAAa,cAA+B;IAC9D;EAER,oBAAC,KAAK,WAAS,WAAwB;EAEtC,oBAAoB,oBAAC,KAAK,WAAQ,eAAY,kBAAkB;;EACvD"}
+{"version":3,"file":"FormItemLayout.mjs","names":["FormItemLayout: FC<FormItemLayoutProps>"],"sources":["../../../../../src/components/Form/layout/FormItemLayout.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { Form } from '../Form';\nimport { FormLabelLayout, type FormLabelLayoutProps } from './FormLabelLayout';\n\nexport type FormItemLayoutProps = Omit<FormLabelLayoutProps, 'children'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  children: ReactNode;\n  showErrorMessage?: boolean;\n};\n\nexport const FormItemLayout: FC<FormItemLayoutProps> = ({\n  label,\n  description,\n  isRequired,\n  info,\n  children,\n  showErrorMessage = true,\n  htmlFor,\n}) => (\n  <Form.Item className=\"flex w-full flex-col gap-2 px-1 py-2\">\n    {(description || label) && (\n      <div className=\"flex flex-col gap-1 p-1 leading-none\">\n        {label && (\n          <FormLabelLayout\n            isRequired={isRequired}\n            info={info}\n            htmlFor={htmlFor}\n          >\n            {label}\n          </FormLabelLayout>\n        )}\n        {description && <Form.Description>{description}</Form.Description>}\n      </div>\n    )}\n    <Form.Control>{children}</Form.Control>\n\n    {showErrorMessage && <Form.Message data-testid=\"error-message\" />}\n  </Form.Item>\n);\n"],"mappings":";;;;;AAWA,MAAaA,kBAA2C,EACtD,OACA,aACA,YACA,MACA,UACA,mBAAmB,MACnB,cAEA,qBAAC,KAAK;CAAK,WAAU;;GACjB,eAAe,UACf,qBAAC;GAAI,WAAU;cACZ,SACC,oBAAC;IACa;IACN;IACG;cAER;KACe,EAEnB,eAAe,oBAAC,KAAK,yBAAa,cAA+B;IAC9D;EAER,oBAAC,KAAK,WAAS,WAAwB;EAEtC,oBAAoB,oBAAC,KAAK,WAAQ,eAAY,kBAAkB;;EACvD"}

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

@@ -10,8 +10,8 @@ const styledAfter = `after:content-['#'] after:scale-75 after:px-6 after:text-ne
 * 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("mt-5 font-bold text-2xl", className),
+const StyledH1 = ({ className, ...props }) => /* @__PURE__ */ jsx("h1", {
+	className: cn("font-bold text-2xl", className),
 	...props
 });
 /**
@@ -20,8 +20,8 @@ const StyledH1 = ({ className,...props }) => /* @__PURE__ */ jsx("h1", {
 * 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("mt-16 mb-2 font-bold text-2xl", styledHeading, className),
+const StyledH2 = ({ className, ...props }) => /* @__PURE__ */ jsx("h2", {
+	className: cn("mb-2 font-bold text-2xl", styledHeading, className),
 	...props
 });
 /**
@@ -30,8 +30,8 @@ const StyledH2 = ({ className,...props }) => /* @__PURE__ */ jsx("h2", {
 * Tertiary heading component with anchor link functionality when wrapped.
 * Used for subsection headers in content.
 */
-const StyledH3 = ({ className,...props }) => /* @__PURE__ */ jsx("h3", {
-	className: cn("mt-5 mb-2 font-bold text-xl", styledHeading, className),
+const StyledH3 = ({ className, ...props }) => /* @__PURE__ */ jsx("h3", {
+	className: cn("mb-2 font-bold text-xl", styledHeading, className),
 	...props
 });
 /**
@@ -40,8 +40,8 @@ const StyledH3 = ({ className,...props }) => /* @__PURE__ */ jsx("h3", {
 * 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("mt-3 font-bold text-lg", styledHeading, className),
+const StyledH4 = ({ className, ...props }) => /* @__PURE__ */ jsx("h4", {
+	className: cn("font-bold text-lg", styledHeading, className),
 	...props
 });
 /**
@@ -50,12 +50,12 @@ const StyledH4 = ({ className,...props }) => /* @__PURE__ */ jsx("h4", {
 * 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("mt-3 font-bold text-base", styledHeading, className),
+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("mt-3 ml-3 font-bold text-base", styledHeading, className),
+const StyledH6 = ({ className, ...props }) => /* @__PURE__ */ jsx("h6", {
+	className: cn("ml-3 font-bold text-base", styledHeading, className),
 	...props
 });
 /**
@@ -106,7 +106,7 @@ const afterClick = (parentElem, e) => {
 * - Maintains proper heading hierarchy and semantics
 * - Supports keyboard navigation and screen readers
 */
-const HeadingWrapper = ({ H, children, className, isClickable,...props }) => {
+const HeadingWrapper = ({ H, children, className, isClickable, ...props }) => {
 	const id = typeof children === "string" ? getId(children) : void 0;
 	const onClick = (e) => {
 		const { id: id$1 } = e.currentTarget;
@@ -137,7 +137,7 @@ const HeadingWrapper = ({ H, children, className, isClickable,...props }) => {
 * <H1 className="text-blue-600">Custom Styled Title</H1>
 * ```
 */
-const H1 = ({ isClickable: _,...props }) => /* @__PURE__ */ jsx(StyledH1, { ...props });
+const H1 = ({ isClickable: _, ...props }) => /* @__PURE__ */ jsx(StyledH1, { ...props });
 /**
 * H2 Component
 *
@@ -150,7 +150,7 @@ const H1 = ({ isClickable: _,...props }) => /* @__PURE__ */ jsx(StyledH1, { ...p
 * <H2 isClickable>API Reference</H2>
 * ```
 */
-const H2 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+const H2 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
 	H: StyledH2,
 	isClickable,
 	...props
@@ -167,7 +167,7 @@ const H2 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrap
 * <H3 isClickable>Advanced Settings</H3>
 * ```
 */
-const H3 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+const H3 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
 	H: StyledH3,
 	isClickable,
 	...props
@@ -184,7 +184,7 @@ const H3 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrap
 * <H4 isClickable>Code Examples</H4>
 * ```
 */
-const H4 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+const H4 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
 	H: StyledH4,
 	isClickable,
 	...props
@@ -201,12 +201,12 @@ const H4 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrap
 * <H5 isClickable>Best Practices</H5>
 * ```
 */
-const H5 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+const H5 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
 	H: StyledH5,
 	isClickable,
 	...props
 });
-const H6 = ({ isClickable = false,...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
+const H6 = ({ isClickable = false, ...props }) => /* @__PURE__ */ jsx(HeadingWrapper, {
 	H: StyledH6,
 	isClickable,
 	...props

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["StyledH1: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH2: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH3: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH4: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH5: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH6: FC<HTMLAttributes<HTMLHeadingElement>>","HeadingWrapper: HeadingType","id","H1: FC<HeadingProps>","H2: FC<HeadingProps>","H3: FC<HeadingProps>","H4: FC<HeadingProps>","H5: FC<HeadingProps>","H6: FC<HeadingProps>"],"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: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 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('mt-16 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('mt-5 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('mt-3 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('mt-3 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('mt-3 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":["StyledH1: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH2: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH3: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH4: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH5: FC<HTMLAttributes<HTMLHeadingElement>>","StyledH6: FC<HTMLAttributes<HTMLHeadingElement>>","HeadingWrapper: HeadingType","id","H1: FC<HeadingProps>","H2: FC<HeadingProps>","H3: FC<HeadingProps>","H4: FC<HeadingProps>","H5: FC<HeadingProps>","H6: FC<HeadingProps>"],"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: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

@@ -74,7 +74,7 @@ import { jsx } from "react/jsx-runtime";
 * @param props.className - Additional CSS classes for styling
 * @returns Interactive resizable container component
 */
-const HeightResizer = ({ initialHeight, maxHeight, minHeight = 0, children, className,...props }) => {
+const HeightResizer = ({ initialHeight, maxHeight, minHeight = 0, children, className, ...props }) => {
 	const containerRef = useRef(null);
 	const [height, setHeight] = useState(initialHeight);
 	const [isResizing, setIsResizing] = useState(false);

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["HeightResizer: FC<PropsWithChildren<HeightResizerProps>>"],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\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';\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 max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950',\n        'before:-translate-y-1/2 before:-translate-x-1/2 before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 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,MAAaA,iBAA4D,EACvE,eACA,WACA,YAAY,GACZ,UACA,UACA,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":["HeightResizer: FC<PropsWithChildren<HeightResizerProps>>"],"sources":["../../../../src/components/HeightResizer/index.tsx"],"sourcesContent":["'use client';\n\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';\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 max-h-[80%] w-full cursor-ns-resize border-neutral-200 border-t-[2px] transition dark:border-neutral-950',\n        'before:-translate-y-1/2 before:-translate-x-1/2 before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-2 before:w-10 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,MAAaA,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"}

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

@@ -7,6 +7,7 @@ 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);
@@ -15,7 +16,7 @@ const HideShow = ({ text, className, visiblePrefixChars = 6, maskChar = "•", r
 		if (visiblePrefixChars <= 0) return maskChar.repeat(text.length);
 		const prefix = text.slice(0, visiblePrefixChars);
 		const remaining = Math.max(0, text.length - visiblePrefixChars);
-		return prefix + maskChar.repeat(remaining);
+		return insertBreaks(`${prefix}${maskChar.repeat(remaining)}`);
 	}, [
 		text,
 		visiblePrefixChars,

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["HideShow: FC<HideShowProps>"],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\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\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 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":";;;;;;;;;AA+BA,MAAaA,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,SAAS,SAAS,OAAO,UAAU;IACzC;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":["HideShow: FC<HideShowProps>"],"sources":["../../../../src/components/HideShow/index.tsx"],"sourcesContent":["'use client';\n\nimport { Eye, EyeOff } from 'lucide-react';\nimport { type FC, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\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,MAAaA,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"}

package/dist/esm/components/IDE/Code.mjs

@@ -11,7 +11,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/IDE/Code.tsx
 const MIN_HEIGHT = 700;
-const Code = ({ children, language, isDarkMode, showHeader = true, showLineNumbers = true, className, fileName, packageManager, codeFormat, contentDeclarationFormat, isRollable = true,...props }) => {
+const Code = ({ children, language, isDarkMode, showHeader = true, showLineNumbers = true, className, fileName, packageManager, codeFormat, contentDeclarationFormat, isRollable = true, ...props }) => {
 	const code = children?.endsWith("\n") ? children.slice(0, -1) : children;
 	const hadSelectInHeader = packageManager || codeFormat || contentDeclarationFormat;
 	return /* @__PURE__ */ jsx(CodeConditionalRender, {

package/dist/esm/components/IDE/Code.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Code.mjs","names":["Code: FC<CodeCompProps>"],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const code = children?.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative min-w-0 max-w-full text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-46 z-20\">\n              <div\n                className={cn(\n                  'absolute right-2 bottom-0 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse\n          minHeight={MIN_HEIGHT}\n          isRollable={isRollable}\n          className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n        >\n          <CodeBlock lang={language} isDarkMode={isDarkMode}>\n            {code}\n          </CodeBlock>\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,aAAa;AAEnB,MAAaA,QAA2B,EACtC,UACA,UACA,YACA,aAAa,MACb,kBAAkB,MAClB,WACA,UACA,gBACA,YACA,0BACA,aAAa,KACb,GAAG,YACC;CACJ,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG,SAAS,MAAM,GAAG,GAAG,GAAG;CAEhE,MAAM,oBACJ,kBAAkB,cAAc;AAElC,QACE,oBAAC;EACiB;EACJ;EACc;YAE1B,qBAAC;GACC,WAAW,GACT,iDACA,mBAAmB,yBACnB,UACD;GACD,cAAa;GACb,GAAI;cAEH,cACC,4CACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAK,WAAU;eAAY,YAAY;MAAgB,EACxD,qBAAC;KAAI,WAAU;;MACZ,kBAAkB,oBAAC,2BAAyB;MAC5C,cAAc,oBAAC,uBAAqB;MACpC,4BACC,oBAAC,qCAAmC;;MAElC;KACF,EACN,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,WAAW,GACT,mDACA,qBAAqB,OACtB;eAED,oBAAC,YAAe,OAAQ;MACpB;KACF,IACL,EAEL,oBAAC;IACC,WAAW;IACC;IACZ,WAAU;cAEV,oBAAC;KAAU,MAAM;KAAsB;eACpC;MACS;KACG;IACP;GACU"}
+{"version":3,"file":"Code.mjs","names":["Code: FC<CodeCompProps>"],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  codeFormat?: CodeFormat;\n  contentDeclarationFormat?: ContentDeclarationFormat;\n};\n\ntype CodeCompProps = {\n  children: string;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat,\n  contentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const code = children?.endsWith('\\n') ? children.slice(0, -1) : children;\n\n  const hadSelectInHeader =\n    packageManager || codeFormat || contentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={codeFormat}\n      contentDeclarationFormat={contentDeclarationFormat}\n    >\n      <Container\n        className={cn(\n          'relative min-w-0 max-w-full text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n              <span className=\"truncate\">{fileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {codeFormat && <CodeFormatSelector />}\n                {contentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-46 z-20\">\n              <div\n                className={cn(\n                  'absolute right-2 bottom-0 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={code} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse\n          minHeight={MIN_HEIGHT}\n          isRollable={isRollable}\n          className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n        >\n          <CodeBlock lang={language} isDarkMode={isDarkMode}>\n            {code}\n          </CodeBlock>\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,aAAa;AAEnB,MAAaA,QAA2B,EACtC,UACA,UACA,YACA,aAAa,MACb,kBAAkB,MAClB,WACA,UACA,gBACA,YACA,0BACA,aAAa,MACb,GAAG,YACC;CACJ,MAAM,OAAO,UAAU,SAAS,KAAK,GAAG,SAAS,MAAM,GAAG,GAAG,GAAG;CAEhE,MAAM,oBACJ,kBAAkB,cAAc;AAElC,QACE,oBAAC;EACiB;EACJ;EACc;YAE1B,qBAAC;GACC,WAAW,GACT,iDACA,mBAAmB,yBACnB,UACD;GACD,cAAa;GACb,GAAI;cAEH,cACC,4CACE,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAK,WAAU;eAAY,YAAY;MAAgB,EACxD,qBAAC;KAAI,WAAU;;MACZ,kBAAkB,oBAAC,2BAAyB;MAC5C,cAAc,oBAAC,uBAAqB;MACpC,4BACC,oBAAC,qCAAmC;;MAElC;KACF,EACN,oBAAC;IAAI,WAAU;cACb,oBAAC;KACC,WAAW,GACT,mDACA,qBAAqB,OACtB;eAED,oBAAC,YAAe,OAAQ;MACpB;KACF,IACL,EAEL,oBAAC;IACC,WAAW;IACC;IACZ,WAAU;cAEV,oBAAC;KAAU,MAAM;KAAsB;eACpC;MACS;KACG;IACP;GACU"}

package/dist/esm/components/IDE/CodeBlockClient.mjs

@@ -14,7 +14,7 @@ const CodeDefault = ({ children }) => /* @__PURE__ */ jsx("div", {
 	})
 });
 const CodeBlockShiki = lazy(() => import("./CodeBlockShiki.mjs").then((mod) => ({ default: mod.CodeBlockShiki })));
-const CodeBlock = ({ className, onChange, isEditable, children, lang, isDarkMode,...props }) => /* @__PURE__ */ jsx("div", {
+const CodeBlock = ({ className, onChange, isEditable, children, lang, isDarkMode, ...props }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex w-full min-w-0 max-w-full overflow-x-auto", className),
 	...props,
 	children: /* @__PURE__ */ jsx(Suspense, {

package/dist/esm/components/IDE/CodeBlockClient.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockClient.mjs","names":["CodeDefault: FC<{ children: string }>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\n\nexport const CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div className=\"min-w-0 max-w-full overflow-x-auto\">\n    <pre className=\"min-w-0 max-w-full overflow-x-auto\">\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span\n            className=\"line block w-full\"\n            key={`line-${index}-${line.slice(0, 10)}`}\n          >\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n  import('./CodeBlockShiki').then((mod) => ({\n    default: mod.CodeBlockShiki,\n  }))\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  children,\n  lang,\n  isDarkMode,\n  ...props\n}) => (\n  <div\n    className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n    {...props}\n  >\n    <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n      <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n        {children}\n      </CodeBlockShiki>\n    </Suspense>\n  </div>\n);\n"],"mappings":";;;;;AAIA,MAAaA,eAAyC,EAAE,eACtD,oBAAC;CAAI,WAAU;WACb,oBAAC;EAAI,WAAU;YACb,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;GACC,WAAU;aAGT;KAFI,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,GAGlC,CACP,GACG;GACH;EACF;AAIR,MAAM,iBAAiB,WACrB,OAAO,wBAAoB,MAAM,SAAS,EACxC,SAAS,IAAI,gBACd,EAAE,CACJ;AAUD,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,kDAAkD,UAAU;CAC1E,GAAI;WAEJ,oBAAC;EAAS,UAAU,oBAAC,eAAa,WAAuB;YACvD,oBAAC;GAAqB;GAAkB;GACrC;IACc;GACR;EACP"}
+{"version":3,"file":"CodeBlockClient.mjs","names":["CodeDefault: FC<{ children: string }>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockClient.tsx"],"sourcesContent":["import { type FC, type HTMLAttributes, lazy, Suspense } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\n\nexport const CodeDefault: FC<{ children: string }> = ({ children }) => (\n  <div className=\"min-w-0 max-w-full overflow-x-auto\">\n    <pre className=\"min-w-0 max-w-full overflow-x-auto\">\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span\n            className=\"line block w-full\"\n            key={`line-${index}-${line.slice(0, 10)}`}\n          >\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\n// Lazy load the Shiki component\nconst CodeBlockShiki = lazy(() =>\n  import('./CodeBlockShiki').then((mod) => ({\n    default: mod.CodeBlockShiki,\n  }))\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  children,\n  lang,\n  isDarkMode,\n  ...props\n}) => (\n  <div\n    className={cn('flex w-full min-w-0 max-w-full overflow-x-auto', className)}\n    {...props}\n  >\n    <Suspense fallback={<CodeDefault>{children}</CodeDefault>}>\n      <CodeBlockShiki lang={lang} isDarkMode={isDarkMode}>\n        {children}\n      </CodeBlockShiki>\n    </Suspense>\n  </div>\n);\n"],"mappings":";;;;;AAIA,MAAaA,eAAyC,EAAE,eACtD,oBAAC;CAAI,WAAU;WACb,oBAAC;EAAI,WAAU;YACb,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;GACC,WAAU;aAGT;KAFI,QAAQ,MAAM,GAAG,KAAK,MAAM,GAAG,GAAG,GAGlC,CACP,GACG;GACH;EACF;AAIR,MAAM,iBAAiB,WACrB,OAAO,wBAAoB,MAAM,SAAS,EACxC,SAAS,IAAI,gBACd,EAAE,CACJ;AAUD,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,UACA,MACA,YACA,GAAG,YAEH,oBAAC;CACC,WAAW,GAAG,kDAAkD,UAAU;CAC1E,GAAI;WAEJ,oBAAC;EAAS,UAAU,oBAAC,eAAa,WAAuB;YACvD,oBAAC;GAAqB;GAAkB;GACrC;IACc;GACR;EACP"}

package/dist/esm/components/IDE/CodeBlockServer.mjs

@@ -5,7 +5,7 @@ import { transformerMetaHighlight, transformerMetaWordHighlight, transformerNota
 import { codeToHtml } from "shiki/bundle/web";
 
 //#region src/components/IDE/CodeBlockServer.tsx
-const CodeBlockShiki = (async ({ children, lang, isDarkMode, onChange,...props }) => {
+const CodeBlockShiki = (async ({ children, lang, isDarkMode, onChange, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		dangerouslySetInnerHTML: { __html: await codeToHtml(children, {
 			lang,
@@ -23,7 +23,7 @@ const CodeBlockShiki = (async ({ children, lang, isDarkMode, onChange,...props }
 		style: { backgroundColor: "transparent" }
 	});
 });
-const CodeDefault = ({ children, isEditable, isDarkMode, onChange,...props }) => /* @__PURE__ */ jsx("div", {
+const CodeDefault = ({ children, isEditable, isDarkMode, onChange, ...props }) => /* @__PURE__ */ jsx("div", {
 	contentEditable: isEditable,
 	...props,
 	children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: children.split("\n").map((line, index) => /* @__PURE__ */ jsx("span", {
@@ -31,7 +31,7 @@ const CodeDefault = ({ children, isEditable, isDarkMode, onChange,...props }) =>
 		children: line
 	}, index)) }) })
 });
-const CodeBlock = ({ className, onChange, isEditable,...props }) => /* @__PURE__ */ jsx(Suspense, {
+const CodeBlock = ({ className, onChange, isEditable, ...props }) => /* @__PURE__ */ jsx(Suspense, {
 	fallback: /* @__PURE__ */ jsx(CodeDefault, { ...props }),
 	children: /* @__PURE__ */ jsx(CodeBlockShiki, {
 		className: cn("flex w-full", className),

package/dist/esm/components/IDE/CodeBlockServer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockServer.mjs","names":["CodeDefault: FC<CodeBlockProps>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { type FC, type HTMLAttributes, Suspense } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: isDarkMode ? 'github-dark' : 'github-light',\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  isDarkMode,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"mappings":";;;;;;;AAiBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,YACA,SACA,GAAG,YACiB;AAgBpB,QACE,oBAAC;EACC,yBAAyB,EAAE,QAJnB,MAAM,WAAW,UAb0C;GACrE;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,yBAAyB;IACzB,8BAA8B;IAC9B,kCAAkC;IAClC,+BAA+B;IAC/B,0BAA0B;IAC1B,8BAA8B;IAC/B;GACF,CAEmD,EAIR;EACxC,GAAI;EACJ,OAAO,EAAE,iBAAiB,eAAe;GACzC;;AAIN,MAAMA,eAAmC,EACvC,UACA,YACA,YACA,SACA,GAAG,YAEH,oBAAC;CAAI,iBAAiB;CAAY,GAAI;WACpC,oBAAC,mBACC,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;EAAK,WAAU;YACb;IADsC,MAElC,CACP,GACG,GACH;EACF;AAWR,MAAaC,aAAiC,EAC5C,WACA,UACA,WACA,GAAG,YAEH,oBAAC;CAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;WAC5C,oBAAC;EACC,WAAW,GAAG,eAAe,UAAU;EACvC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,GAAG;EAC7D,GAAI;GACJ;EACO"}
+{"version":3,"file":"CodeBlockServer.mjs","names":["CodeDefault: FC<CodeBlockProps>","CodeBlock: FC<CodeBlockProps>"],"sources":["../../../../src/components/IDE/CodeBlockServer.tsx"],"sourcesContent":["import {\n  transformerMetaHighlight,\n  transformerMetaWordHighlight,\n  transformerNotationDiff,\n  transformerNotationErrorLevel,\n  transformerNotationHighlight,\n  transformerNotationWordHighlight,\n} from '@shikijs/transformers';\nimport { type FC, type HTMLAttributes, Suspense } from 'react';\nimport {\n  type BundledLanguage,\n  type BundledTheme,\n  type CodeToHastOptions,\n  codeToHtml,\n} from 'shiki/bundle/web';\nimport { cn } from '../../utils/cn';\n\nexport const CodeBlockShiki = (async ({\n  children,\n  lang,\n  isDarkMode,\n  onChange,\n  ...props\n}: CodeBlockProps) => {\n  const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n    lang,\n    theme: isDarkMode ? 'github-dark' : 'github-light',\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerNotationErrorLevel(),\n      transformerMetaHighlight(),\n      transformerMetaWordHighlight(),\n    ],\n  };\n\n  const out = await codeToHtml(children, shikiOptions);\n\n  return (\n    <div\n      dangerouslySetInnerHTML={{ __html: out }}\n      {...props}\n      style={{ backgroundColor: 'transparent' }}\n    />\n  );\n}) as unknown as FC<CodeBlockProps>;\n\nconst CodeDefault: FC<CodeBlockProps> = ({\n  children,\n  isEditable,\n  isDarkMode,\n  onChange,\n  ...props\n}) => (\n  <div contentEditable={isEditable} {...props}>\n    <pre>\n      <code>\n        {children.split('\\n').map((line, index) => (\n          <span className=\"line block w-full\" key={index}>\n            {line}\n          </span>\n        ))}\n      </code>\n    </pre>\n  </div>\n);\n\nexport type CodeBlockProps = {\n  children: string;\n  lang: BundledLanguage;\n  isDarkMode?: boolean;\n  isEditable?: boolean;\n  onChange?: (content: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;\n\nexport const CodeBlock: FC<CodeBlockProps> = ({\n  className,\n  onChange,\n  isEditable,\n  ...props\n}) => (\n  <Suspense fallback={<CodeDefault {...props} />}>\n    <CodeBlockShiki\n      className={cn('flex w-full', className)}\n      contentEditable={isEditable}\n      onInput={(e) => onChange?.(e.currentTarget.textContent ?? '')}\n      {...props}\n    />\n  </Suspense>\n);\n"],"mappings":";;;;;;;AAiBA,MAAa,kBAAkB,OAAO,EACpC,UACA,MACA,YACA,UACA,GAAG,YACiB;AAgBpB,QACE,oBAAC;EACC,yBAAyB,EAAE,QAJnB,MAAM,WAAW,UAb0C;GACrE;GACA,OAAO,aAAa,gBAAgB;GACpC,cAAc;IACZ,yBAAyB;IACzB,8BAA8B;IAC9B,kCAAkC;IAClC,+BAA+B;IAC/B,0BAA0B;IAC1B,8BAA8B;IAC/B;GACF,CAEmD,EAIR;EACxC,GAAI;EACJ,OAAO,EAAE,iBAAiB,eAAe;GACzC;;AAIN,MAAMA,eAAmC,EACvC,UACA,YACA,YACA,UACA,GAAG,YAEH,oBAAC;CAAI,iBAAiB;CAAY,GAAI;WACpC,oBAAC,mBACC,oBAAC,oBACE,SAAS,MAAM,KAAK,CAAC,KAAK,MAAM,UAC/B,oBAAC;EAAK,WAAU;YACb;IADsC,MAElC,CACP,GACG,GACH;EACF;AAWR,MAAaC,aAAiC,EAC5C,WACA,UACA,YACA,GAAG,YAEH,oBAAC;CAAS,UAAU,oBAAC,eAAY,GAAI,QAAS;WAC5C,oBAAC;EACC,WAAW,GAAG,eAAe,UAAU;EACvC,iBAAiB;EACjB,UAAU,MAAM,WAAW,EAAE,cAAc,eAAe,GAAG;EAC7D,GAAI;GACJ;EACO"}

package/dist/esm/components/IDE/CodeConditionalRenderer.mjs

@@ -5,7 +5,7 @@ import { useCodeContext } from "./CodeContext.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/components/IDE/CodeConditionalRenderer.tsx
-const CodeConditionalRender = ({ children,...props }) => {
+const CodeConditionalRender = ({ children, ...props }) => {
 	const { packageManager, codeFormat, contentDeclarationFormat } = useCodeContext();
 	const isPackageManagerUndefined = typeof props.packageManager === "undefined";
 	const isPackageManagerSelected = packageManager === props.packageManager;

package/dist/esm/components/IDE/CodeConditionalRenderer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeConditionalRenderer.mjs","names":["CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n>"],"sources":["../../../../src/components/IDE/CodeConditionalRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, PropsWithChildren } from 'react';\nimport type { CodeCompAttributes } from './Code';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n> = ({ children, ...props }) => {\n  const { packageManager, codeFormat, contentDeclarationFormat } =\n    useCodeContext();\n\n  const isPackageManagerUndefined = typeof props.packageManager === 'undefined';\n  const isPackageManagerSelected = packageManager === props.packageManager;\n\n  const isCodeFormatUndefined = typeof props.codeFormat === 'undefined';\n  const isCodeFormatSelected = codeFormat === props.codeFormat;\n\n  const isContentDeclarationFormatUndefined =\n    typeof props.contentDeclarationFormat === 'undefined';\n  const isContentDeclarationFormatSelected =\n    contentDeclarationFormat === props.contentDeclarationFormat;\n\n  if (\n    (isPackageManagerUndefined || isPackageManagerSelected) &&\n    (isCodeFormatUndefined || isCodeFormatSelected) &&\n    (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)\n  ) {\n    return children;\n  }\n\n  return <></>;\n};\n"],"mappings":";;;;;;;AAMA,MAAaA,yBAER,EAAE,SAAU,GAAG,YAAY;CAC9B,MAAM,EAAE,gBAAgB,YAAY,6BAClC,gBAAgB;CAElB,MAAM,4BAA4B,OAAO,MAAM,mBAAmB;CAClE,MAAM,2BAA2B,mBAAmB,MAAM;CAE1D,MAAM,wBAAwB,OAAO,MAAM,eAAe;CAC1D,MAAM,uBAAuB,eAAe,MAAM;CAElD,MAAM,sCACJ,OAAO,MAAM,6BAA6B;CAC5C,MAAM,qCACJ,6BAA6B,MAAM;AAErC,MACG,6BAA6B,8BAC7B,yBAAyB,0BACzB,uCAAuC,oCAExC,QAAO;AAGT,QAAO,iCAAK"}
+{"version":3,"file":"CodeConditionalRenderer.mjs","names":["CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n>"],"sources":["../../../../src/components/IDE/CodeConditionalRenderer.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, PropsWithChildren } from 'react';\nimport type { CodeCompAttributes } from './Code';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeConditionalRender: FC<\n  PropsWithChildren<CodeCompAttributes>\n> = ({ children, ...props }) => {\n  const { packageManager, codeFormat, contentDeclarationFormat } =\n    useCodeContext();\n\n  const isPackageManagerUndefined = typeof props.packageManager === 'undefined';\n  const isPackageManagerSelected = packageManager === props.packageManager;\n\n  const isCodeFormatUndefined = typeof props.codeFormat === 'undefined';\n  const isCodeFormatSelected = codeFormat === props.codeFormat;\n\n  const isContentDeclarationFormatUndefined =\n    typeof props.contentDeclarationFormat === 'undefined';\n  const isContentDeclarationFormatSelected =\n    contentDeclarationFormat === props.contentDeclarationFormat;\n\n  if (\n    (isPackageManagerUndefined || isPackageManagerSelected) &&\n    (isCodeFormatUndefined || isCodeFormatSelected) &&\n    (isContentDeclarationFormatUndefined || isContentDeclarationFormatSelected)\n  ) {\n    return children;\n  }\n\n  return <></>;\n};\n"],"mappings":";;;;;;;AAMA,MAAaA,yBAER,EAAE,UAAU,GAAG,YAAY;CAC9B,MAAM,EAAE,gBAAgB,YAAY,6BAClC,gBAAgB;CAElB,MAAM,4BAA4B,OAAO,MAAM,mBAAmB;CAClE,MAAM,2BAA2B,mBAAmB,MAAM;CAE1D,MAAM,wBAAwB,OAAO,MAAM,eAAe;CAC1D,MAAM,uBAAuB,eAAe,MAAM;CAElD,MAAM,sCACJ,OAAO,MAAM,6BAA6B;CAC5C,MAAM,qCACJ,6BAA6B,MAAM;AAErC,MACG,6BAA6B,8BAC7B,yBAAyB,0BACzB,uCAAuC,oCAExC,QAAO;AAGT,QAAO,iCAAK"}

package/dist/esm/components/IDE/CodeFormatSelector.mjs

@@ -14,7 +14,10 @@ const CodeFormatSelector = () => {
 			setCodeFormat(value);
 			setContentDeclarationFormat(value);
 		},
-		children: [/* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Code Format" }) }), /* @__PURE__ */ jsxs(Select.Content, { children: [
+		children: [/* @__PURE__ */ jsx(Select.Trigger, {
+			className: "py-1",
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Code Format" })
+		}), /* @__PURE__ */ jsxs(Select.Content, { children: [
 			/* @__PURE__ */ jsx(Select.Item, {
 				value: "typescript",
 				children: "TypeScript"

package/dist/esm/components/IDE/CodeFormatSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeFormatSelector.mjs","names":["CodeFormatSelector: FC"],"sources":["../../../../src/components/IDE/CodeFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeFormatSelector: FC = () => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n\n  return (\n    <Select\n      value={codeFormat}\n      onValueChange={(value) => {\n        setCodeFormat(value as typeof codeFormat);\n        setContentDeclarationFormat(value as typeof codeFormat);\n      }}\n    >\n      <Select.Trigger>\n        <Select.Value placeholder=\"Code Format\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,2BAA+B;CAC1C,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;AAElB,QACE,qBAAC;EACC,OAAO;EACP,gBAAgB,UAAU;AACxB,iBAAc,MAA2B;AACzC,+BAA4B,MAA2B;;aAGzD,oBAAC,OAAO,qBACN,oBAAC,OAAO,SAAM,aAAY,gBAAgB,GAC3B,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;MACrC;GACV"}
+{"version":3,"file":"CodeFormatSelector.mjs","names":["CodeFormatSelector: FC"],"sources":["../../../../src/components/IDE/CodeFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const CodeFormatSelector: FC = () => {\n  const { codeFormat, setCodeFormat, setContentDeclarationFormat } =\n    useCodeContext();\n\n  return (\n    <Select\n      value={codeFormat}\n      onValueChange={(value) => {\n        setCodeFormat(value as typeof codeFormat);\n        setContentDeclarationFormat(value as typeof codeFormat);\n      }}\n    >\n      <Select.Trigger className=\"py-1\">\n        <Select.Value placeholder=\"Code Format\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,2BAA+B;CAC1C,MAAM,EAAE,YAAY,eAAe,gCACjC,gBAAgB;AAElB,QACE,qBAAC;EACC,OAAO;EACP,gBAAgB,UAAU;AACxB,iBAAc,MAA2B;AACzC,+BAA4B,MAA2B;;aAGzD,oBAAC,OAAO;GAAQ,WAAU;aACxB,oBAAC,OAAO,SAAM,aAAY,gBAAgB;IAC3B,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;MACrC;GACV"}

package/dist/esm/components/IDE/ContentDeclarationFormatSelector.mjs

@@ -11,7 +11,10 @@ const ContentDeclarationFormatSelector = () => {
 	return /* @__PURE__ */ jsxs(Select, {
 		value: contentDeclarationFormat,
 		onValueChange: setContentDeclarationFormat,
-		children: [/* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Dictionary Format" }) }), /* @__PURE__ */ jsxs(Select.Content, { children: [
+		children: [/* @__PURE__ */ jsx(Select.Trigger, {
+			className: "py-1",
+			children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Dictionary Format" })
+		}), /* @__PURE__ */ jsxs(Select.Content, { children: [
 			/* @__PURE__ */ jsx(Select.Item, {
 				value: "typescript",
 				children: "TypeScript"

package/dist/esm/components/IDE/ContentDeclarationFormatSelector.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":["ContentDeclarationFormatSelector: FC"],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const ContentDeclarationFormatSelector: FC = () => {\n  const { contentDeclarationFormat, setContentDeclarationFormat } =\n    useCodeContext();\n\n  return (\n    <Select\n      value={contentDeclarationFormat}\n      onValueChange={setContentDeclarationFormat}\n    >\n      <Select.Trigger>\n        <Select.Value placeholder=\"Dictionary Format\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"json\">JSON</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;AAElB,QACE,qBAAC;EACC,OAAO;EACP,eAAe;aAEf,oBAAC,OAAO,qBACN,oBAAC,OAAO,SAAM,aAAY,sBAAsB,GACjC,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;GACpD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;MAC7B;GACV"}
+{"version":3,"file":"ContentDeclarationFormatSelector.mjs","names":["ContentDeclarationFormatSelector: FC"],"sources":["../../../../src/components/IDE/ContentDeclarationFormatSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const ContentDeclarationFormatSelector: FC = () => {\n  const { contentDeclarationFormat, setContentDeclarationFormat } =\n    useCodeContext();\n\n  return (\n    <Select\n      value={contentDeclarationFormat}\n      onValueChange={setContentDeclarationFormat}\n    >\n      <Select.Trigger className=\"py-1\">\n        <Select.Value placeholder=\"Dictionary Format\" />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Item value=\"typescript\">TypeScript</Select.Item>\n        <Select.Item value=\"commonjs\">CommonJS</Select.Item>\n        <Select.Item value=\"esm\">ESM</Select.Item>\n        <Select.Item value=\"json\">JSON</Select.Item>\n      </Select.Content>\n    </Select>\n  );\n};\n"],"mappings":";;;;;;;;AAMA,MAAaA,yCAA6C;CACxD,MAAM,EAAE,0BAA0B,gCAChC,gBAAgB;AAElB,QACE,qBAAC;EACC,OAAO;EACP,eAAe;aAEf,oBAAC,OAAO;GAAQ,WAAU;aACxB,oBAAC,OAAO,SAAM,aAAY,sBAAsB;IACjC,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAa;KAAwB;GACxD,oBAAC,OAAO;IAAK,OAAM;cAAW;KAAsB;GACpD,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;MAC7B;GACV"}

package/dist/esm/components/IDE/FileList.mjs

@@ -3,7 +3,7 @@ import { FileTree } from "./FileTree.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/IDE/FileList.tsx
-const FileList = ({ filePaths,...props }) => /* @__PURE__ */ jsxs(Container, {
+const FileList = ({ filePaths, ...props }) => /* @__PURE__ */ jsxs(Container, {
 	className: "flex size-full flex-col justify-start overflow-auto shadow-lg",
 	roundedSize: "3xl",
 	transparency: "none",

package/dist/esm/components/IDE/FileList.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.mjs","names":["FileList: FC<FileListProps>"],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":";;;;;AAQA,MAAaA,YAA+B,EAAE,UAAW,GAAG,YAC1D,qBAAC;CACC,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;YAEJ,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;;IACb,oBAAC,SAAI,WAAU,mCAAmC;IAClD,oBAAC,SAAI,WAAU,sCAAsC;IACrD,oBAAC,SAAI,WAAU,qCAAqC;;IAChD;GACF,EACN,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,oBAAC,YAAS,YAAY,YAAa;KAC/B;IACF;GACF;EACI"}
+{"version":3,"file":"FileList.mjs","names":["FileList: FC<FileListProps>"],"sources":["../../../../src/components/IDE/FileList.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { Container } from '../Container';\nimport { FileTree } from './FileTree';\n\nexport type FileListProps = {\n  filePaths: string[];\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (\n  <Container\n    className=\"flex size-full flex-col justify-start overflow-auto shadow-lg\"\n    roundedSize=\"3xl\"\n    transparency=\"none\"\n    {...props}\n  >\n    <div className=\"flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n      <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n        <div className=\"size-3 rounded-full bg-red-500\" />\n        <div className=\"size-3 rounded-full bg-yellow-500\" />\n        <div className=\"size-3 rounded-full bg-green-500\" />\n      </div>\n    </div>\n    <div className=\"relative flex size-full flex-1 flex-row justify-start shadow-lg\">\n      <div className=\"absolute top-0 left-0 size-full\">\n        <div className=\"flex size-full\">\n          <FileTree filesPaths={filePaths} />\n        </div>\n      </div>\n    </div>\n  </Container>\n);\n"],"mappings":";;;;;AAQA,MAAaA,YAA+B,EAAE,WAAW,GAAG,YAC1D,qBAAC;CACC,WAAU;CACV,aAAY;CACZ,cAAa;CACb,GAAI;YAEJ,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;;IACb,oBAAC,SAAI,WAAU,mCAAmC;IAClD,oBAAC,SAAI,WAAU,sCAAsC;IACrD,oBAAC,SAAI,WAAU,qCAAqC;;IAChD;GACF,EACN,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,oBAAC,YAAS,YAAY,YAAa;KAC/B;IACF;GACF;EACI"}