@quaffui/quaff 0.1.0-prealpha8 → 1.0.0-alpha1

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;
+};

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,31 @@
-{"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 = \"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 =\n  | \"thumbnail\"\n  | \"video\"\n  | \"avatar\"\n  | \"toggle\"\n  | \"icon\"\n  | \"trailingIcon\"\n  | \"trailingText\"\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 = {\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;","QCardFillColors":"type QCardFillColors = \"primary\" | \"secondary\" | \"tertiary\"","QChipSizeOptions":"type QChipSizeOptions = \"sm\" | \"md\" | \"lg\"","QTabsVariants":"type QTabsVariants = \"primary\" | \"secondary\" | \"vertical\""}
+{
+  "QAvatarShapeOptions": "type QAvatarShapeOptions =\n  | \"circle\"\n  | \"square\"\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",
+  "QAvatarVideoSrcOptions": "type QAvatarVideoSrcOptions = {\n  /**\n   * Sets the URL of the media resource.\n   */\n  src: string\n  /**\n   * Sets the MIME type of a media resource.\n   */\n  type: VideoTypes;\n};",
+  "QBreadcrumbsGutterOptions": "type QBreadcrumbsGutterOptions = Exclude<Q.Size, \"xs\" | \"xl\">",
+  "QBtnSizeOptions": "type QBtnSizeOptions = Exclude<Q.Size, \"xs\">",
+  "QBtnVariantOptions": "type QBtnVariantOptions = \"elevated\" | \"filled\" | \"tonal\" | \"outlined\" | \"flat\"",
+  "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\"",
+  "QTooltipOffset": "type QTooltipOffset = { x?: number, y?: number }",
+  "QTooltipPosition": "type QTooltipPosition =\n  | \"top-left\"\n  | \"top\"\n  | \"top-right\"\n  | \"right\"\n  | \"bottom-right\"\n  | \"bottom\"\n  | \"bottom-left\"\n  | \"left\"",
+  "VideoTypes": "type VideoTypes =\n  | \"video/mp4\"\n  | \"video/webm\"\n  | \"video/ogg\"\n  | \"video/quicktime\"\n  | \"video/mpeg\"\n  | \"video/3gpp\"\n  | \"video/3gpp2\"\n  | \"video/3gp2\""
+}

package/package.json

@@ -1,21 +1,24 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha8",
+  "version": "1.0.0-alpha1",
   "scripts": {
     "dev": "vite dev",
     "open": "vite dev --open",
-    "build": "vite build && npm run package && npm run build:css",
+    "build": "vite build && bun run package && bun run build:css",
     "build:css": "vite build --config vite.config.scss.ts",
+    "build:docs": "bun run build:css && svelte-kit sync && vite build",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
-    "prepublishOnly": "npm run build",
+    "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": {
     ".": {
@@ -30,43 +33,45 @@
     "!dist/**/*.spec.*"
   ],
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "shiki": "^1.23.0"
   },
   "devDependencies": {
-    "@fontsource/material-symbols-outlined": "^5.0.6",
-    "@fontsource/material-symbols-rounded": "^5.0.6",
-    "@fontsource/material-symbols-sharp": "^5.0.6",
-    "@fontsource/roboto": "^5.0.7",
-    "@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.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",
+    "@types/prettier": "^3.0.0",
+    "@types/prismjs": "^1.26.5",
+    "@typescript-eslint/eslint-plugin": "^8.32.1",
+    "@typescript-eslint/parser": "^8.32.1",
+    "bun-types": "^1.2.13",
+    "eslint": "^9.27.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-import-x": "^4.12.2",
+    "eslint-plugin-svelte": "^3.8.1",
+    "eslint-plugin-unicorn": "^59.0.1",
+    "estree-walker": "^3.0.3",
+    "globals": "^16.1.0",
+    "magic-string": "^0.30.17",
+    "material-symbols": "^0.31.3",
+    "prettier": "^3.5.3",
+    "prettier-plugin-svelte": "^3.4.0",
+    "publint": "^0.3.12",
+    "sass": "^1.89.0",
+    "svelte": "^5.30.2",
+    "svelte-check": "^4.2.1",
+    "svelte-eslint-parser": "^1.2.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vitest": "^3.1.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "beercss": "^3.2.13",
-    "highlight.js": "^11.8.0",
-    "material-dynamic-colors": "^1.0.1",
-    "svelte-highlight": "^7.3.0"
-  }
+    "@material/material-color-utilities": "^0.3.0"
+  },
+  "license": "MIT"
 }

package/dist/components/breadcrumbs/index.scss

@@ -1,20 +0,0 @@
-// QBreadcrumbs
-.q-breadcrumbs {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &__separator:first-child {
-    display: none;
-  }
-}
-
-// QBreadcrumbsEl
-.q-breadcrumbs.q-breadcrumbs__el {
-  display: flex;
-  align-items: center;
-
-  & > .q-icon {
-    @include margin("r");
-  }
-}

package/dist/components/button/index.scss

@@ -1,81 +0,0 @@
-.q-btn {
-  position: relative;
-  cursor: pointer;
-  text-decoration: none;
-  border: none;
-  font-family: inherit;
-  outline: inherit;
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  min-width: 2.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--on-primary);
-  padding: 0 1.5rem;
-  background-color: var(--primary);
-  margin: 0 0.5rem;
-  border-radius: 1.25rem;
-  transition:
-    var(--speed3) transform,
-    var(--speed3) border-radius,
-    var(--speed3) padding;
-  user-select: none;
-  gap: 1rem;
-  line-height: normal;
-  @extend .elevate-sm-bottom;
-  @extend .ripple;
-
-  $sizeMap: (
-    "sm": -1,
-    "lg": 1,
-    "xl": 2,
-  );
-
-  @each $size, $val in $sizeMap {
-    &.q-btn--#{$size} {
-      height: 2.5rem + 0.5 * $val;
-      min-width: 2.5rem + 0.5 * $val;
-      border-radius: 1.25rem + 0.25 * $val;
-      font-size: 1rem + 0.125 * $val;
-    }
-  }
-
-  &.q-btn[aria-disabled] {
-    @extend .disabled;
-  }
-
-  &.q-btn--outlined {
-    @include transparent($ripple: true);
-    @include border(var(--primary));
-    color: var(--primary);
-  }
-
-  &.q-btn--unelevated {
-    @extend .elevate-none;
-  }
-
-  &.q-btn--flat {
-    @include transparent($ripple: true);
-    @extend .elevate-none;
-  }
-
-  &.q-btn--rectangle {
-    border-radius: 0.5rem;
-  }
-
-  &.q-btn--round {
-    width: 2.5rem;
-    height: 2.5rem;
-    border-radius: 50%;
-    padding: 0;
-  }
-
-  & > :is(.q-icon, .q-circular-progress) {
-    margin: 0 -0.5rem;
-  }
-
-  @include btn-image;
-}

package/dist/components/card/index.scss

@@ -1,56 +0,0 @@
-// QCard
-.q-card {
-  display: block;
-  border-radius: 0.75rem;
-  transition:
-    var(--speed-3) transform,
-    var(--speed-3) padding,
-    var(--speed-3) border-radius;
-  @include padding("a", "md");
-  @extend .elevate-sm-bottom;
-
-  &.q-card--bordered {
-    box-sizing: border-box;
-    @include border();
-    @extend .elevate-none;
-  }
-
-  &.q-card--flat {
-    @extend .elevate-none;
-  }
-
-  &.q-card--rounded {
-    border-radius: 2rem;
-  }
-
-  & > .q-card__title {
-    @include margin("b");
-  }
-}
-
-// QCardSection
-.q-card > .q-card__section {
-  @include padding;
-
-  &.q-card__section--horizontal {
-    @extend .row;
-    border-radius: 0;
-
-    &:not(.q-card__title + .q-card__section) {
-      @include margin("t");
-    }
-  }
-}
-
-// QCardActions
-.q-card > .q-card__actions {
-  display: flex;
-
-  &.q-card__actions--vertical {
-    flex-direction: column;
-  }
-
-  &:not(.q-card__title + .q-card__actions) {
-    @include margin("t");
-  }
-}

package/dist/components/chip/index.scss

@@ -1,86 +0,0 @@
-// QChip
-.q-chip {
-  box-sizing: content-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 2.5rem;
-  min-width: 2.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  background-color: var(--secondary);
-  color: var(--on-secondary);
-  text-transform: none;
-  border-radius: 0.5em;
-  transition:
-    var(--speed3) transform,
-    var(--speed3) border-radius,
-    var(--speed3) padding;
-  line-height: normal;
-  text-decoration: none;
-  cursor: pointer;
-  border: none;
-
-  @extend .ripple;
-  @extend .no-select;
-  @include padding("x", "md");
-  @include margin("x");
-  @include gap("md");
-  @include btn-image("chip");
-
-  &.q-chip--sm {
-    height: 2rem;
-    min-width: 2rem;
-  }
-
-  &.q-chip--lg {
-    height: 3rem;
-    min-width: 3rem;
-  }
-
-  &.q-chip--bordered {
-    @include transparent($ripple: true);
-    @include border(var(--secondary));
-    color: var(--secondary);
-  }
-
-  &.q-chip--rounded {
-    border-radius: 1.25rem;
-
-    &.q-chip--sm {
-      border-radius: 1rem;
-    }
-
-    &.q-chip--lg {
-      border-radius: 1.5rem;
-    }
-  }
-
-  &.q-chip--filled {
-    background-color: var(--secondary-container);
-    color: var(--on-secondary-container);
-    border: none;
-  }
-
-  &.q-chip--vertical {
-    flex-direction: column;
-    height: auto;
-    max-height: none;
-
-    @include padding("y");
-    @include gap("xs");
-  }
-
-  &.q-chip[aria-disabled="true"] {
-    @extend .disabled;
-    &.q-chip--bordered {
-      border-color: var(--on-surface);
-    }
-  }
-}
-
-// QChip icons
-.q-chip > .q-icon {
-  --size: 1.25rem;
-  margin-inline: -0.5rem;
-}

package/dist/components/drawer/index.scss

@@ -1,56 +0,0 @@
-.q-drawer {
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  right: auto;
-  bottom: 0;
-  left: auto;
-  height: 100%;
-  transition:
-    all var(--speed3),
-    background-color 0s;
-  overflow: auto;
-  padding: 8px;
-
-  &.fixed {
-    position: fixed;
-  }
-
-  &.left {
-    left: 0px;
-    transform: translate(-100%);
-    width: var(--left-drawer-width);
-    &.bordered {
-      border-right: 0.0625rem solid var(--outline);
-    }
-  }
-
-  &.right {
-    right: 0px;
-    transform: translate(100%);
-    width: var(--right-drawer-width);
-
-    &.bordered {
-      border-left: 0.0625rem solid var(--outline);
-    }
-  }
-
-  &.active {
-    transform: translate(0);
-  }
-
-  &.offset {
-    &-top {
-      top: var(--header-height);
-      height: calc(100% - var(--header-height));
-
-      &.offset-bottom {
-        height: calc(100% - var(--header-height) - var(--footer-height));
-      }
-    }
-    &-bottom {
-      bottom: var(--footer-height);
-      height: calc(100% - var(--footer-height));
-    }
-  }
-}

package/dist/components/footer/index.scss

@@ -1,5 +0,0 @@
-.q-footer {
-  width: 100%;
-  height: var(--footer-height);
-  transition: all var(--speed3);
-}