@herca/r-kit 0.0.49 → 0.0.52

package/dist/clients.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var clients_exports = {};
 __export(clients_exports, {
   BaseCheckbox: () => BaseCheckbox,
+  BaseRadio: () => BaseRadio,
   BaseSwitch: () => BaseSwitch,
   ButtonDropdown: () => ButtonDropdown,
   ButtonGroup: () => ButtonGroup,
@@ -71,6 +72,10 @@ __export(clients_exports, {
   ModalPreviewAttachment: () => ModalPreviewAttachment,
   ModalTitle: () => ModalTitle,
   PreviewItem: () => PreviewItem,
+  Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
+  RadioIndicatorVariants: () => RadioIndicatorVariants,
+  RadioVariants: () => RadioVariants,
   Select: () => Select,
   Sheet: () => Sheet,
   SheetClose: () => SheetClose,
@@ -829,10 +834,10 @@ var ChipGroup = ({
   }, [selected, internalSelected]);
   const toggleSelection = (value) => {
     let newSelected;
-    if (multiple || !multiple && internalSelected.length === 0) {
+    if (multiple) {
       newSelected = internalSelected.includes(value) ? internalSelected.filter((v3) => v3 !== value) : [...internalSelected, value];
     } else {
-      newSelected = [value];
+      newSelected = internalSelected.includes(value) ? [] : [value];
     }
     setInternalSelected(newSelected);
     onSelect?.(newSelected);
@@ -12116,10 +12121,10 @@ var InputFile = (0, import_react361.forwardRef)(
         /* @__PURE__ */ (0, import_jsx_runtime375.jsxs)(
           "label",
           {
-            onDragEnter: variant === "large" ? handleDragEnter : void 0,
-            onDragLeave: variant === "large" ? handleDragLeave : void 0,
-            onDragOver: variant === "large" ? handleDragOver : void 0,
-            onDrop: variant === "large" ? handleDrop : void 0,
+            onDragEnter: variant === "large" || variant === "medium" ? handleDragEnter : void 0,
+            onDragLeave: variant === "large" || variant === "medium" ? handleDragLeave : void 0,
+            onDragOver: variant === "large" || variant === "medium" ? handleDragOver : void 0,
+            onDrop: variant === "large" || variant === "medium" ? handleDrop : void 0,
             className: cn(
               inputFileVariants({ variant }),
               "group relative flex items-center gap-2 rounded-lg border px-3 py-2 transition-all",
@@ -12130,7 +12135,7 @@ var InputFile = (0, import_react361.forwardRef)(
               variant === "large" && internalErrorMessage !== void 0 && "border-danger-500",
               //prettier-ignore
               variant === "large" && "flex-col items-center p-5!",
-              variant === "large" && isDragging && "border-primary-500 bg-primary-50",
+              (variant === "large" || variant === "medium") && isDragging && "border-primary-500 bg-primary-50",
               //prettier-ignore
               disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
             ),
@@ -12158,7 +12163,7 @@ var InputFile = (0, import_react361.forwardRef)(
                       Text,
                       {
                         as: "p",
-                        value: variant === "large" && !isDragging && !hint ? `Klik atau drag & drop file disini` : hint,
+                        value: (variant === "large" || variant === "medium") && !isDragging && !hint ? `Klik atau drag & drop file disini` : hint,
                         className: "text-gray-600!"
                       }
                     )
@@ -12985,10 +12990,17 @@ var createCalendarHelpers = ({
   value,
   rangeValue,
   disabledDates,
-  dayConfigs
+  dayConfigs,
+  disabled
 }) => {
   const isDateDisabled = (day) => {
-    return disabledDates.some((d) => d.getTime() === day.fullDate.getTime());
+    if (disabledDates.some((d) => d.getTime() === day.fullDate.getTime())) {
+      return true;
+    }
+    if (disabled?.(day.fullDate) === true) {
+      return true;
+    }
+    return false;
   };
   const getDayConfig = (day) => {
     return dayConfigs.find((c) => c.date.getTime() === day.fullDate.getTime());
@@ -13266,7 +13278,8 @@ function CalendarDayItem({
   onClick,
   variant,
   events,
-  backdropOnClick
+  backdropOnClick,
+  disabledDateClassName
 }) {
   const dayConfig = helpers.getDayConfig(day);
   const isSelected = helpers.isDateSelected(day);
@@ -13302,8 +13315,9 @@ function CalendarDayItem({
         mode === "single" && variant === "compact" && styleHelpers.getBackgroundClass(),
         //prettier-ignore
         mode === "range" && !isDisabled && helpers.getRangeBackgroundClass(day),
-        variant === "default" && "h-28 md:h-36 w-full rounded-none flex items-start justify-start group p-1 md:p-3 border-r border-gray-300"
+        variant === "default" && "h-28 md:h-36 w-full rounded-none flex items-start justify-start group p-1 md:p-3 border-r border-gray-300",
         //prettier-ignore
+        isDisabled && disabledDateClassName
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime382.jsx)(
@@ -13482,7 +13496,8 @@ function CalendarGrid({
   showCalendarTooltip = true,
   backdropOnClick,
   onEventClick,
-  useLimitEvent = true
+  useLimitEvent = true,
+  disabledDateClassName
 }) {
   const isMobile = useIsMobile();
   const weeks = Array.from(
@@ -13610,7 +13625,8 @@ function CalendarGrid({
                       onClick,
                       variant,
                       events,
-                      backdropOnClick: variant === "default" && backdropOnClick ? (day2) => backdropOnClick?.(day2) : void 0
+                      backdropOnClick: variant === "default" && backdropOnClick ? (day2) => backdropOnClick?.(day2) : void 0,
+                      disabledDateClassName
                     },
                     dayIndex
                   ))
@@ -13995,7 +14011,9 @@ var Calendar2 = ({
   onMonthChange,
   onYearChange,
   showDefaultController = false,
-  useLimitEvent = true
+  useLimitEvent = true,
+  disabled,
+  disabledDateClassName
 }) => {
   const currentDate = /* @__PURE__ */ new Date();
   const [currentMonth, setCurrentMonth] = (0, import_react367.useState)(defaultMonth ?? currentDate.getMonth());
@@ -14020,7 +14038,8 @@ var Calendar2 = ({
     dayConfigs,
     rangeValue,
     mode,
-    value
+    value,
+    disabled
   });
   const calendarState = {
     currentMonth,
@@ -14036,8 +14055,8 @@ var Calendar2 = ({
   };
   const handleDateClick = (day) => {
     const dayConfig = calendarHelpers.getDayConfig(day);
-    const disabled = (dayConfig?.disabled ?? false) || calendarHelpers.isDateDisabled(day);
-    if (disabled) {
+    const disabled2 = (dayConfig?.disabled ?? false) || calendarHelpers.isDateDisabled(day);
+    if (disabled2) {
       return;
     }
     onChange?.(day.fullDate);
@@ -14252,7 +14271,8 @@ var Calendar2 = ({
                 showCalendarTooltip,
                 useLimitEvent,
                 onEventClick,
-                backdropOnClick
+                backdropOnClick,
+                disabledDateClassName
               }
             )
           ] })
@@ -14394,6 +14414,9 @@ var DatePicker = ({
   trigger,
   open,
   onOpenChange,
+  minDate,
+  maxDate,
+  disabledDateClassName,
   calendarProps,
   endDateCalendarProps,
   startDateCalendarProps,
@@ -14674,6 +14697,12 @@ var DatePicker = ({
                     dayWrapperClassname: "justify-between",
                     onChange: handleCalendarChange,
                     value: selectedDate,
+                    disabled: (date) => {
+                      if (minDate !== void 0 && date < minDate) return true;
+                      if (maxDate !== void 0 && date > maxDate) return true;
+                      return false;
+                    },
+                    disabledDateClassName,
                     ...calendarProps
                   }
                 ) : /* @__PURE__ */ (0, import_jsx_runtime389.jsxs)("div", { className: "flex", children: [
@@ -14785,6 +14814,16 @@ var DatePicker = ({
                               value: dateRange.start,
                               rangeValue: dateRange,
                               mode: "range",
+                              disabled: (date) => {
+                                if (minDate !== void 0 && date < minDate) {
+                                  return true;
+                                }
+                                if (maxDate !== void 0 && date > maxDate) {
+                                  return true;
+                                }
+                                return false;
+                              },
+                              disabledDateClassName,
                               ...startDateCalendarProps
                             }
                           ),
@@ -14802,6 +14841,16 @@ var DatePicker = ({
                               mode: "range",
                               defaultMonth: nextMonthData.month,
                               defaultYear: nextMonthData.year,
+                              disabled: (date) => {
+                                if (minDate !== void 0 && date < minDate) {
+                                  return true;
+                                }
+                                if (maxDate !== void 0 && date > maxDate) {
+                                  return true;
+                                }
+                                return false;
+                              },
+                              disabledDateClassName,
                               ...endDateCalendarProps
                             }
                           )
@@ -15375,6 +15424,7 @@ function Select({
   required,
   isSelectOpen,
   onOpenChange,
+  searchOptions,
   searchPlaceholder = "Search..."
 }) {
   const [isOpen, setIsOpen] = (0, import_react375.useState)(false);
@@ -15509,6 +15559,11 @@ function Select({
   (0, import_react375.useEffect)(() => {
     onOpenChange?.(isOpen);
   }, [isOpen]);
+  (0, import_react375.useEffect)(() => {
+    if (searchOptions !== void 0) {
+      setSearchTerm(searchOptions);
+    }
+  }, [searchOptions]);
   const getDisplayValue = () => {
     const isEmpty = value == null || isMulti && asArray(value).length === 0;
     if (isEmpty) {
@@ -26718,6 +26773,11 @@ var FontSize = Extension.create({
 
 // src/components/text-editor/extension/image-node.ts
 var import_extension_image = __toESM(require("@tiptap/extension-image"), 1);
+var getJustify = (align) => {
+  if (align === "right") return "flex-end";
+  if (align === "center") return "center";
+  return "flex-start";
+};
 var ImageNode = import_extension_image.default.extend({
   // jadikan block supaya bisa di-align
   inline: false,
@@ -26756,9 +26816,10 @@ var ImageNode = import_extension_image.default.extend({
       },
       textAlign: {
         default: "left",
-        parseHTML: (el) => el.closest("[data-image-wrapper]")?.getAttribute("data-align") ?? "left",
-        renderHTML: () => ({})
-        // dihandle di nodeView
+        parseHTML: (el) => el.getAttribute("data-text-align") ?? el.closest("[data-image-wrapper]")?.getAttribute("data-align") ?? "left",
+        renderHTML: (attrs) => ({
+          "data-text-align": attrs["textAlign"]
+        })
       },
       url: {
         default: null,
@@ -26776,26 +26837,23 @@ var ImageNode = import_extension_image.default.extend({
   },
   renderHTML({ HTMLAttributes }) {
     const {
-      textAlign,
       objectFit,
       url,
       urlTarget,
+      "data-text-align": dataTextAlign,
       "data-url": dataUrl,
-      // ← ambil dari sini
       "data-url-target": dataUrlTarget,
       ...rest
     } = HTMLAttributes;
-    const align = textAlign ?? "left";
-    const getJustify2 = (a) => a === "right" ? "flex-end" : a === "center" ? "center" : "flex-start";
+    const align = typeof dataTextAlign === "string" && dataTextAlign.length > 0 ? dataTextAlign : "left";
     const resolvedUrl = url ?? dataUrl ?? null;
     const resolvedTarget = urlTarget ?? dataUrlTarget ?? "_self";
     const img = [
       "img",
       mergeAttributes(rest, {
         style: `object-fit: ${objectFit ?? "contain"}`,
-        // ← tambahkan data-* ke <img> supaya parseHTML bisa baca saat load HTML
-        ...url !== null ? { "data-url": url } : {},
-        ...urlTarget == null ? { "data-url-target": urlTarget } : {}
+        ...resolvedUrl !== null ? { "data-url": resolvedUrl } : {},
+        ...resolvedTarget != null ? { "data-url-target": resolvedTarget } : {}
       })
     ];
     const content = resolvedUrl != null ? ["a", { href: resolvedUrl, target: resolvedTarget }, img] : img;
@@ -26804,7 +26862,7 @@ var ImageNode = import_extension_image.default.extend({
       {
         "data-image-wrapper": "",
         "data-align": align,
-        "style": `display:flex;justify-content:${getJustify2(align)};`
+        "style": `display:flex;justify-content:${getJustify(align)};`
       },
       content
     ];
@@ -26820,8 +26878,7 @@ var ImageNode = import_extension_image.default.extend({
         const align = n.attrs["textAlign"] ?? "left";
         const url = n.attrs["url"];
         const urlTarget = n.attrs["urlTarget"] ?? "_self";
-        const getJustify2 = (a) => a === "right" ? "flex-end" : a === "center" ? "center" : "flex-start";
-        wrapper.style.cssText = `display: flex; justify-content: ${getJustify2(align)};`;
+        wrapper.style.cssText = `display: flex; justify-content: ${getJustify(align)};`;
         wrapper.setAttribute("data-align", align);
         if (n.attrs["src"])
           img.setAttribute("src", n.attrs["src"]);
@@ -26831,6 +26888,17 @@ var ImageNode = import_extension_image.default.extend({
           img.setAttribute("width", String(n.attrs["width"]));
         if (n.attrs["height"])
           img.setAttribute("height", String(n.attrs["height"]));
+        img.setAttribute("data-text-align", align);
+        if (url !== null) {
+          img.setAttribute("data-url", url);
+        } else {
+          img.removeAttribute("data-url");
+        }
+        if (urlTarget !== null) {
+          img.setAttribute("data-url-target", urlTarget);
+        } else {
+          img.removeAttribute("data-url-target");
+        }
         img.style.objectFit = n.attrs["objectFit"] ?? "contain";
         wrapper.innerHTML = "";
         if (url !== null) {
@@ -27124,7 +27192,7 @@ var TableNode = import_extension_table.Table.extend({
 var table_node_default = TableNode;
 
 // src/components/text-editor/extension/youtube-node.ts
-var getJustify = (align) => {
+var getJustify2 = (align) => {
   switch (align) {
     case "left":
       return "flex-start";
@@ -27190,7 +27258,7 @@ var YoutubeNode = Node3.create({
       const wrapper = document.createElement("div");
       wrapper.style.cssText = "display: flex; justify-content: center; margin: 0.5rem 0;";
       const updateAlignment = (align) => {
-        wrapper.style.justifyContent = getJustify(align);
+        wrapper.style.justifyContent = getJustify2(align);
       };
       const iframe = document.createElement("iframe");
       iframe.setAttribute("src", node.attrs["src"]);
@@ -33748,6 +33816,16 @@ var target_link_options_default = targetOptions;
 
 // src/components/text-editor/partials/modal-insert-image.tsx
 var import_jsx_runtime407 = require("react/jsx-runtime");
+var createDefaultImageForm = () => ({
+  url: null,
+  image: {
+    objectFit: object_fit_options_default[0],
+    source: "",
+    altText: "",
+    width: "200",
+    height: "200"
+  }
+});
 function ModalInsertImage({
   isOpen,
   onClose,
@@ -33766,22 +33844,25 @@ function ModalInsertImage({
         altText: data[0].uploadedData?.data.name ?? ""
       };
     }
-  }
+  },
+  onDownload
 }) {
   const [currentTabImage, setCurrentTabImage] = (0, import_react388.useState)("0");
+  const [uploadInputKey, setUploadInputKey] = (0, import_react388.useState)(0);
+  const [uploadFiles, setUploadFiles] = (0, import_react388.useState)([]);
   const [errors, setErrors] = (0, import_react388.useState)(
     {}
   );
-  const [imageForm, setImageForm] = (0, import_react388.useState)({
-    url: null,
-    image: {
-      objectFit: object_fit_options_default[0],
-      source: "",
-      altText: "",
-      width: "200",
-      height: "200"
-    }
-  });
+  const [imageForm, setImageForm] = (0, import_react388.useState)(
+    createDefaultImageForm()
+  );
+  const resetFormState = () => {
+    setCurrentTabImage("0");
+    setErrors({});
+    setImageForm(createDefaultImageForm());
+    setUploadFiles([]);
+    setUploadInputKey((prev) => prev + 1);
+  };
   const validate = () => {
     const newErrors = {};
     if (imageForm?.image?.source === "" || imageForm?.image?.source === null || imageForm?.image?.source === void 0) {
@@ -33800,9 +33881,16 @@ function ModalInsertImage({
     return Object.keys(newErrors).length === 0;
   };
   (0, import_react388.useEffect)(() => {
-    if (isOpen && initialValues !== void 0) {
+    if (!isOpen) return;
+    setErrors({});
+    setCurrentTabImage("0");
+    setUploadFiles([]);
+    setUploadInputKey((prev) => prev + 1);
+    if (initialValues !== void 0) {
       setImageForm(initialValues);
+      return;
     }
+    setImageForm(createDefaultImageForm());
   }, [isOpen, initialValues]);
   return /* @__PURE__ */ (0, import_jsx_runtime407.jsxs)(Modal, { isOpen, onClose: () => onClose(false), closable: false, children: [
     /* @__PURE__ */ (0, import_jsx_runtime407.jsxs)(ModalHeader, { className: "flex-row! items-center justify-between border-b border-gray-200", children: [
@@ -33826,7 +33914,7 @@ function ModalInsertImage({
           if (!validate()) return;
           onSubmit(imageForm);
           onClose(false);
-          setImageForm(null);
+          resetFormState();
         },
         className: "overflow-auto",
         children: [
@@ -34007,8 +34095,11 @@ function ModalInsertImage({
                     maxSize: (attachmentField?.maxSize ?? 0) * 1024 * 1024,
                     variant: attachmentField?.variant ?? "medium",
                     uploadConfig: attachmentField?.uploadConfig,
-                    onChange: attachmentField?.onChange ? (files) => attachmentField?.onChange?.(files) : void 0,
-                    value: attachmentField?.value,
+                    onChange: (files) => {
+                      setUploadFiles(files);
+                      attachmentField?.onChange?.(files);
+                    },
+                    value: uploadFiles,
                     onUploadSuccess: (results) => {
                       const { url, altText } = attachmentField.extractUploadResult(results);
                       setCurrentTabImage("0");
@@ -34024,8 +34115,10 @@ function ModalInsertImage({
                         };
                       });
                       attachmentField?.onUploadSuccess?.(results);
-                    }
-                  }
+                    },
+                    onDownload
+                  },
+                  uploadInputKey
                 ) })
               ]
             }
@@ -34039,7 +34132,7 @@ function ModalInsertImage({
                 type: "button",
                 onClick: () => {
                   onClose(false);
-                  setImageForm(null);
+                  resetFormState();
                 },
                 children: "Cancel"
               }
@@ -34255,7 +34348,8 @@ var import_jsx_runtime409 = require("react/jsx-runtime");
 function InsertGroup({
   editor,
   disabled = false,
-  attachmentField
+  attachmentField,
+  onDownload
 }) {
   const [isModalImageOpen, setIsModalImageOpen] = (0, import_react392.useState)(false);
   const [isModalYoutubeOpen, setIsModalYoutubeOpen] = (0, import_react392.useState)(false);
@@ -34412,7 +34506,8 @@ function InsertGroup({
             url: form.url?.source ?? null,
             urlTarget: form.url?.target?.value ?? "_self"
           }).run();
-        }
+        },
+        onDownload
       }
     )
   ] });
@@ -34494,7 +34589,7 @@ function TableGroup({
     {
       title: "Delete Row",
       icon: "table-delete-row",
-      onClick: () => editor.chain().focus().addRowAfter().run(),
+      onClick: () => editor.chain().focus().deleteRow().run(),
       requiresTable: false,
       disabled
     }
@@ -34510,7 +34605,7 @@ function TableGroup({
     {
       title: "Delete Column",
       icon: "table-delete-column",
-      onClick: () => editor.chain().focus().addColumnBefore().run(),
+      onClick: () => editor.chain().focus().deleteColumn().run(),
       requiresTable: false,
       disabled
     }
@@ -34625,7 +34720,8 @@ function TextEditor({
   ui: ui3,
   field,
   toolbar,
-  editor: editorProps
+  editor: editorProps,
+  onDownload
 }) {
   const {
     disabled = false,
@@ -34764,7 +34860,8 @@ function TextEditor({
                     {
                       disabled: isHtmlMode,
                       editor,
-                      attachmentField
+                      attachmentField,
+                      onDownload
                     }
                   ),
                   table && /* @__PURE__ */ (0, import_jsx_runtime411.jsx)(TableGroup, { disabled: isHtmlMode, editor }),
@@ -34822,9 +34919,229 @@ function TextEditor({
     }
   );
 }
+
+// src/components/radio/radio.tsx
+var import_react396 = __toESM(require("react"), 1);
+
+// src/components/radio/radio-variants.ts
+var import_class_variance_authority13 = require("class-variance-authority");
+var RadioVariants = (0, import_class_variance_authority13.cva)(
+  "flex items-center justify-center rounded-full border transition-all focus-visible:ring-1 focus-visible:ring-offset-0 focus-visible:outline-none",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      },
+      color: {
+        primary: "border-primary-1000 focus-visible:ring-primary-900",
+        secondary: "border-gray-600 focus-visible:ring-gray-500",
+        success: "border-success-500 focus-visible:ring-success-400",
+        danger: "border-danger-500 focus-visible:ring-danger-400",
+        warning: "border-warning-500 focus-visible:ring-warning-400",
+        info: "border-info-500 focus-visible:ring-info-400",
+        orange: "border-orange-500 focus-visible:ring-orange-400",
+        purple: "border-purple-500 focus-visible:ring-purple-400",
+        gray: "border-gray-600 focus-visible:ring-gray-500"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      color: "primary"
+    }
+  }
+);
+var RadioIndicatorVariants = (0, import_class_variance_authority13.cva)("rounded-full transition-all", {
+  variants: {
+    size: {
+      sm: "h-2 w-2",
+      md: "h-2.5 w-2.5",
+      lg: "h-3 w-3"
+    },
+    color: {
+      primary: "bg-primary-1000",
+      secondary: "bg-gray-600",
+      success: "bg-success-500",
+      danger: "bg-danger-500",
+      warning: "bg-warning-500",
+      info: "bg-info-500",
+      orange: "bg-orange-500",
+      purple: "bg-purple-500",
+      gray: "bg-gray-600"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "primary"
+  }
+});
+
+// src/components/radio/radio.tsx
+var import_jsx_runtime412 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react396.createContext)(
+  void 0
+);
+var RadioGroup = ({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled = false,
+  required = false,
+  name,
+  size = "md",
+  color = "primary",
+  className,
+  label,
+  hint,
+  description,
+  errorMessages,
+  direction = "vertical",
+  children
+}) => {
+  const [internalValue, setInternalValue] = import_react396.default.useState(
+    defaultValue ?? value ?? ""
+  );
+  const currentValue = value !== void 0 ? value : internalValue;
+  const handleValueChange = (newValue) => {
+    if (value === void 0) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        value: currentValue,
+        onValueChange: handleValueChange,
+        disabled,
+        name,
+        size,
+        color
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(
+        FormField,
+        {
+          label,
+          hint,
+          description,
+          errorMessages,
+          className,
+          required,
+          size,
+          children: /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(
+            "div",
+            {
+              role: "radiogroup",
+              "aria-required": required,
+              className: cn(
+                "flex gap-4",
+                direction === "vertical" ? "flex-col" : "flex-row flex-wrap"
+              ),
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var BaseRadio = ({
+  id: providedId,
+  value,
+  checked,
+  disabled: disabledProp = false,
+  required = false,
+  size: sizeProp,
+  color: colorProp,
+  onCheckedChange,
+  className
+}) => {
+  const generatedId = (0, import_react396.useId)();
+  const id = providedId ?? generatedId;
+  const context = (0, import_react396.useContext)(RadioGroupContext);
+  const isChecked = context ? context.value === value : checked ?? false;
+  const disabled = disabledProp ?? context?.disabled ?? false;
+  const name = context?.name;
+  const size = sizeProp ?? context?.size ?? "md";
+  const color = colorProp ?? context?.color ?? "primary";
+  const handleChange = () => {
+    if (disabled) return;
+    if (context) {
+      context.onValueChange?.(value);
+    } else {
+      onCheckedChange?.(!isChecked);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime412.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "radio",
+      id,
+      "aria-checked": isChecked,
+      "aria-required": required,
+      disabled,
+      onClick: handleChange,
+      className: cn(
+        RadioVariants({ size, color }),
+        !isChecked && "border-gray-300",
+        disabled && "cursor-not-allowed opacity-50",
+        !disabled && "hover:border-opacity-80 cursor-pointer",
+        "bg-white",
+        className
+      ),
+      children: [
+        Boolean(name) && /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(
+          "input",
+          {
+            type: "radio",
+            name,
+            value,
+            checked: isChecked,
+            onChange: () => {
+            },
+            className: "sr-only",
+            disabled,
+            required
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(
+          "span",
+          {
+            className: cn(
+              RadioIndicatorVariants({ size, color }),
+              isChecked ? "scale-100" : "scale-0 bg-transparent"
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+var Radio = ({ label, description, className, size: sizeProp, ...props }) => {
+  const generatedId = (0, import_react396.useId)();
+  const id = props?.id ?? generatedId;
+  const context = (0, import_react396.useContext)(RadioGroupContext);
+  const size = sizeProp ?? context?.size ?? "md";
+  const labelSizeClasses = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime412.jsxs)("div", { className: cn("inline-flex items-center gap-2", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(BaseRadio, { ...props, id, size }),
+    /* @__PURE__ */ (0, import_jsx_runtime412.jsxs)("div", { className: "flex flex-col", children: [
+      Boolean(label) && /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(FormLabel, { htmlFor: id, className: labelSizeClasses[size], children: label }),
+      Boolean(description) && /* @__PURE__ */ (0, import_jsx_runtime412.jsx)(FormDescription, { children: description })
+    ] })
+  ] });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BaseCheckbox,
+  BaseRadio,
   BaseSwitch,
   ButtonDropdown,
   ButtonGroup,
@@ -34865,6 +35182,10 @@ function TextEditor({
   ModalPreviewAttachment,
   ModalTitle,
   PreviewItem,
+  Radio,
+  RadioGroup,
+  RadioIndicatorVariants,
+  RadioVariants,
   Select,
   Sheet,
   SheetClose,