@pathscale/ui 2.1.1 → 2.2.0

package/dist/components/surface/Surface.css

@@ -1,37 +0,0 @@
-@layer components {
-  .surface {
-    position: relative;
-    --surface-bg: var(--color-surface, var(--color-base-100));
-    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
-    --surface-border: transparent;
-    --surface-radius: var(--radius-box, 0.75rem);
-    background-color: var(--surface-bg);
-    color: var(--surface-fg);
-    border: 1px solid var(--surface-border);
-    border-radius: var(--surface-radius);
-  }
-
-  .surface--transparent {
-    --surface-bg: transparent;
-    --surface-fg: var(--color-foreground, var(--color-base-content));
-    --surface-border: transparent;
-  }
-
-  .surface--default {
-    --surface-bg: var(--color-surface, var(--color-base-100));
-    --surface-fg: var(--color-surface-foreground, var(--color-base-content));
-    --surface-border: transparent;
-  }
-
-  .surface--secondary {
-    --surface-bg: var(--color-surface-secondary, var(--color-base-200));
-    --surface-fg: var(--color-surface-secondary-foreground, var(--color-base-content));
-    --surface-border: transparent;
-  }
-
-  .surface--tertiary {
-    --surface-bg: var(--color-surface-tertiary, var(--color-base-300));
-    --surface-fg: var(--color-surface-tertiary-foreground, var(--color-base-content));
-    --surface-border: transparent;
-  }
-}

package/dist/components/surface/Surface.generated.d.ts

@@ -1,13 +0,0 @@
-import type { Component as __LayoutComponent } from "solid-js";
-import "./Surface.css";
-import { type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type SurfaceVariant = "default" | "secondary" | "tertiary" | "transparent";
-export type SurfaceVariants = {
-    variant?: SurfaceVariant;
-};
-export type SurfaceProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & SurfaceVariants & {
-    children?: JSX.Element;
-};
-export declare const Surface: __LayoutComponent<SurfaceProps>;
-export default Surface;

package/dist/components/surface/Surface.generated.js

@@ -1,42 +0,0 @@
-import { insert, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import "./Surface.css";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES, componentRecipe } from "./Surface.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const __solidLayoutSurface = (_stable, p)=>{
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "variant"
-    ]);
-    const variant = ()=>local.variant ?? "default";
-    return (()=>{
-        var _el$ = _tmpl$();
-        spread(_el$, mergeProps(others, ()=>({
-                class: twMerge(CLASSES.base, CLASSES.variant[variant()], local.class, local.className)
-            }), {
-            "data-slot": "surface",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            }
-        }), false, true);
-        insert(_el$, ()=>local.children);
-        return _el$;
-    })();
-};
-const Surface = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutSurface,
-    embedded: true
-});
-const Surface_generated = Surface;
-export default Surface_generated;
-export { Surface };

package/dist/components/surface/Surface.recipe.d.ts

@@ -1,16 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "surface";
-    readonly variant: {
-        readonly default: "surface--default";
-        readonly secondary: "surface--secondary";
-        readonly tertiary: "surface--tertiary";
-        readonly transparent: "surface--transparent";
-    };
-};
-export declare const componentRecipe: import("solid-layouts").Recipe<{
-    readonly component: "surface";
-    readonly slots: {
-        readonly root: {};
-        readonly surface: {};
-    };
-}>;

package/dist/components/surface/Surface.recipe.js

@@ -1,35 +0,0 @@
-import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    base: "surface",
-    variant: {
-        default: "surface--default",
-        secondary: "surface--secondary",
-        tertiary: "surface--tertiary",
-        transparent: "surface--transparent"
-    }
-};
-const componentRecipe = recipe({
-    component: "surface",
-    slots: {
-        root: {},
-        surface: {}
-    },
-    _layouts: {
-        slots: {
-            root: {
-                base: "",
-                axes: {}
-            },
-            surface: {
-                base: "",
-                axes: {}
-            }
-        },
-        stateKeys: [],
-        slotIds: {
-            root: 0,
-            surface: 1
-        }
-    }
-});
-export { CLASSES, componentRecipe };

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

@@ -1 +0,0 @@
-export { default, Surface, type SurfaceProps, type SurfaceVariant, type SurfaceVariants } from "./Surface.generated";

package/dist/components/surface/index.js

@@ -1 +0,0 @@
-export { Surface, default } from "./Surface.generated.js";

package/dist/components/tag/Tag.css

@@ -1,129 +0,0 @@
-@layer components {
-  .tag:not(.token) {
-    --tag-optical-offset: 0.031em;
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    border-radius: 9999px;
-    font-weight: 500;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    transform-origin: center;
-    cursor: pointer;
-    transition:
-      color 100ms ease,
-      transform 100ms ease,
-      opacity 100ms ease,
-      background-color 100ms ease,
-      box-shadow 100ms ease;
-
-    --tag-bg-default: var(--color-default);
-    --tag-fg-default: var(--color-default-foreground);
-    --tag-bg-default-hover: var(--color-default-hover);
-    --tag-bg-surface: var(--color-surface, var(--color-base-200));
-    --tag-fg-surface: var(
-      --color-surface-foreground,
-      var(--color-base-content)
-    );
-    --tag-bg-surface-hover: var(--color-surface-hover, var(--color-base-300));
-    --tag-bg-selected: var(--color-accent-soft);
-    --tag-fg-selected: var(--color-accent-soft-foreground);
-    --tag-bg-selected-hover: var(--color-accent-soft-hover);
-    --tag-bg: var(--tag-bg-default);
-    --tag-fg: var(--tag-fg-default);
-    --tag-bg-hover: var(--tag-bg-default-hover);
-
-    background-color: var(--tag-bg);
-    color: var(--tag-fg);
-  }
-
-  .tag__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    pointer-events: none;
-  }
-
-  .tag__icon > * {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .tag:not(.token):is([data-disabled="true"], [aria-disabled="true"]) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .tag:not(.token):is(:focus-visible, [data-focus-visible]) {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-  }
-
-  .tag:not(.token):is([data-selected="true"], [aria-selected="true"]) {
-    background-color: var(--tag-bg-selected);
-    color: var(--tag-fg-selected);
-  }
-
-  @media (hover: hover) {
-    .tag:not(.token):is(:hover, [data-hovered="true"]):not(
-        [data-selected="true"]
-      ):not([data-disabled="true"]) {
-      background-color: var(--tag-bg-hover);
-    }
-
-    .tag:not(.token):is([data-selected="true"], [aria-selected="true"]):is(
-        :hover,
-        [data-hovered="true"]
-      ) {
-      background-color: var(--tag-bg-selected-hover);
-    }
-  }
-
-  .tag--sm {
-    padding-inline: 0.5rem;
-    padding-block: 0.125rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .tag--md {
-    padding-inline: 0.5rem;
-    padding-block: 0.25rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .tag--lg {
-    padding-inline: 0.625rem;
-    padding-block: 0.375rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .tag--default {
-    --tag-bg: var(--tag-bg-default);
-    --tag-fg: var(--tag-fg-default);
-    --tag-bg-hover: var(--tag-bg-default-hover);
-  }
-
-  .tag--surface {
-    --tag-bg: var(--tag-bg-surface);
-    --tag-fg: var(--tag-fg-surface);
-    --tag-bg-hover: var(--tag-bg-surface-hover);
-  }
-
-  .tag__remove-button {
-    width: 0.75rem;
-    height: 0.75rem;
-    color: inherit;
-  }
-
-  .tag__remove-button > * {
-    width: inherit;
-    height: inherit;
-    pointer-events: none;
-  }
-}

package/dist/components/tag/Tag.generated.d.ts

@@ -1,34 +0,0 @@
-import type { Component as __LayoutComponent } from "solid-js";
-import "./Tag.css";
-import { type JSX } from "solid-js";
-import { type CloseButtonProps } from "../close-button";
-import type { IComponentBaseProps } from "../types";
-export type TagSize = "sm" | "md" | "lg";
-export type TagVariant = "default" | "surface";
-type TagRenderProps = {
-    isSelected: boolean;
-    isDisabled: boolean;
-    allowsRemoving: boolean;
-};
-export type TagRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    id?: string | number;
-    textValue?: string;
-    isDisabled?: boolean;
-    size?: TagSize;
-    variant?: TagVariant;
-    startIcon?: JSX.Element;
-    endIcon?: JSX.Element;
-    children?: JSX.Element | ((props: TagRenderProps) => JSX.Element);
-};
-export type TagRemoveButtonProps = Omit<CloseButtonProps, "isDisabled"> & IComponentBaseProps & {
-    isDisabled?: boolean;
-};
-declare const TagRoot: __LayoutComponent<TagRootProps>;
-declare const TagRemoveButton: __LayoutComponent<TagRemoveButtonProps>;
-declare const Tag: __LayoutComponent<TagRootProps> & {
-    Root: __LayoutComponent<TagRootProps>;
-    RemoveButton: __LayoutComponent<TagRemoveButtonProps>;
-};
-export default Tag;
-export { Tag, TagRoot, TagRemoveButton };
-export type { TagRootProps as TagProps, TagRenderProps };

package/dist/components/tag/Tag.generated.js

@@ -1,254 +0,0 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import { defineComponent } from "solid-layouts/application-boundary";
-import "./Tag.css";
-import { Show, children, createContext, createMemo, createUniqueId, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import close_button from "../close-button/index.js";
-import { TagGroupContext } from "../tag-group/context.js";
-import { CLASSES, componentRecipe } from "./Tag.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<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 toSlug = (value)=>value.trim().toLowerCase().replace(/[^\w\s-]/g, "").replace(/\s+/g, "-");
-const extractTextValue = (nodes)=>{
-    for (const node of nodes){
-        if ("string" == typeof node && node.trim().length > 0) return node.trim();
-        if ("number" == typeof node) return String(node);
-    }
-};
-const TagContext = createContext();
-const __solidLayoutTagRoot = (_stable, p)=>{
-    const fallbackKey = createUniqueId();
-    const group = useContext(TagGroupContext);
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "id",
-        "textValue",
-        "isDisabled",
-        "size",
-        "variant",
-        "startIcon",
-        "endIcon",
-        "onClick",
-        "onKeyDown",
-        "role",
-        "tabIndex"
-    ]);
-    const resolvedChildren = children(()=>"function" == typeof local.children ? void 0 : local.children);
-    const isRenderFnChild = ()=>"function" == typeof local.children;
-    const derivedText = createMemo(()=>isRenderFnChild() ? void 0 : extractTextValue(resolvedChildren.toArray()));
-    const tagKey = createMemo(()=>{
-        if (null != local.id) return String(local.id);
-        if (local.textValue) return toSlug(local.textValue);
-        if (derivedText()) return toSlug(derivedText());
-        return fallbackKey;
-    });
-    const size = ()=>local.size ?? group?.size() ?? "md";
-    const variant = ()=>local.variant ?? group?.variant() ?? "default";
-    const isSelectable = ()=>Boolean(group && "none" !== group.selectionMode());
-    const isSelected = ()=>Boolean(group?.selectedKeys().has(tagKey()));
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(group?.isDisabled()) || Boolean(group?.disabledKeys().has(tagKey()));
-    const allowsRemoving = ()=>Boolean(group?.allowsRemoving()) && Boolean(tagKey());
-    const renderState = createMemo(()=>({
-            isSelected: isSelected(),
-            isDisabled: isDisabled(),
-            allowsRemoving: allowsRemoving()
-        }));
-    const handleSelect = (event)=>{
-        if (!group || !isSelectable() || isDisabled()) return;
-        group.selectKey(tagKey(), event);
-    };
-    const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
-        if (event.defaultPrevented) return;
-        handleSelect(event);
-    };
-    const handleKeyDown = (event)=>{
-        invokeEventHandler(local.onKeyDown, event);
-        if (event.defaultPrevented) return;
-        if (event.target !== event.currentTarget) return;
-        if (!isSelectable() || isDisabled()) return;
-        if ("Enter" !== event.key && " " !== event.key) return;
-        event.preventDefault();
-        handleSelect(event);
-    };
-    const remove = (event)=>{
-        if (!group || !allowsRemoving() || isDisabled()) return;
-        event.preventDefault();
-        event.stopPropagation();
-        group.removeKey(tagKey(), event);
-    };
-    return createComponent(TagContext.Provider, {
-        value: {
-            allowsRemoving,
-            isDisabled,
-            removeIcon: ()=>local.endIcon,
-            remove
-        },
-        get children () {
-            var _el$ = _tmpl$();
-            spread(_el$, mergeProps(others, ()=>({
-                    class: twMerge(CLASSES.Root.base, CLASSES.Root.size[size()], CLASSES.Root.variant[variant()], local.class, local.className)
-                }), {
-                "data-slot": "tag",
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                get ["data-size"] () {
-                    return size();
-                },
-                get ["data-variant"] () {
-                    return variant();
-                },
-                get ["data-selected"] () {
-                    return isSelected() ? "true" : "false";
-                },
-                get ["data-disabled"] () {
-                    return isDisabled() ? "true" : "false";
-                },
-                get ["data-key"] () {
-                    return tagKey();
-                },
-                get ["aria-selected"] () {
-                    return memo(()=>!!isSelectable())() ? isSelected() ? "true" : "false" : void 0;
-                },
-                get ["aria-disabled"] () {
-                    return isDisabled() ? "true" : "false";
-                },
-                get role () {
-                    return local.role ?? (isSelectable() ? "option" : void 0);
-                },
-                get tabIndex () {
-                    return local.tabIndex ?? (isSelectable() && !isDisabled() ? 0 : void 0);
-                },
-                get style () {
-                    return local.style;
-                },
-                onClick: handleClick,
-                onKeyDown: handleKeyDown
-            }), false, true);
-            insert(_el$, createComponent(Show, {
-                get when () {
-                    return isRenderFnChild();
-                },
-                get fallback () {
-                    return [
-                        createComponent(Show, {
-                            get when () {
-                                return local.startIcon;
-                            },
-                            get children () {
-                                var _el$2 = _tmpl$2();
-                                spread(_el$2, mergeProps(()=>({
-                                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
-                                    }), {
-                                    "data-slot": "tag-start-icon"
-                                }), false, true);
-                                insert(_el$2, ()=>local.startIcon);
-                                return _el$2;
-                            }
-                        }),
-                        memo(resolvedChildren),
-                        createComponent(Show, {
-                            get when () {
-                                return memo(()=>!!allowsRemoving())() && local.endIcon;
-                            },
-                            get children () {
-                                return createComponent(TagRemoveButton, {
-                                    get children () {
-                                        return local.endIcon;
-                                    }
-                                });
-                            }
-                        }),
-                        createComponent(Show, {
-                            get when () {
-                                return memo(()=>!allowsRemoving())() && local.endIcon;
-                            },
-                            get children () {
-                                var _el$3 = _tmpl$2();
-                                spread(_el$3, mergeProps(()=>({
-                                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
-                                    }), {
-                                    "data-slot": "tag-end-icon"
-                                }), false, true);
-                                insert(_el$3, ()=>local.endIcon);
-                                return _el$3;
-                            }
-                        })
-                    ];
-                },
-                get children () {
-                    return local.children(renderState());
-                }
-            }));
-            return _el$;
-        }
-    });
-};
-const TagRoot = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutTagRoot,
-    embedded: true
-});
-const __solidLayoutTagRemoveButton = (_stable, p)=>{
-    const context = useContext(TagContext);
-    const hasIcon = ()=>null != p.children || null != p.startIcon || null != p.endIcon || context?.removeIcon() != null;
-    const [local, others] = splitProps(p, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "onClick",
-        "isDisabled",
-        "aria-label"
-    ]);
-    const handleClick = (event)=>{
-        invokeEventHandler(local.onClick, event);
-        if (event.defaultPrevented) return;
-        context?.remove(event);
-    };
-    if (!context?.allowsRemoving()) return null;
-    if (!hasIcon()) return null;
-    return createComponent(close_button, mergeProps(others, {
-        get ["aria-label"] () {
-            return local["aria-label"] ?? "Remove tag";
-        }
-    }, ()=>({
-            class: twMerge(CLASSES.slot.removeButton, local.class, local.className)
-        }), {
-        "data-slot": "tag-remove-button",
-        get ["data-theme"] () {
-            return local.dataTheme;
-        },
-        get style () {
-            return local.style;
-        },
-        get isDisabled () {
-            return local.isDisabled ?? context.isDisabled();
-        },
-        onClick: handleClick,
-        get children () {
-            return local.children ?? context.removeIcon();
-        }
-    }));
-};
-const TagRemoveButton = defineComponent({
-    recipe: componentRecipe,
-    layout: __solidLayoutTagRemoveButton,
-    embedded: true
-});
-const Tag = Object.assign(TagRoot, {
-    Root: TagRoot,
-    RemoveButton: TagRemoveButton
-});
-const Tag_generated = Tag;
-export default Tag_generated;
-export { Tag, TagRemoveButton, TagRoot };

package/dist/components/tag/Tag.recipe.d.ts

@@ -1,30 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "tag";
-        readonly size: {
-            readonly sm: "tag--sm";
-            readonly md: "tag--md";
-            readonly lg: "tag--lg";
-        };
-        readonly variant: {
-            readonly default: "tag--default";
-            readonly surface: "tag--surface";
-        };
-    };
-    readonly slot: {
-        readonly icon: "tag__icon";
-        readonly iconStart: "tag__icon--start";
-        readonly iconEnd: "tag__icon--end";
-        readonly removeButton: "tag__remove-button";
-    };
-};
-export declare const componentRecipe: import("solid-layouts").Recipe<{
-    readonly component: "tag";
-    readonly slots: {
-        readonly root: {};
-        readonly tag: {};
-        readonly "tag-end-icon": {};
-        readonly "tag-remove-button": {};
-        readonly "tag-start-icon": {};
-    };
-}>;

package/dist/components/tag/Tag.recipe.js

@@ -1,64 +0,0 @@
-import { recipe } from "../../lib/layouts/index.js";
-const CLASSES = {
-    Root: {
-        base: "tag",
-        size: {
-            sm: "tag--sm",
-            md: "tag--md",
-            lg: "tag--lg"
-        },
-        variant: {
-            default: "tag--default",
-            surface: "tag--surface"
-        }
-    },
-    slot: {
-        icon: "tag__icon",
-        iconStart: "tag__icon--start",
-        iconEnd: "tag__icon--end",
-        removeButton: "tag__remove-button"
-    }
-};
-const componentRecipe = recipe({
-    component: "tag",
-    slots: {
-        root: {},
-        tag: {},
-        "tag-end-icon": {},
-        "tag-remove-button": {},
-        "tag-start-icon": {}
-    },
-    _layouts: {
-        slots: {
-            root: {
-                base: "",
-                axes: {}
-            },
-            tag: {
-                base: "",
-                axes: {}
-            },
-            "tag-end-icon": {
-                base: "",
-                axes: {}
-            },
-            "tag-remove-button": {
-                base: "",
-                axes: {}
-            },
-            "tag-start-icon": {
-                base: "",
-                axes: {}
-            }
-        },
-        stateKeys: [],
-        slotIds: {
-            root: 0,
-            tag: 1,
-            "tag-end-icon": 2,
-            "tag-remove-button": 3,
-            "tag-start-icon": 4
-        }
-    }
-});
-export { CLASSES, componentRecipe };

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

@@ -1 +0,0 @@
-export { default, Tag, TagRoot, TagRemoveButton, type TagProps, type TagRootProps, type TagRemoveButtonProps, type TagSize, type TagVariant, } from "./Tag.generated";

package/dist/components/tag/index.js

@@ -1 +0,0 @@
-export { Tag, TagRemoveButton, TagRoot, default } from "./Tag.generated.js";