@dimaan/ui 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -5,6 +5,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
+var reactHookForm = require('react-hook-form');
 
 // src/components/dashboard-layout/context.ts
 var DashboardLayoutContext = react.createContext(null);
@@ -744,6 +745,125 @@ var Checkbox = react.forwardRef(function Checkbox2({
     )
   ] });
 });
+function Field(props) {
+  const formContext = reactHookForm.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__ */ jsxRuntime.jsx(
+      reactHookForm.Controller,
+      {
+        control,
+        name,
+        render: ({ field, fieldState }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.useId();
+  if (!react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: cn(
+              "text-sm font-medium select-none text-foreground",
+              disabled && "opacity-50",
+              invalid && "text-destructive"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "ms-0.5 text-destructive", children: "*" })
+            ]
+          }
+        ),
+        enhancedChild,
+        showError ? /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            id: errorId,
+            role: "alert",
+            "aria-live": "polite",
+            className: "text-xs font-medium text-destructive",
+            children: error
+          }
+        ) : showDescription ? /* @__PURE__ */ jsxRuntime.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 react.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 = {
@@ -1479,6 +1599,7 @@ exports.DashboardContent = DashboardContent;
 exports.DashboardHeader = DashboardHeader;
 exports.DashboardLayout = DashboardLayout;
 exports.DashboardMain = DashboardMain;
+exports.Field = Field;
 exports.HeaderActions = HeaderActions;
 exports.HeaderCollapseTrigger = HeaderCollapseTrigger;
 exports.HeaderMobileTrigger = HeaderMobileTrigger;