@pathscale/ui 1.2.0 → 1.2.2

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

@@ -0,0 +1 @@
+export { createOverlayPosition, type OverlayPlacement, type OverlayAlign, type CreateOverlayPositionOptions, } from "./overlayPosition";

package/dist/components/_shared/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__overlayPosition_js_25962dee__ from "./overlayPosition.js";
+var __webpack_exports__createOverlayPosition = __WEBPACK_EXTERNAL_MODULE__overlayPosition_js_25962dee__.createOverlayPosition;
+export { __webpack_exports__createOverlayPosition as createOverlayPosition };

package/dist/components/_shared/overlayPosition.d.ts

@@ -0,0 +1,19 @@
+import { type Accessor, type JSX } from "solid-js";
+export type OverlayPlacement = "top" | "bottom" | "left" | "right";
+export type OverlayAlign = "start" | "center" | "end";
+export interface CreateOverlayPositionOptions {
+    open: Accessor<boolean>;
+    triggerRef: Accessor<HTMLElement | undefined>;
+    overlayRef: Accessor<HTMLElement | undefined>;
+    placement: Accessor<OverlayPlacement>;
+    offset: Accessor<number>;
+    autoFlip?: Accessor<boolean>;
+    align?: Accessor<OverlayAlign>;
+    matchTriggerWidth?: Accessor<boolean>;
+    minWidth?: Accessor<number | undefined>;
+    viewportPadding?: Accessor<number>;
+}
+export declare const createOverlayPosition: (options: CreateOverlayPositionOptions) => {
+    style: Accessor<JSX.CSSProperties>;
+    placement: Accessor<OverlayPlacement>;
+};

package/dist/components/_shared/overlayPosition.js

@@ -0,0 +1,115 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+const oppositePlacement = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+};
+const clamp = (value, min, max)=>{
+    if (max < min) return min;
+    return Math.min(Math.max(value, min), max);
+};
+const getMainAxisSize = (placement, rect)=>"top" === placement || "bottom" === placement ? rect.height : rect.width;
+const getAvailableSpace = (rect, viewportWidth, viewportHeight, padding)=>({
+        top: rect.top - padding,
+        bottom: viewportHeight - rect.bottom - padding,
+        left: rect.left - padding,
+        right: viewportWidth - rect.right - padding
+    });
+const resolvePlacement = (preferred, triggerRect, overlayRect, viewportWidth, viewportHeight, padding, offset, autoFlip)=>{
+    if (!autoFlip) return preferred;
+    const available = getAvailableSpace(triggerRect, viewportWidth, viewportHeight, padding);
+    const needed = getMainAxisSize(preferred, overlayRect) + offset;
+    if (available[preferred] >= needed) return preferred;
+    const opposite = oppositePlacement[preferred];
+    return available[opposite] > available[preferred] ? opposite : preferred;
+};
+const getCrossAxisCoordinate = (align, triggerStart, triggerSize, overlaySize)=>{
+    if ("start" === align) return triggerStart;
+    if ("end" === align) return triggerStart + triggerSize - overlaySize;
+    return triggerStart + (triggerSize - overlaySize) / 2;
+};
+const round = (value)=>Math.round(100 * value) / 100;
+const createOverlayPosition = (options)=>{
+    const [style, setStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+        visibility: "hidden"
+    });
+    const [resolvedPlacement, setResolvedPlacement] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(options.placement());
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        if (!options.open()) {
+            setResolvedPlacement(options.placement());
+            setStyle({
+                visibility: "hidden"
+            });
+            return;
+        }
+        const trigger = options.triggerRef();
+        const overlay = options.overlayRef();
+        if (!trigger || !overlay) return;
+        const viewportPadding = options.viewportPadding?.() ?? 8;
+        const align = options.align?.() ?? "center";
+        const autoFlip = options.autoFlip?.() ?? true;
+        let frame = 0;
+        const update = ()=>{
+            const triggerRect = trigger.getBoundingClientRect();
+            const overlayRect = overlay.getBoundingClientRect();
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            const offset = options.offset();
+            const placement = resolvePlacement(options.placement(), triggerRect, overlayRect, viewportWidth, viewportHeight, viewportPadding, offset, autoFlip);
+            let top = 0;
+            let left = 0;
+            switch(placement){
+                case "top":
+                    top = triggerRect.top - overlayRect.height - offset;
+                    left = getCrossAxisCoordinate(align, triggerRect.left, triggerRect.width, overlayRect.width);
+                    break;
+                case "bottom":
+                    top = triggerRect.bottom + offset;
+                    left = getCrossAxisCoordinate(align, triggerRect.left, triggerRect.width, overlayRect.width);
+                    break;
+                case "left":
+                    top = getCrossAxisCoordinate(align, triggerRect.top, triggerRect.height, overlayRect.height);
+                    left = triggerRect.left - overlayRect.width - offset;
+                    break;
+                case "right":
+                    top = getCrossAxisCoordinate(align, triggerRect.top, triggerRect.height, overlayRect.height);
+                    left = triggerRect.right + offset;
+                    break;
+            }
+            const maxTop = viewportHeight - overlayRect.height - viewportPadding;
+            const maxLeft = viewportWidth - overlayRect.width - viewportPadding;
+            setResolvedPlacement(placement);
+            setStyle({
+                position: "fixed",
+                top: `${round(clamp(top, viewportPadding, maxTop))}px`,
+                left: `${round(clamp(left, viewportPadding, maxLeft))}px`,
+                "max-width": `${round(Math.max(0, viewportWidth - 2 * viewportPadding))}px`,
+                ...options.matchTriggerWidth?.() ? {
+                    "min-width": `${round(Math.max(triggerRect.width, options.minWidth?.() ?? 0))}px`
+                } : {}
+            });
+        };
+        const schedule = ()=>{
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(update);
+        };
+        schedule();
+        window.addEventListener("resize", schedule);
+        window.addEventListener("scroll", schedule, true);
+        const resizeObserver = "undefined" != typeof ResizeObserver ? new ResizeObserver(schedule) : void 0;
+        resizeObserver?.observe(trigger);
+        resizeObserver?.observe(overlay);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            cancelAnimationFrame(frame);
+            window.removeEventListener("resize", schedule);
+            window.removeEventListener("scroll", schedule, true);
+            resizeObserver?.disconnect();
+        });
+    });
+    return {
+        style,
+        placement: resolvedPlacement
+    };
+};
+export { createOverlayPosition };

package/dist/components/accordion/Accordion.classes.d.ts

@@ -0,0 +1,38 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "accordion";
+        readonly variant: {
+            readonly default: "accordion--default";
+            readonly surface: "accordion--surface";
+        };
+    };
+    readonly Item: {
+        readonly base: "accordion__item";
+        readonly flag: {
+            readonly expanded: "accordion__item--expanded";
+            readonly disabled: "accordion__item--disabled";
+            readonly hideSeparator: "accordion__item--hide-separator";
+        };
+    };
+    readonly Trigger: {
+        readonly base: "accordion__trigger";
+    };
+    readonly Indicator: {
+        readonly base: "accordion__indicator";
+        readonly flag: {
+            readonly expanded: "accordion__indicator--expanded";
+        };
+    };
+    readonly Content: {
+        readonly base: "accordion__content";
+        readonly flag: {
+            readonly expanded: "accordion__content--expanded";
+        };
+    };
+    readonly Body: {
+        readonly base: "accordion__body";
+    };
+    readonly BodyInner: {
+        readonly base: "accordion__body-inner";
+    };
+};

package/dist/components/accordion/Accordion.classes.js

@@ -0,0 +1,39 @@
+const CLASSES = {
+    Root: {
+        base: "accordion",
+        variant: {
+            default: "accordion--default",
+            surface: "accordion--surface"
+        }
+    },
+    Item: {
+        base: "accordion__item",
+        flag: {
+            expanded: "accordion__item--expanded",
+            disabled: "accordion__item--disabled",
+            hideSeparator: "accordion__item--hide-separator"
+        }
+    },
+    Trigger: {
+        base: "accordion__trigger"
+    },
+    Indicator: {
+        base: "accordion__indicator",
+        flag: {
+            expanded: "accordion__indicator--expanded"
+        }
+    },
+    Content: {
+        base: "accordion__content",
+        flag: {
+            expanded: "accordion__content--expanded"
+        }
+    },
+    Body: {
+        base: "accordion__body"
+    },
+    BodyInner: {
+        base: "accordion__body-inner"
+    }
+};
+export { CLASSES };

package/dist/components/accordion/Accordion.css

@@ -0,0 +1,158 @@
+@layer components {
+  .accordion {
+    width: 100%;
+    contain: layout style;
+  }
+
+  .accordion__item {
+    position: relative;
+    border: 0;
+  }
+
+  .accordion__item::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 1px;
+    width: 100%;
+    border-radius: 9999px;
+    background-color: var(--color-base-300);
+  }
+
+  .accordion__item:last-child::after {
+    content: none;
+  }
+
+  .accordion__item--hide-separator::after {
+    display: none;
+  }
+
+  .accordion__item--disabled {
+    opacity: 0.65;
+  }
+
+  .accordion__trigger {
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    border: 0;
+    background-color: transparent;
+    padding: 1rem;
+    text-align: left;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: inherit;
+    user-select: none;
+    transition:
+      opacity 150ms ease,
+      background-color 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  .accordion__trigger:focus-visible,
+  .accordion__trigger[data-focus-visible="true"] {
+    outline: 2px solid var(--color-base-content);
+    outline-offset: 2px;
+  }
+
+  .accordion__item--disabled .accordion__trigger,
+  .accordion__trigger:disabled,
+  .accordion__trigger[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  @media (hover: hover) {
+    .accordion__trigger:hover:not([aria-expanded="true"]):not(:disabled):not(
+        [aria-disabled="true"]
+      ),
+    .accordion__trigger[data-hovered="true"]:not(
+        [aria-expanded="true"]
+      ):not(:disabled):not([aria-disabled="true"]) {
+      background-color: color-mix(
+        in oklab,
+        var(--color-base-content),
+        transparent 96%
+      );
+    }
+  }
+
+  .accordion__indicator {
+    margin-inline-start: auto;
+    height: 1rem;
+    width: 1rem;
+    flex-shrink: 0;
+    opacity: 0.65;
+    transition: transform 250ms ease;
+  }
+
+  .accordion__indicator--expanded {
+    transform: rotate(-180deg);
+  }
+
+  .accordion__content {
+    display: grid;
+    grid-template-rows: 0fr;
+    opacity: 0;
+    overflow: hidden;
+    transition:
+      grid-template-rows 200ms ease,
+      opacity 200ms ease;
+  }
+
+  .accordion__content--expanded {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+
+  .accordion__body {
+    min-height: 0;
+    overflow: hidden;
+    font-size: 0.875rem;
+  }
+
+  .accordion__body-inner {
+    padding-inline: 1rem;
+    padding-top: 0;
+    padding-bottom: 1rem;
+    color: color-mix(in oklab, var(--color-base-content), transparent 25%);
+  }
+
+  .accordion--surface {
+    border-radius: 1.5rem;
+    background-color: var(--color-base-100);
+  }
+
+  .accordion--surface .accordion__item::after {
+    left: 3%;
+    width: 94%;
+    background-color: color-mix(
+      in oklab,
+      var(--color-base-content),
+      transparent 90%
+    );
+  }
+
+  .accordion--surface .accordion__item:first-child .accordion__trigger {
+    border-top-left-radius: 1.5rem;
+    border-top-right-radius: 1.5rem;
+  }
+
+  .accordion--surface
+    .accordion__item:last-child:not(.accordion__item--expanded)
+    .accordion__trigger {
+    border-bottom-left-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .accordion__trigger,
+    .accordion__indicator,
+    .accordion__content {
+      transition: none;
+    }
+  }
+}

package/dist/components/accordion/Accordion.d.ts

@@ -1,26 +1,50 @@
-import "./collapse.css";
-import { type JSX } from "solid-js";
-import { CollapseContent, CollapseTitle } from "../collapse";
+import "./Accordion.css";
+import { type Component, type JSX, type ParentComponent } from "solid-js";
 import type { IComponentBaseProps } from "../types";
-type AccordionBaseProps = {
-    name?: string;
-    icon?: "arrow" | "plus";
-    checked?: boolean;
-    dataTheme?: string;
-    class?: string;
-    className?: string;
-    style?: JSX.CSSProperties;
-    mode?: "radio" | "checkbox" | "controlled";
-    expanded?: boolean;
-    onToggle?: () => void;
-    "aria-label"?: string;
-    "aria-describedby"?: string;
-    "aria-labelledby"?: string;
+export type AccordionSelectionMode = "single" | "multiple";
+export type AccordionVariant = "default" | "surface";
+export type AccordionValue = string | string[];
+export type AccordionRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    selectionMode?: AccordionSelectionMode;
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: string[]) => void;
+    hideSeparator?: boolean;
+    variant?: AccordionVariant;
+    isDisabled?: boolean;
+    disabled?: boolean;
 };
-export type AccordionProps = AccordionBaseProps & IComponentBaseProps & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, keyof AccordionBaseProps>;
-declare const Accordion: {
-    (props: AccordionProps): JSX.Element;
-    Title: typeof CollapseTitle;
-    Content: typeof CollapseContent;
+export type AccordionItemProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    value?: string;
+    children?: JSX.Element;
+    isDisabled?: boolean;
+    disabled?: boolean;
+};
+export type AccordionTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "disabled"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    showIndicator?: boolean;
+    indicator?: JSX.Element;
+};
+export type AccordionContentProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    keepMounted?: boolean;
+};
+export type AccordionIndicatorProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const AccordionRoot: ParentComponent<AccordionRootProps>;
+declare const AccordionItem: ParentComponent<AccordionItemProps>;
+declare const AccordionTrigger: Component<AccordionTriggerProps>;
+declare const AccordionContent: ParentComponent<AccordionContentProps>;
+declare const AccordionIndicator: Component<AccordionIndicatorProps>;
+declare const Accordion: ParentComponent<AccordionRootProps> & {
+    Root: ParentComponent<AccordionRootProps>;
+    Item: ParentComponent<AccordionItemProps>;
+    Trigger: Component<AccordionTriggerProps>;
+    Content: ParentComponent<AccordionContentProps>;
+    Indicator: Component<AccordionIndicatorProps>;
 };
 export default Accordion;
+export { Accordion, AccordionRoot, AccordionItem, AccordionTrigger, AccordionContent, AccordionIndicator, };
+export type { AccordionRootProps as AccordionProps };