@a-type/ui 2.1.12 → 2.1.13
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/cjs/colorMode.d.ts +1 -0
- package/dist/cjs/colorMode.js +4 -0
- package/dist/cjs/colorMode.js.map +1 -1
- package/dist/cjs/components/box/Box.d.ts +2 -1
- package/dist/cjs/components/box/Box.js +2 -2
- package/dist/cjs/components/box/Box.js.map +1 -1
- package/dist/cjs/components/dialog/Dialog.d.ts +7 -17
- package/dist/cjs/components/dialog/Dialog.js +23 -10
- package/dist/cjs/components/dialog/Dialog.js.map +1 -1
- package/dist/cjs/components/dialog/Dialog.stories.d.ts +2 -6
- package/dist/cjs/components/dialog/Dialog.stories.js +10 -3
- package/dist/cjs/components/dialog/Dialog.stories.js.map +1 -1
- package/dist/cjs/components/layouts/PageNav.js +1 -1
- package/dist/cjs/components/layouts/PageNav.js.map +1 -1
- package/dist/cjs/components/layouts/PageNowPlaying.js +1 -1
- package/dist/cjs/components/layouts/PageNowPlaying.js.map +1 -1
- package/dist/cjs/components/particles/ParticleLayer.js +2 -2
- package/dist/cjs/components/particles/ParticleLayer.js.map +1 -1
- package/dist/cjs/components/provider/Provider.js +4 -0
- package/dist/cjs/components/provider/Provider.js.map +1 -1
- package/dist/cjs/hooks/useMediaQuery.d.ts +1 -0
- package/dist/cjs/hooks/useMediaQuery.js +24 -0
- package/dist/cjs/hooks/useMediaQuery.js.map +1 -0
- package/dist/cjs/hooks/useTitleBarColor.d.ts +4 -1
- package/dist/cjs/hooks/useTitleBarColor.js +19 -3
- package/dist/cjs/hooks/useTitleBarColor.js.map +1 -1
- package/dist/cjs/hooks/useTitleBarColor.stories.d.ts +14 -0
- package/dist/cjs/hooks/useTitleBarColor.stories.js +56 -0
- package/dist/cjs/hooks/useTitleBarColor.stories.js.map +1 -0
- package/dist/cjs/uno.preset.d.ts +2 -1
- package/dist/cjs/uno.preset.js +15 -22
- package/dist/cjs/uno.preset.js.map +1 -1
- package/dist/css/main.css +4 -2
- package/dist/esm/colorMode.d.ts +1 -0
- package/dist/esm/colorMode.js +3 -0
- package/dist/esm/colorMode.js.map +1 -1
- package/dist/esm/components/box/Box.d.ts +2 -1
- package/dist/esm/components/box/Box.js +2 -2
- package/dist/esm/components/box/Box.js.map +1 -1
- package/dist/esm/components/dialog/Dialog.d.ts +7 -17
- package/dist/esm/components/dialog/Dialog.js +23 -10
- package/dist/esm/components/dialog/Dialog.js.map +1 -1
- package/dist/esm/components/dialog/Dialog.stories.d.ts +2 -6
- package/dist/esm/components/dialog/Dialog.stories.js +7 -0
- package/dist/esm/components/dialog/Dialog.stories.js.map +1 -1
- package/dist/esm/components/layouts/PageNav.js +1 -1
- package/dist/esm/components/layouts/PageNav.js.map +1 -1
- package/dist/esm/components/layouts/PageNowPlaying.js +1 -1
- package/dist/esm/components/layouts/PageNowPlaying.js.map +1 -1
- package/dist/esm/components/particles/ParticleLayer.js +2 -2
- package/dist/esm/components/particles/ParticleLayer.js.map +1 -1
- package/dist/esm/components/provider/Provider.js +5 -1
- package/dist/esm/components/provider/Provider.js.map +1 -1
- package/dist/esm/hooks/useMediaQuery.d.ts +1 -0
- package/dist/esm/hooks/useMediaQuery.js +21 -0
- package/dist/esm/hooks/useMediaQuery.js.map +1 -0
- package/dist/esm/hooks/useTitleBarColor.d.ts +4 -1
- package/dist/esm/hooks/useTitleBarColor.js +19 -3
- package/dist/esm/hooks/useTitleBarColor.js.map +1 -1
- package/dist/esm/hooks/useTitleBarColor.stories.d.ts +14 -0
- package/dist/esm/hooks/useTitleBarColor.stories.js +53 -0
- package/dist/esm/hooks/useTitleBarColor.stories.js.map +1 -0
- package/dist/esm/uno.preset.d.ts +2 -1
- package/dist/esm/uno.preset.js +15 -22
- package/dist/esm/uno.preset.js.map +1 -1
- package/package.json +1 -1
- package/src/colorMode.ts +8 -0
- package/src/components/box/Box.tsx +3 -1
- package/src/components/dialog/Dialog.stories.tsx +41 -0
- package/src/components/dialog/Dialog.tsx +45 -18
- package/src/components/layouts/PageNav.tsx +1 -1
- package/src/components/layouts/PageNowPlaying.tsx +1 -1
- package/src/components/particles/ParticleLayer.tsx +2 -2
- package/src/components/provider/Provider.tsx +5 -1
- package/src/hooks/useMediaQuery.ts +25 -0
- package/src/hooks/useTitleBarColor.stories.tsx +100 -0
- package/src/hooks/useTitleBarColor.ts +24 -4
- package/src/uno.preset.ts +17 -7
package/dist/cjs/colorMode.d.ts
CHANGED
|
@@ -3,3 +3,4 @@ export declare function getColorMode(): 'system' | 'light' | 'dark';
|
|
|
3
3
|
export declare function getResolvedColorMode(): 'light' | 'dark';
|
|
4
4
|
export declare function subscribeToColorModeChange(callback: (mode: 'system' | 'light' | 'dark') => void): () => void;
|
|
5
5
|
export declare function useColorMode(): string;
|
|
6
|
+
export declare function useResolvedColorMode(): string;
|
package/dist/cjs/colorMode.js
CHANGED
|
@@ -6,6 +6,7 @@ exports.getColorMode = getColorMode;
|
|
|
6
6
|
exports.getResolvedColorMode = getResolvedColorMode;
|
|
7
7
|
exports.subscribeToColorModeChange = subscribeToColorModeChange;
|
|
8
8
|
exports.useColorMode = useColorMode;
|
|
9
|
+
exports.useResolvedColorMode = useResolvedColorMode;
|
|
9
10
|
const react_1 = require("react");
|
|
10
11
|
function setColorMode(mode) {
|
|
11
12
|
if (typeof window === 'undefined')
|
|
@@ -81,4 +82,7 @@ if (typeof window !== 'undefined') {
|
|
|
81
82
|
function useColorMode() {
|
|
82
83
|
return (0, react_1.useSyncExternalStore)(subscribeToColorModeChange, getColorMode, () => 'system');
|
|
83
84
|
}
|
|
85
|
+
function useResolvedColorMode() {
|
|
86
|
+
return (0, react_1.useSyncExternalStore)(subscribeToColorModeChange, getResolvedColorMode, () => 'light');
|
|
87
|
+
}
|
|
84
88
|
//# sourceMappingURL=colorMode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorMode.js","sourceRoot":"","sources":["../../src/colorMode.ts"],"names":[],"mappings":";;AAEA,oCAQC;AA8CD,oCAGC;AAED,oDAQC;AAED,gEASC;AAMD,oCAMC;
|
|
1
|
+
{"version":3,"file":"colorMode.js","sourceRoot":"","sources":["../../src/colorMode.ts"],"names":[],"mappings":"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"}
|
|
@@ -14,6 +14,7 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
|
|
|
14
14
|
className?: string;
|
|
15
15
|
direction?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
|
|
16
16
|
d?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
|
|
17
|
+
col?: boolean;
|
|
17
18
|
items?: BoxAlignment;
|
|
18
19
|
justify?: BoxJustification;
|
|
19
20
|
layout?: `${BoxAlignment} ${BoxJustification}`;
|
|
@@ -28,7 +29,7 @@ export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
|
|
|
28
29
|
overflow?: 'hidden' | 'auto' | 'auto-x' | 'auto-y';
|
|
29
30
|
ref?: Ref<HTMLDivElement>;
|
|
30
31
|
}
|
|
31
|
-
export declare function Box({ className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, d, direction, container, style: userStyle, surface, theme, border, full, overflow, ref, ...rest }: BoxProps): import("react/jsx-runtime.js").JSX.Element;
|
|
32
|
+
export declare function Box({ className, items: itemsSolo, justify: justifySolo, layout: align, gap, wrap, p, d, direction, container, style: userStyle, surface, theme, border, full, overflow, col, ref, ...rest }: BoxProps): import("react/jsx-runtime.js").JSX.Element;
|
|
32
33
|
export declare const BoxContext: import("react").Context<{
|
|
33
34
|
spacingScale: number;
|
|
34
35
|
}>;
|
|
@@ -28,14 +28,14 @@ function hasDefault(value, val) {
|
|
|
28
28
|
return value === val || (isResponsive(value) && value.default === val);
|
|
29
29
|
}
|
|
30
30
|
function Box(_a) {
|
|
31
|
-
var { className, items: itemsSolo, justify: justifySolo, layout: align, gap = 'none', wrap, p = 'none', d = 'row', direction = d, container, style: userStyle, surface, theme, border, full, overflow, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "layout", "gap", "wrap", "p", "d", "direction", "container", "style", "surface", "theme", "border", "full", "overflow", "ref"]);
|
|
31
|
+
var { className, items: itemsSolo, justify: justifySolo, layout: align, gap = 'none', wrap, p = 'none', d = 'row', direction = d, container, style: userStyle, surface, theme, border, full, overflow, col, ref } = _a, rest = __rest(_a, ["className", "items", "justify", "layout", "gap", "wrap", "p", "d", "direction", "container", "style", "surface", "theme", "border", "full", "overflow", "col", "ref"]);
|
|
32
32
|
const { spacingScale } = (0, react_1.useContext)(exports.BoxContext);
|
|
33
33
|
const style = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, userStyle), { '--spacing-scale': container === 'reset' ? 1 : spacingScale, '--local-corner-scale': container === 'reset' ? 1 : `${spacingScale}` })), [userStyle, spacingScale, container]);
|
|
34
34
|
const items = itemsSolo !== null && itemsSolo !== void 0 ? itemsSolo : align === null || align === void 0 ? void 0 : align.split(' ')[0];
|
|
35
35
|
const justify = justifySolo !== null && justifySolo !== void 0 ? justifySolo : align === null || align === void 0 ? void 0 : align.split(' ')[1];
|
|
36
36
|
const main = ((0, jsx_runtime_1.jsx)(SlotDiv_js_1.SlotDiv, Object.assign({ ref: ref }, rest, { style: style, className: (0, clsx_1.default)('layer-components:flex layer-components:relative', {
|
|
37
37
|
'layer-components:flex-row': hasDefault(direction, 'row'),
|
|
38
|
-
'layer-components:flex-col': hasDefault(direction, 'col'),
|
|
38
|
+
'layer-components:flex-col': hasDefault(direction, 'col') || col,
|
|
39
39
|
'layer-components:flex-row-reverse': hasDefault(direction, 'row-reverse'),
|
|
40
40
|
'layer-components:flex-col-reverse': hasDefault(direction, 'col-reverse'),
|
|
41
41
|
'layer-components:sm:flex-row': isResponsive(direction) && direction.sm === 'row',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/box/Box.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Box.js","sourceRoot":"","sources":["../../../../src/components/box/Box.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
2
2
|
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
3
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
4
|
-
export
|
|
5
|
-
width?:
|
|
3
|
+
import { ComponentPropsWithoutRef, ComponentPropsWithRef } from 'react';
|
|
4
|
+
export interface DialogContentProps extends ComponentPropsWithRef<typeof DialogPrimitive.Content> {
|
|
5
|
+
width?: 'sm' | 'md' | 'lg';
|
|
6
6
|
disableSheet?: boolean;
|
|
7
7
|
outerClassName?: string;
|
|
8
|
-
|
|
9
|
-
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
8
|
+
}
|
|
9
|
+
export declare const Content: ({ ref, children, width, outerClassName, className, disableSheet, ...props }: DialogContentProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
10
10
|
export declare const DialogSwipeHandle: ({ ref, className, ...props }: ComponentPropsWithoutRef<"div"> & {
|
|
11
11
|
ref?: React.Ref<HTMLDivElement>;
|
|
12
12
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
13
13
|
export declare const DialogTrigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
14
|
-
export declare const DialogContent: ({ ref, children, width, outerClassName, className, disableSheet, ...props }:
|
|
15
|
-
width?: "sm" | "md" | "lg";
|
|
16
|
-
disableSheet?: boolean;
|
|
17
|
-
outerClassName?: string;
|
|
18
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
19
|
-
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
14
|
+
export declare const DialogContent: ({ ref, children, width, outerClassName, className, disableSheet, ...props }: DialogContentProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
20
15
|
export declare const DialogTitle: import("react").FunctionComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
21
16
|
export declare const DialogDescription: import("react").FunctionComponent<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
22
17
|
export declare const DialogClose: ({ ref, asChild, children, ...props }: DialogPrimitive.DialogCloseProps & {
|
|
@@ -34,12 +29,7 @@ export declare const DialogSelectItem: ({ ref, children, ...props }: ComponentPr
|
|
|
34
29
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
35
30
|
export declare const Dialog: ((props: DialogPrimitive.DialogProps) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
36
31
|
Trigger: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
37
|
-
Content: ({ ref, children, width, outerClassName, className, disableSheet, ...props }:
|
|
38
|
-
width?: "sm" | "md" | "lg";
|
|
39
|
-
disableSheet?: boolean;
|
|
40
|
-
outerClassName?: string;
|
|
41
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
42
|
-
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
32
|
+
Content: ({ ref, children, width, outerClassName, className, disableSheet, ...props }: DialogContentProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
43
33
|
Title: import("react").FunctionComponent<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
44
34
|
Description: import("react").FunctionComponent<DialogPrimitive.DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
45
35
|
Close: ({ ref, asChild, children, ...props }: DialogPrimitive.DialogCloseProps & {
|
|
@@ -57,6 +57,7 @@ const RadioGroupPrimitive = __importStar(require("@radix-ui/react-radio-group"))
|
|
|
57
57
|
const react_1 = require("@use-gesture/react");
|
|
58
58
|
const clsx_1 = __importDefault(require("clsx"));
|
|
59
59
|
const react_2 = require("react");
|
|
60
|
+
const useMediaQuery_js_1 = require("../../hooks/useMediaQuery.js");
|
|
60
61
|
const useMergedRef_js_1 = __importDefault(require("../../hooks/useMergedRef.js"));
|
|
61
62
|
const withClassName_js_1 = require("../../hooks/withClassName.js");
|
|
62
63
|
const Box_js_1 = require("../box/Box.js");
|
|
@@ -69,6 +70,16 @@ const StyledContent = (0, withClassName_js_1.withClassName)(DialogPrimitive.Cont
|
|
|
69
70
|
const sheetClassNames = (0, clsx_1.default)('layer-variants:lt-sm:translate-0 layer-variants:lt-sm:left-0 layer-variants:lt-sm:right-0 layer-variants:lt-sm:top-auto layer-variants:lt-sm:h-min-content layer-variants:lt-sm:rounded-tl-xl layer-variants:lt-sm:rounded-tr-xl layer-variants:lt-sm:rounded-b-0 layer-variants:lt-sm:p-6 layer-variants:lt-sm:pt-8 layer-variants:lt-sm:w-full layer-variants:lt-sm:max-w-none layer-variants:lt-sm:pb-[calc(3rem+env(safe-area-inset-bottom,0px))] layer-variants:lt-sm:border-b-0', 'layer-variants:lt-sm:animate-ease-in layer-variants:lt-sm:animate-fade-in-up layer-variants:lt-sm:[&[data-state=closed]]:animate-fade-out-down');
|
|
70
71
|
const sheetClassNameWithOverlayKeyboard = (0, clsx_1.default)('layer-variants:lt-sm:bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))] layer-variants:lt-sm:max-h-[calc(95vh-var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px)))]');
|
|
71
72
|
const sheetClassNameWithDisplaceKeyboard = (0, clsx_1.default)('layer-variants:lt-sm:bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] layer-variants:lt-sm:max-h-[calc(0.85*var(--viewport-height,100vh))]');
|
|
73
|
+
function sheetCloseGestureLogic(swipeY, dy, vy, last, close, content) {
|
|
74
|
+
const contentHeight = content.clientHeight;
|
|
75
|
+
const shouldClose = last && (swipeY === 1 || dy > contentHeight / 2);
|
|
76
|
+
if (shouldClose) {
|
|
77
|
+
close();
|
|
78
|
+
}
|
|
79
|
+
const gestureY = last ? (shouldClose ? -1000 : 0) : -Math.max(0, dy);
|
|
80
|
+
content.style.setProperty('--gesture-y', `${gestureY}px`);
|
|
81
|
+
content.style.setProperty('transition', last ? 'bottom 0.2s' : '');
|
|
82
|
+
}
|
|
72
83
|
const Content = function Content(_a) {
|
|
73
84
|
var { ref, children, width, outerClassName, className, disableSheet } = _a, props = __rest(_a, ["ref", "children", "width", "outerClassName", "className", "disableSheet"]);
|
|
74
85
|
const particles = (0, index_js_2.useParticles)();
|
|
@@ -117,7 +128,17 @@ const Content = function Content(_a) {
|
|
|
117
128
|
const gestureRef = (0, react_2.useRef)(null);
|
|
118
129
|
const finalRef = (0, useMergedRef_js_1.default)(ref, openRef, gestureRef);
|
|
119
130
|
const { virtualKeyboardBehavior } = (0, Provider_js_1.useConfig)();
|
|
120
|
-
|
|
131
|
+
const close = (0, react_2.useContext)(DialogCloseContext);
|
|
132
|
+
const isSmall = (0, useMediaQuery_js_1.useMediaQuery)('(max-width: 640px)');
|
|
133
|
+
const bind = (0, react_1.useDrag)(({ swipe: [, swipeY], movement: [, dy], velocity: [, vy], last }) => {
|
|
134
|
+
if (gestureRef.current && gestureRef.current.scrollTop < 3) {
|
|
135
|
+
sheetCloseGestureLogic(swipeY, dy, vy, last, close, gestureRef.current);
|
|
136
|
+
}
|
|
137
|
+
}, {
|
|
138
|
+
axis: 'y',
|
|
139
|
+
enabled: isSmall && !disableSheet,
|
|
140
|
+
});
|
|
141
|
+
return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Portal, { children: [(0, jsx_runtime_1.jsx)(StyledOverlay, {}), (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsxs)(StyledContent, Object.assign({ "data-dialog-content": true }, bind(props), { ref: finalRef, className: (0, clsx_1.default)({
|
|
121
142
|
'layer-variants:md:max-w-800px': width === 'lg',
|
|
122
143
|
'layer-variants:max-w-600px': width === 'md',
|
|
123
144
|
'layer-variants:max-w-300px': width === 'sm',
|
|
@@ -136,15 +157,7 @@ const DialogSwipeHandle = function DialogSwipeHandle(_a) {
|
|
|
136
157
|
const content = findParentDialogContent(innerRef.current);
|
|
137
158
|
if (!content)
|
|
138
159
|
return;
|
|
139
|
-
|
|
140
|
-
const shouldClose = last && (swipeY === 1 || dy > contentHeight / 2);
|
|
141
|
-
if (shouldClose) {
|
|
142
|
-
close();
|
|
143
|
-
}
|
|
144
|
-
const gestureY = last ? (shouldClose ? -1000 : 0) : -Math.max(0, dy);
|
|
145
|
-
console.log(gestureY, dy, vy, swipeY);
|
|
146
|
-
content.style.setProperty('--gesture-y', `${gestureY}px`);
|
|
147
|
-
content.style.setProperty('transition', last ? 'bottom 0.2s' : '');
|
|
160
|
+
sheetCloseGestureLogic(swipeY, dy, vy, last, close, content);
|
|
148
161
|
}, {
|
|
149
162
|
target: innerRef,
|
|
150
163
|
axis: 'y',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,wEAA0D;AAC1D,uDAAmE;AACnE,iFAAmE;AACnE,8CAA6C;AAC7C,gDAA8B;AAC9B,
|
|
1
|
+
{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../../src/components/dialog/Dialog.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,12 +4,7 @@ declare const meta: {
|
|
|
4
4
|
title: string;
|
|
5
5
|
component: ((props: import("@radix-ui/react-dialog").DialogProps) => import("react/jsx-runtime.js").JSX.Element) & {
|
|
6
6
|
Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
7
|
-
Content: ({ ref, children, width, outerClassName, className, disableSheet, ...props }: import("
|
|
8
|
-
width?: "sm" | "md" | "lg";
|
|
9
|
-
disableSheet?: boolean;
|
|
10
|
-
outerClassName?: string;
|
|
11
|
-
ref?: React.Ref<HTMLDivElement>;
|
|
12
|
-
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
7
|
+
Content: ({ ref, children, width, outerClassName, className, disableSheet, ...props }: import("./Dialog.js").DialogContentProps) => import("react/jsx-runtime.js").JSX.Element;
|
|
13
8
|
Title: import("react").FunctionComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
14
9
|
Description: import("react").FunctionComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
15
10
|
Close: ({ ref, asChild, children, ...props }: import("@radix-ui/react-dialog").DialogCloseProps & {
|
|
@@ -37,3 +32,4 @@ export declare const Default: Story;
|
|
|
37
32
|
export declare const NoSheet: Story;
|
|
38
33
|
export declare const Positioned: Story;
|
|
39
34
|
export declare const VirtualKeyboard: Story;
|
|
35
|
+
export declare const MultiNested: Story;
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.VirtualKeyboard = exports.Positioned = exports.NoSheet = exports.Default = void 0;
|
|
4
|
+
exports.MultiNested = exports.VirtualKeyboard = exports.Positioned = exports.NoSheet = exports.Default = void 0;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const index_js_1 = require("../button/index.js");
|
|
8
8
|
const index_js_2 = require("../input/index.js");
|
|
9
9
|
const index_js_3 = require("../particles/index.js");
|
|
10
10
|
const Provider_js_1 = require("../provider/Provider.js");
|
|
11
|
-
const index_js_4 = require("../
|
|
11
|
+
const index_js_4 = require("../select/index.js");
|
|
12
|
+
const Tooltip_js_1 = require("../tooltip/Tooltip.js");
|
|
13
|
+
const index_js_5 = require("../typography/index.js");
|
|
12
14
|
const Dialog_js_1 = require("./Dialog.js");
|
|
13
15
|
const meta = {
|
|
14
16
|
title: 'Dialog',
|
|
@@ -20,7 +22,7 @@ const meta = {
|
|
|
20
22
|
};
|
|
21
23
|
exports.default = meta;
|
|
22
24
|
function DummyContent() {
|
|
23
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "col", children: [(0, jsx_runtime_1.jsx)(
|
|
25
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "col", children: [(0, jsx_runtime_1.jsx)(index_js_5.H1, { children: "Some content" }), (0, jsx_runtime_1.jsx)(index_js_5.P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget ligula accumsan, sit amet ullamcorper nunc ultricies. Nulla facilisi. Nulla facil" }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { disabled: true, color: "primary", children: "Click me" })] }));
|
|
24
26
|
}
|
|
25
27
|
exports.Default = {
|
|
26
28
|
args: {
|
|
@@ -51,4 +53,9 @@ exports.VirtualKeyboard = {
|
|
|
51
53
|
return ((0, jsx_runtime_1.jsxs)(Provider_js_1.Provider, { virtualKeyboardBehavior: "overlay", children: [(0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.DialogTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { children: "Open" }) }), (0, jsx_runtime_1.jsx)(DummyContent, {}), (0, jsx_runtime_1.jsxs)(Dialog_js_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.DialogTitle, { children: "Hello world" }), (0, jsx_runtime_1.jsx)(index_js_2.Input, {}), (0, jsx_runtime_1.jsxs)(Dialog_js_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.DialogClose, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { children: "Close" }) }), (0, jsx_runtime_1.jsx)(index_js_1.Button, { onClick: () => setKeyboard((v) => !v), children: "Toggle fake kb" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "fixed bottom-0 h-[var(--mock-virtual-keyboard-height,0)] bg-black w-full transition-height left-0 right-0" })] }));
|
|
52
54
|
},
|
|
53
55
|
};
|
|
56
|
+
exports.MultiNested = {
|
|
57
|
+
render() {
|
|
58
|
+
return ((0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.DialogTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { children: "Open" }) }), (0, jsx_runtime_1.jsxs)(Dialog_js_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.DialogTitle, { children: "Hello world" }), (0, jsx_runtime_1.jsx)(DummyContent, {}), (0, jsx_runtime_1.jsxs)(index_js_4.Select, { value: "", children: [(0, jsx_runtime_1.jsx)(index_js_4.Select.Trigger, { children: (0, jsx_runtime_1.jsx)(index_js_4.Select.Value, { placeholder: "Select an option" }) }), (0, jsx_runtime_1.jsxs)(index_js_4.Select.Content, { children: [(0, jsx_runtime_1.jsx)(index_js_4.Select.Item, { value: "option1", children: "Option 1" }), (0, jsx_runtime_1.jsx)(index_js_4.Select.Item, { value: "option2", children: "Option 2" }), (0, jsx_runtime_1.jsx)(index_js_4.Select.Item, { value: "option3", children: "Option 3" })] })] }), (0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.DialogTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { children: "Open nested" }) }), (0, jsx_runtime_1.jsxs)(Dialog_js_1.DialogContent, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.DialogTitle, { children: "Nested dialog" }), (0, jsx_runtime_1.jsx)(Tooltip_js_1.Tooltip, { content: "This is a tooltip", children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { children: "Hover me" }) }), (0, jsx_runtime_1.jsx)(DummyContent, {}), (0, jsx_runtime_1.jsx)(DummyContent, {})] })] })] })] }));
|
|
59
|
+
},
|
|
60
|
+
};
|
|
54
61
|
//# sourceMappingURL=Dialog.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../../src/components/dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dialog.stories.js","sourceRoot":"","sources":["../../../../src/components/dialog/Dialog.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -33,6 +33,6 @@ function PageNav(_a) {
|
|
|
33
33
|
height: '--nav-height',
|
|
34
34
|
ready: '--nav-ready',
|
|
35
35
|
});
|
|
36
|
-
return ((0, jsx_runtime_1.jsx)(HideWhileKeyboardOpen_js_1.HideWhileKeyboardOpen, Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:[grid-area:nav] layer-components:relative layer-components:z-nav layer-components:pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]', 'layer-components:before:content-[""] layer-components:before:absolute layer-components:before:inset-x-4 layer-components:before:top-0 layer-components:before:h-px layer-components:before:bg-dark-blend', 'layer-components:md:[grid-area:nav] layer-components:md:sticky layer-components:md:top-0 layer-components:md:h-auto layer-components:md:bottom-auto layer-components:md:left-auto layer-components:md:right-auto layer-components:md:before:hidden', className), ref: ref, children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: children }) })));
|
|
36
|
+
return ((0, jsx_runtime_1.jsx)(HideWhileKeyboardOpen_js_1.HideWhileKeyboardOpen, Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:[grid-area:nav] layer-components:relative layer-components:z-[var(--z-nav)] layer-components:pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]', 'layer-components:before:content-[""] layer-components:before:absolute layer-components:before:inset-x-4 layer-components:before:top-0 layer-components:before:h-px layer-components:before:bg-dark-blend', 'layer-components:md:[grid-area:nav] layer-components:md:sticky layer-components:md:top-0 layer-components:md:h-auto layer-components:md:bottom-auto layer-components:md:left-auto layer-components:md:right-auto layer-components:md:before:hidden', className), ref: ref, children: (0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: children }) })));
|
|
37
37
|
}
|
|
38
38
|
//# sourceMappingURL=PageNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageNav.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageNav.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;AAQb,0BA8BC;;AApCD,gDAA8B;AAC9B,iCAA+C;AAC/C,6CAAkD;AAClD,0CAA2C;AAC3C,kFAA4E;AAE5E,SAAgB,OAAO,CAAC,EAIS;QAJT,EACvB,SAAS,EACT,QAAQ,OAEwB,EAD7B,KAAK,cAHe,yBAIvB,CADQ;IAER,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,IAAA,2BAAgB,EAAiB,SAAS,EAAE,OAAO,EAAE;QAChE,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,aAAa;KACpB,CAAC,CAAC;IAEH,OAAO,CACN,uBAAC,gDAAqB,oBACjB,KAAK,IACT,SAAS,EAAE,IAAA,cAAU,EACpB,
|
|
1
|
+
{"version":3,"file":"PageNav.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageNav.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;AAQb,0BA8BC;;AApCD,gDAA8B;AAC9B,iCAA+C;AAC/C,6CAAkD;AAClD,0CAA2C;AAC3C,kFAA4E;AAE5E,SAAgB,OAAO,CAAC,EAIS;QAJT,EACvB,SAAS,EACT,QAAQ,OAEwB,EAD7B,KAAK,cAHe,yBAIvB,CADQ;IAER,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;IACjD,MAAM,GAAG,GAAG,IAAA,2BAAgB,EAAiB,SAAS,EAAE,OAAO,EAAE;QAChE,IAAI,EAAE,YAAY;QAClB,GAAG,EAAE,WAAW;QAChB,KAAK,EAAE,aAAa;QACpB,MAAM,EAAE,cAAc;QACtB,KAAK,EAAE,aAAa;KACpB,CAAC,CAAC;IAEH,OAAO,CACN,uBAAC,gDAAqB,oBACjB,KAAK,IACT,SAAS,EAAE,IAAA,cAAU,EACpB,iHAAiH,EACjH,oFAAoF,EACpF,gIAAgI,EAChI,SAAS,CACT,EACD,GAAG,EAAE,GAAG,YAER,uBAAC,mBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAC7C,QAAQ,GACY,IACC,CACxB,CAAC;AACH,CAAC"}
|
|
@@ -24,7 +24,7 @@ const Provider_js_1 = require("../provider/Provider.js");
|
|
|
24
24
|
function PageNowPlaying(_a) {
|
|
25
25
|
var { className, unstyled, keepAboveKeyboard } = _a, props = __rest(_a, ["className", "unstyled", "keepAboveKeyboard"]);
|
|
26
26
|
const { virtualKeyboardBehavior } = (0, Provider_js_1.useConfig)();
|
|
27
|
-
return ((0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:fixed layer-components:left-0 layer-components:right-0 layer-components:z-
|
|
27
|
+
return ((0, jsx_runtime_1.jsx)(Box_js_1.BoxContext.Provider, { value: { spacingScale: 1 }, children: (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: (0, clsx_1.default)('layer-components:fixed layer-components:left-0 layer-components:right-0 layer-components:z-[var(--z-nowPlaying)] layer-components:flex layer-components:flex-col layer-components:gap-2 layer-components:items-end',
|
|
28
28
|
// on mobile, this must be positioned above any nav bar that's present,
|
|
29
29
|
// or at minimum in the safe area
|
|
30
30
|
'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]', 'layer-components:transition-bottom', 'layer-components:md:fixed layer-components:md:bottom-3 layer-components:md:left-[var(--content-left,20%)] layer-components:md:transition-opacity layer-components:md:top-auto layer-components:md:items-end layer-components:md:w-[var(--content-width,100%)] layer-components:md:max-w-80vw layer-components:md:p-0 layer-components:md:opacity-[var(--content-ready,0)]', unstyled
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageNowPlaying.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageNowPlaying.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;AAOb,wCAoCC;;AAzCD,gDAA8B;AAE9B,0CAA2C;AAC3C,yDAAoD;AAEpD,SAAgB,cAAc,CAAC,EAQ9B;QAR8B,EAC9B,SAAS,EACT,QAAQ,EACR,iBAAiB,OAKjB,EAJG,KAAK,cAJsB,8CAK9B,CADQ;IAKR,MAAM,EAAE,uBAAuB,EAAE,GAAG,IAAA,uBAAS,GAAE,CAAC;IAEhD,OAAO,CACN,uBAAC,mBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAC9C,gDACK,KAAK,IACT,SAAS,EAAE,IAAA,cAAU,EACpB
|
|
1
|
+
{"version":3,"file":"PageNowPlaying.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageNowPlaying.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;AAOb,wCAoCC;;AAzCD,gDAA8B;AAE9B,0CAA2C;AAC3C,yDAAoD;AAEpD,SAAgB,cAAc,CAAC,EAQ9B;QAR8B,EAC9B,SAAS,EACT,QAAQ,EACR,iBAAiB,OAKjB,EAJG,KAAK,cAJsB,8CAK9B,CADQ;IAKR,MAAM,EAAE,uBAAuB,EAAE,GAAG,IAAA,uBAAS,GAAE,CAAC;IAEhD,OAAO,CACN,uBAAC,mBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAC9C,gDACK,KAAK,IACT,SAAS,EAAE,IAAA,cAAU,EACpB,+FAA+F;YAC/F,uEAAuE;YACvE,iCAAiC;YACjC,6EAA6E,EAC7E,oCAAoC,EACpC,yLAAyL,EACzL,QAAQ;gBACP,CAAC,CAAC,oBAAoB;gBACtB,CAAC,CAAC,sHAAsH,EACzH,iBAAiB;gBAChB,uBAAuB,KAAK,SAAS;gBACrC,yJAAyJ,EAC1J,iBAAiB;gBAChB,uBAAuB,KAAK,UAAU;gBACtC,wHAAwH,EACzH,SAAS,CACT,IACA,GACmB,CACtB,CAAC;AACH,CAAC"}
|
|
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
4
4
|
exports.ParticleLayer = ParticleLayer;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const react_1 = require("react");
|
|
7
|
-
const particlesState_js_1 = require("./particlesState.js");
|
|
8
7
|
const react_dom_1 = require("react-dom");
|
|
9
8
|
const ParticleContext_js_1 = require("./ParticleContext.js");
|
|
9
|
+
const particlesState_js_1 = require("./particlesState.js");
|
|
10
10
|
function ParticleLayer({ children, noPortal, }) {
|
|
11
11
|
const [particles] = (0, react_1.useState)(() => typeof window === 'undefined'
|
|
12
12
|
? null
|
|
@@ -14,7 +14,7 @@ function ParticleLayer({ children, noPortal, }) {
|
|
|
14
14
|
if (!particles) {
|
|
15
15
|
return null;
|
|
16
16
|
}
|
|
17
|
-
const canvas = ((0, jsx_runtime_1.jsx)("canvas", { ref: particles.setCanvas, className: "fixed inset-0 w-full h-full z-
|
|
17
|
+
const canvas = ((0, jsx_runtime_1.jsx)("canvas", { ref: particles.setCanvas, className: "fixed inset-0 w-full h-full z-[100000] pointer-events-none" }));
|
|
18
18
|
return ((0, jsx_runtime_1.jsxs)(ParticleContext_js_1.ParticlesProvider, { value: particles, children: [noPortal ? canvas : (0, react_dom_1.createPortal)(canvas, document.body), children] }));
|
|
19
19
|
}
|
|
20
20
|
//# sourceMappingURL=ParticleLayer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ParticleLayer.js","sourceRoot":"","sources":["../../../../src/components/particles/ParticleLayer.tsx"],"names":[],"mappings":";;AAKA,sCA8BC;;AAnCD,iCAA4C;AAC5C,
|
|
1
|
+
{"version":3,"file":"ParticleLayer.js","sourceRoot":"","sources":["../../../../src/components/particles/ParticleLayer.tsx"],"names":[],"mappings":";;AAKA,sCA8BC;;AAnCD,iCAA4C;AAC5C,yCAAyC;AACzC,6DAAyD;AACzD,2DAAgD;AAEhD,SAAgB,aAAa,CAAC,EAC7B,QAAQ,EACR,QAAQ,GAIR;IACA,MAAM,CAAC,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CACjC,OAAO,MAAM,KAAK,WAAW;QAC5B,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,IAAI,6BAAS,CAAC,EAAE,eAAe,EAAE,GAAG,EAAE,CAAC,CAC1C,CAAC;IAEF,IAAI,CAAC,SAAS,EAAE,CAAC;QAChB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,MAAM,MAAM,GAAG,CACd,mCACC,GAAG,EAAE,SAAS,CAAC,SAAS,EACxB,SAAS,EAAC,4DAA4D,GACrE,CACF,CAAC;IAEF,OAAO,CACN,wBAAC,sCAAiB,IAAC,KAAK,EAAE,SAAS,aACjC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAA,wBAAY,EAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,EACvD,QAAQ,IACU,CACpB,CAAC;AACH,CAAC"}
|
|
@@ -21,6 +21,10 @@ function Provider({ children, disableParticles, toastPosition = 'top-center', to
|
|
|
21
21
|
? virtualKeyboardBehavior
|
|
22
22
|
: 'displace';
|
|
23
23
|
(0, useVirtualKeyboardBehavior_js_1.useVirtualKeyboardBehavior)(supportedVirtualKeyboardBehavior);
|
|
24
|
+
(0, hooks_js_1.useTitleBarColor)({
|
|
25
|
+
light: '#fdfdfd',
|
|
26
|
+
dark: '#020202',
|
|
27
|
+
});
|
|
24
28
|
const otherStuff = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(index_js_1.IconSpritesheet, {}), (0, jsx_runtime_1.jsx)(react_hot_toast_1.Toaster, { position: toastPosition, containerClassName: toastContainerClassName })] }));
|
|
25
29
|
if (disableParticles)
|
|
26
30
|
return ((0, jsx_runtime_1.jsx)(exports.ConfigContext.Provider, { value: { virtualKeyboardBehavior: supportedVirtualKeyboardBehavior }, children: (0, jsx_runtime_1.jsxs)(index_js_3.TooltipProvider, { children: [children, otherStuff] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";;;AAoBA,
|
|
1
|
+
{"version":3,"file":"Provider.js","sourceRoot":"","sources":["../../../../src/components/provider/Provider.tsx"],"names":[],"mappings":";;;AAoBA,4BAqDC;AAQD,8BAEC;;AAnFD,iCAA6D;AAC7D,qDAAyD;AACzD,6CAA2E;AAC3E,6FAAuF;AACvF,+CAAmD;AACnD,oDAAsD;AACtD,kDAAsD;AAWtD;;GAEG;AACH,SAAgB,QAAQ,CAAC,EACxB,QAAQ,EACR,gBAAgB,EAChB,aAAa,GAAG,YAAY,EAC5B,uBAAuB,EACvB,qBAAqB,EACrB,uBAAuB,GAAG,UAAU,GACrB;IACf,IAAA,kCAAuB,EAAC,qBAAqB,CAAC,CAAC;IAC/C,MAAM,gCAAgC,GACrC,OAAO,SAAS,KAAK,WAAW,IAAI,iBAAiB,IAAI,SAAS;QACjE,CAAC,CAAC,uBAAuB;QACzB,CAAC,CAAC,UAAU,CAAC;IACf,IAAA,0DAA0B,EAAC,gCAAgC,CAAC,CAAC;IAC7D,IAAA,2BAAgB,EAAC;QAChB,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;KACf,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,CAClB,6DACC,uBAAC,0BAAe,KAAG,EACnB,uBAAC,yBAAO,IACP,QAAQ,EAAE,aAAa,EACvB,kBAAkB,EAAE,uBAAuB,GAC1C,IACA,CACH,CAAC;IAEF,IAAI,gBAAgB;QACnB,OAAO,CACN,uBAAC,qBAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,wBAAC,0BAAe,eACd,QAAQ,EACR,UAAU,IACM,GACM,CACzB,CAAC;IAEH,OAAO,CACN,uBAAC,qBAAa,CAAC,QAAQ,IACtB,KAAK,EAAE,EAAE,uBAAuB,EAAE,gCAAgC,EAAE,YAEpE,uBAAC,0BAAe,cACf,wBAAC,wBAAa,eACZ,QAAQ,EACR,UAAU,IACI,GACC,GACM,CACzB,CAAC;AACH,CAAC;AAEY,QAAA,aAAa,GAAG,IAAA,qBAAa,EAEvC;IACF,uBAAuB,EAAE,UAAU;CACnC,CAAC,CAAC;AAEH,SAAgB,SAAS;IACxB,OAAO,IAAA,kBAAU,EAAC,qBAAa,CAAC,CAAC;AAClC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useMediaQuery(query: string): boolean;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.useMediaQuery = useMediaQuery;
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
function useMediaQuery(query) {
|
|
7
|
+
const [matches, setMatches] = (0, react_1.useState)(false);
|
|
8
|
+
(0, react_1.useEffect)(() => {
|
|
9
|
+
const mediaQueryList = window.matchMedia(query);
|
|
10
|
+
const handleChange = (event) => {
|
|
11
|
+
setMatches(event.matches);
|
|
12
|
+
};
|
|
13
|
+
// Set initial state
|
|
14
|
+
setMatches(mediaQueryList.matches);
|
|
15
|
+
// Add listener for changes
|
|
16
|
+
mediaQueryList.addEventListener('change', handleChange);
|
|
17
|
+
// Cleanup listener on unmount
|
|
18
|
+
return () => {
|
|
19
|
+
mediaQueryList.removeEventListener('change', handleChange);
|
|
20
|
+
};
|
|
21
|
+
}, [query]);
|
|
22
|
+
return matches;
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=useMediaQuery.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMediaQuery.js","sourceRoot":"","sources":["../../../src/hooks/useMediaQuery.ts"],"names":[],"mappings":";;AAEA,sCAsBC;AAxBD,iCAA4C;AAE5C,SAAgB,aAAa,CAAC,KAAa;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEvD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAChD,MAAM,YAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;YACnD,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAC3B,CAAC,CAAC;QAEF,oBAAoB;QACpB,UAAU,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;QAEnC,2BAA2B;QAC3B,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAExD,8BAA8B;QAC9B,OAAO,GAAG,EAAE;YACX,cAAc,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QAC5D,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,OAAO,CAAC;AAChB,CAAC"}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
export declare function useTitleBarColor(color: string
|
|
1
|
+
export declare function useTitleBarColor(color: string | {
|
|
2
|
+
light: string;
|
|
3
|
+
dark: string;
|
|
4
|
+
}): void;
|
|
2
5
|
export declare function useSetTitleBarColor(): {
|
|
3
6
|
setColor: (color: string) => void;
|
|
4
7
|
resetColor: () => void;
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
5
5
|
exports.useTitleBarColor = useTitleBarColor;
|
|
6
6
|
exports.useSetTitleBarColor = useSetTitleBarColor;
|
|
7
7
|
const react_1 = require("react");
|
|
8
|
+
const colorMode_js_1 = require("../colorMode.js");
|
|
8
9
|
let defaultColor = '#ffffff';
|
|
9
10
|
if (typeof document !== 'undefined') {
|
|
10
11
|
defaultColor =
|
|
@@ -18,15 +19,30 @@ function changeThemeColor(color) {
|
|
|
18
19
|
color = getComputedStyle(root).getPropertyValue(cssVar);
|
|
19
20
|
}
|
|
20
21
|
var metaThemeColor = document.querySelector('meta[name=theme-color]');
|
|
22
|
+
if (!metaThemeColor) {
|
|
23
|
+
metaThemeColor = document.createElement('meta');
|
|
24
|
+
metaThemeColor.setAttribute('name', 'theme-color');
|
|
25
|
+
document.head.appendChild(metaThemeColor);
|
|
26
|
+
}
|
|
21
27
|
metaThemeColor === null || metaThemeColor === void 0 ? void 0 : metaThemeColor.setAttribute('content', color);
|
|
28
|
+
console.log('set title bar color', color);
|
|
22
29
|
}
|
|
23
30
|
function useTitleBarColor(color) {
|
|
31
|
+
const colorMode = (0, colorMode_js_1.useResolvedColorMode)();
|
|
24
32
|
(0, react_1.useEffect)(() => {
|
|
25
|
-
|
|
33
|
+
var _a, _b;
|
|
34
|
+
const finalColor = typeof color === 'string'
|
|
35
|
+
? color
|
|
36
|
+
: colorMode === 'dark'
|
|
37
|
+
? color.dark
|
|
38
|
+
: color.light;
|
|
39
|
+
const previousColor = (_b = (_a = document
|
|
40
|
+
.querySelector('meta[name=theme-color]')) === null || _a === void 0 ? void 0 : _a.getAttribute('content')) !== null && _b !== void 0 ? _b : defaultColor;
|
|
41
|
+
changeThemeColor(finalColor);
|
|
26
42
|
return () => {
|
|
27
|
-
changeThemeColor(
|
|
43
|
+
changeThemeColor(previousColor);
|
|
28
44
|
};
|
|
29
|
-
}, [color]);
|
|
45
|
+
}, [color, colorMode]);
|
|
30
46
|
}
|
|
31
47
|
function useSetTitleBarColor() {
|
|
32
48
|
const setColor = (0, react_1.useCallback)((color) => changeThemeColor(color), []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"useTitleBarColor.js","sourceRoot":"","sources":["../../../src/hooks/useTitleBarColor.ts"],"names":[],"mappings":";;;AA2BA,4CAoBC;AAED,kDAIC;AArDD,iCAA+C;AAC/C,kDAAuD;AAEvD,IAAI,YAAY,GAAG,SAAS,CAAC;AAC7B,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;IACrC,YAAY;QACX,MAAA,MAAA,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,0CAAE,YAAY,CAAC,SAAS,CAAC,mCACzE,YAAY,CAAC;AACf,CAAC;AAED,SAAS,gBAAgB,CAAC,KAAa;IACtC,gCAAgC;IAChC,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC;QAC9B,MAAM,IAAI,GAAG,QAAQ,CAAC,eAAe,CAAC;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QACzC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;IACD,IAAI,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;IACtE,IAAI,CAAC,cAAc,EAAE,CAAC;QACrB,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChD,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;QACnD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC3C,CAAC;IACD,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IAC/C,OAAO,CAAC,GAAG,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;AAC3C,CAAC;AAED,SAAgB,gBAAgB,CAC/B,KAA+C;IAE/C,MAAM,SAAS,GAAG,IAAA,mCAAoB,GAAE,CAAC;IACzC,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACd,MAAM,UAAU,GACf,OAAO,KAAK,KAAK,QAAQ;YACxB,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,SAAS,KAAK,MAAM;gBACtB,CAAC,CAAC,KAAK,CAAC,IAAI;gBACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC;QAChB,MAAM,aAAa,GAClB,MAAA,MAAA,QAAQ;aACN,aAAa,CAAC,wBAAwB,CAAC,0CACtC,YAAY,CAAC,SAAS,CAAC,mCAAI,YAAY,CAAC;QAC5C,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAC7B,OAAO,GAAG,EAAE;YACX,gBAAgB,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;AACxB,CAAC;AAED,SAAgB,mBAAmB;IAClC,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAAC,CAAC,KAAa,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7E,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC;IACzE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AACjC,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { useTitleBarColor } from './useTitleBarColor.js';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
argTypes: {};
|
|
6
|
+
parameters: {
|
|
7
|
+
controls: {
|
|
8
|
+
expanded: boolean;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
type Story = StoryObj<typeof useTitleBarColor>;
|
|
14
|
+
export declare const Default: Story;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
// @unocss-include
|
|
2
|
+
"use strict";
|
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
+
exports.Default = void 0;
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const react_1 = require("react");
|
|
7
|
+
const index_js_1 = require("../components/index.js");
|
|
8
|
+
const useTitleBarColor_js_1 = require("./useTitleBarColor.js");
|
|
9
|
+
const meta = {
|
|
10
|
+
title: 'useTitleBarColor',
|
|
11
|
+
argTypes: {},
|
|
12
|
+
parameters: {
|
|
13
|
+
controls: { expanded: true },
|
|
14
|
+
},
|
|
15
|
+
};
|
|
16
|
+
exports.default = meta;
|
|
17
|
+
exports.Default = {
|
|
18
|
+
render() {
|
|
19
|
+
return ((0, jsx_runtime_1.jsx)(index_js_1.Provider, { children: (0, jsx_runtime_1.jsxs)(index_js_1.Box, { col: true, border: true, surface: true, className: "overflow-hidden aspect-[9/16]", children: [(0, jsx_runtime_1.jsx)(MockTitleBar, {}), (0, jsx_runtime_1.jsx)(index_js_1.Box, { p: "md", children: (0, jsx_runtime_1.jsx)("p", { children: "This is a mock title bar that changes its background color based on the meta tag in the document head." }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Dialog, { children: [(0, jsx_runtime_1.jsx)(index_js_1.Dialog.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(index_js_1.Button, { children: "Override" }) }), (0, jsx_runtime_1.jsxs)(index_js_1.Dialog.Content, { children: [(0, jsx_runtime_1.jsx)(index_js_1.Dialog.Title, { children: "Overriding color" }), (0, jsx_runtime_1.jsx)(index_js_1.Dialog.Description, { children: "The title bar color is overridden while this dialog is open." }), (0, jsx_runtime_1.jsx)(Overrider, {}), (0, jsx_runtime_1.jsx)(index_js_1.Dialog.Actions, { children: (0, jsx_runtime_1.jsx)(index_js_1.Dialog.Close, {}) })] })] })] }) }));
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
function MockTitleBar() {
|
|
23
|
+
// observe the meta tag for changes
|
|
24
|
+
const [color, setColor] = (0, react_1.useState)(() => {
|
|
25
|
+
var _a;
|
|
26
|
+
const metaThemeColor = document.querySelector('meta[name=theme-color]');
|
|
27
|
+
return metaThemeColor
|
|
28
|
+
? (_a = metaThemeColor.getAttribute('content')) !== null && _a !== void 0 ? _a : '#ffffff'
|
|
29
|
+
: '#ffffff';
|
|
30
|
+
});
|
|
31
|
+
(0, react_1.useEffect)(() => {
|
|
32
|
+
const metaThemeColor = document.querySelector('meta[name=theme-color]');
|
|
33
|
+
if (!metaThemeColor)
|
|
34
|
+
return;
|
|
35
|
+
const observer = new MutationObserver(() => {
|
|
36
|
+
const newColor = metaThemeColor.getAttribute('content');
|
|
37
|
+
if (newColor) {
|
|
38
|
+
setColor(newColor);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
observer.observe(metaThemeColor, {
|
|
42
|
+
attributes: true,
|
|
43
|
+
attributeFilter: ['content'],
|
|
44
|
+
});
|
|
45
|
+
return () => {
|
|
46
|
+
observer.disconnect();
|
|
47
|
+
};
|
|
48
|
+
}, []);
|
|
49
|
+
const time = new Date().toLocaleTimeString();
|
|
50
|
+
return ((0, jsx_runtime_1.jsxs)(index_js_1.Box, { justify: "between", items: "center", p: "md", style: { backgroundColor: color }, children: [(0, jsx_runtime_1.jsx)("div", { children: time }), (0, jsx_runtime_1.jsx)(index_js_1.Box, { gap: true, items: "center", children: (0, jsx_runtime_1.jsx)(index_js_1.Icon, { name: "globe" }) })] }));
|
|
51
|
+
}
|
|
52
|
+
function Overrider() {
|
|
53
|
+
(0, useTitleBarColor_js_1.useTitleBarColor)('#ff0000');
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
//# sourceMappingURL=useTitleBarColor.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useTitleBarColor.stories.js","sourceRoot":"","sources":["../../../src/hooks/useTitleBarColor.stories.tsx"],"names":[],"mappings":";;;;AACA,iCAA4C;AAC5C,qDAA6E;AAC7E,+DAAyD;AAEzD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACuC,CAAC;AAE1C,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,CACN,uBAAC,mBAAQ,cACR,wBAAC,cAAG,IAAC,GAAG,QAAC,MAAM,QAAC,OAAO,QAAC,SAAS,EAAC,+BAA+B,aAChE,uBAAC,YAAY,KAAG,EAChB,uBAAC,cAAG,IAAC,CAAC,EAAC,IAAI,YACV,mJAGI,GACC,EACN,wBAAC,iBAAM,eACN,uBAAC,iBAAM,CAAC,OAAO,IAAC,OAAO,kBACtB,uBAAC,iBAAM,2BAAkB,GACT,EACjB,wBAAC,iBAAM,CAAC,OAAO,eACd,uBAAC,iBAAM,CAAC,KAAK,mCAAgC,EAC7C,uBAAC,iBAAM,CAAC,WAAW,+EAEE,EACrB,uBAAC,SAAS,KAAG,EACb,uBAAC,iBAAM,CAAC,OAAO,cACd,uBAAC,iBAAM,CAAC,KAAK,KAAG,GACA,IACD,IACT,IACJ,GACI,CACX,CAAC;IACH,CAAC;CACD,CAAC;AAEF,SAAS,YAAY;IACpB,mCAAmC;IACnC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE;;QACvC,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACxE,OAAO,cAAc;YACpB,CAAC,CAAC,MAAA,cAAc,CAAC,YAAY,CAAC,SAAS,CAAC,mCAAI,SAAS;YACrD,CAAC,CAAC,SAAS,CAAC;IACd,CAAC,CAAC,CAAC;IACH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,MAAM,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QACxE,IAAI,CAAC,cAAc;YAAE,OAAO;QAE5B,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC1C,MAAM,QAAQ,GAAG,cAAc,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YACxD,IAAI,QAAQ,EAAE,CAAC;gBACd,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACpB,CAAC;QACF,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAE;YAChC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,SAAS,CAAC;SAC5B,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACX,QAAQ,CAAC,UAAU,EAAE,CAAC;QACvB,CAAC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE,CAAC;IAE7C,OAAO,CACN,wBAAC,cAAG,IACH,OAAO,EAAC,SAAS,EACjB,KAAK,EAAC,QAAQ,EACd,CAAC,EAAC,IAAI,EACN,KAAK,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,aAEjC,0CAAM,IAAI,GAAO,EACjB,uBAAC,cAAG,IAAC,GAAG,QAAC,KAAK,EAAC,QAAQ,YACtB,uBAAC,eAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GAChB,IACD,CACN,CAAC;AACH,CAAC;AAED,SAAS,SAAS;IACjB,IAAA,sCAAgB,EAAC,SAAS,CAAC,CAAC;IAC5B,OAAO,IAAI,CAAC;AACb,CAAC"}
|