@modul/mbui 0.0.10-beta-pv-52970-e24498f8 → 0.0.10-beta-pv-52970-8bff8029

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.
@@ -6,18 +6,8 @@ declare const Drawer: {
6
6
  };
7
7
  declare const DrawerTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
8
8
  declare const DrawerClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
9
- declare type DrawerListProps = {
10
- children: React.ReactNode;
11
- };
12
- declare const DrawerList: React.FC<DrawerListProps>;
13
- declare type DrawerListItemProps = {
14
- value: string;
15
- label: string | JSX.Element;
16
- isActive?: boolean;
17
- onClick?: () => void;
18
- };
19
- declare const DrawerListItem: React.FC<DrawerListItemProps>;
9
+ declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
20
10
  declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
21
11
  onAnimationEnd?: (open: boolean) => void;
22
12
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
23
- export { Drawer, DrawerTrigger, DrawerContent, DrawerClose, DrawerList, DrawerListItem };
13
+ export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose };
@@ -0,0 +1,30 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.DrawerClose = exports.DrawerTitle = exports.DrawerContent = exports.DrawerTrigger = exports.Drawer = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const React = (0, tslib_1.__importStar)(require("react"));
6
+ const vaul_1 = require("vaul");
7
+ const utils_1 = require("../@/lib/utils");
8
+ const Drawer = ({ ...props }) => React.createElement(vaul_1.Drawer.Root, { ...props });
9
+ exports.Drawer = Drawer;
10
+ Drawer.displayName = 'Drawer';
11
+ const DrawerTrigger = vaul_1.Drawer.Trigger;
12
+ exports.DrawerTrigger = DrawerTrigger;
13
+ const DrawerPortal = vaul_1.Drawer.Portal;
14
+ const DrawerClose = vaul_1.Drawer.Close;
15
+ exports.DrawerClose = DrawerClose;
16
+ const DrawerOverlay = vaul_1.Drawer.Overlay;
17
+ const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (React.createElement(vaul_1.Drawer.Title, { ref: ref, className: (0, utils_1.cn)(className), ...props })));
18
+ exports.DrawerTitle = DrawerTitle;
19
+ DrawerTitle.displayName = vaul_1.Drawer.Title.displayName;
20
+ const DrawerFooter = () => (React.createElement(DrawerClose, { className: "p-[16px]" },
21
+ React.createElement("svg", { className: "mx-auto", width: "38", height: "10", viewBox: "0 0 38 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
22
+ 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: "#243036", fillOpacity: "0.24" }))));
23
+ const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => {
24
+ console.log("EF>", ref);
25
+ return (React.createElement(DrawerPortal, null,
26
+ React.createElement(vaul_1.Drawer.Content, { ref: ref, className: (0, utils_1.cn)('fixed flex inset-x-0 bottom-0 flex-col bg-page drop-shadow-1 rounded-t-1 z-50', className), ...props }, children)));
27
+ });
28
+ exports.DrawerContent = DrawerContent;
29
+ DrawerContent.displayName = 'DrawerContent';
30
+ //# sourceMappingURL=Drawer.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,+BAAgD;AAChD,0CAAmC;AAGnC,MAAM,MAAM,GAAG,CAAC,EAAE,GAAG,KAAK,EAAqD,EAAE,EAAE,CAAC,oBAAC,aAAe,CAAC,IAAI,OAAK,KAAK,GAAI,CAAA;AAmE9G,wBAAM;AAjEf,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,MAAM,aAAa,GAAG,aAAe,CAAC,OAAO,CAAA;AA+D5B,sCAAa;AA7D9B,MAAM,YAAY,GAAG,aAAe,CAAC,MAAM,CAAA;AAE3C,MAAM,WAAW,GAAG,aAAe,CAAC,KAAK,CAAA;AA2DmB,kCAAW;AAzDvE,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;AA8C6C,kCAAW;AA5C1D,WAAW,CAAC,WAAW,GAAG,aAAe,CAAC,KAAK,CAAC,WAAW,CAAA;AAE3D,MAAM,YAAY,GAAa,GAAG,EAAE,CAAC,CACpC,oBAAC,WAAW,IAAC,SAAS,EAAC,UAAU;IAChC,6BACC,SAAS,EAAC,SAAS,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B;QAElC,8BACC,CAAC,EAAC,+UAA+U,EACjV,IAAI,EAAC,SAAS,EACd,WAAW,EAAC,MAAM,GACjB,CACG,CACO,CACd,CAAA;AAED,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5C,OAAO,CAAC,GAAG,CAAC,KAAK,EAAC,GAAG,CAAC,CAAA;IACtB,OAAO,CACN,oBAAC,YAAY;QACZ,oBAAC,aAAe,CAAC,OAAO,IACvB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,UAAE,EACZ,+EAA+E,EAC/E,SAAS,CACT,KACG,KAAK,IAER,QAAQ,CACgB,CAEZ,CACf,CAAA;AACF,CAAC,CAAC,CAAA;AAG8B,sCAAa;AAF7C,aAAa,CAAC,WAAW,GAAG,eAAe,CAAA"}
@@ -1 +1 @@
1
- export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem } from './DashboardDrawer';
1
+ export { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerTitle } from './Drawer';
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.DrawerTitle = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = void 0;
4
+ var Drawer_1 = require("./Drawer");
5
+ Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_1.Drawer; } });
6
+ Object.defineProperty(exports, "DrawerTrigger", { enumerable: true, get: function () { return Drawer_1.DrawerTrigger; } });
7
+ Object.defineProperty(exports, "DrawerClose", { enumerable: true, get: function () { return Drawer_1.DrawerClose; } });
8
+ Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return Drawer_1.DrawerContent; } });
9
+ Object.defineProperty(exports, "DrawerTitle", { enumerable: true, get: function () { return Drawer_1.DrawerTitle; } });
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":";;;AAAA,mCAMmB;AALlB,gGAAA,MAAM,OAAA;AACN,uGAAA,aAAa,OAAA;AACb,qGAAA,WAAW,OAAA;AACX,uGAAA,aAAa,OAAA;AACb,qGAAA,WAAW,OAAA"}
@@ -0,0 +1,4 @@
1
+ import * as React from 'react';
2
+ declare const InputLabel: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>>;
3
+ declare const InputField: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
4
+ export { InputField, InputLabel };
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.InputLabel = exports.InputField = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const React = (0, tslib_1.__importStar)(require("react"));
6
+ const utils_1 = require("../@/lib/utils");
7
+ const InputLabel = React.forwardRef(({ className, children, ...props }) => {
8
+ return (React.createElement("label", { className: (0, utils_1.cn)('mb-[4px] font-medium text-[12px] text-light leading-[1.33] focus:text-primary focus-visible:text-primary', className), ...props }, children));
9
+ });
10
+ exports.InputLabel = InputLabel;
11
+ InputLabel.displayName = 'InputLabel';
12
+ const InputField = React.forwardRef(({ className, type, ...props }, ref) => {
13
+ return (React.createElement("input", { type: type, className: (0, utils_1.cn)('border-input file:border-0 bg-transparent font-normal file:bg-transparent disabled:opacity-50 border rounded-1 focus-visible:ring-1 focus-visible:ring-ring w-full h-[44px] file:font-medium file:text-sm placeholder:text-muted-foreground leading-[1.17] transition-colors focus-visible:outline-none disabled:cursor-not-allowed', className), ref: ref, ...props }));
14
+ });
15
+ exports.InputField = InputField;
16
+ InputField.displayName = 'InputField';
17
+ //# sourceMappingURL=Input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":";;;;AAAA,0DAA8B;AAC9B,0CAAmC;AAEnC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACrC,OAAO,CACN,+BACC,SAAS,EAAE,IAAA,UAAE,EAAC,0GAA0G,EAAE,SAAS,CAAC,KAChI,KAAK,IAER,QAAQ,CACF,CACR,CAAA;AACF,CAAC,CACD,CAAA;AAoBoB,gCAAU;AAlB/B,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA;AAErC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAgE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzI,OAAO,CACN,+BACC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,UAAE,EACZ,qUAAqU,EACrU,SAAS,CACT,EACD,GAAG,EAAE,GAAG,KACJ,KAAK,GACR,CACF,CAAA;AACF,CAAC,CAAC,CAAA;AAIO,gCAAU;AAFnB,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}
@@ -0,0 +1 @@
1
+ export { InputField, InputLabel } from './Input';
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.InputLabel = exports.InputField = void 0;
4
+ var Input_1 = require("./Input");
5
+ Object.defineProperty(exports, "InputField", { enumerable: true, get: function () { return Input_1.InputField; } });
6
+ Object.defineProperty(exports, "InputLabel", { enumerable: true, get: function () { return Input_1.InputLabel; } });
7
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Input/index.ts"],"names":[],"mappings":";;;AAAA,iCAAgD;AAAvC,mGAAA,UAAU,OAAA;AAAE,mGAAA,UAAU,OAAA"}
package/dist/index.d.ts CHANGED
@@ -12,8 +12,9 @@ import { Button } from "./Button";
12
12
  import { Input } from "./Base/Input";
13
13
  import { Audio } from "./Audio";
14
14
  import { cn } from "./@/lib/utils";
15
- import { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem } from './DashboardDrawer';
15
+ import { Drawer, DrawerTrigger, DrawerClose, DrawerContent } from './Drawer';
16
16
  import { Page } from "./Page";
17
17
  import { PageNavbar } from "./Page";
18
18
  import { Chip } from "./Chip";
19
- export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, Input, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerList, DrawerListItem, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, PageNavbar, Chip, };
19
+ import { InputField, InputLabel } from "./Input";
20
+ export { Tooltip, Tabs, Slider, Popover, Logo, InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, Collapsible, CollapsibleTrigger, CollapsibleContent, AccountCollapsible, AccountCollapsibleHeader, AccountCollapsibleTrigger, AccountCollapsibleContent, AccountCollapsibleContentItem, Button, Input, InputField, InputLabel, Audio, cn, Icon, Drawer, DrawerTrigger, DrawerClose, DrawerContent, BottomNavigation, BottomNavigationList, BottomNavigationListItem, BottomNavigationLink, Page, PageNavbar, Chip, };
package/dist/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.Chip = exports.PageNavbar = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerListItem = exports.DrawerList = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.Input = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = exports.Tooltip = void 0;
3
+ exports.Chip = exports.PageNavbar = exports.Page = exports.BottomNavigationLink = exports.BottomNavigationListItem = exports.BottomNavigationList = exports.BottomNavigation = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = exports.Icon = exports.cn = exports.Audio = exports.InputLabel = exports.InputField = exports.Input = exports.Button = exports.AccountCollapsibleContentItem = exports.AccountCollapsibleContent = exports.AccountCollapsibleTrigger = exports.AccountCollapsibleHeader = exports.AccountCollapsible = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.InputOTPSeparator = exports.InputOTPSlot = exports.InputOTPGroup = exports.InputOTP = exports.Logo = exports.Popover = exports.Slider = exports.Tabs = exports.Tooltip = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const Tooltip_1 = require("./Tooltip");
6
6
  Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
@@ -42,17 +42,18 @@ const Audio_1 = require("./Audio");
42
42
  Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return Audio_1.Audio; } });
43
43
  const utils_1 = require("./@/lib/utils");
44
44
  Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return utils_1.cn; } });
45
- const DashboardDrawer_1 = require("./DashboardDrawer");
46
- Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return DashboardDrawer_1.Drawer; } });
47
- Object.defineProperty(exports, "DrawerTrigger", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerTrigger; } });
48
- Object.defineProperty(exports, "DrawerClose", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerClose; } });
49
- Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerContent; } });
50
- Object.defineProperty(exports, "DrawerList", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerList; } });
51
- Object.defineProperty(exports, "DrawerListItem", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerListItem; } });
45
+ const Drawer_1 = require("./Drawer");
46
+ Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return Drawer_1.Drawer; } });
47
+ Object.defineProperty(exports, "DrawerTrigger", { enumerable: true, get: function () { return Drawer_1.DrawerTrigger; } });
48
+ Object.defineProperty(exports, "DrawerClose", { enumerable: true, get: function () { return Drawer_1.DrawerClose; } });
49
+ Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return Drawer_1.DrawerContent; } });
52
50
  const Page_1 = require("./Page");
53
51
  Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return Page_1.Page; } });
54
52
  const Page_2 = require("./Page");
55
53
  Object.defineProperty(exports, "PageNavbar", { enumerable: true, get: function () { return Page_2.PageNavbar; } });
56
54
  const Chip_1 = require("./Chip");
57
55
  Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return Chip_1.Chip; } });
56
+ const Input_2 = require("./Input");
57
+ Object.defineProperty(exports, "InputField", { enumerable: true, get: function () { return Input_2.InputField; } });
58
+ Object.defineProperty(exports, "InputLabel", { enumerable: true, get: function () { return Input_2.InputLabel; } });
58
59
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,uCAAoC;AA8CnC,wFA9CQ,iBAAO,OA8CR;AA7CR,iCAA8B;AA8C7B,qFA9CQ,WAAI,OA8CR;AA7CL,qCAAkC;AA8CjC,uFA9CQ,eAAM,OA8CR;AA7CP,uCAAoC;AA8CnC,wFA9CQ,iBAAO,OA8CR;AA7CR,+DAA0B;AA8CzB,eA9CM,cAAI,CA8CN;AA7CL,2CAIqB;AA0CpB,yFA9CQ,oBAAQ,OA8CR;AACR,8FA9CA,yBAAa,OA8CA;AACb,6FA9CA,wBAAY,OA8CA;AACZ,kGA9CA,6BAAiB,OA8CA;AA5ClB,yDAK4B;AA2D3B,iGA/DA,mCAAgB,OA+DA;AAChB,qGA/DA,uCAAoB,OA+DA;AACpB,yGA/DA,2CAAwB,OA+DA;AACxB,qGA/DA,uCAAoB,OA+DA;AA7DrB,0DAA+B;AAmD9B,oBAAI;AAlDL,+CAIuB;AAkCtB,4FArCA,yBAAW,OAqCA;AACX,mGArCA,gCAAkB,OAqCA;AAClB,mGArCA,gCAAkB,OAqCA;AAnCnB,+CAMuB;AA8BtB,mGAnCA,gCAAkB,OAmCA;AAClB,yGAnCA,sCAAwB,OAmCA;AACxB,0GAnCA,uCAAyB,OAmCA;AACzB,0GAnCA,uCAAyB,OAmCA;AACzB,8GAnCA,2CAA6B,OAmCA;AAjC9B,qCAAkC;AAkCjC,uFAlCQ,eAAM,OAkCR;AAjCP,wCAAqC;AAkCpC,sFAlCQ,aAAK,OAkCR;AAjCN,mCAAgC;AAkC/B,sFAlCQ,aAAK,OAkCR;AAjCN,yCAAmC;AAkClC,mFAlCQ,UAAE,OAkCR;AAjCH,uDAO0B;AA4BzB,uFAlCA,wBAAM,OAkCA;AACN,8FAlCA,+BAAa,OAkCA;AACb,4FAlCA,6BAAW,OAkCA;AACX,8FAlCA,+BAAa,OAkCA;AACb,2FAlCA,4BAAU,OAkCA;AACV,+FAlCA,gCAAc,OAkCA;AAhCf,iCAA8B;AAqC7B,qFArCQ,WAAI,OAqCR;AApCL,iCAAoC;AAqCnC,2FArCQ,iBAAU,OAqCR;AApCX,iCAA8B;AAqC7B,qFArCQ,WAAI,OAqCR"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,uCAAoC;AA6CnC,wFA7CQ,iBAAO,OA6CR;AA5CR,iCAA8B;AA6C7B,qFA7CQ,WAAI,OA6CR;AA5CL,qCAAkC;AA6CjC,uFA7CQ,eAAM,OA6CR;AA5CP,uCAAoC;AA6CnC,wFA7CQ,iBAAO,OA6CR;AA5CR,+DAA0B;AA6CzB,eA7CM,cAAI,CA6CN;AA5CL,2CAIqB;AAyCpB,yFA7CQ,oBAAQ,OA6CR;AACR,8FA7CA,yBAAa,OA6CA;AACb,6FA7CA,wBAAY,OA6CA;AACZ,kGA7CA,6BAAiB,OA6CA;AA3ClB,yDAK4B;AA0D3B,iGA9DA,mCAAgB,OA8DA;AAChB,qGA9DA,uCAAoB,OA8DA;AACpB,yGA9DA,2CAAwB,OA8DA;AACxB,qGA9DA,uCAAoB,OA8DA;AA5DrB,0DAA+B;AAoD9B,oBAAI;AAnDL,+CAIuB;AAiCtB,4FApCA,yBAAW,OAoCA;AACX,mGApCA,gCAAkB,OAoCA;AAClB,mGApCA,gCAAkB,OAoCA;AAlCnB,+CAMuB;AA6BtB,mGAlCA,gCAAkB,OAkCA;AAClB,yGAlCA,sCAAwB,OAkCA;AACxB,0GAlCA,uCAAyB,OAkCA;AACzB,0GAlCA,uCAAyB,OAkCA;AACzB,8GAlCA,2CAA6B,OAkCA;AAhC9B,qCAAkC;AAiCjC,uFAjCQ,eAAM,OAiCR;AAhCP,wCAAqC;AAiCpC,sFAjCQ,aAAK,OAiCR;AAhCN,mCAAgC;AAmC/B,sFAnCQ,aAAK,OAmCR;AAlCN,yCAAmC;AAmClC,mFAnCQ,UAAE,OAmCR;AAlCH,qCAKiB;AA+BhB,uFAnCA,eAAM,OAmCA;AACN,8FAnCA,sBAAa,OAmCA;AACb,4FAnCA,oBAAW,OAmCA;AACX,8FAnCA,sBAAa,OAmCA;AAjCd,iCAA8B;AAsC7B,qFAtCQ,WAAI,OAsCR;AArCL,iCAAoC;AAsCnC,2FAtCQ,iBAAU,OAsCR;AArCX,iCAA8B;AAsC7B,qFAtCQ,WAAI,OAsCR;AArCL,mCAAiD;AAsBhD,2FAtBQ,kBAAU,OAsBR;AACV,2FAvBoB,kBAAU,OAuBpB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@modul/mbui",
3
- "version": "0.0.10-beta-pv-52970-e24498f8",
3
+ "version": "0.0.10-beta-pv-52970-8bff8029",
4
4
  "packageManager": "yarn@3.5.1",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react'
2
2
  import { Drawer as DrawerPrimitive } from 'vaul'
3
3
  import { cn } from '../@/lib/utils'
4
+ import { useContext } from 'react';
4
5
 
5
6
  const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
6
7
 
@@ -12,6 +13,8 @@ const DrawerPortal = DrawerPrimitive.Portal
12
13
 
13
14
  const DrawerClose = DrawerPrimitive.Close
14
15
 
16
+ const DrawerOverlay = DrawerPrimitive.Overlay
17
+
15
18
  const DrawerTitle = React.forwardRef<
16
19
  React.ElementRef<typeof DrawerPrimitive.Title>,
17
20
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
@@ -22,6 +25,7 @@ const DrawerTitle = React.forwardRef<
22
25
  {...props}
23
26
  />
24
27
  ))
28
+
25
29
  DrawerTitle.displayName = DrawerPrimitive.Title.displayName
26
30
 
27
31
  const DrawerFooter: React.FC = () => (
@@ -42,67 +46,28 @@ const DrawerFooter: React.FC = () => (
42
46
  </svg>
43
47
  </DrawerClose>
44
48
  )
45
- type DrawerListProps = {
46
- children: React.ReactNode
47
- }
48
- const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
49
- return (
50
- <div
51
- role="listbox"
52
- className="px-[20px]"
53
- >
54
- {children}
55
- </div>
56
- )
57
- }
58
- type DrawerListItemProps = {
59
- value: string
60
- label: string | JSX.Element
61
- isSelected?: boolean,
62
- }
63
- const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isSelected }) => {
64
- return (
65
- <div
66
- role="option"
67
- aria-labelledby="1"
68
- aria-selected={isSelected}
69
- className="flex"
70
- tabIndex={0}
71
- >
72
- <div className="shrink-0">
73
- <p
74
- className="font-medium text-[14px] text-muted leading-[1.4]"
75
- id="1"
76
- >
77
- {label}
78
- </p>
79
- <p className="font-bold text-[20px] leading-[1.2]">{value}</p>
80
- </div>
81
- {isSelected && <span></span>}
82
- </div>
83
- )
84
- }
85
49
 
86
50
  const DrawerContent = React.forwardRef<
87
51
  React.ElementRef<typeof DrawerPrimitive.Content>,
88
52
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
89
- >(({ className, children, ...props }, ref) => (
90
- <DrawerPortal>
91
- <DrawerPrimitive.Content
92
- ref={ref}
93
- className={cn(
94
- 'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
95
- className
96
- )}
97
-
98
- {...props}
99
- >
100
- <DrawerTitle className="sr-only">Выбор компании</DrawerTitle>
101
- {children}
102
- <DrawerFooter />
103
- </DrawerPrimitive.Content>
104
- </DrawerPortal>
105
- ))
53
+ >(({ className, children, ...props }, ref) => {
54
+ console.log("EF>",ref)
55
+ return (
56
+ <DrawerPortal>
57
+ <DrawerPrimitive.Content
58
+ ref={ref}
59
+ className={cn(
60
+ 'fixed flex inset-x-0 bottom-0 flex-col bg-page drop-shadow-1 rounded-t-1 z-50',
61
+ className
62
+ )}
63
+ {...props}
64
+ >
65
+ {children}
66
+ </DrawerPrimitive.Content>
67
+ {/* <DrawerOverlay className='fixed inset-0 bg-[#000]/70'/> */}
68
+ </DrawerPortal>
69
+ )
70
+ })
106
71
  DrawerContent.displayName = 'DrawerContent'
107
72
 
108
- export { Drawer, DrawerTrigger, DrawerContent, DrawerClose, DrawerList, DrawerListItem }
73
+ export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerClose }
@@ -3,6 +3,5 @@ export {
3
3
  DrawerTrigger,
4
4
  DrawerClose,
5
5
  DrawerContent,
6
- DrawerList,
7
- DrawerListItem
8
- } from './DashboardDrawer'
6
+ DrawerTitle
7
+ } from './Drawer'
@@ -0,0 +1,63 @@
1
+ import React from 'react'
2
+
3
+
4
+ type DrawerListProps = {
5
+ children: React.ReactNode
6
+ }
7
+
8
+ const CompanyList: React.FC<DrawerListProps> = ({ children }) => {
9
+ return (
10
+ <div
11
+ role="list"
12
+ className="px-[20px] divide-y"
13
+ >
14
+ {children}
15
+ </div>
16
+ )
17
+ }
18
+
19
+ type DrawerListItemProps = {
20
+ value: string
21
+ label: string | JSX.Element
22
+ isActive?: boolean
23
+ onClick?: () => void
24
+ }
25
+ const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isActive, onClick }) => {
26
+ return (
27
+ <button
28
+ className="flex py-[16px] w-full text-left"
29
+ role="listitem"
30
+ aria-selected={isActive}
31
+ aria-labelledby="1"
32
+ onClick={onClick}
33
+ >
34
+ <span className="w-[calc(100%-50px)]">
35
+ <span
36
+ className="flex [&+span]:mt-[4px] font-medium text-[14px] text-muted leading-[1.28]"
37
+ id="1"
38
+ >
39
+ <span className="[&+span]:ml-[8px] truncate">{label}</span>
40
+
41
+ <span className="inline-flex bg-[#EE7C2D] px-[4px] rounded-full h-[16px] text-[#fff] text-[12px] truncate leading-[16px] shrink-0">
42
+ 23
43
+ </span>
44
+ </span>
45
+ <span className="block font-bold text-[20px] leading-[1.2]">{value}</span>
46
+ </span>
47
+ {isActive && (
48
+ <Check
49
+ width={16}
50
+ height={16}
51
+ className="ml-auto text-primary self-center"
52
+ />
53
+ )}
54
+ </button>
55
+ )
56
+ }
57
+
58
+ export { CompanyList }
59
+
60
+
61
+ <DrawerTitle className="sr-only">Выбор компании</DrawerTitle>
62
+ {children}
63
+ <DrawerFooter />
@@ -0,0 +1 @@
1
+ export { CompanyList } from './CompanyList'
package/src/index.ts CHANGED
@@ -35,13 +35,12 @@ import {
35
35
  Drawer,
36
36
  DrawerTrigger,
37
37
  DrawerClose,
38
- DrawerContent,
39
- DrawerList,
40
- DrawerListItem
41
- } from './DashboardDrawer'
38
+ DrawerContent
39
+ } from './Drawer'
42
40
  import { Page } from "./Page";
43
41
  import { PageNavbar } from "./Page";
44
42
  import { Chip } from "./Chip";
43
+ import { InputField, InputLabel } from "./Input";
45
44
 
46
45
  export {
47
46
  Tooltip,
@@ -63,6 +62,8 @@ export {
63
62
  AccountCollapsibleContentItem,
64
63
  Button,
65
64
  Input,
65
+ InputField,
66
+ InputLabel,
66
67
  Audio,
67
68
  cn,
68
69
  Icon,
@@ -70,8 +71,6 @@ export {
70
71
  DrawerTrigger,
71
72
  DrawerClose,
72
73
  DrawerContent,
73
- DrawerList,
74
- DrawerListItem,
75
74
  BottomNavigation,
76
75
  BottomNavigationList,
77
76
  BottomNavigationListItem,
@@ -1,43 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DrawerListItem = exports.DrawerList = exports.DrawerClose = exports.DrawerContent = exports.DrawerTrigger = exports.Drawer = void 0;
4
- const tslib_1 = require("tslib");
5
- const React = (0, tslib_1.__importStar)(require("react"));
6
- const vaul_1 = require("vaul");
7
- const Icon_1 = require("../Icon");
8
- const utils_1 = require("../@/lib/utils");
9
- const Drawer = ({ ...props }) => React.createElement(vaul_1.Drawer.Root, { ...props });
10
- exports.Drawer = Drawer;
11
- Drawer.displayName = 'Drawer';
12
- const DrawerTrigger = vaul_1.Drawer.Trigger;
13
- exports.DrawerTrigger = DrawerTrigger;
14
- const DrawerPortal = vaul_1.Drawer.Portal;
15
- const DrawerClose = vaul_1.Drawer.Close;
16
- exports.DrawerClose = DrawerClose;
17
- const DrawerTitle = React.forwardRef(({ className, ...props }, ref) => (React.createElement(vaul_1.Drawer.Title, { ref: ref, className: (0, utils_1.cn)(className), ...props })));
18
- DrawerTitle.displayName = vaul_1.Drawer.Title.displayName;
19
- const DrawerFooter = () => (React.createElement(DrawerClose, { className: "p-[16px]" },
20
- React.createElement("svg", { className: "mx-auto", width: "38", height: "10", viewBox: "0 0 38 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
21
- 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: "#243036", fillOpacity: "0.24" }))));
22
- const DrawerList = ({ children }) => {
23
- return (React.createElement("div", { role: "list", className: "px-[20px] divide-y" }, children));
24
- };
25
- exports.DrawerList = DrawerList;
26
- const DrawerListItem = ({ label, value, isActive, onClick }) => {
27
- return (React.createElement("button", { className: "flex py-[16px] w-full text-left", role: "listitem", "aria-selected": isActive, "aria-labelledby": "1", onClick: onClick },
28
- React.createElement("span", { className: "w-[calc(100%-50px)]" },
29
- React.createElement("span", { className: "flex [&+span]:mt-[4px] font-medium text-[14px] text-muted leading-[1.28]", id: "1" },
30
- React.createElement("span", { className: "[&+span]:ml-[8px] truncate" }, label),
31
- React.createElement("span", { className: "inline-flex bg-[#EE7C2D] px-[4px] rounded-full h-[16px] text-[#fff] text-[12px] truncate leading-[16px] shrink-0" }, "23")),
32
- React.createElement("span", { className: "block font-bold text-[20px] leading-[1.2]" }, value)),
33
- isActive && (React.createElement(Icon_1.Check, { width: 16, height: 16, className: "ml-auto text-primary self-center" }))));
34
- };
35
- exports.DrawerListItem = DrawerListItem;
36
- const DrawerContent = React.forwardRef(({ className, children, ...props }, ref) => (React.createElement(DrawerPortal, null,
37
- React.createElement(vaul_1.Drawer.Content, { ref: ref, className: (0, utils_1.cn)('fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px', className), ...props },
38
- React.createElement(DrawerTitle, { className: "sr-only" }, "\u0412\u044B\u0431\u043E\u0440 \u043A\u043E\u043C\u043F\u0430\u043D\u0438\u0438"),
39
- children,
40
- React.createElement(DrawerFooter, null)))));
41
- exports.DrawerContent = DrawerContent;
42
- DrawerContent.displayName = 'DrawerContent';
43
- //# sourceMappingURL=DashboardDrawer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DashboardDrawer.js","sourceRoot":"","sources":["../../src/DashboardDrawer/DashboardDrawer.tsx"],"names":[],"mappings":"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"}
@@ -1,11 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DrawerListItem = exports.DrawerList = exports.DrawerContent = exports.DrawerClose = exports.DrawerTrigger = exports.Drawer = void 0;
4
- var DashboardDrawer_1 = require("./DashboardDrawer");
5
- Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return DashboardDrawer_1.Drawer; } });
6
- Object.defineProperty(exports, "DrawerTrigger", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerTrigger; } });
7
- Object.defineProperty(exports, "DrawerClose", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerClose; } });
8
- Object.defineProperty(exports, "DrawerContent", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerContent; } });
9
- Object.defineProperty(exports, "DrawerList", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerList; } });
10
- Object.defineProperty(exports, "DrawerListItem", { enumerable: true, get: function () { return DashboardDrawer_1.DrawerListItem; } });
11
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/DashboardDrawer/index.ts"],"names":[],"mappings":";;;AAAA,qDAO4B;AAN3B,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA;AACb,8GAAA,WAAW,OAAA;AACX,gHAAA,aAAa,OAAA;AACb,6GAAA,UAAU,OAAA;AACV,iHAAA,cAAc,OAAA"}
@@ -1,119 +0,0 @@
1
- import * as React from 'react'
2
- import { Drawer as DrawerPrimitive } from 'vaul'
3
- import { Check } from '../Icon'
4
- import { cn } from '../@/lib/utils'
5
-
6
- const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
7
-
8
- Drawer.displayName = 'Drawer'
9
-
10
- const DrawerTrigger = DrawerPrimitive.Trigger
11
-
12
- const DrawerPortal = DrawerPrimitive.Portal
13
-
14
- const DrawerClose = DrawerPrimitive.Close
15
-
16
- const DrawerTitle = React.forwardRef<
17
- React.ElementRef<typeof DrawerPrimitive.Title>,
18
- React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
19
- >(({ className, ...props }, ref) => (
20
- <DrawerPrimitive.Title
21
- ref={ref}
22
- className={cn(className)}
23
- {...props}
24
- />
25
- ))
26
- DrawerTitle.displayName = DrawerPrimitive.Title.displayName
27
-
28
- const DrawerFooter: React.FC = () => (
29
- <DrawerClose className="p-[16px]">
30
- <svg
31
- className="mx-auto"
32
- width="38"
33
- height="10"
34
- viewBox="0 0 38 10"
35
- fill="none"
36
- xmlns="http://www.w3.org/2000/svg"
37
- >
38
- <path
39
- 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"
40
- fill="#243036"
41
- fillOpacity="0.24"
42
- />
43
- </svg>
44
- </DrawerClose>
45
- )
46
- type DrawerListProps = {
47
- children: React.ReactNode
48
- }
49
- const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
50
- return (
51
- <div
52
- role="list"
53
- className="px-[20px] divide-y"
54
- >
55
- {children}
56
- </div>
57
- )
58
- }
59
- type DrawerListItemProps = {
60
- value: string
61
- label: string | JSX.Element
62
- isActive?: boolean
63
- onClick?: () => void
64
- }
65
- const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isActive, onClick }) => {
66
- return (
67
- <button
68
- className="flex py-[16px] w-full text-left"
69
- role="listitem"
70
- aria-selected={isActive}
71
- aria-labelledby="1"
72
- onClick={onClick}
73
- >
74
- <span className="w-[calc(100%-50px)]">
75
- <span
76
- className="flex [&+span]:mt-[4px] font-medium text-[14px] text-muted leading-[1.28]"
77
- id="1"
78
- >
79
- <span className="[&+span]:ml-[8px] truncate">{label}</span>
80
-
81
- <span className="inline-flex bg-[#EE7C2D] px-[4px] rounded-full h-[16px] text-[#fff] text-[12px] truncate leading-[16px] shrink-0">
82
- 23
83
- </span>
84
- </span>
85
- <span className="block font-bold text-[20px] leading-[1.2]">{value}</span>
86
- </span>
87
- {isActive && (
88
- <Check
89
- width={16}
90
- height={16}
91
- className="ml-auto text-primary self-center"
92
- />
93
- )}
94
- </button>
95
- )
96
- }
97
-
98
- const DrawerContent = React.forwardRef<
99
- React.ElementRef<typeof DrawerPrimitive.Content>,
100
- React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
101
- >(({ className, children, ...props }, ref) => (
102
- <DrawerPortal>
103
- <DrawerPrimitive.Content
104
- ref={ref}
105
- className={cn(
106
- 'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
107
- className
108
- )}
109
- {...props}
110
- >
111
- <DrawerTitle className="sr-only">Выбор компании</DrawerTitle>
112
- {children}
113
- <DrawerFooter />
114
- </DrawerPrimitive.Content>
115
- </DrawerPortal>
116
- ))
117
- DrawerContent.displayName = 'DrawerContent'
118
-
119
- export { Drawer, DrawerTrigger, DrawerContent, DrawerClose, DrawerList, DrawerListItem }
@@ -1,108 +0,0 @@
1
- import * as React from 'react'
2
- import { Drawer as DrawerPrimitive } from 'vaul'
3
- import { cn } from '../@/lib/utils'
4
-
5
- const Drawer = ({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => <DrawerPrimitive.Root {...props} />
6
-
7
- Drawer.displayName = 'Drawer'
8
-
9
- const DrawerTrigger = DrawerPrimitive.Trigger
10
-
11
- const DrawerPortal = DrawerPrimitive.Portal
12
-
13
- const DrawerClose = DrawerPrimitive.Close
14
-
15
- const DrawerTitle = React.forwardRef<
16
- React.ElementRef<typeof DrawerPrimitive.Title>,
17
- React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
18
- >(({ className, ...props }, ref) => (
19
- <DrawerPrimitive.Title
20
- ref={ref}
21
- className={cn(className)}
22
- {...props}
23
- />
24
- ))
25
- DrawerTitle.displayName = DrawerPrimitive.Title.displayName
26
-
27
- const DrawerFooter: React.FC = () => (
28
- <DrawerClose className="p-[16px]">
29
- <svg
30
- className="mx-auto"
31
- width="38"
32
- height="10"
33
- viewBox="0 0 38 10"
34
- fill="none"
35
- xmlns="http://www.w3.org/2000/svg"
36
- >
37
- <path
38
- 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"
39
- fill="#243036"
40
- fillOpacity="0.24"
41
- />
42
- </svg>
43
- </DrawerClose>
44
- )
45
- type DrawerListProps = {
46
- children: React.ReactNode
47
- }
48
- const DrawerList: React.FC<DrawerListProps> = ({ children }) => {
49
- return (
50
- <div
51
- role="listbox"
52
- className="px-[20px]"
53
- >
54
- {children}
55
- </div>
56
- )
57
- }
58
- type DrawerListItemProps = {
59
- value: string
60
- label: string | JSX.Element
61
- isSelected?: boolean,
62
- }
63
- const DrawerListItem: React.FC<DrawerListItemProps> = ({ label, value, isSelected }) => {
64
- return (
65
- <div
66
- role="option"
67
- aria-labelledby="1"
68
- aria-selected={isSelected}
69
- className="flex"
70
- tabIndex={0}
71
- >
72
- <div className="shrink-0">
73
- <p
74
- className="font-medium text-[14px] text-muted leading-[1.4]"
75
- id="1"
76
- >
77
- {label}
78
- </p>
79
- <p className="font-bold text-[20px] leading-[1.2]">{value}</p>
80
- </div>
81
- {isSelected && <span></span>}
82
- </div>
83
- )
84
- }
85
-
86
- const DrawerContent = React.forwardRef<
87
- React.ElementRef<typeof DrawerPrimitive.Content>,
88
- React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
89
- >(({ className, children, ...props }, ref) => (
90
- <DrawerPortal>
91
- <DrawerPrimitive.Content
92
- ref={ref}
93
- className={cn(
94
- 'fixed inset-x-0 top-0 flex h-auto flex-col bg-page drop-shadow-1 rounded-[8px] #24303614; 0px 0px 16px 4px',
95
- className
96
- )}
97
-
98
- {...props}
99
- >
100
- <DrawerTitle className="sr-only">Выбор компании</DrawerTitle>
101
- {children}
102
- <DrawerFooter />
103
- </DrawerPrimitive.Content>
104
- </DrawerPortal>
105
- ))
106
- DrawerContent.displayName = 'DrawerContent'
107
-
108
- export { Drawer, DrawerTrigger, DrawerContent, DrawerClose, DrawerList, DrawerListItem }