@alexgorbatchev/shadcn 0.0.30 → 0.0.32

package/dist/components/json-render/index.js

@@ -0,0 +1,1254 @@
+import {
+  cn2
+} from "../../chunk-cp2m7y7v.js";
+import {
+  Button2
+} from "../../chunk-q7p28b89.js";
+import {
+  ButtonLink2,
+  Accordion2,
+  AccordionItem2,
+  AccordionTrigger2,
+  AccordionContent2,
+  Select2,
+  SelectValue2,
+  SelectTrigger2,
+  SelectContent2,
+  SelectItem2,
+  Pagination2,
+  PaginationContent2,
+  PaginationItem2,
+  PaginationLink2,
+  PaginationPrevious2,
+  PaginationNext2,
+  PaginationEllipsis2,
+  Drawer2,
+  DrawerContent2,
+  DrawerHeader2,
+  DrawerTitle2,
+  DrawerDescription2
+} from "../../chunk-c6g2rbhv.js";
+import"../../chunk-e6hk39ev.js";
+import"../../chunk-j89xg1ak.js";
+import"../../chunk-aa7m22zj.js";
+import"../../chunk-jpvw9xqy.js";
+import {
+  DropdownMenu2,
+  DropdownMenuTrigger2,
+  DropdownMenuContent2,
+  DropdownMenuItem2
+} from "../../chunk-d4bm5rzy.js";
+import {
+  Popover2,
+  PopoverTrigger2,
+  PopoverContent2
+} from "../../chunk-4djw71cv.js";
+import {
+  Skeleton2
+} from "../../chunk-d70rcwk7.js";
+import {
+  Input2
+} from "../../chunk-59p19t57.js";
+import {
+  Label2
+} from "../../chunk-jcxxjkqx.js";
+import {
+  Separator2
+} from "../../chunk-rajgnfbr.js";
+import {
+  Field2,
+  FieldLabel2
+} from "../../chunk-6jpz5geq.js";
+import {
+  Dialog2,
+  DialogContent2,
+  DialogHeader2,
+  DialogTitle2,
+  DialogDescription2
+} from "../../chunk-ex1zk6ta.js";
+import {
+  Slider2
+} from "../../chunk-644cnngf.js";
+import {
+  Switch2
+} from "../../chunk-8ye0k6z7.js";
+import {
+  Textarea2
+} from "../../chunk-hz9azhzx.js";
+import {
+  TooltipProvider2,
+  Tooltip2,
+  TooltipTrigger2,
+  TooltipContent2
+} from "../../chunk-mz3e810d.js";
+import {
+  RadioGroup2,
+  RadioGroupItem2
+} from "../../chunk-wndqbss9.js";
+import {
+  Card2,
+  CardHeader2,
+  CardTitle2,
+  CardDescription2,
+  CardContent2
+} from "../../chunk-bygq5yqf.js";
+import"../../chunk-57jj9v64.js";
+import {
+  Tabs2,
+  TabsList2,
+  TabsTrigger2
+} from "../../chunk-6grcm62s.js";
+import {
+  Badge2
+} from "../../chunk-wjx6zf94.js";
+import"../../chunk-9de1htr5.js";
+import {
+  Checkbox2
+} from "../../chunk-tnnf8ydf.js";
+import"../../chunk-1j2hz3w9.js";
+import"../../chunk-k99h6evz.js";
+import {
+  Toggle2,
+  ToggleGroup2,
+  ToggleGroupItem2
+} from "../../chunk-aexby8h3.js";
+import {
+  Alert2,
+  AlertTitle2,
+  AlertDescription2
+} from "../../chunk-zdt8xxzy.js";
+import {
+  Avatar2,
+  AvatarImage2,
+  AvatarFallback2
+} from "../../chunk-hyq4nwg2.js";
+import {
+  Progress2
+} from "../../chunk-5j39rehg.js";
+import {
+  Collapsible2,
+  CollapsibleTrigger2,
+  CollapsibleContent2
+} from "../../chunk-24d68cjp.js";
+import {
+  Spinner2
+} from "../../chunk-1xncv9gb.js";
+import {
+  Table2,
+  TableHeader2,
+  TableBody2,
+  TableRow2,
+  TableHead2,
+  TableCell2,
+  TableCaption2
+} from "../../chunk-zte6pw69.js";
+import"../../chunk-r9qrb6b6.js";
+import"../../chunk-vyve5wf3.js";
+import"../../chunk-hh43wg05.js";
+import"../../chunk-8vfh3ez0.js";
+import"../../chunk-83zjj4jd.js";
+import {
+  Carousel2,
+  CarouselContent2,
+  CarouselItem2,
+  CarouselPrevious2,
+  CarouselNext2
+} from "../../chunk-dzvsjw59.js";
+import {
+  componentDefinitions2
+} from "../../chunk-tch86q2w.js";
+
+// src/components/json-render/JsonCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var JsonCard = ({ props, children }) => {
+  const maxWidthClass = props.maxWidth === "sm" ? "max-w-xs sm:min-w-[280px]" : props.maxWidth === "md" ? "max-w-sm sm:min-w-[320px]" : props.maxWidth === "lg" ? "max-w-md sm:min-w-[360px]" : "w-full";
+  const centeredClass = props.centered ? "mx-auto" : "";
+  return /* @__PURE__ */ jsxs(Card2, {
+    className: cn2(maxWidthClass, centeredClass, props.className),
+    children: [
+      (props.title || props.description) && /* @__PURE__ */ jsxs(CardHeader2, {
+        children: [
+          props.title && /* @__PURE__ */ jsx(CardTitle2, {
+            children: props.title
+          }),
+          props.description && /* @__PURE__ */ jsx(CardDescription2, {
+            children: props.description
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx(CardContent2, {
+        className: "flex flex-col gap-3",
+        children
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonStack.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var JsonStack = ({ props, children }) => {
+  const isHorizontal = props.direction === "horizontal";
+  const gapMap = {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  };
+  const alignMap = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  const justifyMap = {
+    start: "",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around"
+  };
+  const gapClass = gapMap[props.gap ?? "md"] ?? "gap-3";
+  const alignClass = alignMap[props.align ?? "start"] ?? "items-start";
+  const justifyClass = justifyMap[props.justify ?? ""] ?? "";
+  return /* @__PURE__ */ jsx2("div", {
+    className: cn2("flex", isHorizontal ? "flex-row flex-wrap" : "flex-col", gapClass, alignClass, justifyClass, props.className),
+    children
+  });
+};
+
+// src/components/json-render/JsonGrid.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var JsonGrid = ({ props, children }) => {
+  const colsMap = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6"
+  };
+  const gridGapMap = {
+    sm: "gap-2",
+    md: "gap-3",
+    lg: "gap-4",
+    xl: "gap-6"
+  };
+  const n = Math.max(1, Math.min(6, props.columns ?? 1));
+  const cols = colsMap[n] ?? "grid-cols-1";
+  const gridGap = gridGapMap[props.gap ?? "md"] ?? "gap-3";
+  return /* @__PURE__ */ jsx3("div", {
+    className: cn2("grid", cols, gridGap, props.className),
+    children
+  });
+};
+
+// src/components/json-render/JsonSeparator.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var JsonSeparator = ({ props }) => {
+  return /* @__PURE__ */ jsx4(Separator2, {
+    orientation: props.orientation ?? "horizontal",
+    className: props.orientation === "vertical" ? "h-full mx-2" : "my-3"
+  });
+};
+
+// src/components/json-render/JsonTabs.tsx
+import { useState } from "react";
+import { useBoundProp } from "@json-render/react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var JsonTabs = ({ props, children, bindings, emit }) => {
+  const tabs = props.tabs ?? [];
+  const [boundValue, setBoundValue] = useBoundProp(props.value ?? undefined, bindings?.value);
+  const [localValue, setLocalValue] = useState(props.value ?? props.defaultValue ?? tabs[0]?.value ?? "");
+  const isBound = !!bindings?.value;
+  const value = isBound ? boundValue ?? tabs[0]?.value ?? "" : localValue;
+  const setValue = isBound ? setBoundValue : setLocalValue;
+  return /* @__PURE__ */ jsxs2(Tabs2, {
+    value,
+    onValueChange: (v) => {
+      setValue(v);
+      emit("change");
+    },
+    children: [
+      /* @__PURE__ */ jsx5(TabsList2, {
+        children: tabs.map((tab) => /* @__PURE__ */ jsx5(TabsTrigger2, {
+          value: tab.value,
+          children: tab.label
+        }, tab.value))
+      }),
+      children
+    ]
+  });
+};
+
+// src/components/json-render/JsonAccordion.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var JsonAccordion = ({ props }) => {
+  const items = props.items ?? [];
+  const isMultiple = props.type === "multiple";
+  const itemElements = items.map((item, i) => /* @__PURE__ */ jsxs3(AccordionItem2, {
+    value: `item-${i}`,
+    children: [
+      /* @__PURE__ */ jsx6(AccordionTrigger2, {
+        children: item.title
+      }),
+      /* @__PURE__ */ jsx6(AccordionContent2, {
+        children: item.content
+      })
+    ]
+  }, i));
+  if (isMultiple) {
+    return /* @__PURE__ */ jsx6(Accordion2, {
+      multiple: true,
+      className: "w-full",
+      children: itemElements
+    });
+  }
+  return /* @__PURE__ */ jsx6(Accordion2, {
+    multiple: false,
+    className: "w-full",
+    children: itemElements
+  });
+};
+
+// src/components/json-render/JsonCollapsible.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var JsonCollapsible = ({ props, children }) => {
+  const [open, setOpen] = useState2(props.defaultOpen ?? false);
+  return /* @__PURE__ */ jsxs4(Collapsible2, {
+    open,
+    onOpenChange: setOpen,
+    className: "w-full",
+    children: [
+      /* @__PURE__ */ jsxs4(CollapsibleTrigger2, {
+        render: /* @__PURE__ */ jsx7(Button2, {
+          variant: "outline",
+          fullWidth: true,
+          align: "start"
+        }),
+        children: [
+          props.title,
+          /* @__PURE__ */ jsx7("svg", {
+            className: `h-4 w-4 transition-transform ${open ? "rotate-180" : ""}`,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            children: /* @__PURE__ */ jsx7("path", {
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              d: "M19 9l-7 7-7-7"
+            })
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx7(CollapsibleContent2, {
+        className: "pt-2",
+        children
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonDialog.tsx
+import { useStateBinding } from "@json-render/react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var JsonDialog = ({ props, children }) => {
+  const [open, setOpen] = useStateBinding(props.openPath ?? "");
+  return /* @__PURE__ */ jsx8(Dialog2, {
+    open: open ?? false,
+    onOpenChange: (v) => setOpen(v),
+    children: /* @__PURE__ */ jsxs5(DialogContent2, {
+      children: [
+        /* @__PURE__ */ jsxs5(DialogHeader2, {
+          children: [
+            /* @__PURE__ */ jsx8(DialogTitle2, {
+              children: props.title
+            }),
+            props.description && /* @__PURE__ */ jsx8(DialogDescription2, {
+              children: props.description
+            })
+          ]
+        }),
+        children
+      ]
+    })
+  });
+};
+
+// src/components/json-render/JsonDrawer.tsx
+import { useStateBinding as useStateBinding2 } from "@json-render/react";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var JsonDrawer = ({ props, children }) => {
+  const [open, setOpen] = useStateBinding2(props.openPath ?? "");
+  return /* @__PURE__ */ jsx9(Drawer2, {
+    open: open ?? false,
+    onOpenChange: (v) => setOpen(v),
+    children: /* @__PURE__ */ jsxs6(DrawerContent2, {
+      children: [
+        /* @__PURE__ */ jsxs6(DrawerHeader2, {
+          children: [
+            /* @__PURE__ */ jsx9(DrawerTitle2, {
+              children: props.title
+            }),
+            props.description && /* @__PURE__ */ jsx9(DrawerDescription2, {
+              children: props.description
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsx9("div", {
+          className: "p-4",
+          children
+        })
+      ]
+    })
+  });
+};
+
+// src/components/json-render/JsonCarousel.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var JsonCarousel = ({ props }) => {
+  const items = props.items ?? [];
+  return /* @__PURE__ */ jsxs7(Carousel2, {
+    className: "w-full",
+    children: [
+      /* @__PURE__ */ jsx10(CarouselContent2, {
+        children: items.map((item, i) => /* @__PURE__ */ jsx10(CarouselItem2, {
+          className: "basis-3/4 md:basis-1/2 lg:basis-1/3",
+          children: /* @__PURE__ */ jsxs7("div", {
+            className: "border border-border rounded-lg p-4 bg-card h-full",
+            children: [
+              item.title && /* @__PURE__ */ jsx10("h4", {
+                className: "font-semibold text-sm mb-1",
+                children: item.title
+              }),
+              item.description && /* @__PURE__ */ jsx10("p", {
+                className: "text-sm text-muted-foreground",
+                children: item.description
+              })
+            ]
+          })
+        }, i))
+      }),
+      /* @__PURE__ */ jsx10(CarouselPrevious2, {}),
+      /* @__PURE__ */ jsx10(CarouselNext2, {})
+    ]
+  });
+};
+
+// src/components/json-render/JsonTable.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var JsonTable = ({ props }) => {
+  const columns = props.columns ?? [];
+  const rows = (props.rows ?? []).map((row) => row.map(String));
+  return /* @__PURE__ */ jsx11("div", {
+    className: "rounded-md border border-border overflow-hidden",
+    children: /* @__PURE__ */ jsxs8(Table2, {
+      children: [
+        props.caption && /* @__PURE__ */ jsx11(TableCaption2, {
+          children: props.caption
+        }),
+        /* @__PURE__ */ jsx11(TableHeader2, {
+          children: /* @__PURE__ */ jsx11(TableRow2, {
+            children: columns.map((col) => /* @__PURE__ */ jsx11(TableHead2, {
+              children: col
+            }, col))
+          })
+        }),
+        /* @__PURE__ */ jsx11(TableBody2, {
+          children: rows.map((row, i) => /* @__PURE__ */ jsx11(TableRow2, {
+            children: row.map((cell, j) => /* @__PURE__ */ jsx11(TableCell2, {
+              children: cell
+            }, j))
+          }, i))
+        })
+      ]
+    })
+  });
+};
+
+// src/components/json-render/JsonHeading.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var JsonHeading = ({ props }) => {
+  const level = props.level ?? "h2";
+  const headingClass = level === "h1" ? "text-2xl font-bold" : level === "h3" ? "text-base font-semibold" : level === "h4" ? "text-sm font-semibold" : "text-lg font-semibold";
+  if (level === "h1")
+    return /* @__PURE__ */ jsx12("h1", {
+      className: `${headingClass} text-left`,
+      children: props.text
+    });
+  if (level === "h3")
+    return /* @__PURE__ */ jsx12("h3", {
+      className: `${headingClass} text-left`,
+      children: props.text
+    });
+  if (level === "h4")
+    return /* @__PURE__ */ jsx12("h4", {
+      className: `${headingClass} text-left`,
+      children: props.text
+    });
+  return /* @__PURE__ */ jsx12("h2", {
+    className: `${headingClass} text-left`,
+    children: props.text
+  });
+};
+
+// src/components/json-render/JsonText.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var JsonText = ({ props }) => {
+  const textClass = props.variant === "caption" ? "text-xs" : props.variant === "muted" ? "text-sm text-muted-foreground" : props.variant === "lead" ? "text-xl text-muted-foreground" : props.variant === "code" ? "font-mono text-sm bg-muted px-1.5 py-0.5 rounded" : "text-sm";
+  if (props.variant === "code") {
+    return /* @__PURE__ */ jsx13("code", {
+      className: `${textClass} text-left`,
+      children: props.text
+    });
+  }
+  return /* @__PURE__ */ jsx13("p", {
+    className: `${textClass} text-left`,
+    children: props.text
+  });
+};
+
+// src/components/json-render/JsonImage.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var JsonImage = ({ props }) => {
+  if (props.src) {
+    return /* @__PURE__ */ jsx14("img", {
+      src: props.src,
+      alt: props.alt ?? "",
+      width: props.width ?? undefined,
+      height: props.height ?? undefined,
+      className: "rounded max-w-full"
+    });
+  }
+  return /* @__PURE__ */ jsx14("div", {
+    className: "bg-muted border border-border rounded flex items-center justify-center text-xs text-muted-foreground",
+    style: { width: props.width ?? 80, height: props.height ?? 60 },
+    children: props.alt || "img"
+  });
+};
+
+// src/components/json-render/JsonAvatar.tsx
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var JsonAvatar = ({ props }) => {
+  const name = props.name || "?";
+  const initials = name.split(" ").map((n) => n[0]).join("").slice(0, 2).toUpperCase();
+  const sizeClass = props.size === "lg" ? "h-12 w-12" : props.size === "sm" ? "h-8 w-8" : "h-10 w-10";
+  return /* @__PURE__ */ jsxs9(Avatar2, {
+    className: sizeClass,
+    children: [
+      props.src && /* @__PURE__ */ jsx15(AvatarImage2, {
+        src: props.src,
+        alt: name
+      }),
+      /* @__PURE__ */ jsx15(AvatarFallback2, {
+        children: initials
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonBadge.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+var JsonBadge = ({ props }) => {
+  return /* @__PURE__ */ jsx16(Badge2, {
+    variant: props.variant ?? "default",
+    children: props.text
+  });
+};
+
+// src/components/json-render/JsonAlert.tsx
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+var JsonAlert = ({ props }) => {
+  return /* @__PURE__ */ jsxs10(Alert2, {
+    variant: props.type === "error" ? "destructive" : props.type ?? "default",
+    children: [
+      /* @__PURE__ */ jsx17(AlertTitle2, {
+        children: props.title
+      }),
+      props.message && /* @__PURE__ */ jsx17(AlertDescription2, {
+        children: props.message
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonProgress.tsx
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var JsonProgress = ({ props }) => {
+  const value = Math.min(100, Math.max(0, props.value || 0));
+  return /* @__PURE__ */ jsxs11("div", {
+    className: "space-y-2",
+    children: [
+      props.label && /* @__PURE__ */ jsx18(Label2, {
+        className: "text-sm text-muted-foreground",
+        children: props.label
+      }),
+      /* @__PURE__ */ jsx18(Progress2, {
+        value
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonSkeleton.tsx
+import { jsx as jsx19 } from "react/jsx-runtime";
+var JsonSkeleton = ({ props }) => {
+  return /* @__PURE__ */ jsx19(Skeleton2, {
+    className: props.rounded ? "rounded-full" : "rounded-md",
+    style: {
+      width: props.width ?? "100%",
+      height: props.height ?? "1.25rem"
+    }
+  });
+};
+
+// src/components/json-render/JsonSpinner.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var JsonSpinner = ({ props }) => {
+  return /* @__PURE__ */ jsx20(Spinner2, {
+    "aria-label": props.label ?? "Loading",
+    className: props.size === "lg" ? "size-8" : props.size === "sm" ? "size-4" : "size-6"
+  });
+};
+
+// src/components/json-render/JsonTooltip.tsx
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+var JsonTooltip = ({ props }) => {
+  return /* @__PURE__ */ jsx21(TooltipProvider2, {
+    children: /* @__PURE__ */ jsxs12(Tooltip2, {
+      children: [
+        /* @__PURE__ */ jsx21(TooltipTrigger2, {
+          render: /* @__PURE__ */ jsx21(Button2, {
+            variant: "link"
+          }),
+          children: props.text
+        }),
+        /* @__PURE__ */ jsx21(TooltipContent2, {
+          children: /* @__PURE__ */ jsx21("p", {
+            children: props.content
+          })
+        })
+      ]
+    })
+  });
+};
+
+// src/components/json-render/JsonPopover.tsx
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+var JsonPopover = ({ props }) => {
+  return /* @__PURE__ */ jsxs13(Popover2, {
+    children: [
+      /* @__PURE__ */ jsx22(PopoverTrigger2, {
+        render: /* @__PURE__ */ jsx22(Button2, {
+          variant: "outline"
+        }),
+        children: props.trigger
+      }),
+      /* @__PURE__ */ jsx22(PopoverContent2, {
+        className: "w-64",
+        children: /* @__PURE__ */ jsx22("p", {
+          className: "text-sm",
+          children: props.content
+        })
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonInput.tsx
+import { useId, useState as useState3 } from "react";
+import { useBoundProp as useBoundProp2 } from "@json-render/react";
+import { useFieldValidation } from "@json-render/react";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+var JsonInput = ({ props, bindings, emit }) => {
+  const id = useId();
+  const [boundValue, setBoundValue] = useBoundProp2(props.value ?? undefined, bindings?.value);
+  const [localValue, setLocalValue] = useState3(props.value ?? "");
+  const isBound = !!bindings?.value;
+  const value = isBound ? boundValue ?? "" : localValue;
+  const setValue = isBound ? setBoundValue : setLocalValue;
+  const validateOn = props.validateOn ?? "blur";
+  const hasValidation = !!(bindings?.value && props.checks?.length);
+  const { errors, validate } = useFieldValidation(bindings?.value ?? "", hasValidation ? { checks: props.checks ?? [], validateOn } : undefined);
+  return /* @__PURE__ */ jsxs14("div", {
+    className: "space-y-2",
+    children: [
+      props.label && /* @__PURE__ */ jsx23(Label2, {
+        htmlFor: id,
+        children: props.label
+      }),
+      /* @__PURE__ */ jsx23(Input2, {
+        id,
+        name: props.name ?? undefined,
+        type: props.type ?? "text",
+        placeholder: props.placeholder ?? "",
+        value,
+        onChange: (e) => {
+          setValue(e.target.value);
+          if (hasValidation && validateOn === "change")
+            validate();
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter")
+            emit("submit");
+        },
+        onFocus: () => emit("focus"),
+        onBlur: () => {
+          if (hasValidation && validateOn === "blur")
+            validate();
+          emit("blur");
+        }
+      }),
+      errors.length > 0 && /* @__PURE__ */ jsx23("p", {
+        className: "text-sm text-destructive",
+        children: errors[0]
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonTextarea.tsx
+import { useId as useId2, useState as useState4 } from "react";
+import { useBoundProp as useBoundProp3 } from "@json-render/react";
+import { useFieldValidation as useFieldValidation2 } from "@json-render/react";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+var JsonTextarea = ({ props, bindings }) => {
+  const id = useId2();
+  const [boundValue, setBoundValue] = useBoundProp3(props.value ?? undefined, bindings?.value);
+  const [localValue, setLocalValue] = useState4(props.value ?? "");
+  const isBound = !!bindings?.value;
+  const value = isBound ? boundValue ?? "" : localValue;
+  const setValue = isBound ? setBoundValue : setLocalValue;
+  const validateOn = props.validateOn ?? "blur";
+  const hasValidation = !!(bindings?.value && props.checks?.length);
+  const { errors, validate } = useFieldValidation2(bindings?.value ?? "", hasValidation ? { checks: props.checks ?? [], validateOn } : undefined);
+  return /* @__PURE__ */ jsxs15("div", {
+    className: "space-y-2",
+    children: [
+      props.label && /* @__PURE__ */ jsx24(Label2, {
+        htmlFor: id,
+        children: props.label
+      }),
+      /* @__PURE__ */ jsx24(Textarea2, {
+        id,
+        name: props.name ?? undefined,
+        placeholder: props.placeholder ?? "",
+        rows: props.rows ?? 3,
+        value,
+        onChange: (e) => {
+          setValue(e.target.value);
+          if (hasValidation && validateOn === "change")
+            validate();
+        },
+        onBlur: () => {
+          if (hasValidation && validateOn === "blur")
+            validate();
+        }
+      }),
+      errors.length > 0 && /* @__PURE__ */ jsx24("p", {
+        className: "text-sm text-destructive",
+        children: errors[0]
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonSelect.tsx
+import { useId as useId3, useState as useState5 } from "react";
+import { useBoundProp as useBoundProp4 } from "@json-render/react";
+import { useFieldValidation as useFieldValidation3 } from "@json-render/react";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+var JsonSelect = ({ props, bindings, emit }) => {
+  const id = useId3();
+  const [boundValue, setBoundValue] = useBoundProp4(props.value ?? undefined, bindings?.value);
+  const [localValue, setLocalValue] = useState5(props.value ?? "");
+  const isBound = !!bindings?.value;
+  const value = isBound ? boundValue ?? "" : localValue;
+  const setValue = isBound ? setBoundValue : setLocalValue;
+  const rawOptions = props.options ?? [];
+  const options = rawOptions.map((opt) => typeof opt === "string" ? opt : String(opt ?? ""));
+  const validateOn = props.validateOn ?? "change";
+  const hasValidation = !!(bindings?.value && props.checks?.length);
+  const { errors, validate } = useFieldValidation3(bindings?.value ?? "", hasValidation ? { checks: props.checks ?? [], validateOn } : undefined);
+  return /* @__PURE__ */ jsxs16("div", {
+    className: "space-y-2",
+    children: [
+      /* @__PURE__ */ jsx25(Label2, {
+        htmlFor: id,
+        children: props.label
+      }),
+      /* @__PURE__ */ jsxs16(Select2, {
+        value,
+        onValueChange: (v) => {
+          setValue(v ?? "");
+          if (hasValidation && validateOn === "change")
+            validate();
+          emit("change");
+        },
+        children: [
+          /* @__PURE__ */ jsx25(SelectTrigger2, {
+            id,
+            className: "w-full",
+            children: /* @__PURE__ */ jsx25(SelectValue2, {
+              placeholder: props.placeholder ?? "Select..."
+            })
+          }),
+          /* @__PURE__ */ jsx25(SelectContent2, {
+            children: options.map((opt, idx) => /* @__PURE__ */ jsx25(SelectItem2, {
+              value: opt || `option-${idx}`,
+              children: opt
+            }, `${idx}-${opt}`))
+          })
+        ]
+      }),
+      errors.length > 0 && /* @__PURE__ */ jsx25("p", {
+        className: "text-sm text-destructive",
+        children: errors[0]
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonCheckbox.tsx
+import { useId as useId4, useState as useState6 } from "react";
+import { useBoundProp as useBoundProp5 } from "@json-render/react";
+import { useFieldValidation as useFieldValidation4 } from "@json-render/react";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+var JsonCheckbox = ({ props, bindings, emit }) => {
+  const id = useId4();
+  const [boundChecked, setBoundChecked] = useBoundProp5(props.checked ?? undefined, bindings?.checked);
+  const [localChecked, setLocalChecked] = useState6(!!props.checked);
+  const isBound = !!bindings?.checked;
+  const checked = isBound ? boundChecked ?? false : localChecked;
+  const setChecked = isBound ? setBoundChecked : setLocalChecked;
+  const validateOn = props.validateOn ?? "change";
+  const hasValidation = !!(bindings?.checked && props.checks?.length);
+  const { errors, validate } = useFieldValidation4(bindings?.checked ?? "", hasValidation ? { checks: props.checks ?? [], validateOn } : undefined);
+  return /* @__PURE__ */ jsxs17("div", {
+    className: "space-y-1",
+    children: [
+      /* @__PURE__ */ jsxs17(Field2, {
+        orientation: "horizontal",
+        children: [
+          /* @__PURE__ */ jsx26(Checkbox2, {
+            id,
+            checked,
+            onCheckedChange: (c) => {
+              setChecked(c === true);
+              if (hasValidation && validateOn === "change")
+                validate();
+              emit("change");
+            }
+          }),
+          /* @__PURE__ */ jsx26(FieldLabel2, {
+            htmlFor: id,
+            children: props.label
+          })
+        ]
+      }),
+      errors.length > 0 && /* @__PURE__ */ jsx26("p", {
+        className: "text-sm text-destructive",
+        children: errors[0]
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonRadio.tsx
+import { useId as useId5, useState as useState7 } from "react";
+import { useBoundProp as useBoundProp6 } from "@json-render/react";
+import { useFieldValidation as useFieldValidation5 } from "@json-render/react";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+var JsonRadio = ({ props, bindings, emit }) => {
+  const id = useId5();
+  const rawOptions = props.options ?? [];
+  const options = rawOptions.map((opt) => typeof opt === "string" ? opt : String(opt ?? ""));
+  const [boundValue, setBoundValue] = useBoundProp6(props.value ?? undefined, bindings?.value);
+  const [localValue, setLocalValue] = useState7(props.value ?? options[0] ?? "");
+  const isBound = !!bindings?.value;
+  const value = isBound ? boundValue ?? "" : localValue;
+  const setValue = isBound ? setBoundValue : setLocalValue;
+  const validateOn = props.validateOn ?? "change";
+  const hasValidation = !!(bindings?.value && props.checks?.length);
+  const { errors, validate } = useFieldValidation5(bindings?.value ?? "", hasValidation ? { checks: props.checks ?? [], validateOn } : undefined);
+  return /* @__PURE__ */ jsxs18("div", {
+    className: "space-y-2",
+    children: [
+      props.label && /* @__PURE__ */ jsx27(Label2, {
+        id,
+        children: props.label
+      }),
+      /* @__PURE__ */ jsx27(RadioGroup2, {
+        "aria-labelledby": props.label ? id : undefined,
+        value,
+        onValueChange: (v) => {
+          setValue(v);
+          if (hasValidation && validateOn === "change")
+            validate();
+          emit("change");
+        },
+        children: options.map((opt, idx) => /* @__PURE__ */ jsxs18(Field2, {
+          orientation: "horizontal",
+          children: [
+            /* @__PURE__ */ jsx27(RadioGroupItem2, {
+              value: opt || `option-${idx}`,
+              id: `${id}-${idx}`
+            }),
+            /* @__PURE__ */ jsx27(FieldLabel2, {
+              htmlFor: `${id}-${idx}`,
+              children: opt
+            })
+          ]
+        }, `${idx}-${opt}`))
+      }),
+      errors.length > 0 && /* @__PURE__ */ jsx27("p", {
+        className: "text-sm text-destructive",
+        children: errors[0]
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonSwitch.tsx
+import { useId as useId6, useState as useState8 } from "react";
+import { useBoundProp as useBoundProp7 } from "@json-render/react";
+import { useFieldValidation as useFieldValidation6 } from "@json-render/react";
+import { jsx as jsx28, jsxs as jsxs19 } from "react/jsx-runtime";
+var JsonSwitch = ({ props, bindings, emit }) => {
+  const id = useId6();
+  const [boundChecked, setBoundChecked] = useBoundProp7(props.checked ?? undefined, bindings?.checked);
+  const [localChecked, setLocalChecked] = useState8(!!props.checked);
+  const isBound = !!bindings?.checked;
+  const checked = isBound ? boundChecked ?? false : localChecked;
+  const setChecked = isBound ? setBoundChecked : setLocalChecked;
+  const validateOn = props.validateOn ?? "change";
+  const hasValidation = !!(bindings?.checked && props.checks?.length);
+  const { errors, validate } = useFieldValidation6(bindings?.checked ?? "", hasValidation ? { checks: props.checks ?? [], validateOn } : undefined);
+  return /* @__PURE__ */ jsxs19("div", {
+    className: "space-y-1",
+    children: [
+      /* @__PURE__ */ jsxs19(Field2, {
+        orientation: "horizontal",
+        children: [
+          /* @__PURE__ */ jsx28(FieldLabel2, {
+            htmlFor: id,
+            children: props.label
+          }),
+          /* @__PURE__ */ jsx28(Switch2, {
+            id,
+            checked,
+            onCheckedChange: (c) => {
+              setChecked(c);
+              if (hasValidation && validateOn === "change")
+                validate();
+              emit("change");
+            }
+          })
+        ]
+      }),
+      errors.length > 0 && /* @__PURE__ */ jsx28("p", {
+        className: "text-sm text-destructive",
+        children: errors[0]
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonSlider.tsx
+import { useId as useId7, useState as useState9 } from "react";
+import { useBoundProp as useBoundProp8 } from "@json-render/react";
+import { jsx as jsx29, jsxs as jsxs20 } from "react/jsx-runtime";
+var JsonSlider = ({ props, bindings, emit }) => {
+  const id = useId7();
+  const [boundValue, setBoundValue] = useBoundProp8(props.value ?? undefined, bindings?.value);
+  const [localValue, setLocalValue] = useState9(props.value ?? props.min ?? 0);
+  const isBound = !!bindings?.value;
+  const value = isBound ? boundValue ?? props.min ?? 0 : localValue;
+  const setValue = isBound ? setBoundValue : setLocalValue;
+  return /* @__PURE__ */ jsxs20("div", {
+    className: "space-y-2",
+    children: [
+      props.label && /* @__PURE__ */ jsxs20("div", {
+        className: "flex justify-between",
+        children: [
+          /* @__PURE__ */ jsx29(Label2, {
+            id,
+            className: "text-sm",
+            children: props.label
+          }),
+          /* @__PURE__ */ jsx29("span", {
+            className: "text-sm text-muted-foreground",
+            children: value
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx29(Slider2, {
+        getAriaLabel: () => props.label ?? "Value",
+        value: [value],
+        min: props.min ?? 0,
+        max: props.max ?? 100,
+        step: props.step ?? 1,
+        onValueChange: (v) => {
+          setValue(v[0] ?? 0);
+          emit("change");
+        }
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonButton.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+var JsonButton = ({ props, emit }) => {
+  const variant = props.variant === "danger" ? "destructive" : props.variant === "secondary" ? "secondary" : "default";
+  return /* @__PURE__ */ jsx30(Button2, {
+    variant,
+    disabled: props.disabled ?? false,
+    onClick: () => emit("press"),
+    children: props.label
+  });
+};
+
+// src/components/json-render/JsonLink.tsx
+import { jsx as jsx31 } from "react/jsx-runtime";
+var JsonLink = ({ props, on }) => {
+  return /* @__PURE__ */ jsx31(ButtonLink2, {
+    variant: "link",
+    size: "inline",
+    href: props.href ?? "#",
+    onClick: (e) => {
+      const press = on("press");
+      if (press.shouldPreventDefault)
+        e.preventDefault();
+      press.emit();
+    },
+    children: props.label
+  });
+};
+
+// src/components/json-render/JsonDropdownMenu.tsx
+import { useBoundProp as useBoundProp9 } from "@json-render/react";
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+var JsonDropdownMenu = ({ props, bindings, emit }) => {
+  const items = props.items ?? [];
+  const [, setBoundValue] = useBoundProp9(props.value ?? undefined, bindings?.value);
+  return /* @__PURE__ */ jsxs21(DropdownMenu2, {
+    children: [
+      /* @__PURE__ */ jsx32(DropdownMenuTrigger2, {
+        render: /* @__PURE__ */ jsx32(Button2, {
+          variant: "outline"
+        }),
+        children: props.label
+      }),
+      /* @__PURE__ */ jsx32(DropdownMenuContent2, {
+        children: items.map((item) => /* @__PURE__ */ jsx32(DropdownMenuItem2, {
+          onClick: () => {
+            setBoundValue(item.value);
+            emit("select");
+          },
+          children: item.label
+        }, item.value))
+      })
+    ]
+  });
+};
+
+// src/components/json-render/JsonToggle.tsx
+import { useState as useState10 } from "react";
+import { useBoundProp as useBoundProp10 } from "@json-render/react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var JsonToggle = ({ props, bindings, emit }) => {
+  const [boundPressed, setBoundPressed] = useBoundProp10(props.pressed ?? undefined, bindings?.pressed);
+  const [localPressed, setLocalPressed] = useState10(props.pressed ?? false);
+  const isBound = !!bindings?.pressed;
+  const pressed = isBound ? boundPressed ?? false : localPressed;
+  const setPressed = isBound ? setBoundPressed : setLocalPressed;
+  return /* @__PURE__ */ jsx33(Toggle2, {
+    variant: props.variant ?? "default",
+    pressed,
+    onPressedChange: (v) => {
+      setPressed(v);
+      emit("change");
+    },
+    children: props.label
+  });
+};
+
+// src/components/json-render/JsonToggleGroup.tsx
+import { useState as useState11 } from "react";
+import { useBoundProp as useBoundProp11 } from "@json-render/react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var JsonToggleGroup = ({ props, bindings, emit }) => {
+  const type = props.type ?? "single";
+  const items = props.items ?? [];
+  const [boundValue, setBoundValue] = useBoundProp11(props.value ?? undefined, bindings?.value);
+  const [localValue, setLocalValue] = useState11(props.value ?? items[0]?.value ?? "");
+  const isBound = !!bindings?.value;
+  const value = isBound ? boundValue ?? "" : localValue;
+  const setValue = isBound ? setBoundValue : setLocalValue;
+  return /* @__PURE__ */ jsx34(ToggleGroup2, {
+    multiple: type === "multiple",
+    value: value ? value.split(",") : [],
+    onValueChange: (values) => {
+      setValue(values.join(","));
+      emit("change");
+    },
+    children: items.map((item) => /* @__PURE__ */ jsx34(ToggleGroupItem2, {
+      value: item.value,
+      children: item.label
+    }, item.value))
+  });
+};
+
+// src/components/json-render/JsonButtonGroup.tsx
+import { useState as useState12 } from "react";
+import { useBoundProp as useBoundProp12 } from "@json-render/react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var JsonButtonGroup = ({ props, bindings, emit }) => {
+  const buttons = props.buttons ?? [];
+  const [boundSelected, setBoundSelected] = useBoundProp12(props.selected ?? undefined, bindings?.selected);
+  const [localValue, setLocalValue] = useState12(props.selected ?? buttons[0]?.value ?? "");
+  const isBound = !!bindings?.selected;
+  const value = isBound ? boundSelected ?? "" : localValue;
+  const setValue = isBound ? setBoundSelected : setLocalValue;
+  return /* @__PURE__ */ jsx35(ToggleGroup2, {
+    variant: "outline",
+    spacing: 0,
+    value: value ? [value] : [],
+    onValueChange: (values) => {
+      setValue(values[0] ?? "");
+      emit("change");
+    },
+    children: buttons.map((button) => /* @__PURE__ */ jsx35(ToggleGroupItem2, {
+      value: button.value,
+      children: button.label
+    }, button.value))
+  });
+};
+
+// src/components/json-render/JsonPagination.tsx
+import { useState as useState13 } from "react";
+import { useBoundProp as useBoundProp13 } from "@json-render/react";
+
+// src/components/json-render/getPaginationRange.ts
+function getPaginationRange(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const pages = [];
+  pages.push(1);
+  if (current > 3) {
+    pages.push("ellipsis");
+  }
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+  for (let i = start;i <= end; i++) {
+    pages.push(i);
+  }
+  if (current < total - 2) {
+    pages.push("ellipsis");
+  }
+  pages.push(total);
+  return pages;
+}
+
+// src/components/json-render/JsonPagination.tsx
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
+var JsonPagination = ({ props, bindings, emit }) => {
+  const [boundPage, setBoundPage] = useBoundProp13(props.page ?? undefined, bindings?.page);
+  const [localPage, setLocalPage] = useState13(props.page ?? 1);
+  const currentPage = bindings?.page ? boundPage ?? 1 : localPage;
+  const setPage = bindings?.page ? setBoundPage : setLocalPage;
+  const totalPages = props.totalPages ?? 1;
+  const pages = getPaginationRange(currentPage, totalPages);
+  return /* @__PURE__ */ jsx36(Pagination2, {
+    children: /* @__PURE__ */ jsxs22(PaginationContent2, {
+      children: [
+        /* @__PURE__ */ jsx36(PaginationItem2, {
+          children: /* @__PURE__ */ jsx36(PaginationPrevious2, {
+            href: "#",
+            onClick: (e) => {
+              e.preventDefault();
+              if (currentPage > 1) {
+                setPage(currentPage - 1);
+                emit("change");
+              }
+            }
+          })
+        }),
+        pages.map((page, idx) => page === "ellipsis" ? /* @__PURE__ */ jsx36(PaginationItem2, {
+          children: /* @__PURE__ */ jsx36(PaginationEllipsis2, {})
+        }, `ellipsis-${idx}`) : /* @__PURE__ */ jsx36(PaginationItem2, {
+          children: /* @__PURE__ */ jsx36(PaginationLink2, {
+            href: "#",
+            isActive: page === currentPage,
+            onClick: (e) => {
+              e.preventDefault();
+              setPage(page);
+              emit("change");
+            },
+            children: page
+          })
+        }, page)),
+        /* @__PURE__ */ jsx36(PaginationItem2, {
+          children: /* @__PURE__ */ jsx36(PaginationNext2, {
+            href: "#",
+            onClick: (e) => {
+              e.preventDefault();
+              if (currentPage < totalPages) {
+                setPage(currentPage + 1);
+                emit("change");
+              }
+            }
+          })
+        })
+      ]
+    })
+  });
+};
+
+// src/components/json-render/index.ts
+var components = {
+  Card: JsonCard,
+  Stack: JsonStack,
+  Grid: JsonGrid,
+  Separator: JsonSeparator,
+  Tabs: JsonTabs,
+  Accordion: JsonAccordion,
+  Collapsible: JsonCollapsible,
+  Dialog: JsonDialog,
+  Drawer: JsonDrawer,
+  Carousel: JsonCarousel,
+  Table: JsonTable,
+  Heading: JsonHeading,
+  Text: JsonText,
+  Image: JsonImage,
+  Avatar: JsonAvatar,
+  Badge: JsonBadge,
+  Alert: JsonAlert,
+  Progress: JsonProgress,
+  Skeleton: JsonSkeleton,
+  Spinner: JsonSpinner,
+  Tooltip: JsonTooltip,
+  Popover: JsonPopover,
+  Input: JsonInput,
+  Textarea: JsonTextarea,
+  Select: JsonSelect,
+  Checkbox: JsonCheckbox,
+  Radio: JsonRadio,
+  Switch: JsonSwitch,
+  Slider: JsonSlider,
+  Button: JsonButton,
+  Link: JsonLink,
+  DropdownMenu: JsonDropdownMenu,
+  Toggle: JsonToggle,
+  ToggleGroup: JsonToggleGroup,
+  ButtonGroup: JsonButtonGroup,
+  Pagination: JsonPagination
+};
+export {
+  componentDefinitions2 as componentDefinitions,
+  components
+};