@modul/mbui 0.0.19-beta-pv-53151-acf19c73 → 0.0.20-beta-test-30add321
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Badge/Badge.d.ts +10 -0
- package/dist/Badge/Badge.js +52 -0
- package/dist/Badge/Badge.js.map +1 -0
- package/dist/Badge/index.d.ts +1 -0
- package/dist/Badge/index.js +7 -0
- package/dist/Badge/index.js.map +1 -0
- package/dist/Checkbox/Checkbox.d.ts +4 -0
- package/dist/Checkbox/Checkbox.js +35 -0
- package/dist/Checkbox/Checkbox.js.map +1 -0
- package/dist/Checkbox/index.d.ts +1 -0
- package/dist/Checkbox/index.js +6 -0
- package/dist/Checkbox/index.js.map +1 -0
- package/dist/Drawer/Drawer.d.ts +4 -10
- package/dist/Drawer/Drawer.js +5 -29
- package/dist/Drawer/Drawer.js.map +1 -1
- package/dist/Drawer/index.d.ts +1 -1
- package/dist/Drawer/index.js +2 -2
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Input-OTP/Input.js +2 -3
- package/dist/Input-OTP/Input.js.map +1 -1
- package/dist/index.d.ts +6 -4
- package/dist/index.js +8 -3
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
- package/src/@/config/index.ts +5 -0
- package/src/Badge/Badge.tsx +58 -0
- package/src/Badge/index.ts +1 -0
- package/src/Checkbox/Checkbox.tsx +44 -0
- package/src/Checkbox/index.ts +1 -0
- package/src/Drawer/Drawer.tsx +3 -82
- package/src/Drawer/index.ts +1 -1
- package/src/Input-OTP/Input.tsx +2 -2
- package/src/assets/css/global.css +4 -1
- package/src/index.ts +11 -5
- package/src/pages/payments/SmsSign/sms-sign.tsx +75 -0
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
declare const badgeVariants: (props?: {
|
|
4
|
+
variant?: "default";
|
|
5
|
+
size?: "default" | "dot";
|
|
6
|
+
} & import("class-variance-authority/dist/types").ClassProp) => string;
|
|
7
|
+
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
8
|
+
}
|
|
9
|
+
declare function Badge({ className, variant, size, ...props }: BadgeProps): React.JSX.Element;
|
|
10
|
+
export { Badge, badgeVariants };
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.badgeVariants = exports.Badge = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const React = (0, tslib_1.__importStar)(require("react"));
|
|
6
|
+
const class_variance_authority_1 = require("class-variance-authority");
|
|
7
|
+
const utils_1 = require("../@/lib/utils");
|
|
8
|
+
const badgeClasses = {
|
|
9
|
+
variant: {
|
|
10
|
+
base: `
|
|
11
|
+
inline-block
|
|
12
|
+
focus:ring-2
|
|
13
|
+
focus:ring-ring
|
|
14
|
+
focus:ring-offset-2
|
|
15
|
+
focus:outline-none
|
|
16
|
+
transition-colors
|
|
17
|
+
rounded-full
|
|
18
|
+
`,
|
|
19
|
+
default: `
|
|
20
|
+
bg-critical
|
|
21
|
+
text-white
|
|
22
|
+
`,
|
|
23
|
+
},
|
|
24
|
+
size: {
|
|
25
|
+
default: 'size-[16px] text-[10px] text-center leadimg-[1] truncate',
|
|
26
|
+
dot: 'size-[10px] bg-critical-light border-critical border-[3px]',
|
|
27
|
+
sm: '',
|
|
28
|
+
md: '',
|
|
29
|
+
lg: '',
|
|
30
|
+
},
|
|
31
|
+
};
|
|
32
|
+
const badgeVariants = (0, class_variance_authority_1.cva)(badgeClasses.variant.base, {
|
|
33
|
+
variants: {
|
|
34
|
+
variant: {
|
|
35
|
+
default: badgeClasses.variant.default,
|
|
36
|
+
},
|
|
37
|
+
size: {
|
|
38
|
+
default: badgeClasses.size.default,
|
|
39
|
+
dot: badgeClasses.size.dot
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
defaultVariants: {
|
|
43
|
+
variant: 'default',
|
|
44
|
+
size: 'default',
|
|
45
|
+
},
|
|
46
|
+
});
|
|
47
|
+
exports.badgeVariants = badgeVariants;
|
|
48
|
+
function Badge({ className, variant, size, ...props }) {
|
|
49
|
+
return (React.createElement("div", { className: (0, utils_1.cn)(badgeVariants({ variant, size }), className), ...props }));
|
|
50
|
+
}
|
|
51
|
+
exports.Badge = Badge;
|
|
52
|
+
//# sourceMappingURL=Badge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/Badge/Badge.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,uEAAiE;AAEjE,0CAAmC;AAEnC,MAAM,YAAY,GAAG;IACpB,OAAO,EAAE;QACR,IAAI,EAAE;;;;;;;;IAQJ;QACF,OAAO,EAAE;;;GAGR;KACD;IACD,IAAI,EAAE;QACL,OAAO,EAAE,0DAA0D;QACnE,GAAG,EAAE,4DAA4D;QACjE,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;QACN,EAAE,EAAE,EAAE;KACN;CACD,CAAA;AAED,MAAM,aAAa,GAAG,IAAA,8BAAG,EAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;IACpD,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EAAE,YAAY,CAAC,OAAO,CAAC,OAAO;SACrC;QACD,IAAI,EAAE;YACL,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO;YAClC,GAAG,EAAE,YAAY,CAAC,IAAI,CAAC,GAAG;SAC1B;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,SAAS;KACf;CACD,CAAC,CAAA;AAac,sCAAa;AAT7B,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,EAAc;IAChE,OAAO,CACN,6BACC,SAAS,EAAE,IAAA,UAAE,EAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,CAAC,KACtD,KAAK,GACR,CACF,CAAA;AACF,CAAC;AAEQ,sBAAK"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Badge, badgeVariants } from './Badge';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.badgeVariants = exports.Badge = void 0;
|
|
4
|
+
var Badge_1 = require("./Badge");
|
|
5
|
+
Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
|
|
6
|
+
Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return Badge_1.badgeVariants; } });
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Badge/index.ts"],"names":[],"mappings":";;;AAAA,iCAA8C;AAArC,8FAAA,KAAK,OAAA;AAAE,sGAAA,aAAa,OAAA"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
3
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
export { Checkbox };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Checkbox = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const React = (0, tslib_1.__importStar)(require("react"));
|
|
6
|
+
const CheckboxPrimitive = (0, tslib_1.__importStar)(require("@radix-ui/react-checkbox"));
|
|
7
|
+
const icons_1 = require("../Icon/icons");
|
|
8
|
+
const checkboxClasses = {
|
|
9
|
+
root: `
|
|
10
|
+
peer
|
|
11
|
+
size-[18px]
|
|
12
|
+
shrink-0
|
|
13
|
+
rounded-sm
|
|
14
|
+
border-2
|
|
15
|
+
border-input
|
|
16
|
+
focus-visible:outline-none
|
|
17
|
+
focus-visible:ring-1 focus-visible:ring-ring
|
|
18
|
+
disabled:cursor-not-allowed disabled:opacity-50
|
|
19
|
+
data-[state=checked]:bg-primary
|
|
20
|
+
data-[state=checked]:border-primary
|
|
21
|
+
data-[state=checked]:text-white
|
|
22
|
+
`,
|
|
23
|
+
indicator: `
|
|
24
|
+
flex
|
|
25
|
+
justify-center
|
|
26
|
+
items-center
|
|
27
|
+
text-current
|
|
28
|
+
`
|
|
29
|
+
};
|
|
30
|
+
const Checkbox = React.forwardRef(({ className, ...props }, ref) => (React.createElement(CheckboxPrimitive.Root, { ref: ref, className: checkboxClasses.root, ...props },
|
|
31
|
+
React.createElement(CheckboxPrimitive.Indicator, { className: checkboxClasses.indicator },
|
|
32
|
+
React.createElement(icons_1.CheckSmall, { className: "size-[14px]" })))));
|
|
33
|
+
exports.Checkbox = Checkbox;
|
|
34
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
35
|
+
//# sourceMappingURL=Checkbox.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,yFAA6D;AAC7D,yCAA0C;AAE1C,MAAM,eAAe,GAAG;IACvB,IAAI,EAAE;;;;;;;;;;;;;GAaJ;IACF,SAAS,EAAE;;;;;EAKV;CACD,CAAA;AAED,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,oBAAC,iBAAiB,CAAC,IAAI,IACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,IAAI,KAC3B,KAAK;IAET,oBAAC,iBAAiB,CAAC,SAAS,IAAC,SAAS,EAAE,eAAe,CAAC,SAAS;QAChE,oBAAC,kBAAU,IAAC,SAAS,EAAC,aAAa,GAAG,CACT,CACN,CACzB,CAAC,CAAA;AAGO,4BAAQ;AAFjB,QAAQ,CAAC,WAAW,GAAG,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Checkbox } from './Checkbox';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.Checkbox = void 0;
|
|
4
|
+
var Checkbox_1 = require("./Checkbox");
|
|
5
|
+
Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":";;;AAAA,uCAAqC;AAA5B,oGAAA,QAAQ,OAAA"}
|
package/dist/Drawer/Drawer.d.ts
CHANGED
|
@@ -1,13 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
declare const Drawer: {
|
|
4
|
-
({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
|
|
5
|
-
displayName: string;
|
|
6
|
-
};
|
|
2
|
+
declare const Drawer: typeof import("vaul").Root;
|
|
7
3
|
declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
4
|
+
declare const DrawerContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
5
|
+
declare const DrawerPortal: typeof import("vaul").Portal;
|
|
8
6
|
declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
9
|
-
|
|
10
|
-
declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
11
|
-
onAnimationEnd?: (open: boolean) => void;
|
|
12
|
-
} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
-
export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose };
|
|
7
|
+
export { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerClose };
|
package/dist/Drawer/Drawer.js
CHANGED
|
@@ -1,39 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DrawerClose = exports.
|
|
4
|
-
const tslib_1 = require("tslib");
|
|
5
|
-
const React = (0, tslib_1.__importStar)(require("react"));
|
|
3
|
+
exports.DrawerClose = exports.DrawerPortal = exports.DrawerContent = exports.DrawerTrigger = exports.Drawer = void 0;
|
|
6
4
|
const vaul_1 = require("vaul");
|
|
7
|
-
const
|
|
8
|
-
const react_1 = require("react");
|
|
9
|
-
const DrawerContext = React.createContext({ direction: 'bottom', modal: false });
|
|
10
|
-
const Drawer = ({ ...props }) => {
|
|
11
|
-
return (React.createElement(DrawerContext.Provider, { value: { direction: props.direction, modal: props.modal } },
|
|
12
|
-
React.createElement(vaul_1.Drawer.Root, { ...props })));
|
|
13
|
-
};
|
|
5
|
+
const Drawer = vaul_1.Drawer.Root;
|
|
14
6
|
exports.Drawer = Drawer;
|
|
15
|
-
Drawer.displayName = 'Drawer';
|
|
16
7
|
const DrawerTrigger = vaul_1.Drawer.Trigger;
|
|
17
8
|
exports.DrawerTrigger = DrawerTrigger;
|
|
9
|
+
const DrawerContent = vaul_1.Drawer.Content;
|
|
10
|
+
exports.DrawerContent = DrawerContent;
|
|
18
11
|
const DrawerPortal = vaul_1.Drawer.Portal;
|
|
12
|
+
exports.DrawerPortal = DrawerPortal;
|
|
19
13
|
const DrawerClose = vaul_1.Drawer.Close;
|
|
20
14
|
exports.DrawerClose = DrawerClose;
|
|
21
|
-
const DrawerOverlay = vaul_1.Drawer.Overlay;
|
|
22
|
-
const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (React.createElement(vaul_1.Drawer.Title, { ref: ref, className: (0, utils_1.cn)(className), ...props })));
|
|
23
|
-
exports.DrawerTitle = DrawerTitle;
|
|
24
|
-
DrawerTitle.displayName = vaul_1.Drawer.Title.displayName;
|
|
25
|
-
const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => {
|
|
26
|
-
const { direction = 'bottom', modal = false } = (0, react_1.useContext)(DrawerContext);
|
|
27
|
-
return (React.createElement(DrawerPortal, null,
|
|
28
|
-
modal && React.createElement(DrawerOverlay, { className: 'z-50 fixed inset-0 bg-[--drawer-overlay-bg]' }),
|
|
29
|
-
React.createElement(vaul_1.Drawer.Content, { ref: ref, className: (0, utils_1.cn)(`z-50 fixed inset-x-0 flex flex-col bg-page shadow-sm max-h-[94%] sm:container`, direction === 'top' ? 'top-0 rounded-b-sm ' : 'bottom-0 rounded-t-sm', className), ...props },
|
|
30
|
-
direction !== 'top' && (React.createElement("div", { className: "pt-[4px] pb-[16px]" },
|
|
31
|
-
React.createElement("span", { className: "block bg-[--cl-graphite-5] mx-auto rounded-full w-[36px] h-[5px]" }))),
|
|
32
|
-
children,
|
|
33
|
-
direction === 'top' && (React.createElement("div", { className: "pt-[24px] pb-[16px]" },
|
|
34
|
-
React.createElement("svg", { className: "mx-auto", width: "38", height: "10", viewBox: "0 0 38 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
35
|
-
React.createElement("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: "var(--cl-graphite-5)" })))))));
|
|
36
|
-
});
|
|
37
|
-
exports.DrawerContent = DrawerContent;
|
|
38
|
-
DrawerContent.displayName = 'DrawerContent';
|
|
39
15
|
//# sourceMappingURL=Drawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";;;AACA,+BAAgD;AAEhD,MAAM,MAAM,GAAG,aAAe,CAAC,IAAI,CAAA;AAM1B,wBAAM;AALf,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AAK5B,sCAAa;AAJ9B,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AAIb,sCAAa;AAH7C,MAAM,YAAY,GAAG,aAAe,CAAC,MAAM,CAAA;AAGI,oCAAY;AAF3D,MAAM,WAAW,GAAG,aAAe,CAAC,KAAK,CAAA;AAEoB,kCAAW"}
|
package/dist/Drawer/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Drawer, DrawerTrigger, DrawerClose, DrawerContent,
|
|
1
|
+
export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerPortal, } from './Drawer';
|
package/dist/Drawer/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
3
|
+
exports.DrawerPortal = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = void 0;
|
|
4
4
|
var Drawer_1 = require("./Drawer");
|
|
5
5
|
Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_1.Drawer; } });
|
|
6
6
|
Object.defineProperty(exports, "DrawerTrigger", { enumerable: true, get: function () { return Drawer_1.DrawerTrigger; } });
|
|
7
7
|
Object.defineProperty(exports, "DrawerClose", { enumerable: true, get: function () { return Drawer_1.DrawerClose; } });
|
|
8
8
|
Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return Drawer_1.DrawerContent; } });
|
|
9
|
-
Object.defineProperty(exports, "
|
|
9
|
+
Object.defineProperty(exports, "DrawerPortal", { enumerable: true, get: function () { return Drawer_1.DrawerPortal; } });
|
|
10
10
|
//# sourceMappingURL=index.js.map
|
package/dist/Drawer/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":";;;AAAA,mCAMmB;AALlB,gGAAA,MAAM,OAAA;AACN,uGAAA,aAAa,OAAA;AACb,qGAAA,WAAW,OAAA;AACX,uGAAA,aAAa,OAAA;AACb,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":";;;AAAA,mCAMmB;AALlB,gGAAA,MAAM,OAAA;AACN,uGAAA,aAAa,OAAA;AACb,qGAAA,WAAW,OAAA;AACX,uGAAA,aAAa,OAAA;AACb,sGAAA,YAAY,OAAA"}
|
package/dist/Input-OTP/Input.js
CHANGED
|
@@ -14,10 +14,9 @@ InputOTPGroup.displayName = 'InputOTPGroup';
|
|
|
14
14
|
const InputOTPSlot = React.forwardRef(({ index, className, ...props }, ref) => {
|
|
15
15
|
const inputOTPContext = React.useContext(input_otp_1.OTPInputContext);
|
|
16
16
|
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
|
|
17
|
-
return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)('relative flex h-[48px] w-[20px] items-center justify-center border-b-[2px] border-input transition-all', isActive && '
|
|
17
|
+
return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)('relative flex h-[48px] w-[20px] items-center justify-center border-b-[2px] border-input transition-all', isActive && 'border-b-primary animate-caret-blink duration-1000', className), ...props },
|
|
18
18
|
char,
|
|
19
|
-
hasFakeCaret && (React.createElement("div", { className: "absolute inset-0 flex justify-center items-center pointer-events-none" }
|
|
20
|
-
React.createElement("div", { className: "bg-foreground w-px h-4 animate-caret-blink duration-1000" })))));
|
|
19
|
+
hasFakeCaret && (React.createElement("div", { className: "absolute inset-0 flex justify-center items-center pointer-events-none" }))));
|
|
21
20
|
});
|
|
22
21
|
exports.InputOTPSlot = InputOTPSlot;
|
|
23
22
|
InputOTPSlot.displayName = 'InputOTPSlot';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input-OTP/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,yCAAqD;AACrD,0CAAmC;AAEnC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACrD,oBAAC,oBAAQ,IACR,GAAG,EAAE,GAAG,EACR,kBAAkB,EAAE,IAAA,UAAE,EAAC,8CAA8C,EAAE,kBAAkB,CAAC,EAC1F,SAAS,EAAE,IAAA,UAAE,EAAC,6BAA6B,EAAE,SAAS,CAAC,KACnD,KAAK,GACR,CACF,CACD,CAAA;AAwDQ,4BAAQ;AAvDjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACjC,6BACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,mBAAmB,EAAE,SAAS,CAAC,KACzC,KAAK,GACR,CACF,CACD,CAAA;AA6CkB,sCAAa;AA5ChC,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA;AAE3C,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAGnC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAe,CAAC,CAAA;IACzD,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAErE,OAAO,CACN,6BACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACZ,wGAAwG,EACxG,QAAQ,IAAI,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input-OTP/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,yCAAqD;AACrD,0CAAmC;AAEnC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAChC,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACrD,oBAAC,oBAAQ,IACR,GAAG,EAAE,GAAG,EACR,kBAAkB,EAAE,IAAA,UAAE,EAAC,8CAA8C,EAAE,kBAAkB,CAAC,EAC1F,SAAS,EAAE,IAAA,UAAE,EAAC,6BAA6B,EAAE,SAAS,CAAC,KACnD,KAAK,GACR,CACF,CACD,CAAA;AAwDQ,4BAAQ;AAvDjB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACjC,6BACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,mBAAmB,EAAE,SAAS,CAAC,KACzC,KAAK,GACR,CACF,CACD,CAAA;AA6CkB,sCAAa;AA5ChC,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA;AAE3C,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAGnC,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,2BAAe,CAAC,CAAA;IACzD,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;IAErE,OAAO,CACN,6BACC,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACZ,wGAAwG,EACxG,QAAQ,IAAI,oDAAoD,EAChE,SAAS,CACT,KACG,KAAK;QAGR,IAAI;QACJ,YAAY,IAAI,CAChB,6BAAK,SAAS,EAAC,uEAAuE,GAEhF,CACN,CACI,CACN,CAAA;AACF,CAAC,CAAC,CAAA;AAgBgC,oCAAY;AAf9C,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACtB,6BACC,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,WAAW,KACZ,KAAK,qCAGJ,CACN,CACD,CAAA;AAG+C,8CAAiB;AAFjE,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,10 +8,10 @@ import { BottomNavigation, BottomNavigationList, BottomNavigationListItem, Botto
|
|
|
8
8
|
import * as Icon from './Icon';
|
|
9
9
|
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
|
|
10
10
|
import { AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem } from './Collapsible';
|
|
11
|
-
import { Button, ButtonWidget } from './Button';
|
|
11
|
+
import { Button, buttonVariants, ButtonWidget } from './Button';
|
|
12
12
|
import { Audio } from './Audio';
|
|
13
13
|
import { cn } from './@/lib/utils';
|
|
14
|
-
import { Drawer, DrawerTrigger,
|
|
14
|
+
import { Drawer, DrawerTrigger, DrawerClose, DrawerContent } from './Drawer';
|
|
15
15
|
import { Page } from './Page';
|
|
16
16
|
import { Chip } from './Chip';
|
|
17
17
|
import { InputField, InputLabel, InputMask } from './Input';
|
|
@@ -24,9 +24,11 @@ import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, For
|
|
|
24
24
|
import { Calendar } from './Calendar';
|
|
25
25
|
import { DatePicker } from './DatePicker';
|
|
26
26
|
import { Select } from './Select';
|
|
27
|
-
import { Progress } from
|
|
27
|
+
import { Progress } from './Progress';
|
|
28
28
|
import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './AlertDialog';
|
|
29
29
|
import { MessageTyping } from "./Chat";
|
|
30
30
|
import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses } from './FavoritePyments';
|
|
31
31
|
import { DigitKeyPad } from "./DigitKeyPad";
|
|
32
|
-
|
|
32
|
+
import { Badge, badgeVariants } from './Badge';
|
|
33
|
+
import { Checkbox } from './Checkbox';
|
|
34
|
+
export { Tooltip, 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, 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, Badge, badgeVariants, Checkbox, farvoriteLinkClasses, DigitKeyPad, ButtonWidget, };
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
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.
|
|
4
|
-
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;
|
|
3
|
+
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.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.InputLabel = exports.InputField = exports.buttonVariants = 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;
|
|
4
|
+
exports.ButtonWidget = exports.DigitKeyPad = exports.farvoriteLinkClasses = exports.Checkbox = exports.badgeVariants = exports.Badge = 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;
|
|
5
5
|
const tslib_1 = require("tslib");
|
|
6
6
|
const Tooltip_1 = require("./Tooltip");
|
|
7
7
|
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
|
|
@@ -37,6 +37,7 @@ Object.defineProperty(exports, "AccountCollapsibleContent", { enumerable: true,
|
|
|
37
37
|
Object.defineProperty(exports, "AccountCollapsibleContentItem", { enumerable: true, get: function () { return Collapsible_2.AccountCollapsibleContentItem; } });
|
|
38
38
|
const Button_1 = require("./Button");
|
|
39
39
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
|
|
40
|
+
Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return Button_1.buttonVariants; } });
|
|
40
41
|
Object.defineProperty(exports, "ButtonWidget", { enumerable: true, get: function () { return Button_1.ButtonWidget; } });
|
|
41
42
|
const Audio_1 = require("./Audio");
|
|
42
43
|
Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return Audio_1.Audio; } });
|
|
@@ -45,7 +46,6 @@ Object.defineProperty(exports, "cn", { enumerable: true, get: function () { retu
|
|
|
45
46
|
const Drawer_1 = require("./Drawer");
|
|
46
47
|
Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_1.Drawer; } });
|
|
47
48
|
Object.defineProperty(exports, "DrawerTrigger", { enumerable: true, get: function () { return Drawer_1.DrawerTrigger; } });
|
|
48
|
-
Object.defineProperty(exports, "DrawerTitle", { enumerable: true, get: function () { return Drawer_1.DrawerTitle; } });
|
|
49
49
|
Object.defineProperty(exports, "DrawerClose", { enumerable: true, get: function () { return Drawer_1.DrawerClose; } });
|
|
50
50
|
Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return Drawer_1.DrawerContent; } });
|
|
51
51
|
const Page_1 = require("./Page");
|
|
@@ -102,4 +102,9 @@ Object.defineProperty(exports, "FarvoritePaymentDescription", { enumerable: true
|
|
|
102
102
|
Object.defineProperty(exports, "farvoriteLinkClasses", { enumerable: true, get: function () { return FavoritePyments_1.farvoriteLinkClasses; } });
|
|
103
103
|
const DigitKeyPad_1 = require("./DigitKeyPad");
|
|
104
104
|
Object.defineProperty(exports, "DigitKeyPad", { enumerable: true, get: function () { return DigitKeyPad_1.DigitKeyPad; } });
|
|
105
|
+
const Badge_1 = require("./Badge");
|
|
106
|
+
Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
|
|
107
|
+
Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return Badge_1.badgeVariants; } });
|
|
108
|
+
const Checkbox_1 = require("./Checkbox");
|
|
109
|
+
Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });
|
|
105
110
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,uCAAmC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@modul/mbui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.20-beta-test-30add321",
|
|
4
4
|
"packageManager": "yarn@3.5.1",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"@hookform/resolvers": "3.9.0",
|
|
25
25
|
"@radix-ui/react-accordion": "^1.2.0",
|
|
26
26
|
"@radix-ui/react-alert-dialog": "1.1.1",
|
|
27
|
+
"@radix-ui/react-checkbox": "1.1.1",
|
|
27
28
|
"@radix-ui/react-collapsible": "1.1.0",
|
|
28
29
|
"@radix-ui/react-dropdown-menu": "2.1.1",
|
|
29
30
|
"@radix-ui/react-label": "2.1.0",
|
|
@@ -48,7 +49,7 @@
|
|
|
48
49
|
"tailwind-merge": "^2.3.0",
|
|
49
50
|
"tailwindcss": "^3.4.4",
|
|
50
51
|
"tailwindcss-animate": "^1.0.7",
|
|
51
|
-
"vaul": "0.9.
|
|
52
|
+
"vaul": "0.9.9",
|
|
52
53
|
"zod": "3.23.8"
|
|
53
54
|
},
|
|
54
55
|
"devDependencies": {
|
package/src/@/config/index.ts
CHANGED
|
@@ -75,10 +75,15 @@ export default {
|
|
|
75
75
|
from: { height: 'var(--radix-accordion-content-height)' },
|
|
76
76
|
to: { height: '0' },
|
|
77
77
|
},
|
|
78
|
+
'caret-blink': {
|
|
79
|
+
'0%,70%,100%': { opacity: '1' },
|
|
80
|
+
'20%,50%': { opacity: '0' },
|
|
81
|
+
},
|
|
78
82
|
},
|
|
79
83
|
animation: {
|
|
80
84
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
81
85
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
86
|
+
'caret-blink': 'caret-blink 1.25s ease-out infinite',
|
|
82
87
|
},
|
|
83
88
|
},
|
|
84
89
|
}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import { cva, type VariantProps } from 'class-variance-authority'
|
|
3
|
+
|
|
4
|
+
import { cn } from '../@/lib/utils'
|
|
5
|
+
|
|
6
|
+
const badgeClasses = {
|
|
7
|
+
variant: {
|
|
8
|
+
base: `
|
|
9
|
+
inline-block
|
|
10
|
+
focus:ring-2
|
|
11
|
+
focus:ring-ring
|
|
12
|
+
focus:ring-offset-2
|
|
13
|
+
focus:outline-none
|
|
14
|
+
transition-colors
|
|
15
|
+
rounded-full
|
|
16
|
+
`,
|
|
17
|
+
default: `
|
|
18
|
+
bg-critical
|
|
19
|
+
text-white
|
|
20
|
+
`,
|
|
21
|
+
},
|
|
22
|
+
size: {
|
|
23
|
+
default: 'size-[16px] text-[10px] text-center leadimg-[1] truncate',
|
|
24
|
+
dot: 'size-[10px] bg-critical-light border-critical border-[3px]',
|
|
25
|
+
sm: '',
|
|
26
|
+
md: '',
|
|
27
|
+
lg: '',
|
|
28
|
+
},
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const badgeVariants = cva(badgeClasses.variant.base, {
|
|
32
|
+
variants: {
|
|
33
|
+
variant: {
|
|
34
|
+
default: badgeClasses.variant.default,
|
|
35
|
+
},
|
|
36
|
+
size: {
|
|
37
|
+
default: badgeClasses.size.default,
|
|
38
|
+
dot: badgeClasses.size.dot
|
|
39
|
+
},
|
|
40
|
+
},
|
|
41
|
+
defaultVariants: {
|
|
42
|
+
variant: 'default',
|
|
43
|
+
size: 'default',
|
|
44
|
+
},
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
|
|
48
|
+
|
|
49
|
+
function Badge({ className, variant, size, ...props }: BadgeProps) {
|
|
50
|
+
return (
|
|
51
|
+
<div
|
|
52
|
+
className={cn(badgeVariants({ variant, size }), className)}
|
|
53
|
+
{...props}
|
|
54
|
+
/>
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
export { Badge, badgeVariants }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Badge, badgeVariants } from './Badge'
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
|
|
3
|
+
import { CheckSmall } from '../Icon/icons'
|
|
4
|
+
|
|
5
|
+
const checkboxClasses = {
|
|
6
|
+
root: `
|
|
7
|
+
peer
|
|
8
|
+
size-[18px]
|
|
9
|
+
shrink-0
|
|
10
|
+
rounded-sm
|
|
11
|
+
border-2
|
|
12
|
+
border-input
|
|
13
|
+
focus-visible:outline-none
|
|
14
|
+
focus-visible:ring-1 focus-visible:ring-ring
|
|
15
|
+
disabled:cursor-not-allowed disabled:opacity-50
|
|
16
|
+
data-[state=checked]:bg-primary
|
|
17
|
+
data-[state=checked]:border-primary
|
|
18
|
+
data-[state=checked]:text-white
|
|
19
|
+
`,
|
|
20
|
+
indicator: `
|
|
21
|
+
flex
|
|
22
|
+
justify-center
|
|
23
|
+
items-center
|
|
24
|
+
text-current
|
|
25
|
+
`
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const Checkbox = React.forwardRef<
|
|
29
|
+
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
|
30
|
+
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
|
31
|
+
>(({ className, ...props }, ref) => (
|
|
32
|
+
<CheckboxPrimitive.Root
|
|
33
|
+
ref={ref}
|
|
34
|
+
className={checkboxClasses.root}
|
|
35
|
+
{...props}
|
|
36
|
+
>
|
|
37
|
+
<CheckboxPrimitive.Indicator className={checkboxClasses.indicator}>
|
|
38
|
+
<CheckSmall className="size-[14px]" />
|
|
39
|
+
</CheckboxPrimitive.Indicator>
|
|
40
|
+
</CheckboxPrimitive.Root>
|
|
41
|
+
))
|
|
42
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName
|
|
43
|
+
|
|
44
|
+
export { Checkbox }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Checkbox } from './Checkbox'
|
package/src/Drawer/Drawer.tsx
CHANGED
|
@@ -1,89 +1,10 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
2
|
import { Drawer as DrawerPrimitive } from 'vaul'
|
|
3
|
-
import { cn } from '../@/lib/utils'
|
|
4
|
-
import { useContext } from 'react'
|
|
5
|
-
|
|
6
|
-
const DrawerContext = React.createContext({direction: 'bottom', modal: false})
|
|
7
|
-
|
|
8
|
-
const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
|
|
9
|
-
return (
|
|
10
|
-
<DrawerContext.Provider value={{direction: props.direction, modal: props.modal}}>
|
|
11
|
-
<DrawerPrimitive.Root {...props} />
|
|
12
|
-
</DrawerContext.Provider>
|
|
13
|
-
)
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
Drawer.displayName = 'Drawer'
|
|
17
3
|
|
|
4
|
+
const Drawer = DrawerPrimitive.Root
|
|
18
5
|
const DrawerTrigger = DrawerPrimitive.Trigger
|
|
19
|
-
|
|
6
|
+
const DrawerContent = DrawerPrimitive.Content
|
|
20
7
|
const DrawerPortal = DrawerPrimitive.Portal
|
|
21
|
-
|
|
22
8
|
const DrawerClose = DrawerPrimitive.Close
|
|
23
9
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const DrawerTitle = React.forwardRef<
|
|
27
|
-
React.ElementRef<typeof DrawerPrimitive.Title>,
|
|
28
|
-
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
|
|
29
|
-
>(({ className, ...props }, ref) => (
|
|
30
|
-
<DrawerPrimitive.Title
|
|
31
|
-
ref={ref}
|
|
32
|
-
className={cn(className)}
|
|
33
|
-
{...props}
|
|
34
|
-
/>
|
|
35
|
-
))
|
|
36
|
-
|
|
37
|
-
DrawerTitle.displayName = DrawerPrimitive.Title.displayName
|
|
38
|
-
|
|
39
|
-
const DrawerContent = React.forwardRef<
|
|
40
|
-
React.ElementRef<typeof DrawerPrimitive.Content>,
|
|
41
|
-
React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
|
|
42
|
-
>(({ className, children, ...props }, ref) => {
|
|
43
|
-
const {direction = 'bottom', modal = false} = useContext(DrawerContext)
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<DrawerPortal>
|
|
47
|
-
{modal && <DrawerOverlay className='z-50 fixed inset-0 bg-[--drawer-overlay-bg]' />}
|
|
48
|
-
<DrawerPrimitive.Content
|
|
49
|
-
ref={ref}
|
|
50
|
-
className={cn(
|
|
51
|
-
`z-50 fixed inset-x-0 flex flex-col bg-page shadow-sm max-h-[94%] sm:container`,
|
|
52
|
-
direction === 'top' ? 'top-0 rounded-b-sm ' : 'bottom-0 rounded-t-sm',
|
|
53
|
-
className
|
|
54
|
-
)}
|
|
55
|
-
{...props}
|
|
56
|
-
>
|
|
57
|
-
{direction !== 'top' && (
|
|
58
|
-
<div className="pt-[4px] pb-[16px]">
|
|
59
|
-
<span className="block bg-[--cl-graphite-5] mx-auto rounded-full w-[36px] h-[5px]" />
|
|
60
|
-
</div>
|
|
61
|
-
)}
|
|
62
|
-
|
|
63
|
-
{children}
|
|
64
|
-
|
|
65
|
-
{direction === 'top' && (
|
|
66
|
-
<div className="pt-[24px] pb-[16px]">
|
|
67
|
-
<svg
|
|
68
|
-
className="mx-auto"
|
|
69
|
-
width="38"
|
|
70
|
-
height="10"
|
|
71
|
-
viewBox="0 0 38 10"
|
|
72
|
-
fill="none"
|
|
73
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
74
|
-
>
|
|
75
|
-
<path
|
|
76
|
-
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"
|
|
77
|
-
fill="var(--cl-graphite-5)"
|
|
78
|
-
/>
|
|
79
|
-
</svg>
|
|
80
|
-
</div>
|
|
81
|
-
)}
|
|
82
|
-
</DrawerPrimitive.Content>
|
|
83
|
-
</DrawerPortal>
|
|
84
|
-
)
|
|
85
|
-
})
|
|
86
|
-
|
|
87
|
-
DrawerContent.displayName = 'DrawerContent'
|
|
88
|
-
|
|
89
|
-
export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose }
|
|
10
|
+
export { Drawer, DrawerTrigger, DrawerContent, DrawerPortal, DrawerClose}
|
package/src/Drawer/index.ts
CHANGED
package/src/Input-OTP/Input.tsx
CHANGED
|
@@ -37,7 +37,7 @@ const InputOTPSlot = React.forwardRef<
|
|
|
37
37
|
ref={ref}
|
|
38
38
|
className={cn(
|
|
39
39
|
'relative flex h-[48px] w-[20px] items-center justify-center border-b-[2px] border-input transition-all',
|
|
40
|
-
isActive && '
|
|
40
|
+
isActive && 'border-b-primary animate-caret-blink duration-1000',
|
|
41
41
|
className
|
|
42
42
|
)}
|
|
43
43
|
{...props}
|
|
@@ -46,7 +46,7 @@ const InputOTPSlot = React.forwardRef<
|
|
|
46
46
|
{char}
|
|
47
47
|
{hasFakeCaret && (
|
|
48
48
|
<div className="absolute inset-0 flex justify-center items-center pointer-events-none">
|
|
49
|
-
<div className="bg-
|
|
49
|
+
{/* <div className="bg-primary w-[2px] h-[32px] animate-caret-blink duration-1000" /> */}
|
|
50
50
|
</div>
|
|
51
51
|
)}
|
|
52
52
|
</div>
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
--bg-light: var(--cl-graphite-7);
|
|
93
93
|
--warning: var(--cl-orange-2);
|
|
94
94
|
--warning-light: var(--cl-yellow-7);
|
|
95
|
-
--critical: var(--cl-red-
|
|
95
|
+
--critical: var(--cl-red-2);
|
|
96
96
|
--critical-light: var(--cl-red-7);
|
|
97
97
|
/* --text-quaternary:; */
|
|
98
98
|
|
|
@@ -134,6 +134,9 @@
|
|
|
134
134
|
--btn-txt-primary-hover: var(--cl-blue-3);
|
|
135
135
|
--btn-txt-primary-focus: var(--cl-blue-3);
|
|
136
136
|
--btn-txt-primary-active: var(--cl-blue-1);
|
|
137
|
+
|
|
138
|
+
--btn-widget-bg:var(--page-bg);
|
|
139
|
+
--btn-widget-icon:var(--primary);
|
|
137
140
|
/* =========================================== */
|
|
138
141
|
/* ЦВЕТ КНОПОК */
|
|
139
142
|
|
package/src/index.ts
CHANGED
|
@@ -19,10 +19,10 @@ import {
|
|
|
19
19
|
AccountCollapsibleContent,
|
|
20
20
|
AccountCollapsibleContentItem,
|
|
21
21
|
} from './Collapsible'
|
|
22
|
-
import { Button, ButtonWidget } from './Button'
|
|
22
|
+
import { Button, buttonVariants, ButtonWidget } from './Button'
|
|
23
23
|
import { Audio } from './Audio'
|
|
24
24
|
import { cn } from './@/lib/utils'
|
|
25
|
-
import { Drawer, DrawerTrigger,
|
|
25
|
+
import { Drawer, DrawerTrigger, DrawerClose, DrawerContent } from './Drawer'
|
|
26
26
|
import { Page } from './Page'
|
|
27
27
|
import { Chip } from './Chip'
|
|
28
28
|
import { InputField, InputLabel, InputMask } from './Input'
|
|
@@ -35,7 +35,7 @@ import { Form, FormLabel, FormField, FormItem, FormControl, FormDescription, For
|
|
|
35
35
|
import { Calendar } from './Calendar'
|
|
36
36
|
import { DatePicker } from './DatePicker'
|
|
37
37
|
import { Select } from './Select'
|
|
38
|
-
import { Progress } from
|
|
38
|
+
import { Progress } from './Progress'
|
|
39
39
|
import {
|
|
40
40
|
AlertDialog,
|
|
41
41
|
AlertDialogTrigger,
|
|
@@ -50,6 +50,8 @@ import {
|
|
|
50
50
|
import { MessageTyping } from "./Chat"
|
|
51
51
|
import { FavoritePaymentsList, FavoritePaymentsItem, FarvoritePaymentDescription, farvoriteLinkClasses } from './FavoritePyments'
|
|
52
52
|
import { DigitKeyPad } from "./DigitKeyPad"
|
|
53
|
+
import { Badge, badgeVariants } from './Badge'
|
|
54
|
+
import { Checkbox } from './Checkbox'
|
|
53
55
|
|
|
54
56
|
|
|
55
57
|
export {
|
|
@@ -71,6 +73,7 @@ export {
|
|
|
71
73
|
AccountCollapsibleContent,
|
|
72
74
|
AccountCollapsibleContentItem,
|
|
73
75
|
Button,
|
|
76
|
+
buttonVariants,
|
|
74
77
|
InputField,
|
|
75
78
|
InputLabel,
|
|
76
79
|
Audio,
|
|
@@ -78,7 +81,7 @@ export {
|
|
|
78
81
|
Icon,
|
|
79
82
|
Drawer,
|
|
80
83
|
DrawerTrigger,
|
|
81
|
-
DrawerTitle,
|
|
84
|
+
// DrawerTitle,
|
|
82
85
|
DrawerClose,
|
|
83
86
|
DrawerContent,
|
|
84
87
|
BottomNavigation,
|
|
@@ -118,7 +121,10 @@ export {
|
|
|
118
121
|
FavoritePaymentsList,
|
|
119
122
|
FavoritePaymentsItem,
|
|
120
123
|
FarvoritePaymentDescription,
|
|
124
|
+
Badge,
|
|
125
|
+
badgeVariants,
|
|
126
|
+
Checkbox,
|
|
121
127
|
farvoriteLinkClasses,
|
|
122
128
|
DigitKeyPad,
|
|
123
129
|
ButtonWidget,
|
|
124
|
-
}
|
|
130
|
+
}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Button, InputOTP, InputOTPGroup, InputOTPSlot, Page } from '../../..'
|
|
3
|
+
import { Close } from '../../../Icon'
|
|
4
|
+
|
|
5
|
+
const InputSMS: React.FC = (props) => (
|
|
6
|
+
<InputOTP
|
|
7
|
+
maxLength={5}
|
|
8
|
+
{...props}
|
|
9
|
+
>
|
|
10
|
+
<InputOTPGroup className="gap-[10px] mx-auto">
|
|
11
|
+
<InputOTPSlot
|
|
12
|
+
index={0}
|
|
13
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
14
|
+
/>
|
|
15
|
+
<InputOTPSlot
|
|
16
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
17
|
+
index={1}
|
|
18
|
+
/>
|
|
19
|
+
<InputOTPSlot
|
|
20
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
21
|
+
index={2}
|
|
22
|
+
/>
|
|
23
|
+
<InputOTPSlot
|
|
24
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
25
|
+
index={3}
|
|
26
|
+
/>
|
|
27
|
+
<InputOTPSlot
|
|
28
|
+
className="font-bold text-[40px] leading-[1.1]"
|
|
29
|
+
index={4}
|
|
30
|
+
/>
|
|
31
|
+
</InputOTPGroup>
|
|
32
|
+
</InputOTP>
|
|
33
|
+
)
|
|
34
|
+
|
|
35
|
+
export const smsSignPage = () => {
|
|
36
|
+
return (
|
|
37
|
+
<Page>
|
|
38
|
+
<Page.Navbar>
|
|
39
|
+
<a href="">
|
|
40
|
+
<Close className="text-primary" />
|
|
41
|
+
</a>
|
|
42
|
+
</Page.Navbar>
|
|
43
|
+
<Page.Content className='flex flex-col'>
|
|
44
|
+
<h1 className="mt-[32px] mb-[16px] font-medium text-[20px] text-center leading-[1.2]">
|
|
45
|
+
Введите код из сообщения
|
|
46
|
+
<br />
|
|
47
|
+
<span className="font-normal text-[16px] leading-[1.3]">Код отправлен на +7 960 888 00-00</span>
|
|
48
|
+
</h1>
|
|
49
|
+
|
|
50
|
+
<form className='flex flex-col grow'>
|
|
51
|
+
<div
|
|
52
|
+
className="relative mb-[8px] h-[24px] text-center text-critical"
|
|
53
|
+
role="alert"
|
|
54
|
+
>
|
|
55
|
+
{true && <span>Введен неверный ПИН-код</span>}
|
|
56
|
+
</div>
|
|
57
|
+
<InputSMS />
|
|
58
|
+
<p className="mt-[32px] text-[12px] text-center text-light leading-[1.16]">
|
|
59
|
+
Выслать код повторно через{' '}
|
|
60
|
+
<span
|
|
61
|
+
role="timer"
|
|
62
|
+
aria-live="polite"
|
|
63
|
+
aria-atomic="true"
|
|
64
|
+
>
|
|
65
|
+
1 минуту 16 секунд
|
|
66
|
+
</span>
|
|
67
|
+
</p>
|
|
68
|
+
<div className='mt-auto'>
|
|
69
|
+
<Button className='mt-[32px] w-full'>Подтвердить</Button>
|
|
70
|
+
</div>
|
|
71
|
+
</form>
|
|
72
|
+
</Page.Content>
|
|
73
|
+
</Page>
|
|
74
|
+
)
|
|
75
|
+
}
|