@duro-app/ui 0.39.0 → 0.41.0

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,18 +45,37 @@ 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)',
   },
+  // Static (non-collapsible) section — see SideNav.Section.
+  section: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  sectionLabel: {
+    paddingTop: spacing.md,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeXs,
+    fontWeight: typography.fontWeightSemibold,
+    textTransform: 'uppercase' as const,
+    letterSpacing: '0.06em',
+    color: colors.textMuted,
+  },
   item: {
+    position: 'relative',
     display: 'flex',
     alignItems: 'center',
+    gap: spacing.sm,
     paddingTop: '6px',
     paddingBottom: '6px',
-    paddingLeft: spacing.lg,
+    paddingLeft: spacing.md,
     paddingRight: spacing.md,
     fontFamily: typography.fontFamily,
     fontSize: typography.fontSizeSm,
@@ -72,8 +92,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,
@@ -91,5 +111,36 @@ export const styles = css.create({
   itemActive: {
     color: colors.accent,
     fontWeight: typography.fontWeightMedium,
+    backgroundColor: colors.bgCardHover,
+  },
+  // Active indicator — a bar at the rail's left edge that grows in on select.
+  marker: {
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    width: '3px',
+    height: 0,
+    transform: 'translateY(-50%)',
+    borderTopRightRadius: radii.full,
+    borderBottomRightRadius: radii.full,
+    backgroundColor: colors.accent,
+    transitionProperty: 'height',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+  },
+  markerActive: {
+    height: '18px',
+  },
+  itemIcon: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    width: '18px',
+    height: '18px',
+  },
+  itemLabel: {
+    flexGrow: 1,
+    minWidth: 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)

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,