@glyphui/ui 0.3.0 → 0.5.0

package/src/patterns/app-shell/sidebar.tsx

@@ -1,15 +1,26 @@
-import type { ComponentProps, MouseEvent, ReactNode } from 'react'
+import {
+  type ComponentProps,
+  createContext,
+  type MouseEvent,
+  type ReactNode,
+  useContext,
+  useId,
+} from 'react'
 import { IconButton, type IconButtonProps } from '../../components/button'
 import { Tooltip } from '../../components/tooltip'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { useMediaQuery } from '../../hooks/use-media-query'
 import { PanelLeftIcon } from '../../internal/icons'
-import { useLinkComponent } from '../../provider/glyph-context'
+import { ActiveIndicator } from '../../motion/active-indicator'
+import { useIsActive, useLinkComponent } from '../../provider/glyph-context'
 import { sidebarStyles } from './app-shell.styles'
 import { useAppShell } from './app-shell-context'
 
 const s = sidebarStyles()
 
+/** One id per sidebar, so its active highlight slides between that sidebar's items only. */
+const SidebarIndicatorContext = createContext<string | null>(null)
+
 function useSlots() {
   return useComponentConfig('Sidebar', {})[1]
 }
@@ -18,13 +29,16 @@ function useSlots() {
 export function Sidebar({ className, ...props }: ComponentProps<'aside'>) {
   const { collapsed } = useAppShell()
   const slots = useSlots()
+  const indicatorId = `${useId()}-sidebar-indicator`
   return (
-    <aside
-      data-slot="sidebar"
-      data-collapsed={collapsed}
-      className={s.root({ class: [slots.root, className] })}
-      {...props}
-    />
+    <SidebarIndicatorContext.Provider value={indicatorId}>
+      <aside
+        data-slot="sidebar"
+        data-collapsed={collapsed}
+        className={s.root({ class: [slots.root, className] })}
+        {...props}
+      />
+    </SidebarIndicatorContext.Provider>
   )
 }
 
@@ -75,7 +89,10 @@ export interface SidebarItemProps {
   icon?: ReactNode
   /** Count or short status shown at the end. */
   badge?: ReactNode
+  /** Marks the current page. Computed from the provider's `router` when not set. */
   active?: boolean
+  /** With automatic matching, only the exact path is active (not its children). */
+  end?: boolean
   onClick?: (event: MouseEvent<HTMLElement>) => void
   className?: string
   children: ReactNode
@@ -85,14 +102,17 @@ export function SidebarItem({
   href,
   icon,
   badge,
-  active,
+  active: activeProp,
+  end,
   onClick,
   className,
   children,
 }: SidebarItemProps) {
+  const active = useIsActive(href, { explicit: activeProp, ...(end !== undefined && { end }) })
   const { collapsed, inDrawer, setMobileOpen } = useAppShell()
   const Link = useLinkComponent()
   const slots = useSlots()
+  const indicatorId = useContext(SidebarIndicatorContext)
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     onClick?.(event)
@@ -101,6 +121,12 @@ export function SidebarItem({
 
   const content = (
     <>
+      {active && indicatorId && (
+        <ActiveIndicator
+          layoutId={indicatorId}
+          className={s.itemIndicator({ class: slots.itemIndicator })}
+        />
+      )}
       {icon && (
         <span className={s.itemIcon({ class: slots.itemIcon })} aria-hidden="true">
           {icon}

package/src/patterns/async/states.tsx

@@ -5,7 +5,7 @@ import { useComponentConfig } from '../../hooks/use-component-config'
 import { AlertIcon, InboxIcon } from '../../internal/icons'
 import { tv } from '../../utils/tv'
 
-export const stateStyles = tv({
+export const stateStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'flex flex-col items-center justify-center gap-3 px-6 py-12 text-center',
     icon: 'flex size-10 items-center justify-center rounded-md border border-border bg-surface text-muted-foreground shadow-xs [&>svg]:size-5',