@mks2508/mks-ui 0.7.0 → 0.8.0

package/dist/css/primitives-DotMatrix-dot.css

@@ -0,0 +1,364 @@
+/* =============================================================================
+ *  DotMatrix — progressive fill model.
+ *
+ *  Cells light up one at a time in `pattern` order, stay lit until the
+ *  cycle resets, then repeat. Implementation uses ONE CSS animation per
+ *  matrix that drives a registered custom property `--dm-phase` from
+ *  0 → 1 (fill), holds it at 1 (hold), then snaps back to 0 (reset)
+ *  for a rest period.
+ *
+ *  Each cell carries a `--dm-threshold` (its position in the fill
+ *  sequence, 0..1) and computes its own `::before` opacity as a step
+ *  across `phase - threshold`, multiplied by `--dm-edge-sharpness` so
+ *  the edge can range from "instant snap" to "warm fade".
+ *
+ *  Perf shape: N matrices = N animations total (not N × cells). Cell
+ *  opacity is computed at paint time by calc(); the compositor batches
+ *  updates via the shared phase var. With `contain: layout style paint`
+ *  each cell is isolated so work doesn't cascade.
+ * ============================================================================= */
+
+@property --dm-phase {
+	syntax: '<number>';
+	initial-value: 0;
+	inherits: true;
+}
+
+.dm-root {
+	display: grid;
+	width: 100%;
+	gap: var(--dm-gap, 5px);
+	padding: var(--dm-pad, 0.25rem);
+	border-radius: 0.5rem;
+	background-color: transparent;
+
+	/* Skip render work when the matrix is offscreen. */
+	content-visibility: auto;
+	contain-intrinsic-size: auto 200px;
+	transform: translateZ(0);
+
+	--dm-on: var(--foreground);
+	--dm-off: color-mix(in oklch, var(--foreground) 12%, transparent);
+	--dm-glow: color-mix(in oklch, var(--foreground) 50%, transparent);
+}
+
+/* ─── Cell: base OFF layer — neutral dim ──────────────────────────────── */
+
+.dm-cell {
+	position: relative;
+	aspect-ratio: 1 / 1;
+	min-width: 4px;
+	min-height: 4px;
+	border-radius: var(--dm-radius, 32%);
+	background-color: color-mix(in oklch, var(--foreground) 10%, transparent);
+	opacity: var(--dm-off-opacity, 0.45);
+	transform: scale(var(--dm-off-scale, 0.9));
+	contain: layout style paint;
+
+	--dm-threshold: 0;
+	--dm-stagger-delay: 0ms;
+}
+
+/* ─── Pseudo: ON layer — LED look, fades in as phase crosses threshold ─ */
+
+.dm-cell::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	background-color: var(--dm-on);
+	background-image:
+		radial-gradient(
+			circle at 32% 26%,
+			rgb(255 255 255 / 0.35) 0%,
+			rgb(255 255 255 / 0.12) 18%,
+			transparent 48%
+		),
+		radial-gradient(
+			circle at 70% 78%,
+			rgb(0 0 0 / 0.22) 0%,
+			transparent 60%
+		);
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--dm-on) 65%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--dm-on) 40%, black 20%);
+	opacity: 0;
+	pointer-events: none;
+}
+
+.dm-root[data-variant='glow'] .dm-cell::before {
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--dm-on) 65%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--dm-on) 40%, black 20%),
+		0 0 2px var(--dm-glow),
+		0 0 6px var(--dm-glow),
+		0 0 12px color-mix(in oklch, var(--dm-glow) 55%, transparent);
+}
+
+/* ─── Running: phase animates on root, cells derive state from it ────── */
+
+.dm-root[data-status='running'] {
+	animation-name: var(--dm-anim-phase);
+	animation-duration: var(--dm-cycle-total, 2600ms);
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	animation-fill-mode: both;
+}
+
+/* Lit fraction for THIS cell — 0 when off, 1 when fully filled, ramped
+ * near the threshold by `--dm-edge-sharpness`. Reused by both the pseudo
+ * opacity (the LED glow) and the cell's scale (grows when lit). */
+.dm-root[data-status='running'] .dm-cell {
+	opacity: 1;
+	transform: scale(
+		calc(
+			var(--dm-off-scale, 0.88) +
+			(var(--dm-on-scale, 1) - var(--dm-off-scale, 0.88)) *
+			clamp(
+				0,
+				(var(--dm-phase) - var(--dm-threshold)) *
+					var(--dm-edge-sharpness, 50),
+				1
+			)
+		)
+	);
+}
+
+.dm-root[data-status='running'] .dm-cell::before {
+	opacity: clamp(
+		0,
+		calc(
+			(var(--dm-phase) - var(--dm-threshold)) *
+			var(--dm-edge-sharpness, 50)
+		),
+		1
+	);
+}
+
+/* ─── Accent cells ────────────────────────────────────────────────────── */
+
+.dm-cell[data-accent='true'] {
+	opacity: 1;
+	transform: scale(1);
+}
+
+.dm-cell[data-accent='true']::before {
+	background-color: var(--primary);
+	background-image: none;
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.5),
+		0 0 3px color-mix(in oklch, var(--primary) 70%, transparent),
+		0 0 7px color-mix(in oklch, var(--primary) 50%, transparent);
+	opacity: 1 !important;
+}
+
+/* ─── Lifecycle FINAL animations ──────────────────────────────────────── */
+
+@keyframes dm-success-pop {
+	0% {
+		transform: scale(0.94);
+		filter: brightness(0.7);
+	}
+	45% {
+		transform: scale(1.18);
+		filter: brightness(1.4);
+	}
+	100% {
+		transform: scale(1);
+		filter: brightness(1);
+	}
+}
+
+@keyframes dm-fail-strobe {
+	0% {
+		transform: scale(1);
+		filter: brightness(1);
+	}
+	22% {
+		transform: scale(1.22);
+		filter: brightness(1.55) saturate(1.4);
+	}
+	55% {
+		transform: scale(0.92);
+		filter: brightness(0.75);
+	}
+	100% {
+		transform: scale(0.97);
+		filter: brightness(1);
+	}
+}
+
+@keyframes dm-cancelled-dim {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	100% {
+		transform: scale(0.9);
+		opacity: 0.55;
+	}
+}
+
+.dm-root[data-status='success'] {
+	animation: none;
+}
+.dm-root[data-status='success'] .dm-cell {
+	opacity: 1;
+	transform: scale(1);
+	animation: dm-success-pop 520ms cubic-bezier(0.2, 0, 0.2, 1) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='success'] .dm-cell::before {
+	opacity: 1;
+}
+
+.dm-root[data-status='failed'] {
+	animation: none;
+}
+.dm-root[data-status='failed'] .dm-cell {
+	opacity: 1;
+	animation: dm-fail-strobe 560ms cubic-bezier(0.2, 0, 0.2, 1) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='failed'] .dm-cell::before {
+	background-color: var(--destructive);
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.5),
+		inset 0 0 0 1px color-mix(in oklch, var(--destructive) 55%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--destructive) 40%, black 20%);
+	opacity: 1;
+}
+.dm-root[data-status='failed'][data-variant='glow'] .dm-cell::before {
+	box-shadow:
+		inset 0 0 1px rgb(255 255 255 / 0.55),
+		inset 0 0 0 1px color-mix(in oklch, var(--destructive) 55%, transparent),
+		inset 0 -1px 2px color-mix(in oklch, var(--destructive) 40%, black 20%),
+		0 0 3px color-mix(in oklch, var(--destructive) 70%, transparent),
+		0 0 9px color-mix(in oklch, var(--destructive) 55%, transparent);
+}
+
+.dm-root[data-status='cancelled'] {
+	animation: none;
+}
+.dm-root[data-status='cancelled'] .dm-cell {
+	background-color: color-mix(in oklch, var(--foreground) 22%, transparent);
+	opacity: 0.65;
+	animation: dm-cancelled-dim 380ms cubic-bezier(0.4, 0, 0.8, 0.6) both;
+	animation-delay: var(--dm-stagger-delay, 0ms);
+}
+.dm-root[data-status='cancelled'] .dm-cell::before {
+	opacity: 0;
+}
+
+.dm-root[data-status='idle'] {
+	animation: none;
+}
+.dm-root[data-status='idle'] .dm-cell::before {
+	opacity: 0;
+}
+
+/* ─── Theme-token palettes ────────────────────────────────────────────── */
+
+.dm--foreground {
+	--dm-on: var(--foreground);
+	--dm-off: color-mix(in oklch, var(--foreground) 12%, transparent);
+	--dm-glow: color-mix(in oklch, var(--foreground) 55%, transparent);
+}
+
+.dm--primary {
+	--dm-on: var(--primary);
+	--dm-off: color-mix(in oklch, var(--primary) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--primary) 65%, transparent);
+}
+
+.dm--destructive {
+	--dm-on: var(--destructive);
+	--dm-off: color-mix(in oklch, var(--destructive) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--destructive) 65%, transparent);
+}
+
+.dm--warning {
+	--dm-on: var(--warning);
+	--dm-off: color-mix(in oklch, var(--warning) 14%, transparent);
+	--dm-glow: color-mix(in oklch, var(--warning) 65%, transparent);
+}
+
+/* ─── Named palettes (OKLCH for stability) ────────────────────────────── */
+
+.dm--cyan {
+	--dm-on: oklch(90% 0.2 195);
+	--dm-off: oklch(40% 0.08 195 / 0.4);
+	--dm-glow: oklch(80% 0.25 195 / 0.95);
+}
+.dm--magenta {
+	--dm-on: oklch(85% 0.25 330);
+	--dm-off: oklch(40% 0.08 330 / 0.4);
+	--dm-glow: oklch(75% 0.3 330 / 0.95);
+}
+.dm--yellow {
+	--dm-on: oklch(95% 0.2 90);
+	--dm-off: oklch(50% 0.08 90 / 0.4);
+	--dm-glow: oklch(90% 0.25 90 / 0.95);
+}
+.dm--green {
+	--dm-on: oklch(90% 0.25 145);
+	--dm-off: oklch(40% 0.08 145 / 0.4);
+	--dm-glow: oklch(80% 0.3 145 / 0.95);
+}
+.dm--orange {
+	--dm-on: oklch(85% 0.22 50);
+	--dm-off: oklch(45% 0.08 50 / 0.4);
+	--dm-glow: oklch(75% 0.28 50 / 0.95);
+}
+.dm--blue {
+	--dm-on: oklch(80% 0.22 260);
+	--dm-off: oklch(40% 0.08 260 / 0.4);
+	--dm-glow: oklch(70% 0.28 260 / 0.95);
+}
+.dm--red {
+	--dm-on: oklch(70% 0.25 25);
+	--dm-off: oklch(40% 0.08 25 / 0.4);
+	--dm-glow: oklch(60% 0.3 25 / 0.95);
+}
+.dm--purple {
+	--dm-on: oklch(75% 0.22 300);
+	--dm-off: oklch(40% 0.08 300 / 0.4);
+	--dm-glow: oklch(65% 0.28 300 / 0.95);
+}
+.dm--teal {
+	--dm-on: oklch(82% 0.18 175);
+	--dm-off: oklch(40% 0.08 175 / 0.4);
+	--dm-glow: oklch(72% 0.24 175 / 0.95);
+}
+.dm--pink {
+	--dm-on: oklch(80% 0.2 350);
+	--dm-off: oklch(45% 0.08 350 / 0.4);
+	--dm-glow: oklch(70% 0.26 350 / 0.95);
+}
+.dm--lime {
+	--dm-on: oklch(88% 0.22 120);
+	--dm-off: oklch(45% 0.08 120 / 0.4);
+	--dm-glow: oklch(80% 0.28 120 / 0.95);
+}
+.dm--white {
+	--dm-on: oklch(98% 0 0);
+	--dm-off: oklch(50% 0 0 / 0.3);
+	--dm-glow: oklch(95% 0 0 / 0.85);
+}
+
+/* ─── Reduced motion — freeze animations ─────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+	.dm-root[data-status='running'],
+	.dm-root[data-status='success'] .dm-cell,
+	.dm-root[data-status='failed'] .dm-cell,
+	.dm-root[data-status='cancelled'] .dm-cell {
+		animation: none !important;
+	}
+	.dm-cell {
+		transform: none;
+	}
+}
+

package/dist/css/primitives-GooeyMorphingSurface-gooey.css

@@ -0,0 +1,112 @@
+/* =============================================================================
+ *  GooeyMorphingSurface — CSS layer for the SVG rect morph + HTML overlays.
+ *
+ *  Classes are prefixed `.gms-*` so they act as a manual scope (mks-ui's
+ *  rolldown build produces empty default-exports for CSS modules, so we use
+ *  plain CSS with explicit classnames referenced as string literals from
+ *  the component).
+ *
+ *  Every tunable value comes from inline CSS custom props set by the React
+ *  component at the root element. No hard-coded dimensions or timings here.
+ *
+ *  Technique recap: two <rect>s inside a <g filter="url(#gooey)">. Body rect
+ *  is a geometric CLONE of the pill when closed, and morphs into the card
+ *  geometry (x, y, width, height, rx, ry all interpolate) when open. The
+ *  gaussian-blur + alpha-threshold filter bends the overlapping silhouettes
+ *  into a single shape with a soft metaball throat.
+ * ============================================================================= */
+
+.gms-root {
+	position: relative;
+	display: inline-block;
+}
+
+.gms-shell {
+	position: relative;
+	width: var(--gms-card-w);
+	height: var(--gms-pill-h);
+	color: var(--gms-fill);
+	transition: height var(--gms-duration) var(--gms-ease);
+	/* Drop-shadow follows the fused silhouette. Chained filters = additive
+	 * shadow layers for depth without a hard box-shadow. */
+	filter: drop-shadow(0 16px 38px rgb(0 0 0 / 0.35))
+		drop-shadow(0 4px 10px rgb(0 0 0 / 0.18));
+}
+
+.gms-shell[data-open='true'] {
+	height: calc(var(--gms-pill-h) + var(--gms-card-h));
+}
+
+.gms-svg {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	display: block;
+	overflow: visible;
+	pointer-events: none;
+}
+
+.gms-body-rect {
+	will-change: x, y, width, height;
+	transition:
+		x var(--gms-duration) var(--gms-ease),
+		y var(--gms-duration) var(--gms-ease),
+		width var(--gms-duration) var(--gms-ease),
+		height var(--gms-duration) var(--gms-ease),
+		rx var(--gms-duration) var(--gms-ease),
+		ry var(--gms-duration) var(--gms-ease);
+}
+
+.gms-pill {
+	position: absolute;
+	top: 0;
+	left: var(--gms-pill-x);
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	color: var(--card-foreground);
+	pointer-events: none;
+	z-index: 2;
+}
+
+.gms-card {
+	position: absolute;
+	top: calc(var(--gms-pill-h) - var(--gms-overlap));
+	left: 0;
+	width: var(--gms-card-w);
+	height: var(--gms-card-h);
+	color: var(--card-foreground);
+	opacity: 0;
+	transform: translateY(4px);
+	pointer-events: none;
+	z-index: 2;
+	overflow: hidden;
+	border-radius: var(--gms-card-r);
+	transition:
+		opacity calc(var(--gms-duration) * 0.35) var(--gms-ease),
+		transform calc(var(--gms-duration) * 0.35) var(--gms-ease);
+}
+
+.gms-shell[data-open='true'] .gms-card {
+	opacity: 1;
+	transform: translateY(0);
+	pointer-events: auto;
+	transition:
+		opacity calc(var(--gms-duration) * 0.55) var(--gms-ease)
+			calc(var(--gms-duration) * 0.45),
+		transform calc(var(--gms-duration) * 0.55) var(--gms-ease)
+			calc(var(--gms-duration) * 0.45);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.gms-shell,
+	.gms-body-rect,
+	.gms-card {
+		transition-duration: 0.01ms !important;
+	}
+}
+

package/dist/css/ui-GooeyButton-gooey.css

@@ -0,0 +1,43 @@
+/* =============================================================================
+ *  GooeyButton — transparent hit area over the pill region.
+ *
+ *  The visual pill is drawn by the <GooeyMorphingSurface> primitive; this
+ *  layer is a single button that captures clicks in both open and closed
+ *  states without painting anything. All layout math comes from the
+ *  primitive's CSS custom props (--gms-pill-w, --gms-pill-h).
+ * ============================================================================= */
+
+.gbtn-host {
+	position: relative;
+	display: inline-block;
+}
+
+.gbtn-trigger {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 3;
+	width: var(--gms-pill-w);
+	height: var(--gms-pill-h);
+	padding: 0;
+	margin: 0;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	font: inherit;
+	color: inherit;
+	/* Pill-shaped focus ring. */
+	border-radius: 9999px;
+}
+
+.gbtn-trigger:focus-visible {
+	outline: 2px solid var(--ring, currentColor);
+	outline-offset: 2px;
+}
+
+.gbtn-trigger:disabled {
+	cursor: not-allowed;
+	pointer-events: none;
+}
+