@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/empty-state/EmptyState.generated.d.ts

@@ -0,0 +1,33 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./EmptyState.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type EmptyStateRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type EmptyStateIconProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type EmptyStateTitleProps = Omit<JSX.HTMLAttributes<HTMLHeadingElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type EmptyStateDescriptionProps = Omit<JSX.HTMLAttributes<HTMLParagraphElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+export type EmptyStateActionsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children: JSX.Element;
+};
+declare const EmptyStateRoot: __LayoutComponent<EmptyStateRootProps>;
+declare const EmptyStateIcon: __LayoutComponent<EmptyStateIconProps>;
+declare const EmptyStateTitle: __LayoutComponent<EmptyStateTitleProps>;
+declare const EmptyStateDescription: __LayoutComponent<EmptyStateDescriptionProps>;
+declare const EmptyStateActions: __LayoutComponent<EmptyStateActionsProps>;
+declare const EmptyState: __LayoutComponent<EmptyStateRootProps> & {
+    Root: __LayoutComponent<EmptyStateRootProps>;
+    Icon: __LayoutComponent<EmptyStateIconProps>;
+    Title: __LayoutComponent<EmptyStateTitleProps>;
+    Description: __LayoutComponent<EmptyStateDescriptionProps>;
+    Actions: __LayoutComponent<EmptyStateActionsProps>;
+};
+export default EmptyState;
+export { EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions };

package/dist/components/empty-state/EmptyState.generated.js

@@ -0,0 +1,170 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./EmptyState.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./EmptyState.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3>"), _tmpl$3 = /*#__PURE__*/ template("<p>");
+const __solidLayoutEmptyStateRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, {
+            role: "status"
+        }, ()=>({
+                class: twMerge(CLASSES.base, local.class, local.className)
+            }), {
+            "data-slot": "empty-state",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const EmptyStateRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutEmptyStateRoot,
+    embedded: true
+});
+const __solidLayoutEmptyStateIcon = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$2 = _tmpl$();
+        spread(_el$2, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.icon, local.class, local.className)
+            }), {
+            "data-slot": "empty-state-icon",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            "aria-hidden": "true"
+        }), false, true);
+        insert(_el$2, ()=>local.children);
+        return _el$2;
+    })();
+};
+const EmptyStateIcon = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutEmptyStateIcon,
+    embedded: true
+});
+const __solidLayoutEmptyStateTitle = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$3 = _tmpl$2();
+        spread(_el$3, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.title, local.class, local.className)
+            }), {
+            "data-slot": "empty-state-title",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$3, ()=>local.children);
+        return _el$3;
+    })();
+};
+const EmptyStateTitle = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutEmptyStateTitle,
+    embedded: true
+});
+const __solidLayoutEmptyStateDescription = (_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.slot.description, local.class, local.className)
+            }), {
+            "data-slot": "empty-state-description",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const EmptyStateDescription = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutEmptyStateDescription,
+    embedded: true
+});
+const __solidLayoutEmptyStateActions = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$5 = _tmpl$();
+        spread(_el$5, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.actions, local.class, local.className)
+            }), {
+            "data-slot": "empty-state-actions",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$5, ()=>local.children);
+        return _el$5;
+    })();
+};
+const EmptyStateActions = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutEmptyStateActions,
+    embedded: true
+});
+const EmptyState = Object.assign(EmptyStateRoot, {
+    Root: EmptyStateRoot,
+    Icon: EmptyStateIcon,
+    Title: EmptyStateTitle,
+    Description: EmptyStateDescription,
+    Actions: EmptyStateActions
+});
+const EmptyState_generated = EmptyState;
+export default EmptyState_generated;
+export { EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateTitle };

package/dist/components/empty-state/EmptyState.recipe.d.ts

@@ -0,0 +1,20 @@
+export declare const CLASSES: {
+    readonly base: "empty-state";
+    readonly slot: {
+        readonly icon: "empty-state__icon";
+        readonly title: "empty-state__title";
+        readonly description: "empty-state__description";
+        readonly actions: "empty-state__actions";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "empty-state";
+    readonly slots: {
+        readonly "empty-state": {};
+        readonly "empty-state-actions": {};
+        readonly "empty-state-description": {};
+        readonly "empty-state-icon": {};
+        readonly "empty-state-title": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/empty-state/EmptyState.recipe.js

@@ -0,0 +1,59 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "empty-state",
+    slot: {
+        icon: "empty-state__icon",
+        title: "empty-state__title",
+        description: "empty-state__description",
+        actions: "empty-state__actions"
+    }
+};
+const componentRecipe = recipe({
+    component: "empty-state",
+    slots: {
+        "empty-state": {},
+        "empty-state-actions": {},
+        "empty-state-description": {},
+        "empty-state-icon": {},
+        "empty-state-title": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "empty-state": {
+                base: "",
+                axes: {}
+            },
+            "empty-state-actions": {
+                base: "",
+                axes: {}
+            },
+            "empty-state-description": {
+                base: "",
+                axes: {}
+            },
+            "empty-state-icon": {
+                base: "",
+                axes: {}
+            },
+            "empty-state-title": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "empty-state": 0,
+            "empty-state-actions": 1,
+            "empty-state-description": 2,
+            "empty-state-icon": 3,
+            "empty-state-title": 4,
+            root: 5
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/empty-state/index.d.ts

@@ -1,3 +1,3 @@
-export { default as EmptyState, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, type EmptyStateRootProps, type EmptyStateIconProps, type EmptyStateTitleProps, type EmptyStateDescriptionProps, type EmptyStateActionsProps, } from "./EmptyState";
+export { default as EmptyState, EmptyStateRoot, EmptyStateIcon, EmptyStateTitle, EmptyStateDescription, EmptyStateActions, type EmptyStateRootProps, type EmptyStateIconProps, type EmptyStateTitleProps, type EmptyStateDescriptionProps, type EmptyStateActionsProps, } from "./EmptyState.generated";
 /** @deprecated Use EmptyStateRootProps instead */
-export type { EmptyStateRootProps as EmptyStateProps } from "./EmptyState";
+export type { EmptyStateRootProps as EmptyStateProps } from "./EmptyState.generated";

package/dist/components/empty-state/index.js

@@ -1 +1 @@
-export { EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateTitle, default as EmptyState } from "./EmptyState.js";
+export { EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateRoot, EmptyStateTitle, default as EmptyState } from "./EmptyState.generated.js";

package/dist/components/error-message/ErrorMessage.generated.d.ts

@@ -0,0 +1,12 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ErrorMessage.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ErrorMessageRootProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps;
+declare const ErrorMessageRoot: __LayoutComponent<ErrorMessageRootProps>;
+declare const ErrorMessage: __LayoutComponent<ErrorMessageRootProps> & {
+    Root: __LayoutComponent<ErrorMessageRootProps>;
+};
+export default ErrorMessage;
+export { ErrorMessage, ErrorMessageRoot };
+export type { ErrorMessageRootProps as ErrorMessageProps };

package/dist/components/error-message/ErrorMessage.generated.js

@@ -0,0 +1,47 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./ErrorMessage.css";
+import { splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./ErrorMessage.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span>");
+const __solidLayoutErrorMessageRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "slot"
+    ]);
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.base, local.class, local.className)
+            }), {
+            "data-slot": "error-message",
+            get slot () {
+                return local.slot ?? "errorMessage";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+const ErrorMessageRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutErrorMessageRoot,
+    embedded: true
+});
+const ErrorMessage = Object.assign(ErrorMessageRoot, {
+    Root: ErrorMessageRoot
+});
+const ErrorMessage_generated = ErrorMessage;
+export default ErrorMessage_generated;
+export { ErrorMessage, ErrorMessageRoot };

package/dist/components/error-message/ErrorMessage.recipe.d.ts

@@ -0,0 +1,10 @@
+export declare const CLASSES: {
+    readonly base: "error-message";
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "error-message";
+    readonly slots: {
+        readonly "error-message": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/error-message/ErrorMessage.recipe.js

@@ -0,0 +1,29 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "error-message"
+};
+const componentRecipe = recipe({
+    component: "error-message",
+    slots: {
+        "error-message": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "error-message": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "error-message": 0,
+            root: 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/error-message/index.d.ts

@@ -1 +1 @@
-export { default, ErrorMessage, ErrorMessageRoot, type ErrorMessageProps, type ErrorMessageRootProps, } from "./ErrorMessage";
+export { default, ErrorMessage, ErrorMessageRoot, type ErrorMessageProps, type ErrorMessageRootProps, } from "./ErrorMessage.generated";

package/dist/components/error-message/index.js

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

package/dist/components/field-error/FieldError.generated.d.ts

@@ -0,0 +1,22 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./FieldError.css";
+import { type JSX } from "solid-js";
+import { type AnyFormApi } from "../../hooks/form";
+import type { IComponentBaseProps } from "../types";
+export type FieldErrorRenderProps = {
+    isVisible: boolean;
+};
+export type FieldErrorRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element | ((props: FieldErrorRenderProps) => JSX.Element);
+    isVisible?: boolean;
+    name?: string;
+    form?: AnyFormApi;
+    showWhenTouched?: boolean;
+};
+declare const FieldErrorRoot: __LayoutComponent<FieldErrorRootProps>;
+declare const FieldError: __LayoutComponent<FieldErrorRootProps> & {
+    Root: __LayoutComponent<FieldErrorRootProps>;
+};
+export default FieldError;
+export { FieldError, FieldErrorRoot };
+export type { FieldErrorRootProps as FieldErrorProps };

package/dist/components/field-error/FieldError.generated.js

@@ -0,0 +1,76 @@
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./FieldError.css";
+import { createMemo, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { getFirstFieldError } from "../../hooks/form/getFirstFieldError.js";
+import { useFormContext } from "../../hooks/form/index.js";
+import { CLASSES, componentRecipe } from "./FieldError.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>");
+const __solidLayoutFieldErrorRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "slot",
+        "isVisible",
+        "name",
+        "form",
+        "showWhenTouched"
+    ]);
+    const hookMessage = createMemo(()=>{
+        if (!local.name) return;
+        const form = local.form ?? useFormContext();
+        const fieldMeta = form._tsForm.getFieldMeta(local.name);
+        if (!fieldMeta) return;
+        if ((local.showWhenTouched ?? true) && !fieldMeta.isTouched) return;
+        return getFirstFieldError(fieldMeta.errors ?? []);
+    });
+    const isVisible = ()=>{
+        if ("boolean" == typeof local.isVisible) return local.isVisible;
+        if (hookMessage()) return true;
+        return null != local.children;
+    };
+    const content = ()=>{
+        if ("function" == typeof local.children) return local.children({
+            isVisible: isVisible()
+        });
+        if (null != local.children) return local.children;
+        return hookMessage();
+    };
+    return (()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.base, local.class, local.className)
+            }), {
+            "data-slot": "field-error",
+            get ["data-visible"] () {
+                return isVisible() ? "true" : "false";
+            },
+            get slot () {
+                return local.slot ?? "errorMessage";
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$, content);
+        return _el$;
+    })();
+};
+const FieldErrorRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutFieldErrorRoot,
+    embedded: true
+});
+const FieldError = Object.assign(FieldErrorRoot, {
+    Root: FieldErrorRoot
+});
+const FieldError_generated = FieldError;
+export default FieldError_generated;
+export { FieldError, FieldErrorRoot };

package/dist/components/field-error/FieldError.recipe.d.ts

@@ -0,0 +1,10 @@
+export declare const CLASSES: {
+    readonly base: "field-error";
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "field-error";
+    readonly slots: {
+        readonly "field-error": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/field-error/FieldError.recipe.js

@@ -0,0 +1,29 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "field-error"
+};
+const componentRecipe = recipe({
+    component: "field-error",
+    slots: {
+        "field-error": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "field-error": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "field-error": 0,
+            root: 1
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/field-error/index.d.ts

@@ -1 +1 @@
-export { default, FieldError, FieldErrorRoot, type FieldErrorProps, type FieldErrorRootProps, type FieldErrorRenderProps, } from "./FieldError";
+export { default, FieldError, FieldErrorRoot, type FieldErrorProps, type FieldErrorRootProps, type FieldErrorRenderProps, } from "./FieldError.generated";

package/dist/components/field-error/index.js

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

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

@@ -0,0 +1,25 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Fieldset.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type FieldsetRootProps = JSX.FieldsetHTMLAttributes<HTMLFieldSetElement> & IComponentBaseProps;
+export type FieldsetLegendProps = JSX.HTMLAttributes<HTMLLegendElement> & IComponentBaseProps;
+export type FieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type FieldsetActionsProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const FieldsetRoot: __LayoutComponent<FieldsetRootProps>;
+declare const FieldsetLegend: __LayoutComponent<FieldsetLegendProps>;
+declare const FieldGroup: __LayoutComponent<FieldGroupProps>;
+declare const FieldsetActions: __LayoutComponent<FieldsetActionsProps>;
+declare const Fieldset: __LayoutComponent<FieldsetRootProps> & {
+    Root: __LayoutComponent<FieldsetRootProps>;
+    Legend: __LayoutComponent<FieldsetLegendProps>;
+    Group: __LayoutComponent<FieldGroupProps>;
+    Actions: __LayoutComponent<FieldsetActionsProps>;
+};
+export default Fieldset;
+export { Fieldset, FieldsetRoot, FieldsetLegend, FieldGroup, FieldsetActions };
+export type { FieldsetRootProps as FieldsetProps };