@duro-app/ui 0.39.0 → 0.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -54,7 +54,7 @@
     }
   },
   "dependencies": {
-    "@duro-app/tokens": "^0.39.0"
+    "@duro-app/tokens": "^0.40.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/ActionBar/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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   overlay: {
@@ -63,8 +64,8 @@ export const styles = css.create({
     },
     cursor: 'pointer',
     transitionProperty: 'color, background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/Checkbox/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: {
@@ -28,8 +29,8 @@ export const styles = css.create({
     justifyContent: 'center',
     flexShrink: 0,
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   boxUnchecked: {
     backgroundColor: colors.bg,

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

@@ -1,6 +1,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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   button: {
@@ -22,8 +23,8 @@ export const styles = css.create({
     color: colors.text,
     cursor: 'pointer',
     transitionProperty: 'background-color, border-color, color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {default: 0, ':focus-visible': 2},
     outlineStyle: 'solid',
     outlineColor: colors.accent,

package/src/components/Combobox/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 {duration} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -24,7 +25,7 @@ export const styles = css.create({
     },
     borderRadius: radii.sm,
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   inputWrapperFocused: {
     borderColor: colors.accent,
@@ -94,7 +95,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemSelected: {
     color: colors.accent,

package/src/components/Dialog/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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   // --- Backdrop ---
@@ -19,7 +20,7 @@ export const styles = css.create({
       to: {opacity: 1},
     }),
     animationDuration: '180ms',
-    animationTimingFunction: 'ease-out',
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   backdropClosing: {
@@ -29,7 +30,7 @@ export const styles = css.create({
       to: {opacity: 0},
     }),
     animationDuration: '140ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -75,7 +76,7 @@ export const styles = css.create({
       },
     }),
     animationDuration: '180ms',
-    animationTimingFunction: 'ease-out',
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   popupClosing: {
@@ -91,7 +92,7 @@ export const styles = css.create({
       },
     }),
     animationDuration: '140ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -174,7 +175,7 @@ export const styles = css.create({
     padding: 0,
     flexShrink: 0,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
 
   // --- Inline wrapper (for Trigger / Close children) ---

package/src/components/Drawer/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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   // --- Backdrop ---
@@ -17,8 +18,8 @@ export const styles = css.create({
       from: {opacity: 0},
       to: {opacity: 1},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   backdropClosing: {
@@ -27,7 +28,7 @@ export const styles = css.create({
       to: {opacity: 0},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -104,8 +105,8 @@ export const styles = css.create({
       from: {transform: 'translateX(100%)'},
       to: {transform: 'translateX(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutRight: {
@@ -114,7 +115,7 @@ export const styles = css.create({
       to: {transform: 'translateX(100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -124,8 +125,8 @@ export const styles = css.create({
       from: {transform: 'translateX(-100%)'},
       to: {transform: 'translateX(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutLeft: {
@@ -134,7 +135,7 @@ export const styles = css.create({
       to: {transform: 'translateX(-100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -144,8 +145,8 @@ export const styles = css.create({
       from: {transform: 'translateY(100%)'},
       to: {transform: 'translateY(0)'},
     }),
-    animationDuration: '200ms',
-    animationTimingFunction: 'ease-out',
+    animationDuration: duration.base,
+    animationTimingFunction: easing.easeOut,
     animationFillMode: 'both',
   },
   slideOutBottom: {
@@ -154,7 +155,7 @@ export const styles = css.create({
       to: {transform: 'translateY(100%)'},
     }),
     animationDuration: '160ms',
-    animationTimingFunction: 'ease-in',
+    animationTimingFunction: easing.easeIn,
     animationFillMode: 'both',
   },
 
@@ -232,7 +233,7 @@ export const styles = css.create({
     padding: 0,
     flexShrink: 0,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
 
   // --- Inline wrapper ---

package/src/components/Input/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: {
@@ -19,8 +20,8 @@ export const styles = css.create({
     borderStyle: 'solid',
     borderRadius: radii.sm,
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {
       default: 0,
       ':focus-visible': 2,

package/src/components/InputGroup/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({
   wrapper: {
@@ -16,8 +17,8 @@ export const styles = css.create({
     borderRadius: radii.sm,
     overflow: 'hidden',
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   addon: {
     display: 'inline-flex',
@@ -51,8 +52,8 @@ export const styles = css.create({
       ':active': colors.bg,
     },
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   addonDisabled: {
     opacity: 0.4,

package/src/components/LinkButton/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: {
@@ -17,8 +18,8 @@ export const styles = css.create({
     cursor: 'pointer',
     textDecoration: 'none',
     transitionProperty: 'background-color, border-color, color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   sizeDefault: {
     paddingTop: spacing.sm,

package/src/components/Menu/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 {duration} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -30,7 +31,7 @@ export const styles = css.create({
     borderRadius: radii.sm,
     cursor: 'pointer',
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   backdrop: {
     position: 'fixed',
@@ -74,7 +75,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemHighlighted: {
     backgroundColor: colors.bgCardHover,

package/src/components/RadioGroup/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: {
@@ -36,8 +37,8 @@ export const styles = css.create({
     justifyContent: 'center',
     flexShrink: 0,
     transitionProperty: 'background-color, border-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   circleUnchecked: {
     backgroundColor: colors.bg,

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

@@ -1,6 +1,7 @@
 import {css} from 'react-strict-dom'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {radii} from '@duro-app/tokens/tokens/spacing.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -26,8 +27,8 @@ export const styles = css.create({
     touchAction: 'none',
     userSelect: 'none',
     transitionProperty: 'opacity',
-    transitionDuration: '200ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.base,
+    transitionTimingFunction: easing.standard,
   },
   scrollbarVertical: {
     top: 0,
@@ -64,7 +65,7 @@ export const styles = css.create({
     },
     borderRadius: radii.full,
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   // Dynamic styles — simple identifier params only (StyleX constraint)
   viewportMaxHeight: (maxHeight: number | string) => ({

package/src/components/Select/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 {duration} from '@duro-app/tokens/tokens/motion.css'
 
 export const styles = css.create({
   root: {
@@ -31,7 +32,7 @@ export const styles = css.create({
     borderRadius: radii.sm,
     cursor: 'pointer',
     transitionProperty: 'border-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   value: {
     color: colors.text,
@@ -94,7 +95,7 @@ export const styles = css.create({
     cursor: 'pointer',
     backgroundColor: 'transparent',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
+    transitionDuration: duration.fast,
   },
   itemSelected: {
     color: colors.accent,

package/src/components/SideNav/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: {
@@ -34,8 +35,8 @@ export const styles = css.create({
     borderWidth: 0,
     cursor: 'pointer',
     transitionProperty: 'color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   groupTriggerActive: {
     color: colors.text,
@@ -44,8 +45,8 @@ export const styles = css.create({
     display: 'inline-flex',
     alignItems: 'center',
     transitionProperty: 'transform',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   chevronOpen: {
     transform: 'rotate(90deg)',
@@ -72,8 +73,8 @@ export const styles = css.create({
     borderRadius: radii.sm,
     cursor: 'pointer',
     transitionProperty: 'color, background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     textAlign: 'left' as const,
     outlineWidth: {
       default: 0,

package/src/components/Switch/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: {
@@ -26,8 +27,8 @@ export const styles = css.create({
     padding: 0,
     cursor: 'inherit',
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     outlineWidth: {default: 0, ':focus-visible': 2},
     outlineStyle: 'solid',
     outlineColor: colors.accent,
@@ -55,8 +56,8 @@ export const styles = css.create({
     borderRadius: radii.full,
     backgroundColor: '#fff',
     transitionProperty: 'transform',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
   },
   thumbChecked: {
     transform: 'translateX(16px)',

package/src/components/Table/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'
 
 // Container-query thresholds. Picked for typical 5-7 column admin tables —
 // see Table.stories.tsx "Responsive" for the visual reasoning. Defined
@@ -129,8 +130,8 @@ export const styles = css.create({
       ':hover': colors.bgCardHover,
     },
     transitionProperty: 'background-color',
-    transitionDuration: '150ms',
-    transitionTimingFunction: 'ease',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
     // Stack-mode card chrome
     padding: {
       default: 0,

package/src/components/Tabs/Tabs.tsx

@@ -1,4 +1,4 @@
-import {type ReactNode, useRef, useId, useEffect} from 'react'
+import {type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {TabsContext, useTabs} from './TabsContext'
@@ -39,8 +39,44 @@ interface ListProps {
 }
 
 function List({children}: ListProps) {
-  const {orientation, activeValue, onSelect, tabsRef, orderRef} = useTabs()
+  const {orientation, activeValue, onSelect, tabsRef, orderRef, setIndicatorActive} = useTabs()
   const listRef = useRef<HTMLDivElement>(null)
+  const [indicator, setIndicator] = useState<{offset: number; size: number} | null>(null)
+
+  // Measure the active tab and drive the sliding indicator. useLayoutEffect so
+  // the first position is set before paint (the indicator element mounts already
+  // in place — no slide-in from zero; only later tab changes animate). Observes
+  // the active tab (its own size, e.g. a changing "(3)" count) and the list
+  // (container resize / reflow). A non-active sibling resizing while you're on
+  // another tab is the one case not caught; it self-corrects on the next
+  // selection or resize.
+  useLayoutEffect(() => {
+    const list = listRef.current
+    if (!list || !activeValue) {
+      setIndicator(null)
+      setIndicatorActive(false)
+      return
+    }
+    const el = list.querySelector<HTMLElement>(`[data-tab-value="${CSS.escape(activeValue)}"]`)
+    if (!el) {
+      setIndicator(null)
+      setIndicatorActive(false)
+      return
+    }
+    const measure = () => {
+      setIndicator(
+        orientation === 'horizontal'
+          ? {offset: el.offsetLeft, size: el.offsetWidth}
+          : {offset: el.offsetTop, size: el.offsetHeight},
+      )
+      setIndicatorActive(true)
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    ro.observe(list)
+    return () => ro.disconnect()
+  }, [activeValue, orientation, setIndicatorActive])
 
   useEffect(() => {
     const el = listRef.current
@@ -128,6 +164,18 @@ function List({children}: ListProps) {
       style={[styles.list, orientation === 'vertical' && styles.listVertical]}
     >
       {children}
+      {indicator && (
+        <html.div
+          aria-hidden
+          style={[
+            styles.indicator,
+            orientation === 'horizontal' ? styles.indicatorHorizontal : styles.indicatorVertical,
+            orientation === 'horizontal'
+              ? styles.indicatorOffsetH(indicator.offset, indicator.size)
+              : styles.indicatorOffsetV(indicator.offset, indicator.size),
+          ]}
+        />
+      )}
     </html.div>
   )
 }
@@ -141,7 +189,7 @@ interface TabProps {
 }
 
 function Tab({value, disabled = false, children}: TabProps) {
-  const {activeValue, onSelect, orientation, registerTab} = useTabs()
+  const {activeValue, onSelect, orientation, registerTab, indicatorActive} = useTabs()
   const isActive = activeValue === value
   const tabId = useId()
   const panelId = `${tabId}-panel`
@@ -172,6 +220,7 @@ function Tab({value, disabled = false, children}: TabProps) {
         orientation === 'vertical' && styles.tabVertical,
         isActive &&
           (orientation === 'vertical' ? styles.tabActiveVertical : styles.tabActiveHorizontal),
+        isActive && indicatorActive && styles.tabIndicatorActive,
         disabled && styles.tabDisabled,
       ]}
     >

package/src/components/Tabs/TabsContext.ts

@@ -9,6 +9,12 @@ export interface TabsContextValue {
   registerTab: (value: string, disabled: boolean) => () => void
   tabsRef: React.RefObject<Map<string, boolean>>
   orderRef: React.RefObject<string[]>
+  // True once the List has measured the active tab and is driving a sliding
+  // indicator. Tabs suppress their own accent border while it's true so the
+  // single sliding bar is the only underline; it stays false without JS
+  // (SSR / no-hydration), where the per-tab border is the graceful fallback.
+  indicatorActive: boolean
+  setIndicatorActive: (active: boolean) => void
 }
 
 export const TabsContext = createContext<TabsContextValue | null>(null)