@pathscale/ui 0.1.1 → 1.2.1

package/dist/components/fileinput/FileInput.js

@@ -0,0 +1,51 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./input.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";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
+const FileInput_FileInput = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "size",
+        "color",
+        "bordered",
+        "dataTheme",
+        "class",
+        "className",
+        "style"
+    ]);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("file-input", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "file-input-xl": "xl" === local.size,
+            "file-input-lg": "lg" === local.size,
+            "file-input-md": "md" === local.size,
+            "file-input-sm": "sm" === local.size,
+            "file-input-xs": "xs" === local.size,
+            "file-input-primary": "primary" === local.color,
+            "file-input-secondary": "secondary" === local.color,
+            "file-input-accent": "accent" === local.color,
+            "file-input-ghost": "ghost" === local.color,
+            "file-input-info": "info" === local.color,
+            "file-input-success": "success" === local.color,
+            "file-input-warning": "warning" === local.color,
+            "file-input-error": "error" === local.color,
+            "file-input-bordered": local.bordered
+        })));
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "file",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const FileInput = FileInput_FileInput;
+export { FileInput as default };

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

@@ -1 +1 @@
-export { default } from "./FileInput";
+export { default, type FileInputProps } from "./FileInput";

package/dist/components/fileinput/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__FileInput_js_89a3ee0d__ from "./FileInput.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__FileInput_js_89a3ee0d__["default"];
+export { __webpack_exports__default as default };

package/dist/components/fileinput/input.css

@@ -0,0 +1,277 @@
+@layer components {
+  .input {
+      cursor: text;
+      border: var(--border) solid #0000;
+      position: relative;
+      display: inline-flex;
+      flex-shrink: 1;
+      appearance: none;
+      align-items: center;
+      gap: calc(0.25rem * 2);
+      background-color: var(--color-base-100);
+      padding-inline: calc(0.25rem * 3);
+      vertical-align: middle;
+      white-space: nowrap;
+      width: clamp(3rem, 20rem, 100%);
+      height: var(--size);
+      font-size: max(var(--font-size, 0.875rem), 0.875rem);
+      touch-action: manipulation;
+      border-start-start-radius: var(--join-ss, var(--radius-field));
+      border-start-end-radius: var(--join-se, var(--radius-field));
+      border-end-start-radius: var(--join-es, var(--radius-field));
+      border-end-end-radius: var(--join-ee, var(--radius-field));
+      border-color: var(--input-color);
+      box-shadow: 0 1px var(--input-color) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      --input-color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000) inset, 0 -1px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    }
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input {
+      --input-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    }
+    }
+
+  .input:where(input) {
+      display: inline-flex;
+    }
+
+  .input :where(input) {
+      display: inline-flex;
+      height: 100%;
+      width: 100%;
+      appearance: none;
+      background-color: transparent;
+      border: none;
+    }
+
+  .input :where(input):focus,
+    .input :where(input):focus-within {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .input :where(input):focus,
+    .input :where(input):focus-within {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .input :where(input[type="url"]),
+    .input :where(input[type="email"]) {
+      direction: ltr;
+    }
+
+  .input :where(input[type="date"]) {
+      display: inline-flex;
+    }
+
+  .input:focus,
+    .input:focus-within {
+      --input-color: var(--color-base-content);
+      box-shadow: 0 1px var(--input-color);
+      outline: 2px solid var(--input-color);
+      outline-offset: 2px;
+      isolation: isolate;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input:focus,
+    .input:focus-within {
+      box-shadow: 0 1px color-mix(in oklab, var(--input-color) calc(var(--depth) * 10%), #0000);
+    }
+    }
+
+  @media (pointer: coarse) {
+    @supports (-webkit-touch-callout: none) {
+    .input:focus,
+    .input:focus-within {
+      --font-size: 1rem;
+    }
+    }
+    }
+
+  .input:has(> input[disabled]),
+    .input:is(:disabled, [disabled]),
+    fieldset:disabled .input {
+      cursor: not-allowed;
+      border-color: var(--color-base-200);
+      background-color: var(--color-base-200);
+      color: var(--color-base-content);
+      box-shadow: none;
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input:has(> input[disabled]),
+    .input:is(:disabled, [disabled]),
+    fieldset:disabled .input {
+      color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
+    }
+    }
+
+  .input:has(> input[disabled])::placeholder,
+    .input:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .input::placeholder {
+      color: var(--color-base-content);
+    }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .input:has(> input[disabled])::placeholder,
+    .input:is(:disabled, [disabled])::placeholder,
+    fieldset:disabled .input::placeholder {
+      color: color-mix(in oklab, var(--color-base-content) 20%, transparent);
+    }
+    }
+
+  .input:has(> input[disabled]) > input[disabled] {
+      cursor: not-allowed;
+    }
+
+  .input::-webkit-date-and-time-value {
+      text-align: inherit;
+    }
+
+  .input[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input::-webkit-calendar-picker-indicator {
+      position: absolute;
+      inset-inline-end: 0.75em;
+    }
+
+  .input:has(> input[type="date"]) :where(input[type="date"]) {
+      display: inline-flex;
+      webkit-appearance: none;
+      appearance: none;
+    }
+
+  .input:has(> input[type="date"]) input[type="date"]::-webkit-calendar-picker-indicator {
+      position: absolute;
+      inset-inline-end: 0.75em;
+      width: 1em;
+      height: 1em;
+      cursor: pointer;
+    }
+
+  .input-lg {
+      --size: calc(var(--size-field, 0.25rem) * 12);
+      font-size: max(var(--font-size, 1.125rem), 1.125rem);
+    }
+
+  .input-lg[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-md {
+      --size: calc(var(--size-field, 0.25rem) * 10);
+      font-size: max(var(--font-size, 0.875rem), 0.875rem);
+    }
+
+  .input-md[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -3);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-sm {
+      --size: calc(var(--size-field, 0.25rem) * 8);
+      font-size: max(var(--font-size, 0.75rem), 0.75rem);
+    }
+
+  .input-sm[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -2);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-xl {
+      --size: calc(var(--size-field, 0.25rem) * 14);
+      font-size: max(var(--font-size, 1.375rem), 1.375rem);
+    }
+
+  .input-xl[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -4);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-xs {
+      --size: calc(var(--size-field, 0.25rem) * 6);
+      font-size: max(var(--font-size, 0.6875rem), 0.6875rem);
+    }
+
+  .input-xs[type="number"]::-webkit-inner-spin-button {
+      margin-block: calc(0.25rem * -1);
+      margin-inline-end: calc(0.25rem * -3);
+    }
+
+  .input-ghost {
+      background-color: transparent;
+      box-shadow: none;
+      border-color: #0000;
+    }
+
+  .input-ghost:focus,
+    .input-ghost:focus-within {
+      background-color: var(--color-base-100);
+      color: var(--color-base-content);
+      border-color: #0000;
+      box-shadow: none;
+    }
+
+  .input-accent,
+    .input-accent:focus,
+    .input-accent:focus-within {
+      --input-color: var(--color-accent);
+    }
+
+  .input-error,
+    .input-error:focus,
+    .input-error:focus-within {
+      --input-color: var(--color-error);
+    }
+
+  .input-info,
+    .input-info:focus,
+    .input-info:focus-within {
+      --input-color: var(--color-info);
+    }
+
+  .input-neutral,
+    .input-neutral:focus,
+    .input-neutral:focus-within {
+      --input-color: var(--color-neutral);
+    }
+
+  .input-primary,
+    .input-primary:focus,
+    .input-primary:focus-within {
+      --input-color: var(--color-primary);
+    }
+
+  .input-secondary,
+    .input-secondary:focus,
+    .input-secondary:focus-within {
+      --input-color: var(--color-secondary);
+    }
+
+  .input-success,
+    .input-success:focus,
+    .input-success:focus-within {
+      --input-color: var(--color-success);
+    }
+
+  .input-warning,
+    .input-warning:focus,
+    .input-warning:focus-within {
+      --input-color: var(--color-warning);
+    }
+}

package/dist/components/flex/Flex.js

@@ -0,0 +1,101 @@
+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";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__ from "../utils.js";
+const directionMap = {
+    row: "flex-row",
+    col: "flex-col",
+    "row-reverse": "flex-row-reverse",
+    "col-reverse": "flex-col-reverse"
+};
+const justifyMap = {
+    start: "justify-start",
+    center: "justify-center",
+    end: "justify-end",
+    between: "justify-between",
+    around: "justify-around",
+    evenly: "justify-evenly"
+};
+const alignMap = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch",
+    baseline: "items-baseline"
+};
+const wrapMap = {
+    wrap: "flex-wrap",
+    nowrap: "flex-nowrap",
+    "wrap-reverse": "flex-wrap-reverse"
+};
+const gapMap = {
+    none: "gap-0",
+    sm: "gap-2",
+    md: "gap-4",
+    lg: "gap-6",
+    xl: "gap-8"
+};
+const gapXMap = {
+    none: "gap-x-0",
+    sm: "gap-x-2",
+    md: "gap-x-4",
+    lg: "gap-x-6",
+    xl: "gap-x-8"
+};
+const gapYMap = {
+    none: "gap-y-0",
+    sm: "gap-y-2",
+    md: "gap-y-4",
+    lg: "gap-y-6",
+    xl: "gap-y-8"
+};
+const growMap = {
+    true: "flex-grow",
+    false: "flex-grow-0"
+};
+const shrinkMap = {
+    true: "flex-shrink",
+    false: "flex-shrink-0"
+};
+const basisMap = {
+    none: "basis-0",
+    sm: "basis-8",
+    md: "basis-16",
+    lg: "basis-24",
+    xl: "basis-32"
+};
+const Flex = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "as",
+        "class",
+        "children",
+        "direction",
+        "justify",
+        "align",
+        "wrap",
+        "gap",
+        "gapX",
+        "gapY",
+        "grow",
+        "shrink",
+        "basis"
+    ]);
+    const tag = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.as || "div");
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])("flex", (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.direction, directionMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.justify, justifyMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.align, alignMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.wrap, wrapMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gap, gapMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapX, gapXMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.gapY, gapYMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.grow, growMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.shrink, shrinkMap), (0, __WEBPACK_EXTERNAL_MODULE__utils_js_db66b9f7__.mapResponsiveProp)(local.basis, basisMap), local.class)));
+    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)({
+        get component () {
+            return tag();
+        },
+        get ["class"] () {
+            return classes();
+        }
+    }, rest, {
+        get children () {
+            return resolvedChildren();
+        }
+    }));
+};
+const flex_Flex = Flex;
+export { flex_Flex as default };

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

@@ -1 +1 @@
-export { default } from "./Flex";
+export { default, type FlexProps } from "./Flex";

package/dist/components/flex/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Flex_js_adef8f0b__ from "./Flex.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Flex_js_adef8f0b__["default"];
+export { __webpack_exports__default as default };

package/dist/components/floating-dock/FloatingDock.css

@@ -0,0 +1,179 @@
+@layer components {
+  /* -------------------------------------------------------------------------------------------------
+   * Dock container
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock {
+    position: relative;
+    display: inline-flex;
+    align-items: flex-end;
+    overflow: visible;
+  }
+
+  .floating-dock__bar {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    overflow: visible;
+  }
+
+  .floating-dock__bar--horizontal {
+    flex-direction: row;
+  }
+
+  .floating-dock__bar--vertical {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Background panel — stretches with magnified items
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__bg {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: 1rem;
+    background-color: var(--color-base-100);
+    box-shadow:
+      inset 0 1px 0 0 var(--color-base-300),
+      0 1px 0 0 var(--color-base-100);
+    pointer-events: none;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Item wrapper
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background-color: var(--color-base-200);
+    opacity: 0.8;
+    transform-origin: bottom center;
+    will-change: transform;
+    transition: opacity 150ms ease;
+  }
+
+  .floating-dock__item:hover {
+    opacity: 1;
+  }
+
+  .floating-dock__item:active {
+    opacity: 0.6;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Icon container
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    will-change: transform;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Tooltip
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__tooltip {
+    position: fixed;
+    z-index: 9999;
+    width: fit-content;
+    pointer-events: none;
+    white-space: pre;
+    border-radius: var(--radius-field, 0.375rem);
+    border: 1px solid var(--color-base-300);
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    padding: 0.125rem 0.5rem;
+    font-size: 0.75rem;
+    opacity: 0;
+    animation: floating-dock-fade-in 150ms ease forwards;
+  }
+
+  @keyframes floating-dock-fade-in {
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Mobile
+   * -----------------------------------------------------------------------------------------------*/
+  .floating-dock__mobile {
+    position: relative;
+    display: block;
+  }
+
+  .floating-dock__mobile-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9999px;
+    background-color: var(--color-base-200);
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .floating-dock__mobile-popup {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .floating-dock__mobile-popup--top {
+    inset: auto 0 100% 0;
+    margin-bottom: 0.5rem;
+  }
+
+  .floating-dock__mobile-popup--bottom {
+    inset: 100% 0 auto 0;
+    margin-top: 0.5rem;
+  }
+
+  .floating-dock__mobile-popup--left {
+    right: 100%;
+    top: 0;
+    margin-right: 0.5rem;
+  }
+
+  .floating-dock__mobile-popup--right {
+    left: 100%;
+    top: 0;
+    margin-left: 0.5rem;
+  }
+
+  .floating-dock__mobile-item {
+    opacity: 0;
+    animation: floating-dock-fade-in 200ms ease forwards;
+  }
+
+  /* -------------------------------------------------------------------------------------------------
+   * Responsive: hide desktop on small, mobile on large
+   * -----------------------------------------------------------------------------------------------*/
+  @media (max-width: 767px) {
+    .floating-dock__bar {
+      display: none;
+    }
+
+    /* mobileMode="dock": show the full bar on mobile instead of burger */
+    .floating-dock__bar--mobile-dock {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .floating-dock__mobile {
+      display: none;
+    }
+
+    .floating-dock__bar--mobile-dock {
+      display: none;
+    }
+  }
+}

package/dist/components/floating-dock/FloatingDock.d.ts

@@ -0,0 +1,39 @@
+import "./FloatingDock.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type FloatingDockItem = {
+    title: string;
+    icon: JSX.Element;
+    href?: string;
+    onClick?: (e: MouseEvent) => void;
+};
+export type FloatingDockDirection = "top" | "bottom" | "left" | "right";
+export type FloatingDockProps = {
+    items: FloatingDockItem[];
+    orientation?: "horizontal" | "vertical";
+    tooltipDirection?: FloatingDockDirection;
+    mobilePopupDirection?: FloatingDockDirection;
+    /** How to render on mobile: "burger" shows a toggle popup, "dock" shows the full dock bar. @default "burger" */
+    mobileMode?: "burger" | "dock";
+    gap?: number;
+    baseSize?: number;
+    hoverSize?: number;
+    iconSize?: number;
+    hoverIconSize?: number;
+    magnifyRange?: number;
+    magnify?: boolean;
+    nudge?: number;
+    showDesktop?: boolean;
+    showMobile?: boolean;
+    showContainer?: boolean;
+    desktopClass?: string;
+    mobileClass?: string;
+    itemClass?: string;
+    tooltipClass?: string;
+    mobileToggleIcon?: JSX.Element;
+    springMass?: number;
+    springStiffness?: number;
+    springDamping?: number;
+} & IComponentBaseProps;
+declare const FloatingDock: (rawProps: FloatingDockProps) => JSX.Element;
+export default FloatingDock;