@modul/mbui 0.0.14 → 0.0.15-beta-pv-53129-38976a74

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 (10) hide show
  1. package/dist/Drawer/Drawer.js +8 -7
  2. package/dist/Drawer/Drawer.js.map +1 -1
  3. package/dist/Drawer/index.d.ts +1 -1
  4. package/dist/Tabs/Tabs.js +15 -2
  5. package/dist/Tabs/Tabs.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/Drawer/Drawer.tsx +10 -9
  8. package/src/Drawer/index.ts +1 -1
  9. package/src/Tabs/Tabs.tsx +16 -5
  10. package/src/assets/css/global.css +12 -1
package/dist/Drawer/Drawer.js CHANGED
@@ -6,9 +6,9 @@ const React = (0, tslib_1.__importStar)(require("react"));
6
6
  const vaul_1 = require("vaul");
7
7
  const utils_1 = require("../@/lib/utils");
8
8
  const react_1 = require("react");
9
- const DrawerContext = React.createContext('bottom');
9
+ const DrawerContext = React.createContext({ direction: 'bottom', modal: false });
10
10
  const Drawer = ({ ...props }) => {
11
- return (React.createElement(DrawerContext.Provider, { value: props.direction },
11
+ return (React.createElement(DrawerContext.Provider, { value: { direction: props.direction, modal: props.modal } },
12
12
  React.createElement(vaul_1.Drawer.Root, { ...props })));
13
13
  };
14
14
  exports.Drawer = Drawer;
@@ -23,15 +23,16 @@ const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (React.cr
23
23
  exports.DrawerTitle = DrawerTitle;
24
24
  DrawerTitle.displayName = vaul_1.Drawer.Title.displayName;
25
25
  const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => {
26
- const direction = (0, react_1.useContext)(DrawerContext);
26
+ const { direction = 'bottom', modal = false } = (0, react_1.useContext)(DrawerContext);
27
27
  return (React.createElement(DrawerPortal, null,
28
+ modal && React.createElement(DrawerOverlay, { className: 'z-50 fixed inset-0 bg-[--drawer-overlay-bg]' }),
28
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 },
29
- direction !== 'top' && (React.createElement(DrawerClose, { className: "pt-[4px] pb-[16px]" },
30
- React.createElement("span", { className: "block bg-[#cbcdd1] mx-auto rounded-full w-[36px] h-[5px]" }))),
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]" }))),
31
32
  children,
32
- direction === 'top' && (React.createElement(DrawerClose, { className: "pt-[24px] pb-[16px]" },
33
+ direction === 'top' && (React.createElement("div", { className: "pt-[24px] pb-[16px]" },
33
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" },
34
- 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: "#cbcdd1" })))))));
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)" })))))));
35
36
  });
36
37
  exports.DrawerContent = DrawerContent;
37
38
  DrawerContent.displayName = 'DrawerContent';
package/dist/Drawer/Drawer.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,+BAAgD;AAChD,0CAAmC;AACnC,iCAAkC;AAElC,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;AAEnD,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,KAAK,EAAqD,EAAE,EAAE;IAClF,OAAO,CACN,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,CAAC,SAAS;QAC7C,oBAAC,aAAe,CAAC,IAAI,OAAK,KAAK,GAAI,CACX,CACzB,CAAA;AACF,CAAC,CAAA;AAyEQ,wBAAM;AAvEf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AAqE5B,sCAAa;AAnE9B,MAAM,YAAY,GAAG,aAAe,CAAC,MAAM,CAAA;AAE3C,MAAM,WAAW,GAAG,aAAe,CAAC,KAAK,CAAA;AAiEmB,kCAAW;AA/DvE,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AAE7C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,oBAAC,aAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,SAAS,CAAC,KACpB,KAAK,GACR,CACF,CAAC,CAAA;AAoD6C,kCAAW;AAlD1D,WAAW,CAAC,WAAW,GAAG,aAAe,CAAC,KAAK,CAAC,WAAW,CAAA;AAE3D,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5C,MAAM,SAAS,GAAG,IAAA,kBAAU,EAAC,aAAa,CAAC,CAAA;IAE3C,OAAO,CACN,oBAAC,YAAY;QACZ,oBAAC,aAAe,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACZ,+EAA+E,EAC/E,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,EACrE,SAAS,CACT,KACG,KAAK;YAER,SAAS,KAAK,KAAK,IAAI,CACvB,oBAAC,WAAW,IAAC,SAAS,EAAC,oBAAoB;gBAC1C,8BAAM,SAAS,EAAC,0DAA0D,GAAG,CAChE,CACd;YAEA,QAAQ;YAER,SAAS,KAAK,KAAK,IAAI,CACvB,oBAAC,WAAW,IAAC,SAAS,EAAC,qBAAqB;gBAC3C,6BACC,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;oBAElC,8BACC,CAAC,EAAC,+UAA+U,EACjV,IAAI,EAAC,SAAS,GACb,CACG,CACO,CACd,CACwB,CACZ,CACf,CAAA;AACF,CAAC,CAAC,CAAA;AAG8B,sCAAa;AAF7C,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
1
+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,+BAAgD;AAChD,0CAAmC;AACnC,iCAAkC;AAElC,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAC,EAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;AAE9E,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,KAAK,EAAqD,EAAE,EAAE;IAClF,OAAO,CACN,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAC,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAC;QAC9E,oBAAC,aAAe,CAAC,IAAI,OAAK,KAAK,GAAI,CACX,CACzB,CAAA;AACF,CAAC,CAAA;AA0EQ,wBAAM;AAxEf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AAsE5B,sCAAa;AApE9B,MAAM,YAAY,GAAG,aAAe,CAAC,MAAM,CAAA;AAE3C,MAAM,WAAW,GAAG,aAAe,CAAC,KAAK,CAAA;AAkEmB,kCAAW;AAhEvE,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AAE7C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAGlC,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACnC,oBAAC,aAAe,CAAC,KAAK,IACrB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EAAC,SAAS,CAAC,KACpB,KAAK,GACR,CACF,CAAC,CAAA;AAqD6C,kCAAW;AAnD1D,WAAW,CAAC,WAAW,GAAG,aAAe,CAAC,KAAK,CAAC,WAAW,CAAA;AAE3D,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5C,MAAM,EAAC,SAAS,GAAG,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAC,GAAG,IAAA,kBAAU,EAAC,aAAa,CAAC,CAAA;IAEvE,OAAO,CACN,oBAAC,YAAY;QACX,KAAK,IAAI,oBAAC,aAAa,IAAC,SAAS,EAAC,6CAA6C,GAAG;QACnF,oBAAC,aAAe,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACZ,+EAA+E,EAC/E,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,uBAAuB,EACrE,SAAS,CACT,KACG,KAAK;YAER,SAAS,KAAK,KAAK,IAAI,CACvB,6BAAK,SAAS,EAAC,oBAAoB;gBAClC,8BAAM,SAAS,EAAC,kEAAkE,GAAG,CAChF,CACN;YAEA,QAAQ;YAER,SAAS,KAAK,KAAK,IAAI,CACvB,6BAAK,SAAS,EAAC,qBAAqB;gBACnC,6BACC,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;oBAElC,8BACC,CAAC,EAAC,+UAA+U,EACjV,IAAI,EAAC,sBAAsB,GAC1B,CACG,CACD,CACN,CACwB,CACZ,CACf,CAAA;AACF,CAAC,CAAC,CAAA;AAG8B,sCAAa;AAF7C,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
package/dist/Drawer/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerTitle } from './Drawer';
1
+ export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerTitle, } from './Drawer';
package/dist/Tabs/Tabs.js CHANGED
@@ -7,8 +7,21 @@ 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 triggerClasses = `
12
+ flex-1 shrink-0
13
+ data-[state=active]:border-[--tab-border]
14
+ data-[state=active]:bg-[--tab-bg]
15
+ data-[state=active]:shadow-sm px-[8px]
16
+ data-[orientation=vertical]:basis-auto
17
+ data-[state=inactive]:text-dark
18
+ border border-transparent rounded-sm focus-visible:ring-2
19
+ focus-visible:ring-ring ring-offset-background focus-visible:ring-offset-2
20
+ h-[--tab-height] text-[12px] text-center truncate
21
+ leading-[1.16] whitespace-nowrap motion-reduce:hover:transform-none
22
+ transition-all motion-reduce:transition-none overflow-hidden
23
+ focus-visible:outline-none disabled:pointer-events-none`;
24
+ const TabsTrigger = react_1.default.forwardRef(({ className, ...props }, ref) => (react_1.default.createElement(TabsPrimitive.Trigger, { ref: ref, className: (0, classnames_1.default)(triggerClasses, className), ...props })));
12
25
  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
26
  Tabs.List = TabsList;
14
27
  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;AA8D7F,oBAAI;AA5Db,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,cAAc,GAAG;;;;;;;;;;;;yDAYkC,CAAA;AAEzD,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,EAAC,cAAc,EAAE,SAAS,CAAC,KACpC,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-38976a74",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
package/src/Drawer/Drawer.tsx CHANGED
@@ -3,11 +3,11 @@ import { Drawer as DrawerPrimitive } from 'vaul'
3
3
  import { cn } from '../@/lib/utils'
4
4
  import { useContext } from 'react'
5
5
 
6
- const DrawerContext = React.createContext('bottom')
6
+ const DrawerContext = React.createContext({direction: 'bottom', modal: false})
7
7
 
8
8
  const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
9
9
  return (
10
- <DrawerContext.Provider value={props.direction}>
10
+ <DrawerContext.Provider value={{direction: props.direction, modal: props.modal}}>
11
11
  <DrawerPrimitive.Root {...props} />
12
12
  </DrawerContext.Provider>
13
13
  )
@@ -40,10 +40,11 @@ const DrawerContent = React.forwardRef<
40
40
  React.ElementRef<typeof DrawerPrimitive.Content>,
41
41
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
42
42
  >(({ className, children, ...props }, ref) => {
43
- const direction = useContext(DrawerContext)
43
+ const {direction = 'bottom', modal = false} = useContext(DrawerContext)
44
44
 
45
45
  return (
46
46
  <DrawerPortal>
47
+ {modal && <DrawerOverlay className='z-50 fixed inset-0 bg-[--drawer-overlay-bg]' />}
47
48
  <DrawerPrimitive.Content
48
49
  ref={ref}
49
50
  className={cn(
@@ -54,15 +55,15 @@ const DrawerContent = React.forwardRef<
54
55
  {...props}
55
56
  >
56
57
  {direction !== 'top' && (
57
- <DrawerClose className="pt-[4px] pb-[16px]">
58
- <span className="block bg-[#cbcdd1] mx-auto rounded-full w-[36px] h-[5px]" />
59
- </DrawerClose>
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>
60
61
  )}
61
62
 
62
63
  {children}
63
64
 
64
65
  {direction === 'top' && (
65
- <DrawerClose className="pt-[24px] pb-[16px]">
66
+ <div className="pt-[24px] pb-[16px]">
66
67
  <svg
67
68
  className="mx-auto"
68
69
  width="38"
@@ -73,10 +74,10 @@ const DrawerContent = React.forwardRef<
73
74
  >
74
75
  <path
75
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"
76
- fill="#cbcdd1"
77
+ fill="var(--cl-graphite-5)"
77
78
  />
78
79
  </svg>
79
- </DrawerClose>
80
+ </div>
80
81
  )}
81
82
  </DrawerPrimitive.Content>
82
83
  </DrawerPortal>
package/src/Drawer/index.ts CHANGED
@@ -3,5 +3,5 @@ export {
3
3
  DrawerTrigger,
4
4
  DrawerClose,
5
5
  DrawerContent,
6
- DrawerTitle
6
+ DrawerTitle,
7
7
  } from './Drawer'
package/src/Tabs/Tabs.tsx CHANGED
@@ -18,23 +18,34 @@ 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}
25
25
  />
26
26
  ))
27
27
 
28
+ const triggerClasses = `
29
+ flex-1 shrink-0
30
+ data-[state=active]:border-[--tab-border]
31
+ data-[state=active]:bg-[--tab-bg]
32
+ data-[state=active]:shadow-sm px-[8px]
33
+ data-[orientation=vertical]:basis-auto
34
+ data-[state=inactive]:text-dark
35
+ border border-transparent rounded-sm focus-visible:ring-2
36
+ focus-visible:ring-ring ring-offset-background focus-visible:ring-offset-2
37
+ h-[--tab-height] text-[12px] text-center truncate
38
+ leading-[1.16] whitespace-nowrap motion-reduce:hover:transform-none
39
+ transition-all motion-reduce:transition-none overflow-hidden
40
+ focus-visible:outline-none disabled:pointer-events-none`
41
+
28
42
  const TabsTrigger = React.forwardRef<
29
43
  React.ElementRef<typeof TabsPrimitive.Trigger>,
30
44
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
31
45
  >(({ className, ...props }, ref) => (
32
46
  <TabsPrimitive.Trigger
33
47
  ref={ref}
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',
36
- className
37
- )}
48
+ className={cn(triggerClasses, className)}
38
49
  {...props}
39
50
  />
40
51
  ))
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