@modul/mbui 0.0.28-beta-pv-53496-1f287a18 → 0.0.28

package/src/Icon/icons/WhatsappCircle.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgWhatsappCircle = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={20}
+		height={20}
+		fill="none"
+		viewBox="0 0 20 20"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M10 1a9 9 0 1 0 .001 18.001A9 9 0 0 0 10 1m0 14c-.97 0-1.87-.29-2.64-.77L5 15l.86-2.2C5.32 12 5 11.04 5 10c0-2.76 2.24-5 5-5s5 2.24 5 5-2.24 5-5 5m2.44-3.23c-.09.17-.22.32-.39.46-.1.09-.36.32-.74.25-2.16-.42-3.26-1.63-3.79-3.89-.06-.28.02-.43.23-.65.14-.15.3-.28.47-.39.18-.09.34-.06.46.08l.63.88c.12.21.04.43-.06.52l-.19.14c-.06.05-.15.1-.14.2.15.89.8 1.47 1.61 1.72.11.03.18 0 .26-.1.05-.06.18-.23.18-.23.09-.12.32-.2.52-.08l.88.63c.16.13.16.28.07.46"
+		/>
+	</SvgIcon>
+)
+export default SvgWhatsappCircle

package/src/Icon/icons/Wheelchair.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react'
+import type { SVGProps } from 'react'
+import { SvgIcon } from '../SvgIcon'
+const SvgWheelchair = (props: SVGProps<SVGSVGElement>) => (
+	<SvgIcon
+		width={24}
+		height={24}
+		fill="none"
+		viewBox="0 0 24 24"
+		{...props}
+	>
+		<path
+			fill="currentColor"
+			d="M7.52 3.1c0-1.05.86-1.9 1.92-1.9a1.91 1.91 0 1 1 0 3.81 1.91 1.91 0 0 1-1.92-1.9Zm14 16.69-2.57-6.35c-.19-.49-.66-.8-1.19-.8h-5.35l-.51-2.55h4.58c.7 0 1.28-.57 1.28-1.27 0-.7-.57-1.27-1.28-1.27h-5.1l-.04-.25a1.28 1.28 0 0 0-1.52-1c-.69.15-1.13.8-1 1.5l1.29 6.36c.11.58.64 1.02 1.25 1.02h5.53l2.24 5.55a1.28 1.28 0 0 0 2.38-.94Zm-7.27-.74a5.75 5.75 0 0 1-9.3-4.51c.01-1.52.61-2.96 1.7-4.04.5-.5.5-1.3 0-1.8-.5-.49-1.3-.49-1.8 0a8.13 8.13 0 0 0-2.45 5.84 8.3 8.3 0 0 0 13.43 6.52c.56-.43.65-1.23.22-1.78a1.27 1.27 0 0 0-1.8-.23Z"
+		/>
+	</SvgIcon>
+)
+export default SvgWheelchair

package/src/Icon/icons/index.ts

@@ -0,0 +1,209 @@
+export { default as AddList } from './AddList'
+export { default as AlertCircleSolid } from './AlertCircleSolid'
+export { default as AlertCircle } from './AlertCircle'
+export { default as AlertDiamondSolid } from './AlertDiamondSolid'
+export { default as AlertDiamond } from './AlertDiamond'
+export { default as AlertShield } from './AlertShield'
+export { default as Android } from './Android'
+export { default as Apple } from './Apple'
+export { default as Archive } from './Archive'
+export { default as ArrowCircle } from './ArrowCircle'
+export { default as ArrowDown } from './ArrowDown'
+export { default as ArrowLeft } from './ArrowLeft'
+export { default as ArrowRight } from './ArrowRight'
+export { default as ArrowUpCorner } from './ArrowUpCorner'
+export { default as ArrowUp } from './ArrowUp'
+export { default as ArrowsChange } from './ArrowsChange'
+export { default as Atm } from './Atm'
+export { default as Attach } from './Attach'
+export { default as Bank } from './Bank'
+export { default as Bold } from './Bold'
+export { default as Bonus } from './Bonus'
+export { default as Building } from './Building'
+export { default as CalendarCancel } from './CalendarCancel'
+export { default as Calendar } from './Calendar'
+export { default as CallEnd } from './CallEnd'
+export { default as CallMissed } from './CallMissed'
+export { default as Call } from './Call'
+export { default as Callback } from './Callback'
+export { default as Camera } from './Camera'
+export { default as CancelSolid } from './CancelSolid'
+export { default as Cancel } from './Cancel'
+export { default as CardLock } from './CardLock'
+export { default as CardRefill } from './CardRefill'
+export { default as CardReissue } from './CardReissue'
+export { default as CardScan } from './CardScan'
+export { default as CardToCard } from './CardToCard'
+export { default as CardUnlock } from './CardUnlock'
+export { default as Card } from './Card'
+export { default as Change } from './Change'
+export { default as Chart } from './Chart'
+export { default as ChatSolid } from './ChatSolid'
+export { default as Chat } from './Chat'
+export { default as CheckCircleSolid } from './CheckCircleSolid'
+export { default as CheckCircle } from './CheckCircle'
+export { default as CheckShield } from './CheckShield'
+export { default as CheckSmall } from './CheckSmall'
+export { default as Check } from './Check'
+export { default as Checklist } from './Checklist'
+export { default as Circle } from './Circle'
+export { default as Close } from './Close'
+export { default as Clock } from './Clock'
+export { default as ClockSolid } from './ClockSolid'
+export { default as Coins } from './Coins'
+export { default as Collapse } from './Collapse'
+export { default as Copy } from './Copy'
+export { default as Cup } from './Cup'
+export { default as CurrencyChange } from './CurrencyChange'
+export { default as CurrencyTransfer } from './CurrencyTransfer'
+export { default as Deposit } from './Deposit'
+export { default as Diamond } from './Diamond'
+export { default as DislikeSolid } from './DislikeSolid'
+export { default as Dislike } from './Dislike'
+export { default as DocCancel } from './DocCancel'
+export { default as Doc } from './Doc'
+export { default as Dollar } from './Dollar'
+export { default as DoubleArrow } from './DoubleArrow'
+export { default as DoubleTick } from './DoubleTick'
+export { default as Download } from './Download'
+export { default as DropdownSmallOld } from './DropdownSmallOld'
+export { default as DropdownSmall } from './DropdownSmall'
+export { default as Dropdown } from './Dropdown'
+export { default as Dropup } from './Dropup'
+export { default as Edit } from './Edit'
+export { default as Email } from './Email'
+export { default as Erase } from './Erase'
+export { default as Excel } from './Excel'
+export { default as Expand } from './Expand'
+export { default as EyeOff } from './EyeOff'
+export { default as Eye } from './Eye'
+export { default as FavoriteSolid } from './FavoriteSolid'
+export { default as Favorite } from './Favorite'
+export { default as FbCircle } from './FbCircle'
+export { default as Fb } from './Fb'
+export { default as FileAdd } from './FileAdd'
+export { default as File } from './File'
+export { default as Files } from './Files'
+export { default as Filter } from './Filter'
+export { default as Folder } from './Folder'
+export { default as Geolocation } from './Geolocation'
+export { default as Gift } from './Gift'
+export { default as Globe } from './Globe'
+export { default as HeartSolid } from './HeartSolid'
+export { default as Heart } from './Heart'
+export { default as Help } from './Help'
+export { default as Home } from './Home'
+export { default as Housing } from './Housing'
+export { default as IgCircle } from './IgCircle'
+export { default as Ig } from './Ig'
+export { default as InfoBook } from './InfoBook'
+export { default as InfoSolid } from './InfoSolid'
+export { default as Info } from './Info'
+export { default as Italic } from './Italic'
+export { default as Key } from './Key'
+export { default as Left } from './Left'
+export { default as Lightbulb } from './Lightbulb'
+export { default as LikeSolid } from './LikeSolid'
+export { default as Like } from './Like'
+export { default as Link } from './Link'
+export { default as Lock } from './Lock'
+export { default as Logout } from './Logout'
+export { default as MagicWand } from './MagicWand'
+export { default as MailSend } from './MailSend'
+export { default as Mail } from './Mail'
+export { default as MapPin } from './MapPin'
+export { default as MapPinSolid } from './MapPinSolid'
+export { default as Map } from './Map'
+export { default as Menu } from './Menu'
+export { default as MicOff } from './MicOff'
+export { default as Mic } from './Mic'
+export { default as MinusCircle } from './MinusCircle'
+export { default as MinusShort } from './MinusShort'
+export { default as Minus } from './Minus'
+export { default as Moneybox } from './Moneybox'
+export { default as More } from './More'
+export { default as Move } from './Move'
+export { default as Newbie } from './Newbie'
+export { default as News } from './News'
+export { default as Notes } from './Notes'
+export { default as Notification } from './Notification'
+export { default as OkCircle } from './OkCircle'
+export { default as Ok } from './Ok'
+export { default as OrderLoad } from './OrderLoad'
+export { default as OrderSend } from './OrderSend'
+export { default as Order } from './Order'
+export { default as PauseCircle } from './PauseCircle'
+export { default as Pause } from './Pause'
+export { default as Payment } from './Payment'
+export { default as PhoneShake } from './PhoneShake'
+export { default as PlaySolid } from './PlaySolid'
+export { default as Play } from './Play'
+export { default as PlusCircle } from './PlusCircle'
+export { default as Plus } from './Plus'
+export { default as Pos } from './Pos'
+export { default as Print } from './Print'
+export { default as QrPay } from './QrPay'
+export { default as Redirect } from './Redirect'
+export { default as Refill } from './Refill'
+export { default as Refund } from './Refund'
+export { default as Reload } from './Reload'
+export { default as ReplyShapeSolid } from './ReplyShapeSolid'
+export { default as ReplyShape } from './ReplyShape'
+export { default as Reply } from './Reply'
+export { default as Request } from './Request'
+export { default as Right } from './Right'
+export { default as Route } from './Route'
+export { default as Ruble } from './Ruble'
+export { default as Sbp } from './Sbp'
+export { default as SbpColored } from './SbpColored'
+export { default as Search } from './Search'
+export { default as Send } from './Send'
+export { default as Services } from './Services'
+export { default as Settings } from './Settings'
+export { default as Share } from './Share'
+export { default as ShoppingCart } from './ShoppingCart'
+export { default as Sign } from './Sign'
+export { default as SlotMachine } from './SlotMachine'
+export { default as SortDownSolid } from './SortDownSolid'
+export { default as SortDown } from './SortDown'
+export { default as SortUpSolid } from './SortUpSolid'
+export { default as SortUp } from './SortUp'
+export { default as Stop } from './Stop'
+export { default as Support } from './Support'
+export { default as Sync } from './Sync'
+export { default as Table } from './Table'
+export { default as Tariffs } from './Tariffs'
+export { default as TgCircle } from './TgCircle'
+export { default as Tg } from './Tg'
+export { default as Timeout } from './Timeout'
+export { default as Timer } from './Timer'
+export { default as Trash } from './Trash'
+export { default as TurnOff } from './TurnOff'
+export { default as TwitterCircle } from './TwitterCircle'
+export { default as Twitter } from './Twitter'
+export { default as Underline } from './Underline'
+export { default as Unlink } from './Unlink'
+export { default as UnsortedSolid } from './UnsortedSolid'
+export { default as Unsorted } from './Unsorted'
+export { default as Upload } from './Upload'
+export { default as UserAdd } from './UserAdd'
+export { default as UserCard } from './UserCard'
+export { default as UserEdit } from './UserEdit'
+export { default as UserQueue } from './UserQueue'
+export { default as User } from './User'
+export { default as ViberCircle } from './ViberCircle'
+export { default as Viber } from './Viber'
+export { default as ViewGrid } from './ViewGrid'
+export { default as ViewHorizontal } from './ViewHorizontal'
+export { default as ViewList } from './ViewList'
+export { default as ViewRows } from './ViewRows'
+export { default as ViewVertical } from './ViewVertical'
+export { default as VkCircle } from './VkCircle'
+export { default as Vk } from './Vk'
+export { default as Wallet } from './Wallet'
+export { default as WarningClean } from './WarningClean'
+export { default as Warning } from './Warning'
+export { default as WhatsappCircle } from './WhatsappCircle'
+export { default as Whatsapp } from './Whatsapp'
+export { default as Wheelchair } from './Wheelchair'
+export { default as Transfer } from './Transfer'

package/src/Icon/index.ts

@@ -0,0 +1,2 @@
+export * from './icons'
+

package/src/Input/Input.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { cn } from '../@/lib/utils'
+
+const InputLabel = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+	({ className, children, ...props }) => {
+		return (
+			<label
+				className={cn('mb-[4px] text-[12px] text-light leading-[1.16] focus:text-primary focus-visible:text-primary', className)}
+				{...props}
+			>
+				{children}
+			</label>
+		)
+	}
+)
+
+InputLabel.displayName = 'InputLabel'
+
+const InputField = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(({ className, type, ...props }, ref) => {
+	return (
+		<input
+			type={type}
+			className={cn(
+				'form-input px-[16px] border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-sm focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed',
+				className
+			)}
+			ref={ref}
+			{...props}
+		/>
+	)
+})
+
+InputField.displayName = 'InputField'
+
+export { InputField, InputLabel }

package/src/Input/InputMask.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { IMaskInput } from 'react-imask'
+
+const inputClasses = `
+	form-input
+	leading-[1.17]
+	font-normal
+	border
+	border-input
+	rounded-sm
+	w-full
+	h-[44px]
+	bg-transparent
+	file:bg-transparent
+	file:text-sm
+	file:font-medium
+	file:border-0
+	focus-visible:ring-1 
+	focus-visible:ring-ring
+	disabled:cursor-not-allowed
+	disabled:opacity-50
+	placeholder:text-muted-foreground
+	transition-colors
+	focus-visible:outline-none
+	`
+
+const InputMask: React.FC = ({ ...props }) => {
+	return (
+		<IMaskInput
+			className={inputClasses}
+			{...props}
+		/>
+	)
+}
+
+export { InputMask }

package/src/Input/index.ts

@@ -0,0 +1,2 @@
+export { InputField, InputLabel } from './Input'
+export { InputMask } from './InputMask'

package/src/Input-OTP/Input.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { OTPInput, OTPInputContext } from 'input-otp'
+import { cn } from '../@/lib/utils'
+
+const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
+({ className, containerClassName, ...props }, ref) => (
+	<OTPInput
+		ref={ref}
+		containerClassName={cn('flex items-center has-[:disabled]:opacity-50', containerClassName)}
+		className={cn('disabled:cursor-not-allowed', className)}
+		{...props}
+	/>
+)
+)
+InputOTP.displayName = 'InputOTP'
+
+const InputOTPGroup = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn('flex items-center', className)}
+			{...props}
+		/>
+	)
+)
+InputOTPGroup.displayName = 'InputOTPGroup'
+
+const InputOTPSlot = React.forwardRef<
+	React.ElementRef<'div'>,
+	React.ComponentPropsWithoutRef<'div'> & { index: number }
+>(({ index, className, ...props }, ref) => {
+	const inputOTPContext = React.useContext(OTPInputContext)
+	const { char } = inputOTPContext.slots[index]
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				'relative flex h-[48px] w-[20px] items-center justify-center border-b-[2px] border-input transition-all',
+				char ? 'border-b-[--cl-blue-2]' : 'border-b-[--cl-blue-5]',
+				className
+			)}
+			{...props}
+		>
+			{char && <span className='bg-primary rounded-full animate-pin-typing size-[12px]' />}
+		</div>
+	)
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
+
+const InputOTPSeparator = React.forwardRef<React.ElementRef<'div'>, React.ComponentPropsWithoutRef<'div'>>(
+	({ ...props }, ref) => (
+		<div
+			ref={ref}
+			role="separator"
+			{...props}
+		>
+			<span className='bg-primary rounded-full size-[12px]' />
+		</div>
+	)
+)
+InputOTPSeparator.displayName = 'InputOTPSeparator'
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/Input-OTP/index.ts

@@ -0,0 +1,3 @@
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./Input"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

package/src/Label/Label.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../@/lib/utils'
+
+const labelVariants = cva('peer-disabled:opacity-70 peer-disabled:cursor-not-allowed')
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root
+		ref={ref}
+		className={cn(labelVariants(), className)}
+		{...props}
+	/>
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

package/src/Label/index.ts

@@ -0,0 +1 @@
+export { Label } from './Label'

package/src/Logo/Logo.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+/* @ts-ignore */
+import bank from '../assets/images/logo/bank/logo.svg'
+
+
+interface ILogoProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+	variant?: bank
+}
+
+const Logo: React.FC<ILogoProps> = ({  width, height, alt, className }) => {
+	return (
+		<img
+			className={className}
+			src={bank}
+			width={131 || width}
+			height={32|| height}
+			alt='Модульбанк'
+		/>
+	)
+}
+
+export default Logo

package/src/Logo/index.ts

@@ -0,0 +1,3 @@
+import Logo from './Logo'
+
+export default Logo

package/src/Navbar/Navbar.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import cn from "clsx";
+
+export interface Navbar {
+	className?: string
+}
+
+const Navbar = React.forwardRef<Navbar>(
+  ({ className, ...props }, ref) => {
+
+    return (
+		<div className={cn('h-[44px]', className)}>
+
+		</div>
+    )
+  }
+)
+
+Navbar.displayName = "Navbar"
+
+export { Navbar }

package/src/Navbar/index.tsx

@@ -0,0 +1,2 @@
+export { Navbar } from "./Navbar"
+

package/src/Page/Page.tsx

@@ -0,0 +1,43 @@
+import React, { FC, ReactNode } from 'react'
+import { cn } from '../@/lib/utils'
+
+type IProps = {
+	children?: React.ReactNode
+	className?: string
+}
+const Navbar: FC<IProps> = ({ children, className }) => {
+	return <div className={cn('flex items-center h-[--page-header-height] px-[20px] shrink-0', className)}>{children}</div>
+}
+
+const Content: FC<IProps> = ({ children, className }) => {
+	return <div className={cn('px-[20px] py-[16px] overflow-y-auto grow', className)}>{children}</div>
+}
+
+interface IPage {
+	displayName: string
+	Navbar: typeof Navbar
+	Content: typeof Content
+}
+const Page: FC<IProps> & IPage = ({ children, className }) => {
+	return (
+		<div
+			className={cn(
+				'container mx-auto flex flex-col bg-page h-svh',
+				// 'sm:container grid grid-cols-[minmax(0,_1fr)] grid-rows-[min-content_1fr_min-content] bg-page h-screen',
+				className
+			)}
+		>
+			{children}
+		</div>
+	)
+}
+
+Page.displayName = 'Page'
+
+Page.Navbar = Navbar
+Page.Navbar.displayName = 'Page.Navbar'
+
+Page.Content = Content
+Page.Content.displayName = "Page.Content"
+
+export { Page }

package/src/Page/index.ts

@@ -0,0 +1 @@
+export { Page } from './Page'

package/src/Popover/Popover.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import cn from 'clsx'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import {PopoverPortalProps, PopoverProps} from "@radix-ui/react-popover";
+
+type PopoverComponents = {
+	Trigger: typeof PopoverTrigger,
+	Portal: typeof PopoverPortal,
+	Content: typeof PopoverContent,
+}
+
+const Popover: React.FC<PopoverProps> & PopoverComponents = (props) => <PopoverPrimitive.Root {...props} />
+
+const PopoverTrigger: typeof PopoverPrimitive.Trigger = PopoverPrimitive.Trigger
+
+const PopoverPortal: React.FC<PopoverPortalProps> = ({ children, ...props }) => (
+	<PopoverPrimitive.Portal {...props}>{children}</PopoverPrimitive.Portal>
+)
+
+const popoverContentClasses = `
+	z-50
+	w-72
+	p-4
+	text-popover-foreground
+	bg-popover
+	border
+	rounded-md
+	shadow-md
+	outline-none
+	data-[state=open]:animate-in
+	data-[state=closed]:animate-out
+	data-[state=closed]:fade-out-0
+	data-[state=open]:fade-in-0
+	data-[state=closed]:zoom-out-95
+	data-[state=open]:zoom-in-95
+	data-[side=bottom]:slide-in-from-top-2
+	data-[side=left]:slide-in-from-right-2
+	data-[side=right]:slide-in-from-left-2
+	data-[side=top]:slide-in-from-bottom-2
+`
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className = '', align = 'center', sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			popoverContentClasses,
+			className
+		)}
+		{...props}
+	/>
+))
+
+Popover.Trigger = PopoverTrigger
+Popover.Portal = PopoverPortal
+Popover.Portal.displayName = PopoverPrimitive.Portal.displayName
+Popover.Content = PopoverContent
+Popover.Content.displayName = PopoverPrimitive.Content.displayName
+
+export default Popover

package/src/Popover/index.ts

@@ -0,0 +1,5 @@
+import Popover from './Popover'
+
+export default Popover
+
+export { Popover }

package/src/Progress/Progress.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+import { cn } from '../@/lib/utils'
+
+const progessClasses = `
+	relative
+	w-full
+	h-[--progress-height]
+	bg-[--progress-bg]
+	rounded-full
+	overflow-hidden
+`
+
+const Progress = React.forwardRef<
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(progessClasses, className)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="bg-primary rounded-full transition-all size-full"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

package/src/Progress/index.ts

@@ -0,0 +1 @@
+export { Progress } from './Progress'

package/src/Select/Select.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { SelectBase } from './SelectBase'
+import { GroupBase, Props } from "react-select";
+
+type SelectBaseProps<
+	Option,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>
+> = Props<Option, IsMulti, Group>
+
+function Select<
+	Option,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>
+>(props: SelectBaseProps<Option, IsMulti, Group>) {
+	return <SelectBase  {...props}/>
+}
+
+export { Select }