sid-ui 0.1.3 → 0.2.0

package/src/styles/components/chip.css

@@ -0,0 +1,343 @@
+/* Chip — a compact, rounded label. soft, filled, or outlined in ten colors; selected chips take
+   the accent and grow a check; removed chips collapse before they leave. */
+
+.os-chip {
+  --_h: 2rem;
+  --_pad: 0.75rem;
+  --_font: 0.875rem;
+  --_bg: color-mix(in srgb, var(--color-text-primary) 7%, transparent);
+  --_fg: var(--color-text-primary);
+  --_icon: var(--color-icon-secondary, var(--color-text-secondary));
+  --_line: transparent;
+  display: inline-grid;
+  grid-template-columns: 1fr;
+  vertical-align: middle;
+  max-width: 100%;
+  transition:
+    grid-template-columns 0.18s var(--ease-standard),
+    opacity 0.18s var(--ease-standard),
+    transform 0.18s var(--ease-standard);
+  animation: os-chip-in 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.os-chip-sm {
+  --_h: 1.625rem;
+  --_pad: 0.625rem;
+  --_font: 0.78rem;
+}
+
+.os-chip-lg {
+  --_h: 2.375rem;
+  --_pad: 1rem;
+  --_font: 0.9375rem;
+}
+
+.os-chip-inner {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  height: var(--_h);
+  overflow: hidden;
+  border-radius: var(--radius-full);
+  background: var(--_bg);
+  color: var(--_fg);
+  box-shadow: inset 0 0 0 1px var(--_line);
+  white-space: nowrap;
+  transition:
+    background-color 0.15s var(--ease-standard),
+    color 0.15s var(--ease-standard),
+    box-shadow 0.15s var(--ease-standard),
+    transform 0.15s var(--ease-standard);
+}
+
+.os-chip-main {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--_pad);
+  border: 0;
+  border-radius: inherit;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-size: var(--_font);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  text-decoration: none;
+}
+
+button.os-chip-main,
+a.os-chip-main {
+  cursor: pointer;
+}
+
+.os-chip:has(button.os-chip-main:hover, a.os-chip-main:hover) .os-chip-inner {
+  background: color-mix(in srgb, var(--_bg), var(--_fg) 9%);
+}
+
+.os-chip:has(button.os-chip-main:active, a.os-chip-main:active) .os-chip-inner {
+  transform: scale(0.96);
+}
+
+.os-chip-main:focus-visible,
+.os-chip-remove:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+
+.os-chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.os-chip-start {
+  display: inline-flex;
+  align-items: center;
+  margin-inline: -0.125rem 0.375rem;
+  color: var(--_icon);
+}
+
+.os-chip-start > svg,
+.os-chip-start > span:has(> svg) {
+  width: 1.05em;
+  height: 1.05em;
+}
+
+/* An avatar tucks into the curve. */
+.os-chip-start:has(img, [role="img"]) {
+  margin-inline-start: calc(-1 * var(--_pad) + 0.25rem);
+}
+
+.os-chip-count {
+  margin-inline-start: 0.375rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-full);
+  background: color-mix(in srgb, currentColor 13%, transparent);
+  font-size: 0.72em;
+  font-variant-numeric: tabular-nums;
+  font-weight: var(--font-weight-semibold);
+}
+
+/* The check grows in from zero width when the chip is selected. */
+.os-chip-check {
+  display: grid;
+  grid-template-columns: 0fr;
+  margin-inline-start: -0.125rem;
+  transition: grid-template-columns 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+.os-chip-check > span {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.os-chip-check svg {
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  margin-inline-end: 0.3rem;
+  stroke-width: 2.6;
+  transform: scale(0.4);
+  opacity: 0;
+  transition:
+    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity 0.15s;
+}
+
+.os-chip-selected .os-chip-check {
+  grid-template-columns: 1fr;
+}
+
+.os-chip-selected .os-chip-check svg {
+  transform: none;
+  opacity: 1;
+}
+
+/* Remove */
+.os-chip-removable .os-chip-main {
+  padding-inline-end: 0.25rem;
+}
+
+.os-chip-remove {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: calc(var(--_h) - 0.625rem);
+  height: calc(var(--_h) - 0.625rem);
+  margin-inline-end: 0.3125rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-full);
+  background: transparent;
+  color: inherit;
+  opacity: 0.65;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    opacity 0.15s;
+}
+
+.os-chip-remove svg {
+  width: 0.85em;
+  height: 0.85em;
+}
+
+.os-chip-remove:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 14%, transparent);
+}
+
+.os-chip-leaving {
+  grid-template-columns: 0fr;
+  opacity: 0;
+  transform: scale(0.85);
+  pointer-events: none;
+}
+
+.os-chip-disabled {
+  opacity: 0.45;
+}
+
+.os-chip-disabled .os-chip-main,
+.os-chip-disabled .os-chip-remove {
+  cursor: not-allowed;
+}
+
+/* ---------- Colors ---------- */
+
+.os-chip-blue {
+  --_c-bg: var(--color-background-blue);
+  --_c-fg: var(--color-text-blue);
+  --_c-icon: var(--color-icon-blue);
+  --_c-line: var(--color-border-blue);
+}
+.os-chip-green {
+  --_c-bg: var(--color-background-green);
+  --_c-fg: var(--color-text-green);
+  --_c-icon: var(--color-icon-green);
+  --_c-line: var(--color-border-green);
+}
+.os-chip-yellow {
+  --_c-bg: var(--color-background-yellow);
+  --_c-fg: var(--color-text-yellow);
+  --_c-icon: var(--color-icon-yellow);
+  --_c-line: var(--color-border-yellow);
+}
+.os-chip-red {
+  --_c-bg: var(--color-background-red);
+  --_c-fg: var(--color-text-red);
+  --_c-icon: var(--color-icon-red);
+  --_c-line: var(--color-border-red);
+}
+.os-chip-purple {
+  --_c-bg: var(--color-background-purple);
+  --_c-fg: var(--color-text-purple);
+  --_c-icon: var(--color-icon-purple);
+  --_c-line: var(--color-border-purple);
+}
+.os-chip-pink {
+  --_c-bg: var(--color-background-pink);
+  --_c-fg: var(--color-text-pink);
+  --_c-icon: var(--color-icon-pink);
+  --_c-line: var(--color-border-pink);
+}
+.os-chip-teal {
+  --_c-bg: var(--color-background-teal);
+  --_c-fg: var(--color-text-teal);
+  --_c-icon: var(--color-icon-teal);
+  --_c-line: var(--color-border-teal);
+}
+.os-chip-orange {
+  --_c-bg: var(--color-background-orange);
+  --_c-fg: var(--color-text-orange);
+  --_c-icon: var(--color-icon-orange);
+  --_c-line: var(--color-border-orange);
+}
+.os-chip-cyan {
+  --_c-bg: var(--color-background-cyan);
+  --_c-fg: var(--color-text-cyan);
+  --_c-icon: var(--color-icon-cyan);
+  --_c-line: var(--color-border-cyan);
+}
+
+.os-chip:not(.os-chip-neutral).os-chip-filled {
+  --_bg: var(--_c-bg);
+  --_fg: var(--_c-fg);
+  --_icon: var(--_c-icon);
+}
+
+.os-chip:not(.os-chip-neutral).os-chip-soft {
+  --_bg: color-mix(in srgb, var(--_c-bg) 34%, transparent);
+  --_fg: var(--_c-fg);
+  --_icon: var(--_c-icon);
+}
+
+.os-chip-neutral.os-chip-filled {
+  --_bg: color-mix(in srgb, var(--color-text-primary) 11%, transparent);
+}
+
+.os-chip-outlined {
+  --_bg: var(--color-background-surface);
+  --_line: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
+}
+
+.os-chip:not(.os-chip-neutral).os-chip-outlined {
+  --_line: var(--_c-line);
+  --_icon: var(--_c-icon);
+}
+
+/* Selected beats color: the accent says “on”. */
+.os-chip.os-chip-selected {
+  --_bg: var(--color-accent-muted);
+  --_fg: var(--color-accent);
+  --_icon: var(--color-accent);
+  --_line: color-mix(in srgb, var(--color-accent) 40%, transparent);
+}
+
+/* ---------- Group ---------- */
+
+.os-chip-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.os-chip-group-scroll {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-block: 2px;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 24px), transparent);
+  padding-inline: 12px 24px;
+  margin-inline: -12px;
+}
+
+.os-chip-group-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.os-chip-group-scroll > .os-chip {
+  flex-shrink: 0;
+}
+
+@keyframes os-chip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .os-chip,
+  .os-chip-inner,
+  .os-chip-check,
+  .os-chip-check svg {
+    transition: none;
+    animation: none;
+  }
+}

package/src/styles/components/code-input.css

@@ -1,9 +1,15 @@
-/* CodeInput — one round cell per character. A filled cell pops in, the active cell lifts and
-   shows a blinking caret, a wrong code shakes once, and a right one ripples green across the row.
-   Motion uses only duration/ease tokens and stands down for prefers-reduced-motion. */
+/* CodeInput — one clean cell per character. Each digit is a drum that spins from 0 (or from the
+   digit it replaces) and settles with a slight overshoot, like a phone's scroll picker. The active
+   cell takes the accent ring, a wrong code shakes once, and a right one lifts green cell by cell.
+   Motion stands down for prefers-reduced-motion. */
 
 .os-code {
-  --_cell: var(--spacing-12);
+  --_cell: 3.25rem;
+  --_cell-h: 4rem;
+  --_radius: 0.875rem;
+  --_ok: var(--color-data-categorical-green);
+  --_bad: var(--color-data-categorical-red);
+  --_line: color-mix(in srgb, var(--color-text-primary) 15%, transparent);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2);
@@ -11,11 +17,15 @@
 }
 
 .os-code-sm {
-  --_cell: var(--spacing-10);
+  --_cell: 2.625rem;
+  --_cell-h: 3.25rem;
+  --_radius: 0.75rem;
 }
 
 .os-code-lg {
-  --_cell: calc(var(--spacing-12) + var(--spacing-2));
+  --_cell: 3.75rem;
+  --_cell-h: 4.625rem;
+  --_radius: 1rem;
 }
 
 .os-code-label {
@@ -48,46 +58,41 @@
   position: relative;
   flex: 0 1 auto;
   width: var(--_cell);
+  height: var(--_cell-h);
   min-width: 0;
-  aspect-ratio: 1;
-  border-radius: var(--radius-full);
+  border-radius: var(--_radius);
   background: var(--color-background-surface);
-  box-shadow: inset 0 0 0 1px var(--color-border-emphasized);
+  box-shadow:
+    inset 0 0 0 1.5px var(--_line),
+    0 1px 2px color-mix(in srgb, var(--color-text-primary) 6%, transparent);
   transition:
-    box-shadow var(--duration-fast) var(--ease-standard),
-    background-color var(--duration-fast) var(--ease-standard),
-    transform var(--duration-medium) var(--ease-standard);
+    box-shadow 0.2s var(--ease-standard),
+    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .os-code-cell:hover {
-  box-shadow: inset 0 0 0 1px var(--color-text-disabled);
-}
-
-/* The active cell lifts slightly and takes the accent ring. */
-.os-code-cell:focus-within {
-  background: var(--color-accent-muted);
-  box-shadow:
-    inset 0 0 0 2px var(--color-accent),
-    0 var(--spacing-1) var(--spacing-3) var(--color-shadow);
-  transform: translateY(calc(-1 * var(--spacing-0-5))) scale(1.06);
+  --_line: color-mix(in srgb, var(--color-text-primary) 28%, transparent);
 }
 
-/* A cell that holds a character keeps a soft accent tint, and pops each time it fills. */
+/* Filled cells keep a firmer edge — no tint. */
 .os-code-cell[data-filled="true"] {
-  background: var(--color-accent-muted);
-  box-shadow: inset 0 0 0 1px var(--color-border-blue);
-  animation: os-code-pop var(--duration-medium) var(--ease-standard);
+  --_line: color-mix(in srgb, var(--color-text-primary) 32%, transparent);
 }
 
-.os-code-cell[data-filled="true"]:focus-within {
+/* The active cell: accent ring with a soft halo, lifted a touch. */
+.os-code-cell:focus-within {
   box-shadow:
     inset 0 0 0 2px var(--color-accent),
-    0 var(--spacing-1) var(--spacing-3) var(--color-shadow);
+    0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent),
+    0 6px 16px -6px color-mix(in srgb, var(--color-accent) 45%, transparent);
+  transform: translateY(-2px);
 }
 
+/* The real input sits on top for typing and selection; the face below draws the character. */
 .os-code-input {
   position: absolute;
   inset: 0;
+  z-index: 1;
   width: 100%;
   height: 100%;
   min-width: 0;
@@ -97,67 +102,112 @@
   border-radius: inherit;
   background: transparent;
   outline: none;
+  color: transparent;
+  font-size: 1rem;
+  text-align: center;
+  caret-color: transparent;
+  cursor: text;
+}
+
+.os-code-input::selection {
+  background: transparent;
+}
+
+.os-code-face {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  border-radius: inherit;
   color: var(--color-text-primary);
   font-family: var(--font-family-body);
-  font-size: var(--font-size-2xl);
+  font-size: 1.75rem;
   font-weight: var(--font-weight-semibold);
   font-variant-numeric: tabular-nums;
-  text-align: center;
-  text-transform: uppercase;
-  caret-color: transparent;
-  cursor: text;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.os-code-sm .os-code-face {
+  font-size: 1.375rem;
+}
+
+.os-code-lg .os-code-face {
+  font-size: 2.125rem;
+}
+
+/* The drum: ten rows, each a cell tall, faded toward the edges like a picker wheel. */
+.os-code-face-drum {
+  place-items: start center;
+  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
+  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
+}
+
+.os-code-drum {
+  display: flex;
+  flex-direction: column;
+  transform: translateY(calc(var(--os-code-roll, 0) * -1 * var(--_cell-h)));
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.2, 1.25, 0.35, 1);
+  will-change: transform;
 }
 
-.os-code-sm .os-code-input {
-  font-size: var(--font-size-xl);
+.os-code-digit {
+  display: grid;
+  place-items: center;
+  height: var(--_cell-h);
 }
 
-.os-code-lg .os-code-input {
-  font-size: var(--font-size-3xl);
+/* Letters drop in from above and bounce once. */
+.os-code-letter {
+  animation: os-code-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
 }
 
 /* A blinking bar stands in for the caret while an empty cell is active. */
 .os-code-cell[data-filled="false"]:focus-within::after {
   content: "";
   position: absolute;
-  top: 28%;
-  bottom: 28%;
+  top: 30%;
+  bottom: 30%;
   left: 50%;
-  width: var(--spacing-0-5);
+  width: 2px;
   border-radius: var(--radius-full);
   background: var(--color-accent);
   transform: translateX(-50%);
   pointer-events: none;
-  animation: os-code-caret 1s var(--ease-standard) infinite;
+  animation: os-code-caret 1.1s steps(1, end) infinite;
 }
 
-/* Error: one shake and a red ring. */
+/* Error: one shake, red edges and digits. */
 .os-code[data-status="error"] .os-code-cell,
 .os-code[data-status="error"] .os-code-cell:focus-within {
-  background: var(--color-error-muted);
-  box-shadow: inset 0 0 0 2px var(--color-error);
+  box-shadow:
+    inset 0 0 0 2px var(--_bad),
+    0 0 0 4px color-mix(in srgb, var(--_bad) 14%, transparent);
+  transform: none;
 }
 
 .os-code[data-status="error"] .os-code-cells {
-  animation: os-code-shake var(--duration-fast) var(--ease-standard) 3;
+  animation: os-code-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
 
-.os-code[data-status="error"] .os-code-input {
-  color: var(--color-error);
+.os-code[data-status="error"] .os-code-face {
+  color: var(--_bad);
 }
 
-/* Success: green, each cell a beat after the one before. */
+/* Success: green, each cell lifting a beat after the one before. */
 .os-code[data-status="success"] .os-code-cell,
 .os-code[data-status="success"] .os-code-cell:focus-within {
-  background: var(--color-success-muted);
-  box-shadow: inset 0 0 0 2px var(--color-success);
-  transform: none;
-  animation: os-code-ripple var(--duration-medium) var(--ease-standard) both;
-  animation-delay: calc(var(--os-code-index) * var(--duration-fast));
+  box-shadow:
+    inset 0 0 0 2px var(--_ok),
+    0 0 0 4px color-mix(in srgb, var(--_ok) 14%, transparent);
+  animation: os-code-hop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+  animation-delay: calc(var(--os-code-index) * 60ms);
 }
 
-.os-code[data-status="success"] .os-code-input {
-  color: var(--color-success);
+.os-code[data-status="success"] .os-code-face {
+  color: var(--_ok);
 }
 
 .os-code-input:disabled {
@@ -168,61 +218,64 @@
   opacity: 0.45;
 }
 
-@keyframes os-code-pop {
-  0% {
-    transform: scale(0.82);
-  }
-  60% {
-    transform: scale(1.12);
-  }
-  100% {
-    transform: scale(1);
+@keyframes os-code-drop {
+  from {
+    opacity: 0;
+    transform: translateY(-70%);
   }
 }
 
 @keyframes os-code-caret {
-  0%,
-  45% {
+  0% {
     opacity: 1;
   }
-  55%,
-  100% {
+  50% {
     opacity: 0;
   }
 }
 
 @keyframes os-code-shake {
-  0%,
-  100% {
-    transform: translateX(0);
+  10%,
+  90% {
+    transform: translateX(-2px);
   }
-  25% {
-    transform: translateX(calc(-1 * var(--spacing-2)));
+  20%,
+  80% {
+    transform: translateX(4px);
   }
-  75% {
-    transform: translateX(var(--spacing-2));
+  30%,
+  50%,
+  70% {
+    transform: translateX(-7px);
+  }
+  40%,
+  60% {
+    transform: translateX(7px);
   }
 }
 
-@keyframes os-code-ripple {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.18);
-  }
+@keyframes os-code-hop {
+  0%,
   100% {
-    transform: scale(1);
+    transform: translateY(0);
+  }
+  45% {
+    transform: translateY(-8px);
   }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .os-code-cell,
-  .os-code-cells {
+  .os-code-cells,
+  .os-code-letter {
     animation: none !important;
     transition: none;
   }
 
+  .os-code-drum {
+    transition-duration: 0s !important;
+  }
+
   .os-code-cell:focus-within {
     transform: none;
   }