@modul/mbui 0.0.19-beta-pv-53151-14635d0d → 0.0.19-beta-pv-53151-a141d744

package/dist/Button/Button.js

@@ -65,7 +65,7 @@ const buttonClasses = {
 		focus-visible:text-btn-ghost-focus
 		active:text-btn-ghost-active
 		disabled:text-btn-ghost-disabled
-	`
+	`,
 };
 const getPadings = (icon, variant) => {
     return (0, utils_1.cn)(icon && 'p-[12px] aspect-square', icon && variant === 'outline' && 'p-[13px] aspect-square', !icon && 'px-[24px] py-[12px]', !icon && variant === 'outline' && 'px-[25px] py-[13px]');

package/dist/Button/ButtonWidget.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+interface IProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    asChild?: boolean;
+}
+declare const Icon: React.FC<IProps>;
+declare const Content: React.FC<IProps>;
+interface IButtonWidgetProps {
+    displayName: string;
+    Icon: typeof Icon;
+    Content: typeof Content;
+}
+declare const ButtonWidget: React.FC<ButtonProps> & IButtonWidgetProps;
+export { ButtonWidget };

package/dist/Button/ButtonWidget.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonWidget = void 0;
+const tslib_1 = require("tslib");
+const React = (0, tslib_1.__importStar)(require("react"));
+const react_slot_1 = require("@radix-ui/react-slot");
+const utils_1 = require("../@/lib/utils");
+const buttonClasses = `
+		inline-flex
+		items-center
+		shrink-0
+		p-[8px]
+		rounded-md
+		font-medium
+		leading-[1]
+		focus-visible:ring
+		focus-visible:outline-none
+		ring-offset-1
+		transition-colors
+		whitespace-nowrap
+		bg-page
+		shadow-md
+		active:shadow-sm
+		disabled:pointer-events-none
+`;
+const Icon = ({ children }) => {
+    return React.createElement("span", { className: "flex justify-center items-center bg-primary-light [&+span]:ml-[16px] rounded-full text-primary size-[40px]" }, children);
+};
+const Content = ({ children, className }) => {
+    return React.createElement("span", { className: className }, children);
+};
+const ButtonWidget = ({ className, asChild = false, ...props }) => {
+    const Comp = asChild ? react_slot_1.Slot : 'button';
+    return (React.createElement(Comp, { className: (0, utils_1.cn)(buttonClasses, className), ...props }));
+};
+exports.ButtonWidget = ButtonWidget;
+ButtonWidget.displayName = 'ButtonWidget';
+ButtonWidget.Icon = Icon;
+ButtonWidget.Icon.displayName = 'ButtonWidget.Icon';
+ButtonWidget.Content = Content;
+ButtonWidget.Content.displayName = 'ButtonWidget.Content';
+//# sourceMappingURL=ButtonWidget.js.map

package/dist/Button/ButtonWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonWidget.js","sourceRoot":"","sources":["../../src/Button/ButtonWidget.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,qDAA2C;AAE3C,0CAAmC;AAEnC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;CAiBrB,CAAA;AAWD,MAAM,IAAI,GAAqB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/C,OAAO,8BAAM,SAAS,EAAC,4GAA4G,IAAE,QAAQ,CAAQ,CAAA;AACtJ,CAAC,CAAA;AAED,MAAM,OAAO,GAAqB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC7D,OAAO,8BAAM,SAAS,EAAE,SAAS,IAAG,QAAQ,CAAQ,CAAA;AACrD,CAAC,CAAA;AAQD,MAAM,YAAY,GAA+C,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAC5G,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEtC,OAAO,CACN,oBAAC,IAAI,IACJ,SAAS,EAAE,IAAA,UAAE,EAAC,aAAa,EAAE,SAAS,CAAC,KACnC,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAA;AAWO,oCAAY;AARrB,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,YAAY,CAAC,IAAI,GAAG,IAAI,CAAA;AACxB,YAAY,CAAC,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAA;AAEnD,YAAY,CAAC,OAAO,GAAG,OAAO,CAAA;AAC9B,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,sBAAsB,CAAA"}

package/dist/Button/index.d.ts

@@ -1 +1,2 @@
 export { Button, buttonVariants } from './Button';
+export { ButtonWidget } from './ButtonWidget';

package/dist/Button/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonVariants = exports.Button = void 0;
+exports.ButtonWidget = exports.buttonVariants = exports.Button = void 0;
 var Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return Button_1.buttonVariants; } });
+var ButtonWidget_1 = require("./ButtonWidget");
+Object.defineProperty(exports, "ButtonWidget", { enumerable: true, get: function () { return ButtonWidget_1.ButtonWidget; } });
 //# sourceMappingURL=index.js.map

package/dist/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":";;;AAAA,mCAAiD;AAAxC,gGAAA,MAAM,OAAA;AAAE,wGAAA,cAAc,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Button/index.ts"],"names":[],"mappings":";;;AAAA,mCAAiD;AAAxC,gGAAA,MAAM,OAAA;AAAE,wGAAA,cAAc,OAAA;AAC/B,+CAA6C;AAApC,4GAAA,YAAY,OAAA"}

package/dist/index.d.ts

@@ -8,7 +8,7 @@ import { BottomNavigation, BottomNavigationList, BottomNavigationListItem, Botto
 import * as Icon from './Icon';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
 import { AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem } from './Collapsible';
-import { Button } from './Button';
+import { Button, ButtonWidget } from './Button';
 import { Audio } from './Audio';
 import { cn } from './@/lib/utils';
 import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer';
@@ -29,4 +29,4 @@ import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader,
 import { MessageTyping } from "./Chat";
 import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses } from './FavoritePyments';
 import { DigitKeyPad } from "./DigitKeyPad";
-export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, Progress, Alert, Switch, Label, Textarea, SelectAccountCard, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, Calendar, DatePicker, SelectAsync, InputMask, Select, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, MessageTyping, FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses, DigitKeyPad, };
+export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, Chip, Progress, Alert, Switch, Label, Textarea, SelectAccountCard, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, Calendar, DatePicker, SelectAsync, InputMask, Select, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, MessageTyping, FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses, DigitKeyPad, ButtonWidget, };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectAsync = exports.DatePicker = exports.Calendar = exports.FormMessage = exports.FormDescription = exports.FormControl = exports.FormItem = exports.FormField = exports.FormLabel = exports.Form = exports.SelectAccountCard = exports.Textarea = exports.Label = exports.Switch = exports.Alert = exports.Progress = exports.Chip = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerContent = exports.DrawerClose = exports.DrawerTitle = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.InputLabel = exports.InputField = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = exports.Tooltip = void 0;
-exports.DigitKeyPad = exports.farvoriteLinkClasses = exports.FarvoritePaymentDescription = exports.FavoritePaymentsItem = exports.FavoritePaymentsList = exports.MessageTyping = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialog = exports.Select = exports.InputMask = void 0;
+exports.ButtonWidget = exports.DigitKeyPad = exports.farvoriteLinkClasses = exports.FarvoritePaymentDescription = exports.FavoritePaymentsItem = exports.FavoritePaymentsList = exports.MessageTyping = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialog = exports.Select = exports.InputMask = void 0;
 const tslib_1 = require("tslib");
 const Tooltip_1 = require("./Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
@@ -37,6 +37,7 @@ Object.defineProperty(exports, "AccountCollapsibleContent", { enumerable: true,
 Object.defineProperty(exports, "AccountCollapsibleContentItem", { enumerable: true, get: function () { return Collapsible_2.AccountCollapsibleContentItem; } });
 const Button_1 = require("./Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "ButtonWidget", { enumerable: true, get: function () { return Button_1.ButtonWidget; } });
 const Audio_1 = require("./Audio");
 Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return Audio_1.Audio; } });
 const utils_1 = require("./@/lib/utils");

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.19-beta-pv-53151-14635d0d",
+  "version": "0.0.19-beta-pv-53151-a141d744",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/Button/Button.tsx

@@ -62,7 +62,7 @@ const buttonClasses = {
 		focus-visible:text-btn-ghost-focus
 		active:text-btn-ghost-active
 		disabled:text-btn-ghost-disabled
-	`
+	`,
 }
 
 const getPadings = (icon, variant) => {
@@ -70,7 +70,7 @@ const getPadings = (icon, variant) => {
 		icon && 'p-[12px] aspect-square',
 		icon && variant === 'outline' && 'p-[13px] aspect-square',
 		!icon && 'px-[24px] py-[12px]',
-		!icon && variant === 'outline' && 'px-[25px] py-[13px]'
+		!icon && variant === 'outline' && 'px-[25px] py-[13px]',
 	)
 }
 interface IVariantProps {

package/src/Button/ButtonWidget.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../@/lib/utils'
+
+const buttonClasses = `
+		inline-flex
+		items-center
+		shrink-0
+		p-[8px]
+		rounded-md
+		font-medium
+		leading-[1]
+		focus-visible:ring
+		focus-visible:outline-none
+		ring-offset-1
+		transition-colors
+		whitespace-nowrap
+		bg-page
+		shadow-md
+		active:shadow-sm
+		disabled:pointer-events-none
+`
+
+interface IProps {
+	children?: React.ReactNode
+	className?: string
+}
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	asChild?: boolean
+}
+
+const Icon: React.FC<IProps> = ({ children }) => {
+	return <span className="flex justify-center items-center bg-primary-light [&+span]:ml-[16px] rounded-full text-primary size-[40px]">{children}</span>
+}
+
+const Content: React.FC<IProps> = ({ children, className }) => {
+	return <span className={className}>{children}</span>
+}
+
+interface IButtonWidgetProps {
+	displayName: string
+	Icon: typeof Icon
+	Content: typeof Content
+}
+
+const ButtonWidget: React.FC<ButtonProps> & IButtonWidgetProps = ({ className, asChild = false, ...props }) => {
+		const Comp = asChild ? Slot : 'button'
+
+		return (
+			<Comp
+				className={cn(buttonClasses, className)}
+				{...props}
+			/>
+		)
+	}
+
+
+ButtonWidget.displayName = 'ButtonWidget'
+
+ButtonWidget.Icon = Icon
+ButtonWidget.Icon.displayName = 'ButtonWidget.Icon'
+
+ButtonWidget.Content = Content
+ButtonWidget.Content.displayName = 'ButtonWidget.Content'
+
+export { ButtonWidget }

package/src/Button/index.ts

@@ -1 +1,2 @@
-export { Button, buttonVariants } from './Button'
+export { Button, buttonVariants } from './Button'
+export { ButtonWidget } from './ButtonWidget'

package/src/index.ts

@@ -19,7 +19,7 @@ import {
 	AccountCollapsibleContent,
 	AccountCollapsibleContentItem,
 } from './Collapsible'
-import { Button } from './Button'
+import { Button, ButtonWidget } from './Button'
 import { Audio } from './Audio'
 import { cn } from './@/lib/utils'
 import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer'
@@ -120,4 +120,5 @@ export {
 	FarvoritePaymentDescription,
 	farvoriteLinkClasses,
 	DigitKeyPad,
+	ButtonWidget,
 }