@quaffui/quaff 0.1.0-prealpha9 → 1.0.0-alpha2

package/dist/utils/colors.d.ts

@@ -1,3 +1,66 @@
+export type Mode = "light" | "dark";
+export type HexValue = `#${string}`;
+type BaseColorNames = [
+    "error",
+    "error-container",
+    "on-error",
+    "on-error-container",
+    "on-primary",
+    "on-primary-container",
+    "on-secondary",
+    "on-secondary-container",
+    "on-tertiary",
+    "on-tertiary-container",
+    "primary",
+    "primary-container",
+    "secondary",
+    "secondary-container",
+    "tertiary",
+    "tertiary-container"
+];
+type BaseColors = Record<BaseColorNames[number], HexValue>;
+type ToneColorNames = [
+    "background",
+    "inverse-on-surface",
+    "inverse-primary",
+    "inverse-surface",
+    "on-background",
+    "on-primary-fixed",
+    "on-primary-fixed-variant",
+    "on-secondary-fixed",
+    "on-secondary-fixed-variant",
+    "on-surface",
+    "on-surface-variant",
+    "on-tertiary-fixed",
+    "on-tertiary-fixed-variant",
+    "outline",
+    "outline-variant",
+    "primary-fixed",
+    "primary-fixed-dim",
+    "scrim",
+    "secondary-fixed",
+    "secondary-fixed-dim",
+    "shadow",
+    "surface",
+    "surface-bright",
+    "surface-container",
+    "surface-container-high",
+    "surface-container-highest",
+    "surface-container-low",
+    "surface-container-lowest",
+    "surface-dim",
+    "surface-tint",
+    "surface-variant",
+    "tertiary-fixed",
+    "tertiary-fixed-dim"
+];
+type ToneColors = Record<ToneColorNames[number], HexValue>;
+export type QuaffColorNames = [...BaseColorNames, ...ToneColorNames];
+export type QuaffColors = BaseColors & ToneColors;
+export declare function generateColors(from: string): {
+    light: QuaffColors;
+    dark: QuaffColors;
+};
 declare class QColors {
     private static hexRegex;
     private static isValidRgb;
@@ -6,5 +69,11 @@ declare class QColors {
     static hexToRgb(hex: string): number[];
     static rgbToHsl(r: string | number, g: string | number, b: string | number): number[];
     static hslToRgb(h: string | number, s: string | number, l: string | number): number[];
+    static hexToHsl(hex: HexValue): {
+        h: number;
+        s: number;
+        l: number;
+    };
+    static calculateHueRotate(fromHex: HexValue, toHex: HexValue): number;
 }
 export default QColors;

package/dist/utils/colors.js

@@ -1,10 +1,89 @@
-import { isNumber } from "./types";
+import { argbFromHex, hexFromArgb, themeFromSourceColor, } from "@material/material-color-utilities";
+import { isNumeric } from "./number.js";
+import { convertCase } from "./string.js";
+const COLOR_TONES = {
+    background: { fromColor: "neutral", light: 98, dark: 6 },
+    "inverse-on-surface": { fromColor: "neutral", light: 95, dark: 20 },
+    "inverse-primary": { fromColor: "primary", light: 80, dark: 40 },
+    "inverse-surface": { fromColor: "neutral", light: 20, dark: 90 },
+    "on-background": { fromColor: "neutral", light: 10, dark: 90 },
+    "on-primary-fixed": { fromColor: "primary", light: 10, dark: 10 },
+    "on-primary-fixed-variant": { fromColor: "primary", light: 30, dark: 30 },
+    "on-secondary-fixed": { fromColor: "secondary", light: 10, dark: 10 },
+    "on-secondary-fixed-variant": { fromColor: "secondary", light: 30, dark: 30 },
+    "on-surface": { fromColor: "neutral", light: 10, dark: 90 },
+    "on-surface-variant": { fromColor: "neutralVariant", light: 30, dark: 80 },
+    "on-tertiary-fixed": { fromColor: "tertiary", light: 10, dark: 10 },
+    "on-tertiary-fixed-variant": { fromColor: "tertiary", light: 30, dark: 30 },
+    outline: { fromColor: "neutralVariant", light: 50, dark: 60 },
+    "outline-variant": { fromColor: "neutralVariant", light: 80, dark: 30 },
+    "primary-fixed": { fromColor: "primary", light: 90, dark: 90 },
+    "primary-fixed-dim": { fromColor: "primary", light: 80, dark: 80 },
+    scrim: { fromColor: "neutral", light: 0, dark: 0 },
+    "secondary-fixed": { fromColor: "secondary", light: 90, dark: 90 },
+    "secondary-fixed-dim": { fromColor: "secondary", light: 80, dark: 80 },
+    shadow: { fromColor: "neutral", light: 0, dark: 0 },
+    surface: { fromColor: "neutral", light: 98, dark: 6 },
+    "surface-bright": { fromColor: "neutral", light: 98, dark: 24 },
+    "surface-container": { fromColor: "neutral", light: 94, dark: 12 },
+    "surface-container-high": { fromColor: "neutral", light: 92, dark: 17 },
+    "surface-container-highest": { fromColor: "neutral", light: 90, dark: 22 },
+    "surface-container-low": { fromColor: "neutral", light: 96, dark: 10 },
+    "surface-container-lowest": { fromColor: "neutral", light: 100, dark: 4 },
+    "surface-dim": { fromColor: "neutral", light: 87, dark: 6 },
+    "surface-tint": { fromColor: "primary", light: 40, dark: 80 },
+    "surface-variant": { fromColor: "neutralVariant", light: 90, dark: 30 },
+    "tertiary-fixed": { fromColor: "tertiary", light: 90, dark: 90 },
+    "tertiary-fixed-dim": { fromColor: "tertiary", light: 80, dark: 80 },
+};
+export function generateColors(from) {
+    const argb = argbFromHex(from);
+    const palettes = themeFromSourceColor(argb).palettes;
+    return {
+        light: getColors(palettes, "light"),
+        dark: getColors(palettes, "dark"),
+    };
+}
+function getColors(palettes, mode) {
+    const tones = mode === "light"
+        ? {
+            base: 40,
+            onBase: 100,
+            baseContainer: 90,
+            onBaseContainer: 30,
+        }
+        : {
+            base: 80,
+            onBase: 20,
+            baseContainer: 30,
+            onBaseContainer: 90,
+        };
+    const getColor = (color, palette) => {
+        color = convertCase(color, "pascal", "kebab");
+        return [
+            [color, palette.tone(tones.base)],
+            [`on-${color}`, palette.tone(tones.onBase)],
+            [`${color}-container`, palette.tone(tones.baseContainer)],
+            [`on-${color}-container`, palette.tone(tones.onBaseContainer)],
+        ];
+    };
+    const results = Object.fromEntries(Object.entries(palettes)
+        .filter(([color]) => !["neutral", "neutralVariant"].includes(color))
+        .map(([color, palette]) => getColor(color, palette))
+        .flat(1));
+    let toneColor;
+    for (toneColor in COLOR_TONES) {
+        const toneInfo = COLOR_TONES[toneColor];
+        results[toneColor] = palettes[toneInfo.fromColor].tone(toneInfo[mode]);
+    }
+    return Object.fromEntries(Object.entries(results).map(([color, value]) => [color, hexFromArgb(value)]));
+}
 class QColors {
     static hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
     static isValidRgb(r, g, b) {
-        return (isNumber(r) &&
-            isNumber(g) &&
-            isNumber(b) &&
+        return (isNumeric(r) &&
+            isNumeric(g) &&
+            isNumeric(b) &&
             +r >= 0 &&
             +r <= 255 &&
             +g >= 0 &&
@@ -13,9 +92,9 @@ class QColors {
             +b <= 255);
     }
     static isValidHsl(h, s, l) {
-        return (isNumber(h) &&
-            isNumber(s) &&
-            isNumber(l) &&
+        return (isNumeric(h) &&
+            isNumeric(s) &&
+            isNumeric(l) &&
             +h >= 0 &&
             +h <= 360 &&
             +s >= 0 &&
@@ -42,9 +121,12 @@ class QColors {
         if (!QColors.isValidRgb(r, g, b)) {
             throw new Error("Invalid RGB values. They should be in the range 0-255.");
         }
-        (r = +r / 255), (g = +g / 255), (b = +b / 255);
+        r = +r / 255;
+        g = +g / 255;
+        b = +b / 255;
         const max = Math.max(r, g, b), min = Math.min(r, g, b);
-        let h, s, l = (max + min) / 2;
+        const l = (max + min) / 2;
+        let h, s;
         if (max === min) {
             h = s = 0; // achromatic
         }
@@ -72,22 +154,29 @@ class QColors {
             throw new Error("Invalid HSL values. Hue should be in the range 0-360, saturation and lightness in the range 0-100.");
         }
         let r, g, b;
-        (h = +h / 360), (s = +s / 100), (l = +l / 100);
+        h = +h / 360;
+        s = +s / 100;
+        l = +l / 100;
         if (s === 0) {
             r = g = b = l; // achromatic
         }
         else {
             const hue2rgb = (p, q, t) => {
-                if (t < 0)
+                if (t < 0) {
                     t += 1;
-                if (t > 1)
+                }
+                if (t > 1) {
                     t -= 1;
-                if (t < 1 / 6)
+                }
+                if (t < 1 / 6) {
                     return p + (q - p) * 6 * t;
-                if (t < 1 / 2)
+                }
+                if (t < 1 / 2) {
                     return q;
-                if (t < 2 / 3)
+                }
+                if (t < 2 / 3) {
                     return p + (q - p) * (2 / 3 - t) * 6;
+                }
                 return p;
             };
             const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
@@ -98,5 +187,42 @@ class QColors {
         }
         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
     }
+    static hexToHsl(hex) {
+        const r = parseInt(hex.slice(1, 3), 16) / 255;
+        const g = parseInt(hex.slice(3, 5), 16) / 255;
+        const b = parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        let h = 0, s;
+        const l = (max + min) / 2;
+        if (max === min) {
+            h = s = 0; // achromatic
+        }
+        else {
+            const d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h *= 60;
+        }
+        return { h, s: s * 100, l: l * 100 };
+    }
+    static calculateHueRotate(fromHex, toHex) {
+        const from = QColors.hexToHsl(fromHex);
+        const to = QColors.hexToHsl(toHex);
+        let rotate = to.h - from.h;
+        if (rotate < 0) {
+            rotate += 360;
+        }
+        return Math.round(rotate);
+    }
 }
 export default QColors;

package/dist/utils/context.d.ts

@@ -0,0 +1,33 @@
+export declare const QBreadcrumbsCtxName: {
+    activeColor: symbol;
+    separator: symbol;
+};
+export declare const QDocsCtxName: {
+    snippets: symbol;
+};
+export declare const QItemCtxName: {
+    activeClass: symbol;
+    multiline: symbol;
+};
+export declare const QLayoutCtxName: {
+    view: symbol;
+    header: symbol;
+    footer: symbol;
+    railbar: {
+        left: symbol;
+        right: symbol;
+    };
+    drawer: {
+        left: symbol;
+        right: symbol;
+    };
+};
+export declare const QListCtxName: {
+    activeClass: symbol;
+    separator: symbol;
+};
+export declare const QTabsCtxName: {
+    request: symbol;
+    value: symbol;
+    variant: symbol;
+};

package/dist/utils/context.js

@@ -0,0 +1,33 @@
+export const QBreadcrumbsCtxName = {
+    activeColor: Symbol("activeColor"),
+    separator: Symbol("separator"),
+};
+export const QDocsCtxName = {
+    snippets: Symbol("snippets"),
+};
+export const QItemCtxName = {
+    activeClass: Symbol("activeClass"),
+    multiline: Symbol("multiline"),
+};
+export const QLayoutCtxName = {
+    view: Symbol("layoutView"),
+    header: Symbol("QHeader"),
+    footer: Symbol("QFooter"),
+    railbar: {
+        left: Symbol("QRailbar-left"),
+        right: Symbol("QRailbar-right"),
+    },
+    drawer: {
+        left: Symbol("QDrawer-left"),
+        right: Symbol("QDrawer-right"),
+    },
+};
+export const QListCtxName = {
+    activeClass: Symbol("activeClass"),
+    separator: Symbol("separator"),
+};
+export const QTabsCtxName = {
+    request: Symbol("request"),
+    value: Symbol("value"),
+    variant: Symbol("variant"),
+};

package/dist/utils/dom.d.ts

@@ -6,3 +6,6 @@ export declare function getFocusableChildren<T extends HTMLElement>(el: T): T[];
 export declare function getClosestFocusableChild(el: HTMLElement): HTMLElement;
 export declare function getClosestFocusableSibling<T extends HTMLElement>(el: T, direction: Direction): HTMLElement;
 export declare function getClosestFocusableBlock(el: HTMLElement, direction: Direction): HTMLElement;
+export declare function movementDirection(from: HTMLElement, to: HTMLElement): Direction;
+export declare function shouldReduceMotion(): boolean;
+export declare function elFromSelector<T extends HTMLElement>(selector: string | T | null | typeof window | Document): Document | (Window & typeof globalThis) | T | null;

package/dist/utils/dom.js

@@ -21,14 +21,14 @@ export function getFocusableChildren(el) {
     return Array.from(el.querySelectorAll(focusableElements));
 }
 export function getClosestFocusableChild(el) {
-    let children = Array.from(el.querySelectorAll(focusableElements));
+    const children = Array.from(el.querySelectorAll(focusableElements));
     const focusableChildren = children.filter(isFocusable);
     return focusableChildren[0] || null;
 }
 export function getClosestFocusableSibling(el, direction) {
     const parent = getParentElement(el);
     const allSiblings = Array.from(parent.childNodes);
-    let filtered = allSiblings.filter(isFocusable);
+    const filtered = allSiblings.filter(isFocusable);
     const indexOfEl = filtered.indexOf(el);
     if (direction === "next") {
         const i = indexOfEl + 1 === filtered.length ? 0 : indexOfEl + 1;
@@ -48,8 +48,8 @@ export function getClosestFocusableSibling(el, direction) {
     }
 }
 export function getClosestFocusableBlock(el, direction) {
-    let parent = getParentElement(el);
-    let parentFocusableChildren = getFocusableChildren(parent);
+    const parent = getParentElement(el);
+    const parentFocusableChildren = getFocusableChildren(parent);
     function getNextFocusableBlock(parentBlock) {
         const grandParent = getParentElement(parentBlock);
         const grandParentChildren = getAllChildren(grandParent);
@@ -69,3 +69,13 @@ export function getClosestFocusableBlock(el, direction) {
     }
     return targetBlock;
 }
+export function movementDirection(from, to) {
+    const relativePosition = from.compareDocumentPosition(to);
+    return relativePosition === 2 ? "previous" : "next";
+}
+export function shouldReduceMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+export function elFromSelector(selector) {
+    return typeof selector === "string" ? document.querySelector(selector) : selector;
+}

package/dist/utils/events.d.ts

@@ -11,3 +11,27 @@ export declare function isTabKey(e: KeyboardEvent): e is KeyboardEvent & {
 export declare function getDirection(e: KeyboardEvent & {
     code: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
 }): Direction;
+type EventMap<T> = T extends HTMLElement ? HTMLElementEventMap : T extends typeof window ? WindowEventMap : DocumentEventMap;
+/**
+ * Adds an event listener to an element.
+ *
+ * @param el The element to add the event listener to. If `null` or `undefined`, nothing is added.
+ * @param event The event to listen for.
+ * @param callback The function to call when the event is triggered.
+ * @returns An object with a single method, `remove()`, which removes the event listener.
+ */
+export declare function addEventListener<T extends HTMLElement | typeof window | typeof document, K extends keyof EventMap<T>>(el: T | undefined | null, event: K, callback: (e: EventMap<T>[K]) => void): {
+    remove: () => void;
+};
+/**
+ * Adds multiple event listeners to an element.
+ *
+ * @param el The element to add the event listener to. If `null` or `undefined`, nothing is added.
+ * @param events The events to listen for.
+ * @param callback The function to call when any of the events are triggered.
+ * @returns An object with a single method, `remove()`, which removes the event listeners.
+ */
+export declare function addEventListener<T extends HTMLElement | typeof window | typeof document, K extends keyof EventMap<T>>(el: T | undefined | null, events: K[], callback: (e: EventMap<T>[K]) => void): {
+    remove: () => void;
+};
+export {};

package/dist/utils/events.js

@@ -11,3 +11,27 @@ export function isTabKey(e) {
 export function getDirection(e) {
     return ["ArrowDown", "ArrowRight"].includes(e.code) ? "next" : "previous";
 }
+/**
+ * Adds one or more event listeners to an element.
+ *
+ * @param el The element to add the event listener(s) to. If `null` or `undefined`, no action is taken.
+ * @param events An event or an array of events to listen for.
+ * @param callback The function to call when the event(s) are triggered.
+ * @returns An object with a `remove()` method to remove the event listener(s) added.
+ */
+export function addEventListener(el, events, callback) {
+    if (!el) {
+        return;
+    }
+    if (Array.isArray(events)) {
+        const listeners = events.map((event) => addEventListener(el, event, callback));
+        return {
+            remove: () => listeners.forEach((listener) => listener.remove()),
+        };
+    }
+    // Type casting to align with the broader compatibility between HTMLElement, Window, and Document
+    el.addEventListener(events, callback);
+    return {
+        remove: () => el.removeEventListener(events, callback),
+    };
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./clipboard";
+export * from "./colors";
+export { default as QColors } from "./colors";
+export * from "./context";
+export * from "./dom";
+export * from "./events";
+export * from "./number";
+export * from "./props";
+export * from "./router";
+export * from "./string";
+export * from "./types";

package/dist/utils/index.js

@@ -1 +1,11 @@
-"use strict";
+export * from "./clipboard";
+export * from "./colors";
+export { default as QColors } from "./colors";
+export * from "./context";
+export * from "./dom";
+export * from "./events";
+export * from "./number";
+export * from "./props";
+export * from "./router";
+export * from "./string";
+export * from "./types";

package/dist/utils/number.d.ts

@@ -0,0 +1,2 @@
+export declare function isNumeric(input: number | string): input is number | `${number}`;
+export declare function between(value: number, min: number, max: number): number;

package/dist/utils/number.js

@@ -0,0 +1,9 @@
+export function isNumeric(input) {
+    return typeof input === "number" || !isNaN(Number(input));
+}
+export function between(value, min, max) {
+    if (max < min) {
+        console.warn(`max (${max}) should not be smaller than min (${min}).`);
+    }
+    return max <= min ? min : Math.min(max, Math.max(min, value));
+}

package/dist/utils/props.d.ts

@@ -1,9 +1,9 @@
-export declare function createStyles(styleObj: Record<string, string | number | boolean | null | undefined>, userStyles?: string): string | null;
+export declare function createStyles(styleObj: Record<string, string | number | boolean | null | undefined>, userStyles?: string | null): string | null;
 interface CreateClassesOptions {
     component?: string;
     element?: string;
-    userClasses?: string;
-    quaffClasses?: any[];
+    userClasses?: string | null;
+    quaffClasses?: unknown[];
 }
-export declare function createClasses(modifiers: any[], options?: CreateClassesOptions): string;
+export declare function createClasses(modifiers: unknown[], options?: CreateClassesOptions): string;
 export {};

package/dist/utils/props.js

@@ -2,14 +2,15 @@ import { convertCase } from "./string";
 export function createStyles(styleObj, userStyles) {
     const stylesArray = Object.entries(styleObj);
     const toJoin = [];
-    for (let [styleName, styleVal] of stylesArray) {
+    for (const [styleName, styleVal] of stylesArray) {
         if (styleVal === undefined || styleVal === null || styleVal === false) {
             continue;
         }
-        styleName = convertCase(styleName, "camel", "kebab");
-        toJoin.push(`${styleName}: ${styleVal}`);
+        toJoin.push(`${convertCase(styleName, "camel", "kebab")}: ${styleVal}`);
+    }
+    if (userStyles) {
+        toJoin.push(userStyles);
     }
-    userStyles && toJoin.push(userStyles);
     if (toJoin.length === 0) {
         return null;
     }
@@ -19,12 +20,13 @@ export function createClasses(modifiers, options = { userClasses: "", quaffClass
     const userClasses = options.userClasses?.trim();
     const quaffClasses = options.quaffClasses?.length && createClasses(options.quaffClasses);
     const baseClasses = `${quaffClasses || ""} ${userClasses || ""}`.trim();
-    let component = options.component, element;
+    const component = options.component;
+    let element;
     if (component && options.element) {
         element = `${component}__${options.element}`;
     }
     const filteredModifiers = modifiers.filter(Boolean);
-    let withModifiers = component
+    const withModifiers = component
         ? filteredModifiers.map((modifier) => `${element || component}--${modifier}`)
         : filteredModifiers;
     return [element || component, ...withModifiers, baseClasses].filter(Boolean).join(" ").trim();

package/dist/utils/router.d.ts

@@ -0,0 +1,16 @@
+export interface RouterProps {
+    activeClass?: string;
+    disabled?: boolean;
+    href?: string;
+    replace?: boolean;
+    to?: string;
+}
+export declare function isRouteActive(route?: string): boolean;
+export declare function getRouterInfo<T extends RouterProps>(props: T): {
+    hasLink: boolean;
+    linkAttributes: {
+        href: string | undefined;
+        "data-sveltekit-reload": boolean | undefined;
+    };
+    linkClasses: string;
+};

package/dist/utils/router.js

@@ -0,0 +1,20 @@
+import { page } from "$app/state";
+export function isRouteActive(route) {
+    if (!route) {
+        return false;
+    }
+    return page.url.pathname === route || page.url.pathname.startsWith(`${route}/`);
+}
+export function getRouterInfo(props) {
+    const hasLink = [props.to, props.href].some((entry) => entry !== undefined);
+    const linkClasses = `${hasLink ? "q-link" : ""} ${props.disabled ? "disabled" : ""}`.trim();
+    const linkAttributes = {
+        href: props.to || props.href,
+        "data-sveltekit-reload": props.replace ? true : undefined,
+    };
+    return {
+        hasLink,
+        linkAttributes,
+        linkClasses,
+    };
+}

package/dist/utils/string.d.ts

@@ -7,4 +7,6 @@ declare const cases: {
     snake: string;
 };
 export declare function convertCase(str: string, fromCase: keyof typeof cases, toCase: keyof typeof cases): string;
+export declare function extractImgSrc(prop?: string): string | undefined;
+export declare function escape(str: string): string;
 export {};

package/dist/utils/string.js

@@ -31,6 +31,7 @@ function convertToKebabSnakeCase(str, caseType) {
         .join("");
 }
 export function convertCase(str, fromCase, toCase) {
+    const uncap = uncapitalize(str);
     switch (fromCase) {
         case "camel":
             if (toCase === "pascal") {
@@ -41,7 +42,6 @@ export function convertCase(str, fromCase, toCase) {
             }
             break;
         case "pascal":
-            let uncap = uncapitalize(str);
             if (toCase === "camel") {
                 return uncap;
             }
@@ -76,3 +76,14 @@ export function convertCase(str, fromCase, toCase) {
     }
     return str;
 }
+export function extractImgSrc(prop) {
+    return prop?.startsWith("img:") ? prop.slice(4) : undefined;
+}
+export function escape(str) {
+    return str
+        .replace("&", "&")
+        .replace('"', """)
+        .replace("'", "'")
+        .replace("<", "&lt;")
+        .replace(">", "&gt;");
+}

package/dist/utils/types.d.ts

@@ -1,33 +1,22 @@
+import { ParsedProp, ParsedSnippet } from "../../../docgen/props/parseInterface";
 export interface NativeProps {
-    userClasses?: string;
-    userStyles?: string;
+    userClasses?: string | null;
+    userStyles?: string | null;
 }
 export declare const NativePropsDefaults: NativeProps;
-export type QuaffSizes = "xs" | "sm" | "md" | "lg" | "xl";
+export type QuaffSizes = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 export type CssUnit = "px" | "%" | "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "vmin" | "vmax";
 export type CssValue = `${number}${CssUnit}`;
 export interface QComponentDocs {
     name: string;
     description: string;
     docs: {
-        props: QComponentProp[];
-        slots: QComponentSlot[];
+        props: ParsedProp[];
+        snippets: ParsedSnippet[];
         methods: QComponentMethod[];
         events: QComponentEvent[];
     };
 }
-export interface QComponentProp {
-    name: string;
-    type: string;
-    default?: any;
-    description: string;
-    clickableType?: boolean;
-    optional?: boolean;
-}
-export interface QComponentSlot {
-    name: string;
-    description: string;
-}
 export interface QComponentType {
     name: string;
     description: string;
@@ -42,4 +31,9 @@ export interface QComponentMethod {
     type: string;
     description: string;
 }
-export declare function isNumber(input: any): input is number;
+export type Entries<T> = {
+    [K in keyof T]: [K, T[K]];
+}[keyof T][];
+export type QEvent<T, E> = T & {
+    currentTarget: EventTarget & E;
+};