@glob-ui/radio-group 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Martínez E
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,17 @@
-# Temporary Holding Version
+# @glob-ui/radio-group
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A group of native radios: one tab stop, arrows move and select.
+
+## Install
+
+```bash
+pnpm add @glob-ui/radio-group
+```
+
+## Documentation
+
+Full docs, examples and the accessibility table: [Radio group](https://github.com/kevin-martineze/GlobUI/tree/main/apps/docs/content/docs/components/radio-group.mdx).
+
+## License
+
+MIT. See [LICENSE](./LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const radioVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">, VariantProps<typeof radioVariants> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Shared by every radio. Defaults to a generated id. */
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    orientation?: "vertical" | "horizontal";
+}
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface RadioGroupItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "name" | "value" | "checked" | "defaultChecked" | "onChange"> {
+    value: string;
+    label?: React.ReactNode;
+}
+declare const RadioGroupItem: react.ForwardRefExoticComponent<RadioGroupItemProps & react.RefAttributes<HTMLInputElement>>;
+
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, radioVariants };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const radioVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface RadioGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue">, VariantProps<typeof radioVariants> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Shared by every radio. Defaults to a generated id. */
+    name?: string;
+    disabled?: boolean;
+    required?: boolean;
+    orientation?: "vertical" | "horizontal";
+}
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface RadioGroupItemProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "name" | "value" | "checked" | "defaultChecked" | "onChange"> {
+    value: string;
+    label?: React.ReactNode;
+}
+declare const RadioGroupItem: react.ForwardRefExoticComponent<RadioGroupItemProps & react.RefAttributes<HTMLInputElement>>;
+
+export { RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, radioVariants };

package/dist/index.js

@@ -0,0 +1,221 @@
+"use client"
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  RadioGroup: () => RadioGroup,
+  RadioGroupItem: () => RadioGroupItem,
+  radioVariants: () => radioVariants
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/radio-group.tsx
+var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("@glob-ui/utils");
+var import_jsx_runtime = require("react/jsx-runtime");
+var radioVariants = (0, import_class_variance_authority.cva)(
+  "peer shrink-0 cursor-pointer appearance-none rounded-full border border-glob-border-strong bg-glob-surface transition-colors checked:border-glob-primary checked:bg-glob-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var dotSize = {
+  sm: "h-1.5 w-1.5",
+  md: "h-2 w-2",
+  lg: "h-2.5 w-2.5"
+};
+var labelSize = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var RadioGroupContext = (0, import_react.createContext)(null);
+var RadioGroup = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      defaultValue,
+      onValueChange,
+      name,
+      disabled,
+      required,
+      orientation = "vertical",
+      size,
+      className,
+      children
+    } = _b, props = __objRest(_b, [
+      "value",
+      "defaultValue",
+      "onValueChange",
+      "name",
+      "disabled",
+      "required",
+      "orientation",
+      "size",
+      "className",
+      "children"
+    ]);
+    const autoName = (0, import_react.useId)();
+    const [internalValue, setInternalValue] = (0, import_react.useState)(defaultValue);
+    const isControlled = value !== void 0;
+    const current = isControlled ? value : internalValue;
+    function onSelect(next) {
+      if (!isControlled) setInternalValue(next);
+      onValueChange == null ? void 0 : onValueChange(next);
+    }
+    const invalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      RadioGroupContext.Provider,
+      {
+        value: {
+          name: name != null ? name : autoName,
+          value: current,
+          onSelect,
+          disabled,
+          required,
+          invalid,
+          size: size != null ? size : "md"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          __spreadProps(__spreadValues({
+            ref,
+            role: "radiogroup",
+            "aria-orientation": orientation,
+            "aria-required": required || void 0,
+            "aria-disabled": disabled || void 0,
+            className: (0, import_utils.cn)(
+              "flex",
+              orientation === "horizontal" ? "flex-row flex-wrap gap-4" : "flex-col gap-2",
+              className
+            )
+          }, props), {
+            children
+          })
+        )
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupItem = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { value, label, id, disabled, className } = _b, props = __objRest(_b, ["value", "label", "id", "disabled", "className"]);
+    const ctx = (0, import_react.useContext)(RadioGroupContext);
+    if (!ctx) throw new Error("RadioGroupItem must be used inside RadioGroup");
+    const autoId = (0, import_react.useId)();
+    const inputId = id != null ? id : autoId;
+    const isDisabled = ctx.disabled || disabled;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-flex shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          __spreadValues({
+            ref,
+            type: "radio",
+            id: inputId,
+            name: ctx.name,
+            value,
+            checked: ctx.value === value,
+            onChange: () => ctx.onSelect(value),
+            disabled: isDisabled,
+            required: ctx.required,
+            className: (0, import_utils.cn)(
+              radioVariants({ size: ctx.size }),
+              // aria-invalid is not valid on role radio; the group carries it, items only show it.
+              ctx.invalid && "border-glob-danger",
+              className
+            )
+          }, props)
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: (0, import_utils.cn)(
+              "pointer-events-none absolute inset-0 m-auto hidden rounded-full bg-glob-primary-foreground peer-checked:block",
+              dotSize[ctx.size]
+            )
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "label",
+        {
+          htmlFor: inputId,
+          className: (0, import_utils.cn)(
+            "cursor-pointer text-glob-text",
+            labelSize[ctx.size],
+            isDisabled && "cursor-not-allowed opacity-50"
+          ),
+          children: label
+        }
+      )
+    ] });
+  }
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RadioGroup,
+  RadioGroupItem,
+  radioVariants
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/radio-group.tsx"],"sourcesContent":["export { RadioGroup, RadioGroupItem, radioVariants } from \"./radio-group\"\nexport type { RadioGroupProps, RadioGroupItemProps } from \"./radio-group\"\n","\"use client\"\n\nimport { createContext, forwardRef, useContext, useId, useState } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\n\nconst radioVariants = cva(\n  \"peer shrink-0 cursor-pointer appearance-none rounded-full border border-glob-border-strong bg-glob-surface transition-colors checked:border-glob-primary checked:bg-glob-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-4\",\n        md: \"h-5 w-5\",\n        lg: \"h-6 w-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\ntype Size = \"sm\" | \"md\" | \"lg\"\n\nconst dotSize: Record<Size, string> = {\n  sm: \"h-1.5 w-1.5\",\n  md: \"h-2 w-2\",\n  lg: \"h-2.5 w-2.5\",\n}\n\nconst labelSize: Record<Size, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n}\n\ninterface RadioGroupContextValue {\n  name: string\n  value: string | undefined\n  onSelect: (value: string) => void\n  disabled?: boolean\n  required?: boolean\n  invalid?: boolean\n  size: Size\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\nexport interface RadioGroupProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\">,\n    VariantProps<typeof radioVariants> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Shared by every radio. Defaults to a generated id. */\n  name?: string\n  disabled?: boolean\n  required?: boolean\n  orientation?: \"vertical\" | \"horizontal\"\n}\n\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      name,\n      disabled,\n      required,\n      orientation = \"vertical\",\n      size,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const autoName = useId()\n    const [internalValue, setInternalValue] = useState(defaultValue)\n    const isControlled = value !== undefined\n    const current = isControlled ? value : internalValue\n\n    function onSelect(next: string) {\n      if (!isControlled) setInternalValue(next)\n      onValueChange?.(next)\n    }\n\n    const invalid = props[\"aria-invalid\"] === true || props[\"aria-invalid\"] === \"true\"\n\n    return (\n      <RadioGroupContext.Provider\n        value={{\n          name: name ?? autoName,\n          value: current,\n          onSelect,\n          disabled,\n          required,\n          invalid,\n          size: size ?? \"md\",\n        }}\n      >\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          aria-orientation={orientation}\n          aria-required={required || undefined}\n          aria-disabled={disabled || undefined}\n          className={cn(\n            \"flex\",\n            orientation === \"horizontal\" ? \"flex-row flex-wrap gap-4\" : \"flex-col gap-2\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </RadioGroupContext.Provider>\n    )\n  }\n)\nRadioGroup.displayName = \"RadioGroup\"\n\nexport interface RadioGroupItemProps\n  extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\" | \"name\" | \"value\" | \"checked\" | \"defaultChecked\" | \"onChange\"\n  > {\n  value: string\n  label?: React.ReactNode\n}\n\nconst RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(\n  ({ value, label, id, disabled, className, ...props }, ref) => {\n    const ctx = useContext(RadioGroupContext)\n    if (!ctx) throw new Error(\"RadioGroupItem must be used inside RadioGroup\")\n\n    const autoId = useId()\n    const inputId = id ?? autoId\n    const isDisabled = ctx.disabled || disabled\n\n    return (\n      <span className=\"inline-flex items-center gap-2\">\n        <span className=\"relative inline-flex shrink-0\">\n          <input\n            ref={ref}\n            type=\"radio\"\n            id={inputId}\n            name={ctx.name}\n            value={value}\n            checked={ctx.value === value}\n            onChange={() => ctx.onSelect(value)}\n            disabled={isDisabled}\n            required={ctx.required}\n            className={cn(\n              radioVariants({ size: ctx.size }),\n              // aria-invalid is not valid on role radio; the group carries it, items only show it.\n              ctx.invalid && \"border-glob-danger\",\n              className\n            )}\n            {...props}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              \"pointer-events-none absolute inset-0 m-auto hidden rounded-full bg-glob-primary-foreground peer-checked:block\",\n              dotSize[ctx.size]\n            )}\n          />\n        </span>\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"cursor-pointer text-glob-text\",\n              labelSize[ctx.size],\n              isDisabled && \"cursor-not-allowed opacity-50\"\n            )}\n          >\n            {label}\n          </label>\n        )}\n      </span>\n    )\n  }\n)\nRadioGroupItem.displayName = \"RadioGroupItem\"\n\nexport { RadioGroup, RadioGroupItem, radioVariants }\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,195 @@
+"use client"
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/radio-group.tsx
+import { createContext, forwardRef, useContext, useId, useState } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "@glob-ui/utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+var radioVariants = cva(
+  "peer shrink-0 cursor-pointer appearance-none rounded-full border border-glob-border-strong bg-glob-surface transition-colors checked:border-glob-primary checked:bg-glob-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4",
+        md: "h-5 w-5",
+        lg: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var dotSize = {
+  sm: "h-1.5 w-1.5",
+  md: "h-2 w-2",
+  lg: "h-2.5 w-2.5"
+};
+var labelSize = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var RadioGroupContext = createContext(null);
+var RadioGroup = forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      defaultValue,
+      onValueChange,
+      name,
+      disabled,
+      required,
+      orientation = "vertical",
+      size,
+      className,
+      children
+    } = _b, props = __objRest(_b, [
+      "value",
+      "defaultValue",
+      "onValueChange",
+      "name",
+      "disabled",
+      "required",
+      "orientation",
+      "size",
+      "className",
+      "children"
+    ]);
+    const autoName = useId();
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = value !== void 0;
+    const current = isControlled ? value : internalValue;
+    function onSelect(next) {
+      if (!isControlled) setInternalValue(next);
+      onValueChange == null ? void 0 : onValueChange(next);
+    }
+    const invalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
+    return /* @__PURE__ */ jsx(
+      RadioGroupContext.Provider,
+      {
+        value: {
+          name: name != null ? name : autoName,
+          value: current,
+          onSelect,
+          disabled,
+          required,
+          invalid,
+          size: size != null ? size : "md"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          __spreadProps(__spreadValues({
+            ref,
+            role: "radiogroup",
+            "aria-orientation": orientation,
+            "aria-required": required || void 0,
+            "aria-disabled": disabled || void 0,
+            className: cn(
+              "flex",
+              orientation === "horizontal" ? "flex-row flex-wrap gap-4" : "flex-col gap-2",
+              className
+            )
+          }, props), {
+            children
+          })
+        )
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+var RadioGroupItem = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { value, label, id, disabled, className } = _b, props = __objRest(_b, ["value", "label", "id", "disabled", "className"]);
+    const ctx = useContext(RadioGroupContext);
+    if (!ctx) throw new Error("RadioGroupItem must be used inside RadioGroup");
+    const autoId = useId();
+    const inputId = id != null ? id : autoId;
+    const isDisabled = ctx.disabled || disabled;
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("span", { className: "relative inline-flex shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadValues({
+            ref,
+            type: "radio",
+            id: inputId,
+            name: ctx.name,
+            value,
+            checked: ctx.value === value,
+            onChange: () => ctx.onSelect(value),
+            disabled: isDisabled,
+            required: ctx.required,
+            className: cn(
+              radioVariants({ size: ctx.size }),
+              // aria-invalid is not valid on role radio; the group carries it, items only show it.
+              ctx.invalid && "border-glob-danger",
+              className
+            )
+          }, props)
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-0 m-auto hidden rounded-full bg-glob-primary-foreground peer-checked:block",
+              dotSize[ctx.size]
+            )
+          }
+        )
+      ] }),
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: inputId,
+          className: cn(
+            "cursor-pointer text-glob-text",
+            labelSize[ctx.size],
+            isDisabled && "cursor-not-allowed opacity-50"
+          ),
+          children: label
+        }
+      )
+    ] });
+  }
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+export {
+  RadioGroup,
+  RadioGroupItem,
+  radioVariants
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/radio-group.tsx"],"sourcesContent":["\"use client\"\n\nimport { createContext, forwardRef, useContext, useId, useState } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\n\nconst radioVariants = cva(\n  \"peer shrink-0 cursor-pointer appearance-none rounded-full border border-glob-border-strong bg-glob-surface transition-colors checked:border-glob-primary checked:bg-glob-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"h-4 w-4\",\n        md: \"h-5 w-5\",\n        lg: \"h-6 w-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\ntype Size = \"sm\" | \"md\" | \"lg\"\n\nconst dotSize: Record<Size, string> = {\n  sm: \"h-1.5 w-1.5\",\n  md: \"h-2 w-2\",\n  lg: \"h-2.5 w-2.5\",\n}\n\nconst labelSize: Record<Size, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-base\",\n}\n\ninterface RadioGroupContextValue {\n  name: string\n  value: string | undefined\n  onSelect: (value: string) => void\n  disabled?: boolean\n  required?: boolean\n  invalid?: boolean\n  size: Size\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextValue | null>(null)\n\nexport interface RadioGroupProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\">,\n    VariantProps<typeof radioVariants> {\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /** Shared by every radio. Defaults to a generated id. */\n  name?: string\n  disabled?: boolean\n  required?: boolean\n  orientation?: \"vertical\" | \"horizontal\"\n}\n\nconst RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (\n    {\n      value,\n      defaultValue,\n      onValueChange,\n      name,\n      disabled,\n      required,\n      orientation = \"vertical\",\n      size,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const autoName = useId()\n    const [internalValue, setInternalValue] = useState(defaultValue)\n    const isControlled = value !== undefined\n    const current = isControlled ? value : internalValue\n\n    function onSelect(next: string) {\n      if (!isControlled) setInternalValue(next)\n      onValueChange?.(next)\n    }\n\n    const invalid = props[\"aria-invalid\"] === true || props[\"aria-invalid\"] === \"true\"\n\n    return (\n      <RadioGroupContext.Provider\n        value={{\n          name: name ?? autoName,\n          value: current,\n          onSelect,\n          disabled,\n          required,\n          invalid,\n          size: size ?? \"md\",\n        }}\n      >\n        <div\n          ref={ref}\n          role=\"radiogroup\"\n          aria-orientation={orientation}\n          aria-required={required || undefined}\n          aria-disabled={disabled || undefined}\n          className={cn(\n            \"flex\",\n            orientation === \"horizontal\" ? \"flex-row flex-wrap gap-4\" : \"flex-col gap-2\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </RadioGroupContext.Provider>\n    )\n  }\n)\nRadioGroup.displayName = \"RadioGroup\"\n\nexport interface RadioGroupItemProps\n  extends Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    \"type\" | \"size\" | \"name\" | \"value\" | \"checked\" | \"defaultChecked\" | \"onChange\"\n  > {\n  value: string\n  label?: React.ReactNode\n}\n\nconst RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(\n  ({ value, label, id, disabled, className, ...props }, ref) => {\n    const ctx = useContext(RadioGroupContext)\n    if (!ctx) throw new Error(\"RadioGroupItem must be used inside RadioGroup\")\n\n    const autoId = useId()\n    const inputId = id ?? autoId\n    const isDisabled = ctx.disabled || disabled\n\n    return (\n      <span className=\"inline-flex items-center gap-2\">\n        <span className=\"relative inline-flex shrink-0\">\n          <input\n            ref={ref}\n            type=\"radio\"\n            id={inputId}\n            name={ctx.name}\n            value={value}\n            checked={ctx.value === value}\n            onChange={() => ctx.onSelect(value)}\n            disabled={isDisabled}\n            required={ctx.required}\n            className={cn(\n              radioVariants({ size: ctx.size }),\n              // aria-invalid is not valid on role radio; the group carries it, items only show it.\n              ctx.invalid && \"border-glob-danger\",\n              className\n            )}\n            {...props}\n          />\n          <span\n            aria-hidden=\"true\"\n            className={cn(\n              \"pointer-events-none absolute inset-0 m-auto hidden rounded-full bg-glob-primary-foreground peer-checked:block\",\n              dotSize[ctx.size]\n            )}\n          />\n        </span>\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              \"cursor-pointer text-glob-text\",\n              labelSize[ctx.size],\n              isDisabled && \"cursor-not-allowed opacity-50\"\n            )}\n          >\n            {label}\n          </label>\n        )}\n      </span>\n    )\n  }\n)\nRadioGroupItem.displayName = \"RadioGroupItem\"\n\nexport { RadioGroup, RadioGroupItem, radioVariants }\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "@glob-ui/radio-group",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist/",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "dependencies": {
+    "@glob-ui/utils": "0.1.0",
+    "class-variance-authority": "^0.7.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1"
+  },
+  "description": "A group of native radios: one tab stop, arrows move and select.",
+  "keywords": [
+    "react",
+    "glob-ui",
+    "components",
+    "accessible",
+    "tailwind",
+    "radio-group"
+  ],
+  "license": "MIT",
+  "author": "Kevin Martínez E",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kevin-martineze/GlobUI.git",
+    "directory": "packages/radio-group"
+  },
+  "homepage": "https://github.com/kevin-martineze/GlobUI#readme",
+  "bugs": {
+    "url": "https://github.com/kevin-martineze/GlobUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": false,
+  "type": "commonjs",
+  "engines": {
+    "node": ">=18.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch --no-clean"
+  }
 }