@proteos/ui 0.31.0

package/src/components/nav/index.ts

@@ -0,0 +1,7 @@
+export type {
+  NavGroupProps,
+  NavItemProps,
+  NavItemVariants,
+  NavSectionProps,
+} from './nav'
+export { NavGroup, NavItem, NavSection, navItemStyles } from './nav'

package/src/components/nav/nav.stories.tsx

@@ -0,0 +1,139 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { NavGroup, NavItem, NavSection } from './nav'
+
+/* =========================================================================
+   Nav primitives — render inside a sidebar-shaped frame to show realistic
+   density (256px column, paper bg, hairline border).
+   ========================================================================= */
+
+const meta: Meta<typeof NavSection> = {
+  title: 'Components/Nav',
+  component: NavSection,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="w-[256px] border border-rule bg-[color-mix(in_oklab,var(--color-surface-2)_50%,var(--color-surface))] p-2.5">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof NavSection>
+
+const HomeIcon = (
+  <svg viewBox="0 0 16 16" aria-hidden>
+    <path
+      d="M2 7.5 8 2.5l6 5V13a1 1 0 0 1-1 1h-3v-4H7v4H4a1 1 0 0 1-1-1V7.5h-1Z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+const TruckIcon = (
+  <svg viewBox="0 0 16 16" aria-hidden>
+    <path
+      d="M1.5 4h7v7h-7zM8.5 6h3l2 2v3h-5zM4 13.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm7 0a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+const UsersIcon = (
+  <svg viewBox="0 0 16 16" aria-hidden>
+    <circle cx="6" cy="5.5" r="2.25" fill="none" stroke="currentColor" strokeWidth="1.2" />
+    <path
+      d="M2 13c.5-2 2-3.25 4-3.25S9.5 11 10 13"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.2"
+      strokeLinecap="round"
+    />
+  </svg>
+)
+
+export const Playground: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <NavSection label="Workspace" count={3}>
+      <NavItem icon={HomeIcon}>Home</NavItem>
+      <NavItem icon={UsersIcon} badge="418">
+        Customers
+      </NavItem>
+      <NavItem icon={TruckIcon} isActive>
+        Shipments
+      </NavItem>
+    </NavSection>
+  ),
+}
+
+export const ItemStates: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <NavSection label="States">
+      <NavItem icon={HomeIcon}>Default</NavItem>
+      <NavItem icon={HomeIcon} isActive>
+        Active
+      </NavItem>
+      <NavItem icon={HomeIcon} badge="12">
+        With badge
+      </NavItem>
+      <NavItem icon={HomeIcon} isDisabled>
+        Disabled
+      </NavItem>
+    </NavSection>
+  ),
+}
+
+export const WithGroup: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <NavSection label="Operations" count={5}>
+      <NavItem icon={UsersIcon} badge="418">
+        Customers
+      </NavItem>
+      <NavGroup icon={TruckIcon} label="Shipments" defaultExpanded>
+        <NavItem isActive badge="1,284">
+          Open
+        </NavItem>
+        <NavItem badge="37">Dispatching</NavItem>
+        <NavItem badge="208">In transit</NavItem>
+        <NavItem>Delivered</NavItem>
+        <NavItem>Reconciled</NavItem>
+      </NavGroup>
+      <NavGroup icon={UsersIcon} label="Drivers">
+        <NavItem>Roster</NavItem>
+        <NavItem>Schedules</NavItem>
+        <NavItem badge="3">Compliance</NavItem>
+      </NavGroup>
+    </NavSection>
+  ),
+}
+
+export const MultipleSections: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <>
+      <NavSection label="Workspace">
+        <NavItem icon={HomeIcon}>Home</NavItem>
+        <NavItem icon={HomeIcon} badge="12">
+          Inbox
+        </NavItem>
+      </NavSection>
+      <NavSection label="Operations" count={2}>
+        <NavItem icon={UsersIcon}>Customers</NavItem>
+        <NavItem icon={TruckIcon} isActive>
+          Shipments
+        </NavItem>
+      </NavSection>
+    </>
+  ),
+}

package/src/components/nav/nav.tsx

@@ -0,0 +1,246 @@
+import { createContext, type ReactNode, useContext } from 'react'
+import {
+  Button as AriaButton,
+  type ButtonProps as AriaButtonProps,
+  type DisclosureProps as AriaDisclosureProps,
+  Disclosure,
+  DisclosurePanel,
+  Heading,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Nav — vertical navigation primitives for sidebars / drawers. Three pieces:
+     - <NavSection> — labelled grouping with optional count + trailing slot.
+     - <NavItem>    — leaf entry (RAC Button) with icon, label, badge slot,
+                      and an `isActive` state (raised paper card + accent rail).
+     - <NavGroup>   — collapsible parent (RAC Disclosure + DisclosurePanel)
+                      that auto-tags its children as nested via context.
+
+   The primitives don't know about "collapsed sidebar" — that visual cascade
+   lives in the consuming app, which can hide labels / center icons via CSS
+   on a wrapping element.
+   ========================================================================= */
+
+/* ---------- nested context ----------------------------------------------- */
+
+const NavNestedContext = createContext(false)
+/** True when a NavItem is rendered inside a NavGroup's panel. */
+function useIsNested() {
+  return useContext(NavNestedContext)
+}
+
+/* ---------- NavSection --------------------------------------------------- */
+
+export type NavSectionProps = {
+  /** Uppercase mono label rendered above the items. */
+  label?: ReactNode
+  /** Counter rendered at the right of the label (e.g. `5`). */
+  count?: ReactNode
+  /** Trailing slot at the right of the heading row, e.g. an action button. */
+  action?: ReactNode
+  className?: string
+  children?: ReactNode
+  /** Stable test/automation id, forwarded to the section root. */
+  'data-testid'?: string
+}
+
+/** Visually-grouped block of nav entries. Use one per logical section
+ *  ("Workspace", "Operations", "Finance"). */
+export function NavSection({
+  label,
+  count,
+  action,
+  className,
+  children,
+  'data-testid': dataTestid,
+}: NavSectionProps) {
+  const hasHead = label !== undefined || count !== undefined || action !== undefined
+  return (
+    <div className={cn('mt-[18px] first:mt-1', className)} data-testid={dataTestid}>
+      {hasHead ? (
+        <div className="flex items-center justify-between px-2 pt-1 pb-2">
+          {label !== undefined ? (
+            <span className="font-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-4">
+              {label}
+            </span>
+          ) : (
+            <span />
+          )}
+          <div className="flex items-center gap-2">
+            {count !== undefined ? (
+              <span className="font-mono text-[10px] text-ink-4">{count}</span>
+            ) : null}
+            {action}
+          </div>
+        </div>
+      ) : null}
+      {children}
+    </div>
+  )
+}
+
+/* ---------- NavItem ------------------------------------------------------ */
+
+export const navItemStyles = tv({
+  base: [
+    'group/nav-item relative w-full',
+    'flex items-center gap-2.5',
+    'px-2 py-[7px] rounded-[7px]',
+    'text-[13.5px] tracking-[-0.005em] text-ink-2',
+    'cursor-pointer outline-none text-left',
+    'transition-[background-color,color,border-color,box-shadow] duration-150',
+    'border border-transparent',
+    'hover:bg-surface-2 hover:text-ink',
+    'focus-visible:shadow-[var(--shadow-focus)]',
+    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',
+  ],
+  variants: {
+    isActive: {
+      // Match the hover state's fill (bg-surface-2 + ink) so the selected color
+      // doesn't read brighter than the surrounding chrome. The hairline
+      // border + accent rail still mark the current page.
+      true: [
+        'bg-surface-2 text-ink border-rule',
+        // accent rail anchored to the section's left edge
+        'before:content-[""] before:absolute before:-left-2.5 before:top-2 before:bottom-2',
+        'before:w-0.5 before:rounded-[2px] before:bg-accent',
+      ],
+      false: '',
+    },
+    isNested: {
+      true: 'text-[13px] text-ink-3 py-1.5',
+      false: '',
+    },
+  },
+  compoundVariants: [
+    // Nested + active: raise to ink rather than accent-ink so the indented
+    // hierarchy still reads "softer than top-level".
+    { isNested: true, isActive: true, class: 'text-ink' },
+  ],
+  defaultVariants: { isActive: false, isNested: false },
+})
+
+export type NavItemVariants = VariantProps<typeof navItemStyles>
+
+export type NavItemProps = Omit<AriaButtonProps, 'children'> & {
+  /** Leading icon. Pass an SVG element; it's wrapped in a 16px box. */
+  icon?: ReactNode
+  /** Trailing slot — typically a count or status dot. */
+  badge?: ReactNode
+  /** Mark the item as the current page. */
+  isActive?: boolean
+  children?: ReactNode
+}
+
+/** Leaf nav entry. RAC Button under the hood — full keyboard, focus-visible
+ *  ring, and disabled state included. For routing, apply `navItemStyles({...})`
+ *  to a RAC `<Link>` instead. */
+export function NavItem({ icon, badge, isActive, className, children, ...props }: NavItemProps) {
+  const isNested = useIsNested()
+  return (
+    <AriaButton
+      {...props}
+      className={(renderProps) =>
+        cn(
+          navItemStyles({ isActive, isNested }),
+          typeof className === 'function' ? className(renderProps) : className,
+        )
+      }
+    >
+      {icon !== undefined ? (
+        <span
+          aria-hidden
+          className={cn(
+            'grid place-items-center shrink-0 size-4',
+            isActive ? 'text-accent' : 'text-ink-3',
+            '[&>svg]:size-4',
+          )}
+        >
+          {icon}
+        </span>
+      ) : null}
+      <span className="flex-1 min-w-0 truncate">{children}</span>
+      {badge !== undefined ? (
+        <span className="shrink-0 font-mono text-[10.5px] tracking-[0.02em] text-ink-4">
+          {badge}
+        </span>
+      ) : null}
+    </AriaButton>
+  )
+}
+
+/* ---------- NavGroup ----------------------------------------------------- */
+
+export type NavGroupProps = Omit<AriaDisclosureProps, 'children'> & {
+  /** Leading icon for the group head. */
+  icon?: ReactNode
+  /** Group label rendered next to the icon. */
+  label: ReactNode
+  /** Children get auto-styled as nested NavItems via context. */
+  children: ReactNode
+  className?: string
+}
+
+/** Collapsible parent. RAC Disclosure handles aria-expanded / aria-controls
+ *  and keyboard activation. Children render inside an indented panel with a
+ *  vertical guide rule and pick up nested styling automatically. */
+export function NavGroup({ icon, label, children, className, ...props }: NavGroupProps) {
+  return (
+    <Disclosure {...props} className={cn('group/nav-group my-px', className)}>
+      <Heading className="m-0">
+        <AriaButton
+          slot="trigger"
+          className={cn(
+            'flex w-full items-center gap-2.5',
+            'px-2 py-[7px] rounded-[7px]',
+            'text-[13.5px] tracking-[-0.005em] text-ink-2 text-left',
+            'cursor-pointer outline-none border border-transparent',
+            'transition-colors duration-150',
+            'hover:bg-surface-2 hover:text-ink',
+            'focus-visible:shadow-[var(--shadow-focus)]',
+          )}
+        >
+          {icon !== undefined ? (
+            <span
+              aria-hidden
+              className="grid place-items-center shrink-0 size-4 text-ink-3 [&>svg]:size-4"
+            >
+              {icon}
+            </span>
+          ) : null}
+          <span className="flex-1 min-w-0 truncate">{label}</span>
+          <svg
+            viewBox="0 0 12 12"
+            aria-hidden
+            className="size-2.5 shrink-0 text-ink-4 transition-transform duration-200 group-data-[expanded]/nav-group:rotate-90"
+          >
+            <path
+              d="m4.5 3 3 3-3 3"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </AriaButton>
+      </Heading>
+      <DisclosurePanel>
+        <div
+          className={cn(
+            'relative pl-[22px] py-px',
+            // Vertical guide rule — sits under where the parent's icon center
+            // would be (14px from the panel's left edge).
+            'before:content-[""] before:absolute before:left-[14px] before:top-1 before:bottom-1',
+            'before:w-px before:bg-rule',
+          )}
+        >
+          <NavNestedContext.Provider value={true}>{children}</NavNestedContext.Provider>
+        </div>
+      </DisclosurePanel>
+    </Disclosure>
+  )
+}

package/src/components/popover/index.ts

@@ -0,0 +1,8 @@
+export type { PopoverContentProps } from './popover'
+export {
+  Popover,
+  PopoverContent,
+  PopoverPanelBody,
+  PopoverPanelFooter,
+  PopoverPanelHeader,
+} from './popover'

package/src/components/popover/popover.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useRef, useState } from 'react'
+
+import { Button } from '../button/button'
+import {
+  Popover,
+  PopoverContent,
+  PopoverPanelBody,
+  PopoverPanelFooter,
+  PopoverPanelHeader,
+} from './popover'
+
+const meta: Meta = {
+  title: 'Components/Popover',
+  decorators: [
+    (Story) => (
+      <div className="p-12">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj
+
+export const DialogTriggerMode: Story = {
+  render: () => (
+    <Popover>
+      <Button variant="ghost">Open menu</Button>
+      <PopoverContent panelClassName="w-72">
+        <PopoverPanelHeader>
+          <span className="font-mono text-[10.5px] uppercase tracking-[0.08em] text-ink-4">
+            Quick actions
+          </span>
+        </PopoverPanelHeader>
+        <PopoverPanelBody>
+          <div className="grid gap-1.5 text-[13px] text-ink-2">
+            <button
+              type="button"
+              className="rounded-sm px-2.5 py-1.5 text-left hover:bg-surface-2 cursor-pointer"
+            >
+              Edit profile
+            </button>
+            <button
+              type="button"
+              className="rounded-sm px-2.5 py-1.5 text-left hover:bg-surface-2 cursor-pointer"
+            >
+              Manage workspace
+            </button>
+            <button
+              type="button"
+              className="rounded-sm px-2.5 py-1.5 text-left hover:bg-surface-2 cursor-pointer"
+            >
+              Sign out
+            </button>
+          </div>
+        </PopoverPanelBody>
+        <PopoverPanelFooter>
+          <span className="font-mono text-[11px] text-ink-4">⌘K</span>
+        </PopoverPanelFooter>
+      </PopoverContent>
+    </Popover>
+  ),
+}
+
+export const ControlledMode: Story = {
+  render: () => {
+    const ref = useRef<HTMLButtonElement>(null)
+    const [open, setOpen] = useState(false)
+    return (
+      <>
+        <button
+          ref={ref}
+          type="button"
+          onClick={() => setOpen((v) => !v)}
+          className="inline-flex items-center gap-2 rounded-md border border-rule bg-surface px-3 py-2 text-[13px] text-ink-2 cursor-pointer hover:border-ink-4"
+        >
+          Custom trigger (chip-style)
+        </button>
+        <PopoverContent triggerRef={ref} isOpen={open} onOpenChange={setOpen} panelClassName="w-72">
+          <PopoverPanelBody>
+            <p className="text-[13px] text-ink-2">
+              This popover is anchored to a non-Button trigger via
+              <code className="font-mono text-[12px] mx-1">triggerRef</code>.
+            </p>
+          </PopoverPanelBody>
+        </PopoverContent>
+      </>
+    )
+  },
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,135 @@
+import type { ReactNode, RefObject } from 'react'
+import {
+  Dialog as AriaDialog,
+  type DialogProps as AriaDialogProps,
+  DialogTrigger as AriaDialogTrigger,
+  type DialogTriggerProps as AriaDialogTriggerProps,
+  Popover as AriaPopover,
+  type PopoverProps as AriaPopoverProps,
+} from 'react-aria-components'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Popover — generic anchored panel. Two usage modes:
+
+   1. DialogTrigger mode (simplest, for Button-driven popovers):
+        <Popover>
+          <Button>Open</Button>            // first child = trigger
+          <PopoverContent>…panel…</PopoverContent>
+        </Popover>
+
+   2. Controlled mode (for non-Button triggers, e.g. clickable chips):
+        const ref = useRef<HTMLSpanElement>(null)
+        const [open, setOpen] = useState(false)
+        …
+        <span ref={ref} onClick={…}>chip</span>
+        <PopoverContent
+          triggerRef={ref}
+          isOpen={open}
+          onOpenChange={setOpen}
+        >…panel…</PopoverContent>
+
+   Internally wraps RAC `Popover` + `Dialog` so focus management, outside-
+   click, and Escape are handled correctly.
+   ========================================================================= */
+
+export function Popover(props: AriaDialogTriggerProps) {
+  return <AriaDialogTrigger {...props} />
+}
+
+export type PopoverContentProps = Omit<AriaPopoverProps, 'children'> & {
+  /** Dialog children. Supports the render-prop form `({ close }) => …`. */
+  children: AriaDialogProps['children']
+  /** Visual override for the floating panel. */
+  panelClassName?: string
+  /** When in controlled mode, the element the popover should anchor to. */
+  triggerRef?: RefObject<Element | null>
+}
+
+export function PopoverContent({
+  children,
+  className,
+  panelClassName,
+  offset = 6,
+  placement = 'bottom start',
+  ...props
+}: PopoverContentProps) {
+  return (
+    <AriaPopover
+      offset={offset}
+      placement={placement}
+      {...props}
+      className={(renderProps) =>
+        cn(
+          'rounded-md border border-rule bg-surface',
+          'shadow-[var(--shadow-float)]',
+          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
+          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          panelClassName,
+          typeof className === 'function' ? className(renderProps) : className,
+        )
+      }
+    >
+      <AriaDialog className="outline-none">{children}</AriaDialog>
+    </AriaPopover>
+  )
+}
+
+/* =========================================================================
+   PopoverPanelHeader / PopoverPanelBody / PopoverPanelFooter — slot
+   primitives mirroring Modal's split. Consumers compose these to keep
+   padding consistent across popovers.
+   ========================================================================= */
+
+export function PopoverPanelHeader({
+  className,
+  children,
+}: {
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between gap-2',
+        'px-3.5 py-2.5 border-b border-rule',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function PopoverPanelBody({
+  className,
+  children,
+}: {
+  className?: string
+  children?: ReactNode
+}) {
+  return <div className={cn('p-2', className)}>{children}</div>
+}
+
+export function PopoverPanelFooter({
+  className,
+  children,
+}: {
+  className?: string
+  children?: ReactNode
+}) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-between gap-2',
+        'px-3.5 py-2.5 border-t border-rule',
+        'bg-[color-mix(in_oklab,var(--color-surface-2)_60%,var(--color-surface))]',
+        'rounded-b-md',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/progress-bar/index.ts

@@ -0,0 +1,2 @@
+export type { ProgressBarProps, ProgressBarVariants } from './progress-bar'
+export { ProgressBar, progressBarStyles } from './progress-bar'