@proteos/ui 0.61.0 → 0.76.0

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

@@ -0,0 +1,120 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { TimeSlotList } from './time-slot-list'
+
+const TIMES = ['09:00', '09:30', '10:00'].map((label) => ({ id: label, label }))
+
+function Harness({
+  initial = null,
+  onSelect,
+  onConfirm,
+  confirmLabel,
+  items = TIMES,
+}: {
+  initial?: string | null
+  onSelect?: (id: string) => void
+  onConfirm?: (id: string) => void
+  confirmLabel?: string
+  items?: ReadonlyArray<{ id: string; label: string; isDisabled?: boolean }>
+}) {
+  const [selected, setSelected] = useState<string | null>(initial)
+  return (
+    <TimeSlotList
+      aria-label="Times"
+      items={items}
+      selectedId={selected}
+      onSelect={(id) => {
+        setSelected(id)
+        onSelect?.(id)
+      }}
+      {...(confirmLabel ? { confirmLabel } : {})}
+      {...(onConfirm ? { onConfirm } : {})}
+    />
+  )
+}
+
+describe('TimeSlotList', () => {
+  it('renders one exclusive option per item', () => {
+    render(<Harness />)
+    expect(screen.getByRole('radiogroup', { name: 'Times' })).toBeInTheDocument()
+    expect(screen.getAllByRole('radio')).toHaveLength(3)
+  })
+
+  it('selects on click and reports the id', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    render(<Harness onSelect={onSelect} />)
+    await user.click(screen.getByRole('radio', { name: '09:30' }))
+    expect(onSelect).toHaveBeenLastCalledWith('09:30')
+    expect(screen.getByRole('radio', { name: '09:30' })).toBeChecked()
+  })
+
+  it('keeps the selection when the selected item is clicked again', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    render(<Harness initial="09:00" onSelect={onSelect} />)
+    await user.click(screen.getByRole('radio', { name: '09:00' }))
+    expect(screen.getByRole('radio', { name: '09:00' })).toBeChecked()
+  })
+
+  it('does not select a disabled item', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    render(
+      <Harness
+        onSelect={onSelect}
+        items={[{ id: '09:00', label: '09:00', isDisabled: true }, ...TIMES.slice(1)]}
+      />,
+    )
+    await user.click(screen.getByRole('radio', { name: '09:00' }))
+    expect(onSelect).not.toHaveBeenCalled()
+  })
+
+  it('shows the inline confirm beside the selected item only', async () => {
+    const user = userEvent.setup()
+    const onConfirm = vi.fn()
+    render(<Harness confirmLabel="Confirm" onConfirm={onConfirm} />)
+    expect(screen.queryByRole('button', { name: 'Confirm' })).not.toBeInTheDocument()
+    await user.click(screen.getByRole('radio', { name: '10:00' }))
+    await user.click(screen.getByRole('button', { name: 'Confirm' }))
+    expect(onConfirm).toHaveBeenCalledWith('10:00')
+  })
+
+  it('freezes every pick and the confirm while disabled', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    const onConfirm = vi.fn()
+    render(
+      <TimeSlotList
+        aria-label="Times"
+        items={TIMES}
+        selectedId="09:00"
+        onSelect={onSelect}
+        confirmLabel="Confirm"
+        onConfirm={onConfirm}
+        isDisabled
+      />,
+    )
+    await user.click(screen.getByRole('radio', { name: '09:30' }))
+    await user.click(screen.getByRole('button', { name: 'Confirm' }))
+    expect(onSelect).not.toHaveBeenCalled()
+    expect(onConfirm).not.toHaveBeenCalled()
+  })
+
+  it('renders the empty message when there are no items', () => {
+    render(
+      <TimeSlotList
+        aria-label="Times"
+        items={[]}
+        selectedId={null}
+        onSelect={() => {}}
+        emptyMessage="All booked today"
+      />,
+    )
+    expect(screen.getByRole('status')).toHaveTextContent('All booked today')
+    expect(screen.queryByRole('radiogroup')).not.toBeInTheDocument()
+  })
+})

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'
@@ -25,6 +26,7 @@ export * from './components/error-animation'
 export * from './components/field'
 export * from './components/file-field'
 export * from './components/file-viewer'
+export * from './components/glow-frame'
 export * from './components/icon-picker'
 export * from './components/image-attachment'
 export * from './components/image-lightbox'
@@ -47,6 +49,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 +58,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'
 

package/src/styles.css

@@ -96,6 +96,20 @@
   --color-tile-slate: #1a1d2b;
   --color-tile-fg: #f0efe8;
 
+  /* Glow — the "model at work / output ready" light (see GlowFrame). A
+     deliberate decorative surface: its colours have no semantic token and
+     read the same in every theme. Beam: the two-colour light travelling the
+     edge while the model works. 1–6: the hues of the flash when the
+     output lands. */
+  --color-glow-beam-from: #3b82f6;
+  --color-glow-beam-to: #8b5cf6;
+  --color-glow-1: #bc82f3;
+  --color-glow-2: #f5b9ea;
+  --color-glow-3: #8d9fff;
+  --color-glow-4: #ff6778;
+  --color-glow-5: #ffba71;
+  --color-glow-6: #c686ff;
+
   /* Type */
   --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
   --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
@@ -219,6 +233,208 @@
   }
 }
 
+/* ==========================================================
+   GlowFrame — the light round a model's output (glow-frame.tsx).
+
+   Two layers over the wrapped box, both clipped to its radius:
+
+   Beams (status "working"). Two light pairs travel the box's edge, half a
+   lap apart, one lap per 4s, each a blurred lead + tail blob riding the
+   border-box path (offset-path) inside a 1px ring mask, plus a blurred dot
+   whose glow spills past the box. `screen` blending: nothing on .glow-fx
+   may create a stacking context (no z-index / opacity on it), or the blend
+   stops reaching the box. The fade in / out goes on its children instead.
+
+   Flash (working → ready). Four strokes of ONE conic gradient laid inside
+   the edge, each wider and blurrier than the last. Every 250ms GlowFrame
+   gives the six hues new random places round the edge; the places and
+   hues are registered properties, so each stroke eases there at its own
+   pace and the four chase each other. One 900ms burst: quick rise to a
+   soft peak, long fade.
+
+   .glow-room spans 4px round the box and fades everything in it to nothing
+   at its outer edge, so spilled light never meets an overflow clip as a
+   hard line.
+   ========================================================== */
+
+@property --glow-p1 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p2 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p3 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p4 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p5 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-p6 { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
+@property --glow-k1 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k2 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k3 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k4 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k5 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+@property --glow-k6 { syntax: '<color>'; inherits: false; initial-value: transparent; }
+
+.glow-room {
+  --glow-room: 4px;
+  margin: calc(var(--glow-room) * -1);
+  padding: var(--glow-room);
+  -webkit-mask:
+    linear-gradient(to right, transparent, #000 var(--glow-room), #000 calc(100% - var(--glow-room)), transparent),
+    linear-gradient(to bottom, transparent, #000 var(--glow-room), #000 calc(100% - var(--glow-room)), transparent);
+  -webkit-mask-composite: source-in;
+  mask:
+    linear-gradient(to right, transparent, #000 var(--glow-room), #000 calc(100% - var(--glow-room)), transparent) intersect,
+    linear-gradient(to bottom, transparent, #000 var(--glow-room), #000 calc(100% - var(--glow-room)), transparent);
+}
+.glow-frame {
+  position: relative;
+  isolation: isolate;
+  border-radius: inherit;
+}
+
+/* --- Beams --------------------------------------------------- */
+
+.glow-fx {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.glow-fx > div {
+  transition: opacity 700ms var(--ease-out-soft);
+  animation: glow-in 700ms var(--ease-out-soft) backwards;
+}
+.glow-frame[data-working="false"] > .glow-fx > div {
+  opacity: 0;
+}
+.glow-orb {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  pointer-events: none;
+  mix-blend-mode: screen;
+}
+.glow-beams {
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  pointer-events: none;
+  overflow: hidden;
+  padding: 1px;
+  -webkit-mask: linear-gradient(#fff 0, #fff 0) content-box exclude, linear-gradient(#fff 0, #fff 0);
+  mask: linear-gradient(#fff 0, #fff 0) content-box exclude, linear-gradient(#fff 0, #fff 0);
+}
+.glow-dot,
+.glow-blob {
+  position: absolute;
+  border-radius: 50%;
+  offset-path: border-box;
+  offset-anchor: 50% 50%;
+  offset-rotate: 0deg;
+  mix-blend-mode: screen;
+  pointer-events: none;
+  animation-duration: 4s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.glow-dot {
+  width: 30px;
+  height: 30px;
+  background: radial-gradient(circle, var(--color-glow-beam-from) 0%, var(--color-glow-beam-from) 30%, transparent 100%);
+  filter: blur(30px);
+  opacity: 0.7;
+}
+.glow-lead {
+  width: 83px;
+  height: 83px;
+  background: radial-gradient(circle, var(--color-glow-beam-from) 0%, var(--color-glow-beam-from) 20%, transparent 70%);
+  filter: blur(12px);
+}
+.glow-tail {
+  width: 83px;
+  height: 83px;
+  background: radial-gradient(circle, var(--color-glow-beam-to) 0%, var(--color-glow-beam-to) 20%, transparent 70%);
+  filter: blur(14.4px);
+}
+.glow-dot.glow-a { animation-name: glow-dot; }
+.glow-dot.glow-b { animation-name: glow-dot-offset; }
+.glow-lead.glow-a { animation-name: glow-trail; }
+.glow-lead.glow-b { animation-name: glow-trail-offset; }
+.glow-tail.glow-a { animation-name: glow-trail-tail; }
+.glow-tail.glow-b { animation-name: glow-trail-offset-tail; }
+
+@keyframes glow-in { from { opacity: 0; } }
+@keyframes glow-trail { from { offset-distance: 0%; } to { offset-distance: 100%; } }
+@keyframes glow-trail-offset { from { offset-distance: 50%; } to { offset-distance: 150%; } }
+@keyframes glow-trail-tail { from { offset-distance: -4%; } to { offset-distance: 96%; } }
+@keyframes glow-trail-offset-tail { from { offset-distance: 46%; } to { offset-distance: 146%; } }
+@keyframes glow-dot { from { offset-distance: 4%; } to { offset-distance: 104%; } }
+@keyframes glow-dot-offset { from { offset-distance: 54%; } to { offset-distance: 154%; } }
+
+/* --- Flash --------------------------------------------------- */
+
+.glow-flash {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  overflow: clip;
+  border-radius: inherit;
+  pointer-events: none;
+  animation: glow-flash 900ms linear both;
+}
+.glow-stroke {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.glow-ring {
+  /* Evenly spaced until the first re-roll (and for good under reduced
+     motion). */
+  --glow-p1: 0%;      --glow-k1: var(--color-glow-1);
+  --glow-p2: 16.667%; --glow-k2: var(--color-glow-2);
+  --glow-p3: 33.333%; --glow-k3: var(--color-glow-3);
+  --glow-p4: 50%;     --glow-k4: var(--color-glow-4);
+  --glow-p5: 66.667%; --glow-k5: var(--color-glow-5);
+  --glow-p6: 83.333%; --glow-k6: var(--color-glow-6);
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: var(--glow-w);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
+  /* Angular from 3 o'clock; first and last stops repeat one turn away so
+     the loop closes without a seam. */
+  background: conic-gradient(from 90deg,
+    var(--glow-k6) calc(var(--glow-p6) - 100%),
+    var(--glow-k1) var(--glow-p1), var(--glow-k2) var(--glow-p2), var(--glow-k3) var(--glow-p3),
+    var(--glow-k4) var(--glow-p4), var(--glow-k5) var(--glow-p5), var(--glow-k6) var(--glow-p6),
+    var(--glow-k1) calc(var(--glow-p1) + 100%));
+  transition-property: --glow-p1, --glow-k1, --glow-p2, --glow-k2, --glow-p3, --glow-k3,
+    --glow-p4, --glow-k4, --glow-p5, --glow-k5, --glow-p6, --glow-k6;
+  transition-duration: var(--glow-dur);
+  transition-timing-function: ease-in-out;
+}
+.glow-ring-1 { --glow-w: 3.5px; --glow-dur: 500ms; }
+.glow-ring-2 { --glow-w: 5.5px; --glow-dur: 600ms; }
+.glow-ring-3 { --glow-w: 6.5px; --glow-dur: 800ms; }
+.glow-ring-4 { --glow-w: 9px; --glow-dur: 1000ms; }
+.glow-stroke-2 { filter: blur(2.5px); }
+.glow-stroke-3 { filter: blur(7px); }
+.glow-stroke-4 { filter: blur(9px); }
+
+/* Up fast to a soft peak — a hint, not a second working light — then a
+   long fall. */
+@keyframes glow-flash {
+  0% { opacity: 0; animation-timing-function: var(--ease-out-soft); }
+  18% { opacity: 0.6; animation-timing-function: ease-in-out; }
+  100% { opacity: 0; }
+}
+
+/* Reduced motion: the beams hold still where they start, the flash keeps
+   its fade but its colours stay put. */
+@media (prefers-reduced-motion: reduce) {
+  .glow-fx > div { animation: none; }
+  .glow-fx * { animation-play-state: paused; }
+  .glow-ring { transition: none; }
+}
+
 /* Raw variables (non-color) for direct component consumption.
    Tailwind v4 mirrors @theme into :root for colors/radii/shadows, but we
    also expose spacing tokens here for components that need raw var() access. */

package/dist/chunk-NSE4VW3Z.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["AriaButton","tv","jsx"],"mappings":";;;;;;;AAGO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACuBA,IAAM,UAAA,GAAa;AAAA,EACjB,gCAAA;AAAA,EACA;AACF,CAAA;AAIA,IAAM,aAAA,GAAgB;AAAA,EACpB,6DAAA;AAAA,EACA,iDAAA;AAAA,EACA,0CAAA;AAAA,EACA;AACF,CAAA;AAGA,IAAM,YAAA,GAAe;AAAA,EACnB,4CAAA;AAAA,EACA,uCAAA;AAAA,EACA;AACF,CAAA;AAEO,IAAM,eAAe,EAAA,CAAG;AAAA,EAC7B,IAAA,EAAM;AAAA,IACJ,gFAAA;AAAA;AAAA;AAAA,IAGA,qEAAA;AAAA,IACA,oFAAA;AAAA,IACA,qCAAA;AAAA,IACA,4CAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,GAAA,EAAK,UAAA;AAAA,MACL,MAAA,EAAQ,UAAA;AAAA,MACR,OAAA,EAAS,aAAA;AAAA,MACT,SAAA,EAAW,YAAA;AAAA,MACX,KAAA,EAAO;AAAA,QACL,8CAAA;AAAA,QACA,uCAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,MAAA,EAAQ;AAAA,QACN,8CAAA;AAAA,QACA,uCAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,8CAAA;AAAA,QACA,gCAAA;AAAA,QACA;AAAA,OACF;AAAA;AAAA;AAAA,MAGA,MAAA,EAAQ;AAAA,QACN,sCAAA;AAAA,QACA,2EAAA;AAAA,QACA;AAAA;AACF,KACF;AAAA,IACA,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,oCAAA;AAAA,MACJ,EAAA,EAAI,0CAAA;AAAA,MACJ,EAAA,EAAI,yCAAA;AAAA;AAAA,MAEJ,SAAA,EAAW,6BAAA;AAAA,MACX,SAAA,EAAW,gCAAA;AAAA,MACX,SAAA,EAAW;AAAA,KACb;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA,EAAO;AAAA,MACL,OAAA,EAAS,YAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,gBAAA,EAAkB;AAAA,IAChB,EAAE,OAAA,EAAS,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,aAAA,EAAc;AAAA,IACpD,EAAE,OAAA,EAAS,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,aAAA,EAAc;AAAA,IACpD,EAAE,OAAA,EAAS,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,aAAA,EAAc;AAAA;AAAA,IAEpD,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,SAAA,EAAW,OAAO,cAAA,EAAe;AAAA,IAC3D,EAAE,OAAA,EAAS,MAAA,EAAQ,KAAA,EAAO,MAAA,EAAQ,OAAO,cAAA,EAAe;AAAA;AAAA,IAExD,EAAE,OAAA,EAAS,QAAA,EAAU,KAAA,EAAO,mDAAA;AAAoD,GAClF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,SAAA;AAAA,IACT,IAAA,EAAM,IAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC;AAKM,SAAS,MAAA,CAAO,EAAE,OAAA,EAAS,IAAA,EAAM,OAAO,SAAA,EAAW,GAAG,OAAM,EAAgB;AACjF,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,CAAC,WAAA,KACV,EAAA;AAAA,QACE,YAAA,CAAa,EAAE,OAAA,EAAS,IAAA,EAAM,OAAO,CAAA;AAAA,QACrC,OAAO,SAAA,KAAc,UAAA,GAAa,SAAA,CAAU,WAAW,CAAA,GAAI;AAAA;AAC7D;AAAA,GAEJ;AAEJ;AC5HO,IAAM,iBAAiBC,EAAAA,CAAG;AAAA,EAC/B,IAAA,EAAM,CAAC,eAAA,EAAiB,cAAc,CAAA;AAAA,EACtC,QAAA,EAAU;AAAA,IACR,KAAA,EAAO;AAAA,MACL,IAAA,EAAM,YAAA;AAAA,MACN,MAAA,EAAQ,cAAA;AAAA;AAAA;AAAA,MAGR,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,eAAA,EAAiB,EAAE,KAAA,EAAO,MAAA;AAC5B,CAAC;AAKM,SAAS,SAAS,EAAE,KAAA,EAAO,SAAA,EAAW,GAAG,OAAM,EAAkB;AACtE,EAAA,uBACEC,GAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MAIC,aAAA,EAAY,MAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,WAAW,EAAA,CAAG,cAAA,CAAe,EAAE,KAAA,EAAO,GAAG,SAAS;AAAA;AAAA,GACpD;AAEJ","file":"chunk-NSE4VW3Z.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Button — emphasis ladder, top to bottom:\n\n     cta        ink fill. The one strong action per view (never two visible).\n     primary    raised white: `surface` fill, `rule-strong` hairline, rest\n                shadow. The everyday button; the default variant.\n     secondary  muted: `surface-3` fill, no border. Cancel / supporting actions.\n     ghost      secondary's chrome, only on hover. Invisible at rest.\n     subtle     borderless text button (toolbars, icon buttons).\n     link       inline underline.\n     danger     solid terracotta for destructive confirms.\n\n   `accent` is a frozen alias of `cta` — variant names are part of the runtime\n   contract for module component bundles, so nothing is ever removed.\n\n   Interaction state comes from React Aria's data attributes (`hovered:`,\n   `pressed:` — see the @custom-variant block in styles.css); `focus-visible:`\n   and `disabled:` stay on the native pseudo-classes because the RAC root IS\n   the focusable <button>. Hover is always a colour step on the surface ramp,\n   never opacity; press is translateY(1px) plus one more ramp step.\n   ========================================================================= */\n\n// Ink fill with the indigo-tinted hover. Kept verbatim from the old primary.\nconst ctaClasses = [\n  'bg-ink text-surface border-ink',\n  'hovered:bg-accent-ink hovered:border-accent-ink',\n]\n\n// Raised white: a lighter inner on the darker page ground. On a white card the\n// hairline + rest shadow carry it. Press sinks one step and drops the shadow.\nconst raisedClasses = [\n  'bg-surface text-ink border-rule shadow-[var(--shadow-rest)]',\n  'hovered:bg-surface-2 hovered:border-rule-strong',\n  'pressed:bg-surface-3 pressed:shadow-none',\n  'focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]',\n]\n\n// Muted gray fill, no border. One step quieter than primary.\nconst mutedClasses = [\n  'bg-surface-3 text-ink-2 border-transparent',\n  'hovered:bg-surface-4 hovered:text-ink',\n  'pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]',\n]\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md\n    // typography.body), not the mono reserved for ids, timestamps and badges.\n    'font-sans font-medium tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      cta: ctaClasses,\n      accent: ctaClasses,\n      primary: raisedClasses,\n      secondary: mutedClasses,\n      ghost: [\n        'bg-transparent text-ink-2 border-transparent',\n        'hovered:bg-surface-3 hovered:text-ink',\n        'pressed:bg-surface-4',\n      ],\n      subtle: [\n        'bg-transparent text-ink-3 border-transparent',\n        'hovered:bg-surface-2 hovered:text-ink',\n        'pressed:bg-surface-3',\n      ],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hovered:text-ink hovered:border-b-ink',\n      ],\n      // `text-surface`, not white: dark's --color-danger is a light salmon, and\n      // the surface token flips dark with it while white would fail contrast.\n      danger: [\n        'bg-danger text-surface border-danger',\n        'hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n        'hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded treatment for a small set\n    // of prominent CTAs. The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n    // Destructive confirms get the terracotta halo instead of the indigo one.\n    { variant: 'danger', class: 'focus-visible:shadow-[var(--shadow-focus-danger)]' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}

package/dist/chunk-NWGG5WFL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["twMerge","clsx","tv","jsx","AriaButton"],"mappings":"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","file":"chunk-NWGG5WFL.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Button — emphasis ladder, top to bottom:\n\n     cta        ink fill. The one strong action per view (never two visible).\n     primary    raised white: `surface` fill, `rule-strong` hairline, rest\n                shadow. The everyday button; the default variant.\n     secondary  muted: `surface-3` fill, no border. Cancel / supporting actions.\n     ghost      secondary's chrome, only on hover. Invisible at rest.\n     subtle     borderless text button (toolbars, icon buttons).\n     link       inline underline.\n     danger     solid terracotta for destructive confirms.\n\n   `accent` is a frozen alias of `cta` — variant names are part of the runtime\n   contract for module component bundles, so nothing is ever removed.\n\n   Interaction state comes from React Aria's data attributes (`hovered:`,\n   `pressed:` — see the @custom-variant block in styles.css); `focus-visible:`\n   and `disabled:` stay on the native pseudo-classes because the RAC root IS\n   the focusable <button>. Hover is always a colour step on the surface ramp,\n   never opacity; press is translateY(1px) plus one more ramp step.\n   ========================================================================= */\n\n// Ink fill with the indigo-tinted hover. Kept verbatim from the old primary.\nconst ctaClasses = [\n  'bg-ink text-surface border-ink',\n  'hovered:bg-accent-ink hovered:border-accent-ink',\n]\n\n// Raised white: a lighter inner on the darker page ground. On a white card the\n// hairline + rest shadow carry it. Press sinks one step and drops the shadow.\nconst raisedClasses = [\n  'bg-surface text-ink border-rule shadow-[var(--shadow-rest)]',\n  'hovered:bg-surface-2 hovered:border-rule-strong',\n  'pressed:bg-surface-3 pressed:shadow-none',\n  'focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]',\n]\n\n// Muted gray fill, no border. One step quieter than primary.\nconst mutedClasses = [\n  'bg-surface-3 text-ink-2 border-transparent',\n  'hovered:bg-surface-4 hovered:text-ink',\n  'pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]',\n]\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md\n    // typography.body), not the mono reserved for ids, timestamps and badges.\n    'font-sans font-medium tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      cta: ctaClasses,\n      accent: ctaClasses,\n      primary: raisedClasses,\n      secondary: mutedClasses,\n      ghost: [\n        'bg-transparent text-ink-2 border-transparent',\n        'hovered:bg-surface-3 hovered:text-ink',\n        'pressed:bg-surface-4',\n      ],\n      subtle: [\n        'bg-transparent text-ink-3 border-transparent',\n        'hovered:bg-surface-2 hovered:text-ink',\n        'pressed:bg-surface-3',\n      ],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hovered:text-ink hovered:border-b-ink',\n      ],\n      // `text-surface`, not white: dark's --color-danger is a light salmon, and\n      // the surface token flips dark with it while white would fail contrast.\n      danger: [\n        'bg-danger text-surface border-danger',\n        'hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n        'hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded treatment for a small set\n    // of prominent CTAs. The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n    // Destructive confirms get the terracotta halo instead of the indigo one.\n    { variant: 'danger', class: 'focus-visible:shadow-[var(--shadow-focus-danger)]' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}