@tempoxyz/ds 0.3.9 → 0.3.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.3.9",
+  "version": "0.3.11",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/components/OtpField.tsx

@@ -9,7 +9,7 @@ const InvalidContext = createContext(false)
 /**
  * One-time passcode entry with a slot per character. Slots render by default from `length`.
  * Setting `invalid` fills the slots red and nudges them sideways. Setting `success` fills them
- * green and pops them in sequence.
+ * green.
  *
  * Base UI renders a `role="group"` of text inputs that accepts digits by default. Pasting a code
  * into a slot fills it and the slots after it. The first slot carries
@@ -124,14 +124,6 @@ const nudge = keyframes(
   { id: 'tds/web/otp-field/nudge' },
 )
 
-const pop = keyframes(
-  {
-    '0%, 100%': { transform: 'scale(1) !custom' },
-    '45%': { transform: 'scale(1.12) !custom' },
-  },
-  { id: 'tds/web/otp-field/pop' },
-)
-
 namespace styles {
   export const input = style(
     {
@@ -158,21 +150,7 @@ namespace styles {
         '&:focus-visible': { backgroundColor: 'background.elevated', outlineColor: 'border.focus' },
         // Invalid and success fills follow focus, so a focused slot keeps its state fill.
         '&[data-invalid], [data-invalid] &': { backgroundColor: 'container.negative' },
-        '[data-success] &': {
-          animation: `${pop} 320ms ${vars.ease.overshoot} both !custom`,
-          backgroundColor: 'container.positive',
-        },
-        // Delays follow the `animation` shorthand above, which would otherwise reset them.
-        '[data-success] &:nth-child(2)': { animationDelay: '40ms !custom' },
-        '[data-success] &:nth-child(3)': { animationDelay: '80ms !custom' },
-        '[data-success] &:nth-child(4)': { animationDelay: '120ms !custom' },
-        '[data-success] &:nth-child(5)': { animationDelay: '160ms !custom' },
-        '[data-success] &:nth-child(6)': { animationDelay: '200ms !custom' },
-        '[data-success] &:nth-child(7)': { animationDelay: '240ms !custom' },
-        '[data-success] &:nth-child(8)': { animationDelay: '280ms !custom' },
-      },
-      '@media (prefers-reduced-motion: reduce)': {
-        selectors: { '[data-success] &': { animation: 'none !custom' } },
+        '[data-success] &': { backgroundColor: 'container.positive' },
       },
     },
     { id: 'tds/web/otp-field/input' },