@bbki.ng/components 2.5.10 → 2.6.0

package/dist/index.cjs

@@ -53,8 +53,17 @@ __export(lib_exports, {
   DropZone: () => DropZone,
   Error: () => Error2,
   ErrorBoundary: () => ErrorBoundary,
+  Form: () => Form,
+  FormControl: () => FormControl,
+  FormDescription: () => FormDescription,
+  FormField: () => FormField,
+  FormItem: () => FormItem,
+  FormLabel: () => FormLabel,
+  FormMessage: () => FormMessage,
   Gallery: () => Gallery,
   Img: () => Img,
+  Input: () => Input,
+  Label: () => Label2,
   Link: () => Link,
   LinkColor: () => LinkColor,
   LinkList: () => LinkList,
@@ -74,7 +83,11 @@ __export(lib_exports, {
   Tags: () => Tags,
   ThreeColLayout: () => ThreeColLayout,
   TitledList: () => TitledList,
-  ossProcessType: () => ossProcessType
+  ossProcessType: () => ossProcessType,
+  useForm: () => import_react_hook_form.useForm,
+  useFormField: () => useFormField,
+  z: () => import_zod.z,
+  zodResolver: () => import_zod2.zodResolver
 });
 module.exports = __toCommonJS(lib_exports);
 
@@ -110,11 +123,12 @@ function Button(props) {
     ["disabled" /* DISABLED */]: "text-gray-400 cursor-not-allowed",
     ["normal" /* NORMAL */]: "text-black"
   };
-  const { type = "normal" /* NORMAL */, className = "", onClick } = props;
+  const { type = "normal" /* NORMAL */, className = "", onClick, btnType } = props;
   const shadowTransCls = type === "disabled" /* DISABLED */ ? "" : "transition-all duration-200 ease-in-out shadow-button hover:shadow-button-hover active:shadow-empty";
   return /* @__PURE__ */ import_react2.default.createElement("button", {
     className: `${typeClsMap[type]} ${className} ${shadowTransCls} py-8 px-16 transition-all duration-200 ease-in-out`,
-    onClick
+    onClick,
+    type: btnType
   }, props.children);
 }
 Button.displayName = "Button";
@@ -1341,7 +1355,7 @@ var ContextMenuSubTrigger = React22.forwardRef(({ className, inset, children, ..
   ),
   ...props
 }, children, /* @__PURE__ */ React22.createElement(import_react_icons.ChevronRightIcon, {
-  className: "ml-auto h-4 w-4"
+  className: "ml-auto"
 })));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 var ContextMenuSubContent = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React22.createElement(ContextMenuPrimitive.SubContent, {
@@ -1429,12 +1443,147 @@ var ContextMenuShortcut = ({
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
+// lib/form/index.tsx
+var React24 = __toESM(require("react"), 1);
+var import_zod = require("zod");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_zod2 = require("@hookform/resolvers/zod");
+var import_react_hook_form = require("react-hook-form");
+var import_classnames17 = __toESM(require("classnames"), 1);
+
+// lib/label/index.tsx
+var React23 = __toESM(require("react"), 1);
+var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+var import_classnames16 = __toESM(require("classnames"), 1);
+"use client";
+var labelVariants = (0, import_class_variance_authority.cva)(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label2 = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React23.createElement(LabelPrimitive.Root, {
+  ref,
+  className: (0, import_classnames16.default)(labelVariants(), className),
+  ...props
+}));
+Label2.displayName = LabelPrimitive.Root.displayName;
+
+// lib/form/index.tsx
+"use client";
+var Form = import_react_hook_form.FormProvider;
+var FormFieldContext = React24.createContext(
+  {}
+);
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ React24.createElement(FormFieldContext.Provider, {
+    value: { name: props.name }
+  }, /* @__PURE__ */ React24.createElement(import_react_hook_form.Controller, {
+    ...props
+  }));
+};
+var useFormField = () => {
+  const fieldContext = React24.useContext(FormFieldContext);
+  const itemContext = React24.useContext(FormItemContext);
+  const { getFieldState, formState } = (0, import_react_hook_form.useFormContext)();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React24.createContext(
+  {}
+);
+var FormItem = React24.forwardRef(({ className, ...props }, ref) => {
+  const id = React24.useId();
+  return /* @__PURE__ */ React24.createElement(FormItemContext.Provider, {
+    value: { id }
+  }, /* @__PURE__ */ React24.createElement("div", {
+    ref,
+    className: (0, import_classnames17.default)("space-y-2", className),
+    ...props
+  }));
+});
+FormItem.displayName = "FormItem";
+var FormLabel = React24.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ React24.createElement(Label2, {
+    ref,
+    className: (0, import_classnames17.default)(error && "text-destructive", className),
+    htmlFor: formItemId,
+    ...props
+  });
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React24.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ React24.createElement(import_react_slot.Slot, {
+    ref,
+    id: formItemId,
+    "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+    "aria-invalid": !!error,
+    ...props
+  });
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React24.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ React24.createElement("p", {
+    ref,
+    id: formDescriptionId,
+    className: (0, import_classnames17.default)("text-sm text-muted-foreground", className),
+    ...props
+  });
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React24.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error == null ? void 0 : error.message) : children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ React24.createElement("p", {
+    ref,
+    id: formMessageId,
+    className: (0, import_classnames17.default)("text-sm font-medium text-destructive", className),
+    ...props
+  }, body);
+});
+FormMessage.displayName = "FormMessage";
+
+// lib/input/index.tsx
+var React25 = __toESM(require("react"), 1);
+var import_classnames18 = __toESM(require("classnames"), 1);
+var Input = React25.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ React25.createElement("input", {
+      type,
+      className: (0, import_classnames18.default)(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ref,
+      ...props
+    });
+  }
+);
+Input.displayName = "Input";
+
 // lib/blur-cover/BlurCover.tsx
 var import_react23 = __toESM(require("react"), 1);
-var import_classnames16 = __toESM(require("classnames"), 1);
+var import_classnames19 = __toESM(require("classnames"), 1);
 var BlurCover = (props) => {
   const { status } = props;
-  const coverCls = (0, import_classnames16.default)(
+  const coverCls = (0, import_classnames19.default)(
     "fixed",
     "block",
     "text-blur",
@@ -1594,8 +1743,17 @@ var Canvas = (props) => {
   DropZone,
   Error,
   ErrorBoundary,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
   Gallery,
   Img,
+  Input,
+  Label,
   Link,
   LinkColor,
   LinkList,
@@ -1615,6 +1773,10 @@ var Canvas = (props) => {
   Tags,
   ThreeColLayout,
   TitledList,
-  ossProcessType
+  ossProcessType,
+  useForm,
+  useFormField,
+  z,
+  zodResolver
 });
 //# sourceMappingURL=index.cjs.map