@quaffui/quaff 0.1.0-prealpha15 → 0.1.0-prealpha19

package/package.json

@@ -1,21 +1,23 @@
 {
   "name": "@quaffui/quaff",
-  "version": "0.1.0-prealpha15",
+  "version": "0.1.0-prealpha19",
   "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",
     "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": "NODE_OPTIONS='--loader ts-node/esm/transpile-only --no-warnings' node 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 .",
+    "docgen-props": "bun scripts/docgenProps.ts",
+    "colorgen": "bun scripts/colorgen.ts",
+    "docgen-snippets": "bun scripts/docgenSnippets.ts",
+    "write-version": "bun scripts/writeVersion.ts"
   },
   "exports": {
     ".": {
@@ -33,39 +35,40 @@
     "svelte": "^4.0.0"
   },
   "devDependencies": {
-    "@fontsource/material-symbols-outlined": "^5.0.7",
-    "@fontsource/material-symbols-rounded": "^5.0.7",
-    "@fontsource/material-symbols-sharp": "^5.0.7",
-    "@fontsource/roboto": "^5.0.8",
-    "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.24.1",
-    "@sveltejs/package": "^2.2.2",
-    "@types/node": "^20.6.0",
-    "@types/prettier": "^2.7.3",
-    "@types/prismjs": "^1.26.0",
-    "@typescript-eslint/eslint-plugin": "^6.6.0",
-    "@typescript-eslint/parser": "^6.6.0",
-    "eslint": "^8.49.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-svelte": "^2.33.1",
-    "prettier": "^3.0.3",
-    "prettier-plugin-svelte": "^3.0.3",
-    "publint": "^0.2.2",
-    "sass": "^1.66.1",
-    "svelte": "^4.2.0",
-    "svelte-check": "^3.5.1",
-    "ts-node": "^10.9.1",
-    "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.4"
+    "@fontsource/roboto": "^5.1.0",
+    "@material/material-color-utilities": "^0.3.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",
+    "shiki": "^1.21.0",
+    "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": {
-    "highlight.js": "^11.8.0",
-    "material-dynamic-colors": "^1.0.1",
-    "svelte-highlight": "^7.3.0"
-  }
+  "type": "module"
 }

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,98 +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;
-
-  $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;
-  }
-
-  &:is(:hover, :focus):not([aria-disabled])::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--on-primary);
-  }
-
-  &:hover:not([aria-disabled])::after {
-    opacity: 0.08;
-  }
-
-  &:focus:not([aria-disabled])::after {
-    opacity: 0.16;
-  }
-
-  @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,103 +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 .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);
-    }
-  }
-
-  &:is(:hover, :focus):not([aria-disabled])::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--on-primary);
-  }
-
-  &:hover:not([aria-disabled])::after {
-    opacity: 0.08;
-  }
-
-  &:focus:not([aria-disabled])::after {
-    opacity: 0.16;
-  }
-}
-
-// QChip icons
-.q-chip > .q-icon {
-  --size: 1.25rem;
-  margin-inline: -0.5rem;
-}

package/dist/components/drawer/index.scss

@@ -1,59 +0,0 @@
-.q-drawer {
-  z-index: 2;
-  position: absolute;
-  top: 0;
-  right: auto;
-  bottom: 0;
-  left: auto;
-  height: 100%;
-  background-color: var(--surface);
-  color: var(--on-surface);
-  transition:
-    all var(--speed3),
-    background-color 0s;
-  overflow: auto;
-  padding: 8px;
-
-  &.q-drawer--fixed {
-    position: fixed;
-  }
-
-  &.q-drawer--left {
-    left: 0px;
-    transform: translate(-100%);
-    width: var(--left-drawer-width);
-    &.q-drawer--bordered {
-      border-right: 0.0625rem solid var(--outline);
-    }
-  }
-
-  &.q-drawer--right {
-    right: 0px;
-    transform: translate(100%);
-    width: var(--right-drawer-width);
-
-    &.q-drawer--bordered {
-      border-left: 0.0625rem solid var(--outline);
-    }
-  }
-
-  &.q-drawer--active {
-    transform: translate(0);
-  }
-
-  &.q-drawer--offset {
-    &-top {
-      top: var(--header-height);
-      height: calc(100% - var(--header-height));
-
-      &.q-drawer--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,28 +0,0 @@
-.q-footer {
-  width: 100%;
-  height: var(--footer-height);
-  transition: all var(--speed3);
-  background-color: var(--surface);
-  color: var(--on-surface);
-  padding: 0 1rem;
-
-  nav {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    white-space: nowrap;
-    gap: 1rem;
-
-    > * {
-      margin: 0;
-    }
-  }
-
-  &--bordered {
-    border-top: solid 0.0625rem var(--outline);
-  }
-
-  &--elevated {
-    @include elevate(1, "top");
-  }
-}