@dimaan/ui 0.0.3 → 0.0.5

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 = {
@@ -1386,6 +1506,91 @@ function SortIndicator({ active, direction }) {
   return direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { "aria-hidden": "true", className }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { "aria-hidden": "true", className });
 }
 
+// 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 = react.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 = react.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__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", fullWidth && "w-full", containerClassName), children: [
+    label !== void 0 && label !== null && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: textareaId, className: "text-sm font-medium text-foreground select-none", children: label }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { id: errorId, className: "text-xs text-destructive", children: error }) : helperText ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: "text-xs text-muted-foreground", children: helperText }) : null
+  ] });
+});
+
 exports.AppShell = AppShell;
 exports.Avatar = Avatar;
 exports.Button = Button;
@@ -1394,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;
@@ -1409,6 +1615,7 @@ exports.SidebarNav = SidebarNav;
 exports.SidebarNavGroup = SidebarNavGroup;
 exports.SidebarNavItem = SidebarNavItem;
 exports.Table = Table;
+exports.Textarea = Textarea;
 exports.buttonBaseClass = buttonBaseClass;
 exports.buttonSizeClass = buttonSizeClass;
 exports.buttonVariantClass = buttonVariantClass;
@@ -1421,6 +1628,10 @@ exports.tableBaseClass = tableBaseClass;
 exports.tableSelectedRowClass = selectedRowClass;
 exports.tableSizeClass = tableSizeClass;
 exports.tableSortIconClass = sortIconClass;
+exports.textareaBaseClass = textareaBaseClass;
+exports.textareaResizeClass = textareaResizeClass;
+exports.textareaSizeClass = textareaSizeClass;
+exports.textareaVariantClass = textareaVariantClass;
 exports.useDashboardLayout = useDashboardLayout;
 exports.useDirection = useDirection;
 //# sourceMappingURL=index.cjs.map