@modul/mbui 0.0.15-beta-pv-53129-38976a74 → 0.0.16-beta-pv-53139-36dea103

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.
Files changed (18) hide show
  1. package/dist/Badge/Badge.d.ts +10 -0
  2. package/dist/Badge/Badge.js +56 -0
  3. package/dist/Badge/Badge.js.map +1 -0
  4. package/dist/Badge/index.d.ts +1 -0
  5. package/dist/Badge/index.js +7 -0
  6. package/dist/Badge/index.js.map +1 -0
  7. package/dist/Button/Button.d.ts +2 -2
  8. package/dist/Button/Button.js +116 -16
  9. package/dist/Button/Button.js.map +1 -1
  10. package/dist/index.d.ts +4 -3
  11. package/dist/index.js +6 -2
  12. package/dist/index.js.map +1 -1
  13. package/package.json +1 -1
  14. package/src/Badge/Badge.tsx +62 -0
  15. package/src/Badge/index.ts +1 -0
  16. package/src/Button/Button.tsx +139 -45
  17. package/src/assets/css/global.css +9 -0
  18. package/src/index.ts +7 -3
package/dist/Badge/Badge.d.ts ADDED
@@ -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";
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, ...props }: BadgeProps): React.JSX.Element;
10
+ export { Badge, badgeVariants };
package/dist/Badge/Badge.js ADDED
@@ -0,0 +1,56 @@
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-flex
12
+ items-center
13
+ focus:ring-2
14
+ focus:ring-ring
15
+ focus:ring-offset-2
16
+ focus:outline-none
17
+ transition-colors
18
+ rounded-full
19
+ truncate
20
+ `,
21
+ default: `
22
+ bg-critical
23
+ text-white
24
+ `,
25
+ },
26
+ size: {
27
+ default: 'size-[16px] text-[10px] place-content-center text-center leadimg-[1.4] items-start truncate',
28
+ dot: '',
29
+ sm: '',
30
+ md: '',
31
+ lg: '',
32
+ },
33
+ };
34
+ const badgeVariants = (0, class_variance_authority_1.cva)(badgeClasses.variant.base, {
35
+ variants: {
36
+ variant: {
37
+ default: badgeClasses.variant.default,
38
+ // secondary: '',
39
+ // destructive:'',
40
+ // outline: '',
41
+ },
42
+ size: {
43
+ default: badgeClasses.size.default,
44
+ },
45
+ },
46
+ defaultVariants: {
47
+ variant: 'default',
48
+ size: 'default',
49
+ },
50
+ });
51
+ exports.badgeVariants = badgeVariants;
52
+ function Badge({ className, variant, ...props }) {
53
+ return (React.createElement("div", { className: (0, utils_1.cn)(badgeVariants({ variant }), className), ...props }));
54
+ }
55
+ exports.Badge = Badge;
56
+ //# sourceMappingURL=Badge.js.map
package/dist/Badge/Badge.js.map ADDED
@@ -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;;;;;;;;;;IAUJ;QACF,OAAO,EAAE;;;GAGR;KACD;IACD,IAAI,EAAE;QACL,OAAO,EAAE,6FAA6F;QACtG,GAAG,EAAE,EAAE;QACP,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;YACrC,iBAAiB;YACjB,kBAAkB;YAClB,eAAe;SACf;QACD,IAAI,EAAE;YACL,OAAO,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO;SAClC;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,GAAG,KAAK,EAAc;IAC1D,OAAO,CACN,6BACC,SAAS,EAAE,IAAA,UAAE,EAAC,aAAa,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,CAAC,KAChD,KAAK,GACR,CACF,CAAA;AACF,CAAC;AAEQ,sBAAK"}
package/dist/Badge/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { Badge, badgeVariants } from './Badge';
package/dist/Badge/index.js ADDED
@@ -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
package/dist/Badge/index.js.map ADDED
@@ -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"}
package/dist/Button/Button.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
3
  declare const buttonVariants: (props?: {
4
- variant?: "primary" | "secondary" | "success" | "primary-outline" | "outline" | "ghost";
5
- size?: "lg" | "md" | "sm" | "xs" | "xxs";
4
+ variant?: "primary" | "secondary" | "success" | "primary-outline" | "outline" | "ghost" | "widget";
5
+ size?: "widget" | "lg" | "md" | "sm" | "xs" | "xxs";
6
6
  } & import("class-variance-authority/dist/types").ClassProp) => string;
7
7
  export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
8
8
  asChild?: boolean;
package/dist/Button/Button.js CHANGED
@@ -6,24 +6,114 @@ const React = (0, tslib_1.__importStar)(require("react"));
6
6
  const react_slot_1 = require("@radix-ui/react-slot");
7
7
  const class_variance_authority_1 = require("class-variance-authority");
8
8
  const utils_1 = require("../@/lib/utils");
9
- // import { cn } from "@/lib/utils" порешать с алиасами
10
- const buttonVariants = (0, class_variance_authority_1.cva)('inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] focus-visible:ring ring-offset-1 font-medium whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none', {
9
+ const buttonClasses = {
10
+ variant: {
11
+ base: `
12
+ inline-flex
13
+ justify-center
14
+ items-center
15
+ font-medium
16
+ border-[2px]
17
+ whitespace-nowrap
18
+ transition-colors
19
+ ring-offset-1
20
+ focus-visible:ring
21
+ focus-visible:outline-none
22
+ disabled:pointer-events-none
23
+ disabled:opacity-[.24]`,
24
+ primary: `
25
+ text-btn-primary
26
+ bg-btn-primary
27
+ border-btn-primary
28
+ hover:bg-btn-primary-hover
29
+ hover:border-btn-primary-hover
30
+ focus:bg-btn-primary-focus
31
+ focus:border-btn-primary-focus
32
+ active:border-btn-primary-active
33
+ active:bg-btn-primary-active`,
34
+ secondary: `
35
+ text-btn-secondary
36
+ bg-btn-secondary
37
+ border-btn-secondary
38
+ hover:bg-btn-secondary-hover
39
+ hover:border-btn-secondary-hover
40
+ focus:bg-btn-secondary-focus
41
+ focus:border-btn-secondary-focus
42
+ active:bg-btn-secondary-active
43
+ active:border-btn-secondary-active`,
44
+ success: `
45
+ text-btn-success
46
+ bg-btn-success
47
+ border-btn-success
48
+ hover:bg-btn-success-hover
49
+ active:border-btn-success-active
50
+ focus:bg-btn-success-focus
51
+ focus:border-btn-success-focus
52
+ active:bg-btn-success-active
53
+ hover:border-btn-success-hover`,
54
+ primaryOutline: `
55
+ text-btn-primary-outline
56
+ bg-btn-primary-outline
57
+ border-btn-primary-outline
58
+ hover:text-btn-primary-outline-hover
59
+ hover:bg-btn-primary-outline-hover
60
+ hover:border-btn-primary-outline-hover
61
+ focus:text-btn-primary-outline-focus
62
+ focus:bg-btn-primary-outline-focus
63
+ focus:border-btn-primary-outline-focus
64
+ active:text-btn-primary-outline-active
65
+ active:bg-btn-primary-outline-active
66
+ active:border-btn-primary-outline-active`,
67
+ outline: `
68
+ text-btn-outline
69
+ border-[1px]
70
+ border-btn-outline
71
+ ring-[currentColor]`,
72
+ ghost: `
73
+ text-btn-ghost
74
+ bg-btn-ghost
75
+ border-transparent
76
+ hover:bg-btn-ghost-hover
77
+ focus:bg-btn-ghost-focus
78
+ active:bg-btn-ghost-active`,
79
+ widget: `
80
+ justify-start
81
+ h-[72px]
82
+ w-full p-[16px]
83
+ space-x-[16px]
84
+ text-left
85
+ rounded-md
86
+ shadow-md
87
+ border-transparent`,
88
+ },
89
+ size: {
90
+ lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
91
+ md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
92
+ sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
93
+ xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
94
+ xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
95
+ widget: `h-[72px] p-[16px]`
96
+ }
97
+ };
98
+ const buttonVariants = (0, class_variance_authority_1.cva)(buttonClasses.variant.base, {
11
99
  variants: {
12
100
  variant: {
13
- primary: 'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
14
- secondary: 'text-btn-secondary 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',
15
- success: 'text-btn-success bg-btn-success hover:bg-btn-success-hover focus:bg-btn-success-focus active:bg-btn-success-active border-btn-success hover:border-btn-success-hover focus:border-btn-success-focus active:border-btn-success-active',
16
- 'primary-outline': 'text-btn-primary-outline hover:text-btn-primary-outline-hover focus:text-btn-primary-outline-focus active:text-btn-primary-outline-active bg-btn-primary-outline hover:bg-btn-primary-outline-hover focus:bg-btn-primary-outline-focus active:bg-btn-primary-outline-active border-btn-primary-outline hover:border-btn-primary-outline-hover focus:border-btn-primary-outline-focus active:border-btn-primary-outline-active',
17
- outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
18
- ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
101
+ primary: buttonClasses.variant.primary,
102
+ secondary: buttonClasses.variant.secondary,
103
+ success: buttonClasses.variant.success,
104
+ 'primary-outline': buttonClasses.variant.primaryOutline,
105
+ outline: buttonClasses.variant.outline,
106
+ ghost: buttonClasses.variant.ghost,
107
+ widget: buttonClasses.variant.widget,
19
108
  // link: 'text-primary underline-offset-4 hover:underline',
20
109
  },
21
110
  size: {
22
- lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
23
- md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
24
- sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
25
- xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
26
- xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
111
+ lg: buttonClasses.size.lg,
112
+ md: buttonClasses.size.md,
113
+ widget: buttonClasses.size.widget,
114
+ sm: buttonClasses.size.sm,
115
+ xs: buttonClasses.size.xs,
116
+ xxs: buttonClasses.size.xxs,
27
117
  },
28
118
  },
29
119
  defaultVariants: {
@@ -32,10 +122,20 @@ const buttonVariants = (0, class_variance_authority_1.cva)('inline-flex justify-
32
122
  },
33
123
  });
34
124
  exports.buttonVariants = buttonVariants;
35
- const textVariants = (0, class_variance_authority_1.cva)('inline-flex whitespace-nowrap transition-colors focus-visible:outline-current disabled:opacity-[.24] rounded-[.25em] disabled:pointer-events-none', {
125
+ const textVariants = (0, class_variance_authority_1.cva)(`inline-flex
126
+ whitespace-nowrap
127
+ transition-colors
128
+ rounded-[.25em]
129
+ focus-visible:outline-current
130
+ disabled:opacity-[.24]
131
+ disabled:pointer-events-none`, {
36
132
  variants: {
37
133
  variant: {
38
- primary: 'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',
134
+ primary: `text-primary
135
+ hover:text-primary-hover
136
+ focus:text-primary-focus
137
+ active:text-primary-active
138
+ disabled:pointer-events-none`,
39
139
  },
40
140
  },
41
141
  defaultVariants: {
@@ -43,7 +143,7 @@ const textVariants = (0, class_variance_authority_1.cva)('inline-flex whitespace
43
143
  },
44
144
  });
45
145
  const Button = React.forwardRef(({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
46
- const Comp = asChild ? react_slot_1.Slot : "button";
146
+ const Comp = asChild ? react_slot_1.Slot : 'button';
47
147
  // @ts-ignore
48
148
  const classes = asText ? textVariants({ variant, className }) : buttonVariants({ variant, size, className });
49
149
  return (React.createElement(Comp, { className: (0, utils_1.cn)(classes), ref: ref, ...props }));
package/dist/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,qDAA2C;AAC3C,uEAAiE;AAEjE,0CAAmC;AACnC,uDAAuD;AAEvD,MAAM,cAAc,GAAG,IAAA,8BAAG,EACzB,sNAAsN,EACtN;IACC,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EACN,sOAAsO;YACvO,SAAS,EACR,wPAAwP;YACzP,OAAO,EACN,sOAAsO;YACvO,iBAAiB,EAChB,+ZAA+Z;YACha,OAAO,EAAE,sEAAsE;YAC/E,KAAK,EAAE,6HAA6H;YACpI,6DAA6D;SAC7D;QACD,IAAI,EAAE;YACL,EAAE,EAAE,6DAA6D;YACjE,EAAE,EAAE,6DAA6D;YACjE,EAAE,EAAE,2DAA2D;YAC/D,EAAE,EAAE,2DAA2D;YAC/D,GAAG,EAAE,yDAAyD;SAC9D;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,IAAI;KACV;CACD,CACD,CAAA;AAwCgB,wCAAc;AAvC/B,MAAM,YAAY,GAAG,IAAA,8BAAG,EACvB,mJAAmJ,EACnJ;IACC,QAAQ,EAAE;QACT,OAAO,EAAE;YACR,OAAO,EACN,wHAAwH;SACzH;KACD;IACD,eAAe,EAAE;QAChB,OAAO,EAAE,SAAS;KAClB;CACD,CACD,CAAA;AASD,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,KAAK,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/E,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAA;IACzC,aAAa;IACb,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,CAAM,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;IAC/G,OAAO,CACL,oBAAC,IAAI,IACH,SAAS,EAAE,IAAA,UAAE,EAAC,OAAO,CAAC,EACtB,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAA;AACH,CAAC,CACF,CAAA;AAIQ,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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"}
package/dist/index.d.ts CHANGED
@@ -8,7 +8,7 @@ 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 } from './Button';
11
+ import { Button, buttonVariants } from './Button';
12
12
  import { Audio } from './Audio';
13
13
  import { cn } from './@/lib/utils';
14
14
  import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer';
@@ -24,6 +24,7 @@ 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 "./Progress";
27
+ import { Progress } from './Progress';
28
28
  import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './AlertDialog';
29
- 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, };
29
+ import { Badge, badgeVariants } from './Badge';
30
+ 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, 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, Badge, badgeVariants, };
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.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;
4
- 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.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.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.badgeVariants = exports.Badge = exports.AlertDialogCancel = exports.AlertDialogAction = exports.AlertDialogDescription = exports.AlertDialogTitle = exports.AlertDialogFooter = exports.AlertDialogHeader = exports.AlertDialogContent = exports.AlertDialogTrigger = exports.AlertDialog = exports.Select = exports.InputMask = exports.SelectAsync = 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
  const Audio_1 = require("./Audio");
41
42
  Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return Audio_1.Audio; } });
42
43
  const utils_1 = require("./@/lib/utils");
@@ -92,4 +93,7 @@ Object.defineProperty(exports, "AlertDialogTitle", { enumerable: true, get: func
92
93
  Object.defineProperty(exports, "AlertDialogDescription", { enumerable: true, get: function () { return AlertDialog_1.AlertDialogDescription; } });
93
94
  Object.defineProperty(exports, "AlertDialogAction", { enumerable: true, get: function () { return AlertDialog_1.AlertDialogAction; } });
94
95
  Object.defineProperty(exports, "AlertDialogCancel", { enumerable: true, get: function () { return AlertDialog_1.AlertDialogCancel; } });
96
+ const Badge_1 = require("./Badge");
97
+ Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });
98
+ Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return Badge_1.badgeVariants; } });
95
99
  //# 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;AAmDlC,wFAnDQ,iBAAO,OAmDR;AAlDR,iCAA6B;AAmD5B,qFAnDQ,WAAI,OAmDR;AAlDL,qCAAiC;AAmDhC,uFAnDQ,eAAM,OAmDR;AAlDP,uCAAmC;AAmDlC,wFAnDQ,iBAAO,OAmDR;AAlDR,+DAAyB;AAmDxB,eAnDM,cAAI,CAmDN;AAlDL,2CAAsF;AAmDrF,yFAnDQ,oBAAQ,OAmDR;AACR,8FApDkB,yBAAa,OAoDlB;AACb,6FArDiC,wBAAY,OAqDjC;AACZ,kGAtD+C,6BAAiB,OAsD/C;AArDlB,yDAK2B;AAoE1B,iGAxEA,mCAAgB,OAwEA;AAChB,qGAxEA,uCAAoB,OAwEA;AACpB,yGAxEA,2CAAwB,OAwEA;AACxB,qGAxEA,uCAAoB,OAwEA;AAtErB,0DAA8B;AA6D7B,oBAAI;AA5DL,+CAAmF;AA+ClF,4FA/CQ,yBAAW,OA+CR;AACX,mGAhDqB,gCAAkB,OAgDrB;AAClB,mGAjDyC,gCAAkB,OAiDzC;AAhDnB,+CAMsB;AA2CrB,mGAhDA,gCAAkB,OAgDA;AAClB,yGAhDA,sCAAwB,OAgDA;AACxB,0GAhDA,uCAAyB,OAgDA;AACzB,0GAhDA,uCAAyB,OAgDA;AACzB,8GAhDA,2CAA6B,OAgDA;AA9C9B,qCAAiC;AA+ChC,uFA/CQ,eAAM,OA+CR;AA9CP,mCAA+B;AAiD9B,sFAjDQ,aAAK,OAiDR;AAhDN,yCAAkC;AAiDjC,mFAjDQ,UAAE,OAiDR;AAhDH,qCAAyF;AAkDxF,uFAlDQ,eAAM,OAkDR;AACN,8FAnDgB,sBAAa,OAmDhB;AACb,4FApD+B,oBAAW,OAoD/B;AACX,4FArD4C,oBAAW,OAqD5C;AACX,8FAtDyD,sBAAa,OAsDzD;AArDd,iCAA6B;AA0D5B,qFA1DQ,WAAI,OA0DR;AAzDL,iCAA6B;AA0D5B,qFA1DQ,WAAI,OA0DR;AAzDL,mCAA2D;AA0C1D,2FA1CQ,kBAAU,OA0CR;AACV,2FA3CoB,kBAAU,OA2CpB;AA+BV,0FA1EgC,iBAAS,OA0EhC;AAzEV,mCAA+B;AA0D9B,sFA1DQ,aAAK,OA0DR;AAzDN,qCAAiC;AA0DhC,uFA1DQ,eAAM,OA0DR;AAzDP,mCAA+B;AA0D9B,sFA1DQ,aAAK,OA0DR;AAzDN,yCAAqC;AA0DpC,yFA1DQ,mBAAQ,OA0DR;AAzDT,qCAAyD;AA0DxD,kGA1DQ,0BAAiB,OA0DR;AAUjB,4FApE2B,oBAAW,OAoE3B;AAnEZ,iCAAwG;AA0DvG,qFA1DQ,WAAI,OA0DR;AACJ,0FA3Dc,gBAAS,OA2Dd;AACT,0FA5DyB,gBAAS,OA4DzB;AACT,yFA7DoC,eAAQ,OA6DpC;AACR,4FA9D8C,kBAAW,OA8D9C;AACX,gGA/D2D,sBAAe,OA+D3D;AACf,4FAhE4E,kBAAW,OAgE5E;AA/DZ,yCAAqC;AAgEpC,yFAhEQ,mBAAQ,OAgER;AA/DT,6CAAyC;AAgExC,2FAhEQ,uBAAU,OAgER;AA/DX,qCAAiC;AAkEhC,uFAlEQ,eAAM,OAkER;AAjEP,yCAAqC;AAgDpC,yFAhDQ,mBAAQ,OAgDR;AA/CT,+CAUsB;AAuDrB,4FAhEA,yBAAW,OAgEA;AACX,mGAhEA,gCAAkB,OAgEA;AAClB,mGAhEA,gCAAkB,OAgEA;AAClB,kGAhEA,+BAAiB,OAgEA;AACjB,kGAhEA,+BAAiB,OAgEA;AACjB,iGAhEA,8BAAgB,OAgEA;AAChB,uGAhEA,oCAAsB,OAgEA;AACtB,kGAhEA,+BAAiB,OAgEA;AACjB,kGAhEA,+BAAiB,OAgEA"}
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.15-beta-pv-53129-38976a74",
3
+ "version": "0.0.16-beta-pv-53139-36dea103",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/Badge/Badge.tsx ADDED
@@ -0,0 +1,62 @@
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-flex
10
+ items-center
11
+ focus:ring-2
12
+ focus:ring-ring
13
+ focus:ring-offset-2
14
+ focus:outline-none
15
+ transition-colors
16
+ rounded-full
17
+ truncate
18
+ `,
19
+ default: `
20
+ bg-critical
21
+ text-white
22
+ `,
23
+ },
24
+ size: {
25
+ default: 'size-[16px] text-[10px] place-content-center text-center leadimg-[1.4] items-start truncate',
26
+ dot: '',
27
+ sm: '',
28
+ md: '',
29
+ lg: '',
30
+ },
31
+ }
32
+
33
+ const badgeVariants = cva(badgeClasses.variant.base, {
34
+ variants: {
35
+ variant: {
36
+ default: badgeClasses.variant.default,
37
+ // secondary: '',
38
+ // destructive:'',
39
+ // outline: '',
40
+ },
41
+ size: {
42
+ default: badgeClasses.size.default,
43
+ },
44
+ },
45
+ defaultVariants: {
46
+ variant: 'default',
47
+ size: 'default',
48
+ },
49
+ })
50
+
51
+ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
52
+
53
+ function Badge({ className, variant, ...props }: BadgeProps) {
54
+ return (
55
+ <div
56
+ className={cn(badgeVariants({ variant }), className)}
57
+ {...props}
58
+ />
59
+ )
60
+ }
61
+
62
+ export { Badge, badgeVariants }
package/src/Badge/index.ts ADDED
@@ -0,0 +1 @@
1
+ export { Badge, badgeVariants } from './Badge'
package/src/Button/Button.tsx CHANGED
@@ -1,48 +1,142 @@
1
1
  import * as React from 'react'
2
2
  import { Slot } from '@radix-ui/react-slot'
3
3
  import { cva, type VariantProps } from 'class-variance-authority'
4
-
5
4
  import { cn } from '../@/lib/utils'
6
- // import { cn } from "@/lib/utils" порешать с алиасами
7
5
 
8
- const buttonVariants = cva(
9
- 'inline-flex justify-center items-center border-[2px] disabled:opacity-[.24] focus-visible:ring ring-offset-1 font-medium whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none',
10
- {
11
- variants: {
12
- variant: {
13
- primary:
14
- 'text-btn-primary bg-btn-primary hover:bg-btn-primary-hover focus:bg-btn-primary-focus active:bg-btn-primary-active border-btn-primary hover:border-btn-primary-hover focus:border-btn-primary-focus active:border-btn-primary-active',
15
- secondary:
16
- 'text-btn-secondary 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',
17
- success:
18
- 'text-btn-success bg-btn-success hover:bg-btn-success-hover focus:bg-btn-success-focus active:bg-btn-success-active border-btn-success hover:border-btn-success-hover focus:border-btn-success-focus active:border-btn-success-active',
19
- 'primary-outline':
20
- 'text-btn-primary-outline hover:text-btn-primary-outline-hover focus:text-btn-primary-outline-focus active:text-btn-primary-outline-active bg-btn-primary-outline hover:bg-btn-primary-outline-hover focus:bg-btn-primary-outline-focus active:bg-btn-primary-outline-active border-btn-primary-outline hover:border-btn-primary-outline-hover focus:border-btn-primary-outline-focus active:border-btn-primary-outline-active',
21
- outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
22
- ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
23
- // link: 'text-primary underline-offset-4 hover:underline',
24
- },
25
- size: {
26
- lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
27
- md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
28
- sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
29
- xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
30
- xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
31
- },
6
+ const buttonClasses= {
7
+ variant: {
8
+ base: `
9
+ inline-flex
10
+ justify-center
11
+ items-center
12
+ font-medium
13
+ border-[2px]
14
+ whitespace-nowrap
15
+ transition-colors
16
+ ring-offset-1
17
+ focus-visible:ring
18
+ focus-visible:outline-none
19
+ disabled:pointer-events-none
20
+ disabled:opacity-[.24]`,
21
+ primary: `
22
+ text-btn-primary
23
+ bg-btn-primary
24
+ border-btn-primary
25
+ hover:bg-btn-primary-hover
26
+ hover:border-btn-primary-hover
27
+ focus:bg-btn-primary-focus
28
+ focus:border-btn-primary-focus
29
+ active:border-btn-primary-active
30
+ active:bg-btn-primary-active`,
31
+ secondary: `
32
+ text-btn-secondary
33
+ bg-btn-secondary
34
+ border-btn-secondary
35
+ hover:bg-btn-secondary-hover
36
+ hover:border-btn-secondary-hover
37
+ focus:bg-btn-secondary-focus
38
+ focus:border-btn-secondary-focus
39
+ active:bg-btn-secondary-active
40
+ active:border-btn-secondary-active`,
41
+ success: `
42
+ text-btn-success
43
+ bg-btn-success
44
+ border-btn-success
45
+ hover:bg-btn-success-hover
46
+ active:border-btn-success-active
47
+ focus:bg-btn-success-focus
48
+ focus:border-btn-success-focus
49
+ active:bg-btn-success-active
50
+ hover:border-btn-success-hover`,
51
+ primaryOutline: `
52
+ text-btn-primary-outline
53
+ bg-btn-primary-outline
54
+ border-btn-primary-outline
55
+ hover:text-btn-primary-outline-hover
56
+ hover:bg-btn-primary-outline-hover
57
+ hover:border-btn-primary-outline-hover
58
+ focus:text-btn-primary-outline-focus
59
+ focus:bg-btn-primary-outline-focus
60
+ focus:border-btn-primary-outline-focus
61
+ active:text-btn-primary-outline-active
62
+ active:bg-btn-primary-outline-active
63
+ active:border-btn-primary-outline-active`,
64
+ outline: `
65
+ text-btn-outline
66
+ border-[1px]
67
+ border-btn-outline
68
+ ring-[currentColor]`,
69
+ ghost: `
70
+ text-btn-ghost
71
+ bg-btn-ghost
72
+ border-transparent
73
+ hover:bg-btn-ghost-hover
74
+ focus:bg-btn-ghost-focus
75
+ active:bg-btn-ghost-active`,
76
+ widget: `
77
+ justify-start
78
+ h-[72px]
79
+ w-full p-[16px]
80
+ space-x-[16px]
81
+ text-left
82
+ rounded-md
83
+ shadow-md
84
+ border-transparent`,
85
+ },
86
+ size: {
87
+ lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-[4px]',
88
+ md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-[4px]',
89
+ sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
90
+ xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
91
+ xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
92
+ widget: `h-[72px] p-[16px]`
93
+ }
94
+ }
95
+
96
+ const buttonVariants = cva(buttonClasses.variant.base, {
97
+ variants: {
98
+ variant: {
99
+ primary: buttonClasses.variant.primary,
100
+ secondary: buttonClasses.variant.secondary,
101
+ success: buttonClasses.variant.success,
102
+ 'primary-outline': buttonClasses.variant.primaryOutline,
103
+ outline: buttonClasses.variant.outline,
104
+ ghost: buttonClasses.variant.ghost,
105
+ widget: buttonClasses.variant.widget,
106
+ // link: 'text-primary underline-offset-4 hover:underline',
32
107
  },
33
- defaultVariants: {
34
- variant: 'primary',
35
- size: 'md',
108
+ size: {
109
+ lg: buttonClasses.size.lg,
110
+ md: buttonClasses.size.md,
111
+ widget: buttonClasses.size.widget,
112
+ sm: buttonClasses.size.sm,
113
+ xs: buttonClasses.size.xs,
114
+ xxs: buttonClasses.size.xxs,
36
115
  },
37
- }
38
- )
116
+ },
117
+ defaultVariants: {
118
+ variant: 'primary',
119
+ size: 'md',
120
+ },
121
+ })
122
+
39
123
  const textVariants = cva(
40
- 'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current disabled:opacity-[.24] rounded-[.25em] disabled:pointer-events-none',
124
+ `inline-flex
125
+ whitespace-nowrap
126
+ transition-colors
127
+ rounded-[.25em]
128
+ focus-visible:outline-current
129
+ disabled:opacity-[.24]
130
+ disabled:pointer-events-none`,
41
131
  {
42
132
  variants: {
43
133
  variant: {
44
134
  primary:
45
- 'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',
135
+ `text-primary
136
+ hover:text-primary-hover
137
+ focus:text-primary-focus
138
+ active:text-primary-active
139
+ disabled:pointer-events-none`,
46
140
  },
47
141
  },
48
142
  defaultVariants: {
@@ -59,18 +153,18 @@ export interface ButtonProps
59
153
  }
60
154
 
61
155
  const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
62
- ({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
63
- const Comp = asChild ? Slot : "button"
64
- // @ts-ignore
65
- const classes = asText ? textVariants<any>({ variant, className }) : buttonVariants({ variant, size, className });
66
- return (
67
- <Comp
68
- className={cn(classes)}
69
- ref={ref}
70
- {...props}
71
- />
72
- )
73
- }
156
+ ({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
157
+ const Comp = asChild ? Slot : 'button'
158
+ // @ts-ignore
159
+ const classes = asText ? textVariants<any>({ variant, className }) : buttonVariants({ variant, size, className })
160
+ return (
161
+ <Comp
162
+ className={cn(classes)}
163
+ ref={ref}
164
+ {...props}
165
+ />
166
+ )
167
+ }
74
168
  )
75
169
 
76
170
  Button.displayName = 'Button'
package/src/assets/css/global.css CHANGED
@@ -147,6 +147,9 @@
147
147
  --btn-txt-primary-hover: var(--cl-blue-3);
148
148
  --btn-txt-primary-focus: var(--cl-blue-3);
149
149
  --btn-txt-primary-active: var(--cl-blue-1);
150
+
151
+ --btn-widget-bg:var(--page-bg);
152
+ --btn-widget-icon:var(--primary);
150
153
  /* =========================================== */
151
154
  /* ЦВЕТ КНОПОК */
152
155
 
@@ -190,6 +193,12 @@
190
193
  /* =========================================== */
191
194
  /* TABS */
192
195
 
196
+ /* DRAWER */
197
+ /* =========================================== */
198
+ --drawer-overlay-bg: rgba(0,0,0,.3);
199
+ /* =========================================== */
200
+ /* DRAWER */
201
+
193
202
 
194
203
  }
195
204
 
package/src/index.ts CHANGED
@@ -19,7 +19,7 @@ import {
19
19
  AccountCollapsibleContent,
20
20
  AccountCollapsibleContentItem,
21
21
  } from './Collapsible'
22
- import { Button } from './Button'
22
+ import { Button, buttonVariants } from './Button'
23
23
  import { Audio } from './Audio'
24
24
  import { cn } from './@/lib/utils'
25
25
  import { Drawer, DrawerTrigger, DrawerTitle, DrawerClose, DrawerContent } from './Drawer'
@@ -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 "./Progress"
38
+ import { Progress } from './Progress'
39
39
  import {
40
40
  AlertDialog,
41
41
  AlertDialogTrigger,
@@ -47,6 +47,7 @@ import {
47
47
  AlertDialogAction,
48
48
  AlertDialogCancel,
49
49
  } from './AlertDialog'
50
+ import { Badge, badgeVariants } from './Badge'
50
51
 
51
52
  export {
52
53
  Tooltip,
@@ -67,6 +68,7 @@ export {
67
68
  AccountCollapsibleContent,
68
69
  AccountCollapsibleContentItem,
69
70
  Button,
71
+ buttonVariants,
70
72
  InputField,
71
73
  InputLabel,
72
74
  Audio,
@@ -110,4 +112,6 @@ export {
110
112
  AlertDialogDescription,
111
113
  AlertDialogAction,
112
114
  AlertDialogCancel,
113
- }
115
+ Badge,
116
+ badgeVariants,
117
+ }