@homecode/ui 5.0.0 → 5.0.1

package/dist/esm/index.js

@@ -32,6 +32,8 @@ export { Portal } from './src/components/Portal/Portal.js';
 export { PopupMenu } from './src/components/PopupMenu/PopupMenu.js';
 export { Progress } from './src/components/Progress/Progress.js';
 export { ProgressCircular } from './src/components/ProgressCircular/ProgressCircular.js';
+export { RadioButton } from './src/components/RadioButton/RadioButton.js';
+export { RadioGroup } from './src/components/RadioGroup/RadioGroup.js';
 export { Router, RouterContext, RouterStore } from './src/components/Router/Router.js';
 export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
 export { Select, SelectHelpers } from './src/components/Select/Select.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -55,6 +55,9 @@ import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
+import '../RadioGroup/RadioGroupContext.js';
+import '../RadioButton/RadioButton.styl.js';
+import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';

package/dist/esm/src/components/InputFile/InputFile.js

@@ -54,6 +54,9 @@ import '../Notifications/Notifications.styl.js';
 import '../PopupMenu/PopupMenu.styl.js';
 import '../Progress/Progress.styl.js';
 import '../ProgressCircular/ProgressCircular.styl.js';
+import '../RadioGroup/RadioGroupContext.js';
+import '../RadioButton/RadioButton.styl.js';
+import '../RadioGroup/RadioGroup.styl.js';
 import '../Router/Router.js';
 import '../Table/Table.styl.js';
 import '../Tabs/Tabs.styl.js';

package/dist/esm/src/components/RadioButton/RadioButton.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import 'react';
+import 'timen';
+import { useToggleState } from '../../hooks/useToggleState.js';
+import { useRadioGroup } from '../RadioGroup/RadioGroupContext.js';
+import S from './RadioButton.styl.js';
+
+const RadioButton = ({ className, label = '', size: sizeProp, variant: variantProp, error: errorProp, value, checked: checkedProp, disabled: disabledProp, name: nameProp, onChange, id, onFocus, onBlur, ...props }) => {
+    const group = useRadioGroup();
+    const size = sizeProp ?? group?.size ?? 'm';
+    const variant = variantProp ?? group?.variant ?? 'default';
+    const error = errorProp ?? group?.error;
+    const disabled = Boolean(disabledProp || group?.disabled);
+    const name = group ? group.name : nameProp;
+    const checked = group
+        ? group.value !== undefined && group.value === value
+        : Boolean(checkedProp);
+    const { id: componentId, isActive, isFocused, handlers, } = useToggleState({
+        id,
+        onFocus,
+        onBlur,
+    });
+    const handleChange = (e) => {
+        if (group)
+            group.onChange(value);
+        onChange?.(e);
+    };
+    const classes = cn(S.root, S[`size-${size}`], S[`variant-${variant}`], checked && S.checked, disabled && S.disabled, error && S.hasError, isActive && S.isActive, isFocused && S.isFocused, className);
+    return (jsxs("label", { className: classes, onPointerDown: handlers.onPointerDown, onPointerUp: handlers.onPointerUp, children: [jsxs("div", { className: S.controlWrapper, children: [jsx("input", { className: S.control, ...props, onChange: handleChange, onFocus: handlers.onFocus, onBlur: handlers.onBlur, id: componentId, type: "radio", name: name, value: String(value), checked: checked, disabled: disabled, tabIndex: 0 }), jsx("span", { className: S.dot, "aria-hidden": true })] }), label] }));
+};
+
+export { RadioButton };

package/dist/esm/src/components/RadioButton/RadioButton.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".RadioButton_root__-zReK{align-items:center;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.RadioButton_disabled__OuVm5{opacity:.4;pointer-events:none}.RadioButton_controlWrapper__xtZkJ{display:block;margin-right:1em;position:relative;transition:.2s ease-out;transition-property:opacity,box-shadow}.RadioButton_variant-default__r2D0X .RadioButton_controlWrapper__xtZkJ{background-color:var(--accent-color-alpha-100)}.RadioButton_variant-outlined__ZE2em .RadioButton_controlWrapper__xtZkJ{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.RadioButton_root__-zReK:hover .RadioButton_controlWrapper__xtZkJ{background-color:var(--active-color-alpha-100)}.RadioButton_isActive__hAdvm .RadioButton_controlWrapper__xtZkJ,.RadioButton_isFocused__pQaTx .RadioButton_controlWrapper__xtZkJ{box-shadow:inset 0 0 0 2px var(--active-color)!important}.RadioButton_hasError__SFhRz .RadioButton_controlWrapper__xtZkJ{box-shadow:inset 0 0 0 2px var(--danger-color)!important}.RadioButton_isActive__hAdvm .RadioButton_controlWrapper__xtZkJ{background-color:var(--active-color-alpha-100);opacity:.7}.RadioButton_control__RLcpz{-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;transition:.1s ease-out;transition-property:background-color,color}.RadioButton_control__RLcpz:focus,.RadioButton_control__RLcpz:hover{background-color:var(--active-color-alpha-100)}.RadioButton_control__RLcpz[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.RadioButton_dot__m6MWL{background-color:var(--active-color);border-radius:50%;height:42%;left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.4);transition:.1s ease-in;transition-property:transform,opacity;width:42%}.RadioButton_checked__X45GC .RadioButton_dot__m6MWL{opacity:1;transform:translate(-50%,-50%) scale(1.8)}.RadioButton_size-xs__gBuwV{font-size:14px}.RadioButton_size-xs__gBuwV .RadioButton_controlWrapper__xtZkJ{border-radius:4px;border-radius:12px;min-height:24px;min-width:24px}.RadioButton_size-s__2fKr7{font-size:16px}.RadioButton_size-s__2fKr7 .RadioButton_controlWrapper__xtZkJ{border-radius:4px;border-radius:16px;min-height:32px;min-width:32px}.RadioButton_size-m__cQ-gf{font-size:18px}.RadioButton_size-m__cQ-gf .RadioButton_controlWrapper__xtZkJ{border-radius:6px;border-radius:20px;min-height:40px;min-width:40px}.RadioButton_size-l__h3Alz{font-size:22px}.RadioButton_size-l__h3Alz .RadioButton_controlWrapper__xtZkJ{border-radius:8px;border-radius:24px;min-height:48px;min-width:48px}.RadioButton_size-xl__evU9a{font-size:26px}.RadioButton_size-xl__evU9a .RadioButton_controlWrapper__xtZkJ{border-radius:10px;border-radius:28px;min-height:56px;min-width:56px}";
+var S = {"root":"RadioButton_root__-zReK","disabled":"RadioButton_disabled__OuVm5","controlWrapper":"RadioButton_controlWrapper__xtZkJ","variant-default":"RadioButton_variant-default__r2D0X","variant-outlined":"RadioButton_variant-outlined__ZE2em","isActive":"RadioButton_isActive__hAdvm","isFocused":"RadioButton_isFocused__pQaTx","hasError":"RadioButton_hasError__SFhRz","control":"RadioButton_control__RLcpz","dot":"RadioButton_dot__m6MWL","checked":"RadioButton_checked__X45GC","size-xs":"RadioButton_size-xs__gBuwV","size-s":"RadioButton_size-s__2fKr7","size-m":"RadioButton_size-m__cQ-gf","size-l":"RadioButton_size-l__h3Alz","size-xl":"RadioButton_size-xl__evU9a"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, useState, useCallback, useMemo } from 'react';
+import cn from 'classnames';
+import { RadioGroupContext } from './RadioGroupContext.js';
+import S from './RadioGroup.styl.js';
+
+const RadioGroup = ({ className, children, label, value, defaultValue, onChange, name: nameProp, size = 'm', variant = 'default', error, disabled, orientation = 'vertical', ...rest }) => {
+    const reactId = useId();
+    const name = nameProp ?? `radio${reactId.replace(/:/g, '')}`;
+    const [uncontrolled, setUncontrolled] = useState(defaultValue);
+    const isControlled = value !== undefined;
+    const selectedValue = isControlled ? value : uncontrolled;
+    const setValue = useCallback((next) => {
+        if (!isControlled)
+            setUncontrolled(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    const contextValue = useMemo(() => ({
+        name,
+        value: selectedValue,
+        onChange: setValue,
+        size,
+        variant,
+        error,
+        disabled,
+    }), [name, selectedValue, setValue, size, variant, error, disabled]);
+    const inner = (jsx("div", { className: cn(S.inner, orientation === 'horizontal' && S.horizontal), children: jsx(RadioGroupContext.Provider, { value: contextValue, children: children }) }));
+    return (jsxs("fieldset", { className: cn(S.root, className), disabled: disabled, ...rest, children: [label != null && label !== '' && (jsx("legend", { className: S.legend, children: label })), inner] }));
+};
+
+export { RadioGroup };

package/dist/esm/src/components/RadioGroup/RadioGroup.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".RadioGroup_root__f0yTC{border:none;margin:0;min-width:0;padding:0}.RadioGroup_legend__Fq1Yg{margin:0 0 .5em;padding:0}.RadioGroup_inner__GZ2--{align-items:flex-start;display:flex;flex-direction:column;gap:.5em}.RadioGroup_inner__GZ2--.RadioGroup_horizontal__72oyb{align-items:center;flex-direction:row;flex-wrap:wrap}";
+var S = {"root":"RadioGroup_root__f0yTC","legend":"RadioGroup_legend__Fq1Yg","inner":"RadioGroup_inner__GZ2--","horizontal":"RadioGroup_horizontal__72oyb"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/RadioGroup/RadioGroupContext.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+
+const RadioGroupContext = createContext(null);
+function useRadioGroup() {
+    return useContext(RadioGroupContext);
+}
+
+export { RadioGroupContext, useRadioGroup };

package/dist/esm/types/src/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import * as T from './RadioButton.types';
+export declare const RadioButton: FC<T.Props>;

package/dist/esm/types/src/components/RadioButton/RadioButton.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode, InputHTMLAttributes } from 'react';
+import { Size, ComponentType } from '../../types';
+export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value'> & ComponentType & {
+    label?: ReactNode;
+    /** Option value; compared to the group’s `value` when inside `RadioGroup` */
+    value: string | number;
+    checked?: boolean;
+    disabled?: boolean;
+    error?: string | boolean;
+    size?: Size;
+    variant?: 'default' | 'outlined';
+};

package/dist/esm/types/src/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import type { Props } from './RadioGroup.types';
+export declare const RadioGroup: FC<Props>;

package/dist/esm/types/src/components/RadioGroup/RadioGroup.types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode, HTMLAttributes } from 'react';
+import { Size, ComponentType } from '../../types';
+export type RadioGroupContextValue = {
+    name: string;
+    value: string | number | undefined;
+    onChange: (value: string | number) => void;
+    size: Size;
+    variant: 'default' | 'outlined';
+    error?: string | boolean;
+    disabled?: boolean;
+};
+export type Props = Omit<HTMLAttributes<HTMLFieldSetElement>, 'onChange'> & ComponentType & {
+    children: ReactNode;
+    /** Current value when controlled */
+    value?: string | number;
+    /** Initial value when uncontrolled */
+    defaultValue?: string | number;
+    /** Called when the selected option changes */
+    onChange?: (value: string | number) => void;
+    /** Shared `name` for native radio inputs; generated if omitted */
+    name?: string;
+    /** Group heading; renders as `legend` */
+    label?: ReactNode;
+    /** Size passed to `RadioButton` children via context */
+    size?: Size;
+    variant?: 'default' | 'outlined';
+    error?: string | boolean;
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+};

package/dist/esm/types/src/components/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,3 @@
+import type { RadioGroupContextValue } from './RadioGroup.types';
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextValue>;
+export declare function useRadioGroup(): RadioGroupContextValue | null;

package/dist/esm/types/src/components/Scroll/Scroll.d.ts

@@ -13,7 +13,7 @@ export declare const Scroll: import("react").ForwardRefExoticComponent<import(".
     x?: boolean;
     y?: boolean;
     size?: import("../../types").Size;
-    fadeSize?: import("../../types").Size | "xl";
+    fadeSize?: import("../../types").Size;
     smooth?: boolean;
     autoHide?: boolean;
     offset?: {

package/dist/esm/types/src/components/index.d.ts

@@ -32,6 +32,8 @@ export * from './Portal/Portal';
 export * from './PopupMenu/PopupMenu';
 export * from './Progress/Progress';
 export * from './ProgressCircular/ProgressCircular';
+export * from './RadioButton/RadioButton';
+export * from './RadioGroup/RadioGroup';
 export * from './Router/Router';
 export * from './RequiredStar/RequiredStar';
 export * from './Select/Select';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "React UI components library",
   "scripts": {
     "tests": "jest",