@stacksjs/components 0.2.216 → 0.2.218

package/dist/FilterChip-h896vrxm.stx

@@ -0,0 +1,50 @@
+<script server>
+/** One pill. See `FilterChips` for why a menu chip is not a toggle chip. */
+export const label = $props.label || ''
+export const href = $props.href || '#'
+export const active = $props.active || false
+/** Opens a picker rather than toggling in place — draws a chevron. */
+export const menu = $props.menu || false
+export const count = $props.count || ''
+
+export const hasCount = count !== '' && count !== 0 && count !== '0'
+
+/*
+ * `shrink-0`, because the row scrolls.
+ *
+ * Without it flexbox distributes the overflow by squeezing every chip, and a
+ * row of filters that cannot overflow instead renders as a row of ellipses.
+ */
+export const chipClasses = `
+  inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap rounded-full border px-4 py-2
+  text-sm font-medium transition-colors
+  ${active
+    ? 'border-transparent bg-fg text-surface'
+    : 'border-line bg-surface-raised text-fg hover:bg-surface-sunken'}
+`.replace(/\s+/g, ' ').trim()
+</script>
+
+<a
+  href="{{ href }}"
+  class="{{ chipClasses }}"
+  data-stx-filter-chip
+  @if (active)
+    aria-current="true"
+  @endif
+>
+  <span>{{ label }}</span>
+
+  @if (hasCount)
+    <span class="rounded-full bg-surface-sunken px-1.5 text-xs font-semibold text-fg-muted">{{ count }}</span>
+  @endif
+
+  @if (menu)
+    {{--
+      The chevron is the whole difference between "this filters the list" and
+      "this opens a picker", so it is drawn rather than implied.
+    --}}
+    <svg class="h-4 w-4 opacity-60" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+      <path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  @endif
+</a>

package/dist/FilterChips-7pnzycfd.stx

@@ -0,0 +1,41 @@
+<script server>
+/**
+ * The row of pills under a screen title.
+ *
+ * Two kinds of chip live in the same row and they are not the same control. A
+ * **toggle** is on or off — "Unread". A **menu** opens something and carries a
+ * chevron — "Repository". Rendering both as bare pills, which is the tempting
+ * shortcut, means a reader cannot tell which of them will change the list in
+ * place and which will cover the screen with a picker.
+ *
+ * `chips` is `{ label, href, active?, menu?, count? }`.
+ */
+export const chips = $props.chips || []
+export const className = $props.className || ''
+
+/*
+ * Scrolls horizontally, and says so by bleeding past the gutter.
+ *
+ * Filters overflow a phone's width the moment there are four of them with real
+ * words in. The negative margin plus matching padding lets the row run to both
+ * screen edges while its first chip still lines up with the title above it —
+ * a row that stops at the gutter looks complete when it is not.
+ */
+export const rowClasses = `
+  -mx-4 flex gap-2 overflow-x-auto px-4 pb-1
+  [scrollbar-width:none] [&::-webkit-scrollbar]:hidden
+  ${className}
+`.replace(/\s+/g, ' ').trim()
+</script>
+
+<div class="{{ rowClasses }}" data-stx-filter-chips role="group" aria-label="Filters">
+  @foreach (chips as chip)
+    <FilterChip
+      :label="chip.label"
+      :href="chip.href"
+      :active="chip.active"
+      :menu="chip.menu"
+      :count="chip.count"
+    />
+  @endforeach
+</div>

package/dist/ListRow-v45ymhcn.stx

@@ -0,0 +1,98 @@
+<script server>
+/**
+ * The row every mobile list is made of.
+ *
+ * Read off what a dense list actually has to carry: a leading mark, a line of
+ * context above the title, the title itself over two lines, a line of detail
+ * under it, a timestamp at the top right, and a count at the bottom right.
+ * Six slots, because a list that can only do three ends up with applications
+ * inventing a seventh layout per screen.
+ *
+ * Everything except `title` is optional and nothing reserves space when absent,
+ * so the same component renders a two-line notification and a five-line issue
+ * without either looking like a version of the other.
+ */
+export const title = $props.title || ''
+/** Small line above the title — a repository, an owner, a path. */
+export const eyebrow = $props.eyebrow || ''
+/** Small line below the title — an actor, a branch, a summary. */
+export const detail = $props.detail || ''
+/** Top right. A relative time, usually. */
+export const meta = $props.meta || ''
+/** Bottom right. A comment count, a diff stat, a status. */
+export const trailing = $props.trailing || ''
+/** Inline SVG for the leading column. */
+export const icon = $props.icon || ''
+/** Draws the unread dot in the leading column, under the icon. */
+export const unread = $props.unread || false
+export const href = $props.href || ''
+export const className = $props.className || ''
+
+export const interactive = href !== ''
+export const tag = interactive ? 'a' : 'div'
+
+export const rowClasses = `
+  flex w-full items-start gap-3 px-4 py-3 text-left
+  ${interactive ? 'transition-colors active:bg-surface-sunken' : ''}
+  ${className}
+`.replace(/\s+/g, ' ').trim()
+</script>
+
+<{{ tag }}
+  class="{{ rowClasses }}"
+  data-stx-list-row
+  @if (interactive)
+    href="{{ href }}"
+  @endif
+>
+  @if (icon || unread)
+    <span class="flex w-6 shrink-0 flex-col items-center gap-1.5 pt-0.5" aria-hidden="true">
+      {!! icon !!}
+
+      @if (unread)
+        {{--
+          A dot, not a bold title. Weight is already carrying the title's
+          hierarchy, and an unread list rendered entirely in bold has no
+          hierarchy left to spend.
+        --}}
+        <span class="h-2 w-2 rounded-full bg-accent"></span>
+      @endif
+    </span>
+  @endif
+
+  <span class="min-w-0 flex-1">
+    @if (eyebrow)
+      <span class="block truncate text-sm text-fg-muted">{{ eyebrow }}</span>
+    @endif
+
+    {{--
+      Two lines, then clipped. One line loses the end of nearly every issue
+      title; unbounded lets a single pasted stack trace push the rest of the
+      list off the screen.
+    --}}
+    <span class="block text-[15px] font-semibold leading-snug text-fg-strong [display:-webkit-box] [-webkit-box-orient:vertical] [-webkit-line-clamp:2] overflow-hidden">
+      {{ title }}
+    </span>
+
+    @if (detail)
+      <span class="mt-0.5 block truncate text-sm text-fg-muted">{{ detail }}</span>
+    @endif
+  </span>
+
+  @if (meta || trailing)
+    {{--
+      The right column is a column: timestamp at the top, count at the bottom,
+      both right-aligned. Putting them on one line makes the row's height
+      depend on which of the two is present.
+    --}}
+    <span class="flex shrink-0 flex-col items-end gap-2 pt-0.5">
+      @if (meta)
+        <span class="text-sm text-fg-muted">{{ meta }}</span>
+      @endif
+
+      @if (trailing)
+        <span class="rounded-md bg-surface-sunken px-1.5 py-0.5 text-xs font-medium text-fg-muted">{{ trailing }}</span>
+      @endif
+    </span>
+  @endif
+</{{ tag }}>

package/dist/NavBar-wcb6f2d3.stx

@@ -0,0 +1,63 @@
+<script server>
+/**
+ * The top of a screen: a row of controls, then a large title under it.
+ *
+ * Two rows rather than one, because they answer different questions. The
+ * control row is where back and the screen's actions live and it stays the same
+ * height everywhere; the title is display-sized and belongs to the content, so
+ * it scrolls away while the controls do not.
+ *
+ * `title` may be empty — a screen pushed onto a stack usually wants its name in
+ * the small centre slot beside the back button instead, which is what
+ * `compactTitle` is.
+ */
+export const title = $props.title || ''
+export const compactTitle = $props.compactTitle || ''
+export const backHref = $props.backHref || ''
+/** Markup for the right-hand side: search, add, an avatar. */
+export const actions = $props.actions || ''
+export const className = $props.className || ''
+
+export const hasControls = backHref !== '' || compactTitle !== '' || actions !== ''
+
+/*
+ * The safe-area inset is padding on the header itself.
+ *
+ * Not a spacer element above it: on a notched device the status bar sits over
+ * the top of the page, and a header that starts below a fixed-height spacer is
+ * right on exactly one device.
+ */
+export const headerStyle = 'padding-top: max(env(safe-area-inset-top, 0px), 12px);'
+</script>
+
+<header class="px-4 {{ className }}" style="{{ headerStyle }}" data-stx-nav-bar>
+  @if (hasControls)
+    <div class="flex h-11 items-center gap-2">
+      @if (backHref)
+        <a
+          href="{{ backHref }}"
+          class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-surface-raised text-fg"
+          aria-label="Back"
+        >
+          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <path d="M12 4l-6 6 6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </a>
+      @endif
+
+      @if (compactTitle)
+        <span class="truncate text-[17px] font-semibold text-fg-strong">{{ compactTitle }}</span>
+      @endif
+
+      @if (actions)
+        {{-- Pushed right by the spacer rather than by `justify-between`, which
+             would centre a lone action when there is no back button. --}}
+        <span class="ml-auto flex items-center gap-2">{!! actions !!}</span>
+      @endif
+    </div>
+  @endif
+
+  @if (title)
+    <h1 class="pb-3 pt-1 text-[34px] font-bold leading-tight tracking-tight text-fg-strong">{{ title }}</h1>
+  @endif
+</header>

package/dist/SectionCard-r73hvvbc.stx

@@ -0,0 +1,42 @@
+<script server>
+/**
+ * A titled group of rows on a rounded card — the "My Work" pattern.
+ *
+ * The title sits *outside* the card. That is the whole convention: the card is
+ * the group, the heading names it, and putting the heading inside makes the
+ * first row look like a header and every subsequent group look like a
+ * continuation of the one above it.
+ *
+ * Dividers are drawn by the card rather than by the rows, via
+ * `divide-y`, so a row does not have to know whether it is last — which is how
+ * a trailing hairline ends up under the final item of every list.
+ */
+export const title = $props.title || ''
+/** Right-aligned control beside the title — "See all", a menu glyph. */
+export const action = $props.action || ''
+export const actionHref = $props.actionHref || ''
+export const className = $props.className || ''
+
+export const cardClasses = `
+  overflow-hidden rounded-2xl border border-line bg-surface-raised
+  divide-y divide-line
+`.replace(/\s+/g, ' ').trim()
+</script>
+
+<section class="{{ className }}" data-stx-section-card>
+  @if (title || action)
+    <header class="flex items-baseline justify-between px-1 pb-2">
+      @if (title)
+        <h2 class="text-2xl font-bold tracking-tight text-fg-strong">{{ title }}</h2>
+      @endif
+
+      @if (action)
+        <a href="{{ actionHref }}" class="text-sm font-medium text-accent">{{ action }}</a>
+      @endif
+    </header>
+  @endif
+
+  <div class="{{ cardClasses }}">
+    <slot />
+  </div>
+</section>

package/dist/TabBar-8143650x.stx

@@ -0,0 +1,53 @@
+<script server>
+/**
+ * The bottom tab bar — the one control a phone app is navigated by.
+ *
+ * Floating rather than flush: a rounded bar inset from the window edges with
+ * the content scrolling *under* it, which is what every current iOS app does
+ * and what the safe area at the bottom of a modern iPhone is shaped for. A bar
+ * pinned flush to the bottom either eats the home indicator or leaves a band of
+ * dead colour beneath itself.
+ *
+ * `items` is the whole bar. Each is `{ label, href, icon, active?, badge? }`,
+ * where `icon` is inline SVG or any markup — the bar does not own an icon set,
+ * because an application's icons are its own and a component that ships them
+ * makes every consumer look like the component.
+ */
+export const items = $props.items || []
+export const className = $props.className || ''
+
+/**
+ * `env(safe-area-inset-bottom)` with a floor, not instead of one.
+ *
+ * On a device with a home indicator the inset is real and the bar must clear
+ * it. On one without — an SE, a simulator in a small window, a desktop browser
+ * looking at the mobile layout — the inset is `0px` and a bar with no floor
+ * sits on the very edge of the screen. `max()` is the only spelling that gets
+ * both right.
+ */
+export const barStyle = 'bottom: max(env(safe-area-inset-bottom, 0px), 12px);'
+
+export const barClasses = `
+  fixed inset-x-0 z-40 mx-auto flex w-max max-w-[calc(100%-24px)] items-stretch gap-1
+  rounded-full border border-line bg-surface-raised/90 px-2 py-1.5
+  shadow-lg backdrop-blur-xl
+  ${className}
+`.replace(/\s+/g, ' ').trim()
+</script>
+
+{{--
+  A `nav` with a label, because this is the primary navigation of the
+  application and a screen reader landing on an unlabelled group of five links
+  has no way to know that.
+--}}
+<nav class="{{ barClasses }}" style="{{ barStyle }}" aria-label="Primary" data-stx-tab-bar>
+  @foreach (items as item)
+    <TabBarItem
+      :label="item.label"
+      :href="item.href"
+      :icon="item.icon"
+      :active="item.active"
+      :badge="item.badge"
+    />
+  @endforeach
+</nav>

package/dist/TabBarItem-hd2r2ayy.stx

@@ -0,0 +1,55 @@
+<script server>
+/**
+ * One destination in the bottom bar.
+ *
+ * Icon over label, and the label always present. Icon-only bars test well with
+ * the people who designed them and badly with everyone else: a glyph is only
+ * unambiguous once you already know what the app calls that screen.
+ */
+export const label = $props.label || ''
+export const href = $props.href || '#'
+export const icon = $props.icon || ''
+export const active = $props.active || false
+/** A count, or any short string. Zero and empty are not rendered. */
+export const badge = $props.badge || ''
+
+export const hasBadge = badge !== '' && badge !== 0 && badge !== '0'
+
+/*
+ * The active state is a filled pill behind the item rather than a colour
+ * change alone. Colour alone is the one distinction that disappears for the
+ * ~8% of men with a red-green deficiency and for anyone in bright sunlight,
+ * which is most of the time a phone is used outdoors.
+ */
+export const itemClasses = `
+  relative flex min-w-[68px] flex-col items-center gap-0.5 rounded-full px-4 py-1.5
+  text-[11px] font-medium leading-tight transition-colors
+  ${active ? 'bg-surface-sunken text-accent' : 'text-fg-muted hover:text-fg'}
+`.replace(/\s+/g, ' ').trim()
+</script>
+
+<a
+  href="{{ href }}"
+  class="{{ itemClasses }}"
+  data-stx-tab-bar-item
+  @if (active)
+    aria-current="page"
+  @endif
+>
+  <span class="relative flex h-6 w-6 items-center justify-center" aria-hidden="true">
+    {!! icon !!}
+
+    @if (hasBadge)
+      {{--
+        The badge sits on the icon rather than after the label: it has to
+        survive the label being two words wide, and anchoring it to the glyph
+        keeps every tab's badge in the same place.
+      --}}
+      <span class="absolute -right-2 -top-1 min-w-[16px] rounded-full bg-danger px-1 text-[10px] font-semibold leading-4 text-white">
+        {{ badge }}
+      </span>
+    @endif
+  </span>
+
+  <span>{{ label }}</span>
+</a>

package/dist/index.d.ts

@@ -56,6 +56,8 @@ export * from './ui/form/index';
 export * from './ui/image/index';
 export * from './ui/input/index';
 export * from './ui/listbox/index';
+// The phone primitives: a bottom tab bar, filter pills, dense list rows.
+export * from './ui/mobile/index';
 export * from './ui/navigator/index';
 export * from './ui/notification/index';
 export * from './ui/pagination/index';