@dimaan/ui 0.0.3 → 0.0.5

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref } from 'react';
+import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { FieldValues, FieldPath, Control } from 'react-hook-form';
 import { ClassValue } from 'clsx';
 
 interface DashboardLayoutContextValue {
@@ -124,6 +125,81 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'typ
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
+interface FieldRHFProps<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>> {
+    /**
+     * RHF `Control` returned from `useForm()`. Optional when `Field` is rendered
+     * inside a `<FormProvider>` — the control is read from context automatically.
+     */
+    control?: Control<TValues>;
+    /** Path to the field within the form values. */
+    name: TName;
+}
+interface FieldLayoutProps {
+    /** Label rendered above the control. */
+    label?: ReactNode;
+    /** Helper text rendered under the control when there's no error. */
+    description?: ReactNode;
+    /** Marks the field as required (visual `*` + native `required`). */
+    required?: boolean;
+    /** Disables the wrapped control. */
+    disabled?: boolean;
+    /** Stretch the wrapper to fill its parent. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper. */
+    className?: string;
+    /** The single control element to wrap. Receives id + aria + (in RHF mode) field props. */
+    children: ReactElement;
+}
+interface FieldManualProps extends FieldLayoutProps {
+    control?: never;
+    name?: never;
+    /** Error message to display. Pass falsy when valid. */
+    error?: ReactNode;
+    /** Override `aria-invalid`. Defaults to `!!error` when omitted. */
+    invalid?: boolean;
+}
+interface FieldRHFOnlyProps<TValues extends FieldValues, TName extends FieldPath<TValues>> extends FieldLayoutProps, FieldRHFProps<TValues, TName> {
+    error?: never;
+    invalid?: never;
+}
+type FieldProps<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>> = FieldManualProps | FieldRHFOnlyProps<TValues, TName>;
+/**
+ * `Field` wraps a single form control with a label, description, and error
+ * message. It works in three modes:
+ *
+ * 1. **FormProvider context mode** (recommended): pass only `name`. The
+ *    `control` is pulled from the surrounding `<FormProvider>`.
+ * 2. **Explicit control mode**: pass both `control` and `name` (useful when you
+ *    don't want a `FormProvider`, or when you have multiple forms on the page).
+ * 3. **Manual mode**: omit `name`. Provide `error` / `invalid` yourself.
+ *
+ * @example FormProvider mode
+ * ```tsx
+ * <FormProvider {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <Field name="email" label="Email" description="…">
+ *       <Input type="email" />
+ *     </Field>
+ *   </form>
+ * </FormProvider>
+ * ```
+ *
+ * @example Explicit control mode
+ * ```tsx
+ * <Field control={form.control} name="email" label="Email">
+ *   <Input type="email" />
+ * </Field>
+ * ```
+ *
+ * @example Manual mode
+ * ```tsx
+ * <Field label="Email" error={errorMessage}>
+ *   <Input value={email} onChange={(e) => setEmail(e.target.value)} />
+ * </Field>
+ * ```
+ */
+declare function Field<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FieldProps<TValues, TName>): ReactElement;
+
 type DashboardHeaderProps = HTMLAttributes<HTMLElement>;
 declare function DashboardHeader({ className, children, ...props }: DashboardHeaderProps): react_jsx_runtime.JSX.Element;
 
@@ -355,9 +431,37 @@ interface TableProps<T> {
 
 declare function Table<T>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
 
+type TextareaVariant = 'default' | 'filled' | 'ghost';
+type TextareaSize = 'sm' | 'md' | 'lg';
+type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+declare const textareaVariantClass: Record<TextareaVariant, string>;
+declare const textareaSizeClass: Record<TextareaSize, string>;
+declare const textareaResizeClass: Record<TextareaResize, string>;
+declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    variant?: TextareaVariant;
+    textareaSize?: TextareaSize;
+    /** Controls the native CSS `resize` behaviour. Defaults to `'vertical'`. */
+    resize?: TextareaResize;
+    /** Optional label rendered above the field. */
+    label?: ReactNode;
+    /** Helper text rendered under the field when not in an error state. */
+    helperText?: ReactNode;
+    /** Error message — renders in destructive style and sets aria-invalid. */
+    error?: ReactNode;
+    /** Stretch the wrapper to fill the parent's inline width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper that frames the textarea. */
+    wrapperClassName?: string;
+    /** Class applied to the field container (`<label>` block). */
+    containerClassName?: string;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
 type Direction = 'ltr' | 'rtl';
 declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, Field, type FieldProps, type FieldRHFProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref } from 'react';
+import { HTMLAttributes, ReactNode, ReactElement, ButtonHTMLAttributes, InputHTMLAttributes, ChangeEvent, FieldsetHTMLAttributes, AnchorHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import { FieldValues, FieldPath, Control } from 'react-hook-form';
 import { ClassValue } from 'clsx';
 
 interface DashboardLayoutContextValue {
@@ -124,6 +125,81 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'typ
 }
 declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
 
+interface FieldRHFProps<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>> {
+    /**
+     * RHF `Control` returned from `useForm()`. Optional when `Field` is rendered
+     * inside a `<FormProvider>` — the control is read from context automatically.
+     */
+    control?: Control<TValues>;
+    /** Path to the field within the form values. */
+    name: TName;
+}
+interface FieldLayoutProps {
+    /** Label rendered above the control. */
+    label?: ReactNode;
+    /** Helper text rendered under the control when there's no error. */
+    description?: ReactNode;
+    /** Marks the field as required (visual `*` + native `required`). */
+    required?: boolean;
+    /** Disables the wrapped control. */
+    disabled?: boolean;
+    /** Stretch the wrapper to fill its parent. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper. */
+    className?: string;
+    /** The single control element to wrap. Receives id + aria + (in RHF mode) field props. */
+    children: ReactElement;
+}
+interface FieldManualProps extends FieldLayoutProps {
+    control?: never;
+    name?: never;
+    /** Error message to display. Pass falsy when valid. */
+    error?: ReactNode;
+    /** Override `aria-invalid`. Defaults to `!!error` when omitted. */
+    invalid?: boolean;
+}
+interface FieldRHFOnlyProps<TValues extends FieldValues, TName extends FieldPath<TValues>> extends FieldLayoutProps, FieldRHFProps<TValues, TName> {
+    error?: never;
+    invalid?: never;
+}
+type FieldProps<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>> = FieldManualProps | FieldRHFOnlyProps<TValues, TName>;
+/**
+ * `Field` wraps a single form control with a label, description, and error
+ * message. It works in three modes:
+ *
+ * 1. **FormProvider context mode** (recommended): pass only `name`. The
+ *    `control` is pulled from the surrounding `<FormProvider>`.
+ * 2. **Explicit control mode**: pass both `control` and `name` (useful when you
+ *    don't want a `FormProvider`, or when you have multiple forms on the page).
+ * 3. **Manual mode**: omit `name`. Provide `error` / `invalid` yourself.
+ *
+ * @example FormProvider mode
+ * ```tsx
+ * <FormProvider {...form}>
+ *   <form onSubmit={form.handleSubmit(onSubmit)}>
+ *     <Field name="email" label="Email" description="…">
+ *       <Input type="email" />
+ *     </Field>
+ *   </form>
+ * </FormProvider>
+ * ```
+ *
+ * @example Explicit control mode
+ * ```tsx
+ * <Field control={form.control} name="email" label="Email">
+ *   <Input type="email" />
+ * </Field>
+ * ```
+ *
+ * @example Manual mode
+ * ```tsx
+ * <Field label="Email" error={errorMessage}>
+ *   <Input value={email} onChange={(e) => setEmail(e.target.value)} />
+ * </Field>
+ * ```
+ */
+declare function Field<TValues extends FieldValues = FieldValues, TName extends FieldPath<TValues> = FieldPath<TValues>>(props: FieldProps<TValues, TName>): ReactElement;
+
 type DashboardHeaderProps = HTMLAttributes<HTMLElement>;
 declare function DashboardHeader({ className, children, ...props }: DashboardHeaderProps): react_jsx_runtime.JSX.Element;
 
@@ -355,9 +431,37 @@ interface TableProps<T> {
 
 declare function Table<T>(props: TableProps<T>): react_jsx_runtime.JSX.Element;
 
+type TextareaVariant = 'default' | 'filled' | 'ghost';
+type TextareaSize = 'sm' | 'md' | 'lg';
+type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+declare const textareaVariantClass: Record<TextareaVariant, string>;
+declare const textareaSizeClass: Record<TextareaSize, string>;
+declare const textareaResizeClass: Record<TextareaResize, string>;
+declare const textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+
+interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    variant?: TextareaVariant;
+    textareaSize?: TextareaSize;
+    /** Controls the native CSS `resize` behaviour. Defaults to `'vertical'`. */
+    resize?: TextareaResize;
+    /** Optional label rendered above the field. */
+    label?: ReactNode;
+    /** Helper text rendered under the field when not in an error state. */
+    helperText?: ReactNode;
+    /** Error message — renders in destructive style and sets aria-invalid. */
+    error?: ReactNode;
+    /** Stretch the wrapper to fill the parent's inline width. Defaults to `true`. */
+    fullWidth?: boolean;
+    /** Class applied to the outer wrapper that frames the textarea. */
+    wrapperClassName?: string;
+    /** Class applied to the field container (`<label>` block). */
+    containerClassName?: string;
+}
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
 type Direction = 'ltr' | 'rtl';
 declare function useDirection(): Direction;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
+export { AppShell, type AppShellBrand, type AppShellNavGroup, type AppShellNavItem, type AppShellProps, Avatar, type AvatarProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, type CheckboxProps, type CheckboxSize, type Column, type ColumnAlign, DashboardContent, type DashboardContentProps, DashboardHeader, type DashboardHeaderProps, DashboardLayout, type DashboardLayoutContextValue, type DashboardLayoutProps, DashboardMain, type DashboardMainProps, type Direction, Field, type FieldProps, type FieldRHFProps, HeaderActions, type HeaderActionsProps, HeaderCollapseTrigger, type HeaderCollapseTriggerProps, HeaderMobileTrigger, type HeaderMobileTriggerProps, HeaderSearch, type HeaderSearchProps, HeaderTitle, type HeaderTitleProps, Input, type InputProps, type InputSize, type InputVariant, type LanguageOption, LanguageSwitcher, type LanguageSwitcherProps, type PaginationState, type RowSelectionState, Sidebar, SidebarFooter, type SidebarFooterProps, SidebarGroup, type SidebarGroupProps, SidebarHeader, type SidebarHeaderProps, SidebarNav, SidebarNavGroup, type SidebarNavGroupProps, SidebarNavItem, type SidebarNavItemProps, type SidebarNavItemRenderProps, type SidebarNavProps, type SidebarProps, type SortDirection, type SortState, type SortableValue, Table, type TableProps, type TableSize, type TableSizeClasses, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type TextareaVariant, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };

package/dist/index.js

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Loader2, Check, Minus, ChevronLeft, Menu, ChevronDown, ChevronsUpDown, ChevronUp, ChevronRight } from 'lucide-react';
+import { useFormContext, Controller } from 'react-hook-form';
 
 // src/components/dashboard-layout/context.ts
 var DashboardLayoutContext = createContext(null);
@@ -742,6 +743,125 @@ var Checkbox = forwardRef(function Checkbox2({
     )
   ] });
 });
+function Field(props) {
+  const formContext = useFormContext();
+  if (props.name !== void 0) {
+    const { control: explicitControl, name, children: children2, ...layout2 } = props;
+    const control = explicitControl ?? formContext?.control;
+    if (!control) {
+      throw new Error(
+        '<Field name="..."> requires either a `control` prop OR being rendered inside <FormProvider>. Wrap your form with <FormProvider {...form}> from react-hook-form, or pass `control={form.control}` explicitly.'
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control,
+        name,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsx(FieldShell, { ...layout2, error: fieldState.error?.message, invalid: fieldState.invalid, children: cloneFieldChild(children2, {
+          name: field.name,
+          value: field.value ?? "",
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          ref: field.ref,
+          disabled: layout2.disabled ?? field.disabled
+        }) })
+      }
+    );
+  }
+  const { children, error, invalid, ...layout } = props;
+  return /* @__PURE__ */ jsx(FieldShell, { ...layout, error, invalid: invalid ?? Boolean(error), children });
+}
+function FieldShell({
+  label,
+  description,
+  error,
+  invalid = false,
+  required = false,
+  disabled = false,
+  fullWidth = true,
+  className,
+  children
+}) {
+  const reactId = useId();
+  if (!isValidElement(children)) {
+    throw new Error("<Field> requires a single React element as its child.");
+  }
+  const childProps = children.props;
+  const id = childProps.id ?? reactId;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const showError = invalid && error !== void 0 && error !== null && error !== false;
+  const showDescription = !showError && description !== void 0 && description !== null;
+  const userDescribedBy = childProps["aria-describedby"];
+  const describedBy = [userDescribedBy, showDescription ? descriptionId : null, showError ? errorId : null].filter(Boolean).join(" ") || void 0;
+  const enhancedChild = cloneFieldChild(children, {
+    id,
+    "aria-invalid": childProps["aria-invalid"] ?? (invalid || void 0),
+    "aria-describedby": describedBy,
+    disabled: childProps.disabled ?? disabled,
+    required: childProps.required ?? required
+  });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-invalid": invalid || void 0,
+      "data-disabled": disabled || void 0,
+      className: cn("flex flex-col gap-1.5", fullWidth && "w-full", className),
+      children: [
+        label !== void 0 && label !== null && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: cn(
+              "text-sm font-medium select-none text-foreground",
+              disabled && "opacity-50",
+              invalid && "text-destructive"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "ms-0.5 text-destructive", children: "*" })
+            ]
+          }
+        ),
+        enhancedChild,
+        showError ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: errorId,
+            role: "alert",
+            "aria-live": "polite",
+            className: "text-xs font-medium text-destructive",
+            children: error
+          }
+        ) : showDescription ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-xs text-muted-foreground", children: description }) : null
+      ]
+    }
+  );
+}
+function cloneFieldChild(child, injected) {
+  const childProps = child.props;
+  const childRef = child.ref;
+  const merged = { ...injected };
+  for (const key of Object.keys(childProps)) {
+    const value = childProps[key];
+    if (value !== void 0) merged[key] = value;
+  }
+  if (injected.ref) {
+    merged.ref = mergeRefs(injected.ref, childRef);
+  } else if (childRef) {
+    merged.ref = childRef;
+  }
+  return cloneElement(child, merged);
+}
+function mergeRefs(...refs) {
+  return (instance) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(instance);
+      else if (ref && typeof ref === "object") ref.current = instance;
+    }
+  };
+}
 
 // src/components/input/inputVariants.ts
 var inputVariantClass = {
@@ -1384,6 +1504,91 @@ function SortIndicator({ active, direction }) {
   return direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className });
 }
 
-export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Table, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, useDashboardLayout, useDirection };
+// src/components/textarea/textareaVariants.ts
+var textareaVariantClass = {
+  default: "border border-input bg-background hover:border-ring",
+  filled: "border border-transparent bg-muted hover:bg-muted/80",
+  ghost: "border border-transparent bg-transparent hover:bg-accent"
+};
+var textareaSizeClass = {
+  sm: "rounded-md px-2.5 py-1.5 text-sm",
+  md: "rounded-md px-3 py-2 text-sm",
+  lg: "rounded-md px-4 py-2.5 text-base"
+};
+var textareaResizeClass = {
+  none: "resize-none",
+  vertical: "resize-y",
+  horizontal: "resize-x",
+  both: "resize"
+};
+var textareaBaseClass = "group/textarea relative flex w-full text-foreground outline-none transition-[background-color,border-color,box-shadow] focus-within:ring-2 focus-within:ring-ring/40 focus-within:ring-offset-1 focus-within:ring-offset-background aria-[invalid=true]:border-destructive aria-[invalid=true]:focus-within:ring-destructive/40 has-[textarea:disabled]:pointer-events-none has-[textarea:disabled]:opacity-50";
+var Textarea = forwardRef(function Textarea2({
+  variant = "default",
+  textareaSize = "md",
+  resize = "vertical",
+  label,
+  helperText,
+  error,
+  fullWidth = true,
+  rows = 4,
+  id,
+  className,
+  wrapperClassName,
+  containerClassName,
+  "aria-invalid": ariaInvalidProp,
+  "aria-describedby": ariaDescribedByProp,
+  disabled,
+  ...props
+}, ref) {
+  const generatedId = useId();
+  const textareaId = id ?? generatedId;
+  const helperId = `${textareaId}-helper`;
+  const errorId = `${textareaId}-error`;
+  const hasError = error !== void 0 && error !== null && error !== false;
+  const ariaInvalid = ariaInvalidProp ?? (hasError ? true : void 0);
+  const describedByIds = [
+    ariaDescribedByProp,
+    hasError ? errorId : null,
+    !hasError && helperText ? helperId : null
+  ].filter(Boolean).join(" ");
+  const ariaDescribedBy = describedByIds.length > 0 ? describedByIds : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", fullWidth && "w-full", containerClassName), children: [
+    label !== void 0 && label !== null && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: "text-sm font-medium text-foreground select-none", children: label }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "textarea-wrapper",
+        className: cn(
+          textareaBaseClass,
+          textareaVariantClass[variant],
+          textareaSizeClass[textareaSize],
+          wrapperClassName
+        ),
+        "aria-invalid": ariaInvalid,
+        "data-disabled": disabled ? "true" : void 0,
+        children: /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref,
+            id: textareaId,
+            rows,
+            disabled,
+            "aria-invalid": ariaInvalid,
+            "aria-describedby": ariaDescribedBy,
+            className: cn(
+              "w-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed",
+              textareaResizeClass[resize],
+              className
+            ),
+            ...props
+          }
+        )
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-xs text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsx("p", { id: helperId, className: "text-xs text-muted-foreground", children: helperText }) : null
+  ] });
+});
+
+export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, Field, HeaderActions, HeaderCollapseTrigger, HeaderMobileTrigger, HeaderSearch, HeaderTitle, Input, LanguageSwitcher, Sidebar, SidebarFooter, SidebarGroup, SidebarHeader, SidebarNav, SidebarNavGroup, SidebarNavItem, Table, Textarea, buttonBaseClass, buttonSizeClass, buttonVariantClass, cn, inputBaseClass, inputSizeClass, inputVariantClass, alignClass as tableAlignClass, tableBaseClass, selectedRowClass as tableSelectedRowClass, tableSizeClass, sortIconClass as tableSortIconClass, textareaBaseClass, textareaResizeClass, textareaSizeClass, textareaVariantClass, useDashboardLayout, useDirection };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map