@e-burgos/tucu-ui 2.5.0 → 2.7.0

package/components/dialog/sidebar-menu.mjs

@@ -0,0 +1,197 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import i from "classnames";
+import { Logo as u } from "../logos/logo.mjs";
+import { MenuItem as v } from "../layouts/menus/menu-item.mjs";
+import { Close as w } from "../icons/close.mjs";
+import { useTheme as A } from "../../themes/hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as p } from "../../themes/config/index.mjs";
+import { Button as y } from "../buttons/button/index.mjs";
+function _({
+  className: m,
+  menuItems: f,
+  children: b,
+  title: d,
+  actionContent: h,
+  onClose: t,
+  logo: s,
+  position: k = "left"
+}) {
+  const { layout: c } = A(), g = c === p.MACOS_TAHOE || c === p.MACOS_TAHOE_DOCK, o = c === p.MACOS || c === p.MACOS_TAHOE || c === p.MACOS_TAHOE_DOCK, n = f && f?.map((e) => ({
+    name: e.name,
+    icon: e.icon,
+    path: e.path,
+    href: e.href,
+    hide: e.hide,
+    isActive: e.isActive,
+    onClick: e.onClick,
+    ...e.dropdownItems && {
+      dropdownItems: e?.dropdownItems?.map((a) => ({
+        name: a.name,
+        ...a?.icon && { icon: a.icon },
+        path: a.path,
+        href: a.href,
+        hide: a.hide,
+        isActive: a.isActive,
+        onClick: a.onClick
+      }))
+    }
+  }));
+  return g ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: i(
+        "pointer-events-none relative flex h-full w-full items-stretch p-3 min-[500px]:p-4",
+        k === "right" ? "justify-end" : "justify-start"
+      ),
+      children: /* @__PURE__ */ l(
+        "aside",
+        {
+          "data-tucu": "macos-tahoe-drawer",
+          className: i(
+            "pointer-events-auto flex h-full w-[272px] max-w-[calc(100vw-24px)] flex-col overflow-hidden rounded-[30px] border border-border bg-(--macos-tahoe-sidebar-bg) backdrop-blur-[30px]",
+            m
+          ),
+          children: [
+            /* @__PURE__ */ l("div", { className: "shrink-0 px-5 pb-3 pt-5 flex items-center justify-between gap-3", children: [
+              s && /* @__PURE__ */ r(u, { ...s, size: "small" }),
+              d && /* @__PURE__ */ r("span", { className: "text-[16px] font-semibold text-(--macos-tahoe-text) dark:text-white/90", children: d }),
+              /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  onClick: t,
+                  "aria-label": "Close",
+                  className: "ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-border bg-black/8 text-(--macos-tahoe-text-muted) transition-colors hover:bg-black/12 hover:text-(--macos-tahoe-text) dark:bg-white/6 dark:hover:bg-white/10",
+                  children: /* @__PURE__ */ r(w, { className: "h-3.5 w-3.5", width: 14, height: 14 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ l("div", { className: "overflow-y-auto h-full px-3 py-2", children: [
+              b,
+              n && n.map((e, a) => /* @__PURE__ */ r(
+                v,
+                {
+                  onClick: t,
+                  name: e.name,
+                  path: e.path,
+                  href: e.href,
+                  icon: e.icon,
+                  hide: e.hide,
+                  isActive: e.isActive,
+                  dropdownItems: e.dropdownItems && e.dropdownItems.map((x) => ({
+                    ...x,
+                    onClick: t
+                  }))
+                },
+                `menu-item-${a}`
+              ))
+            ] }),
+            h && /* @__PURE__ */ r("div", { className: "absolute bottom-4 left-0 z-10 w-full flex gap-2 px-3", children: h })
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ l(
+    "aside",
+    {
+      className: i(
+        "top-0 z-40 h-full w-full max-w-full pointer-events-auto",
+        o ? "min-[500px]:w-80 bg-(--macos-material-toolbar,rgba(255,255,255,0.72)) backdrop-blur-xl border-r border-(--color-semantic-line-primary-subtle)" : "border-dashed border-border bg-light-dark min-[500px]:w-80 2xl:w-96",
+        m
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: i(
+              "relative flex items-center justify-between overflow-hidden",
+              o ? "h-[52px] px-3 py-2 border-b border-[var(--color-border)]" : "h-[96px] px-[24px] py-[16px] 2xl:px-[32px]"
+            ),
+            children: [
+              s && /* @__PURE__ */ r(
+                u,
+                {
+                  ...s,
+                  size: o ? "small" : s?.size
+                }
+              ),
+              d && /* @__PURE__ */ r(
+                "h2",
+                {
+                  className: i(
+                    o ? "text-[13px] font-semibold text-gray-700 dark:text-gray-200" : "text-lg font-medium uppercase tracking-wider text-gray-900 dark:text-white"
+                  ),
+                  children: d
+                }
+              ),
+              /* @__PURE__ */ r(
+                y,
+                {
+                  title: "Close",
+                  shape: "circle",
+                  variant: "ghost",
+                  size: "mini",
+                  onClick: t,
+                  onTouchStart: t,
+                  onTouchEnd: t,
+                  children: /* @__PURE__ */ r(w, { className: "h-[8px] w-[8px]", width: 16, height: 16 })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              "overflow-y-auto",
+              o ? "h-[calc(100%-52px)]" : "h-[calc(100%-96px)]"
+            ),
+            children: /* @__PURE__ */ l(
+              "div",
+              {
+                className: i(
+                  o ? "px-2 py-2" : "px-[16px] 2xl:px-[24px] pb-[80px]"
+                ),
+                children: [
+                  b,
+                  n && n.map((e, a) => /* @__PURE__ */ r(
+                    v,
+                    {
+                      onClick: t,
+                      name: e.name,
+                      path: e.path,
+                      href: e.href,
+                      icon: e.icon,
+                      hide: e.hide,
+                      isActive: e.isActive,
+                      dropdownItems: e.dropdownItems && e.dropdownItems.map((x) => ({
+                        ...x,
+                        onClick: t
+                      }))
+                    },
+                    `menu-item-${a}`
+                  ))
+                ]
+              }
+            )
+          }
+        ),
+        h && /* @__PURE__ */ r(
+          "div",
+          {
+            className: i(
+              "absolute bottom-[16px] left-0 z-10 w-full flex gap-[8px]",
+              o ? "px-3" : "px-[24px]"
+            ),
+            children: h
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  _ as SidebarMenu,
+  _ as default
+};

package/components/dialog/sidebar.mjs

@@ -0,0 +1,151 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import t from "classnames";
+import { Logo as m } from "../logos/logo.mjs";
+import { Close as h } from "../icons/close.mjs";
+import { useTheme as f } from "../../themes/hooks/use-theme.mjs";
+import { LAYOUT_OPTIONS as i } from "../../themes/config/index.mjs";
+import { Button as w } from "../buttons/button/index.mjs";
+function S({
+  className: x,
+  children: p,
+  title: a,
+  actionContent: s,
+  logo: d,
+  onClose: l,
+  position: n = "left"
+}) {
+  const { colorScheme: b, layout: o } = f(), u = o === i.MACOS_TAHOE || o === i.MACOS_TAHOE_DOCK, r = b === "macos" || o === i.MACOS || o === i.MACOS_TAHOE || o === i.MACOS_TAHOE_DOCK;
+  return u ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: t(
+        "pointer-events-none relative flex h-full w-full items-stretch p-3 min-[500px]:p-4",
+        n === "right" ? "justify-end" : "justify-start"
+      ),
+      children: /* @__PURE__ */ c(
+        "aside",
+        {
+          "data-tucu": "macos-tahoe-drawer",
+          className: t(
+            "pointer-events-auto flex h-full w-80 max-w-[calc(100vw-24px)] flex-col overflow-hidden rounded-[30px] border border-border bg-(--macos-tahoe-sidebar-bg) backdrop-blur-[30px]",
+            x
+          ),
+          children: [
+            /* @__PURE__ */ c("div", { className: "shrink-0 px-5 pb-3 pt-5 flex items-center justify-between gap-3", children: [
+              d && /* @__PURE__ */ e(m, { ...d, size: "small" }),
+              a && /* @__PURE__ */ e("span", { className: "text-[16px] font-semibold text-(--macos-tahoe-text) dark:text-white/90", children: a }),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  onClick: l,
+                  "aria-label": "Close",
+                  className: "ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full border border-border bg-black/8 text-(--macos-tahoe-text-muted) transition-colors hover:bg-black/12 hover:text-(--macos-tahoe-text) dark:bg-white/6 dark:hover:bg-white/10",
+                  children: /* @__PURE__ */ e(h, { className: "h-3.5 w-3.5", width: 14, height: 14 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: "overflow-y-auto h-full px-3 py-2", children: p }),
+            s && /* @__PURE__ */ e("div", { className: "absolute bottom-4 left-0 z-10 w-full flex gap-2 px-3", children: s })
+          ]
+        }
+      )
+    }
+  ) : /* @__PURE__ */ c(
+    "aside",
+    {
+      className: t(
+        "top-0 z-40 h-full w-full max-w-full pointer-events-auto",
+        r ? "min-[500px]:w-[300px] bg-light-dark backdrop-blur-xl border-r border-[var(--color-border)]" : "border-dashed border-[var(--color-border)] bg-light-dark min-[500px]:w-[300px] lg:w-96 xl:w-96 2xl:w-96",
+        x
+      ),
+      children: [
+        /* @__PURE__ */ c(
+          "div",
+          {
+            className: t(
+              "relative flex items-center justify-between overflow-hidden",
+              r ? "h-[52px] px-3 py-2 border-b border-[var(--color-border)]" : "h-[96px] px-[24px] py-[16px] 2xl:px-[32px]"
+            ),
+            children: [
+              !a && /* @__PURE__ */ e(
+                m,
+                {
+                  ...d,
+                  size: r ? "small" : d?.size
+                }
+              ),
+              a && (r ? /* @__PURE__ */ e(
+                "div",
+                {
+                  role: "heading",
+                  "aria-level": 2,
+                  className: "text-[16px] leading-5 font-semibold tracking-[0.005em] text-gray-700 dark:text-gray-200",
+                  children: a
+                }
+              ) : /* @__PURE__ */ e("h2", { className: "text-lg font-medium uppercase tracking-wider text-gray-900 dark:text-white", children: a })),
+              r ? /* @__PURE__ */ e(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close",
+                  title: "Close",
+                  onClick: l,
+                  className: t(
+                    "flex h-6 w-6 items-center justify-center rounded-full border transition-colors",
+                    "border-[var(--color-border)] bg-[var(--macos-control-bg)]",
+                    "text-gray-500 hover:bg-black/4 hover:text-gray-700",
+                    "dark:text-gray-300 dark:hover:bg-white/8 dark:hover:text-white"
+                  ),
+                  children: /* @__PURE__ */ e(h, { className: "h-3 w-3", width: 12, height: 12 })
+                }
+              ) : /* @__PURE__ */ e(
+                w,
+                {
+                  title: "Close",
+                  shape: "circle",
+                  variant: "ghost",
+                  size: "mini",
+                  onClick: l,
+                  onTouchStart: l,
+                  onTouchEnd: l,
+                  children: /* @__PURE__ */ e(h, { className: "h-[16px] w-[16px]", width: 16, height: 16 })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: t(
+              "overflow-y-auto",
+              r ? "h-[calc(100%-52px)]" : "h-[calc(100%-96px)]"
+            ),
+            children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: t(r ? "px-2 py-2" : "px-[24px] pb-[80px] pt-[4px]"),
+                children: p
+              }
+            )
+          }
+        ),
+        s && /* @__PURE__ */ e(
+          "div",
+          {
+            className: t(
+              "absolute bottom-[16px] left-0 z-10 w-full flex gap-[8px]",
+              r ? "px-3" : "px-[24px]"
+            ),
+            children: s
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  S as Sidebar,
+  S as default
+};

package/components/dialog/tab-modal.mjs

@@ -0,0 +1,157 @@
+import { jsx as e, jsxs as t, Fragment as F } from "react/jsx-runtime";
+import { useState as N, useEffect as j } from "react";
+import { createPortal as L } from "react-dom";
+import { X as A, ChevronDown as D } from "lucide-react";
+import d from "classnames";
+import { Button as b } from "../buttons/button/index.mjs";
+function G({
+  icon: g,
+  title: o,
+  subtitle: h,
+  badgeHeader: s,
+  badgeHeaderClassName: C,
+  tabs: a,
+  content: c,
+  footerLabel: m,
+  successButton: i,
+  closeButton: x,
+  closeLabel: E,
+  onClose: n,
+  className: z
+}) {
+  const p = !c && a && a.length > 0, [y, f] = N(0), [k, T] = N(!1);
+  j(() => {
+    const r = (l) => {
+      l.key === "Escape" && n();
+    };
+    return window.addEventListener("keydown", r), () => window.removeEventListener("keydown", r);
+  }, [n]), j(() => {
+    f(0);
+  }, [a?.length]);
+  const v = x?.label ?? E ?? "Close", u = x?.onClick ?? n;
+  return L(
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "fixed inset-0 z-9999 flex items-end sm:items-center justify-center bg-gray-700/10 backdrop-blur-xs p-0 sm:p-4",
+        onClick: (r) => {
+          r.target === r.currentTarget && n();
+        },
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: d(
+              "relative w-full sm:max-w-xl max-h-[92dvh] flex flex-col rounded-t-2xl sm:rounded-2xl border border-border bg-white dark:bg-gray-900 shadow-2xl overflow-hidden",
+              z
+            ),
+            children: [
+              /* @__PURE__ */ t("div", { className: "flex items-center justify-between px-4 py-3 shrink-0 bg-brand/5 dark:bg-brand/10 border-b border-border", children: [
+                /* @__PURE__ */ t("div", { className: "flex items-center gap-2.5", children: [
+                  g && /* @__PURE__ */ e("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-brand/10 dark:bg-brand/20 border border-brand/20 dark:border-brand/30", children: /* @__PURE__ */ e(g, { className: "h-4 w-4 text-brand" }) }),
+                  /* @__PURE__ */ t("div", { children: [
+                    (o || s) && /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+                      o && /* @__PURE__ */ e("span", { className: "text-sm font-bold text-gray-900 dark:text-gray-100", children: o }),
+                      s && /* @__PURE__ */ e(
+                        "span",
+                        {
+                          className: d(
+                            "rounded-full border px-2 py-0.5 text-[10px] font-semibold",
+                            C ?? "text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 border-border"
+                          ),
+                          children: s
+                        }
+                      )
+                    ] }),
+                    h && /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: h })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: n,
+                    className: "rounded-lg p-1.5 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 transition-colors",
+                    children: /* @__PURE__ */ e(A, { className: "h-4 w-4" })
+                  }
+                )
+              ] }),
+              p && /* @__PURE__ */ e("div", { className: "flex shrink-0 border-b border-border bg-gray-100 dark:bg-gray-800/20", children: a?.map(({ icon: r, name: l }, w) => /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => f(w),
+                  className: d(
+                    "flex flex-1 items-center justify-center gap-1.5 py-2.5 text-[11px] font-bold uppercase tracking-wide transition-all",
+                    y === w ? "border-b-2 border-brand text-brand bg-brand/5" : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100"
+                  ),
+                  children: [
+                    r && /* @__PURE__ */ e(r, { className: "h-3 w-3 shrink-0 sm:hidden" }),
+                    /* @__PURE__ */ e("span", { children: l })
+                  ]
+                },
+                l
+              )) }),
+              /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto p-4", children: c || (p ? a?.[y].content : null) }),
+              /* @__PURE__ */ e("div", { className: "shrink-0 border-t border-border px-4 py-3 flex items-center justify-between bg-gray-100 dark:bg-gray-800/10", children: x || i ? (
+                // Normal layout: footerLabel left, buttons right
+                /* @__PURE__ */ t(F, { children: [
+                  /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-500 dark:text-gray-400 font-mono truncate max-w-[50%]", children: m ?? "" }),
+                  /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ e(b, { variant: "ghost", size: "mini", onClick: u, children: v }),
+                    i && /* @__PURE__ */ e(
+                      b,
+                      {
+                        variant: "solid",
+                        size: "mini",
+                        onClick: i.onClick,
+                        children: i.label
+                      }
+                    )
+                  ] })
+                ] })
+              ) : m ? (
+                // No buttons: footerLabel expands full width with collapsible
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => T((r) => !r),
+                    className: "flex w-full items-start gap-2 text-left group",
+                    children: [
+                      /* @__PURE__ */ e(
+                        D,
+                        {
+                          className: d(
+                            "h-3 w-3 shrink-0 mt-0.5 text-gray-400 transition-transform duration-200",
+                            k && "rotate-180"
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          className: d(
+                            "text-[10px] text-gray-500 dark:text-gray-400 font-mono transition-all duration-200",
+                            k ? "whitespace-pre-wrap break-all" : "truncate"
+                          ),
+                          children: m
+                        }
+                      )
+                    ]
+                  }
+                )
+              ) : (
+                // No footerLabel, no buttons: default close button
+                /* @__PURE__ */ e("div", { className: "flex w-full justify-end", children: /* @__PURE__ */ e(b, { variant: "ghost", size: "mini", onClick: u, children: v }) })
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+export {
+  G as TabModal
+};

package/components/forms/example/error-container-example.mjs

@@ -0,0 +1,14 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { useFormContext as s } from "react-hook-form";
+import { CodeBlock as a } from "../../utils/code-block.mjs";
+const l = () => {
+  const { formState: t } = s(), { errors: e } = t;
+  return /* @__PURE__ */ o("div", { className: "mt-[24px] border border-border rounded-lg p-[16px]", children: [
+    /* @__PURE__ */ r("h3", { className: "text-lg font-medium text-gray-900 dark:text-gray-100 mb-[8px]", children: "Error List" }),
+    Object.keys(e).length > 0 ? /* @__PURE__ */ r(a, { code: JSON.stringify(e, null, 2), language: "json" }) : /* @__PURE__ */ r("p", { className: "text-gray-500 dark:text-gray-400", children: "No errors in the form" })
+  ] });
+};
+export {
+  l as ErrorContainerExample,
+  l as default
+};

package/components/forms/example/form-example.mjs

@@ -0,0 +1,99 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Form as t } from "../form.mjs";
+import { FormField as r } from "../form-field.mjs";
+import { defaultValues as m, formValidations as i } from "./validations.mjs";
+import { ErrorContainerExample as n } from "./error-container-example.mjs";
+import { FormMethodsExample as d } from "./form-methods-example.mjs";
+import { CardContainer as s } from "../../cards/card-container.mjs";
+import { Input as a } from "../../inputs/input.mjs";
+import { Textarea as c } from "../../inputs/textarea.mjs";
+import { Select as p } from "../../inputs/select.mjs";
+import { RadioGroup as u } from "../../inputs/radio-group.mjs";
+import { Radio as h } from "../../inputs/radio.mjs";
+import { Checkbox as b } from "../../inputs/checkbox.mjs";
+import { Button as f } from "../../buttons/button/index.mjs";
+const x = [
+  { name: "Argentina", value: "ar" },
+  { name: "Brasil", value: "br" },
+  { name: "Chile", value: "cl" },
+  { name: "Colombia", value: "co" },
+  { name: "México", value: "mx" }
+], g = [
+  { value: "male", label: "Male" },
+  { value: "female", label: "Female" },
+  { value: "other", label: "Other" }
+], v = () => /* @__PURE__ */ l("div", { className: "p-[16px] dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800 rounded-lg", children: [
+  /* @__PURE__ */ e("h3", { className: "text-lg font-medium text-blue-800 dark:text-blue-300 mb-[8px]", children: "Form with Centralized Validation" }),
+  /* @__PURE__ */ e("p", { className: "text-sm text-blue-700 dark:text-blue-400", children: "This example demonstrates a form with validation rules defined centrally in a separate file. The validation rules are passed to the Form component via the validationSchema prop, eliminating the need to define rules on each FormField component." })
+] }), P = () => /* @__PURE__ */ l("div", { className: "w-full space-y-[24px]", children: [
+  /* @__PURE__ */ e(v, {}),
+  /* @__PURE__ */ l(s, { className: "w-full mx-auto p-[24px]  rounded-lg shadow", children: [
+    /* @__PURE__ */ e("h2", { className: "text-lg font-bold mb-[24px] text-center", children: "Form Example" }),
+    /* @__PURE__ */ l(
+      t,
+      {
+        onSubmit: (o) => {
+          console.log("Form values:", o), alert("Form submitted successfully!");
+        },
+        validationSchema: i,
+        useFormProps: {
+          defaultValues: m,
+          mode: "onChange"
+        },
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ l("div", { className: "space-y-[16px]", children: [
+            /* @__PURE__ */ l("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-[16px]", children: [
+              /* @__PURE__ */ e(r, { name: "name", label: "Name", children: /* @__PURE__ */ e(a, { placeholder: "Ingresa tu nombre" }) }),
+              /* @__PURE__ */ e(r, { name: "email", label: "Email", children: /* @__PURE__ */ e(a, { type: "email", placeholder: "ejemplo@correo.com" }) })
+            ] }),
+            /* @__PURE__ */ e(r, { name: "password", label: "Password", children: /* @__PURE__ */ e(
+              a,
+              {
+                type: "password",
+                label: "Password",
+                placeholder: "Enter your password"
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              r,
+              {
+                name: "message",
+                label: "Message",
+                helperText: "Write a detailed message",
+                showHelper: !0,
+                children: /* @__PURE__ */ e(
+                  c,
+                  {
+                    label: "Message",
+                    placeholder: "Write your message here",
+                    rows: 4
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e(r, { name: "country", label: "Country", children: /* @__PURE__ */ e(p, { label: "Country", options: x }) }),
+            /* @__PURE__ */ e(r, { name: "age", label: "Age", children: /* @__PURE__ */ e(a, { type: "number", placeholder: "Enter your age" }) }),
+            /* @__PURE__ */ e(r, { name: "gender", label: "Gender", children: /* @__PURE__ */ e(u, { label: "Gender", options: g }) }),
+            /* @__PURE__ */ e(
+              r,
+              {
+                name: "isDeveloper",
+                label: "Are you a developer?",
+                children: /* @__PURE__ */ e(h, { label: "Are you a developer?", value: "yes" })
+              }
+            ),
+            /* @__PURE__ */ e(r, { name: "acceptTerms", hideError: !0, children: /* @__PURE__ */ e(b, { label: "I accept the terms and conditions (with hideError prop)" }) }),
+            /* @__PURE__ */ e("div", { className: "flex justify-end", children: /* @__PURE__ */ e(f, { type: "submit", children: "Submit" }) })
+          ] }),
+          /* @__PURE__ */ e(n, {}),
+          /* @__PURE__ */ e(d, {})
+        ]
+      }
+    )
+  ] })
+] });
+export {
+  P as FormExample,
+  P as default
+};