@pathscale/ui 0.1.0 → 1.2.0

package/dist/components/immersive-landing/index.js

@@ -0,0 +1,14 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_js_2b17ea6a__ from "./ImmersiveLanding.js";
+import * as __WEBPACK_EXTERNAL_MODULE__useImmersiveLanding_js_66194376__ from "./useImmersiveLanding.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__ from "./ImmersiveLandingContext.js";
+import * as __WEBPACK_EXTERNAL_MODULE__components_CookieConsent_js_dd55e062__ from "./components/CookieConsent.js";
+import * as __WEBPACK_EXTERNAL_MODULE__components_PWAInstallPrompt_js_a5e100bf__ from "./components/PWAInstallPrompt.js";
+import * as __WEBPACK_EXTERNAL_MODULE__components_FirefoxPWABanner_js_46fc5861__ from "./components/FirefoxPWABanner.js";
+var __webpack_exports__CookieConsent = __WEBPACK_EXTERNAL_MODULE__components_CookieConsent_js_dd55e062__.CookieConsent;
+var __webpack_exports__FirefoxPWABanner = __WEBPACK_EXTERNAL_MODULE__components_FirefoxPWABanner_js_46fc5861__.FirefoxPWABanner;
+var __webpack_exports__ImmersiveLandingContext = __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__.ImmersiveLandingContext;
+var __webpack_exports__PWAInstallPrompt = __WEBPACK_EXTERNAL_MODULE__components_PWAInstallPrompt_js_a5e100bf__.PWAInstallPrompt;
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__ImmersiveLanding_js_2b17ea6a__["default"];
+var __webpack_exports__useImmersiveLanding = __WEBPACK_EXTERNAL_MODULE__useImmersiveLanding_js_66194376__.useImmersiveLanding;
+var __webpack_exports__useImmersiveLandingContext = __WEBPACK_EXTERNAL_MODULE__ImmersiveLandingContext_js_0e3f38c0__.useImmersiveLandingContext;
+export { __webpack_exports__CookieConsent as CookieConsent, __webpack_exports__FirefoxPWABanner as FirefoxPWABanner, __webpack_exports__ImmersiveLandingContext as ImmersiveLandingContext, __webpack_exports__PWAInstallPrompt as PWAInstallPrompt, __webpack_exports__default as default, __webpack_exports__useImmersiveLanding as useImmersiveLanding, __webpack_exports__useImmersiveLandingContext as useImmersiveLandingContext };

package/dist/components/immersive-landing/types.d.ts

@@ -0,0 +1,134 @@
+import type { JSX, Accessor } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+export interface UseImmersiveLandingOptions {
+    pages: readonly string[];
+    initialPage?: string;
+    currentPage?: Accessor<string>;
+    transitionDuration?: number;
+    onNavigate?: (fromPage: string, toPage: string) => void;
+    onNavigationComplete?: (page: string) => void;
+    enableScrollNavigation?: boolean;
+}
+export interface UseImmersiveLandingReturn {
+    activePage: Accessor<string>;
+    isTransitioning: Accessor<boolean>;
+    navigateTo: (pageId: string) => void;
+    goNext: () => void;
+    goPrev: () => void;
+    currentIndex: Accessor<number>;
+    isFirstPage: Accessor<boolean>;
+    isLastPage: Accessor<boolean>;
+    direction: Accessor<"next" | "prev" | null>;
+    transitionDuration: number;
+}
+export interface ImmersiveLandingContextValue {
+    activePage: Accessor<string>;
+    navigateTo: (pageId: string) => void;
+    goNext: () => void;
+    goPrev: () => void;
+    currentIndex: Accessor<number>;
+    totalPages: number;
+    isFirstPage: Accessor<boolean>;
+    isLastPage: Accessor<boolean>;
+    direction: Accessor<"next" | "prev" | null>;
+    transitionDuration: number;
+    pages: readonly string[];
+    appVersion?: string;
+}
+export interface ImmersiveLandingProps extends IComponentBaseProps {
+    pages: readonly string[];
+    initialPage?: string;
+    currentPage?: Accessor<string>;
+    transitionDuration?: number;
+    onNavigate?: (fromPage: string, toPage: string) => void;
+    onNavigationComplete?: (page: string) => void;
+    enableScrollNavigation?: boolean;
+    showNavigation?: boolean;
+    showArrows?: boolean;
+    appVersion?: string;
+    overlay?: JSX.Element | ((context: ImmersiveLandingContextValue) => JSX.Element);
+    children: JSX.Element | ((context: ImmersiveLandingContextValue) => JSX.Element);
+    pwaConfig?: PWAInstallPromptProps;
+    cookieConfig?: CookieConsentProps;
+    firefoxPWAConfig?: FirefoxPWABannerProps;
+    showPWAPrompt?: boolean;
+    showCookieConsent?: boolean;
+    showFirefoxBanner?: boolean;
+}
+export interface ImmersiveLandingPageProps extends IComponentBaseProps {
+    id: string;
+    children: JSX.Element;
+}
+export interface ImmersiveLandingArrowsProps extends IComponentBaseProps {
+    onPrev: () => void;
+    onNext: () => void;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+}
+export interface ImmersiveLandingNavigationProps extends IComponentBaseProps {
+    pages: readonly string[];
+    currentPageIndex: number;
+    onPageDotClick: (pageId: string) => void;
+    onPrev: () => void;
+    onNext: () => void;
+    isFirstPage: boolean;
+    isLastPage: boolean;
+}
+export type ConsentType = "all" | "essential" | "custom";
+export interface CookieConsentTexts {
+    message?: string;
+    acceptAll?: string;
+    decline?: string;
+    manage?: string;
+    manageTitle?: string;
+    essential?: string;
+    analytics?: string;
+    marketing: string;
+    cancel?: string;
+    save?: string;
+    closeLabel?: string;
+}
+export interface CookieConsentStorageKeys {
+    consentKey?: string;
+    analyticsKey?: string;
+    marketingKey?: string;
+}
+export interface CookieConsentProps {
+    texts?: CookieConsentTexts;
+    storageKeys?: CookieConsentStorageKeys;
+    onConsentChange?: (payload: {
+        type: ConsentType;
+        analytics: boolean;
+        marketing: boolean;
+    }) => void;
+}
+export type BrowserType = "firefox" | "safari" | "other" | "supported";
+export interface FirefoxPWABannerTexts {
+    title?: string;
+    description?: string;
+    installButton?: string;
+    dismissButton?: string;
+    closeLabel?: string;
+}
+export interface FirefoxPWABannerProps {
+    extensionUrl?: string;
+    storageKey?: string;
+    texts?: FirefoxPWABannerTexts;
+    onInstall?: () => void;
+    onDismiss?: () => void;
+}
+export interface PWAInstallPromptTexts {
+    title?: string;
+    description?: string;
+    installButton?: string;
+    notNowButton?: string;
+    closeLabel?: string;
+}
+export interface PWAInstallPromptProps {
+    appName?: string;
+    appIcon?: string;
+    storageKey?: string;
+    texts?: PWAInstallPromptTexts;
+    onInstall?: () => void;
+    onDismiss?: () => void;
+}

package/dist/components/immersive-landing/useImmersiveLanding.d.ts

@@ -0,0 +1,2 @@
+import type { UseImmersiveLandingOptions, UseImmersiveLandingReturn } from "./types";
+export declare function useImmersiveLanding(options: UseImmersiveLandingOptions): UseImmersiveLandingReturn;

package/dist/components/immersive-landing/useImmersiveLanding.js

@@ -0,0 +1,151 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+function useImmersiveLanding(options) {
+    const { pages, initialPage = pages[0], currentPage: controlledPage, transitionDuration = 400, onNavigate, onNavigationComplete, enableScrollNavigation = true } = options;
+    const isControlled = !!controlledPage;
+    const [internalPage, setInternalPage] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(initialPage);
+    const [isTransitioning, setIsTransitioning] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [direction, setDirection] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(null);
+    const activePage = isControlled ? controlledPage : internalPage;
+    const currentIndex = ()=>pages.indexOf(activePage());
+    const isFirstPage = ()=>0 === currentIndex();
+    const isLastPage = ()=>currentIndex() === pages.length - 1;
+    if (isControlled) {
+        let prevPage = controlledPage();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+            const next = controlledPage();
+            if (next !== prevPage && !isTransitioning()) {
+                const fromIndex = pages.indexOf(prevPage);
+                const toIndex = pages.indexOf(next);
+                if (toIndex >= 0) {
+                    setDirection(toIndex > fromIndex ? "next" : "prev");
+                    setIsTransitioning(true);
+                    setTimeout(()=>{
+                        setIsTransitioning(false);
+                        setDirection(null);
+                    }, transitionDuration);
+                }
+                prevPage = next;
+            }
+        });
+    }
+    const navigateToInternal = (pageId)=>{
+        if (isTransitioning() || !pages.includes(pageId)) return;
+        if (pageId === activePage()) return;
+        const fromPage = activePage();
+        const fromIndex = pages.indexOf(fromPage);
+        const toIndex = pages.indexOf(pageId);
+        setDirection(toIndex > fromIndex ? "next" : "prev");
+        setIsTransitioning(true);
+        if (!isControlled) setInternalPage(pageId);
+        if (onNavigate) onNavigate(fromPage, pageId);
+        setTimeout(()=>{
+            setIsTransitioning(false);
+            setDirection(null);
+            const pageElement = document.getElementById(pageId);
+            if (pageElement) pageElement.focus({
+                preventScroll: true
+            });
+            if (onNavigationComplete) onNavigationComplete(pageId);
+        }, transitionDuration);
+    };
+    const navigateTo = (pageId)=>navigateToInternal(pageId);
+    const goNext = ()=>{
+        const idx = currentIndex();
+        if (idx < pages.length - 1) navigateToInternal(pages[idx + 1]);
+    };
+    const goPrev = ()=>{
+        const idx = currentIndex();
+        if (idx > 0) navigateToInternal(pages[idx - 1]);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+        if ("undefined" == typeof window) return;
+        if (!enableScrollNavigation) return;
+        let scrollLocked = false;
+        const SCROLL_COOLDOWN = 1000;
+        let touchStartY = 0;
+        const handleWheel = (e)=>{
+            if (scrollLocked || isTransitioning()) return;
+            if (e.deltaY > 0) goNext();
+            else if (e.deltaY < 0) goPrev();
+            scrollLocked = true;
+            setTimeout(()=>{
+                scrollLocked = false;
+            }, SCROLL_COOLDOWN);
+        };
+        const handleTouchStart = (e)=>{
+            touchStartY = e.touches[0].clientY;
+        };
+        const handleTouchEnd = (e)=>{
+            if (scrollLocked || isTransitioning()) return;
+            const touchEndY = e.changedTouches[0].clientY;
+            const deltaY = touchStartY - touchEndY;
+            if (Math.abs(deltaY) < 50) return;
+            if (deltaY > 0) goNext();
+            else goPrev();
+            scrollLocked = true;
+            setTimeout(()=>{
+                scrollLocked = false;
+            }, SCROLL_COOLDOWN);
+        };
+        const handleKeyDown = (e)=>{
+            if (isTransitioning()) return;
+            const target = e.target;
+            if ("INPUT" === target.tagName || "TEXTAREA" === target.tagName || target.isContentEditable) return;
+            switch(e.key){
+                case "ArrowDown":
+                case "PageDown":
+                    e.preventDefault();
+                    goNext();
+                    break;
+                case "ArrowUp":
+                case "PageUp":
+                    e.preventDefault();
+                    goPrev();
+                    break;
+                case " ":
+                    if ("BUTTON" !== target.tagName && "A" !== target.tagName) {
+                        e.preventDefault();
+                        goNext();
+                    }
+                    break;
+                case "Home":
+                    e.preventDefault();
+                    navigateToInternal(pages[0]);
+                    break;
+                case "End":
+                    e.preventDefault();
+                    navigateToInternal(pages[pages.length - 1]);
+                    break;
+            }
+        };
+        window.addEventListener("wheel", handleWheel, {
+            passive: true
+        });
+        window.addEventListener("touchstart", handleTouchStart, {
+            passive: true
+        });
+        window.addEventListener("touchend", handleTouchEnd, {
+            passive: true
+        });
+        window.addEventListener("keydown", handleKeyDown);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+            window.removeEventListener("wheel", handleWheel);
+            window.removeEventListener("touchstart", handleTouchStart);
+            window.removeEventListener("touchend", handleTouchEnd);
+            window.removeEventListener("keydown", handleKeyDown);
+        });
+    });
+    return {
+        activePage,
+        isTransitioning,
+        navigateTo,
+        goNext,
+        goPrev,
+        currentIndex,
+        isFirstPage,
+        isLastPage,
+        direction,
+        transitionDuration
+    };
+}
+export { useImmersiveLanding };

package/dist/components/indicator/Indicator.d.ts

@@ -0,0 +1,31 @@
+import "./indicator.css";
+import { type JSX } from "solid-js";
+import type { IComponentBaseProps } from "../types";
+type ElementType = keyof JSX.IntrinsicElements;
+type IndicatorBaseProps = {
+    horizontal?: "start" | "center" | "end";
+    vertical?: "top" | "middle" | "bottom";
+    as?: ElementType;
+    children?: JSX.Element;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+type PropsOf<E extends ElementType> = JSX.IntrinsicElements[E];
+export type IndicatorProps<E extends ElementType = "div"> = Omit<PropsOf<E>, keyof IndicatorBaseProps> & IndicatorBaseProps & IComponentBaseProps;
+type IndicatorItemBaseProps = {
+    horizontal?: "start" | "center" | "end";
+    vertical?: "top" | "middle" | "bottom";
+    as?: ElementType;
+    children?: JSX.Element;
+    dataTheme?: string;
+    class?: string;
+    className?: string;
+    style?: JSX.CSSProperties;
+};
+export type IndicatorItemProps<E extends ElementType = "span"> = Omit<PropsOf<E>, keyof IndicatorItemBaseProps> & IndicatorItemBaseProps & IComponentBaseProps;
+declare const _default: (<E extends ElementType = "div">(props: IndicatorProps<E>) => JSX.Element) & {
+    Item: <E extends ElementType = "span">(props: IndicatorItemProps<E>) => JSX.Element;
+};
+export default _default;

package/dist/components/indicator/Indicator.js

@@ -0,0 +1,76 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./indicator.css";
+import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+const Indicator = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "horizontal",
+        "vertical",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "as"
+    ]);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("indicator", local.class, local.className);
+    const Tag = local.as || "div";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: Tag
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const IndicatorItem = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "horizontal",
+        "vertical",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "as"
+    ]);
+    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("indicator-item", local.class, local.className, (0, __WEBPACK_EXTERNAL_MODULE_clsx__.clsx)({
+            "indicator-start": "start" === local.horizontal,
+            "indicator-center": "center" === local.horizontal,
+            "indicator-end": "end" === local.horizontal,
+            "indicator-top": "top" === local.vertical,
+            "indicator-middle": "middle" === local.vertical,
+            "indicator-bottom": "bottom" === local.vertical
+        }));
+    const Tag = local.as || "span";
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.Dynamic, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)({
+        component: Tag
+    }, others, {
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get ["class"] () {
+            return classes();
+        },
+        get style () {
+            return local.style;
+        },
+        get children () {
+            return local.children;
+        }
+    }));
+};
+const indicator_Indicator = Object.assign(Indicator, {
+    Item: IndicatorItem
+});
+export { indicator_Indicator as default };

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

@@ -0,0 +1,2 @@
+export { default } from "./Indicator";
+export type { IndicatorItemProps, IndicatorProps } from "./Indicator";

package/dist/components/indicator/index.js

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

package/dist/components/indicator/indicator.css

@@ -0,0 +1,70 @@
+@layer components {
+  .indicator {
+      position: relative;
+      display: inline-flex;
+      width: max-content;
+    }
+
+  .indicator :where(.indicator-item) {
+      z-index: 1;
+      position: absolute;
+      white-space: nowrap;
+      top: var(--indicator-t, 0);
+      bottom: var(--indicator-b, auto);
+      left: var(--indicator-s, auto);
+      right: var(--indicator-e, 0);
+      translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
+    }
+
+  .indicator-end {
+      --indicator-s: auto;
+      --indicator-e: 0;
+      --indicator-x: 50%;
+    }
+
+  [dir="rtl"] .indicator-end {
+      --indicator-s: 0;
+      --indicator-e: auto;
+      --indicator-x: -50%;
+    }
+
+  .indicator-start {
+      --indicator-s: 0;
+      --indicator-e: auto;
+      --indicator-x: -50%;
+    }
+
+  [dir="rtl"] .indicator-start {
+      --indicator-s: auto;
+      --indicator-e: 0;
+      --indicator-x: 50%;
+    }
+
+  .indicator-center {
+      --indicator-s: 50%;
+      --indicator-e: 50%;
+      --indicator-x: -50%;
+    }
+
+  [dir="rtl"] .indicator-center {
+      --indicator-x: 50%;
+    }
+
+  .indicator-bottom {
+      --indicator-t: auto;
+      --indicator-b: 0;
+      --indicator-y: 50%;
+    }
+
+  .indicator-middle {
+      --indicator-t: 50%;
+      --indicator-b: 50%;
+      --indicator-y: -50%;
+    }
+
+  .indicator-top {
+      --indicator-t: 0;
+      --indicator-b: auto;
+      --indicator-y: -50%;
+    }
+}

package/dist/components/input/Input.css

@@ -0,0 +1,138 @@
+@layer components {
+  .input-root {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: fit-content;
+  }
+
+  .input-root--full-width {
+    width: 100%;
+  }
+
+  .input-label {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+    color: var(--color-base-content);
+  }
+
+  .input-helper {
+    font-size: 0.75rem;
+    line-height: 1rem;
+    color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+  }
+
+  .input-helper--invalid {
+    color: var(--color-error);
+  }
+
+  .input-control {
+    position: relative;
+    display: flex;
+    width: fit-content;
+    min-width: 12rem;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid var(--color-base-300);
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    box-shadow: 0 1px 0 oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset;
+    transition:
+      background-color 150ms ease,
+      border-color 150ms ease,
+      box-shadow 150ms ease;
+  }
+
+  @media (hover: hover) {
+    .input-control:hover:not(.input-control--disabled):not(.input-control--invalid):not(:focus-within) {
+      background-color: var(--color-base-200);
+      border-color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
+    }
+  }
+
+  .input-control:focus-within {
+    border-color: var(--color-accent);
+    background-color: var(--color-base-100);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 24%, transparent);
+  }
+
+  .input-control--invalid,
+  .input-control[data-invalid="true"] {
+    border-color: var(--color-error);
+    background-color: var(--color-base-100);
+  }
+
+  .input-control--invalid:focus-within,
+  .input-control[data-invalid="true"]:focus-within {
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-error) 24%, transparent);
+  }
+
+  .input-control--disabled,
+  .input-control[data-disabled="true"] {
+    cursor: not-allowed;
+    border-color: var(--color-base-300);
+    background-color: var(--color-base-200);
+    color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
+    box-shadow: none;
+    opacity: 0.85;
+  }
+
+  .input-control--sm {
+    min-height: 2rem;
+    padding-inline: 0.625rem;
+    font-size: 0.75rem;
+  }
+
+  .input-control--md {
+    min-height: 2.5rem;
+    padding-inline: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .input-control--lg {
+    min-height: 2.75rem;
+    padding-inline: 0.875rem;
+    font-size: 1rem;
+  }
+
+  .input-control--full-width {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .input-field {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: 1.4;
+    outline: none;
+    padding-block: 0;
+  }
+
+  .input-field::placeholder {
+    color: color-mix(in oklab, var(--color-base-content) 45%, transparent);
+  }
+
+  .input-field:disabled {
+    cursor: not-allowed;
+  }
+
+  .input-slot {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
+  }
+
+  .input-slot svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}

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

@@ -0,0 +1,45 @@
+import "./Input.css";
+import { type Component, type JSX } from "solid-js";
+type InputSize = "sm" | "md" | "lg";
+type InputRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: JSX.Element;
+    size?: InputSize;
+    fullWidth?: boolean;
+    isDisabled?: boolean;
+    isInvalid?: boolean;
+    dataTheme?: string;
+    className?: string;
+};
+type InputFieldProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "size" | "children" | "disabled"> & {
+    size?: InputSize;
+    isDisabled?: boolean;
+    disabled?: boolean;
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    startContent?: JSX.Element;
+    endContent?: JSX.Element;
+    dataTheme?: string;
+    className?: string;
+};
+type InputLabelProps = JSX.LabelHTMLAttributes<HTMLLabelElement> & {
+    className?: string;
+};
+type InputHelperProps = JSX.HTMLAttributes<HTMLParagraphElement> & {
+    invalid?: boolean;
+    className?: string;
+};
+type InputProps = Omit<InputFieldProps, "id" | "aria-describedby"> & {
+    id?: string;
+    label?: JSX.Element;
+    helperText?: JSX.Element;
+    errorMessage?: JSX.Element;
+};
+type InputComponent = Component<InputProps> & {
+    Root: Component<InputRootProps>;
+    Field: Component<InputFieldProps>;
+    Label: Component<InputLabelProps>;
+    Helper: Component<InputHelperProps>;
+};
+declare const Input: InputComponent;
+export default Input;
+export type { InputProps, InputSize, InputRootProps, InputFieldProps, InputLabelProps, InputHelperProps, };