@maple-kit/ui 0.8.0 → 0.10.0

package/dist/stylesheet.js

@@ -1,183 +1,21 @@
-import { COLOR_TOKENS, MOTION_TOKENS, RADIUS_TOKENS, REDUCED_MOTION_TOKENS, SHADOW_TOKENS, SIZE_TOKENS, TYPE_TOKENS } from "./tokens.js";
 import { composerCss } from "./composer/css.js";
 import { islandCss } from "./island/css.js";
 import { marksCss } from "./marks/css.js";
+import { mockCss } from "./mock/css.js";
 import { noticeCss } from "./notice/css.js";
 import { pickerCss } from "./picker/css.js";
+import { SCHEME_ATTRIBUTE, baseCss, tokenCss } from "./sheet-base.js";
 //#region src/stylesheet.ts
-const SCHEME_ATTRIBUTE = "data-mk-scheme";
-const DARK_HOST = `:host([${SCHEME_ATTRIBUTE}="dark"])`;
-function declare(tokens) {
-	return Object.entries(tokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
-}
-function declareThemed(tokens, scheme) {
-	return Object.entries(tokens).map(([name, value]) => `  ${name}: ${value[scheme]};`).join("\n");
-}
-function tokenCss() {
-	return [
-		`:host {`,
-		declareThemed(COLOR_TOKENS, "light"),
-		declareThemed(SHADOW_TOKENS, "light"),
-		declare(RADIUS_TOKENS),
-		declare(TYPE_TOKENS),
-		declare(SIZE_TOKENS),
-		declare(MOTION_TOKENS),
-		`  color-scheme: light;`,
-		`}`,
-		``,
-		`${DARK_HOST} {`,
-		declareThemed(COLOR_TOKENS, "dark"),
-		declareThemed(SHADOW_TOKENS, "dark"),
-		`  color-scheme: dark;`,
-		`}`,
-		``,
-		`@media (prefers-reduced-motion: reduce) {`,
-		`  :host {`,
-		declare(REDUCED_MOTION_TOKENS).split("\n").map((line) => `  ${line}`).join("\n"),
-		`  }`,
-		`}`
-	].join("\n");
-}
 function ruleCss() {
 	return `
-:host {
-  display: block;
-  font-family: var(--mk-font);
-  font-size: 13px;
-  font-weight: 400;
-  font-style: normal;
-  font-variant: normal;
-  letter-spacing: normal;
-  line-height: 1.45;
-  text-align: left;
-  color: var(--mk-fg);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-.mk-layer {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.mk-live {
-  pointer-events: auto;
-}
-
-.mk-surface {
-  background: var(--mk-bg);
-  border: 1px solid var(--mk-line-firm);
-  border-radius: var(--mk-r);
-  box-shadow: var(--mk-sh2);
-}
-
-${DARK_HOST} .mk-surface {
-  box-shadow: var(--mk-sh2), inset 0 1px 0 oklch(1 0 0 / 0.045);
-}
-
-.mk-num {
-  font-variant-numeric: tabular-nums;
-}
-
-.mk-mono {
-  font-family: var(--mk-mono);
-  font-variant-numeric: tabular-nums;
-}
-
-.mk-body {
-  text-wrap: pretty;
-}
-
-.mk-title,
-h1,
-h2,
-h3 {
-  text-wrap: balance;
-}
-
-.mk-shot {
-  outline: 1px solid var(--mk-shot-edge);
-  outline-offset: -1px;
-}
-
-/* No radius here: an outline already follows the control's own corners, and
-   forcing one squared off every pill in the overlay the moment it took focus.
-   The two controls that carry no radius of their own are given one below. */
-:where(a, button, input, textarea, [role="button"], [tabindex]):focus-visible {
-  outline: 2px solid var(--mk-accent);
-  outline-offset: 2px;
-}
-
-.mk-press {
-  transition: transform var(--mk-dur-fade) var(--mk-ease-surface);
-}
-
-.mk-press:active {
-  transform: scale(var(--mk-press));
-}
-
-.mk-hit {
-  position: relative;
-}
-
-.mk-hit::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: max(100%, var(--mk-hit));
-  height: max(100%, var(--mk-hit));
-  transform: translate(-50%, -50%);
-}
-
-.mk-track {
-  transition: opacity var(--mk-dur-fade) var(--mk-ease-surface);
-}
-
-.mk-icon-swap {
-  display: inline-grid;
-  place-items: center;
-}
-
-.mk-icon-swap > * {
-  grid-area: 1 / 1;
-  transition:
-    opacity var(--mk-dur-swap) var(--mk-ease-swap),
-    transform var(--mk-dur-swap) var(--mk-ease-swap),
-    filter var(--mk-dur-swap) var(--mk-ease-swap);
-}
-
-.mk-icon-swap > [data-mk-icon="out"] {
-  opacity: 0;
-  transform: scale(var(--mk-icon-scale));
-  filter: blur(var(--mk-icon-blur));
-}
-
-.mk-icon-swap > [data-mk-icon="in"] {
-  opacity: 1;
-  transform: scale(1);
-  filter: blur(0);
-}
-
-@media (max-width: 639px) {
-  :host {
-    --mk-composer-w: 100%;
-    --mk-composer-r: var(--mk-r) var(--mk-r) 0 0;
-  }
-}
+${baseCss()}
 
 ${islandCss()}
 ${composerCss()}
 ${marksCss()}
 ${noticeCss()}
 ${pickerCss()}
+${mockCss()}
 `.trim();
 }
 function buildOverlayCss() {
@@ -185,4 +23,4 @@ function buildOverlayCss() {
 }
 const OVERLAY_CSS = buildOverlayCss();
 //#endregion
-export { OVERLAY_CSS, SCHEME_ATTRIBUTE, ruleCss, tokenCss };
+export { OVERLAY_CSS, SCHEME_ATTRIBUTE, ruleCss };

package/dist/tip.js

@@ -1,4 +1,4 @@
-import { cx } from "./part.js";
+import { cx } from "./cx.js";
 import { createElement, forwardRef, useCallback, useId, useRef } from "react";
 //#region src/tip.ts
 const GAP_PX = 6;

package/dist/tokens.js

@@ -128,6 +128,7 @@ const MOTION_TOKENS = {
 	"--mk-dur-swap": "150ms",
 	"--mk-dur-mark-in": "500ms",
 	"--mk-dur-fade": "150ms",
+	"--mk-dur-shimmer": "1100ms",
 	"--mk-delay-tooltip": "80ms",
 	"--mk-stagger-step": "40ms",
 	"--mk-stagger-cap": "240ms",
@@ -138,7 +139,8 @@ const MOTION_TOKENS = {
 	"--mk-rise-row": "6px",
 	"--mk-shift-composer": "100%",
 	"--mk-icon-scale": "0.25",
-	"--mk-icon-blur": "4px"
+	"--mk-icon-blur": "4px",
+	"--mk-shimmer-sweep": "100%"
 };
 const REDUCED_MOTION_TOKENS = {
 	"--mk-ease-surface": "ease-out",
@@ -153,6 +155,7 @@ const REDUCED_MOTION_TOKENS = {
 	"--mk-dur-swap": "100ms",
 	"--mk-dur-mark-in": "100ms",
 	"--mk-dur-fade": "100ms",
+	"--mk-dur-shimmer": "100ms",
 	"--mk-delay-tooltip": "0ms",
 	"--mk-stagger-step": "0ms",
 	"--mk-stagger-cap": "0ms",
@@ -163,7 +166,8 @@ const REDUCED_MOTION_TOKENS = {
 	"--mk-rise-row": "0px",
 	"--mk-shift-composer": "0%",
 	"--mk-icon-scale": "1",
-	"--mk-icon-blur": "0px"
+	"--mk-icon-blur": "0px",
+	"--mk-shimmer-sweep": "0%"
 };
 const RUNTIME_TOKENS = [
 	"--mk-p",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maple-kit/ui",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Maple's composed reviewer parts: the marks, the island and the composer",
   "license": "Apache-2.0",
   "type": "module",
@@ -22,18 +22,20 @@
   ],
   "exports": {
     ".": "./dist/index.js",
-    "./maple": "./dist/maple.js",
     "./composer": "./dist/composer/index.js",
     "./icons": "./dist/icons/index.js",
     "./island": "./dist/island/index.js",
+    "./maple": "./dist/maple.js",
     "./marks": "./dist/marks/index.js",
+    "./mock": "./dist/mock/index.js",
     "./notice": "./dist/notice/index.js",
     "./picker": "./dist/picker/index.js",
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@maple-kit/core": "0.8.0",
-    "@maple-kit/react": "0.8.0"
+    "@maple-kit/core": "0.10.0",
+    "@maple-kit/mock": "0.10.0",
+    "@maple-kit/react": "0.10.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",