@holmdigital/components 1.1.0

package/dist/chunk-YMSNGQN6.mjs

@@ -0,0 +1,79 @@
+// src/RadioGroup/RadioGroup.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RadioGroup = forwardRef(
+  ({ name, options, value, onChange, orientation = "vertical", className = "", label }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: `${className}`,
+        role: "radiogroup",
+        "aria-labelledby": label ? `${name}-label` : void 0,
+        children: [
+          label && /* @__PURE__ */ jsx("div", { id: `${name}-label`, className: "text-sm font-medium text-slate-900 mb-2", children: label }),
+          /* @__PURE__ */ jsx("div", { className: `flex ${orientation === "vertical" ? "flex-col space-y-3" : "flex-row space-x-6"}`, children: options.map((option) => {
+            const optionId = `${name}-${option.value}`;
+            const isChecked = value === option.value;
+            return /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: optionId,
+                    name,
+                    type: "radio",
+                    value: option.value,
+                    checked: isChecked,
+                    disabled: option.disabled,
+                    onChange: (e) => {
+                      if (e.target.checked) {
+                        onChange?.(option.value);
+                      }
+                    },
+                    className: "peer sr-only"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `
+                      h-5 w-5 rounded-full border border-slate-300 bg-white shadow-sm transition-all
+                      peer-focus:ring-2 peer-focus:ring-primary-500 peer-focus:ring-offset-2
+                      peer-checked:border-primary-600 peer-checked:bg-white
+                      peer-disabled:cursor-not-allowed peer-disabled:opacity-50
+                      hover:border-primary-400
+                    `,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: `
+                      absolute h-2.5 w-2.5 rounded-full bg-primary-600 transition-transform duration-200 scale-0
+                      ${isChecked ? "scale-100" : ""}
+                    `
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "label",
+                {
+                  htmlFor: optionId,
+                  className: `ml-3 text-sm font-medium ${option.disabled ? "text-slate-400" : "text-slate-700"} cursor-pointer select-none`,
+                  children: option.label
+                }
+              )
+            ] }, option.value);
+          }) })
+        ]
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+export {
+  RadioGroup
+};