@rothko-ui/radio 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 rothko-ui
+
+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/dist/Radio.d.ts

@@ -0,0 +1,8 @@
+import type { WithAria } from '@rothko-ui/system';
+import React from 'react';
+import type { AriaAttributes, RadioInnerProps } from './RadioInner';
+type RadioProps = Pick<WithAria<RadioInnerProps, AriaAttributes>, 'id' | 'children' | 'className' | 'disabled' | 'style' | 'aria-label' | 'aria-describedby' | 'aria-details' | 'aria-labelledby' | 'aria-controls' | 'aria-errormessage'> & {
+    $key: string;
+};
+declare const Radio: ({ id, $key, children, className, disabled, style, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, "aria-labelledby": ariaLabelledBy, "aria-controls": ariaControls, "aria-errormessage": ariaErrorMessage, }: RadioProps) => React.JSX.Element;
+export default Radio;

package/dist/RadioGroup.d.ts

@@ -0,0 +1,101 @@
+import type { RothkoKind, Size, WithAria, Dictionary } from '@rothko-ui/system';
+import React from 'react';
+type StyleableComponents = 'errorText' | 'label';
+type AriaAttributes = 'aria-label' | 'aria-describedby' | 'aria-details' | 'aria-labelledby' | 'aria-hidden' | 'aria-controls' | 'aria-disabled' | 'aria-invalid' | 'aria-required' | 'aria-errormessage';
+type RadioGroupProps<K extends string> = {
+    /**
+     * The `id` attribute of the radio group.
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * The content to be rendered inside the radio group.
+     * @type {React.ReactNode}
+     * @required
+     */
+    children: React.ReactNode;
+    /**
+     * CSS class name(s).
+     * @type {string}
+     */
+    className?: string;
+    /**
+     * Additional class names for the radio group components.
+     * @type {Object<StyleableComponents, string>}
+     */
+    classNames?: Dictionary<StyleableComponents, string>;
+    /**
+     * The gap between columns in the radio group.
+     * @type {Size | number}
+     * @default '0.5rem'
+     */
+    columnGap?: Size | number;
+    /**
+     * Specifies whether the radio group is disabled.
+     * @type {boolean}
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specifies whether the radio group has an error state.
+     */
+    error?: boolean;
+    /**
+     * The error message to be displayed when the radio group has an error state.
+     * @type {string}
+     * @default 'Invalid'
+     */
+    errorText?: string;
+    /**
+     * The gap between elements in the radio group.
+     * @type {Size | number}
+     * @default '0.5rem'
+     */
+    gap?: Size | number;
+    /**
+     * The radio group's semantic style.
+     * @type {RothkoKind}
+     */
+    kind?: RothkoKind;
+    /**
+     * The label for the radio group.
+     * @type {string}
+     */
+    label?: string;
+    /**
+     * The maximum number of columns in the radio group.
+     * @type {number}
+     * @default 4
+     */
+    maxCol?: number;
+    /**
+     * The callback function called when the value of the radio group changes.
+     * @param $key - The new value of the radio group.
+     */
+    onChange: ($key: K) => void;
+    /**
+     * Specifies whether the radio group is required.
+     * @type {boolean}
+     */
+    required?: boolean;
+    /**
+     * The gap between rows in the radio group.
+     * @default '0.5rem'
+     */
+    rowGap?: Size | number;
+    /**
+     * The inline style for the radio group.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Additional inline styles for the radio group components.
+     * @type {Object<StyleableComponents, React.CSSProperties>}
+     */
+    styles?: Dictionary<StyleableComponents, React.CSSProperties>;
+    /**
+     * The current value of the radio group.
+     */
+    value?: K | null;
+};
+declare function RadioGroup<K extends string>({ id, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledBy, 'aria-hidden': ariaHidden, 'aria-controls': ariaControls, 'aria-disabled': ariaDisabled, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-errormessage': ariaErrorMessage, errorText, style, styles, className, classNames, maxCol, columnGap, rowGap, value, kind, onChange, error, label, disabled, children, }: WithAria<RadioGroupProps<K>, AriaAttributes>): React.JSX.Element;
+export default RadioGroup;

package/dist/RadioGroupContext.d.ts

@@ -0,0 +1,12 @@
+import type { RothkoKind } from '@rothko-ui/system';
+export type RadioGroupContextType = {
+    radioGroupLabelId: string;
+    radioGroupErrorId: string;
+    selectedValue?: string | null;
+    error?: boolean;
+    disabled?: boolean;
+    onChange: ($key: string) => void;
+    kind?: RothkoKind;
+};
+declare const RadioGroupContext: import("react").Context<RadioGroupContextType | null>;
+export default RadioGroupContext;

package/dist/RadioInner.d.ts

@@ -0,0 +1,54 @@
+import type { RothkoKind, WithAria } from '@rothko-ui/system';
+import React from 'react';
+export type AriaAttributes = 'aria-label' | 'aria-describedby' | 'aria-details' | 'aria-labelledby' | 'aria-controls' | 'aria-errormessage';
+export type RadioInnerProps = {
+    /**
+     * The `id` attribute of the radio component.
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * The content to be rendered inside the radio component.
+     * @type {React.ReactNode}
+     */
+    children?: React.ReactNode;
+    /**
+     * CSS class name(s).
+     * @type {string}
+     */
+    className?: string;
+    /**
+     * Specifies whether the radio component is disabled.
+     * @type {boolean}
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specifies whether the radio component has an error.
+     * @type {boolean}
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * The radio component's semantic style.
+     * @type {RothkoKind}
+     */
+    kind?: RothkoKind;
+    /**
+     * The callback function to be called when the radio component is selected.
+     */
+    onSelect: () => void;
+    /**
+     * Specifies whether the radio component is selected.
+     * @type {boolean}
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * The inline style for the radio component.
+     * @type {React.CSSProperties}
+     */
+    style?: React.CSSProperties;
+};
+declare const RadioInner: ({ id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, "aria-labelledby": ariaLabelledBy, "aria-controls": ariaControls, "aria-errormessage": ariaErrorMessage, children, className, disabled, error, kind, onSelect, selected, style, }: WithAria<RadioInnerProps, AriaAttributes>) => React.JSX.Element;
+export default RadioInner;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './Radio';
+export { default as RadioGroup } from './RadioGroup';

package/dist/index.mjs

@@ -0,0 +1,469 @@
+import e__default, { useRef, createContext, useContext } from 'react';
+
+const classes$1 = (...args) => {
+  const classNames = [];
+  for (const arg of args) {
+    if (typeof arg === 'string' && arg !== '') {
+      classNames.push(arg);
+    } else if (typeof arg === 'object' && arg !== null) {
+      classNames.push(...Object.keys(arg).filter(key => Boolean(arg[key])));
+    }
+  }
+  return classNames.join(' ');
+};
+
+const extractAriaProps = ({
+  'aria-activedescendant': ariaActivedescendant,
+  'aria-atomic': ariaAtomic,
+  'aria-autocomplete': ariaAutocomplete,
+  'aria-busy': ariaBusy,
+  'aria-checked': ariaChecked,
+  'aria-colcount': ariaColcount,
+  'aria-colindex': ariaColindex,
+  'aria-colspan': ariaColspan,
+  'aria-controls': ariaControls,
+  'aria-current': ariaCurrent,
+  'aria-describedby': ariaDescribedby,
+  'aria-description': ariaDescription,
+  'aria-details': ariaDetails,
+  'aria-disabled': ariaDisabled,
+  'aria-errormessage': ariaErrormessage,
+  'aria-expanded': ariaExpanded,
+  'aria-flowto': ariaFlowto,
+  'aria-haspopup': ariaHaspopup,
+  'aria-hidden': ariaHidden,
+  'aria-invalid': ariaInvalid,
+  'aria-keyshortcuts': ariaKeyshortcuts,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby,
+  'aria-level': ariaLevel,
+  'aria-live': ariaLive,
+  'aria-modal': ariaModal,
+  'aria-multiline': ariaMultiline,
+  'aria-multiselectable': ariaMultiselectable,
+  'aria-setsize': ariaSetsize,
+  'aria-sort': ariaSort,
+  'aria-valuemax': ariaValuemax,
+  'aria-valuemin': ariaValuemin,
+  'aria-valuenow': ariaValuenow,
+  'aria-valuetext': ariaValuetext,
+  'aria-orientation': ariaOrientation,
+  'aria-owns': ariaOwns,
+  'aria-placeholder': ariaPlaceholder,
+  'aria-posinset': ariaPosinset,
+  'aria-pressed': ariaPressed,
+  'aria-readonly': ariaReadonly,
+  'aria-relevant': ariaRelevant,
+  'aria-required': ariaRequired,
+  'aria-roledescription': ariaRoledescription,
+  'aria-rowcount': ariaRowcount,
+  'aria-rowindex': ariaRowindex,
+  'aria-rowspan': ariaRowspan,
+  'aria-selected': ariaSelected,
+  ...props
+}) => {
+  return {
+    ariaAttributes: {
+      'aria-activedescendant': ariaActivedescendant,
+      'aria-atomic': ariaAtomic,
+      'aria-autocomplete': ariaAutocomplete,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-colcount': ariaColcount,
+      'aria-colindex': ariaColindex,
+      'aria-colspan': ariaColspan,
+      'aria-controls': ariaControls,
+      'aria-current': ariaCurrent,
+      'aria-describedby': ariaDescribedby,
+      'aria-description': ariaDescription,
+      'aria-details': ariaDetails,
+      'aria-disabled': ariaDisabled,
+      'aria-errormessage': ariaErrormessage,
+      'aria-expanded': ariaExpanded,
+      'aria-flowto': ariaFlowto,
+      'aria-haspopup': ariaHaspopup,
+      'aria-hidden': ariaHidden,
+      'aria-invalid': ariaInvalid,
+      'aria-keyshortcuts': ariaKeyshortcuts,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      'aria-level': ariaLevel,
+      'aria-live': ariaLive,
+      'aria-modal': ariaModal,
+      'aria-multiline': ariaMultiline,
+      'aria-multiselectable': ariaMultiselectable,
+      'aria-setsize': ariaSetsize,
+      'aria-sort': ariaSort,
+      'aria-valuemax': ariaValuemax,
+      'aria-valuemin': ariaValuemin,
+      'aria-valuenow': ariaValuenow,
+      'aria-valuetext': ariaValuetext,
+      'aria-orientation': ariaOrientation,
+      'aria-owns': ariaOwns,
+      'aria-placeholder': ariaPlaceholder,
+      'aria-posinset': ariaPosinset,
+      'aria-pressed': ariaPressed,
+      'aria-readonly': ariaReadonly,
+      'aria-relevant': ariaRelevant,
+      'aria-required': ariaRequired,
+      'aria-roledescription': ariaRoledescription,
+      'aria-rowcount': ariaRowcount,
+      'aria-rowindex': ariaRowindex,
+      'aria-rowspan': ariaRowspan,
+      'aria-selected': ariaSelected
+    },
+    props
+  };
+};
+
+/* eslint-disable react/no-unused-prop-types */
+const Container = /*#__PURE__*/e__default.forwardRef((props, ref) => {
+  const {
+    props: {
+      as = 'div',
+      id,
+      children,
+      onBlur,
+      onFocus,
+      onClick,
+      className,
+      role,
+      ...style
+    },
+    ariaAttributes
+  } = extractAriaProps(props);
+  return /*#__PURE__*/e__default.createElement(as, {
+    ...ariaAttributes,
+    id,
+    ref,
+    onClick,
+    onBlur,
+    onFocus,
+    className,
+    style,
+    role
+  }, children);
+});
+Container.displayName = 'Container';
+
+/* eslint-disable react/no-unused-prop-types */
+const Grid = /*#__PURE__*/e__default.forwardRef((props, ref) => {
+  const {
+    props: {
+      as = 'div',
+      role,
+      onBlur,
+      onClick,
+      onFocus,
+      children,
+      className,
+      ...style
+    },
+    ariaAttributes
+  } = extractAriaProps(props);
+  return /*#__PURE__*/e__default.createElement(as, {
+    ...ariaAttributes,
+    ref,
+    onClick,
+    onFocus,
+    onBlur,
+    className: classes$1(className, 'grid'),
+    style,
+    role
+  }, children);
+});
+Grid.displayName = 'Grid';
+
+/* eslint-disable react/no-unused-prop-types */
+const FlexItem = /*#__PURE__*/e__default.forwardRef((props, ref) => {
+  const {
+    props: {
+      as = 'div',
+      children,
+      className,
+      onClick,
+      onBlur,
+      onFocus,
+      role,
+      ...style
+    },
+    ariaAttributes
+  } = extractAriaProps(props);
+  return /*#__PURE__*/e__default.createElement(as, {
+    ...ariaAttributes,
+    ref,
+    onClick,
+    onFocus,
+    onBlur,
+    className: classes$1(className, 'flex-1 shrink-0 basis-auto'),
+    style,
+    role
+  }, children);
+});
+FlexItem.displayName = 'FlexItem';
+
+/* eslint-disable react/no-unused-prop-types */
+const Flex = /*#__PURE__*/e__default.forwardRef((props, ref) => {
+  const {
+    props: {
+      id,
+      as = 'div',
+      children,
+      className,
+      role,
+      onClick,
+      onBlur,
+      onFocus,
+      ...style
+    },
+    ariaAttributes
+  } = extractAriaProps(props);
+  return /*#__PURE__*/e__default.createElement(as, {
+    ...ariaAttributes,
+    id,
+    ref,
+    onClick,
+    onFocus,
+    onBlur,
+    className: classes$1(className, 'flex'),
+    style,
+    role
+  }, children);
+});
+Flex.displayName = 'Flex';
+
+const debugFactory = module => {
+  const debuggerActive = Boolean(typeof process !== 'undefined' && process.env?.ROTHKO_DEBUG);
+  return (...argz) => {
+    if (debuggerActive) {
+      // eslint-disable-next-line no-console
+      console.log(`[rokthko-ui${`:${module}` }]`, ...argz);
+    }
+  };
+};
+
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    if (typeof crypto === 'undefined' || !crypto.getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+    getRandomValues = crypto.getRandomValues.bind(crypto);
+  }
+  return getRandomValues(rnds8);
+}
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+function v4(options, buf, offset) {
+  if (native.randomUUID && true && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  const rnds = options.random ?? options.rng?.() ?? rng();
+  if (rnds.length < 16) {
+    throw new Error('Random bytes length must be >= 16');
+  }
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80;
+  return unsafeStringify(rnds);
+}
+
+// I tried using the React.useId() hook but
+// that caused problems in the dropdown selectQuery
+const useId = id => {
+  const randomId = useRef(v4());
+  return `id-${randomId.current}`;
+};
+var Direction;
+(function (Direction) {
+  Direction[Direction["INCR"] = 1] = "INCR";
+  Direction[Direction["DECR"] = -1] = "DECR";
+})(Direction || (Direction = {}));
+debugFactory('useOptions');
+
+const freeGlobal = typeof global === 'object' && global !== null && global.Object === Object && global;
+const freeGlobalThis = typeof globalThis === 'object' && globalThis !== null && globalThis.Object == Object && globalThis;
+const freeSelf = typeof self === 'object' && self !== null && self.Object === Object && self;
+freeGlobalThis || freeGlobal || freeSelf || Function('return this')();
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const getTag = value => {
+  if (value == null) {
+    return value === undefined ? '[object Undefined]' : '[object Null]';
+  }
+  return Object.prototype.toString.call(value);
+};
+/**
+ * Checks if the given value is a string.
+ *
+ * @param {any} value The value to check.
+ * @returns {boolean} Returns true if the value is a string, else false.
+ * @example
+ *
+ * isString("hello")
+ * // => true
+ */
+const isString = value => {
+  return typeof value === 'string' || typeof value === 'object' && value != null && !Array.isArray(value) && getTag(value) == '[object String]';
+};
+
+const ListenableKeys = {
+  Enter: 13,
+  Tab: 9,
+  Backspace: 8,
+  Escape: 27,
+  Space: 32,
+  ArrowUp: 38,
+  ArrowDown: 40,
+  ArrowLeft: 37,
+  ArrowRight: 39,
+  Shift: 16,
+  Control: 17,
+  Alt: 18,
+  Insert: 45,
+  Delete: 46,
+  PageUp: 33,
+  PageDown: 34,
+  Clear: 12
+};
+const keyDownFactory = handlerMap => {
+  return e => {
+    // get code
+    const code = ListenableKeys[e.key];
+    if (typeof code === 'undefined') return;
+    const handler = handlerMap[code];
+    if (handler) {
+      e.preventDefault();
+      handler(e);
+    }
+  };
+};
+
+const classes = (...args) => {
+  const classNames = [];
+  for (const arg of args) {
+    if (typeof arg === 'string' && arg !== '') {
+      classNames.push(arg);
+    } else if (typeof arg === 'object' && arg !== null) {
+      classNames.push(...Object.keys(arg).filter(key => Boolean(arg[key])));
+    }
+  }
+  return classNames.join(' ');
+};
+const Paragraph = ({
+  as,
+  children,
+  className,
+  kind,
+  size = 'm',
+  style = {},
+  variant = 'regular',
+  ...props
+}) => {
+  const colorVarStyle = {
+    '--paragraph-color': kind ? `var(--rothko-${kind})` : 'var(--rothko-typography-body-color)'
+  };
+  const paragraphClasses = classes('my-[0.125rem] mx-0', variant === 'italic' && 'rothko-font-italic', variant === 'bold' && 'rothko-font-bold', variant === 'light' && 'rothko-font-light', variant === 'regular' && 'rothko-font-regular', size === 'xs' && 'rothko-paragraph-size-xs', size === 's' && 'rothko-paragraph-size-s', size === 'm' && 'rothko-paragraph-size-m', size === 'l' && 'rothko-paragraph-size-l', 'text-(--paragraph-color)', className);
+  return /*#__PURE__*/e__default.createElement(as || 'p', {
+    ...props,
+    className: paragraphClasses,
+    style: {
+      ...style,
+      ...colorVarStyle
+    }
+  }, children);
+};
+const Label = ({
+  as,
+  children,
+  className,
+  kind,
+  style = {},
+  ...props
+}) => {
+  const colorVarStyle = {
+    '--label-color': kind ? `var(--rothko-${kind})` : 'var(--rothko-typography-body-color)'
+  };
+  const labelClasses = classes('my-[0.125rem] mx-0', 'rothko-font-regular', 'rothko-paragraph-size-xs', 'text-(--label-color)', 'uppercase', 'tracking-[0.0625rem]',
+  // letter-spacing: 0.0625rem;
+  className);
+  return /*#__PURE__*/e__default.createElement(as || 'label', {
+    ...props,
+    className: labelClasses,
+    style: {
+      ...style,
+      ...colorVarStyle
+    }
+  }, children);
+};
+
+const RadioInner = ({ id, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledBy, 'aria-controls': ariaControls, 'aria-errormessage': ariaErrorMessage, children, className, disabled, error, kind, onSelect, selected, style = {}, }) => {
+    const labelId = useId();
+    const clickRadio = () => {
+        if (disabled)
+            return;
+        onSelect();
+    };
+    const onKeyDown = keyDownFactory({ [ListenableKeys.Enter]: clickRadio });
+    const radioVarStyle = {
+        '--radio-selected-background': kind
+            ? `var(--rothko-${kind})`
+            : 'var(--rothko-radio-background-focus)',
+    };
+    const radioContainerClassnames = classes$1('flex', 'items-center', 'justify-start', 'gap-[0.3rem]', 'rothko-color-body', 'rothko-font-regular', 'rothko-paragraph-size-default', className);
+    const radioOuterCircleClassnames = classes$1('w-[1.25rem]', 'h-[1.25rem]', 'rounded-full', 'p-[0.125rem]', !disabled && 'cursor-pointer', 'bg-(--rothko-radio-border)', disabled && 'cursor-not-allowed', disabled && 'opacity-60', error && 'outline outline-[1.5px] outline-[var(--danger-500)] outline-offset-[0.5px]');
+    const radioMiddleCircleClassnames = classes$1('w-full', 'h-full', 'rounded-full', 'p-[0.25rem]', !selected && 'bg-(--rothko-radio-background)', 'transition-[background-color 0.1s ease]', !error && selected && 'bg-(--radio-selected-background)', error && selected && 'bg-(--rothko-danger-500)');
+    const radioInnerCircleClassnames = 'w-full h-full rounded-full bg-(--rothko-radio-border)';
+    return (e__default.createElement("div", { style: { ...style, ...radioVarStyle }, className: radioContainerClassnames },
+        e__default.createElement("div", { id: id, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, "aria-labelledby": !ariaLabelledBy && children ? labelId : ariaLabelledBy, "aria-controls": ariaControls, "aria-checked": !!selected, "aria-disabled": disabled, "aria-label": ariaLabel, "aria-errormessage": ariaErrorMessage, role: "radio", className: radioOuterCircleClassnames, onClick: () => clickRadio(), onKeyDown: onKeyDown, tabIndex: 0 },
+            e__default.createElement("div", { "aria-hidden": true, className: radioMiddleCircleClassnames }, selected && e__default.createElement("div", { "aria-hidden": true, className: radioInnerCircleClassnames }))),
+        children &&
+            (typeof children === 'string' ? (e__default.createElement(Paragraph, { id: labelId }, children)) : (e__default.createElement("div", { id: labelId }, children)))));
+};
+
+const RadioGroupContext = createContext(null);
+
+const useRadioGroup = () => {
+    const ctx = useContext(RadioGroupContext);
+    if (!ctx) {
+        throw new Error('useRadioGroup called outside of context');
+    }
+    return ctx;
+};
+
+const Radio = ({ id, $key, children, className, disabled, style, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledBy, 'aria-controls': ariaControls, 'aria-errormessage': ariaErrorMessage, }) => {
+    const childrenStringLabel = isString(children) ? children : undefined;
+    const { radioGroupErrorId, selectedValue, onChange, error, disabled: groupDisabled, kind, } = useRadioGroup();
+    return (e__default.createElement(RadioInner, { "aria-controls": ariaControls, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, "aria-errormessage": !ariaErrorMessage && error ? radioGroupErrorId : ariaErrorMessage, "aria-label": ariaLabel || childrenStringLabel, "aria-labelledby": ariaLabelledBy, className: className, disabled: disabled || groupDisabled, error: error, id: id, kind: kind, onSelect: () => onChange($key), selected: $key === selectedValue, style: style }, children));
+};
+
+function RadioGroup({ id, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedBy, 'aria-details': ariaDetails, 'aria-labelledby': ariaLabelledBy, 'aria-hidden': ariaHidden, 'aria-controls': ariaControls, 'aria-disabled': ariaDisabled, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, 'aria-errormessage': ariaErrorMessage, errorText = 'Invalid', style, styles = {}, className, classNames = {}, maxCol = 4, columnGap = '0.5rem', rowGap = '0.5rem', value, kind, onChange, error, label, disabled, children, }) {
+    const labelId = useId();
+    const errorMessageId = useId();
+    const contextValue = e__default.useMemo(() => ({
+        radioGroupLabelId: labelId,
+        radioGroupErrorId: errorMessageId,
+        selectedValue: value,
+        onChange,
+        error,
+        kind,
+        disabled,
+    }), [value, error, kind, labelId, errorMessageId, disabled, onChange]);
+    return (e__default.createElement("div", { id: id, style: style, className: className },
+        label && (e__default.createElement(Label, { className: classNames.label, style: styles.label, id: labelId }, label)),
+        e__default.createElement(Grid, { "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-details": ariaDetails, "aria-labelledby": !ariaLabelledBy && label ? labelId : ariaLabelledBy, "aria-hidden": ariaHidden, "aria-invalid": ariaInvalid || error, "aria-controls": ariaControls, "aria-disabled": ariaDisabled, "aria-required": ariaRequired, "aria-errormessage": !ariaErrorMessage && error ? errorMessageId : ariaErrorMessage, role: "radiogroup", flexGrow: 1, gridTemplateColumns: `repeat(${maxCol}, 1fr)`, rowGap: rowGap, columnGap: columnGap },
+            e__default.createElement(RadioGroupContext.Provider, { value: contextValue }, children)),
+        error && (e__default.createElement(Paragraph, { className: classNames.errorText, style: styles.errorText, id: errorMessageId, kind: "danger" }, errorText))));
+}
+
+export { Radio, RadioGroup };

package/dist/useRadioGroup.d.ts

@@ -0,0 +1,2 @@
+declare const useRadioGroup: () => import("./RadioGroupContext").RadioGroupContextType;
+export default useRadioGroup;

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@rothko-ui/radio",
+  "version": "1.0.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luxo-ai/rothko-ui.git",
+    "directory": "packages/react/src/Radio"
+  },
+  "homepage": "https://rothko-ui.com",
+  "publishConfig": {
+    "access": "public"
+  },
+  "private": false,
+  "license": "MIT",
+  "author": "Luis Serazo <luxo.ai@proton.me>",
+  "description": "Radio for Rothko UI",
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "source": "src/index.ts",
+  "scripts": {
+    "build": "NODE_ENV=prod rollup --config",
+    "build:dev": "NODE_ENV=dev rollup --config --watch",
+    "generate:scss": "typed-scss-modules src --nameFormat none --exportType default",
+    "prebuild": "rimraf dist",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@rothko-ui/system": "^1.0.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.7",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.34.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "typescript": "^5.7.3"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ]
+}