@a-type/ui 3.1.1 → 4.0.0-beta.2

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

@@ -1,33 +1,33 @@
-import { ReactNode, Ref } from 'react';
+import { UseRenderComponentProps } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { IconProps } from '../icon/index.js';
 export declare const navBarItemClass: string;
-export interface NavBarItemProps {
-    asChild?: boolean;
+export interface NavBarItemProps extends UseRenderComponentProps<'button'> {
     className?: string;
     children?: ReactNode;
     active?: boolean;
     color?: 'primary' | 'gray';
+    render?: ReactElement | (() => ReactElement);
 }
-export declare const NavBarItem: ({ ref, asChild, className, active, color, ...rest }: NavBarItemProps & {
+export declare const NavBarItem: ({ ref, className, active, color, ...rest }: NavBarItemProps & {
     ref?: React.Ref<HTMLButtonElement>;
 }) => import("react/jsx-runtime.js").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 {
-    asChild?: boolean;
+interface NavBarItemIconProps extends Omit<IconProps, 'name'> {
     name?: IconProps['name'];
     className?: string;
     children?: ReactNode;
     ref?: Ref<any>;
 }
-export declare const NavBarItemIcon: ({ ref, children, asChild, className, name, ...rest }: NavBarItemIconProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const NavBarItemIcon: ({ ref, className, name, ...rest }: NavBarItemIconProps) => import("react/jsx-runtime.js").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, asChild, className, active, color, ...rest }: NavBarItemProps & {
+    Item: ({ ref, className, active, color, ...rest }: NavBarItemProps & {
         ref?: React.Ref<HTMLButtonElement>;
     }) => import("react/jsx-runtime.js").JSX.Element;
-    ItemIcon: ({ ref, children, asChild, className, name, ...rest }: NavBarItemIconProps) => import("react/jsx-runtime.js").JSX.Element;
+    ItemIcon: ({ ref, className, name, ...rest }: NavBarItemIconProps) => import("react/jsx-runtime.js").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>>;

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

@@ -47,23 +47,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavBar = exports.NavBarRoot = exports.NavBarItemPip = exports.NavBarItemIcon = exports.NavBarItemText = exports.NavBarItemIconWrapper = exports.NavBarItem = exports.navBarItemClass = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_slot_1 = require("@radix-ui/react-slot");
+const button_1 = require("@base-ui/react/button");
 const clsx_1 = __importStar(require("clsx"));
 const hooks_js_1 = require("../../hooks.js");
 const index_js_1 = require("../icon/index.js");
 exports.navBarItemClass = (0, clsx_1.default)('layer-components:flex layer-components:flex-col layer-components:items-center layer-components:justify-center layer-components:whitespace-nowrap layer-components:py-1 layer-components:px-3 layer-components:bg-transparent layer-components:rounded-sm layer-components:border-none layer-components:cursor-pointer layer-components:text-sm layer-components:transition-colors layer-components:h-full layer-components:gap-6px layer-components:relative layer-components:color-black layer-components:select-none', 'layer-components:active:bg-darken-2', 'layer-components:hover:bg-main-light', 'layer-components:focus-visible:outline-none layer-components:focus-visible:ring-2 layer-components:focus-visible:ring-accent', 'layer-components:[&[data-active=true]]:bg-main-light/50 layer-components:[&[data-active=true]]:color-lighten-2 layer-components:[&[data-active=true]]:color-black', 'layer-responsive:md:flex-row-reverse layer-responsive:md:h-auto layer-responsive:md:justify-start layer-responsive:md:gap-2 layer-responsive:md:overflow-visible layer-responsive:md:active:bg-darken-2');
 const NavBarItem = function NavBarItem(_a) {
-    var { ref, asChild, className, active, color = 'primary' } = _a, rest = __rest(_a, ["ref", "asChild", "className", "active", "color"]);
-    const Comp = asChild ? react_slot_1.Slot : 'button';
-    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ ref: ref, className: (0, clsx_1.default)(exports.navBarItemClass, `palette-${color}`, className), "data-active": active }, rest)));
+    var { ref, className, active, color = 'primary' } = _a, rest = __rest(_a, ["ref", "className", "active", "color"]);
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ ref: ref, className: (0, clsx_1.default)(exports.navBarItemClass, `palette-${color}`, className), "data-active": active }, rest)));
 };
 exports.NavBarItem = NavBarItem;
 exports.NavBarItemIconWrapper = (0, hooks_js_1.withClassName)('div', 'layer-components:relative layer-components:flex', 'layer-components:md:p-6px layer-components:md:rounded-lg layer-components:md:bg-gray-blend', 'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]');
 exports.NavBarItemText = (0, hooks_js_1.withClassName)('span', 'layer-components:overflow-hidden layer-components:inline-block layer-components:text-xxs layer-components:whitespace-nowrap layer-components:text-ellipsis layer-components:md:text-md layer-components:md:leading-normal');
 const NavBarItemIcon = function NavBarItemIcon(_a) {
-    var { ref, children, asChild, className, name = 'placeholder' } = _a, rest = __rest(_a, ["ref", "children", "asChild", "className", "name"]);
-    const Comp = asChild ? react_slot_1.Slot : index_js_1.Icon;
-    return ((0, jsx_runtime_1.jsx)(Comp, Object.assign({ name: name, className: (0, clsx_1.clsx)('layer-components:relative layer-components:z-1 layer-components:flex layer-components:color-inherit', 'layer-variants:[*[data-active=true]_&]:fill-main', className) }, rest, { ref: ref, children: children })));
+    var { ref, className, name = 'placeholder' } = _a, rest = __rest(_a, ["ref", "className", "name"]);
+    return ((0, jsx_runtime_1.jsx)(index_js_1.Icon, Object.assign({ name: name, className: (0, clsx_1.clsx)('layer-components:relative layer-components:z-1 layer-components:flex layer-components:color-inherit', 'layer-variants:[*[data-active=true]_&]:fill-main', className) }, rest, { ref: ref })));
 };
 exports.NavBarItemIcon = NavBarItemIcon;
 exports.NavBarItemPip = (0, hooks_js_1.withClassName)('div', 'palette-attention', 'layer-components:absolute layer-components:top-6px layer-components:right-6px layer-components:w-6px layer-components:h-6px layer-components:rounded-lg layer-components:bg-main layer-components:shadow-sm');

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

@@ -1 +1 @@
-{"version":3,"file":"NavBar.js","sourceRoot":"","sources":["../../../../src/components/navBar/NavBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,qDAA4C;AAC5C,6CAAwC;AAExC,6CAA+C;AAC/C,+CAAmD;AAEtC,QAAA,eAAe,GAAG,IAAA,cAAU,EACxC,yNAAyN,EACzN,qCAAqC,EACrC,wCAAwC,EACxC,kEAAkE,EAClE,uFAAuF,EACvF,uGAAuG,CACvG,CAAC;AAUK,MAAM,UAAU,GAAG,SAAS,UAAU,CAAC,EAS7C;QAT6C,EAC7C,GAAG,EACH,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,GAAG,SAAS,OAIjB,EAHG,IAAI,cANsC,kDAO7C,CADO;IAIP,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEvC,OAAO,CACN,uBAAC,IAAI,kBACJ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EAAC,uBAAe,EAAE,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,iBACxD,MAAM,IACf,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC;AApBW,QAAA,UAAU,cAoBrB;AAEW,QAAA,qBAAqB,GAAG,IAAA,wBAAa,EACjD,KAAK,EACL,kCAAkC,EAClC,sDAAsD,EACtD,0DAA0D,CAC1D,CAAC;AAEW,QAAA,cAAc,GAAG,IAAA,wBAAa,EAC1C,MAAM,EACN,uIAAuI,CACvI,CAAC;AASK,MAAM,cAAc,GAAG,SAAS,cAAc,CAAC,EAOhC;QAPgC,EACrD,GAAG,EACH,QAAQ,EACR,OAAO,EACP,SAAS,EACT,IAAI,GAAG,aAAa,OAEC,EADlB,IAAI,cAN8C,mDAOrD,CADO;IAEP,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,eAAI,CAAC;IACnC,OAAO,CACN,uBAAC,IAAI,kBACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,WAAI,EACd,oDAAoD,EACpD,kDAAkD,EAClD,SAAS,CACT,IACG,IAAI,IACR,GAAG,EAAE,GAAG,YAEP,QAAQ,IACH,CACP,CAAC;AACH,CAAC,CAAC;AAvBW,QAAA,cAAc,kBAuBzB;AAEW,QAAA,aAAa,GAAG,IAAA,wBAAa,EACzC,KAAK,EACL,mBAAmB,EACnB,wFAAwF,CACxF,CAAC;AAEW,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,KAAK,EACL,kJAAkJ,EAClJ,oDAAoD,EACpD,oMAAoM,CACpM,CAAC;AAEW,QAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAU,EAAE;IAC/C,IAAI,EAAE,kBAAU;IAChB,QAAQ,EAAE,sBAAc;IACxB,QAAQ,EAAE,sBAAc;IACxB,eAAe,EAAE,6BAAqB;IACtC,OAAO,EAAE,qBAAa;CACtB,CAAC,CAAC"}
+{"version":3,"file":"NavBar.js","sourceRoot":"","sources":["../../../../src/components/navBar/NavBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA+C;AAE/C,6CAAwC;AAExC,6CAA+C;AAC/C,+CAAmD;AAEtC,QAAA,eAAe,GAAG,IAAA,cAAU,EACxC,yNAAyN,EACzN,qCAAqC,EACrC,wCAAwC,EACxC,kEAAkE,EAClE,uFAAuF,EACvF,uGAAuG,CACvG,CAAC;AAUK,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,OAAO,CACN,uBAAC,eAAM,kBACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EAAC,uBAAe,EAAE,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,iBACxD,MAAM,IACf,IAAI,EACP,CACF,CAAC;AACH,CAAC,CAAC;AAjBW,QAAA,UAAU,cAiBrB;AAEW,QAAA,qBAAqB,GAAG,IAAA,wBAAa,EACjD,KAAK,EACL,kCAAkC,EAClC,sDAAsD,EACtD,0DAA0D,CAC1D,CAAC;AAEW,QAAA,cAAc,GAAG,IAAA,wBAAa,EAC1C,MAAM,EACN,uIAAuI,CACvI,CAAC;AAQK,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,uBAAC,eAAI,kBACJ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,IAAA,WAAI,EACd,oDAAoD,EACpD,kDAAkD,EAClD,SAAS,CACT,IACG,IAAI,IACR,GAAG,EAAE,GAAG,IACP,CACF,CAAC;AACH,CAAC,CAAC;AAlBW,QAAA,cAAc,kBAkBzB;AAEW,QAAA,aAAa,GAAG,IAAA,wBAAa,EACzC,KAAK,EACL,mBAAmB,EACnB,wFAAwF,CACxF,CAAC;AAEW,QAAA,UAAU,GAAG,IAAA,wBAAa,EACtC,KAAK,EACL,kJAAkJ,EAClJ,oDAAoD,EACpD,oMAAoM,CACpM,CAAC;AAEW,QAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,kBAAU,EAAE;IAC/C,IAAI,EAAE,kBAAU;IAChB,QAAQ,EAAE,sBAAc;IACxB,QAAQ,EAAE,sBAAc;IACxB,eAAe,EAAE,6BAAqB;IACtC,OAAO,EAAE,qBAAa;CACtB,CAAC,CAAC"}

package/dist/cjs/components/popover/Popover.d.ts

@@ -1,27 +1,33 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { PopoverPopupProps, PopoverPositionerProps, Popover as PopoverPrimitive, PopoverTriggerProps } from '@base-ui/react/popover';
+import { MenuArrowProps } from '@base-ui/react/menu';
 import { Ref } from 'react';
-export declare const PopoverRoot: import("react").FC<PopoverPrimitive.PopoverProps>;
-export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const PopoverArrow: import("react").FunctionComponent<PopoverPrimitive.PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>>;
-export declare const PopoverClose: import("react").FunctionComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const PopoverContent: ({ ref, children, forceMount, disableBlur, className, radius, padding, ...props }: PopoverPrimitive.PopoverContentProps & {
+export declare const PopoverRoot: typeof PopoverPrimitive.Root;
+export declare const PopoverTrigger: PopoverPrimitive.Trigger;
+export declare const PopoverArrow: import("react").FunctionComponent<MenuArrowProps>;
+export declare const PopoverClose: import("react").FunctionComponent<import("@base-ui/react/popover/index.js").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: (props: PopoverTriggerProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const PopoverContent: ({ ref, children, forceMount, disableBlur, className, radius, padding, align, alignOffset, side, sideOffset, anchor, disableAnchorTracking, sticky, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, positionMethod, ...props }: PopoverPopupProps & PopoverPositionerProps & {
     radius?: "none" | "default" | "md";
     padding?: "none" | "default";
     forceMount?: boolean;
     disableBlur?: boolean;
     ref?: Ref<HTMLDivElement>;
 }) => import("react/jsx-runtime.js").JSX.Element;
-export declare const Popover: import("react").FC<PopoverPrimitive.PopoverProps> & {
-    Content: ({ ref, children, forceMount, disableBlur, className, radius, padding, ...props }: PopoverPrimitive.PopoverContentProps & {
+export declare const PopoverTitle: import("react").FunctionComponent<import("@base-ui/react/popover/index.js").PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const PopoverDescription: import("react").FunctionComponent<import("@base-ui/react/popover/index.js").PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const Popover: typeof PopoverPrimitive.Root & {
+    Content: ({ ref, children, forceMount, disableBlur, className, radius, padding, align, alignOffset, side, sideOffset, anchor, disableAnchorTracking, sticky, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, positionMethod, ...props }: PopoverPopupProps & PopoverPositionerProps & {
         radius?: "none" | "default" | "md";
         padding?: "none" | "default";
         forceMount?: boolean;
         disableBlur?: boolean;
         ref?: Ref<HTMLDivElement>;
     }) => import("react/jsx-runtime.js").JSX.Element;
-    Arrow: import("react").FunctionComponent<PopoverPrimitive.PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>>;
-    Close: import("react").FunctionComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Trigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Anchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Arrow: import("react").FunctionComponent<MenuArrowProps>;
+    Close: import("react").FunctionComponent<import("@base-ui/react/popover/index.js").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Trigger: PopoverPrimitive.Trigger;
+    Anchor: (props: PopoverTriggerProps) => import("react/jsx-runtime.js").JSX.Element;
+    Title: import("react").FunctionComponent<import("@base-ui/react/popover/index.js").PopoverTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
+    Description: import("react").FunctionComponent<import("@base-ui/react/popover/index.js").PopoverDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
+    createHandle: typeof PopoverPrimitive.createHandle;
 };

package/dist/cjs/components/popover/Popover.js

@@ -1,39 +1,5 @@
 // @unocss-include
 "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;
-    };
-})();
 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)
@@ -49,37 +15,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Popover = exports.PopoverContent = exports.PopoverAnchor = exports.PopoverClose = exports.PopoverArrow = exports.PopoverTrigger = exports.PopoverRoot = void 0;
+exports.Popover = exports.PopoverDescription = exports.PopoverTitle = exports.PopoverContent = exports.PopoverAnchor = exports.PopoverClose = exports.PopoverArrow = exports.PopoverTrigger = exports.PopoverRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const PopoverPrimitive = __importStar(require("@radix-ui/react-popover"));
+const popover_1 = require("@base-ui/react/popover");
 const clsx_1 = __importDefault(require("clsx"));
 const withClassName_js_1 = require("../../hooks/withClassName.js");
 const GroupScale_js_1 = require("../../systems/GroupScale.js");
-const StyledContent = (0, withClassName_js_1.withClassName)(PopoverPrimitive.Content, 'layer-components:rounded-xl layer-components:min-w-120px layer-components:bg-white layer-components:z-menu layer-components:shadow-lg layer-components:op-0 layer-components:hidden layer-components:max-w-90vw layer-components:border layer-components:border-gray-dark', 'will-change-transform', 'layer-components:transform-origin-[var(--radix-popover-transform-origin)]', 'layer-components:[&[data-state=open]]:animate-popover-in', 'layer-components:[&[data-state=closed]]:animate-popover-out', 'important:motion-reduce:animate-none', 'layer-components:max-h-[var(--radix-popover-content-available-height)]', 'layer-components:[&[data-state=open]]:opacity-100 layer-components:[&[data-state=open]]:flex layer-components:[&[data-state=open]]:flex-col', 'layer-components:[&[data-state=closed]]:pointer-events-none');
-const StyledArrow = (0, withClassName_js_1.withClassName)(PopoverPrimitive.Arrow, 'layer-components:arrow');
-const StyledClose = (0, withClassName_js_1.withClassName)(PopoverPrimitive.Close, 'layer-components:[all:unset] layer-components:[font-family:inherit] layer-components:rounded-lg layer-components:h-25px layer-components:w-25px layer-components:inline-flex layer-components:items-center layer-components:justify-center layer-components:color-gray-dark/80 layer-components:absolute layer-components:top-5px layer-components:right-5px layer-components:hover:bg-lightBlend layer-components:focus:shadow-focus');
+const ArrowSvg_js_1 = require("../utility/ArrowSvg.js");
+const StyledContent = (0, withClassName_js_1.withClassName)(popover_1.Popover.Popup, 'layer-components:rounded-lg layer-components:min-w-120px layer-components:bg-white layer-components:shadow-lg layer-components:max-w-90vw layer-components:border layer-components:border-black layer-components:transition', 'will-change-transform', 'layer-components:transform-origin-[var(--transform-origin)]', 'layer-components:data-[starting-style]:opacity-0 layer-components:data-[starting-style]:scale-95 layer-components:data-[starting-style]:translate-y-4px', 'layer-components:data-[ending-style]:opacity-0 layer-components:data-[ending-style]:scale-95 layer-components:data-[ending-style]:translate-y-4px', 'important:motion-reduce:transition-none', 'layer-components:max-h-[--available-height] layer-components:max-w-[--available-width]', 'layer-components:focus-visible:outline-none layer-components:focus-visible:ring-2 layer-components:focus-visible:ring-accent');
+const StyledArrow = (0, withClassName_js_1.withClassName)((props) => ((0, jsx_runtime_1.jsx)(popover_1.Popover.Arrow, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(ArrowSvg_js_1.ArrowSvg, {}) }))), 'layer-components:arrow', 'layer-components:data-[closed]:opacity-0 layer-components:data-[closed]:scale-0', 'layer-components:data-[open]:opacity-100 layer-components:data-[open]:scale-100');
+const StyledClose = (0, withClassName_js_1.withClassName)(popover_1.Popover.Close, 'layer-components:[all:unset] layer-components:[font-family:inherit] layer-components:rounded-lg layer-components:h-25px layer-components:w-25px layer-components:inline-flex layer-components:items-center layer-components:justify-center layer-components:color-gray-dark/80 layer-components:absolute layer-components:top-5px layer-components:right-5px layer-components:hover:bg-lightBlend layer-components:focus:shadow-focus');
 // Exports
-exports.PopoverRoot = PopoverPrimitive.Root;
-exports.PopoverTrigger = PopoverPrimitive.Trigger;
+exports.PopoverRoot = popover_1.Popover.Root;
+exports.PopoverTrigger = popover_1.Popover.Trigger;
 exports.PopoverArrow = StyledArrow;
 exports.PopoverClose = StyledClose;
-exports.PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverAnchor = (props) => ((0, jsx_runtime_1.jsx)(exports.PopoverTrigger, Object.assign({}, props, { disabled: true })));
+exports.PopoverAnchor = PopoverAnchor;
 const PopoverContent = function PopoverContent(_a) {
-    var { ref, children, forceMount, disableBlur, className, radius = 'default', padding = 'default' } = _a, props = __rest(_a, ["ref", "children", "forceMount", "disableBlur", "className", "radius", "padding"]);
-    return ((0, jsx_runtime_1.jsx)(PopoverPrimitive.Portal, { forceMount: forceMount, children: (0, jsx_runtime_1.jsx)(GroupScale_js_1.GroupScaleReset, { children: (0, jsx_runtime_1.jsx)(StyledContent, Object.assign({}, props, { forceMount: forceMount, ref: ref, className: (0, clsx_1.default)({
-                    'layer-variants:important:p-0': padding === 'none',
-                    'layer-variants:p-5': padding === 'default',
-                    'layer-variants:rounded-none': radius === 'none',
-                    'layer-variants:rounded-lg': radius === 'default',
-                    'layer-variants:rounded-md': radius === 'md',
-                }, className), children: children })) }) }));
+    var { ref, children, forceMount, disableBlur, className, radius = 'default', padding = 'default', align, alignOffset, side, sideOffset = 8, anchor, disableAnchorTracking, sticky, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, positionMethod } = _a, props = __rest(_a, ["ref", "children", "forceMount", "disableBlur", "className", "radius", "padding", "align", "alignOffset", "side", "sideOffset", "anchor", "disableAnchorTracking", "sticky", "arrowPadding", "collisionAvoidance", "collisionBoundary", "collisionPadding", "positionMethod"]);
+    return ((0, jsx_runtime_1.jsx)(popover_1.Popover.Portal, { keepMounted: forceMount, children: (0, jsx_runtime_1.jsx)(GroupScale_js_1.GroupScaleReset, { children: (0, jsx_runtime_1.jsx)(popover_1.Popover.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, disableAnchorTracking: disableAnchorTracking, sticky: sticky, arrowPadding: arrowPadding, collisionAvoidance: collisionAvoidance, collisionBoundary: collisionBoundary, collisionPadding: collisionPadding, positionMethod: positionMethod, children: (0, jsx_runtime_1.jsx)(StyledContent, Object.assign({}, props, { ref: ref, className: (0, clsx_1.default)({
+                        'layer-variants:important:p-0': padding === 'none',
+                        'layer-variants:p-md': padding === 'default',
+                        'layer-variants:rounded-none': radius === 'none',
+                        'layer-variants:rounded-lg': radius === 'default',
+                        'layer-variants:rounded-md': radius === 'md',
+                    }, className), children: children })) }) }) }));
 };
 exports.PopoverContent = PopoverContent;
+exports.PopoverTitle = (0, withClassName_js_1.withClassName)(popover_1.Popover.Title, 'layer-components:text-md layer-components:font-semibold layer-components:m-0 layer-components:mb-sm');
+exports.PopoverDescription = (0, withClassName_js_1.withClassName)(popover_1.Popover.Description, 'layer-components:text-sm layer-components:text-gray-dark layer-components:m-0');
 exports.Popover = Object.assign(exports.PopoverRoot, {
     Content: exports.PopoverContent,
     Arrow: exports.PopoverArrow,
     Close: exports.PopoverClose,
     Trigger: exports.PopoverTrigger,
     Anchor: exports.PopoverAnchor,
+    Title: exports.PopoverTitle,
+    Description: exports.PopoverDescription,
+    createHandle: popover_1.Popover.createHandle,
 });
 //# sourceMappingURL=Popover.js.map

package/dist/cjs/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../src/components/popover/Popover.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEb,0EAA4D;AAE5D,gDAA8B;AAE9B,mEAA6D;AAC7D,+DAA8D;AAE9D,MAAM,aAAa,GAAG,IAAA,gCAAa,EAClC,gBAAgB,CAAC,OAAO,EACxB,oHAAoH,EACpH,uBAAuB,EACvB,2EAA2E,EAC3E,0DAA0D,EAC1D,6DAA6D,EAC7D,sCAAsC,EACtC,0EAA0E,EAC1E,mEAAmE,EACnE,6DAA6D,CAC7D,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,gCAAa,EAChC,gBAAgB,CAAC,KAAK,EACtB,0BAA0B,CAC1B,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,gCAAa,EAChC,gBAAgB,CAAC,KAAK,EACtB,4MAA4M,CAC5M,CAAC;AAEF,UAAU;AACG,QAAA,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC;AACpC,QAAA,cAAc,GAAG,gBAAgB,CAAC,OAAO,CAAC;AAC1C,QAAA,YAAY,GAAG,WAAW,CAAC;AAC3B,QAAA,YAAY,GAAG,WAAW,CAAC;AAC3B,QAAA,aAAa,GAAG,gBAAgB,CAAC,MAAM,CAAC;AAE9C,MAAM,cAAc,GAAG,SAAS,cAAc,CAAC,EAerD;QAfqD,EACrD,GAAG,EACH,QAAQ,EACR,UAAU,EACV,WAAW,EACX,SAAS,EACT,MAAM,GAAG,SAAS,EAClB,OAAO,GAAG,SAAS,OAQnB,EAPG,KAAK,cAR6C,kFASrD,CADQ;IAQR,OAAO,CACN,uBAAC,gBAAgB,CAAC,MAAM,IAAC,UAAU,EAAE,UAAU,YAC9C,uBAAC,+BAAe,cACf,uBAAC,aAAa,oBACT,KAAK,IACT,UAAU,EAAE,UAAU,EACtB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB;oBACC,8BAA8B,EAAE,OAAO,KAAK,MAAM;oBAClD,oBAAoB,EAAE,OAAO,KAAK,SAAS;oBAC3C,6BAA6B,EAAE,MAAM,KAAK,MAAM;oBAChD,2BAA2B,EAAE,MAAM,KAAK,SAAS;oBACjD,2BAA2B,EAAE,MAAM,KAAK,IAAI;iBAC5C,EACD,SAAS,CACT,YAEA,QAAQ,IACM,GACC,GACO,CAC1B,CAAC;AACH,CAAC,CAAC;AAvCW,QAAA,cAAc,kBAuCzB;AAEW,QAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,EAAE;IACjD,OAAO,EAAE,sBAAc;IACvB,KAAK,EAAE,oBAAY;IACnB,KAAK,EAAE,oBAAY;IACnB,OAAO,EAAE,sBAAc;IACvB,MAAM,EAAE,qBAAa;CACrB,CAAC,CAAC"}
+{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../../src/components/popover/Popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,oDAKgC;AAGhC,gDAA8B;AAE9B,mEAA6D;AAC7D,+DAA8D;AAC9D,wDAAkD;AAElD,MAAM,aAAa,GAAG,IAAA,gCAAa,EAClC,iBAAgB,CAAC,KAAK,EACtB,wGAAwG,EACxG,uBAAuB,EACvB,6DAA6D,EAC7D,6EAA6E,EAC7E,2EAA2E,EAC3E,yCAAyC,EACzC,yEAAyE,EACzE,kEAAkE,CAClE,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,gCAAa,EAChC,CAAC,KAAqB,EAAE,EAAE,CAAC,CAC1B,uBAAC,iBAAgB,CAAC,KAAK,oBAAK,KAAK,cAChC,uBAAC,sBAAQ,KAAG,IACY,CACzB,EACD,0BAA0B,EAC1B,oDAAoD,EACpD,sDAAsD,CACtD,CAAC;AAEF,MAAM,WAAW,GAAG,IAAA,gCAAa,EAChC,iBAAgB,CAAC,KAAK,EACtB,4MAA4M,CAC5M,CAAC;AAEF,UAAU;AACG,QAAA,WAAW,GAAG,iBAAgB,CAAC,IAAI,CAAC;AACpC,QAAA,cAAc,GAAG,iBAAgB,CAAC,OAAO,CAAC;AAC1C,QAAA,YAAY,GAAG,WAAW,CAAC;AAC3B,QAAA,YAAY,GAAG,WAAW,CAAC;AACjC,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,CAC5D,uBAAC,sBAAc,oBAAK,KAAK,IAAE,QAAQ,UAAG,CACtC,CAAC;AAFW,QAAA,aAAa,iBAExB;AAEK,MAAM,cAAc,GAAG,SAAS,cAAc,CAAC,EA4BpD;QA5BoD,EACrD,GAAG,EACH,QAAQ,EACR,UAAU,EACV,WAAW,EACX,SAAS,EACT,MAAM,GAAG,SAAS,EAClB,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAU,GAAG,CAAC,EACd,MAAM,EACN,qBAAqB,EACrB,MAAM,EACN,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,cAAc,OASb,EARE,KAAK,cApB6C,8QAqBrD,CADQ;IASR,OAAO,CACN,uBAAC,iBAAgB,CAAC,MAAM,IAAC,WAAW,EAAE,UAAU,YAC/C,uBAAC,+BAAe,cACf,uBAAC,iBAAgB,CAAC,UAAU,IAC3B,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,qBAAqB,EAC5C,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,YAAY,EAC1B,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,cAAc,EAAE,cAAc,YAE9B,uBAAC,aAAa,oBACT,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAU,EACpB;wBACC,8BAA8B,EAAE,OAAO,KAAK,MAAM;wBAClD,qBAAqB,EAAE,OAAO,KAAK,SAAS;wBAC5C,6BAA6B,EAAE,MAAM,KAAK,MAAM;wBAChD,2BAA2B,EAAE,MAAM,KAAK,SAAS;wBACjD,2BAA2B,EAAE,MAAM,KAAK,IAAI;qBAC5C,EACD,SAAS,CACT,YAEA,QAAQ,IACM,GACa,GACb,GACO,CAC1B,CAAC;AACH,CAAC,CAAC;AAlEW,QAAA,cAAc,kBAkEzB;AAEW,QAAA,YAAY,GAAG,IAAA,gCAAa,EACxC,iBAAgB,CAAC,KAAK,EACtB,oDAAoD,CACpD,CAAC;AAEW,QAAA,kBAAkB,GAAG,IAAA,gCAAa,EAC9C,iBAAgB,CAAC,WAAW,EAC5B,+CAA+C,CAC/C,CAAC;AAEW,QAAA,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,EAAE;IACjD,OAAO,EAAE,sBAAc;IACvB,KAAK,EAAE,oBAAY;IACnB,KAAK,EAAE,oBAAY;IACnB,OAAO,EAAE,sBAAc;IACvB,MAAM,EAAE,qBAAa;IACrB,KAAK,EAAE,oBAAY;IACnB,WAAW,EAAE,0BAAkB;IAC/B,YAAY,EAAE,iBAAgB,CAAC,YAAY;CAC3C,CAAC,CAAC"}

package/dist/cjs/components/popover/Popover.stories.d.ts

@@ -1,27 +1,7 @@
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Popover } from './Popover.js';
-declare const meta: {
-    title: string;
-    component: import("react").FC<import("@radix-ui/react-popover").PopoverProps> & {
-        Content: ({ ref, children, forceMount, disableBlur, className, radius, padding, ...props }: import("@radix-ui/react-popover").PopoverContentProps & {
-            radius?: "none" | "default" | "md";
-            padding?: "none" | "default";
-            forceMount?: boolean;
-            disableBlur?: boolean;
-            ref?: import("react").Ref<HTMLDivElement>;
-        }) => import("react/jsx-runtime.js").JSX.Element;
-        Arrow: import("react").FunctionComponent<import("@radix-ui/react-popover").PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>>;
-        Close: import("react").FunctionComponent<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-        Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
-        Anchor: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
-    };
-    argTypes: {};
-    parameters: {
-        controls: {
-            expanded: boolean;
-        };
-    };
-};
+declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof Popover>;
 export declare const Default: Story;
+export declare const Anchored: Story;

package/dist/cjs/components/popover/Popover.stories.js

@@ -1,7 +1,7 @@
 // @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Anchored = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_js_1 = require("../button/Button.js");
 const Popover_js_1 = require("./Popover.js");
@@ -16,7 +16,12 @@ const meta = {
 exports.default = meta;
 exports.Default = {
     render(args) {
-        return ((0, jsx_runtime_1.jsxs)(Popover_js_1.Popover, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { color: "primary", size: "small", children: "Open Popover" }) }), (0, jsx_runtime_1.jsxs)(Popover_js_1.Popover.Content, { className: "p-md", children: [(0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Arrow, {}), (0, jsx_runtime_1.jsx)("p", { children: "This is a popover content." })] })] })));
+        return ((0, jsx_runtime_1.jsxs)(Popover_js_1.Popover, Object.assign({}, args, { children: [(0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Trigger, { render: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { color: "primary", size: "small" }), children: "Open Popover" }), (0, jsx_runtime_1.jsxs)(Popover_js_1.Popover.Content, { className: "p-md", children: [(0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Arrow, {}), (0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Title, { children: "Hello" }), (0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Description, { children: "This is a popover content." })] })] })));
+    },
+};
+exports.Anchored = {
+    render(args) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "layer-components:relative layer-components:h-[200px] layer-components:flex layer-components:items-center layer-components:justify-center", children: (0, jsx_runtime_1.jsxs)(Popover_js_1.Popover, Object.assign({ open: true }, args, { children: [(0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Anchor, { children: "Anchor" }), (0, jsx_runtime_1.jsxs)(Popover_js_1.Popover.Content, { className: "p-md", children: [(0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Arrow, {}), (0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Title, { children: "Hello" }), (0, jsx_runtime_1.jsx)(Popover_js_1.Popover.Description, { children: "This is a popover content anchored to the center of the container." })] })] })) }));
     },
 };
 //# sourceMappingURL=Popover.stories.js.map

package/dist/cjs/components/popover/Popover.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../../src/components/popover/Popover.stories.tsx"],"names":[],"mappings":";;;;AACA,mDAA6C;AAC7C,6CAAuC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,wBAAC,oBAAO,oBAAK,IAAI,eAChB,uBAAC,oBAAO,CAAC,OAAO,IAAC,OAAO,kBACvB,uBAAC,kBAAM,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,6BAE3B,GACQ,EAClB,wBAAC,oBAAO,CAAC,OAAO,IAAC,SAAS,EAAC,MAAM,aAChC,uBAAC,oBAAO,CAAC,KAAK,KAAG,EACjB,uEAAiC,IAChB,KACT,CACV,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../../src/components/popover/Popover.stories.tsx"],"names":[],"mappings":";;;;AACA,mDAA6C;AAC7C,6CAAuC;AAEvC,MAAM,IAAI,GAAS;IAClB,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,oBAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACD,CAAC;AAEF,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,wBAAC,oBAAO,oBAAK,IAAI,eAChB,uBAAC,oBAAO,CAAC,OAAO,IAAC,MAAM,EAAE,uBAAC,kBAAM,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,GAAG,6BAE9C,EAClB,wBAAC,oBAAO,CAAC,OAAO,IAAC,SAAS,EAAC,MAAM,aAChC,uBAAC,oBAAO,CAAC,KAAK,KAAG,EACjB,uBAAC,oBAAO,CAAC,KAAK,wBAAsB,EACpC,uBAAC,oBAAO,CAAC,WAAW,6CAAiD,IACpD,KACT,CACV,CAAC;IACH,CAAC;CACD,CAAC;AAEW,QAAA,QAAQ,GAAU;IAC9B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,gCAAK,SAAS,EAAC,wEAAwE,YACtF,wBAAC,oBAAO,kBAAC,IAAI,UAAK,IAAI,eACrB,uBAAC,oBAAO,CAAC,MAAM,yBAAwB,EACvC,wBAAC,oBAAO,CAAC,OAAO,IAAC,SAAS,EAAC,MAAM,aAChC,uBAAC,oBAAO,CAAC,KAAK,KAAG,EACjB,uBAAC,oBAAO,CAAC,KAAK,wBAAsB,EACpC,uBAAC,oBAAO,CAAC,WAAW,qFAEE,IACL,KACT,GACL,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/cjs/components/progress/Progress.d.ts

@@ -1,11 +1,27 @@
-import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { ProgressRootProps, ProgressValueProps } from '@base-ui/react/progress';
 import { PaletteName } from '../../uno/index.js';
-export declare const ProgressRoot: import("react").FunctionComponent<ProgressPrimitive.ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ProgressIndicator: import("react").FunctionComponent<ProgressPrimitive.ProgressIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const Progress: (({ ref, children, color, max, value, className, ...props }: ProgressPrimitive.ProgressProps & {
+export declare const ProgressRoot: import("react").FunctionComponent<ProgressRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ProgressIndicator: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ProgressTrack: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressTrackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ProgressLabeled: ({ ref, children, label, className, color, formatValue, ...props }: ProgressRootProps & {
+    ref?: React.Ref<HTMLDivElement>;
+    label: React.ReactNode;
+    color?: PaletteName;
+    formatValue?: ProgressValueProps["children"];
+}) => import("react/jsx-runtime.js").JSX.Element;
+export declare const Progress: (({ ref, children, color, max, value, className, ...props }: ProgressRootProps & {
     ref?: React.Ref<HTMLDivElement>;
     color?: PaletteName;
 }) => import("react/jsx-runtime.js").JSX.Element) & {
-    Root: import("react").FunctionComponent<ProgressPrimitive.ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
-    Indicator: import("react").FunctionComponent<ProgressPrimitive.ProgressIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").FunctionComponent<ProgressRootProps & import("react").RefAttributes<HTMLDivElement>>;
+    Indicator: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Track: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressTrackProps & import("react").RefAttributes<HTMLDivElement>>;
+    Labeled: ({ ref, children, label, className, color, formatValue, ...props }: ProgressRootProps & {
+        ref?: React.Ref<HTMLDivElement>;
+        label: React.ReactNode;
+        color?: PaletteName;
+        formatValue?: ProgressValueProps["children"];
+    }) => import("react/jsx-runtime.js").JSX.Element;
+    Label: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressLabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+    Value: import("react").FunctionComponent<ProgressValueProps & import("react").RefAttributes<HTMLSpanElement>>;
 };

package/dist/cjs/components/progress/Progress.js

@@ -1,38 +1,5 @@
 // @unocss-include
 "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;
-    };
-})();
 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)
@@ -48,23 +15,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Progress = exports.ProgressIndicator = exports.ProgressRoot = void 0;
+exports.Progress = exports.ProgressLabeled = exports.ProgressTrack = exports.ProgressIndicator = exports.ProgressRoot = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ProgressPrimitive = __importStar(require("@radix-ui/react-progress"));
+const progress_1 = require("@base-ui/react/progress");
 const clsx_1 = __importDefault(require("clsx"));
 const hooks_js_1 = require("../../hooks.js");
-exports.ProgressRoot = (0, hooks_js_1.withClassName)(ProgressPrimitive.Root, 'layer-components:w-full layer-components:relative layer-components:overflow-hidden layer-components:border layer-components:border-default layer-components:rounded-lg');
-exports.ProgressIndicator = (0, hooks_js_1.withClassName)(ProgressPrimitive.Indicator, 'layer-components:bg-main layer-components:w-full layer-components:h-6px layer-components:translate-x-[calc(-100%*(1-var(--value)))] layer-components:rounded-lg layer-components:transition-transform', 'layer-components:[&[data-state=complete]]:bg-success');
+exports.ProgressRoot = (0, hooks_js_1.withClassName)(progress_1.Progress.Root, 'layer-components:grid layer-components:grid-columns-[1fr_1fr] layer-components:gap-col-md layer-components:gap-row-xs layer-components:items-center layer-components:w-full');
+exports.ProgressIndicator = (0, hooks_js_1.withClassName)(progress_1.Progress.Indicator, 'layer-components:bg-main layer-components:w-full layer-components:h-full layer-components:rounded-lg layer-components:transition-transform', 'layer-components:data-[complete]:bg-success');
+exports.ProgressTrack = (0, hooks_js_1.withClassName)(progress_1.Progress.Track, 'layer-components:w-full layer-components:relative layer-components:overflow-hidden layer-components:ring layer-components:ring-black layer-components:ring-1 layer-components:rounded-lg layer-components:h-6px');
 const ProgressBase = function ProgressBase(_a) {
     var { ref, children, color, max = 100, value, className } = _a, props = __rest(_a, ["ref", "children", "color", "max", "value", "className"]);
-    return ((0, jsx_runtime_1.jsx)(exports.ProgressRoot, Object.assign({}, props, { className: (0, clsx_1.default)(color && `palette-${color}`, className), value: value, max: max, ref: ref, children: (0, jsx_runtime_1.jsx)(exports.ProgressIndicator
-        // @ts-ignore
-        , { 
-            // @ts-ignore
-            style: { '--value': (value || 0) / max } }) })));
+    return ((0, jsx_runtime_1.jsx)(progress_1.Progress.Root, Object.assign({}, props, { className: (0, clsx_1.default)(color && `palette-${color}`, 'layer-components:w-full', className), value: value, max: max, ref: ref, children: (0, jsx_runtime_1.jsx)(exports.ProgressTrack, { children: (0, jsx_runtime_1.jsx)(exports.ProgressIndicator, {}) }) })));
+};
+const ProgressLabel = (0, hooks_js_1.withClassName)(progress_1.Progress.Label, 'layer-components:font-size-xs layer-components:color-gray-ink layer-components:col-start-1 layer-components:row-start-1');
+const ProgressValue = (0, hooks_js_1.withClassName)(progress_1.Progress.Value, 'layer-components:font-size-xs layer-components:font-semibold layer-components:color-gray-ink layer-components:col-start-2 layer-components:row-start-1 layer-components:justify-self-end');
+const ProgressLabeled = function ProgressLabeled(_a) {
+    var { ref, children, label, className, color, formatValue } = _a, props = __rest(_a, ["ref", "children", "label", "className", "color", "formatValue"]);
+    return ((0, jsx_runtime_1.jsxs)(exports.ProgressRoot, Object.assign({ ref: ref, className: (0, clsx_1.default)(color && `palette-${color}`, className) }, props, { children: [(0, jsx_runtime_1.jsx)(ProgressLabel, { children: label }), (0, jsx_runtime_1.jsx)(ProgressValue, { children: formatValue }), (0, jsx_runtime_1.jsx)(exports.ProgressTrack, { className: "col-span-2", children: (0, jsx_runtime_1.jsx)(exports.ProgressIndicator, {}) })] })));
 };
+exports.ProgressLabeled = ProgressLabeled;
 exports.Progress = Object.assign(ProgressBase, {
     Root: exports.ProgressRoot,
     Indicator: exports.ProgressIndicator,
+    Track: exports.ProgressTrack,
+    Labeled: exports.ProgressLabeled,
+    Label: ProgressLabel,
+    Value: ProgressValue,
 });
 //# sourceMappingURL=Progress.js.map

package/dist/cjs/components/progress/Progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../../src/components/progress/Progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4EAA8D;AAC9D,gDAAwB;AACxB,6CAA+C;AAGlC,QAAA,YAAY,GAAG,IAAA,wBAAa,EACxC,iBAAiB,CAAC,IAAI,EACtB,qFAAqF,CACrF,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,wBAAa,EAC7C,iBAAiB,CAAC,SAAS,EAC3B,oHAAoH,EACpH,wDAAwD,CACxD,CAAC;AAEF,MAAM,YAAY,GAAG,SAAS,YAAY,CAAC,EAW1C;QAX0C,EAC1C,GAAG,EACH,QAAQ,EACR,KAAK,EACL,GAAG,GAAG,GAAG,EACT,KAAK,EACL,SAAS,OAKT,EAJG,KAAK,cAPkC,yDAQ1C,CADQ;IAKR,OAAO,CACN,uBAAC,oBAAY,oBACR,KAAK,IACT,SAAS,EAAE,IAAA,cAAI,EAAC,KAAK,IAAI,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,EACvD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,YAER,uBAAC,yBAAiB;QACjB,aAAa;;YAAb,aAAa;YACb,KAAK,EAAE,EAAE,SAAS,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC,GAAG,GAAG,EAAE,GACvC,IACY,CACf,CAAC;AACH,CAAC,CAAC;AAEW,QAAA,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IACnD,IAAI,EAAE,oBAAY;IAClB,SAAS,EAAE,yBAAiB;CAC5B,CAAC,CAAC"}
+{"version":3,"file":"Progress.js","sourceRoot":"","sources":["../../../../src/components/progress/Progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,sDAIiC;AACjC,gDAAwB;AACxB,6CAA+C;AAGlC,QAAA,YAAY,GAAG,IAAA,wBAAa,EACxC,mBAAiB,CAAC,IAAI,EACtB,0FAA0F,CAC1F,CAAC;AACW,QAAA,iBAAiB,GAAG,IAAA,wBAAa,EAC7C,mBAAiB,CAAC,SAAS,EAC3B,0EAA0E,EAC1E,+CAA+C,CAC/C,CAAC;AACW,QAAA,aAAa,GAAG,IAAA,wBAAa,EACzC,mBAAiB,CAAC,KAAK,EACvB,4FAA4F,CAC5F,CAAC;AAEF,MAAM,YAAY,GAAG,SAAS,YAAY,CAAC,EAW1C;QAX0C,EAC1C,GAAG,EACH,QAAQ,EACR,KAAK,EACL,GAAG,GAAG,GAAG,EACT,KAAK,EACL,SAAS,OAKT,EAJG,KAAK,cAPkC,yDAQ1C,CADQ;IAKR,OAAO,CACN,uBAAC,mBAAiB,CAAC,IAAI,oBAClB,KAAK,IACT,SAAS,EAAE,IAAA,cAAI,EACd,KAAK,IAAI,WAAW,KAAK,EAAE,EAC3B,yBAAyB,EACzB,SAAS,CACT,EACD,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,YAER,uBAAC,qBAAa,cACb,uBAAC,yBAAiB,KAAG,GACN,IACQ,CACzB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,IAAA,wBAAa,EAClC,mBAAiB,CAAC,KAAK,EACvB,wEAAwE,CACxE,CAAC;AAEF,MAAM,aAAa,GAAG,IAAA,wBAAa,EAClC,mBAAiB,CAAC,KAAK,EACvB,uGAAuG,CACvG,CAAC;AAEK,MAAM,eAAe,GAAG,SAAS,eAAe,CAAC,EAavD;QAbuD,EACvD,GAAG,EACH,QAAQ,EACR,KAAK,EACL,SAAS,EACT,KAAK,EACL,WAAW,OAOX,EANG,KAAK,cAP+C,iEAQvD,CADQ;IAOR,OAAO,CACN,wBAAC,oBAAY,kBACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,cAAI,EAAC,KAAK,IAAI,WAAW,KAAK,EAAE,EAAE,SAAS,CAAC,IACnD,KAAK,eAET,uBAAC,aAAa,cAAE,KAAK,GAAiB,EACtC,uBAAC,aAAa,cAAE,WAAW,GAAiB,EAC5C,uBAAC,qBAAa,IAAC,SAAS,EAAC,YAAY,YACpC,uBAAC,yBAAiB,KAAG,GACN,KACF,CACf,CAAC;AACH,CAAC,CAAC;AA3BW,QAAA,eAAe,mBA2B1B;AAEW,QAAA,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IACnD,IAAI,EAAE,oBAAY;IAClB,SAAS,EAAE,yBAAiB;IAC5B,KAAK,EAAE,qBAAa;IACpB,OAAO,EAAE,uBAAe;IACxB,KAAK,EAAE,aAAa;IACpB,KAAK,EAAE,aAAa;CACpB,CAAC,CAAC"}

package/dist/cjs/components/progress/Progress.stories.d.ts

@@ -2,12 +2,21 @@ import type { StoryObj } from '@storybook/react';
 import { Progress } from './Progress.js';
 declare const meta: {
     title: string;
-    component: (({ ref, children, color, max, value, className, ...props }: import("@radix-ui/react-progress").ProgressProps & {
+    component: (({ ref, children, color, max, value, className, ...props }: import("@base-ui/react/progress/index.js").ProgressRootProps & {
         ref?: React.Ref<HTMLDivElement>;
         color?: import("../../index.js").PaletteName;
     }) => import("react/jsx-runtime.js").JSX.Element) & {
-        Root: import("react").FunctionComponent<import("@radix-ui/react-progress").ProgressProps & import("react").RefAttributes<HTMLDivElement>>;
-        Indicator: import("react").FunctionComponent<import("@radix-ui/react-progress").ProgressIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+        Root: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressRootProps & import("react").RefAttributes<HTMLDivElement>>;
+        Indicator: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+        Track: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressTrackProps & import("react").RefAttributes<HTMLDivElement>>;
+        Labeled: ({ ref, children, label, className, color, formatValue, ...props }: import("@base-ui/react/progress/index.js").ProgressRootProps & {
+            ref?: React.Ref<HTMLDivElement>;
+            label: React.ReactNode;
+            color?: import("../../index.js").PaletteName;
+            formatValue?: import("@base-ui/react/progress/index.js").ProgressValueProps["children"];
+        }) => import("react/jsx-runtime.js").JSX.Element;
+        Label: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressLabelProps & import("react").RefAttributes<HTMLSpanElement>>;
+        Value: import("react").FunctionComponent<import("@base-ui/react/progress/index.js").ProgressValueProps & import("react").RefAttributes<HTMLSpanElement>>;
     };
     argTypes: {};
     parameters: {
@@ -19,3 +28,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj<typeof Progress>;
 export declare const Default: Story;
+export declare const Labeled: Story;

package/dist/cjs/components/progress/Progress.stories.js

@@ -1,7 +1,7 @@
 // @unocss-include
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.Labeled = exports.Default = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Progress_js_1 = require("./Progress.js");
 const meta = {
@@ -15,7 +15,12 @@ const meta = {
 exports.default = meta;
 exports.Default = {
     render(args) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "col", children: [(0, jsx_runtime_1.jsx)(Progress_js_1.Progress, Object.assign({}, args, { value: 5, max: 10 })), (0, jsx_runtime_1.jsx)(Progress_js_1.Progress, Object.assign({}, args, { value: 10, max: 10 })), (0, jsx_runtime_1.jsx)(Progress_js_1.Progress, Object.assign({}, args, { value: 0, max: 10 }))] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "col", children: [(0, jsx_runtime_1.jsx)(Progress_js_1.Progress, Object.assign({}, args, { value: 50, max: 100 })), (0, jsx_runtime_1.jsx)(Progress_js_1.Progress, Object.assign({}, args, { value: 100, max: 100 })), (0, jsx_runtime_1.jsx)(Progress_js_1.Progress, Object.assign({}, args, { value: 0, max: 100 }))] }));
+    },
+};
+exports.Labeled = {
+    render(args) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "col gap-10px", children: [(0, jsx_runtime_1.jsx)(Progress_js_1.Progress.Labeled, Object.assign({}, args, { value: 33, max: 100, label: "Loading..." })), (0, jsx_runtime_1.jsx)(Progress_js_1.Progress.Labeled, Object.assign({}, args, { value: 100, max: 100, label: "Complete" })), (0, jsx_runtime_1.jsx)(Progress_js_1.Progress.Labeled, Object.assign({}, args, { value: 0, max: 100, label: "Starting..." }))] }));
     },
 };
 //# sourceMappingURL=Progress.stories.js.map

package/dist/cjs/components/progress/Progress.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../../src/components/progress/Progress.stories.tsx"],"names":[],"mappings":";;;;AACA,+CAAyC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,sBAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,iCAAK,SAAS,EAAC,KAAK,aACnB,uBAAC,sBAAQ,oBAAK,IAAI,IAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,IAAI,EACzC,uBAAC,sBAAQ,oBAAK,IAAI,IAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,IAAI,EAC1C,uBAAC,sBAAQ,oBAAK,IAAI,IAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,IAAI,IACpC,CACN,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../../src/components/progress/Progress.stories.tsx"],"names":[],"mappings":";;;;AACA,+CAAyC;AAEzC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,sBAAQ;IACnB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC+B,CAAC;AAElC,kBAAe,IAAI,CAAC;AAIP,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,iCAAK,SAAS,EAAC,KAAK,aACnB,uBAAC,sBAAQ,oBAAK,IAAI,IAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,IAAI,EAC3C,uBAAC,sBAAQ,oBAAK,IAAI,IAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,EAC5C,uBAAC,sBAAQ,oBAAK,IAAI,IAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,IAAI,IACrC,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEW,QAAA,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,iCAAK,SAAS,EAAC,cAAc,aAC5B,uBAAC,sBAAQ,CAAC,OAAO,oBAAK,IAAI,IAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,YAAY,IAAG,EACtE,uBAAC,sBAAQ,CAAC,OAAO,oBAAK,IAAI,IAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,UAAU,IAAG,EACrE,uBAAC,sBAAQ,CAAC,OAAO,oBAAK,IAAI,IAAE,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAC,aAAa,IAAG,IACjE,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/cjs/components/pwaInstall/PwaInstall.d.ts

@@ -1,5 +1,5 @@
-import { DialogTriggerProps } from '@radix-ui/react-dialog';
-export interface PwaInstall extends DialogTriggerProps {
+import { DialogRootProps } from '@base-ui/react/dialog';
+export interface PwaInstall extends DialogRootProps {
     manifestPath?: string;
 }
-export declare function PwaInstall({ children, manifestPath, asChild: _, ...rest }: PwaInstall): import("react/jsx-runtime.js").JSX.Element | null;
+export declare function PwaInstall({ children, manifestPath, ...rest }: PwaInstall): import("react/jsx-runtime.js").JSX.Element | null;

package/dist/cjs/components/pwaInstall/PwaInstall.js

@@ -30,7 +30,7 @@ const useIsInstallReady_js_1 = require("./useIsInstallReady.js");
 const useWebManifest_js_1 = require("./useWebManifest.js");
 function PwaInstall(_a) {
     var _b, _c, _d, _e, _f, _g;
-    var { children, manifestPath, asChild: _ } = _a, rest = __rest(_a, ["children", "manifestPath", "asChild"]);
+    var { children, manifestPath } = _a, rest = __rest(_a, ["children", "manifestPath"]);
     const installed = (0, useIsInstallReady_js_1.useIsInstalled)();
     const manifest = (0, useWebManifest_js_1.useWebManifest)(manifestPath);
     const { open } = (0, valtio_1.useSnapshot)(state_js_1.pwaInstallerState);
@@ -39,9 +39,11 @@ function PwaInstall(_a) {
         return null;
     }
     const primaryIcon = (_b = manifest === null || manifest === void 0 ? void 0 : manifest.icons) === null || _b === void 0 ? void 0 : _b[0];
-    return ((0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog, { open: open, onOpenChange: (isOpen) => {
+    return ((0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog, Object.assign({}, rest, { open: open, onOpenChange: (isOpen, ev) => {
+            var _a;
             state_js_1.pwaInstallerState.open = isOpen;
-        }, children: (0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog.Content, { className: "flex flex-col gap-xs", id: "pwa-install-dialog", children: [(0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog.Title, { className: "flex flex-row gap-md items-center", children: [primaryIcon && ((0, jsx_runtime_1.jsx)("img", { src: primaryIcon.src, alt: (_e = (_d = (_c = primaryIcon.label) !== null && _c !== void 0 ? _c : manifest === null || manifest === void 0 ? void 0 : manifest.short_name) !== null && _d !== void 0 ? _d : manifest === null || manifest === void 0 ? void 0 : manifest.name) !== null && _e !== void 0 ? _e : 'App Icon', className: "inline-block w-1em h-1em rounded" })), "Install ", (_g = (_f = manifest === null || manifest === void 0 ? void 0 : manifest.short_name) !== null && _f !== void 0 ? _f : manifest === null || manifest === void 0 ? void 0 : manifest.name) !== null && _g !== void 0 ? _g : 'App'] }), showInstructions ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog.Description, { children: "Follow the instructions below to install this app on your device." }), (0, jsx_runtime_1.jsx)(InstallInstructions, {}), (0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog.Actions, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { emphasis: "ghost", children: "Close" }) }), (0, jsx_runtime_1.jsxs)(Button_js_1.Button, { onClick: () => setShowInstructions(false), children: [(0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "arrowLeft" }), " Back"] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog.Description, { children: "This site is also an app. You can install it right now for easier access and more features." }), (manifest === null || manifest === void 0 ? void 0 : manifest.description) && ((0, jsx_runtime_1.jsx)(typography_js_1.P, { className: "mb-sm", children: manifest.description })), (0, jsx_runtime_1.jsx)(ManifestImageGallery, { manifestPath: manifestPath }), (0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog.Actions, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { emphasis: "ghost", children: "Close" }) }), (0, jsx_runtime_1.jsx)(InstallDeviceActions, { showInstructions: () => setShowInstructions(true) })] })] }))] }) }));
+            (_a = rest.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(rest, isOpen, ev);
+        }, children: (0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog.Content, { className: "flex flex-col gap-xs", id: "pwa-install-dialog", children: [(0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog.Title, { className: "flex flex-row gap-md items-center", children: [primaryIcon && ((0, jsx_runtime_1.jsx)("img", { src: primaryIcon.src, alt: (_e = (_d = (_c = primaryIcon.label) !== null && _c !== void 0 ? _c : manifest === null || manifest === void 0 ? void 0 : manifest.short_name) !== null && _d !== void 0 ? _d : manifest === null || manifest === void 0 ? void 0 : manifest.name) !== null && _e !== void 0 ? _e : 'App Icon', className: "inline-block w-1em h-1em rounded" })), "Install ", (_g = (_f = manifest === null || manifest === void 0 ? void 0 : manifest.short_name) !== null && _f !== void 0 ? _f : manifest === null || manifest === void 0 ? void 0 : manifest.name) !== null && _g !== void 0 ? _g : 'App'] }), showInstructions ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog.Description, { children: "Follow the instructions below to install this app on your device." }), (0, jsx_runtime_1.jsx)(InstallInstructions, {}), (0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog.Actions, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog.Close, { render: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { emphasis: "ghost" }), children: "Close" }), (0, jsx_runtime_1.jsxs)(Button_js_1.Button, { onClick: () => setShowInstructions(false), children: [(0, jsx_runtime_1.jsx)(Icon_js_1.Icon, { name: "arrowLeft" }), " Back"] })] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog.Description, { children: "This site is also an app. You can install it right now for easier access and more features." }), (manifest === null || manifest === void 0 ? void 0 : manifest.description) && ((0, jsx_runtime_1.jsx)(typography_js_1.P, { className: "mb-sm", children: manifest.description })), (0, jsx_runtime_1.jsx)(ManifestImageGallery, { manifestPath: manifestPath }), (0, jsx_runtime_1.jsxs)(Dialog_js_1.Dialog.Actions, { children: [(0, jsx_runtime_1.jsx)(Dialog_js_1.Dialog.Close, { render: (0, jsx_runtime_1.jsx)(Button_js_1.Button, { emphasis: "ghost" }), children: "Close" }), (0, jsx_runtime_1.jsx)(InstallDeviceActions, { showInstructions: () => setShowInstructions(true) })] })] }))] }) })));
 }
 const supportsDirectInstall = (0, platform_js_1.getSupportsPWAInstallPrompt)();
 function InstallInstructions() {
@@ -67,7 +69,7 @@ function ManifestImageGallery({ manifestPath }) {
     if (!((_a = manifest === null || manifest === void 0 ? void 0 : manifest.screenshots) === null || _a === void 0 ? void 0 : _a.length)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, { overflow: "auto-x", p: "sm", gap: true, className: "h-240px", children: (_b = manifest.screenshots) === null || _b === void 0 ? void 0 : _b.map((screenshot, index) => ((0, jsx_runtime_1.jsxs)(Lightbox_js_1.Lightbox.Root, { children: [(0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Image, { tabIndex: 0, src: screenshot.src, alt: screenshot.label || `Screenshot ${index + 1}`, className: "border border-default rounded-xs" }, index) }), (0, jsx_runtime_1.jsxs)(Lightbox_js_1.Lightbox.Portal, { children: [(0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Overlay, { className: "z-10000" }), (0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Content, { className: "z-10001", children: (0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Image, { src: screenshot.src, alt: screenshot.label || `Screenshot ${index + 1}` }) })] })] }, screenshot.src))) }));
+    return ((0, jsx_runtime_1.jsx)(Box_js_1.Box, { overflow: "auto-x", p: "sm", gap: true, className: "h-240px", children: (_b = manifest.screenshots) === null || _b === void 0 ? void 0 : _b.map((screenshot, index) => ((0, jsx_runtime_1.jsxs)(Lightbox_js_1.Lightbox.Root, { children: [(0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Trigger, { render: (0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Image, { tabIndex: 0, src: screenshot.src, alt: screenshot.label || `Screenshot ${index + 1}`, className: "border border-default rounded-xs" }, index) }), (0, jsx_runtime_1.jsxs)(Lightbox_js_1.Lightbox.Portal, { children: [(0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Overlay, { className: "z-10000" }), (0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Content, { className: "z-10001", children: (0, jsx_runtime_1.jsx)(Lightbox_js_1.Lightbox.Image, { src: screenshot.src, alt: screenshot.label || `Screenshot ${index + 1}` }) })] })] }, screenshot.src))) }));
 }
 function InstallDeviceActions({ showInstructions, }) {
     const ready = (0, useIsInstallReady_js_1.useIsInstallReady)();