@quaffui/quaff 0.1.0-prealpha2 → 0.1.0-prealpha21

package/dist/utils/colors.js

@@ -1,10 +1,88 @@
-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: "neutral", 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: 10,
+        }
+        : {
+            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)
+        .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 +91,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 +120,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 +153,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;

package/dist/utils/dom.d.ts

@@ -0,0 +1,11 @@
+import type { Direction } from "./events";
+export declare function getParentElement(el: HTMLElement): HTMLElement;
+export declare function getAllChildren(el: HTMLElement): HTMLElement[];
+export declare function isFocusable(el: HTMLElement): boolean;
+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

@@ -0,0 +1,81 @@
+export function getParentElement(el) {
+    let parent = el.parentNode;
+    while (parent && parent.nodeType !== 1) {
+        parent = parent.parentNode;
+    }
+    return parent;
+}
+export function getAllChildren(el) {
+    return Array.from(el.querySelectorAll("*"));
+}
+// Focus utils
+const focusableElements = ':is(a, button, input, [tabindex]:not([tabindex="-1"])):not([disabled], [aria-disabled="true"])';
+export function isFocusable(el) {
+    return (el.offsetWidth > 0 &&
+        el.offsetHeight > 0 &&
+        (el.style.opacity === "" || +el.style.opacity > 0) &&
+        el.style.display !== "none" &&
+        el.tabIndex >= 0);
+}
+export function getFocusableChildren(el) {
+    return Array.from(el.querySelectorAll(focusableElements));
+}
+export function getClosestFocusableChild(el) {
+    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);
+    const filtered = allSiblings.filter(isFocusable);
+    const indexOfEl = filtered.indexOf(el);
+    if (direction === "next") {
+        const i = indexOfEl + 1 === filtered.length ? 0 : indexOfEl + 1;
+        if (filtered[i].hasAttribute("aria-current")) {
+            // The target element is active, it shouldn't have focus
+            return i + 1 === filtered.length ? filtered[0] : filtered[i + 1];
+        }
+        return filtered[i];
+    }
+    else {
+        const i = indexOfEl - 1 === -1 ? filtered.length - 1 : indexOfEl - 1;
+        if (filtered[i].hasAttribute("aria-current")) {
+            // The target element is active, it shouldn't have focus
+            return i - 1 === -1 ? filtered.at(-1) : filtered[i - 1];
+        }
+        return filtered[i];
+    }
+}
+export function getClosestFocusableBlock(el, direction) {
+    const parent = getParentElement(el);
+    const parentFocusableChildren = getFocusableChildren(parent);
+    function getNextFocusableBlock(parentBlock) {
+        const grandParent = getParentElement(parentBlock);
+        const grandParentChildren = getAllChildren(grandParent);
+        const indexOfEl = grandParentChildren.indexOf(el);
+        const sliced = direction === "next"
+            ? grandParentChildren.slice(indexOfEl)
+            : grandParentChildren.slice(0, indexOfEl);
+        const filtered = sliced.filter((element) => isFocusable(element) && !parentFocusableChildren.includes(element));
+        if (!filtered.length) {
+            return getNextFocusableBlock(grandParent);
+        }
+        return direction === "next" ? filtered[0] : filtered.at(-1);
+    }
+    let targetBlock = getNextFocusableBlock(parent);
+    if (targetBlock.hasAttribute("aria-current")) {
+        targetBlock = getClosestFocusableSibling(targetBlock, 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

@@ -0,0 +1,13 @@
+export type Direction = "previous" | "next";
+export declare function isActivationKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "Enter" | "Space";
+};
+export declare function isArrowKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+};
+export declare function isTabKey(e: KeyboardEvent): e is KeyboardEvent & {
+    code: "Tab";
+};
+export declare function getDirection(e: KeyboardEvent & {
+    code: "ArrowUp" | "ArrowDown" | "ArrowLeft" | "ArrowRight";
+}): Direction;

package/dist/utils/events.js

@@ -0,0 +1,13 @@
+// Keyboard events
+export function isActivationKey(e) {
+    return e.code === "Enter" || e.code === "Space";
+}
+export function isArrowKey(e) {
+    return e.code.startsWith("Arrow");
+}
+export function isTabKey(e) {
+    return e.code === "Tab";
+}
+export function getDirection(e) {
+    return ["ArrowDown", "ArrowRight"].includes(e.code) ? "next" : "previous";
+}

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

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

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 | 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) {
-        if (styleVal === undefined || styleVal === null) {
+    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,17 @@
+import type { Readable } from "svelte/store";
+export interface RouterProps {
+    activeClass?: string;
+    disabled?: boolean;
+    href?: string;
+    replace?: boolean;
+    to?: string;
+}
+export declare const isRouteActive: Readable<(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,23 @@
+import { derived } from "svelte/store";
+import { page } from "$app/stores";
+export const isRouteActive = derived(page, ($page) => {
+    return (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,5 @@ 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 {};

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,6 @@ export function convertCase(str, fromCase, toCase) {
     }
     return str;
 }
+export function extractImgSrc(prop) {
+    return prop?.startsWith("img:") ? prop.slice(4) : undefined;
+}

package/dist/utils/types.d.ts

@@ -1,8 +1,11 @@
 export interface NativeProps {
-    userClasses?: string;
-    userStyles?: string;
+    userClasses?: string | null;
+    userStyles?: string | null;
 }
 export declare const NativePropsDefaults: NativeProps;
+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;
@@ -16,7 +19,7 @@ export interface QComponentDocs {
 export interface QComponentProp {
     name: string;
     type: string;
-    default?: any;
+    default?: unknown;
     description: string;
     clickableType?: boolean;
     optional?: boolean;
@@ -39,4 +42,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;
+};

package/dist/utils/types.js

@@ -2,6 +2,3 @@ export const NativePropsDefaults = {
     userClasses: undefined,
     userStyles: undefined,
 };
-export function isNumber(input) {
-    return typeof input === "number" || !isNaN(Number(input));
-}

package/dist/utils/types.json

@@ -1 +1,27 @@
-{"QAvatarShapeOptions":"type QAvatarShapeOptions =\r\n  | \"circle\"\r\n  | \"rounded\"\r\n  | \"top-round\"\r\n  | \"left-round\"\r\n  | \"right-round\"\r\n  | \"bottom-round\"\r\n  | \"top-left-round\"\r\n  | \"top-right-round\"\r\n  | \"bottom-left-round\"\r\n  | \"bottom-right-round\"","QAvatarSizeOptions":"type QAvatarSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string","QBreadcrumbsGutterOptions":"type QBreadcrumbsGutterOptions = \"none\" | \"sm\" | \"md\" | \"lg\"","QLayoutEvents":"type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"","QSelectOption":"type QSelectOption = string | { label: string, value: string }","QItemSectionTypes":"type QItemSectionTypes =\r\n  | \"thumbnail\"\r\n  | \"video\"\r\n  | \"avatar\"\r\n  | \"icon\"\r\n  | \"trailingIcon\"\r\n  | \"trailingText\"\r\n  | \"content\"","QBtnSizeOptions":"type QBtnSizeOptions = \"sm\" | \"md\" | \"lg\" | \"xl\"","QDialogPositionOptions":"type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"","QDrawerSideOptions":"type QDrawerSideOptions = \"left\" | \"right\"","QDrawerBehaviorOptions":"type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"","QIconSizeOptions":"type QIconSizeOptions = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | string | number","QIconTypeOptions":"type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"","QLayoutViewOptions":"type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`","QTableColumn":"type QTableColumn = {\r\n  name: string\r\n  required?: boolean;\r\n  label: string;\r\n  align?: \"left\" | \"center\" | \"right\";\r\n  field: string | ((row: QTableRow) => string);\r\n  format?: (val: string) => string;\r\n  sortable?: boolean;\r\n  sort?: (a: string, b: string) => number;\r\n};","QTableRow":"type QTableRow = {\r\n  [key: string]: string | number\r\n};","QTableSort":"type QTableSort = {\r\n  columnField: string | ((row: QTableRow) => string)\r\n  type: \"asc\" | \"desc\";\r\n} | null;"}
+{
+  "QAvatarShapeOptions": "type QAvatarShapeOptions =\n  | \"circle\"\n  | \"rounded\"\n  | \"top-round\"\n  | \"left-round\"\n  | \"right-round\"\n  | \"bottom-round\"\n  | \"top-left-round\"\n  | \"top-right-round\"\n  | \"bottom-left-round\"\n  | \"bottom-right-round\"",
+  "QAvatarSizeOptions": "type QAvatarSizeOptions = Q.Size | Q.CssValue | number",
+  "QBreadcrumbsGutterOptions": "type QBreadcrumbsGutterOptions = Exclude<Q.Size, \"xs\" | \"xl\">",
+  "QBtnDesignOptions": "type QBtnDesignOptions = \"elevated\" | \"filled\" | \"tonal\" | \"outlined\" | \"flat\"",
+  "QBtnSizeOptions": "type QBtnSizeOptions = Exclude<Q.Size, \"xs\">",
+  "QCardFillColors": "type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"",
+  "QChipFillOptions": "type QChipFillOptions =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"neutral\"\n  | \"neutral-variant\"\n  | \"error\"",
+  "QChipKindOptions": "type QChipKindOptions = \"assist\" | \"filter\" | \"input\" | \"suggestion\"",
+  "QChipSizeOptions": "type QChipSizeOptions = Exclude<Q.Size, \"xs\" | \"xl\" | \"none\">",
+  "QDialogPositionOptions": "type QDialogPositionOptions = \"default\" | \"top\" | \"right\" | \"bottom\" | \"left\"",
+  "QDrawerBehaviorOptions": "type QDrawerBehaviorOptions = \"default\" | \"desktop\" | \"mobile\"",
+  "QDrawerSideOptions": "type QDrawerSideOptions = \"left\" | \"right\"",
+  "QIconSizeOptions": "type QIconSizeOptions = Q.Size | Q.CssValue | number",
+  "QIconTypeOptions": "type QIconTypeOptions = \"outlined\" | \"sharp\" | \"rounded\"",
+  "QItemSectionTypes": "type QItemSectionTypes =\n  | \"thumbnail\"\n  | \"video\"\n  | \"avatar\"\n  | \"toggle\"\n  | \"icon\"\n  | \"trailingIcon\"\n  | \"trailingText\"\n  | \"content\"",
+  "QLayoutEvents": "type QLayoutEvents = \"resize\" | \"scroll\" | \"scrollHeight\"",
+  "QLayoutViewOptions": "type QLayoutViewOptions = `${\"l\"|\"h\"}${\"h\"|\"H\"}${\"r\"|\"h\"} ${\"l\"|\"L\"}${\"p\"}${\"r\"|\"R\"} ${\"l\"|\"f\"}${\"f\"|\"F\"}${\"r\"|\"f\"}`",
+  "QSelectMultipleValue": "type QSelectMultipleValue = QSelectSingleValue[]",
+  "QSelectOption": "type QSelectOption = string | { label: string, value: string }",
+  "QSelectSingleValue": "type QSelectSingleValue = string | number",
+  "QSelectValue": "type QSelectValue = QSelectSingleValue | QSelectMultipleValue",
+  "QTableColumn": "type QTableColumn = {\n  name: string\n  required?: boolean;\n  label: string;\n  align?: \"left\" | \"center\" | \"right\";\n  field: string | ((row: QTableRow) => string);\n  format?: (val: string) => string;\n  sortable?: boolean;\n  sort?: (a: string, b: string) => number;\n};",
+  "QTableRow": "type QTableRow = {\n  [key: string]: string | number\n};",
+  "QTableSort": "type QTableSort = {\n  columnField: string | ((row: QTableRow) => string)\n  type: \"asc\" | \"desc\";\n} | null;",
+  "QTabsVariants": "type QTabsVariants = \"primary\" | \"secondary\" | \"vertical\""
+}

package/dist/utils/watchable.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="svelte" />
 import { Readable, Writable } from "svelte/store";
 export declare function watchable<T>(value: T): readonly [Writable<T>, Readable<T | null>];

package/dist/utils/watchable.js

@@ -1,6 +1,6 @@
 import { derived, writable } from "svelte/store";
 export function watchable(value) {
-    let values = writable([value, null]);
+    const values = writable([value, null]);
     const subscribe = derived(values, ($values) => $values[0]).subscribe;
     const update = (fn, isEqual = (a, b) => a === b) => {
         values.update(($values) => {

package/package.json

@@ -1,26 +1,30 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha2",
+  "version": "0.1.0-prealpha21",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",
-    "build": "vite build && npm run package",
+    "build": "vite build && bun run package && bun run build:css",
+    "build:css": "vite build --config vite.config.scss.ts",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run package",
+    "prepublishOnly": "bun run build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "docgen": "ts-node-esm docgen/props/run.ts",
-    "snippet": "ts-node-esm docgen/snippets/parseSnippets.ts"
+    "lint": "prettier --plugin prettier-plugin-svelte . --check . && eslint .",
+    "format": "prettier --plugin prettier-plugin-svelte . --write . && eslint . --fix",
+    "docgen-props": "bun scripts/docgenProps.ts",
+    "colorgen": "bun scripts/colorgen.ts",
+    "docgen-snippets": "bun scripts/docgenSnippets.ts",
+    "write-version": "bun scripts/writeVersion.ts"
   },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
-    }
+    },
+    "./css/*": "./dist/css/*"
   },
   "files": [
     "dist",
@@ -28,39 +32,45 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
+    "shiki": "^1.21.0",
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.22.4",
-    "@sveltejs/package": "^2.2.0",
-    "@types/node": "^20.4.6",
-    "@types/prettier": "^2.7.3",
-    "@types/prismjs": "^1.26.0",
-    "@typescript-eslint/eslint-plugin": "^6.2.1",
-    "@typescript-eslint/parser": "^6.2.1",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-plugin-svelte": "^2.32.4",
-    "prettier": "^3.0.0",
-    "prettier-plugin-svelte": "^3.0.3",
-    "publint": "^0.2.0",
-    "sass": "^1.64.2",
-    "svelte": "^4.1.2",
-    "svelte-check": "^3.4.6",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.6.1",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.8",
-    "vitest": "^0.34.1"
+    "@fontsource/roboto": "^5.1.0",
+    "@sveltejs/adapter-auto": "^3.2.5",
+    "@sveltejs/kit": "^2.5.28",
+    "@sveltejs/package": "^2.3.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@types/bun": "^1.1.11",
+    "@types/prettier": "^3.0.0",
+    "@types/prismjs": "^1.26.4",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "eslint": "^9.11.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import-x": "^4.3.0",
+    "eslint-plugin-svelte": "^2.44.0",
+    "eslint-plugin-unicorn": "^55.0.0",
+    "estree-walker": "^3.0.3",
+    "globals": "^15.9.0",
+    "magic-string": "^0.30.11",
+    "material-symbols": "^0.23.0",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
+    "publint": "^0.2.11",
+    "sass": "^1.79.3",
+    "svelte": "5.0.0-next.257",
+    "svelte-check": "^4.0.3",
+    "svelte-eslint-parser": "^0.41.1",
+    "tslib": "^2.7.0",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.7",
+    "vitest": "^2.1.1"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "beercss": "^3.2.13",
-    "material-dynamic-colors": "^1.0.1",
-    "prism-svelte": "0.5.0",
-    "prismjs": "^1.29.0"
+    "@material/material-color-utilities": "^0.3.0"
   }
 }