@pathscale/ui 1.3.1 → 1.5.0

package/dist/components/fieldset/Fieldset.generated.js

@@ -0,0 +1,136 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Fieldset.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./Fieldset.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<fieldset>"), _tmpl$2 = /*#__PURE__*/ template("<legend>"), _tmpl$3 = /*#__PURE__*/ template("<div>");
+const __solidLayoutFieldsetRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Root.base, local.class, local.className)
+            }), {
+            "data-slot": "fieldset",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const FieldsetRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFieldsetRoot,
+    embedded: true
+});
+const __solidLayoutFieldsetLegend = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Legend.base, local.class, local.className)
+            }), {
+            "data-slot": "fieldset-legend",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const FieldsetLegend = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFieldsetLegend,
+    embedded: true
+});
+const __solidLayoutFieldGroup = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$3();
+        spread(_el$3, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Group.base, local.class, local.className)
+            }), {
+            "data-slot": "fieldset-field-group",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const FieldGroup = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFieldGroup,
+    embedded: true
+});
+const __solidLayoutFieldsetActions = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$3();
+        spread(_el$4, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Actions.base, local.class, local.className)
+            }), {
+            "data-slot": "fieldset-actions",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const FieldsetActions = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFieldsetActions,
+    embedded: true
+});
+const Fieldset = Object.assign(FieldsetRoot, {
+    Root: FieldsetRoot,
+    Legend: FieldsetLegend,
+    Group: FieldGroup,
+    Actions: FieldsetActions
+});
+const Fieldset_generated = Fieldset;
+export default Fieldset_generated;
+export { FieldGroup, Fieldset, FieldsetActions, FieldsetLegend, FieldsetRoot };

package/dist/components/fieldset/Fieldset.recipe.d.ts

@@ -0,0 +1,24 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "fieldset";
+    };
+    readonly Legend: {
+        readonly base: "fieldset__legend";
+    };
+    readonly Group: {
+        readonly base: "fieldset__group";
+    };
+    readonly Actions: {
+        readonly base: "fieldset__actions";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "fieldset";
+    readonly slots: {
+        readonly fieldset: {};
+        readonly "fieldset-actions": {};
+        readonly "fieldset-field-group": {};
+        readonly "fieldset-legend": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/fieldset/Fieldset.recipe.js

@@ -0,0 +1,58 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Root: {
+        base: "fieldset"
+    },
+    Legend: {
+        base: "fieldset__legend"
+    },
+    Group: {
+        base: "fieldset__group"
+    },
+    Actions: {
+        base: "fieldset__actions"
+    }
+};
+const componentRecipe = recipe({
+    component: "fieldset",
+    slots: {
+        fieldset: {},
+        "fieldset-actions": {},
+        "fieldset-field-group": {},
+        "fieldset-legend": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            fieldset: {
+                base: "",
+                axes: {}
+            },
+            "fieldset-actions": {
+                base: "",
+                axes: {}
+            },
+            "fieldset-field-group": {
+                base: "",
+                axes: {}
+            },
+            "fieldset-legend": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            fieldset: 0,
+            "fieldset-actions": 1,
+            "fieldset-field-group": 2,
+            "fieldset-legend": 3,
+            root: 4
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1 +1 @@
-export { default, Fieldset, FieldsetRoot, FieldsetLegend, FieldGroup, FieldsetActions, type FieldsetProps, type FieldsetRootProps, type FieldsetLegendProps, type FieldGroupProps, type FieldsetActionsProps, } from "./Fieldset";
+export { default, Fieldset, FieldsetRoot, FieldsetLegend, FieldGroup, FieldsetActions, type FieldsetProps, type FieldsetRootProps, type FieldsetLegendProps, type FieldGroupProps, type FieldsetActionsProps, } from "./Fieldset.generated";

package/dist/components/fieldset/index.js

@@ -1,3 +1 @@
-import { FieldGroup, Fieldset as external_Fieldset_js_Fieldset, FieldsetActions, FieldsetLegend, FieldsetRoot } from "./Fieldset.js";
-export default external_Fieldset_js_Fieldset;
-export { FieldGroup, FieldsetActions, FieldsetLegend, FieldsetRoot, external_Fieldset_js_Fieldset as Fieldset };
+export { FieldGroup, Fieldset, FieldsetActions, FieldsetLegend, FieldsetRoot, default } from "./Fieldset.generated.js";

package/dist/components/flex/Flex.generated.d.ts

@@ -0,0 +1,22 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Flex.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import type { ResponsiveProp } from "../types";
+export type FlexProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLElement>, "ref"> & {
+    as?: keyof JSX.IntrinsicElements;
+    direction?: ResponsiveProp<"row" | "col" | "row-reverse" | "col-reverse">;
+    justify?: ResponsiveProp<"start" | "center" | "end" | "between" | "around" | "evenly">;
+    align?: ResponsiveProp<"start" | "center" | "end" | "stretch" | "baseline">;
+    wrap?: ResponsiveProp<"wrap" | "nowrap" | "wrap-reverse">;
+    gap?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    gapX?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    gapY?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    paddingInline?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    paddingBlock?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+    grow?: ResponsiveProp<boolean>;
+    shrink?: ResponsiveProp<boolean>;
+    basis?: ResponsiveProp<"none" | "sm" | "md" | "lg" | "xl">;
+};
+declare const Flex: __LayoutComponent<FlexProps>;
+export default Flex;

package/dist/components/flex/Flex.generated.js

@@ -0,0 +1,49 @@
+import { Dynamic, createComponent, mergeProps } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Flex.css";
+import { children, createMemo, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { mapResponsiveProp } from "../utils.js";
+import { CLASSES, componentRecipe } from "./Flex.recipe.js";
+const __solidLayoutFlex = (_stable, p)=>{
+    const [local, rest] = splitProps(p, [
+        "as",
+        "class",
+        "className",
+        "children",
+        "direction",
+        "justify",
+        "align",
+        "wrap",
+        "gap",
+        "gapX",
+        "gapY",
+        "paddingInline",
+        "paddingBlock",
+        "grow",
+        "shrink",
+        "basis"
+    ]);
+    const tag = createMemo(()=>local.as || "div");
+    const resolvedChildren = children(()=>local.children);
+    const classes = createMemo(()=>twMerge(clsx(CLASSES.base, mapResponsiveProp(local.direction, CLASSES.direction), mapResponsiveProp(local.justify, CLASSES.justify), mapResponsiveProp(local.align, CLASSES.align), mapResponsiveProp(local.wrap, CLASSES.wrap), mapResponsiveProp(local.gap, CLASSES.gap), mapResponsiveProp(local.gapX, CLASSES.gapX), mapResponsiveProp(local.gapY, CLASSES.gapY), mapResponsiveProp(local.paddingInline, CLASSES.paddingInline), mapResponsiveProp(local.paddingBlock, CLASSES.paddingBlock), mapResponsiveProp(local.grow, CLASSES.grow), mapResponsiveProp(local.shrink, CLASSES.shrink), mapResponsiveProp(local.basis, CLASSES.basis), local.class, local.className)));
+    return createComponent(Dynamic, mergeProps({
+        get component () {
+            return tag();
+        }
+    }, ()=>({
+            class: classes()
+        }), rest, {
+        get children () {
+            return resolvedChildren();
+        }
+    }));
+};
+const Flex = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFlex,
+    embedded: true
+});
+const Flex_generated = Flex;
+export default Flex_generated;

package/dist/components/flex/Flex.recipe.d.ts

@@ -0,0 +1,85 @@
+export declare const CLASSES: {
+    readonly base: "flex-layout";
+    readonly direction: {
+        readonly row: "flex-row";
+        readonly col: "flex-col";
+        readonly "row-reverse": "flex-row-reverse";
+        readonly "col-reverse": "flex-col-reverse";
+    };
+    readonly justify: {
+        readonly start: "justify-start";
+        readonly center: "justify-center";
+        readonly end: "justify-end";
+        readonly between: "justify-between";
+        readonly around: "justify-around";
+        readonly evenly: "justify-evenly";
+    };
+    readonly align: {
+        readonly start: "items-start";
+        readonly center: "items-center";
+        readonly end: "items-end";
+        readonly stretch: "items-stretch";
+        readonly baseline: "items-baseline";
+    };
+    readonly wrap: {
+        readonly wrap: "flex-wrap";
+        readonly nowrap: "flex-nowrap";
+        readonly "wrap-reverse": "flex-wrap-reverse";
+    };
+    readonly gap: {
+        readonly none: "gap-0";
+        readonly sm: "gap-2";
+        readonly md: "gap-4";
+        readonly lg: "gap-6";
+        readonly xl: "gap-8";
+    };
+    readonly gapX: {
+        readonly none: "gap-x-0";
+        readonly sm: "gap-x-2";
+        readonly md: "gap-x-4";
+        readonly lg: "gap-x-6";
+        readonly xl: "gap-x-8";
+    };
+    readonly gapY: {
+        readonly none: "gap-y-0";
+        readonly sm: "gap-y-2";
+        readonly md: "gap-y-4";
+        readonly lg: "gap-y-6";
+        readonly xl: "gap-y-8";
+    };
+    readonly paddingInline: {
+        readonly none: "px-0";
+        readonly sm: "px-2";
+        readonly md: "px-4";
+        readonly lg: "px-6";
+        readonly xl: "px-8";
+    };
+    readonly paddingBlock: {
+        readonly none: "py-0";
+        readonly sm: "py-2";
+        readonly md: "py-4";
+        readonly lg: "py-6";
+        readonly xl: "py-8";
+    };
+    readonly grow: {
+        readonly true: "flex-grow";
+        readonly false: "flex-grow-0";
+    };
+    readonly shrink: {
+        readonly true: "flex-shrink";
+        readonly false: "flex-shrink-0";
+    };
+    readonly basis: {
+        readonly none: "basis-0";
+        readonly sm: "basis-8";
+        readonly md: "basis-16";
+        readonly lg: "basis-24";
+        readonly xl: "basis-32";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "flex";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/flex/Flex.recipe.js

@@ -0,0 +1,99 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "flex-layout",
+    direction: {
+        row: "flex-row",
+        col: "flex-col",
+        "row-reverse": "flex-row-reverse",
+        "col-reverse": "flex-col-reverse"
+    },
+    justify: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+        around: "justify-around",
+        evenly: "justify-evenly"
+    },
+    align: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+        baseline: "items-baseline"
+    },
+    wrap: {
+        wrap: "flex-wrap",
+        nowrap: "flex-nowrap",
+        "wrap-reverse": "flex-wrap-reverse"
+    },
+    gap: {
+        none: "gap-0",
+        sm: "gap-2",
+        md: "gap-4",
+        lg: "gap-6",
+        xl: "gap-8"
+    },
+    gapX: {
+        none: "gap-x-0",
+        sm: "gap-x-2",
+        md: "gap-x-4",
+        lg: "gap-x-6",
+        xl: "gap-x-8"
+    },
+    gapY: {
+        none: "gap-y-0",
+        sm: "gap-y-2",
+        md: "gap-y-4",
+        lg: "gap-y-6",
+        xl: "gap-y-8"
+    },
+    paddingInline: {
+        none: "px-0",
+        sm: "px-2",
+        md: "px-4",
+        lg: "px-6",
+        xl: "px-8"
+    },
+    paddingBlock: {
+        none: "py-0",
+        sm: "py-2",
+        md: "py-4",
+        lg: "py-6",
+        xl: "py-8"
+    },
+    grow: {
+        true: "flex-grow",
+        false: "flex-grow-0"
+    },
+    shrink: {
+        true: "flex-shrink",
+        false: "flex-shrink-0"
+    },
+    basis: {
+        none: "basis-0",
+        sm: "basis-8",
+        md: "basis-16",
+        lg: "basis-24",
+        xl: "basis-32"
+    }
+};
+const componentRecipe = recipe({
+    component: "flex",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

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

package/dist/components/flex/index.js

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

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

@@ -0,0 +1,40 @@
+import type { Component as __LayoutComponent } from "solid-js";
+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: __LayoutComponent<FloatingDockProps>;
+export default FloatingDock;