@a-type/ui 5.0.21 → 6.0.0

package/dist/components/masonry/masonry.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { debounce } from '@a-type/utils';
+import clsx from 'clsx';
+import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
+class MasonryLayout {
+    constructor(config) {
+        this.config = config;
+        this.container = null;
+        this.columns = 0;
+        this.updateConfig = (config) => {
+            var _a, _b;
+            const gapChanged = config.gap !== this.config.gap;
+            this.config = config;
+            // hacky way to avoid updating twice...
+            if (!this.updateFromContainerSize((_b = (_a = this.container) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0) &&
+                gapChanged) {
+                this.relayout();
+            }
+        };
+        this.updateFromContainerSize = (containerWidth) => {
+            if (typeof this.config.columns === 'function') {
+                const newValue = this.config.columns(containerWidth);
+                if (newValue !== this.columns) {
+                    this.columns = newValue;
+                    this.relayout();
+                    return true;
+                }
+            }
+            else if (this.config.columns !== this.columns) {
+                this.columns = this.config.columns;
+                this.relayout();
+                return true;
+            }
+            return false;
+        };
+        this.relayout = debounce(() => {
+            if (!this.container) {
+                return;
+            }
+            const tracks = new Array(this.columns).fill(0);
+            const gap = this.config.gap;
+            // percentage-based width and x position so that items automatically
+            // layout correctly when the container is resized (as long as columns
+            // are the same)
+            const pixelColumnWidthMinusGap = (this.container.offsetWidth - gap * (this.columns - 1)) / this.columns;
+            const columnPercentageWidth = (pixelColumnWidthMinusGap / this.container.offsetWidth) * 100;
+            const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
+            const children = Array.from(this.container.children);
+            children.forEach((child, index) => {
+                let itemTrackSpan = parseInt(child.getAttribute('data-span') || '1');
+                if (isNaN(itemTrackSpan) || itemTrackSpan < 1) {
+                    itemTrackSpan = 1;
+                }
+                if (itemTrackSpan > this.columns) {
+                    itemTrackSpan = this.columns;
+                }
+                const trackIndex = pickTrack(tracks, itemTrackSpan);
+                const affectedTracks = tracks.slice(trackIndex, trackIndex + itemTrackSpan);
+                const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
+                const y = Math.max(...affectedTracks);
+                const width = columnPercentageWidth * itemTrackSpan +
+                    gapPercentageWidth * (itemTrackSpan - 1);
+                child.style.setProperty('position', 'absolute');
+                child.style.setProperty('visibility', 'visible');
+                child.style.setProperty('width', `${width}%`);
+                child.style.setProperty('left', `${x}%`);
+                child.style.setProperty('top', `${y}px`);
+                // wrap z-index after some items to avoid getting too high
+                child.style.setProperty('z-index', (index % 30).toString());
+                requestAnimationFrame(() => {
+                    child.style.setProperty('transition', 'transform 0.3s, top 0.3s');
+                });
+                for (let i = 0; i < itemTrackSpan; i++) {
+                    tracks[trackIndex + i] = y + child.offsetHeight + gap;
+                }
+            });
+            this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
+        }, 100);
+        this.columns =
+            typeof config.columns === 'function' ? config.columns(0) : config.columns;
+        this.relayout();
+    }
+}
+class ClientLayout extends MasonryLayout {
+    constructor(config) {
+        super(config);
+        this.containerResizeObserver = null;
+        this.containerMutationObserver = null;
+        this.handleContainerMutation = (entries) => {
+            for (const entry of entries) {
+                entry.addedNodes.forEach((node) => {
+                    if (node instanceof HTMLElement) {
+                        this.setupChild(node);
+                    }
+                });
+                entry.removedNodes.forEach((node) => {
+                    var _a;
+                    if (node instanceof HTMLElement) {
+                        (_a = this.childSizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(node);
+                    }
+                });
+            }
+            this.relayout();
+        };
+        this.handleChildResize = (entries) => {
+            // only worry about height changes
+            for (const entry of entries) {
+                const lastSeenHeight = entry.target.getAttribute('data-last-height');
+                const currentHeight = entry.contentRect.height;
+                entry.target.setAttribute('data-last-height', currentHeight.toString());
+                if (lastSeenHeight && lastSeenHeight !== currentHeight.toString()) {
+                    this.relayout();
+                }
+            }
+        };
+        this.attach = (container) => {
+            var _a, _b;
+            const disconnect = () => {
+                var _a, _b;
+                (_a = this.containerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                (_b = this.containerMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+                container.style.removeProperty('position');
+                container.style.removeProperty('overflow');
+                this.container = null;
+            };
+            if (container === this.container) {
+                return disconnect;
+            }
+            (_a = this.containerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+            (_b = this.containerMutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+            this.columns = 0;
+            this.container = container;
+            this.containerResizeObserver = new ResizeObserver(this.handleContainerResize);
+            this.containerMutationObserver = new MutationObserver(this.handleContainerMutation);
+            this.containerResizeObserver.observe(container);
+            this.containerMutationObserver.observe(container, { childList: true });
+            container.style.setProperty('position', 'relative');
+            container.style.setProperty('overflow', 'hidden');
+            container.style.setProperty('visibility', 'visible');
+            container.childNodes.forEach((node) => {
+                if (node instanceof HTMLElement) {
+                    this.setupChild(node);
+                }
+            });
+            if (!this.updateFromContainerSize(container.offsetWidth)) {
+                this.relayout();
+            }
+            return disconnect;
+        };
+        this.setupChild = (child) => {
+            child.style.setProperty('position', 'absolute');
+            // hide until laid out
+            child.style.setProperty('visibility', 'hidden');
+            this.childSizeObserver.observe(child);
+            this.childMutationObserver.observe(child, {
+                attributeFilter: ['data-span'],
+            });
+        };
+        this.handleContainerResize = (entries) => {
+            const containerWidth = entries[0].contentRect.width;
+            this.updateFromContainerSize(containerWidth);
+        };
+        this.childSizeObserver = new ResizeObserver(this.handleChildResize);
+        this.childMutationObserver = new MutationObserver(this.relayout);
+    }
+}
+class ServerLayout extends MasonryLayout {
+    constructor() {
+        super(...arguments);
+        this.attach = (container) => {
+            this.container = container;
+            this.container.style.setProperty('position', 'relative');
+            this.container.style.setProperty('overflow', 'hidden');
+            this.container.style.setProperty('visibility', 'visible');
+            container.childNodes.forEach((node) => {
+                if (node instanceof HTMLElement) {
+                    this.setupChild(node);
+                }
+            });
+            this.updateFromContainerSize(container.offsetWidth);
+            return () => { };
+        };
+    }
+    setupChild(child) {
+        child.style.setProperty('position', 'absolute');
+        child.style.setProperty('visibility', 'visible');
+    }
+}
+function pickTrack(tracks, trackSpan) {
+    const subTracks = tracks.slice(0, tracks.length - trackSpan + 1);
+    const min = Math.min(...subTracks);
+    const index = subTracks.indexOf(min);
+    if (index === -1) {
+        return 0;
+    }
+    return index;
+}
+const initialStyle = {
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden',
+    visibility: 'hidden',
+};
+export function Masonry({ className, children, columns = 3, gap = 16, }) {
+    const [layout] = useState(() => {
+        if (typeof window === 'undefined') {
+            return new ServerLayout({ columns, gap });
+        }
+        return new ClientLayout({ columns, gap });
+    });
+    useIsomorphicLayoutEffect(() => {
+        layout.updateConfig({ columns, gap });
+    }, [layout, columns, gap]);
+    const ref = useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        if (ref.current) {
+            return layout.attach(ref.current);
+        }
+    }, [layout, ref]);
+    return (_jsx("div", { ref: ref, style: initialStyle, className: clsx('layer-components:z-0', className), children: children }));
+}
+export function masonrySpan(span) {
+    return { 'data-span': span };
+}
+function useIsomorphicLayoutEffect(effect, deps = []) {
+    const isBrowser = typeof window !== 'undefined';
+    const useIsoEffect = isBrowser ? useLayoutEffect : useEffect;
+    return useIsoEffect(effect, deps);
+}
+//# sourceMappingURL=masonry.js.map

package/dist/components/masonry/masonry.js.map

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

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

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Masonry } from './masonry.js';
+declare const meta: {
+    title: string;
+    component: typeof Masonry;
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Masonry>;
+export declare const Default: Story;
+export declare const WithSpan: Story;

package/dist/components/masonry/masonry.stories.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '../box/Box.js';
+import { Masonry } from './masonry.js';
+const meta = {
+    title: 'Components/Masonry',
+    component: Masonry,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+const randomSpan = () => {
+    let span = 1;
+    if (Math.random() < 0.1) {
+        span = 2;
+    }
+    else if (Math.random() < 0.03) {
+        span = 3;
+    }
+    return span;
+};
+const content = (spans) => Array.from({ length: 100 }, (_, i) => {
+    const size = 100 + Math.floor(Math.random() * 100);
+    const [span, setSpan] = useState(randomSpan);
+    return (_jsx(Box, { layout: "center center", color: "primary", surface: true, border: true, style: { height: size }, "data-span": spans ? span : undefined, onClick: () => setSpan((v) => (v === 1 ? 2 : 1)), children: _jsx("div", { children: size }) }, i));
+});
+export const Default = {
+    render(props) {
+        return _jsx(Masonry, Object.assign({}, props, { children: content() }));
+    },
+};
+export const WithSpan = {
+    render(props) {
+        return _jsx(Masonry, Object.assign({}, props, { children: content(true) }));
+    },
+};
+//# sourceMappingURL=masonry.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.stories.js","sourceRoot":"","sources":["../../../src/components/masonry/masonry.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,UAAU,GAAG,GAAG,EAAE;IACvB,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,EAAE,CAAC;QACzB,IAAI,GAAG,CAAC,CAAC;IACV,CAAC;SAAM,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE,CAAC;QACjC,IAAI,GAAG,CAAC,CAAC;IACV,CAAC;IACD,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF,MAAM,OAAO,GAAG,CAAC,KAAe,EAAE,EAAE,CACnC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACpC,MAAM,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IACnD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAE7C,OAAO,CACN,KAAC,GAAG,IAEH,MAAM,EAAC,eAAe,EACtB,KAAK,EAAC,SAAS,EACf,OAAO,QACP,MAAM,QACN,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,eACZ,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAEhD,wBAAM,IAAI,GAAO,IATZ,CAAC,CAUD,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,KAAK;QACX,OAAO,KAAC,OAAO,oBAAK,KAAK,cAAG,OAAO,EAAE,IAAW,CAAC;IAClD,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,MAAM,CAAC,KAAK;QACX,OAAO,KAAC,OAAO,oBAAK,KAAK,cAAG,OAAO,CAAC,IAAI,CAAC,IAAW,CAAC;IACtD,CAAC;CACD,CAAC"}

package/dist/components/navBar/NavBar.d.ts

@@ -0,0 +1,34 @@
+import { UseRenderComponentProps } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { IconProps } from '../icon/index.js';
+export interface NavBarItemProps extends UseRenderComponentProps<'button'> {
+    className?: string;
+    children?: ReactNode;
+    active?: boolean;
+    color?: 'primary' | 'neutral' | 'accent';
+    render?: ReactElement | (() => ReactElement);
+}
+export declare const NavBarItem: ({ ref, className, active, color, ...rest }: NavBarItemProps & {
+    ref?: React.Ref<HTMLButtonElement>;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const NavBarItemIconWrapper: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const NavBarItemText: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+interface NavBarItemIconProps extends Omit<IconProps, 'name'> {
+    name?: IconProps['name'];
+    className?: string;
+    children?: ReactNode;
+    ref?: Ref<any>;
+}
+export declare const NavBarItemIcon: ({ ref, className, name, ...rest }: NavBarItemIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NavBarItemPip: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const NavBarRoot: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const NavBar: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>> & {
+    Item: ({ ref, className, active, color, ...rest }: NavBarItemProps & {
+        ref?: React.Ref<HTMLButtonElement>;
+    }) => import("react/jsx-runtime").JSX.Element;
+    ItemIcon: ({ ref, className, name, ...rest }: NavBarItemIconProps) => import("react/jsx-runtime").JSX.Element;
+    ItemText: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+    ItemIconWrapper: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    ItemPip: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+};
+export {};

package/dist/components/navBar/NavBar.js

@@ -0,0 +1,39 @@
+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 { Button } from '@base-ui/react/button';
+import classNames, { clsx } from 'clsx';
+import { withClassName } from '../../hooks.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
+import { Icon } from '../icon/index.js';
+import cls from './NavBar.module.css';
+export const NavBarItem = function NavBarItem(_a) {
+    var { ref, className, active, color = 'primary' } = _a, rest = __rest(_a, ["ref", "className", "active", "color"]);
+    const mobile = useMediaQuery('(max-width: 768px)');
+    return (_jsx(Button, Object.assign({ ref: ref, className: classNames(cls.item, mobile ? `@mode-denser` : '@mode-dense', `@mode-${color}`, className), "data-active": active }, rest)));
+};
+export const NavBarItemIconWrapper = withClassName('div', cls.itemIconWrapper);
+export const NavBarItemText = withClassName('span', cls.itemText);
+export const NavBarItemIcon = function NavBarItemIcon(_a) {
+    var { ref, className, name = 'placeholder' } = _a, rest = __rest(_a, ["ref", "className", "name"]);
+    return (_jsx(Icon, Object.assign({ name: name, className: clsx(cls.icon, className) }, rest, { ref: ref })));
+};
+export const NavBarItemPip = withClassName('div', '@mode-attention', cls.pip);
+export const NavBarRoot = withClassName('div', cls.root);
+export const NavBar = Object.assign(NavBarRoot, {
+    Item: NavBarItem,
+    ItemIcon: NavBarItemIcon,
+    ItemText: NavBarItemText,
+    ItemIconWrapper: NavBarItemIconWrapper,
+    ItemPip: NavBarItemPip,
+});
+//# sourceMappingURL=NavBar.js.map

package/dist/components/navBar/NavBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.js","sourceRoot":"","sources":["../../../src/components/navBar/NavBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,OAAO,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAa,MAAM,kBAAkB,CAAC;AACnD,OAAO,GAAG,MAAM,qBAAqB,CAAC;AAUtC,MAAM,CAAC,MAAM,UAAU,GAAG,SAAS,UAAU,CAAC,EAQ7C;QAR6C,EAC7C,GAAG,EACH,SAAS,EACT,MAAM,EACN,KAAK,GAAG,SAAS,OAIjB,EAHG,IAAI,cALsC,uCAM7C,CADO;IAIP,MAAM,MAAM,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACnD,OAAO,CACN,KAAC,MAAM,kBACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACpB,GAAG,CAAC,IAAI,EACR,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EACvC,SAAS,KAAK,EAAE,EAChB,SAAS,CACT,iBACY,MAAM,IACf,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;AAE/E,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,CAAC,CAAC;AAQlE,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,cAAc,CAAC,EAKhC;QALgC,EACrD,GAAG,EACH,SAAS,EACT,IAAI,GAAG,aAAa,OAEC,EADlB,IAAI,cAJ8C,4BAKrD,CADO;IAEP,OAAO,CACN,KAAC,IAAI,kBACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAChC,IAAI,IACR,GAAG,EAAE,GAAG,IACP,CACF,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IAC/C,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,cAAc;IACxB,eAAe,EAAE,qBAAqB;IACtC,OAAO,EAAE,aAAa;CACtB,CAAC,CAAC"}

package/dist/components/navBar/NavBar.module.css

@@ -0,0 +1,137 @@
+.root {
+	display: grid;
+	grid-auto-columns: 1fr;
+	grid-auto-flow: column;
+	height: auto;
+	justify-items: center;
+	overflow: clip;
+	border-radius: 0;
+	padding: var(--m-spacing-sm);
+	z-index: 50;
+	padding-bottom: calc(var(--m-spacing-sm) + env(safe-area-inset-bottom, 0px));
+
+	@media (min-width: 768px) {
+		height: min-content;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		justify-content: start;
+		gap: var(--m-spacing-sm);
+		overflow-x: clip;
+		overflow-y: auto;
+		border-radius: 0;
+		padding-bottom: var(--m-spacing-xl);
+		box-shadow: none;
+		@apply --mx-bg(transparent);
+		border: none;
+	}
+}
+
+.item {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	cursor: pointer;
+	user-select: none;
+	align-items: center;
+	justify-content: center;
+	gap: var(--m-spacing-sm);
+	white-space: nowrap;
+	padding: var(--m-action-padding);
+	transition: all var(--m-duration) var(--m-easing);
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-bg(transparent);
+	border-radius: var(--m-radius-sm);
+	border: none;
+	font-size: var(--m-text-ambient-size);
+	line-height: 1;
+	font-weight: var(--m-text-ambient-weight);
+	@apply --mx-shadow;
+
+	&:active {
+		@apply --mx-bg-heavier(1);
+	}
+
+	&:hover {
+		@apply --mx-bg(var(--m-action-light-bg));
+		@apply --mx-bg-faded(50%);
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	&[data-active='true'] {
+		@apply --mx-bg(var(--m-action-light-bg));
+		@apply --mx-fg(var(--m-action-light-fg));
+	}
+
+	@media (min-width: 768px) {
+		height: auto;
+		display: flex;
+		flex-direction: row-reverse;
+		justify-content: end;
+		align-items: center;
+		gap: var(--m-spacing-md);
+		padding: var(--m-action-padding);
+		overflow: visible;
+		font-size: var(--m-text-secondary-size);
+		&:active {
+			@apply --mx-bg-heavier(1);
+		}
+	}
+}
+
+.itemIconWrapper {
+	position: relative;
+	display: flex;
+
+	@media (min-width: 768px) {
+		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg-faded(50%);
+		padding: var(--m-spacing-sm);
+		border-radius: var(--m-action-radius);
+
+		[data-active='true'] & {
+			@apply --mx-bg(inherit);
+		}
+	}
+}
+
+.itemText {
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-text-ambient-size);
+	line-height: 1;
+	font-weight: inherit;
+	display: inline-block;
+	overflow: clip;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.icon {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	@apply --mx-fg(inherit);
+
+	[data-active='true'] & {
+		@apply --mx-fill(var(--m-color-main));
+	}
+}
+
+.pip {
+	position: absolute;
+	top: var(--m-spacing-sm);
+	right: var(--m-spacing-sm);
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--m-color-main);
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+}

package/dist/components/navBar/index.js

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

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

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

package/dist/components/note/Note.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+declare function NoteRoot({ className, children, ...rest }: NoteProps): import("react/jsx-runtime").JSX.Element;
+export declare const NoteInput: import("react").FunctionComponent<import("../textArea/TextArea.js").TextAreaProps>;
+export declare const Note: typeof NoteRoot & {
+    Input: import("react").FunctionComponent<import("../textArea/TextArea.js").TextAreaProps>;
+};
+export {};

package/dist/components/note/Note.js

@@ -0,0 +1,25 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'clsx';
+import { withClassName } from '../../hooks.js';
+import { TextArea } from '../textArea/TextArea.js';
+import cls from './Note.module.css';
+function NoteRoot(_a) {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (_jsx("div", Object.assign({ className: classNames(cls.root, className) }, rest, { children: _jsxs("div", { className: cls.layout, children: [_jsx("div", { className: cls.content, children: children }), _jsxs("div", { className: cls.fold, "aria-hidden": true, children: [_jsxs("div", { className: cls.foldTop, children: [_jsx("div", { className: cls.topCorner }), _jsx("div", { className: cls.diagonal })] }), _jsx("div", { className: cls.foldBottom })] })] }) })));
+}
+export const NoteInput = withClassName(TextArea.Input, cls.input);
+export const Note = Object.assign(NoteRoot, {
+    Input: NoteInput,
+});
+//# sourceMappingURL=Note.js.map

package/dist/components/note/Note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.js","sourceRoot":"","sources":["../../../src/components/note/Note.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAMpC,SAAS,QAAQ,CAAC,EAA2C;QAA3C,EAAE,SAAS,EAAE,QAAQ,OAAsB,EAAjB,IAAI,cAA9B,yBAAgC,CAAF;IAC/C,OAAO,CACN,4BAAK,SAAS,EAAE,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,IAAM,IAAI,cACxD,eAAK,SAAS,EAAE,GAAG,CAAC,MAAM,aACzB,cAAK,SAAS,EAAE,GAAG,CAAC,OAAO,YAAG,QAAQ,GAAO,EAC7C,eAAK,SAAS,EAAE,GAAG,CAAC,IAAI,kCACvB,eAAK,SAAS,EAAE,GAAG,CAAC,OAAO,aAC1B,cAAK,SAAS,EAAE,GAAG,CAAC,SAAS,GAAI,EACjC,cAAK,SAAS,EAAE,GAAG,CAAC,QAAQ,GAAI,IAC3B,EACN,cAAK,SAAS,EAAE,GAAG,CAAC,UAAU,GAAI,IAC7B,IACD,IACD,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC3C,KAAK,EAAE,SAAS;CAChB,CAAC,CAAC"}