@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/input/Input.recipe.js

@@ -0,0 +1,86 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "input-root",
+    slot: {
+        control: "input-control",
+        field: "input-field",
+        label: "input-label",
+        helper: "input-helper",
+        icon: "input__icon",
+        iconStart: "input__icon--start",
+        iconEnd: "input__icon--end"
+    },
+    size: {
+        sm: "input-control--sm",
+        md: "input-control--md",
+        lg: "input-control--lg"
+    },
+    flag: {
+        fullWidthRoot: "input-root--full-width",
+        fullWidthControl: "input-control--full-width",
+        invalid: "input-control--invalid",
+        disabled: "input-control--disabled",
+        helperInvalid: "input-helper--invalid"
+    }
+};
+const componentRecipe = recipe({
+    component: "input",
+    slots: {
+        "input-control": {},
+        "input-end-icon": {},
+        "input-field": {},
+        "input-helper": {},
+        "input-label": {},
+        "input-root": {},
+        "input-start-icon": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "input-control": {
+                base: "",
+                axes: {}
+            },
+            "input-end-icon": {
+                base: "",
+                axes: {}
+            },
+            "input-field": {
+                base: "",
+                axes: {}
+            },
+            "input-helper": {
+                base: "",
+                axes: {}
+            },
+            "input-label": {
+                base: "",
+                axes: {}
+            },
+            "input-root": {
+                base: "",
+                axes: {}
+            },
+            "input-start-icon": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "input-control": 0,
+            "input-end-icon": 1,
+            "input-field": 2,
+            "input-helper": 3,
+            "input-label": 4,
+            "input-root": 5,
+            "input-start-icon": 6,
+            root: 7
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

@@ -1,3 +1,3 @@
-import Input from "./Input";
-export type { InputProps, InputSize, InputRootProps, InputFieldProps, InputLabelProps, InputHelperProps, } from "./Input";
+import Input from "./Input.generated";
+export type { InputProps, InputSize, InputRootProps, InputFieldProps, InputLabelProps, InputHelperProps, } from "./Input.generated";
 export default Input;

package/dist/components/input/index.js

@@ -1,3 +1,3 @@
-import Input from "./Input.js";
-const input = Input;
+import Input_generated from "./Input.generated.js";
+const input = Input_generated;
 export default input;

package/dist/components/input-group/InputGroup.generated.d.ts

@@ -0,0 +1,45 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./InputGroup.css";
+import { type JSX } from "solid-js";
+import { type TextFieldVariant } from "../text-field";
+import type { IComponentBaseProps } from "../types";
+export type InputGroupVariant = TextFieldVariant;
+export type InputGroupRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    variant?: InputGroupVariant;
+    fullWidth?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+};
+export type InputGroupInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "disabled"> & IComponentBaseProps & {
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+};
+export type InputGroupTextAreaProps = Omit<JSX.TextareaHTMLAttributes<HTMLTextAreaElement>, "disabled"> & IComponentBaseProps & {
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+};
+export type InputGroupPrefixProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type InputGroupSuffixProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const InputGroupRoot: __LayoutComponent<InputGroupRootProps>;
+declare const InputGroupInput: __LayoutComponent<InputGroupInputProps>;
+declare const InputGroupTextArea: __LayoutComponent<InputGroupTextAreaProps>;
+declare const InputGroupPrefix: __LayoutComponent<InputGroupPrefixProps>;
+declare const InputGroupSuffix: __LayoutComponent<InputGroupSuffixProps>;
+declare const InputGroup: __LayoutComponent<InputGroupRootProps> & {
+    Root: __LayoutComponent<InputGroupRootProps>;
+    Input: __LayoutComponent<InputGroupInputProps>;
+    TextArea: __LayoutComponent<InputGroupTextAreaProps>;
+    Prefix: __LayoutComponent<InputGroupPrefixProps>;
+    Suffix: __LayoutComponent<InputGroupSuffixProps>;
+};
+export default InputGroup;
+export { InputGroup, InputGroupRoot, InputGroupInput, InputGroupTextArea, InputGroupPrefix, InputGroupSuffix, };
+export type { InputGroupRootProps as InputGroupProps };

package/dist/components/input-group/InputGroup.generated.js

@@ -0,0 +1,246 @@
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./InputGroup.css";
+import { createContext, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { useTextFieldContext } from "../text-field/index.js";
+import { CLASSES, componentRecipe } from "./InputGroup.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<input>"), _tmpl$3 = /*#__PURE__*/ template("<textarea>");
+const InputGroupContext = createContext();
+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 __solidLayoutInputGroupRoot = (_stable, p)=>{
+    const textFieldContext = useTextFieldContext();
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant",
+        "fullWidth",
+        "isDisabled",
+        "disabled",
+        "isInvalid",
+        "onClick",
+        "ref",
+        "aria-invalid"
+    ]);
+    let groupRef;
+    const variant = ()=>local.variant ?? textFieldContext?.variant?.() ?? "primary";
+    const fullWidth = ()=>Boolean(local.fullWidth) || Boolean(textFieldContext?.fullWidth?.());
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(textFieldContext?.isDisabled?.());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(textFieldContext?.isInvalid?.()) || Boolean(local["aria-invalid"]) || "true" === local["aria-invalid"];
+    const handleClick = (event)=>{
+        if (!isDisabled()) {
+            const target = event.target;
+            const input = groupRef?.querySelector('[data-slot="input-group-input"], [data-slot="input-group-textarea"]');
+            if (input && target !== input && !input.contains(target)) input.focus();
+        }
+        invokeEventHandler(local.onClick, event);
+    };
+    return createComponent(InputGroupContext.Provider, {
+        value: {
+            variant,
+            fullWidth,
+            isDisabled,
+            isInvalid
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            use((node)=>{
+                groupRef = node;
+                if ("function" == typeof local.ref) local.ref(node);
+            }, _el$);
+            spread(_el$, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.Root.base, CLASSES.Root.variant[variant()], fullWidth() && CLASSES.Root.flag.fullWidth, local.class, local.className)
+                }), {
+                "data-slot": "input-group",
+                get ["data-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["data-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["aria-disabled"] () {
+                    return isDisabled() ? "true" : void 0;
+                },
+                get ["aria-invalid"] () {
+                    return isInvalid() ? "true" : void 0;
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                },
+                onClick: handleClick
+            }), false, true);
+            insert(_el$, ()=>local.children);
+            return _el$;
+        }
+    });
+};
+const InputGroupRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputGroupRoot,
+    embedded: true
+});
+const __solidLayoutInputGroupInput = (_stable, p)=>{
+    const context = useContext(InputGroupContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "isDisabled",
+        "disabled",
+        "isInvalid"
+    ]);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(context?.isDisabled());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(context?.isInvalid());
+    return (()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Input.base, local.class, local.className)
+            }), {
+            "data-slot": "input-group-input",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            },
+            get ["aria-invalid"] () {
+                return isInvalid() ? "true" : void 0;
+            }
+        }), false, false);
+        return _el$2;
+    })();
+};
+const InputGroupInput = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputGroupInput,
+    embedded: true
+});
+const __solidLayoutInputGroupTextArea = (_stable, p)=>{
+    const context = useContext(InputGroupContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "isDisabled",
+        "disabled",
+        "isInvalid"
+    ]);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(context?.isDisabled());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(context?.isInvalid());
+    return (()=>{
+        var _el$3 = _tmpl$3();
+        spread(_el$3, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Input.base, local.class, local.className)
+            }), {
+            "data-slot": "input-group-textarea",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get disabled () {
+                return isDisabled();
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : void 0;
+            },
+            get ["aria-invalid"] () {
+                return isInvalid() ? "true" : void 0;
+            }
+        }), false, false);
+        return _el$3;
+    })();
+};
+const InputGroupTextArea = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputGroupTextArea,
+    embedded: true
+});
+const __solidLayoutInputGroupPrefix = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$4 = _tmpl$();
+        spread(_el$4, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Prefix.base, local.class, local.className)
+            }), {
+            "data-slot": "input-group-prefix",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$4, ()=>local.children);
+        return _el$4;
+    })();
+};
+const InputGroupPrefix = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputGroupPrefix,
+    embedded: true
+});
+const __solidLayoutInputGroupSuffix = (_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.Suffix.base, local.class, local.className)
+            }), {
+            "data-slot": "input-group-suffix",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$5, ()=>local.children);
+        return _el$5;
+    })();
+};
+const InputGroupSuffix = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutInputGroupSuffix,
+    embedded: true
+});
+const InputGroup = Object.assign(InputGroupRoot, {
+    Root: InputGroupRoot,
+    Input: InputGroupInput,
+    TextArea: InputGroupTextArea,
+    Prefix: InputGroupPrefix,
+    Suffix: InputGroupSuffix
+});
+const InputGroup_generated = InputGroup;
+export default InputGroup_generated;
+export { InputGroup, InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea };

package/dist/components/input-group/InputGroup.recipe.d.ts

@@ -0,0 +1,32 @@
+export declare const CLASSES: {
+    readonly Root: {
+        readonly base: "input-group";
+        readonly variant: {
+            readonly primary: "input-group--primary";
+            readonly secondary: "input-group--secondary";
+        };
+        readonly flag: {
+            readonly fullWidth: "input-group--full-width";
+        };
+    };
+    readonly Input: {
+        readonly base: "input-group__input";
+    };
+    readonly Prefix: {
+        readonly base: "input-group__prefix";
+    };
+    readonly Suffix: {
+        readonly base: "input-group__suffix";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "input-group";
+    readonly slots: {
+        readonly "input-group": {};
+        readonly "input-group-input": {};
+        readonly "input-group-prefix": {};
+        readonly "input-group-suffix": {};
+        readonly "input-group-textarea": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/input-group/InputGroup.recipe.js

@@ -0,0 +1,71 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    Root: {
+        base: "input-group",
+        variant: {
+            primary: "input-group--primary",
+            secondary: "input-group--secondary"
+        },
+        flag: {
+            fullWidth: "input-group--full-width"
+        }
+    },
+    Input: {
+        base: "input-group__input"
+    },
+    Prefix: {
+        base: "input-group__prefix"
+    },
+    Suffix: {
+        base: "input-group__suffix"
+    }
+};
+const componentRecipe = recipe({
+    component: "input-group",
+    slots: {
+        "input-group": {},
+        "input-group-input": {},
+        "input-group-prefix": {},
+        "input-group-suffix": {},
+        "input-group-textarea": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            "input-group": {
+                base: "",
+                axes: {}
+            },
+            "input-group-input": {
+                base: "",
+                axes: {}
+            },
+            "input-group-prefix": {
+                base: "",
+                axes: {}
+            },
+            "input-group-suffix": {
+                base: "",
+                axes: {}
+            },
+            "input-group-textarea": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            "input-group": 0,
+            "input-group-input": 1,
+            "input-group-prefix": 2,
+            "input-group-suffix": 3,
+            "input-group-textarea": 4,
+            root: 5
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/input-group/index.d.ts

@@ -1 +1 @@
-export { default, InputGroup, InputGroupRoot, InputGroupInput, InputGroupTextArea, InputGroupPrefix, InputGroupSuffix, type InputGroupProps, type InputGroupRootProps, type InputGroupInputProps, type InputGroupTextAreaProps, type InputGroupPrefixProps, type InputGroupSuffixProps, type InputGroupVariant, } from "./InputGroup";
+export { default, InputGroup, InputGroupRoot, InputGroupInput, InputGroupTextArea, InputGroupPrefix, InputGroupSuffix, type InputGroupProps, type InputGroupRootProps, type InputGroupInputProps, type InputGroupTextAreaProps, type InputGroupPrefixProps, type InputGroupSuffixProps, type InputGroupVariant, } from "./InputGroup.generated";

package/dist/components/input-group/index.js

@@ -1,3 +1 @@
-import { InputGroup as external_InputGroup_js_InputGroup, InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea } from "./InputGroup.js";
-export default external_InputGroup_js_InputGroup;
-export { InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea, external_InputGroup_js_InputGroup as InputGroup };
+export { InputGroup, InputGroupInput, InputGroupPrefix, InputGroupRoot, InputGroupSuffix, InputGroupTextArea, default } from "./InputGroup.generated.js";

package/dist/components/input-otp/InputOTP.generated.d.ts

@@ -0,0 +1,47 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./InputOTP.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type InputOTPVariant = "primary" | "secondary";
+export declare const REGEXP_ONLY_DIGITS = "^\\d+$";
+export declare const REGEXP_ONLY_CHARS = "^[a-zA-Z]+$";
+export declare const REGEXP_ONLY_DIGITS_AND_CHARS = "^[a-zA-Z0-9]+$";
+export type InputOTPRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onInput"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    maxLength?: number;
+    variant?: InputOTPVariant;
+    pattern?: string;
+    name?: string;
+    autoFocus?: boolean;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    inputClassName?: string;
+    inputMode?: JSX.InputHTMLAttributes<HTMLInputElement>["inputMode"];
+};
+export type InputOTPGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+export type InputOTPSlotProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    index: number;
+};
+export type InputOTPSeparatorProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+};
+declare const InputOTPRoot: __LayoutComponent<InputOTPRootProps>;
+declare const InputOTPGroup: __LayoutComponent<InputOTPGroupProps>;
+declare const InputOTPSlot: __LayoutComponent<InputOTPSlotProps>;
+declare const InputOTPSeparator: __LayoutComponent<InputOTPSeparatorProps>;
+declare const InputOTP: __LayoutComponent<InputOTPRootProps> & {
+    Root: __LayoutComponent<InputOTPRootProps>;
+    Group: __LayoutComponent<InputOTPGroupProps>;
+    Slot: __LayoutComponent<InputOTPSlotProps>;
+    Separator: __LayoutComponent<InputOTPSeparatorProps>;
+};
+export default InputOTP;
+export { InputOTP, InputOTPRoot, InputOTPGroup, InputOTPSlot, InputOTPSeparator, };
+export type { InputOTPRootProps as InputOTPProps };