@mobileaction/action-kit 1.42.7-beta.2 → 1.42.7-beta.3

package/src/components/radio-card/stories/constants.ts

@@ -0,0 +1,98 @@
+import { ref } from 'vue';
+import type { Meta, StoryFn } from '@storybook/vue3';
+
+import MaRadioCard from '../index.vue';
+import MaRadioGroup from '../../radio/group.vue';
+import {MaIcon} from "@/index";
+
+export const baseConfig: Meta<typeof MaRadioCard> = {
+    component: MaRadioCard,
+    parameters: {
+    },
+    argTypes: {
+        disabled: {
+            control: { type: 'boolean' },
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaRadioCard, MaRadioGroup, MaIcon },
+    setup() {
+        const value = ref(1);
+        return { args, value };
+    },
+    template: `
+      <ma-radio-group v-model:value="value">
+        <ma-radio-card :value="1" hint="Supporting text" v-bind="args" text="Option A"/>
+        <ma-radio-card :value="2" v-bind="args" text="Option B"/>
+        <ma-radio-card :value="3" v-bind="args" text="Option C">
+          <template #suffix>
+            <div class="w-24">
+            <svg viewBox="0 0 98 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <g filter="url(#filter0_dddd_3707_11505)">
+                <rect x="9.64417" y="-70.8406" width="78.7031" height="163.092" rx="12.3265" fill="white"/>
+                <rect x="10.7295" y="-69.8477" width="76.5431" height="161.055" rx="11.2663" fill="white"/>
+                <rect x="12.7455" y="-67.6335" width="72.3909" height="156.709" rx="9.29161" fill="white"/>
+                <path d="M14.9894 -2.54224L66.5399 -2.70344" stroke="#EAECF0" stroke-width="5.13369"/>
+                <path d="M16.3027 10.2159C15.9577 10.2159 15.6796 10.1175 15.4685 9.9207C15.2575 9.72106 15.1462 9.48861 15.1348 9.22337H15.7552C15.778 9.35742 15.8393 9.46152 15.9391 9.53567C16.0389 9.60697 16.1601 9.64263 16.3027 9.64263C16.4311 9.64263 16.5352 9.61553 16.615 9.56134C16.6949 9.5043 16.7348 9.42872 16.7348 9.3346C16.7348 9.16633 16.5994 9.0437 16.3284 8.96669L16.0076 8.87257C15.7594 8.80127 15.5655 8.69004 15.4257 8.53888C15.286 8.38772 15.2147 8.19949 15.2118 7.97418C15.2118 7.69753 15.3045 7.47935 15.4899 7.31963C15.6753 7.15706 15.922 7.07578 16.23 7.07578C16.5409 7.07578 16.7933 7.1699 16.9872 7.35813C17.1812 7.54352 17.2839 7.75742 17.2953 7.99984H16.6792C16.6478 7.88006 16.5908 7.79164 16.5081 7.7346C16.4254 7.67756 16.3327 7.64904 16.23 7.64904C16.1159 7.64904 16.0218 7.67471 15.9477 7.72605C15.8764 7.77453 15.8393 7.84298 15.8364 7.9314C15.8336 8.02266 15.8635 8.09681 15.9263 8.15386C15.989 8.2109 16.086 8.25796 16.2172 8.29503L16.5723 8.39343C17.097 8.53888 17.3594 8.84548 17.3594 9.31321C17.3594 9.5756 17.261 9.79236 17.0642 9.96348C16.8703 10.1318 16.6165 10.2159 16.3027 10.2159ZM18.5612 10.2116C18.3074 10.2116 18.1092 10.126 17.9666 9.95493C17.8268 9.7838 17.7569 9.55421 17.7569 9.26615V8.02551H18.343V9.16776C18.343 9.50715 18.4642 9.67685 18.7067 9.67685C18.8436 9.67685 18.9505 9.62551 19.0275 9.52284C19.1074 9.42017 19.1473 9.26901 19.1473 9.06936V8.02551H19.7334V10.1646H19.1473V9.9207C19.0161 10.1146 18.8207 10.2116 18.5612 10.2116ZM21.2944 11.1014C20.9978 11.1014 20.7554 11.0259 20.5672 10.8747C20.3789 10.7236 20.2734 10.531 20.2506 10.2972H20.8238C20.898 10.5082 21.0591 10.6137 21.3073 10.6137C21.4442 10.6137 21.5582 10.5695 21.6495 10.4811C21.7436 10.3927 21.7907 10.2687 21.7907 10.1089V9.85653C21.7308 9.93924 21.6452 10.0077 21.534 10.0619C21.4228 10.1132 21.3016 10.1389 21.1704 10.1389C20.8909 10.1389 20.6527 10.0348 20.4559 9.82658C20.2591 9.61553 20.1607 9.36027 20.1607 9.06081C20.1607 8.75849 20.2591 8.50323 20.4559 8.29503C20.6527 8.08398 20.8909 7.97845 21.1704 7.97845C21.3044 7.97845 21.4256 8.00555 21.534 8.05974C21.6452 8.11107 21.7308 8.17952 21.7907 8.26509V8.02551H22.3768V10.0319C22.3768 10.3941 22.2727 10.6622 22.0645 10.8362C21.8591 11.013 21.6024 11.1014 21.2944 11.1014ZM20.9094 9.45439C21.0149 9.55706 21.1433 9.6084 21.2944 9.6084C21.4456 9.6084 21.5739 9.55706 21.6795 9.45439C21.785 9.35172 21.8377 9.22052 21.8377 9.06081C21.8377 8.90109 21.785 8.7699 21.6795 8.66722C21.5739 8.56455 21.4456 8.51321 21.2944 8.51321C21.1433 8.51321 21.0149 8.56455 20.9094 8.66722C20.8039 8.7699 20.7511 8.90109 20.7511 9.06081C20.7511 9.22052 20.8039 9.35172 20.9094 9.45439ZM23.939 11.1014C23.6424 11.1014 23.3999 11.0259 23.2117 10.8747C23.0235 10.7236 22.9179 10.531 22.8951 10.2972H23.4684C23.5425 10.5082 23.7037 10.6137 23.9518 10.6137C24.0887 10.6137 24.2028 10.5695 24.2941 10.4811C24.3882 10.3927 24.4352 10.2687 24.4352 10.1089V9.85653C24.3753 9.93924 24.2898 10.0077 24.1786 10.0619C24.0673 10.1132 23.9461 10.1389 23.8149 10.1389C23.5354 10.1389 23.2973 10.0348 23.1005 9.82658C22.9037 9.61553 22.8053 9.36027 22.8053 9.06081C22.8053 8.75849 22.9037 8.50323 23.1005 8.29503C23.2973 8.08398 23.5354 7.97845 23.8149 7.97845C23.949 7.97845 24.0702 8.00555 24.1786 8.05974C24.2898 8.11107 24.3753 8.17952 24.4352 8.26509V8.02551H25.0213V10.0319C25.0213 10.3941 24.9172 10.6622 24.709 10.8362C24.5037 11.013 24.247 11.1014 23.939 11.1014ZM23.554 9.45439C23.6595 9.55706 23.7878 9.6084 23.939 9.6084C24.0901 9.6084 24.2185 9.55706 24.324 9.45439C24.4295 9.35172 24.4823 9.22052 24.4823 9.06081C24.4823 8.90109 24.4295 8.7699 24.324 8.66722C24.2185 8.56455 24.0901 8.51321 23.939 8.51321C23.7878 8.51321 23.6595 8.56455 23.554 8.66722C23.4484 8.7699 23.3957 8.90109 23.3957 9.06081C23.3957 9.22052 23.4484 9.35172 23.554 9.45439ZM26.5707 10.2116C26.2427 10.2116 25.9732 10.1061 25.7621 9.89503C25.5539 9.68398 25.4498 9.41589 25.4498 9.09075C25.4498 8.77132 25.5554 8.50608 25.7664 8.29503C25.9803 8.08398 26.2498 7.97845 26.575 7.97845C26.903 7.97845 27.1753 8.09111 27.3921 8.31642C27.6088 8.53888 27.7087 8.84405 27.6916 9.23193H26.0231C26.0345 9.36598 26.0901 9.47863 26.1899 9.5699C26.2898 9.65831 26.4267 9.70252 26.6006 9.70252C26.7062 9.70252 26.7989 9.68255 26.8787 9.64263C26.9614 9.59984 27.0199 9.54138 27.0541 9.46722H27.6659C27.6031 9.68683 27.4719 9.86651 27.2723 10.0063C27.0727 10.1432 26.8388 10.2116 26.5707 10.2116ZM26.5579 8.45332C26.4238 8.45332 26.3112 8.48897 26.2199 8.56027C26.1315 8.62872 26.073 8.72427 26.0445 8.8469H27.0498C27.0185 8.71286 26.9557 8.61446 26.8616 8.55172C26.7703 8.48612 26.6691 8.45332 26.5579 8.45332ZM28.9442 10.2116C28.6704 10.2116 28.4436 10.1432 28.2639 10.0063C28.0843 9.86936 27.9887 9.69539 27.9773 9.48434H28.5891C28.6005 9.5756 28.6404 9.64548 28.7089 9.69396C28.7773 9.7396 28.8615 9.76241 28.9613 9.76241C29.1467 9.76241 29.2393 9.70537 29.2393 9.59129C29.2393 9.53425 29.218 9.49147 29.1752 9.46295C29.1352 9.43157 29.0668 9.40305 28.9698 9.37738L28.5677 9.27471C28.3852 9.22623 28.2483 9.14494 28.157 9.03086C28.0686 8.91393 28.0244 8.77418 28.0244 8.61161C28.0244 8.42623 28.1014 8.27507 28.2554 8.15813C28.4123 8.03835 28.6219 7.97845 28.8843 7.97845C29.1238 7.97845 29.3235 8.03977 29.4832 8.16241C29.6429 8.2822 29.7313 8.44619 29.7484 8.65439H29.1581C29.1324 8.50894 29.0383 8.43621 28.8757 8.43621C28.7987 8.43621 28.7374 8.45047 28.6918 8.47899C28.6461 8.50751 28.6233 8.54744 28.6233 8.59878C28.6233 8.69289 28.7046 8.75849 28.8672 8.79557L29.2436 8.89824C29.4518 8.94958 29.603 9.03086 29.6971 9.14209C29.7912 9.25047 29.8383 9.39022 29.8383 9.56134C29.8383 9.75813 29.7541 9.91642 29.5859 10.0362C29.4205 10.1531 29.2065 10.2116 28.9442 10.2116ZM31.2469 10.1902C31.0073 10.1902 30.8105 10.1246 30.6565 9.99343C30.5053 9.85938 30.4298 9.66687 30.4298 9.41589V8.53888H29.9977V8.02551H30.4298V7.43086H31.0159V8.02551H31.6191V8.53888H31.0159V9.30038C31.0159 9.43157 31.0444 9.52569 31.1014 9.58273C31.1585 9.63692 31.2511 9.66402 31.3795 9.66402C31.4708 9.66402 31.5506 9.65118 31.6191 9.62551V10.1432C31.5164 10.1745 31.3923 10.1902 31.2469 10.1902ZM32.992 10.2116C32.664 10.2116 32.3945 10.1061 32.1834 9.89503C31.9752 9.68398 31.8711 9.41589 31.8711 9.09075C31.8711 8.77132 31.9767 8.50608 32.1877 8.29503C32.4016 8.08398 32.6711 7.97845 32.9963 7.97845C33.3243 7.97845 33.5966 8.09111 33.8134 8.31642C34.0301 8.53888 34.13 8.84405 34.1128 9.23193H32.4444C32.4558 9.36598 32.5114 9.47863 32.6112 9.5699C32.7111 9.65831 32.848 9.70252 33.0219 9.70252C33.1275 9.70252 33.2202 9.68255 33.3 9.64263C33.3827 9.59984 33.4412 9.54138 33.4754 9.46722H34.0872C34.0244 9.68683 33.8932 9.86651 33.6936 10.0063C33.494 10.1432 33.2601 10.2116 32.992 10.2116ZM32.9792 8.45332C32.8451 8.45332 32.7325 8.48897 32.6412 8.56027C32.5528 8.62872 32.4943 8.72427 32.4658 8.8469H33.4711C33.4398 8.71286 33.377 8.61446 33.2829 8.55172C33.1916 8.48612 33.0904 8.45332 32.9792 8.45332ZM35.4082 10.2116C35.1259 10.2116 34.8877 10.1018 34.6938 9.8822C34.4999 9.66259 34.4029 9.4002 34.4029 9.09503C34.4029 8.78986 34.4999 8.52747 34.6938 8.30787C34.8877 8.08826 35.1259 7.97845 35.4082 7.97845C35.5451 7.97845 35.6678 8.00697 35.7761 8.06402C35.8845 8.12106 35.9672 8.18808 36.0243 8.26509V6.95599H36.6104V10.1646H36.0243V9.92498C35.9672 10.002 35.8845 10.069 35.7761 10.126C35.6678 10.1831 35.5451 10.2116 35.4082 10.2116ZM35.1387 9.51428C35.2385 9.62266 35.3697 9.67685 35.5323 9.67685C35.6949 9.67685 35.8246 9.62266 35.9216 9.51428C36.0214 9.40591 36.0713 9.26615 36.0713 9.09503C36.0713 8.92391 36.0214 8.78416 35.9216 8.67578C35.8246 8.5674 35.6949 8.51321 35.5323 8.51321C35.3697 8.51321 35.2385 8.5674 35.1387 8.67578C35.0417 8.78416 34.9933 8.92391 34.9933 9.09503C34.9933 9.26615 35.0417 9.40591 35.1387 9.51428Z" fill="#667085"/>
+                <rect x="14.9894" y="15.3972" width="68.0214" height="17.1123" rx="1.71123" fill="#EFF8FF"/>
+                <rect x="16.7007" y="17.1084" width="13.6898" height="13.6898" rx="2.05348" fill="#F29E61"/>
+                <path d="M22.8922 21.3201C23.1826 20.8172 23.9086 20.8172 24.199 21.3201L27.0417 26.244C27.3321 26.7469 26.9691 27.3756 26.3884 27.3756H20.7028C20.122 27.3756 19.7591 26.7469 20.0494 26.244L22.8922 21.3201Z" fill="white"/>
+                <line x1="33.7581" y1="19.0833" x2="64.67" y2="19.0833" stroke="#D0D5DD" stroke-width="2.45702" stroke-linecap="round"/>
+                <line x1="33.7581" y1="23.5752" x2="56.9695" y2="23.5752" stroke="#D0D5DD" stroke-width="2.45702" stroke-linecap="round"/>
+                <rect x="32.5295" y="26.9426" width="7.42246" height="3.85561" rx="0.855615" fill="#92BAFB"/>
+                <path d="M34.2434 29.3704L35.0289 27.5479H35.36L36.148 29.3704H35.7578L35.5807 28.9545H34.803L34.6284 29.3704H34.2434ZM35.1931 28.0382L34.9416 28.6285H35.4421L35.1931 28.0382ZM36.8038 29.3986C36.6344 29.3986 36.4915 29.3327 36.3752 29.2009C36.2588 29.0692 36.2006 28.9118 36.2006 28.7287C36.2006 28.5455 36.2588 28.3881 36.3752 28.2564C36.4915 28.1246 36.6344 28.0587 36.8038 28.0587C36.886 28.0587 36.9595 28.0758 37.0246 28.11C37.0896 28.1443 37.1392 28.1845 37.1734 28.2307V27.4452H37.5251V29.3704H37.1734V29.2266C37.1392 29.2728 37.0896 29.313 37.0246 29.3473C36.9595 29.3815 36.886 29.3986 36.8038 29.3986ZM36.6421 28.9802C36.702 29.0452 36.7807 29.0777 36.8783 29.0777C36.9758 29.0777 37.0537 29.0452 37.1118 28.9802C37.1717 28.9152 37.2017 28.8313 37.2017 28.7287C37.2017 28.626 37.1717 28.5421 37.1118 28.4771C37.0537 28.4121 36.9758 28.3796 36.8783 28.3796C36.7807 28.3796 36.702 28.4121 36.6421 28.4771C36.5839 28.5421 36.5548 28.626 36.5548 28.7287C36.5548 28.8313 36.5839 28.9152 36.6421 28.9802Z" fill="white"/>
+                <rect x="16.7006" y="37.0015" width="13.6898" height="13.6898" rx="2.05348" fill="#EAECF0"/>
+                <ellipse cx="23.5455" cy="43.8463" rx="3.42246" ry="3.42246" fill="white"/>
+                <line x1="33.7579" y1="38.5537" x2="71.3009" y2="38.5537" stroke="#D0D5DD" stroke-width="2.45702" stroke-linecap="round"/>
+                <line x1="33.7581" y1="43.0457" x2="56.9695" y2="43.0457" stroke="#EAECF0" stroke-width="2.45702" stroke-linecap="round"/>
+                <rect x="16.7006" y="56.4668" width="13.6898" height="13.6898" rx="2.05348" fill="#EAECF0"/>
+                <ellipse cx="23.5455" cy="63.3119" rx="3.42246" ry="3.42246" fill="white"/>
+                <line x1="33.7579" y1="58.0188" x2="71.3009" y2="58.0188" stroke="#D0D5DD" stroke-width="2.45702" stroke-linecap="round"/>
+                <line x1="33.7581" y1="62.5107" x2="56.9695" y2="62.5107" stroke="#EAECF0" stroke-width="2.45702" stroke-linecap="round"/>
+                <mask id="path-21-inside-1_3707_11505" fill="white">
+                  <path d="M12.8503 74.0068H85.1498V80.4239C85.1498 85.1494 81.3191 88.9801 76.5937 88.9801H21.4065C16.6811 88.9801 12.8503 85.1494 12.8503 80.4239V74.0068Z"/>
+                </mask>
+                <path d="M12.8503 74.0068H85.1498V80.4239C85.1498 85.1494 81.3191 88.9801 76.5937 88.9801H21.4065C16.6811 88.9801 12.8503 85.1494 12.8503 80.4239V74.0068Z" fill="#F9FAFB"/>
+                <ellipse cx="22.1338" cy="81.4935" rx="3.42246" ry="3.42246" fill="#EAECF0"/>
+                <ellipse cx="35.567" cy="81.4935" rx="3.42246" ry="3.42246" fill="#EAECF0"/>
+                <ellipse cx="49" cy="81.4935" rx="3.42246" ry="3.42246" fill="#EAECF0"/>
+                <ellipse cx="62.4331" cy="81.4935" rx="3.42246" ry="3.42246" fill="#EAECF0"/>
+                <path d="M75.7236 84.1316C74.191 84.1316 72.9429 82.8835 72.9429 81.3508C72.9429 79.8182 74.191 78.5701 75.7236 78.5701C77.2563 78.5701 78.5044 79.8182 78.5044 81.3508C78.5044 82.8835 77.2563 84.1316 75.7236 84.1316ZM75.7236 78.7127C74.2672 78.7127 73.0855 79.8975 73.0855 81.3508C73.0855 82.8042 74.2672 83.989 75.7236 83.989C77.18 83.989 78.3618 82.8042 78.3618 81.3508C78.3618 79.8975 77.18 78.7127 75.7236 78.7127Z" fill="#4478FF" stroke="#4478FF" stroke-width="0.285205"/>
+                <path d="M78.7183 84.4169C78.6999 84.4169 78.6826 84.4106 78.668 84.3959L78.0976 83.8255C78.0705 83.7985 78.0705 83.7519 78.0976 83.7249C78.1246 83.6979 78.1712 83.6979 78.1982 83.7249L78.7686 84.2953C78.7956 84.3223 78.7956 84.3689 78.7686 84.3959C78.754 84.4106 78.7367 84.4169 78.7183 84.4169Z" fill="#4478FF" stroke="#4478FF" stroke-width="0.285205"/>
+                <path d="M12.8503 73.7929H85.1498V74.2207H12.8503V73.7929ZM85.1498 88.9801H12.8503H85.1498ZM12.8503 88.9801V74.0068V88.9801ZM85.1498 74.0068V88.9801V74.0068Z" fill="#EAECF0" mask="url(#path-21-inside-1_3707_11505)"/>
+              </g>
+              <defs>
+                <filter id="filter0_dddd_3707_11505" x="-0.000488281" y="-72.8408" width="98.0005" height="197.243" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                  <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                  <feOffset dy="1"/>
+                  <feGaussianBlur stdDeviation="1.5"/>
+                  <feColorMatrix type="matrix" values="0 0 0 0 0.560784 0 0 0 0 0.560784 0 0 0 0 0.560784 0 0 0 0.1 0"/>
+                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3707_11505"/>
+                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                  <feOffset dy="6"/>
+                  <feGaussianBlur stdDeviation="3"/>
+                  <feColorMatrix type="matrix" values="0 0 0 0 0.560784 0 0 0 0 0.560784 0 0 0 0 0.560784 0 0 0 0.09 0"/>
+                  <feBlend mode="normal" in2="effect1_dropShadow_3707_11505" result="effect2_dropShadow_3707_11505"/>
+                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                  <feOffset dy="13"/>
+                  <feGaussianBlur stdDeviation="4"/>
+                  <feColorMatrix type="matrix" values="0 0 0 0 0.560784 0 0 0 0 0.560784 0 0 0 0 0.560784 0 0 0 0.05 0"/>
+                  <feBlend mode="normal" in2="effect2_dropShadow_3707_11505" result="effect3_dropShadow_3707_11505"/>
+                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+                  <feOffset dy="23"/>
+                  <feGaussianBlur stdDeviation="4.5"/>
+                  <feColorMatrix type="matrix" values="0 0 0 0 0.560784 0 0 0 0 0.560784 0 0 0 0 0.560784 0 0 0 0.01 0"/>
+                  <feBlend mode="normal" in2="effect3_dropShadow_3707_11505" result="effect4_dropShadow_3707_11505"/>
+                  <feBlend mode="normal" in="SourceGraphic" in2="effect4_dropShadow_3707_11505" result="shape"/>
+                </filter>
+              </defs>
+            </svg>
+            </div>
+          </template>
+        </ma-radio-card>
+      </ma-radio-group>
+    `,
+});

package/src/components/radio-card/stories/default.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import type MaRadioCard from '../index.vue';
+
+const meta: Meta<typeof MaRadioCard> = {
+  title: 'Advanced/MaRadioCard',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaRadioCard>;
+
+export const Default: Story = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  render: Template.bind({}),
+};
+export const Disabled: Story = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+  args: {
+    disabled: true,
+  },
+  render: Template.bind({}),
+};

package/src/components/radio-card/stories/example.mdx

@@ -0,0 +1,17 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Advanced/MaRadioCard/Example" />
+
+## RadioCard Usage
+
+```bash
+  <ma-radio-group v-model:value="value">
+    <ma-radio-card :value="1" hint="Supporting text" v-bind="args" text="Option A"/>
+    <ma-radio-card :value="2" v-bind="args" text="Option B"/>
+    <ma-radio-card :value="3" v-bind="args" text="Option C">
+      <template #suffix>
+        <!-- image -->
+      </template>
+    </ma-radio-card>
+  </ma-radio-group>
+```

package/src/components/rate/assets/styles.scss

@@ -0,0 +1,43 @@
+$colors: (
+  "green": "primary-green",
+  "orange": "primary-orange",
+  "red": "red-400",
+);
+
+.ak-rate {
+  @apply flex items-center text-gray-200 outline-none;
+  &--small {
+    @apply gap-0.5;
+  }
+  &--medium {
+    @apply gap-1;
+  }
+  &--large {
+    @apply gap-1.5;
+  }
+
+  &__item {
+    @apply cursor-pointer;
+    &__icon {
+      @apply transition-colors duration-[0.2s] pointer-events-none;
+    }
+  }
+
+  @each $name, $color in $colors {
+    &--#{$name} {
+      .ak-rate__item {
+        &__icon {
+          &--filled {
+            @apply text-#{$color};
+          }
+        }
+      }
+    }
+  }
+
+  &--disabled {
+    .ak-rate__item {
+      @apply cursor-default;
+    }
+  }
+}

package/src/components/rate/components/star.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+export default {
+  name: 'MaRateStar',
+};
+</script>
+<script setup lang="ts">
+import { computed } from "vue";
+import { IconSize } from "@/components/icon/types";
+import MaIcon from "../../icon/index.vue";
+
+export interface MaRateStarProps {
+    value: number,
+    starRate: number,
+    iconSize: IconSize
+}
+
+const props = defineProps<MaRateStarProps>();
+
+const iconClasses =  computed(() => [
+    `ak-rate__item__icon`,
+    {
+        'ak-rate__item__icon--filled': props.value + 0.5 >= props.starRate
+    }
+]);
+
+const isHalf = computed(() => props.starRate - 0.5 === props.value);
+
+const iconName = computed(() => isHalf.value? 'star-half-colored': 'star-bold');
+
+</script>
+<template>
+    <transition name="fade">
+        <ma-icon
+            :class="iconClasses"
+            :name="iconName"
+            :size="props.iconSize"
+        />
+    </transition>
+</template>

package/src/components/rate/index.vue

@@ -0,0 +1,124 @@
+<script lang="ts">
+export default {
+  name: 'MaRate',
+};
+</script>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { MaRateSize, MaRateColor } from "./types";
+import MaRateStar from "./components/star.vue";
+
+export interface MaRateProps {
+    value: number,
+    allowClear?: boolean,
+    allowHalf?: boolean,
+    disabled?: boolean,
+    size?: MaRateSize,
+    color?: MaRateColor,
+    tabIndex?: number,
+}
+
+const props = withDefaults(defineProps<MaRateProps>(), {
+    size: 'small',
+    color: 'orange',
+    tabIndex: 0,
+});
+
+const emits = defineEmits(["update:value", "change"]);
+
+const hoveredRate = ref(0);
+
+const classList = computed(() => [
+    `ak-rate ak-rate--${props.size} ak-rate--${props.color}`,
+    {
+        'ak-rate--disabled': props?.disabled
+    }
+]);
+
+const starIconSize = computed(() => {
+    switch (props.size) {
+        case 'medium':
+            return 'sm';
+        case 'large':
+            return 'md';
+        default:
+            return 'xs'
+    }
+});
+
+const rateTabIndex = computed(() => props?.disabled? -1 : props.tabIndex);
+
+const handleClick = () => {
+    if(props?.disabled){
+        return;
+    }
+    if(props?.allowClear && hoveredRate.value === props.value){
+        setRate(0);
+        return;
+    }
+    setRate(hoveredRate.value);
+};
+
+const handleMouseOver = (rate: number) => {
+    if(props?.disabled){
+        return;
+    }
+    hoveredRate.value = rate;
+};
+
+const handleMouseLeave = () => {
+    hoveredRate.value = 0;
+};
+
+const checkHover = (e: MouseEvent, rate: number) => {
+    if(!props?.allowHalf || props.disabled){
+        return;
+    }
+    if(e.offsetX < (e.target as HTMLElement).clientWidth / 2){
+        hoveredRate.value = rate - 0.5;
+    }else {
+        hoveredRate.value = rate;
+    }
+};
+
+const handleKeydown = (e: KeyboardEvent) => {
+    if(props?.disabled){
+        return;
+    }
+    if(e.key === 'ArrowRight' && props.value < 5){
+        setRate(props.value + (props.allowHalf? 0.5: 1));
+    }else if(e.key === 'ArrowLeft' && props.value > 0){
+        setRate(props.value - (props.allowHalf? 0.5: 1));
+    }
+}
+
+const setRate = (rate: number) => {
+    emits("update:value", rate);
+    emits("change", rate);
+};
+
+</script>
+<template>
+   <ul
+        :class="classList"
+        @mouseleave="handleMouseLeave"
+        @keydown="handleKeydown"
+        :tabindex="rateTabIndex"
+    >
+        <li
+            class="ak-rate__item"
+            v-for="rate in 5"
+            :key="rate"
+            @mousemove="checkHover($event, rate)"
+            @mouseover="handleMouseOver(rate)"
+            @click="handleClick()"
+        >
+            <ma-rate-star
+                :star-rate="rate"
+                :value="hoveredRate || props.value"
+                :icon-size="starIconSize"
+            />
+        </li>
+   </ul>
+</template>
+<style lang="scss" src="./assets/styles.scss"></style>

package/src/components/rate/stories/constants.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue';
+import { MaRateColors, MaRateSizes } from "../types";
+
+import MaRate from '../index.vue';
+
+export const baseConfig: Meta<typeof MaRate> = {
+    component: MaRate,
+    parameters: {
+        docs: {
+            description: {
+                component: `<p>Figma Designs <a href="https://www.figma.com/file/LsEcZ7CR3mf1vzBpCRgN7m/Design-Foundation_VD?type=design&node-id=28-48913&mode=design&t=9TsiQejvVeY06ruN-4" target="_blank">here!</a></p><p>
+                </p>`,
+            },
+        },
+    },
+    argTypes: {
+        color: {
+            control: { type: 'select' },
+            options: MaRateColors,
+        },
+        size: {
+            control: { type: 'select' },
+            options: MaRateSizes,
+        },
+        value: {
+            control: { type: 'number' },
+            description: '(v-model)'
+        },
+    },
+};
+
+export const Template: StoryFn = (args: any) => ({
+    components: { MaRate },
+    setup() {
+        const rate = ref(3);
+        return { args, rate };
+    },
+    template: `<ma-rate v-model:value="rate" v-bind="args" />`,
+});

package/src/components/rate/stories/default.stories.ts

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { baseConfig, Template } from './constants';
+
+import type MaRate from '../index.vue';
+
+const meta: Meta<typeof MaRate> = {
+  title: 'Core/MaRate',
+  ...baseConfig,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MaRate>;
+
+export const Default: Story = Template.bind({});
+Default.args = {};
+
+export const AllowHalf: Story = Template.bind({});
+AllowHalf.args = {
+  allowHalf: true,
+  size: 'medium',
+};
+AllowHalf.parameters = {
+  docs: {
+    description: {
+      story: 'Support select half star.',
+    },
+  },
+};
+
+export const AllowClear: Story = Template.bind({});
+AllowClear.args = {
+  allowClear: true,
+  size: 'medium',
+};
+AllowClear.parameters = {
+  docs: {
+    description: {
+      story: 'Support set allow to clear star when click again.',
+    },
+  },
+};
+
+export const ReadOnly: Story = Template.bind({});
+ReadOnly.args = {
+  disabled: true,
+  size: 'medium',
+};
+ReadOnly.parameters = {
+  docs: {
+    description: {
+      story: "Read only, can't use mouse to interact.",
+    },
+  },
+};

package/src/components/rate/types.ts

@@ -0,0 +1,14 @@
+export const MaRateSizes = [
+    "small",
+    "medium",
+    "large",
+] as const;
+
+export const MaRateColors = [
+    "orange",
+    "green",
+    "red",
+] as const;
+
+export type MaRateSize = (typeof MaRateSizes)[number];
+export type MaRateColor = (typeof MaRateColors)[number];

package/src/components/result/assets/styles.scss

@@ -0,0 +1,53 @@
+.ak-result {
+  @apply rounded-lg flex flex-col items-center w-full max-w-[480px] p-6 bg-white relative;
+}
+.ak-result-wrapper {
+  @apply p-12  flex flex-col items-center;
+}
+.ak-result-success,
+.ak-result-error,
+.ak-result-info,
+.ak-result-warning {
+  @apply text-[32px] mb-4;
+}
+
+.ak-result-title {
+  @apply text-primary-dark font-euclid text-2xl not-italic font-medium leading-6 mx-0 my-4;
+}
+
+.ak-result-subtitle {
+  @apply text-gray-400 font-euclid text-center text-sm not-italic font-normal leading-5;
+}
+
+.ak-result-extra {
+  @apply w-full flex justify-center gap-2 pt-12;
+}
+
+.ak-result-success .ma-icon {
+  @apply w-[120px] h-[120px] text-primary-green;
+}
+
+.ak-result-error .ma-icon {
+  @apply w-[120px] h-[120px] text-red-500;
+}
+
+.ak-result-info .ma-icon {
+  @apply w-[120px] h-[120px] text-primary-dark-blue;
+}
+
+.ak-result-warning .ma-icon {
+  @apply w-[120px] h-[120px] text-primary-orange;
+}
+.ak-result-403, .ak-result-404, .ak-result-500 {
+  svg {
+    width: 200px;
+    height: 200px;
+  }
+}
+.close-button {
+  cursor: pointer;
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding: 1rem;
+}

package/src/components/result/index.vue

@@ -0,0 +1,71 @@
+<script lang="ts">
+export default {
+  name: 'MaResult',
+};
+</script>
+
+<script setup lang="ts">
+import MaIcon from '@/components/icon/index.vue';
+import { ref, computed } from 'vue';
+
+export interface MaResultProps {
+  status?: string;
+  title?: string;
+  subTitle?: string;
+  closable?: boolean;
+}
+
+const props = withDefaults(defineProps<MaResultProps>(), {
+  status: 'success',
+});
+
+
+const iconName = computed(() => {
+    switch (props.status) {
+        case 'success':
+            return 'tick-circle-bold';
+        case 'error':
+            return 'close-circle-bold';
+        case 'warning':
+            return 'warning';
+        case 'info':
+            return 'info-circle-2-bold';
+        case '403':
+            return '403';
+        case '404':
+            return '404';
+        case '500':
+            return '500';
+        default:
+            return '';
+    }
+});
+const showResult = ref(true);
+const handleClose = () => {
+    showResult.value = false;
+};
+
+</script>
+
+<template>
+  <div class="ak-result">
+  <div class="ak-result-wrapper">
+    <div :class="`ak-result-${props.status}`">
+      <div>
+          <ma-icon size="lg" :name="iconName"/>
+      </div>
+
+    </div>
+    <div v-if="!$slots.titleSlot" class="ak-result-title">{{ props.title }}</div>
+    <slot class="ak-result-title" name="titleSlot"></slot>
+    <div v-if="!$slots.subTitleSlot" class="ak-result-subtitle">{{ props.subTitle }}</div>
+    <slot class="ak-result-subtitle" name="subTiteSlot"></slot>
+    <button v-if="props.closable" @click="handleClose" class="close-button"><ma-icon name="close"/></button>
+    <div class="ak-result-extra">
+      <slot></slot>
+    </div>
+  </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./assets/styles.scss"></style>