@modul/mbui 0.0.27-beta-webpack-559623b1 → 0.0.27-beta-webpack-6d7a3f6c

package/src/index.ts

@@ -0,0 +1,135 @@
+import "./assets/css/global.css"
+import { Tabs } from './Tabs'
+import { Slider } from './Slider'
+import { Popover } from './Popover'
+import Logo from './Logo'
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './Input-OTP'
+import {
+	BottomNavigation,
+	BottomNavigationList,
+	BottomNavigationListItem,
+	BottomNavigationLink,
+} from './BottomNavigation'
+import * as Icon from './Icon'
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible'
+import {
+	AccountCollapsible,
+	AccountCollapsibleHeader,
+	AccountCollapsibleTrigger,
+	AccountCollapsibleContent,
+	AccountCollapsibleContentItem,
+} from './Collapsible'
+import { Button, buttonVariants, ButtonWidget } from './Button'
+import { Audio } from './Audio'
+import { cn } from './@/lib/utils'
+import { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerTitle } from './Drawer'
+import { Page } from './Page'
+import { Chip } from './Chip'
+import { InputField, InputLabel, InputMask } from './Input'
+import { Alert } from './Alert'
+import { Switch } from './Switch'
+import { Label } from './Label'
+import { Textarea } from './Textarea'
+import { SelectAccountCard, SelectAsync, SelectAccount, Select } from './Select'
+import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage } from './Form'
+import { Calendar } from './Calendar'
+import { DatePicker } from './DatePicker'
+import { Progress } from './Progress'
+import {
+	AlertDialog,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+} from './AlertDialog'
+import { MessageTyping } from "./Chat"
+import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses } from './FavoritePyments'
+import { DigitKeyPad } from "./DigitKeyPad"
+import { Badge, badgeVariants } from './Badge'
+import { Toaster, toast } from './Toaster'
+import { Checkbox } from './Checkbox'
+import { Swipe2Show } from './Swipe2Show'
+import { Skeleton } from './Skeleton'
+
+export {
+	Tabs,
+	Slider,
+	Popover,
+	Logo,
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSlot,
+	InputOTPSeparator,
+	Collapsible,
+	CollapsibleTrigger,
+	CollapsibleContent,
+	AccountCollapsible,
+	AccountCollapsibleHeader,
+	AccountCollapsibleTrigger,
+	AccountCollapsibleContent,
+	AccountCollapsibleContentItem,
+	Button,
+	buttonVariants,
+	InputField,
+	InputLabel,
+	Audio,
+	cn,
+	Icon,
+	Drawer,
+	DrawerTrigger,
+	DrawerTitle,
+	DrawerClose,
+	DrawerContent,
+	BottomNavigation,
+	BottomNavigationList,
+	BottomNavigationListItem,
+	BottomNavigationLink,
+	Page,
+	Chip,
+	Progress,
+	Alert,
+	Switch,
+	Label,
+	Textarea,
+	SelectAccountCard,
+	SelectAccount,
+	SelectAsync,
+	Select,
+	Form,
+	FormLabel,
+	FormField,
+	FormItem,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	Calendar,
+	DatePicker,
+	InputMask,
+	AlertDialog,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+	MessageTyping,
+	FavoritePaymentsList,
+	FavoritePaymentsItem,
+	FarvoritePaymentDescription,
+	farvoriteLinkClasses,
+	Badge,
+	badgeVariants,
+	DigitKeyPad,
+	ButtonWidget,
+	Toaster,
+	toast,
+	Checkbox,
+	Swipe2Show,
+	Skeleton,
+}

package/src/pages/payments/SmsSign/sms-sign.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react'
+import {
+	Alert,
+	Button,
+	cn,
+	Drawer,
+	DrawerContent,
+	DrawerTitle,
+	DrawerTrigger,
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSlot,
+	Page,
+} from '../../..'
+import { Close } from '../../../Icon'
+
+const InputSMS: React.FC = (props) => (
+	<InputOTP
+		maxLength={5}
+		{...props}
+	>
+		<InputOTPGroup className="gap-[10px] mx-auto">
+			<InputOTPSlot
+				index={0}
+				className="font-bold text-[40px] leading-[1.1]"
+			/>
+			<InputOTPSlot
+				className="font-bold text-[40px] leading-[1.1]"
+				index={1}
+			/>
+			<InputOTPSlot
+				className="font-bold text-[40px] leading-[1.1]"
+				index={2}
+			/>
+			<InputOTPSlot
+				className="font-bold text-[40px] leading-[1.1]"
+				index={3}
+			/>
+			<InputOTPSlot
+				className="font-bold text-[40px] leading-[1.1]"
+				index={4}
+			/>
+		</InputOTPGroup>
+	</InputOTP>
+)
+
+export const smsSignPage = () => {
+	const [snap, setSnap] = useState<number | string | null>('148px')
+	return (
+		<Page>
+			<Page.Navbar>
+				<a
+					href=""
+					className="ml-auto"
+				>
+					<Close className="text-primary" />
+				</a>
+			</Page.Navbar>
+			<Page.Content className='flex flex-col'>
+				<h1 className="mt-[32px] mb-[16px] font-medium text-[20px] text-center leading-[1.2]">
+					Введите код из&nbsp;сообщения
+					<br />
+					<span className="font-normal text-[16px] leading-[1.3]">Код отправлен на +7 960 888 00-00</span>
+				</h1>
+
+				<form className='flex flex-col grow'>
+					<div
+						className="relative mb-[8px] h-[24px] text-center text-critical"
+						role="alert"
+					>
+						{true && <span>Введен неверный ПИН-код</span>}
+					</div>
+					<InputSMS />
+					<p className="mt-[32px] text-[12px] text-center text-light leading-[1.16]">
+						Выслать код повторно через{' '}
+						<span
+							role="timer"
+							aria-live="polite"
+							aria-atomic="true"
+						>
+							1&nbsp;минуту 16&nbsp;секунд
+						</span>
+					</p>
+					<div className='mt-auto'>
+					<Button className='mt-[32px] w-full'>Подтвердить</Button>
+					</div>
+				</form>
+			</Page.Content>
+		</Page>
+	)
+}