@pathscale/ui 1.2.6 → 1.2.8

package/dist/components/toolbar/Toolbar.css

@@ -1,55 +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;
-  }
-}
-
+@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.js

@@ -1,9 +1,9 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import { insert, mergeProps, spread, template, use } 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>");
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES } from "./Toolbar.classes.js";
+var _tmpl$ = /*#__PURE__*/ 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;
@@ -17,7 +17,7 @@ const isTypingContext = (target)=>{
 };
 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, [
+    const [local, others] = splitProps(props, [
         "children",
         "class",
         "className",
@@ -60,11 +60,11 @@ const ToolbarRoot = (props)=>{
     };
     return (()=>{
         var _el$ = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+        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, {
+        spread(_el$, mergeProps(others, {
             get role () {
                 return local.role ?? "toolbar";
             },
@@ -83,9 +83,9 @@ const ToolbarRoot = (props)=>{
             },
             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)
+                class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], local.isAttached && CLASSES.flag.attached, local.class, local.className)
             })), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        insert(_el$, ()=>local.children);
         return _el$;
     })();
 };
@@ -93,4 +93,5 @@ const Toolbar = Object.assign(ToolbarRoot, {
     Root: ToolbarRoot
 });
 const toolbar_Toolbar = Toolbar;
-export { Toolbar, ToolbarRoot, toolbar_Toolbar as default };
+export default toolbar_Toolbar;
+export { Toolbar, ToolbarRoot };

package/dist/components/toolbar/index.js

@@ -1,5 +1 @@
-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 };
+export { Toolbar, ToolbarRoot, default } from "./Toolbar.js";

package/dist/components/tooltip/Tooltip.css

@@ -1,153 +1,153 @@
-@layer components {
-  /* -------------------------------------------------------------------------------------------------
-   * Root
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip {
-    display: inline-flex;
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Trigger
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip__trigger {
-    display: inline-flex;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  .tooltip__trigger:focus-visible,
-  .tooltip__trigger[data-focus-visible="true"] {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-    border-radius: var(--radius-field, 0.375rem);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Content
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip__content {
-    position: fixed;
-    z-index: 9999;
-    max-width: 20rem;
-    border-radius: var(--radius-field, 0.5rem);
-    padding: 0.25rem 0.5rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-    white-space: normal;
-    word-break: break-word;
-    text-align: center;
-    width: max-content;
-    pointer-events: none;
-    background-color: var(--color-neutral);
-    color: var(--color-neutral-content);
-    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px
-      oklch(0% 0 0 / 0.1);
-
-    opacity: 0;
-    overflow: visible;
-    transition: opacity 150ms ease, transform 150ms ease;
-  }
-
-  /* Visible state */
-  .tooltip__content[data-open="true"] {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  /* ----- Placement: top (default) ----- */
-  .tooltip__content[data-placement="top"] {
-    transform: translateY(0.25rem);
-    transform-origin: bottom;
-  }
-
-  .tooltip__content[data-placement="top"][data-open="true"] {
-    transform: translateY(0);
-  }
-
-  /* ----- Placement: bottom ----- */
-  .tooltip__content[data-placement="bottom"] {
-    transform: translateY(-0.25rem);
-    transform-origin: top;
-  }
-
-  .tooltip__content[data-placement="bottom"][data-open="true"] {
-    transform: translateY(0);
-  }
-
-  /* ----- Placement: left ----- */
-  .tooltip__content[data-placement="left"] {
-    transform: translateX(0.25rem);
-    transform-origin: right;
-  }
-
-  .tooltip__content[data-placement="left"][data-open="true"] {
-    transform: translateX(0);
-  }
-
-  /* ----- Placement: right ----- */
-  .tooltip__content[data-placement="right"] {
-    transform: translateX(-0.25rem);
-    transform-origin: left;
-  }
-
-  .tooltip__content[data-placement="right"][data-open="true"] {
-    transform: translateX(0);
-  }
-
-  /* ----- Reduced motion ----- */
-  @media (prefers-reduced-motion: reduce) {
-    .tooltip__content {
-      transition: none;
-    }
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Arrow
-   * Arrow lives inside .tooltip__content, so it positions relative to the content bubble.
-   * The default SVG (viewBox 0 0 12 12, path "M0 0C5.48483 8 6.5 8 12 0Z") points downward.
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip__arrow {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-    color: var(--color-neutral);
-  }
-
-  /* Arrow placement: top → content is above trigger, arrow hangs below content pointing down */
-  .tooltip__arrow[data-placement="top"] {
-    top: calc(100% - 1px);
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  /* Arrow placement: bottom → content is below trigger, arrow sits above content pointing up */
-  .tooltip__arrow[data-placement="bottom"] {
-    bottom: calc(100% - 1px);
-    left: 50%;
-    transform: translateX(-50%) rotate(180deg);
-  }
-
-  /* Arrow placement: left → content is left of trigger, arrow at right edge pointing right */
-  .tooltip__arrow[data-placement="left"] {
-    left: calc(100% - 1px);
-    top: 50%;
-    transform: translateY(-50%) rotate(-90deg);
-  }
-
-  /* Arrow placement: right → content is right of trigger, arrow at left edge pointing left */
-  .tooltip__arrow[data-placement="right"] {
-    right: calc(100% - 1px);
-    top: 50%;
-    transform: translateY(-50%) rotate(90deg);
-  }
-
-  /* -------------------------------------------------------------------------------------------------
-   * Disabled state
-   * -----------------------------------------------------------------------------------------------*/
-  .tooltip[data-disabled="true"] .tooltip__trigger {
-    cursor: not-allowed;
-    opacity: 0.55;
-  }
-}
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Root
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip {
+    display: inline-flex;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__trigger {
+    display: inline-flex;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .tooltip__trigger:focus-visible,
+  .tooltip__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.375rem);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__content {
+    position: fixed;
+    z-index: 9999;
+    max-width: 20rem;
+    border-radius: var(--radius-field, 0.5rem);
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    white-space: normal;
+    word-break: break-word;
+    text-align: center;
+    width: max-content;
+    pointer-events: none;
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    box-shadow: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px
+      oklch(0% 0 0 / 0.1);
+
+    opacity: 0;
+    overflow: visible;
+    transition: opacity 150ms ease, transform 150ms ease;
+  }
+
+  /* Visible state */
+  .tooltip__content[data-open="true"] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  /* ----- Placement: top (default) ----- */
+  .tooltip__content[data-placement="top"] {
+    transform: translateY(0.25rem);
+    transform-origin: bottom;
+  }
+
+  .tooltip__content[data-placement="top"][data-open="true"] {
+    transform: translateY(0);
+  }
+
+  /* ----- Placement: bottom ----- */
+  .tooltip__content[data-placement="bottom"] {
+    transform: translateY(-0.25rem);
+    transform-origin: top;
+  }
+
+  .tooltip__content[data-placement="bottom"][data-open="true"] {
+    transform: translateY(0);
+  }
+
+  /* ----- Placement: left ----- */
+  .tooltip__content[data-placement="left"] {
+    transform: translateX(0.25rem);
+    transform-origin: right;
+  }
+
+  .tooltip__content[data-placement="left"][data-open="true"] {
+    transform: translateX(0);
+  }
+
+  /* ----- Placement: right ----- */
+  .tooltip__content[data-placement="right"] {
+    transform: translateX(-0.25rem);
+    transform-origin: left;
+  }
+
+  .tooltip__content[data-placement="right"][data-open="true"] {
+    transform: translateX(0);
+  }
+
+  /* ----- Reduced motion ----- */
+  @media (prefers-reduced-motion: reduce) {
+    .tooltip__content {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Arrow
+   * Arrow lives inside .tooltip__content, so it positions relative to the content bubble.
+   * The default SVG (viewBox 0 0 12 12, path "M0 0C5.48483 8 6.5 8 12 0Z") points downward.
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip__arrow {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    color: var(--color-neutral);
+  }
+
+  /* Arrow placement: top → content is above trigger, arrow hangs below content pointing down */
+  .tooltip__arrow[data-placement="top"] {
+    top: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  /* Arrow placement: bottom → content is below trigger, arrow sits above content pointing up */
+  .tooltip__arrow[data-placement="bottom"] {
+    bottom: calc(100% - 1px);
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+  }
+
+  /* Arrow placement: left → content is left of trigger, arrow at right edge pointing right */
+  .tooltip__arrow[data-placement="left"] {
+    left: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(-90deg);
+  }
+
+  /* Arrow placement: right → content is right of trigger, arrow at left edge pointing left */
+  .tooltip__arrow[data-placement="right"] {
+    right: calc(100% - 1px);
+    top: 50%;
+    transform: translateY(-50%) rotate(90deg);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Disabled state
+   * -----------------------------------------------------------------------------------------------*/
+  .tooltip[data-disabled="true"] .tooltip__trigger {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+}