@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/progress-bar/ProgressBar.recipe.js

@@ -0,0 +1,43 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "progress-bar",
+    label: "progress-bar__label",
+    output: "progress-bar__output",
+    track: "progress-bar__track",
+    indicator: "progress-bar__indicator",
+    size: {
+        sm: "progress-bar--sm",
+        md: "progress-bar--md",
+        lg: "progress-bar--lg"
+    },
+    color: {
+        default: "progress-bar--default",
+        accent: "progress-bar--accent",
+        success: "progress-bar--success",
+        warning: "progress-bar--warning",
+        danger: "progress-bar--danger"
+    },
+    state: {
+        indeterminate: "progress-bar--indeterminate",
+        disabled: "progress-bar--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "progress-bar",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/progress-bar/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./ProgressBar";
-export type { ProgressBarProps, ProgressBarSize, ProgressBarColor } from "./ProgressBar";
+export { default } from "./ProgressBar.generated";
+export type { ProgressBarProps, ProgressBarSize, ProgressBarColor } from "./ProgressBar.generated";

package/dist/components/progress-bar/index.js

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

package/dist/components/progress-circle/ProgressCircle.generated.d.ts

@@ -0,0 +1,19 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./ProgressCircle.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type ProgressCircleSize = "sm" | "md" | "lg";
+export type ProgressCircleColor = "default" | "accent" | "success" | "warning" | "danger";
+export type ProgressCircleProps = IComponentBaseProps & Omit<JSX.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    value?: number;
+    minValue?: number;
+    maxValue?: number;
+    isIndeterminate?: boolean;
+    size?: ProgressCircleSize;
+    color?: ProgressCircleColor;
+    isDisabled?: boolean;
+    formatValue?: (value: number) => string;
+    label?: string;
+};
+declare const ProgressCircle: __LayoutComponent<ProgressCircleProps>;
+export default ProgressCircle;

package/dist/components/progress-circle/ProgressCircle.generated.js

@@ -0,0 +1,115 @@
+import { memo, mergeProps, spread, template } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./ProgressCircle.css";
+import { createMemo, splitProps } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES, componentRecipe } from "./ProgressCircle.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span><svg><circle></circle><circle>");
+const STROKE_WIDTH = 4;
+const CENTER = 18;
+const RADIUS = CENTER - STROKE_WIDTH / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+const __solidLayoutProgressCircle = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "value",
+        "minValue",
+        "maxValue",
+        "isIndeterminate",
+        "size",
+        "color",
+        "isDisabled",
+        "formatValue",
+        "label",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    const min = ()=>local.minValue ?? 0;
+    const max = ()=>local.maxValue ?? 100;
+    const isIndeterminate = ()=>Boolean(local.isIndeterminate) || void 0 === local.value;
+    const percentage = createMemo(()=>{
+        if (isIndeterminate()) return 0;
+        const clamped = Math.min(Math.max(local.value ?? 0, min()), max());
+        return (clamped - min()) / (max() - min()) * 100;
+    });
+    const valueText = createMemo(()=>{
+        if (isIndeterminate()) return "";
+        if (local.formatValue && void 0 !== local.value) return local.formatValue(local.value);
+        return `${Math.round(percentage())}%`;
+    });
+    const strokeDashoffset = createMemo(()=>CIRCUMFERENCE - percentage() / 100 * CIRCUMFERENCE);
+    const classes = createMemo(()=>twMerge(CLASSES.base, CLASSES.size[local.size ?? "md"], CLASSES.color[local.color ?? "accent"], isIndeterminate() && CLASSES.state.indeterminate, local.isDisabled && CLASSES.state.disabled, local.class, local.className));
+    return (()=>{
+        var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+        spread(_el$, mergeProps(others, {
+            role: "progressbar"
+        }, ()=>({
+                class: classes()
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-valuenow"] () {
+                return memo(()=>!!isIndeterminate())() ? void 0 : local.value;
+            },
+            get ["aria-valuemin"] () {
+                return min();
+            },
+            get ["aria-valuemax"] () {
+                return max();
+            },
+            get ["aria-valuetext"] () {
+                return memo(()=>!!isIndeterminate())() ? void 0 : valueText();
+            },
+            get ["aria-label"] () {
+                return local.label;
+            },
+            get ["aria-disabled"] () {
+                return local.isDisabled ? "true" : void 0;
+            },
+            get ["data-disabled"] () {
+                return local.isDisabled ? "true" : void 0;
+            }
+        }), false, true);
+        spread(_el$2, mergeProps(()=>({
+                class: CLASSES.svg
+            }), {
+            fill: "none",
+            viewBox: "0 0 36 36"
+        }), true, true);
+        spread(_el$3, mergeProps(()=>({
+                class: CLASSES.trackCircle
+            }), {
+            cx: 18,
+            cy: 18,
+            r: 16,
+            "stroke-width": 4
+        }), true, false);
+        spread(_el$4, mergeProps(()=>({
+                class: CLASSES.indicator
+            }), {
+            cx: 18,
+            cy: 18,
+            r: 16,
+            "stroke-dasharray": `${CIRCUMFERENCE}`,
+            get ["stroke-dashoffset"] () {
+                return `${isIndeterminate() ? 0.75 * CIRCUMFERENCE : strokeDashoffset()}`;
+            },
+            "stroke-linecap": "round",
+            "stroke-width": 4,
+            transform: "rotate(-90 18 18)"
+        }), true, false);
+        return _el$;
+    })();
+};
+const ProgressCircle = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutProgressCircle,
+    embedded: true
+});
+const ProgressCircle_generated = ProgressCircle;
+export default ProgressCircle_generated;

package/dist/components/progress-circle/ProgressCircle.recipe.d.ts

@@ -0,0 +1,28 @@
+export declare const CLASSES: {
+    readonly base: "progress-circle";
+    readonly svg: "progress-circle__track";
+    readonly trackCircle: "progress-circle__track-circle";
+    readonly indicator: "progress-circle__indicator";
+    readonly size: {
+        readonly sm: "progress-circle--sm";
+        readonly md: "progress-circle--md";
+        readonly lg: "progress-circle--lg";
+    };
+    readonly color: {
+        readonly default: "progress-circle--default";
+        readonly accent: "progress-circle--accent";
+        readonly success: "progress-circle--success";
+        readonly warning: "progress-circle--warning";
+        readonly danger: "progress-circle--danger";
+    };
+    readonly state: {
+        readonly indeterminate: "progress-circle--indeterminate";
+        readonly disabled: "progress-circle--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "progress-circle";
+    readonly slots: {
+        readonly root: {};
+    };
+}>;

package/dist/components/progress-circle/ProgressCircle.recipe.js

@@ -0,0 +1,42 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "progress-circle",
+    svg: "progress-circle__track",
+    trackCircle: "progress-circle__track-circle",
+    indicator: "progress-circle__indicator",
+    size: {
+        sm: "progress-circle--sm",
+        md: "progress-circle--md",
+        lg: "progress-circle--lg"
+    },
+    color: {
+        default: "progress-circle--default",
+        accent: "progress-circle--accent",
+        success: "progress-circle--success",
+        warning: "progress-circle--warning",
+        danger: "progress-circle--danger"
+    },
+    state: {
+        indeterminate: "progress-circle--indeterminate",
+        disabled: "progress-circle--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "progress-circle",
+    slots: {
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 0
+        }
+    }
+});
+export { CLASSES, componentRecipe };

package/dist/components/progress-circle/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./ProgressCircle";
-export type { ProgressCircleProps, ProgressCircleSize, ProgressCircleColor, } from "./ProgressCircle";
+export { default } from "./ProgressCircle.generated";
+export type { ProgressCircleProps, ProgressCircleSize, ProgressCircleColor, } from "./ProgressCircle.generated";

package/dist/components/progress-circle/index.js

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

package/dist/components/radio/Radio.generated.d.ts

@@ -0,0 +1,13 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./Radio.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type RadioProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "type" | "children"> & IComponentBaseProps & {
+    children?: JSX.Element;
+    description?: JSX.Element;
+    indicator?: JSX.Element;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+};
+declare const Radio: __LayoutComponent<RadioProps>;
+export default Radio;

package/dist/components/radio/Radio.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 "./Radio.css";
+import { Show, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { RadioGroupContext } from "../radio-group/context.js";
+import { CLASSES, componentRecipe } from "./Radio.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<span data-slot=label>"), _tmpl$2 = /*#__PURE__*/ template("<span>"), _tmpl$3 = /*#__PURE__*/ template("<label><input><span><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 __solidLayoutRadio = (_stable, p)=>{
+    const group = useContext(RadioGroupContext);
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "children",
+        "description",
+        "indicator",
+        "isDisabled",
+        "isInvalid",
+        "disabled",
+        "checked",
+        "value",
+        "name",
+        "onChange",
+        "dataTheme",
+        "aria-invalid"
+    ]);
+    const value = ()=>null != local.value ? String(local.value) : void 0;
+    const isGrouped = ()=>Boolean(group && void 0 !== value());
+    const isSelected = ()=>isGrouped() ? group?.value() === value() : Boolean(local.checked);
+    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled) || Boolean(group?.isDisabled());
+    const isInvalid = ()=>Boolean(local.isInvalid) || Boolean(local["aria-invalid"]) || Boolean(group?.isInvalid());
+    const name = ()=>local.name ?? group?.name();
+    const ariaInvalid = ()=>local["aria-invalid"] ?? (isInvalid() ? true : void 0);
+    const hasContent = ()=>null != local.children || null != local.description;
+    const handleChange = (event)=>{
+        invokeEventHandler(local.onChange, event);
+        if (event.defaultPrevented) return;
+        if (event.currentTarget.checked && group && void 0 !== value()) group.selectValue(value(), event);
+    };
+    return (()=>{
+        var _el$ = _tmpl$3(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+        spread(_el$, mergeProps(()=>({
+                class: twMerge(CLASSES.base, isDisabled() && CLASSES.flag.disabled, local.class, local.className)
+            }), {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            "data-slot": "radio",
+            get ["data-selected"] () {
+                return isSelected() ? "true" : "false";
+            },
+            get ["data-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            },
+            get ["data-invalid"] () {
+                return isInvalid() ? "true" : "false";
+            },
+            get ["aria-disabled"] () {
+                return isDisabled() ? "true" : "false";
+            }
+        }), false, true);
+        spread(_el$2, mergeProps(others, {
+            type: "radio",
+            get value () {
+                return local.value;
+            },
+            get name () {
+                return name();
+            },
+            get checked () {
+                return memo(()=>!!isGrouped())() ? isSelected() : local.checked;
+            },
+            get disabled () {
+                return isDisabled();
+            }
+        }, ()=>({
+                class: CLASSES.slot.input
+            }), {
+            "data-slot": "radio-input",
+            get ["aria-invalid"] () {
+                return ariaInvalid();
+            },
+            onChange: handleChange
+        }), false, false);
+        spread(_el$3, mergeProps(()=>({
+                class: CLASSES.slot.control
+            }), {
+            "data-slot": "radio-control",
+            "aria-hidden": "true"
+        }), false, true);
+        spread(_el$4, mergeProps(()=>({
+                class: CLASSES.slot.indicator
+            }), {
+            "data-slot": "radio-indicator"
+        }), false, true);
+        insert(_el$4, ()=>local.indicator);
+        insert(_el$, createComponent(Show, {
+            get when () {
+                return hasContent();
+            },
+            get children () {
+                var _el$5 = _tmpl$2();
+                spread(_el$5, mergeProps(()=>({
+                        class: CLASSES.slot.content
+                    }), {
+                    "data-slot": "radio-content"
+                }), false, true);
+                insert(_el$5, createComponent(Show, {
+                    get when () {
+                        return local.children;
+                    },
+                    get children () {
+                        var _el$6 = _tmpl$();
+                        insert(_el$6, ()=>local.children);
+                        return _el$6;
+                    }
+                }), null);
+                insert(_el$5, createComponent(Show, {
+                    get when () {
+                        return local.description;
+                    },
+                    get children () {
+                        var _el$7 = _tmpl$2();
+                        spread(_el$7, mergeProps(()=>({
+                                class: CLASSES.slot.description
+                            }), {
+                            "data-slot": "description"
+                        }), false, true);
+                        insert(_el$7, ()=>local.description);
+                        return _el$7;
+                    }
+                }), null);
+                return _el$5;
+            }
+        }), null);
+        return _el$;
+    })();
+};
+const Radio = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutRadio,
+    embedded: true
+});
+const Radio_generated = Radio;
+export default Radio_generated;

package/dist/components/radio/Radio.recipe.d.ts

@@ -0,0 +1,26 @@
+export declare const CLASSES: {
+    readonly base: "radio";
+    readonly slot: {
+        readonly input: "radio__input";
+        readonly control: "radio__control";
+        readonly indicator: "radio__indicator";
+        readonly content: "radio__content";
+        readonly description: "radio__description";
+    };
+    readonly flag: {
+        readonly disabled: "radio--disabled";
+    };
+};
+export declare const componentRecipe: import("solid-layouts").Recipe<{
+    readonly component: "radio";
+    readonly slots: {
+        readonly description: {};
+        readonly label: {};
+        readonly radio: {};
+        readonly "radio-content": {};
+        readonly "radio-control": {};
+        readonly "radio-indicator": {};
+        readonly "radio-input": {};
+        readonly root: {};
+    };
+}>;

package/dist/components/radio/Radio.recipe.js

@@ -0,0 +1,75 @@
+import { recipe } from "../../lib/layouts/index.js";
+const CLASSES = {
+    base: "radio",
+    slot: {
+        input: "radio__input",
+        control: "radio__control",
+        indicator: "radio__indicator",
+        content: "radio__content",
+        description: "radio__description"
+    },
+    flag: {
+        disabled: "radio--disabled"
+    }
+};
+const componentRecipe = recipe({
+    component: "radio",
+    slots: {
+        description: {},
+        label: {},
+        radio: {},
+        "radio-content": {},
+        "radio-control": {},
+        "radio-indicator": {},
+        "radio-input": {},
+        root: {}
+    },
+    _layouts: {
+        slots: {
+            description: {
+                base: "",
+                axes: {}
+            },
+            label: {
+                base: "",
+                axes: {}
+            },
+            radio: {
+                base: "",
+                axes: {}
+            },
+            "radio-content": {
+                base: "",
+                axes: {}
+            },
+            "radio-control": {
+                base: "",
+                axes: {}
+            },
+            "radio-indicator": {
+                base: "",
+                axes: {}
+            },
+            "radio-input": {
+                base: "",
+                axes: {}
+            },
+            root: {
+                base: "",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            description: 0,
+            label: 1,
+            radio: 2,
+            "radio-content": 3,
+            "radio-control": 4,
+            "radio-indicator": 5,
+            "radio-input": 6,
+            root: 7
+        }
+    }
+});
+export { CLASSES, componentRecipe };

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

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

package/dist/components/radio/index.js

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

package/dist/components/radio-group/RadioGroup.generated.d.ts

@@ -0,0 +1,23 @@
+import type { Component as __LayoutComponent } from "solid-js";
+import "./RadioGroup.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export type RadioGroupOrientation = "vertical" | "horizontal";
+export type RadioGroupVariant = "primary" | "secondary";
+export type RadioGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & IComponentBaseProps & {
+    children: JSX.Element;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    orientation?: RadioGroupOrientation;
+    variant?: RadioGroupVariant;
+    label?: JSX.Element;
+    description?: JSX.Element;
+    errorMessage?: JSX.Element;
+};
+declare const RadioGroup: __LayoutComponent<RadioGroupProps>;
+export default RadioGroup;