@stacksjs/components 0.2.119 → 0.2.120

package/dist/SidebarSpace-61b662jx.stx

@@ -0,0 +1,134 @@
+<script server>
+import { resolveSidebarTheme } from './themes'
+
+// One scene of a swipeable sidebar: a pinned grid, a title, the rows, and the
+// space's own actions. Everything below the title is the ordinary Sidebar
+// machinery — `<SidebarSection>` flattens the item tree and `<SidebarItem>`
+// renders the rows — so a space inherits disclosure, counts, icon tints,
+// route selection and keyboard navigation for free.
+export const id = $props.id || ''
+export const label = $props.label || ''
+export const icon = $props.icon || ''
+export const pinned = $props.pinned || []
+export const sections = $props.sections || []
+export const action = $props.action || null
+export const clear = $props.clear || null
+export const theme = $props.theme || 'arc'
+export const active = $props.active ?? false
+
+const themeStyle = resolveSidebarTheme(theme)
+export const scrollAreaClasses = themeStyle.scrollArea
+
+// The title takes the space's accent, which is how Arc signals which space you
+// are looking at even before the panel color registers.
+export const titleClasses = [
+  'flex items-center gap-[8px]',
+  'px-[8px] pb-[4px] pt-[10px]',
+  'text-[13px] font-semibold leading-[16px]',
+].join(' ')
+
+// Actions read as quieter than rows: no card on hover, just a wash.
+export const actionClasses = [
+  'flex w-full items-center gap-[8px]',
+  'h-[30px] rounded-[8px] px-[6px]',
+  'text-[13px] leading-[16px]',
+  'opacity-55 transition-[background-color,opacity] duration-150 ease-out',
+  'hover:bg-white/45 hover:opacity-100 dark:hover:bg-white/8',
+  'cursor-default',
+].join(' ')
+
+export const clearClasses = [
+  'flex items-center gap-[4px] rounded-[6px] px-[5px] py-[2px]',
+  'text-[11px] leading-[14px]',
+  'opacity-45 transition-opacity duration-150',
+  'hover:opacity-90',
+  'cursor-default',
+].join(' ')
+</script>
+
+<script client>
+const emit = defineEmits()
+
+function onAction(event) {
+  const button = event.target.closest('[data-space-action]')
+  if (!button) return
+  emit('spaceAction', {
+    spaceId: button.dataset.spaceOwner,
+    actionId: button.dataset.spaceAction,
+    role: button.dataset.spaceActionRole,
+  })
+}
+</script>
+
+<section
+  data-space
+  data-space-id="{{ id }}"
+  data-space-active="{{ active ? 'true' : 'false' }}"
+  class="flex min-w-0 flex-1 flex-col"
+  role="tabpanel"
+  aria-label="{{ label || id }}"
+  @click="onAction($event)"
+>
+  <div class="{{ scrollAreaClasses }} stx-sidebar-scroll">
+    <SidebarPinned :items="pinned" />
+
+    @if(label)
+      <div class="{{ titleClasses }}">
+        @if(icon)
+          <span class="{{ icon }} h-[15px] w-[15px] shrink-0 stx-space-title-icon" aria-hidden="true"></span>
+        @endif
+        <span class="truncate">{{ label }}</span>
+      </div>
+    @endif
+
+    @foreach(sections as section)
+      <SidebarSection
+        :id="section.id"
+        :label="section.label"
+        :items="section.items"
+        :collapsible="section.collapsible"
+        :collapsed="section.collapsed"
+        :theme="theme"
+      />
+    @endforeach
+
+    @if(clear)
+      <div class="flex items-center gap-[8px] px-[8px] pt-[10px]">
+        <span class="h-px flex-1 bg-current opacity-15" aria-hidden="true"></span>
+        <button
+          type="button"
+          data-space-action="{{ clear.id }}"
+          data-space-action-role="clear"
+          data-space-owner="{{ id }}"
+          class="{{ clearClasses }}"
+        >
+          @if(clear.icon)
+            <span class="{{ clear.icon }} h-[10px] w-[10px]" aria-hidden="true"></span>
+          @endif
+          <span>{{ clear.label }}</span>
+        </button>
+      </div>
+    @endif
+
+    @if(action)
+      <button
+        type="button"
+        data-space-action="{{ action.id }}"
+        data-space-action-role="action"
+        data-space-owner="{{ id }}"
+        class="{{ actionClasses }}"
+      >
+        <span class="{{ action.icon }} h-[14px] w-[14px] shrink-0" aria-hidden="true"></span>
+        <span class="truncate">{{ action.label }}</span>
+      </button>
+    @endif
+  </div>
+</section>
+
+<style scoped>
+/* The title icon rides the space accent. Published as a custom property by
+   SidebarSpaces so it crossfades along with the panel instead of cutting. */
+.stx-space-title-icon {
+  color: var(--stx-space-accent, currentColor);
+}
+</style>

package/dist/SidebarSpaceSwitcher-882njcxq.stx

@@ -0,0 +1,98 @@
+<script server>
+// The rail along the bottom of an Arc sidebar: one small icon per space, plus
+// an optional trailing "+". It is the discoverable counterpart to the swipe —
+// the gesture is what you use once you know the spaces exist, the rail is how
+// you find out.
+//
+// The buttons are markup only. `<SidebarSpaces>` owns the single click handler
+// and flips `data-space-current`, so the rail never holds its own copy of
+// which space is active — there is exactly one source of truth.
+export const spaces = ($props.spaces || []).map(space => ({
+  id: space.id,
+  label: space.label || space.id,
+  icon: space.icon || 'i-f7-circle',
+}))
+
+export const active = $props.active || (spaces[0] && spaces[0].id) || ''
+export const showAdd = $props.showAdd ?? false
+export const addLabel = $props.addLabel || 'New space'
+</script>
+
+<div
+  data-space-switcher
+  class="flex h-[38px] shrink-0 items-center gap-[1px] px-[8px] pb-[6px]"
+  role="tablist"
+  aria-label="Spaces"
+  aria-orientation="horizontal"
+>
+  @foreach(spaces as space)
+    <button
+      type="button"
+      data-space-target="{{ space.id }}"
+      data-space-current="{{ space.id === active ? 'true' : 'false' }}"
+      class="stx-space-tab"
+      role="tab"
+      aria-selected="{{ space.id === active ? 'true' : 'false' }}"
+      aria-label="{{ space.label }}"
+      title="{{ space.label }}"
+      tabindex="{{ space.id === active ? '0' : '-1' }}"
+    >
+      <span class="{{ space.icon }} h-[15px] w-[15px]" aria-hidden="true"></span>
+    </button>
+  @endforeach
+
+  <span class="flex-1"></span>
+
+  @if(showAdd)
+    <button
+      type="button"
+      data-space-add
+      class="stx-space-tab"
+      aria-label="{{ addLabel }}"
+      title="{{ addLabel }}"
+    >
+      <span class="i-f7-plus h-[14px] w-[14px]" aria-hidden="true"></span>
+    </button>
+  @endif
+</div>
+
+<style scoped>
+/* Rail buttons are painted here rather than with utility classes because the
+   current one has to pick up `--stx-space-accent`, which changes as you swipe.
+   A class swap would have to be re-applied on every transition; an attribute
+   rule keyed on `data-space-current` just follows along. */
+.stx-space-tab {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 26px;
+  border-radius: 7px;
+  color: currentColor;
+  opacity: 0.4;
+  background: transparent;
+  transition: opacity 150ms ease, background-color 150ms ease, color 300ms ease;
+  cursor: default;
+}
+.stx-space-tab:hover {
+  opacity: 0.75;
+  background: rgba(255, 255, 255, 0.4);
+}
+.stx-space-tab[data-space-current="true"] {
+  opacity: 1;
+  color: var(--stx-space-accent, currentColor);
+  background: rgba(255, 255, 255, 0.55);
+}
+.stx-space-tab:focus-visible {
+  outline: 2px solid var(--stx-space-accent, currentColor);
+  outline-offset: 1px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .stx-space-tab:hover {
+    background: rgba(255, 255, 255, 0.08);
+  }
+  .stx-space-tab[data-space-current="true"] {
+    background: rgba(255, 255, 255, 0.12);
+  }
+}
+</style>