@pathscale/ui 1.3.0 → 1.4.0

package/dist/components/text-field/TextField.d.ts

@@ -1,34 +0,0 @@
-import "./TextField.css";
-import { type Accessor, type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type TextFieldVariant = "primary" | "secondary";
-export type TextFieldRenderProps = {
-    isInvalid: boolean;
-    isDisabled: boolean;
-    isRequired: boolean;
-};
-export type TextFieldContextValue = {
-    variant: Accessor<TextFieldVariant>;
-    fullWidth: Accessor<boolean>;
-    isInvalid: Accessor<boolean>;
-    isDisabled: Accessor<boolean>;
-    isRequired: Accessor<boolean>;
-};
-export declare const TextFieldContext: import("solid-js").Context<TextFieldContextValue | undefined>;
-export type TextFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element | ((props: TextFieldRenderProps) => JSX.Element);
-    variant?: TextFieldVariant;
-    fullWidth?: boolean;
-    isInvalid?: boolean;
-    isDisabled?: boolean;
-    disabled?: boolean;
-    isRequired?: boolean;
-};
-declare const TextFieldRoot: Component<TextFieldRootProps>;
-declare const TextField: Component<TextFieldRootProps> & {
-    Root: Component<TextFieldRootProps>;
-};
-declare const useTextFieldContext: () => TextFieldContextValue | undefined;
-export default TextField;
-export { TextField, TextFieldRoot, useTextFieldContext };
-export type { TextFieldRootProps as TextFieldProps };

package/dist/components/text-field/TextField.js

@@ -1,83 +0,0 @@
-import { createComponent, insert, mergeProps, spread, template } from "solid-js/web";
-import "./TextField.css";
-import { createContext, splitProps, useContext } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { CLASSES } from "./TextField.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div>");
-const TextFieldContext = createContext();
-const TextFieldRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "style",
-        "variant",
-        "fullWidth",
-        "isInvalid",
-        "isDisabled",
-        "disabled",
-        "isRequired"
-    ]);
-    const variant = ()=>local.variant ?? "primary";
-    const fullWidth = ()=>Boolean(local.fullWidth);
-    const isInvalid = ()=>Boolean(local.isInvalid);
-    const isDisabled = ()=>Boolean(local.isDisabled) || Boolean(local.disabled);
-    const isRequired = ()=>Boolean(local.isRequired);
-    const renderChildren = ()=>{
-        if ("function" == typeof local.children) return local.children({
-            isInvalid: isInvalid(),
-            isDisabled: isDisabled(),
-            isRequired: isRequired()
-        });
-        return local.children;
-    };
-    return createComponent(TextFieldContext.Provider, {
-        value: {
-            variant,
-            fullWidth,
-            isInvalid,
-            isDisabled,
-            isRequired
-        },
-        get children () {
-            var _el$ = _tmpl$();
-            spread(_el$, mergeProps(others, {
-                get ["class"] () {
-                    return twMerge(CLASSES.base, CLASSES.variant[variant()], fullWidth() && CLASSES.flag.fullWidth, local.class, local.className);
-                },
-                "data-slot": "textfield",
-                get ["data-invalid"] () {
-                    return isInvalid() ? "true" : void 0;
-                },
-                get ["data-disabled"] () {
-                    return isDisabled() ? "true" : void 0;
-                },
-                get ["data-required"] () {
-                    return isRequired() ? "true" : void 0;
-                },
-                get ["aria-invalid"] () {
-                    return isInvalid() ? "true" : void 0;
-                },
-                get ["aria-disabled"] () {
-                    return isDisabled() ? "true" : void 0;
-                },
-                get ["data-theme"] () {
-                    return local.dataTheme;
-                },
-                get style () {
-                    return local.style;
-                }
-            }), false, true);
-            insert(_el$, renderChildren);
-            return _el$;
-        }
-    });
-};
-const TextField = Object.assign(TextFieldRoot, {
-    Root: TextFieldRoot
-});
-const useTextFieldContext = ()=>useContext(TextFieldContext);
-const text_field_TextField = TextField;
-export default text_field_TextField;
-export { TextField, TextFieldContext, TextFieldRoot, useTextFieldContext };

package/dist/components/textarea/Textarea.classes.d.ts

@@ -1,3 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "";
-};

package/dist/components/textarea/Textarea.classes.js

@@ -1,4 +0,0 @@
-const CLASSES = {
-    base: ""
-};
-export { CLASSES };

package/dist/components/textarea/Textarea.d.ts

@@ -1,10 +0,0 @@
-import { type Component } from "solid-js";
-import { TextArea, TextAreaRoot, type TextAreaProps as BaseTextAreaProps, type TextAreaRootProps as BaseTextAreaRootProps, type TextAreaVariant as BaseTextAreaVariant } from "../text-area";
-export type TextareaVariant = BaseTextAreaVariant;
-export type TextareaRootProps = BaseTextAreaRootProps;
-export type TextareaProps = BaseTextAreaProps;
-declare const Textarea: Component<BaseTextAreaProps> & {
-    Root: Component<BaseTextAreaProps>;
-};
-export default Textarea;
-export { Textarea, TextArea, TextAreaRoot };

package/dist/components/textarea/Textarea.js

@@ -1,20 +0,0 @@
-import { createComponent, mergeProps } from "solid-js/web";
-import { splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { TextArea, TextAreaRoot } from "../text-area/index.js";
-import { CLASSES } from "./Textarea.classes.js";
-const TextareaRoot = (props)=>{
-    const [local, others] = splitProps(props, [
-        "class",
-        "className"
-    ]);
-    return createComponent(TextAreaRoot, mergeProps(others, ()=>({
-            class: twMerge(CLASSES.base, local.class, local.className)
-        })));
-};
-const Textarea = Object.assign(TextareaRoot, {
-    Root: TextareaRoot
-});
-const textarea_Textarea = Textarea;
-export default textarea_Textarea;
-export { TextArea, TextAreaRoot, Textarea };

package/dist/components/theme-color-picker/ThemeColorPicker.classes.d.ts

@@ -1,12 +0,0 @@
-export declare const CLASSES: {
-    readonly base: "relative";
-    readonly iconActive: "text-primary";
-    readonly popover: "fixed z-50 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm";
-    readonly popoverAlignStart: "left-0";
-    readonly popoverAlignEnd: "right-0";
-    readonly row: "flex items-center gap-3";
-    readonly wheelWrap: "flex justify-center";
-    readonly wheelCustom: "color-wheel-custom";
-    readonly grayscaleList: "flex flex-col gap-1.5";
-    readonly swatchButton: "h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110";
-};

package/dist/components/theme-color-picker/ThemeColorPicker.classes.js

@@ -1,13 +0,0 @@
-const CLASSES = {
-    base: "relative",
-    iconActive: "text-primary",
-    popover: "fixed z-50 rounded-lg bg-base-200/80 p-4 shadow-xl backdrop-blur-sm",
-    popoverAlignStart: "left-0",
-    popoverAlignEnd: "right-0",
-    row: "flex items-center gap-3",
-    wheelWrap: "flex justify-center",
-    wheelCustom: "color-wheel-custom",
-    grayscaleList: "flex flex-col gap-1.5",
-    swatchButton: "h-6 w-6 rounded-full border border-white/20 transition-transform hover:scale-110"
-};
-export { CLASSES };

package/dist/components/theme-color-picker/ThemeColorPicker.d.ts

@@ -1,49 +0,0 @@
-import { type Component, type JSX } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-import { type OverlayPlacement } from "../_shared/overlayPosition";
-export type ThemeColorPickerAlign = "start" | "end";
-export type ThemeColorPickerPlacement = OverlayPlacement;
-export interface ThemeColorPickerProps extends IComponentBaseProps {
-    /**
-     * Prefix for localStorage keys (e.g., "myapp" becomes "myapp_theme_color")
-     * @default "theme"
-     */
-    storagePrefix?: string;
-    /**
-     * Callback when color changes. Passes the hex string (or null on reset).
-     * Kept with legacy `(hue, saturation)` signature for backward compatibility -
-     * hue is derived from the picked hex, saturation is forwarded as-is.
-     */
-    onColorChange?: (hue: number | null, saturation: number) => void;
-    /**
-     * Callback to switch light/dark theme (triggered by grayscale selection)
-     */
-    onThemeSwitch?: (theme: "light" | "dark") => void;
-    /**
-     * ARIA label for the button
-     */
-    "aria-label"?: string;
-    /**
-     * Popover alignment relative to the trigger.
-     * "end" aligns the popover to the trigger's right edge (opens leftward).
-     * "start" aligns it to the trigger's left edge (opens rightward).
-     * @default "end"
-     */
-    align?: ThemeColorPickerAlign;
-    /**
-     * Preferred popover placement.
-     * @default "bottom"
-     */
-    placement?: ThemeColorPickerPlacement;
-    /**
-     * Automatically flip the popover when there is insufficient viewport space.
-     * @default true
-     */
-    autoFlip?: boolean;
-    /**
-     * Custom button content (defaults to palette icon)
-     */
-    children?: JSX.Element;
-}
-declare const ThemeColorPicker: Component<ThemeColorPickerProps>;
-export default ThemeColorPicker;

package/dist/components/theme-color-picker/ThemeColorPicker.js

@@ -1,234 +0,0 @@
-import { Portal, createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
-import { For, Show, createEffect, createMemo, createSignal, onCleanup, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-import { ColorPickerContext, ColorWheelFlower } from "../color-wheel-flower/index.js";
-import { createColorFromHsl, parseColor } from "../color-wheel-flower/ColorUtils.js";
-import button_0 from "../button/index.js";
-import icon from "../icon/index.js";
-import { createOverlayPosition } from "../_shared/overlayPosition.js";
-import { createHueShiftStore } from "./hueShift.js";
-import { CLASSES } from "./ThemeColorPicker.classes.js";
-var _tmpl$ = /*#__PURE__*/ template("<div><div></div><div>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<button type=button>");
-function hexToColorValue(hex) {
-    if (null === hex) return createColorFromHsl(0, 0, 100, 1);
-    return parseColor(hex) ?? createColorFromHsl(0, 0, 100, 1);
-}
-const ThemeColorPicker = (props)=>{
-    const [local, others] = splitProps(props, [
-        "storagePrefix",
-        "onColorChange",
-        "onThemeSwitch",
-        "aria-label",
-        "align",
-        "placement",
-        "autoFlip",
-        "children",
-        "class",
-        "className",
-        "style",
-        "dataTheme"
-    ]);
-    const [isOpen, setIsOpen] = createSignal(false);
-    const [featureAvailable, setFeatureAvailable] = createSignal(true);
-    const [containerRef, setContainerRef] = createSignal();
-    const [popoverRef, setPopoverRef] = createSignal();
-    const store = createHueShiftStore(local.storagePrefix ?? "theme");
-    const colorValue = createMemo(()=>hexToColorValue(store.themeColor()));
-    const handleColorChange = (color)=>{
-        const { s, l } = color.hsl;
-        if (s < 10 && l > 90) {
-            store.setThemeColor(null);
-            local.onColorChange?.(null, 100);
-            return;
-        }
-        store.setThemeColor(color.hex);
-        local.onColorChange?.(color.hsl.h, color.hsl.s);
-    };
-    const GRAYSCALE_SWATCHES = [
-        {
-            label: "White",
-            hex: "#fafafa",
-            theme: "dark"
-        },
-        {
-            label: "Light gray",
-            hex: "#d4d4d4",
-            theme: "dark"
-        },
-        {
-            label: "Gray",
-            hex: "#737373",
-            theme: "dark"
-        },
-        {
-            label: "Dark gray",
-            hex: "#404040",
-            theme: "light"
-        },
-        {
-            label: "Charcoal",
-            hex: "#262626",
-            theme: "light"
-        },
-        {
-            label: "Black",
-            hex: "#0a0a0a",
-            theme: "light"
-        }
-    ];
-    const handleGrayscale = (swatch)=>{
-        local.onThemeSwitch?.(swatch.theme);
-        store.setThemeColor(swatch.hex);
-        local.onColorChange?.(null, 0);
-    };
-    createEffect(()=>{
-        if (!isOpen()) return;
-        const handleClickOutside = (e)=>{
-            const target = e.target;
-            if (containerRef()?.contains(target)) return;
-            if (popoverRef()?.contains(target)) return;
-            setIsOpen(false);
-        };
-        const timer = setTimeout(()=>{
-            document.addEventListener("click", handleClickOutside);
-        }, 0);
-        onCleanup(()=>{
-            clearTimeout(timer);
-            document.removeEventListener("click", handleClickOutside);
-        });
-    });
-    const handleKeyDown = (e)=>{
-        if ("Escape" === e.key && isOpen()) setIsOpen(false);
-    };
-    createEffect(()=>{
-        const timer = setTimeout(()=>{
-            setFeatureAvailable(true);
-        }, 0);
-        onCleanup(()=>clearTimeout(timer));
-    });
-    const contextValue = ()=>({
-            color: colorValue,
-            format: ()=>"hsl",
-            disabled: ()=>false,
-            onChange: handleColorChange,
-            onFormatChange: ()=>{}
-        });
-    const classes = ()=>twMerge(CLASSES.base, local.class, local.className);
-    const popoverClasses = ()=>CLASSES.popover;
-    const overlayPosition = createOverlayPosition({
-        open: isOpen,
-        triggerRef: containerRef,
-        overlayRef: popoverRef,
-        placement: ()=>local.placement ?? "bottom",
-        offset: ()=>8,
-        autoFlip: ()=>local.autoFlip ?? true,
-        align: ()=>"start" === local.align ? "start" : "end"
-    });
-    const popoverStyle = ()=>overlayPosition.style();
-    return createComponent(Show, {
-        get when () {
-            return featureAvailable();
-        },
-        get children () {
-            var _el$ = _tmpl$2();
-            use(setContainerRef, _el$);
-            spread(_el$, mergeProps(()=>({
-                    class: classes()
-                }), {
-                onKeyDown: handleKeyDown,
-                get style () {
-                    return local.style;
-                }
-            }, others), false, true);
-            insert(_el$, createComponent(button_0, {
-                type: "button",
-                size: "sm",
-                variant: "ghost",
-                onClick: ()=>setIsOpen(!isOpen()),
-                get ["aria-label"] () {
-                    return local["aria-label"] ?? "Change theme color";
-                },
-                get ["aria-expanded"] () {
-                    return isOpen();
-                },
-                get children () {
-                    return local.children ?? createComponent(icon, mergeProps({
-                        name: "icon-[mdi--palette]",
-                        width: 16,
-                        height: 16
-                    }, ()=>({
-                            class: null !== store.themeColor() ? CLASSES.iconActive : void 0
-                        })));
-                }
-            }), null);
-            insert(_el$, createComponent(Show, {
-                get when () {
-                    return isOpen();
-                },
-                get children () {
-                    return createComponent(Portal, {
-                        get children () {
-                            var _el$2 = _tmpl$2();
-                            use(setPopoverRef, _el$2);
-                            spread(_el$2, mergeProps(()=>({
-                                    class: popoverClasses()
-                                }), {
-                                get ["data-placement"] () {
-                                    return overlayPosition.placement();
-                                },
-                                get style () {
-                                    return popoverStyle();
-                                }
-                            }), false, true);
-                            insert(_el$2, createComponent(ColorPickerContext.Provider, {
-                                get value () {
-                                    return contextValue();
-                                },
-                                get children () {
-                                    var _el$3 = _tmpl$(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
-                                    spread(_el$3, mergeProps(()=>({
-                                            class: CLASSES.row
-                                        })), false, true);
-                                    spread(_el$4, mergeProps(()=>({
-                                            class: CLASSES.wheelWrap
-                                        })), false, true);
-                                    insert(_el$4, createComponent(ColorWheelFlower, mergeProps(()=>({
-                                            class: CLASSES.wheelCustom
-                                        }))));
-                                    spread(_el$5, mergeProps(()=>({
-                                            class: CLASSES.grayscaleList
-                                        })), false, true);
-                                    insert(_el$5, createComponent(For, {
-                                        each: GRAYSCALE_SWATCHES,
-                                        children: (g)=>(()=>{
-                                                var _el$6 = _tmpl$3();
-                                                spread(_el$6, mergeProps(()=>({
-                                                        class: CLASSES.swatchButton
-                                                    }), {
-                                                    get style () {
-                                                        return {
-                                                            "background-color": `${g.hex}`
-                                                        };
-                                                    },
-                                                    get ["aria-label"] () {
-                                                        return g.label;
-                                                    },
-                                                    onClick: ()=>handleGrayscale(g)
-                                                }), false, false);
-                                                return _el$6;
-                                            })()
-                                    }));
-                                    return _el$3;
-                                }
-                            }));
-                            return _el$2;
-                        }
-                    });
-                }
-            }), null);
-            return _el$;
-        }
-    });
-};
-const theme_color_picker_ThemeColorPicker = ThemeColorPicker;
-export default theme_color_picker_ThemeColorPicker;

package/dist/components/time-field/TimeField.classes.d.ts

@@ -1,37 +0,0 @@
-export declare const CLASSES: {
-    readonly Root: {
-        readonly base: "time-field";
-        readonly variant: {
-            readonly primary: "time-field--primary";
-            readonly secondary: "time-field--secondary";
-        };
-        readonly flag: {
-            readonly fullWidth: "time-field--full-width";
-        };
-    };
-    readonly Group: {
-        readonly base: "date-input-group";
-        readonly variant: {
-            readonly primary: "date-input-group--primary";
-            readonly secondary: "date-input-group--secondary";
-        };
-        readonly flag: {
-            readonly fullWidth: "date-input-group--full-width";
-        };
-    };
-    readonly Input: {
-        readonly base: "date-input-group__input";
-    };
-    readonly InputContainer: {
-        readonly base: "date-input-group__input-container";
-    };
-    readonly Segment: {
-        readonly base: "date-input-group__segment";
-    };
-    readonly Prefix: {
-        readonly base: "date-input-group__prefix";
-    };
-    readonly Suffix: {
-        readonly base: "date-input-group__suffix";
-    };
-};

package/dist/components/time-field/TimeField.classes.js

@@ -1,38 +0,0 @@
-const CLASSES = {
-    Root: {
-        base: "time-field",
-        variant: {
-            primary: "time-field--primary",
-            secondary: "time-field--secondary"
-        },
-        flag: {
-            fullWidth: "time-field--full-width"
-        }
-    },
-    Group: {
-        base: "date-input-group",
-        variant: {
-            primary: "date-input-group--primary",
-            secondary: "date-input-group--secondary"
-        },
-        flag: {
-            fullWidth: "date-input-group--full-width"
-        }
-    },
-    Input: {
-        base: "date-input-group__input"
-    },
-    InputContainer: {
-        base: "date-input-group__input-container"
-    },
-    Segment: {
-        base: "date-input-group__segment"
-    },
-    Prefix: {
-        base: "date-input-group__prefix"
-    },
-    Suffix: {
-        base: "date-input-group__suffix"
-    }
-};
-export { CLASSES };

package/dist/components/time-field/TimeField.d.ts

@@ -1,64 +0,0 @@
-import "./TimeField.css";
-import { type Component, type JSX, type ParentComponent } from "solid-js";
-import type { IComponentBaseProps } from "../types";
-export type TimeFieldVariant = "primary" | "secondary";
-export type TimeFieldRenderProps = {
-    value: string;
-    isInvalid: boolean;
-    isDisabled: boolean;
-    isRequired: boolean;
-};
-export type TimeFieldRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "onChange" | "onBlur"> & IComponentBaseProps & {
-    children?: JSX.Element | ((props: TimeFieldRenderProps) => JSX.Element);
-    name?: string;
-    value?: string;
-    defaultValue?: string;
-    onChange?: (value: string) => void;
-    onBlur?: JSX.EventHandlerUnion<HTMLInputElement, FocusEvent>;
-    fullWidth?: boolean;
-    variant?: TimeFieldVariant;
-    isDisabled?: boolean;
-    disabled?: boolean;
-    isInvalid?: boolean;
-    isRequired?: boolean;
-    required?: boolean;
-};
-export type TimeFieldGroupProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & IComponentBaseProps & {
-    children?: JSX.Element | ((props: TimeFieldRenderProps) => JSX.Element);
-};
-export type TimeFieldInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "value" | "onInput" | "type"> & IComponentBaseProps & {
-    onInput?: JSX.EventHandlerUnion<HTMLInputElement, InputEvent>;
-};
-export type TimeFieldInputContainerProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type TimeFieldSegmentValue = {
-    type?: string;
-    text?: string;
-    isPlaceholder?: boolean;
-    isFocused?: boolean;
-    isInvalid?: boolean;
-    isDisabled?: boolean;
-};
-export type TimeFieldSegmentProps = JSX.HTMLAttributes<HTMLSpanElement> & IComponentBaseProps & {
-    segment?: TimeFieldSegmentValue;
-};
-export type TimeFieldPrefixProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-export type TimeFieldSuffixProps = JSX.HTMLAttributes<HTMLDivElement> & IComponentBaseProps;
-declare const TimeFieldRoot: ParentComponent<TimeFieldRootProps>;
-declare const TimeFieldGroup: ParentComponent<TimeFieldGroupProps>;
-declare const TimeFieldInput: Component<TimeFieldInputProps>;
-declare const TimeFieldInputContainer: ParentComponent<TimeFieldInputContainerProps>;
-declare const TimeFieldSegment: ParentComponent<TimeFieldSegmentProps>;
-declare const TimeFieldPrefix: ParentComponent<TimeFieldPrefixProps>;
-declare const TimeFieldSuffix: ParentComponent<TimeFieldSuffixProps>;
-declare const TimeField: ParentComponent<TimeFieldRootProps> & {
-    Root: ParentComponent<TimeFieldRootProps>;
-    Group: ParentComponent<TimeFieldGroupProps>;
-    Input: Component<TimeFieldInputProps>;
-    InputContainer: ParentComponent<TimeFieldInputContainerProps>;
-    Segment: ParentComponent<TimeFieldSegmentProps>;
-    Prefix: ParentComponent<TimeFieldPrefixProps>;
-    Suffix: ParentComponent<TimeFieldSuffixProps>;
-};
-export default TimeField;
-export { TimeField, TimeFieldRoot, TimeFieldGroup, TimeFieldInput, TimeFieldInputContainer, TimeFieldSegment, TimeFieldPrefix, TimeFieldSuffix, };
-export type { TimeFieldRootProps as TimeFieldProps };