@modul/mbui 0.0.18 → 0.0.19-beta-pv-53151-e38167d1

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 (13) hide show
  1. package/dist/Alert/Alert.d.ts +2 -2
  2. package/dist/AlertDialog/AlertDialog.js +2 -2
  3. package/dist/AlertDialog/AlertDialog.js.map +1 -1
  4. package/dist/Button/Button.d.ts +9 -7
  5. package/dist/Button/Button.js +79 -34
  6. package/dist/Button/Button.js.map +1 -1
  7. package/dist/Chip/Chip.d.ts +1 -1
  8. package/package.json +1 -1
  9. package/src/@/config/button.ts +34 -46
  10. package/src/Alert/Alert.tsx +2 -2
  11. package/src/AlertDialog/AlertDialog.tsx +2 -2
  12. package/src/Button/Button.tsx +104 -58
  13. package/src/assets/css/global.css +20 -21
package/dist/Alert/Alert.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { ReactNode } from "react";
3
3
  declare const Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
4
4
  declare const Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
5
- interface TAlertComponents {
5
+ interface IAlertComponents {
6
6
  displayName: string;
7
7
  Title: typeof Title;
8
8
  Description: typeof Description;
@@ -14,5 +14,5 @@ interface IAlertProps {
14
14
  children: ReactNode;
15
15
  }
16
16
  declare type TAlertProps = IAlertProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
17
- declare const Alert: React.FC<TAlertProps> & TAlertComponents;
17
+ declare const Alert: React.FC<TAlertProps> & IAlertComponents;
18
18
  export { Alert };
package/dist/AlertDialog/AlertDialog.js CHANGED
@@ -33,10 +33,10 @@ const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) =
33
33
  exports.AlertDialogDescription = AlertDialogDescription;
34
34
  AlertDialogDescription.displayName =
35
35
  AlertDialogPrimitive.Description.displayName;
36
- const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (React.createElement(AlertDialogPrimitive.Action, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: 'primary', size: 'sm' }), className), ...props })));
36
+ const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (React.createElement(AlertDialogPrimitive.Action, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: 'primary' }), className), ...props })));
37
37
  exports.AlertDialogAction = AlertDialogAction;
38
38
  AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
39
- const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (React.createElement(AlertDialogPrimitive.Cancel, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: "outline", size: 'sm' }), className), ...props })));
39
+ const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (React.createElement(AlertDialogPrimitive.Cancel, { ref: ref, className: (0, utils_1.cn)((0, Button_1.buttonVariants)({ variant: "outline" }), className), ...props })));
40
40
  exports.AlertDialogCancel = AlertDialogCancel;
41
41
  AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
42
42
  //# sourceMappingURL=AlertDialog.js.map
package/dist/AlertDialog/AlertDialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,gGAAoE;AACpE,0CAAmC;AACnC,6CAAiD;AAEjD,MAAM,WAAW,GAAG,oBAAoB,CAAC,IAAI,CAAA;AAwH3C,kCAAW;AAtHb,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,OAAO,CAAA;AAyHrD,gDAAkB;AAvHpB,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,MAAM,CAAA;AAqHnD,8CAAiB;AAnHnB,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAGzC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,oBAAoB,CAAC,OAAO,IAC3B,SAAS,EAAE,IAAA,UAAE,EACX,wJAAwJ,EACxJ,SAAS,CACV,KACG,KAAK,EACT,GAAG,EAAE,GAAG,GACR,CACH,CAAC,CAAA;AAwGA,gDAAkB;AAvGpB,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC,OAAO,CAAC,WAAW,CAAA;AAEzE,MAAM,kBAAkB,GAAG,KAAK,CAAC,UAAU,CAGzC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,iBAAiB;IAChB,oBAAC,kBAAkB,OAAG;IACtB,oBAAC,oBAAoB,CAAC,OAAO,IAC3B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACX,wgBAAwgB,EACxgB,SAAS,CACV,KACG,KAAK,GACT,CACgB,CACrB,CAAC,CAAA;AAwFA,gDAAkB;AAvFpB,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC,OAAO,CAAC,WAAW,CAAA;AAEzE,MAAM,iBAAiB,GAAG,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EAC6B,EAAE,EAAE,CAAC,CAC1C,6BACE,SAAS,EAAE,IAAA,UAAE,EACX,kDAAkD,EAClD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AA2EC,8CAAiB;AA1EnB,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;AAEnD,MAAM,iBAAiB,GAAG,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EAC6B,EAAE,EAAE,CAAC,CAC1C,6BACE,SAAS,EAAE,IAAA,UAAE,EACX,+DAA+D,EAC/D,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAA;AA8DC,8CAAiB;AA7DnB,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;AAEnD,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAGvC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,oBAAoB,CAAC,KAAK,IACzB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,uBAAuB,EAAE,SAAS,CAAC,KAC7C,KAAK,GACT,CACH,CAAC,CAAA;AAmDA,4CAAgB;AAlDlB,gBAAgB,CAAC,WAAW,GAAG,oBAAoB,CAAC,KAAK,CAAC,WAAW,CAAA;AAErE,MAAM,sBAAsB,GAAG,KAAK,CAAC,UAAU,CAG7C,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,oBAAoB,CAAC,WAAW,IAC/B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,+BAA+B,EAAE,SAAS,CAAC,KACrD,KAAK,GACT,CACH,CAAC,CAAA;AAwCA,wDAAsB;AAvCxB,sBAAsB,CAAC,WAAW;IAChC,oBAAoB,CAAC,WAAW,CAAC,WAAW,CAAA;AAE9C,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAGxC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,oBAAoB,CAAC,MAAM,IAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,IAAA,uBAAc,EAAC,EAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAC,CAAC,EAAE,SAAS,CAAC,KACtE,KAAK,GACT,CACH,CAAC,CAAA;AA4BA,8CAAiB;AA3BnB,iBAAiB,CAAC,WAAW,GAAG,oBAAoB,CAAC,MAAM,CAAC,WAAW,CAAA;AAEvE,MAAM,iBAAiB,GAAG,KAAK,CAAC,UAAU,CAGxC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CAClC,oBAAC,oBAAoB,CAAC,MAAM,IAC1B,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACX,IAAA,uBAAc,EAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAClD,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC,CAAA;AAcA,8CAAiB;AAbnB,iBAAiB,CAAC,WAAW,GAAG,oBAAoB,CAAC,MAAM,CAAC,WAAW,CAAA"}
1
+ {"version":3,"file":"AlertDialog.js","sourceRoot":"","sources":["../../src/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"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"}
package/dist/Button/Button.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import * as React from 'react';
2
- import { type VariantProps } from 'class-variance-authority';
3
- declare const buttonVariants: (props?: {
4
- variant?: "primary" | "secondary" | "success" | "primary-outline" | "outline" | "ghost";
5
- size?: "lg" | "md" | "sm" | "xs" | "xxs";
6
- } & import("class-variance-authority/dist/types").ClassProp) => string;
7
- export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
2
+ interface IButtonProps {
3
+ variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
4
+ className?: string;
5
+ icon?: boolean;
6
+ }
7
+ declare const buttonVariants: ({ variant, className, icon }: IButtonProps) => string;
8
+ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
8
9
  asChild?: boolean;
9
- asText?: boolean;
10
+ icon?: boolean;
11
+ variant?: string;
10
12
  }
11
13
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
12
14
  export { Button, buttonVariants };
package/dist/Button/Button.js CHANGED
@@ -6,44 +6,89 @@ 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
- 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', {
10
- variants: {
11
- variant: {
12
- 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',
13
- 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',
14
- 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',
15
- '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',
16
- outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
17
- ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
9
+ const buttonClasses = {
10
+ base: `
11
+ inline-flex
12
+ justify-center
13
+ items-center
14
+ border-[2px]
15
+ rounded-md
16
+ font-medium
17
+ leading-[1]
18
+ focus-visible:ring
19
+ focus-visible:outline-none
20
+ ring-offset-1
21
+ disabled:pointer-events-none
22
+ transition-colors
23
+ whitespace-nowrap
24
+ `,
25
+ primary: `
26
+ text-btn-primary
27
+ bg-btn-primary
28
+ border-btn-primary
29
+ hover:bg-btn-primary-hover
30
+ hover:border-btn-primary-hover
31
+ focus-visible:bg-btn-primary-focus
32
+ focus-visible:border-btn-primary-focus
33
+ active:bg-btn-primary-active
34
+ active:border-btn-primary-active
35
+ disabled:bg-btn-primary-disabled
36
+ disabled:border-btn-primary-disabled
37
+ `,
38
+ secondary: `
39
+ text-btn-secondary
40
+ bg-btn-secondary
41
+ border-btn-secondary
42
+ hover:bg-btn-secondary-hover
43
+ hover:border-btn-secondary-hover
44
+ focus-visible:bg-btn-secondary-focus
45
+ focus-visibleborder-btn-secondary-focus
46
+ active:bg-btn-secondary-active
47
+ active:border-btn-secondary-active
48
+ disabled:text-btn-secondary-disabled
49
+ `,
50
+ outline: `
51
+ text-btn-outline
52
+ border-[1px]
53
+ border-btn-outline
54
+ hover:border-btn-outline-hover
55
+ focus:border-btn-outline-focus
56
+ active:border-btn-outline-active
57
+ disabled:border-btn-outline-disabled
58
+ disabled:text-btn-outline-disabled
59
+ `,
60
+ ghost: `
61
+ text-btn-ghost
62
+ border-transparent
63
+ hover:text-btn-ghost-hover
64
+ focus-visible:text-btn-ghost-focus
65
+ active:text-btn-ghost-active
66
+ disabled:text-btn-ghost-disabled
67
+ `
68
+ };
69
+ const getPadings = (icon, variant) => {
70
+ return (0, utils_1.cn)(icon && 'p-[12px] aspect-square', icon && variant === 'outline' && 'p-[13px] aspect-square', !icon && 'px-[24px] py-[12px]', !icon && variant === 'outline' && 'px-[25px] py-[13px]');
71
+ };
72
+ const buttonVariants = ({ variant, className, icon }) => {
73
+ return (0, class_variance_authority_1.cva)(`${buttonClasses.base} ${getPadings(icon, variant)}`, {
74
+ variants: {
75
+ variant: {
76
+ primary: buttonClasses.primary,
77
+ secondary: buttonClasses.secondary,
78
+ outline: buttonClasses.outline,
79
+ ghost: buttonClasses.ghost,
80
+ },
18
81
  },
19
- size: {
20
- lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-md',
21
- md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-md',
22
- sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
23
- xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
24
- xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
82
+ defaultVariants: {
83
+ variant: 'outline',
25
84
  },
26
- },
27
- defaultVariants: {
28
- variant: 'primary',
29
- size: 'md',
30
- },
31
- });
85
+ })({ variant, className });
86
+ };
32
87
  exports.buttonVariants = buttonVariants;
33
- 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', {
34
- variants: {
35
- variant: {
36
- primary: 'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',
37
- },
38
- },
39
- defaultVariants: {
40
- variant: 'primary',
41
- },
42
- });
43
- const Button = React.forwardRef(({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
44
- const Comp = asChild ? react_slot_1.Slot : "button";
88
+ const Button = React.forwardRef(({ className, variant, asChild = false, icon, ...props }, ref) => {
89
+ const Comp = asChild ? react_slot_1.Slot : 'button';
45
90
  // @ts-ignore
46
- const classes = asText ? textVariants({ variant, className }) : buttonVariants({ variant, size, className });
91
+ const classes = buttonVariants({ variant, className, icon });
47
92
  return (React.createElement(Comp, { className: (0, utils_1.cn)(classes), ref: ref, ...props }));
48
93
  });
49
94
  exports.Button = Button;
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;AACjE,0CAAmC;AAEnC,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;SACpI;QACD,IAAI,EAAE;YACL,EAAE,EAAE,0DAA0D;YAC9D,EAAE,EAAE,0DAA0D;YAC9D,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":";;;;AAAA,0DAA8B;AAC9B,qDAA2C;AAC3C,uEAAiE;AACjE,0CAAmC;AAEnC,MAAM,aAAa,GAAG;IACrB,IAAI,EAAE;;;;;;;;;;;;;;EAcL;IACD,OAAO,EAAE;;;;;;;;;;;;EAYR;IACD,SAAS,EAAE;;;;;;;;;;;EAWV;IACD,OAAO,EAAE;;;;;;;;;EASR;IACD,KAAK,EAAE;;;;;;;EAON;CACD,CAAA;AAED,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE;IACpC,OAAO,IAAA,UAAE,EACR,IAAI,IAAI,wBAAwB,EAChC,IAAI,IAAI,OAAO,KAAK,SAAS,IAAI,wBAAwB,EACzD,CAAC,IAAI,IAAI,qBAAqB,EAC9B,CAAC,IAAI,IAAI,OAAO,KAAK,SAAS,IAAI,qBAAqB,CACvD,CAAA;AACF,CAAC,CAAA;AAMD,MAAM,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAgB,EAAE,EAAE;IACrE,OAAO,IAAA,8BAAG,EAAC,GAAG,aAAa,CAAC,IAAI,IAAI,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,EAAE,EAC9D;QACC,QAAQ,EAAE;YACT,OAAO,EAAE;gBACR,OAAO,EAAE,aAAa,CAAC,OAAO;gBAC9B,SAAS,EAAE,aAAa,CAAC,SAAS;gBAClC,OAAO,EAAE,aAAa,CAAC,OAAO;gBAC9B,KAAK,EAAE,aAAa,CAAC,KAAK;aAC1B;SACD;QACD,eAAe,EAAE;YAChB,OAAO,EAAE,SAAS;SAClB;KACD,CACD,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;AAC1B,CAAC,CAAA;AAyBgB,wCAAc;AAjB/B,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC9B,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAA;IACtC,aAAa;IACb,MAAM,OAAO,GAAG,cAAc,CAAM,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;IACjE,OAAO,CACN,oBAAC,IAAI,IACJ,SAAS,EAAE,IAAA,UAAE,EAAC,OAAO,CAAC,EACtB,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CACD,CAAA;AAIQ,wBAAM;AAFf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}
package/dist/Chip/Chip.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
3
  declare const chipVariants: (props?: {
4
- variant?: "primary" | "secondary" | "success" | "primary-outline" | "outline" | "ghost";
4
+ variant?: "primary" | "secondary" | "outline" | "ghost" | "success" | "primary-outline";
5
5
  size?: "lg" | "md" | "sm" | "xs" | "xxs";
6
6
  } & import("class-variance-authority/dist/types").ClassProp) => string;
7
7
  export interface IChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof chipVariants> {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modul/mbui",
3
- "version": "0.0.18",
3
+ "version": "0.0.19-beta-pv-53151-e38167d1",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/@/config/button.ts CHANGED
@@ -3,87 +3,75 @@ export default {
3
3
  btn: {
4
4
  primary: {
5
5
  DEFAULT: 'var(--btn-primary)',
6
- outline: {
7
- DEFAULT: 'var(--btn-primary-bg)',
8
- hover: 'var(--btn-primary-hover-bg)',
9
- focus: 'var(var(--btn-primary-focus-bg)',
10
- active: 'var(--btn-primary-active-bg)',
11
- }
12
6
  },
13
- secondary: 'var(--btn-secondary)',
14
- success: 'var(--btn-success)',
15
- ghost: 'var(--btn-ghost)',
16
- outline: {
7
+ secondary: {
8
+ DEFAULT: 'var(--btn-secondary)',
9
+ disabled: 'var(--btn-secondary-disabled)',
10
+ },
11
+ ghost: {
17
12
  DEFAULT: 'var(--btn-ghost)',
18
- hover: 'var(--btn-ghost-hover-bg)',
19
- focus: 'var(var(--btn-ghost-focus-bg)',
20
- active: 'var(--btn-ghost-active-bg)',
21
- }
22
- }
13
+ hover: 'var(--btn-ghost-hover)',
14
+ focus: 'var(--btn-ghost-focus)',
15
+ active: 'var(--btn-ghost-active)',
16
+ disabled: 'var(--btn-ghost-disabled)',
17
+ },
18
+ outline: {
19
+ DEFAULT: 'var(--btn-outline)',
20
+ disabled: 'var(--btn-outline-disabled)',
21
+ },
22
+ },
23
23
  },
24
24
  backgroundColor: {
25
25
  btn: {
26
26
  primary: {
27
27
  DEFAULT: 'var(--btn-primary-bg)',
28
28
  hover: 'var(--btn-primary-hover-bg)',
29
- focus: 'var(var(--btn-primary-focus-bg)',
29
+ focus: 'var(--btn-primary-focus-bg)',
30
30
  active: 'var(--btn-primary-active-bg)',
31
+ disabled: 'var(--btn-primary-disabled-bg)',
31
32
  },
32
33
  secondary: {
33
34
  DEFAULT: 'var(--btn-secondary-bg)',
34
35
  hover: 'var(--btn-secondary-hover-bg)',
35
- focus: 'var(var(--btn-secondary-focus-bg)',
36
+ focus: 'var(--btn-secondary-focus-bg)',
36
37
  active: 'var(--btn-secondary-active-bg)',
37
38
  },
38
- success: {
39
- DEFAULT: 'var(--btn-success-bg)',
40
- hover: 'var(--btn-success-hover-bg)',
41
- focus: 'var(var(--btn-success-focus-bg)',
42
- active: 'var(--btn-success-active-bg)',
43
- },
44
39
  ghost: {
45
40
  DEFAULT: 'var(--btn-ghost-bg)',
46
41
  hover: 'var(--btn-ghost-hover-bg)',
47
- focus: 'var(var(--btn-ghost-focus-bg)',
42
+ focus: 'var(--btn-ghost-focus-bg)',
48
43
  active: 'var(--btn-ghost-active-bg)',
49
- }
50
- }
44
+ },
45
+ },
51
46
  },
52
47
  borderColor: {
53
48
  btn: {
54
49
  primary: {
55
50
  DEFAULT: 'var(--btn-primary-bg)',
56
51
  hover: 'var(--btn-primary-hover-bg)',
57
- focus: 'var(var(--btn-primary-focus-bg)',
52
+ focus: 'var(--btn-primary-focus-bg)',
58
53
  active: 'var(--btn-primary-active-bg)',
59
- outline: {
60
- DEFAULT: 'var(--btn-primary-bg)',
61
- hover: 'var(--btn-primary-hover-bg)',
62
- focus: 'var(var(--btn-primary-focus-bg)',
63
- active: 'var(--btn-primary-active-bg)',
64
- }
54
+ disabled: 'var(--btn-primary-disabled-bg)',
65
55
  },
66
56
  secondary: {
67
57
  DEFAULT: 'var(--btn-secondary-bg)',
68
58
  hover: 'var(--btn-secondary-hover-bg)',
69
- focus: 'var(var(--btn-secondary-focus-bg)',
59
+ focus: 'var(--btn-secondary-focus-bg)',
70
60
  active: 'var(--btn-secondary-active-bg)',
71
61
  },
72
- success: {
73
- DEFAULT: 'var(--btn-success-bg)',
74
- hover: 'var(--btn-success-hover-bg)',
75
- focus: 'var(var(--btn-success-focus-bg)',
76
- active: 'var(--btn-success-active-bg)',
77
- },
78
62
  ghost: {
79
63
  DEFAULT: 'var(--btn-ghost-bg)',
80
64
  hover: 'var(--btn-ghost-hover-bg)',
81
- focus: 'var(var(--btn-ghost-focus-bg)',
65
+ focus: 'var(--btn-ghost-focus-bg)',
82
66
  active: 'var(--btn-ghost-active-bg)',
83
67
  },
84
68
  outline: {
85
- DEFAULT: 'var(--btn-ghost)',
86
- }
87
- }
88
- }
89
- }
69
+ DEFAULT: 'var(--btn-outline-border)',
70
+ hover: 'var(--btn-outline-hover-border)',
71
+ focus: 'var(--btn-outline-focus-border)',
72
+ active: 'var(--btn-outline-active-border)',
73
+ disabled: 'var(--btn-outline-disabled-border)',
74
+ },
75
+ },
76
+ },
77
+ }
package/src/Alert/Alert.tsx CHANGED
@@ -40,7 +40,7 @@ const getClass = (variant, type): string => {
40
40
 
41
41
  }
42
42
 
43
- interface TAlertComponents {
43
+ interface IAlertComponents {
44
44
  displayName: string;
45
45
  Title: typeof Title;
46
46
  Description: typeof Description;
@@ -55,7 +55,7 @@ interface IAlertProps {
55
55
 
56
56
  type TAlertProps = IAlertProps & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
57
57
 
58
- const Alert: React.FC<TAlertProps> & TAlertComponents = ({ className, variant = 'info', type, children, ...props }) => {
58
+ const Alert: React.FC<TAlertProps> & IAlertComponents = ({ className, variant = 'info', type, children, ...props }) => {
59
59
  return (
60
60
  <div
61
61
  className={cn('flex', getClass(variant, type))}
package/src/AlertDialog/AlertDialog.tsx CHANGED
@@ -101,7 +101,7 @@ const AlertDialogAction = React.forwardRef<
101
101
  >(({ className, ...props }, ref) => (
102
102
  <AlertDialogPrimitive.Action
103
103
  ref={ref}
104
- className={cn(buttonVariants({variant: 'primary', size: 'sm'}), className)}
104
+ className={cn(buttonVariants({variant: 'primary'}), className)}
105
105
  {...props}
106
106
  />
107
107
  ))
@@ -114,7 +114,7 @@ const AlertDialogCancel = React.forwardRef<
114
114
  <AlertDialogPrimitive.Cancel
115
115
  ref={ref}
116
116
  className={cn(
117
- buttonVariants({ variant: "outline", size: 'sm' }),
117
+ buttonVariants({ variant: "outline"}),
118
118
  className
119
119
  )}
120
120
  {...props}
package/src/Button/Button.tsx CHANGED
@@ -3,71 +3,117 @@ import { Slot } from '@radix-ui/react-slot'
3
3
  import { cva, type VariantProps } from 'class-variance-authority'
4
4
  import { cn } from '../@/lib/utils'
5
5
 
6
- const buttonVariants = cva(
7
- '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',
8
- {
9
- variants: {
10
- variant: {
11
- primary:
12
- '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',
13
- secondary:
14
- '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:
16
- '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',
17
- 'primary-outline':
18
- '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',
19
- outline: 'border-[1px] text-btn-outline border-btn-outline ring-[currentColor]',
20
- ghost: 'text-btn-ghost bg-btn-ghost hover:bg-btn-ghost-hover focus:bg-btn-ghost-focus active:bg-btn-ghost-active border-transparent',
6
+ const buttonClasses = {
7
+ base: `
8
+ inline-flex
9
+ justify-center
10
+ items-center
11
+ border-[2px]
12
+ rounded-md
13
+ font-medium
14
+ leading-[1]
15
+ focus-visible:ring
16
+ focus-visible:outline-none
17
+ ring-offset-1
18
+ disabled:pointer-events-none
19
+ transition-colors
20
+ whitespace-nowrap
21
+ `,
22
+ primary: `
23
+ text-btn-primary
24
+ bg-btn-primary
25
+ border-btn-primary
26
+ hover:bg-btn-primary-hover
27
+ hover:border-btn-primary-hover
28
+ focus-visible:bg-btn-primary-focus
29
+ focus-visible:border-btn-primary-focus
30
+ active:bg-btn-primary-active
31
+ active:border-btn-primary-active
32
+ disabled:bg-btn-primary-disabled
33
+ disabled:border-btn-primary-disabled
34
+ `,
35
+ secondary: `
36
+ text-btn-secondary
37
+ bg-btn-secondary
38
+ border-btn-secondary
39
+ hover:bg-btn-secondary-hover
40
+ hover:border-btn-secondary-hover
41
+ focus-visible:bg-btn-secondary-focus
42
+ focus-visibleborder-btn-secondary-focus
43
+ active:bg-btn-secondary-active
44
+ active:border-btn-secondary-active
45
+ disabled:text-btn-secondary-disabled
46
+ `,
47
+ outline: `
48
+ text-btn-outline
49
+ border-[1px]
50
+ border-btn-outline
51
+ hover:border-btn-outline-hover
52
+ focus:border-btn-outline-focus
53
+ active:border-btn-outline-active
54
+ disabled:border-btn-outline-disabled
55
+ disabled:text-btn-outline-disabled
56
+ `,
57
+ ghost: `
58
+ text-btn-ghost
59
+ border-transparent
60
+ hover:text-btn-ghost-hover
61
+ focus-visible:text-btn-ghost-focus
62
+ active:text-btn-ghost-active
63
+ disabled:text-btn-ghost-disabled
64
+ `
65
+ }
66
+
67
+ const getPadings = (icon, variant) => {
68
+ return cn(
69
+ icon && 'p-[12px] aspect-square',
70
+ icon && variant === 'outline' && 'p-[13px] aspect-square',
71
+ !icon && 'px-[24px] py-[12px]',
72
+ !icon && variant === 'outline' && 'px-[25px] py-[13px]'
73
+ )
74
+ }
75
+ interface IButtonProps {
76
+ variant?: 'primary'| 'secondary' | 'outline' | 'ghost',
77
+ className?: string,
78
+ icon?: boolean
79
+ }
80
+ const buttonVariants = ({ variant, className, icon }: IButtonProps) => {
81
+ return cva(`${buttonClasses.base} ${getPadings(icon, variant)}`,
82
+ {
83
+ variants: {
84
+ variant: {
85
+ primary: buttonClasses.primary,
86
+ secondary: buttonClasses.secondary,
87
+ outline: buttonClasses.outline,
88
+ ghost: buttonClasses.ghost,
89
+ },
21
90
  },
22
- size: {
23
- lg: 'h-[52px] px-[32px] text-[16px] leading-[1.08] rounded-md',
24
- md: 'h-[44px] px-[24px] text-[14px] leading-[1.08] rounded-md',
25
- sm: 'h-[36px] px-[20px] text-[12px] leading-none rounded-[3px]',
26
- xs: 'h-[28px] px-[12px] text-[11px] leading-none rounded-[2px]',
27
- xxs: 'h-[20px] px-[8px] text-[9px] leading-none rounded-[2px]',
91
+ defaultVariants: {
92
+ variant: 'outline',
28
93
  },
29
- },
30
- defaultVariants: {
31
- variant: 'primary',
32
- size: 'md',
33
- },
34
- }
35
- )
36
- const textVariants = cva(
37
- 'inline-flex whitespace-nowrap transition-colors focus-visible:outline-current disabled:opacity-[.24] rounded-[.25em] disabled:pointer-events-none',
38
- {
39
- variants: {
40
- variant: {
41
- primary:
42
- 'text-primary hover:text-primary-hover focus:text-primary-focus active:text-primary-active disabled:pointer-events-none',
43
- },
44
- },
45
- defaultVariants: {
46
- variant: 'primary',
47
- },
48
- }
49
- )
94
+ }
95
+ )({ variant, className })
96
+ }
50
97
 
51
- export interface ButtonProps
52
- extends React.ButtonHTMLAttributes<HTMLButtonElement>,
53
- VariantProps<typeof buttonVariants> {
98
+ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
54
99
  asChild?: boolean
55
- asText?: boolean
100
+ icon?: boolean
101
+ variant?: string
56
102
  }
57
103
 
58
104
  const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
59
- ({ className, variant, size, asText = false, asChild = false, ...props }, ref) => {
60
- const Comp = asChild ? Slot : "button"
61
- // @ts-ignore
62
- const classes = asText ? textVariants<any>({ variant, className }) : buttonVariants({ variant, size, className });
63
- return (
64
- <Comp
65
- className={cn(classes)}
66
- ref={ref}
67
- {...props}
68
- />
69
- )
70
- }
105
+ ({ className, variant, asChild = false, icon, ...props }, ref) => {
106
+ const Comp = asChild ? Slot : 'button'
107
+ // @ts-ignore
108
+ const classes = buttonVariants<any>({ variant, className, icon })
109
+ return (
110
+ <Comp
111
+ className={cn(classes)}
112
+ ref={ref}
113
+ {...props}
114
+ />
115
+ )
116
+ }
71
117
  )
72
118
 
73
119
  Button.displayName = 'Button'
package/src/assets/css/global.css CHANGED
@@ -128,29 +128,28 @@
128
128
  --btn-primary-hover-bg: var(--cl-blue-3);
129
129
  --btn-primary-focus-bg: var(--cl-blue-1);
130
130
  --btn-primary-active-bg: var(--cl-blue-1);
131
+ --btn-primary-disabled-bg: var(--cl-blue-5);
131
132
 
132
- --btn-success: var(--cl-white);
133
- --btn-success-bg: var(--cl-green-3);
134
- --btn-success-hover-bg: var(--cl-green-4);
135
- --btn-success-focus-bg: var(--cl-green-1);
136
- --btn-success-active-bg: var(--cl-green-1);
137
-
138
- --btn-secondary: var(--cl-graphite-2);
139
- --btn-secondary-bg: #EDEEEF;
140
- --btn-secondary-hover-bg: #E4E5E7;
133
+ --btn-secondary: var(--cl-blue-2);
134
+ --btn-secondary-disabled: var(--cl-blue-5);
135
+ --btn-secondary-bg: var(--cl-graphite-7);
136
+ --btn-secondary-hover-bg: transparent;
141
137
  --btn-secondary-focus-bg: #E4E5E7;
142
- --btn-secondary-active-bg: #DCDCDE;
143
-
144
- --btn-ghost: var(--cl-graphite-2);
145
- --btn-ghost-bg: var(--cl-white);
146
- --btn-ghost-hover-bg: #F6F6F7;
147
- --btn-ghost-focus-bg: #F6F6F7;
148
- --btn-ghost-active-bg: #EDEEEF;
149
- --btn-primary-outline: var(--cl-blue-2);
150
- --btn-primary-outline-bg: var(--cl-white);
151
- --btn-primary-outline-hover-bg: var(--cl-blue-3);
152
- --btn-primary-outline-focus-bg: var(--cl-blue-3);
153
- --btn-primary-outline-active-bg: var(--cl-blue-1);
138
+ --btn-secondary-active-bg: var(--cl-graphite-6);
139
+
140
+ --btn-ghost: var(--cl-blue-2);
141
+ --btn-ghost-hover:var(--cl-blue-3);
142
+ --btn-ghost-focus: var(--cl-blue-3);
143
+ --btn-ghost-active: var(--cl-blue-1);
144
+ --btn-ghost-disabled: var(--cl-blue-5);
145
+
146
+ --btn-outline: var(--cl-graphite-2);
147
+ --btn-outline-disabled: var(--cl-graphite-4);
148
+ --btn-outline-border: var(--cl-graphite-5);
149
+ --btn-outline-hover-border:var(--cl-graphite-6);
150
+ --btn-outline-focus-border: var(--cl-graphite-4);
151
+ --btn-outline-active-border: var(--cl-graphite-4);
152
+ --btn-outline-disabled-border: var(--cl-graphite-5);
154
153
 
155
154
  --btn-txt-primary: var(--cl-blue-2);
156
155
  --btn-txt-primary-hover: var(--cl-blue-3);