@atipicus/mrs-ui 1.1.0 → 2.0.2
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/LICENSE +63 -3
- package/README.md +15 -3
- package/dist/Table-BWJUQgDY.js.map +1 -1
- package/dist/Table-BrEk_oGh.mjs.map +1 -1
- package/dist/components/atoms/Avatar/Avatar.d.ts.map +1 -1
- package/dist/components/atoms/Avatar/Avatar.types.d.ts +1 -1
- package/dist/components/atoms/Avatar/Avatar.types.d.ts.map +1 -1
- package/dist/components/atoms/Select/Select.d.ts.map +1 -1
- package/dist/components/molecules/Sidenav/Sidenav.d.ts.map +1 -1
- package/dist/index-9xINu3Y6.mjs +11 -0
- package/dist/index-9xINu3Y6.mjs.map +1 -0
- package/dist/{index-C4a5SkEO.js → index-B3fSNHE_.js} +1 -2
- package/dist/index-B3fSNHE_.js.map +1 -0
- package/dist/{index-DgpKiomn.js → index-B6HAPXbT.js} +1 -2
- package/dist/index-B6HAPXbT.js.map +1 -0
- package/dist/{index-DQLiGYRv.js → index-CrukcVHf.js} +1 -2
- package/dist/index-CrukcVHf.js.map +1 -0
- package/dist/index-CzgRXVhq.mjs +5 -0
- package/dist/index-CzgRXVhq.mjs.map +1 -0
- package/dist/{index-Bp_39Kmf.js → index-D19iZMBT.js} +1 -2
- package/dist/index-D19iZMBT.js.map +1 -0
- package/dist/{index-xewrdUFS.js → index-D2dZ1ELl.js} +1 -2
- package/dist/index-D2dZ1ELl.js.map +1 -0
- package/dist/index-DpuDQuvl.mjs +5 -0
- package/dist/index-DpuDQuvl.mjs.map +1 -0
- package/dist/index-DzuUedva.mjs +5 -0
- package/dist/index-DzuUedva.mjs.map +1 -0
- package/dist/{index-C4N6hqG7.mjs → index-MEnqUL_H.mjs} +8 -5
- package/dist/index-MEnqUL_H.mjs.map +1 -0
- package/dist/{index-DrHcCXwi.js → index-ZqM4dIOj.js} +1 -2
- package/dist/index-ZqM4dIOj.js.map +1 -0
- package/dist/index-mOLOagan.mjs +5 -0
- package/dist/index-mOLOagan.mjs.map +1 -0
- package/dist/index.js +401 -150
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +401 -150
- package/dist/index.mjs.map +1 -1
- package/dist/lazy.js +16 -16
- package/dist/lazy.js.map +1 -1
- package/dist/lazy.mjs +16 -16
- package/dist/lazy.mjs.map +1 -1
- package/dist/theme/styleCompositions.d.ts +281 -0
- package/dist/theme/styleCompositions.d.ts.map +1 -0
- package/dist/theme/theme.d.ts.map +1 -1
- package/dist/theme/tokens-import.d.ts +164 -0
- package/dist/theme/tokens-import.d.ts.map +1 -1
- package/dist/theme/tokens.d.ts +292 -0
- package/dist/theme/tokens.d.ts.map +1 -1
- package/dist/theme/types.d.ts +292 -0
- package/dist/theme/types.d.ts.map +1 -1
- package/dist/theme-editor/ThemeEditorApp.d.ts +14 -0
- package/dist/theme-editor/ThemeEditorApp.d.ts.map +1 -0
- package/dist/theme-editor/components/ColorEditor.d.ts +10 -0
- package/dist/theme-editor/components/ColorEditor.d.ts.map +1 -0
- package/dist/theme-editor/components/ComponentPreview.d.ts +8 -0
- package/dist/theme-editor/components/ComponentPreview.d.ts.map +1 -0
- package/dist/theme-editor/components/SaveDialog.d.ts +13 -0
- package/dist/theme-editor/components/SaveDialog.d.ts.map +1 -0
- package/dist/theme-editor/components/SpacingEditor.d.ts +11 -0
- package/dist/theme-editor/components/SpacingEditor.d.ts.map +1 -0
- package/dist/theme-editor/components/SyncDialog.d.ts +12 -0
- package/dist/theme-editor/components/SyncDialog.d.ts.map +1 -0
- package/dist/theme-editor/components/TypographyEditor.d.ts +10 -0
- package/dist/theme-editor/components/TypographyEditor.d.ts.map +1 -0
- package/dist/theme-editor/components/UndoButton.d.ts +9 -0
- package/dist/theme-editor/components/UndoButton.d.ts.map +1 -0
- package/dist/theme-editor/hooks/useFileSystem.d.ts +18 -0
- package/dist/theme-editor/hooks/useFileSystem.d.ts.map +1 -0
- package/dist/theme-editor/hooks/useGitIntegration.d.ts +41 -0
- package/dist/theme-editor/hooks/useGitIntegration.d.ts.map +1 -0
- package/dist/theme-editor/hooks/useThemeParser.d.ts +65 -0
- package/dist/theme-editor/hooks/useThemeParser.d.ts.map +1 -0
- package/dist/theme-editor/hooks/useThemeSave.d.ts +21 -0
- package/dist/theme-editor/hooks/useThemeSave.d.ts.map +1 -0
- package/dist/theme-editor/hooks/useThemeSync.d.ts +20 -0
- package/dist/theme-editor/hooks/useThemeSync.d.ts.map +1 -0
- package/dist/theme-editor/index.d.ts +18 -0
- package/dist/theme-editor/index.d.ts.map +1 -0
- package/package.json +14 -12
- package/README.npm.md +0 -132
- package/dist/index-B4_KKxHQ.mjs +0 -6
- package/dist/index-B4_KKxHQ.mjs.map +0 -1
- package/dist/index-Bp_39Kmf.js.map +0 -1
- package/dist/index-C4N6hqG7.mjs.map +0 -1
- package/dist/index-C4a5SkEO.js.map +0 -1
- package/dist/index-CLLVDdFI.mjs +0 -12
- package/dist/index-CLLVDdFI.mjs.map +0 -1
- package/dist/index-CxB9Lb7L.mjs +0 -6
- package/dist/index-CxB9Lb7L.mjs.map +0 -1
- package/dist/index-DGbzI3ul.mjs +0 -6
- package/dist/index-DGbzI3ul.mjs.map +0 -1
- package/dist/index-DQLiGYRv.js.map +0 -1
- package/dist/index-DgpKiomn.js.map +0 -1
- package/dist/index-DrHcCXwi.js.map +0 -1
- package/dist/index-xewrdUFS.js.map +0 -1
- package/dist/index-zqX2ktfd.mjs +0 -6
- package/dist/index-zqX2ktfd.mjs.map +0 -1
package/dist/lazy.js
CHANGED
|
@@ -2,52 +2,52 @@
|
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const LazyDatePicker = React.lazy(
|
|
5
|
-
() => Promise.resolve().then(() => require("./index-
|
|
5
|
+
() => Promise.resolve().then(() => require("./index-B3fSNHE_.js")).then((mod) => ({ default: mod.DatePicker }))
|
|
6
6
|
);
|
|
7
7
|
const LazyTimePicker = React.lazy(
|
|
8
|
-
() => Promise.resolve().then(() => require("./index-
|
|
8
|
+
() => Promise.resolve().then(() => require("./index-B6HAPXbT.js")).then((mod) => ({ default: mod.TimePicker }))
|
|
9
9
|
);
|
|
10
10
|
const LazyDateTimePicker = React.lazy(
|
|
11
|
-
() => Promise.resolve().then(() => require("./index-
|
|
11
|
+
() => Promise.resolve().then(() => require("./index-CrukcVHf.js")).then((mod) => ({ default: mod.DateTimePicker }))
|
|
12
12
|
);
|
|
13
13
|
const LazyTable = React.lazy(
|
|
14
|
-
() => Promise.resolve().then(() => require("./index-
|
|
14
|
+
() => Promise.resolve().then(() => require("./index-D19iZMBT.js")).then((mod) => ({ default: mod.Table }))
|
|
15
15
|
);
|
|
16
16
|
const LazyTableContainer = React.lazy(
|
|
17
|
-
() => Promise.resolve().then(() => require("./index-
|
|
17
|
+
() => Promise.resolve().then(() => require("./index-D19iZMBT.js")).then((mod) => ({ default: mod.TableContainer }))
|
|
18
18
|
);
|
|
19
19
|
const LazyTableHead = React.lazy(
|
|
20
|
-
() => Promise.resolve().then(() => require("./index-
|
|
20
|
+
() => Promise.resolve().then(() => require("./index-D19iZMBT.js")).then((mod) => ({ default: mod.TableHead }))
|
|
21
21
|
);
|
|
22
22
|
const LazyTableBody = React.lazy(
|
|
23
|
-
() => Promise.resolve().then(() => require("./index-
|
|
23
|
+
() => Promise.resolve().then(() => require("./index-D19iZMBT.js")).then((mod) => ({ default: mod.TableBody }))
|
|
24
24
|
);
|
|
25
25
|
const LazyTableFooter = React.lazy(
|
|
26
|
-
() => Promise.resolve().then(() => require("./index-
|
|
26
|
+
() => Promise.resolve().then(() => require("./index-D19iZMBT.js")).then((mod) => ({ default: mod.TableFooter }))
|
|
27
27
|
);
|
|
28
28
|
const LazyTableRow = React.lazy(
|
|
29
|
-
() => Promise.resolve().then(() => require("./index-
|
|
29
|
+
() => Promise.resolve().then(() => require("./index-D19iZMBT.js")).then((mod) => ({ default: mod.TableRow }))
|
|
30
30
|
);
|
|
31
31
|
const LazyTableCell = React.lazy(
|
|
32
|
-
() => Promise.resolve().then(() => require("./index-
|
|
32
|
+
() => Promise.resolve().then(() => require("./index-D19iZMBT.js")).then((mod) => ({ default: mod.TableCell }))
|
|
33
33
|
);
|
|
34
34
|
const LazyDrawer = React.lazy(
|
|
35
|
-
() => Promise.resolve().then(() => require("./index-
|
|
35
|
+
() => Promise.resolve().then(() => require("./index-ZqM4dIOj.js")).then((mod) => ({ default: mod.Drawer }))
|
|
36
36
|
);
|
|
37
37
|
const LazyDialog = React.lazy(
|
|
38
|
-
() => Promise.resolve().then(() => require("./index-
|
|
38
|
+
() => Promise.resolve().then(() => require("./index-D2dZ1ELl.js")).then((mod) => ({ default: mod.Dialog }))
|
|
39
39
|
);
|
|
40
40
|
const LazyDialogTitle = React.lazy(
|
|
41
|
-
() => Promise.resolve().then(() => require("./index-
|
|
41
|
+
() => Promise.resolve().then(() => require("./index-D2dZ1ELl.js")).then((mod) => ({ default: mod.DialogTitle }))
|
|
42
42
|
);
|
|
43
43
|
const LazyDialogContent = React.lazy(
|
|
44
|
-
() => Promise.resolve().then(() => require("./index-
|
|
44
|
+
() => Promise.resolve().then(() => require("./index-D2dZ1ELl.js")).then((mod) => ({ default: mod.DialogContent }))
|
|
45
45
|
);
|
|
46
46
|
const LazyDialogContentText = React.lazy(
|
|
47
|
-
() => Promise.resolve().then(() => require("./index-
|
|
47
|
+
() => Promise.resolve().then(() => require("./index-D2dZ1ELl.js")).then((mod) => ({ default: mod.DialogContentText }))
|
|
48
48
|
);
|
|
49
49
|
const LazyDialogActions = React.lazy(
|
|
50
|
-
() => Promise.resolve().then(() => require("./index-
|
|
50
|
+
() => Promise.resolve().then(() => require("./index-D2dZ1ELl.js")).then((mod) => ({ default: mod.DialogActions }))
|
|
51
51
|
);
|
|
52
52
|
Object.defineProperty(exports, "LazySuspense", {
|
|
53
53
|
enumerable: true,
|
package/dist/lazy.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lazy.js","sources":["../src/lazy.ts"],"sourcesContent":["/**\n * Lazy Loaded Components\n * \n * This file provides lazy-loaded versions of heavy components\n * to optimize initial bundle size and improve application performance.\n * \n * Use these exports when you want to load components on-demand\n * with React.lazy() and Suspense.\n * \n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyTable } from '@atipicus/mrs-ui/lazy';\n * import { CircularProgress } from '@atipicus/mrs-ui';\n * \n * function MyApp() {\n * return (\n * <Suspense fallback={<CircularProgress />}>\n * <LazyTable>\n * // ... table content\n * </LazyTable>\n * </Suspense>\n * );\n * }\n * ```\n * \n * @package @atipicus/mrs-ui\n * @version 0.12.0\n */\n\nimport { lazy } from 'react';\n\n// ============================================================================\n// DATE PICKERS (~196 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded DatePicker component\n * \n * Saves ~196 KB from initial bundle if date pickers are not immediately needed.\n * \n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyDatePicker } from '@atipicus/mrs-ui/lazy';\n * \n * <Suspense fallback={<CircularProgress />}>\n * <LazyDatePicker label=\"Select Date\" />\n * </Suspense>\n * ```\n */\nexport const LazyDatePicker = lazy(() =>\n import('./components/molecules/DatePicker').then((mod) => ({ default: mod.DatePicker }))\n);\n\n/**\n * Lazy-loaded TimePicker component\n * \n * Part of the date-pickers chunk (~196 KB gzipped).\n * \n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyTimePicker } from '@atipicus/mrs-ui/lazy';\n * \n * <Suspense fallback={<CircularProgress />}>\n * <LazyTimePicker label=\"Select Time\" />\n * </Suspense>\n * ```\n */\nexport const LazyTimePicker = lazy(() =>\n import('./components/molecules/TimePicker').then((mod) => ({ default: mod.TimePicker }))\n);\n\n/**\n * Lazy-loaded DateTimePicker component\n * \n * Part of the date-pickers chunk (~196 KB gzipped).\n * \n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyDateTimePicker } from '@atipicus/mrs-ui/lazy';\n * \n * <Suspense fallback={<CircularProgress />}>\n * <LazyDateTimePicker label=\"Select Date & Time\" />\n * </Suspense>\n * ```\n */\nexport const LazyDateTimePicker = lazy(() =>\n import('./components/molecules/DateTimePicker').then((mod) => ({ default: mod.DateTimePicker }))\n);\n\n// ============================================================================\n// DATA DISPLAY (~70 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded Table component\n * \n * Saves ~70 KB from initial bundle. Use for tables that are not immediately visible.\n * \n * Includes: Table, TableContainer, TableHead, TableBody, TableFooter, TableRow, TableCell\n * \n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { \n * LazyTable, \n * LazyTableContainer,\n * LazyTableHead,\n * LazyTableBody,\n * LazyTableRow,\n * LazyTableCell\n * } from '@atipicus/mrs-ui/lazy';\n * \n * <Suspense fallback={<CircularProgress />}>\n * <LazyTableContainer>\n * <LazyTable>\n * <LazyTableHead>\n * <LazyTableRow>\n * <LazyTableCell>Name</LazyTableCell>\n * </LazyTableRow>\n * </LazyTableHead>\n * </LazyTable>\n * </LazyTableContainer>\n * </Suspense>\n * ```\n */\nexport const LazyTable = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.Table }))\n);\n\nexport const LazyTableContainer = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableContainer }))\n);\n\nexport const LazyTableHead = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableHead }))\n);\n\nexport const LazyTableBody = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableBody }))\n);\n\nexport const LazyTableFooter = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableFooter }))\n);\n\nexport const LazyTableRow = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableRow }))\n);\n\nexport const LazyTableCell = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableCell }))\n);\n\n// ============================================================================\n// OVERLAYS (~14 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded Drawer component\n * \n * Saves ~14 KB from initial bundle. Use for drawers that are conditionally rendered.\n * \n * @example\n * ```tsx\n * import { Suspense, useState } from 'react';\n * import { LazyDrawer } from '@atipicus/mrs-ui/lazy';\n * import { Button } from '@atipicus/mrs-ui';\n * \n * function MyApp() {\n * const [open, setOpen] = useState(false);\n * \n * return (\n * <>\n * <Button onClick={() => setOpen(true)}>Open Drawer</Button>\n * \n * {open && (\n * <Suspense fallback={null}>\n * <LazyDrawer open={open} onClose={() => setOpen(false)}>\n * Drawer content\n * </LazyDrawer>\n * </Suspense>\n * )}\n * </>\n * );\n * }\n * ```\n */\nexport const LazyDrawer = lazy(() =>\n import('./components/molecules/Drawer').then((mod) => ({ default: mod.Drawer }))\n);\n\n/**\n * Lazy-loaded Dialog component\n * \n * Part of the overlays chunk (~14 KB gzipped).\n * \n * Includes: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions\n * \n * @example\n * ```tsx\n * import { Suspense, useState } from 'react';\n * import { \n * LazyDialog,\n * LazyDialogTitle,\n * LazyDialogContent,\n * LazyDialogActions\n * } from '@atipicus/mrs-ui/lazy';\n * import { Button } from '@atipicus/mrs-ui';\n * \n * function MyApp() {\n * const [open, setOpen] = useState(false);\n * \n * return (\n * <>\n * <Button onClick={() => setOpen(true)}>Open Dialog</Button>\n * \n * {open && (\n * <Suspense fallback={null}>\n * <LazyDialog open={open} onClose={() => setOpen(false)}>\n * <LazyDialogTitle>Dialog Title</LazyDialogTitle>\n * <LazyDialogContent>Dialog content</LazyDialogContent>\n * <LazyDialogActions>\n * <Button onClick={() => setOpen(false)}>Close</Button>\n * </LazyDialogActions>\n * </LazyDialog>\n * </Suspense>\n * )}\n * </>\n * );\n * }\n * ```\n */\nexport const LazyDialog = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.Dialog }))\n);\n\nexport const LazyDialogTitle = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogTitle }))\n);\n\nexport const LazyDialogContent = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogContent }))\n);\n\nexport const LazyDialogContentText = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogContentText }))\n);\n\nexport const LazyDialogActions = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogActions }))\n);\n\n// ============================================================================\n// UTILITIES\n// ============================================================================\n\n/**\n * Helper type for lazy-loaded components with proper typing\n * \n * @example\n * ```tsx\n * import type { LazyComponent } from '@atipicus/mrs-ui/lazy';\n * \n * const MyLazyComponent: LazyComponent<typeof MyComponent> = lazy(() =>\n * import('./MyComponent').then(mod => ({ default: mod.MyComponent }))\n * );\n * ```\n */\nexport type LazyComponent<T extends React.ComponentType<any>> = React.LazyExoticComponent<T>;\n\n/**\n * Pre-configured Suspense component with fallback\n * \n * @example\n * ```tsx\n * import { LazySuspense, LazyTable } from '@atipicus/mrs-ui/lazy';\n * \n * <LazySuspense>\n * <LazyTable>\n * // table content\n * </LazyTable>\n * </LazySuspense>\n * ```\n */\nexport { Suspense as LazySuspense } from 'react';\n"],"names":["lazy"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"lazy.js","sources":["../src/lazy.ts"],"sourcesContent":["/**\n * Lazy Loaded Components\n *\n * This file provides lazy-loaded versions of heavy components\n * to optimize initial bundle size and improve application performance.\n *\n * Use these exports when you want to load components on-demand\n * with React.lazy() and Suspense.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyTable } from '@atipicus/mrs-ui/lazy';\n * import { CircularProgress } from '@atipicus/mrs-ui';\n *\n * function MyApp() {\n * return (\n * <Suspense fallback={<CircularProgress />}>\n * <LazyTable>\n * // ... table content\n * </LazyTable>\n * </Suspense>\n * );\n * }\n * ```\n *\n * @package @atipicus/mrs-ui\n * @version 0.12.0\n */\n\nimport { lazy } from 'react';\n\n// ============================================================================\n// DATE PICKERS (~196 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded DatePicker component\n *\n * Saves ~196 KB from initial bundle if date pickers are not immediately needed.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyDatePicker } from '@atipicus/mrs-ui/lazy';\n *\n * <Suspense fallback={<CircularProgress />}>\n * <LazyDatePicker label=\"Select Date\" />\n * </Suspense>\n * ```\n */\nexport const LazyDatePicker = lazy(() =>\n import('./components/molecules/DatePicker').then((mod) => ({ default: mod.DatePicker }))\n);\n\n/**\n * Lazy-loaded TimePicker component\n *\n * Part of the date-pickers chunk (~196 KB gzipped).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyTimePicker } from '@atipicus/mrs-ui/lazy';\n *\n * <Suspense fallback={<CircularProgress />}>\n * <LazyTimePicker label=\"Select Time\" />\n * </Suspense>\n * ```\n */\nexport const LazyTimePicker = lazy(() =>\n import('./components/molecules/TimePicker').then((mod) => ({ default: mod.TimePicker }))\n);\n\n/**\n * Lazy-loaded DateTimePicker component\n *\n * Part of the date-pickers chunk (~196 KB gzipped).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyDateTimePicker } from '@atipicus/mrs-ui/lazy';\n *\n * <Suspense fallback={<CircularProgress />}>\n * <LazyDateTimePicker label=\"Select Date & Time\" />\n * </Suspense>\n * ```\n */\nexport const LazyDateTimePicker = lazy(() =>\n import('./components/molecules/DateTimePicker').then((mod) => ({ default: mod.DateTimePicker }))\n);\n\n// ============================================================================\n// DATA DISPLAY (~70 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded Table component\n *\n * Saves ~70 KB from initial bundle. Use for tables that are not immediately visible.\n *\n * Includes: Table, TableContainer, TableHead, TableBody, TableFooter, TableRow, TableCell\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import {\n * LazyTable,\n * LazyTableContainer,\n * LazyTableHead,\n * LazyTableBody,\n * LazyTableRow,\n * LazyTableCell\n * } from '@atipicus/mrs-ui/lazy';\n *\n * <Suspense fallback={<CircularProgress />}>\n * <LazyTableContainer>\n * <LazyTable>\n * <LazyTableHead>\n * <LazyTableRow>\n * <LazyTableCell>Name</LazyTableCell>\n * </LazyTableRow>\n * </LazyTableHead>\n * </LazyTable>\n * </LazyTableContainer>\n * </Suspense>\n * ```\n */\nexport const LazyTable = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.Table }))\n);\n\nexport const LazyTableContainer = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableContainer }))\n);\n\nexport const LazyTableHead = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableHead }))\n);\n\nexport const LazyTableBody = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableBody }))\n);\n\nexport const LazyTableFooter = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableFooter }))\n);\n\nexport const LazyTableRow = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableRow }))\n);\n\nexport const LazyTableCell = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableCell }))\n);\n\n// ============================================================================\n// OVERLAYS (~14 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded Drawer component\n *\n * Saves ~14 KB from initial bundle. Use for drawers that are conditionally rendered.\n *\n * @example\n * ```tsx\n * import { Suspense, useState } from 'react';\n * import { LazyDrawer } from '@atipicus/mrs-ui/lazy';\n * import { Button } from '@atipicus/mrs-ui';\n *\n * function MyApp() {\n * const [open, setOpen] = useState(false);\n *\n * return (\n * <>\n * <Button onClick={() => setOpen(true)}>Open Drawer</Button>\n *\n * {open && (\n * <Suspense fallback={null}>\n * <LazyDrawer open={open} onClose={() => setOpen(false)}>\n * Drawer content\n * </LazyDrawer>\n * </Suspense>\n * )}\n * </>\n * );\n * }\n * ```\n */\nexport const LazyDrawer = lazy(() =>\n import('./components/molecules/Drawer').then((mod) => ({ default: mod.Drawer }))\n);\n\n/**\n * Lazy-loaded Dialog component\n *\n * Part of the overlays chunk (~14 KB gzipped).\n *\n * Includes: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions\n *\n * @example\n * ```tsx\n * import { Suspense, useState } from 'react';\n * import {\n * LazyDialog,\n * LazyDialogTitle,\n * LazyDialogContent,\n * LazyDialogActions\n * } from '@atipicus/mrs-ui/lazy';\n * import { Button } from '@atipicus/mrs-ui';\n *\n * function MyApp() {\n * const [open, setOpen] = useState(false);\n *\n * return (\n * <>\n * <Button onClick={() => setOpen(true)}>Open Dialog</Button>\n *\n * {open && (\n * <Suspense fallback={null}>\n * <LazyDialog open={open} onClose={() => setOpen(false)}>\n * <LazyDialogTitle>Dialog Title</LazyDialogTitle>\n * <LazyDialogContent>Dialog content</LazyDialogContent>\n * <LazyDialogActions>\n * <Button onClick={() => setOpen(false)}>Close</Button>\n * </LazyDialogActions>\n * </LazyDialog>\n * </Suspense>\n * )}\n * </>\n * );\n * }\n * ```\n */\nexport const LazyDialog = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.Dialog }))\n);\n\nexport const LazyDialogTitle = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogTitle }))\n);\n\nexport const LazyDialogContent = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogContent }))\n);\n\nexport const LazyDialogContentText = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogContentText }))\n);\n\nexport const LazyDialogActions = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogActions }))\n);\n\n// ============================================================================\n// UTILITIES\n// ============================================================================\n\n/**\n * Helper type for lazy-loaded components with proper typing\n *\n * @example\n * ```tsx\n * import type { LazyComponent } from '@atipicus/mrs-ui/lazy';\n *\n * const MyLazyComponent: LazyComponent<typeof MyComponent> = lazy(() =>\n * import('./MyComponent').then(mod => ({ default: mod.MyComponent }))\n * );\n * ```\n */\nexport type LazyComponent<T extends React.ComponentType<any>> = React.LazyExoticComponent<T>;\n\n/**\n * Pre-configured Suspense component with fallback\n *\n * @example\n * ```tsx\n * import { LazySuspense, LazyTable } from '@atipicus/mrs-ui/lazy';\n *\n * <LazySuspense>\n * <LazyTable>\n * // table content\n * </LazyTable>\n * </LazySuspense>\n * ```\n */\nexport { Suspense as LazySuspense } from 'react';\n"],"names":["lazy"],"mappings":"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"}
|
package/dist/lazy.mjs
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
1
|
import { lazy } from "react";
|
|
2
2
|
import { Suspense } from "react";
|
|
3
3
|
const LazyDatePicker = lazy(
|
|
4
|
-
() => import("./index-
|
|
4
|
+
() => import("./index-DzuUedva.mjs").then((mod) => ({ default: mod.DatePicker }))
|
|
5
5
|
);
|
|
6
6
|
const LazyTimePicker = lazy(
|
|
7
|
-
() => import("./index-
|
|
7
|
+
() => import("./index-DpuDQuvl.mjs").then((mod) => ({ default: mod.TimePicker }))
|
|
8
8
|
);
|
|
9
9
|
const LazyDateTimePicker = lazy(
|
|
10
|
-
() => import("./index-
|
|
10
|
+
() => import("./index-mOLOagan.mjs").then((mod) => ({ default: mod.DateTimePicker }))
|
|
11
11
|
);
|
|
12
12
|
const LazyTable = lazy(
|
|
13
|
-
() => import("./index-
|
|
13
|
+
() => import("./index-9xINu3Y6.mjs").then((mod) => ({ default: mod.Table }))
|
|
14
14
|
);
|
|
15
15
|
const LazyTableContainer = lazy(
|
|
16
|
-
() => import("./index-
|
|
16
|
+
() => import("./index-9xINu3Y6.mjs").then((mod) => ({ default: mod.TableContainer }))
|
|
17
17
|
);
|
|
18
18
|
const LazyTableHead = lazy(
|
|
19
|
-
() => import("./index-
|
|
19
|
+
() => import("./index-9xINu3Y6.mjs").then((mod) => ({ default: mod.TableHead }))
|
|
20
20
|
);
|
|
21
21
|
const LazyTableBody = lazy(
|
|
22
|
-
() => import("./index-
|
|
22
|
+
() => import("./index-9xINu3Y6.mjs").then((mod) => ({ default: mod.TableBody }))
|
|
23
23
|
);
|
|
24
24
|
const LazyTableFooter = lazy(
|
|
25
|
-
() => import("./index-
|
|
25
|
+
() => import("./index-9xINu3Y6.mjs").then((mod) => ({ default: mod.TableFooter }))
|
|
26
26
|
);
|
|
27
27
|
const LazyTableRow = lazy(
|
|
28
|
-
() => import("./index-
|
|
28
|
+
() => import("./index-9xINu3Y6.mjs").then((mod) => ({ default: mod.TableRow }))
|
|
29
29
|
);
|
|
30
30
|
const LazyTableCell = lazy(
|
|
31
|
-
() => import("./index-
|
|
31
|
+
() => import("./index-9xINu3Y6.mjs").then((mod) => ({ default: mod.TableCell }))
|
|
32
32
|
);
|
|
33
33
|
const LazyDrawer = lazy(
|
|
34
|
-
() => import("./index-
|
|
34
|
+
() => import("./index-CzgRXVhq.mjs").then((mod) => ({ default: mod.Drawer }))
|
|
35
35
|
);
|
|
36
36
|
const LazyDialog = lazy(
|
|
37
|
-
() => import("./index-
|
|
37
|
+
() => import("./index-MEnqUL_H.mjs").then((mod) => ({ default: mod.Dialog }))
|
|
38
38
|
);
|
|
39
39
|
const LazyDialogTitle = lazy(
|
|
40
|
-
() => import("./index-
|
|
40
|
+
() => import("./index-MEnqUL_H.mjs").then((mod) => ({ default: mod.DialogTitle }))
|
|
41
41
|
);
|
|
42
42
|
const LazyDialogContent = lazy(
|
|
43
|
-
() => import("./index-
|
|
43
|
+
() => import("./index-MEnqUL_H.mjs").then((mod) => ({ default: mod.DialogContent }))
|
|
44
44
|
);
|
|
45
45
|
const LazyDialogContentText = lazy(
|
|
46
|
-
() => import("./index-
|
|
46
|
+
() => import("./index-MEnqUL_H.mjs").then((mod) => ({ default: mod.DialogContentText }))
|
|
47
47
|
);
|
|
48
48
|
const LazyDialogActions = lazy(
|
|
49
|
-
() => import("./index-
|
|
49
|
+
() => import("./index-MEnqUL_H.mjs").then((mod) => ({ default: mod.DialogActions }))
|
|
50
50
|
);
|
|
51
51
|
export {
|
|
52
52
|
LazyDatePicker,
|
package/dist/lazy.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lazy.mjs","sources":["../src/lazy.ts"],"sourcesContent":["/**\n * Lazy Loaded Components\n
|
|
1
|
+
{"version":3,"file":"lazy.mjs","sources":["../src/lazy.ts"],"sourcesContent":["/**\n * Lazy Loaded Components\n *\n * This file provides lazy-loaded versions of heavy components\n * to optimize initial bundle size and improve application performance.\n *\n * Use these exports when you want to load components on-demand\n * with React.lazy() and Suspense.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyTable } from '@atipicus/mrs-ui/lazy';\n * import { CircularProgress } from '@atipicus/mrs-ui';\n *\n * function MyApp() {\n * return (\n * <Suspense fallback={<CircularProgress />}>\n * <LazyTable>\n * // ... table content\n * </LazyTable>\n * </Suspense>\n * );\n * }\n * ```\n *\n * @package @atipicus/mrs-ui\n * @version 0.12.0\n */\n\nimport { lazy } from 'react';\n\n// ============================================================================\n// DATE PICKERS (~196 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded DatePicker component\n *\n * Saves ~196 KB from initial bundle if date pickers are not immediately needed.\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyDatePicker } from '@atipicus/mrs-ui/lazy';\n *\n * <Suspense fallback={<CircularProgress />}>\n * <LazyDatePicker label=\"Select Date\" />\n * </Suspense>\n * ```\n */\nexport const LazyDatePicker = lazy(() =>\n import('./components/molecules/DatePicker').then((mod) => ({ default: mod.DatePicker }))\n);\n\n/**\n * Lazy-loaded TimePicker component\n *\n * Part of the date-pickers chunk (~196 KB gzipped).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyTimePicker } from '@atipicus/mrs-ui/lazy';\n *\n * <Suspense fallback={<CircularProgress />}>\n * <LazyTimePicker label=\"Select Time\" />\n * </Suspense>\n * ```\n */\nexport const LazyTimePicker = lazy(() =>\n import('./components/molecules/TimePicker').then((mod) => ({ default: mod.TimePicker }))\n);\n\n/**\n * Lazy-loaded DateTimePicker component\n *\n * Part of the date-pickers chunk (~196 KB gzipped).\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import { LazyDateTimePicker } from '@atipicus/mrs-ui/lazy';\n *\n * <Suspense fallback={<CircularProgress />}>\n * <LazyDateTimePicker label=\"Select Date & Time\" />\n * </Suspense>\n * ```\n */\nexport const LazyDateTimePicker = lazy(() =>\n import('./components/molecules/DateTimePicker').then((mod) => ({ default: mod.DateTimePicker }))\n);\n\n// ============================================================================\n// DATA DISPLAY (~70 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded Table component\n *\n * Saves ~70 KB from initial bundle. Use for tables that are not immediately visible.\n *\n * Includes: Table, TableContainer, TableHead, TableBody, TableFooter, TableRow, TableCell\n *\n * @example\n * ```tsx\n * import { Suspense } from 'react';\n * import {\n * LazyTable,\n * LazyTableContainer,\n * LazyTableHead,\n * LazyTableBody,\n * LazyTableRow,\n * LazyTableCell\n * } from '@atipicus/mrs-ui/lazy';\n *\n * <Suspense fallback={<CircularProgress />}>\n * <LazyTableContainer>\n * <LazyTable>\n * <LazyTableHead>\n * <LazyTableRow>\n * <LazyTableCell>Name</LazyTableCell>\n * </LazyTableRow>\n * </LazyTableHead>\n * </LazyTable>\n * </LazyTableContainer>\n * </Suspense>\n * ```\n */\nexport const LazyTable = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.Table }))\n);\n\nexport const LazyTableContainer = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableContainer }))\n);\n\nexport const LazyTableHead = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableHead }))\n);\n\nexport const LazyTableBody = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableBody }))\n);\n\nexport const LazyTableFooter = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableFooter }))\n);\n\nexport const LazyTableRow = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableRow }))\n);\n\nexport const LazyTableCell = lazy(() =>\n import('./components/molecules/Table').then((mod) => ({ default: mod.TableCell }))\n);\n\n// ============================================================================\n// OVERLAYS (~14 KB gzipped)\n// ============================================================================\n\n/**\n * Lazy-loaded Drawer component\n *\n * Saves ~14 KB from initial bundle. Use for drawers that are conditionally rendered.\n *\n * @example\n * ```tsx\n * import { Suspense, useState } from 'react';\n * import { LazyDrawer } from '@atipicus/mrs-ui/lazy';\n * import { Button } from '@atipicus/mrs-ui';\n *\n * function MyApp() {\n * const [open, setOpen] = useState(false);\n *\n * return (\n * <>\n * <Button onClick={() => setOpen(true)}>Open Drawer</Button>\n *\n * {open && (\n * <Suspense fallback={null}>\n * <LazyDrawer open={open} onClose={() => setOpen(false)}>\n * Drawer content\n * </LazyDrawer>\n * </Suspense>\n * )}\n * </>\n * );\n * }\n * ```\n */\nexport const LazyDrawer = lazy(() =>\n import('./components/molecules/Drawer').then((mod) => ({ default: mod.Drawer }))\n);\n\n/**\n * Lazy-loaded Dialog component\n *\n * Part of the overlays chunk (~14 KB gzipped).\n *\n * Includes: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions\n *\n * @example\n * ```tsx\n * import { Suspense, useState } from 'react';\n * import {\n * LazyDialog,\n * LazyDialogTitle,\n * LazyDialogContent,\n * LazyDialogActions\n * } from '@atipicus/mrs-ui/lazy';\n * import { Button } from '@atipicus/mrs-ui';\n *\n * function MyApp() {\n * const [open, setOpen] = useState(false);\n *\n * return (\n * <>\n * <Button onClick={() => setOpen(true)}>Open Dialog</Button>\n *\n * {open && (\n * <Suspense fallback={null}>\n * <LazyDialog open={open} onClose={() => setOpen(false)}>\n * <LazyDialogTitle>Dialog Title</LazyDialogTitle>\n * <LazyDialogContent>Dialog content</LazyDialogContent>\n * <LazyDialogActions>\n * <Button onClick={() => setOpen(false)}>Close</Button>\n * </LazyDialogActions>\n * </LazyDialog>\n * </Suspense>\n * )}\n * </>\n * );\n * }\n * ```\n */\nexport const LazyDialog = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.Dialog }))\n);\n\nexport const LazyDialogTitle = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogTitle }))\n);\n\nexport const LazyDialogContent = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogContent }))\n);\n\nexport const LazyDialogContentText = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogContentText }))\n);\n\nexport const LazyDialogActions = lazy(() =>\n import('./components/molecules/Dialog').then((mod) => ({ default: mod.DialogActions }))\n);\n\n// ============================================================================\n// UTILITIES\n// ============================================================================\n\n/**\n * Helper type for lazy-loaded components with proper typing\n *\n * @example\n * ```tsx\n * import type { LazyComponent } from '@atipicus/mrs-ui/lazy';\n *\n * const MyLazyComponent: LazyComponent<typeof MyComponent> = lazy(() =>\n * import('./MyComponent').then(mod => ({ default: mod.MyComponent }))\n * );\n * ```\n */\nexport type LazyComponent<T extends React.ComponentType<any>> = React.LazyExoticComponent<T>;\n\n/**\n * Pre-configured Suspense component with fallback\n *\n * @example\n * ```tsx\n * import { LazySuspense, LazyTable } from '@atipicus/mrs-ui/lazy';\n *\n * <LazySuspense>\n * <LazyTable>\n * // table content\n * </LazyTable>\n * </LazySuspense>\n * ```\n */\nexport { Suspense as LazySuspense } from 'react';\n"],"names":[],"mappings":";;AAmDO,MAAM,iBAAiB;AAAA,EAAK,MACjC,OAAO,sBAAmC,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,aAAa;AACzF;AAiBO,MAAM,iBAAiB;AAAA,EAAK,MACjC,OAAO,sBAAmC,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,aAAa;AACzF;AAiBO,MAAM,qBAAqB;AAAA,EAAK,MACrC,OAAO,sBAAuC,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,iBAAiB;AACjG;AAsCO,MAAM,YAAY;AAAA,EAAK,MAC5B,OAAO,sBAA8B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,QAAQ;AAC/E;AAEO,MAAM,qBAAqB;AAAA,EAAK,MACrC,OAAO,sBAA8B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,iBAAiB;AACxF;AAEO,MAAM,gBAAgB;AAAA,EAAK,MAChC,OAAO,sBAA8B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,YAAY;AACnF;AAEO,MAAM,gBAAgB;AAAA,EAAK,MAChC,OAAO,sBAA8B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,YAAY;AACnF;AAEO,MAAM,kBAAkB;AAAA,EAAK,MAClC,OAAO,sBAA8B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,cAAc;AACrF;AAEO,MAAM,eAAe;AAAA,EAAK,MAC/B,OAAO,sBAA8B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,WAAW;AAClF;AAEO,MAAM,gBAAgB;AAAA,EAAK,MAChC,OAAO,sBAA8B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,YAAY;AACnF;AAoCO,MAAM,aAAa;AAAA,EAAK,MAC7B,OAAO,sBAA+B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,SAAS;AACjF;AA2CO,MAAM,aAAa;AAAA,EAAK,MAC7B,OAAO,sBAA+B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,SAAS;AACjF;AAEO,MAAM,kBAAkB;AAAA,EAAK,MAClC,OAAO,sBAA+B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,cAAc;AACtF;AAEO,MAAM,oBAAoB;AAAA,EAAK,MACpC,OAAO,sBAA+B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,gBAAgB;AACxF;AAEO,MAAM,wBAAwB;AAAA,EAAK,MACxC,OAAO,sBAA+B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,oBAAoB;AAC5F;AAEO,MAAM,oBAAoB;AAAA,EAAK,MACpC,OAAO,sBAA+B,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,gBAAgB;AACxF;"}
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
import { CSSObject, SxProps, Theme } from '@mui/material/styles';
|
|
2
|
+
/**
|
|
3
|
+
* Style composition factory for creating reusable patterns
|
|
4
|
+
*/
|
|
5
|
+
export declare const styleCompositions: {
|
|
6
|
+
/**
|
|
7
|
+
* Button style compositions
|
|
8
|
+
* Used by: MuiButton, MuiFab, MuiToggleButton
|
|
9
|
+
*/
|
|
10
|
+
button: {
|
|
11
|
+
/**
|
|
12
|
+
* Base button styles
|
|
13
|
+
*/
|
|
14
|
+
base: () => CSSObject;
|
|
15
|
+
/**
|
|
16
|
+
* Button size variants
|
|
17
|
+
*/
|
|
18
|
+
sizes: {
|
|
19
|
+
small: {
|
|
20
|
+
fontSize: string;
|
|
21
|
+
padding: string;
|
|
22
|
+
};
|
|
23
|
+
medium: {
|
|
24
|
+
fontSize: string;
|
|
25
|
+
padding: string;
|
|
26
|
+
};
|
|
27
|
+
large: {
|
|
28
|
+
fontSize: string;
|
|
29
|
+
padding: string;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
/**
|
|
33
|
+
* Button state styles
|
|
34
|
+
*/
|
|
35
|
+
states: {
|
|
36
|
+
disabled: () => SxProps<Theme>;
|
|
37
|
+
};
|
|
38
|
+
};
|
|
39
|
+
/**
|
|
40
|
+
* Input style compositions
|
|
41
|
+
* Used by: MuiTextField, MuiOutlinedInput, MuiFilledInput, MuiInput
|
|
42
|
+
*/
|
|
43
|
+
input: {
|
|
44
|
+
/**
|
|
45
|
+
* Base input styles
|
|
46
|
+
*/
|
|
47
|
+
base: () => CSSObject;
|
|
48
|
+
/**
|
|
49
|
+
* Input size variants
|
|
50
|
+
*/
|
|
51
|
+
sizes: {
|
|
52
|
+
small: {
|
|
53
|
+
fontSize: string;
|
|
54
|
+
padding: string;
|
|
55
|
+
};
|
|
56
|
+
medium: {
|
|
57
|
+
fontSize: string;
|
|
58
|
+
padding: string;
|
|
59
|
+
};
|
|
60
|
+
large: {
|
|
61
|
+
fontSize: string;
|
|
62
|
+
padding: string;
|
|
63
|
+
};
|
|
64
|
+
};
|
|
65
|
+
/**
|
|
66
|
+
* Input state styles
|
|
67
|
+
*/
|
|
68
|
+
states: {
|
|
69
|
+
disabled: (theme: Theme) => SxProps<Theme>;
|
|
70
|
+
error: (theme: Theme) => SxProps<Theme>;
|
|
71
|
+
focused: (theme: Theme) => SxProps<Theme>;
|
|
72
|
+
};
|
|
73
|
+
};
|
|
74
|
+
/**
|
|
75
|
+
* Surface style compositions
|
|
76
|
+
* Used by: MuiCard, MuiPaper, MuiDialog
|
|
77
|
+
*/
|
|
78
|
+
surface: {
|
|
79
|
+
/**
|
|
80
|
+
* Base surface styles
|
|
81
|
+
*/
|
|
82
|
+
base: (theme: Theme) => SxProps<Theme>;
|
|
83
|
+
/**
|
|
84
|
+
* Surface elevation variants
|
|
85
|
+
*/
|
|
86
|
+
elevations: {
|
|
87
|
+
none: {
|
|
88
|
+
boxShadow: string;
|
|
89
|
+
};
|
|
90
|
+
low: {
|
|
91
|
+
boxShadow: (theme: Theme) => string;
|
|
92
|
+
};
|
|
93
|
+
medium: {
|
|
94
|
+
boxShadow: (theme: Theme) => string;
|
|
95
|
+
};
|
|
96
|
+
high: {
|
|
97
|
+
boxShadow: (theme: Theme) => string;
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
/**
|
|
102
|
+
* List item style compositions
|
|
103
|
+
* Used by: MuiListItem, MuiListItemButton
|
|
104
|
+
*/
|
|
105
|
+
listItem: {
|
|
106
|
+
/**
|
|
107
|
+
* Base list item styles
|
|
108
|
+
*/
|
|
109
|
+
base: () => CSSObject;
|
|
110
|
+
/**
|
|
111
|
+
* List item state styles
|
|
112
|
+
*/
|
|
113
|
+
states: {
|
|
114
|
+
selected: (theme: Theme) => SxProps<Theme>;
|
|
115
|
+
hover: (theme: Theme) => SxProps<Theme>;
|
|
116
|
+
disabled: () => SxProps<Theme>;
|
|
117
|
+
};
|
|
118
|
+
};
|
|
119
|
+
/**
|
|
120
|
+
* Chip style compositions
|
|
121
|
+
* Used by: MuiChip
|
|
122
|
+
*/
|
|
123
|
+
chip: {
|
|
124
|
+
/**
|
|
125
|
+
* Base chip styles
|
|
126
|
+
*/
|
|
127
|
+
base: () => CSSObject;
|
|
128
|
+
/**
|
|
129
|
+
* Chip size variants
|
|
130
|
+
*/
|
|
131
|
+
sizes: {
|
|
132
|
+
small: {
|
|
133
|
+
fontSize: string;
|
|
134
|
+
padding: string;
|
|
135
|
+
};
|
|
136
|
+
medium: {
|
|
137
|
+
fontSize: string;
|
|
138
|
+
padding: string;
|
|
139
|
+
};
|
|
140
|
+
};
|
|
141
|
+
/**
|
|
142
|
+
* Chip state styles
|
|
143
|
+
*/
|
|
144
|
+
states: {
|
|
145
|
+
disabled: () => SxProps<Theme>;
|
|
146
|
+
};
|
|
147
|
+
};
|
|
148
|
+
/**
|
|
149
|
+
* Alert and feedback style compositions
|
|
150
|
+
* Used by: MuiAlert, MuiSnackbar
|
|
151
|
+
*/
|
|
152
|
+
feedback: {
|
|
153
|
+
/**
|
|
154
|
+
* Base feedback styles
|
|
155
|
+
*/
|
|
156
|
+
base: () => SxProps<Theme>;
|
|
157
|
+
/**
|
|
158
|
+
* Alert severity variants
|
|
159
|
+
*/
|
|
160
|
+
variants: {
|
|
161
|
+
success: (theme: Theme) => SxProps<Theme>;
|
|
162
|
+
warning: (theme: Theme) => SxProps<Theme>;
|
|
163
|
+
error: (theme: Theme) => SxProps<Theme>;
|
|
164
|
+
info: (theme: Theme) => SxProps<Theme>;
|
|
165
|
+
};
|
|
166
|
+
};
|
|
167
|
+
/**
|
|
168
|
+
* Common state compositions
|
|
169
|
+
* Used across multiple components
|
|
170
|
+
*/
|
|
171
|
+
states: {
|
|
172
|
+
/**
|
|
173
|
+
* Focus state - applies consistent focus styling
|
|
174
|
+
*/
|
|
175
|
+
focus: (theme: Theme) => SxProps<Theme>;
|
|
176
|
+
/**
|
|
177
|
+
* Hover state - applies consistent hover styling
|
|
178
|
+
*/
|
|
179
|
+
hover: (theme: Theme) => SxProps<Theme>;
|
|
180
|
+
/**
|
|
181
|
+
* Active/selected state
|
|
182
|
+
*/
|
|
183
|
+
active: (theme: Theme) => SxProps<Theme>;
|
|
184
|
+
/**
|
|
185
|
+
* Disabled state - applies consistent disabled styling
|
|
186
|
+
*/
|
|
187
|
+
disabled: () => SxProps<Theme>;
|
|
188
|
+
/**
|
|
189
|
+
* Loading state - subtle opacity reduction
|
|
190
|
+
*/
|
|
191
|
+
loading: () => SxProps<Theme>;
|
|
192
|
+
};
|
|
193
|
+
/**
|
|
194
|
+
* Typography weight shortcuts
|
|
195
|
+
*/
|
|
196
|
+
typography: {
|
|
197
|
+
bold: {
|
|
198
|
+
fontWeight: number;
|
|
199
|
+
};
|
|
200
|
+
semiBold: {
|
|
201
|
+
fontWeight: number;
|
|
202
|
+
};
|
|
203
|
+
medium: {
|
|
204
|
+
fontWeight: number;
|
|
205
|
+
};
|
|
206
|
+
regular: {
|
|
207
|
+
fontWeight: number;
|
|
208
|
+
};
|
|
209
|
+
light: {
|
|
210
|
+
fontWeight: number;
|
|
211
|
+
};
|
|
212
|
+
};
|
|
213
|
+
/**
|
|
214
|
+
* Spacing shortcuts
|
|
215
|
+
* Note: Use MUI spacing() function for responsive values
|
|
216
|
+
*/
|
|
217
|
+
spacing: {
|
|
218
|
+
compact: {
|
|
219
|
+
padding: string;
|
|
220
|
+
gap: string;
|
|
221
|
+
};
|
|
222
|
+
normal: {
|
|
223
|
+
padding: string;
|
|
224
|
+
gap: string;
|
|
225
|
+
};
|
|
226
|
+
comfortable: {
|
|
227
|
+
padding: string;
|
|
228
|
+
gap: string;
|
|
229
|
+
};
|
|
230
|
+
spacious: {
|
|
231
|
+
padding: string;
|
|
232
|
+
gap: string;
|
|
233
|
+
};
|
|
234
|
+
};
|
|
235
|
+
/**
|
|
236
|
+
* Border radius shortcuts
|
|
237
|
+
*/
|
|
238
|
+
borderRadius: {
|
|
239
|
+
sharp: {
|
|
240
|
+
borderRadius: number;
|
|
241
|
+
};
|
|
242
|
+
small: {
|
|
243
|
+
borderRadius: number;
|
|
244
|
+
};
|
|
245
|
+
medium: {
|
|
246
|
+
borderRadius: number;
|
|
247
|
+
};
|
|
248
|
+
large: {
|
|
249
|
+
borderRadius: number;
|
|
250
|
+
};
|
|
251
|
+
rounded: {
|
|
252
|
+
borderRadius: number;
|
|
253
|
+
};
|
|
254
|
+
};
|
|
255
|
+
/**
|
|
256
|
+
* Flexbox and layout compositions
|
|
257
|
+
*/
|
|
258
|
+
layout: {
|
|
259
|
+
/**
|
|
260
|
+
* Flex row with centered items
|
|
261
|
+
*/
|
|
262
|
+
flexRowCenter: () => SxProps<Theme>;
|
|
263
|
+
/**
|
|
264
|
+
* Flex column with centered items
|
|
265
|
+
*/
|
|
266
|
+
flexColumnCenter: () => SxProps<Theme>;
|
|
267
|
+
/**
|
|
268
|
+
* Full width container
|
|
269
|
+
*/
|
|
270
|
+
fullWidth: () => SxProps<Theme>;
|
|
271
|
+
/**
|
|
272
|
+
* Responsive container
|
|
273
|
+
*/
|
|
274
|
+
responsiveContainer: () => SxProps<Theme>;
|
|
275
|
+
};
|
|
276
|
+
};
|
|
277
|
+
/**
|
|
278
|
+
* Type export for style compositions
|
|
279
|
+
*/
|
|
280
|
+
export type StyleComposition = typeof styleCompositions;
|
|
281
|
+
//# sourceMappingURL=styleCompositions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styleCompositions.d.ts","sourceRoot":"","sources":["../../src/theme/styleCompositions.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAGtE;;GAEG;AACH,eAAO,MAAM,iBAAiB;IAC5B;;;OAGG;;QAED;;WAEG;oBACO,SAAS;QAOnB;;WAEG;;;;;;;;;;;;;;;QAgBH;;WAEG;;4BAEa,OAAO,CAAC,KAAK,CAAC;;;IAQhC;;;OAGG;;QAED;;WAEG;oBACO,SAAS;QAKnB;;WAEG;;;;;;;;;;;;;;;QAgBH;;WAEG;;8BAEiB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;2BAIzB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;6BAIpB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;;;IAO3C;;;OAGG;;QAED;;WAEG;sBACW,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;QAMpC;;WAEG;;;;;;mCAGyB,KAAK;;;mCACF,KAAK;;;mCACP,KAAK;;;;IAIpC;;;OAGG;;QAED;;WAEG;oBACO,SAAS;QAKnB;;WAEG;;8BAEiB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;2BAIzB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;4BAGvB,OAAO,CAAC,KAAK,CAAC;;;IAQhC;;;OAGG;;QAED;;WAEG;oBACO,SAAS;QAMnB;;WAEG;;;;;;;;;;;QAYH;;WAEG;;4BAEa,OAAO,CAAC,KAAK,CAAC;;;IAOhC;;;OAGG;;QAED;;WAEG;oBACO,OAAO,CAAC,KAAK,CAAC;QAMxB;;WAEG;;6BAEgB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;6BAItB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;2BAIxB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;0BAIvB,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;;;IAOxC;;;OAGG;;QAED;;WAEG;uBACY,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;QAKrC;;WAEG;uBACY,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;QAKrC;;WAEG;wBACa,KAAK,KAAG,OAAO,CAAC,KAAK,CAAC;QAKtC;;WAEG;wBACW,OAAO,CAAC,KAAK,CAAC;QAM5B;;WAEG;uBACU,OAAO,CAAC,KAAK,CAAC;;IAO7B;;OAEG;;;;;;;;;;;;;;;;;;IASH;;;OAGG;;;;;;;;;;;;;;;;;;;IAQH;;OAEG;;;;;;;;;;;;;;;;;;IASH;;OAEG;;QAED;;WAEG;6BACgB,OAAO,CAAC,KAAK,CAAC;QAOjC;;WAEG;gCACmB,OAAO,CAAC,KAAK,CAAC;QAOpC;;WAEG;yBACY,OAAO,CAAC,KAAK,CAAC;QAI7B;;WAEG;mCACsB,OAAO,CAAC,KAAK,CAAC;;CAK1C,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAAE,KAAK,EAAgB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,OAAO,KAAK,EAAE,KAAK,EAAgB,MAAM,sBAAsB,CAAC;AAsgBhE;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAyBvB,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,SAAS,EAAE,KAuBtB,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,KAAK,OAAa,CAAC;AAEhC;;GAEG;;;;;AACH,wBAGE"}
|