@uoguelph/react-components 1.10.0 → 1.10.1-rc.0

package/dist/components/radio-group/radio-group.d.ts

@@ -4,10 +4,17 @@ export type RadioGroupProps<T> = PropsWithChildren<{
     name?: string;
     /** Whether the radios should be displayed inline or not. */
     inline?: boolean;
+    /** The value of the selected radio. */
+    value: T | null;
+    /**
+     * The name of the attribute to use for the `value` prop of the radio inputs. This is used for when the value is an
+     * object, and you want to compare values by a specific property.
+     */
+    by?: string;
     /** The callback to call when the selected radio changes. */
-    onChange?: (value: T | null) => void;
+    onChange: (value: T | null) => void;
 }>;
-export declare function RadioGroup<T>({ name, inline, onChange, children }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function RadioGroup<T>({ name, inline, value, onChange, children }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace RadioGroup {
     var displayName: string;
 }

package/dist/components/radio-group/radio.d.ts

@@ -1,8 +1,6 @@
 import { PropsWithChildren } from 'react';
 export type RadioProps<T> = PropsWithChildren<{
-    /** Whether the radio is selected or not initially. */
-    selected?: boolean;
     /** The value of the radio. */
     value: T;
 }>;
-export declare function Radio<T>({ selected, children, value }: RadioProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Radio<T>({ children, value }: RadioProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/radio-group.js

@@ -1,12 +1,10 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { RadioGroup as u } from "@headlessui/react";
-import { useState as d, useMemo as c } from "react";
-import { tv as f } from "tailwind-variants";
-import { RadioContext as x } from "./radio-context.js";
-import { Radio as S } from "./radio.js";
-function R({ name: t, inline: a = !1, onChange: s, children: i }) {
-  const [l, o] = d(null), n = c(() => ({ setSelected: o }), [o]), m = f({
+import { jsx as p } from "react/jsx-runtime";
+import { RadioGroup as f } from "@headlessui/react";
+import { tv as l } from "tailwind-variants";
+import { Radio as R } from "./radio.js";
+function m({ name: o, inline: a = !1, value: r, onChange: i, children: s }) {
+  const e = l({
     slots: {
       base: "flex gap-2"
     },
@@ -17,22 +15,11 @@ function R({ name: t, inline: a = !1, onChange: s, children: i }) {
         }
       }
     }
-  }), { base: p } = m({ inline: a });
-  return /* @__PURE__ */ r(
-    u,
-    {
-      name: t,
-      value: l,
-      onChange: (e) => {
-        o(e), s?.(e);
-      },
-      className: `uofg-radio-group ${p()}`,
-      children: /* @__PURE__ */ r(x.Provider, { value: n, children: i })
-    }
-  );
+  }), { base: t } = e({ inline: a });
+  return /* @__PURE__ */ p(f, { name: o, value: r, onChange: i, className: `uofg-radio-group ${t()}`, children: s });
 }
-R.displayName = "RadioGroup";
+m.displayName = "RadioGroup";
 export {
-  S as Radio,
-  R as RadioGroup
+  R as Radio,
+  m as RadioGroup
 };

package/dist/radio.js

@@ -1,15 +1,10 @@
 "use client";
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { Field as n, Radio as u, Label as m } from "@headlessui/react";
-import { useContext as b, useEffect as g, Fragment as p } from "react";
-import { tv as x } from "tailwind-variants";
-import { RadioContext as h } from "./radio-context.js";
-function j({ selected: r, children: a, value: o }) {
-  const i = b(h);
-  g(() => {
-    r && i?.setSelected(o);
-  }, [i, r, o]);
-  const l = x({
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Field as t, Radio as f, Label as n } from "@headlessui/react";
+import { Fragment as u } from "react";
+import { tv as b } from "tailwind-variants";
+function v({ children: i, value: o }) {
+  const a = b({
     slots: {
       field: "flex items-center gap-2",
       radio: "block aspect-square rounded-full border border-blue p-1.5 focus-visible:ring-2 focus-visible:ring-blue focus-visible:ring-offset-2",
@@ -26,12 +21,12 @@ function j({ selected: r, children: a, value: o }) {
         }
       }
     }
-  }), { field: t, radio: c, circle: d } = l();
-  return /* @__PURE__ */ f(n, { className: `uofg-radio-field ${t()}`, children: [
-    /* @__PURE__ */ e(u, { value: o, as: p, children: ({ checked: s }) => /* @__PURE__ */ e("span", { className: `uofg-radio ${c({ checked: s })}`, children: /* @__PURE__ */ e("span", { className: `uofg-radio-circle ${d({ checked: s })}` }) }) }),
-    /* @__PURE__ */ e(m, { className: "uofg-radio-label", children: a })
+  }), { field: l, radio: s, circle: c } = a();
+  return /* @__PURE__ */ d(t, { className: `uofg-radio-field ${l()}`, children: [
+    /* @__PURE__ */ e(f, { value: o, as: u, children: ({ checked: r }) => /* @__PURE__ */ e("span", { className: `uofg-radio ${s({ checked: r })}`, children: /* @__PURE__ */ e("span", { className: `uofg-radio-circle ${c({ checked: r })}` }) }) }),
+    /* @__PURE__ */ e(n, { className: "uofg-radio-label", children: i })
   ] });
 }
 export {
-  j as Radio
+  v as Radio
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uoguelph/react-components",
-  "version": "1.10.0",
+  "version": "1.10.1-rc.0",
   "description": "University of Guelph React Components Library",
   "type": "module",
   "scripts": {

package/dist/components/radio-group/radio-context.d.ts

@@ -1,4 +0,0 @@
-export type RadioContextValue<T> = {
-    setSelected: (value: T) => void;
-};
-export declare const RadioContext: import('react').Context<RadioContextValue<any> | undefined>;

package/dist/radio-context.d.ts

@@ -1,2 +0,0 @@
-export * from './components/radio-group/radio-context'
-export {}

package/dist/radio-context.js

@@ -1,5 +0,0 @@
-import { createContext as o } from "react";
-const e = o(void 0);
-export {
-  e as RadioContext
-};