@proteos/ui 0.60.0 → 0.75.0

package/src/components/time-slot-list/time-slot-list.tsx

@@ -0,0 +1,154 @@
+import type { ReactNode } from 'react'
+import {
+  ToggleButton as AriaToggleButton,
+  ToggleButtonGroup as AriaToggleButtonGroup,
+  type ToggleButtonGroupProps as AriaToggleButtonGroupProps,
+  type Key,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
+
+/* =========================================================================
+   TimeSlotList — a column of exclusive picks: free times on a day, shifts,
+   delivery windows. Each item is a full-width outlined button; the chosen
+   one carries an ink ring and may grow an inline confirm button beside it
+   (the "pick and go" register). Wraps RAC ToggleButtonGroup in single
+   selection so the group is one radiogroup with arrow-key movement and one
+   tab stop — and so a confirm button can sit beside an item without nesting
+   interactive content inside an option.
+
+   Labels are plain strings: formatting the time (12h / 24h, zone) is the
+   consumer's job; the list only lays the picks out.
+   ========================================================================= */
+
+export const timeSlotListStyles = tv({
+  slots: {
+    group: 'flex flex-col gap-2',
+    row: 'flex gap-2 min-w-0',
+    item: [
+      'flex-1 min-h-9 px-3 inline-flex items-center justify-center cursor-pointer outline-none',
+      'font-sans text-[13.5px] font-medium text-ink rounded-md',
+      'bg-surface border border-rule-strong',
+      'transition-[background-color,color,border-color,box-shadow] duration-150',
+      'hovered:bg-surface-2 hovered:border-ink-3',
+      'pressed:bg-surface-3',
+      'selected:border-ink selected:bg-surface selected:shadow-[inset_0_0_0_1px_var(--color-ink)]',
+      'selected:hovered:bg-surface',
+      'data-[focus-visible]:shadow-[var(--shadow-focus)]',
+      'selected:data-[focus-visible]:shadow-[var(--shadow-focus),inset_0_0_0_1px_var(--color-ink)]',
+      // Taken while you looked: dashed and quiet.
+      'data-[disabled]:border-dashed data-[disabled]:border-rule data-[disabled]:text-ink-4',
+      'data-[disabled]:cursor-default data-[disabled]:bg-transparent',
+    ],
+    confirm: 'flex-1 min-h-9',
+    empty: [
+      'rounded-md border border-rule-2 bg-surface-2 px-4 py-5 text-center',
+      'font-sans text-[13px] text-ink-3',
+    ],
+  },
+  variants: {
+    columns: {
+      1: { group: 'grid grid-cols-1' },
+      2: { group: 'grid grid-cols-2' },
+    },
+  },
+  defaultVariants: { columns: 1 },
+})
+
+export type TimeSlotListVariants = VariantProps<typeof timeSlotListStyles>
+
+export type TimeSlotListItem<T extends Key = Key> = {
+  id: T
+  label: ReactNode
+  /** No longer offered (taken, outside the window): rendered dashed, not pickable. */
+  isDisabled?: boolean
+}
+
+export type TimeSlotListProps<T extends Key = Key> = Omit<
+  AriaToggleButtonGroupProps,
+  'children' | 'selectionMode' | 'selectedKeys' | 'onSelectionChange' | 'className' | 'style'
+> & {
+  items: ReadonlyArray<TimeSlotListItem<T>>
+  /** `null` = nothing picked. */
+  selectedId: T | null
+  onSelect: (id: T) => void
+  /** Renders a cta beside the selected item; pressing it calls `onConfirm`. */
+  confirmLabel?: string
+  onConfirm?: (id: T) => void
+  /** Shown instead of the list when `items` is empty. */
+  emptyMessage?: ReactNode
+  columns?: TimeSlotListVariants['columns']
+  /** Focus the selected item (or the first) on mount. */
+  autoFocus?: boolean
+  /** Freeze every pick and the confirm while a request is in flight. */
+  isDisabled?: boolean
+  className?: string
+}
+
+export function TimeSlotList<T extends Key>({
+  items,
+  selectedId,
+  onSelect,
+  confirmLabel,
+  onConfirm,
+  emptyMessage = 'Nothing available.',
+  columns,
+  autoFocus = false,
+  isDisabled = false,
+  className,
+  orientation = 'vertical',
+  ...props
+}: TimeSlotListProps<T>) {
+  const styles = timeSlotListStyles({ columns })
+  if (items.length === 0) {
+    return (
+      <div role="status" className={cn(styles.empty(), className)}>
+        {emptyMessage}
+      </div>
+    )
+  }
+  const focusTarget = selectedId ?? items.find((item) => !item.isDisabled)?.id ?? null
+  return (
+    <AriaToggleButtonGroup
+      {...props}
+      orientation={orientation}
+      selectionMode="single"
+      disallowEmptySelection
+      isDisabled={isDisabled}
+      selectedKeys={selectedId === null ? new Set() : new Set([selectedId])}
+      onSelectionChange={(keys) => {
+        const [next] = Array.from(keys)
+        if (next !== undefined) onSelect(next as T)
+      }}
+      className={cn(styles.group(), className)}
+    >
+      {items.map((item) => {
+        const isSelected = item.id === selectedId
+        return (
+          <div key={String(item.id)} className={styles.row()}>
+            <AriaToggleButton
+              id={item.id}
+              {...(item.isDisabled ? { isDisabled: true } : {})}
+              {...(autoFocus && item.id === focusTarget ? { autoFocus: true } : {})}
+              className={styles.item()}
+            >
+              {item.label}
+            </AriaToggleButton>
+            {isSelected && confirmLabel && (
+              <Button
+                variant="cta"
+                className={styles.confirm()}
+                isDisabled={isDisabled}
+                onPress={() => onConfirm?.(item.id)}
+              >
+                {confirmLabel}
+              </Button>
+            )}
+          </div>
+        )
+      })}
+    </AriaToggleButtonGroup>
+  )
+}

package/src/components/tooltip/tooltip.tsx

@@ -42,7 +42,10 @@ export function Tooltip({ className, offset = 6, ...props }: TooltipProps) {
       offset={offset}
       className={(renderProps) =>
         cn(
-          'z-50 max-w-xs',
+          // Above the floating chat / softphone windows (1100 / 1200) and their
+          // full-screen workspace, like Select and Toast — a page inside the
+          // window keeps its tooltips.
+          'z-[1300] max-w-xs',
           'rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]',
           'px-2.5 py-1.5',
           'font-mono text-[11.5px] text-ink-2',

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from './components/attachment-chip'
 export * from './components/attribute-type-icon'
+export * from './components/availability-calendar'
 export * from './components/avatar'
 export * from './components/avatar-group'
 export * from './components/badge'
@@ -47,6 +48,7 @@ export * from './components/segmented-control'
 export * from './components/select'
 export * from './components/separator'
 export * from './components/skeleton'
+export * from './components/stepper'
 export * from './components/success-animation'
 export * from './components/switch'
 export * from './components/table'
@@ -55,6 +57,7 @@ export * from './components/tag-input'
 export * from './components/text-shimmer'
 export * from './components/textarea'
 export * from './components/time-field'
+export * from './components/time-slot-list'
 export * from './components/toast'
 export * from './components/tooltip'