@yewdiel21/motion-kit 0.9.1 → 0.14.0

package/dist/css/components/command-search.css

@@ -0,0 +1,252 @@
+/* components/command-search/command-search.css */
+/* command-search — a dark command palette (Melonmind's glass, near black in both modes): a search field, grouped
+   results with marked letters, a pill gliding under the active one and a footer with the keys. */
+.mk-command-search,
+mk-command-search {
+  display: inline-flex;
+}
+
+[data-mk-command] {
+  --mk-command-bg: rgb(14 15 17 / 0.92);
+  --mk-command-text: #eceef1;
+  --mk-command-muted: #8b919b;
+  --mk-command-line: rgb(255 255 255 / 0.07);
+  --mk-command-pill: rgb(255 255 255 / 0.08);
+  --mk-command-mark: #f5d76e;
+  width: min(32rem, calc(100vw - 2rem));
+  max-height: min(28rem, calc(100dvh - 4rem));
+  margin: 12vh auto auto;
+  padding: 0;
+  overflow: visible;
+  border: 0;
+  background: transparent;
+  color: var(--mk-command-text);
+  font-family: var(--mk-font);
+}
+
+[data-mk-command]::backdrop {
+  background: color-mix(in srgb, var(--mk-scrim, #000) 28%, transparent);
+  backdrop-filter: blur(3px);
+}
+
+[data-mk-command][open] {
+  display: block;
+}
+
+[data-mk-command] [data-mk-command-panel] {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  overflow: hidden;
+  border-radius: 24px;
+  background: var(--mk-command-bg);
+  box-shadow:
+    inset 1px 1px 1px rgb(255 255 255 / 0.08),
+    inset -1px -1px 1px rgb(255 255 255 / 0.04),
+    0 30px 60px -20px rgb(0 0 0 / 0.6);
+  backdrop-filter: blur(24px);
+}
+
+[data-mk-command] [data-mk-command-field] {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  margin: 0.6rem;
+  padding: 0 0.85rem;
+  border-radius: 14px;
+  background: rgb(255 255 255 / 0.05);
+  box-shadow: inset 0 0 0 1px var(--mk-command-line);
+}
+
+[data-mk-command] [data-mk-command-icon] {
+  display: grid;
+  color: var(--mk-command-muted);
+}
+
+[data-mk-command] input {
+  flex: 1;
+  min-width: 0;
+  min-height: 2.75rem;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--mk-command-text);
+  font: inherit;
+  font-size: 1rem;
+}
+
+[data-mk-command] input::placeholder {
+  color: var(--mk-command-muted);
+}
+
+[data-mk-command] [data-mk-command-scroll] {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0 0.6rem 0.6rem;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(255 255 255 / 0.15) transparent;
+}
+
+[data-mk-command] [data-mk-command-pill] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 12px;
+  background: var(--mk-command-pill);
+  pointer-events: none;
+}
+
+[data-mk-command] [data-mk-command-list] {
+  position: relative;
+}
+
+[data-mk-command] [data-mk-command-group-label] {
+  padding: 0.75rem 0.65rem 0.35rem;
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+[data-mk-command] [data-mk-command-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.5rem;
+  padding: 0 0.65rem;
+  border-radius: 12px;
+  cursor: pointer;
+}
+
+[data-mk-command] [data-mk-command-arrow] {
+  width: 1rem;
+  color: var(--mk-command-muted);
+  text-align: center;
+  transition: translate 0.3s cubic-bezier(0.38, 0.49, 0, 2);
+}
+
+[data-mk-command] [data-mk-command-item][aria-selected='true'] [data-mk-command-arrow] {
+  color: var(--mk-command-text);
+  translate: 2px 0;
+}
+
+[data-mk-command] [data-mk-command-label] {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  font-size: 0.9375rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-mk-command] mark {
+  border-radius: 3px;
+  background: rgb(245 215 110 / 0.16);
+  color: var(--mk-command-mark);
+}
+
+[data-mk-command] [data-mk-command-hint] {
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-command] [data-mk-command-empty] {
+  margin: 0;
+  padding: 2rem 1rem;
+  color: var(--mk-command-muted);
+  text-align: center;
+}
+
+[data-mk-command] [data-mk-command-empty][hidden] {
+  display: none;
+}
+
+[data-mk-command] [data-mk-command-footer] {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 0.9rem;
+  border-top: 1px solid var(--mk-command-line);
+  color: var(--mk-command-muted);
+  font-size: 0.75rem;
+}
+
+[data-mk-command] [data-mk-command-footer] span {
+  margin-right: 0.6rem;
+}
+
+[data-mk-command] kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  padding: 0 0.3rem;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 0.07);
+  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.06);
+  color: var(--mk-command-text);
+  font-family: inherit;
+  font-size: 0.75rem;
+}
+
+/* The trigger (optional): a search pill with the shortcut. */
+[data-mk-command-open] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  min-height: 2.75rem;
+  padding: 0 0.6rem 0 1rem;
+  border: 0;
+  border-radius: 64px;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  font: inherit;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+[data-mk-command-open]:hover {
+  background: var(--mk-surface-4);
+}
+
+[data-mk-command-open]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+[data-mk-command-open] kbd {
+  padding: 0.15rem 0.45rem;
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font-family: inherit;
+  font-size: 0.75rem;
+}
+
+@media (max-width: 520px) {
+  [data-mk-command] {
+    margin-top: 1rem;
+  }
+
+  [data-mk-command] [data-mk-command-footer] {
+    display: none;
+  }
+}
+
+/* Container transform (motion/morph.ts): the trigger's look covers the panel and fades into it; the trigger hides meanwhile. */
+[data-mk-command] .mk-morph-face {
+  position: absolute;
+  inset: 0;
+  z-index: 2147483647;
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+:is(.mk-command-search, mk-command-search) [data-mk-morph-origin] {
+  opacity: 0 !important;
+  transition: opacity 80ms ease !important;
+  pointer-events: none;
+}

package/dist/css/components/context-menu.css

@@ -0,0 +1,23 @@
+/* components/context-menu/context-menu.css */
+/* context-menu — the area that answers a right click; its menu is .mk-menu, placed at the pointer. */
+mk-context-menu {
+  display: block;
+}
+
+.mk-context-menu,
+mk-context-menu {
+  -webkit-touch-callout: none;
+}
+
+:is(.mk-context-menu, mk-context-menu):focus-visible,
+:is(.mk-context-menu, mk-context-menu) [data-mk-context-trigger]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 3px;
+}
+
+/* The area pressed while its menu is open. */
+:is(.mk-context-menu, mk-context-menu)[aria-expanded='true'],
+:is(.mk-context-menu, mk-context-menu) [data-mk-context-trigger][aria-expanded='true'] {
+  outline: 2px solid color-mix(in srgb, var(--mk-accent) 45%, transparent);
+  outline-offset: 3px;
+}

package/dist/css/components/credit-card.css

@@ -0,0 +1,288 @@
+/* components/credit-card/credit-card.css */
+/* credit-card — a dark card that fills in as you type (front: chip, brand, number, holder, expiry; back: stripe and CVC),
+   above Melonmind fields (16 px radius, surface-container, 3 px focus ring). The engine rolls the characters in, glides
+   the frame and turns the card in 3D. */
+.mk-credit-card,
+mk-credit-card {
+  --mk-card-width: 22rem;
+  --mk-card-bg: linear-gradient(145deg, #2b2c30 0%, #121315 55%, #050506 100%);
+  --mk-card-text: #f2f3f5;
+  --mk-card-muted: rgb(242 243 245 / 0.55);
+  --mk-card-radius: 20px;
+  display: grid;
+  gap: 1.5rem;
+  justify-items: center;
+  color: var(--mk-text);
+  font-family: var(--mk-font);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-visual] {
+  width: min(100%, var(--mk-card-width));
+  aspect-ratio: 1.586;
+  container-type: inline-size;
+  perspective: 1200px;
+  cursor: pointer;
+  user-select: none;
+  transform-style: preserve-3d;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-inner] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  padding: 7% 7.5%;
+  border-radius: var(--mk-card-radius);
+  background: var(--mk-card-bg);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.12),
+    inset 0 0 0 1px rgb(255 255 255 / 0.06),
+    0 24px 48px -20px rgb(0 0 0 / 0.6);
+  color: var(--mk-card-text);
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+/* A soft sheen across the face. */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(120% 80% at 15% 0%, rgb(255 255 255 / 0.1), transparent 55%);
+  pointer-events: none;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face='back'] {
+  padding: 0;
+  transform: rotateY(180deg);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-chip] {
+  position: absolute;
+  top: 12%;
+  left: 7.5%;
+  width: 13%;
+  aspect-ratio: 1.3;
+  border-radius: 6px;
+  background:
+    linear-gradient(90deg, transparent 32%, rgb(0 0 0 / 0.25) 33% 35%, transparent 36% 64%, rgb(0 0 0 / 0.25) 65% 67%, transparent 68%),
+    linear-gradient(180deg, transparent 45%, rgb(0 0 0 / 0.25) 46% 54%, transparent 55%),
+    linear-gradient(135deg, #e9e1c4, #b9ad86);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-brand] {
+  position: absolute;
+  top: 11%;
+  right: 7.5%;
+  font-size: clamp(0.9rem, 4.6cqi, 1.35rem);
+  font-style: italic;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-face='back'] [data-mk-card-brand] {
+  top: auto;
+  bottom: 11%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region] {
+  position: absolute;
+  display: grid;
+  gap: 0.15rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='number'] {
+  bottom: 13%;
+  left: 7.5%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='name'] {
+  bottom: 33%;
+  left: 7.5%;
+  max-width: 58%;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-region='expiry'] {
+  right: 7.5%;
+  bottom: 33%;
+  text-align: right;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-caption] {
+  color: var(--mk-card-muted);
+  font-size: 0.5625rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-number], [data-mk-card-name], [data-mk-card-expiry], [data-mk-card-cvc]) {
+  display: inline-flex;
+  overflow: hidden;
+  font-family: var(--mk-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  white-space: pre;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-number], [data-mk-card-name], [data-mk-card-expiry], [data-mk-card-cvc]) > span {
+  display: inline-block;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-number] {
+  font-size: clamp(1rem, 5.4cqi, 1.45rem);
+  font-weight: 500;
+  letter-spacing: 0.06em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-number] [data-mk-space] {
+  width: 0.6em;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-name] {
+  overflow: hidden;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-overflow: ellipsis;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-expiry] {
+  justify-content: flex-end;
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-placeholder] {
+  color: var(--mk-card-muted);
+}
+
+/* The frame around the part being edited. */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-frame] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: 10px;
+  box-shadow:
+    inset 0 0 0 1.5px rgb(255 255 255 / 0.55),
+    0 0 18px rgb(255 255 255 / 0.12);
+  opacity: 0;
+  pointer-events: none;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-stripe] {
+  position: absolute;
+  top: 14%;
+  inset-inline: 0;
+  height: 20%;
+  background: #050506;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-signature] {
+  position: absolute;
+  top: 44%;
+  left: 7.5%;
+  right: 7.5%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  height: 18%;
+  padding: 0 0.75rem;
+  border-radius: 6px;
+  background: repeating-linear-gradient(135deg, #e9e9ec 0 6px, #dcdce0 6px 12px);
+  color: #121315;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-cvc] {
+  padding: 0.15rem 0.45rem;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 0.875rem;
+  font-style: italic;
+  font-weight: 600;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-cvc] [data-mk-placeholder] {
+  color: #9a9ca3;
+}
+
+/* Fields (Melonmind input: surface-container-high, 16 px radius, 3 px focus ring). */
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-fields] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+  width: min(100%, var(--mk-card-width));
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-label] {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-label='number'], [data-mk-card-label='name']) {
+  grid-column: 1 / -1;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field] {
+  width: 100%;
+  min-height: 3rem;
+  padding: 0 1rem;
+  border: 0;
+  border-radius: 16px;
+  outline: none;
+  background: var(--mk-surface-4);
+  color: var(--mk-text);
+  font: inherit;
+  font-size: 1rem;
+  letter-spacing: 0.02em;
+  transition:
+    box-shadow 0.5s,
+    background-color 0.5s;
+}
+
+:is(.mk-credit-card, mk-credit-card) :is([data-mk-card-field='number'], [data-mk-card-field='expiry'], [data-mk-card-field='cvc']) {
+  font-family: var(--mk-font-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field]:hover {
+  background: var(--mk-surface-5);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field]:focus {
+  background: var(--mk-surface-2);
+  box-shadow:
+    0 0 0 3px var(--mk-outline-soft),
+    0 0.5px 2.5px rgb(0 0 0 / 0.3);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-field][aria-invalid='true'] {
+  background: var(--mk-error-soft);
+  color: var(--mk-on-error-soft);
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-error] {
+  min-height: 0;
+  color: var(--mk-error);
+  font-size: 0.75rem;
+}
+
+:is(.mk-credit-card, mk-credit-card) [data-mk-card-error]:empty {
+  display: none;
+}
+
+mk-credit-card {
+  display: grid;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(.mk-credit-card, mk-credit-card) [data-mk-card-field] {
+    transition: none;
+  }
+}