@pathscale/ui 1.3.1 → 1.4.0

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

@@ -1,109 +0,0 @@
-import { memo, mergeProps, spread, template } from "solid-js/web";
-import "./ProgressCircle.css";
-import { createMemo, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./ProgressCircle.classes.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 ProgressCircle = (props)=>{
-    const [local, others] = splitProps(props, [
-        "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 progress_circle_ProgressCircle = ProgressCircle;
-export default progress_circle_ProgressCircle;

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

@@ -1,13 +0,0 @@
-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";
-    };
-};

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

@@ -1,14 +0,0 @@
-const CLASSES = {
-    base: "radio",
-    slot: {
-        input: "radio__input",
-        control: "radio__control",
-        indicator: "radio__indicator",
-        content: "radio__content",
-        description: "radio__description"
-    },
-    flag: {
-        disabled: "radio--disabled"
-    }
-};
-export { CLASSES };

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

@@ -1,12 +0,0 @@
-import "./Radio.css";
-import { type Component, 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: Component<RadioProps>;
-export default Radio;

package/dist/components/radio/Radio.js

@@ -1,143 +0,0 @@
-import { createComponent, insert, memo, mergeProps, spread, template } from "solid-js/web";
-import "./Radio.css";
-import { Show, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { RadioGroupContext } from "../radio-group/context.js";
-import { CLASSES } from "./Radio.classes.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 Radio = (props)=>{
-    const group = useContext(RadioGroupContext);
-    const [local, others] = splitProps(props, [
-        "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_Radio = Radio;
-export default radio_Radio;

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

@@ -1,21 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "radio-group";
-    readonly slot: {
-        readonly label: "radio-group__label";
-        readonly description: "radio-group__description";
-        readonly error: "radio-group__error";
-        readonly items: "radio-group__items";
-    };
-    readonly orientation: {
-        readonly vertical: "radio-group--vertical";
-        readonly horizontal: "radio-group--horizontal";
-    };
-    readonly variant: {
-        readonly primary: "radio-group--primary";
-        readonly secondary: "radio-group--secondary";
-    };
-    readonly flag: {
-        readonly disabled: "radio-group--disabled";
-        readonly invalid: "radio-group--invalid";
-    };
-};

package/dist/components/radio-group/RadioGroup.classes.js

@@ -1,22 +0,0 @@
-const CLASSES = {
-    base: "radio-group",
-    slot: {
-        label: "radio-group__label",
-        description: "radio-group__description",
-        error: "radio-group__error",
-        items: "radio-group__items"
-    },
-    orientation: {
-        vertical: "radio-group--vertical",
-        horizontal: "radio-group--horizontal"
-    },
-    variant: {
-        primary: "radio-group--primary",
-        secondary: "radio-group--secondary"
-    },
-    flag: {
-        disabled: "radio-group--disabled",
-        invalid: "radio-group--invalid"
-    }
-};
-export { CLASSES };

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

@@ -1,22 +0,0 @@
-import "./RadioGroup.css";
-import { type Component, 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: Component<RadioGroupProps>;
-export default RadioGroup;

package/dist/components/radio-group/RadioGroup.js

@@ -1,159 +0,0 @@
-import { createComponent, insert, mergeProps, setAttribute, spread, template } from "solid-js/web";
-import "./RadioGroup.css";
-import { Show, createSignal, createUniqueId, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { RadioGroupContext } from "./context.js";
-import { CLASSES } from "./RadioGroup.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>");
-const RadioGroup = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "value",
-        "defaultValue",
-        "onChange",
-        "name",
-        "isDisabled",
-        "disabled",
-        "isInvalid",
-        "orientation",
-        "variant",
-        "label",
-        "description",
-        "errorMessage",
-        "dataTheme",
-        "aria-describedby",
-        "aria-labelledby"
-    ]);
-    const baseId = createUniqueId();
-    const generatedName = `${baseId}-radio-group`;
-    const [internalValue, setInternalValue] = createSignal(local.defaultValue);
-    const labelId = `${baseId}-label`;
-    const descriptionId = `${baseId}-description`;
-    const errorId = `${baseId}-error`;
-    const orientation = ()=>local.orientation ?? "vertical";
-    const variant = ()=>local.variant ?? "primary";
-    const isControlled = ()=>void 0 !== local.value;
-    const selectedValue = ()=>isControlled() ? local.value : internalValue();
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const isInvalid = ()=>Boolean(local.isInvalid);
-    const name = ()=>local.name ?? generatedName;
-    const handleChange = (nextValue)=>{
-        if (nextValue === selectedValue()) return;
-        if (!isControlled()) setInternalValue(nextValue);
-        local.onChange?.(nextValue);
-    };
-    const describedBy = ()=>{
-        const ids = [
-            local["aria-describedby"]
-        ];
-        if (local.description) ids.push(descriptionId);
-        if (local.errorMessage) ids.push(errorId);
-        return ids.filter(Boolean).join(" ") || void 0;
-    };
-    const labelledBy = ()=>local["aria-labelledby"] ?? (local.label ? labelId : void 0);
-    const contextValue = {
-        name,
-        value: selectedValue,
-        isDisabled,
-        isInvalid,
-        selectValue: (value, event)=>{
-            if (isDisabled() || event.defaultPrevented) return;
-            handleChange(value);
-        }
-    };
-    return createComponent(RadioGroupContext.Provider, {
-        value: contextValue,
-        get children () {
-            var _el$ = _tmpl$2(), _el$4 = _el$.firstChild;
-            spread(_el$, mergeProps(others, {
-                role: "radiogroup",
-                get ["aria-invalid"] () {
-                    return isInvalid() ? "true" : void 0;
-                },
-                get ["aria-labelledby"] () {
-                    return labelledBy();
-                },
-                get ["aria-describedby"] () {
-                    return describedBy();
-                },
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                "data-slot": "radio-group",
-                get ["data-orientation"] () {
-                    return orientation();
-                },
-                get ["data-variant"] () {
-                    return variant();
-                },
-                get ["data-disabled"] () {
-                    return isDisabled() ? "true" : "false";
-                },
-                get ["data-invalid"] () {
-                    return isInvalid() ? "true" : "false";
-                }
-            }, ()=>({
-                    class: twMerge(CLASSES.base, CLASSES.orientation[orientation()], CLASSES.variant[variant()], isDisabled() && CLASSES.flag.disabled, isInvalid() && CLASSES.flag.invalid, local.class, local.className)
-                })), false, true);
-            insert(_el$, createComponent(Show, {
-                get when () {
-                    return local.label;
-                },
-                get children () {
-                    var _el$2 = _tmpl$();
-                    setAttribute(_el$2, "id", labelId);
-                    spread(_el$2, mergeProps(()=>({
-                            class: CLASSES.slot.label
-                        }), {
-                        "data-slot": "label"
-                    }), false, true);
-                    insert(_el$2, ()=>local.label);
-                    return _el$2;
-                }
-            }), _el$4);
-            insert(_el$, createComponent(Show, {
-                get when () {
-                    return local.description;
-                },
-                get children () {
-                    var _el$3 = _tmpl$();
-                    setAttribute(_el$3, "id", descriptionId);
-                    spread(_el$3, mergeProps(()=>({
-                            class: CLASSES.slot.description
-                        }), {
-                        "data-slot": "description"
-                    }), false, true);
-                    insert(_el$3, ()=>local.description);
-                    return _el$3;
-                }
-            }), _el$4);
-            spread(_el$4, mergeProps(()=>({
-                    class: CLASSES.slot.items
-                }), {
-                "data-slot": "radio-group-items"
-            }), false, true);
-            insert(_el$4, ()=>local.children);
-            insert(_el$, createComponent(Show, {
-                get when () {
-                    return local.errorMessage;
-                },
-                get children () {
-                    var _el$5 = _tmpl$();
-                    setAttribute(_el$5, "id", errorId);
-                    spread(_el$5, mergeProps(()=>({
-                            class: CLASSES.slot.error
-                        }), {
-                        "data-slot": "error-message"
-                    }), false, true);
-                    insert(_el$5, ()=>local.errorMessage);
-                    return _el$5;
-                }
-            }), null);
-            return _el$;
-        }
-    });
-};
-const radio_group_RadioGroup = RadioGroup;
-export default radio_group_RadioGroup;

package/dist/components/range-calendar/RangeCalendar.classes.d.ts

@@ -1,11 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "range-calendar";
-        readonly flag: {
-            readonly disabled: "range-calendar--disabled";
-        };
-    };
-    readonly Calendar: {
-        readonly base: "range-calendar__calendar";
-    };
-};

package/dist/components/range-calendar/RangeCalendar.classes.js

@@ -1,12 +0,0 @@
-const CLASSES = {
-    Root: {
-        base: "range-calendar",
-        flag: {
-            disabled: "range-calendar--disabled"
-        }
-    },
-    Calendar: {
-        base: "range-calendar__calendar"
-    }
-};
-export { CLASSES };

package/dist/components/range-calendar/RangeCalendar.d.ts

@@ -1,24 +0,0 @@
-import "./RangeCalendar.css";
-import { type JSX } from "solid-js";
-import { type ControlledDateRangeValue } from "../../hooks/date";
-import { type CalendarWeekdayFormat } from "../calendar";
-import type { IComponentBaseProps } from "../types";
-export type RangeCalendarValue = ControlledDateRangeValue;
-type RangeCalendarBaseProps = {
-    value?: RangeCalendarValue;
-    defaultValue?: RangeCalendarValue;
-    onChange?: (value: RangeCalendarValue) => void;
-    locale?: string;
-    weekdayFormat?: CalendarWeekdayFormat;
-    minValue?: Date;
-    maxValue?: Date;
-    isDateUnavailable?: (date: Date) => boolean;
-    showOutsideDays?: boolean;
-    isDisabled?: boolean;
-    disabled?: boolean;
-    onDaySelect?: (date: Date) => void;
-    onDayHover?: (date?: Date) => void;
-};
-export type RangeCalendarProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "onChange" | "children"> & IComponentBaseProps & RangeCalendarBaseProps;
-declare const RangeCalendar: (props: RangeCalendarProps) => JSX.Element;
-export default RangeCalendar;

package/dist/components/range-calendar/RangeCalendar.js

@@ -1,110 +0,0 @@
-import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import "./RangeCalendar.css";
-import { createMemo, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { useRangeSelection } from "../../hooks/date/index.js";
-import calendar from "../calendar/index.js";
-import { CLASSES } from "./RangeCalendar.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const RangeCalendar = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "ref",
-        "value",
-        "defaultValue",
-        "onChange",
-        "locale",
-        "weekdayFormat",
-        "minValue",
-        "maxValue",
-        "isDateUnavailable",
-        "showOutsideDays",
-        "isDisabled",
-        "disabled",
-        "onDaySelect",
-        "onDayHover"
-    ]);
-    const isDisabled = createMemo(()=>Boolean(local.isDisabled) || Boolean(local.disabled));
-    const rangeSelection = useRangeSelection({
-        value: ()=>local.value,
-        defaultValue: ()=>local.defaultValue,
-        onChange: ()=>local.onChange
-    });
-    const handleDaySelect = (date)=>{
-        local.onDaySelect?.(date);
-        rangeSelection.selectDate(date);
-    };
-    const handleDayHover = (date)=>{
-        local.onDayHover?.(date);
-        rangeSelection.setHoverDate(date);
-    };
-    return (()=>{
-        var _el$ = _tmpl$();
-        use((node)=>{
-            if ("function" == typeof local.ref) local.ref(node);
-        }, _el$);
-        spread(_el$, mergeProps(others, {
-            "data-slot": "range-calendar",
-            get ["data-disabled"] () {
-                return isDisabled() ? "true" : "false";
-            },
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-disabled"] () {
-                return isDisabled() ? "true" : void 0;
-            }
-        }, ()=>({
-                class: twMerge(CLASSES.Root.base, isDisabled() && CLASSES.Root.flag.disabled, local.class, local.className)
-            })), false, true);
-        insert(_el$, createComponent(calendar, mergeProps(()=>({
-                class: CLASSES.Calendar.base
-            }), {
-            selectionMode: "range",
-            get value () {
-                return rangeSelection.focusDate() ?? void 0;
-            },
-            get rangeStart () {
-                return rangeSelection.rangeStart() ?? void 0;
-            },
-            get rangeEnd () {
-                return rangeSelection.rangeEnd() ?? void 0;
-            },
-            get rangePreview () {
-                return rangeSelection.hoveredDate() ?? void 0;
-            },
-            get locale () {
-                return local.locale;
-            },
-            get weekdayFormat () {
-                return local.weekdayFormat;
-            },
-            get minValue () {
-                return local.minValue;
-            },
-            get maxValue () {
-                return local.maxValue;
-            },
-            get isDateUnavailable () {
-                return local.isDateUnavailable;
-            },
-            get showOutsideDays () {
-                return local.showOutsideDays;
-            },
-            get isDisabled () {
-                return isDisabled();
-            },
-            onDaySelect: handleDaySelect,
-            onDayHover: handleDayHover
-        })));
-        return _el$;
-    })();
-};
-const range_calendar_RangeCalendar = RangeCalendar;
-export default range_calendar_RangeCalendar;