mogh_ui 0.2.0 → 0.2.1
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.
- package/dist/components/tabbed-page.cjs +3 -1
- package/dist/components/tabbed-page.cjs.map +1 -1
- package/dist/components/tabbed-page.d.cts +4 -3
- package/dist/components/tabbed-page.d.ts +4 -3
- package/dist/components/tabbed-page.js +9 -2
- package/dist/components/tabbed-page.js.map +1 -1
- package/package.json +1 -1
|
@@ -28,7 +28,8 @@ var import_page = require("./page");
|
|
|
28
28
|
var import_lucide_react = require("lucide-react");
|
|
29
29
|
function TabbedPage({
|
|
30
30
|
storageKey,
|
|
31
|
-
tabs
|
|
31
|
+
tabs,
|
|
32
|
+
...tabsProps
|
|
32
33
|
}) {
|
|
33
34
|
const defaultTab = tabs[0]?.tab;
|
|
34
35
|
const [selectedTab, setSelectedTab] = (0, import_hooks.useLocalStorage)({
|
|
@@ -41,6 +42,7 @@ function TabbedPage({
|
|
|
41
42
|
{
|
|
42
43
|
value: selectedTab,
|
|
43
44
|
onChange: (tab) => setSelectedTab(tab ?? defaultTab),
|
|
45
|
+
...tabsProps,
|
|
44
46
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
45
47
|
import_page.Page,
|
|
46
48
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/tabbed-page.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/components/tabbed-page.tsx"],"sourcesContent":["import {\n Center,\n DefaultMantineColor,\n Group,\n Tabs,\n TabsProps,\n Text,\n} from \"@mantine/core\";\nimport { useLocalStorage } from \"@mantine/hooks\";\nimport { FC } from \"react\";\nimport { Page } from \"./page\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport type TabbedPageItem<Tab extends string> = {\n tab: Tab;\n icon?: FC<{ size?: string | number }>;\n content?: FC;\n};\n\nexport interface TabbedPageProps<Tab extends string> extends TabsProps {\n /** Store current tab on localStorage */\n storageKey: string;\n tabs: TabbedPageItem<Tab>[];\n}\n\nexport function TabbedPage<Tab extends string>({\n storageKey,\n tabs,\n ...tabsProps\n}: TabbedPageProps<Tab>) {\n const defaultTab = tabs[0]?.tab;\n const [selectedTab, setSelectedTab] = useLocalStorage<Tab>({\n key: storageKey,\n defaultValue: defaultTab,\n });\n const Content =\n tabs.find((tab) => tab.tab === selectedTab)?.content ??\n (() => (\n <Center>\n <CircleQuestionMark size={22} />\n </Center>\n ));\n return (\n <Tabs\n value={selectedTab}\n onChange={(tab) => setSelectedTab((tab as Tab) ?? defaultTab)}\n {...tabsProps}\n >\n <Page\n customTitle={\n <Tabs.List>\n {tabs.map(({ tab, icon }) => {\n const Icon = icon ?? CircleQuestionMark;\n return (\n <Tabs.Tab key={tab} value={tab}>\n <Group opacity={tab === selectedTab ? 1 : 0.6}>\n <Icon size={20} />\n <Text fz=\"h3\">{tab}</Text>\n </Group>\n </Tabs.Tab>\n );\n })}\n </Tabs.List>\n }\n >\n <Content />\n </Page>\n </Tabs>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCQ;AAvCR,kBAOO;AACP,mBAAgC;AAEhC,kBAAqB;AACrB,0BAAmC;AAc5B,SAAS,WAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,aAAa,KAAK,CAAC,GAAG;AAC5B,QAAM,CAAC,aAAa,cAAc,QAAI,8BAAqB;AAAA,IACzD,KAAK;AAAA,IACL,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,UACJ,KAAK,KAAK,CAAC,QAAQ,IAAI,QAAQ,WAAW,GAAG,YAC5C,MACC,4CAAC,sBACC,sDAAC,0CAAmB,MAAM,IAAI,GAChC;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU,CAAC,QAAQ,eAAgB,OAAe,UAAU;AAAA,MAC3D,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aACE,4CAAC,iBAAK,MAAL,EACE,eAAK,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;AAC3B,kBAAM,OAAO,QAAQ;AACrB,mBACE,4CAAC,iBAAK,KAAL,EAAmB,OAAO,KACzB,uDAAC,qBAAM,SAAS,QAAQ,cAAc,IAAI,KACxC;AAAA,0DAAC,QAAK,MAAM,IAAI;AAAA,cAChB,4CAAC,oBAAK,IAAG,MAAM,eAAI;AAAA,eACrB,KAJa,GAKf;AAAA,UAEJ,CAAC,GACH;AAAA,UAGF,sDAAC,WAAQ;AAAA;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { TabsProps } from '@mantine/core';
|
|
2
3
|
import { FC } from 'react';
|
|
3
4
|
|
|
4
5
|
type TabbedPageItem<Tab extends string> = {
|
|
@@ -8,11 +9,11 @@ type TabbedPageItem<Tab extends string> = {
|
|
|
8
9
|
}>;
|
|
9
10
|
content?: FC;
|
|
10
11
|
};
|
|
11
|
-
|
|
12
|
+
interface TabbedPageProps<Tab extends string> extends TabsProps {
|
|
12
13
|
/** Store current tab on localStorage */
|
|
13
14
|
storageKey: string;
|
|
14
15
|
tabs: TabbedPageItem<Tab>[];
|
|
15
|
-
}
|
|
16
|
-
declare function TabbedPage<Tab extends string>({ storageKey, tabs, }: TabbedPageProps<Tab>): react_jsx_runtime.JSX.Element;
|
|
16
|
+
}
|
|
17
|
+
declare function TabbedPage<Tab extends string>({ storageKey, tabs, ...tabsProps }: TabbedPageProps<Tab>): react_jsx_runtime.JSX.Element;
|
|
17
18
|
|
|
18
19
|
export { TabbedPage, type TabbedPageItem, type TabbedPageProps };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { TabsProps } from '@mantine/core';
|
|
2
3
|
import { FC } from 'react';
|
|
3
4
|
|
|
4
5
|
type TabbedPageItem<Tab extends string> = {
|
|
@@ -8,11 +9,11 @@ type TabbedPageItem<Tab extends string> = {
|
|
|
8
9
|
}>;
|
|
9
10
|
content?: FC;
|
|
10
11
|
};
|
|
11
|
-
|
|
12
|
+
interface TabbedPageProps<Tab extends string> extends TabsProps {
|
|
12
13
|
/** Store current tab on localStorage */
|
|
13
14
|
storageKey: string;
|
|
14
15
|
tabs: TabbedPageItem<Tab>[];
|
|
15
|
-
}
|
|
16
|
-
declare function TabbedPage<Tab extends string>({ storageKey, tabs, }: TabbedPageProps<Tab>): react_jsx_runtime.JSX.Element;
|
|
16
|
+
}
|
|
17
|
+
declare function TabbedPage<Tab extends string>({ storageKey, tabs, ...tabsProps }: TabbedPageProps<Tab>): react_jsx_runtime.JSX.Element;
|
|
17
18
|
|
|
18
19
|
export { TabbedPage, type TabbedPageItem, type TabbedPageProps };
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Center,
|
|
4
|
+
Group,
|
|
5
|
+
Tabs,
|
|
6
|
+
Text
|
|
7
|
+
} from "@mantine/core";
|
|
3
8
|
import { useLocalStorage } from "@mantine/hooks";
|
|
4
9
|
import { Page } from "./page";
|
|
5
10
|
import { CircleQuestionMark } from "lucide-react";
|
|
6
11
|
function TabbedPage({
|
|
7
12
|
storageKey,
|
|
8
|
-
tabs
|
|
13
|
+
tabs,
|
|
14
|
+
...tabsProps
|
|
9
15
|
}) {
|
|
10
16
|
const defaultTab = tabs[0]?.tab;
|
|
11
17
|
const [selectedTab, setSelectedTab] = useLocalStorage({
|
|
@@ -18,6 +24,7 @@ function TabbedPage({
|
|
|
18
24
|
{
|
|
19
25
|
value: selectedTab,
|
|
20
26
|
onChange: (tab) => setSelectedTab(tab ?? defaultTab),
|
|
27
|
+
...tabsProps,
|
|
21
28
|
children: /* @__PURE__ */ jsx(
|
|
22
29
|
Page,
|
|
23
30
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/tabbed-page.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["../../src/components/tabbed-page.tsx"],"sourcesContent":["import {\n Center,\n DefaultMantineColor,\n Group,\n Tabs,\n TabsProps,\n Text,\n} from \"@mantine/core\";\nimport { useLocalStorage } from \"@mantine/hooks\";\nimport { FC } from \"react\";\nimport { Page } from \"./page\";\nimport { CircleQuestionMark } from \"lucide-react\";\n\nexport type TabbedPageItem<Tab extends string> = {\n tab: Tab;\n icon?: FC<{ size?: string | number }>;\n content?: FC;\n};\n\nexport interface TabbedPageProps<Tab extends string> extends TabsProps {\n /** Store current tab on localStorage */\n storageKey: string;\n tabs: TabbedPageItem<Tab>[];\n}\n\nexport function TabbedPage<Tab extends string>({\n storageKey,\n tabs,\n ...tabsProps\n}: TabbedPageProps<Tab>) {\n const defaultTab = tabs[0]?.tab;\n const [selectedTab, setSelectedTab] = useLocalStorage<Tab>({\n key: storageKey,\n defaultValue: defaultTab,\n });\n const Content =\n tabs.find((tab) => tab.tab === selectedTab)?.content ??\n (() => (\n <Center>\n <CircleQuestionMark size={22} />\n </Center>\n ));\n return (\n <Tabs\n value={selectedTab}\n onChange={(tab) => setSelectedTab((tab as Tab) ?? defaultTab)}\n {...tabsProps}\n >\n <Page\n customTitle={\n <Tabs.List>\n {tabs.map(({ tab, icon }) => {\n const Icon = icon ?? CircleQuestionMark;\n return (\n <Tabs.Tab key={tab} value={tab}>\n <Group opacity={tab === selectedTab ? 1 : 0.6}>\n <Icon size={20} />\n <Text fz=\"h3\">{tab}</Text>\n </Group>\n </Tabs.Tab>\n );\n })}\n </Tabs.List>\n }\n >\n <Content />\n </Page>\n </Tabs>\n );\n}\n"],"mappings":"AAuCQ,cAgBU,YAhBV;AAvCR;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,uBAAuB;AAEhC,SAAS,YAAY;AACrB,SAAS,0BAA0B;AAc5B,SAAS,WAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,aAAa,KAAK,CAAC,GAAG;AAC5B,QAAM,CAAC,aAAa,cAAc,IAAI,gBAAqB;AAAA,IACzD,KAAK;AAAA,IACL,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,UACJ,KAAK,KAAK,CAAC,QAAQ,IAAI,QAAQ,WAAW,GAAG,YAC5C,MACC,oBAAC,UACC,8BAAC,sBAAmB,MAAM,IAAI,GAChC;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,UAAU,CAAC,QAAQ,eAAgB,OAAe,UAAU;AAAA,MAC3D,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,aACE,oBAAC,KAAK,MAAL,EACE,eAAK,IAAI,CAAC,EAAE,KAAK,KAAK,MAAM;AAC3B,kBAAM,OAAO,QAAQ;AACrB,mBACE,oBAAC,KAAK,KAAL,EAAmB,OAAO,KACzB,+BAAC,SAAM,SAAS,QAAQ,cAAc,IAAI,KACxC;AAAA,kCAAC,QAAK,MAAM,IAAI;AAAA,cAChB,oBAAC,QAAK,IAAG,MAAM,eAAI;AAAA,eACrB,KAJa,GAKf;AAAA,UAEJ,CAAC,GACH;AAAA,UAGF,8BAAC,WAAQ;AAAA;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;","names":[]}
|