@modul/mbui 0.0.13-beta-pv-53036-091041a3 → 0.0.13-beta-pv-53036-91768058

package/dist/Form/Form.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { ControllerProps, FieldValues } from 'react-hook-form';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues = undefined>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends import("react-hook-form").Path<TFieldValues> = import("react-hook-form").Path<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import("react-hook-form").FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };

package/dist/Form/Form.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormField = exports.FormMessage = exports.FormDescription = exports.FormControl = exports.FormLabel = exports.FormItem = exports.Form = exports.useFormField = 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 react_hook_form_1 = require("react-hook-form");
+const utils_1 = require("../@/lib/utils");
+const Label_1 = require("../Label");
+const Form = react_hook_form_1.FormProvider;
+exports.Form = Form;
+const FormFieldContext = React.createContext({});
+const FormField = ({ ...props }) => {
+    return (React.createElement(FormFieldContext.Provider, { value: { name: props.name } },
+        React.createElement(react_hook_form_1.Controller, { ...props })));
+};
+exports.FormField = FormField;
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState, formState } = (0, react_hook_form_1.useFormContext)();
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error('useFormField should be used within <FormField>');
+    }
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+exports.useFormField = useFormField;
+const FormItemContext = React.createContext({});
+const FormItem = React.forwardRef(({ className, ...props }, ref) => {
+    const id = React.useId();
+    return (React.createElement(FormItemContext.Provider, { value: { id } },
+        React.createElement("div", { ref: ref, className: (0, utils_1.cn)('space-y-2', className), ...props })));
+});
+exports.FormItem = FormItem;
+FormItem.displayName = 'FormItem';
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+    const { error, formItemId } = useFormField();
+    return (React.createElement(Label_1.Label, { ref: ref, className: (0, utils_1.cn)(error && 'text-destructive', className), htmlFor: formItemId, ...props }));
+});
+exports.FormLabel = FormLabel;
+FormLabel.displayName = 'FormLabel';
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (React.createElement(react_slot_1.Slot, { ref: ref, id: formItemId, "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+});
+exports.FormControl = FormControl;
+FormControl.displayName = 'FormControl';
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+    return (React.createElement("p", { ref: ref, id: formDescriptionId, className: (0, utils_1.cn)('text-[0.8rem] text-light', className), ...props }));
+});
+exports.FormDescription = FormDescription;
+FormDescription.displayName = 'FormDescription';
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+    if (!body) {
+        return null;
+    }
+    return (React.createElement("p", { ref: ref, id: formMessageId, className: (0, utils_1.cn)('text-[0.8rem] font-medium text-destructive', className), ...props }, body));
+});
+exports.FormMessage = FormMessage;
+FormMessage.displayName = 'FormMessage';
+//# sourceMappingURL=Form.js.map

package/dist/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../src/Form/Form.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAE9B,qDAA2C;AAC3C,qDAAmH;AAEnH,0CAAmC;AACnC,oCAAgC;AAEhC,MAAM,IAAI,GAAG,8BAAY,CAAA;AA+IF,oBAAI;AAtI3B,MAAM,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAwB,EAA2B,CAAC,CAAA;AAEhG,MAAM,SAAS,GAAG,CAGhB,EACD,GAAG,KAAK,EAC8B,EAAE,EAAE;IAC1C,OAAO,CACN,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE;QACrD,oBAAC,4BAAU,OAAK,KAAK,GAAI,CACE,CAC5B,CAAA;AACF,CAAC,CAAA;AAyH4F,8BAAS;AAvHtG,MAAM,YAAY,GAAG,GAAG,EAAE;IACzB,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAA;IACvD,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAA;IACrD,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,IAAA,gCAAc,GAAE,CAAA;IAErD,MAAM,UAAU,GAAG,aAAa,CAAC,YAAY,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;IAE9D,IAAI,CAAC,YAAY,EAAE;QAClB,MAAM,IAAI,KAAK,CAAC,gDAAgD,CAAC,CAAA;KACjE;IAED,MAAM,EAAE,EAAE,EAAE,GAAG,WAAW,CAAA;IAE1B,OAAO;QACN,EAAE;QACF,IAAI,EAAE,YAAY,CAAC,IAAI;QACvB,UAAU,EAAE,GAAG,EAAE,YAAY;QAC7B,iBAAiB,EAAE,GAAG,EAAE,wBAAwB;QAChD,aAAa,EAAE,GAAG,EAAE,oBAAoB;QACxC,GAAG,UAAU;KACb,CAAA;AACF,CAAC,CAAA;AAkGQ,oCAAY;AA5FrB,MAAM,eAAe,GAAG,KAAK,CAAC,aAAa,CAAuB,EAA0B,CAAC,CAAA;AAE7F,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChC,MAAM,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,CAAA;IAExB,OAAO,CACN,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,EAAE,EAAE;QACtC,6BACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,WAAW,EAAE,SAAS,CAAC,KACjC,KAAK,GACR,CACwB,CAC3B,CAAA;AACF,CAAC,CACD,CAAA;AA4E4B,4BAAQ;AA3ErC,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAGhC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAClC,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAA;IAE5C,OAAO,CACN,oBAAC,aAAK,IACL,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,KAAK,IAAI,kBAAkB,EAAE,SAAS,CAAC,EACrD,OAAO,EAAE,UAAU,KACf,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AA2DqC,8BAAS;AA1DhD,SAAS,CAAC,WAAW,GAAG,WAAW,CAAA;AAEnC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACrB,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,aAAa,EAAE,GAAG,YAAY,EAAE,CAAA;IAE9E,OAAO,CACN,oBAAC,iBAAI,IACJ,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,UAAU,sBACI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,iBAAiB,EAAE,CAAC,CAAC,CAAC,GAAG,iBAAiB,IAAI,aAAa,EAAE,kBAC7E,CAAC,CAAC,KAAK,KACjB,KAAK,GACR,CACF,CAAA;AACF,CAAC,CACD,CAAA;AA0CiD,kCAAW;AAzC7D,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChC,MAAM,EAAE,iBAAiB,EAAE,GAAG,YAAY,EAAE,CAAA;IAE5C,OAAO,CACN,2BACC,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,iBAAiB,EACrB,SAAS,EAAE,IAAA,UAAE,EAAC,0BAA0B,EAAE,SAAS,CAAC,KAChD,KAAK,GACR,CACF,CAAA;AACF,CAAC,CACD,CAAA;AA0B8D,0CAAe;AAzB9E,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAA;AAE/C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1C,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,YAAY,EAAE,CAAA;IAC/C,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAA;IAEtD,IAAI,CAAC,IAAI,EAAE;QACV,OAAO,IAAI,CAAA;KACX;IAED,OAAO,CACN,2BACC,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,aAAa,EACjB,SAAS,EAAE,IAAA,UAAE,EAAC,4CAA4C,EAAE,SAAS,CAAC,KAClE,KAAK,IAER,IAAI,CACF,CACJ,CAAA;AACF,CAAC,CACD,CAAA;AAG+E,kCAAW;AAF3F,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA"}

package/dist/Form/index.d.ts

@@ -0,0 +1 @@
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField } from './Form';

package/dist/Form/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormField = exports.FormMessage = exports.FormDescription = exports.FormControl = exports.FormLabel = exports.FormItem = exports.Form = exports.useFormField = void 0;
+var Form_1 = require("./Form");
+Object.defineProperty(exports, "useFormField", { enumerable: true, get: function () { return Form_1.useFormField; } });
+Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
+Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return Form_1.FormItem; } });
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return Form_1.FormLabel; } });
+Object.defineProperty(exports, "FormControl", { enumerable: true, get: function () { return Form_1.FormControl; } });
+Object.defineProperty(exports, "FormDescription", { enumerable: true, get: function () { return Form_1.FormDescription; } });
+Object.defineProperty(exports, "FormMessage", { enumerable: true, get: function () { return Form_1.FormMessage; } });
+Object.defineProperty(exports, "FormField", { enumerable: true, get: function () { return Form_1.FormField; } });
+//# sourceMappingURL=index.js.map

package/dist/Form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Form/index.ts"],"names":[],"mappings":";;;AAAA,+BAAsH;AAA7G,oGAAA,YAAY,OAAA;AAAE,4FAAA,IAAI,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAAE,iGAAA,SAAS,OAAA;AAAE,mGAAA,WAAW,OAAA;AAAE,uGAAA,eAAe,OAAA;AAAE,mGAAA,WAAW,OAAA;AAAE,iGAAA,SAAS,OAAA"}

package/dist/Select/SelectAccountCard.d.ts

@@ -1,6 +1,4 @@
 import * as React from 'react';
 import Select from 'react-select';
-declare const SelectAccountCard: React.ForwardRefExoticComponent<{
-    className?: string;
-} & React.RefAttributes<Select>>;
+declare const SelectAccountCard: React.ForwardRefExoticComponent<React.RefAttributes<Select>>;
 export { SelectAccountCard };

package/dist/Select/SelectAccountCard.js

@@ -6,7 +6,7 @@ const React = (0, tslib_1.__importStar)(require("react"));
 const Icon_1 = require("../Icon");
 const react_select_1 = (0, tslib_1.__importStar)(require("react-select"));
 const utils_1 = require("../@/lib/utils");
-const selectTriggerClasses = 'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white';
+const selectTriggerClasses = 'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white cursor-pointer';
 const colourStyles = {
     control: () => ({}),
     option: () => ({}),
@@ -19,8 +19,8 @@ const colourStyles = {
     valueContainer: () => ({}),
 };
 const Control = ({ children, ...props }) => {
-    const style = { cursor: 'pointer' };
-    return (React.createElement(react_select_1.components.Control, { className: selectTriggerClasses, ...props }, children));
+    const { isFocused } = props;
+    return (React.createElement(react_select_1.components.Control, { className: (0, utils_1.cn)(selectTriggerClasses, { 'outline outline-primary outline-offset-2 outline-2': isFocused }), ...props }, children));
 };
 const optionClasses = 'flex items-center first:rounded-t-md last:rounded-b-md px-[12px] py-[16px] w-full cursor-default select-none outline-none';
 const Option = ({ children, ...props }) => {
@@ -33,12 +33,12 @@ const Option = ({ children, ...props }) => {
             React.createElement("span", null,
                 React.createElement("span", null, label),
                 React.createElement("br", null),
-                React.createElement("span", { className: 'text-[14px] text-light' }, account)),
-            React.createElement("span", { className: 'ml-auto shrink-0' },
+                React.createElement("span", { className: "text-[14px] text-light" }, account)),
+            React.createElement("span", { className: "ml-auto shrink-0" },
                 balance,
                 "\u00A0",
                 cur)),
-        React.createElement("span", { className: 'ml-[16px] w-[24px] h-[24px] shrink-0' }, isSelected && (React.createElement(Icon_1.CheckSmall, { width: "24", height: "24", className: "text-primary" })))));
+        React.createElement("span", { className: "ml-[16px] w-[24px] h-[24px] shrink-0" }, isSelected && (React.createElement(Icon_1.CheckSmall, { width: "24", height: "24", className: "text-primary" })))));
 };
 const DropdownIndicator = ({ children, ...props }) => {
     return (React.createElement(react_select_1.components.DropdownIndicator, { className: "shrink-0", ...props },
@@ -50,7 +50,7 @@ const ValueContainer = ({ children, ...props }) => {
 const SingleValue = ({ children, ...props }) => {
     // @ts-ignore
     const { label, account, balance, cur } = props.data;
-    return (React.createElement(react_select_1.components.SingleValue, { className: 'col-start-1 col-end-3 row-start-1 row-end-2', ...props },
+    return (React.createElement(react_select_1.components.SingleValue, { className: "col-start-1 col-end-3 row-start-1 row-end-2", ...props },
         React.createElement("span", { className: "block max-w-full text-[16px] truncate leading-[1.5]" },
             label,
             " ",
@@ -61,9 +61,9 @@ const SingleValue = ({ children, ...props }) => {
             cur)));
 };
 const Menu = ({ children, ...props }) => {
-    return (React.createElement(react_select_1.components.Menu, { className: "bg-page drop-shadow-1 mt-[8px] rounded-md", ...props }, children));
+    return (React.createElement(react_select_1.components.Menu, { className: "absolute inset-x-0 bg-page drop-shadow-1 mt-[8px] rounded-md", ...props }, children));
 };
-const SelectAccountCard = React.forwardRef(({ className, ...props }, ref) => (React.createElement(react_select_1.default, { className: className, classNamePrefix: "super", isDisabled: false, isSearchable: false, components: {
+const SelectAccountCard = React.forwardRef(({ ...props }, ref) => (React.createElement(react_select_1.default, { isSearchable: false, components: {
         Control,
         Option,
         SingleValue,

package/dist/Select/SelectAccountCard.js.map

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

package/dist/index.d.ts

@@ -20,4 +20,5 @@ import { Switch } from './Switch';
 import { Label } from './Label';
 import { Textarea } from './Textarea';
 import { SelectAccountCard } from './Select';
-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, Alert, Switch, Label, Textarea, SelectAccountCard, };
+import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage } from './Form';
+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, Alert, Switch, Label, Textarea, SelectAccountCard, Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage, };

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectAccountCard = exports.Textarea = exports.Label = exports.Switch = exports.Alert = 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.FormMessage = exports.FormDescription = exports.FormControl = exports.FormItem = exports.FormField = exports.FormLabel = exports.Form = exports.SelectAccountCard = exports.Textarea = exports.Label = exports.Switch = exports.Alert = 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;
 const tslib_1 = require("tslib");
 const Tooltip_1 = require("./Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
@@ -63,4 +63,12 @@ const Textarea_1 = require("./Textarea");
 Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return Textarea_1.Textarea; } });
 const Select_1 = require("./Select");
 Object.defineProperty(exports, "SelectAccountCard", { enumerable: true, get: function () { return Select_1.SelectAccountCard; } });
+const Form_1 = require("./Form");
+Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.Form; } });
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return Form_1.FormLabel; } });
+Object.defineProperty(exports, "FormField", { enumerable: true, get: function () { return Form_1.FormField; } });
+Object.defineProperty(exports, "FormItem", { enumerable: true, get: function () { return Form_1.FormItem; } });
+Object.defineProperty(exports, "FormControl", { enumerable: true, get: function () { return Form_1.FormControl; } });
+Object.defineProperty(exports, "FormDescription", { enumerable: true, get: function () { return Form_1.FormDescription; } });
+Object.defineProperty(exports, "FormMessage", { enumerable: true, get: function () { return Form_1.FormMessage; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,uCAAmC;AAmClC,wFAnCQ,iBAAO,OAmCR;AAlCR,iCAA6B;AAmC5B,qFAnCQ,WAAI,OAmCR;AAlCL,qCAAiC;AAmChC,uFAnCQ,eAAM,OAmCR;AAlCP,uCAAmC;AAmClC,wFAnCQ,iBAAO,OAmCR;AAlCR,+DAAyB;AAmCxB,eAnCM,cAAI,CAmCN;AAlCL,2CAAsF;AAmCrF,yFAnCQ,oBAAQ,OAmCR;AACR,8FApCkB,yBAAa,OAoClB;AACb,6FArCiC,wBAAY,OAqCjC;AACZ,kGAtC+C,6BAAiB,OAsC/C;AArClB,yDAK2B;AAoD1B,iGAxDA,mCAAgB,OAwDA;AAChB,qGAxDA,uCAAoB,OAwDA;AACpB,yGAxDA,2CAAwB,OAwDA;AACxB,qGAxDA,uCAAoB,OAwDA;AAtDrB,0DAA8B;AA6C7B,oBAAI;AA5CL,+CAAmF;AA+BlF,4FA/BQ,yBAAW,OA+BR;AACX,mGAhCqB,gCAAkB,OAgCrB;AAClB,mGAjCyC,gCAAkB,OAiCzC;AAhCnB,+CAMsB;AA2BrB,mGAhCA,gCAAkB,OAgCA;AAClB,yGAhCA,sCAAwB,OAgCA;AACxB,0GAhCA,uCAAyB,OAgCA;AACzB,0GAhCA,uCAAyB,OAgCA;AACzB,8GAhCA,2CAA6B,OAgCA;AA9B9B,qCAAiC;AA+BhC,uFA/BQ,eAAM,OA+BR;AA9BP,mCAA+B;AAiC9B,sFAjCQ,aAAK,OAiCR;AAhCN,yCAAkC;AAiCjC,mFAjCQ,UAAE,OAiCR;AAhCH,qCAAyF;AAkCxF,uFAlCQ,eAAM,OAkCR;AACN,8FAnCgB,sBAAa,OAmChB;AACb,4FApC+B,oBAAW,OAoC/B;AACX,4FArC4C,oBAAW,OAqC5C;AACX,8FAtCyD,sBAAa,OAsCzD;AArCd,iCAA6B;AA0C5B,qFA1CQ,WAAI,OA0CR;AAzCL,iCAA6B;AA0C5B,qFA1CQ,WAAI,OA0CR;AAzCL,mCAAgD;AA0B/C,2FA1BQ,kBAAU,OA0BR;AACV,2FA3BoB,kBAAU,OA2BpB;AA1BX,mCAA+B;AAyC9B,sFAzCQ,aAAK,OAyCR;AAxCN,qCAAiC;AAyChC,uFAzCQ,eAAM,OAyCR;AAxCP,mCAA+B;AAyC9B,sFAzCQ,aAAK,OAyCR;AAxCN,yCAAqC;AAyCpC,yFAzCQ,mBAAQ,OAyCR;AAxCT,qCAA4C;AAyC3C,kGAzCQ,0BAAiB,OAyCR"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,uCAAmC;AAoClC,wFApCQ,iBAAO,OAoCR;AAnCR,iCAA6B;AAoC5B,qFApCQ,WAAI,OAoCR;AAnCL,qCAAiC;AAoChC,uFApCQ,eAAM,OAoCR;AAnCP,uCAAmC;AAoClC,wFApCQ,iBAAO,OAoCR;AAnCR,+DAAyB;AAoCxB,eApCM,cAAI,CAoCN;AAnCL,2CAAsF;AAoCrF,yFApCQ,oBAAQ,OAoCR;AACR,8FArCkB,yBAAa,OAqClB;AACb,6FAtCiC,wBAAY,OAsCjC;AACZ,kGAvC+C,6BAAiB,OAuC/C;AAtClB,yDAK2B;AAqD1B,iGAzDA,mCAAgB,OAyDA;AAChB,qGAzDA,uCAAoB,OAyDA;AACpB,yGAzDA,2CAAwB,OAyDA;AACxB,qGAzDA,uCAAoB,OAyDA;AAvDrB,0DAA8B;AA8C7B,oBAAI;AA7CL,+CAAmF;AAgClF,4FAhCQ,yBAAW,OAgCR;AACX,mGAjCqB,gCAAkB,OAiCrB;AAClB,mGAlCyC,gCAAkB,OAkCzC;AAjCnB,+CAMsB;AA4BrB,mGAjCA,gCAAkB,OAiCA;AAClB,yGAjCA,sCAAwB,OAiCA;AACxB,0GAjCA,uCAAyB,OAiCA;AACzB,0GAjCA,uCAAyB,OAiCA;AACzB,8GAjCA,2CAA6B,OAiCA;AA/B9B,qCAAiC;AAgChC,uFAhCQ,eAAM,OAgCR;AA/BP,mCAA+B;AAkC9B,sFAlCQ,aAAK,OAkCR;AAjCN,yCAAkC;AAkCjC,mFAlCQ,UAAE,OAkCR;AAjCH,qCAAyF;AAmCxF,uFAnCQ,eAAM,OAmCR;AACN,8FApCgB,sBAAa,OAoChB;AACb,4FArC+B,oBAAW,OAqC/B;AACX,4FAtC4C,oBAAW,OAsC5C;AACX,8FAvCyD,sBAAa,OAuCzD;AAtCd,iCAA6B;AA2C5B,qFA3CQ,WAAI,OA2CR;AA1CL,iCAA6B;AA2C5B,qFA3CQ,WAAI,OA2CR;AA1CL,mCAAgD;AA2B/C,2FA3BQ,kBAAU,OA2BR;AACV,2FA5BoB,kBAAU,OA4BpB;AA3BX,mCAA+B;AA0C9B,sFA1CQ,aAAK,OA0CR;AAzCN,qCAAiC;AA0ChC,uFA1CQ,eAAM,OA0CR;AAzCP,mCAA+B;AA0C9B,sFA1CQ,aAAK,OA0CR;AAzCN,yCAAqC;AA0CpC,yFA1CQ,mBAAQ,OA0CR;AAzCT,qCAA4C;AA0C3C,kGA1CQ,0BAAiB,OA0CR;AAzClB,iCAAwG;AA0CvG,qFA1CQ,WAAI,OA0CR;AACJ,0FA3Cc,gBAAS,OA2Cd;AACT,0FA5CyB,gBAAS,OA4CzB;AACT,yFA7CoC,eAAQ,OA6CpC;AACR,4FA9C8C,kBAAW,OA8C9C;AACX,gGA/C2D,sBAAe,OA+C3D;AACf,4FAhD4E,kBAAW,OAgD5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modul/mbui",
-  "version": "0.0.13-beta-pv-53036-091041a3",
+  "version": "0.0.13-beta-pv-53036-91768058",
   "packageManager": "yarn@3.5.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/Form/Form.tsx

@@ -118,7 +118,7 @@ const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttribu
 			<p
 				ref={ref}
 				id={formDescriptionId}
-				className={cn('text-[0.8rem] text-muted-foreground', className)}
+				className={cn('text-[0.8rem] text-light', className)}
 				{...props}
 			/>
 		)

package/src/Select/SelectAccountCard.tsx

@@ -16,7 +16,7 @@ import Select, {
 import { cn } from '../@/lib/utils'
 
 const selectTriggerClasses: string =
-	'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white'
+	'flex items-center bg-gradient-to-r from-[--cl-blue-3] to-primary shadow-[0px_8px_18px_0px_rgba(73,113,208,0.38)] px-[16px] py-[8px] border-none rounded-md min-h-[80px] text-left text-white cursor-pointer'
 
 const colourStyles: StylesConfig = {
 	control: () => ({}),
@@ -31,10 +31,13 @@ const colourStyles: StylesConfig = {
 }
 
 const Control = ({ children, ...props }: ControlProps) => {
-	const style = { cursor: 'pointer' }
+	const { isFocused } = props
 	return (
 		<components.Control
-			className={selectTriggerClasses}
+			className={cn(
+				selectTriggerClasses,
+				{ 'outline outline-primary outline-offset-2 outline-2': isFocused }
+			)}
 			{...props}
 		>
 			{children}
@@ -51,29 +54,26 @@ const Option = ({ children, ...props }: OptionProps) => {
 		isFocused,
 		isDisabled,
 		// @ts-ignore
-		data : { label, account, balance, cur },
+		data: { label, account, balance, cur },
 	} = props
 	const style = { cursor: 'pointer' }
 	return (
 		<components.Option
-			className={cn(
-				optionClasses,
-				{ 'bg-light': isFocused },
-				{ 'opacity-50 pointer-events-none': isDisabled }
-			)}
+			className={cn(optionClasses, { 'bg-light': isFocused }, { 'opacity-50 pointer-events-none': isDisabled })}
 			{...props}
 		>
 			<span className="flex basis-0 grow">
 				<span>
-					<span>{label}</span><br/>
-					<span className='text-[14px] text-light'>{account}</span>
+					<span>{label}</span>
+					<br />
+					<span className="text-[14px] text-light">{account}</span>
 				</span>
-				<span  className='ml-auto shrink-0'>
+				<span className="ml-auto shrink-0">
 					{balance}&nbsp;{cur}
 				</span>
 			</span>
 
-			<span className='ml-[16px] w-[24px] h-[24px] shrink-0'>
+			<span className="ml-[16px] w-[24px] h-[24px] shrink-0">
 				{isSelected && (
 					<CheckSmall
 						width="24"
@@ -82,7 +82,6 @@ const Option = ({ children, ...props }: OptionProps) => {
 					/>
 				)}
 			</span>
-
 		</components.Option>
 	)
 }
@@ -117,7 +116,10 @@ const SingleValue = ({ children, ...props }: SingleValueProps) => {
 	// @ts-ignore
 	const { label, account, balance, cur } = props.data
 	return (
-		<components.SingleValue className='col-start-1 col-end-3 row-start-1 row-end-2' {...props}>
+		<components.SingleValue
+			className="col-start-1 col-end-3 row-start-1 row-end-2"
+			{...props}
+		>
 			<span className="block max-w-full text-[16px] truncate leading-[1.5]">
 				{label} <span className="opacity-75 text-[14px] leading-[1.42]">{account}</span>
 			</span>
@@ -131,7 +133,7 @@ const SingleValue = ({ children, ...props }: SingleValueProps) => {
 const Menu = ({ children, ...props }: MenuProps) => {
 	return (
 		<components.Menu
-			className="bg-page drop-shadow-1 mt-[8px] rounded-md"
+			className="absolute inset-x-0 bg-page drop-shadow-1 mt-[8px] rounded-md"
 			{...props}
 		>
 			{children}
@@ -139,11 +141,8 @@ const Menu = ({ children, ...props }: MenuProps) => {
 	)
 }
 
-const SelectAccountCard = React.forwardRef<Select, { className?: string }>(({ className, ...props }, ref) => (
+const SelectAccountCard = React.forwardRef<Select>(({ ...props }, ref) => (
 	<Select
-		className={className}
-		classNamePrefix="super"
-		isDisabled={false}
 		isSearchable={false}
 		components={{
 			Control,
@@ -160,4 +159,5 @@ const SelectAccountCard = React.forwardRef<Select, { className?: string }>(({ cl
 	/>
 ))
 
+
 export { SelectAccountCard }

package/src/index.ts

@@ -31,6 +31,7 @@ import { Switch } from './Switch'
 import { Label } from './Label'
 import { Textarea } from './Textarea'
 import { SelectAccountCard } from './Select'
+import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, FormMessage } from './Form'
 
 export {
 	Tooltip,
@@ -72,4 +73,11 @@ export {
 	Label,
 	Textarea,
 	SelectAccountCard,
+	Form,
+	FormLabel,
+	FormField,
+	FormItem,
+	FormControl,
+	FormDescription,
+	FormMessage,
 }