@modul/mbui 0.0.4-beta-pv-52894-ba6f4013 → 0.0.4-beta-pv-52894-c406e9b6

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 (7) hide show
  1. package/dist/Collapsible/AccountCollapsible.d.ts +1 -0
  2. package/dist/Collapsible/AccountCollapsible.js +5 -1
  3. package/dist/Collapsible/AccountCollapsible.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/@/config/index.ts +9 -56
  6. package/src/Collapsible/AccountCollapsible.tsx +21 -12
  7. package/src/assets/css/global.css +1 -0
package/dist/Collapsible/AccountCollapsible.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare type AccountCollapsibleHeaderProps = {
9
9
  export declare type AccountCollapsibleContentItemProps = {
10
10
  className?: string;
11
11
  children: ReactNode;
12
+ asChild: boolean;
12
13
  };
13
14
  declare const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps>;
14
15
  declare const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps>;
package/dist/Collapsible/AccountCollapsible.js CHANGED
@@ -6,6 +6,7 @@ const react_1 = (0, tslib_1.__importDefault)(require("react"));
6
6
  const CollapsiblePrimitive = (0, tslib_1.__importStar)(require("@radix-ui/react-collapsible"));
7
7
  const Icon_1 = require("../../src/Icon");
8
8
  const utils_1 = require("../@/lib/utils");
9
+ const react_slot_1 = require("@radix-ui/react-slot");
9
10
  const AccountCollapsible = CollapsiblePrimitive.Root;
10
11
  exports.AccountCollapsible = AccountCollapsible;
11
12
  const AccountCollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
@@ -19,7 +20,10 @@ const AccountCollapsibleHeader = ({ label }) => {
19
20
  react_1.default.createElement(Icon_1.DropdownSmallOld, null))));
20
21
  };
21
22
  exports.AccountCollapsibleHeader = AccountCollapsibleHeader;
22
- const AccountCollapsibleContentItem = ({ children, className, ...props }) => (react_1.default.createElement("a", { href: "", className: (0, utils_1.cn)('text-left w-full rounded-[4px] px-[12px] py-[16px] 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', className), ...props }, children));
23
+ const AccountCollapsibleContentItem = ({ children, asChild = true, className, ...props }) => {
24
+ const Comp = asChild ? react_slot_1.Slot : 'div';
25
+ return (react_1.default.createElement(Comp, { className: (0, utils_1.cn)('text-left w-full rounded-[4px] px-[12px] py-[16px] 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', className), ...props }, children));
26
+ };
23
27
  exports.AccountCollapsibleContentItem = AccountCollapsibleContentItem;
24
28
  AccountCollapsible.displayName = 'AccountCollaspible';
25
29
  AccountCollapsibleTrigger.displayName = 'AccountCollaspibleTrigger';
package/dist/Collapsible/AccountCollapsible.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AccountCollapsible.js","sourceRoot":"","sources":["../../src/Collapsible/AccountCollapsible.tsx"],"names":[],"mappings":";;;;AAAA,+DAA4C;AAC5C,+FAAmE;AACnE,yCAAiD;AACjD,0CAAmC;AAEnC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAA;AA4CnD,gDAAkB;AA1CnB,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AA4CxE,8DAAyB;AA1C1B,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AA2CxE,8DAAyB;AAjC1B,MAAM,wBAAwB,GAAsC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,CACN,uCAAK,SAAS,EAAC,0CAA0C;QACxD,uCAAK,SAAS,EAAC,uCAAuC,IAAE,KAAK,CAAO;QACpE,8BAAC,yBAAyB,IAAC,SAAS,EAAC,2DAA2D;YAC/F,8BAAC,uBAAgB,OAAG,CACO,CACvB,CACN,CAAA;AACF,CAAC,CAAA;AAsBA,4DAAwB;AArBzB,MAAM,6BAA6B,GAA2C,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpH,qCACC,IAAI,EAAC,EAAE,EACP,SAAS,EAAE,IAAA,UAAE,EACZ,wRAAwR,EACxR,SAAS,CACT,KACG,KAAK,IAER,QAAQ,CACN,CACJ,CAAA;AAaA,sEAA6B;AAX9B,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA;AACrD,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAA;AACjE,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,6BAA6B,CAAC,WAAW,GAAG,+BAA+B,CAAA"}
1
+ {"version":3,"file":"AccountCollapsible.js","sourceRoot":"","sources":["../../src/Collapsible/AccountCollapsible.tsx"],"names":[],"mappings":";;;;AAAA,+DAA4C;AAC5C,+FAAmE;AACnE,yCAAiD;AACjD,0CAAmC;AACnC,qDAA2C;AAE3C,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,IAAI,CAAA;AAoDnD,gDAAkB;AAlDnB,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AAoDxE,8DAAyB;AAlD1B,MAAM,yBAAyB,GAAG,oBAAoB,CAAC,kBAAkB,CAAA;AAmDxE,8DAAyB;AAxC1B,MAAM,wBAAwB,GAAsC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,CACN,uCAAK,SAAS,EAAC,0CAA0C;QACxD,uCAAK,SAAS,EAAC,uCAAuC,IAAE,KAAK,CAAO;QACpE,8BAAC,yBAAyB,IAAC,SAAS,EAAC,2DAA2D;YAC/F,8BAAC,uBAAgB,OAAG,CACO,CACvB,CACN,CAAA;AACF,CAAC,CAAA;AA6BA,4DAAwB;AA5BzB,MAAM,6BAA6B,GAA2C,CAAC,EAC9E,QAAQ,EACR,OAAO,GAAE,IAAI,EACb,SAAS,EACT,GAAG,KAAK,EACR,EAAE,EAAE;IACJ,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,KAAK,CAAA;IACnC,OAAO,CACN,8BAAC,IAAI,IACJ,SAAS,EAAE,IAAA,UAAE,EACZ,wRAAwR,EACxR,SAAS,CACT,KACG,KAAK,IAER,QAAQ,CACH,CACP,CAAA;AACF,CAAC,CAAA;AAaA,sEAA6B;AAX9B,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAA;AACrD,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAA;AACjE,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAA;AACnE,6BAA6B,CAAC,WAAW,GAAG,+BAA+B,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modul/mbui",
3
- "version": "0.0.4-beta-pv-52894-ba6f4013",
3
+ "version": "0.0.4-beta-pv-52894-c406e9b6",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/@/config/index.ts CHANGED
@@ -26,62 +26,15 @@ export default {
26
26
  transparent: 'transparent',
27
27
  current: 'currentColor',
28
28
  },
29
- ...button,
30
- // textColor: {
31
- // base: 'var(--text-cl)',
32
- // 'btn-primary': 'var(--btn-primary-cl)',
33
- // 'btn-success': 'var(--btn-success-cl)',
34
- // primary: 'var(--btn-txt-primary)',
35
- // 'primary-hover': 'var(--btn-txt-primary-hover)',
36
- // 'primary-focus': 'var(--btn-txt-primary-focus)',
37
- // 'primary-active': 'var(--btn-txt-primary-active)',
38
- // },
39
-
40
- // border: {
41
- // 'btn-primary-outline': '2px solid red'
42
- // },
43
-
44
- // colors: {
45
- // border: 'hsl(var(--border))',
46
- // input: 'hsl(var(--input))',
47
- // ring: 'hsl(var(--ring))',
48
- // background: 'hsl(var(--background))',
49
- // foreground: 'hsl(var(--foreground))',
50
- // primary: {
51
- // DEFAULT: 'hsl(var(--primary))',
52
- // foreground: 'hsl(var(--primary-foreground))',
53
- // },
54
- // secondary: {
55
- // DEFAULT: 'hsl(var(--secondary))',
56
- // foreground: 'hsl(var(--secondary-foreground))',
57
- // },
58
- // destructive: {
59
- // DEFAULT: 'hsl(var(--destructive))',
60
- // foreground: 'hsl(var(--destructive-foreground))',
61
- // },
62
- // muted: {
63
- // DEFAULT: 'hsl(var(--muted))',
64
- // foreground: 'hsl(var(--muted-foreground))',
65
- // },
66
- // accent: {
67
- // DEFAULT: 'hsl(var(--accent))',
68
- // foreground: 'hsl(var(--accent-foreground))',
69
- // },
70
- // popover: {
71
- // DEFAULT: 'hsl(var(--popover))',
72
- // foreground: 'hsl(var(--popover-foreground))',
73
- // },
74
- // card: {
75
- // DEFAULT: 'hsl(var(--card))',
76
- // foreground: 'hsl(var(--card-foreground))',
77
- // },
78
- // },
79
- // borderRadius: {
80
- // lg: `var(--radius)`,
81
- // md: `calc(var(--radius) - 2px)`,
82
- // sm: 'calc(var(--radius) - 4px)',
83
- // },
84
-
29
+ textColor: {
30
+ ...button.textColor
31
+ },
32
+ backgroundColor: {
33
+ primary: {
34
+ DEFAULT: 'var(--primary-bg)'
35
+ },
36
+ ...button.backgroundColor
37
+ },
85
38
  keyframes: {
86
39
  'accordion-down': {
87
40
  from: { height: '0' },
package/src/Collapsible/AccountCollapsible.tsx CHANGED
@@ -2,6 +2,7 @@ import React, { FC, ReactNode } from 'react'
2
2
  import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
3
3
  import { DropdownSmallOld } from '../../src/Icon'
4
4
  import { cn } from '../@/lib/utils'
5
+ import { Slot } from '@radix-ui/react-slot'
5
6
 
6
7
  const AccountCollapsible = CollapsiblePrimitive.Root
7
8
 
@@ -15,6 +16,7 @@ export type AccountCollapsibleHeaderProps = {
15
16
  export type AccountCollapsibleContentItemProps = {
16
17
  className?: string
17
18
  children: ReactNode
19
+ asChild: boolean
18
20
  }
19
21
 
20
22
  const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps> = ({ label }) => {
@@ -27,18 +29,25 @@ const AccountCollapsibleHeader: FC<AccountCollapsibleHeaderProps> = ({ label })
27
29
  </div>
28
30
  )
29
31
  }
30
- const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps> = ({ children, className, ...props }) => (
31
- <a
32
- href=""
33
- className={cn(
34
- 'text-left w-full rounded-[4px] px-[12px] py-[16px] 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',
35
- className
36
- )}
37
- {...props}
38
- >
39
- {children}
40
- </a>
41
- )
32
+ const AccountCollapsibleContentItem: FC<AccountCollapsibleContentItemProps> = ({
33
+ children,
34
+ asChild =true,
35
+ className,
36
+ ...props
37
+ }) => {
38
+ const Comp = asChild ? Slot : 'div'
39
+ return (
40
+ <Comp
41
+ className={cn(
42
+ 'text-left w-full rounded-[4px] px-[12px] py-[16px] 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',
43
+ className
44
+ )}
45
+ {...props}
46
+ >
47
+ {children}
48
+ </Comp>
49
+ )
50
+ }
42
51
 
43
52
  AccountCollapsible.displayName = 'AccountCollaspible'
44
53
  AccountCollapsibleTrigger.displayName = 'AccountCollaspibleTrigger'
package/src/assets/css/global.css CHANGED
@@ -75,6 +75,7 @@
75
75
 
76
76
  /* --text-base: var(--cl-graphite-1); */
77
77
  --primary: var(--cl-blue-2);
78
+ --primary-bg: var(--cl-blue-7);
78
79
  --success: var(--cl-graphite-1);
79
80
  --seconady: var(--cl-graphite-2);
80
81
  --tertiary: var(--cl-graphite-3);