@tipp/ui 1.0.41 → 1.0.43
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/atoms/drawer.cjs +1 -1
- package/dist/atoms/drawer.cjs.map +1 -1
- package/dist/atoms/drawer.js +2 -2
- package/dist/atoms/dropdown-menu.cjs.map +1 -1
- package/dist/atoms/dropdown-menu.d.cts +1 -4
- package/dist/atoms/dropdown-menu.d.ts +1 -4
- package/dist/atoms/dropdown-menu.js +1 -1
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.cjs +79 -65
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.d.cts +3 -2
- package/dist/atoms/index.d.ts +3 -2
- package/dist/atoms/index.js +36 -36
- package/dist/atoms/pagination.js +2 -2
- package/dist/atoms/select.cjs +44 -1
- package/dist/atoms/select.cjs.map +1 -1
- package/dist/atoms/select.d.cts +19 -1
- package/dist/atoms/select.d.ts +19 -1
- package/dist/atoms/select.js +1 -1
- package/dist/chunk-3WAQCV5A.js +119 -0
- package/dist/chunk-3WAQCV5A.js.map +1 -0
- package/dist/chunk-4WFMOFN2.js +34 -0
- package/dist/chunk-4WFMOFN2.js.map +1 -0
- package/dist/chunk-ABUIIUYC.js +35 -0
- package/dist/chunk-ABUIIUYC.js.map +1 -0
- package/dist/chunk-BVBX6IJ3.js +15 -0
- package/dist/chunk-BVBX6IJ3.js.map +1 -0
- package/dist/chunk-CN2EKN6C.js +119 -0
- package/dist/chunk-CN2EKN6C.js.map +1 -0
- package/dist/chunk-H6BDCW7U.js +27 -0
- package/dist/chunk-H6BDCW7U.js.map +1 -0
- package/dist/chunk-IMOA5HKH.js +27 -0
- package/dist/chunk-IMOA5HKH.js.map +1 -0
- package/dist/chunk-KDWHXPLO.js +27 -0
- package/dist/chunk-KDWHXPLO.js.map +1 -0
- package/dist/chunk-NBJOYJAF.js +49 -0
- package/dist/chunk-NBJOYJAF.js.map +1 -0
- package/dist/chunk-ONYSO7Y2.js +49 -0
- package/dist/chunk-ONYSO7Y2.js.map +1 -0
- package/dist/chunk-XG4N7OQF.js +104 -0
- package/dist/chunk-XG4N7OQF.js.map +1 -0
- package/dist/index.cjs +130 -116
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +7 -2
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +3 -2
- package/dist/index.d.ts +3 -2
- package/dist/index.js +67 -67
- package/dist/molecules/expand-table/index.js +22 -22
- package/dist/molecules/expand-table/row.js +19 -19
- package/dist/molecules/index.js +23 -23
- package/dist/molecules/navigation.js +20 -20
- package/dist/theme/theme-provider.cjs +1 -1
- package/dist/theme/theme-provider.cjs.map +1 -1
- package/dist/theme/theme-provider.js +1 -1
- package/package.json +1 -1
- package/src/atoms/dropdown-menu.tsx +1 -1
- package/src/atoms/select.tsx +24 -1
- package/src/theme/theme-provider.tsx +1 -1
package/dist/atoms/drawer.cjs
CHANGED
|
@@ -68,7 +68,7 @@ var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
|
68
68
|
var import_themes = require("@radix-ui/themes");
|
|
69
69
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
70
70
|
function ThemeProvider(props) {
|
|
71
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Theme, __spreadValues({ accentColor: "iris", radius: "
|
|
71
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Theme, __spreadValues({ accentColor: "iris", radius: "medium" }, props));
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
// src/atoms/toast.tsx
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/atoms/drawer.tsx","../../src/theme/theme-provider.tsx","../../src/atoms/toast.tsx","../../src/atoms/icon-button.tsx"],"sourcesContent":["import React from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { ThemeProvider } from '../theme/theme-provider';\nimport { ToastContainer } from './toast';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactNode {\n const { position = 'right', className, ...rest } = props;\n return (\n <Dialog.Portal>\n <ThemeProvider>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n />\n <ToastContainer />\n </ThemeProvider>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n","import React from 'react';\nimport { Theme } from '@radix-ui/themes';\n\ntype ThemeProps = React.ComponentProps<typeof Theme>;\n\ninterface ThemeProviderProps extends ThemeProps {\n children: React.ReactNode;\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): React.ReactElement {\n return <Theme accentColor=\"iris\" radius=\"
|
|
1
|
+
{"version":3,"sources":["../../src/atoms/drawer.tsx","../../src/theme/theme-provider.tsx","../../src/atoms/toast.tsx","../../src/atoms/icon-button.tsx"],"sourcesContent":["import React from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { ThemeProvider } from '../theme/theme-provider';\nimport { ToastContainer } from './toast';\n\nexport function Root(props: Dialog.DialogProps): React.ReactNode {\n return <Dialog.Root {...props} />;\n}\n\ntype ContentProps = Dialog.DialogContentProps & {\n /** Drawer가 붙는 위치, 기본값 right */\n position?: 'left' | 'right' | 'bottom' | 'top';\n};\n\nexport function Content(props: ContentProps): React.ReactNode {\n const { position = 'right', className, ...rest } = props;\n return (\n <Dialog.Portal>\n <ThemeProvider>\n <Dialog.Overlay className=\"DrawerOverlay\" />\n <Dialog.Content\n className={`DrawerContent ${position} ${className || ''}`}\n {...rest}\n />\n <ToastContainer />\n </ThemeProvider>\n </Dialog.Portal>\n );\n}\n\nexport function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {\n return <Dialog.Trigger asChild {...props} />;\n}\n\nexport const Drawer = {\n Root: Dialog.Root,\n Trigger,\n Content,\n Close: Dialog.Close,\n Title: Dialog.Title,\n Description: Dialog.Description,\n};\n","import React from 'react';\nimport { Theme } from '@radix-ui/themes';\n\ntype ThemeProps = React.ComponentProps<typeof Theme>;\n\ninterface ThemeProviderProps extends ThemeProps {\n children: React.ReactNode;\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): React.ReactElement {\n return <Theme accentColor=\"iris\" radius=\"medium\" {...props} />;\n}\n","import { Cross1Icon } from '@radix-ui/react-icons';\nimport type { Theme, ToastContainerProps, TypeOptions } from 'react-toastify';\nimport { ToastContainer as ToastifyToastContainer } from 'react-toastify';\nimport { IconButton } from './icon-button';\n\nexport { toast } from 'react-toastify';\n\ninterface CloseButtonProps {\n closeToast: (e: React.MouseEvent<HTMLElement>) => void;\n type: TypeOptions;\n ariaLabel?: string;\n theme: Theme;\n}\nfunction CloseButton({ closeToast }: CloseButtonProps): React.ReactNode {\n return (\n <IconButton color=\"gray\" onClick={closeToast} variant=\"ghost\">\n <Cross1Icon />\n </IconButton>\n );\n}\n\nexport function ToastContainer(props: ToastContainerProps): React.ReactElement {\n return (\n <ToastifyToastContainer\n autoClose={5000}\n closeButton={CloseButton}\n closeOnClick\n draggable\n hideProgressBar\n newestOnTop\n pauseOnFocusLoss\n pauseOnHover\n position=\"bottom-right\"\n rtl={false}\n {...props}\n />\n );\n}\n","export { IconButton, type IconButtonProps } from '@radix-ui/themes';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,iBAAAA;AAAA,EAAA;AAAA,cAAAC;AAAA,EAAA,eAAAC;AAAA;AAAA;AACA,aAAwB;;;ACAxB,oBAAsB;AASb;AADF,SAAS,cAAc,OAA+C;AAC3E,SAAO,4CAAC,sCAAM,aAAY,QAAO,QAAO,YAAa,MAAO;AAC9D;;;ACXA,yBAA2B;AAE3B,4BAAyD;;;ACFzD,IAAAC,iBAAiD;;;ADKjD,IAAAC,yBAAsB;AAWhB,IAAAC,sBAAA;AAHN,SAAS,YAAY,EAAE,WAAW,GAAsC;AACtE,SACE,6CAAC,6BAAW,OAAM,QAAO,SAAS,YAAY,SAAQ,SACpD,uDAAC,iCAAW,GACd;AAEJ;AAEO,SAAS,eAAe,OAAgD;AAC7E,SACE;AAAA,IAAC,sBAAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,cAAY;AAAA,MACZ,WAAS;AAAA,MACT,iBAAe;AAAA,MACf,aAAW;AAAA,MACX,kBAAgB;AAAA,MAChB,cAAY;AAAA,MACZ,UAAS;AAAA,MACT,KAAK;AAAA,OACD;AAAA,EACN;AAEJ;;;AF/BS,IAAAC,sBAAA;AADF,SAASC,MAAK,OAA4C;AAC/D,SAAO,6CAAQ,aAAP,mBAAgB,MAAO;AACjC;AAOO,SAASC,SAAQ,OAAsC;AAC5D,QAAmD,YAA3C,aAAW,SAAS,UAf9B,IAeqD,IAAT,iBAAS,IAAT,CAAlC,YAAoB;AAC5B,SACE,6CAAQ,eAAP,EACC,wDAAC,iBACC;AAAA,iDAAQ,gBAAP,EAAe,WAAU,iBAAgB;AAAA,IAC1C;AAAA,MAAQ;AAAA,MAAP;AAAA,QACC,WAAW,iBAAiB,QAAQ,IAAI,aAAa,EAAE;AAAA,SACnD;AAAA,IACN;AAAA,IACA,6CAAC,kBAAe;AAAA,KAClB,GACF;AAEJ;AAEO,SAASC,SAAQ,OAAmD;AACzE,SAAO,6CAAQ,gBAAP,iBAAe,SAAO,QAAK,MAAO;AAC5C;AAEO,IAAM,SAAS;AAAA,EACpB,MAAa;AAAA,EACb,SAAAA;AAAA,EACA,SAAAD;AAAA,EACA,OAAc;AAAA,EACd,OAAc;AAAA,EACd,aAAoB;AACtB;","names":["Content","Root","Trigger","import_themes","import_react_toastify","import_jsx_runtime","ToastifyToastContainer","import_jsx_runtime","Root","Content","Trigger"]}
|
package/dist/atoms/drawer.js
CHANGED
|
@@ -3,9 +3,9 @@ import {
|
|
|
3
3
|
Drawer,
|
|
4
4
|
Root,
|
|
5
5
|
Trigger
|
|
6
|
-
} from "../chunk-
|
|
6
|
+
} from "../chunk-NBJOYJAF.js";
|
|
7
|
+
import "../chunk-BVBX6IJ3.js";
|
|
7
8
|
import "../chunk-NJ2U2TVS.js";
|
|
8
|
-
import "../chunk-7LEWTGAO.js";
|
|
9
9
|
import "../chunk-O3DNDMV3.js";
|
|
10
10
|
import "../chunk-N552FDTV.js";
|
|
11
11
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/atoms/dropdown-menu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\
|
|
1
|
+
{"version":3,"sources":["../../src/atoms/dropdown-menu.tsx"],"sourcesContent":["import { DropdownMenu as RadixDropdownMenu } from '@radix-ui/themes';\nimport { forwardRef, useMemo } from 'react';\n\ntype ContentProps = RadixDropdownMenu.ContentProps & {\n isNavigation?: boolean;\n};\n\nconst Content = forwardRef<HTMLDivElement, ContentProps>((props, ref) => {\n const { isNavigation, className, ...rest } = props;\n const contentClassName = useMemo(() => {\n const cls = isNavigation ? 'dropdown-navigation' : '';\n return [cls, className].join(' ');\n }, [isNavigation, className]);\n\n return (\n <RadixDropdownMenu.Content\n ref={ref}\n {...rest}\n className={contentClassName}\n />\n );\n});\n\nContent.displayName = 'DropdownMenu.Content';\n\nexport const DropdownMenu = {\n ...RadixDropdownMenu,\n Content,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAAkD;AAClD,mBAAoC;AAchC;AARJ,IAAM,cAAU,yBAAyC,CAAC,OAAO,QAAQ;AACvE,QAA6C,YAArC,gBAAc,UARxB,IAQ+C,IAAT,iBAAS,IAAT,CAA5B,gBAAc;AACtB,QAAM,uBAAmB,sBAAQ,MAAM;AACrC,UAAM,MAAM,eAAe,wBAAwB;AACnD,WAAO,CAAC,KAAK,SAAS,EAAE,KAAK,GAAG;AAAA,EAClC,GAAG,CAAC,cAAc,SAAS,CAAC;AAE5B,SACE;AAAA,IAAC,cAAAA,aAAkB;AAAA,IAAlB;AAAA,MACC;AAAA,OACI,OAFL;AAAA,MAGC,WAAW;AAAA;AAAA,EACb;AAEJ,CAAC;AAED,QAAQ,cAAc;AAEf,IAAM,eAAe,iCACvB,cAAAA,eADuB;AAAA,EAE1B;AACF;","names":["RadixDropdownMenu"]}
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { DropdownMenu as DropdownMenu$1 } from '@radix-ui/themes';
|
|
3
3
|
|
|
4
|
-
type ContentProps = DropdownMenu$1.ContentProps & {
|
|
5
|
-
isNavigation?: boolean;
|
|
6
|
-
};
|
|
7
4
|
declare const DropdownMenu: {
|
|
8
5
|
Content: react.ForwardRefExoticComponent<DropdownMenu$1.ContentProps & {
|
|
9
6
|
isNavigation?: boolean | undefined;
|
|
@@ -23,4 +20,4 @@ declare const DropdownMenu: {
|
|
|
23
20
|
Separator: react.ForwardRefExoticComponent<DropdownMenu$1.SeparatorProps & react.RefAttributes<HTMLDivElement>>;
|
|
24
21
|
};
|
|
25
22
|
|
|
26
|
-
export {
|
|
23
|
+
export { DropdownMenu };
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { DropdownMenu as DropdownMenu$1 } from '@radix-ui/themes';
|
|
3
3
|
|
|
4
|
-
type ContentProps = DropdownMenu$1.ContentProps & {
|
|
5
|
-
isNavigation?: boolean;
|
|
6
|
-
};
|
|
7
4
|
declare const DropdownMenu: {
|
|
8
5
|
Content: react.ForwardRefExoticComponent<DropdownMenu$1.ContentProps & {
|
|
9
6
|
isNavigation?: boolean | undefined;
|
|
@@ -23,4 +20,4 @@ declare const DropdownMenu: {
|
|
|
23
20
|
Separator: react.ForwardRefExoticComponent<DropdownMenu$1.SeparatorProps & react.RefAttributes<HTMLDivElement>>;
|
|
24
21
|
};
|
|
25
22
|
|
|
26
|
-
export {
|
|
23
|
+
export { DropdownMenu };
|
package/dist/atoms/index.cjs
CHANGED
|
@@ -74,7 +74,7 @@ __export(atoms_exports, {
|
|
|
74
74
|
Code: () => import_themes13.Code,
|
|
75
75
|
Collapse: () => Collapse,
|
|
76
76
|
Container: () => import_themes14.Container,
|
|
77
|
-
Content: () =>
|
|
77
|
+
Content: () => Content4,
|
|
78
78
|
DataList: () => import_themes15.DataList,
|
|
79
79
|
Dialog: () => import_themes16.Dialog,
|
|
80
80
|
Drawer: () => Drawer,
|
|
@@ -102,7 +102,7 @@ __export(atoms_exports, {
|
|
|
102
102
|
ScrollArea: () => import_themes35.ScrollArea,
|
|
103
103
|
Section: () => import_themes36.Section,
|
|
104
104
|
SegmentedControl: () => import_themes37.SegmentedControl,
|
|
105
|
-
Select: () =>
|
|
105
|
+
Select: () => Select,
|
|
106
106
|
Separator: () => import_themes39.Separator,
|
|
107
107
|
Skeleton: () => import_themes40.Skeleton,
|
|
108
108
|
Spinner: () => import_themes49.Spinner,
|
|
@@ -432,6 +432,20 @@ var import_themes37 = require("@radix-ui/themes");
|
|
|
432
432
|
|
|
433
433
|
// src/atoms/select.tsx
|
|
434
434
|
var import_themes38 = require("@radix-ui/themes");
|
|
435
|
+
var import_react10 = require("react");
|
|
436
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
437
|
+
var Content2 = (0, import_react10.forwardRef)((props, ref) => {
|
|
438
|
+
const _a = props, { className, isNavigation } = _a, rest = __objRest(_a, ["className", "isNavigation"]);
|
|
439
|
+
const cls = (0, import_react10.useMemo)(() => {
|
|
440
|
+
const etc = isNavigation ? "nav-select" : "";
|
|
441
|
+
return [etc, className].join(" ");
|
|
442
|
+
}, [className, isNavigation]);
|
|
443
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_themes38.Select.Content, __spreadProps(__spreadValues({}, rest), { className: cls, ref }));
|
|
444
|
+
});
|
|
445
|
+
Content2.displayName = "Select.Content";
|
|
446
|
+
var Select = __spreadProps(__spreadValues({}, import_themes38.Select), {
|
|
447
|
+
Content: Content2
|
|
448
|
+
});
|
|
435
449
|
|
|
436
450
|
// src/atoms/separator.tsx
|
|
437
451
|
var import_themes39 = require("@radix-ui/themes");
|
|
@@ -456,12 +470,12 @@ var import_themes45 = require("@radix-ui/themes");
|
|
|
456
470
|
|
|
457
471
|
// src/atoms/typo.tsx
|
|
458
472
|
var import_themes46 = require("@radix-ui/themes");
|
|
459
|
-
var
|
|
460
|
-
var
|
|
461
|
-
var Typo = (0,
|
|
473
|
+
var import_react11 = require("react");
|
|
474
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
475
|
+
var Typo = (0, import_react11.forwardRef)(
|
|
462
476
|
(props, ref) => {
|
|
463
477
|
const _a = props, { size, variant, children } = _a, rest = __objRest(_a, ["size", "variant", "children"]);
|
|
464
|
-
const radixSize = (0,
|
|
478
|
+
const radixSize = (0, import_react11.useMemo)(() => {
|
|
465
479
|
if (size !== void 0)
|
|
466
480
|
return size;
|
|
467
481
|
switch (variant) {
|
|
@@ -474,7 +488,7 @@ var Typo = (0, import_react10.forwardRef)(
|
|
|
474
488
|
return "2";
|
|
475
489
|
}
|
|
476
490
|
}, [size, variant]);
|
|
477
|
-
return /* @__PURE__ */ (0,
|
|
491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_themes46.Text, __spreadProps(__spreadValues({}, rest), { ref, size: radixSize, children }));
|
|
478
492
|
}
|
|
479
493
|
);
|
|
480
494
|
Typo.displayName = "Typo";
|
|
@@ -486,43 +500,43 @@ var import_themes47 = require("@radix-ui/themes");
|
|
|
486
500
|
var import_themes48 = require("@radix-ui/themes");
|
|
487
501
|
|
|
488
502
|
// src/atoms/collapse.tsx
|
|
489
|
-
var
|
|
490
|
-
var
|
|
503
|
+
var import_react12 = require("react");
|
|
504
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
491
505
|
function Collapse(props) {
|
|
492
506
|
const { children, closedHeight = "0" } = props;
|
|
493
|
-
const [open, setOpen] = (0,
|
|
507
|
+
const [open, setOpen] = (0, import_react12.useState)(() => {
|
|
494
508
|
return props.open || props.defaultOpen || false;
|
|
495
509
|
});
|
|
496
|
-
(0,
|
|
510
|
+
(0, import_react12.useEffect)(() => {
|
|
497
511
|
if (props.open === void 0)
|
|
498
512
|
return;
|
|
499
513
|
setOpen(props.open);
|
|
500
514
|
}, [props.open]);
|
|
501
|
-
const ref = (0,
|
|
502
|
-
(0,
|
|
515
|
+
const ref = (0, import_react12.useRef)(null);
|
|
516
|
+
(0, import_react12.useEffect)(() => {
|
|
503
517
|
if (!ref.current)
|
|
504
518
|
return;
|
|
505
519
|
ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : closedHeight;
|
|
506
520
|
}, [closedHeight, open]);
|
|
507
|
-
return /* @__PURE__ */ (0,
|
|
521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "collapse", ref, children });
|
|
508
522
|
}
|
|
509
523
|
|
|
510
524
|
// src/atoms/spinner.tsx
|
|
511
525
|
var import_themes49 = require("@radix-ui/themes");
|
|
512
526
|
|
|
513
527
|
// src/atoms/pagination.tsx
|
|
514
|
-
var
|
|
528
|
+
var import_react13 = require("react");
|
|
515
529
|
|
|
516
530
|
// src/icon.ts
|
|
517
531
|
var import_react_icons = require("@radix-ui/react-icons");
|
|
518
532
|
|
|
519
533
|
// src/atoms/pagination.tsx
|
|
520
|
-
var
|
|
534
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
521
535
|
function Pagination(props) {
|
|
522
536
|
const { onChange, count = 0 } = props;
|
|
523
537
|
const siblingCount = 2;
|
|
524
|
-
const [page, setPage] = (0,
|
|
525
|
-
const visibleItems = (0,
|
|
538
|
+
const [page, setPage] = (0, import_react13.useState)(() => props.page || props.defaultPage || 1);
|
|
539
|
+
const visibleItems = (0, import_react13.useMemo)(() => {
|
|
526
540
|
let start = Math.max(1, page - siblingCount);
|
|
527
541
|
let end = Math.min(count, page + siblingCount);
|
|
528
542
|
if (page - siblingCount <= 0 && end < count) {
|
|
@@ -532,18 +546,18 @@ function Pagination(props) {
|
|
|
532
546
|
}
|
|
533
547
|
return Array.from({ length: end - start + 1 }, (_, i) => i + start);
|
|
534
548
|
}, [count, page]);
|
|
535
|
-
(0,
|
|
549
|
+
(0, import_react13.useEffect)(() => {
|
|
536
550
|
onChange == null ? void 0 : onChange(page);
|
|
537
551
|
}, [onChange, page]);
|
|
538
|
-
(0,
|
|
552
|
+
(0, import_react13.useEffect)(() => {
|
|
539
553
|
if (props.page) {
|
|
540
554
|
setPage(props.page);
|
|
541
555
|
}
|
|
542
556
|
}, [props.page]);
|
|
543
|
-
const onClickPrev = (0,
|
|
557
|
+
const onClickPrev = (0, import_react13.useCallback)(() => {
|
|
544
558
|
setPage((prev) => Math.max(1, prev - 1));
|
|
545
559
|
}, []);
|
|
546
|
-
const onClickNext = (0,
|
|
560
|
+
const onClickNext = (0, import_react13.useCallback)(() => {
|
|
547
561
|
setPage((prev) => Math.min(count, prev + 1));
|
|
548
562
|
}, [count]);
|
|
549
563
|
const moveButtonProps = {
|
|
@@ -555,24 +569,24 @@ function Pagination(props) {
|
|
|
555
569
|
height: 24,
|
|
556
570
|
width: 24
|
|
557
571
|
};
|
|
558
|
-
const prevDisabled = (0,
|
|
572
|
+
const prevDisabled = (0, import_react13.useMemo)(() => {
|
|
559
573
|
return page - siblingCount <= 1;
|
|
560
574
|
}, [page]);
|
|
561
|
-
const nextDisabled = (0,
|
|
575
|
+
const nextDisabled = (0, import_react13.useMemo)(() => {
|
|
562
576
|
return page + siblingCount >= count;
|
|
563
577
|
}, [count, page]);
|
|
564
|
-
return /* @__PURE__ */ (0,
|
|
565
|
-
/* @__PURE__ */ (0,
|
|
578
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_themes19.Flex, { align: "center", className: "tipp-pagination", gap: "4", children: [
|
|
579
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
566
580
|
import_themes24.IconButton,
|
|
567
581
|
__spreadProps(__spreadValues({
|
|
568
582
|
disabled: prevDisabled,
|
|
569
583
|
onClick: onClickPrev
|
|
570
584
|
}, moveButtonProps), {
|
|
571
|
-
children: /* @__PURE__ */ (0,
|
|
585
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.ChevronLeftIcon, __spreadValues({}, iconSize))
|
|
572
586
|
})
|
|
573
587
|
),
|
|
574
|
-
/* @__PURE__ */ (0,
|
|
575
|
-
return /* @__PURE__ */ (0,
|
|
588
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_themes19.Flex, { gap: "1", children: visibleItems.map((item) => {
|
|
589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
576
590
|
"button",
|
|
577
591
|
{
|
|
578
592
|
className: `page-button ${item === page ? "active" : ""}`,
|
|
@@ -580,45 +594,45 @@ function Pagination(props) {
|
|
|
580
594
|
setPage(item);
|
|
581
595
|
},
|
|
582
596
|
type: "button",
|
|
583
|
-
children: /* @__PURE__ */ (0,
|
|
597
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Typo, { variant: "body", children: item })
|
|
584
598
|
},
|
|
585
599
|
item
|
|
586
600
|
);
|
|
587
601
|
}) }),
|
|
588
|
-
/* @__PURE__ */ (0,
|
|
602
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
589
603
|
import_themes24.IconButton,
|
|
590
604
|
__spreadProps(__spreadValues({
|
|
591
605
|
disabled: nextDisabled,
|
|
592
606
|
onClick: onClickNext
|
|
593
607
|
}, moveButtonProps), {
|
|
594
|
-
children: /* @__PURE__ */ (0,
|
|
608
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_icons.ChevronRightIcon, __spreadValues({}, iconSize))
|
|
595
609
|
})
|
|
596
610
|
)
|
|
597
611
|
] });
|
|
598
612
|
}
|
|
599
613
|
|
|
600
614
|
// src/atoms/field-error-wrapper.tsx
|
|
601
|
-
var
|
|
615
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
602
616
|
function FieldErrorWrapper({
|
|
603
617
|
children,
|
|
604
618
|
error
|
|
605
619
|
}) {
|
|
606
|
-
return /* @__PURE__ */ (0,
|
|
620
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_themes19.Flex, { direction: "column", gap: "1", children: [
|
|
607
621
|
children,
|
|
608
|
-
error ? /* @__PURE__ */ (0,
|
|
622
|
+
error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Typo, { color: "red", variant: "caption", children: error }) : null
|
|
609
623
|
] });
|
|
610
624
|
}
|
|
611
625
|
|
|
612
626
|
// src/atoms/ellipsis-tooltip.tsx
|
|
613
|
-
var
|
|
614
|
-
var
|
|
627
|
+
var import_react14 = require("react");
|
|
628
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
615
629
|
function EllipsisTooltip(props) {
|
|
616
630
|
const _a = props, { children, style, lineClamp = 2 } = _a, rest = __objRest(_a, ["children", "style", "lineClamp"]);
|
|
617
|
-
const ref = (0,
|
|
618
|
-
const [tooltipDisplay, setTooltipDisplay] = (0,
|
|
631
|
+
const ref = (0, import_react14.useRef)(null);
|
|
632
|
+
const [tooltipDisplay, setTooltipDisplay] = (0, import_react14.useState)(
|
|
619
633
|
"none"
|
|
620
634
|
);
|
|
621
|
-
(0,
|
|
635
|
+
(0, import_react14.useEffect)(() => {
|
|
622
636
|
if (ref.current) {
|
|
623
637
|
const typo = ref.current;
|
|
624
638
|
const mouseOver = () => {
|
|
@@ -633,7 +647,7 @@ function EllipsisTooltip(props) {
|
|
|
633
647
|
ref.current.addEventListener("mouseleave", mouseOut);
|
|
634
648
|
}
|
|
635
649
|
}, [children]);
|
|
636
|
-
return /* @__PURE__ */ (0,
|
|
650
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_themes48.Tooltip, { content: children, style: { display: tooltipDisplay }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
637
651
|
Typo,
|
|
638
652
|
__spreadProps(__spreadValues({}, rest), {
|
|
639
653
|
ref,
|
|
@@ -656,21 +670,21 @@ var Dialog2 = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
|
656
670
|
|
|
657
671
|
// src/theme/theme-provider.tsx
|
|
658
672
|
var import_themes50 = require("@radix-ui/themes");
|
|
659
|
-
var
|
|
673
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
660
674
|
function ThemeProvider(props) {
|
|
661
|
-
return /* @__PURE__ */ (0,
|
|
675
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_themes50.Theme, __spreadValues({ accentColor: "iris", radius: "medium" }, props));
|
|
662
676
|
}
|
|
663
677
|
|
|
664
678
|
// src/atoms/toast.tsx
|
|
665
679
|
var import_react_icons2 = require("@radix-ui/react-icons");
|
|
666
680
|
var import_react_toastify = require("react-toastify");
|
|
667
681
|
var import_react_toastify2 = require("react-toastify");
|
|
668
|
-
var
|
|
682
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
669
683
|
function CloseButton({ closeToast }) {
|
|
670
|
-
return /* @__PURE__ */ (0,
|
|
684
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_themes24.IconButton, { color: "gray", onClick: closeToast, variant: "ghost", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_icons2.Cross1Icon, {}) });
|
|
671
685
|
}
|
|
672
686
|
function ToastContainer(props) {
|
|
673
|
-
return /* @__PURE__ */ (0,
|
|
687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
674
688
|
import_react_toastify.ToastContainer,
|
|
675
689
|
__spreadValues({
|
|
676
690
|
autoClose: 5e3,
|
|
@@ -688,30 +702,30 @@ function ToastContainer(props) {
|
|
|
688
702
|
}
|
|
689
703
|
|
|
690
704
|
// src/atoms/drawer.tsx
|
|
691
|
-
var
|
|
705
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
692
706
|
function Root3(props) {
|
|
693
|
-
return /* @__PURE__ */ (0,
|
|
707
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Root, __spreadValues({}, props));
|
|
694
708
|
}
|
|
695
|
-
function
|
|
709
|
+
function Content4(props) {
|
|
696
710
|
const _a = props, { position = "right", className } = _a, rest = __objRest(_a, ["position", "className"]);
|
|
697
|
-
return /* @__PURE__ */ (0,
|
|
698
|
-
/* @__PURE__ */ (0,
|
|
699
|
-
/* @__PURE__ */ (0,
|
|
711
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(ThemeProvider, { children: [
|
|
712
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Overlay, { className: "DrawerOverlay" }),
|
|
713
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
700
714
|
Dialog2.Content,
|
|
701
715
|
__spreadValues({
|
|
702
716
|
className: `DrawerContent ${position} ${className || ""}`
|
|
703
717
|
}, rest)
|
|
704
718
|
),
|
|
705
|
-
/* @__PURE__ */ (0,
|
|
719
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ToastContainer, {})
|
|
706
720
|
] }) });
|
|
707
721
|
}
|
|
708
722
|
function Trigger2(props) {
|
|
709
|
-
return /* @__PURE__ */ (0,
|
|
723
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Dialog2.Trigger, __spreadValues({ asChild: true }, props));
|
|
710
724
|
}
|
|
711
725
|
var Drawer = {
|
|
712
726
|
Root: Dialog2.Root,
|
|
713
727
|
Trigger: Trigger2,
|
|
714
|
-
Content:
|
|
728
|
+
Content: Content4,
|
|
715
729
|
Close: Dialog2.Close,
|
|
716
730
|
Title: Dialog2.Title,
|
|
717
731
|
Description: Dialog2.Description
|
|
@@ -719,12 +733,12 @@ var Drawer = {
|
|
|
719
733
|
|
|
720
734
|
// src/atoms/form.tsx
|
|
721
735
|
var RadixForm = __toESM(require("@radix-ui/react-form"), 1);
|
|
722
|
-
var
|
|
723
|
-
var
|
|
724
|
-
var Root5 = (0,
|
|
736
|
+
var import_react15 = require("react");
|
|
737
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
738
|
+
var Root5 = (0, import_react15.forwardRef)(
|
|
725
739
|
(_a, ref) => {
|
|
726
740
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
727
|
-
return /* @__PURE__ */ (0,
|
|
741
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
728
742
|
RadixForm.Root,
|
|
729
743
|
__spreadProps(__spreadValues({}, rest), {
|
|
730
744
|
className: `FormRoot ${className || ""}`,
|
|
@@ -735,10 +749,10 @@ var Root5 = (0, import_react14.forwardRef)(
|
|
|
735
749
|
}
|
|
736
750
|
);
|
|
737
751
|
Root5.displayName = "FORM_ROOT";
|
|
738
|
-
var Field2 = (0,
|
|
752
|
+
var Field2 = (0, import_react15.forwardRef)(
|
|
739
753
|
(_a, ref) => {
|
|
740
754
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
741
|
-
return /* @__PURE__ */ (0,
|
|
755
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
742
756
|
RadixForm.Field,
|
|
743
757
|
__spreadProps(__spreadValues({}, rest), {
|
|
744
758
|
className: `FormField ${className || ""}`,
|
|
@@ -749,10 +763,10 @@ var Field2 = (0, import_react14.forwardRef)(
|
|
|
749
763
|
}
|
|
750
764
|
);
|
|
751
765
|
Field2.displayName = "FORM_FIELD";
|
|
752
|
-
var Label2 = (0,
|
|
766
|
+
var Label2 = (0, import_react15.forwardRef)(
|
|
753
767
|
(_a, ref) => {
|
|
754
768
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
755
|
-
return /* @__PURE__ */ (0,
|
|
769
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
756
770
|
RadixForm.Label,
|
|
757
771
|
__spreadProps(__spreadValues({}, rest), {
|
|
758
772
|
className: `FormLabel ${className || ""}`,
|
|
@@ -763,10 +777,10 @@ var Label2 = (0, import_react14.forwardRef)(
|
|
|
763
777
|
}
|
|
764
778
|
);
|
|
765
779
|
Label2.displayName = "FORM_Label";
|
|
766
|
-
var Message2 = (0,
|
|
780
|
+
var Message2 = (0, import_react15.forwardRef)(
|
|
767
781
|
(_a, ref) => {
|
|
768
782
|
var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
|
|
769
|
-
return /* @__PURE__ */ (0,
|
|
783
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
770
784
|
RadixForm.Message,
|
|
771
785
|
__spreadProps(__spreadValues({}, rest), {
|
|
772
786
|
className: `FormMessage ${className || ""}`,
|