@1money/component-ui 0.0.1

package/es/components/Radio/interface.d.ts

@@ -0,0 +1,115 @@
+import type { CSSProperties, InputHTMLAttributes, ReactNode, RefObject } from 'react';
+import type { IconName } from "../Icons";
+export type RadioValueType = string | number;
+export type RadioVariant = 'default' | 'cell';
+export type RadioSize = 'large' | 'medium' | 'small';
+export type RadioOrientation = 'horizontal' | 'vertical';
+export type RadioAlignment = 'left' | 'center' | 'right';
+export type RadioGroupDirection = 'vertical' | 'horizontal';
+export interface RadioChangeTarget {
+    checked: boolean;
+    disabled: boolean;
+    id?: string;
+    name?: string;
+    type: 'radio';
+    value?: RadioValueType;
+}
+export interface RadioChangeEvent {
+    nativeEvent: Event;
+    preventDefault: () => void;
+    stopPropagation: () => void;
+    target: RadioChangeTarget;
+}
+type NativeRadioInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'checked' | 'className' | 'defaultChecked' | 'onChange' | 'size' | 'style' | 'type' | 'value'>;
+export interface RadioProps extends NativeRadioInputProps {
+    ref?: RefObject<HTMLLabelElement | null>;
+    className?: string;
+    prefixCls?: string;
+    style?: CSSProperties;
+    /** Value that identifies this radio within a RadioGroup */
+    value?: RadioValueType;
+    /** Whether the radio is checked (controlled, standalone usage) */
+    checked?: boolean;
+    /** Default checked state (uncontrolled, standalone usage) */
+    defaultChecked?: boolean;
+    /** Label text displayed next to the radio */
+    label?: ReactNode;
+    /** Description text displayed below the label */
+    description?: ReactNode;
+    /** Visual variant of the radio */
+    variant?: RadioVariant;
+    /** Visual size used by the cell variant */
+    size?: RadioSize;
+    /** Alignment used by the radio. Default supports `left` / `right`; cell supports `left` / `center`. */
+    alignment?: RadioAlignment;
+    /** Optional icon rendered by the cell variant */
+    icon?: IconName | ReactNode;
+    /** Optional tag label rendered by the cell variant */
+    tag?: string;
+    /** Callback when checked state changes */
+    onChange?: (event: RadioChangeEvent) => void;
+}
+export interface RadioOptionItem {
+    /** Value that identifies this option */
+    value: RadioValueType;
+    /** HTML id attribute for the underlying radio input */
+    id?: string;
+    /** Label text displayed next to the radio */
+    label?: ReactNode;
+    /** Description text displayed below the label */
+    description?: ReactNode;
+    /** Visual variant of the radio */
+    variant?: RadioVariant;
+    /** Visual size used by the cell variant */
+    size?: RadioSize;
+    /** Alignment used by the radio. Default supports `left` / `right`; cell supports `left` / `center`. */
+    alignment?: RadioAlignment;
+    /** Optional icon rendered by the cell variant */
+    icon?: IconName | ReactNode;
+    /** Optional tag label rendered by the cell variant */
+    tag?: string;
+    /** Whether this specific option is disabled */
+    disabled?: boolean;
+    /** Whether this specific option is required */
+    required?: boolean;
+    /** Title attribute for the underlying radio input */
+    title?: string;
+}
+export interface RadioGroupProps {
+    ref?: RefObject<HTMLDivElement | null>;
+    prefixCls?: string;
+    className?: string;
+    /** Currently selected value (controlled) */
+    value?: RadioValueType;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: RadioValueType;
+    /** HTML id attribute for the root radiogroup container */
+    id?: string;
+    /** HTML name attribute for native radio grouping */
+    name?: string;
+    /** Disables all radios in the group */
+    disabled?: boolean;
+    /** @deprecated Use `direction` to control the group direction. */
+    layout?: RadioGroupDirection;
+    /** Direction of the group */
+    direction?: RadioGroupDirection;
+    /** Visual variant inherited by child radios */
+    variant?: RadioVariant;
+    /** Visual size inherited by child radios */
+    size?: RadioSize;
+    /** Alignment inherited by child radios. Default supports `left` / `right`; cell supports `left` / `center`. */
+    alignment?: RadioAlignment;
+    /** Gap between radio items — accepts spacing token key or CSS value */
+    gap?: number | string;
+    /** Title attribute for the root radiogroup container */
+    title?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Quick-render mode: array of radio options */
+    options?: RadioOptionItem[];
+    /** Custom Radio children (takes precedence over options) */
+    children?: ReactNode;
+    /** Callback when the selected value changes */
+    onChange?: (event: RadioChangeEvent) => void;
+}
+export {};

package/es/components/Radio/interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50cy9SYWRpby9pbnRlcmZhY2UuanMiLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMiLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmFkaW8vaW50ZXJmYWNlLmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7fTsiXSwibWFwcGluZ3MiOiJBQUFBIiwiaWdub3JlTGlzdCI6W119

package/es/components/Radio/style/Radio.css

@@ -0,0 +1 @@
+.om-react-ui-radio{display:inline-flex;gap:var(--om-spacing-300,12px);align-items:flex-start;cursor:pointer}.om-react-ui-radio-box-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;justify-content:center;height:calc(var(--om-body-lg-font-size) * 1.4)}.om-react-ui-radio-input{position:absolute;inset:0;margin:0;cursor:inherit;opacity:0}.om-react-ui-radio-box{position:relative;display:flex;align-items:center;justify-content:center;width:var(--om-spacing-400,16px);height:var(--om-spacing-400,16px);overflow:hidden;background-color:var(--om-bg-default,#fff);border:1px solid var(--om-border-default-secondary,#9fa3a3);border-radius:var(--om-radius-full,9999px);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.om-react-ui-radio-box:after{position:absolute;width:var(--om-spacing-200,8px);height:var(--om-spacing-200,8px);background-color:var(--om-icon-on-brand,#dde6f4);border-radius:var(--om-radius-full,9999px);transform:scale(0);opacity:0;transition:transform .2s ease,opacity .2s ease;content:""}.om-react-ui-radio-input:checked+.om-react-ui-radio-box{background-color:var(--om-bg-brand,#073387);border-color:var(--om-bg-brand,#073387)}.om-react-ui-radio-input:checked+.om-react-ui-radio-box:after{transform:scale(1);opacity:1}.om-react-ui-radio-input:focus-visible+.om-react-ui-radio-box{border-color:var(--om-border-brand,#073387);box-shadow:0 0 0 1px var(--om-border-brand,#073387)}.om-react-ui-radio-content{display:flex;flex:1 0 0;flex-direction:column;min-width:0}.om-react-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-strong-font-weight);color:var(--om-text-default,#131313)}.om-react-ui-radio-description{font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-strong-font-weight);color:var(--om-text-default-tertiary,#646465)}.om-react-ui-radio-tag{display:inline-flex;margin-top:var(--om-spacing-100,4px)}.om-react-ui-radio-cell{position:relative;display:block;width:100%;min-width:0}.om-react-ui-radio-cell-input{position:absolute;inset:0;z-index:1;margin:0;cursor:inherit;opacity:0}.om-react-ui-radio-cell-panel{--om-radio-cell-icon:var(--om-icon-default,#131313);--om-radio-cell-indicator-icon:var(--om-icon-on-brand,#dde6f4);position:relative;display:flex;gap:var(--om-spacing-300,12px);align-items:center;box-sizing:border-box;width:100%;min-width:0;background-color:var(--om-bg-default,#fff);border:1px solid var(--om-border-default,#d1d2d2);border-radius:var(--om-radius-300,12px);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease}.om-react-ui-radio-cell-icon,.om-react-ui-radio-cell-indicator,.om-react-ui-radio-cell-radio{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.om-react-ui-radio-cell-indicator{width:var(--om-spacing-800,32px);height:var(--om-spacing-800,32px);color:var(--om-radio-cell-icon);background-color:var(--om-bg-neutral-tertiary,#f0f0f0);border-radius:var(--om-radius-full,9999px);transition:background-color .2s ease,color .2s ease}.om-react-ui-radio-cell-indicator-compact{width:var(--om-spacing-600,24px);height:var(--om-spacing-600,24px)}.om-react-ui-radio-cell-icon{color:var(--om-radio-cell-icon)}.om-react-ui-radio-cell-radio{width:var(--om-spacing-400,16px);height:var(--om-spacing-400,16px);background-color:var(--om-bg-default,#fff);border:1px solid var(--om-border-default-secondary,#9fa3a3);border-radius:var(--om-radius-full,9999px);transition:background-color .2s ease,border-color .2s ease}.om-react-ui-radio-cell-radio-dot{width:var(--om-spacing-100,4px);height:var(--om-spacing-100,4px);background-color:var(--om-icon-on-brand,#dde6f4);border-radius:var(--om-radius-full,9999px);transform:scale(0);opacity:0;transition:transform .2s ease,opacity .2s ease}.om-react-ui-radio-cell .om-react-ui-radio-content{display:flex;flex:1 0 0;flex-direction:column;min-width:0}.om-react-ui-radio-cell .om-react-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-strong-font-weight)}.om-react-ui-radio-cell .om-react-ui-radio-description{font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-font-weight)}.om-react-ui-radio-cell-horizontal.om-react-ui-radio-cell-large .om-react-ui-radio-cell-panel{padding:var(--om-spacing-400,16px)}.om-react-ui-radio-cell-horizontal.om-react-ui-radio-cell-medium .om-react-ui-radio-cell-panel,.om-react-ui-radio-cell-horizontal.om-react-ui-radio-cell-small .om-react-ui-radio-cell-panel{padding:var(--om-spacing-300,12px) var(--om-spacing-400,16px)}.om-react-ui-radio-cell-horizontal.om-react-ui-radio-cell-medium .om-react-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-font-weight)}.om-react-ui-radio-cell-horizontal.om-react-ui-radio-cell-small .om-react-ui-radio-content{justify-content:center}.om-react-ui-radio-cell-horizontal.om-react-ui-radio-cell-small .om-react-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-strong-font-weight)}.om-react-ui-radio-cell-horizontal.om-react-ui-radio-cell-small .om-react-ui-radio-description{font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-strong-font-weight)}.om-react-ui-radio-cell-vertical .om-react-ui-radio-cell-panel{flex-direction:column;justify-content:center}.om-react-ui-radio-cell-vertical .om-react-ui-radio-content{align-items:center;text-align:center}.om-react-ui-radio-cell-vertical .om-react-ui-radio-description,.om-react-ui-radio-cell-vertical .om-react-ui-radio-label{text-align:center}.om-react-ui-radio-cell-vertical.om-react-ui-radio-cell-large .om-react-ui-radio-cell-panel{padding:var(--om-spacing-600,24px) var(--om-spacing-400,16px)}.om-react-ui-radio-cell-vertical.om-react-ui-radio-cell-medium .om-react-ui-radio-cell-panel,.om-react-ui-radio-cell-vertical.om-react-ui-radio-cell-small .om-react-ui-radio-cell-panel{padding:var(--om-spacing-400,16px)}.om-react-ui-radio-cell-vertical.om-react-ui-radio-cell-medium .om-react-ui-radio-label,.om-react-ui-radio-cell-vertical.om-react-ui-radio-cell-small .om-react-ui-radio-label{font-size:var(--om-body-lg-font-size);font-family:var(--om-body-lg-font-family);line-height:var(--om-body-lg-line-height);letter-spacing:var(--om-body-lg-letter-spacing);font-weight:var(--om-body-lg-font-weight)}.om-react-ui-radio-cell-input:checked+.om-react-ui-radio-cell-panel{background-color:var(--om-bg-default-secondary,#f8f8f8);border-color:var(--om-border-brand,#073387)}.om-react-ui-radio-cell-input:checked+.om-react-ui-radio-cell-panel .om-react-ui-radio-cell-indicator{background-color:var(--om-bg-brand,#073387)}.om-react-ui-radio-cell-input:checked+.om-react-ui-radio-cell-panel .om-react-ui-radio-cell-radio{background-color:var(--om-bg-brand,#073387);border-color:var(--om-border-brand,#073387)}.om-react-ui-radio-cell-input:checked+.om-react-ui-radio-cell-panel .om-react-ui-radio-cell-radio-dot{transform:scale(1);opacity:1}.om-react-ui-radio-cell-vertical .om-react-ui-radio-cell-input:checked+.om-react-ui-radio-cell-panel{border-width:1px}.om-react-ui-radio-cell-input:focus-visible+.om-react-ui-radio-cell-panel{border-color:var(--om-border-brand,#073387);box-shadow:0 0 0 1px var(--om-border-brand,#073387)}.om-react-ui-radio:not(.om-react-ui-radio-disabled):hover .om-react-ui-radio-box{border-color:var(--om-border-default-tertiary,#404042)}.om-react-ui-radio:not(.om-react-ui-radio-disabled):hover .om-react-ui-radio-input:checked+.om-react-ui-radio-box{background-color:var(--om-bg-brand-hover,#052561);border-color:var(--om-bg-brand-hover,#052561)}.om-react-ui-radio:not(.om-react-ui-radio-disabled):hover .om-react-ui-radio-cell-panel{border-color:var(--om-border-default-tertiary,#404042)}.om-react-ui-radio:not(.om-react-ui-radio-disabled):hover .om-react-ui-radio-cell-input:checked+.om-react-ui-radio-cell-panel{border-color:var(--om-border-brand,#073387)}.om-react-ui-radio-disabled{cursor:not-allowed}.om-react-ui-radio-disabled .om-react-ui-radio-box,.om-react-ui-radio-disabled .om-react-ui-radio-input:checked+.om-react-ui-radio-box{background-color:var(--om-bg-disabled,#f0f0f0);border-color:var(--om-border-disabled,#e3e4e4)}.om-react-ui-radio-disabled .om-react-ui-radio-input:checked+.om-react-ui-radio-box:after{background-color:var(--om-icon-on-disabled,#bbbdc1)}.om-react-ui-radio-disabled .om-react-ui-radio-description,.om-react-ui-radio-disabled .om-react-ui-radio-label{color:var(--om-text-disabled,#bbbdc1)}.om-react-ui-radio-disabled .om-react-ui-radio-cell-panel{background-color:var(--om-bg-disabled,#f0f0f0);border-color:var(--om-border-disabled,#e3e4e4)}.om-react-ui-radio-disabled .om-react-ui-radio-cell-indicator{color:var(--om-icon-on-disabled,#bbbdc1);background-color:var(--om-bg-disabled,#f0f0f0)}.om-react-ui-radio-disabled .om-react-ui-radio-cell-icon{color:var(--om-icon-disabled,#d1d2d2)}.om-react-ui-radio-disabled .om-react-ui-radio-cell-radio{background-color:var(--om-bg-disabled,#f0f0f0);border-color:var(--om-border-disabled,#e3e4e4)}.om-react-ui-radio-disabled .om-react-ui-radio-cell-radio-dot{background-color:var(--om-icon-on-disabled,#bbbdc1)}.om-react-ui-radio-disabled .om-react-ui-radio-tag{opacity:.6}.om-react-ui-radio-right .om-react-ui-radio-box-wrapper{order:1}.om-react-ui-radio-right .om-react-ui-radio-content{order:0}.om-react-ui-radio-right .om-react-ui-radio-cell-icon,.om-react-ui-radio-right .om-react-ui-radio-cell-indicator,.om-react-ui-radio-right .om-react-ui-radio-cell-radio{order:1}.om-react-ui-radio-right .om-react-ui-radio-cell .om-react-ui-radio-content{order:0}.om-react-ui-radio-group{display:flex}.om-react-ui-radio-group-vertical{flex-direction:column;gap:var(--om-spacing-300,12px)}.om-react-ui-radio-group-horizontal{flex-flow:row wrap;gap:var(--om-spacing-600,24px)}.om-react-ui-radio-group-cell.om-react-ui-radio-group-vertical{gap:var(--om-spacing-300,12px)}.om-react-ui-radio-group-cell.om-react-ui-radio-group-vertical>.om-react-ui-radio{width:100%}.om-react-ui-radio-group-cell.om-react-ui-radio-group-horizontal{gap:var(--om-spacing-300,12px);align-items:stretch}.om-react-ui-radio-group-cell.om-react-ui-radio-group-horizontal>.om-react-ui-radio{flex:1 1 0;min-width:0}

package/es/components/Radio/style/Radio.scss

@@ -0,0 +1,431 @@
+@use '@/styles/api' as theme;
+@use '@/styles/theme/functions' as theme-internal;
+
+$component: 'radio';
+
+.#{theme.$prefix}-#{$component} {
+  display: inline-flex;
+  gap: theme.spacing(gap, 300);
+  align-items: flex-start;
+  cursor: pointer;
+
+  &-box-wrapper {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    height: theme-internal.om-line-height-px(body, lg);
+  }
+
+  &-input {
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+
+  &-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: theme.spacing(scale, 400);
+    height: theme.spacing(scale, 400);
+    overflow: hidden;
+    background-color: theme.palette(bg, 'default');
+    border: 1px solid theme.palette(border, 'default-secondary');
+    border-radius: theme.shape('full');
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+
+    &::after {
+      position: absolute;
+      width: theme.spacing(scale, 200);
+      height: theme.spacing(scale, 200);
+      background-color: theme.palette(icon, 'on-brand');
+      border-radius: theme.shape('full');
+      transform: scale(0);
+      opacity: 0;
+      transition:
+        transform 0.2s ease,
+        opacity 0.2s ease;
+      content: '';
+    }
+  }
+
+  &-input:checked + .#{theme.$prefix}-#{$component}-box {
+    background-color: theme.palette(bg, 'brand');
+    border-color: theme.palette(bg, 'brand');
+
+    &::after {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  &-input:focus-visible + .#{theme.$prefix}-#{$component}-box {
+    border-color: theme.palette(border, 'brand');
+    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
+  }
+
+  &-content {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &-label {
+    @include theme.typography(body, lg, $strong: true);
+
+    color: theme.palette(text, 'default');
+  }
+
+  &-description {
+    @include theme.typography(body, md, $strong: true);
+
+    color: theme.palette(text, 'default-tertiary');
+  }
+
+  &-tag {
+    display: inline-flex;
+    margin-top: theme.spacing(gap, 100);
+  }
+
+  &-cell {
+    position: relative;
+    display: block;
+    width: 100%;
+    min-width: 0;
+  }
+
+  &-cell-input {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    margin: 0;
+    cursor: inherit;
+    opacity: 0;
+  }
+
+  &-cell-panel {
+    --om-radio-cell-icon: #{theme.palette(icon, 'default')};
+    --om-radio-cell-indicator-icon: #{theme.palette(icon, 'on-brand')};
+
+    position: relative;
+    display: flex;
+    gap: theme.spacing(gap, 300);
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    background-color: theme.palette(bg, 'default');
+    border: 1px solid theme.palette(border, 'default');
+    border-radius: theme.shape(300);
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  &-cell-indicator,
+  &-cell-icon,
+  &-cell-radio {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-cell-indicator {
+    width: theme.spacing(scale, 800);
+    height: theme.spacing(scale, 800);
+    color: var(--om-radio-cell-icon);
+    background-color: theme.palette(bg, 'neutral-tertiary');
+    border-radius: theme.shape('full');
+    transition:
+      background-color 0.2s ease,
+      color 0.2s ease;
+  }
+
+  &-cell-indicator-compact {
+    width: theme.spacing(scale, 600);
+    height: theme.spacing(scale, 600);
+  }
+
+  &-cell-icon {
+    color: var(--om-radio-cell-icon);
+  }
+
+  &-cell-radio {
+    width: theme.spacing(scale, 400);
+    height: theme.spacing(scale, 400);
+    background-color: theme.palette(bg, 'default');
+    border: 1px solid theme.palette(border, 'default-secondary');
+    border-radius: theme.shape('full');
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease;
+  }
+
+  &-cell-radio-dot {
+    width: theme.spacing(scale, 100);
+    height: theme.spacing(scale, 100);
+    background-color: theme.palette(icon, 'on-brand');
+    border-radius: theme.shape('full');
+    transform: scale(0);
+    opacity: 0;
+    transition:
+      transform 0.2s ease,
+      opacity 0.2s ease;
+  }
+
+  &-cell .#{theme.$prefix}-#{$component}-content {
+    display: flex;
+    flex: 1 0 0;
+    flex-direction: column;
+    min-width: 0;
+  }
+
+  &-cell .#{theme.$prefix}-#{$component}-label {
+    @include theme.typography(body, lg, $strong: true);
+  }
+
+  &-cell .#{theme.$prefix}-#{$component}-description {
+    @include theme.typography(body, md);
+  }
+
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-large {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      padding: theme.spacing(scale, 400);
+    }
+  }
+
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-medium,
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-small {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      padding: theme.spacing(scale, 300) theme.spacing(scale, 400);
+    }
+  }
+
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-medium {
+    .#{theme.$prefix}-#{$component}-label {
+      @include theme.typography(body, lg);
+    }
+  }
+
+  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-small {
+    .#{theme.$prefix}-#{$component}-content {
+      justify-content: center;
+    }
+
+    .#{theme.$prefix}-#{$component}-label {
+      @include theme.typography(body, lg, $strong: true);
+    }
+
+    .#{theme.$prefix}-#{$component}-description {
+      @include theme.typography(body, md, $strong: true);
+    }
+  }
+
+  &-cell-vertical {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .#{theme.$prefix}-#{$component}-content {
+      align-items: center;
+      text-align: center;
+    }
+
+    .#{theme.$prefix}-#{$component}-label,
+    .#{theme.$prefix}-#{$component}-description {
+      text-align: center;
+    }
+  }
+
+  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-large {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      padding: theme.spacing(scale, 600) theme.spacing(scale, 400);
+    }
+  }
+
+  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-medium,
+  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-small {
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      padding: theme.spacing(scale, 400);
+    }
+
+    .#{theme.$prefix}-#{$component}-label {
+      @include theme.typography(body, lg);
+    }
+  }
+
+  &-cell-input:checked + .#{theme.$prefix}-#{$component}-cell-panel {
+    background-color: theme.palette(bg, 'default-secondary');
+    border-color: theme.palette(border, 'brand');
+  }
+
+  &-cell-input:checked
+    + .#{theme.$prefix}-#{$component}-cell-panel
+    .#{theme.$prefix}-#{$component}-cell-indicator {
+    background-color: theme.palette(bg, 'brand');
+  }
+
+  &-cell-input:checked
+    + .#{theme.$prefix}-#{$component}-cell-panel
+    .#{theme.$prefix}-#{$component}-cell-radio {
+    background-color: theme.palette(bg, 'brand');
+    border-color: theme.palette(border, 'brand');
+  }
+
+  &-cell-input:checked
+    + .#{theme.$prefix}-#{$component}-cell-panel
+    .#{theme.$prefix}-#{$component}-cell-radio-dot {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &-cell-vertical
+    .#{theme.$prefix}-#{$component}-cell-input:checked
+    + .#{theme.$prefix}-#{$component}-cell-panel {
+      border-width: 1px;
+  }
+
+  &-cell-input:focus-visible + .#{theme.$prefix}-#{$component}-cell-panel {
+    border-color: theme.palette(border, 'brand');
+    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
+  }
+
+  &:not(&-disabled):hover {
+    .#{theme.$prefix}-#{$component}-box {
+      border-color: theme.palette(border, 'default-tertiary');
+    }
+
+    .#{theme.$prefix}-#{$component}-input:checked
+      + .#{theme.$prefix}-#{$component}-box {
+      background-color: theme.palette(bg, 'brand-hover');
+      border-color: theme.palette(bg, 'brand-hover');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      border-color: theme.palette(border, 'default-tertiary');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-input:checked
+      + .#{theme.$prefix}-#{$component}-cell-panel {
+      border-color: theme.palette(border, 'brand');
+    }
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+
+    .#{theme.$prefix}-#{$component}-box {
+      background-color: theme.palette(bg, 'disabled');
+      border-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-input:checked
+      + .#{theme.$prefix}-#{$component}-box {
+      background-color: theme.palette(bg, 'disabled');
+      border-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-input:checked
+      + .#{theme.$prefix}-#{$component}-box::after {
+      background-color: theme.palette(icon, 'on-disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-label,
+    .#{theme.$prefix}-#{$component}-description {
+      color: theme.palette(text, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-panel {
+      background-color: theme.palette(bg, 'disabled');
+      border-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-indicator {
+      color: theme.palette(icon, 'on-disabled');
+      background-color: theme.palette(bg, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-icon {
+      color: theme.palette(icon, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-radio {
+      background-color: theme.palette(bg, 'disabled');
+      border-color: theme.palette(border, 'disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-radio-dot {
+      background-color: theme.palette(icon, 'on-disabled');
+    }
+
+    .#{theme.$prefix}-#{$component}-tag {
+      opacity: theme.opacity('disabled-heavy');
+    }
+  }
+
+  &-right {
+    .#{theme.$prefix}-#{$component}-box-wrapper {
+      order: 1;
+    }
+
+    .#{theme.$prefix}-#{$component}-content {
+      order: 0;
+    }
+
+    .#{theme.$prefix}-#{$component}-cell-indicator,
+    .#{theme.$prefix}-#{$component}-cell-icon,
+    .#{theme.$prefix}-#{$component}-cell-radio {
+      order: 1;
+    }
+
+    .#{theme.$prefix}-#{$component}-cell .#{theme.$prefix}-#{$component}-content {
+      order: 0;
+    }
+  }
+}
+
+$group-component: 'radio-group';
+
+.#{theme.$prefix}-#{$group-component} {
+  display: flex;
+
+  &-vertical {
+    flex-direction: column;
+    gap: theme.spacing(gap, 300);
+  }
+
+  &-horizontal {
+    flex-flow: row wrap;
+    gap: theme.spacing(gap, 600);
+  }
+
+  &-cell.#{theme.$prefix}-#{$group-component}-vertical {
+    gap: theme.spacing(gap, 300);
+
+    > .#{theme.$prefix}-#{$component} {
+      width: 100%;
+    }
+  }
+
+  &-cell.#{theme.$prefix}-#{$group-component}-horizontal {
+    gap: theme.spacing(gap, 300);
+    align-items: stretch;
+
+    > .#{theme.$prefix}-#{$component} {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+  }
+}

package/es/components/Radio/style/css.js

@@ -0,0 +1,3 @@
+import '@/components/Tag/style/css';
+import './Radio.css';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmFkaW8vc3JjL2NvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyx3QkFBd0I7QUFDL0IsT0FBTyxjQUFjIiwiZmlsZSI6ImNvbXBvbmVudHMvUmFkaW8vc3R5bGUvY3NzLmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

package/es/components/Radio/style/index.d.ts

@@ -0,0 +1,2 @@
+import "../../Tag/style";
+import './Radio.scss';

package/es/components/Radio/style/index.js

@@ -0,0 +1,3 @@
+import '@/components/Tag/style';
+import './Radio.scss';
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmFkaW8vc3JjL2NvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyx3QkFBd0I7QUFDL0IsT0FBTyxjQUFjIiwiZmlsZSI6ImNvbXBvbmVudHMvUmFkaW8vc3R5bGUvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/ResizeObserver/Collection.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { SizeInfo } from './interface';
+type OnCollectionResize = (size: SizeInfo, element: HTMLElement, data: any) => void;
+export declare const CollectionContext: React.Context<OnCollectionResize | null>;
+export interface ResizeInfo {
+    size: SizeInfo;
+    data: any;
+    element: HTMLElement;
+}
+export interface CollectionProps {
+    /** Trigger when some children ResizeObserver changed. Collect by frame render level */
+    onBatchResize?: (resizeInfo: ResizeInfo[]) => void;
+    children?: React.ReactNode;
+}
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+export declare function Collection({ children, onBatchResize }: CollectionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/es/components/ResizeObserver/Collection.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+export var CollectionContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+export function Collection(_ref) {
+  var children = _ref.children,
+    onBatchResize = _ref.onBatchResize;
+  var resizeIdRef = React.useRef(0);
+  var resizeInfosRef = React.useRef([]);
+  var onCollectionResize = React.useContext(CollectionContext);
+  var onBatchResizeRef = React.useRef(onBatchResize);
+  onBatchResizeRef.current = onBatchResize;
+  var onCollectionResizeRef = React.useRef(onCollectionResize);
+  onCollectionResizeRef.current = onCollectionResize;
+  var onResize = React.useCallback(function (size, element, data) {
+    var _a;
+    resizeIdRef.current += 1;
+    var currentId = resizeIdRef.current;
+    resizeInfosRef.current.push({
+      size: size,
+      element: element,
+      data: data
+    });
+    Promise.resolve().then(function () {
+      var _a;
+      if (currentId === resizeIdRef.current) {
+        (_a = onBatchResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onBatchResizeRef, resizeInfosRef.current);
+        resizeInfosRef.current = [];
+      }
+    });
+    // Continue bubbling if parent exist
+    (_a = onCollectionResizeRef.current) === null || _a === void 0 ? void 0 : _a.call(onCollectionResizeRef, size, element, data);
+  }, []);
+  return _jsx(CollectionContext.Provider, {
+    value: onResize,
+    children: children
+  });
+}
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvQ29sbGVjdGlvbi5qcyIsImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvUmVzaXplT2JzZXJ2ZXIvQ29sbGVjdGlvbi50c3giXSwibmFtZXMiOlsianN4IiwiX2pzeCIsIlJlYWN0IiwiQ29sbGVjdGlvbkNvbnRleHQiLCJjcmVhdGVDb250ZXh0IiwiQ29sbGVjdGlvbiIsIl9yZWYiLCJjaGlsZHJlbiIsIm9uQmF0Y2hSZXNpemUiLCJyZXNpemVJZFJlZiIsInVzZVJlZiIsInJlc2l6ZUluZm9zUmVmIiwib25Db2xsZWN0aW9uUmVzaXplIiwidXNlQ29udGV4dCIsIm9uQmF0Y2hSZXNpemVSZWYiLCJjdXJyZW50Iiwib25Db2xsZWN0aW9uUmVzaXplUmVmIiwib25SZXNpemUiLCJ1c2VDYWxsYmFjayIsInNpemUiLCJlbGVtZW50IiwiZGF0YSIsIl9hIiwiY3VycmVudElkIiwicHVzaCIsIlByb21pc2UiLCJyZXNvbHZlIiwidGhlbiIsImNhbGwiLCJQcm92aWRlciIsInZhbHVlIl0sIm1hcHBpbmdzIjoiQUFBQSxTQUFTQSxHQUFHLElBQUlDLElBQUksUUFBUSxtQkFBbUI7QUNBL0MsT0FBTyxLQUFLQyxLQUFLLE1BQU0sT0FBTztBQUs5QixPQUFPLElBQU1DLGlCQUFpQixnQkFBR0QsS0FBSyxDQUFDRSxhQUFhLENBQTRCLElBQUksQ0FBQztBQWNyRjtBRGZBO0FBQ0E7QUNpQkEsT0FBTSxTQUFVQyxVQUFVQSxDQUFBQyxJQUFBLEVBQTZDO0VBQUEsSUFBMUNDLFFBQVEsR0FBQUQsSUFBQSxDQUFSQyxRQUFRO0lBQUVDLGFBQWEsR0FBQUYsSUFBQSxDQUFiRSxhQUFhO0VBQ2xELElBQU1DLFdBQVcsR0FBR1AsS0FBSyxDQUFDUSxNQUFNLENBQUMsQ0FBQyxDQUFDO0VBQ25DLElBQU1DLGNBQWMsR0FBR1QsS0FBSyxDQUFDUSxNQUFNLENBQWUsRUFBRSxDQUFDO0VBRXJELElBQU1FLGtCQUFrQixHQUFHVixLQUFLLENBQUNXLFVBQVUsQ0FBQ1YsaUJBQWlCLENBQUM7RUFFOUQsSUFBTVcsZ0JBQWdCLEdBQUdaLEtBQUssQ0FBQ1EsTUFBTSxDQUFDRixhQUFhLENBQUM7RUFDcERNLGdCQUFnQixDQUFDQyxPQUFPLEdBQUdQLGFBQWE7RUFFeEMsSUFBTVEscUJBQXFCLEdBQUdkLEtBQUssQ0FBQ1EsTUFBTSxDQUFDRSxrQkFBa0IsQ0FBQztFQUM5REkscUJBQXFCLENBQUNELE9BQU8sR0FBR0gsa0JBQWtCO0VBRWxELElBQU1LLFFBQVEsR0FBR2YsS0FBSyxDQUFDZ0IsV0FBVyxDQUNoQyxVQUFDQyxJQUFJLEVBQUVDLE9BQU8sRUFBRUMsSUFBSSxFQUFJO0lEcEJwQixJQUFJQyxFQUFFO0lDcUJSYixXQUFXLENBQUNNLE9BQU8sSUFBSSxDQUFDO0lBQ3hCLElBQU1RLFNBQVMsR0FBR2QsV0FBVyxDQUFDTSxPQUFPO0lBRXJDSixjQUFjLENBQUNJLE9BQU8sQ0FBQ1MsSUFBSSxDQUFDO01BQzFCTCxJQUFJLEVBQUpBLElBQUk7TUFDSkMsT0FBTyxFQUFQQSxPQUFPO01BQ1BDLElBQUksRUFBSkE7SURwQkEsQ0NxQkQsQ0FBQztJQUVGSSxPQUFPLENBQUNDLE9BQU8sQ0FBQSxDQUFFLENBQUNDLElBQUksQ0FBQyxZQUFLO01EckJ0QixJQUFJTCxFQUFFO01Dc0JWLElBQUlDLFNBQVMsS0FBS2QsV0FBVyxDQUFDTSxPQUFPLEVBQUU7UUFDckMsQ0FBQU8sRUFBQSxHQUFBUixnQkFBZ0IsQ0FBQ0MsT0FBTyxNQUFBLElBQUEsSUFBQU8sRUFBQSxLQUFBLEtBQUEsQ0FBQSxHQUFBLEtBQUEsQ0FBQSxHQUFBQSxFQUFBLENBQUFNLElBQUEsQ0FBQWQsZ0JBQUEsRUFBR0gsY0FBYyxDQUFDSSxPQUFPLENBQUM7UUFDbERKLGNBQWMsQ0FBQ0ksT0FBTyxHQUFHLEVBQUU7TUFDN0I7SUFDRixDQUFDLENBQUM7SUFFRjtJQUNBLENBQUFPLEVBQUEsR0FBQU4scUJBQXFCLENBQUNELE9BQU8sTUFBQSxJQUFBLElBQUFPLEVBQUEsS0FBQSxLQUFBLENBQUEsR0FBQSxLQUFBLENBQUEsR0FBQUEsRUFBQSxDQUFBTSxJQUFBLENBQUFaLHFCQUFBLEVBQUdHLElBQUksRUFBRUMsT0FBTyxFQUFFQyxJQUFJLENBQUM7RUFDdEQsQ0FBQyxFQUNELEVBQUUsQ0FDSDtFQUVELE9BQU9wQixJQUFBLENBQUNFLGlCQUFpQixDQUFDMEIsUUFBUSxFQUFBO0lBQUNDLEtBQUssRUFBRWIsUUFBUTtJQUFBVixRQUFBLEVBQUdBO0VBQVEsQ0FBQSxDQUE4QjtBQUM3RiIsImZpbGUiOiJjb21wb25lbnRzL1Jlc2l6ZU9ic2VydmVyL0NvbGxlY3Rpb24uanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCB9IGZyb20gXCJyZWFjdC9qc3gtcnVudGltZVwiO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuZXhwb3J0IGNvbnN0IENvbGxlY3Rpb25Db250ZXh0ID0gUmVhY3QuY3JlYXRlQ29udGV4dChudWxsKTtcbi8qKlxuICogQ29sbGVjdCBhbGwgdGhlIHJlc2l6ZSBldmVudCBmcm9tIGNoaWxkcmVuIFJlc2l6ZU9ic2VydmVyXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBDb2xsZWN0aW9uKHsgY2hpbGRyZW4sIG9uQmF0Y2hSZXNpemUgfSkge1xuICAgIGNvbnN0IHJlc2l6ZUlkUmVmID0gUmVhY3QudXNlUmVmKDApO1xuICAgIGNvbnN0IHJlc2l6ZUluZm9zUmVmID0gUmVhY3QudXNlUmVmKFtdKTtcbiAgICBjb25zdCBvbkNvbGxlY3Rpb25SZXNpemUgPSBSZWFjdC51c2VDb250ZXh0KENvbGxlY3Rpb25Db250ZXh0KTtcbiAgICBjb25zdCBvbkJhdGNoUmVzaXplUmVmID0gUmVhY3QudXNlUmVmKG9uQmF0Y2hSZXNpemUpO1xuICAgIG9uQmF0Y2hSZXNpemVSZWYuY3VycmVudCA9IG9uQmF0Y2hSZXNpemU7XG4gICAgY29uc3Qgb25Db2xsZWN0aW9uUmVzaXplUmVmID0gUmVhY3QudXNlUmVmKG9uQ29sbGVjdGlvblJlc2l6ZSk7XG4gICAgb25Db2xsZWN0aW9uUmVzaXplUmVmLmN1cnJlbnQgPSBvbkNvbGxlY3Rpb25SZXNpemU7XG4gICAgY29uc3Qgb25SZXNpemUgPSBSZWFjdC51c2VDYWxsYmFjaygoc2l6ZSwgZWxlbWVudCwgZGF0YSkgPT4ge1xuICAgICAgICB2YXIgX2E7XG4gICAgICAgIHJlc2l6ZUlkUmVmLmN1cnJlbnQgKz0gMTtcbiAgICAgICAgY29uc3QgY3VycmVudElkID0gcmVzaXplSWRSZWYuY3VycmVudDtcbiAgICAgICAgcmVzaXplSW5mb3NSZWYuY3VycmVudC5wdXNoKHtcbiAgICAgICAgICAgIHNpemUsXG4gICAgICAgICAgICBlbGVtZW50LFxuICAgICAgICAgICAgZGF0YSxcbiAgICAgICAgfSk7XG4gICAgICAgIFByb21pc2UucmVzb2x2ZSgpLnRoZW4oKCkgPT4ge1xuICAgICAgICAgICAgdmFyIF9hO1xuICAgICAgICAgICAgaWYgKGN1cnJlbnRJZCA9PT0gcmVzaXplSWRSZWYuY3VycmVudCkge1xuICAgICAgICAgICAgICAgIChfYSA9IG9uQmF0Y2hSZXNpemVSZWYuY3VycmVudCkgPT09IG51bGwgfHwgX2EgPT09IHZvaWQgMCA/IHZvaWQgMCA6IF9hLmNhbGwob25CYXRjaFJlc2l6ZVJlZiwgcmVzaXplSW5mb3NSZWYuY3VycmVudCk7XG4gICAgICAgICAgICAgICAgcmVzaXplSW5mb3NSZWYuY3VycmVudCA9IFtdO1xuICAgICAgICAgICAgfVxuICAgICAgICB9KTtcbiAgICAgICAgLy8gQ29udGludWUgYnViYmxpbmcgaWYgcGFyZW50IGV4aXN0XG4gICAgICAgIChfYSA9IG9uQ29sbGVjdGlvblJlc2l6ZVJlZi5jdXJyZW50KSA9PT0gbnVsbCB8fCBfYSA9PT0gdm9pZCAwID8gdm9pZCAwIDogX2EuY2FsbChvbkNvbGxlY3Rpb25SZXNpemVSZWYsIHNpemUsIGVsZW1lbnQsIGRhdGEpO1xuICAgIH0sIFtdKTtcbiAgICByZXR1cm4gX2pzeChDb2xsZWN0aW9uQ29udGV4dC5Qcm92aWRlciwgeyB2YWx1ZTogb25SZXNpemUsIGNoaWxkcmVuOiBjaGlsZHJlbiB9KTtcbn0iLG51bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/ResizeObserver/ResizeObserver.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { ResizeObserverProps } from './interface';
+import { Collection } from './Collection';
+declare const RefResizeObserver: React.ForwardRefExoticComponent<React.PropsWithoutRef<ResizeObserverProps> & React.RefAttributes<any>> & {
+    Collection: typeof Collection;
+};
+export default RefResizeObserver;