@pathscale/ui 1.1.40 → 1.1.43

package/dist/components/number-field/NumberField.js

@@ -106,10 +106,9 @@ const NumberFieldRoot = (props)=>{
         value: contextValue,
         get children () {
             var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-                get ["class"] () {
-                    return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Root.variant[variant()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Root.flag.fullWidth, local.class, local.className);
-                },
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Root.base, __WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Root.variant[variant()], fullWidth() && __WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Root.flag.fullWidth, local.class, local.className)
+                }), {
                 "data-slot": "number-field",
                 get ["data-invalid"] () {
                     return isInvalid() ? "true" : void 0;
@@ -162,10 +161,9 @@ const NumberFieldGroup = (props)=>{
         });
     return (()=>{
         var _el$2 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Group.base, context?.fullWidth() && __WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Group.flag.fullWidth, local.class, local.className);
-            },
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Group.base, context?.fullWidth() && __WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Group.flag.fullWidth, local.class, local.className)
+            }), {
             "data-slot": "number-field-group",
             get ["data-invalid"] () {
                 return context?.isInvalid() ? "true" : void 0;
@@ -211,10 +209,10 @@ const NumberFieldInput = (props)=>{
         var _el$3 = _tmpl$2();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             type: "text",
-            inputmode: "decimal",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Input.base, local.class, local.className);
-            },
+            inputmode: "decimal"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.Input.base, local.class, local.className)
+            }), {
             "data-slot": "number-field-input",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -270,10 +268,10 @@ const NumberFieldIncrementButton = (props)=>{
     return (()=>{
         var _el$4 = _tmpl$3();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            type: "button",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.IncrementButton.base, local.class, local.className);
-            },
+            type: "button"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.IncrementButton.base, local.class, local.className)
+            }), {
             "data-slot": "number-field-increment-button",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -312,10 +310,10 @@ const NumberFieldDecrementButton = (props)=>{
     return (()=>{
         var _el$6 = _tmpl$3();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            type: "button",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.DecrementButton.base, local.class, local.className);
-            },
+            type: "button"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__NumberField_classes_js_abe73f12__.CLASSES.DecrementButton.base, local.class, local.className)
+            }), {
             "data-slot": "number-field-decrement-button",
             get ["data-theme"] () {
                 return local.dataTheme;

package/dist/components/pagination/Pagination.classes.d.ts

@@ -0,0 +1,11 @@
+export declare const CLASSES: {
+    readonly base: "pagination";
+    readonly slot: {
+        readonly summary: "pagination__summary";
+        readonly content: "pagination__content";
+        readonly item: "pagination__item";
+        readonly link: "pagination__link";
+        readonly linkNav: "pagination__link--nav";
+        readonly ellipsis: "pagination__ellipsis";
+    };
+};

package/dist/components/pagination/Pagination.classes.js

@@ -0,0 +1,12 @@
+const CLASSES = {
+    base: "pagination",
+    slot: {
+        summary: "pagination__summary",
+        content: "pagination__content",
+        item: "pagination__item",
+        link: "pagination__link",
+        linkNav: "pagination__link--nav",
+        ellipsis: "pagination__ellipsis"
+    }
+};
+export { CLASSES };

package/dist/components/pagination/Pagination.js

@@ -2,7 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Pagination.css";
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<nav><div class=pagination__summary data-slot=pagination-summary>Page <!> of </div><ul class=pagination__content data-slot=pagination-content><li class=pagination__item data-slot=pagination-item><button type=button class="pagination__link pagination__link--nav"data-slot=pagination-previous aria-label="Go to previous page"><span aria-hidden=true>\u{2039}</span><span>Previous</span></button></li><li class=pagination__item data-slot=pagination-item><button type=button class="pagination__link pagination__link--nav"data-slot=pagination-next aria-label="Go to next page"><span>Next</span><span aria-hidden=true>\u{203A}`), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li class=pagination__item data-slot=pagination-item>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button class=pagination__link data-slot=pagination-link>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<span class=pagination__ellipsis data-slot=pagination-ellipsis aria-hidden=true>\u{2026}`);
+import * as __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__ from "./Pagination.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<nav><div>Page <!> of </div><ul><li><button type=button><span aria-hidden=true>\u{2039}</span><span>Previous</span></button></li><li><button type=button><span>Next</span><span aria-hidden=true>\u{203A}`), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<li>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button type=button>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)(`<span>\u{2026}`);
 const clampPage = (page, total)=>{
     if (!Number.isFinite(page)) return 1;
     return Math.min(Math.max(1, Math.floor(page)), total);
@@ -64,60 +65,103 @@ const Pagination = (props)=>{
         var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$5 = _el$3.nextSibling, _el$6 = (_el$5.nextSibling, _el$2.nextSibling), _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$7.nextSibling, _el$0 = _el$9.firstChild;
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             "aria-label": "pagination",
-            role: "navigation",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("pagination", local.class, local.className);
-            },
+            role: "navigation"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.base, local.class, local.className)
+            }), {
             get ["data-theme"] () {
                 return local.dataTheme;
             },
             "data-slot": "pagination"
         }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.summary
+            }), {
+            "data-slot": "pagination-summary"
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, currentPage, _el$5);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, safeTotal, null);
-        _el$8.$$click = ()=>handleChange(currentPage() - 1);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.content
+            }), {
+            "data-slot": "pagination-content"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.item
+            }), {
+            "data-slot": "pagination-item"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.link, __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.linkNav)
+            }), {
+            "data-slot": "pagination-previous",
+            onClick: ()=>handleChange(currentPage() - 1),
+            get disabled () {
+                return disabled() || currentPage() <= 1;
+            },
+            "aria-label": "Go to previous page"
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
             get each () {
                 return tokens();
             },
             children: (token)=>(()=>{
                     var _el$1 = _tmpl$2();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$1, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                            class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.item
+                        }), {
+                        "data-slot": "pagination-item"
+                    }), false, true);
                     (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$1, "number" == typeof token ? (()=>{
                         var _el$10 = _tmpl$3();
-                        _el$10.$$click = ()=>handleChange(token);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "aria-label", `Go to page ${token}`);
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$10, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.link
+                            }), {
+                            "data-slot": "pagination-link",
+                            get ["data-active"] () {
+                                return token === currentPage() ? "true" : void 0;
+                            },
+                            get ["aria-current"] () {
+                                return token === currentPage() ? "page" : void 0;
+                            },
+                            "aria-label": `Go to page ${token}`,
+                            get disabled () {
+                                return disabled();
+                            },
+                            onClick: ()=>handleChange(token)
+                        }), false, true);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$10, token);
-                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                            var _v$3 = token === currentPage() ? "true" : void 0, _v$4 = token === currentPage() ? "page" : void 0, _v$5 = disabled();
-                            _v$3 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "data-active", _p$.e = _v$3);
-                            _v$4 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$10, "aria-current", _p$.t = _v$4);
-                            _v$5 !== _p$.a && (_el$10.disabled = _p$.a = _v$5);
-                            return _p$;
-                        }, {
-                            e: void 0,
-                            t: void 0,
-                            a: void 0
-                        });
                         return _el$10;
-                    })() : _tmpl$4());
+                    })() : (()=>{
+                        var _el$11 = _tmpl$4();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$11, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.ellipsis
+                            }), {
+                            "data-slot": "pagination-ellipsis",
+                            "aria-hidden": "true"
+                        }), false, true);
+                        return _el$11;
+                    })());
                     return _el$1;
                 })()
         }), _el$9);
-        _el$0.$$click = ()=>handleChange(currentPage() + 1);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = disabled() || currentPage() <= 1, _v$2 = disabled() || currentPage() >= safeTotal();
-            _v$ !== _p$.e && (_el$8.disabled = _p$.e = _v$);
-            _v$2 !== _p$.t && (_el$0.disabled = _p$.t = _v$2);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0
-        });
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.item
+            }), {
+            "data-slot": "pagination-item"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.link, __WEBPACK_EXTERNAL_MODULE__Pagination_classes_js_a4e7fc9f__.CLASSES.slot.linkNav)
+            }), {
+            "data-slot": "pagination-next",
+            onClick: ()=>handleChange(currentPage() + 1),
+            get disabled () {
+                return disabled() || currentPage() >= safeTotal();
+            },
+            "aria-label": "Go to next page"
+        }), false, true);
         return _el$;
     })();
 };
 const pagination_Pagination = Pagination;
-(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
-    "click"
-]);
 export { pagination_Pagination as default };

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

@@ -0,0 +1,10 @@
+export declare const CLASSES: {
+    readonly base: "popover";
+    readonly slot: {
+        readonly root: "popover-root";
+        readonly trigger: "popover__trigger";
+        readonly dialog: "popover__dialog";
+        readonly arrow: "popover__arrow";
+        readonly heading: "popover__heading";
+    };
+};

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

@@ -0,0 +1,11 @@
+const CLASSES = {
+    base: "popover",
+    slot: {
+        root: "popover-root",
+        trigger: "popover__trigger",
+        dialog: "popover__dialog",
+        arrow: "popover__arrow",
+        heading: "popover__heading"
+    }
+};
+export { CLASSES };

package/dist/components/popover/Popover.css

@@ -0,0 +1,125 @@
+@layer components {
+  .popover-root {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .popover {
+    position: absolute;
+    z-index: var(--z-overlay, 70);
+    border-radius: 1.5rem;
+    padding: 0;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    background-color: var(--color-overlay, var(--color-base-100));
+    color: var(--color-overlay-foreground, var(--color-base-content));
+    box-shadow: var(--shadow-overlay, 0 24px 48px color-mix(in oklab, black 20%, transparent));
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(-4px) scale(0.96);
+    transform-origin: center;
+    transition:
+      opacity 150ms var(--ease-smooth, ease),
+      transform 150ms var(--ease-smooth, ease);
+  }
+
+  .popover[data-open="true"] {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0) scale(1);
+  }
+
+  .popover[data-placement="top"] {
+    bottom: calc(100% + var(--popover-offset, 8px));
+    left: 50%;
+    transform: translateX(-50%) translateY(4px) scale(0.96);
+    transform-origin: bottom;
+  }
+
+  .popover[data-placement="top"][data-open="true"] {
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+
+  .popover[data-placement="bottom"] {
+    top: calc(100% + var(--popover-offset, 8px));
+    left: 50%;
+    transform: translateX(-50%) translateY(-4px) scale(0.96);
+    transform-origin: top;
+  }
+
+  .popover[data-placement="bottom"][data-open="true"] {
+    transform: translateX(-50%) translateY(0) scale(1);
+  }
+
+  .popover[data-placement="left"] {
+    right: calc(100% + var(--popover-offset, 8px));
+    top: 50%;
+    transform: translateX(4px) translateY(-50%) scale(0.96);
+    transform-origin: right;
+  }
+
+  .popover[data-placement="left"][data-open="true"] {
+    transform: translateX(0) translateY(-50%) scale(1);
+  }
+
+  .popover[data-placement="right"] {
+    left: calc(100% + var(--popover-offset, 8px));
+    top: 50%;
+    transform: translateX(-4px) translateY(-50%) scale(0.96);
+    transform-origin: left;
+  }
+
+  .popover[data-placement="right"][data-open="true"] {
+    transform: translateX(0) translateY(-50%) scale(1);
+  }
+
+  .popover__dialog {
+    padding: 1rem;
+    outline: none;
+  }
+
+  .popover__heading {
+    font-weight: 600;
+  }
+
+  .popover__trigger {
+    display: inline-flex;
+    cursor: pointer;
+  }
+
+  .popover__trigger:focus-visible,
+  .popover__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.375rem);
+  }
+
+  .popover__arrow {
+    position: absolute;
+    color: var(--color-overlay, var(--color-base-100));
+  }
+
+  .popover[data-placement="top"] .popover__arrow {
+    top: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .popover[data-placement="bottom"] .popover__arrow {
+    bottom: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+  }
+
+  .popover[data-placement="left"] .popover__arrow {
+    left: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+  }
+
+  .popover[data-placement="right"] .popover__arrow {
+    right: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(90deg);
+  }
+}

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

@@ -0,0 +1,47 @@
+import "./Popover.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type PopoverPlacement = "top" | "bottom" | "left" | "right";
+export type PopoverRootProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: JSX.Element;
+    isOpen?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placement?: PopoverPlacement;
+    offset?: number;
+    closeOnOutsideClick?: boolean;
+    closeOnEscape?: boolean;
+    onInteractOutside?: (event: Event) => void;
+};
+declare const PopoverRoot: ParentComponent<PopoverRootProps>;
+export type PopoverTriggerProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: JSX.Element;
+};
+declare const PopoverTrigger: Component<PopoverTriggerProps>;
+export type PopoverContentProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: JSX.Element;
+    sideOffset?: number;
+};
+declare const PopoverContent: Component<PopoverContentProps>;
+export type PopoverDialogProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: JSX.Element;
+};
+declare const PopoverDialog: Component<PopoverDialogProps>;
+export type PopoverArrowProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    children?: JSX.Element;
+};
+declare const PopoverArrow: Component<PopoverArrowProps>;
+export type PopoverHeadingProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & {
+    children: JSX.Element;
+};
+declare const PopoverHeading: Component<PopoverHeadingProps>;
+declare const Popover: ParentComponent<PopoverRootProps> & {
+    Root: ParentComponent<PopoverRootProps>;
+    Trigger: Component<PopoverTriggerProps>;
+    Content: Component<PopoverContentProps>;
+    Dialog: Component<PopoverDialogProps>;
+    Arrow: Component<PopoverArrowProps>;
+    Heading: Component<PopoverHeadingProps>;
+};
+export default Popover;
+export { PopoverRoot, PopoverTrigger, PopoverContent, PopoverDialog, PopoverArrow, PopoverHeading, };