@dimaan/ui 0.0.4 → 0.0.6

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, 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;
 
@@ -388,4 +464,4 @@ 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, 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 };
+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, 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;
 
@@ -388,4 +464,4 @@ 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, 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 };
+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 = {
@@ -1469,6 +1589,6 @@ var Textarea = forwardRef(function Textarea2({
   ] });
 });
 
-export { AppShell, Avatar, Button, Checkbox, DashboardContent, DashboardHeader, DashboardLayout, DashboardMain, 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 };
+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