@uxf/ui 11.100.1 → 11.101.0

package/components.d.ts

@@ -40,6 +40,7 @@ import * as lightboxStories from "./lightbox/lightbox.stories";
 import * as listItemStories from "./list-item/list-item.stories";
 import * as loaderStories from "./loader/loader.stories";
 import * as lozengeStories from "./lozenge/lozenge.stories";
+import * as menuStories from "./menu/menu.stories";
 import * as messageStories from "./message/message.stories";
 import * as modalStories from "./modal/modal.stories";
 import * as modalDialogStories from "./modal-dialog/modal-dialog.stories";
@@ -48,6 +49,7 @@ import * as multiComboboxStories from "./multi-combobox/multi-combobox.stories";
 import * as multiSelectStories from "./multi-select/multi-select.stories";
 import * as paginationStories from "./pagination/pagination.stories";
 import * as paperStories from "./paper/paper.stories";
+import * as popoverStories from "./popover/popover.stories";
 import * as radioStories from "./radio/radio.stories";
 import * as radioGroupStories from "./radio-group/radio-group.stories";
 import * as rasterImageStories from "./raster-image/raster-image.stories";
@@ -230,6 +232,10 @@ export declare const components: {
         readonly title: "Lozenge";
         readonly stories: typeof lozengeStories;
     };
+    readonly menu: {
+        readonly title: "Menu";
+        readonly stories: typeof menuStories;
+    };
     readonly message: {
         readonly title: "Message";
         readonly stories: typeof messageStories;
@@ -262,6 +268,10 @@ export declare const components: {
         readonly title: "Paper";
         readonly stories: typeof paperStories;
     };
+    readonly popover: {
+        readonly title: "Popover";
+        readonly stories: typeof popoverStories;
+    };
     readonly radio: {
         readonly title: "Radio";
         readonly stories: typeof radioStories;

package/components.js

@@ -77,6 +77,7 @@ const lightboxStories = __importStar(require("./lightbox/lightbox.stories"));
 const listItemStories = __importStar(require("./list-item/list-item.stories"));
 const loaderStories = __importStar(require("./loader/loader.stories"));
 const lozengeStories = __importStar(require("./lozenge/lozenge.stories"));
+const menuStories = __importStar(require("./menu/menu.stories"));
 const messageStories = __importStar(require("./message/message.stories"));
 const modalStories = __importStar(require("./modal/modal.stories"));
 const modalDialogStories = __importStar(require("./modal-dialog/modal-dialog.stories"));
@@ -85,6 +86,7 @@ const multiComboboxStories = __importStar(require("./multi-combobox/multi-combob
 const multiSelectStories = __importStar(require("./multi-select/multi-select.stories"));
 const paginationStories = __importStar(require("./pagination/pagination.stories"));
 const paperStories = __importStar(require("./paper/paper.stories"));
+const popoverStories = __importStar(require("./popover/popover.stories"));
 const radioStories = __importStar(require("./radio/radio.stories"));
 const radioGroupStories = __importStar(require("./radio-group/radio-group.stories"));
 const rasterImageStories = __importStar(require("./raster-image/raster-image.stories"));
@@ -267,6 +269,10 @@ exports.components = {
         title: "Lozenge",
         stories: lozengeStories
     },
+    "menu": {
+        title: "Menu",
+        stories: menuStories
+    },
     "message": {
         title: "Message",
         stories: messageStories
@@ -299,6 +305,10 @@ exports.components = {
         title: "Paper",
         stories: paperStories
     },
+    "popover": {
+        title: "Popover",
+        stories: popoverStories
+    },
     "radio": {
         title: "Radio",
         stories: radioStories

package/css/badge.css

@@ -1,16 +1,34 @@
+:root {
+    --uxf-badge-size: theme("space.8");
+    --uxf-badge-font-size: theme("fontSize.base");
+}
+
 .uxf-badge {
     @apply bg-primary inline-flex shrink-0 items-center justify-center font-bold text-white;
 
+    font-size: var(--uxf-badge-font-size);
+    height: var(--uxf-badge-size);
+    min-width: var(--uxf-badge-size);
+
     &--size-small {
-        @apply h-6 min-w-[24px] rounded-[12px] px-1.5 text-sm;
+        --uxf-badge-size: theme("space.6");
+        --uxf-badge-font-size: theme("fontSize.sm");
+
+        @apply rounded-[12px] px-1.5;
     }
 
     &--size-medium {
-        @apply h-8 min-w-[32px] rounded-[16px] px-2 text-base;
+        --uxf-badge-size: theme("space.8");
+        --uxf-badge-font-size: theme("fontSize.base");
+
+        @apply rounded-[16px] px-2;
     }
 
     &--size-large {
-        @apply h-10 min-w-[40px] rounded-[20px] px-2 text-lg;
+        --uxf-badge-size: theme("space.10");
+        --uxf-badge-font-size: theme("fontSize.lg");
+
+        @apply rounded-[20px] px-2;
     }
 
     :root .dark & {

package/css/menu.css

@@ -0,0 +1,113 @@
+:root {
+    --uxf-menu-item-background-color: inherit;
+    --uxf-menu-icon-size: 16px;
+    --uxf-menu-item-gap: 12px;
+    --uxf-menu-item-px: 12px;
+    --uxf-menu-item-border-radius: 8px;
+}
+
+.uxf-menu {
+    font-size: theme("fontSize.sm");
+    padding: 4px;
+}
+
+.uxf-menu-item {
+    align-items: center;
+    background-color: var(--uxf-menu-item-background-color);
+    border-radius: var(--uxf-menu-item-border-radius);
+    color: black;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    gap: var(--uxf-menu-item-gap);
+    height: 44px;
+    margin-bottom: 2px;
+    padding: 4px var(--uxf-menu-item-px);
+    width: 100%;
+
+    &:hover {
+        --uxf-menu-item-background-color: var(--uxf-color-base-surface-main-hover);
+    }
+
+    &.is-active:not(.uxf-menu-item--level-1),
+    &.is-active.has-no-children {
+        --uxf-menu-item-background-color: #e5e7eb;
+
+        font-weight: 500;
+    }
+}
+
+.uxf-menu-item__right-element {
+    align-items: center;
+    display: flex;
+
+    .uxf-badge {
+        --uxf-badge-size: 16px;
+        --uxf-badge-font-size: 12px;
+
+        font-weight: normal;
+        padding: 0 4px;
+    }
+}
+
+.uxf-menu-item__icon {
+    height: var(--uxf-menu-icon-size);
+    width: var(--uxf-menu-icon-size);
+}
+
+.uxf-menu-item__label {
+    flex-grow: 1;
+    text-align: left;
+
+    @apply truncate;
+}
+
+.uxf-menu-item__open-icon {
+    @apply transition-transform duration-200;
+
+    height: 20px;
+    width: 20px;
+
+    &.is-close {
+        transform: rotate(-90deg);
+    }
+}
+
+.uxf-menu__submenu {
+    padding-left: calc(var(--uxf-menu-item-gap) + var(--uxf-menu-icon-size));
+    position: relative;
+
+    &::before {
+        background-color: #e5e7eb;
+        bottom: 0;
+        content: "";
+        left: calc(var(--uxf-menu-item-px) + var(--uxf-menu-icon-size) / 2);
+        position: absolute;
+        top: 0;
+        width: 1px;
+    }
+
+    .uxf-menu-item {
+        position: relative;
+
+        &:hover {
+            &::before {
+                background-color: #0f1012;
+                bottom: 0;
+                content: "";
+                left: calc(-1 * (var(--uxf-menu-icon-size) / 2));
+                position: absolute;
+                top: 0;
+                width: 2px;
+            }
+        }
+    }
+}
+
+.uxf-menu__popover {
+    background-color: var(--uxf-color-base-surface-main);
+    border: 1px solid var(--uxf-color-base-border-border);
+    border-radius: 8px;
+    box-shadow: theme("boxShadow.sm");
+    padding: 4px;
+}

package/menu/README.md

@@ -0,0 +1,29 @@
+# Menu
+
+## CSS dependencies
+
+```css
+@import url("@uxf/ui/css/menu.css");
+```
+
+## How to use active item
+
+```tsx
+// app directory
+import { usePathname } from "next/navigation";
+import { usePageParams } from "@app-routes";
+
+const pathname = usePathname();
+const pathParams = usePageParams();
+
+<Menu configuration={...} router={{pathname, pathParams}}/>
+```
+
+```tsx
+// pages directory 
+import { useRouter } from "next/router";
+
+const router = useRouter();
+
+<Menu configuration={...} router={router}
+```

package/menu/components/menu-item-button.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { IconName } from "../../icon/types";
+import { NextLink } from "../../utils/next-link";
+interface MenuItemButtonProps {
+    icon?: IconName;
+    label: string;
+    hasChildren?: boolean;
+    LinkComponent?: NextLink | "a";
+    href?: string;
+    onClick?: () => void;
+    isOpen?: boolean;
+    level?: number;
+    isActive?: boolean;
+    badge?: ReactElement;
+}
+export declare function MenuItemButton(props: MenuItemButtonProps): ReactElement;
+export {};

package/menu/components/menu-item-button.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItemButton = MenuItemButton;
+const cx_1 = require("@uxf/core/utils/cx");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const icon_1 = require("@uxf/ui/icon");
+const react_1 = __importDefault(require("react"));
+function MenuItemButton(props) {
+    var _a;
+    const LinkComponent = (_a = props.LinkComponent) !== null && _a !== void 0 ? _a : "a";
+    const className = (0, cx_1.cx)(`uxf-menu-item uxf-menu-item--level-${props.level}`, props.isOpen ? "is-open" : "is-close", props.isActive && "is-active", props.hasChildren ? "has-children" : "has-no-children", (0, is_nil_1.isNil)(props.icon) && "uxf-menu-item--no-icon");
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        (0, is_not_nil_1.isNotNil)(props.icon) && (react_1.default.createElement("div", { className: "uxf-menu-item__icon-wrapper" },
+            react_1.default.createElement(icon_1.Icon, { className: "uxf-menu-item__icon", name: props.icon }))),
+        react_1.default.createElement("div", { className: "uxf-menu-item__label" }, props.label),
+        react_1.default.createElement("div", { className: "uxf-menu-item__right-element" },
+            (0, is_not_nil_1.isNotNil)(props.badge) && props.badge,
+            props.hasChildren && (react_1.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-menu-item__open-icon", props.isOpen ? "is-open" : "is-close", props.isActive && "is-active"), name: "caretDown" })))));
+    if ((0, is_not_nil_1.isNotNil)(props.href)) {
+        return (react_1.default.createElement(LinkComponent, { className: className, href: props.href, onClick: props.onClick, title: props.label }, content));
+    }
+    return (react_1.default.createElement("button", { className: className, onClick: props.onClick, title: props.label }, content));
+}

package/menu/components/menu-item.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import { NextLink } from "../../utils/next-link";
+import { ActiveTreeNode, MenuItemConfiguration } from "../types";
+interface Props {
+    item: MenuItemConfiguration;
+    activeTree: ActiveTreeNode;
+    LinkComponent?: NextLink | "a";
+    level: number;
+    isPopoverEnabled?: boolean;
+}
+export declare function MenuItem(props: Props): React.JSX.Element;
+export {};

package/menu/components/menu-item.js

@@ -0,0 +1,67 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = MenuItem;
+const is_empty_1 = require("@uxf/core/utils/is-empty");
+const is_nil_1 = require("@uxf/core/utils/is-nil");
+const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
+const throw_error_1 = require("@uxf/core/utils/throw-error");
+const react_1 = __importStar(require("react"));
+const popover_1 = require("../../popover/popover");
+const menu_item_button_1 = require("./menu-item-button");
+function MenuItem(props) {
+    var _a, _b;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(props.activeTree.isActive);
+    const button = (react_1.default.createElement(menu_item_button_1.MenuItemButton, { LinkComponent: (_b = (_a = props.item.as) !== null && _a !== void 0 ? _a : props.LinkComponent) !== null && _b !== void 0 ? _b : "a", badge: props.item.badge, hasChildren: (0, is_not_nil_1.isNotNil)(props.item.children) && (0, is_not_empty_1.isNotEmpty)(props.item.children), href: props.item.href, icon: props.item.icon, isActive: props.activeTree.isActive, isOpen: isOpen, label: props.item.label, level: props.level, onClick: () => setIsOpen((prev) => !prev) }));
+    if ((0, is_nil_1.isNil)(props.item.children) || (0, is_empty_1.isEmpty)(props.item.children)) {
+        return button;
+    }
+    const children = props.item.children.map((item, index) => {
+        var _a, _b;
+        return (react_1.default.createElement(MenuItem, { LinkComponent: props.LinkComponent, activeTree: (_b = (_a = props.activeTree.children) === null || _a === void 0 ? void 0 : _a.at(index)) !== null && _b !== void 0 ? _b : (0, throw_error_1.throwError)("Active tree is not defined"), isPopoverEnabled: props.isPopoverEnabled, item: item, key: item.label, level: props.level + 1 }));
+    });
+    if (!props.isPopoverEnabled) {
+        return (react_1.default.createElement("div", null,
+            button,
+            react_1.default.createElement("div", { className: "uxf-menu__submenu" }, isOpen && children)));
+    }
+    return (react_1.default.createElement(popover_1.Popover, { placement: "right-start", trigger: "hover" },
+        react_1.default.createElement(popover_1.Popover.Trigger, null,
+            react_1.default.createElement("div", null,
+                button,
+                isOpen && react_1.default.createElement("div", { className: "uxf-menu__submenu" }, children))),
+        !isOpen && react_1.default.createElement(popover_1.Popover.Content, { className: "uxf-menu__popover" }, children)));
+}

package/menu/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from "./menu";
+export type { MenuProps } from "./menu";

package/menu/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+var menu_1 = require("./menu");
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return menu_1.Menu; } });

package/menu/menu.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { RouterPathParams } from "../types/path-params";
+import { MenuItemConfiguration } from "./types";
+export type MenuConfiguration = MenuItemConfiguration[];
+export type SimpleRouter = {
+    pathname: string | null;
+    pathParams?: RouterPathParams | null;
+};
+export interface MenuProps {
+    configuration: MenuConfiguration;
+    router: SimpleRouter;
+    className?: string;
+    isPopoverEnabled?: boolean;
+}
+export declare function Menu(props: MenuProps): React.JSX.Element;

package/menu/menu.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = Menu;
+const react_1 = __importDefault(require("react"));
+const menu_item_1 = require("./components/menu-item");
+function createActiveTree(menuItem, router) {
+    var _a, _b, _c, _d;
+    const children = (_a = menuItem.children) === null || _a === void 0 ? void 0 : _a.map((child) => createActiveTree(child, router));
+    return {
+        isActive: (children === null || children === void 0 ? void 0 : children.some((child) => child.isActive)) ||
+            ((_b = menuItem.routeMatcher) === null || _b === void 0 ? void 0 : _b.call(menuItem, (_c = router.pathname) !== null && _c !== void 0 ? _c : "", (_d = router.pathParams) !== null && _d !== void 0 ? _d : {})) ||
+            false,
+        children,
+    };
+}
+function Menu(props) {
+    var _a;
+    const activeTree = props.configuration.map((item) => createActiveTree(item, props.router));
+    return (react_1.default.createElement("div", { className: `uxf-menu ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` }, props.configuration.map((item, index) => (react_1.default.createElement(menu_item_1.MenuItem, { activeTree: activeTree[index], isPopoverEnabled: props.isPopoverEnabled, item: item, key: item.label, level: 1 })))));
+}

package/menu/menu.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/menu/menu.spec.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const snap_test_1 = require("../utils/snap-test");
+const menu_stories_1 = require("./menu.stories");
+(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(menu_stories_1.Default, null));

package/menu/menu.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/menu/menu.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const badge_1 = require("../badge");
+const menu_1 = require("./menu");
+const CONFIGURATION = [
+    {
+        label: "UXF Web",
+        href: "https://www.uxf.cz",
+        icon: "eye",
+    },
+    {
+        label: "Link without children",
+        href: "/examples/ui/menu/Default",
+        icon: "camera",
+        badge: react_1.default.createElement("div", { className: "text-xs font-semibold text-neutral-500" }, "12"),
+    },
+    {
+        label: "Link with children",
+        icon: "file",
+        badge: react_1.default.createElement(badge_1.Badge, null, "5"),
+        children: [
+            { label: "Link 1", icon: "bars" },
+            { label: "Link 2", href: "/examples", icon: "copy" },
+            { label: "Link with very very long text", href: "/examples", icon: "copy" },
+        ],
+    },
+    {
+        label: "Link with very very long text",
+        icon: "file",
+        badge: react_1.default.createElement(badge_1.Badge, null, "5"),
+    },
+];
+function Default() {
+    return (react_1.default.createElement("div", { className: "fixed inset-y-0 left-0 w-60 bg-white p-1" },
+        react_1.default.createElement(menu_1.Menu, { configuration: CONFIGURATION, router: { pathname: "", pathParams: {} } })));
+}

package/menu/types.d.ts

@@ -0,0 +1,18 @@
+import { ReactElement } from "react";
+import { IconName } from "../icon/types";
+import { RouterPathParams } from "../types/path-params";
+import { NextLink } from "../utils/next-link";
+export type ActiveTreeNode = {
+    isActive: boolean;
+    children?: ActiveTreeNode[];
+};
+export interface MenuItemConfiguration {
+    as?: NextLink | "a";
+    href?: string;
+    onClick?: () => void;
+    icon?: IconName;
+    label: string;
+    children?: MenuItemConfiguration[];
+    routeMatcher?: (pathname: string, pathParams?: RouterPathParams) => boolean;
+    badge?: ReactElement;
+}

package/menu/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.100.1",
+    "version": "11.101.0",
     "description": "",
     "publishConfig": {
         "access": "public"

package/popover/README.md

@@ -0,0 +1,10 @@
+# Popover
+
+## Basic usage
+
+```tsx
+<Popover placement="right-start" trigger="hover">
+    <Popover.Trigger>Trigger button</Popover.Trigger>
+    <Popover.Content>Content</Popover.Content>
+</Popover>
+```

package/popover/popover.d.ts

@@ -0,0 +1,71 @@
+import { Placement } from "@floating-ui/react";
+import React, { HTMLAttributes, ReactNode } from "react";
+interface PopoverOptions {
+    trigger?: "hover" | "click";
+    placement?: Placement;
+}
+export declare const usePopoverContext: () => {
+    labelId: string | undefined;
+    descriptionId: string | undefined;
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    placement: Placement;
+    strategy: import("@floating-ui/utils").Strategy;
+    middlewareData: import("@floating-ui/core").MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: React.MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+    elements: {
+        reference: import("@floating-ui/react-dom").ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    context: {
+        x: number;
+        y: number;
+        placement: Placement;
+        strategy: import("@floating-ui/utils").Strategy;
+        middlewareData: import("@floating-ui/core").MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
+        events: import("@floating-ui/react").FloatingEvents;
+        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
+        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+} & {
+    setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>;
+    setDescriptionId: React.Dispatch<React.SetStateAction<string | undefined>>;
+};
+declare function PopoverBase(props: {
+    children: React.ReactNode;
+} & PopoverOptions): React.JSX.Element;
+interface PopoverTriggerProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    asChild?: boolean;
+}
+export declare const Popover: typeof PopoverBase & {
+    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+};
+export {};

package/popover/popover.js

@@ -0,0 +1,123 @@
+"use strict";
+"use client";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = exports.usePopoverContext = void 0;
+const react_1 = require("@floating-ui/react");
+const react_2 = __importStar(require("react"));
+function usePopover(options = {}) {
+    var _a;
+    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
+    const [labelId, setLabelId] = (0, react_2.useState)();
+    const [descriptionId, setDescriptionId] = (0, react_2.useState)();
+    const placement = (_a = options.placement) !== null && _a !== void 0 ? _a : "bottom";
+    const data = (0, react_1.useFloating)({
+        placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: react_1.autoUpdate,
+        middleware: [
+            (0, react_1.offset)(12),
+            (0, react_1.flip)({
+                crossAxis: placement.includes("-"),
+                fallbackAxisSideDirection: "end",
+                padding: 5,
+            }),
+            (0, react_1.shift)({ padding: 12 }),
+        ],
+    });
+    const context = data.context;
+    const click = (0, react_1.useClick)(context, {
+        enabled: options.trigger === "click",
+    });
+    const hover = (0, react_1.useHover)(context, {
+        enabled: options.trigger === "hover",
+        handleClose: (0, react_1.safePolygon)(),
+    });
+    const dismiss = (0, react_1.useDismiss)(context);
+    const role = (0, react_1.useRole)(context);
+    const interactions = (0, react_1.useInteractions)([click, hover, dismiss, role]);
+    return (0, react_2.useMemo)(() => ({
+        open: isOpen,
+        setOpen: setIsOpen,
+        ...interactions,
+        ...data,
+        labelId,
+        descriptionId,
+        setLabelId,
+        setDescriptionId,
+    }), [isOpen, setIsOpen, interactions, data, labelId, descriptionId]);
+}
+const PopoverContext = (0, react_2.createContext)(null);
+const usePopoverContext = () => {
+    const context = (0, react_2.useContext)(PopoverContext);
+    if (!context) {
+        throw new Error("Popover components must be wrapped in <Popover />");
+    }
+    return context;
+};
+exports.usePopoverContext = usePopoverContext;
+function PopoverBase(props) {
+    // This can accept any props as options, e.g. `placement`,
+    // or other positioning options.
+    const popover = usePopover(props); // TODO
+    return react_2.default.createElement(PopoverContext.Provider, { value: popover }, props.children);
+}
+const PopoverTrigger = (0, react_2.forwardRef)(function PopoverTrigger(props, propRef) {
+    const context = (0, exports.usePopoverContext)();
+    const childrenRef = props.children.ref;
+    const ref = (0, react_1.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
+    // `asChild` allows the user to pass any element as the anchor
+    if (props.asChild && (0, react_2.isValidElement)(props.children)) {
+        return (0, react_2.cloneElement)(props.children, context.getReferenceProps({
+            ref,
+            ...props,
+            ...props.children.props,
+            "data-state": context.open ? "open" : "closed",
+        }));
+    }
+    return (react_2.default.createElement("button", { "data-state": context.open ? "open" : "closed", ref: ref, ...context.getReferenceProps(props) }, props.children));
+});
+const PopoverContent = (0, react_2.forwardRef)(function PopoverContent(props, propRef) {
+    const popoverContext = (0, exports.usePopoverContext)();
+    const ref = (0, react_1.useMergeRefs)([popoverContext.refs.setFloating, propRef]);
+    if (!popoverContext.context.open) {
+        return null;
+    }
+    return (react_2.default.createElement(react_1.FloatingPortal, null,
+        react_2.default.createElement(react_1.FloatingFocusManager, { context: popoverContext.context, modal: false },
+            react_2.default.createElement("div", { "aria-describedby": popoverContext.descriptionId, "aria-labelledby": popoverContext.labelId, ref: ref, style: { ...popoverContext.floatingStyles, ...props.style }, ...popoverContext.getFloatingProps(props) }, props.children))));
+});
+exports.Popover = Object.assign(PopoverBase, { Trigger: PopoverTrigger, Content: PopoverContent });

package/popover/popover.stories.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Default(): React.JSX.Element;

package/popover/popover.stories.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = Default;
+const react_1 = __importDefault(require("react"));
+const popover_1 = require("./popover");
+function Default() {
+    return (react_1.default.createElement("div", { className: "p-4" },
+        react_1.default.createElement("div", { className: "max-w-[400px]" },
+            react_1.default.createElement(popover_1.Popover, { placement: "right-start", trigger: "click" },
+                react_1.default.createElement(popover_1.Popover.Trigger, null, "Trigger"),
+                react_1.default.createElement(popover_1.Popover.Content, null, "Popover content")))));
+}

package/readmes.d.ts

@@ -42,6 +42,7 @@ export declare const readmes: {
     readonly "list-item": typeof accordionReadme;
     readonly loader: typeof accordionReadme;
     readonly lozenge: typeof accordionReadme;
+    readonly menu: typeof accordionReadme;
     readonly message: typeof accordionReadme;
     readonly modal: typeof accordionReadme;
     readonly "modal-dialog": typeof accordionReadme;
@@ -50,6 +51,7 @@ export declare const readmes: {
     readonly "multi-select": typeof accordionReadme;
     readonly pagination: typeof accordionReadme;
     readonly paper: typeof accordionReadme;
+    readonly popover: typeof accordionReadme;
     readonly radio: typeof accordionReadme;
     readonly "radio-group": typeof accordionReadme;
     readonly "raster-image": typeof accordionReadme;

package/readmes.js

@@ -47,27 +47,29 @@ const README_md_39 = __importDefault(require("./lightbox/README.md"));
 const README_md_40 = __importDefault(require("./list-item/README.md"));
 const README_md_41 = __importDefault(require("./loader/README.md"));
 const README_md_42 = __importDefault(require("./lozenge/README.md"));
-const README_md_43 = __importDefault(require("./message/README.md"));
-const README_md_44 = __importDefault(require("./modal/README.md"));
-const README_md_45 = __importDefault(require("./modal-dialog/README.md"));
-const README_md_46 = __importDefault(require("./modal-header/README.md"));
-const README_md_47 = __importDefault(require("./multi-combobox/README.md"));
-const README_md_48 = __importDefault(require("./multi-select/README.md"));
-const README_md_49 = __importDefault(require("./pagination/README.md"));
-const README_md_50 = __importDefault(require("./paper/README.md"));
-const README_md_51 = __importDefault(require("./radio/README.md"));
-const README_md_52 = __importDefault(require("./radio-group/README.md"));
-const README_md_53 = __importDefault(require("./raster-image/README.md"));
-const README_md_54 = __importDefault(require("./select/README.md"));
-const README_md_55 = __importDefault(require("./tabs/README.md"));
-const README_md_56 = __importDefault(require("./text-input/README.md"));
-const README_md_57 = __importDefault(require("./text-link/README.md"));
-const README_md_58 = __importDefault(require("./textarea/README.md"));
-const README_md_59 = __importDefault(require("./time-picker/README.md"));
-const README_md_60 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_61 = __importDefault(require("./toggle/README.md"));
-const README_md_62 = __importDefault(require("./tooltip/README.md"));
-const README_md_63 = __importDefault(require("./typography/README.md"));
+const README_md_43 = __importDefault(require("./menu/README.md"));
+const README_md_44 = __importDefault(require("./message/README.md"));
+const README_md_45 = __importDefault(require("./modal/README.md"));
+const README_md_46 = __importDefault(require("./modal-dialog/README.md"));
+const README_md_47 = __importDefault(require("./modal-header/README.md"));
+const README_md_48 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_49 = __importDefault(require("./multi-select/README.md"));
+const README_md_50 = __importDefault(require("./pagination/README.md"));
+const README_md_51 = __importDefault(require("./paper/README.md"));
+const README_md_52 = __importDefault(require("./popover/README.md"));
+const README_md_53 = __importDefault(require("./radio/README.md"));
+const README_md_54 = __importDefault(require("./radio-group/README.md"));
+const README_md_55 = __importDefault(require("./raster-image/README.md"));
+const README_md_56 = __importDefault(require("./select/README.md"));
+const README_md_57 = __importDefault(require("./tabs/README.md"));
+const README_md_58 = __importDefault(require("./text-input/README.md"));
+const README_md_59 = __importDefault(require("./text-link/README.md"));
+const README_md_60 = __importDefault(require("./textarea/README.md"));
+const README_md_61 = __importDefault(require("./time-picker/README.md"));
+const README_md_62 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_63 = __importDefault(require("./toggle/README.md"));
+const README_md_64 = __importDefault(require("./tooltip/README.md"));
+const README_md_65 = __importDefault(require("./typography/README.md"));
 exports.readmes = {
     "accordion": README_md_1.default,
     "alert-bubble": README_md_2.default,
@@ -111,25 +113,27 @@ exports.readmes = {
     "list-item": README_md_40.default,
     "loader": README_md_41.default,
     "lozenge": README_md_42.default,
-    "message": README_md_43.default,
-    "modal": README_md_44.default,
-    "modal-dialog": README_md_45.default,
-    "modal-header": README_md_46.default,
-    "multi-combobox": README_md_47.default,
-    "multi-select": README_md_48.default,
-    "pagination": README_md_49.default,
-    "paper": README_md_50.default,
-    "radio": README_md_51.default,
-    "radio-group": README_md_52.default,
-    "raster-image": README_md_53.default,
-    "select": README_md_54.default,
-    "tabs": README_md_55.default,
-    "text-input": README_md_56.default,
-    "text-link": README_md_57.default,
-    "textarea": README_md_58.default,
-    "time-picker": README_md_59.default,
-    "time-picker-input": README_md_60.default,
-    "toggle": README_md_61.default,
-    "tooltip": README_md_62.default,
-    "typography": README_md_63.default,
+    "menu": README_md_43.default,
+    "message": README_md_44.default,
+    "modal": README_md_45.default,
+    "modal-dialog": README_md_46.default,
+    "modal-header": README_md_47.default,
+    "multi-combobox": README_md_48.default,
+    "multi-select": README_md_49.default,
+    "pagination": README_md_50.default,
+    "paper": README_md_51.default,
+    "popover": README_md_52.default,
+    "radio": README_md_53.default,
+    "radio-group": README_md_54.default,
+    "raster-image": README_md_55.default,
+    "select": README_md_56.default,
+    "tabs": README_md_57.default,
+    "text-input": README_md_58.default,
+    "text-link": README_md_59.default,
+    "textarea": README_md_60.default,
+    "time-picker": README_md_61.default,
+    "time-picker-input": README_md_62.default,
+    "toggle": README_md_63.default,
+    "tooltip": README_md_64.default,
+    "typography": README_md_65.default,
 };

package/tw-tokens/tw-colors.d.ts

@@ -351,6 +351,11 @@ export declare const twColors: {
         DEFAULT: string;
     };
     test: string;
+    sidebar: {
+        background: string;
+        highlight: string;
+        hover: string;
+    };
     base_border_border: string;
     base_border_input: string;
     base_border_inverted_border: string;

package/tw-tokens/tw-colors.js

@@ -355,6 +355,11 @@ exports.twColors = {
         "DEFAULT": "#ef4444"
     },
     "test": "#ff00ff",
+    "sidebar": {
+        "background": "#1F2937",
+        "highlight": "#111827",
+        "hover": "#111827"
+    },
     "base_border_border": "var(--uxf-color-base-border-border)",
     "base_border_input": "var(--uxf-color-base-border-input)",
     "base_border_inverted_border": "var(--uxf-color-base-border-inverted-border)",

package/types/path-params.d.ts

@@ -0,0 +1 @@
+export type RouterPathParams = Partial<Record<string, string | string[]>>;

package/types/path-params.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/utils/tailwind-config.js

@@ -97,6 +97,11 @@ module.exports = {
                     900: "#7f1d1d",
                 },
                 test: "#ff00ff",
+                sidebar: {
+                    background: "#1F2937",
+                    highlight: "#111827",
+                    hover: "#111827",
+                },
                 // generated color-tokens from figma
                 ...figmaColors,
             },