@a-type/ui 5.0.9 → 5.0.11
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/css/main.css +3 -3
- package/dist/esm/components/button/Button.d.ts +1 -1
- package/dist/esm/components/button/Button.js.map +1 -1
- package/dist/esm/components/forms/SubmitButton.js +1 -1
- package/dist/esm/components/forms/SubmitButton.js.map +1 -1
- package/dist/esm/components/forms/TextField.js +2 -2
- package/dist/esm/components/forms/TextField.js.map +1 -1
- package/dist/esm/components/layouts/PageContent.js +2 -2
- package/dist/esm/components/layouts/PageContent.js.map +1 -1
- package/dist/esm/components/layouts/PageNowPlaying.d.ts +3 -1
- package/dist/esm/components/layouts/PageNowPlaying.js +9 -5
- package/dist/esm/components/layouts/PageNowPlaying.js.map +1 -1
- package/dist/esm/components/layouts/PageRoot.d.ts +2 -1
- package/dist/esm/components/layouts/PageRoot.js +6 -2
- package/dist/esm/components/layouts/PageRoot.js.map +1 -1
- package/dist/esm/components/layouts/layouts.stories.js +4 -3
- package/dist/esm/components/layouts/layouts.stories.js.map +1 -1
- package/dist/esm/uno/preflights/globals.d.ts +2 -1
- package/dist/esm/uno/preflights/globals.js +6 -3
- package/dist/esm/uno/preflights/globals.js.map +1 -1
- package/dist/esm/uno/preflights/user.js +3 -2
- package/dist/esm/uno/preflights/user.js.map +1 -1
- package/package.json +1 -1
- package/src/components/button/Button.tsx +1 -0
- package/src/components/forms/SubmitButton.tsx +0 -1
- package/src/components/forms/TextField.tsx +2 -2
- package/src/components/layouts/PageContent.tsx +4 -2
- package/src/components/layouts/PageNowPlaying.tsx +15 -7
- package/src/components/layouts/PageRoot.tsx +14 -3
- package/src/components/layouts/layouts.stories.tsx +13 -4
- package/src/uno/preflights/globals.ts +10 -3
- package/src/uno/preflights/user.ts +3 -2
|
@@ -3,7 +3,7 @@ import { ButtonHTMLAttributes, Ref } from 'react';
|
|
|
3
3
|
import { PaletteName } from '../../uno/index.js';
|
|
4
4
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Pick<BaseButtonProps, 'render' | 'focusableWhenDisabled'> {
|
|
5
5
|
color?: PaletteName;
|
|
6
|
-
emphasis?: 'primary' | 'default' | 'ghost' | 'contrast' | 'light' | 'unstyled';
|
|
6
|
+
emphasis?: 'primary' | 'main' | 'default' | 'ghost' | 'contrast' | 'light' | 'unstyled';
|
|
7
7
|
size?: 'default' | 'small';
|
|
8
8
|
toggled?: boolean;
|
|
9
9
|
toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,MAAM,IAAI,UAAU,GAEpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAEN,QAAQ,EACR,QAAQ,EACR,IAAI,EAGJ,WAAW,EACX,aAAa,EACb,QAAQ,GACR,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,YAAY,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/components/button/Button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -4,6 +4,6 @@ import { useFormikContext } from 'formik';
|
|
|
4
4
|
import { Button } from '../button/Button.js';
|
|
5
5
|
export function SubmitButton(props) {
|
|
6
6
|
const { isSubmitting, isValid } = useFormikContext();
|
|
7
|
-
return (_jsx(Button, Object.assign({ loading: isSubmitting, disabled: !isValid,
|
|
7
|
+
return (_jsx(Button, Object.assign({ loading: isSubmitting, disabled: !isValid, emphasis: "primary" }, props, { type: "submit" })));
|
|
8
8
|
}
|
|
9
9
|
//# sourceMappingURL=SubmitButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../../src/components/forms/SubmitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,MAAM,UAAU,YAAY,CAAC,KAAkB;IAC9C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrD,OAAO,CACN,KAAC,MAAM,kBACN,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,CAAC,OAAO,EAClB,
|
|
1
|
+
{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../../src/components/forms/SubmitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,MAAM,UAAU,YAAY,CAAC,KAAkB;IAC9C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrD,OAAO,CACN,KAAC,MAAM,kBACN,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,CAAC,OAAO,EAClB,QAAQ,EAAC,SAAS,IACd,KAAK,IACT,IAAI,EAAC,QAAQ,IACZ,CACF,CAAC;AACH,CAAC"}
|
|
@@ -40,7 +40,7 @@ export const TextField = function TextField(_a) {
|
|
|
40
40
|
}, autoFocusDelay);
|
|
41
41
|
}
|
|
42
42
|
}, [autoFocusDelay]);
|
|
43
|
-
return (_jsxs(FieldRoot, { className: className, ref: ref, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(Input, Object.assign({}, props, rest, { id: id, autoFocus: autoFocus, className: inputClassName, ref: useMergedRef(innerInputRef, inputRef || emptyRef) }))] }));
|
|
43
|
+
return (_jsxs(FieldRoot, { className: className, ref: ref, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(Input, Object.assign({}, props, rest, { id: id, autoFocus: autoFocus, className: clsx('layer-composed:w-full', inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef) }))] }));
|
|
44
44
|
};
|
|
45
45
|
export function TextAreaField(_a) {
|
|
46
46
|
var { name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName } = _a, rest = __rest(_a, ["name", "label", "className", "inputRef", "onKeyDown", "submitOnEnter", "id", "textAreaClassName"]);
|
|
@@ -56,5 +56,5 @@ export function TextAreaField(_a) {
|
|
|
56
56
|
const id = useIdOrGenerated(providedId);
|
|
57
57
|
return (_jsxs(FieldRoot, { className: className, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx('layer-composed:w-full', textAreaClassName), id: id, onKeyDown: onKeyDownInner }))] }));
|
|
58
58
|
}
|
|
59
|
-
export const FieldRoot = withClassName('div', 'flex flex-col items-stretch self-stretch gap-xs');
|
|
59
|
+
export const FieldRoot = withClassName('div', 'layer-components:flex layer-components:flex-col layer-components:items-stretch layer-components:self-stretch layer-components:gap-xs');
|
|
60
60
|
//# sourceMappingURL=TextField.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/components/forms/TextField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;;;;;;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAIN,WAAW,EACX,SAAS,EACT,MAAM,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAY7C,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAE,CAAC,CAAQ,CAAC;AAEnC,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,SAAS,CAAC,EAc3B;QAd2B,EAC3C,GAAG,EACH,IAAI,EACJ,KAAK,EACL,SAAS,EACT,cAAc,EACd,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,EAAE,EAAE,UAAU,EACd,cAAc,OAEE,EADb,IAAI,cAboC,yIAc3C,CADO;IAEP,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;QACxB,IAAI;QACJ,QAAQ;QACR,OAAO;QACP,MAAM;KACN,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACrD,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,cAAc,EAAE,CAAC;YACpB,UAAU,CAAC,GAAG,EAAE;gBACf,IAAI,aAAa,CAAC,OAAO;oBAAE,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC1D,CAAC,EAAE,cAAc,CAAC,CAAC;QACpB,CAAC;IACF,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACN,MAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,aACvC,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,KAAC,KAAK,oBACD,KAAK,EACL,IAAI,IACR,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../../src/components/forms/TextField.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
|
-
'use client';
|
|
3
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
3
|
var t = {};
|
|
5
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -16,9 +15,10 @@ import classNames from 'clsx';
|
|
|
16
15
|
import useMergedRef from '../../hooks/useMergedRef.js';
|
|
17
16
|
import { useBoundsCssVars } from '../../hooks/useSize.js';
|
|
18
17
|
import { Box } from '../box/Box.js';
|
|
18
|
+
const bodyRef = typeof document !== 'undefined' ? { current: document.body } : undefined;
|
|
19
19
|
export function PageContent(_a) {
|
|
20
20
|
var { children, className, ref, p } = _a, rest = __rest(_a, ["children", "className", "ref", "p"]);
|
|
21
|
-
const innerRef = useBoundsCssVars(200,
|
|
21
|
+
const innerRef = useBoundsCssVars(200, bodyRef, {
|
|
22
22
|
left: '--content-left',
|
|
23
23
|
top: '--content-top',
|
|
24
24
|
width: '--content-width',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageContent.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageContent.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"PageContent.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageContent.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAY,MAAM,eAAe,CAAC;AAE9C,MAAM,OAAO,GACZ,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;AAE1E,MAAM,UAAU,WAAW,CAAC,EAMjB;QANiB,EAC3B,QAAQ,EACR,SAAS,EACT,GAAG,EACH,CAAC,OAES,EADP,IAAI,cALoB,qCAM3B,CADO;IAEP,MAAM,QAAQ,GAAG,gBAAgB,CAAiB,GAAG,EAAE,OAAO,EAAE;QAC/D,IAAI,EAAE,gBAAgB;QACtB,GAAG,EAAE,eAAe;QACpB,KAAK,EAAE,iBAAiB;QACxB,MAAM,EAAE,kBAAkB;QAC1B,KAAK,EAAE,iBAAiB;KACxB,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAE7C,OAAO,CACN,KAAC,GAAG,kBACH,GAAG,QACH,MAAM,EAAC,eAAe,EACtB,IAAI,EAAC,OAAO,EACZ,CAAC,EACA,CAAC,IAAI;YACJ,OAAO,EAAE,IAAI;YACb,EAAE,EAAE,IAAI;SACR,EAEF,GAAG,EAAC,IAAI,EACR,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,UAAU,CACpB,qBAAqB,EACrB,8EAA8E,EAC9E,SAAS,CACT,EACD,GAAG,EAAE,QAAQ,IACT,IAAI,cAEP,QAAQ,IACJ,CACN,CAAC;AACH,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'react';
|
|
2
|
-
export declare function PageNowPlaying({ className, keepAboveKeyboard, ...props }: HTMLAttributes<HTMLDivElement> & {
|
|
2
|
+
export declare function PageNowPlaying({ className, keepAboveKeyboard, disablePortal, container, ...props }: HTMLAttributes<HTMLDivElement> & {
|
|
3
3
|
keepAboveKeyboard?: boolean;
|
|
4
|
+
disablePortal?: boolean;
|
|
5
|
+
container?: HTMLElement;
|
|
4
6
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
|
-
'use client';
|
|
3
2
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
4
3
|
var t = {};
|
|
5
4
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -13,18 +12,23 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
12
|
};
|
|
14
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
15
14
|
import classNames from 'clsx';
|
|
15
|
+
import { createPortal } from 'react-dom';
|
|
16
16
|
import { GroupScaleReset } from '../../systems/GroupScale.js';
|
|
17
17
|
import { useConfig } from '../provider/Provider.js';
|
|
18
18
|
export function PageNowPlaying(_a) {
|
|
19
|
-
var { className, keepAboveKeyboard } = _a, props = __rest(_a, ["className", "keepAboveKeyboard"]);
|
|
19
|
+
var { className, keepAboveKeyboard, disablePortal, container = document.body } = _a, props = __rest(_a, ["className", "keepAboveKeyboard", "disablePortal", "container"]);
|
|
20
20
|
const { virtualKeyboardBehavior } = useConfig();
|
|
21
|
-
|
|
21
|
+
const content = (_jsx(GroupScaleReset, { children: _jsx("div", Object.assign({}, props, { className: classNames('layer-components:fixed layer-components:left-0 layer-components:right-0 layer-components:z-[var(--z-now-playing)] layer-components:flex layer-components:flex-col layer-components:items-center layer-components:gap-2',
|
|
22
22
|
// on mobile, this must be positioned above any nav bar that's present,
|
|
23
23
|
// or at minimum in the safe area
|
|
24
|
-
'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]', 'layer-components:
|
|
24
|
+
'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]', 'layer-components:md:bottom-md layer-components:md:left-[var(--content-left,0)] layer-components:md:w-[var(--content-width,100%)] layer-components:md:items-center layer-components:md:p-0 layer-components:md:opacity-[var(--content-ready,0)] layer-components:md:transition-opacity', 'layer-variants:p-2', keepAboveKeyboard &&
|
|
25
25
|
virtualKeyboardBehavior === 'overlay' &&
|
|
26
26
|
'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]', keepAboveKeyboard &&
|
|
27
27
|
virtualKeyboardBehavior === 'displace' &&
|
|
28
|
-
'layer-variants:lt-md:bottom-[max(var(--viewport-bottom-offset,0px),var(--nav-height,env(safe-area-inset-bottom,0px)))]', className) })) }));
|
|
28
|
+
'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,var(--viewport-bottom-offset,0px)),var(--nav-height,env(safe-area-inset-bottom,0px)))]', className) })) }));
|
|
29
|
+
if (disablePortal) {
|
|
30
|
+
return content;
|
|
31
|
+
}
|
|
32
|
+
return createPortal(content, container);
|
|
29
33
|
}
|
|
30
34
|
//# sourceMappingURL=PageNowPlaying.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageNowPlaying.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageNowPlaying.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"PageNowPlaying.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageNowPlaying.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,UAAU,cAAc,CAAC,EAU9B;QAV8B,EAC9B,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,SAAS,GAAG,QAAQ,CAAC,IAAI,OAMzB,EALG,KAAK,cALsB,gEAM9B,CADQ;IAMR,MAAM,EAAE,uBAAuB,EAAE,GAAG,SAAS,EAAE,CAAC;IAEhD,MAAM,OAAO,GAAG,CACf,KAAC,eAAe,cACf,8BACK,KAAK,IACT,SAAS,EAAE,UAAU,CACpB,mGAAmG;YACnG,uEAAuE;YACvE,iCAAiC;YACjC,6EAA6E,EAC7E,iKAAiK,EACjK,oBAAoB,EACpB,iBAAiB;gBAChB,uBAAuB,KAAK,SAAS;gBACrC,yJAAyJ,EAC1J,iBAAiB;gBAChB,uBAAuB,KAAK,UAAU;gBACtC,4JAA4J,EAC7J,SAAS,CACT,IACA,GACe,CAClB,CAAC;IAEF,IAAI,aAAa,EAAE,CAAC;QACnB,OAAO,OAAO,CAAC;IAChB,CAAC;IAED,OAAO,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AACzC,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { HTMLAttributes } from 'react';
|
|
2
2
|
export interface PageRootProps extends HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
mobileBasis?: '0' | 'auto';
|
|
3
4
|
}
|
|
4
|
-
export declare function PageRoot({ className, children, ...rest }: PageRootProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare function PageRoot({ className, children, mobileBasis, ...rest }: PageRootProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -13,7 +13,11 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
13
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
import clsx from 'clsx';
|
|
15
15
|
export function PageRoot(_a) {
|
|
16
|
-
var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
|
|
17
|
-
return (_jsx("div", Object.assign({ className: clsx(
|
|
16
|
+
var { className, children, mobileBasis = 'auto' } = _a, rest = __rest(_a, ["className", "children", "mobileBasis"]);
|
|
17
|
+
return (_jsx("div", Object.assign({ className: clsx(
|
|
18
|
+
// TODO: once I'm sure which one is right, remove the other
|
|
19
|
+
mobileBasis === '0'
|
|
20
|
+
? 'layer-components:flex-basis-0'
|
|
21
|
+
: 'layer-components:flex-basis-auto', 'layer-components:min-h-100dvh layer-components:flex-shrink-1 layer-components:flex-grow-1 layer-components:bg-wash', 'layer-components:grid layer-components:grid-cols-[1fr] layer-components:grid-rows-[1fr_auto] layer-components:grid-areas-[content]-[nav] layer-components:items-start layer-components:justify-center', 'md:layer-responsive:grid-cols-[1fr_auto_20fr_1fr] md:layer-responsive:grid-areas-[gutter1_nav_content_gutter2] md:layer-responsive:h-auto md:layer-responsive:min-h-auto md:layer-responsive:bg-wash', 'lg:layer-responsive:grid-cols-[1fr_auto_min(800px,70vw)_1fr]', className) }, rest, { children: children })));
|
|
18
22
|
}
|
|
19
23
|
//# sourceMappingURL=PageRoot.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageRoot.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"PageRoot.js","sourceRoot":"","sources":["../../../../src/components/layouts/PageRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAOxB,MAAM,UAAU,QAAQ,CAAC,EAKT;QALS,EACxB,SAAS,EACT,QAAQ,EACR,WAAW,GAAG,MAAM,OAEL,EADZ,IAAI,cAJiB,wCAKxB,CADO;IAEP,OAAO,CACN,4BACC,SAAS,EAAE,IAAI;QACd,2DAA2D;QAC3D,WAAW,KAAK,GAAG;YAClB,CAAC,CAAC,+BAA+B;YACjC,CAAC,CAAC,kCAAkC,EACrC,mEAAmE,EACnE,oHAAoH,EACpH,wHAAwH,EACxH,gEAAgE,EAChE,SAAS,CACT,IACG,IAAI,cAEP,QAAQ,IACJ,CACN,CAAC;AACH,CAAC"}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect, useState } from 'react';
|
|
4
4
|
import { Avatar } from '../avatar/Avatar.js';
|
|
5
|
+
import { Box } from '../box/Box.js';
|
|
5
6
|
import { Button } from '../button/index.js';
|
|
6
7
|
import { Card } from '../card/Card.js';
|
|
7
8
|
import { Input } from '../input/index.js';
|
|
@@ -24,16 +25,16 @@ export const Default = {
|
|
|
24
25
|
render: () => {
|
|
25
26
|
const [content, setContent] = useState(true);
|
|
26
27
|
const toggleContent = () => setContent((prev) => !prev);
|
|
27
|
-
return (_jsxs(PageRoot, {
|
|
28
|
+
return (_jsxs(PageRoot, { children: [_jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." })] }), _jsx(Switch, { checked: content, onCheckedChange: toggleContent }), content && (_jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })), _jsx(PageNowPlaying, { children: _jsx(Box, { surface: "white", elevated: "lg", full: true, p: true, children: "Now playing" }) })] }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "gray", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: (_, { size }) => (_jsx(Avatar, { name: "Grant Forrest", size: size })) }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
|
|
28
29
|
},
|
|
29
30
|
};
|
|
30
31
|
export const ManualWidth = {
|
|
31
32
|
render: () => {
|
|
32
|
-
return (_jsxs(PageRoot, {
|
|
33
|
+
return (_jsxs(PageRoot, { children: [_jsxs(PageContent, { className: "max-w-300px", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." })] }), _jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })] }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "gray", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
|
|
33
34
|
},
|
|
34
35
|
};
|
|
35
36
|
export const WithoutNav = {
|
|
36
|
-
render: () => (_jsx(PageRoot, { className: "h-full w-full", children: _jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." }), _jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })] }), _jsx(PageNowPlaying, { children: "Now playing" })] }) })),
|
|
37
|
+
render: () => (_jsx(PageRoot, { className: "h-full w-full", children: _jsxs(PageContent, { children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "text-3xl font-bold", children: "Hello, World!" }), _jsx("p", { className: "text-lg", children: "This is a simple page layout." }), _jsx(Card.Grid, { children: new Array(100).fill(null).map((_, i) => (_jsx(Card, { children: _jsx(Card.Main, {}) }, i))) })] }), _jsx(PageNowPlaying, { children: _jsx(Box, { full: true, elevated: "lg", p: true, surface: "white", children: "Now playing" }) })] }) })),
|
|
37
38
|
};
|
|
38
39
|
export const WithVirtualKeyboard = {
|
|
39
40
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layouts.stories.js","sourceRoot":"","sources":["../../../../src/components/layouts/layouts.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EACN,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,UAAU,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC5B,MAAM,EAAE,YAAY;KACpB;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE;QACZ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC7C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QACxD,OAAO,CACN,MAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"layouts.stories.js","sourceRoot":"","sources":["../../../../src/components/layouts/layouts.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EACN,UAAU,EACV,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,cAAc,EACd,UAAU,GACV,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC5B,MAAM,EAAE,YAAY;KACpB;CACc,CAAC;AAEjB,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,GAAG,EAAE;QACZ,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC7C,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QACxD,OAAO,CACN,MAAC,QAAQ,eACR,MAAC,WAAW,eACX,eAAK,SAAS,EAAC,aAAa,aAC3B,aAAI,SAAS,EAAC,oBAAoB,8BAAmB,EACrD,YAAG,SAAS,EAAC,SAAS,8CAAkC,IACnD,EACN,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,aAAa,GAAI,EAC3D,OAAO,IAAI,CACX,KAAC,IAAI,CAAC,IAAI,cACR,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACxC,KAAC,IAAI,cACJ,KAAC,IAAI,CAAC,IAAI,KAAG,IADH,CAAC,CAEL,CACP,CAAC,GACS,CACZ,EACD,KAAC,cAAc,cACd,KAAC,GAAG,IAAC,OAAO,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,QAAC,CAAC,kCAEnC,GACU,IACJ,EACd,KAAC,OAAO,cACP,MAAC,UAAU,eACV,MAAC,UAAU,eACV,KAAC,qBAAqB,cACrB,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,GAAG,GACP,EACxB,KAAC,cAAc,8BAA6B,IAChC,EACb,MAAC,UAAU,IAAC,MAAM,EAAE,IAAI,aACvB,KAAC,qBAAqB,cACrB,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,GAAG,GACP,EACxB,KAAC,cAAc,yBAAwB,EACvC,KAAC,aAAa,KAAG,IACL,EACb,MAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,aACpC,KAAC,qBAAqB,cACrB,KAAC,cAAc,IACd,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACxB,KAAC,MAAM,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAE,IAAI,GAAI,CAC3C,GACA,GACqB,EACxB,KAAC,cAAc,0BAAyB,EACxC,KAAC,aAAa,KAAG,IACL,IACD,GACJ,IACA,CACX,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IACjC,MAAM,EAAE,GAAG,EAAE;QACZ,OAAO,CACN,MAAC,QAAQ,eACR,MAAC,WAAW,IAAC,SAAS,EAAC,aAAa,aACnC,eAAK,SAAS,EAAC,aAAa,aAC3B,aAAI,SAAS,EAAC,oBAAoB,8BAAmB,EACrD,YAAG,SAAS,EAAC,SAAS,8CAAkC,IACnD,EACN,KAAC,IAAI,CAAC,IAAI,cACR,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACxC,KAAC,IAAI,cACJ,KAAC,IAAI,CAAC,IAAI,KAAG,IADH,CAAC,CAEL,CACP,CAAC,GACS,IACC,EACd,KAAC,OAAO,cACP,MAAC,UAAU,eACV,MAAC,UAAU,eACV,KAAC,qBAAqB,cACrB,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,GAAG,GACP,EACxB,KAAC,cAAc,8BAA6B,IAChC,EACb,MAAC,UAAU,IAAC,MAAM,EAAE,IAAI,aACvB,KAAC,qBAAqB,cACrB,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,GAAG,GACP,EACxB,KAAC,cAAc,yBAAwB,EACvC,KAAC,aAAa,KAAG,IACL,EACb,MAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,aACpC,KAAC,qBAAqB,cACrB,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,GAAG,GACP,EACxB,KAAC,cAAc,0BAAyB,EACxC,KAAC,aAAa,KAAG,IACL,IACD,GACJ,IACA,CACX,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,CACb,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,YAClC,MAAC,WAAW,eACX,eAAK,SAAS,EAAC,aAAa,aAC3B,aAAI,SAAS,EAAC,oBAAoB,8BAAmB,EACrD,YAAG,SAAS,EAAC,SAAS,8CAAkC,EACxD,KAAC,IAAI,CAAC,IAAI,cACR,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACxC,KAAC,IAAI,cACJ,KAAC,IAAI,CAAC,IAAI,KAAG,IADH,CAAC,CAEL,CACP,CAAC,GACS,IACP,EACN,KAAC,cAAc,cACd,KAAC,GAAG,IAAC,IAAI,QAAC,QAAQ,EAAC,IAAI,EAAC,CAAC,QAAC,OAAO,EAAC,OAAO,4BAEnC,GACU,IACJ,GACJ,CACX;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU;IACzC,MAAM;QACL,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAEhD,SAAS,CAAC,GAAG,EAAE;YACd,IAAI,QAAQ,EAAE,CAAC;gBACd,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAC9B,gCAAgC,EAChC,OAAO,CACP,CAAC;YACH,CAAC;iBAAM,CAAC;gBACP,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gCAAgC,CAAC,CAAC;YACtE,CAAC;QACF,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;QAEf,OAAO,CACN,MAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,aAClC,MAAC,WAAW,eACX,eAAK,SAAS,EAAC,aAAa,aAC3B,aAAI,SAAS,EAAC,oBAAoB,8BAAmB,EACrD,YAAG,SAAS,EAAC,SAAS,8CAAkC,IACnD,EACN,MAAC,cAAc,IAAC,iBAAiB,mBAChC,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,+BAEpC,EACT,KAAC,KAAK,KAAG,IACO,IACJ,EACd,KAAC,OAAO,cACP,MAAC,UAAU,eACV,MAAC,UAAU,eACV,KAAC,qBAAqB,cACrB,KAAC,cAAc,IAAC,IAAI,EAAC,MAAM,GAAG,GACP,EACxB,KAAC,cAAc,8BAA6B,IAChC,EACb,MAAC,UAAU,IAAC,MAAM,EAAE,IAAI,aACvB,KAAC,qBAAqB,cACrB,KAAC,cAAc,IAAC,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,eAAe,GAAG,GAAI,GACpC,EACxB,KAAC,cAAc,yBAAwB,EACvC,KAAC,aAAa,KAAG,IACL,IACD,GACJ,EACV,cAAK,SAAS,EAAC,2GAA2G,GAAG,IACnH,CACX,CAAC;IACH,CAAC;CACD,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export interface GlobalsPreflightConfig {
|
|
2
2
|
disableZIndexes?: boolean;
|
|
3
|
+
rootSelector?: string;
|
|
3
4
|
}
|
|
4
|
-
export declare const globalPreflight: (
|
|
5
|
+
export declare const globalPreflight: ({ disableZIndexes, rootSelector, }: GlobalsPreflightConfig) => import("unocss").Preflight<object>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @unocss-include
|
|
2
2
|
import { PROPS } from '../logic/properties.js';
|
|
3
3
|
import { preflight } from './_util.js';
|
|
4
|
-
export const globalPreflight = (
|
|
4
|
+
export const globalPreflight = ({ disableZIndexes, rootSelector = '#root, #main, #app, #storybook-root', }) => preflight({
|
|
5
5
|
getCSS: () => `
|
|
6
6
|
:root {
|
|
7
7
|
${PROPS.USER.FONTS.SANS}: "Inter", sans-serif;
|
|
@@ -11,7 +11,7 @@ export const globalPreflight = (config) => preflight({
|
|
|
11
11
|
|
|
12
12
|
--z-now-playing: 40;
|
|
13
13
|
--z-nav: 50;
|
|
14
|
-
${
|
|
14
|
+
${disableZIndexes
|
|
15
15
|
? ''
|
|
16
16
|
: `
|
|
17
17
|
--z-menu: 100;
|
|
@@ -41,8 +41,11 @@ export const globalPreflight = (config) => preflight({
|
|
|
41
41
|
overflow: overlay;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
${rootSelector} {
|
|
45
45
|
isolation: isolate;
|
|
46
|
+
display: flex;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
min-height: 100dvh;
|
|
46
49
|
}
|
|
47
50
|
|
|
48
51
|
a {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"globals.js","sourceRoot":"","sources":["../../../../src/uno/preflights/globals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"globals.js","sourceRoot":"","sources":["../../../../src/uno/preflights/globals.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAOvC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC/B,eAAe,EACf,YAAY,GAAG,qCAAqC,GAC5B,EAAE,EAAE,CAC5B,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;GAEb,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI;GACrB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;GACtB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK;GACtB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,SAAS,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI;;;;GAKvD,eAAe;QACd,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC;;;;;;EAOJ;;GAEE,KAAK,CAAC,QAAQ,CAAC,YAAY;GAC3B,KAAK,CAAC,QAAQ,CAAC,cAAc;;GAE7B,KAAK,CAAC,KAAK,CAAC,UAAU;;;;;;;qBAOJ,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO;;;;;;;;;;GAU1C,YAAY;;;;;;;;;;;;;;;;;;;CAmBd;CACC,CAAC,CAAC"}
|
|
@@ -2,12 +2,13 @@
|
|
|
2
2
|
import { defaultPresetHues } from '../defaults.js';
|
|
3
3
|
import { PROPS } from '../logic/properties.js';
|
|
4
4
|
import { preflight } from './_util.js';
|
|
5
|
-
export const userPreflight = ({ saturation =
|
|
5
|
+
export const userPreflight = ({ saturation = 0.5, primaryHue = defaultPresetHues.lemon.sourceHue, accentHue = defaultPresetHues.leek.sourceHue, spacingScale = 1, borderScale = 1, cornerScale = 1, shadowSpread = 1, namedHues, fontSize = 16, focusColor = 'accent', }) => preflight({
|
|
6
6
|
getCSS: () => {
|
|
7
|
+
const sat = saturation > 1 ? saturation / 100 : saturation;
|
|
7
8
|
return `
|
|
8
9
|
@layer preflightBase {
|
|
9
10
|
:root {
|
|
10
|
-
${PROPS.USER.SATURATION}: ${
|
|
11
|
+
${PROPS.USER.SATURATION}: ${sat};
|
|
11
12
|
${PROPS.USER.CORNER_SCALE}: ${cornerScale};
|
|
12
13
|
${PROPS.USER.SPACING_SCALE}: ${spacingScale};
|
|
13
14
|
${PROPS.USER.BORDER_SCALE}: ${borderScale};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"user.js","sourceRoot":"","sources":["../../../../src/uno/preflights/user.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAqBvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC7B,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"user.js","sourceRoot":"","sources":["../../../../src/uno/preflights/user.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAqBvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC7B,UAAU,GAAG,GAAG,EAChB,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAC9C,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAC5C,YAAY,GAAG,CAAC,EAChB,WAAW,GAAG,CAAC,EACf,WAAW,GAAG,CAAC,EACf,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,QAAQ,GACC,EAAE,EAAE,CAC1B,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE;QACZ,MAAM,GAAG,GAAG,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,UAAU,CAAC;QAC3D,OAAO;;;IAGN,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,GAAG;IAC7B,KAAK,CAAC,IAAI,CAAC,YAAY,KAAK,WAAW;IACvC,KAAK,CAAC,IAAI,CAAC,aAAa,KAAK,YAAY;IACzC,KAAK,CAAC,IAAI,CAAC,YAAY,KAAK,WAAW;IACvC,KAAK,CAAC,IAAI,CAAC,aAAa,KAAK,YAAY;;IAEzC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,UAAU;IAC3C,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS;IACzC,KAAK,CAAC,IAAI,CAAC,WAAW,SAAS,WAAW,CAAC,UAAU,CAAC;IAEvD,SAAS;YACR,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;iBACxB,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;gBAC5B,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,SAAS,GAAG;gBAC3D,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,KACzC,MAAM,CAAC,SACR,GAAG;aACH,CAAC;iBACD,IAAI,CAAC,IAAI,CAAC;YACb,CAAC,CAAC,EACJ;;;;eAIa,QAAQ;;;CAGtB,CAAC;IACA,CAAC;CACD,CAAC,CAAC;AAEJ,MAAM,WAAW,GAGb;IACH,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;IACvB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI;IACnD,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG;IAChD,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI;CACpC,CAAC"}
|
package/package.json
CHANGED
|
@@ -69,7 +69,7 @@ export const TextField = function TextField({
|
|
|
69
69
|
{...rest}
|
|
70
70
|
id={id}
|
|
71
71
|
autoFocus={autoFocus}
|
|
72
|
-
className={inputClassName}
|
|
72
|
+
className={clsx('layer-composed:w-full', inputClassName)}
|
|
73
73
|
ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
|
|
74
74
|
/>
|
|
75
75
|
</FieldRoot>
|
|
@@ -130,5 +130,5 @@ export function TextAreaField({
|
|
|
130
130
|
|
|
131
131
|
export const FieldRoot = withClassName(
|
|
132
132
|
'div',
|
|
133
|
-
'flex flex-col items-stretch self-stretch gap-xs',
|
|
133
|
+
'layer-components:(flex flex-col items-stretch self-stretch gap-xs)',
|
|
134
134
|
);
|
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
'use client';
|
|
2
1
|
import classNames from 'clsx';
|
|
3
2
|
import useMergedRef from '../../hooks/useMergedRef.js';
|
|
4
3
|
import { useBoundsCssVars } from '../../hooks/useSize.js';
|
|
5
4
|
import { Box, BoxProps } from '../box/Box.js';
|
|
6
5
|
|
|
6
|
+
const bodyRef =
|
|
7
|
+
typeof document !== 'undefined' ? { current: document.body } : undefined;
|
|
8
|
+
|
|
7
9
|
export function PageContent({
|
|
8
10
|
children,
|
|
9
11
|
className,
|
|
@@ -11,7 +13,7 @@ export function PageContent({
|
|
|
11
13
|
p,
|
|
12
14
|
...rest
|
|
13
15
|
}: BoxProps) {
|
|
14
|
-
const innerRef = useBoundsCssVars<HTMLDivElement>(200,
|
|
16
|
+
const innerRef = useBoundsCssVars<HTMLDivElement>(200, bodyRef, {
|
|
15
17
|
left: '--content-left',
|
|
16
18
|
top: '--content-top',
|
|
17
19
|
width: '--content-width',
|
|
@@ -1,40 +1,48 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
1
|
import classNames from 'clsx';
|
|
4
2
|
import { HTMLAttributes } from 'react';
|
|
3
|
+
import { createPortal } from 'react-dom';
|
|
5
4
|
import { GroupScaleReset } from '../../systems/GroupScale.js';
|
|
6
5
|
import { useConfig } from '../provider/Provider.js';
|
|
7
6
|
|
|
8
7
|
export function PageNowPlaying({
|
|
9
8
|
className,
|
|
10
9
|
keepAboveKeyboard,
|
|
10
|
+
disablePortal,
|
|
11
|
+
container = document.body,
|
|
11
12
|
...props
|
|
12
13
|
}: HTMLAttributes<HTMLDivElement> & {
|
|
13
14
|
keepAboveKeyboard?: boolean;
|
|
15
|
+
disablePortal?: boolean;
|
|
16
|
+
container?: HTMLElement;
|
|
14
17
|
}) {
|
|
15
18
|
const { virtualKeyboardBehavior } = useConfig();
|
|
16
19
|
|
|
17
|
-
|
|
20
|
+
const content = (
|
|
18
21
|
<GroupScaleReset>
|
|
19
22
|
<div
|
|
20
23
|
{...props}
|
|
21
24
|
className={classNames(
|
|
22
|
-
'layer-components:(fixed left-0 right-0 z-[var(--z-now-playing)] flex flex-col items-
|
|
25
|
+
'layer-components:(fixed left-0 right-0 z-[var(--z-now-playing)] flex flex-col items-center gap-2)',
|
|
23
26
|
// on mobile, this must be positioned above any nav bar that's present,
|
|
24
27
|
// or at minimum in the safe area
|
|
25
28
|
'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]',
|
|
26
|
-
'layer-components:transition-
|
|
27
|
-
'layer-components:md:(fixed bottom-3 left-[var(--content-left,20%)] top-auto w-[var(--content-width,100%)] items-end p-0 opacity-[var(--content-ready,0)] transition-opacity)',
|
|
29
|
+
'layer-components:md:(bottom-md left-[var(--content-left,0)] w-[var(--content-width,100%)] items-center p-0 opacity-[var(--content-ready,0)] transition-opacity)',
|
|
28
30
|
'layer-variants:p-2',
|
|
29
31
|
keepAboveKeyboard &&
|
|
30
32
|
virtualKeyboardBehavior === 'overlay' &&
|
|
31
33
|
'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]',
|
|
32
34
|
keepAboveKeyboard &&
|
|
33
35
|
virtualKeyboardBehavior === 'displace' &&
|
|
34
|
-
'layer-variants:lt-md:bottom-[max(var(--viewport-bottom-offset,0px),var(--nav-height,env(safe-area-inset-bottom,0px)))]',
|
|
36
|
+
'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,var(--viewport-bottom-offset,0px)),var(--nav-height,env(safe-area-inset-bottom,0px)))]',
|
|
35
37
|
className,
|
|
36
38
|
)}
|
|
37
39
|
/>
|
|
38
40
|
</GroupScaleReset>
|
|
39
41
|
);
|
|
42
|
+
|
|
43
|
+
if (disablePortal) {
|
|
44
|
+
return content;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
return createPortal(content, container);
|
|
40
48
|
}
|
|
@@ -1,13 +1,24 @@
|
|
|
1
1
|
import clsx from 'clsx';
|
|
2
2
|
import { HTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
|
-
export interface PageRootProps extends HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
export interface PageRootProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
mobileBasis?: '0' | 'auto';
|
|
6
|
+
}
|
|
5
7
|
|
|
6
|
-
export function PageRoot({
|
|
8
|
+
export function PageRoot({
|
|
9
|
+
className,
|
|
10
|
+
children,
|
|
11
|
+
mobileBasis = 'auto',
|
|
12
|
+
...rest
|
|
13
|
+
}: PageRootProps) {
|
|
7
14
|
return (
|
|
8
15
|
<div
|
|
9
16
|
className={clsx(
|
|
10
|
-
|
|
17
|
+
// TODO: once I'm sure which one is right, remove the other
|
|
18
|
+
mobileBasis === '0'
|
|
19
|
+
? 'layer-components:flex-basis-0'
|
|
20
|
+
: 'layer-components:flex-basis-auto',
|
|
21
|
+
'layer-components:(min-h-100dvh flex-shrink-1 flex-grow-1 bg-wash)',
|
|
11
22
|
'layer-components:(grid grid-cols-[1fr] grid-rows-[1fr_auto] grid-areas-[content]-[nav] items-start justify-center)',
|
|
12
23
|
'md:layer-responsive:(grid-cols-[1fr_auto_20fr_1fr] grid-areas-[gutter1_nav_content_gutter2] h-auto min-h-auto bg-wash)',
|
|
13
24
|
'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])',
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
import { useEffect, useState } from 'react';
|
|
3
3
|
import { Avatar } from '../avatar/Avatar.js';
|
|
4
|
+
import { Box } from '../box/Box.js';
|
|
4
5
|
import { Button } from '../button/index.js';
|
|
5
6
|
import { Card } from '../card/Card.js';
|
|
6
7
|
import { Input } from '../input/index.js';
|
|
@@ -36,7 +37,7 @@ export const Default: Story = {
|
|
|
36
37
|
const [content, setContent] = useState(true);
|
|
37
38
|
const toggleContent = () => setContent((prev) => !prev);
|
|
38
39
|
return (
|
|
39
|
-
<PageRoot
|
|
40
|
+
<PageRoot>
|
|
40
41
|
<PageContent>
|
|
41
42
|
<div className="text-center">
|
|
42
43
|
<h1 className="text-3xl font-bold">Hello, World!</h1>
|
|
@@ -52,7 +53,11 @@ export const Default: Story = {
|
|
|
52
53
|
))}
|
|
53
54
|
</Card.Grid>
|
|
54
55
|
)}
|
|
55
|
-
<PageNowPlaying>
|
|
56
|
+
<PageNowPlaying>
|
|
57
|
+
<Box surface="white" elevated="lg" full p>
|
|
58
|
+
Now playing
|
|
59
|
+
</Box>
|
|
60
|
+
</PageNowPlaying>
|
|
56
61
|
</PageContent>
|
|
57
62
|
<PageNav>
|
|
58
63
|
<NavBarRoot>
|
|
@@ -90,7 +95,7 @@ export const Default: Story = {
|
|
|
90
95
|
export const ManualWidth: Story = {
|
|
91
96
|
render: () => {
|
|
92
97
|
return (
|
|
93
|
-
<PageRoot
|
|
98
|
+
<PageRoot>
|
|
94
99
|
<PageContent className="max-w-300px">
|
|
95
100
|
<div className="text-center">
|
|
96
101
|
<h1 className="text-3xl font-bold">Hello, World!</h1>
|
|
@@ -148,7 +153,11 @@ export const WithoutNav: Story = {
|
|
|
148
153
|
))}
|
|
149
154
|
</Card.Grid>
|
|
150
155
|
</div>
|
|
151
|
-
<PageNowPlaying>
|
|
156
|
+
<PageNowPlaying>
|
|
157
|
+
<Box full elevated="lg" p surface="white">
|
|
158
|
+
Now playing
|
|
159
|
+
</Box>
|
|
160
|
+
</PageNowPlaying>
|
|
152
161
|
</PageContent>
|
|
153
162
|
</PageRoot>
|
|
154
163
|
),
|
|
@@ -3,9 +3,13 @@ import { preflight } from './_util.js';
|
|
|
3
3
|
|
|
4
4
|
export interface GlobalsPreflightConfig {
|
|
5
5
|
disableZIndexes?: boolean;
|
|
6
|
+
rootSelector?: string;
|
|
6
7
|
}
|
|
7
8
|
|
|
8
|
-
export const globalPreflight = (
|
|
9
|
+
export const globalPreflight = ({
|
|
10
|
+
disableZIndexes,
|
|
11
|
+
rootSelector = '#root, #main, #app, #storybook-root',
|
|
12
|
+
}: GlobalsPreflightConfig) =>
|
|
9
13
|
preflight({
|
|
10
14
|
getCSS: () => `
|
|
11
15
|
:root {
|
|
@@ -17,7 +21,7 @@ export const globalPreflight = (config: GlobalsPreflightConfig) =>
|
|
|
17
21
|
--z-now-playing: 40;
|
|
18
22
|
--z-nav: 50;
|
|
19
23
|
${
|
|
20
|
-
|
|
24
|
+
disableZIndexes
|
|
21
25
|
? ''
|
|
22
26
|
: `
|
|
23
27
|
--z-menu: 100;
|
|
@@ -48,8 +52,11 @@ export const globalPreflight = (config: GlobalsPreflightConfig) =>
|
|
|
48
52
|
overflow: overlay;
|
|
49
53
|
}
|
|
50
54
|
|
|
51
|
-
|
|
55
|
+
${rootSelector} {
|
|
52
56
|
isolation: isolate;
|
|
57
|
+
display: flex;
|
|
58
|
+
flex-direction: column;
|
|
59
|
+
min-height: 100dvh;
|
|
53
60
|
}
|
|
54
61
|
|
|
55
62
|
a {
|
|
@@ -22,7 +22,7 @@ export interface UserPreflightOptions {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
export const userPreflight = ({
|
|
25
|
-
saturation =
|
|
25
|
+
saturation = 0.5,
|
|
26
26
|
primaryHue = defaultPresetHues.lemon.sourceHue,
|
|
27
27
|
accentHue = defaultPresetHues.leek.sourceHue,
|
|
28
28
|
spacingScale = 1,
|
|
@@ -35,10 +35,11 @@ export const userPreflight = ({
|
|
|
35
35
|
}: UserPreflightOptions) =>
|
|
36
36
|
preflight({
|
|
37
37
|
getCSS: () => {
|
|
38
|
+
const sat = saturation > 1 ? saturation / 100 : saturation;
|
|
38
39
|
return `
|
|
39
40
|
@layer preflightBase {
|
|
40
41
|
:root {
|
|
41
|
-
${PROPS.USER.SATURATION}: ${
|
|
42
|
+
${PROPS.USER.SATURATION}: ${sat};
|
|
42
43
|
${PROPS.USER.CORNER_SCALE}: ${cornerScale};
|
|
43
44
|
${PROPS.USER.SPACING_SCALE}: ${spacingScale};
|
|
44
45
|
${PROPS.USER.BORDER_SCALE}: ${borderScale};
|