@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/language-switcher/LanguageSwitcher.js

@@ -0,0 +1,99 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__ from "../dropdown/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__ from "../icon/index.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<span class="text-xs font-bold uppercase"aria-hidden=true>');
+const LanguageSwitcher = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "i18n",
+        "class",
+        "className",
+        "style",
+        "aria-label",
+        "currentLanguageLabel",
+        "optionsLabel",
+        "loadingLabel",
+        "onLanguageChange"
+    ]);
+    const currentLanguageName = ()=>local.i18n.languageNames[local.i18n.locale];
+    const isSelected = (lang)=>local.i18n.locale === lang;
+    const handleSelect = async (lang)=>{
+        await local.i18n.setLocale(lang);
+        local.onLanguageChange?.(lang);
+    };
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)((0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)(local.class, local.className));
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Root, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        role: void 0,
+        get ["aria-label"] () {
+            return local["aria-label"] ?? "Language selector";
+        },
+        get children () {
+            return [
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Trigger, {
+                    class: "btn btn-sm",
+                    get ["aria-label"] () {
+                        return `${local.currentLanguageLabel ?? "Current language"}: ${currentLanguageName()}`;
+                    },
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.Show, {
+                            get when () {
+                                return !local.i18n.isLoading;
+                            },
+                            get fallback () {
+                                return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__icon_index_js_1f7a158c__["default"], {
+                                    name: "icon-[mdi--loading]",
+                                    class: "animate-spin",
+                                    width: 16,
+                                    height: 16,
+                                    get ["aria-label"] () {
+                                        return local.loadingLabel ?? "Loading language";
+                                    }
+                                });
+                            },
+                            get children () {
+                                var _el$ = _tmpl$();
+                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.i18n.locale.toUpperCase());
+                                return _el$;
+                            }
+                        });
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Menu, {
+                    class: "min-w-32",
+                    get ["aria-label"] () {
+                        return local.optionsLabel ?? "Language options";
+                    },
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                            get each () {
+                                return local.i18n.languages;
+                            },
+                            children: (lang)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__dropdown_index_js_67691aa2__["default"].Item, {
+                                    onClick: ()=>handleSelect(lang.code),
+                                    get ["class"] () {
+                                        return isSelected(lang.code) ? "bg-base-200" : "";
+                                    },
+                                    get ["aria-current"] () {
+                                        return isSelected(lang.code) ? "true" : void 0;
+                                    },
+                                    get children () {
+                                        return lang.name;
+                                    }
+                                })
+                        });
+                    }
+                })
+            ];
+        }
+    }));
+};
+const language_switcher_LanguageSwitcher = LanguageSwitcher;
+export { language_switcher_LanguageSwitcher as default };

package/dist/components/language-switcher/createI18n.d.ts

@@ -0,0 +1,102 @@
+import { type JSX, type FlowComponent } from "solid-js";
+export interface Language {
+    code: string;
+    name: string;
+}
+export interface I18nOptions {
+    /**
+     * List of supported languages
+     */
+    languages: Language[];
+    /**
+     * Default language code
+     * @default first language in the list
+     */
+    defaultLanguage?: string;
+    /**
+     * Storage key for persisting locale
+     */
+    storageKey: string;
+    /**
+     * Function to load translations for a locale
+     * Should return a record of translation keys to values
+     */
+    loadTranslations?: (locale: string) => Promise<Record<string, unknown>>;
+    /**
+     * Initial translations (for default language)
+     */
+    initialTranslations?: Record<string, unknown>;
+}
+export interface I18nStore {
+    /**
+     * Current locale code (getter, reactive)
+     */
+    readonly locale: string;
+    /**
+     * Whether translations are currently loading (getter, reactive)
+     */
+    readonly isLoading: boolean;
+    /**
+     * Translation function
+     */
+    t: (key: string) => string;
+    /**
+     * Set the current locale
+     */
+    setLocale: (lang: string) => Promise<void>;
+    /**
+     * Initialize the store (detect language from URL, storage, browser)
+     */
+    init: () => Promise<void>;
+    /**
+     * Available languages
+     */
+    readonly languages: Language[];
+    /**
+     * Language names map for quick lookup
+     */
+    readonly languageNames: Record<string, string>;
+    /**
+     * Supported language codes
+     */
+    readonly supportedCodes: string[];
+}
+/**
+ * Creates an i18n store with configurable options.
+ * API matches nofilter.io's i18nStore for easy migration.
+ *
+ * @example
+ * ```tsx
+ * // Create the store
+ * const i18n = createI18n({
+ *   languages: [
+ *     { code: "en", name: "English" },
+ *     { code: "es", name: "Español" },
+ *   ],
+ *   storageKey: "myapp_locale",
+ *   initialTranslations: enTranslations,
+ *   loadTranslations: (locale) => fetch(`/locales/${locale}.json`).then(r => r.json()),
+ * });
+ *
+ * // Use in components
+ * <p>{i18n.t("greeting")}</p>
+ * <p>Current: {i18n.locale}</p>
+ *
+ * // Initialize on app mount
+ * onMount(() => i18n.init());
+ * ```
+ */
+export declare function createI18n(options: I18nOptions): I18nStore;
+export interface I18nContextValue {
+    i18n: I18nStore;
+}
+export declare const I18nContext: import("solid-js").Context<I18nContextValue | undefined>;
+export declare function useI18n(): I18nStore;
+export interface I18nProviderProps {
+    i18n: I18nStore;
+    children: JSX.Element;
+}
+/**
+ * Provider component for i18n context
+ */
+export declare const I18nProvider: FlowComponent<I18nProviderProps>;

package/dist/components/language-switcher/createI18n.js

@@ -0,0 +1,85 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+function getNestedValue(obj, path) {
+    const keys = path.split(".");
+    let value = obj;
+    for (const key of keys){
+        value = value?.[key];
+        if (void 0 === value) return path;
+    }
+    return "string" == typeof value ? value : path;
+}
+function createI18n(options) {
+    const { languages, defaultLanguage = languages[0]?.code ?? "en", storageKey, loadTranslations, initialTranslations = {} } = options;
+    const supportedCodes = languages.map((l)=>l.code);
+    const languageNames = languages.reduce((acc, lang)=>({
+            ...acc,
+            [lang.code]: lang.name
+        }), {});
+    const [localeSignal, setLocaleSignal] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(defaultLanguage);
+    const [translations, setTranslations] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialTranslations);
+    const [isLoadingSignal, setIsLoading] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const t = (key)=>getNestedValue(translations(), key);
+    const setLocale = async (lang)=>{
+        if (!supportedCodes.includes(lang)) lang = defaultLanguage;
+        if (lang === localeSignal() && Object.keys(translations()).length > 0) return;
+        setIsLoading(true);
+        try {
+            const minDelay = new Promise((resolve)=>setTimeout(resolve, 100));
+            let data;
+            await minDelay;
+            data = lang === defaultLanguage && Object.keys(initialTranslations).length > 0 ? initialTranslations : loadTranslations ? await loadTranslations(lang) : initialTranslations;
+            setTranslations(data);
+            setLocaleSignal(lang);
+            if ("undefined" != typeof window) localStorage.setItem(storageKey, lang);
+        } finally{
+            setIsLoading(false);
+        }
+    };
+    const init = async ()=>{
+        if ("undefined" == typeof window) return;
+        const urlParams = new URLSearchParams(globalThis.location.search);
+        const urlLang = urlParams.get("lang");
+        const saved = localStorage.getItem(storageKey);
+        const browserLang = navigator.language.split("-")[0];
+        let detected;
+        if (urlLang && supportedCodes.includes(urlLang)) {
+            detected = urlLang;
+            urlParams.delete("lang");
+            const newUrl = urlParams.toString() ? `${globalThis.location.pathname}?${urlParams.toString()}` : globalThis.location.pathname;
+            globalThis.history.replaceState({}, "", newUrl);
+        } else detected = saved && supportedCodes.includes(saved) ? saved : supportedCodes.includes(browserLang) ? browserLang : defaultLanguage;
+        await setLocale(detected);
+    };
+    return {
+        get locale () {
+            return localeSignal();
+        },
+        get isLoading () {
+            return isLoadingSignal();
+        },
+        t,
+        setLocale,
+        init,
+        languages,
+        languageNames,
+        supportedCodes
+    };
+}
+const I18nContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+function useI18n() {
+    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(I18nContext);
+    if (!context) throw new Error("useI18n must be used within an I18nProvider");
+    return context.i18n;
+}
+const I18nProvider = (props)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(I18nContext.Provider, {
+        get value () {
+            return {
+                i18n: props.i18n
+            };
+        },
+        get children () {
+            return props.children;
+        }
+    });
+export { I18nContext, I18nProvider, createI18n, useI18n };

package/dist/components/language-switcher/index.d.ts

@@ -0,0 +1,3 @@
+export { default as LanguageSwitcher } from "./LanguageSwitcher";
+export type { LanguageSwitcherProps } from "./LanguageSwitcher";
+export { createI18n, I18nProvider, I18nContext, useI18n, type I18nStore, type I18nOptions, type I18nContextValue, type I18nProviderProps, type Language, } from "./createI18n";

package/dist/components/language-switcher/index.js

@@ -0,0 +1,8 @@
+import * as __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_js_68b561ec__ from "./LanguageSwitcher.js";
+import * as __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__ from "./createI18n.js";
+var __webpack_exports__I18nContext = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.I18nContext;
+var __webpack_exports__I18nProvider = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.I18nProvider;
+var __webpack_exports__LanguageSwitcher = __WEBPACK_EXTERNAL_MODULE__LanguageSwitcher_js_68b561ec__["default"];
+var __webpack_exports__createI18n = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.createI18n;
+var __webpack_exports__useI18n = __WEBPACK_EXTERNAL_MODULE__createI18n_js_f0fd3cf5__.useI18n;
+export { __webpack_exports__I18nContext as I18nContext, __webpack_exports__I18nProvider as I18nProvider, __webpack_exports__LanguageSwitcher as LanguageSwitcher, __webpack_exports__createI18n as createI18n, __webpack_exports__useI18n as useI18n };

package/dist/components/link/Link.d.ts

@@ -1,3 +1,4 @@
+import "./link.css";
 import { type JSX } from "solid-js";
 import type { ComponentColor, IComponentBaseProps } from "../types";
 export type LinkProps = JSX.AnchorHTMLAttributes<HTMLAnchorElement> & IComponentBaseProps & {

package/dist/components/link/Link.js

@@ -0,0 +1,70 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./link.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<a>");
+const Link = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "href",
+        "color",
+        "hover",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "asChild",
+        "aria-current",
+        "aria-label",
+        "aria-describedby"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("link", (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])({
+            "link-hover": false !== local.hover,
+            "link-neutral": "neutral" === local.color,
+            "link-primary": "primary" === local.color,
+            "link-secondary": "secondary" === local.color,
+            "link-accent": "accent" === local.color,
+            "link-info": "info" === local.color,
+            "link-success": "success" === local.color,
+            "link-warning": "warning" === local.color,
+            "link-error": "error" === local.color,
+            "link-ghost": "ghost" === local.color
+        }), local.class, local.className));
+    const ariaCurrent = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-current"]);
+    const ariaLabel = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-label"]);
+    const ariaDescribedby = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local["aria-describedby"]);
+    if (local.asChild) return resolvedChildren();
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+            get href () {
+                return local.href;
+            },
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["aria-current"] () {
+                return ariaCurrent();
+            },
+            get ["aria-label"] () {
+                return ariaLabel();
+            },
+            get ["aria-describedby"] () {
+                return ariaDescribedby();
+            },
+            rel: "noopener noreferrer"
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+        return _el$;
+    })();
+};
+const link_Link = Link;
+export { link_Link as default };

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

@@ -1 +1 @@
-export { default } from "./Link";
+export { default, type LinkProps } from "./Link";

package/dist/components/link/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Link_js_42733813__ from "./Link.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Link_js_42733813__["default"];
+export { __webpack_exports__default as default };

package/dist/components/link/link.css

@@ -0,0 +1,153 @@
+@layer components {
+  .link {
+      cursor: pointer;
+      text-decoration-line: underline;
+    }
+
+  .link:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+
+  @media (forced-colors: active) {
+    .link:focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+    }
+    }
+
+  .link:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+  .link-accent {
+      color: var(--color-accent);
+    }
+
+  @media (hover: hover) {
+    .link-accent:hover {
+      color: var(--color-accent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-accent:hover {
+      color: color-mix(in oklab, var(--color-accent) 80%, #000);
+    }
+    }
+    }
+
+  .link-error {
+      color: var(--color-error);
+    }
+
+  @media (hover: hover) {
+    .link-error:hover {
+      color: var(--color-error);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-error:hover {
+      color: color-mix(in oklab, var(--color-error) 80%, #000);
+    }
+    }
+    }
+
+  .link-info {
+      color: var(--color-info);
+    }
+
+  @media (hover: hover) {
+    .link-info:hover {
+      color: var(--color-info);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-info:hover {
+      color: color-mix(in oklab, var(--color-info) 80%, #000);
+    }
+    }
+    }
+
+  .link-neutral {
+      color: var(--color-neutral);
+    }
+
+  @media (hover: hover) {
+    .link-neutral:hover {
+      color: var(--color-neutral);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-neutral:hover {
+      color: color-mix(in oklab, var(--color-neutral) 80%, #000);
+    }
+    }
+    }
+
+  .link-primary {
+      color: var(--color-primary);
+    }
+
+  @media (hover: hover) {
+    .link-primary:hover {
+      color: var(--color-primary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-primary:hover {
+      color: color-mix(in oklab, var(--color-primary) 80%, #000);
+    }
+    }
+    }
+
+  .link-secondary {
+      color: var(--color-secondary);
+    }
+
+  @media (hover: hover) {
+    .link-secondary:hover {
+      color: var(--color-secondary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-secondary:hover {
+      color: color-mix(in oklab, var(--color-secondary) 80%, #000);
+    }
+    }
+    }
+
+  .link-success {
+      color: var(--color-success);
+    }
+
+  @media (hover: hover) {
+    .link-success:hover {
+      color: var(--color-success);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-success:hover {
+      color: color-mix(in oklab, var(--color-success) 80%, #000);
+    }
+    }
+    }
+
+  .link-warning {
+      color: var(--color-warning);
+    }
+
+  @media (hover: hover) {
+    .link-warning:hover {
+      color: var(--color-warning);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+    .link-warning:hover {
+      color: color-mix(in oklab, var(--color-warning) 80%, #000);
+    }
+    }
+    }
+
+  .link-hover {
+      text-decoration-line: none;
+    }
+
+  @media (hover: hover) {
+    .link-hover:hover {
+      text-decoration-line: underline;
+    }
+    }
+}

package/dist/components/live-chat/LiveChatBubble.d.ts

@@ -0,0 +1,53 @@
+import { type Component, type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+import type { LiveChatPanelProps } from "./LiveChatPanel";
+export interface LiveChatBubbleProps extends IComponentBaseProps {
+    /**
+     * Position of the chat bubble
+     * @default "bottom-right"
+     */
+    position?: "bottom-right" | "bottom-left";
+    /**
+     * ARIA label for the button
+     * @default "Open chat"
+     */
+    "aria-label"?: string;
+    /**
+     * Number of unread messages to show in badge
+     * @default 0
+     */
+    unreadCount?: number;
+    /**
+     * Auto-scroll to the latest message when new messages are appended
+     * @default true
+     */
+    autoScrollOnNewMessage?: boolean;
+    /**
+     * Auto-scroll behavior when moving to the latest message
+     * @default "instant"
+     */
+    autoScrollBehavior?: "instant" | "smooth";
+    /**
+     * Reserved for backward compatibility.
+     * Auto-scroll now always follows new messages when enabled.
+     */
+    stickToBottomThreshold?: number;
+    /**
+     * Props to pass to the LiveChatPanel when opened
+     */
+    panelProps?: Omit<LiveChatPanelProps, "onClose">;
+    /**
+     * Callback when chat is opened
+     */
+    onOpen?: () => void;
+    /**
+     * Callback when chat is closed
+     */
+    onClose?: () => void;
+    /**
+     * Custom children to render inside the button (replaces default icons)
+     */
+    children?: JSX.Element;
+}
+declare const LiveChatBubble: Component<LiveChatBubbleProps>;
+export default LiveChatBubble;