@modul/mbui 0.0.14 → 0.0.15-beta-pv-53129-4f920e60

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 (5) hide show
  1. package/dist/Tabs/Tabs.js +2 -2
  2. package/dist/Tabs/Tabs.js.map +1 -1
  3. package/package.json +1 -1
  4. package/src/Tabs/Tabs.tsx +2 -2
  5. package/src/assets/css/global.css +12 -1
package/dist/Tabs/Tabs.js CHANGED
@@ -7,8 +7,8 @@ const classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
7
7
  const TabsPrimitive = (0, tslib_1.__importStar)(require("@radix-ui/react-tabs"));
8
8
  const Tabs = ({ ...props }) => react_1.default.createElement(TabsPrimitive.Root, { ...props });
9
9
  exports.Tabs = Tabs;
10
- const TabsList = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.List, { ref: ref, className: (0, classnames_1.default)('inline-flex items-center gap-x-[24px] border-b-2', className), ...props })));
11
- const TabsTrigger = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.Trigger, { ref: ref, className: (0, classnames_1.default)('inline-flex relative after:-bottom-[2px] after:absolute after:inset-x-0 justify-center items-center after:bg-primary disabled:opacity-50 pb-[12px] data-[state=active]:border-bottom-[2px] rounded-[4px] focus-visible:ring-2 focus-visible:ring-ring ring-offset-background focus-visible:ring-offset-2 data-[state=active]:after:h-[3px] text-[14px] data-[state=active]:text-primary leading-[1.4] whitespace-nowrap motion-reduce:hover:transform-none transition-all after:transition-all motion-reduce:transition-none focus-visible:outline-none disabled:pointer-events-none', className), ...props })));
10
+ const TabsList = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.List, { ref: ref, className: (0, classnames_1.default)('inline-flex bg-[--tabs-bg] p-[1px] rounded-[--tabs-round] data-[orientation=horizontal]:h-[--tabs-height] data-[orientation=vertical]:flex-col', className), ...props })));
11
+ const TabsTrigger = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.Trigger, { ref: ref, className: (0, classnames_1.default)('flex-1 data-[state=active]:border-[--tab-border] data-[state=active]:bg-[--tab-bg] data-[state=active]:shadow-sm px-[8px] data-[orientation=vertical]:basis-auto border border-transparent rounded-sm focus-visible:ring-2 focus-visible:ring-ring ring-offset-background focus-visible:ring-offset-2 h-[--tab-height] text-[12px] text-center data-[state=inactive]:text-dark truncate leading-[1.16] whitespace-nowrap motion-reduce:hover:transform-none transition-all motion-reduce:transition-none overflow-hidden shrink-0 focus-visible:outline-none disabled:pointer-events-none', className), ...props })));
12
12
  const TabsContent = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.Content, { ref: ref, className: (0, classnames_1.default)('ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className), ...props })));
13
13
  Tabs.List = TabsList;
14
14
  TabsList.displayName = 'TabsList';
package/dist/Tabs/Tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;AAAA,+DAAyB;AACzB,yEAA2B;AAC3B,iFAAqD;AASrD,MAAM,IAAI,GAAyC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,8BAAC,aAAa,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;AAmD7F,oBAAI;AAjDb,MAAM,QAAQ,GAAG,eAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,IAAI,IAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EACZ,kDAAkD,EAClD,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EACb,sjBAAsjB,EACrjB,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EACZ,4HAA4H,EAC5H,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAA;AACpB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AACjC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAA;AAC1B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AACvC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAA;AAC1B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA"}
1
+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs/Tabs.tsx"],"names":[],"mappings":";;;;AAAA,+DAAyB;AACzB,yEAA2B;AAC3B,iFAAqD;AASrD,MAAM,IAAI,GAAyC,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,8BAAC,aAAa,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;AAmD7F,oBAAI;AAjDb,MAAM,QAAQ,GAAG,eAAK,CAAC,UAAU,CAG/B,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,IAAI,IAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EACZ,gJAAgJ,EAChJ,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EACb,2jBAA2jB,EAC1jB,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,MAAM,WAAW,GAAG,eAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,8BAAC,aAAa,CAAC,OAAO,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAE,EACZ,4HAA4H,EAC5H,SAAS,CACT,KACG,KAAK,GACR,CACF,CAAC,CAAA;AAEF,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAA;AACpB,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AACjC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAA;AAC1B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AACvC,IAAI,CAAC,OAAO,GAAG,WAAW,CAAA;AAC1B,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modul/mbui",
3
- "version": "0.0.14",
3
+ "version": "0.0.15-beta-pv-53129-4f920e60",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/Tabs/Tabs.tsx CHANGED
@@ -18,7 +18,7 @@ const TabsList = React.forwardRef<
18
18
  <TabsPrimitive.List
19
19
  ref={ref}
20
20
  className={cn(
21
- 'inline-flex items-center gap-x-[24px] border-b-2',
21
+ 'inline-flex bg-[--tabs-bg] p-[1px] rounded-[--tabs-round] data-[orientation=horizontal]:h-[--tabs-height] data-[orientation=vertical]:flex-col',
22
22
  className
23
23
  )}
24
24
  {...props}
@@ -32,7 +32,7 @@ const TabsTrigger = React.forwardRef<
32
32
  <TabsPrimitive.Trigger
33
33
  ref={ref}
34
34
  className={cn(
35
- 'inline-flex relative after:-bottom-[2px] after:absolute after:inset-x-0 justify-center items-center after:bg-primary disabled:opacity-50 pb-[12px] data-[state=active]:border-bottom-[2px] rounded-[4px] focus-visible:ring-2 focus-visible:ring-ring ring-offset-background focus-visible:ring-offset-2 data-[state=active]:after:h-[3px] text-[14px] data-[state=active]:text-primary leading-[1.4] whitespace-nowrap motion-reduce:hover:transform-none transition-all after:transition-all motion-reduce:transition-none focus-visible:outline-none disabled:pointer-events-none',
35
+ 'flex-1 data-[state=active]:border-[--tab-border] data-[state=active]:bg-[--tab-bg] data-[state=active]:shadow-sm px-[8px] data-[orientation=vertical]:basis-auto border border-transparent rounded-sm focus-visible:ring-2 focus-visible:ring-ring ring-offset-background focus-visible:ring-offset-2 h-[--tab-height] text-[12px] text-center data-[state=inactive]:text-dark truncate leading-[1.16] whitespace-nowrap motion-reduce:hover:transform-none transition-all motion-reduce:transition-none overflow-hidden shrink-0 focus-visible:outline-none disabled:pointer-events-none',
36
36
  className
37
37
  )}
38
38
  {...props}
package/src/assets/css/global.css CHANGED
@@ -167,7 +167,7 @@
167
167
 
168
168
  /* SHADOWS */
169
169
  /* =========================================== */
170
- --shadow-sm: 0px 4px 16px rgba(36, 48, 54, 0.08);
170
+ --shadow-sm: 0px 4px 14px rgba(36, 48, 54, 0.08);
171
171
  --shadow-md: 0 2px 10px rgba(36, 48, 54, 0.12);
172
172
  /* =========================================== */
173
173
  /* SHADOWS */
@@ -179,6 +179,17 @@
179
179
  /* =========================================== */
180
180
  /* PROGRESS */
181
181
 
182
+ /* TABS */
183
+ /* =========================================== */
184
+ --tabs-bg: var(--cl-graphite-6);
185
+ --tabs-round: 4px;
186
+ --tab-bg: var(--cl-white);
187
+ --tab-border: var(--cl-graphite-6);
188
+ --tabs-height: 32px;
189
+ --tab-height: 30px;
190
+ /* =========================================== */
191
+ /* TABS */
192
+
182
193
 
183
194
  }
184
195