@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/divider/Divider.styles.js

@@ -0,0 +1,71 @@
+import * as __WEBPACK_EXTERNAL_MODULE__lib_style_index_js_d7884cc7__ from "../../lib/style/index.js";
+const dividerStyles = (0, __WEBPACK_EXTERNAL_MODULE__lib_style_index_js_d7884cc7__.cva)("flex items-center whitespace-nowrap relative", {
+    variants: {
+        horizontal: {
+            true: "flex-col h-auto w-4 mx-4 my-0 min-h-16",
+            false: "flex-row h-4 w-auto mx-0 my-4"
+        },
+        color: {
+            default: "before:bg-base-content/30 after:bg-base-content/30",
+            neutral: "before:bg-neutral after:bg-neutral",
+            primary: "before:bg-primary after:bg-primary",
+            secondary: "before:bg-secondary after:bg-secondary",
+            accent: "before:bg-accent after:bg-accent",
+            success: "before:bg-success after:bg-success",
+            warning: "before:bg-warning after:bg-warning",
+            info: "before:bg-info after:bg-info",
+            error: "before:bg-error after:bg-error"
+        },
+        position: {
+            center: "",
+            start: "before:hidden",
+            end: "after:hidden"
+        }
+    },
+    compoundVariants: [
+        {
+            horizontal: false,
+            class: "before:content-[''] before:flex-1 before:h-0.5 after:content-[''] after:flex-1 after:h-0.5"
+        },
+        {
+            horizontal: false,
+            position: "center",
+            class: "[&:not(:empty)]:before:mr-4 [&:not(:empty)]:after:ml-4"
+        },
+        {
+            horizontal: false,
+            position: "start",
+            class: "[&:not(:empty)]:after:ml-4"
+        },
+        {
+            horizontal: false,
+            position: "end",
+            class: "[&:not(:empty)]:before:mr-4"
+        },
+        {
+            horizontal: true,
+            class: "before:content-[''] before:flex-1 before:w-0.5 before:h-auto after:content-[''] after:flex-1 after:w-0.5 after:h-auto"
+        },
+        {
+            horizontal: true,
+            position: "center",
+            class: "[&:not(:empty)]:before:mb-4 [&:not(:empty)]:after:mt-4"
+        },
+        {
+            horizontal: true,
+            position: "start",
+            class: "[&:not(:empty)]:after:mt-4"
+        },
+        {
+            horizontal: true,
+            position: "end",
+            class: "[&:not(:empty)]:before:mb-4"
+        }
+    ],
+    defaultVariants: {
+        horizontal: false,
+        color: "default",
+        position: "center"
+    }
+});
+export { dividerStyles };

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

@@ -1,2 +1,3 @@
 import Divider from "./Divider";
+export type { DividerProps } from "./Divider";
 export default Divider;

package/dist/components/divider/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Divider_js_079b7198__ from "./Divider.js";
+const divider = __WEBPACK_EXTERNAL_MODULE__Divider_js_079b7198__["default"];
+export { divider as default };

package/dist/components/dock/Dock.d.ts

@@ -1,3 +1,4 @@
+import "./dock.css";
 import type { JSX } from "solid-js";
 import type { IComponentBaseProps, ComponentSize } from "../types";
 import { type DockItemProps as ItemProps } from "./DockItem";

package/dist/components/dock/Dock.js

@@ -0,0 +1,40 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./dock.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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__DockItem_js_2cb78296__ from "./DockItem.js";
+import * as __WEBPACK_EXTERNAL_MODULE__DockLabel_js_3671a1fc__ from "./DockLabel.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const Dock_Dock = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "children"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dock", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        "dock-lg": "lg" === local.size,
+        "dock-md": "md" === local.size,
+        "dock-sm": "sm" === local.size,
+        "dock-xs": "xs" === local.size
+    }), local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "navigation",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            class: classes
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const Dock = Object.assign(Dock_Dock, {
+    Item: __WEBPACK_EXTERNAL_MODULE__DockItem_js_2cb78296__["default"],
+    Label: __WEBPACK_EXTERNAL_MODULE__DockLabel_js_3671a1fc__["default"]
+});
+export { Dock as default };

package/dist/components/dock/DockItem.js

@@ -0,0 +1,45 @@
+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_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>");
+const DockItem_DockItem = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "active",
+        "class",
+        "className",
+        "color",
+        "dataTheme",
+        "disabled"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+        "text-neutral": "neutral" === local.color,
+        "text-primary": "primary" === local.color,
+        "text-secondary": "secondary" === local.color,
+        "text-accent": "accent" === local.color,
+        "text-info": "info" === local.color,
+        "text-success": "success" === local.color,
+        "text-warning": "warning" === local.color,
+        "text-error": "error" === local.color,
+        "border-t-2 rounded-none": local.active,
+        active: local.active,
+        disabled: local.disabled
+    }));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get disabled () {
+                return local.disabled;
+            },
+            class: classes
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const DockItem = DockItem_DockItem;
+export { DockItem as default };

package/dist/components/dock/DockLabel.js

@@ -0,0 +1,22 @@
+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_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
+const DockLabel = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("dock-label", local.class, local.className);
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            class: classes
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const dock_DockLabel = DockLabel;
+export { dock_DockLabel as default };

package/dist/components/dock/dock.css

@@ -0,0 +1,147 @@
+@layer components {
+  .dock {
+      position: fixed;
+      right: calc(0.25rem * 0);
+      bottom: calc(0.25rem * 0);
+      left: calc(0.25rem * 0);
+      z-index: 1;
+      display: flex;
+      width: 100%;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-around;
+      background-color: var(--color-base-100);
+      padding: calc(0.25rem * 2);
+      color: currentcolor;
+      border-top: 0.5px solid var(--color-base-content);
+      height: 4rem;
+      height: calc(4rem + env(safe-area-inset-bottom));
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dock {
+      border-top: 0.5px solid color-mix(in oklab, var(--color-base-content) 5%, #0000);
+    }
+    }
+
+  .dock > * {
+      position: relative;
+      margin-bottom: calc(0.25rem * 2);
+      display: flex;
+      height: 100%;
+      max-width: calc(0.25rem * 32);
+      flex-shrink: 1;
+      flex-basis: 100%;
+      cursor: pointer;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1px;
+      border-radius: var(--radius-box);
+      background-color: transparent;
+      transition: opacity 0.2s ease-out;
+    }
+
+  @media (hover: hover) {
+    .dock > *:hover {
+      opacity: 80%;
+    }
+    }
+
+  .dock > *[aria-disabled="true"],
+    .dock > *[aria-disabled="true"]:hover,
+    .dock > *[disabled],
+    .dock > *[disabled]:hover {
+      pointer-events: none;
+      color: var(--color-base-content);
+      opacity: 100%;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dock > *[aria-disabled="true"],
+    .dock > *[aria-disabled="true"]:hover,
+    .dock > *[disabled],
+    .dock > *[disabled]:hover {
+      color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    }
+    }
+
+  .dock > * .dock-label {
+      font-size: 0.6875rem;
+    }
+
+  .dock > *:after {
+      content: "";
+      position: absolute;
+      height: calc(0.25rem * 1);
+      width: calc(0.25rem * 6);
+      border-radius: calc(infinity * 1px);
+      background-color: transparent;
+      bottom: 0.2rem;
+      border-top: 3px solid transparent;
+      transition: background-color 0.1s ease-out, text-color 0.1s ease-out, width 0.1s ease-out;
+    }
+
+  .dock-sm {
+      height: calc(0.25rem * 14);
+      height: 3.5rem;
+      height: calc(3.5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-sm .dock-active:after {
+      bottom: -0.1rem;
+    }
+
+  .dock-sm .dock-label {
+      font-size: 0.625rem;
+    }
+
+  .dock-lg {
+      height: 4.5rem;
+      height: calc(4.5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-lg .dock-active:after {
+      bottom: 0.4rem;
+    }
+
+  .dock-lg .dock-label {
+      font-size: 0.6875rem;
+    }
+
+  .dock-xl {
+      height: 5rem;
+      height: calc(5rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-xl .dock-active:after {
+      bottom: 0.4rem;
+    }
+
+  .dock-xl .dock-label {
+      font-size: 0.75rem;
+    }
+
+  .dock-xs {
+      height: 3rem;
+      height: calc(3rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-xs .dock-active:after {
+      bottom: -0.1rem;
+    }
+
+  .dock-xs .dock-label {
+      font-size: 0.625rem;
+    }
+
+  .dock-md {
+      height: 4rem;
+      height: calc(4rem + env(safe-area-inset-bottom));
+    }
+
+  .dock-md .dock-label {
+      font-size: 0.6875rem;
+    }
+}

package/dist/components/dock/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Dock_js_89995c14__ from "./Dock.js";
+const dock = __WEBPACK_EXTERNAL_MODULE__Dock_js_89995c14__["default"];
+export { dock as default };

package/dist/components/drawer/Drawer.css

@@ -0,0 +1,305 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__trigger {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    border: none;
+    background: none;
+    padding: 0;
+    font: inherit;
+    color: inherit;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .drawer__trigger:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+    border-radius: var(--radius-field, 0.375rem);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Backdrop
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    width: 100%;
+    height: 100vh;
+    height: 100dvh;
+    opacity: 1;
+    transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  .drawer__backdrop[data-entering="true"] {
+    opacity: 0;
+  }
+
+  .drawer__backdrop[data-exiting="true"] {
+    opacity: 0;
+    transition-duration: 200ms;
+  }
+
+  .drawer__backdrop--opaque {
+    background-color: oklch(0% 0 0 / 40%);
+  }
+
+  .drawer__backdrop--blur {
+    background-color: oklch(0% 0 0 / 40%);
+    backdrop-filter: blur(12px);
+  }
+
+  .drawer__backdrop--transparent {
+    background-color: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer__backdrop {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Content — positioning wrapper
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__content {
+    pointer-events: none;
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    height: 100vh;
+    height: 100dvh;
+  }
+
+  .drawer__content--bottom {
+    align-items: flex-end;
+  }
+
+  .drawer__content--top {
+    align-items: flex-start;
+  }
+
+  .drawer__content--left {
+    justify-content: flex-start;
+  }
+
+  .drawer__content--right {
+    justify-content: flex-end;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Dialog — the drawer panel
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__dialog {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    padding: 1.5rem;
+    pointer-events: auto;
+    outline: none;
+    box-shadow:
+      0 10px 15px -3px oklch(0% 0 0 / 0.1),
+      0 4px 6px -4px oklch(0% 0 0 / 0.1);
+
+    --drawer-enter-duration: 250ms;
+    --drawer-exit-duration: 200ms;
+    --drawer-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+    will-change: translate;
+    transition: translate var(--drawer-enter-duration) var(--drawer-ease);
+  }
+
+  [data-exiting="true"] .drawer__dialog {
+    transition-duration: var(--drawer-exit-duration);
+  }
+
+  /* Bottom/top: full width, auto height */
+  .drawer__dialog[data-placement="bottom"] {
+    width: 100%;
+    max-height: 85vh;
+    border-radius: 1rem 1rem 0 0;
+  }
+
+  .drawer__dialog[data-placement="top"] {
+    width: 100%;
+    max-height: 85vh;
+    border-radius: 0 0 1rem 1rem;
+  }
+
+  /* Left/right: fixed width, full height */
+  .drawer__dialog[data-placement="left"],
+  .drawer__dialog[data-placement="right"] {
+    height: 100%;
+    width: 20rem;
+    max-width: 85vw;
+    border-radius: 0;
+  }
+
+  @media (min-width: 640px) {
+    .drawer__dialog[data-placement="left"],
+    .drawer__dialog[data-placement="right"] {
+      width: 24rem;
+    }
+  }
+
+  /* Slide transitions — open state */
+  .drawer__content--left .drawer__dialog,
+  .drawer__content--right .drawer__dialog,
+  .drawer__content--top .drawer__dialog,
+  .drawer__content--bottom .drawer__dialog {
+    translate: 0 0;
+  }
+
+  /* Entering/exiting slide transforms */
+  .drawer__content--left[data-entering="true"] .drawer__dialog,
+  .drawer__content--left[data-exiting="true"] .drawer__dialog {
+    translate: -100% 0;
+  }
+
+  .drawer__content--right[data-entering="true"] .drawer__dialog,
+  .drawer__content--right[data-exiting="true"] .drawer__dialog {
+    translate: 100% 0;
+  }
+
+  .drawer__content--top[data-entering="true"] .drawer__dialog,
+  .drawer__content--top[data-exiting="true"] .drawer__dialog {
+    translate: 0 -100%;
+  }
+
+  .drawer__content--bottom[data-entering="true"] .drawer__dialog,
+  .drawer__content--bottom[data-exiting="true"] .drawer__dialog {
+    translate: 0 100%;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer__dialog {
+      transition: none;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Header
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__header {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    margin-bottom: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Heading
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__heading {
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 1.5;
+    color: var(--color-base-content);
+    margin: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Body
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__body {
+    min-height: 0;
+    flex: 1;
+    font-size: 0.875rem;
+    line-height: 1.43;
+    color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Footer
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 0;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Handle
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 0.5rem;
+  }
+
+  .drawer__handle > [data-slot="drawer-handle-bar"] {
+    height: 0.25rem;
+    width: 2.25rem;
+    border-radius: 9999px;
+    background-color: color-mix(in oklab, var(--color-base-content) 25%, transparent);
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Close Trigger
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__close-trigger {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    border: none;
+    background: none;
+    border-radius: var(--radius-field, 0.375rem);
+    cursor: pointer;
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    transition: color 150ms ease, background-color 150ms ease;
+    padding: 0;
+  }
+
+  .drawer__close-trigger:hover {
+    color: var(--color-base-content);
+    background-color: color-mix(in oklab, var(--color-base-content) 8%, transparent);
+  }
+
+  .drawer__close-trigger:focus-visible {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Element spacing
+   * -----------------------------------------------------------------------------------------------*/
+  .drawer__header + .drawer__body {
+    margin-top: 0.5rem;
+  }
+
+  .drawer__header + .drawer__footer {
+    margin-top: 1.25rem;
+  }
+
+  .drawer__body + .drawer__footer {
+    margin-top: 1.25rem;
+  }
+
+  .drawer__handle + .drawer__header {
+    margin-top: 0;
+  }
+
+  .drawer__handle + .drawer__body {
+    margin-top: 0;
+  }
+}