@team_yumi/ramen 0.4.0-next.20231219-decd25b-61c12120c13e6cf198e03e06cba26629 → 0.4.0-next.20231227-de405c4-09379fe933156a3b642c37fb112ad30d

package/components/mobile/x-modal/root.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Collections } from './../../../models';
+export interface IAction {
+    /**
+     * The key of the action
+     */
+    key: string;
+    /**
+     * Text for button
+     */
+    text?: string;
+    /**
+     * Type of button 'default', 'solid', 'tonal', 'outline', 'clear'
+     */
+    type?: (typeof Collections.IType)[number];
+    /**
+     * Icon for button
+     */
+    icon?: (typeof Collections.IIcon)[number];
+    /**
+     * State disabled for button
+     */
+    disabled?: boolean;
+    /**
+     * Loading state in button
+     */
+    loading?: boolean;
+    /**
+     * Render custom component
+     */
+    render?: (key: string) => React.ReactNode;
+    /**
+     * Event fired when button is clicked
+     */
+    onAction?: () => void;
+}
+export interface IProps {
+    /**
+     * Child elements to wrap
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom component, which is placed below the title and subtitle
+     */
+    headerChildren?: React.ReactNode;
+    /**
+     * Icon for modal
+     */
+    icon?: (typeof Collections.IIcon)[number];
+    /**
+     * Title for modal
+     */
+    title?: string;
+    /**
+     * Subtitle for modal
+     */
+    subtitle?: string;
+    /**
+     * Size of modal 'xxs', 'xs', 's', 'm', 'l', 'xl'
+     */
+    size?: (typeof Collections.ISize)[number];
+    /**
+     * Show or hide modal
+     */
+    visible: boolean;
+    /**
+     * If true, show icon close
+     */
+    closable?: boolean;
+    /**
+     * Event fired when icon close is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Arrays for show button
+     */
+    actions?: Array<IAction>;
+    /**
+     * Event fired on buttons
+     */
+    onActionClick?: (key: string) => void;
+}
+declare const XModal: React.FC<IProps>;
+export default XModal;

package/index.css

@@ -3625,7 +3625,7 @@
     background-color: transparent;
 }
 
-.root-module_xmodal__IIep8 {
+.root-module_x-modal__bOyFq {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -3635,41 +3635,41 @@
   display: none;
 }
 
-.root-module_xmodal__IIep8.root-module_xmodal-visible__rNM4C {
+.root-module_x-modal__bOyFq.root-module_x-modal-visible__kkdBb {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }
 
-.root-module_xmodal-size_xl__uHWRl.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_xl__bYyI9.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 95%;
 }
 
-.root-module_xmodal-size_l__-Np16.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_l__3Ur5b.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 85%;
 }
 
-.root-module_xmodal-size_m__wi3d-.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_m__qnsVl.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 70%;
 }
 
-.root-module_xmodal-size_s__qLBMt.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_s__9YkzV.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 415px;
 }
 
-.root-module_xmodal-size_xs__jgYyX.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_xs__-1-Vc.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 352px;
 }
 
-.root-module_xmodal-size_xxs__sqPRk.root-module_xmodal-visible__rNM4C .root-module_xmodal__modal-show__vB6WU {
+.root-module_x-modal-size_xxs__DcvRv.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
   height: 250px;
 }
 
-.root-module_xmodal__IIep8.root-module_xmodal-visible__rNM4C .root-module_xmodal__backdrop__6xGWs {
+.root-module_x-modal__bOyFq.root-module_x-modal-visible__kkdBb .root-module_x-modal__backdrop__Kj2dm {
   display: block;
 }
 
-.root-module_xmodal__modal__iutrg {
+.root-module_x-modal__modal__4ywZm {
   height: 0;
   position: relative;
   background-color: var(--color-neutral-lightest);
@@ -3681,7 +3681,7 @@
   justify-content: space-between;
 }
 
-.root-module_xmodal__backdrop__6xGWs {
+.root-module_x-modal__backdrop__Kj2dm {
   position: fixed;
   top: 0px;
   left: 0px;
@@ -3691,58 +3691,64 @@
   opacity: 0.6;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__close__87-1a {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__close__2-hP- {
   position: absolute;
-  right: var(--xbox-padding-m);
-  top: var(--xbox-padding-m);
+  right: var(--xbox-padding-l);
+  top: var(--xbox-padding-l);
   border-radius: 50%;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__close__87-1a > button > div {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__close__2-hP- > button > div {
   background-color: var(--color-neutral-light);
   padding: 4px;
   border-radius: 50%;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L > .root-module_xmodal__modal__header__icon__s-sye {
-  padding-bottom: 4px;
+.root-module_x-modal__modal__header__icon__KbIDv,  .root-module_x-modal__modal__header__icon__KbIDv > div{
+  height: 36px;
+  width: 36px;
+}
+
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__icon__KbIDv {
+  padding-bottom: var(--xbox-padding-s);
   display: block;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L > .root-module_xmodal__modal__header__title__sYCME {
-  padding-top: 24px;
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__title__WQZg7 {
   display: block;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L > .root-module_xmodal__modal__header__subtitle__xPXVt {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__subtitle__2KWGW {
   display: block;
   padding-top: var(--xbox-padding-xs);
   opacity: 0.5;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L > .root-module_xmodal__modal__header__children__rTV29 {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__children__RYX9d {
   padding-top: var(--xbox-padding-xs);
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__header__FtI0L {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ {
   padding: 0 var(--xbox-padding-xl);
-  padding-top: 32px;
-  padding-bottom: 8px;
+  padding-top: 24px;
+  padding-bottom: 16px;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__body__eiE3Y {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__body__bBjAl {
   padding: var(--xbox-padding-xl);
+  padding-top: 0;
   overflow: auto;
   flex: 1;
 }
 
-.root-module_xmodal__modal__iutrg > .root-module_xmodal__modal__actions__hybm9 {
+.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__actions__cGHKS {
   display: block;
   padding: var(--xbox-padding-xl);
   margin-bottom: env(safe-area-inset-bottom);
+  padding-bottom: 32px;
 }
 
 .root-module_xselect__eYomf {