@kimdw-rtk/ui 0.1.7 → 0.1.8
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/Accordion/Accordion.cjs +17 -0
- package/dist/components/Accordion/Accordion.css.vanilla.cjs +11 -0
- package/dist/components/Accordion/AccordionContent.cjs +61 -0
- package/dist/components/Accordion/AccordionContent.css.vanilla.cjs +14 -0
- package/dist/components/Accordion/AccordionContext.cjs +11 -0
- package/dist/components/Accordion/AccordionTrigger.cjs +19 -0
- package/dist/components/Accordion/AccordionTrigger.css.vanilla.cjs +14 -0
- package/dist/components/Alert/index.cjs +17 -0
- package/dist/components/Box/Box.css.vanilla.cjs +11 -0
- package/dist/components/Box/index.cjs +16 -0
- package/dist/components/Button/Button.css.vanilla.cjs +15 -0
- package/dist/components/Button/index.cjs +26 -0
- package/dist/components/Card/Card.cjs +15 -0
- package/dist/components/Card/Card.css.vanilla.cjs +14 -0
- package/dist/components/Card/CardContent.cjs +14 -0
- package/dist/components/Card/CardContent.css.vanilla.cjs +12 -0
- package/dist/components/Card/CardHeader.cjs +14 -0
- package/dist/components/Card/CardHeader.css.vanilla.cjs +12 -0
- package/dist/components/Card/CardInteraction.cjs +18 -0
- package/dist/components/Card/CardInteraction.css.vanilla.cjs +10 -0
- package/dist/components/Card/CardThumbnail.cjs +14 -0
- package/dist/components/Card/CardThumbnail.css.vanilla.cjs +10 -0
- package/dist/components/Chip/Chip.cjs +15 -0
- package/dist/components/Chip/Chip.css.vanilla.cjs +11 -0
- package/dist/components/Confirm/index.cjs +22 -0
- package/dist/components/Container/Container.css.vanilla.cjs +11 -0
- package/dist/components/Container/index.cjs +16 -0
- package/dist/components/Dialog/Dialog.cjs +15 -0
- package/dist/components/Dialog/Dialog.css.vanilla.cjs +7 -0
- package/dist/components/Dialog/DialogContent.cjs +15 -0
- package/dist/components/Dialog/DialogContent.css.vanilla.cjs +11 -0
- package/dist/components/Dialog/DialogFooter.cjs +14 -0
- package/dist/components/Dialog/DialogHeader.cjs +16 -0
- package/dist/components/Dialog/DialogHeader.css.vanilla.cjs +12 -0
- package/dist/components/Flex/Flex.css.vanilla.cjs +10 -0
- package/dist/components/Flex/index.cjs +16 -0
- package/dist/components/Navigation/NavigationAside.cjs +15 -0
- package/dist/components/Navigation/NavigationAside.css.vanilla.cjs +10 -0
- package/dist/components/Navigation/NavigationBar.cjs +18 -0
- package/dist/components/Navigation/NavigationBar.css.vanilla.cjs +13 -0
- package/dist/components/Navigation/NavigationContainer.cjs +15 -0
- package/dist/components/Navigation/NavigationContainer.css.vanilla.cjs +7 -0
- package/dist/components/Navigation/NavigationDrawer.cjs +30 -0
- package/dist/components/Navigation/NavigationDrawer.css.vanilla.cjs +16 -0
- package/dist/components/Navigation/NavigationItem.cjs +14 -0
- package/dist/components/Navigation/NavigationItem.css.vanilla.cjs +13 -0
- package/dist/components/Navigation/NavigationLogo.cjs +14 -0
- package/dist/components/Navigation/NavigationLogo.css.vanilla.cjs +10 -0
- package/dist/components/Navigation/NavigationMenu.cjs +15 -0
- package/dist/components/Navigation/NavigationMenu.css.vanilla.cjs +12 -0
- package/dist/components/Portal/index.cjs +12 -0
- package/dist/components/Range/Range.cjs +42 -0
- package/dist/components/Range/Range.css.vanilla.cjs +17 -0
- package/dist/components/ScrollArea/ScrollArea.cjs +39 -0
- package/dist/components/ScrollArea/ScrollArea.css.vanilla.cjs +18 -0
- package/dist/components/Select/Select.cjs +51 -0
- package/dist/components/Select/Select.css.vanilla.cjs +11 -0
- package/dist/components/Select/SelectContext.cjs +36 -0
- package/dist/components/Select/SelectOption.cjs +28 -0
- package/dist/components/Select/SelectOption.css.vanilla.cjs +10 -0
- package/dist/components/Select/SelectOptionList.cjs +39 -0
- package/dist/components/Select/SelectOptionList.css.vanilla.cjs +11 -0
- package/dist/components/Select/SelectTrigger.cjs +25 -0
- package/dist/components/Select/SelectTrigger.css.vanilla.cjs +12 -0
- package/dist/components/Separator/index.cjs +11 -0
- package/dist/components/Skeleton/Skeleton.css.vanilla.cjs +10 -0
- package/dist/components/Skeleton/index.cjs +14 -0
- package/dist/components/Table/Table.cjs +15 -0
- package/dist/components/Table/Table.css.vanilla.cjs +15 -0
- package/dist/components/Table/TableBody.cjs +11 -0
- package/dist/components/Table/TableCell.cjs +12 -0
- package/dist/components/Table/TableCell.css.vanilla.cjs +12 -0
- package/dist/components/Table/TableHead.cjs +12 -0
- package/dist/components/Table/TableHead.css.vanilla.cjs +10 -0
- package/dist/components/Table/TableHeader.cjs +11 -0
- package/dist/components/Table/TableRow.cjs +12 -0
- package/dist/components/Table/TableRow.css.vanilla.cjs +10 -0
- package/dist/components/Tabs/Tabs.cjs +16 -0
- package/dist/components/Tabs/TabsContent.cjs +22 -0
- package/dist/components/Tabs/TabsList.cjs +14 -0
- package/dist/components/Tabs/TabsList.css.vanilla.cjs +10 -0
- package/dist/components/Tabs/TabsProvider.cjs +12 -0
- package/dist/components/Tabs/TabsTrigger.cjs +24 -0
- package/dist/components/Tabs/TabsTrigger.css.vanilla.cjs +11 -0
- package/dist/components/TextField/TextField.css.vanilla.cjs +11 -0
- package/dist/components/TextField/index.cjs +15 -0
- package/dist/components/Toast/Toast.css.vanilla.cjs +13 -0
- package/dist/components/Toast/index.cjs +18 -0
- package/dist/components/Tooltip/Tooltip.css.vanilla.cjs +11 -0
- package/dist/components/Tooltip/index.cjs +31 -0
- package/dist/components/Typography/Typography.css.vanilla.cjs +11 -0
- package/dist/components/Typography/index.cjs +25 -0
- package/dist/contexts/UIProvider.cjs +15 -0
- package/dist/hooks/useContainer/ContainerProvider.cjs +13 -0
- package/dist/hooks/useContainer/index.cjs +12 -0
- package/dist/hooks/useDialog/index.cjs +34 -0
- package/dist/hooks/useMouseScroll/index.cjs +52 -0
- package/dist/hooks/usePointerSlider/index.cjs +49 -0
- package/dist/hooks/useRipple/index.cjs +116 -0
- package/dist/hooks/useRipple/ripple.css.vanilla.cjs +10 -0
- package/dist/hooks/useToast/ToastContainer.cjs +10 -0
- package/dist/hooks/useToast/ToastContainer.css.vanilla.cjs +7 -0
- package/dist/hooks/useToast/ToastProvider.cjs +54 -0
- package/dist/hooks/useToast/index.cjs +16 -0
- package/dist/index.cjs +176 -0
- package/dist/node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs +114 -0
- package/dist/node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.5_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/sprinkles/createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.cjs +11 -0
- package/dist/node_modules/.pnpm/@vanilla-extract_sprinkles@1.6.5_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/sprinkles/dist/createSprinkles-74286718.esm.cjs +192 -0
- package/dist/node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs +8 -0
- package/dist/node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/Icon.cjs +49 -0
- package/dist/node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/createLucideIcon.cjs +34 -0
- package/dist/node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/defaultAttributes.cjs +24 -0
- package/dist/node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/align-justify.cjs +23 -0
- package/dist/node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs +19 -0
- package/dist/node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/x.cjs +22 -0
- package/dist/node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/shared/src/utils.cjs +34 -0
- package/dist/styles/layers.css.vanilla.cjs +9 -0
- package/dist/styles/overlay.css.vanilla.cjs +11 -0
- package/dist/styles/sprinkles.css.vanilla.cjs +22 -0
- package/dist/styles/sx.cjs +15 -0
- package/dist/themes/darkTheme.css.vanilla.cjs +5 -0
- package/dist/themes/lightTheme.css.vanilla.cjs +5 -0
- package/dist/themes/theme.css.vanilla.cjs +5 -0
- package/dist/tokens/index.cjs +18 -0
- package/dist/tokens/scale/color.cjs +581 -0
- package/dist/tokens/semantic/breakpoint.cjs +10 -0
- package/dist/tokens/semantic/color.cjs +14 -0
- package/dist/tokens/semantic/spacing.cjs +15 -0
- package/dist/tokens/semantic/typography.cjs +36 -0
- package/dist/tokens/semantic/width.cjs +9 -0
- package/dist/utils/sprinklesUtils.cjs +25 -0
- package/package.json +9 -6
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./Skeleton.css.ts.vanilla.css');
|
|
7
|
+
|
|
8
|
+
var skeleton = 'Skeleton_styleWithLayer__a0ivc31';
|
|
9
|
+
|
|
10
|
+
exports.skeleton = skeleton;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
6
|
+
var Skeleton_css = require('./Skeleton.css.vanilla.cjs');
|
|
7
|
+
var sx = require('../../styles/sx.cjs');
|
|
8
|
+
|
|
9
|
+
const Skeleton = react.forwardRef(({ className, width, height, style, sx: propSx, ...props }, ref) => {
|
|
10
|
+
return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Skeleton_css.skeleton, className, sx.sx(propSx)), style: { ...style, width, height }, ...props }));
|
|
11
|
+
});
|
|
12
|
+
Skeleton.displayName = 'Skeleton';
|
|
13
|
+
|
|
14
|
+
exports.Skeleton = Skeleton;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
6
|
+
var Table_css = require('./Table.css.vanilla.cjs');
|
|
7
|
+
var sx = require('../../styles/sx.cjs');
|
|
8
|
+
|
|
9
|
+
const Table = react.forwardRef(({ isStriped, className, size = 'md', sx: propSx, ...props }, ref) => {
|
|
10
|
+
return (jsxRuntime.jsx("table", { ref: ref, className: clsx.clsx(Table_css.table({ size }), isStriped && Table_css.striped, sx.sx(propSx), className), ...props }));
|
|
11
|
+
});
|
|
12
|
+
Table.displayName = 'Table';
|
|
13
|
+
|
|
14
|
+
exports.tableCss = Table_css;
|
|
15
|
+
exports.Table = Table;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./Table.css.ts.vanilla.css');
|
|
7
|
+
var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
|
|
8
|
+
|
|
9
|
+
var paddingVar = 'var(--paddingVar__cuva6j0)';
|
|
10
|
+
var striped = 'Table_styleWithLayer__cuva6jb';
|
|
11
|
+
var table = createRuntimeFn62c9670f_esm.c({defaultClassName:'Table__cuva6j6 Table_layeredBase__cuva6j1',variantClassNames:{size:{sm:'Table_styleWithLayer__cuva6j2',md:'Table_styleWithLayer__cuva6j3',lg:'Table_styleWithLayer__cuva6j4',xl:'Table_styleWithLayer__cuva6j5'}},defaultVariants:{},compoundVariants:[]});
|
|
12
|
+
|
|
13
|
+
exports.paddingVar = paddingVar;
|
|
14
|
+
exports.striped = striped;
|
|
15
|
+
exports.table = table;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
5
|
+
var sx = require('../../styles/sx.cjs');
|
|
6
|
+
|
|
7
|
+
const TableBody = ({ className, sx: propSx, ...props }) => {
|
|
8
|
+
return jsxRuntime.jsx("tbody", { className: clsx.clsx(className, sx.sx(propSx)), ...props });
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
exports.TableBody = TableBody;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
5
|
+
var TableCell_css = require('./TableCell.css.vanilla.cjs');
|
|
6
|
+
var sx = require('../../styles/sx.cjs');
|
|
7
|
+
|
|
8
|
+
const TableCell = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
|
|
9
|
+
return (jsxRuntime.jsx("td", { className: clsx.clsx(TableCell_css.tableCell, className, sx.sx(propSx)), style: { ...style, width, textAlign }, ...props }));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
exports.TableCell = TableCell;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./Table.css.ts.vanilla.css');
|
|
7
|
+
require('./TableRow.css.ts.vanilla.css');
|
|
8
|
+
require('./TableCell.css.ts.vanilla.css');
|
|
9
|
+
|
|
10
|
+
var tableCell = 'TableCell_styleWithLayer__1a6tmtd0';
|
|
11
|
+
|
|
12
|
+
exports.tableCell = tableCell;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
5
|
+
var TableHead_css = require('./TableHead.css.vanilla.cjs');
|
|
6
|
+
var sx = require('../../styles/sx.cjs');
|
|
7
|
+
|
|
8
|
+
const TableHead = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
|
|
9
|
+
return (jsxRuntime.jsx("th", { className: clsx.clsx(TableHead_css.tableHead, className, sx.sx(propSx)), style: { ...style, width, textAlign }, ...props }));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
exports.TableHead = TableHead;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./TableHead.css.ts.vanilla.css');
|
|
7
|
+
|
|
8
|
+
var tableHead = 'TableHead_styleWithLayer__1sk0un50';
|
|
9
|
+
|
|
10
|
+
exports.tableHead = tableHead;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
5
|
+
var sx = require('../../styles/sx.cjs');
|
|
6
|
+
|
|
7
|
+
const TableHeader = ({ className, sx: propSx, ...props }) => {
|
|
8
|
+
return jsxRuntime.jsx("thead", { className: clsx.clsx(className, sx.sx(propSx)), ...props });
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
exports.TableHeader = TableHeader;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
5
|
+
var TableRow_css = require('./TableRow.css.vanilla.cjs');
|
|
6
|
+
var sx = require('../../styles/sx.cjs');
|
|
7
|
+
|
|
8
|
+
const TableRow = ({ isInteractive = false, className, sx: propSx, ...props }) => {
|
|
9
|
+
return (jsxRuntime.jsx("tr", { className: clsx.clsx(isInteractive && TableRow_css.interactive, className, sx.sx(propSx)), ...props }));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
exports.TableRow = TableRow;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./TableRow.css.ts.vanilla.css');
|
|
7
|
+
|
|
8
|
+
var interactive = 'TableRow_styleWithLayer__1ntlunj0';
|
|
9
|
+
|
|
10
|
+
exports.interactive = interactive;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
7
|
+
var TabsProvider = require('./TabsProvider.cjs');
|
|
8
|
+
var sx = require('../../styles/sx.cjs');
|
|
9
|
+
|
|
10
|
+
const Tabs = react.forwardRef(({ children, defaultValue, className, sx: propSx, ...props }, ref) => {
|
|
11
|
+
const [value, setValue] = react.useReducer(TabsProvider.tabsReducer, defaultValue);
|
|
12
|
+
return (jsxRuntime.jsx(TabsProvider.TabsContext.Provider, { value: { value, setValue }, children: jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, sx.sx(propSx)), style: { width: '100%' }, ...props, children: children }) }));
|
|
13
|
+
});
|
|
14
|
+
Tabs.displayName = 'Tabs';
|
|
15
|
+
|
|
16
|
+
exports.Tabs = Tabs;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
7
|
+
var TabsProvider = require('./TabsProvider.cjs');
|
|
8
|
+
var sx = require('../../styles/sx.cjs');
|
|
9
|
+
|
|
10
|
+
const TabsContent = react.forwardRef(({ value, className, sx: propSx, ...props }, ref) => {
|
|
11
|
+
const tabsContext = react.useContext(TabsProvider.TabsContext);
|
|
12
|
+
if (tabsContext === undefined) {
|
|
13
|
+
throw new Error('TabsContext must be used within a Tabs.');
|
|
14
|
+
}
|
|
15
|
+
if (tabsContext.value !== value) {
|
|
16
|
+
return null;
|
|
17
|
+
}
|
|
18
|
+
return jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, sx.sx(propSx)), ...props });
|
|
19
|
+
});
|
|
20
|
+
TabsContent.displayName = 'TabsContent';
|
|
21
|
+
|
|
22
|
+
exports.TabsContent = TabsContent;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
6
|
+
var TabsList_css = require('./TabsList.css.vanilla.cjs');
|
|
7
|
+
var sx = require('../../styles/sx.cjs');
|
|
8
|
+
|
|
9
|
+
const TabsList = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
|
|
10
|
+
return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, TabsList_css.container, sx.sx(propSx)), ...props, children: children }));
|
|
11
|
+
});
|
|
12
|
+
TabsList.displayName = 'TabsList';
|
|
13
|
+
|
|
14
|
+
exports.TabsList = TabsList;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./TabsList.css.ts.vanilla.css');
|
|
7
|
+
|
|
8
|
+
var container = 'TabsList_styleWithLayer__9gciwt0';
|
|
9
|
+
|
|
10
|
+
exports.container = container;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
const TabsContext = react.createContext(undefined);
|
|
7
|
+
const tabsReducer = (_, value) => {
|
|
8
|
+
return value;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
exports.TabsContext = TabsContext;
|
|
12
|
+
exports.tabsReducer = tabsReducer;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
7
|
+
var TabsProvider = require('./TabsProvider.cjs');
|
|
8
|
+
var TabsTrigger_css = require('./TabsTrigger.css.vanilla.cjs');
|
|
9
|
+
var sx = require('../../styles/sx.cjs');
|
|
10
|
+
|
|
11
|
+
const TabsTrigger = react.forwardRef(({ children, value, className, sx: propSx, ...props }, ref) => {
|
|
12
|
+
const tabsContext = react.useContext(TabsProvider.TabsContext);
|
|
13
|
+
if (tabsContext === undefined) {
|
|
14
|
+
throw new Error('TabsTrigger must be used within a Tabs.');
|
|
15
|
+
}
|
|
16
|
+
const isSelected = tabsContext.value === value;
|
|
17
|
+
const handleClick = () => {
|
|
18
|
+
tabsContext.setValue(value);
|
|
19
|
+
};
|
|
20
|
+
return (jsxRuntime.jsx("button", { ref: ref, className: clsx.clsx(className, TabsTrigger_css.container({ isSelected }), sx.sx(propSx)), onClick: handleClick, ...props, children: children }));
|
|
21
|
+
});
|
|
22
|
+
TabsTrigger.displayName = 'TabsTrigger';
|
|
23
|
+
|
|
24
|
+
exports.TabsTrigger = TabsTrigger;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./TabsTrigger.css.ts.vanilla.css');
|
|
7
|
+
var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
|
|
8
|
+
|
|
9
|
+
var container = createRuntimeFn62c9670f_esm.c({defaultClassName:'TabsTrigger__rk5ejr3 TabsTrigger_layeredBase__rk5ejr0',variantClassNames:{isSelected:{true:'TabsTrigger_styleWithLayer__rk5ejr1',false:'TabsTrigger_styleWithLayer__rk5ejr2'}},defaultVariants:{},compoundVariants:[]});
|
|
10
|
+
|
|
11
|
+
exports.container = container;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./TextField.css.ts.vanilla.css');
|
|
7
|
+
var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
|
|
8
|
+
|
|
9
|
+
var textField = createRuntimeFn62c9670f_esm.c({defaultClassName:'TextField__q8l7gtz TextField_layeredBase__q8l7gtv',variantClassNames:{color:{primary:'TextField_styleWithLayer__q8l7gt1',secondary:'TextField_styleWithLayer__q8l7gt2',muted:'TextField_styleWithLayer__q8l7gt3',accent:'TextField_styleWithLayer__q8l7gt4',card:'TextField_styleWithLayer__q8l7gt5',danger:'TextField_styleWithLayer__q8l7gt6',warning:'TextField_styleWithLayer__q8l7gt7',success:'TextField_styleWithLayer__q8l7gt8',red:'TextField_styleWithLayer__q8l7gt9',orange:'TextField_styleWithLayer__q8l7gta',amber:'TextField_styleWithLayer__q8l7gtb',yellow:'TextField_styleWithLayer__q8l7gtc',lime:'TextField_styleWithLayer__q8l7gtd',green:'TextField_styleWithLayer__q8l7gte',emerald:'TextField_styleWithLayer__q8l7gtf',teal:'TextField_styleWithLayer__q8l7gtg',cyan:'TextField_styleWithLayer__q8l7gth',sky:'TextField_styleWithLayer__q8l7gti',blue:'TextField_styleWithLayer__q8l7gtj',indigo:'TextField_styleWithLayer__q8l7gtk',violet:'TextField_styleWithLayer__q8l7gtl',purple:'TextField_styleWithLayer__q8l7gtm',fuchsia:'TextField_styleWithLayer__q8l7gtn',pink:'TextField_styleWithLayer__q8l7gto',rose:'TextField_styleWithLayer__q8l7gtp',slate:'TextField_styleWithLayer__q8l7gtq',gray:'TextField_styleWithLayer__q8l7gtr',zinc:'TextField_styleWithLayer__q8l7gts',neutral:'TextField_styleWithLayer__q8l7gtt',stone:'TextField_styleWithLayer__q8l7gtu'},size:{sm:'TextField_styleWithLayer__q8l7gtw',md:'TextField_styleWithLayer__q8l7gtx',lg:'TextField_styleWithLayer__q8l7gty'}},defaultVariants:{},compoundVariants:[]});
|
|
10
|
+
|
|
11
|
+
exports.textField = textField;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
6
|
+
var TextField_css = require('./TextField.css.vanilla.cjs');
|
|
7
|
+
var sx = require('../../styles/sx.cjs');
|
|
8
|
+
|
|
9
|
+
const TextField = react.forwardRef(({ className, type = 'text', size = 'md', color = 'primary', sx: propSx, ...props }, ref) => {
|
|
10
|
+
return (jsxRuntime.jsx("input", { ref: ref, className: clsx.clsx(className, TextField_css.textField({ size, color }), sx.sx(propSx)), type: type, ...props }));
|
|
11
|
+
});
|
|
12
|
+
TextField.displayName = 'TextField';
|
|
13
|
+
|
|
14
|
+
exports.textFieldCss = TextField_css;
|
|
15
|
+
exports.TextField = TextField;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./Toast.css.ts.vanilla.css');
|
|
7
|
+
var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
|
|
8
|
+
|
|
9
|
+
var progress = createRuntimeFn62c9670f_esm.c({defaultClassName:'Toast__1nxbvh6e Toast_layeredBase__1nxbvh6b',variantClassNames:{animation:{true:'Toast_styleWithLayer__1nxbvh6c',false:'Toast_styleWithLayer__1nxbvh6d'}},defaultVariants:{},compoundVariants:[]});
|
|
10
|
+
var toast = createRuntimeFn62c9670f_esm.c({defaultClassName:'Toast__1nxbvh6i Toast_layeredBase__1nxbvh6h',variantClassNames:{color:{primary:'Toast_styleWithLayer__1nxbvh62',secondary:'Toast_styleWithLayer__1nxbvh63',muted:'Toast_styleWithLayer__1nxbvh64',accent:'Toast_styleWithLayer__1nxbvh65',card:'Toast_styleWithLayer__1nxbvh66',danger:'Toast_styleWithLayer__1nxbvh67',warning:'Toast_styleWithLayer__1nxbvh68',success:'Toast_styleWithLayer__1nxbvh69'}},defaultVariants:{},compoundVariants:[]});
|
|
11
|
+
|
|
12
|
+
exports.progress = progress;
|
|
13
|
+
exports.toast = toast;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
6
|
+
var Toast_css = require('./Toast.css.vanilla.cjs');
|
|
7
|
+
var index = require('../Box/index.cjs');
|
|
8
|
+
var sx = require('../../styles/sx.cjs');
|
|
9
|
+
|
|
10
|
+
const Toast = react.forwardRef(({ children, color = 'accent', className, duration = 0, sx: propSx, ...props }, ref) => {
|
|
11
|
+
return (jsxRuntime.jsxs(index.Box, { ref: ref, boxShadow: "accent-sm", className: clsx.clsx(Toast_css.toast({ color }), className, sx.sx(propSx)), rounded: true, ...props, children: [jsxRuntime.jsx("div", { className: Toast_css.progress({ animation: duration !== 0 }), style: {
|
|
12
|
+
animationDuration: duration > 0 ? `${duration}ms` : undefined,
|
|
13
|
+
} }), jsxRuntime.jsx("span", { style: { position: 'relative' }, children: children })] }));
|
|
14
|
+
});
|
|
15
|
+
Toast.displayName = 'Toast';
|
|
16
|
+
|
|
17
|
+
exports.toastCss = Toast_css;
|
|
18
|
+
exports.Toast = Toast;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./Tooltip.css.ts.vanilla.css');
|
|
7
|
+
var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
|
|
8
|
+
|
|
9
|
+
var tooltip = createRuntimeFn62c9670f_esm.c({defaultClassName:'Tooltip__1s9n3or5 Tooltip_layeredBase__1s9n3or1',variantClassNames:{size:{sm:'Tooltip_styleWithLayer__1s9n3or2',md:'Tooltip_styleWithLayer__1s9n3or3',lg:'Tooltip_styleWithLayer__1s9n3or4'}},defaultVariants:{},compoundVariants:[]});
|
|
10
|
+
|
|
11
|
+
exports.tooltip = tooltip;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var Tooltip_css = require('./Tooltip.css.vanilla.cjs');
|
|
7
|
+
var index = require('../Portal/index.cjs');
|
|
8
|
+
|
|
9
|
+
const Tooltip = ({ children, content, size = 'sm' }) => {
|
|
10
|
+
const [isVisible, setIsVisible] = react.useState(false);
|
|
11
|
+
const [position, setPosition] = react.useState({
|
|
12
|
+
x: 0,
|
|
13
|
+
y: 0,
|
|
14
|
+
});
|
|
15
|
+
const handlePointerOver = (e) => {
|
|
16
|
+
const rect = e.currentTarget.getBoundingClientRect();
|
|
17
|
+
setIsVisible(true);
|
|
18
|
+
setPosition({ x: rect.x + rect.width / 2, y: rect.y + rect.height + 4 });
|
|
19
|
+
children.props?.onPointerOver?.(e);
|
|
20
|
+
};
|
|
21
|
+
const handlePointerOut = (e) => {
|
|
22
|
+
setIsVisible(false);
|
|
23
|
+
children.props?.onPointerOut?.(e);
|
|
24
|
+
};
|
|
25
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [react.cloneElement(children, {
|
|
26
|
+
onPointerOver: handlePointerOver,
|
|
27
|
+
onPointerOut: handlePointerOut,
|
|
28
|
+
}), isVisible && (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsx("div", { className: Tooltip_css.tooltip({ size }), style: { top: position.y, left: position.x }, children: content }) }))] }));
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
exports.Tooltip = Tooltip;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('./../../styles/layers.css.ts.vanilla.css');
|
|
4
|
+
require('./../../styles/sprinkles.css.ts.vanilla.css');
|
|
5
|
+
require('./../../styles/globalStyle.css.ts.vanilla.css');
|
|
6
|
+
require('./Typography.css.ts.vanilla.css');
|
|
7
|
+
var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
|
|
8
|
+
|
|
9
|
+
var typography = createRuntimeFn62c9670f_esm.c({defaultClassName:'Typography__q3o6cc3 Typography_layeredBase__q3o6cc0',variantClassNames:{isEllipsis:{true:'Typography_styleWithLayer__q3o6cc1'},isGradient:{true:'Typography_styleWithLayer__q3o6cc2'}},defaultVariants:{},compoundVariants:[]});
|
|
10
|
+
|
|
11
|
+
exports.typography = typography;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
|
|
6
|
+
var Typography_css = require('./Typography.css.vanilla.cjs');
|
|
7
|
+
var sprinkles_css = require('../../styles/sprinkles.css.vanilla.cjs');
|
|
8
|
+
|
|
9
|
+
const Typography = react.forwardRef(({ children, as: Component = 'p', className, color = 'foreground', fontSize = 'md', fontWeight = 'normal', lineHeight, textAlign, letterSpacing, wordBreak, gradientFrom, gradientTo, isEllipsis = false, isGradient = false, sx, ...props }, ref) => {
|
|
10
|
+
return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Typography_css.typography({ isEllipsis, isGradient }), sprinkles_css.sprinkles({
|
|
11
|
+
color,
|
|
12
|
+
fontSize,
|
|
13
|
+
fontWeight,
|
|
14
|
+
lineHeight,
|
|
15
|
+
textAlign,
|
|
16
|
+
letterSpacing,
|
|
17
|
+
wordBreak,
|
|
18
|
+
gradientFrom,
|
|
19
|
+
gradientTo,
|
|
20
|
+
}), sx && sprinkles_css.sprinkles(sx), className), ...props, children: children }));
|
|
21
|
+
});
|
|
22
|
+
Typography.displayName = 'Typography';
|
|
23
|
+
|
|
24
|
+
exports.typographyCss = Typography_css;
|
|
25
|
+
exports.Typography = Typography;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var utils = require('@kimdw-rtk/utils');
|
|
6
|
+
var overlay_css = require('../styles/overlay.css.vanilla.cjs');
|
|
7
|
+
var ContainerProvider = require('../hooks/useContainer/ContainerProvider.cjs');
|
|
8
|
+
var ToastProvider = require('../hooks/useToast/ToastProvider.cjs');
|
|
9
|
+
var index = require('../components/Portal/index.cjs');
|
|
10
|
+
|
|
11
|
+
const UIProvider = ({ children, container, overlayUnmountOn = 'transitionEnd', }) => {
|
|
12
|
+
return (jsxRuntime.jsx(ContainerProvider.ContainerProvider, { container: container, children: jsxRuntime.jsx(ToastProvider.ToastProvider, { children: jsxRuntime.jsx(utils.OverlayProvider, { className: { ...overlay_css }, renderOverlay: (overlayChildren) => (jsxRuntime.jsx(index.Portal, { children: overlayChildren })), unmountOn: overlayUnmountOn, children: children }) }) }));
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
exports.UIProvider = UIProvider;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
|
|
7
|
+
const ContainerContext = react.createContext(undefined);
|
|
8
|
+
const ContainerProvider = ({ children, container, }) => {
|
|
9
|
+
return (jsxRuntime.jsx(ContainerContext.Provider, { value: container, children: children }));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
exports.ContainerContext = ContainerContext;
|
|
13
|
+
exports.ContainerProvider = ContainerProvider;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var react = require('react');
|
|
5
|
+
var ContainerProvider = require('./ContainerProvider.cjs');
|
|
6
|
+
|
|
7
|
+
const useContainer = () => {
|
|
8
|
+
const containerContext = react.useContext(ContainerProvider.ContainerContext);
|
|
9
|
+
return containerContext;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
exports.useContainer = useContainer;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var react = require('react');
|
|
6
|
+
var utils = require('@kimdw-rtk/utils');
|
|
7
|
+
var index = require('../../components/Alert/index.cjs');
|
|
8
|
+
var index$1 = require('../../components/Confirm/index.cjs');
|
|
9
|
+
|
|
10
|
+
const useDialog = () => {
|
|
11
|
+
const { push } = utils.useOverlay();
|
|
12
|
+
const dialogRef = react.useRef(null);
|
|
13
|
+
const alert = react.useCallback((message) => {
|
|
14
|
+
return new Promise((resolve) => {
|
|
15
|
+
push(jsxRuntime.jsx(index.Alert, { children: message }), { onClose: () => resolve(true) });
|
|
16
|
+
});
|
|
17
|
+
}, [push]);
|
|
18
|
+
const confirm = react.useCallback((message) => {
|
|
19
|
+
return new Promise((resolve) => {
|
|
20
|
+
const handleConfirm = () => {
|
|
21
|
+
resolve(true);
|
|
22
|
+
dialogRef.current?.close();
|
|
23
|
+
};
|
|
24
|
+
const handleCancle = () => {
|
|
25
|
+
resolve(false);
|
|
26
|
+
dialogRef.current?.close();
|
|
27
|
+
};
|
|
28
|
+
push(jsxRuntime.jsx(index$1.Confirm, { ref: dialogRef, onCancle: handleCancle, onConfirm: handleConfirm, children: message }), { onClose: () => resolve(false) });
|
|
29
|
+
});
|
|
30
|
+
}, [push]);
|
|
31
|
+
return react.useMemo(() => ({ alert, confirm }), [alert, confirm]);
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
exports.useDialog = useDialog;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook
|
|
8
|
+
*/
|
|
9
|
+
const useMouseScroll = (ref) => {
|
|
10
|
+
react.useEffect(() => {
|
|
11
|
+
const element = ref.current;
|
|
12
|
+
let isDown = false, startX = 0, startLeft = 0;
|
|
13
|
+
if (element === null) {
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
const handleMouseDown = (e) => {
|
|
17
|
+
if (!element.contains(e.target)) {
|
|
18
|
+
return;
|
|
19
|
+
}
|
|
20
|
+
isDown = true;
|
|
21
|
+
startLeft = element.scrollLeft;
|
|
22
|
+
startX = e.x;
|
|
23
|
+
};
|
|
24
|
+
const handleMouseMove = (e) => {
|
|
25
|
+
if (!isDown) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
element.scrollLeft = startLeft + startX - e.x;
|
|
29
|
+
};
|
|
30
|
+
const handleMouseUp = () => {
|
|
31
|
+
isDown = false;
|
|
32
|
+
};
|
|
33
|
+
const handleWheel = (e) => {
|
|
34
|
+
element.scrollTo({
|
|
35
|
+
left: element.scrollLeft + e.deltaY,
|
|
36
|
+
behavior: 'smooth',
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
window.addEventListener('mousedown', handleMouseDown);
|
|
40
|
+
window.addEventListener('mousemove', handleMouseMove);
|
|
41
|
+
window.addEventListener('mouseup', handleMouseUp);
|
|
42
|
+
element.addEventListener('wheel', handleWheel);
|
|
43
|
+
return () => {
|
|
44
|
+
window.removeEventListener('mousedown', handleMouseDown);
|
|
45
|
+
window.removeEventListener('mousemove', handleMouseMove);
|
|
46
|
+
window.removeEventListener('mouseup', handleMouseUp);
|
|
47
|
+
element.removeEventListener('wheel', handleWheel);
|
|
48
|
+
};
|
|
49
|
+
}, [ref]);
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
exports.useMouseScroll = useMouseScroll;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var react = require('react');
|
|
5
|
+
|
|
6
|
+
const usePointerSlider = (ref, { min, max, defaultValue, }) => {
|
|
7
|
+
const [value, setValue] = react.useState(defaultValue);
|
|
8
|
+
react.useEffect(() => {
|
|
9
|
+
const element = ref.current;
|
|
10
|
+
let isDown = false, parentWidth = 0, parentX = 0;
|
|
11
|
+
if (element === null) {
|
|
12
|
+
return;
|
|
13
|
+
}
|
|
14
|
+
element.style.left = `${((defaultValue - min) / (max - min)) * 100}%`;
|
|
15
|
+
const handlePointerDown = (e) => {
|
|
16
|
+
element.setPointerCapture(e.pointerId);
|
|
17
|
+
isDown = true;
|
|
18
|
+
const boundingRect = element.parentElement?.getBoundingClientRect();
|
|
19
|
+
if (boundingRect === undefined) {
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
parentWidth = boundingRect.width;
|
|
23
|
+
parentX = boundingRect.x;
|
|
24
|
+
};
|
|
25
|
+
const handlePointerMove = (e) => {
|
|
26
|
+
if (!isDown) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
const currentValue = Math.min(max, Math.max(min, Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min));
|
|
30
|
+
element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;
|
|
31
|
+
setValue(currentValue);
|
|
32
|
+
};
|
|
33
|
+
const handlePointerUp = (e) => {
|
|
34
|
+
element.releasePointerCapture(e.pointerId);
|
|
35
|
+
isDown = false;
|
|
36
|
+
};
|
|
37
|
+
element.addEventListener('pointerdown', handlePointerDown);
|
|
38
|
+
element.addEventListener('pointermove', handlePointerMove);
|
|
39
|
+
element.addEventListener('pointerup', handlePointerUp);
|
|
40
|
+
return () => {
|
|
41
|
+
element.removeEventListener('pointerdown', handlePointerDown);
|
|
42
|
+
element.removeEventListener('pointermove', handlePointerMove);
|
|
43
|
+
element.removeEventListener('pointerup', handlePointerUp);
|
|
44
|
+
};
|
|
45
|
+
}, [ref, max, min, defaultValue]);
|
|
46
|
+
return value;
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
exports.usePointerSlider = usePointerSlider;
|