@pathscale/ui 1.1.56 → 1.1.57

package/dist/components/toast/index.d.ts

@@ -1 +1 @@
-export { default, type ToastProps } from "./Toast";
+export { default, ToastRoot, ToastProvider, ToastContent, ToastIndicator, ToastTitle, ToastDescription, ToastActionButton, ToastCloseButton, ToastQueue, toast, toastQueue, DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, type ToastPlacement, type ToastVariant, type ToastActionProps, type ToastContentValue, type ToastQueueAddOptions, type ToastQueueItem, type ToastQueueOptions, type ToastRenderFn, type ToastRootProps, type ToastProviderProps, type ToastContentProps, type ToastIndicatorProps, type ToastTitleProps, type ToastDescriptionProps, type ToastActionButtonProps, type ToastCloseButtonProps, type HeroUIToastOptions, type ToastPromiseOptions, type ToastFunction, } from "./Toast";

package/dist/components/toast/index.js

@@ -1,3 +1,19 @@
 import * as __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__ from "./Toast.js";
+var __webpack_exports__DEFAULT_GAP = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.DEFAULT_GAP;
+var __webpack_exports__DEFAULT_MAX_VISIBLE_TOAST = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.DEFAULT_MAX_VISIBLE_TOAST;
+var __webpack_exports__DEFAULT_SCALE_FACTOR = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.DEFAULT_SCALE_FACTOR;
+var __webpack_exports__DEFAULT_TOAST_TIMEOUT = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.DEFAULT_TOAST_TIMEOUT;
+var __webpack_exports__DEFAULT_TOAST_WIDTH = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.DEFAULT_TOAST_WIDTH;
+var __webpack_exports__ToastActionButton = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastActionButton;
+var __webpack_exports__ToastCloseButton = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastCloseButton;
+var __webpack_exports__ToastContent = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastContent;
+var __webpack_exports__ToastDescription = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastDescription;
+var __webpack_exports__ToastIndicator = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastIndicator;
+var __webpack_exports__ToastProvider = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastProvider;
+var __webpack_exports__ToastQueue = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastQueue;
+var __webpack_exports__ToastRoot = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastRoot;
+var __webpack_exports__ToastTitle = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.ToastTitle;
 var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__["default"];
-export { __webpack_exports__default as default };
+var __webpack_exports__toast = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.toast;
+var __webpack_exports__toastQueue = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__.toastQueue;
+export { __webpack_exports__DEFAULT_GAP as DEFAULT_GAP, __webpack_exports__DEFAULT_MAX_VISIBLE_TOAST as DEFAULT_MAX_VISIBLE_TOAST, __webpack_exports__DEFAULT_SCALE_FACTOR as DEFAULT_SCALE_FACTOR, __webpack_exports__DEFAULT_TOAST_TIMEOUT as DEFAULT_TOAST_TIMEOUT, __webpack_exports__DEFAULT_TOAST_WIDTH as DEFAULT_TOAST_WIDTH, __webpack_exports__ToastActionButton as ToastActionButton, __webpack_exports__ToastCloseButton as ToastCloseButton, __webpack_exports__ToastContent as ToastContent, __webpack_exports__ToastDescription as ToastDescription, __webpack_exports__ToastIndicator as ToastIndicator, __webpack_exports__ToastProvider as ToastProvider, __webpack_exports__ToastQueue as ToastQueue, __webpack_exports__ToastRoot as ToastRoot, __webpack_exports__ToastTitle as ToastTitle, __webpack_exports__default as default, __webpack_exports__toast as toast, __webpack_exports__toastQueue as toastQueue };

package/dist/components/toggle/Toggle.classes.d.ts

@@ -0,0 +1,26 @@
+export declare const CLASSES: {
+    readonly base: "toggle";
+    readonly slot: {
+        readonly input: "toggle__input";
+        readonly control: "toggle__control";
+        readonly thumb: "toggle__thumb";
+        readonly icon: "toggle__icon";
+        readonly content: "toggle__content";
+        readonly description: "toggle__description";
+    };
+    readonly color: {
+        readonly default: "toggle--default";
+        readonly accent: "toggle--accent";
+        readonly success: "toggle--success";
+        readonly warning: "toggle--warning";
+        readonly danger: "toggle--danger";
+    };
+    readonly size: {
+        readonly sm: "toggle--sm";
+        readonly md: "toggle--md";
+        readonly lg: "toggle--lg";
+    };
+    readonly flag: {
+        readonly disabled: "toggle--disabled";
+    };
+};

package/dist/components/toggle/Toggle.classes.js

@@ -0,0 +1,27 @@
+const CLASSES = {
+    base: "toggle",
+    slot: {
+        input: "toggle__input",
+        control: "toggle__control",
+        thumb: "toggle__thumb",
+        icon: "toggle__icon",
+        content: "toggle__content",
+        description: "toggle__description"
+    },
+    color: {
+        default: "toggle--default",
+        accent: "toggle--accent",
+        success: "toggle--success",
+        warning: "toggle--warning",
+        danger: "toggle--danger"
+    },
+    size: {
+        sm: "toggle--sm",
+        md: "toggle--md",
+        lg: "toggle--lg"
+    },
+    flag: {
+        disabled: "toggle--disabled"
+    }
+};
+export { CLASSES };

package/dist/components/toggle/Toggle.css

@@ -14,6 +14,12 @@
     --switch-control-bg-pressed: var(--switch-control-bg-hover);
     --switch-control-bg-checked: var(--color-accent);
     --switch-control-bg-checked-hover: color-mix(in oklab, var(--switch-control-bg-checked), #000 8%);
+    --switch-control-border: color-mix(in oklab, var(--color-base-content) 24%, transparent);
+    --switch-control-border-checked: color-mix(
+      in oklab,
+      var(--switch-control-bg-checked) 74%,
+      var(--color-base-content)
+    );
   }
 
   .toggle__input {
@@ -37,9 +43,11 @@
     border-radius: 9999px;
     height: 1.25rem;
     width: 2.5rem;
+    border: 1px solid var(--switch-control-border);
     background-color: var(--switch-control-bg);
     transition:
       background-color 250ms ease,
+      border-color 250ms ease,
       box-shadow 150ms ease;
   }
 
@@ -109,6 +117,7 @@
 
   .toggle[data-selected="true"] .toggle__control {
     background-color: var(--switch-control-bg-checked);
+    border-color: var(--switch-control-border-checked);
   }
 
   .toggle[data-selected="true"] .toggle__thumb {

package/dist/components/toggle/Toggle.js

@@ -2,24 +2,13 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Toggle.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)("<span class=toggle__icon data-slot=toggle-icon>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=toggle__description data-slot=description>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=toggle__content data-slot=toggle-content>"), _tmpl$5 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label data-slot=toggle><input><span class=toggle__control data-slot=toggle-control aria-hidden=true><span class=toggle__thumb data-slot=toggle-thumb>");
+import * as __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__ from "./Toggle.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span data-slot=label>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<label><input><span><span>");
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
-const TOGGLE_COLOR_CLASS = {
-    default: "toggle--default",
-    accent: "toggle--accent",
-    success: "toggle--success",
-    warning: "toggle--warning",
-    danger: "toggle--danger"
-};
-const TOGGLE_SIZE_CLASS = {
-    sm: "toggle--sm",
-    md: "toggle--md",
-    lg: "toggle--lg"
-};
-const Toggle = (props)=>{
+const Toggle_Toggle = (props)=>{
     const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
         "class",
         "className",
@@ -49,11 +38,30 @@ const Toggle = (props)=>{
         if (!isControlled()) setInternalSelected(event.currentTarget.checked);
     };
     return (()=>{
-        var _el$ = _tmpl$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.size[size()], __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.color[color()], isDisabled() && __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.flag.disabled, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "toggle",
+            get ["data-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            }
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
             type: "checkbox",
-            role: "switch",
-            class: "toggle__input",
+            role: "switch"
+        }, ()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.slot.input
+            }), {
             "data-slot": "toggle-input",
             get checked () {
                 return isSelected();
@@ -63,12 +71,28 @@ const Toggle = (props)=>{
             },
             onChange: handleChange
         }), false, false);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.slot.control
+            }), {
+            "data-slot": "toggle-control",
+            "aria-hidden": "true"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                class: __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.slot.thumb
+            }), {
+            "data-slot": "toggle-thumb"
+        }), false, true);
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
             get when () {
                 return local.icon;
             },
             get children () {
                 var _el$5 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.slot.icon
+                    }), {
+                    "data-slot": "toggle-icon"
+                }), false, true);
                 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$5, ()=>local.icon);
                 return _el$5;
             }
@@ -78,7 +102,12 @@ const Toggle = (props)=>{
                 return hasContent();
             },
             get children () {
-                var _el$6 = _tmpl$4();
+                var _el$6 = _tmpl$();
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                        class: __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.slot.content
+                    }), {
+                    "data-slot": "toggle-content"
+                }), 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__.Show, {
                     get when () {
                         return local.children;
@@ -94,7 +123,12 @@ const Toggle = (props)=>{
                         return local.description;
                     },
                     get children () {
-                        var _el$8 = _tmpl$3();
+                        var _el$8 = _tmpl$();
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                                class: __WEBPACK_EXTERNAL_MODULE__Toggle_classes_js_44b2e8d2__.CLASSES.slot.description
+                            }), {
+                            "data-slot": "description"
+                        }), false, true);
                         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.description);
                         return _el$8;
                     }
@@ -102,23 +136,8 @@ const Toggle = (props)=>{
                 return _el$6;
             }
         }), null);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-            var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("toggle", TOGGLE_SIZE_CLASS[size()], TOGGLE_COLOR_CLASS[color()], isDisabled() && "toggle--disabled", local.class, local.className), _v$2 = local.dataTheme, _v$3 = isSelected() ? "true" : "false", _v$4 = isDisabled() ? "true" : "false", _v$5 = isDisabled() ? "true" : "false";
-            _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
-            _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
-            _v$3 !== _p$.a && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-selected", _p$.a = _v$3);
-            _v$4 !== _p$.o && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-disabled", _p$.o = _v$4);
-            _v$5 !== _p$.i && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "aria-disabled", _p$.i = _v$5);
-            return _p$;
-        }, {
-            e: void 0,
-            t: void 0,
-            a: void 0,
-            o: void 0,
-            i: void 0
-        });
         return _el$;
     })();
 };
-const toggle_Toggle = Toggle;
-export { toggle_Toggle as default };
+const Toggle = Toggle_Toggle;
+export { Toggle as default };

package/dist/components/toolbar/Toolbar.classes.d.ts

@@ -0,0 +1,10 @@
+export declare const CLASSES: {
+    readonly base: "toolbar";
+    readonly orientation: {
+        readonly horizontal: "toolbar--horizontal";
+        readonly vertical: "toolbar--vertical";
+    };
+    readonly flag: {
+        readonly attached: "toolbar--attached";
+    };
+};

package/dist/components/toolbar/Toolbar.classes.js

@@ -0,0 +1,11 @@
+const CLASSES = {
+    base: "toolbar",
+    orientation: {
+        horizontal: "toolbar--horizontal",
+        vertical: "toolbar--vertical"
+    },
+    flag: {
+        attached: "toolbar--attached"
+    }
+};
+export { CLASSES };

package/dist/components/toolbar/Toolbar.css

@@ -0,0 +1,55 @@
+@layer components {
+  .toolbar {
+    display: grid;
+    width: fit-content;
+    grid-auto-flow: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .toolbar--horizontal {
+    grid-auto-flow: column;
+    align-items: center;
+  }
+
+  .toolbar--vertical {
+    grid-auto-flow: row;
+    align-items: flex-start;
+    justify-items: flex-start;
+  }
+
+  .toolbar--attached {
+    border-radius: 9999px;
+    background-color: var(--color-surface, var(--color-base-100));
+    padding: 0.25rem;
+    box-shadow: var(--shadow-overlay, 0 12px 28px color-mix(in oklab, black 12%, transparent));
+  }
+
+  .toolbar [data-slot="separator"][data-orientation="vertical"] {
+    height: 50%;
+    align-self: center;
+  }
+
+  .toolbar [data-slot="separator"][data-orientation="horizontal"] {
+    width: 50%;
+    justify-self: center;
+    align-self: center;
+  }
+
+  .toolbar--horizontal > [data-slot="separator"] {
+    width: 1px;
+    min-height: 1rem;
+    height: 50%;
+    align-self: center;
+    justify-self: center;
+  }
+
+  .toolbar--vertical > [data-slot="separator"] {
+    width: 50%;
+    min-height: 1px;
+    height: 1px;
+    align-self: center;
+    justify-self: center;
+  }
+}
+

package/dist/components/toolbar/Toolbar.d.ts

@@ -0,0 +1,15 @@
+import "./Toolbar.css";
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ToolbarOrientation = "horizontal" | "vertical";
+export type ToolbarRootProps = IComponentBaseProps & JSX.HTMLAttributes<HTMLDivElement> & {
+    orientation?: ToolbarOrientation;
+    isAttached?: boolean;
+};
+declare const ToolbarRoot: Component<ToolbarRootProps>;
+declare const Toolbar: Component<ToolbarRootProps> & {
+    Root: Component<ToolbarRootProps>;
+};
+export default Toolbar;
+export { Toolbar, ToolbarRoot };
+export type { ToolbarRootProps as ToolbarProps };

package/dist/components/toolbar/Toolbar.js

@@ -0,0 +1,96 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./Toolbar.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__Toolbar_classes_js_40c784f6__ from "./Toolbar.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const FOCUSABLE_SELECTOR = 'button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), [contenteditable="true"]';
+const isFocusableElement = (element)=>{
+    if ("true" === element.getAttribute("aria-disabled")) return false;
+    return !element.hasAttribute("disabled");
+};
+const isTypingContext = (target)=>{
+    if (!(target instanceof HTMLElement)) return false;
+    const tag = target.tagName.toLowerCase();
+    if ("input" === tag || "textarea" === tag || "select" === tag) return true;
+    return "true" === target.getAttribute("contenteditable");
+};
+const getFocusableElements = (root)=>Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(isFocusableElement);
+const ToolbarRoot = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "orientation",
+        "isAttached",
+        "onKeyDown",
+        "role",
+        "ref"
+    ]);
+    let rootRef;
+    const orientation = ()=>local.orientation ?? "horizontal";
+    const handleKeyDown = (event)=>{
+        if ("function" == typeof local.onKeyDown) local.onKeyDown(event);
+        if (event.defaultPrevented) return;
+        if (isTypingContext(event.target)) return;
+        const currentRoot = rootRef;
+        if (!currentRoot) return;
+        const isVertical = "vertical" === orientation();
+        const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
+        const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
+        const isMoveKey = event.key === nextKey || event.key === prevKey;
+        const isHomeEndKey = "Home" === event.key || "End" === event.key;
+        if (!isMoveKey && !isHomeEndKey) return;
+        const focusable = getFocusableElements(currentRoot);
+        if (0 === focusable.length) return;
+        const activeElement = document.activeElement;
+        const currentIndex = activeElement ? focusable.indexOf(activeElement) : -1;
+        let nextIndex = currentIndex;
+        if ("Home" === event.key) nextIndex = 0;
+        else if ("End" === event.key) nextIndex = focusable.length - 1;
+        else if (-1 === currentIndex) nextIndex = event.key === prevKey ? focusable.length - 1 : 0;
+        else {
+            const step = event.key === nextKey ? 1 : -1;
+            nextIndex = (currentIndex + step + focusable.length) % focusable.length;
+        }
+        event.preventDefault();
+        focusable[nextIndex]?.focus();
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+            rootRef = el;
+            if ("function" == typeof local.ref) local.ref(el);
+        }, _el$);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get role () {
+                return local.role ?? "toolbar";
+            },
+            get ["aria-orientation"] () {
+                return orientation();
+            },
+            "data-slot": "toolbar",
+            get ["data-orientation"] () {
+                return orientation();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            onKeyDown: handleKeyDown
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Toolbar_classes_js_40c784f6__.CLASSES.base, __WEBPACK_EXTERNAL_MODULE__Toolbar_classes_js_40c784f6__.CLASSES.orientation[orientation()], local.isAttached && __WEBPACK_EXTERNAL_MODULE__Toolbar_classes_js_40c784f6__.CLASSES.flag.attached, local.class, local.className)
+            })), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const Toolbar = Object.assign(ToolbarRoot, {
+    Root: ToolbarRoot
+});
+const toolbar_Toolbar = Toolbar;
+export { Toolbar, ToolbarRoot, toolbar_Toolbar as default };

package/dist/components/toolbar/index.d.ts

@@ -0,0 +1 @@
+export { default, Toolbar, ToolbarRoot, type ToolbarProps, type ToolbarRootProps, type ToolbarOrientation, } from "./Toolbar";

package/dist/components/toolbar/index.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Toolbar_js_4fa4486a__ from "./Toolbar.js";
+var __webpack_exports__Toolbar = __WEBPACK_EXTERNAL_MODULE__Toolbar_js_4fa4486a__.Toolbar;
+var __webpack_exports__ToolbarRoot = __WEBPACK_EXTERNAL_MODULE__Toolbar_js_4fa4486a__.ToolbarRoot;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Toolbar_js_4fa4486a__["default"];
+export { __webpack_exports__Toolbar as Toolbar, __webpack_exports__ToolbarRoot as ToolbarRoot, __webpack_exports__default as default };

package/dist/components/tooltip/Tooltip.classes.d.ts

@@ -0,0 +1,8 @@
+export declare const CLASSES: {
+    readonly base: "tooltip";
+    readonly slot: {
+        readonly trigger: "tooltip__trigger";
+        readonly content: "tooltip__content";
+        readonly arrow: "tooltip__arrow";
+    };
+};

package/dist/components/tooltip/Tooltip.classes.js

@@ -0,0 +1,9 @@
+const CLASSES = {
+    base: "tooltip",
+    slot: {
+        trigger: "tooltip__trigger",
+        content: "tooltip__content",
+        arrow: "tooltip__arrow"
+    }
+};
+export { CLASSES };

package/dist/components/tooltip/Tooltip.js

@@ -2,7 +2,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web
 import "./Tooltip.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)("<span data-slot=tooltip-root>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=tooltip-arrow-svg height=12 viewBox="0 0 12 12"width=12 xmlns=http://www.w3.org/2000/svg><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+import * as __WEBPACK_EXTERNAL_MODULE__Tooltip_classes_js_59536676__ from "./Tooltip.classes.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<svg aria-hidden=true data-slot=tooltip-arrow-svg height=12 viewBox="0 0 12 12"width=12 xmlns=http://www.w3.org/2000/svg><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>');
 const TooltipContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
 const useTooltipContext = ()=>{
     const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TooltipContext);
@@ -44,18 +45,18 @@ const TooltipRoot = (props)=>{
         value: ctx,
         get children () {
             var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
+                    class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tooltip_classes_js_59536676__.CLASSES.base, local.class, local.className)
+                }), {
+                "data-slot": "tooltip-root",
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
             (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
-                var _v$ = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tooltip", local.class, local.className), _v$2 = local.dataTheme, _v$3 = local.style;
-                _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, _p$.e = _v$);
-                _v$2 !== _p$.t && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.setAttribute)(_el$, "data-theme", _p$.t = _v$2);
-                _p$.a = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$3, _p$.a);
-                return _p$;
-            }, {
-                e: void 0,
-                t: void 0,
-                a: void 0
-            });
             return _el$;
         }
     });
@@ -100,10 +101,9 @@ const TooltipTrigger = (props)=>{
     return (()=>{
         var _el$2 = _tmpl$2();
         (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>ctx.setTriggerRef(el), _el$2);
-        (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)("tooltip__trigger", 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__Tooltip_classes_js_59536676__.CLASSES.slot.trigger, local.class, local.className)
+            }), {
             "data-slot": "tooltip-trigger",
             get ["data-theme"] () {
                 return local.dataTheme;
@@ -132,10 +132,10 @@ const TooltipContent = (props)=>{
     return (()=>{
         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, {
-            role: "tooltip",
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tooltip__content", local.class, local.className);
-            },
+            role: "tooltip"
+        }, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tooltip_classes_js_59536676__.CLASSES.slot.content, local.class, local.className)
+            }), {
             "data-slot": "tooltip-content",
             get ["data-placement"] () {
                 return ctx.placement();
@@ -165,11 +165,10 @@ const TooltipArrow = (props)=>{
     const ctx = useTooltipContext();
     const defaultArrow = _tmpl$3();
     return (()=>{
-        var _el$5 = _tmpl$4();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["class"] () {
-                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("tooltip__arrow", local.class, local.className);
-            },
+        var _el$5 = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tooltip_classes_js_59536676__.CLASSES.slot.arrow, local.class, local.className)
+            }), {
             "data-slot": "tooltip-arrow",
             get ["data-placement"] () {
                 return ctx.placement();

package/dist/components/utils.d.ts

@@ -1,9 +1,9 @@
-import { type JSX } from "solid-js";
+import type { JSX } from "solid-js";
 import type { ResponsiveProp } from "./types";
+export { useDesktop } from "../hooks/layout";
 export declare function wrapWithElementIfInvalid({ node, wrapper, className, }: {
     node: JSX.Element | string | number | null | undefined;
     wrapper?: keyof JSX.IntrinsicElements;
     className?: string;
 }): JSX.Element;
 export declare function mapResponsiveProp<T extends string | boolean>(prop: ResponsiveProp<T> | undefined, classMap: Record<string, string>): string[];
-export declare function useDesktop(breakpoint?: number): import("solid-js").Accessor<boolean>;

package/dist/components/utils.js

@@ -1,16 +1,18 @@
 import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
 import * as __WEBPACK_EXTERNAL_MODULE__types_js_7eec16d2__ from "./types.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_layout_index_js_ad74a5db__ from "../hooks/layout/index.js";
 function isJSXElement(node) {
     return "object" == typeof node && null !== node;
 }
 function wrapWithElementIfInvalid({ node, wrapper = "div", className = "" }) {
     null == node || "string" == typeof node || "number" == typeof node || isJSXElement(node);
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, {
-        component: wrapper,
-        class: className,
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: wrapper
+    }, {
+        class: className
+    }, {
         children: node
-    });
+    }));
 }
 function mapResponsiveProp(prop, classMap) {
     if (void 0 === prop) return [];
@@ -28,19 +30,5 @@ function mapResponsiveProp(prop, classMap) {
         ];
     });
 }
-function useDesktop(breakpoint = 1024) {
-    const [isDesktop, setIsDesktop] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const checkIfDesktop = ()=>{
-        const width = window.innerWidth;
-        setIsDesktop(width >= breakpoint);
-    };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
-        checkIfDesktop();
-        window.addEventListener("resize", checkIfDesktop);
-    });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
-        window.removeEventListener("resize", checkIfDesktop);
-    });
-    return isDesktop;
-}
-export { mapResponsiveProp, useDesktop, wrapWithElementIfInvalid };
+var __webpack_exports__useDesktop = __WEBPACK_EXTERNAL_MODULE__hooks_layout_index_js_ad74a5db__.useDesktop;
+export { mapResponsiveProp, wrapWithElementIfInvalid, __webpack_exports__useDesktop as useDesktop };

package/dist/components/video-preview/VideoPreview.classes.d.ts

@@ -0,0 +1,3 @@
+export declare const CLASSES: {
+    readonly mirror: "-scale-x-100";
+};

package/dist/components/video-preview/VideoPreview.classes.js

@@ -0,0 +1,4 @@
+const CLASSES = {
+    mirror: "-scale-x-100"
+};
+export { CLASSES };