@quaffui/quaff 1.0.0-alpha2 → 1.0.0-beta12

package/package.json

@@ -1,24 +1,23 @@
 {
   "name": "@quaffui/quaff",
-  "version": "1.0.0-alpha2",
+  "version": "1.0.0-beta12",
   "scripts": {
-    "dev": "vite dev",
-    "open": "vite dev --open",
-    "build": "vite build && bun run package && bun run build:css",
+    "dev": "tsc -p plugins/tsconfig.json && vite dev",
+    "open": "tsc -p plugins/tsconfig.json && vite dev --open",
+    "build": "tsc -p plugins/tsconfig.json && svelte-kit sync && svelte-package && publint && vite build --config vite.config.scss.ts",
     "build:css": "vite build --config vite.config.scss.ts",
-    "build:docs": "bun run build:css && svelte-kit sync && vite build",
+    "build:docs": "tsc -p plugins/tsconfig.json && bun scripts/docgenProps.ts && bun scripts/docgenSnippets.ts && vite build --config vite.config.scss.ts && svelte-kit sync && vite build",
     "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "bun run build",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "package": "tsc -p plugins/tsconfig.json && svelte-kit sync && svelte-package && publint",
+    "check": "tsc -p plugins/tsconfig.json && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "tsc -p plugins/tsconfig.json && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "test:unit": "vitest",
     "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"
+    "gen:plugins": "tsc -p plugins/tsconfig.json"
   },
   "exports": {
     ".": {
@@ -27,45 +26,52 @@
     },
     "./css/*": "./dist/css/*"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "shiki": "^3.4.2"
+    "@sveltejs/kit": "^2.62.0",
+    "shiki": "^4.2.0",
+    "svelte": "^5.56.0"
   },
   "devDependencies": {
-    "@fontsource/roboto": "^5.2.5",
-    "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.1",
-    "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@fontsource/roboto": "^5.2.10",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.62.0",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@types/prettier": "^3.0.0",
-    "@types/prismjs": "^1.26.5",
-    "@typescript-eslint/eslint-plugin": "^8.33.0",
-    "@typescript-eslint/parser": "^8.33.0",
-    "bun-types": "^1.2.15",
-    "eslint": "^9.28.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-import-x": "^4.15.0",
-    "eslint-plugin-svelte": "^3.9.0",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "@types/prismjs": "^1.26.6",
+    "@typescript-eslint/eslint-plugin": "^8.60.1",
+    "@typescript-eslint/parser": "^8.60.1",
+    "bun-types": "^1.3.14",
+    "eslint": "^10.4.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import-x": "^4.16.2",
+    "eslint-plugin-svelte": "^3.19.0",
+    "eslint-plugin-unicorn": "^64.0.0",
     "estree-walker": "^3.0.3",
-    "globals": "^16.2.0",
-    "magic-string": "^0.30.17",
-    "material-symbols": "^0.31.4",
-    "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.12",
-    "sass": "^1.89.1",
-    "svelte": "^5.33.11",
-    "svelte-check": "^4.2.1",
-    "svelte-eslint-parser": "^1.2.0",
+    "globals": "^17.6.0",
+    "magic-string": "^0.30.21",
+    "material-symbols": "^0.44.11",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^4.1.0",
+    "publint": "^0.3.21",
+    "sass": "^1.100.0",
+    "svelte": "^5.56.0",
+    "svelte-check": "^4.5.0",
+    "svelte-eslint-parser": "^1.7.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vitest": "^3.1.4"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/classes/QContext.svelte.d.ts

@@ -1,42 +0,0 @@
-/**
- * This class allows to manipulate reactive contexts more easily.
- * It avoids having to pass a Svelte store down the components but rather use runes to keep the context reactive.
- *
- * This class should be used when the context has to be modified from a child component. Otherwise, using svelte's context API should be enough.
- */
-export declare class QContext<T> {
-    #private;
-    constructor(contextSymbol: symbol, init: T);
-    /**
-     * Gets the value of context with id `contextSymbol`
-     * @param contextSymbol - Name of the context to get
-     * @returns The context's value
-     */
-    static get<T>(contextSymbol: symbol): QContext<T> | undefined;
-    /**
-     * Prevents the propagation of the context further down
-     * @param contextSymbol - Name of the context to get
-     * @returns The context result
-     */
-    static reset(contextSymbol: symbol): void;
-    /**
-     * Updates the context's inner value with `newVal`
-     * @param newVal - New value to update the context with
-     */
-    update(newVal: T): void;
-    /**
-     * Updates the property of id `key` with `newVal` in the context's inner value
-     * @param key - Key to update
-     * @param newVal - New value to update the context's property with
-     */
-    updateEntry(key: keyof T, newVal: NonNullable<T>[keyof T]): void;
-    /**
-     * Updates the given properties their corresponding values in the context's inner value
-     * @param from - Object containing keys to update with their respective value
-     */
-    updateEntries(from: Record<keyof T, NonNullable<T>[keyof T]>): void;
-    /**
-     * Inner value of the context
-     */
-    get value(): T;
-}

package/dist/classes/QContext.svelte.js

@@ -1,63 +0,0 @@
-import { getContext, setContext } from "svelte";
-/**
- * This class allows to manipulate reactive contexts more easily.
- * It avoids having to pass a Svelte store down the components but rather use runes to keep the context reactive.
- *
- * This class should be used when the context has to be modified from a child component. Otherwise, using svelte's context API should be enough.
- */
-export class QContext {
-    #state = $state();
-    constructor(contextSymbol, init) {
-        this.#state = init;
-        setContext(contextSymbol, this);
-    }
-    /**
-     * Gets the value of context with id `contextSymbol`
-     * @param contextSymbol - Name of the context to get
-     * @returns The context's value
-     */
-    static get(contextSymbol) {
-        return getContext(contextSymbol);
-    }
-    /**
-     * Prevents the propagation of the context further down
-     * @param contextSymbol - Name of the context to get
-     * @returns The context result
-     */
-    static reset(contextSymbol) {
-        setContext(contextSymbol, undefined);
-    }
-    /**
-     * Updates the context's inner value with `newVal`
-     * @param newVal - New value to update the context with
-     */
-    update(newVal) {
-        this.#state = newVal;
-    }
-    /**
-     * Updates the property of id `key` with `newVal` in the context's inner value
-     * @param key - Key to update
-     * @param newVal - New value to update the context's property with
-     */
-    updateEntry(key, newVal) {
-        if (!this.#state || typeof this.#state !== "object" || !Object.hasOwn(this.#state, key)) {
-            throw new Error(`${key.toString()} doesn't exist on ${this.#state}`);
-        }
-        this.#state[key] = newVal;
-    }
-    /**
-     * Updates the given properties their corresponding values in the context's inner value
-     * @param from - Object containing keys to update with their respective value
-     */
-    updateEntries(from) {
-        for (const key in from) {
-            this.updateEntry(key, from[key]);
-        }
-    }
-    /**
-     * Inner value of the context
-     */
-    get value() {
-        return this.#state;
-    }
-}

package/dist/components/avatar/docs.props.d.ts

@@ -1,3 +0,0 @@
-import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
-export declare const QAvatarDocsProps: ParsedProp[];
-export declare const QAvatarDocsSnippets: ParsedSnippet[];

package/dist/components/avatar/docs.props.js

@@ -1,87 +0,0 @@
-// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 6a4f00f36c683337912c3fec88921ecc
-export const QAvatarDocsProps = [
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "shape",
-        type: {
-            name: "QAvatarShapeOptions",
-            isClickable: true,
-        },
-        description: "Shape of the avatar.",
-        default: '"circle"',
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "size",
-        type: {
-            name: "QAvatarSizeOptions",
-            isClickable: true,
-        },
-        description: 'Size of the avatar, can be a custom size using CSS units. If no unit is specified, "px" will be used.',
-        default: '"md"',
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "src",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: 'Source of the image to be used as the avatar. Can be a url or a path to a local file.\nIf the "video" prop is set to true, this will be used as an MP4 video source. If you want to use a different video format, use the "sources" prop.',
-        default: "undefined",
-    },
-    {
-        isArray: true,
-        optional: true,
-        isSnippet: false,
-        name: "sources",
-        type: {
-            name: "QAvatarVideoSrcOptions",
-            isClickable: true,
-        },
-        description: 'Only for video avatars. Use this prop to specify multiple sources for the video. The browser will play the first source it can support. This overrides the "src" prop.\nIf used while the "video" prop is set to false, this prop has no effect.',
-        default: "undefined",
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "video",
-        type: {
-            name: "boolean",
-            isClickable: false,
-        },
-        description: 'If set to true, the avatar will be treaded as a video avatar.\nThis means that the "src" prop will be used as an MP4 video source and the "sources" prop can be used to specify multiple sources for the video.',
-        default: "false",
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "alt",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: "alt property for the image.",
-        default: "undefined",
-    },
-];
-export const QAvatarDocsSnippets = [
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: true,
-        name: "videoAccessibility",
-        type: [],
-        description: 'Accessibility controls you might want to add inside the <video> element.\nFor example, you might want to add a <p> tag in case the video player doesn\'t work.\nThis can also be use to add captions or subtitles to the video or even to add the sources manually (without using the "src" or "sources" props).\nThis snippet will be added inside the <video> tag.',
-        default: "undefined",
-    },
-];

package/dist/components/breadcrumbs/docs.props.d.ts

@@ -1,5 +0,0 @@
-import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
-export declare const QBreadcrumbsDocsProps: ParsedProp[];
-export declare const QBreadcrumbsDocsSnippets: ParsedSnippet[];
-export declare const QBreadcrumbsElDocsProps: ParsedProp[];
-export declare const QBreadcrumbsElDocsSnippets: ParsedSnippet[];

package/dist/components/breadcrumbs/docs.props.js

@@ -1,144 +0,0 @@
-// AUTO GENERATED FILE - DO NOT MODIFY OR DELETE
-// @quaffHash 66c85971b241303d63478c8c8bca6aa0
-export const QBreadcrumbsDocsProps = [
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "activeColor",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: "Color to use for the active breadcrumb element. See <link to colors docs> to see what colors can be used.",
-        default: '"primary"',
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "gutter",
-        type: {
-            name: "QBreadcrumbsGutterOptions",
-            isClickable: true,
-        },
-        description: "Space around separators.",
-        default: '"sm"',
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "separator",
-        type: [
-            {
-                name: "string",
-                isClickable: false,
-            },
-            {
-                name: "`icon:${MaterialSymbol}`",
-                isClickable: false,
-            },
-            {
-                name: "Snippet",
-                isClickable: false,
-            },
-        ],
-        description: 'Separator to use between the breadcrumb elements. To use an icon, prefix with "icon:" followed by the name of the icon.',
-        default: '"/"',
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "separatorColor",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: "Color to use for the separators. See <link to colors docs> to see what colors can be used.",
-        default: '"outline"',
-    },
-];
-export const QBreadcrumbsDocsSnippets = [];
-export const QBreadcrumbsElDocsProps = [
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "activeClass",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: "Class to apply to the breadcrumb element when the route is active.",
-        default: '"active"',
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "icon",
-        type: [
-            {
-                name: "MaterialSymbol",
-                isClickable: false,
-            },
-            {
-                name: "Snippet",
-                isClickable: false,
-            },
-        ],
-        description: "Name of the leading icon for the breadcrumb element. The icon prop overwrites to icon slot.",
-        default: "undefined",
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "label",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: "Text to use for the breadcrumb element. If default slot is defined, the label will be overwritten by it.",
-        default: '""',
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "href",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: 'Also makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
-        default: "undefined",
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "tag",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: "Tag to use for the breadcrumb element.",
-        default: '"div"',
-    },
-    {
-        isArray: false,
-        optional: true,
-        isSnippet: false,
-        name: "to",
-        type: {
-            name: "string",
-            isClickable: false,
-        },
-        description: 'Makes the breadcrumb element navigational. Can be used with the router (e.g to="/home") or as a normal href attribute (e.g to="#section-id")',
-        default: "undefined",
-    },
-];
-export const QBreadcrumbsElDocsSnippets = [];

package/dist/components/button/docs.props.d.ts

@@ -1,3 +0,0 @@
-import { ParsedProp, ParsedSnippet } from "../../../../docgen/props/parseInterface";
-export declare const QBtnDocsProps: ParsedProp[];
-export declare const QBtnDocsSnippets: ParsedSnippet[];