@meith/ui 0.35.1 → 0.36.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/ui",
-  "version": "0.35.1",
+  "version": "0.36.1",
   "description": "Meith's shared UI primitives: buttons, menus and the class utilities themes build with.",
   "license": "MIT",
   "repository": {
@@ -17,6 +17,8 @@
     "./dialog": "./src/dialog.tsx",
     "./input-otp": "./src/input-otp.tsx",
     "./menu": "./src/menu.tsx",
+    "./nav-tabs-enhancer": "./src/nav-tabs-enhancer.tsx",
+    "./password-input": "./src/password-input.tsx",
     "./popover": "./src/popover.tsx",
     "./tabs": "./src/tabs.tsx",
     "./toast": "./src/toast.tsx",

package/src/card.tsx

@@ -1,4 +1,5 @@
 import { cn } from './utils'
+import { surfaceVariants } from './variants'
 
 type CardElement = 'section' | 'article' | 'div'
 
@@ -12,10 +13,7 @@ function Card({ as = 'section', className, ...props }: CardProps) {
   return (
     <Component
       data-slot="card"
-      className={cn(
-        'overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-elevation',
-        className,
-      )}
+      className={cn(surfaceVariants(), '@container/card overflow-hidden', className)}
       {...props}
     />
   )
@@ -26,7 +24,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-header"
       className={cn(
-        'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-b border-border bg-surface px-4 py-2.5',
+        'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 border-b border-border bg-surface/60 px-5 py-3',
         className,
       )}
       {...props}
@@ -48,7 +46,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="card-description"
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-sm leading-relaxed text-muted-foreground', className)}
       {...props}
     />
   )
@@ -65,7 +63,7 @@ function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div data-slot="card-content" className={cn('px-4 py-3.5', className)} {...props} />
+  return <div data-slot="card-content" className={cn('px-5 py-4', className)} {...props} />
 }
 
 function CardRows({ className, ...props }: React.ComponentProps<'ul'>) {
@@ -77,7 +75,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-footer"
       className={cn(
-        'flex flex-wrap items-center gap-3 border-t border-border px-4 py-2.5 text-xs text-muted-foreground',
+        'flex flex-wrap items-center gap-3 border-t border-border px-5 py-3 text-xs text-muted-foreground',
         className,
       )}
       {...props}

package/src/disclosure.tsx

@@ -26,7 +26,7 @@ function Disclosure({
     >
       <summary
         className={cn(
-          'flex cursor-default list-none items-center gap-2 px-4 py-2.5 text-sm font-medium select-none',
+          'flex cursor-pointer list-none items-center gap-2 min-h-11 px-4 py-3 text-sm font-medium select-none',
           'transition-colors hover:bg-muted',
           '[&::-webkit-details-marker]:hidden [&::marker]:content-none',
         )}
@@ -44,7 +44,7 @@ function Disclosure({
           <path d="m4.5 3 3 3-3 3" />
         </svg>
 
-        <span className="min-w-0 flex-1 truncate">{summary}</span>
+        <span className="min-w-0 flex-1 [overflow-wrap:anywhere]">{summary}</span>
 
         {aside !== undefined && (
           <span className="shrink-0 text-xs font-normal text-muted-foreground">{aside}</span>

package/src/empty.tsx

@@ -17,7 +17,7 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="empty-title"
-      className={cn('text-sm font-medium text-foreground', className)}
+      className={cn('text-base font-semibold tracking-tight text-foreground', className)}
       {...props}
     />
   )
@@ -27,7 +27,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
   return (
     <p
       data-slot="empty-description"
-      className={cn('max-w-prose text-sm text-muted-foreground', className)}
+      className={cn('max-w-md text-sm leading-relaxed text-muted-foreground', className)}
       {...props}
     />
   )

package/src/field.tsx

@@ -1,19 +1,12 @@
 import { cn } from './utils'
-
-const CONTROL = [
-  'w-full rounded-md border border-input bg-card px-3 text-sm text-foreground',
-  'transition-[border-color,box-shadow] duration-100',
-  'placeholder:text-muted-foreground',
-  'disabled:cursor-not-allowed disabled:opacity-60',
-  'aria-invalid:border-destructive',
-].join(' ')
+import { controlVariants } from './variants'
 
 function Input({ className, type = 'text', ...props }: React.ComponentProps<'input'>) {
   return (
     <input
       data-slot="input"
       type={type}
-      className={cn(CONTROL, 'h-9 py-1', className)}
+      className={cn(controlVariants(), 'py-2', className)}
       {...props}
     />
   )
@@ -23,15 +16,23 @@ function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
   return (
     <textarea
       data-slot="textarea"
-      className={cn(CONTROL, 'min-h-32 resize-y py-2 leading-relaxed', className)}
+      className={cn(controlVariants(), 'h-auto min-h-36 resize-y py-3 leading-relaxed', className)}
       {...props}
     />
   )
 }
 
-function NativeSelect({ className, ...props }: React.ComponentProps<'select'>) {
+function NativeSelect({
+  className,
+  controlSize = 'default',
+  ...props
+}: React.ComponentProps<'select'> & { controlSize?: 'sm' | 'default' }) {
   return (
-    <select data-slot="native-select" className={cn(CONTROL, 'h-9 pr-8', className)} {...props} />
+    <select
+      data-slot="native-select"
+      className={cn(controlVariants({ size: controlSize }), 'pr-8', className)}
+      {...props}
+    />
   )
 }
 
@@ -40,7 +41,7 @@ function Label({ className, ...props }: React.ComponentProps<'label'>) {
     // biome-ignore lint/a11y/noLabelWithoutControl: the Label primitive itself — its caller supplies the control it wraps
     <label
       data-slot="label"
-      className={cn('text-sm font-medium leading-none text-foreground select-none', className)}
+      className={cn('text-sm font-medium leading-5 text-foreground select-none', className)}
       {...props}
     />
   )
@@ -77,7 +78,7 @@ function Field({
   const describedBy = [errorId, descriptionId].filter((value) => value !== null).join(' ')
 
   return (
-    <div data-slot="field" className={cn('flex flex-col gap-1.5', className)} {...props}>
+    <div data-slot="field" className={cn('flex min-w-0 flex-col gap-2', className)} {...props}>
       <Label htmlFor={id}>{label}</Label>
 
       {children({
@@ -94,7 +95,7 @@ function Field({
       )}
 
       {descriptionId !== null && (
-        <p id={descriptionId} className="text-xs text-muted-foreground">
+        <p id={descriptionId} className="text-xs leading-relaxed text-muted-foreground">
           {description}
         </p>
       )}

package/src/index.ts

@@ -19,10 +19,31 @@ export { Disclosure } from './disclosure'
 export { Empty, EmptyAction, EmptyDescription, EmptyTitle } from './empty'
 export type { FieldProps } from './field'
 export { Field, Input, Label, NativeSelect, Textarea } from './field'
+export { type NavTab, NavTabs } from './nav-tabs'
+export {
+  NavigationDrawer,
+  type NavigationDrawerProps,
+  NavigationDrawerTrigger,
+} from './navigation-drawer'
+export {
+  PageDescription,
+  PageHeader,
+  PageHeaderActions,
+  PageHeaderContent,
+  PageTitle,
+} from './page-header'
 export type { SeparatorProps } from './separator'
 export { Separator } from './separator'
 export type { TextLinkProps } from './text-link'
 export { TextLink } from './text-link'
 export { cn } from './utils'
-export type { BadgeVariants, ButtonVariants, TextLinkVariants } from './variants'
-export { badgeVariants, buttonVariants, textLinkVariants } from './variants'
+export type { BadgeVariants, ButtonVariants, ControlVariants, TextLinkVariants } from './variants'
+export {
+  badgeVariants,
+  buttonVariants,
+  controlVariants,
+  navTabListVariants,
+  navTabVariants,
+  surfaceVariants,
+  textLinkVariants,
+} from './variants'

package/src/nav-tabs-enhancer.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useEffect } from 'react'
+
+const SELECTOR = '[data-nav-tabs]'
+const CURRENT = '[aria-current]:not([aria-current="false"])'
+
+function reveal(list: HTMLElement, active: HTMLElement | null) {
+  if (active === null || list.clientWidth === 0) return
+  const bounds = list.getBoundingClientRect()
+  const tab = active.getBoundingClientRect()
+  if (tab.left >= bounds.left + 4 && tab.right <= bounds.right - 4) return
+  list.scrollBy({ left: tab.left - bounds.left - (list.clientWidth - tab.width) / 2 })
+}
+
+export function NavTabsEnhancer() {
+  useEffect(() => {
+    const lists = new Map<HTMLElement, HTMLElement | null>()
+    const resize = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const list = entry.target.closest<HTMLElement>(SELECTOR)
+        if (list === null) continue
+        reveal(list, lists.get(list) ?? null)
+      }
+    })
+
+    function refresh() {
+      for (const list of lists.keys()) {
+        if (list.isConnected) continue
+        resize.unobserve(list)
+        const active = lists.get(list)
+        if (active) resize.unobserve(active)
+        lists.delete(list)
+      }
+      for (const list of document.querySelectorAll<HTMLElement>(SELECTOR)) {
+        const active = list.querySelector<HTMLElement>(CURRENT)
+        if (!lists.has(list)) resize.observe(list)
+        if (lists.get(list) !== active) {
+          const previous = lists.get(list)
+          if (previous) resize.unobserve(previous)
+          if (active) resize.observe(active)
+          reveal(list, active)
+        }
+        lists.set(list, active)
+      }
+    }
+
+    const changes = new MutationObserver(refresh)
+    changes.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['aria-current'],
+    })
+    refresh()
+
+    return () => {
+      changes.disconnect()
+      resize.disconnect()
+    }
+  }, [])
+
+  return null
+}

package/src/nav-tabs.tsx

@@ -0,0 +1,60 @@
+import { cn } from './utils'
+import { navTabListVariants, navTabVariants } from './variants'
+
+export interface NavTab {
+  readonly href: string
+  readonly label: string
+  readonly isCurrent: boolean
+  readonly count?: number
+}
+
+export function NavTabs({
+  label,
+  tabs,
+  aside,
+  className,
+}: {
+  label: string
+  tabs: readonly NavTab[]
+  aside?: React.ReactNode
+  className?: string
+}) {
+  if (tabs.length === 0) return null
+
+  return (
+    <nav
+      aria-label={label}
+      className={cn('flex min-w-0 max-w-full flex-wrap items-center gap-x-3 gap-y-2', className)}
+    >
+      <ul data-nav-tabs className={navTabListVariants()}>
+        {tabs.map((tab) => (
+          <li key={tab.href} className="shrink-0">
+            <a
+              href={tab.href}
+              {...(tab.isCurrent ? { 'aria-current': 'page' as const } : {})}
+              className={navTabVariants({ active: tab.isCurrent })}
+            >
+              {tab.label}
+              {tab.count !== undefined && tab.count > 0 && (
+                <span
+                  className={cn(
+                    'rounded px-1.5 text-xs font-semibold tabular-nums',
+                    tab.isCurrent
+                      ? 'bg-secondary text-secondary-foreground'
+                      : 'bg-muted text-muted-foreground',
+                  )}
+                >
+                  {tab.count}
+                </span>
+              )}
+            </a>
+          </li>
+        ))}
+      </ul>
+
+      {aside !== undefined && (
+        <span className="shrink-0 text-xs text-muted-foreground">{aside}</span>
+      )}
+    </nav>
+  )
+}

package/src/navigation-drawer.tsx

@@ -0,0 +1,92 @@
+import { cn } from './utils'
+import { buttonVariants } from './variants'
+
+export interface NavigationDrawerProps {
+  readonly id: string
+  readonly title: string
+  readonly openLabel: string
+  readonly closeLabel: string
+  readonly showTrigger?: boolean
+  readonly children: React.ReactNode
+}
+
+export function NavigationDrawerTrigger({
+  target,
+  label,
+  className,
+  ...props
+}: Omit<React.ComponentProps<'button'>, 'children'> & {
+  readonly target: string
+  readonly label: string
+}) {
+  return (
+    <button
+      {...props}
+      type="button"
+      popoverTarget={target}
+      aria-label={label}
+      className={cn(buttonVariants({ variant: 'outline', size: 'icon' }), 'size-11', className)}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 24 24"
+        className="size-5"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      >
+        <path d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
+  )
+}
+
+export function NavigationDrawer({
+  id,
+  title,
+  openLabel,
+  closeLabel,
+  showTrigger = true,
+  children,
+}: NavigationDrawerProps) {
+  return (
+    <>
+      {showTrigger && <NavigationDrawerTrigger target={id} label={openLabel} />}
+      <div
+        id={id}
+        popover="auto"
+        role="dialog"
+        data-slot="navigation-drawer"
+        aria-labelledby={`${id}-title`}
+        className="fixed inset-y-0 end-0 start-auto m-0 h-dvh max-h-dvh w-80 max-w-[calc(100vw-3rem)] flex-col border-0 border-s border-border bg-card p-0 text-card-foreground shadow-xl backdrop:bg-black/40 [&:popover-open]:flex"
+      >
+        <div className="flex shrink-0 items-center justify-between gap-3 border-b border-border px-4 py-3">
+          <h2 id={`${id}-title`} className="font-heading text-base font-semibold">
+            {title}
+          </h2>
+          <button
+            type="button"
+            popoverTarget={id}
+            popoverTargetAction="hide"
+            aria-label={closeLabel}
+            className={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'size-11')}
+          >
+            <svg
+              aria-hidden="true"
+              viewBox="0 0 24 24"
+              className="size-5"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            >
+              <path d="m6 6 12 12M18 6 6 18" />
+            </svg>
+          </button>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain p-3">{children}</div>
+      </div>
+    </>
+  )
+}

package/src/page-header.tsx

@@ -0,0 +1,56 @@
+import { cn } from './utils'
+
+function PageHeader({ className, ...props }: React.ComponentProps<'header'>) {
+  return (
+    <header
+      data-slot="page-header"
+      className={cn('flex flex-wrap items-end justify-between gap-x-6 gap-y-4', className)}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="page-header-content"
+      className={cn('flex min-w-0 flex-1 basis-64 flex-col gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+function PageTitle({ className, ...props }: React.ComponentProps<'h1'>) {
+  return (
+    <h1
+      data-slot="page-title"
+      className={cn(
+        'font-heading text-2xl font-semibold tracking-tight text-balance text-foreground [overflow-wrap:anywhere] sm:text-3xl',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function PageDescription({ className, ...props }: React.ComponentProps<'p'>) {
+  return (
+    <p
+      data-slot="page-description"
+      className={cn('max-w-prose text-sm leading-relaxed text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function PageHeaderActions({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="page-header-actions"
+      className={cn('flex max-w-full flex-wrap items-center gap-2', className)}
+      {...props}
+    />
+  )
+}
+
+export { PageDescription, PageHeader, PageHeaderActions, PageHeaderContent, PageTitle }

package/src/password-input.tsx

@@ -0,0 +1,61 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Input } from './field'
+import { cn } from './utils'
+
+export interface PasswordInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {
+  readonly showLabel: string
+  readonly hideLabel: string
+}
+
+export function PasswordInput({
+  showLabel,
+  hideLabel,
+  className,
+  disabled,
+  ...props
+}: PasswordInputProps) {
+  const [visible, setVisible] = useState(false)
+  const [enhanced, setEnhanced] = useState(false)
+
+  useEffect(() => setEnhanced(true), [])
+
+  return (
+    <span data-slot="password-input" className="relative block min-w-0">
+      <Input
+        {...props}
+        disabled={disabled}
+        type={visible ? 'text' : 'password'}
+        className={cn(className, 'pr-12')}
+      />
+      {enhanced && (
+        <button
+          type="button"
+          disabled={disabled}
+          aria-label={visible ? hideLabel : showLabel}
+          aria-controls={props.id}
+          title={visible ? hideLabel : showLabel}
+          onClick={() => setVisible((current) => !current)}
+          className="absolute inset-y-0 right-0 flex w-11 items-center justify-center rounded-r-md text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50"
+        >
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 24 24"
+            className="size-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
+            <circle cx="12" cy="12" r="3" />
+            {visible && <path d="m3 3 18 18" />}
+          </svg>
+        </button>
+      )}
+    </span>
+  )
+}

package/src/variants.ts

@@ -4,6 +4,7 @@ export const buttonVariants = cva(
   [
     'inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap',
     'rounded-md border text-sm font-medium leading-none',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
     'transition-[color,background-color,border-color,opacity] duration-100 ease-out',
     'disabled:pointer-events-none disabled:opacity-50',
     'aria-disabled:pointer-events-none aria-disabled:opacity-50',
@@ -12,7 +13,8 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        primary: 'border-transparent bg-primary text-primary-foreground hover:bg-primary-hover',
+        primary:
+          'border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover',
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/70',
         outline: 'border-border bg-card text-foreground hover:bg-muted',
@@ -23,10 +25,10 @@ export const buttonVariants = cva(
         link: 'h-auto border-transparent p-0 text-foreground underline underline-offset-4 decoration-border hover:decoration-current',
       },
       size: {
-        sm: 'h-8 gap-1.5 px-2.5 text-xs',
-        default: 'h-9 px-3.5',
-        lg: 'h-10 px-4',
-        icon: 'size-9 p-0',
+        sm: 'h-8 gap-1.5 px-2.5 text-xs pointer-coarse:min-h-11',
+        default: 'h-10 px-4 pointer-coarse:min-h-11',
+        lg: 'h-11 px-5',
+        icon: 'size-10 p-0 pointer-coarse:size-11',
       },
     },
     defaultVariants: { variant: 'secondary', size: 'default' },
@@ -93,3 +95,56 @@ export const textLinkVariants = cva(
 )
 
 export type TextLinkVariants = VariantProps<typeof textLinkVariants>
+
+export const controlVariants = cva(
+  [
+    'w-full min-w-0 rounded-md border border-input bg-card text-foreground',
+    'transition-[border-color,box-shadow]',
+    'duration-150',
+    'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60',
+    'focus-visible:border-ring focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+    'aria-invalid:border-destructive aria-invalid:focus-visible:outline-destructive',
+    'pointer-coarse:min-h-11 pointer-coarse:text-base',
+  ],
+  {
+    variants: {
+      size: {
+        sm: 'min-h-8 px-2.5 py-1 text-xs',
+        default: 'min-h-10 px-3 py-2 text-sm',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+export type ControlVariants = VariantProps<typeof controlVariants>
+
+export const surfaceVariants = cva(
+  'min-w-0 rounded-xl border border-border bg-card text-card-foreground shadow-elevation',
+  {
+    variants: {
+      padded: { true: 'flex flex-col gap-4 p-5', false: '' },
+    },
+    defaultVariants: { padded: false },
+  },
+)
+
+export const navTabListVariants = cva(
+  'inline-flex max-w-full items-center gap-1 overflow-x-auto rounded-lg border border-border bg-surface p-1',
+)
+
+export const navTabVariants = cva(
+  [
+    'inline-flex h-9 items-center gap-1.5 rounded-md px-3 text-sm whitespace-nowrap transition-colors pointer-coarse:min-h-11',
+    'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+  ],
+  {
+    variants: {
+      active: {
+        true: 'bg-card font-semibold text-primary shadow-sm',
+        false: 'font-medium text-muted-foreground hover:bg-card/60 hover:text-foreground',
+      },
+    },
+    defaultVariants: { active: false },
+  },
+)