npm - @intlayer/design-system - Versions diffs - 7.2.1-canary.1 → 7.2.3 - Mend

@intlayer/design-system 7.2.1-canary.1 → 7.2.3

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

Files changed (312) hide show

package/dist/esm/components/Form/FormField.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/components/Form/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useMemo } from 'react';\nimport {\n Controller,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { FormItemContext } from './FormItem';\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n);\n\nexport const FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n const memoValue = useMemo(\n () => ({\n name: props.name,\n }),\n [props.name]\n );\n\n return (\n <FormFieldContext value={memoValue}>\n <Controller {...props} />\n </FormFieldContext>\n );\n};\n\nexport const useFormField = () => {\n const fieldContext = useContext(FormFieldContext);\n const itemContext = useContext(FormItemContext);\n const { getFieldState, formState } = useFormContext();\n\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error('useFormField should be used within <FormField>');\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n"],"mappings":"~~;;;;;;;;;~~AAmBA,MAAM,mBAAmB,cACvB,EAAE,CACH;AAED,MAAa,aAGX,EACA,GAAG,YACuC;AAQ1C,QACE,oBAAC;EAAiB,OARF,eACT,EACL,MAAM,MAAM,MACb,GACD,CAAC,MAAM,KAAK,CACb;YAIG,oBAAC,cAAW,GAAI,QAAS;GACR;;AAIvB,MAAa,qBAAqB;CAChC,MAAM,eAAe,WAAW,iBAAiB;CACjD,MAAM,cAAc,WAAW,gBAAgB;CAC/C,MAAM,EAAE,eAAe,cAAc,gBAAgB;CAErD,MAAM,aAAa,cAAc,aAAa,MAAM,UAAU;AAE9D,KAAI,CAAC,aACH,OAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,EAAE,OAAO;AAEf,QAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;EACJ"}
1	+ {"version":3,"file":"FormField.mjs","names":[],"sources":["../../../../src/components/Form/FormField.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useContext, useMemo } from 'react';\nimport {\n Controller,\n type ControllerProps,\n type FieldPath,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { FormItemContext } from './FormItem';\n\ntype FormFieldContextValue<\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n name: TName;\n};\n\nconst FormFieldContext = createContext<FormFieldContextValue>(\n {} as FormFieldContextValue\n);\n\nexport const FormField = <\n TFieldValues extends FieldValues = FieldValues,\n TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n ...props\n}: ControllerProps<TFieldValues, TName>) => {\n const memoValue = useMemo(\n () => ({\n name: props.name,\n }),\n [props.name]\n );\n\n return (\n <FormFieldContext value={memoValue}>\n <Controller {...props} />\n </FormFieldContext>\n );\n};\n\nexport const useFormField = () => {\n const fieldContext = useContext(FormFieldContext);\n const itemContext = useContext(FormItemContext);\n const { getFieldState, formState } = useFormContext();\n\n const fieldState = getFieldState(fieldContext.name, formState);\n\n if (!fieldContext) {\n throw new Error('useFormField should be used within <FormField>');\n }\n\n const { id } = itemContext;\n\n return {\n id,\n name: fieldContext.name,\n formItemId: `${id}-form-item`,\n formDescriptionId: `${id}-form-item-description`,\n formMessageId: `${id}-form-item-message`,\n ...fieldState,\n };\n};\n"],"mappings":";;;;;;;;AAmBA,MAAM,mBAAmB,cACvB,EAAE,CACH;AAED,MAAa,aAGX,EACA,GAAG,YACuC;AAQ1C,QACE,oBAAC;EAAiB,OARF,eACT,EACL,MAAM,MAAM,MACb,GACD,CAAC,MAAM,KAAK,CACb;YAIG,oBAAC,cAAW,GAAI,QAAS;GACR;;AAIvB,MAAa,qBAAqB;CAChC,MAAM,eAAe,WAAW,iBAAiB;CACjD,MAAM,cAAc,WAAW,gBAAgB;CAC/C,MAAM,EAAE,eAAe,cAAc,gBAAgB;CAErD,MAAM,aAAa,cAAc,aAAa,MAAM,UAAU;AAE9D,KAAI,CAAC,aACH,OAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,EAAE,OAAO;AAEf,QAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;EACJ"}

package/dist/esm/components/Form/FormItem.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { createContext, useId, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/esm/components/Form/FormItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormItem.mjs","names":["FormItem: FC<HTMLAttributes<HTMLDivElement>>"],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type FC,\n type HTMLAttributes,\n useId,\n useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n id: idProp,\n ...props\n}) => {\n const generatedId = useId();\n const stableId = idProp ?? generatedId;\n\n const memoValue = useMemo(\n () => ({\n id: stableId,\n }),\n [stableId]\n );\n\n return (\n <FormItemContext value={memoValue}>\n <div className=\"flex flex-col gap-2 p-2\" id={stableId} {...props} />\n </FormItemContext>\n );\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n {} as FormItemContextValue\n);\n"],"mappings":"~~;;;;;;;~~AAUA,MAAaA,YAAgD,EAC3D,IAAI,QACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;AAS3B,QACE,oBAAC;EAAgB,OARD,eACT,EACL,IAAI,UACL,GACD,CAAC,SAAS,CACX;YAIG,oBAAC;GAAI,WAAU;GAA0B,IAAI;GAAU,GAAI;IAAS;GACpD;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}
1	+ {"version":3,"file":"FormItem.mjs","names":["FormItem: FC<HTMLAttributes<HTMLDivElement>>"],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type FC,\n type HTMLAttributes,\n useId,\n useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n id: idProp,\n ...props\n}) => {\n const generatedId = useId();\n const stableId = idProp ?? generatedId;\n\n const memoValue = useMemo(\n () => ({\n id: stableId,\n }),\n [stableId]\n );\n\n return (\n <FormItemContext value={memoValue}>\n <div className=\"flex flex-col gap-2 p-2\" id={stableId} {...props} />\n </FormItemContext>\n );\n};\n\ntype FormItemContextValue = {\n id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n {} as FormItemContextValue\n);\n"],"mappings":";;;;;;AAUA,MAAaA,YAAgD,EAC3D,IAAI,QACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;AAS3B,QACE,oBAAC;EAAgB,OARD,eACT,EACL,IAAI,UACL,GACD,CAAC,SAAS,CACX;YAIG,oBAAC;GAAI,WAAU;GAA0B,IAAI;GAAU,GAAI;IAAS;GACpD;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}

package/dist/esm/components/Form/FormLabel.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { useFormField } from "./FormField.mjs";
 import { Label } from "../Label/index.mjs";

package/dist/esm/components/Form/FormLabel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormLabel.mjs","names":["FormLabel: FC<ComponentProps<typeof Label>>"],"sources":["../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n className,\n ...props\n}) => {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n className={cn('mb-2', error && 'text-error', className)}\n htmlFor={formItemId}\n {...props}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;;~~AAOA,MAAaA,aAA+C,EAC1D,WACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,eAAe,cAAc;AAE5C,QACE,oBAAC;EACC,WAAW,GAAG,QAAQ,SAAS,cAAc,UAAU;EACvD,SAAS;EACT,GAAI;GACJ"}
1	+ {"version":3,"file":"FormLabel.mjs","names":["FormLabel: FC<ComponentProps<typeof Label>>"],"sources":["../../../../src/components/Form/FormLabel.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, FC } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Label } from '../Label';\nimport { useFormField } from './FormField';\n\nexport const FormLabel: FC<ComponentProps<typeof Label>> = ({\n className,\n ...props\n}) => {\n const { error, formItemId } = useFormField();\n\n return (\n <Label\n className={cn('mb-2', error && 'text-error', className)}\n htmlFor={formItemId}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAaA,aAA+C,EAC1D,WACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,eAAe,cAAc;AAE5C,QACE,oBAAC;EACC,WAAW,GAAG,QAAQ,SAAS,cAAc,UAAU;EACvD,SAAS;EACT,GAAI;GACJ"}

package/dist/esm/components/Form/FormMessage.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "./FormField.mjs";
 import { jsx } from "react/jsx-runtime";

package/dist/esm/components/Form/FormMessage.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormMessage.mjs","names":["FormMessage: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n children,\n ...props\n}) => {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message ?? '') : children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n className=\"font-medium text-error text-xs\"\n role=\"alert\"\n id={formMessageId}\n {...props}\n >\n {body}\n </p>\n );\n};\n"],"mappings":"~~;;;;;;;~~AAKA,MAAaA,eAAyD,EACpE,UACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,kBAAkB,cAAc;CAC/C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,GAAG,GAAG;AAEpD,KAAI,CAAC,KACH,QAAO;AAGT,QACE,oBAAC;EACC,WAAU;EACV,MAAK;EACL,IAAI;EACJ,GAAI;YAEH;GACC"}
1	+ {"version":3,"file":"FormMessage.mjs","names":["FormMessage: FC<HTMLAttributes<HTMLParagraphElement>>"],"sources":["../../../../src/components/Form/FormMessage.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes } from 'react';\nimport { useFormField } from './FormField';\n\nexport const FormMessage: FC<HTMLAttributes<HTMLParagraphElement>> = ({\n children,\n ...props\n}) => {\n const { error, formMessageId } = useFormField();\n const body = error ? String(error?.message ?? '') : children;\n\n if (!body) {\n return null;\n }\n\n return (\n <p\n className=\"font-medium text-error text-xs\"\n role=\"alert\"\n id={formMessageId}\n {...props}\n >\n {body}\n </p>\n );\n};\n"],"mappings":";;;;;;AAKA,MAAaA,eAAyD,EACpE,UACA,GAAG,YACC;CACJ,MAAM,EAAE,OAAO,kBAAkB,cAAc;CAC/C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,GAAG,GAAG;AAEpD,KAAI,CAAC,KACH,QAAO;AAGT,QACE,oBAAC;EACC,WAAU;EACV,MAAK;EACL,IAAI;EACJ,GAAI;YAEH;GACC"}

package/dist/esm/components/Form/elements/FormElement.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { Form } from "../Form.mjs";

package/dist/esm/components/Form/elements/FormElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n type ControllerRenderProps,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n name: string;\n Element: T;\n label?: ReactNode;\n isRequired?: boolean;\n info?: string;\n showErrorMessage?: boolean;\n focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n ComponentProps<T> & {\n field: ControllerRenderProps<FieldValues, string>;\n };\n\nconst FormFieldElement = <T extends ElementType>({\n field,\n name,\n label,\n Element,\n isRequired = false,\n info,\n description,\n showErrorMessage = true,\n ...props\n}: FormFieldElementProps<T>) => {\n const { error } = useFormField();\n\n // Ensure controlled inputs and merge onChange with RHF controller\n const {\n value: fieldValue,\n onChange: fieldOnChange,\n ...fieldRest\n } = (field as unknown as {\n value: unknown;\n onChange: (...args: unknown[]) => void;\n }) ?? {};\n\n const propsAny = props as unknown as {\n value?: unknown;\n onChange?: (...args: unknown[]) => void;\n children?: unknown;\n };\n\n const mergedValue =\n propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n const mergedOnChange = (...args: unknown[]) => {\n if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n };\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 <Element\n data-testid=\"element\"\n id={name}\n {...fieldRest}\n {...props}\n // Force controlled value to avoid uncontrolled-to-controlled warnings\n value={mergedValue as never}\n // Merge onChange so RHF stays in sync while allowing custom handlers\n onChange={mergedOnChange as never}\n >\n {props.children}\n </Element>\n </FormItemLayout>\n );\n};\n\n/*\n FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n \n The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n props: FormElementProps<T> & ComponentProps<T>\n) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={props.name}\n render={({ field }) => <FormFieldElement {...props} field={field} />}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AA2BA,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,MACnB,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,eACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;IACC;GACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC;GAAiB,GAAI;GAAc;IAAS;GACpE"}
1	+ {"version":3,"file":"FormElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/FormElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ElementType, ReactNode } from 'react';\nimport {\n type ControllerRenderProps,\n type FieldValues,\n useFormContext,\n} from 'react-hook-form';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout, type FormItemLayoutProps } from '../layout';\n\nexport type FormElementProps<T extends ElementType> = {\n name: string;\n Element: T;\n label?: ReactNode;\n isRequired?: boolean;\n info?: string;\n showErrorMessage?: boolean;\n focus?: boolean;\n} & Omit<FormItemLayoutProps, 'children'>;\n\ntype FormFieldElementProps<T extends ElementType> = FormElementProps<T> &\n ComponentProps<T> & {\n field: ControllerRenderProps<FieldValues, string>;\n };\n\nconst FormFieldElement = <T extends ElementType>({\n field,\n name,\n label,\n Element,\n isRequired = false,\n info,\n description,\n showErrorMessage = true,\n ...props\n}: FormFieldElementProps<T>) => {\n const { error } = useFormField();\n\n // Ensure controlled inputs and merge onChange with RHF controller\n const {\n value: fieldValue,\n onChange: fieldOnChange,\n ...fieldRest\n } = (field as unknown as {\n value: unknown;\n onChange: (...args: unknown[]) => void;\n }) ?? {};\n\n const propsAny = props as unknown as {\n value?: unknown;\n onChange?: (...args: unknown[]) => void;\n children?: unknown;\n };\n\n const mergedValue =\n propsAny.value !== undefined ? propsAny.value : (fieldValue ?? '');\n\n const mergedOnChange = (...args: unknown[]) => {\n if (typeof fieldOnChange === 'function') fieldOnChange(...args);\n if (typeof propsAny.onChange === 'function') propsAny.onChange(...args);\n };\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 <Element\n data-testid=\"element\"\n id={name}\n {...fieldRest}\n {...props}\n // Force controlled value to avoid uncontrolled-to-controlled warnings\n value={mergedValue as never}\n // Merge onChange so RHF stays in sync while allowing custom handlers\n onChange={mergedOnChange as never}\n >\n {props.children}\n </Element>\n </FormItemLayout>\n );\n};\n\n/*\n FormElement is a component that allows you to create a form element with a label, description, error message, and validation.\n \n The Element prop is the type of the element that will be rendered.\n * This element will interact with the FormContext and will be controlled by the FormControl component.\n * The props used to control the element will be `value` and `onChange`.\n */\nexport const FormElement = <T extends ElementType>(\n props: FormElementProps<T> & ComponentProps<T>\n) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={props.name}\n render={({ field }) => <FormFieldElement {...props} field={field} />}\n />\n );\n};\n"],"mappings":";;;;;;;;;AA2BA,MAAM,oBAA2C,EAC/C,OACA,MACA,OACA,SACA,aAAa,OACb,MACA,aACA,mBAAmB,MACnB,GAAG,YAC2B;CAC9B,MAAM,EAAE,UAAU,cAAc;CAGhC,MAAM,EACJ,OAAO,YACP,UAAU,eACV,GAAG,cACA,SAGC,EAAE;CAER,MAAM,WAAW;CAMjB,MAAM,cACJ,SAAS,UAAU,SAAY,SAAS,QAAS,cAAc;CAEjE,MAAM,kBAAkB,GAAG,SAAoB;AAC7C,MAAI,OAAO,kBAAkB,WAAY,eAAc,GAAG,KAAK;AAC/D,MAAI,OAAO,SAAS,aAAa,WAAY,UAAS,SAAS,GAAG,KAAK;;AAGzE,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAY;GACZ,IAAI;GACJ,GAAI;GACJ,GAAI;GAEJ,OAAO;GAEP,UAAU;aAET,MAAM;IACC;GACK;;;;;;;;;AAWrB,MAAa,eACX,UACG;CACH,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACT,MAAM,MAAM;EACZ,SAAS,EAAE,YAAY,oBAAC;GAAiB,GAAI;GAAc;IAAS;GACpE"}

package/dist/esm/components/Form/elements/FormElementWrapper.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { jsx } from "react/jsx-runtime";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";

package/dist/esm/components/Form/elements/FormElementWrapper.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormElementWrapper.mjs","names":["FormElementWrapper: FC<FormElementWrapperProps>"],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n schema?: z.ZodObject;\n values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n const objectFormSchema = props.schema ?? Schema;\n\n const form = useForm<z.infer<typeof objectFormSchema>>({\n resolver: zodResolver(objectFormSchema as any),\n values: props.values,\n });\n\n const { children, onSubmit, ...rest } = props;\n\n const onSubmitForm = (\n values: z.infer<typeof objectFormSchema>,\n event: FormEvent<HTMLFormElement>\n ) => {\n const parsedValues = objectFormSchema.safeParse(values);\n if (parsedValues.success) {\n onSubmit?.(event);\n }\n };\n\n return (\n <FormProvider {...form}>\n <form\n {...rest}\n onSubmit={(e) => {\n e.preventDefault();\n form.handleSubmit((values) => onSubmitForm(values, e));\n }}\n >\n {children}\n </form>\n </FormProvider>\n );\n};\n"],"mappings":"~~;;;;;;;;;~~AAOA,MAAM,SAAS,EAAE,OAAO,EACtB,MAAM,EAAE,QAAQ,CAAC,IAAI,GAAG,aAAa,EACtC,CAAC;AAOF,MAAaA,sBAAmD,UAAU;CACxE,MAAM,mBAAmB,MAAM,UAAU;CAEzC,MAAM,OAAO,QAA0C;EACrD,UAAU,YAAY,iBAAwB;EAC9C,QAAQ,MAAM;EACf,CAAC;CAEF,MAAM,EAAE,UAAU,UAAU,GAAG,SAAS;CAExC,MAAM,gBACJ,QACA,UACG;AAEH,MADqB,iBAAiB,UAAU,OAAO,CACtC,QACf,YAAW,MAAM;;AAIrB,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,GAAI;GACJ,WAAW,MAAM;AACf,MAAE,gBAAgB;AAClB,SAAK,cAAc,WAAW,aAAa,QAAQ,EAAE,CAAC;;GAGvD;IACI;GACM"}
1	+ {"version":3,"file":"FormElementWrapper.mjs","names":["FormElementWrapper: FC<FormElementWrapperProps>"],"sources":["../../../../../src/components/Form/elements/FormElementWrapper.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport type { FC, FormEvent, HTMLProps } from 'react';\nimport { FormProvider, useForm } from 'react-hook-form';\nimport { z } from 'zod/v4';\n\nconst Schema = z.object({\n test: z.string().min(3, 'test error'),\n});\n\ntype FormElementWrapperProps = HTMLProps<HTMLFormElement> & {\n schema?: z.ZodObject;\n values?: z.infer<z.ZodObject>;\n};\n\nexport const FormElementWrapper: FC<FormElementWrapperProps> = (props) => {\n const objectFormSchema = props.schema ?? Schema;\n\n const form = useForm<z.infer<typeof objectFormSchema>>({\n resolver: zodResolver(objectFormSchema as any),\n values: props.values,\n });\n\n const { children, onSubmit, ...rest } = props;\n\n const onSubmitForm = (\n values: z.infer<typeof objectFormSchema>,\n event: FormEvent<HTMLFormElement>\n ) => {\n const parsedValues = objectFormSchema.safeParse(values);\n if (parsedValues.success) {\n onSubmit?.(event);\n }\n };\n\n return (\n <FormProvider {...form}>\n <form\n {...rest}\n onSubmit={(e) => {\n e.preventDefault();\n form.handleSubmit((values) => onSubmitForm(values, e));\n }}\n >\n {children}\n </form>\n </FormProvider>\n );\n};\n"],"mappings":";;;;;;;;AAOA,MAAM,SAAS,EAAE,OAAO,EACtB,MAAM,EAAE,QAAQ,CAAC,IAAI,GAAG,aAAa,EACtC,CAAC;AAOF,MAAaA,sBAAmD,UAAU;CACxE,MAAM,mBAAmB,MAAM,UAAU;CAEzC,MAAM,OAAO,QAA0C;EACrD,UAAU,YAAY,iBAAwB;EAC9C,QAAQ,MAAM;EACf,CAAC;CAEF,MAAM,EAAE,UAAU,UAAU,GAAG,SAAS;CAExC,MAAM,gBACJ,QACA,UACG;AAEH,MADqB,iBAAiB,UAAU,OAAO,CACtC,QACf,YAAW,MAAM;;AAIrB,QACE,oBAAC;EAAa,GAAI;YAChB,oBAAC;GACC,GAAI;GACJ,WAAW,MAAM;AACf,MAAE,gBAAgB;AAClB,SAAK,cAAc,WAAW,aAAa,QAAQ,EAAE,CAAC;;GAGvD;IACI;GACM"}

package/dist/esm/components/Form/elements/MultiselectElement.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";

package/dist/esm/components/Form/elements/MultiselectElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { MultiSelect } from '../../Select/Multiselect';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n FormElementProps<typeof MultiSelect>,\n 'Element'\n> &\n ComponentProps<typeof MultiSelect> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst MultiSelectFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SelectElementsProps, '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 <MultiSelect\n onValueChange={field.onChange}\n values={field.value}\n {...props}\n >\n {children}\n </MultiSelect>\n </FormItemLayout>\n );\n};\n\nexport const MultiSelectElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SelectElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <MultiSelectFieldContent\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 </MultiSelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;;;;~~AAsBA,MAAM,2BAA2B,EAC/B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,GAAI;GAEH;IACW;GACC;;AAIrB,MAAa,sBAAsB,EACjC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,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;IACuB;GAE5B"}
1	+ {"version":3,"file":"MultiselectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/MultiselectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { MultiSelect } from '../../Select/Multiselect';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<\n FormElementProps<typeof MultiSelect>,\n 'Element'\n> &\n ComponentProps<typeof MultiSelect> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst MultiSelectFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SelectElementsProps, '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 <MultiSelect\n onValueChange={field.onChange}\n values={field.value}\n {...props}\n >\n {children}\n </MultiSelect>\n </FormItemLayout>\n );\n};\n\nexport const MultiSelectElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SelectElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <MultiSelectFieldContent\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 </MultiSelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAsBA,MAAM,2BAA2B,EAC/B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,QAAQ,MAAM;GACd,GAAI;GAEH;IACW;GACC;;AAIrB,MAAa,sBAAsB,EACjC,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,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;IACuB;GAE5B"}

package/dist/esm/components/Form/elements/OTPElement.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
 import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
 import { useFormField } from "../FormField.mjs";

package/dist/esm/components/Form/elements/OTPElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useItemSelector } from '../../../hooks';\nimport {\n InputIndicator,\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from '../../Input/OTPInput';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n /** Number of OTP slots (default: 6) */\n slots?: number;\n };\n\nconst selector = (option: HTMLElement) =>\n option?.getAttribute('aria-active') === 'true';\n\nconst OTPFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n {\n selector,\n isHoverable: true,\n }\n );\n\n useEffect(() => {\n calculatePosition();\n }, []);\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 <InputOTP\n onChange={field.onChange}\n defaultValue={field.value}\n maxLength={maxLength}\n pattern=\"^[0-9]+$\"\n onActiveSlotChange={calculatePosition}\n {...(props as any)}\n >\n {children ?? (\n <>\n <InputOTPGroup>\n <InputOTPSlot\n index={0}\n ref={(el) => {\n optionsRefs.current[0] = el!;\n }}\n />\n <InputOTPSlot\n index={1}\n ref={(el) => {\n optionsRefs.current[1] = el!;\n }}\n />\n <InputOTPSlot\n index={2}\n ref={(el) => {\n optionsRefs.current[2] = el!;\n }}\n />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup>\n <InputOTPSlot\n index={3}\n ref={(el) => {\n optionsRefs.current[3] = el!;\n }}\n />\n <InputOTPSlot\n index={4}\n ref={(el) => {\n optionsRefs.current[4] = el!;\n }}\n />\n <InputOTPSlot\n index={5}\n ref={(el) => {\n optionsRefs.current[5] = el!;\n }}\n />\n </InputOTPGroup>\n {choiceIndicatorPosition && (\n <InputIndicator\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </>\n )}\n </InputOTP>\n </FormItemLayout>\n );\n};\n\nexport const OTPElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: OTPElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <OTPFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n slots={slots}\n maxLength={maxLength}\n {...props}\n >\n {children}\n </OTPFieldContent>\n )}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;~~AA4BA,MAAM,YAAY,WAChB,QAAQ,aAAa,cAAc,KAAK;AAE1C,MAAM,mBAAmB,EACvB,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACqD;CACxD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EACE;EACA,aAAa;EACd,CACF;AAED,iBAAgB;AACd,qBAAmB;IAClB,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,UAAU,MAAM;GAChB,cAAc,MAAM;GACT;GACX,SAAQ;GACR,oBAAoB;GACpB,GAAK;aAEJ,YACC;IACE,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IAChB,oBAAC,sBAAoB;IACrB,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IACf,2BACC,oBAAC;KACC,OAAO;KACP,KAAK;MACL;OAEH;IAEI;GACI;;AAIrB,MAAa,cAAc,EACzB,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GACX;GACI;GACX,GAAI;GAEH;IACe;GAEpB"}
1	+ {"version":3,"file":"OTPElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/OTPElement.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentProps, type ReactNode, useEffect, useRef } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { useItemSelector } from '../../../hooks';\nimport {\n InputIndicator,\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from '../../Input/OTPInput';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype OTPElementsProps = Omit<FormElementProps<typeof InputOTP>, 'Element'> &\n Omit<ComponentProps<typeof InputOTP>, 'children'> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n /** Number of OTP slots (default: 6) */\n slots?: number;\n };\n\nconst selector = (option: HTMLElement) =>\n option?.getAttribute('aria-active') === 'true';\n\nconst OTPFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: Omit<OTPElementsProps, 'control'> & { field: any }) => {\n const { error } = useFormField();\n\n const optionsRefs = useRef<HTMLElement[]>([]);\n const indicatorRef = useRef<HTMLDivElement \| null>(null);\n const { choiceIndicatorPosition, calculatePosition } = useItemSelector(\n optionsRefs,\n {\n selector,\n isHoverable: true,\n }\n );\n\n useEffect(() => {\n calculatePosition();\n }, []);\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 <InputOTP\n onChange={field.onChange}\n defaultValue={field.value}\n maxLength={maxLength}\n pattern=\"^[0-9]+$\"\n onActiveSlotChange={calculatePosition}\n {...(props as any)}\n >\n {children ?? (\n <>\n <InputOTPGroup>\n <InputOTPSlot\n index={0}\n ref={(el) => {\n optionsRefs.current[0] = el!;\n }}\n />\n <InputOTPSlot\n index={1}\n ref={(el) => {\n optionsRefs.current[1] = el!;\n }}\n />\n <InputOTPSlot\n index={2}\n ref={(el) => {\n optionsRefs.current[2] = el!;\n }}\n />\n </InputOTPGroup>\n <InputOTPSeparator />\n <InputOTPGroup>\n <InputOTPSlot\n index={3}\n ref={(el) => {\n optionsRefs.current[3] = el!;\n }}\n />\n <InputOTPSlot\n index={4}\n ref={(el) => {\n optionsRefs.current[4] = el!;\n }}\n />\n <InputOTPSlot\n index={5}\n ref={(el) => {\n optionsRefs.current[5] = el!;\n }}\n />\n </InputOTPGroup>\n {choiceIndicatorPosition && (\n <InputIndicator\n style={choiceIndicatorPosition}\n ref={indicatorRef}\n />\n )}\n </>\n )}\n </InputOTP>\n </FormItemLayout>\n );\n};\n\nexport const OTPElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n slots = 6,\n maxLength = 6,\n ...props\n}: OTPElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <OTPFieldContent\n field={field}\n name={name}\n label={label}\n description={description}\n isRequired={isRequired}\n info={info}\n showErrorMessage={showErrorMessage}\n slots={slots}\n maxLength={maxLength}\n {...props}\n >\n {children}\n </OTPFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAM,YAAY,WAChB,QAAQ,aAAa,cAAc,KAAK;AAE1C,MAAM,mBAAmB,EACvB,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACqD;CACxD,MAAM,EAAE,UAAU,cAAc;CAEhC,MAAM,cAAc,OAAsB,EAAE,CAAC;CAC7C,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,yBAAyB,sBAAsB,gBACrD,aACA;EACE;EACA,aAAa;EACd,CACF;AAED,iBAAgB;AACd,qBAAmB;IAClB,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,UAAU,MAAM;GAChB,cAAc,MAAM;GACT;GACX,SAAQ;GACR,oBAAoB;GACpB,GAAK;aAEJ,YACC;IACE,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IAChB,oBAAC,sBAAoB;IACrB,qBAAC;KACC,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;KACF,oBAAC;MACC,OAAO;MACP,MAAM,OAAO;AACX,mBAAY,QAAQ,KAAK;;OAE3B;QACY;IACf,2BACC,oBAAC;KACC,OAAO;KACP,KAAK;MACL;OAEH;IAEI;GACI;;AAIrB,MAAa,cAAc,EACzB,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,QAAQ,GACR,YAAY,GACZ,GAAG,YACmB;CACtB,MAAM,EAAE,YAAY,gBAAgB;AAEpC,QACE,oBAAC,KAAK;EACK;EACH;EACN,SAAS,EAAE,YACT,oBAAC;GACQ;GACD;GACC;GACM;GACD;GACN;GACY;GACX;GACI;GACX,GAAI;GAEH;IACe;GAEpB"}

package/dist/esm/components/Form/elements/SelectElement.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { Select } from "../../Select/Select.mjs";

package/dist/esm/components/Form/elements/SelectElement.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Select } from '../../Select/Select';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n ComponentProps<typeof Select> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst SelectFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SelectElementsProps, '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 <Select\n onValueChange={field.onChange}\n defaultValue={field.value}\n {...props}\n >\n {children}\n </Select>\n </FormItemLayout>\n );\n};\n\nexport const SelectElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SelectElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <SelectFieldContent\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 </SelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":"~~;;;;;;;;;;;~~AAmBA,MAAM,sBAAsB,EAC1B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,cAAc,MAAM;GACpB,GAAI;GAEH;IACM;GACM;;AAIrB,MAAa,iBAAiB,EAC5B,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,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;IACkB;GAEvB"}
1	+ {"version":3,"file":"SelectElement.mjs","names":[],"sources":["../../../../../src/components/Form/elements/SelectElement.tsx"],"sourcesContent":["'use client';\n\nimport type { ComponentProps, ReactNode } from 'react';\nimport { useFormContext } from 'react-hook-form';\nimport { Select } from '../../Select/Select';\nimport { Form } from '../Form';\nimport { useFormField } from '../FormField';\nimport { FormItemLayout } from '../layout/FormItemLayout';\nimport type { FormElementProps } from './FormElement';\n\ntype SelectElementsProps = Omit<FormElementProps<typeof Select>, 'Element'> &\n ComponentProps<typeof Select> & {\n name: string;\n description?: string;\n placeholder?: string;\n className?: string;\n children?: ReactNode;\n };\n\nconst SelectFieldContent = ({\n field,\n name,\n label,\n description,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: Omit<SelectElementsProps, '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 <Select\n onValueChange={field.onChange}\n defaultValue={field.value}\n {...props}\n >\n {children}\n </Select>\n </FormItemLayout>\n );\n};\n\nexport const SelectElement = ({\n name,\n description,\n label,\n isRequired,\n info,\n showErrorMessage,\n children,\n ...props\n}: SelectElementsProps) => {\n const { control } = useFormContext();\n\n return (\n <Form.Field\n control={control}\n name={name}\n render={({ field }) => (\n <SelectFieldContent\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 </SelectFieldContent>\n )}\n />\n );\n};\n"],"mappings":";;;;;;;;;;AAmBA,MAAM,sBAAsB,EAC1B,OACA,MACA,OACA,aACA,YACA,MACA,kBACA,UACA,GAAG,YACwD;CAC3D,MAAM,EAAE,UAAU,cAAc;AAEhC,QACE,oBAAC;EACC,SAAS;EACF;EACM;EACD;EACN;EACY;EAClB,gBAAc,CAAC,CAAC;YAEhB,oBAAC;GACC,eAAe,MAAM;GACrB,cAAc,MAAM;GACpB,GAAI;GAEH;IACM;GACM;;AAIrB,MAAa,iBAAiB,EAC5B,MACA,aACA,OACA,YACA,MACA,kBACA,UACA,GAAG,YACsB;CACzB,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;IACkB;GAEvB"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { SwitchSelector } from "../../SwitchSelector/index.mjs";

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

	@@ -1 +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\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"}
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\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/HeightResizer/index.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

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

	@@ -1 +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,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"}
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,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 CHANGED Viewed

@@ -1,9 +1,8 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
-import { useEffect, useMemo, useRef, useState } from "react";
 import { Eye, EyeOff } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/HideShow/index.tsx

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

	@@ -1 +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\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"}
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\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/CodeBlockShiki.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { CodeDefault } from "./CodeBlockClient.mjs";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/esm/components/IDE/CodeBlockShiki.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlockShiki.mjs","names":["languageModule: any","themeModule: any","themeName: BundledTheme","CodeBlockShiki: FC<CodeBlockShikiProps>"],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n BundledLanguage,\n BundledTheme,\n CodeToHastOptions,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n if (languageCache.has(lang)) {\n return languageCache.get(lang);\n }\n\n let languageModule: any;\n\n switch (lang) {\n case 'typescript':\n case 'ts':\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n case 'javascript':\n case 'js':\n languageModule = await import('shiki/langs/javascript.mjs');\n break;\n case 'bash':\n case 'sh':\n case 'shell':\n languageModule = await import('shiki/langs/bash.mjs');\n break;\n case 'json':\n languageModule = await import('shiki/langs/json.mjs');\n break;\n case 'tsx':\n languageModule = await import('shiki/langs/tsx.mjs');\n break;\n case 'vue':\n languageModule = await import('shiki/langs/vue.mjs');\n break;\n case 'html':\n languageModule = await import('shiki/langs/html.mjs');\n break;\n default:\n // Fallback to typescript for unknown languages\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n }\n\n const language = languageModule.default;\n languageCache.set(lang, language);\n return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n if (themeCache.has(themeName)) {\n return themeCache.get(themeName);\n }\n\n let themeModule: any;\n\n switch (themeName) {\n case 'github-dark':\n themeModule = await import('shiki/themes/github-dark.mjs');\n break;\n case 'github-light':\n themeModule = await import('shiki/themes/github-light.mjs');\n break;\n default:\n themeModule = await import('shiki/themes/github-light.mjs');\n break;\n }\n\n const theme = themeModule.default;\n themeCache.set(themeName, theme);\n return theme;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n code: string,\n lang: BundledLanguage,\n isDarkMode?: boolean\n): Promise<string> => {\n const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n // Lazy load shiki, language, and theme in parallel\n const [{ codeToHtml }, languageModule, themeModule] = await Promise.all([\n import('shiki/bundle/web'),\n loadLanguage(lang),\n loadTheme(themeName),\n ]);\n\n const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n lang,\n theme: themeModule,\n };\n\n return codeToHtml(code, {\n ...shikiOptions,\n langs: [languageModule],\n } as any);\n};\n\nexport type CodeBlockShikiProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n children,\n lang,\n isDarkMode,\n}) => {\n const [html, setHtml] = useState<string \| null>(null);\n\n useEffect(() => {\n let isCancelled = false;\n\n setHtml(null);\n\n highlightCode(children, lang, isDarkMode)\n .then((result) => {\n if (!isCancelled) setHtml(result);\n })\n .catch(() => {\n if (!isCancelled) setHtml('');\n });\n\n return () => {\n isCancelled = true;\n };\n }, [children, lang, isDarkMode]);\n\n return (\n <div\n style={{\n backgroundColor: 'transparent',\n minWidth: 0,\n maxWidth: '100%',\n overflow: 'auto',\n }}\n >\n {html ? (\n // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n <div dangerouslySetInnerHTML={{ __html: html }} />\n ) : (\n <CodeDefault>{children}</CodeDefault>\n )}\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;~~AAWA,MAAM,gCAAgB,IAAI,KAA2B;AACrD,MAAM,6BAAa,IAAI,KAAwB;AAG/C,MAAM,eAAe,OAAO,SAAwC;AAClE,KAAI,cAAc,IAAI,KAAK,CACzB,QAAO,cAAc,IAAI,KAAK;CAGhC,IAAIA;AAEJ,SAAQ,MAAR;EACE,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF;AAEE,oBAAiB,MAAM,OAAO;AAC9B;;CAGJ,MAAM,WAAW,eAAe;AAChC,eAAc,IAAI,MAAM,SAAS;AACjC,QAAO;;AAIT,MAAM,YAAY,OAAO,cAA0C;AACjE,KAAI,WAAW,IAAI,UAAU,CAC3B,QAAO,WAAW,IAAI,UAAU;CAGlC,IAAIC;AAEJ,SAAQ,WAAR;EACE,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EACF,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EACF;AACE,iBAAc,MAAM,OAAO;AAC3B;;CAGJ,MAAM,QAAQ,YAAY;AAC1B,YAAW,IAAI,WAAW,MAAM;AAChC,QAAO;;AAIT,MAAM,gBAAgB,OACpB,MACA,MACA,eACoB;CACpB,MAAMC,YAA0B,aAAa,gBAAgB;CAG7D,MAAM,CAAC,EAAE,cAAc,gBAAgB,eAAe,MAAM,QAAQ,IAAI;EACtE,OAAO;EACP,aAAa,KAAK;EAClB,UAAU,UAAU;EACrB,CAAC;AAOF,QAAO,WAAW,MAAM;EAJtB;EACA,OAAO;EAKP,OAAO,CAAC,eAAe;EACxB,CAAQ;;AASX,MAAaC,kBAA2C,EACtD,UACA,MACA,iBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAwB,KAAK;AAErD,iBAAgB;EACd,IAAI,cAAc;AAElB,UAAQ,KAAK;AAEb,gBAAc,UAAU,MAAM,WAAW,CACtC,MAAM,WAAW;AAChB,OAAI,CAAC,YAAa,SAAQ,OAAO;IACjC,CACD,YAAY;AACX,OAAI,CAAC,YAAa,SAAQ,GAAG;IAC7B;AAEJ,eAAa;AACX,iBAAc;;IAEf;EAAC;EAAU;EAAM;EAAW,CAAC;AAEhC,QACE,oBAAC;EACC,OAAO;GACL,iBAAiB;GACjB,UAAU;GACV,UAAU;GACV,UAAU;GACX;YAEA,OAEC,oBAAC,SAAI,yBAAyB,EAAE,QAAQ,MAAM,GAAI,GAElD,oBAAC,eAAa,WAAuB;GAEnC"}
1	+ {"version":3,"file":"CodeBlockShiki.mjs","names":["languageModule: any","themeModule: any","themeName: BundledTheme","CodeBlockShiki: FC<CodeBlockShikiProps>"],"sources":["../../../../src/components/IDE/CodeBlockShiki.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, useEffect, useState } from 'react';\nimport type {\n BundledLanguage,\n BundledTheme,\n CodeToHastOptions,\n} from 'shiki/bundle/web';\nimport { CodeDefault } from './CodeBlockClient';\n\n// Map of loaded modules to avoid re-importing\nconst languageCache = new Map<BundledLanguage, any>();\nconst themeCache = new Map<BundledTheme, any>();\n\n// Lazy load language modules\nconst loadLanguage = async (lang: BundledLanguage): Promise<any> => {\n if (languageCache.has(lang)) {\n return languageCache.get(lang);\n }\n\n let languageModule: any;\n\n switch (lang) {\n case 'typescript':\n case 'ts':\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n case 'javascript':\n case 'js':\n languageModule = await import('shiki/langs/javascript.mjs');\n break;\n case 'bash':\n case 'sh':\n case 'shell':\n languageModule = await import('shiki/langs/bash.mjs');\n break;\n case 'json':\n languageModule = await import('shiki/langs/json.mjs');\n break;\n case 'tsx':\n languageModule = await import('shiki/langs/tsx.mjs');\n break;\n case 'vue':\n languageModule = await import('shiki/langs/vue.mjs');\n break;\n case 'html':\n languageModule = await import('shiki/langs/html.mjs');\n break;\n default:\n // Fallback to typescript for unknown languages\n languageModule = await import('shiki/langs/typescript.mjs');\n break;\n }\n\n const language = languageModule.default;\n languageCache.set(lang, language);\n return language;\n};\n\n// Lazy load theme modules\nconst loadTheme = async (themeName: BundledTheme): Promise<any> => {\n if (themeCache.has(themeName)) {\n return themeCache.get(themeName);\n }\n\n let themeModule: any;\n\n switch (themeName) {\n case 'github-dark':\n themeModule = await import('shiki/themes/github-dark.mjs');\n break;\n case 'github-light':\n themeModule = await import('shiki/themes/github-light.mjs');\n break;\n default:\n themeModule = await import('shiki/themes/github-light.mjs');\n break;\n }\n\n const theme = themeModule.default;\n themeCache.set(themeName, theme);\n return theme;\n};\n\n// Create a promise for highlighting\nconst highlightCode = async (\n code: string,\n lang: BundledLanguage,\n isDarkMode?: boolean\n): Promise<string> => {\n const themeName: BundledTheme = isDarkMode ? 'github-dark' : 'github-light';\n\n // Lazy load shiki, language, and theme in parallel\n const [{ codeToHtml }, languageModule, themeModule] = await Promise.all([\n import('shiki/bundle/web'),\n loadLanguage(lang),\n loadTheme(themeName),\n ]);\n\n const shikiOptions: CodeToHastOptions<BundledLanguage, BundledTheme> = {\n lang,\n theme: themeModule,\n };\n\n return codeToHtml(code, {\n ...shikiOptions,\n langs: [languageModule],\n } as any);\n};\n\nexport type CodeBlockShikiProps = {\n children: string;\n lang: BundledLanguage;\n isDarkMode?: boolean;\n};\n\nexport const CodeBlockShiki: FC<CodeBlockShikiProps> = ({\n children,\n lang,\n isDarkMode,\n}) => {\n const [html, setHtml] = useState<string \| null>(null);\n\n useEffect(() => {\n let isCancelled = false;\n\n setHtml(null);\n\n highlightCode(children, lang, isDarkMode)\n .then((result) => {\n if (!isCancelled) setHtml(result);\n })\n .catch(() => {\n if (!isCancelled) setHtml('');\n });\n\n return () => {\n isCancelled = true;\n };\n }, [children, lang, isDarkMode]);\n\n return (\n <div\n style={{\n backgroundColor: 'transparent',\n minWidth: 0,\n maxWidth: '100%',\n overflow: 'auto',\n }}\n >\n {html ? (\n // biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki generates safe HTML for code highlighting\n <div dangerouslySetInnerHTML={{ __html: html }} />\n ) : (\n <CodeDefault>{children}</CodeDefault>\n )}\n </div>\n );\n};\n"],"mappings":";;;;;;;AAWA,MAAM,gCAAgB,IAAI,KAA2B;AACrD,MAAM,6BAAa,IAAI,KAAwB;AAG/C,MAAM,eAAe,OAAO,SAAwC;AAClE,KAAI,cAAc,IAAI,KAAK,CACzB,QAAO,cAAc,IAAI,KAAK;CAGhC,IAAIA;AAEJ,SAAQ,MAAR;EACE,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;EACL,KAAK;EACL,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF,KAAK;AACH,oBAAiB,MAAM,OAAO;AAC9B;EACF;AAEE,oBAAiB,MAAM,OAAO;AAC9B;;CAGJ,MAAM,WAAW,eAAe;AAChC,eAAc,IAAI,MAAM,SAAS;AACjC,QAAO;;AAIT,MAAM,YAAY,OAAO,cAA0C;AACjE,KAAI,WAAW,IAAI,UAAU,CAC3B,QAAO,WAAW,IAAI,UAAU;CAGlC,IAAIC;AAEJ,SAAQ,WAAR;EACE,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EACF,KAAK;AACH,iBAAc,MAAM,OAAO;AAC3B;EACF;AACE,iBAAc,MAAM,OAAO;AAC3B;;CAGJ,MAAM,QAAQ,YAAY;AAC1B,YAAW,IAAI,WAAW,MAAM;AAChC,QAAO;;AAIT,MAAM,gBAAgB,OACpB,MACA,MACA,eACoB;CACpB,MAAMC,YAA0B,aAAa,gBAAgB;CAG7D,MAAM,CAAC,EAAE,cAAc,gBAAgB,eAAe,MAAM,QAAQ,IAAI;EACtE,OAAO;EACP,aAAa,KAAK;EAClB,UAAU,UAAU;EACrB,CAAC;AAOF,QAAO,WAAW,MAAM;EAJtB;EACA,OAAO;EAKP,OAAO,CAAC,eAAe;EACxB,CAAQ;;AASX,MAAaC,kBAA2C,EACtD,UACA,MACA,iBACI;CACJ,MAAM,CAAC,MAAM,WAAW,SAAwB,KAAK;AAErD,iBAAgB;EACd,IAAI,cAAc;AAElB,UAAQ,KAAK;AAEb,gBAAc,UAAU,MAAM,WAAW,CACtC,MAAM,WAAW;AAChB,OAAI,CAAC,YAAa,SAAQ,OAAO;IACjC,CACD,YAAY;AACX,OAAI,CAAC,YAAa,SAAQ,GAAG;IAC7B;AAEJ,eAAa;AACX,iBAAc;;IAEf;EAAC;EAAU;EAAM;EAAW,CAAC;AAEhC,QACE,oBAAC;EACC,OAAO;GACL,iBAAiB;GACjB,UAAU;GACV,UAAU;GACV,UAAU;GACX;YAEA,OAEC,oBAAC,SAAI,yBAAyB,EAAE,QAAQ,MAAM,GAAI,GAElD,oBAAC,eAAa,WAAuB;GAEnC"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { useCodeContext } from "./CodeContext.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";

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

	@@ -1 +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,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"}
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,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/CodeContext.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/esm/components/IDE/CodeContext.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeContext.mjs","names":["CodeProvider: FC<PropsWithChildren>"],"sources":["../../../../src/components/IDE/CodeContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n} from 'react';\nimport { usePersistedStore } from '../../hooks';\n\nexport type PackageManager = 'npm' \| 'pnpm' \| 'yarn' \| 'bun';\nexport type CodeFormat = 'typescript' \| 'commonjs' \| 'esm';\nexport type ContentDeclarationFormat =\n \| 'typescript'\n \| 'commonjs'\n \| 'esm'\n \| 'json';\n\ntype CodeContextValue = {\n packageManager: PackageManager;\n setPackageManager: (packageManager: PackageManager) => void;\n codeFormat: CodeFormat;\n setCodeFormat: (codeFormat: CodeFormat) => void;\n contentDeclarationFormat: ContentDeclarationFormat;\n setContentDeclarationFormat: (\n contentDeclarationFormat: ContentDeclarationFormat\n ) => void;\n};\n\n/*\n Context that store the current locale on the client side\n /\nexport const CodeContext = createContext<CodeContextValue>({\n packageManager: 'npm',\n setPackageManager: () => {},\n codeFormat: 'typescript',\n setCodeFormat: () => {},\n contentDeclarationFormat: 'typescript',\n setContentDeclarationFormat: () => {},\n});\n\n/\n Hook that provides the current locale\n /\nexport const useCodeContext = () => useContext(CodeContext);\n\n/\n Provider that store the current locale on the client side\n */\nexport const CodeProvider: FC<PropsWithChildren> = ({ children }) => {\n const [packageManager, setPackageManager] = usePersistedStore<PackageManager>(\n 'packageManager',\n 'npm'\n );\n const [codeFormat, setCodeFormat] = usePersistedStore<CodeFormat>(\n 'codeFormat',\n 'typescript'\n );\n const [contentDeclarationFormat, setContentDeclarationFormat] =\n usePersistedStore<ContentDeclarationFormat>(\n 'contentDeclarationFormat',\n 'typescript'\n );\n\n return (\n <CodeContext\n value={{\n packageManager,\n setPackageManager,\n codeFormat,\n setCodeFormat,\n contentDeclarationFormat,\n setContentDeclarationFormat,\n }}\n >\n {children}\n </CodeContext>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;~~AAgCA,MAAa,cAAc,cAAgC;CACzD,gBAAgB;CAChB,yBAAyB;CACzB,YAAY;CACZ,qBAAqB;CACrB,0BAA0B;CAC1B,mCAAmC;CACpC,CAAC;;;;AAKF,MAAa,uBAAuB,WAAW,YAAY;;;;AAK3D,MAAaA,gBAAuC,EAAE,eAAe;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,kBAC1C,kBACA,MACD;CACD,MAAM,CAAC,YAAY,iBAAiB,kBAClC,cACA,aACD;CACD,MAAM,CAAC,0BAA0B,+BAC/B,kBACE,4BACA,aACD;AAEH,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACD;EAEA;GACW"}
1	+ {"version":3,"file":"CodeContext.mjs","names":["CodeProvider: FC<PropsWithChildren>"],"sources":["../../../../src/components/IDE/CodeContext.tsx"],"sourcesContent":["'use client';\n\nimport {\n createContext,\n type FC,\n type PropsWithChildren,\n useContext,\n} from 'react';\nimport { usePersistedStore } from '../../hooks';\n\nexport type PackageManager = 'npm' \| 'pnpm' \| 'yarn' \| 'bun';\nexport type CodeFormat = 'typescript' \| 'commonjs' \| 'esm';\nexport type ContentDeclarationFormat =\n \| 'typescript'\n \| 'commonjs'\n \| 'esm'\n \| 'json';\n\ntype CodeContextValue = {\n packageManager: PackageManager;\n setPackageManager: (packageManager: PackageManager) => void;\n codeFormat: CodeFormat;\n setCodeFormat: (codeFormat: CodeFormat) => void;\n contentDeclarationFormat: ContentDeclarationFormat;\n setContentDeclarationFormat: (\n contentDeclarationFormat: ContentDeclarationFormat\n ) => void;\n};\n\n/*\n Context that store the current locale on the client side\n /\nexport const CodeContext = createContext<CodeContextValue>({\n packageManager: 'npm',\n setPackageManager: () => {},\n codeFormat: 'typescript',\n setCodeFormat: () => {},\n contentDeclarationFormat: 'typescript',\n setContentDeclarationFormat: () => {},\n});\n\n/\n Hook that provides the current locale\n /\nexport const useCodeContext = () => useContext(CodeContext);\n\n/\n Provider that store the current locale on the client side\n */\nexport const CodeProvider: FC<PropsWithChildren> = ({ children }) => {\n const [packageManager, setPackageManager] = usePersistedStore<PackageManager>(\n 'packageManager',\n 'npm'\n );\n const [codeFormat, setCodeFormat] = usePersistedStore<CodeFormat>(\n 'codeFormat',\n 'typescript'\n );\n const [contentDeclarationFormat, setContentDeclarationFormat] =\n usePersistedStore<ContentDeclarationFormat>(\n 'contentDeclarationFormat',\n 'typescript'\n );\n\n return (\n <CodeContext\n value={{\n packageManager,\n setPackageManager,\n codeFormat,\n setCodeFormat,\n contentDeclarationFormat,\n setContentDeclarationFormat,\n }}\n >\n {children}\n </CodeContext>\n );\n};\n"],"mappings":";;;;;;;;;;AAgCA,MAAa,cAAc,cAAgC;CACzD,gBAAgB;CAChB,yBAAyB;CACzB,YAAY;CACZ,qBAAqB;CACrB,0BAA0B;CAC1B,mCAAmC;CACpC,CAAC;;;;AAKF,MAAa,uBAAuB,WAAW,YAAY;;;;AAK3D,MAAaA,gBAAuC,EAAE,eAAe;CACnE,MAAM,CAAC,gBAAgB,qBAAqB,kBAC1C,kBACA,MACD;CACD,MAAM,CAAC,YAAY,iBAAiB,kBAClC,cACA,aACD;CACD,MAAM,CAAC,0BAA0B,+BAC/B,kBACE,4BACA,aACD;AAEH,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACD;EAEA;GACW"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { Select } from "../Select/Select.mjs";
 import { useCodeContext } from "./CodeContext.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";

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

	@@ -1 +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 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"}
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 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 CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { Select } from "../Select/Select.mjs";
 import { useCodeContext } from "./CodeContext.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";

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

	@@ -1 +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 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"}
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 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/CopyCode.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { CopyButton } from "../CopyButton/index.mjs";
 import { PopoverXAlign } from "../Popover/static.mjs";
 import { Popover } from "../Popover/dynamic.mjs";

package/dist/esm/components/IDE/CopyCode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyCode.mjs","names":["CopyCode: FC<CopyCodeProps>"],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":"~~;;;;;;;;;;~~AAWA,MAAaA,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC;EAAQ,YAAW;aAClB,oBAAC,cAAW,SAAS,OAAQ,EAE7B,qBAAC,QAAQ;GACP,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;cAEtB,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAE,WAAU;cAAgB;KAAgB;IAC9B;GACT"}
1	+ {"version":3,"file":"CopyCode.mjs","names":["CopyCode: FC<CopyCodeProps>"],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAaA,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC;EAAQ,YAAW;aAClB,oBAAC,cAAW,SAAS,OAAQ,EAE7B,qBAAC,QAAQ;GACP,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;cAEtB,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAE,WAAU;cAAgB;KAAgB;IAC9B;GACT"}

package/dist/esm/components/IDE/FileTree.mjs CHANGED Viewed

@@ -1,11 +1,10 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { createFileTree } from "./createFileTree.mjs";
-import { useState } from "react";
 import { ChevronRight } from "lucide-react";
+import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/IDE/FileTree.tsx

package/dist/esm/components/IDE/FileTree.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileTree.mjs","names":["FileItem: FC<FileItemProps>","path","FileTree: FC<FileTreeProps>"],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n filesPaths: string[];\n activeFile?: string;\n onClickFile?: (filePath: string) => void;\n prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n filesPaths: string[];\n subPath?: FilePath[];\n path: string;\n onClickFile?: (title: string) => void;\n activeFile?: string;\n prePaths: string[];\n isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n filesPaths,\n path,\n subPath,\n onClickFile,\n activeFile,\n prePaths,\n isFile,\n}) => {\n const [subPathOpen, setSubPathOpen] = useState(true);\n\n const level = prePaths.length + 1;\n const currentPath = concatFilePath([\n ...prePaths.slice(level - 1, level),\n path,\n ]);\n const totalPath = concatFilePath([...prePaths, path]);\n\n const filteredFilePaths = filesPaths\n .map(\n (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n )\n .filter((filePath) => filePath.startsWith(currentPath));\n\n const newPath = filteredFilePaths.map((path) =>\n path.replace(currentPath, '').replace(/^\\/?/, '')\n );\n\n const isActive = totalPath === activeFile;\n\n const indentation = new Array(level).fill(' ').join('');\n\n return (\n <>\n <button\n className={cn(\n 'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n isActive\n ? 'bg-neutral-200 dark:bg-neutral-700'\n : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n )}\n key={path}\n onClick={() => {\n if (isFile) {\n onClickFile?.(totalPath);\n } else {\n setSubPathOpen(!subPathOpen);\n }\n }}\n >\n <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n {indentation}\n </span>\n\n {!isFile && (\n <ChevronRight\n className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n size={16}\n />\n )}\n {path}\n </button>\n {subPath && (\n <MaxHeightSmoother\n isHidden={!subPathOpen}\n className=\"overflow-x-hidden\"\n >\n <FileTree\n filesPaths={newPath}\n activeFile={activeFile}\n onClickFile={onClickFile}\n prePaths={[...prePaths, path]}\n />\n </MaxHeightSmoother>\n )}\n </>\n );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n filesPaths,\n activeFile,\n onClickFile,\n prePaths = [],\n}) => {\n const fileTree = createFileTree(filesPaths);\n\n return (\n <div className=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\n {fileTree.map(({ path, subPath, isFile }) => (\n <FileItem\n key={path}\n isFile={isFile}\n subPath={subPath}\n path={path}\n onClickFile={onClickFile}\n activeFile={activeFile}\n prePaths={prePaths}\n filesPaths={filesPaths}\n />\n ))}\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;~~AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,IAAI;AAY3D,MAAMA,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,MAAM,EACnC,KACD,CAAC;CACF,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,KAAK,CAAC;CAQrD,MAAM,UANoB,WACvB,KACE,WAASC,OAAK,QAAQ,QAAQ,GAAG,CACnC,CACA,QAAQ,aAAa,SAAS,WAAW,YAAY,CAAC,CAEvB,KAAK,WACrCA,OAAK,QAAQ,aAAa,GAAG,CAAC,QAAQ,QAAQ,GAAG,CAClD;CAED,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,MAAM,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;AAExD,QACE,8CACE,qBAAC;EACC,WAAW,GACT,iGACA,WACI,uCACA,gEACL;EAED,eAAe;AACb,OAAI,OACF,eAAc,UAAU;OAExB,gBAAe,CAAC,YAAY;;;GAIhC,oBAAC;IAAK,WAAW,GAAG,kBAAkB,UAAU,OAAO;cACpD;KACI;GAEN,CAAC,UACA,oBAAC;IACC,WAAW,GAAG,cAAc,eAAe,sBAAsB;IACjE,MAAM;KACN;GAEH;;IAnBI,KAoBE,EACR,WACC,oBAAC;EACC,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC;GACC,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,KAAK;IAC7B;GACgB,IAErB;;AAIP,MAAaC,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,EAAE,OACT;AAGJ,QACE,oBAAC;EAAI,WAAU;YAHA,eAAe,WAAW,CAI7B,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC;GAES;GACC;GACH;GACO;GACD;GACF;GACE;KAPP,KAQL,CACF;GACE"}
1	+ {"version":3,"file":"FileTree.mjs","names":["FileItem: FC<FileItemProps>","path","FileTree: FC<FileTreeProps>"],"sources":["../../../../src/components/IDE/FileTree.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronRight } from 'lucide-react';\nimport { type FC, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\nimport { createFileTree, type FilePath } from './createFileTree';\n\ntype FileTreeProps = {\n filesPaths: string[];\n activeFile?: string;\n onClickFile?: (filePath: string) => void;\n prePaths?: string[];\n};\n\nconst concatFilePath = (paths: string[]) => paths.join('/');\n\ntype FileItemProps = {\n filesPaths: string[];\n subPath?: FilePath[];\n path: string;\n onClickFile?: (title: string) => void;\n activeFile?: string;\n prePaths: string[];\n isFile: boolean;\n};\n\nconst FileItem: FC<FileItemProps> = ({\n filesPaths,\n path,\n subPath,\n onClickFile,\n activeFile,\n prePaths,\n isFile,\n}) => {\n const [subPathOpen, setSubPathOpen] = useState(true);\n\n const level = prePaths.length + 1;\n const currentPath = concatFilePath([\n ...prePaths.slice(level - 1, level),\n path,\n ]);\n const totalPath = concatFilePath([...prePaths, path]);\n\n const filteredFilePaths = filesPaths\n .map(\n (path) => path.replace(/^\\/?/, '') // This regex matches the first slash, if it exists, at the start of the string)\n )\n .filter((filePath) => filePath.startsWith(currentPath));\n\n const newPath = filteredFilePaths.map((path) =>\n path.replace(currentPath, '').replace(/^\\/?/, '')\n );\n\n const isActive = totalPath === activeFile;\n\n const indentation = new Array(level).fill(' ').join('');\n\n return (\n <>\n <button\n className={cn(\n 'flex w-full items-start justify-start whitespace-pre text-nowrap px-2 py-1 text-xs transition',\n isActive\n ? 'bg-neutral-200 dark:bg-neutral-700'\n : 'cursor-pointer hover:bg-neutral-300 dark:hover:bg-neutral-900'\n )}\n key={path}\n onClick={() => {\n if (isFile) {\n onClickFile?.(totalPath);\n } else {\n setSubPathOpen(!subPathOpen);\n }\n }}\n >\n <span className={cn('whitespace-pre', isFile && 'ml-2')}>\n {indentation}\n </span>\n\n {!isFile && (\n <ChevronRight\n className={cn(`transition`, subPathOpen && `rotate-90 transform`)}\n size={16}\n />\n )}\n {path}\n </button>\n {subPath && (\n <MaxHeightSmoother\n isHidden={!subPathOpen}\n className=\"overflow-x-hidden\"\n >\n <FileTree\n filesPaths={newPath}\n activeFile={activeFile}\n onClickFile={onClickFile}\n prePaths={[...prePaths, path]}\n />\n </MaxHeightSmoother>\n )}\n </>\n );\n};\n\nexport const FileTree: FC<FileTreeProps> = ({\n filesPaths,\n activeFile,\n onClickFile,\n prePaths = [],\n}) => {\n const fileTree = createFileTree(filesPaths);\n\n return (\n <div className=\"flex size-full flex-col items-start justify-start py-1 text-neutral\">\n {fileTree.map(({ path, subPath, isFile }) => (\n <FileItem\n key={path}\n isFile={isFile}\n subPath={subPath}\n path={path}\n onClickFile={onClickFile}\n activeFile={activeFile}\n prePaths={prePaths}\n filesPaths={filesPaths}\n />\n ))}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,UAAoB,MAAM,KAAK,IAAI;AAY3D,MAAMA,YAA+B,EACnC,YACA,MACA,SACA,aACA,YACA,UACA,aACI;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,KAAK;CAEpD,MAAM,QAAQ,SAAS,SAAS;CAChC,MAAM,cAAc,eAAe,CACjC,GAAG,SAAS,MAAM,QAAQ,GAAG,MAAM,EACnC,KACD,CAAC;CACF,MAAM,YAAY,eAAe,CAAC,GAAG,UAAU,KAAK,CAAC;CAQrD,MAAM,UANoB,WACvB,KACE,WAASC,OAAK,QAAQ,QAAQ,GAAG,CACnC,CACA,QAAQ,aAAa,SAAS,WAAW,YAAY,CAAC,CAEvB,KAAK,WACrCA,OAAK,QAAQ,aAAa,GAAG,CAAC,QAAQ,QAAQ,GAAG,CAClD;CAED,MAAM,WAAW,cAAc;CAE/B,MAAM,cAAc,IAAI,MAAM,MAAM,CAAC,KAAK,KAAK,CAAC,KAAK,GAAG;AAExD,QACE,8CACE,qBAAC;EACC,WAAW,GACT,iGACA,WACI,uCACA,gEACL;EAED,eAAe;AACb,OAAI,OACF,eAAc,UAAU;OAExB,gBAAe,CAAC,YAAY;;;GAIhC,oBAAC;IAAK,WAAW,GAAG,kBAAkB,UAAU,OAAO;cACpD;KACI;GAEN,CAAC,UACA,oBAAC;IACC,WAAW,GAAG,cAAc,eAAe,sBAAsB;IACjE,MAAM;KACN;GAEH;;IAnBI,KAoBE,EACR,WACC,oBAAC;EACC,UAAU,CAAC;EACX,WAAU;YAEV,oBAAC;GACC,YAAY;GACA;GACC;GACb,UAAU,CAAC,GAAG,UAAU,KAAK;IAC7B;GACgB,IAErB;;AAIP,MAAaC,YAA+B,EAC1C,YACA,YACA,aACA,WAAW,EAAE,OACT;AAGJ,QACE,oBAAC;EAAI,WAAU;YAHA,eAAe,WAAW,CAI7B,KAAK,EAAE,MAAM,SAAS,aAC9B,oBAAC;GAES;GACC;GACH;GACO;GACD;GACF;GACE;KAPP,KAQL,CACF;GACE"}

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

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { Container } from "../Container/index.mjs";
 import { FileTree } from "./FileTree.mjs";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"IDE.mjs","names":["IDE: FC<IDEProps>","path"],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n pages: {\n path: string;\n content: string;\n isOpen?: boolean;\n }[];\n isDarkMode?: boolean;\n activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n pages: initialPages,\n isDarkMode,\n className,\n activeTab: defaultActiveTab,\n ...props\n}) => {\n const [pages, setPages] = useState(initialPages);\n const tabs = pages.filter(({ isOpen }) => isOpen);\n\n const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n useEffect(() => {\n setActiveTab(defaultActiveTab ?? firstTabIndex);\n }, [initialPages, defaultActiveTab]);\n\n const { content, path } = pages[activeTab];\n const filePaths = initialPages.map(({ path: title }) => title);\n\n const handleClickFile = (title: string) => {\n const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n if (!page) return;\n\n const newPages = pages.map((page) => {\n if (page.path === title) {\n return { ...page, isOpen: true };\n }\n return page;\n });\n\n setPages(newPages);\n\n const newPageIndex = newPages.findIndex(\n ({ path: tabTitle }) => tabTitle === title\n );\n\n setActiveTab(newPageIndex);\n };\n\n return (\n <Container\n className={cn(\n 'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n className\n )}\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 className=\"flex size-full overflow-y-auto\">\n {tabs.map(({ path }, index) => {\n const fullPath = path.split('/');\n const title = fullPath[fullPath.length - 1];\n const isActive = index === activeTab;\n\n return (\n <button\n className={cn(\n 'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n isActive\n ? 'bg-card'\n : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n )}\n key={title}\n onClick={() => setActiveTab(index)}\n >\n {title}\n </button>\n );\n })}\n </div>\n </div>\n <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n <div className=\"absolute top-0 left-0 size-full\">\n <div className=\"flex size-full\">\n <WithResizer initialWidth={150}>\n <FileTree\n filesPaths={filePaths}\n activeFile={path}\n onClickFile={handleClickFile}\n />\n </WithResizer>\n\n <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n <MarkdownRenderer isDarkMode={isDarkMode}>\n {content}\n </MarkdownRenderer>\n </div>\n </div>\n </div>\n </div>\n </Container>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;~~AAmBA,MAAaA,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWC,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}
1	+ {"version":3,"file":"IDE.mjs","names":["IDE: FC<IDEProps>","path"],"sources":["../../../../src/components/IDE/IDE.tsx"],"sourcesContent":["'use client';\n\nimport { type FC, type HTMLAttributes, useEffect, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { WithResizer } from '../WithResizer';\nimport { FileTree } from './FileTree';\nimport { MarkdownRenderer } from './MarkDownRender';\n\nexport type IDEProps = {\n pages: {\n path: string;\n content: string;\n isOpen?: boolean;\n }[];\n isDarkMode?: boolean;\n activeTab?: number;\n} & HTMLAttributes<HTMLDivElement>;\n\nexport const IDE: FC<IDEProps> = ({\n pages: initialPages,\n isDarkMode,\n className,\n activeTab: defaultActiveTab,\n ...props\n}) => {\n const [pages, setPages] = useState(initialPages);\n const tabs = pages.filter(({ isOpen }) => isOpen);\n\n const firstTabIndex = tabs.findIndex(({ isOpen }) => isOpen);\n const [activeTab, setActiveTab] = useState(defaultActiveTab ?? firstTabIndex);\n\n useEffect(() => {\n setActiveTab(defaultActiveTab ?? firstTabIndex);\n }, [initialPages, defaultActiveTab]);\n\n const { content, path } = pages[activeTab];\n const filePaths = initialPages.map(({ path: title }) => title);\n\n const handleClickFile = (title: string) => {\n const page = pages.find(({ path: tabTitle }) => tabTitle === title);\n if (!page) return;\n\n const newPages = pages.map((page) => {\n if (page.path === title) {\n return { ...page, isOpen: true };\n }\n return page;\n });\n\n setPages(newPages);\n\n const newPageIndex = newPages.findIndex(\n ({ path: tabTitle }) => tabTitle === title\n );\n\n setActiveTab(newPageIndex);\n };\n\n return (\n <Container\n className={cn(\n 'flex size-full flex-col justify-start overflow-hidden shadow-lg',\n className\n )}\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 className=\"flex size-full overflow-y-auto\">\n {tabs.map(({ path }, index) => {\n const fullPath = path.split('/');\n const title = fullPath[fullPath.length - 1];\n const isActive = index === activeTab;\n\n return (\n <button\n className={cn(\n 'flex h-8 min-w-20 items-center justify-start px-3 py-1 transition',\n isActive\n ? 'bg-card'\n : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'\n )}\n key={title}\n onClick={() => setActiveTab(index)}\n >\n {title}\n </button>\n );\n })}\n </div>\n </div>\n <div className=\"relative flex size-full flex-1 flex-row justify-start\">\n <div className=\"absolute top-0 left-0 size-full\">\n <div className=\"flex size-full\">\n <WithResizer initialWidth={150}>\n <FileTree\n filesPaths={filePaths}\n activeFile={path}\n onClickFile={handleClickFile}\n />\n </WithResizer>\n\n <div className=\"size-full flex-1 overflow-auto pt-2 text-xs\">\n <MarkdownRenderer isDarkMode={isDarkMode}>\n {content}\n </MarkdownRenderer>\n </div>\n </div>\n </div>\n </div>\n </Container>\n );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAaA,OAAqB,EAChC,OAAO,cACP,YACA,WACA,WAAW,kBACX,GAAG,YACC;CACJ,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;CAChD,MAAM,OAAO,MAAM,QAAQ,EAAE,aAAa,OAAO;CAEjD,MAAM,gBAAgB,KAAK,WAAW,EAAE,aAAa,OAAO;CAC5D,MAAM,CAAC,WAAW,gBAAgB,SAAS,oBAAoB,cAAc;AAE7E,iBAAgB;AACd,eAAa,oBAAoB,cAAc;IAC9C,CAAC,cAAc,iBAAiB,CAAC;CAEpC,MAAM,EAAE,SAAS,SAAS,MAAM;CAChC,MAAM,YAAY,aAAa,KAAK,EAAE,MAAM,YAAY,MAAM;CAE9D,MAAM,mBAAmB,UAAkB;AAEzC,MAAI,CADS,MAAM,MAAM,EAAE,MAAM,eAAe,aAAa,MAAM,CACxD;EAEX,MAAM,WAAW,MAAM,KAAK,SAAS;AACnC,OAAI,KAAK,SAAS,MAChB,QAAO;IAAE,GAAG;IAAM,QAAQ;IAAM;AAElC,UAAO;IACP;AAEF,WAAS,SAAS;AAMlB,eAJqB,SAAS,WAC3B,EAAE,MAAM,eAAe,aAAa,MACtC,CAEyB;;AAG5B,QACE,qBAAC;EACC,WAAW,GACT,mEACA,UACD;EACD,aAAY;EACZ,cAAa;EACb,GAAI;aAEJ,qBAAC;GAAI,WAAU;cACb,qBAAC;IAAI,WAAU;;KACb,oBAAC,SAAI,WAAU,mCAAmC;KAClD,oBAAC,SAAI,WAAU,sCAAsC;KACrD,oBAAC,SAAI,WAAU,qCAAqC;;KAChD,EACN,oBAAC;IAAI,WAAU;cACZ,KAAK,KAAK,EAAE,gBAAQ,UAAU;KAC7B,MAAM,WAAWC,OAAK,MAAM,IAAI;KAChC,MAAM,QAAQ,SAAS,SAAS,SAAS;AAGzC,YACE,oBAAC;MACC,WAAW,GACT,qEALW,UAAU,YAOjB,YACA,yEACL;MAED,eAAe,aAAa,MAAM;gBAEjC;QAHI,MAIE;MAEX;KACE;IACF,EACN,oBAAC;GAAI,WAAU;aACb,oBAAC;IAAI,WAAU;cACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAY,cAAc;gBACzB,oBAAC;OACC,YAAY;OACZ,YAAY;OACZ,aAAa;QACb;OACU,EAEd,oBAAC;MAAI,WAAU;gBACb,oBAAC;OAA6B;iBAC3B;QACgB;OACf;MACF;KACF;IACF;GACI"}

package/dist/esm/components/IDE/MonacoCode.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { Loader } from "../Loader/index.mjs";
 import { CopyButton } from "../CopyButton/index.mjs";