@a-type/ui 5.0.21 → 6.0.0

package/dist/components/input/Input.module.css

@@ -0,0 +1,100 @@
+.input {
+	display: flex;
+	flex-grow: 1;
+	user-select: auto;
+	padding: var(--m-control-padding-block) 0px;
+	min-width: 60px;
+
+	@apply --mx-fg(inherit);
+	@apply --mx-bg(transparent);
+	border: none;
+
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
+
+	&::placeholder {
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+	}
+
+	/* Focus visuals handled by wrapper */
+	&:focus,
+	&:focus-visible {
+		outline: none;
+	}
+
+	/* &:first-child {
+		padding-left: var(--m-control-padding-inline);
+		border-top-left-radius: inherit;
+		border-bottom-left-radius: inherit;
+	}
+	&:last-child {
+		padding-right: var(--m-control-padding-inline);
+		border-top-right-radius: inherit;
+		border-bottom-right-radius: inherit;
+	} */
+}
+
+.inputBorder {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+	width: max-content;
+	overflow: clip;
+
+	transition: box-shadow var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: inset var(--m-shadow-sm);
+
+	@apply --mx-fg(var(--m-control-fg));
+	@apply --mx-bg(var(--m-control-bg));
+	@apply --mx-borderColor(var(--m-control-borderColor));
+	border-radius: var(--m-control-radius);
+
+	font-size: var(--m-text-secondary-size);
+	line-height: var(--m-text-secondary-lineHeight);
+	font-weight: var(--m-text-secondary-weight);
+
+	&:has(input:disabled),
+	&:has(textarea:disabled) {
+		--mx-shadow-value: 0 0 0 0 transparent;
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor-lighter(2);
+
+		& input:placeholder,
+		& textarea::placeholder {
+			@apply --mx-fg-lighter(2);
+		}
+	}
+
+	&:has(input:focus-visible[data-focus-clicked='false']),
+	&:has(textarea:focus-visible[data-focus-clicked='false']) {
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-focus-ring();
+	}
+	&:has(input:focus),
+	&:has(textarea:focus) {
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-ring(var(--m-color-main-light), 4px);
+	}
+
+	&:has(input:hover:not(:disabled):not(:focus)),
+	&:has(textarea:hover:not(:disabled):not(:focus)) {
+		@apply --mx-bg-lighter(2);
+		@apply --mx-borderColor-heavier(2);
+	}
+
+	& > [data-icon] {
+		margin-inline: var(--m-spacing-sm);
+	}
+
+	padding-inline: var(--m-control-padding-inline);
+	& > [data-input-border-flush]:first-child {
+		margin-left: calc(-1 * var(--m-control-padding-inline));
+	}
+	& > [data-input-border-flush]:last-child {
+		margin-right: calc(-1 * var(--m-control-padding-inline));
+	}
+}

package/dist/components/input/Input.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Input } from './Input.js';
+declare const meta: {
+    title: string;
+    component: (({ className, borderRef, startAccessory, endAccessory, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime").JSX.Element) & {
+        Border: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+        Input: ({ autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs, onValueChange, ...props }: import("./Input.js").InputProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    argTypes: {
+        disabled: {
+            control: "boolean";
+        };
+    };
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const ButtonAndInput: Story;
+export declare const WithAccessories: Story;
+export declare const NestedInBoxes: Story;

package/dist/components/input/Input.stories.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import { Input } from './Input.js';
+const meta = {
+    title: 'Components/Input',
+    component: Input,
+    argTypes: {
+        disabled: { control: 'boolean' },
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {};
+export const ButtonAndInput = {
+    render: (args) => (_jsxs(Box, { gap: true, items: "center", children: [_jsx(Input, Object.assign({ placeholder: "Type something..." }, args)), _jsx(Button, { children: "Submit" })] })),
+};
+export const WithAccessories = {
+    render: (args) => (_jsxs(Input.Border, { children: [_jsx(Icon, { name: "search" }), _jsx(Input.Input, Object.assign({ placeholder: "Search..." }, args)), _jsx(Button, { emphasis: "ghost", children: _jsx(Icon, { name: "arrowRight" }) })] })),
+};
+export const NestedInBoxes = {
+    render: (args) => (_jsx(Box, { p: true, border: true, rounded: true, children: _jsx(Box, { p: true, border: true, rounded: true, children: _jsx(Input, Object.assign({ placeholder: "Type something..." }, args)) }) })),
+};
+//# sourceMappingURL=Input.stories.js.map

package/dist/components/input/Input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../src/components/input/Input.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE;QACT,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KAChC;IACD,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC4B,CAAC;AAE/B,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU,EAAE,CAAC;AAEjC,MAAM,CAAC,MAAM,cAAc,GAAU;IACpC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,MAAC,GAAG,IAAC,GAAG,QAAC,KAAK,EAAC,QAAQ,aACtB,KAAC,KAAK,kBAAC,WAAW,EAAC,mBAAmB,IAAK,IAAI,EAAI,EACnD,KAAC,MAAM,yBAAgB,IAClB,CACN;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACrC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,MAAC,KAAK,CAAC,MAAM,eACZ,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,EACtB,KAAC,KAAK,CAAC,KAAK,kBAAC,WAAW,EAAC,WAAW,IAAK,IAAI,EAAI,EACjD,KAAC,MAAM,IAAC,QAAQ,EAAC,OAAO,YACvB,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GAClB,IACK,CACf;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IACnC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,KAAC,GAAG,IAAC,CAAC,QAAC,MAAM,QAAC,OAAO,kBACpB,KAAC,GAAG,IAAC,CAAC,QAAC,MAAM,QAAC,OAAO,kBACpB,KAAC,KAAK,kBAAC,WAAW,EAAC,mBAAmB,IAAK,IAAI,EAAI,GAC9C,GACD,CACN;CACD,CAAC"}

package/dist/components/input/index.js

@@ -0,0 +1,2 @@
+export * from './Input.js';
+//# sourceMappingURL=index.js.map

package/dist/components/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/input/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/layouts/PageContent.d.ts

@@ -0,0 +1,2 @@
+import { BoxProps } from '../box/Box.js';
+export declare function PageContent({ children, className, ref, ...rest }: BoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layouts/PageContent.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'clsx';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { useBoundsCssVars } from '../../hooks/useSize.js';
+import { Box } from '../box/Box.js';
+import cls from './PageContent.module.css';
+const bodyRef = typeof document !== 'undefined' ? { current: document.body } : undefined;
+export function PageContent(_a) {
+    var { children, className, ref } = _a, rest = __rest(_a, ["children", "className", "ref"]);
+    const innerRef = useBoundsCssVars(200, bodyRef, {
+        left: '--content-left',
+        top: '--content-top',
+        width: '--content-width',
+        height: '--content-height',
+        ready: '--content-ready',
+    });
+    const finalRef = useMergedRef(ref, innerRef);
+    return (_jsx(Box, Object.assign({}, rest, { render: _jsx("main", {}), className: classNames(cls.root, className), ref: finalRef }, rest, { children: children })));
+}
+//# sourceMappingURL=PageContent.js.map

package/dist/components/layouts/PageContent.js.map

@@ -0,0 +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;AAC9C,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAE3C,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,EAA+C;QAA/C,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,OAAqB,EAAhB,IAAI,cAAnC,gCAAqC,CAAF;IAC9D,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,oBACC,IAAI,IACR,MAAM,EAAE,gBAAQ,EAChB,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,QAAQ,IACT,IAAI,cAEP,QAAQ,IACJ,CACN,CAAC;AACH,CAAC"}

package/dist/components/layouts/PageContent.module.css

@@ -0,0 +1,25 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: start;
+	width: 100%;
+	anchor-name: --page-content;
+	flex: 1;
+
+	gap: var(--m-spacing-md);
+
+	padding: var(--m-spacing-md);
+	@media (min-width: 768px) {
+		padding: var(--m-spacing-lg);
+	}
+
+	margin-inline: auto;
+	max-width: 100%;
+	min-width: 0;
+
+	container-type: inline-size;
+	container-name: --page-content;
+
+	grid-area: content;
+}

package/dist/components/layouts/PageFixedArea.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'clsx';
+import cls from './PageFixedArea.module.css';
+export function PageFixedArea(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return _jsx("div", Object.assign({}, props, { className: classNames(cls.root, className) }));
+}
+//# sourceMappingURL=PageFixedArea.js.map

package/dist/components/layouts/PageFixedArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFixedArea.js","sourceRoot":"","sources":["../../../src/components/layouts/PageFixedArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,GAAG,MAAM,4BAA4B,CAAC;AAE7C,MAAM,UAAU,aAAa,CAAC,EAGG;QAHH,EAC7B,SAAS,OAEuB,EAD7B,KAAK,cAFqB,aAG7B,CADQ;IAER,OAAO,8BAAS,KAAK,IAAE,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC;AACvE,CAAC"}

package/dist/components/layouts/PageFixedArea.module.css

@@ -0,0 +1,11 @@
+.root {
+	position: sticky;
+	top: 0;
+	z-index: var(--z-nav);
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: var(--m-spacing-sm);
+	@apply --mx-bg(inherit);
+}

package/dist/components/layouts/PageNav.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'clsx';
+import { useRef } from 'react';
+import { useBoundsCssVars } from '../../hooks.js';
+import { HideWhileKeyboardOpen } from '../utility/HideWhileKeyboardOpen.js';
+import cls from './PageNav.module.css';
+export function PageNav(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    const bodyRef = useRef(typeof document === 'undefined' ? null : document.documentElement);
+    const ref = useBoundsCssVars(undefined, bodyRef, {
+        left: '--nav-left',
+        top: '--nav-top',
+        width: '--nav-width',
+        height: '--nav-height',
+        ready: '--nav-ready',
+    });
+    return (_jsx(HideWhileKeyboardOpen, Object.assign({}, props, { className: classNames(cls.root, className), ref: ref, children: children })));
+}
+//# sourceMappingURL=PageNav.js.map

package/dist/components/layouts/PageNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageNav.js","sourceRoot":"","sources":["../../../src/components/layouts/PageNav.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAC9B,OAAO,EAAkB,MAAM,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,GAAG,MAAM,sBAAsB,CAAC;AAEvC,MAAM,UAAU,OAAO,CAAC,EAIS;QAJT,EACvB,SAAS,EACT,QAAQ,OAEwB,EAD7B,KAAK,cAHe,yBAIvB,CADQ;IAER,MAAM,OAAO,GAAG,MAAM,CACrB,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CACjE,CAAC;IACF,MAAM,GAAG,GAAG,gBAAgB,CAAiB,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,KAAC,qBAAqB,oBACjB,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAC1C,GAAG,EAAE,GAAG,YAEP,QAAQ,IACc,CACxB,CAAC;AACH,CAAC"}

package/dist/components/layouts/PageNav.module.css

@@ -0,0 +1,31 @@
+.root {
+	grid-area: nav;
+	position: sticky;
+	bottom: 0;
+	z-index: var(--z-nav);
+
+	padding-block-end: calc(0.25rem + env(safe-area-inset-bottom, 0px));
+
+	@apply --mx-bg(inherit);
+
+	&::before {
+		position: absolute;
+		content: '';
+		top: 0;
+		left: var(--m-spacing-md);
+		right: var(--m-spacing-md);
+		height: 1px;
+		@apply --mx-bg(var(--m-color-neutral-heavy));
+		@media (min-width: 768px) {
+			display: none;
+		}
+	}
+
+	@media (min-width: 768px) {
+		bottom: auto;
+		left: auto;
+		right: auto;
+		top: var(--m-spacing-lg);
+		height: auto;
+	}
+}

package/dist/components/layouts/PageNowPlaying.js

@@ -0,0 +1,26 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'clsx';
+import { createPortal } from 'react-dom';
+import { useConfig } from '../provider/Provider.js';
+import cls from './PageNowPlaying.module.css';
+export function PageNowPlaying(_a) {
+    var { className, keepAboveKeyboard, disablePortal, container = document.body } = _a, props = __rest(_a, ["className", "keepAboveKeyboard", "disablePortal", "container"]);
+    const { virtualKeyboardBehavior } = useConfig();
+    const content = (_jsx("div", Object.assign({}, props, { className: classNames(cls.root, className), "data-disable-portal": disablePortal, "data-keep-above-keyboard": keepAboveKeyboard, "data-virtual-keyboard-behavior": virtualKeyboardBehavior })));
+    if (disablePortal) {
+        return content;
+    }
+    return createPortal(content, container);
+}
+//# sourceMappingURL=PageNowPlaying.js.map

package/dist/components/layouts/PageNowPlaying.js.map

@@ -0,0 +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,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,GAAG,MAAM,6BAA6B,CAAC;AAE9C,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,8BACK,KAAK,IACT,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,yBACrB,aAAa,8BACR,iBAAiB,oCACX,uBAAuB,IACtD,CACF,CAAC;IAEF,IAAI,aAAa,EAAE,CAAC;QACnB,OAAO,OAAO,CAAC;IAChB,CAAC;IAED,OAAO,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AACzC,CAAC"}

package/dist/components/layouts/PageNowPlaying.module.css

@@ -0,0 +1,46 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--m-spacing-sm);
+
+	padding: var(--m-spacing-sm);
+
+	position: fixed;
+	position-anchor: --page-content;
+	left: anchor(left);
+	right: anchor(right);
+	top: auto;
+	bottom: --fn-literal(var(--nav-height, env(safe-area-inset-bottom, 0px)));
+
+	@media (min-width: 768px) {
+		bottom: var(--m-spacing-md);
+		align-items: center;
+		transition: bottom var(--m-duration) var(--m-easing);
+	}
+
+	&[data-disable-portal='true'] {
+		z-index: var(--z-now-playing);
+	}
+
+	&[data-keep-above-keyboard='true'] {
+		@media (max-width: 767px) {
+			top: auto;
+			&[data-virtual-keyboard-behavior='overlay'] {
+				bottom: max(
+					var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px)),
+					var(--nav-height, env(safe-area-inset-bottom, 0px))
+				);
+			}
+			&[data-virtual-keyboard-behavior='displace'] {
+				bottom: max(
+					var(
+						--mock-virtual-keyboard-height,
+						var(--viewport-bottom-offset, 0px)
+					),
+					var(--nav-height, env(safe-area-inset-bottom, 0px))
+				);
+			}
+		}
+	}
+}

package/dist/components/layouts/PageRoot.d.ts

@@ -0,0 +1 @@
+export declare const PageRoot: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;

package/dist/components/layouts/PageRoot.js

@@ -0,0 +1,5 @@
+import { withClassName } from '../../hooks.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './PageRoot.module.css';
+export const PageRoot = withClassName(SlotDiv, cls.root);
+//# sourceMappingURL=PageRoot.js.map

package/dist/components/layouts/PageRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageRoot.js","sourceRoot":"","sources":["../../../src/components/layouts/PageRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAExC,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC"}

package/dist/components/layouts/PageRoot.module.css

@@ -0,0 +1,29 @@
+.root {
+	align-items: stretch;
+	justify-content: center;
+	min-height: 100dvh;
+	flex-shrink: 1;
+	flex-grow: 1;
+	flex-basis: auto;
+	height: max-content;
+
+	display: flex;
+	flex-direction: column;
+
+	@apply --mx-bg(var(--m-color-main-paper));
+
+	@media (min-width: 768px) {
+		display: grid;
+		grid-template-areas: 'gutter1 nav content gutter2';
+		grid-template-columns: 1fr auto 20fr 1fr;
+		grid-template-rows: auto;
+		height: auto;
+		min-height: auto;
+		align-items: start;
+		flex-basis: 0;
+	}
+
+	@media (min-width: 1024px) {
+		grid-template-columns: 1fr auto min(800px, 70vw) 1fr;
+	}
+}

package/dist/components/layouts/PageSection.js

@@ -0,0 +1,5 @@
+import { withClassName } from '../../hooks/withClassName.js';
+import cls from './PageSection.module.css';
+export const PageSection = withClassName('div', cls.root);
+export const PageSectionGrid = withClassName('div', cls.grid);
+//# sourceMappingURL=PageSection.js.map

package/dist/components/layouts/PageSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSection.js","sourceRoot":"","sources":["../../../src/components/layouts/PageSection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,GAAG,MAAM,0BAA0B,CAAC;AAE3C,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;AAE1D,MAAM,CAAC,MAAM,eAAe,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC"}

package/dist/components/layouts/PageSection.module.css

@@ -0,0 +1,19 @@
+.root {
+	max-width: 80vw;
+	width: 100%;
+	padding: var(--m-spacing-md);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	border-radius: var(--m-radius-lg);
+	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+
+	@media (min-width: 768px) {
+		min-width: 0;
+	}
+}
+
+.grid {
+	display: grid;
+	gap: var(--m-spacing-md);
+	align-items: start;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}

package/dist/components/layouts/index.js

@@ -0,0 +1,7 @@
+export * from './PageRoot.js';
+export * from './PageContent.js';
+export * from './PageFixedArea.js';
+export * from './PageNav.js';
+export * from './PageNowPlaying.js';
+export * from './PageSection.js';
+//# sourceMappingURL=index.js.map

package/dist/components/layouts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layouts/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC"}

package/dist/components/layouts/layouts.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const ManualWidth: Story;
+export declare const WithoutNav: Story;
+export declare const WithVirtualKeyboard: Story;

package/dist/components/layouts/layouts.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/index.js';
+import { Card } from '../card/Card.js';
+import { Input } from '../input/index.js';
+import { NavBarItem, NavBarItemIcon, NavBarItemIconWrapper, NavBarItemPip, NavBarItemText, NavBarRoot, } from '../navBar/index.js';
+import { Switch } from '../switch/Switch.js';
+import { PageContent } from './PageContent.js';
+import { PageNav } from './PageNav.js';
+import { PageNowPlaying } from './PageNowPlaying.js';
+import { PageRoot } from './PageRoot.js';
+const meta = {
+    title: 'Components/Layouts',
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [content, setContent] = useState(true);
+        const toggleContent = () => setContent((prev) => !prev);
+        return (_jsxs(PageRoot, { children: [_jsxs(PageContent, { children: [_jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("h1", { className: "text-primary", style: { fontWeight: 'bold' }, children: "Hello, World!" }), _jsx("p", { className: "text-primary", 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: "ambient", 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: "neutral", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: (_, { size }) => (_jsx(Avatar, { name: "Grant Forrest", size: size })) }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
+    },
+};
+export const ManualWidth = {
+    render: () => {
+        return (_jsxs(PageRoot, { children: [_jsxs(PageContent, { style: { maxWidth: 300 }, children: [_jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("h1", { className: "text-primary", style: { fontWeight: 'bold' }, children: "Hello, World!" }), _jsx("p", { className: "text-primary", 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: "neutral", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
+    },
+};
+export const WithoutNav = {
+    render: () => (_jsx(PageRoot, { style: { height: '100%', width: '100%' }, children: _jsxs(PageContent, { children: [_jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("h1", { className: "text-primary", style: { fontWeight: 'bold' }, children: "Hello, World!" }), _jsx("p", { className: "text-primary", 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: "ambient", children: "Now playing" }) })] }) })),
+};
+export const WithVirtualKeyboard = {
+    render() {
+        const [keyboard, setKeyboard] = useState(false);
+        useEffect(() => {
+            if (keyboard) {
+                document.body.style.setProperty('--mock-virtual-keyboard-height', '300px');
+            }
+            else {
+                document.body.style.removeProperty('--mock-virtual-keyboard-height');
+            }
+        }, [keyboard]);
+        return (_jsxs(PageRoot, { style: { height: '100%', width: '100%' }, children: [_jsxs(PageContent, { children: [_jsxs("div", { style: { textAlign: 'center' }, children: [_jsx("h1", { className: "text-primary", style: { fontWeight: 'bold' }, children: "Hello, World!" }), _jsx("p", { className: "text-primary", children: "This is a simple page layout." })] }), _jsxs(PageNowPlaying, { keepAboveKeyboard: true, children: [_jsx(Button, { onClick: () => setKeyboard((v) => !v), children: "Toggle fake kb" }), _jsx(Input, {})] })] }), _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, { render: _jsx(Avatar, { name: "Grant Forrest" }) }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] })] }) }), _jsx("div", { className: "bg-neutral-ink", style: {
+                        position: 'fixed',
+                        bottom: 0,
+                        left: 0,
+                        right: 0,
+                        height: 'var(--mock-virtual-keyboard-height,0)',
+                        width: '100%',
+                        transition: 'height var(--m-duration) var(--m-easing)',
+                    } })] }));
+    },
+};
+//# sourceMappingURL=layouts.stories.js.map

package/dist/components/layouts/layouts.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layouts.stories.js","sourceRoot":"","sources":["../../../src/components/layouts/layouts.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/lightbox/Lightbox.d.ts

@@ -0,0 +1,27 @@
+import { Dialog, DialogCloseProps, DialogPopupProps } from '@base-ui/react/dialog';
+import { ReactElement, ReactNode } from 'react';
+export interface LightboxProps {
+    children?: ReactNode;
+}
+export declare const LightboxRoot: typeof Dialog.Root;
+export declare const LightboxTrigger: import("react").FunctionComponent<import("@base-ui/react/dialog").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>>;
+export declare const LightboxPortal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const LightboxTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const LightboxClose: (props: DialogCloseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LightboxOverlay: import("react").FunctionComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const LightboxContentRoot: import("react").FunctionComponent<Omit<DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const LightboxContent: (props: DialogPopupProps) => import("react/jsx-runtime").JSX.Element;
+declare function LightboxDefault({ children, }: Omit<LightboxProps, 'children'> & {
+    children?: ReactElement;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const Lightbox: typeof LightboxDefault & {
+    Overlay: import("react").FunctionComponent<Omit<import("@base-ui/react/dialog").DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: (props: DialogPopupProps) => import("react/jsx-runtime").JSX.Element;
+    Image: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>;
+    Root: typeof Dialog.Root;
+    Trigger: import("react").FunctionComponent<import("@base-ui/react/dialog").DialogTriggerProps<unknown> & import("react").RefAttributes<HTMLElement>>;
+    Close: (props: DialogCloseProps) => import("react/jsx-runtime").JSX.Element;
+    Title: () => import("react/jsx-runtime").JSX.Element;
+    Portal: import("react").ForwardRefExoticComponent<Omit<import("@base-ui/react/dialog").DialogPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export {};