@pathscale/ui 1.3.1 → 1.5.0

package/dist/components/chip/Chip.generated.js

@@ -0,0 +1,149 @@
+import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import { clsx } from "clsx";
+import { Show, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import "./Chip.css";
+import { CLASSES, componentRecipe } from "./Chip.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<button type=button>");
+const __solidLayoutChipRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "variant",
+        "color",
+        "size",
+        "startIcon",
+        "endIcon",
+        "onRemove",
+        "removeButtonLabel",
+        "isDisabled"
+    ]);
+    const classes = ()=>{
+        const variant = local.variant ?? "solid";
+        const color = local.color ?? "default";
+        const size = local.size ?? "md";
+        return twMerge(clsx(CLASSES.base, CLASSES.variant[variant], CLASSES.color[color], CLASSES.size[size], local.class, local.className));
+    };
+    const chipChildren = ()=>{
+        const c = local.children;
+        if ("string" == typeof c || "number" == typeof c) return createComponent(ChipLabel, {
+            children: c
+        });
+        return c;
+    };
+    const handleRemove = (event)=>{
+        event.stopPropagation();
+        local.onRemove?.();
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, ()=>({
+                class: classes()
+            }), {
+            "data-slot": "chip",
+            get ["data-disabled"] () {
+                return local.isDisabled ? "true" : "false";
+            },
+            get ["data-removable"] () {
+                return local.onRemove ? "true" : "false";
+            }
+        }), false, true);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return local.startIcon;
+            },
+            get children () {
+                var _el$2 = _tmpl$();
+                spread(_el$2, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                    }), {
+                    "data-slot": "chip-start-icon"
+                }), false, true);
+                insert(_el$2, ()=>local.startIcon);
+                return _el$2;
+            }
+        }), null);
+        insert(_el$, chipChildren, null);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return memo(()=>!!local.onRemove)() && local.endIcon;
+            },
+            get children () {
+                var _el$3 = _tmpl$2();
+                spread(_el$3, mergeProps(()=>({
+                        class: CLASSES.slot.remove
+                    }), {
+                    "data-slot": "chip-remove",
+                    get ["aria-label"] () {
+                        return local.removeButtonLabel ?? "Remove";
+                    },
+                    onClick: handleRemove,
+                    get disabled () {
+                        return Boolean(local.isDisabled);
+                    }
+                }), false, true);
+                insert(_el$3, createComponent(Show, {
+                    get when () {
+                        return local.endIcon;
+                    },
+                    get children () {
+                        var _el$4 = _tmpl$();
+                        spread(_el$4, mergeProps(()=>({
+                                class: CLASSES.slot.removeIcon
+                            }), {
+                            "data-slot": "chip-remove-icon"
+                        }), false, true);
+                        insert(_el$4, ()=>local.endIcon);
+                        return _el$4;
+                    }
+                }));
+                return _el$3;
+            }
+        }), null);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return memo(()=>!local.onRemove)() && local.endIcon;
+            },
+            get children () {
+                var _el$5 = _tmpl$();
+                spread(_el$5, mergeProps(()=>({
+                        class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                    }), {
+                    "data-slot": "chip-end-icon"
+                }), false, true);
+                insert(_el$5, ()=>local.endIcon);
+                return _el$5;
+            }
+        }), null);
+        return _el$;
+    })();
+};
+const ChipRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutChipRoot,
+    embedded: true
+});
+const __solidLayoutChipLabel = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class"
+    ]);
+    return (()=>{
+        var _el$6 = _tmpl$();
+        spread(_el$6, mergeProps(()=>({
+                class: twMerge(CLASSES.slot.label, local.class)
+            }), {
+            "data-slot": "chip-label"
+        }, others), false, true);
+        insert(_el$6, ()=>local.children);
+        return _el$6;
+    })();
+};
+const ChipLabel = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutChipLabel,
+    embedded: true
+});
+export { ChipLabel, ChipRoot };

package/dist/components/chip/Chip.recipe.d.ts

@@ -0,0 +1,41 @@
+export declare const CLASSES: {
+    readonly base: "chip";
+    readonly slot: {
+        readonly icon: "chip__icon";
+        readonly iconStart: "chip__icon--start";
+        readonly iconEnd: "chip__icon--end";
+        readonly label: "chip__label";
+        readonly remove: "chip__remove";
+        readonly removeIcon: "chip__remove-icon";
+    };
+    readonly variant: {
+        readonly solid: "chip--solid";
+        readonly flat: "chip--flat";
+        readonly bordered: "chip--bordered";
+    };
+    readonly color: {
+        readonly default: "chip--default";
+        readonly primary: "chip--primary";
+        readonly accent: "chip--accent";
+        readonly success: "chip--success";
+        readonly warning: "chip--warning";
+        readonly danger: "chip--danger";
+    };
+    readonly size: {
+        readonly sm: "chip--sm";
+        readonly md: "chip--md";
+        readonly lg: "chip--lg";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "chip";
+    readonly slots: {
+        readonly chip: {};
+        readonly "chip-end-icon": {};
+        readonly "chip-label": {};
+        readonly "chip-remove": {};
+        readonly "chip-remove-icon": {};
+        readonly "chip-start-icon": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/chip/Chip.recipe.js

@@ -0,0 +1,85 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "chip",
+    slot: {
+        icon: "chip__icon",
+        iconStart: "chip__icon--start",
+        iconEnd: "chip__icon--end",
+        label: "chip__label",
+        remove: "chip__remove",
+        removeIcon: "chip__remove-icon"
+    },
+    variant: {
+        solid: "chip--solid",
+        flat: "chip--flat",
+        bordered: "chip--bordered"
+    },
+    color: {
+        default: "chip--default",
+        primary: "chip--primary",
+        accent: "chip--accent",
+        success: "chip--success",
+        warning: "chip--warning",
+        danger: "chip--danger"
+    },
+    size: {
+        sm: "chip--sm",
+        md: "chip--md",
+        lg: "chip--lg"
+    }
+};
+const componentRecipe = recipe({
+    component: "chip",
+    slots: {
+        chip: {},
+        "chip-end-icon": {},
+        "chip-label": {},
+        "chip-remove": {},
+        "chip-remove-icon": {},
+        "chip-start-icon": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            chip: {
+                base: "",
+                axes: {}
+            },
+            "chip-end-icon": {
+                base: "",
+                axes: {}
+            },
+            "chip-label": {
+                base: "",
+                axes: {}
+            },
+            "chip-remove": {
+                base: "",
+                axes: {}
+            },
+            "chip-remove-icon": {
+                base: "",
+                axes: {}
+            },
+            "chip-start-icon": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            chip: 0,
+            "chip-end-icon": 1,
+            "chip-label": 2,
+            "chip-remove": 3,
+            "chip-remove-icon": 4,
+            "chip-start-icon": 5,
+            root: 6
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,8 +1,8 @@
-import { ChipLabel, ChipRoot } from "./Chip";
-declare const Chip: ((props: import("./Chip").ChipRootProps) => import("solid-js").JSX.Element) & {
-    Root: (props: import("./Chip").ChipRootProps) => import("solid-js").JSX.Element;
-    Label: (props: import("./Chip").ChipLabelProps) => import("solid-js").JSX.Element;
+import { ChipLabel, ChipRoot } from "./Chip.generated";
+declare const Chip: import("solid-js").Component<import("./Chip.generated").ChipRootProps> & {
+    Root: import("solid-js").Component<import("./Chip.generated").ChipRootProps>;
+    Label: import("solid-js").Component<import("./Chip.generated").ChipLabelProps>;
 };
 export default Chip;
 export { Chip, ChipRoot, ChipLabel };
-export type { ChipRootProps, ChipRootProps as ChipProps, ChipLabelProps, ChipVariant, ChipColor, ChipSize, } from "./Chip";
+export type { ChipRootProps, ChipRootProps as ChipProps, ChipLabelProps, ChipVariant, ChipColor, ChipSize, } from "./Chip.generated";

package/dist/components/chip/index.js

@@ -1,4 +1,4 @@
-import { ChipLabel, ChipRoot } from "./Chip.js";
+import { ChipLabel, ChipRoot } from "./Chip.generated.js";
 const Chip = Object.assign(ChipRoot, {
     Root: ChipRoot,
     Label: ChipLabel

package/dist/components/close-button/CloseButton.generated.d.ts

@@ -0,0 +1,15 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./CloseButton.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type CloseButtonVariant = "default";
+export type CloseButtonProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "disabled"> & IComponentBaseProps & {
+    variant?: CloseButtonVariant;
+    isDisabled?: boolean;
+    isPending?: boolean;
+    startIcon?: JSX.Element;
+    endIcon?: JSX.Element;
+    className?: string;
+};
+declare const CloseButton: __LayoutComponent<CloseButtonProps>;
+export default CloseButton;

package/dist/components/close-button/CloseButton.generated.js

@@ -0,0 +1,90 @@
+import { insert, memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./CloseButton.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./CloseButton.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<button>"), _tmpl$2 = /*#__PURE__*/ template("<span>");
+const __solidLayoutCloseButton = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "variant",
+        "isDisabled",
+        "isPending",
+        "startIcon",
+        "endIcon",
+        "type",
+        "dataTheme",
+        "style",
+        "aria-label"
+    ]);
+    const variant = ()=>local.variant ?? "default";
+    const disabled = ()=>Boolean(local.isDisabled) || Boolean(local.isPending);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, {
+            get type () {
+                return local.type ?? "button";
+            },
+            get ["aria-label"] () {
+                return local["aria-label"] ?? "Close";
+            }
+        }, ()=>({
+                class: twMerge(CLASSES.base, CLASSES.variant[variant()], local.class, local.className)
+            }), {
+            "data-slot": "close-button",
+            get ["data-pending"] () {
+                return local.isPending ? "true" : "false";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get disabled () {
+                return disabled();
+            },
+            get ["aria-disabled"] () {
+                return disabled() ? "true" : "false";
+            }
+        }), false, true);
+        insert(_el$, (()=>{
+            var _c$ = memo(()=>!!local.startIcon);
+            return ()=>_c$() ? (()=>{
+                    var _el$2 = _tmpl$2();
+                    spread(_el$2, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconStart)
+                        }), {
+                        "data-slot": "close-button-start-icon"
+                    }), false, true);
+                    insert(_el$2, ()=>local.startIcon);
+                    return _el$2;
+                })() : null;
+        })(), null);
+        insert(_el$, ()=>local.children, null);
+        insert(_el$, (()=>{
+            var _c$2 = memo(()=>!!local.endIcon);
+            return ()=>_c$2() ? (()=>{
+                    var _el$3 = _tmpl$2();
+                    spread(_el$3, mergeProps(()=>({
+                            class: twMerge(CLASSES.slot.icon, CLASSES.slot.iconEnd)
+                        }), {
+                        "data-slot": "close-button-end-icon"
+                    }), false, true);
+                    insert(_el$3, ()=>local.endIcon);
+                    return _el$3;
+                })() : null;
+        })(), null);
+        return _el$;
+    })();
+};
+const CloseButton = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutCloseButton,
+    embedded: true
+});
+const CloseButton_generated = CloseButton;
+export default CloseButton_generated;

package/dist/components/close-button/CloseButton.recipe.d.ts

@@ -0,0 +1,20 @@
+export declare const CLASSES: {
+    readonly base: "close-button";
+    readonly variant: {
+        readonly default: "close-button--default";
+    };
+    readonly slot: {
+        readonly icon: "close-button__icon";
+        readonly iconStart: "close-button__icon--start";
+        readonly iconEnd: "close-button__icon--end";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "close-button";
+    readonly slots: {
+        readonly "close-button": {};
+        readonly "close-button-end-icon": {};
+        readonly "close-button-start-icon": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/close-button/CloseButton.recipe.js

@@ -0,0 +1,49 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "close-button",
+    variant: {
+        default: "close-button--default"
+    },
+    slot: {
+        icon: "close-button__icon",
+        iconStart: "close-button__icon--start",
+        iconEnd: "close-button__icon--end"
+    }
+};
+const componentRecipe = recipe({
+    component: "close-button",
+    slots: {
+        "close-button": {},
+        "close-button-end-icon": {},
+        "close-button-start-icon": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "close-button": {
+                base: "",
+                axes: {}
+            },
+            "close-button-end-icon": {
+                base: "",
+                axes: {}
+            },
+            "close-button-start-icon": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "close-button": 0,
+            "close-button-end-icon": 1,
+            "close-button-start-icon": 2,
+            root: 3
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/close-button/index.d.ts

@@ -1 +1 @@
-export { default, type CloseButtonProps, type CloseButtonVariant } from "./CloseButton";
+export { default, type CloseButtonProps, type CloseButtonVariant } from "./CloseButton.generated";

package/dist/components/close-button/index.js

@@ -1 +1 @@
-export { default } from "./CloseButton.js";
+export { default } from "./CloseButton.generated.js";

package/dist/components/color-area/ColorArea.generated.d.ts

@@ -0,0 +1,16 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ColorArea.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ColorAreaValue = {
+    h: number;
+    s: number;
+    v: number;
+};
+export type ColorAreaProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+    value?: ColorAreaValue;
+    onChange?: (value: ColorAreaValue) => void;
+    isDisabled?: boolean;
+};
+declare const ColorArea: __LayoutComponent<ColorAreaProps>;
+export default ColorArea;