@deftui/addons 0.2.5 → 0.3.1

package/dist/form.d.mts

@@ -1,5 +1,6 @@
 import { RHFField } from "./react-hook-form/field.mjs";
 import { RHFForm } from "./react-hook-form/form.mjs";
+import { RHFCascader } from "./react-hook-form/widgets/cascader.mjs";
 import { RHFCombobox } from "./react-hook-form/widgets/combobox.mjs";
 import { RHFSelect } from "./react-hook-form/widgets/select.mjs";
 export declare const RHF: {
@@ -11,4 +12,6 @@ export declare const RHF: {
   Select: typeof RHFSelect;
   /** One-liner component for Combobox, used under {@link RHF.Field}. */
   Combobox: typeof RHFCombobox;
+  /** One-liner drill-mode component for Cascader, used under {@link RHF.Field}. */
+  Cascader: typeof RHFCascader;
 };

package/dist/form.mjs

@@ -1,5 +1,6 @@
 import { RHFField } from "./react-hook-form/field.mjs";
 import { RHFForm } from "./react-hook-form/form.mjs";
+import { RHFCascader } from "./react-hook-form/widgets/cascader.mjs";
 import { RHFCombobox } from "./react-hook-form/widgets/combobox.mjs";
 import { RHFSelect } from "./react-hook-form/widgets/select.mjs";
 // src/react-hook-form/index.ts
@@ -11,6 +12,8 @@ const RHF = {
 	/** One-liner component for Select, used under {@link RHF.Field}. */
 	Select: RHFSelect,
 	/** One-liner component for Combobox, used under {@link RHF.Field}. */
-	Combobox: RHFCombobox
+	Combobox: RHFCombobox,
+	/** One-liner drill-mode component for Cascader, used under {@link RHF.Field}. */
+	Cascader: RHFCascader
 };
 export { RHF };

package/dist/modal-registry/registry.d.mts

@@ -6,9 +6,9 @@ import { ModalRegistry, ModalRegistryOptions } from "./types.mjs";
  * @example
  * export const registry = createModalRegistry({ hot: import.meta.hot, key: "modals" });
  *
- * export const EditDialog = registry.define(Dialog, EditDialogContent);
- * function EditDialogContent({ id }: Modal<{ id: string }>) {
- *   return <Dialog.Content>{id}</Dialog.Content>;
+ * export const EditDialog = registry.define(Dialog, EditDialogBody);
+ * function EditDialogBody({ id }: Modal<{ id: string }>) {
+ *   return <Dialog.Popup>{id}</Dialog.Popup>;
  * }
  *
  * const handle = EditDialog.show({ id: "123" });

package/dist/modal-registry/registry.mjs

@@ -10,9 +10,9 @@ const EMPTY = [];
 * @example
 * export const registry = createModalRegistry({ hot: import.meta.hot, key: "modals" });
 *
-* export const EditDialog = registry.define(Dialog, EditDialogContent);
-* function EditDialogContent({ id }: Modal<{ id: string }>) {
-*   return <Dialog.Content>{id}</Dialog.Content>;
+* export const EditDialog = registry.define(Dialog, EditDialogBody);
+* function EditDialogBody({ id }: Modal<{ id: string }>) {
+*   return <Dialog.Popup>{id}</Dialog.Popup>;
 * }
 *
 * const handle = EditDialog.show({ id: "123" });

package/dist/react-hook-form/field.d.mts

@@ -1,10 +1,6 @@
+import { InputControlProps } from "./widgets/types.mjs";
 import React from "react";
 import { FieldPath, FieldValues, UseControllerProps, UseControllerReturn } from "react-hook-form";
-interface ControlProps {
-  "id": string;
-  "aria-invalid": boolean;
-  "aria-describedby": string | undefined;
-}
 interface RHFFieldProps<Values extends FieldValues, Name extends FieldPath<Values> = FieldPath<Values>, Output = Values> extends UseControllerProps<Values, Name, Output> {
   /** Label associated with the control's ID. */
   label?: React.ReactNode;
@@ -25,7 +21,8 @@ interface RHFFieldProps<Values extends FieldValues, Name extends FieldPath<Value
    */
   injectControlProps?: boolean;
   /** Callback with `useController` states and `controllerProps` for rendering JSX. */
-  children: (state: UseControllerReturn<Values, Name>, controlProps: ControlProps) => React.ReactNode;
+  children: (state: UseControllerReturn<Values, Name>, controlProps: InputControlProps) => React.ReactNode;
+  className?: string;
 }
 export declare function RHFField<T extends FieldValues, Name extends FieldPath<T>, Output = T>(props: RHFFieldProps<T, Name, Output>): React.JSX.Element;
 export {};

package/dist/react-hook-form/field.mjs

@@ -4,7 +4,7 @@ import { useController } from "react-hook-form";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/react-hook-form/field.tsx
 function RHFField(props) {
-	const { label, associateLabel = false, description, injectControlProps = true, children, ...controllerProps } = props;
+	const { label, description, associateLabel = false, injectControlProps = true, className, children, ...controllerProps } = props;
 	const id = useId();
 	const controller = useController(controllerProps);
 	const hasError = Boolean(controller.fieldState.error?.message);
@@ -21,6 +21,7 @@ function RHFField(props) {
 	return /* @__PURE__ */ jsxs(Field, {
 		"data-invalid": controller.fieldState.invalid,
 		"data-disabled": controller.field.disabled,
+		className,
 		children: [
 			label != null && /* @__PURE__ */ jsx(Field.Label, {
 				htmlFor: associateLabel ? controlId : void 0,

package/dist/react-hook-form/widgets/cascader.d.mts

@@ -0,0 +1,15 @@
+import { InputControlProps, OnValueChange } from "./types.mjs";
+import { Cascader, CascaderProps, CascaderSingleProps } from "@deftui/react";
+import { ComponentProps } from "react";
+/** `Omit` on the whole union collapses the `multiple` discriminant; omit per branch. */
+type OmitCascader<T, K extends string | number | symbol> = CascaderProps<T> extends (infer P) ? (P extends CascaderSingleProps<T> ? Omit<P, K> : never) : never;
+type Props<T> = InputControlProps & OmitCascader<T, "invalid" | "children" | "onValueChange"> & Pick<ComponentProps<typeof Cascader.Input>, "placeholder"> & {
+  onChange?: OnValueChange;
+  /** Class on the trigger surface, e.g. its width. */
+  className?: ComponentProps<typeof Cascader.Trigger>["className"];
+  /** Class on the panel surface. The panel is wider than the trigger by design. */
+  popupClassName?: ComponentProps<typeof Cascader.Popup>["className"];
+};
+/** One-liner drill-mode Cascader: trigger + searchable panel with breadcrumb, rendered rows and status. */
+export declare function RHFCascader<T>(props: Props<T>): import("react").JSX.Element;
+export {};

package/dist/react-hook-form/widgets/cascader.mjs

@@ -0,0 +1,26 @@
+import { Cascader } from "@deftui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/react-hook-form/widgets/cascader.tsx
+/** One-liner drill-mode Cascader: trigger + searchable panel with breadcrumb, rendered rows and status. */
+function RHFCascader(props) {
+	const { placeholder, className, popupClassName, ...rootProps } = props;
+	return /* @__PURE__ */ jsxs(Cascader, {
+		...rootProps,
+		onValueChange: rootProps.onChange,
+		invalid: Boolean(rootProps["aria-invalid"]),
+		children: [/* @__PURE__ */ jsx(Cascader.Trigger, {
+			className,
+			children: /* @__PURE__ */ jsx(Cascader.Value, { placeholder })
+		}), /* @__PURE__ */ jsx(Cascader.Popup, {
+			className: popupClassName,
+			children: /* @__PURE__ */ jsxs(Cascader.Panel, { children: [
+				/* @__PURE__ */ jsx(Cascader.Nav, { children: /* @__PURE__ */ jsx(Cascader.Input, { placeholder }) }),
+				/* @__PURE__ */ jsx(Cascader.Breadcrumb, {}),
+				/* @__PURE__ */ jsx(Cascader.Empty, {}),
+				/* @__PURE__ */ jsx(Cascader.List, { children: /* @__PURE__ */ jsx(Cascader.VirtualItems, {}) }),
+				/* @__PURE__ */ jsx(Cascader.Status, {})
+			] })
+		})]
+	});
+}
+export { RHFCascader };

package/dist/react-hook-form/widgets/combobox.d.mts

@@ -1,8 +1,7 @@
-import { OnValueChange, Options } from "./types.mjs";
+import { InputControlProps, OnValueChange, Options } from "./types.mjs";
 import { Combobox } from "@deftui/react";
 import { ComponentProps } from "react";
-type Props<V extends string> // oxfmt-ignore
- = Omit<ComponentProps<typeof Combobox>, "items" | "children"> & Pick<ComponentProps<typeof Combobox.Input>, "size" | "placeholder" | "showClear" | "className"> & {
+type Props<V extends string> = InputControlProps & Omit<ComponentProps<typeof Combobox>, "items" | "children" | "onValueChange"> & Pick<ComponentProps<typeof Combobox.Input>, "size" | "placeholder" | "showClear" | "className"> & {
   options: Options<V>;
   emptyLabel?: string;
   onChange?: OnValueChange;

package/dist/react-hook-form/widgets/combobox.mjs

@@ -9,8 +9,10 @@ function RHFCombobox(props) {
 		items: options,
 		children: [/* @__PURE__ */ jsx(Combobox.Input, {
 			size,
-			placeholder,
 			showClear,
+			placeholder,
+			"aria-invalid": rootProps["aria-invalid"],
+			"aria-describedby": rootProps["aria-describedby"],
 			className
 		}), /* @__PURE__ */ jsxs(Combobox.Content, { children: [/* @__PURE__ */ jsx(Combobox.Empty, { children: emptyLabel }), /* @__PURE__ */ jsx(Combobox.List, { children: options.map((option) => /* @__PURE__ */ jsx(Combobox.Item, {
 			value: option.value,

package/dist/react-hook-form/widgets/select.d.mts

@@ -1,8 +1,7 @@
-import { OnValueChange, Options } from "./types.mjs";
+import { InputControlProps, OnValueChange, Options } from "./types.mjs";
 import { Select } from "@deftui/react";
 import { ComponentProps } from "react";
-type Props<V extends string> // oxfmt-ignore
- = Omit<ComponentProps<typeof Select>, "items" | "children"> & Pick<ComponentProps<typeof Select.Trigger>, "size" | "className"> & Pick<ComponentProps<typeof Select.Value>, "placeholder" | "className"> & {
+type Props<V extends string> = InputControlProps & Omit<ComponentProps<typeof Select>, "items" | "children" | "onValueChange"> & Pick<ComponentProps<typeof Select.Trigger>, "size" | "className"> & Pick<ComponentProps<typeof Select.Value>, "placeholder"> & {
   options: Options<V>;
   onChange?: OnValueChange;
 };

package/dist/react-hook-form/widgets/select.mjs

@@ -10,6 +10,8 @@ function RHFSelect(props) {
 		children: [/* @__PURE__ */ jsx(Select.Trigger, {
 			size,
 			className,
+			"aria-invalid": rootProps["aria-invalid"],
+			"aria-describedby": rootProps["aria-describedby"],
 			children: /* @__PURE__ */ jsx(Select.Value, { placeholder })
 		}), /* @__PURE__ */ jsx(Select.Content, { children: options.map((option) => /* @__PURE__ */ jsx(Select.Item, {
 			value: option.value,

package/dist/react-hook-form/widgets/types.d.mts

@@ -1,6 +1,8 @@
+import { ComponentProps } from "react";
 export type Options<V extends string> = readonly {
   label: string;
   value: V;
   disabled?: boolean;
 }[];
-export type OnValueChange = ((value: unknown, eventDetails: unknown) => void) | undefined;
+export type OnValueChange = ((value: unknown, eventDetails: unknown) => void) | undefined;
+export type InputControlProps = Pick<ComponentProps<"input">, "id" | "aria-invalid" | "aria-describedby">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deftui/addons",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/KiriRainCat/deftui.git",
@@ -40,7 +40,7 @@
     "fix": "vp check --fix"
   },
   "devDependencies": {
-    "@deftui/react": "^0.2.5",
+    "@deftui/react": "^0.3.1",
     "@tanstack/react-router": "^1.170.46",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
@@ -49,7 +49,7 @@
     "vite-plus": "catalog:"
   },
   "peerDependencies": {
-    "@deftui/react": "^0.2.5",
+    "@deftui/react": "^0.3.1",
     "@tanstack/react-router": "^1.170.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",