@modul/mbui 0.0.15-beta-pv-53129-4f920e60 → 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 (9) 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 +14 -1
  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 +15 -4
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
@@ -8,7 +8,20 @@ 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
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 })));
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,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"}
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.15-beta-pv-53129-4f920e60",
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
@@ -25,16 +25,27 @@ const TabsList = React.forwardRef<
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
- '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
- className
37
- )}
48
+ className={cn(triggerClasses, className)}
38
49
  {...props}
39
50
  />
40
51
  ))