@duro-app/ui 0.39.0 → 0.40.0

package/src/components/Tabs/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -18,6 +19,8 @@ export const styles = css.create({
     borderBottomStyle: 'solid',
     borderBottomColor: colors.border,
     gap: spacing.xs,
+    // Positioning context for the sliding indicator.
+    position: 'relative',
   },
   listVertical: {
     flexDirection: 'column',
@@ -49,8 +52,8 @@ export const styles = css.create({
     borderBottomColor: 'transparent',
     cursor: 'pointer',
     transitionProperty: 'color, border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,
@@ -83,6 +86,42 @@ export const styles = css.create({
     color: colors.text,
     borderRightColor: colors.accent,
   },
+  // Applied to the active tab once JS drives the sliding indicator: drop the
+  // per-tab accent border so the single sliding bar is the only underline
+  // (avoids a double line and an instant-pop that would undercut the slide).
+  tabIndicatorActive: {
+    borderBottomColor: 'transparent',
+    borderRightColor: 'transparent',
+  },
+  // --- Sliding active indicator (positioned by measuring the active tab) ---
+  indicator: {
+    position: 'absolute',
+    backgroundColor: colors.accent,
+    pointerEvents: 'none',
+    transitionProperty: 'transform, width, height',
+    transitionDuration: duration.base,
+    transitionTimingFunction: easing.easeOut,
+  },
+  indicatorHorizontal: {
+    bottom: -1,
+    left: 0,
+    height: 2,
+  },
+  indicatorVertical: {
+    right: -1,
+    top: 0,
+    width: 2,
+  },
+  // Dynamic transform/size from the measured active tab (StyleX dynamic style:
+  // simple identifier params only).
+  indicatorOffsetH: (offset: number, size: number) => ({
+    transform: `translateX(${offset}px)`,
+    width: size,
+  }),
+  indicatorOffsetV: (offset: number, size: number) => ({
+    transform: `translateY(${offset}px)`,
+    height: size,
+  }),
   tabDisabled: {
     opacity: 0.5,
     cursor: 'not-allowed',

package/src/components/Tabs/useTabsRoot.ts

@@ -1,4 +1,4 @@
-import {useCallback, useRef} from 'react'
+import {useCallback, useRef, useState} from 'react'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import type {Orientation, TabsContextValue} from './TabsContext'
 
@@ -26,6 +26,7 @@ export function useTabsRoot({
   )
   const tabsRef = useRef(new Map<string, boolean>())
   const orderRef = useRef<string[]>([])
+  const [indicatorActive, setIndicatorActive] = useState(false)
 
   const registerTab = useCallback((value: string, disabled: boolean) => {
     tabsRef.current.set(value, disabled)
@@ -38,5 +39,14 @@ export function useTabsRoot({
     }
   }, [])
 
-  return {activeValue, onSelect, orientation, registerTab, tabsRef, orderRef}
+  return {
+    activeValue,
+    onSelect,
+    orientation,
+    registerTab,
+    tabsRef,
+    orderRef,
+    indicatorActive,
+    setIndicatorActive,
+  }
 }

package/src/components/TagGroup/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -48,8 +49,8 @@ export const styles = css.create({
     paddingRight: spacing.sm,
     minHeight: 40,
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus': 2,

package/src/components/Textarea/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   base: {
@@ -20,8 +21,8 @@ export const styles = css.create({
     borderRadius: radii.sm,
     resize: 'vertical' as const,
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/Toast/styles.css.ts

@@ -3,6 +3,7 @@ import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {easing} from '@duro-app/tokens/tokens/motion.css'
 
 const enter = css.keyframes({
   from: {opacity: 0, transform: 'translateY(10px)'},
@@ -51,7 +52,7 @@ export const styles = css.create({
       '@media (prefers-reduced-motion: reduce)': 'none',
     },
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-out',
+    animationTimingFunction: easing.easeOut,
   },
   success: {borderLeftColor: colors.successBorder},
   error: {borderLeftColor: colors.errorBorder},

package/src/components/Toggle/styles.css.ts

@@ -2,6 +2,7 @@ import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   base: {
@@ -14,8 +15,8 @@ export const styles = css.create({
     fontFamily: typography.fontFamily,
     fontWeight: typography.fontWeightMedium,
     transitionProperty: 'background-color, border-color, color, opacity',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {default: 0, ':focus-visible': 2},
     outlineStyle: 'solid',
     outlineColor: colors.accent,