@fernir2/saas-kit 0.0.163 → 0.0.165-438

package/packages/level2/fd-component-toolbox/markdown/Markdown.cjs.js

@@ -8,13 +8,12 @@ var React = require('react');
 var utils = require('../../../fd-toolbox/lib/utils.cjs.js');
 var Markdown_funcs = require('./Markdown.funcs.cjs.js');
 var Icon = require('../icon/Icon.cjs.js');
-var Form = require('../form/Form.cjs.js');
 var LabelAnimation = require('../animation/LabelAnimation.cjs.js');
 var classVarianceAuthority = require('class-variance-authority');
 var markdownParser = require('./markdown-parser.cjs.js');
 var elementSuffixes = require('../../../fd-toolbox/constants/element-suffixes.cjs.js');
 var TextArea_funcs = require('../textarea/TextArea.funcs.cjs.js');
-var _0x3d4da0 = require('lodash.debounce');
+var _0x251a4f = require('lodash.debounce');
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", {
@@ -33,22 +32,21 @@ const markdownVariants = classVarianceAuthority.cva("relative z-0 border-b", {
   }
 });
 function Markdown(t0) {
-  const $ = compilerRuntime.c(27);
+  const $ = compilerRuntime.c(28);
   const {
     id,
     label,
     showContentPreview,
-    value: defaultValue,
-    form,
-    name,
+    value,
     disabled,
     readOnly,
     skipAnimationOnce,
     variant,
     onChange,
-    onBlur
+    onBlur,
+    error,
+    required
   } = t0;
-  const [value, setValue] = React.useState(defaultValue ?? "");
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = [];
@@ -61,7 +59,7 @@ function Markdown(t0) {
   const [isInFocus, setIsInFocus] = React.useState(false);
   let t2;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = _0x3d4da0(async val => {
+    t2 = _0x251a4f(async val => {
       const result = await markdownParser.parseMarkdown(val);
       setPreviewContent(result);
     }, 500);
@@ -89,125 +87,117 @@ function Markdown(t0) {
   React.useEffect(t3, t4);
   let t5;
   let t6;
-  if ($[5] !== defaultValue) {
-    t5 = () => {
-      setValue(defaultValue ?? "");
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => () => {
+      debouncedParseMarkdown.cancel();
     };
-    t6 = [defaultValue];
-    $[5] = defaultValue;
-    $[6] = t5;
-    $[7] = t6;
+    t6 = [debouncedParseMarkdown];
+    $[5] = t5;
+    $[6] = t6;
   } else {
-    t5 = $[6];
-    t6 = $[7];
+    t5 = $[5];
+    t6 = $[6];
   }
   React.useEffect(t5, t6);
   let t7;
-  let t8;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = () => () => {
-      debouncedParseMarkdown.cancel();
-    };
-    t8 = [debouncedParseMarkdown];
-    $[8] = t7;
-    $[9] = t8;
-  } else {
-    t7 = $[8];
-    t8 = $[9];
-  }
-  React.useEffect(t7, t8);
-  let t9;
-  if ($[10] !== disabled || $[11] !== id || $[12] !== isInFocus || $[13] !== isPreview || $[14] !== label || $[15] !== onBlur || $[16] !== onChange || $[17] !== previewContent || $[18] !== readOnly || $[19] !== skipAnimationOnce || $[20] !== value || $[21] !== variant) {
-    t9 = t10 => {
-      const {
-        field,
-        fieldState
-      } = t10;
-      return jsxRuntime.jsxs(Form.FormItem, {
-        children: [jsxRuntime.jsx(Form.FormControl, {
-          children: jsxRuntime.jsxs("div", {
-            children: [isPreview && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-              children: [jsxRuntime.jsxs("p", {
-                className: "mb-2",
-                children: [label, " Preview:"]
-              }), jsxRuntime.jsx("div", {
-                className: "mb-5 w-full overflow-auto",
-                children: jsxRuntime.jsx("div", {
-                  id: Markdown_funcs.getPreviewContentId(id),
-                  children: previewContent
-                })
-              })]
-            }), jsxRuntime.jsxs("div", {
-              className: utils.cn(markdownVariants({
-                variant
-              })),
-              children: [jsxRuntime.jsx("textarea", {
-                id,
-                rows: 5,
-                placeholder: "",
-                ...field,
-                disabled,
-                readOnly,
-                value,
-                onChange: e => Markdown_funcs.onValueChange(e.target.value, setValue, onChange),
-                onFocus: () => setIsInFocus(true),
-                onBlur: e_0 => TextArea_funcs.onTextAreaBlur(e_0, setIsInFocus, onBlur),
-                className: utils.cn("text-muted-foreground peer block w-full appearance-none border-0 bg-transparent px-0 py-2.5 text-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed", disabled || readOnly ? "resize-none" : "")
-              }), jsxRuntime.jsx(LabelAnimation.LabelAnimation, {
-                label,
-                shouldAnimate: !!field.value || isInFocus,
-                skipAnimationOnce,
-                className: utils.cn("top-4 left-0 max-w-full truncate px-0 transition-transform", variant === "bordered" ? (!!field.value || isInFocus) && "!-translate-y-6" : "top-2"),
-                variant: variant ?? "float"
-              }), jsxRuntime.jsx("div", {
-                className: "absolute top-2 right-0",
-                onClick: () => setIsPreview(_temp),
-                children: isPreview ? jsxRuntime.jsx(Icon.Icon, {
-                  id: id + elementSuffixes.markdownSuffixes.previewIcon,
-                  name: Icon.iconNames.visibility
-                }) : jsxRuntime.jsx(Icon.Icon, {
-                  id: id + elementSuffixes.markdownSuffixes.previewIcon,
-                  name: Icon.iconNames.visibilityOff
-                })
-              }), jsxRuntime.jsx("div", {
-                className: utils.cn("w-full pt-2", fieldState.invalid ? "border-destructive focus:border-destructive" : "")
-              })]
-            })]
+  if ($[7] !== disabled || $[8] !== error || $[9] !== id || $[10] !== isInFocus || $[11] !== isPreview || $[12] !== label || $[13] !== onBlur || $[14] !== onChange || $[15] !== previewContent || $[16] !== readOnly || $[17] !== required || $[18] !== skipAnimationOnce || $[19] !== value || $[20] !== variant) {
+    let t8;
+    if ($[22] !== onChange) {
+      t8 = e => {
+        onChange?.(e.target.value);
+      };
+      $[22] = onChange;
+      $[23] = t8;
+    } else {
+      t8 = $[23];
+    }
+    let t9;
+    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+      t9 = () => setIsInFocus(true);
+      $[24] = t9;
+    } else {
+      t9 = $[24];
+    }
+    let t10;
+    if ($[25] !== onBlur) {
+      t10 = e_0 => TextArea_funcs.onTextAreaBlur(e_0, setIsInFocus, onBlur);
+      $[25] = onBlur;
+      $[26] = t10;
+    } else {
+      t10 = $[26];
+    }
+    let t11;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = () => setIsPreview(_temp);
+      $[27] = t11;
+    } else {
+      t11 = $[27];
+    }
+    t7 = jsxRuntime.jsxs("div", {
+      children: [isPreview && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsxs("p", {
+          className: "mb-2",
+          children: [label, " Preview:"]
+        }), jsxRuntime.jsx("div", {
+          className: "mb-5 w-full overflow-auto",
+          children: jsxRuntime.jsx("div", {
+            id: Markdown_funcs.getPreviewContentId(id),
+            children: previewContent
           })
-        }), jsxRuntime.jsx(Form.FormMessage, {})]
-      });
-    };
-    $[10] = disabled;
-    $[11] = id;
-    $[12] = isInFocus;
-    $[13] = isPreview;
-    $[14] = label;
-    $[15] = onBlur;
-    $[16] = onChange;
-    $[17] = previewContent;
-    $[18] = readOnly;
-    $[19] = skipAnimationOnce;
-    $[20] = value;
-    $[21] = variant;
-    $[22] = t9;
-  } else {
-    t9 = $[22];
-  }
-  let t10;
-  if ($[23] !== form.control || $[24] !== name || $[25] !== t9) {
-    t10 = jsxRuntime.jsx(Form.FormField, {
-      control: form.control,
-      name,
-      render: t9
+        })]
+      }), jsxRuntime.jsxs("div", {
+        className: utils.cn(markdownVariants({
+          variant
+        })),
+        children: [jsxRuntime.jsx("textarea", {
+          id,
+          rows: 5,
+          placeholder: "",
+          required,
+          disabled,
+          readOnly,
+          value,
+          onChange: t8,
+          onFocus: t9,
+          onBlur: t10,
+          className: utils.cn("text-muted-foreground peer block w-full appearance-none border-0 bg-transparent px-0 py-2.5 text-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed", disabled || readOnly ? "resize-none" : "")
+        }), jsxRuntime.jsx(LabelAnimation.LabelAnimation, {
+          label,
+          shouldAnimate: !!value || isInFocus,
+          skipAnimationOnce,
+          className: utils.cn("top-4 left-0 max-w-full truncate px-0 transition-transform", variant === "bordered" ? (!!value || isInFocus) && "!-translate-y-6" : "top-2"),
+          variant: variant ?? "float"
+        }), jsxRuntime.jsx("div", {
+          className: "absolute top-2 right-0",
+          onClick: t11,
+          children: jsxRuntime.jsx(Icon.Icon, {
+            id: id + elementSuffixes.markdownSuffixes.previewIcon,
+            name: isPreview ? Icon.iconNames.visibility : Icon.iconNames.visibilityOff
+          })
+        }), jsxRuntime.jsx("div", {
+          className: utils.cn("w-full pt-2", error && "border-destructive focus:border-destructive")
+        })]
+      })]
     });
-    $[23] = form.control;
-    $[24] = name;
-    $[25] = t9;
-    $[26] = t10;
+    $[7] = disabled;
+    $[8] = error;
+    $[9] = id;
+    $[10] = isInFocus;
+    $[11] = isPreview;
+    $[12] = label;
+    $[13] = onBlur;
+    $[14] = onChange;
+    $[15] = previewContent;
+    $[16] = readOnly;
+    $[17] = required;
+    $[18] = skipAnimationOnce;
+    $[19] = value;
+    $[20] = variant;
+    $[21] = t7;
   } else {
-    t10 = $[26];
+    t7 = $[21];
   }
-  return t10;
+  return t7;
 }
 function _temp(prev) {
   return !prev;

package/packages/level2/fd-component-toolbox/markdown/Markdown.d.ts

@@ -1,5 +1,4 @@
-import * as React from "react";
-import { UseFormReturn } from "react-hook-form";
+import React from "react";
 import { VoidFunc } from "../../../fd-toolbox/functions/getter-setter-functions";
 import { VariantProps } from "class-variance-authority";
 /**
@@ -24,10 +23,6 @@ export interface MarkdownProps extends VariantProps<typeof markdownVariants> {
     showContentPreview?: boolean;
     /** Default value of the markdown text.*/
     value?: string;
-    /** React Hook Form controller reference for binding field state.*/
-    form: UseFormReturn;
-    /** Name of the field in the form data.*/
-    name: string;
     /** Disables user input textarea becomes inactive.*/
     disabled?: boolean;
     /** Makes the textarea read-only content.*/
@@ -38,29 +33,31 @@ export interface MarkdownProps extends VariantProps<typeof markdownVariants> {
     onChange?: VoidFunc<string>;
     /** Triggered when focus leaves the textarea.*/
     onBlur?: VoidFunc<string>;
+    /** Indicates validation error state.*/
+    error?: boolean;
 }
 /**
- * Markdown input component with preview functionality and form integration
+ * Markdown input component with preview functionality
  *
  * @param MarkdownProps {@link MarkdownProps}
  *
  * @example
  * ```tsx
-    function MyComponent() {
-        const form = useForm({...});
-
-        return (
-            <Markdown
-                label="Description"
-                name="description"
-                form={form}
-                showContentPreview={true}
-                onChange={...}
-                onBlur={...}
-                variant="float"
-            />
-        );
-    }
+ *     function MyComponent() {
+ *         const [value, setValue] = useState("");
+ *
+ *         return (
+ *             <Markdown
+ *                 id="markdown-editor"
+ *                 label="Description"
+ *                 value={value}
+ *                 onChange={setValue}
+ *                 showContentPreview={true}
+ *                 onBlur={...}
+ *                 variant="float"
+ *             />
+ *         );
+ *     }
  * ```
  */
-export declare function Markdown({ id, label, showContentPreview, value: defaultValue, form, name, disabled, readOnly, skipAnimationOnce, variant, onChange, onBlur, }: MarkdownProps): React.JSX.Element;
+export declare function Markdown({ id, label, showContentPreview, value, disabled, readOnly, skipAnimationOnce, variant, onChange, onBlur, error, required, }: MarkdownProps): React.JSX.Element;

package/packages/level2/fd-component-toolbox/markdown/Markdown.funcs.cjs.js

@@ -3,7 +3,7 @@
 
 var markdownRenderer = require('../../../fd-toolbox/html/markdown-renderer.cjs.js');
 
-var __defProp=Object['defineProperty'],__name=(_0x561908,_0x5d2d8b)=>__defProp(_0x561908,'name',{'value':_0x5d2d8b,'configurable':!![]});function renderPreview(_0x59d6a2,_0x45fc00){const _0x284d2b=markdownRenderer.renderMarkdown(_0x59d6a2)['markdown']['replace'](/<\/?[^>]+(>|$)/g,'');_0x45fc00(_0x284d2b);}__name(renderPreview,'renderPreview');function onValueChange(_0x2c6dfa,_0x2e6e4d,_0x4c4f14){_0x2e6e4d(_0x2c6dfa),_0x4c4f14?.(_0x2c6dfa);}__name(onValueChange,'onValueChange');function getPreviewContentId(_0x158d41){return _0x158d41+'Preview';}__name(getPreviewContentId,'getPreviewContentId');
+var __defProp=Object['defineProperty'],__name=(_0x4654aa,_0x164ddb)=>__defProp(_0x4654aa,'name',{'value':_0x164ddb,'configurable':!![]});function renderPreview(_0x3f27d5,_0xdb7a9){const _0xd9f15b=markdownRenderer.renderMarkdown(_0x3f27d5)['markdown']['replace'](/<\/?[^>]+(>|$)/g,'');_0xdb7a9(_0xd9f15b);}__name(renderPreview,'renderPreview');function onValueChange(_0x98f7bc,_0xec82fa,_0x308757){_0xec82fa(_0x98f7bc),_0x308757?.(_0x98f7bc);}__name(onValueChange,'onValueChange');function getPreviewContentId(_0x2e50b3){return _0x2e50b3+'Preview';}__name(getPreviewContentId,'getPreviewContentId');
 
 exports.getPreviewContentId = getPreviewContentId;
 exports.onValueChange = onValueChange;

package/packages/level2/fd-component-toolbox/markdown/Markdown.funcs.js

@@ -1,6 +1,6 @@
 'use strict';
 import { renderMarkdown } from '../../../fd-toolbox/html/markdown-renderer.js';
 
-var __defProp=Object['defineProperty'],__name=(_0x561908,_0x5d2d8b)=>__defProp(_0x561908,'name',{'value':_0x5d2d8b,'configurable':!![]});function renderPreview(_0x59d6a2,_0x45fc00){const _0x284d2b=renderMarkdown(_0x59d6a2)['markdown']['replace'](/<\/?[^>]+(>|$)/g,'');_0x45fc00(_0x284d2b);}__name(renderPreview,'renderPreview');function onValueChange(_0x2c6dfa,_0x2e6e4d,_0x4c4f14){_0x2e6e4d(_0x2c6dfa),_0x4c4f14?.(_0x2c6dfa);}__name(onValueChange,'onValueChange');function getPreviewContentId(_0x158d41){return _0x158d41+'Preview';}__name(getPreviewContentId,'getPreviewContentId');
+var __defProp=Object['defineProperty'],__name=(_0x4654aa,_0x164ddb)=>__defProp(_0x4654aa,'name',{'value':_0x164ddb,'configurable':!![]});function renderPreview(_0x3f27d5,_0xdb7a9){const _0xd9f15b=renderMarkdown(_0x3f27d5)['markdown']['replace'](/<\/?[^>]+(>|$)/g,'');_0xdb7a9(_0xd9f15b);}__name(renderPreview,'renderPreview');function onValueChange(_0x98f7bc,_0xec82fa,_0x308757){_0xec82fa(_0x98f7bc),_0x308757?.(_0x98f7bc);}__name(onValueChange,'onValueChange');function getPreviewContentId(_0x2e50b3){return _0x2e50b3+'Preview';}__name(getPreviewContentId,'getPreviewContentId');
 
 export { getPreviewContentId, onValueChange, renderPreview };

package/packages/level2/fd-component-toolbox/markdown/Markdown.js

@@ -1,18 +1,17 @@
 'use strict';
 'use client';
 import { c } from 'react/compiler-runtime';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { cn } from '../../../fd-toolbox/lib/utils.js';
-import { getPreviewContentId, onValueChange } from './Markdown.funcs.js';
+import { getPreviewContentId } from './Markdown.funcs.js';
 import { Icon, iconNames } from '../icon/Icon.js';
-import { FormItem, FormControl, FormMessage, FormField } from '../form/Form.js';
 import { LabelAnimation } from '../animation/LabelAnimation.js';
 import { cva } from 'class-variance-authority';
 import { parseMarkdown } from './markdown-parser.js';
 import { markdownSuffixes } from '../../../fd-toolbox/constants/element-suffixes.js';
 import { onTextAreaBlur } from '../textarea/TextArea.funcs.js';
-import _0x3d4da0 from 'lodash.debounce';
+import _0x251a4f from 'lodash.debounce';
 
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", {
@@ -31,22 +30,21 @@ const markdownVariants = cva("relative z-0 border-b", {
   }
 });
 function Markdown(t0) {
-  const $ = c(27);
+  const $ = c(28);
   const {
     id,
     label,
     showContentPreview,
-    value: defaultValue,
-    form,
-    name,
+    value,
     disabled,
     readOnly,
     skipAnimationOnce,
     variant,
     onChange,
-    onBlur
+    onBlur,
+    error,
+    required
   } = t0;
-  const [value, setValue] = useState(defaultValue ?? "");
   let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t1 = [];
@@ -59,7 +57,7 @@ function Markdown(t0) {
   const [isInFocus, setIsInFocus] = useState(false);
   let t2;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = _0x3d4da0(async val => {
+    t2 = _0x251a4f(async val => {
       const result = await parseMarkdown(val);
       setPreviewContent(result);
     }, 500);
@@ -87,125 +85,117 @@ function Markdown(t0) {
   useEffect(t3, t4);
   let t5;
   let t6;
-  if ($[5] !== defaultValue) {
-    t5 = () => {
-      setValue(defaultValue ?? "");
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => () => {
+      debouncedParseMarkdown.cancel();
     };
-    t6 = [defaultValue];
-    $[5] = defaultValue;
-    $[6] = t5;
-    $[7] = t6;
+    t6 = [debouncedParseMarkdown];
+    $[5] = t5;
+    $[6] = t6;
   } else {
-    t5 = $[6];
-    t6 = $[7];
+    t5 = $[5];
+    t6 = $[6];
   }
   useEffect(t5, t6);
   let t7;
-  let t8;
-  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = () => () => {
-      debouncedParseMarkdown.cancel();
-    };
-    t8 = [debouncedParseMarkdown];
-    $[8] = t7;
-    $[9] = t8;
-  } else {
-    t7 = $[8];
-    t8 = $[9];
-  }
-  useEffect(t7, t8);
-  let t9;
-  if ($[10] !== disabled || $[11] !== id || $[12] !== isInFocus || $[13] !== isPreview || $[14] !== label || $[15] !== onBlur || $[16] !== onChange || $[17] !== previewContent || $[18] !== readOnly || $[19] !== skipAnimationOnce || $[20] !== value || $[21] !== variant) {
-    t9 = t10 => {
-      const {
-        field,
-        fieldState
-      } = t10;
-      return jsxs(FormItem, {
-        children: [jsx(FormControl, {
-          children: jsxs("div", {
-            children: [isPreview && jsxs(Fragment, {
-              children: [jsxs("p", {
-                className: "mb-2",
-                children: [label, " Preview:"]
-              }), jsx("div", {
-                className: "mb-5 w-full overflow-auto",
-                children: jsx("div", {
-                  id: getPreviewContentId(id),
-                  children: previewContent
-                })
-              })]
-            }), jsxs("div", {
-              className: cn(markdownVariants({
-                variant
-              })),
-              children: [jsx("textarea", {
-                id,
-                rows: 5,
-                placeholder: "",
-                ...field,
-                disabled,
-                readOnly,
-                value,
-                onChange: e => onValueChange(e.target.value, setValue, onChange),
-                onFocus: () => setIsInFocus(true),
-                onBlur: e_0 => onTextAreaBlur(e_0, setIsInFocus, onBlur),
-                className: cn("text-muted-foreground peer block w-full appearance-none border-0 bg-transparent px-0 py-2.5 text-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed", disabled || readOnly ? "resize-none" : "")
-              }), jsx(LabelAnimation, {
-                label,
-                shouldAnimate: !!field.value || isInFocus,
-                skipAnimationOnce,
-                className: cn("top-4 left-0 max-w-full truncate px-0 transition-transform", variant === "bordered" ? (!!field.value || isInFocus) && "!-translate-y-6" : "top-2"),
-                variant: variant ?? "float"
-              }), jsx("div", {
-                className: "absolute top-2 right-0",
-                onClick: () => setIsPreview(_temp),
-                children: isPreview ? jsx(Icon, {
-                  id: id + markdownSuffixes.previewIcon,
-                  name: iconNames.visibility
-                }) : jsx(Icon, {
-                  id: id + markdownSuffixes.previewIcon,
-                  name: iconNames.visibilityOff
-                })
-              }), jsx("div", {
-                className: cn("w-full pt-2", fieldState.invalid ? "border-destructive focus:border-destructive" : "")
-              })]
-            })]
+  if ($[7] !== disabled || $[8] !== error || $[9] !== id || $[10] !== isInFocus || $[11] !== isPreview || $[12] !== label || $[13] !== onBlur || $[14] !== onChange || $[15] !== previewContent || $[16] !== readOnly || $[17] !== required || $[18] !== skipAnimationOnce || $[19] !== value || $[20] !== variant) {
+    let t8;
+    if ($[22] !== onChange) {
+      t8 = e => {
+        onChange?.(e.target.value);
+      };
+      $[22] = onChange;
+      $[23] = t8;
+    } else {
+      t8 = $[23];
+    }
+    let t9;
+    if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+      t9 = () => setIsInFocus(true);
+      $[24] = t9;
+    } else {
+      t9 = $[24];
+    }
+    let t10;
+    if ($[25] !== onBlur) {
+      t10 = e_0 => onTextAreaBlur(e_0, setIsInFocus, onBlur);
+      $[25] = onBlur;
+      $[26] = t10;
+    } else {
+      t10 = $[26];
+    }
+    let t11;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = () => setIsPreview(_temp);
+      $[27] = t11;
+    } else {
+      t11 = $[27];
+    }
+    t7 = jsxs("div", {
+      children: [isPreview && jsxs(Fragment, {
+        children: [jsxs("p", {
+          className: "mb-2",
+          children: [label, " Preview:"]
+        }), jsx("div", {
+          className: "mb-5 w-full overflow-auto",
+          children: jsx("div", {
+            id: getPreviewContentId(id),
+            children: previewContent
           })
-        }), jsx(FormMessage, {})]
-      });
-    };
-    $[10] = disabled;
-    $[11] = id;
-    $[12] = isInFocus;
-    $[13] = isPreview;
-    $[14] = label;
-    $[15] = onBlur;
-    $[16] = onChange;
-    $[17] = previewContent;
-    $[18] = readOnly;
-    $[19] = skipAnimationOnce;
-    $[20] = value;
-    $[21] = variant;
-    $[22] = t9;
-  } else {
-    t9 = $[22];
-  }
-  let t10;
-  if ($[23] !== form.control || $[24] !== name || $[25] !== t9) {
-    t10 = jsx(FormField, {
-      control: form.control,
-      name,
-      render: t9
+        })]
+      }), jsxs("div", {
+        className: cn(markdownVariants({
+          variant
+        })),
+        children: [jsx("textarea", {
+          id,
+          rows: 5,
+          placeholder: "",
+          required,
+          disabled,
+          readOnly,
+          value,
+          onChange: t8,
+          onFocus: t9,
+          onBlur: t10,
+          className: cn("text-muted-foreground peer block w-full appearance-none border-0 bg-transparent px-0 py-2.5 text-sm focus:ring-0 focus:outline-none disabled:cursor-not-allowed", disabled || readOnly ? "resize-none" : "")
+        }), jsx(LabelAnimation, {
+          label,
+          shouldAnimate: !!value || isInFocus,
+          skipAnimationOnce,
+          className: cn("top-4 left-0 max-w-full truncate px-0 transition-transform", variant === "bordered" ? (!!value || isInFocus) && "!-translate-y-6" : "top-2"),
+          variant: variant ?? "float"
+        }), jsx("div", {
+          className: "absolute top-2 right-0",
+          onClick: t11,
+          children: jsx(Icon, {
+            id: id + markdownSuffixes.previewIcon,
+            name: isPreview ? iconNames.visibility : iconNames.visibilityOff
+          })
+        }), jsx("div", {
+          className: cn("w-full pt-2", error && "border-destructive focus:border-destructive")
+        })]
+      })]
     });
-    $[23] = form.control;
-    $[24] = name;
-    $[25] = t9;
-    $[26] = t10;
+    $[7] = disabled;
+    $[8] = error;
+    $[9] = id;
+    $[10] = isInFocus;
+    $[11] = isPreview;
+    $[12] = label;
+    $[13] = onBlur;
+    $[14] = onChange;
+    $[15] = previewContent;
+    $[16] = readOnly;
+    $[17] = required;
+    $[18] = skipAnimationOnce;
+    $[19] = value;
+    $[20] = variant;
+    $[21] = t7;
   } else {
-    t10 = $[26];
+    t7 = $[21];
   }
-  return t10;
+  return t7;
 }
 function _temp(prev) {
   return !prev;