@team_yumi/ramen 0.4.0-next.20231214-a3ed314-fe184b5e42ce196121aef559fab7cb54 → 0.4.0-next.20231214-c460ba2-9df80c472cdaac4a93bf62e7bee9667c

package/components/mobile/x-radio-button-option/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './root';
+export default Root;

package/components/mobile/x-radio-button-option/root.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { Collections } from "@yumi/models";
+export interface IProps {
+    /**
+     * If true, the elements will be rendered as a skeleton
+     */
+    skeleton?: boolean;
+    /**
+     * The label of the radio button
+     */
+    label: string;
+    /**
+     * The onChange event handler
+     */
+    onChange: (value: boolean) => void;
+    /**
+     * The icon of the radio button
+     */
+    icon?: (typeof Collections.IIcon)[number];
+    /**
+     * The symbol of the radio button
+     */
+    symbol?: (typeof Collections.ISymbol)[number];
+    /**
+     * If true, the radio button will be selected
+     */
+    selected: boolean;
+    /**
+     * If true, the radio button will be disabled
+     */
+    disabled?: boolean;
+}
+declare const XRadioButtonOption: React.FC<IProps>;
+export default XRadioButtonOption;

package/index.css

@@ -5077,3 +5077,48 @@
 .root-module_x-bottom-sheet--transition-out__SSw-- {
   max-height: 12% !important;
 }
+
+.root-module_x-radio-button-option__zGBa4 {
+  gap: 6px;
+  display: flex;
+  align-items: center;
+  border-radius: 999px;
+  border: 1px solid #F5F5F5;
+  padding: 12px 16px 12px 24px;
+  background: var(--color-neutral-lightest, #FFF);
+}
+
+.root-module_x-radio-button-option--with-symbol__EMF2d {
+  padding: 8px 16px 8px 8px;
+}
+
+.root-module_x-radio-button-option--disabled__Esaom {
+  cursor: not-allowed;
+  pointer-events: none;
+  border: 1px solid var(--neutral-dark-20, #F5F5F5);
+  background: var(--neutral-dark-20, #F5F5F5);
+}
+
+.root-module_x-radio-button-option--active__T5-vA {
+  border-radius: 999px;
+  border: 1px solid var(--neutral-dark-90, #1F1F1F);
+}
+
+.theme-arcus .root-module_x-radio-button-option--active__T5-vA {
+  border-color: transparent;
+  background: linear-gradient(#fff, #fff) padding-box, var(--color-gradient-arcus) border-box;
+}
+
+.root-module_x-radio-button-option__radio-button__5jnJ5 {
+  width: 100%;
+}
+
+.root-module_x-radio-button-option__symbol__8e8sD {
+  display: flex;
+  border-radius: 100px;
+  background: var(--neutral-dark-20, #F5F5F5);
+  padding: 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}