@modul/mbui 0.0.4-beta-pv-52894-ba6f4013 → 0.0.4-beta-pv-52894-6d5156ce

package/dist/Collapsible/AccountCollapsible.d.ts

@@ -9,6 +9,7 @@ export declare type AccountCollapsibleHeaderProps = {
 export declare type AccountCollapsibleContentItemProps = {
     className?: string;
     children: ReactNode;
+    asChild: boolean;
 };
 declare const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps>;
 declare const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps>;

package/dist/Collapsible/AccountCollapsible.js

@@ -6,6 +6,7 @@ const react_1 = (0, tslib_1.__importDefault)(require("react"));
 const CollapsiblePrimitive = (0, tslib_1.__importStar)(require("@radix-ui/react-collapsible"));
 const Icon_1 = require("../../src/Icon");
 const utils_1 = require("../@/lib/utils");
+const react_slot_1 = require("@radix-ui/react-slot");
 const AccountCollapsible = CollapsiblePrimitive.Root;
 exports.AccountCollapsible = AccountCollapsible;
 const AccountCollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
@@ -19,7 +20,10 @@ const AccountCollapsibleHeader = ({ label }) => {
             react_1.default.createElement(Icon_1.DropdownSmallOld, null))));
 };
 exports.AccountCollapsibleHeader = AccountCollapsibleHeader;
-const AccountCollapsibleContentItem = ({ children, className, ...props }) => (react_1.default.createElement("a", { href: "", className: (0, utils_1.cn)('text-left w-full rounded-[4px] px-[12px] py-[16px] bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active', className), ...props }, children));
+const AccountCollapsibleContentItem = ({ children, asChild = true, className, ...props }) => {
+    const Comp = asChild ? react_slot_1.Slot : 'div';
+    return (react_1.default.createElement(Comp, { className: (0, utils_1.cn)('text-left w-full rounded-[4px] px-[12px] py-[16px] bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active', className), ...props }, children));
+};
 exports.AccountCollapsibleContentItem = AccountCollapsibleContentItem;
 AccountCollapsible.displayName = 'AccountCollaspible';
 AccountCollapsibleTrigger.displayName = 'AccountCollaspibleTrigger';

package/dist/Collapsible/AccountCollapsible.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountCollapsible.js","sourceRoot":"","sources":["../../src/Collapsible/AccountCollapsible.tsx"],"names":[],"mappings":";;;;AAAA,+DAA4C;AAC5C,+FAAmE;AACnE,yCAAiD;AACjD,0CAAmC;AAEnC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAA;AA4CnD,gDAAkB;AA1CnB,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AA4CxE,8DAAyB;AA1C1B,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AA2CxE,8DAAyB;AAjC1B,MAAM,wBAAwB,GAAsC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,CACN,uCAAK,SAAS,EAAC,0CAA0C;QACxD,uCAAK,SAAS,EAAC,uCAAuC,IAAE,KAAK,CAAO;QACpE,8BAAC,yBAAyB,IAAC,SAAS,EAAC,2DAA2D;YAC/F,8BAAC,uBAAgB,OAAG,CACO,CACvB,CACN,CAAA;AACF,CAAC,CAAA;AAsBA,4DAAwB;AArBzB,MAAM,6BAA6B,GAA2C,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpH,qCACC,IAAI,EAAC,EAAE,EACP,SAAS,EAAE,IAAA,UAAE,EACZ,wRAAwR,EACxR,SAAS,CACT,KACG,KAAK,IAER,QAAQ,CACN,CACJ,CAAA;AAaA,sEAA6B;AAX9B,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA;AACrD,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAA;AACjE,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,6BAA6B,CAAC,WAAW,GAAG,+BAA+B,CAAA"}
+{"version":3,"file":"AccountCollapsible.js","sourceRoot":"","sources":["../../src/Collapsible/AccountCollapsible.tsx"],"names":[],"mappings":";;;;AAAA,+DAA4C;AAC5C,+FAAmE;AACnE,yCAAiD;AACjD,0CAAmC;AACnC,qDAA2C;AAE3C,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAA;AAoDnD,gDAAkB;AAlDnB,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AAoDxE,8DAAyB;AAlD1B,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AAmDxE,8DAAyB;AAxC1B,MAAM,wBAAwB,GAAsC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,CACN,uCAAK,SAAS,EAAC,0CAA0C;QACxD,uCAAK,SAAS,EAAC,uCAAuC,IAAE,KAAK,CAAO;QACpE,8BAAC,yBAAyB,IAAC,SAAS,EAAC,2DAA2D;YAC/F,8BAAC,uBAAgB,OAAG,CACO,CACvB,CACN,CAAA;AACF,CAAC,CAAA;AA6BA,4DAAwB;AA5BzB,MAAM,6BAA6B,GAA2C,CAAC,EAC9E,QAAQ,EACR,OAAO,GAAE,IAAI,EACb,SAAS,EACT,GAAG,KAAK,EACR,EAAE,EAAE;IACJ,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IACnC,OAAO,CACN,8BAAC,IAAI,IACJ,SAAS,EAAE,IAAA,UAAE,EACZ,wRAAwR,EACxR,SAAS,CACT,KACG,KAAK,IAER,QAAQ,CACH,CACP,CAAA;AACF,CAAC,CAAA;AAaA,sEAA6B;AAX9B,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA;AACrD,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAA;AACjE,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,6BAA6B,CAAC,WAAW,GAAG,+BAA+B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.4-beta-pv-52894-ba6f4013",
+  "version": "0.0.4-beta-pv-52894-6d5156ce",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -25,6 +25,7 @@
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-dropdown-menu": "2.1.1",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
@@ -38,7 +39,8 @@
     "react-imask": "7.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "0.9.1"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",

package/src/@/config/index.ts

@@ -26,62 +26,15 @@ export default {
 				transparent: 'transparent',
 				current: 'currentColor',
 			},
-			...button,
-			// textColor: {
-			// 	base: 'var(--text-cl)',
-			// 	'btn-primary': 'var(--btn-primary-cl)',
-			// 	'btn-success': 'var(--btn-success-cl)',
-			// 	primary: 'var(--btn-txt-primary)',
-			// 	'primary-hover': 'var(--btn-txt-primary-hover)',
-			// 	'primary-focus': 'var(--btn-txt-primary-focus)',
-			// 	'primary-active': 'var(--btn-txt-primary-active)',
-			// },
-
-			// border: {
-			// 	'btn-primary-outline': '2px solid red'
-			// },
-
-			// colors: {
-			// 	border: 'hsl(var(--border))',
-			// 	input: 'hsl(var(--input))',
-			// 	ring: 'hsl(var(--ring))',
-			// 	background: 'hsl(var(--background))',
-			// 	foreground: 'hsl(var(--foreground))',
-			// 	primary: {
-			// 		DEFAULT: 'hsl(var(--primary))',
-			// 		foreground: 'hsl(var(--primary-foreground))',
-			// 	},
-			// 	secondary: {
-			// 		DEFAULT: 'hsl(var(--secondary))',
-			// 		foreground: 'hsl(var(--secondary-foreground))',
-			// 	},
-			// 	destructive: {
-			// 		DEFAULT: 'hsl(var(--destructive))',
-			// 		foreground: 'hsl(var(--destructive-foreground))',
-			// 	},
-			// 	muted: {
-			// 		DEFAULT: 'hsl(var(--muted))',
-			// 		foreground: 'hsl(var(--muted-foreground))',
-			// 	},
-			// 	accent: {
-			// 		DEFAULT: 'hsl(var(--accent))',
-			// 		foreground: 'hsl(var(--accent-foreground))',
-			// 	},
-			// 	popover: {
-			// 		DEFAULT: 'hsl(var(--popover))',
-			// 		foreground: 'hsl(var(--popover-foreground))',
-			// 	},
-			// 	card: {
-			// 		DEFAULT: 'hsl(var(--card))',
-			// 		foreground: 'hsl(var(--card-foreground))',
-			// 	},
-			// },
-			// borderRadius: {
-			// 	lg: `var(--radius)`,
-			// 	md: `calc(var(--radius) - 2px)`,
-			// 	sm: 'calc(var(--radius) - 4px)',
-			// },
-
+			textColor: {
+				...button.textColor
+			},
+			backgroundColor: {
+				primary: {
+					DEFAULT: 'var(--primary-bg)'
+				},
+				...button.backgroundColor
+			},
 			keyframes: {
 				'accordion-down': {
 					from: { height: '0' },

package/src/Collapsible/AccountCollapsible.tsx

@@ -2,6 +2,7 @@ import React, { FC, ReactNode } from 'react'
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
 import { DropdownSmallOld } from '../../src/Icon'
 import { cn } from '../@/lib/utils'
+import { Slot } from '@radix-ui/react-slot'
 
 const AccountCollapsible = CollapsiblePrimitive.Root
 
@@ -15,6 +16,7 @@ export type AccountCollapsibleHeaderProps = {
 export type AccountCollapsibleContentItemProps = {
 	className?: string
 	children: ReactNode
+	asChild: boolean
 }
 
 const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps> = ({ label }) => {
@@ -27,18 +29,25 @@ const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps> = ({ label })
 		</div>
 	)
 }
-const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps> = ({ children, className, ...props }) => (
-	<a
-		href=""
-		className={cn(
-			'text-left w-full rounded-[4px] px-[12px] py-[16px] bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
-			className
-		)}
-		{...props}
-	>
-		{children}
-	</a>
-)
+const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps> = ({
+	children,
+	asChild =true,
+	className,
+	...props
+}) => {
+	const Comp = asChild ? Slot : 'div'
+	return (
+		<Comp
+			className={cn(
+				'text-left w-full rounded-[4px] px-[12px] py-[16px] bg-btn-secondary hover:bg-btn-secondary-hover focus:bg-btn-secondary-focus active:bg-btn-secondary-active border-btn-secondary hover:border-btn-secondary-hover focus:border-btn-secondary-focus active:border-btn-secondary-active',
+				className
+			)}
+			{...props}
+		>
+			{children}
+		</Comp>
+	)
+}
 
 AccountCollapsible.displayName = 'AccountCollaspible'
 AccountCollapsibleTrigger.displayName = 'AccountCollaspibleTrigger'

package/src/DasboardDrawer/DashboardDrawer.tsx

@@ -0,0 +1,92 @@
+'use client'
+
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+import { cn } from '../@/lib/utils'
+
+const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerFooter: React.FC = () => (
+	<div className="p-[16px] cursor-pointer">
+		<svg
+			className="block mx-auto"
+			width="38"
+			height="10"
+			viewBox="0 0 38 10"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M0 7.39774C0 8.68678 1.25226 9.60455 2.48147 9.21638L17.7955 4.38038C18.5794 4.13282 19.4206 4.13282 20.2045 4.38038L35.5185 9.21638C36.7477 9.60455 38 8.68678 38 7.39774C38 6.56568 37.4606 5.82966 36.6671 5.5791L20.2045 0.380377C19.4206 0.132817 18.5794 0.132817 17.7955 0.380377L1.33286 5.5791C0.539422 5.82966 0 6.56568 0 7.39774Z"
+				fill="#243036"
+				fill-opacity="0.24"
+			/>
+		</svg>
+	</div>
+)
+type DrawerListProps = {
+	children: React.ReactNode
+}
+const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
+	return (
+		<div
+			role="listbox"
+			className="px-[12px] py-[20px]"
+		>
+			{children}
+		</div>
+	)
+}
+type DrawerListItemProps = {
+	value: string
+	label: string | JSX.Element
+	isSelected?: boolean
+}
+const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isSelected }) => {
+	return (
+		<div
+			role="option"
+			aria-labelledby=""
+			aria-selected={isSelected}
+			className="flex"
+			tabIndex={0}
+		>
+			<div className="shrink-0">
+				<p
+					className="font-medium text-[14px] text-muted leading-[1.4]"
+					id=""
+				>
+					{label}
+				</p>
+				<p className="font-bold text-[20px] leading-[1.2]">{value}</p>
+			</div>
+			{isSelected && <span></span>}
+		</div>
+	)
+}
+// const Drawer
+const DrawerContent = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DrawerPortal>
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cn('fixed inset-x-0 top-0 flex h-auto flex-col bg-app', className)}
+			{...props}
+		>
+			{children}
+			<DrawerFooter />
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem }

package/src/DasboardDrawer/index.ts

@@ -0,0 +1,14 @@
+export {
+	Drawer,
+	// DrawerPortal,
+	// DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	// DrawerHeader,
+	// DrawerFooter,
+	// DrawerTitle,
+	// DrawerDescription,
+	DrawerList,
+	DrawerListItem
+  } from './DashboardDrawer'

package/src/assets/css/global.css

@@ -75,6 +75,7 @@
 
         /* --text-base: var(--cl-graphite-1); */
         --primary: var(--cl-blue-2);
+        --primary-bg: var(--cl-blue-7);
         --success: var(--cl-graphite-1);
         --seconady: var(--cl-graphite-2);
         --tertiary: var(--cl-graphite-3);