@mks2508/mks-ui 0.6.8 → 0.8.0

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