@talelk/newui-organisms 1.0.0 → 2.0.0

package/src/organisms/PageToolbar/PageToolbar.tsx

@@ -1,18 +1,25 @@
-import { Button, type IconProp } from '@talelk/newui-atoms'
-import { Dropdown } from '@talelk/newui-molecules'
-import { type JSX, Show } from 'solid-js'
+import { Button, cn, Icon, type IconProp } from '@talelk/newui-atoms'
+import { Menu } from '@talelk/newui-molecules'
+import { For, type JSX, Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
 
 export interface PageToolbarAction {
   label: string
-  /** A `lucide-*` string or a component (P11). */
+  /** A `lucide-*` string or a component (P11). No icon is implied. */
   icon?: IconProp
   onClick?: () => void
+  loading?: boolean
+  disabled?: boolean
 }
 
 export interface PageToolbarProps {
   title: JSX.Element
+  /** Semantic level of the title. @default 1 */
+  headingLevel?: 1 | 2 | 3 | 4
   /** Options for the ellipsis menu beside the title. Omitted → no menu. */
   menu?: PageToolbarAction[]
+  /** Secondary actions, before the primary. */
+  secondary?: PageToolbarAction[]
   /** The primary action — the one thing this screen is for. */
   action?: PageToolbarAction
   /** Anything else on the trailing edge, after the primary action. */
@@ -36,35 +43,77 @@ export function PageToolbar(props: PageToolbarProps): JSX.Element {
       class={`flex min-h-12 shrink-0 items-center justify-between gap-control-gap border-b border-outline-gray-1 bg-surface-base px-page-gutter-compact sm:px-page-gutter ${props.class ?? ''}`}
     >
       <div class="flex min-w-0 items-center gap-1">
-        <span class="truncate text-heading text-ink-gray-9">{props.title}</span>
+        <Dynamic
+          component={`h${props.headingLevel ?? 1}`}
+          class={cn(
+            'truncate text-ink-gray-9',
+            (props.headingLevel ?? 1) === 1 ? 'text-heading' : 'text-section',
+          )}
+        >
+          {props.title}
+        </Dynamic>
         <Show when={props.menu}>
           {(menu) => (
-            <Dropdown
-              options={menu().map((entry) => ({
-                label: entry.label,
-                value: entry.label,
-                ...(typeof entry.icon === 'string' ? { icon: entry.icon } : {}),
-              }))}
+            <Menu.Root
               onSelect={(value) =>
                 menu()
                   .find((entry) => entry.label === value)
                   ?.onClick?.()
               }
             >
-              <span class="sr-only">Page actions</span>
-            </Dropdown>
+              <Menu.Trigger
+                aria-label="Page actions"
+                class="grid size-7 shrink-0 place-items-center rounded-3 text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring"
+              >
+                <Icon icon="lucide-ellipsis" class="size-4" />
+              </Menu.Trigger>
+              <Menu.Content>
+                <For each={menu()}>
+                  {(entry) => (
+                    <Menu.Item value={entry.label}>
+                      <Show when={entry.icon}>
+                        {(icon) => (
+                          <Icon
+                            icon={icon()}
+                            class="size-4 shrink-0 text-ink-gray-6"
+                          />
+                        )}
+                      </Show>
+                      <span>{entry.label}</span>
+                    </Menu.Item>
+                  )}
+                </For>
+              </Menu.Content>
+            </Menu.Root>
           )}
         </Show>
       </div>
 
       <div class="flex shrink-0 items-center gap-control-gap">
         {props.children}
+        <Show when={props.secondary}>
+          <For each={props.secondary}>
+            {(action) => (
+              <Button
+                variant="outline"
+                iconLeft={action.icon}
+                loading={action.loading}
+                disabled={action.disabled}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Button>
+            )}
+          </For>
+        </Show>
         <Show when={props.action}>
           {(action) => (
             <Button
               variant="solid"
               theme="blue"
-              iconLeft={action().icon ?? 'lucide-plus'}
+              iconLeft={action().icon}
+              loading={action().loading}
+              disabled={action().disabled}
               onClick={action().onClick}
             >
               {action().label}

package/src/organisms/Section/Section.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@solidjs/testing-library'
+import { describe, expect, it } from 'vitest'
+import { Section } from './Section'
+
+describe('Section', () => {
+  it('renders a default H2 and the four region slots', () => {
+    render(() => (
+      <Section
+        title="Pending expenses"
+        description="Waiting for approval"
+        actions={<button type="button">Export</button>}
+        toolbar={<div>Filters</div>}
+        footer={<span>18 records</span>}
+      >
+        <div>Body</div>
+      </Section>
+    ))
+    expect(screen.getByRole('heading', { level: 2 }).textContent).toBe(
+      'Pending expenses',
+    )
+    expect(screen.getByText('Waiting for approval')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Export' })).toBeTruthy()
+    expect(screen.getByText('Filters')).toBeTruthy()
+    expect(screen.getByText('Body')).toBeTruthy()
+    expect(screen.getByText('18 records')).toBeTruthy()
+  })
+
+  it('honours the heading level and compact density', () => {
+    const { container } = render(() => (
+      <Section title="Ledger" headingLevel={3} density="compact">
+        <div />
+      </Section>
+    ))
+    expect(screen.getByRole('heading', { level: 3 }).textContent).toBe('Ledger')
+    expect(
+      container
+        .querySelector('[data-slot="section"]')
+        ?.getAttribute('data-density'),
+    ).toBe('compact')
+  })
+})

package/src/organisms/Section/Section.tsx

@@ -0,0 +1,108 @@
+import { cn } from '@talelk/newui-atoms'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+export type SectionHeadingLevel = 1 | 2 | 3 | 4
+
+export interface SectionProps {
+  title?: JSX.Element
+  description?: JSX.Element
+  /** Page or section actions, rendered opposite the title. */
+  actions?: JSX.Element
+  /** Controls that change the data, between the header and the body. */
+  toolbar?: JSX.Element
+  /** Pagination, totals or selection feedback, under a rule. */
+  footer?: JSX.Element
+  /** @default 2 */
+  headingLevel?: SectionHeadingLevel
+  /** Explicit id for the rendered heading. Defaults to `<id>-title`. */
+  headingId?: string
+  /** Accessible name when the section has no visible title. */
+  label?: string
+  /** Id of the element that names the region; beats `label`/the heading id. */
+  labelledBy?: string
+  /** Surface treatment. @default 'plain' */
+  surface?: 'plain' | 'card' | 'inset'
+  /** @default 'comfortable' */
+  density?: 'comfortable' | 'compact'
+  id?: string
+  class?: string
+  children: JSX.Element
+}
+
+const HEADING: Record<SectionHeadingLevel, string> = {
+  1: 'text-heading',
+  2: 'text-section',
+  3: 'text-base-medium',
+  4: 'text-interface font-medium',
+}
+
+/**
+ * One page-region anatomy: header, optional toolbar, body, optional footer.
+ *
+ * Data organisms should not each invent their own title row or footer rule.
+ * `Section` owns the region; the organism owns the data surface inside it.
+ */
+export function Section(props: SectionProps): JSX.Element {
+  const surface = () => props.surface ?? 'plain'
+  const density = () => props.density ?? 'comfortable'
+  const hasHeader = () =>
+    Boolean(props.title || props.description || props.actions)
+  const headingId = () =>
+    props.headingId ?? (props.id ? `${props.id}-title` : undefined)
+  const labelledBy = () =>
+    props.labelledBy ?? (props.title ? headingId() : undefined)
+  return (
+    <section
+      id={props.id}
+      aria-label={props.label}
+      aria-labelledby={labelledBy()}
+      data-slot="section"
+      data-surface={surface()}
+      data-density={density()}
+      class={cn(
+        'flex min-w-0 flex-col',
+        density() === 'compact' ? 'gap-2' : 'gap-3',
+        surface() === 'card' &&
+          'rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-card-pad',
+        surface() === 'inset' && 'rounded-card bg-surface-gray-1 p-card-pad',
+        props.class,
+      )}
+    >
+      <Show when={hasHeader()}>
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div class="flex min-w-0 flex-col gap-1">
+            <Show when={props.title}>
+              <Dynamic
+                component={`h${props.headingLevel ?? 2}`}
+                id={headingId()}
+                class={cn(
+                  'min-w-0 text-ink-gray-9',
+                  HEADING[props.headingLevel ?? 2],
+                )}
+              >
+                {props.title}
+              </Dynamic>
+            </Show>
+            <Show when={props.description}>
+              <p class="max-w-[56ch] text-caption text-ink-gray-7">
+                {props.description}
+              </p>
+            </Show>
+          </div>
+          <Show when={props.actions}>
+            <div class="flex shrink-0 flex-wrap items-center gap-2">
+              {props.actions}
+            </div>
+          </Show>
+        </div>
+      </Show>
+      <Show when={props.toolbar}>{props.toolbar}</Show>
+      <div class="min-w-0">{props.children}</div>
+      <Show when={props.footer}>
+        <div class="border-t border-outline-gray-1 pt-3">{props.footer}</div>
+      </Show>
+    </section>
+  )
+}

package/src/organisms/Section/index.ts

@@ -0,0 +1 @@
+export { Section, type SectionHeadingLevel, type SectionProps } from './Section'

package/src/organisms/SelectionBar/SelectionBar.test.tsx

@@ -0,0 +1,35 @@
+import { render, screen } from '@solidjs/testing-library'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+import { SelectionBar } from './SelectionBar'
+
+describe('SelectionBar', () => {
+  it('renders nothing without a selection', () => {
+    const { container } = render(() => <SelectionBar count={0} />)
+    expect(container.querySelector('[data-slot="selection-bar"]')).toBeNull()
+  })
+
+  it('shows the count, action and clear control', async () => {
+    const onAction = vi.fn()
+    const onClear = vi.fn()
+    render(() => (
+      <SelectionBar
+        count={3}
+        summary="$14,650"
+        primary={{ label: 'Approve expenses', onClick: onAction }}
+        onClear={onClear}
+      />
+    ))
+    expect(
+      screen.getByRole('region', { name: 'Selection actions' }),
+    ).toBeTruthy()
+    expect(screen.getByText('3 selected')).toBeTruthy()
+    expect(screen.getByText('$14,650')).toBeTruthy()
+    await userEvent.click(
+      screen.getByRole('button', { name: 'Approve expenses' }),
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Clear' }))
+    expect(onAction).toHaveBeenCalled()
+    expect(onClear).toHaveBeenCalled()
+  })
+})

package/src/organisms/SelectionBar/SelectionBar.tsx

@@ -0,0 +1,84 @@
+import { Button, cn, type IconProp } from '@talelk/newui-atoms'
+import { type JSX, Show } from 'solid-js'
+
+export interface SelectionPrimaryAction {
+  label: string
+  onClick: () => void
+  icon?: IconProp
+  disabled?: boolean
+}
+
+export interface SelectionBarProps {
+  count: number
+  /** Context beside the count, e.g. a total or a scope. */
+  summary?: JSX.Element
+  primary?: SelectionPrimaryAction
+  secondary?: JSX.Element
+  onClear?: () => void
+  /** `sticky` fixes the bar to the bottom below `sm`. @default 'inline' */
+  placement?: 'inline' | 'sticky'
+  class?: string
+}
+
+/**
+ * The one bulk-action surface for a data region.
+ *
+ * Inline on desktop, fixed above the bottom edge on a phone, so selecting a
+ * row far down a card list never requires scrolling back to a toolbar.
+ */
+export function SelectionBar(props: SelectionBarProps): JSX.Element {
+  return (
+    <Show when={props.count > 0}>
+      <section
+        aria-label="Selection actions"
+        data-slot="selection-bar"
+        data-placement={props.placement ?? 'inline'}
+        class={cn(
+          'flex flex-wrap items-center justify-between gap-2 rounded-card border border-outline-gray-1 bg-surface-elevation-1 p-2 shadow-sm',
+          props.placement === 'sticky' &&
+            'max-sm:fixed max-sm:inset-x-4 max-sm:bottom-4 max-sm:z-top max-sm:shadow-lg',
+          props.class,
+        )}
+      >
+        <div class="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-0.5">
+          <span class="text-interface font-medium text-ink-gray-9">
+            {props.count} selected
+          </span>
+          <Show when={props.summary}>
+            <span class="text-caption tabular-nums text-ink-gray-7">
+              {props.summary}
+            </span>
+          </Show>
+        </div>
+        <div class="flex flex-wrap items-center gap-2">
+          {props.secondary}
+          <Show when={props.onClear}>
+            <Button
+              variant="ghost"
+              size="sm"
+              class="max-sm:h-10"
+              onClick={props.onClear}
+            >
+              Clear
+            </Button>
+          </Show>
+          <Show when={props.primary}>
+            {(primary) => (
+              <Button
+                variant="solid"
+                theme="blue"
+                size="sm"
+                class="max-sm:h-10"
+                iconLeft={primary().icon}
+                disabled={primary().disabled}
+                onClick={primary().onClick}
+              >
+                {primary().label}
+              </Button>
+            )}
+          </Show>
+        </div>
+      </section>
+    </Show>
+  )
+}

package/src/organisms/SelectionBar/index.ts

@@ -0,0 +1,5 @@
+export {
+  SelectionBar,
+  type SelectionBarProps,
+  type SelectionPrimaryAction,
+} from './SelectionBar'

package/src/organisms/SettingsDialog/SettingsDialog.tsx

@@ -97,7 +97,8 @@ const Root: ParentComponent<SettingsDialogProps> = (props) => {
         <Dialog.Content
           class={cn(
             'flex h-[100dvh] min-h-0 w-screen max-w-none flex-col overflow-hidden rounded-none p-0',
-            'sm:h-[min(860px,calc(100vh-8rem))] sm:max-h-[calc(100vh_-_8rem)] sm:min-h-[560px] sm:w-auto sm:max-w-4xl sm:flex-row sm:rounded-overlay',
+            'max-sm:fixed max-sm:inset-0',
+            'sm:h-[min(860px,calc(100vh-8rem))] sm:max-h-[calc(100vh_-_8rem)] sm:min-h-[560px] sm:w-[min(56rem,calc(100vw-2rem))] sm:max-w-4xl sm:flex-row sm:rounded-overlay',
             local.class,
           )}
         >
@@ -108,6 +109,10 @@ const Root: ParentComponent<SettingsDialogProps> = (props) => {
             {local.description ??
               'Manage your settings across the panels in this dialog.'}
           </Dialog.Description>
+          <Dialog.Close class="absolute end-2 top-2 z-raised grid size-10 place-items-center rounded-control text-ink-gray-6 transition-colors hover:bg-surface-gray-2 hover:text-ink-gray-9 focus-visible:focus-ring sm:size-8">
+            <span class="sr-only">Close settings</span>
+            <span class="lucide-x size-4" aria-hidden="true" />
+          </Dialog.Close>
           {local.children}
         </Dialog.Content>
       </SettingsDialogContext.Provider>
@@ -116,6 +121,8 @@ const Root: ParentComponent<SettingsDialogProps> = (props) => {
 }
 
 export interface SettingsSidebarProps {
+  /** Accessible name for the vertical tablist. @default 'Settings' */
+  label?: string
   /** Merged into the sidebar. */
   class?: string
   children?: JSX.Element
@@ -128,11 +135,12 @@ export interface SettingsSidebarProps {
 const Sidebar: ParentComponent<SettingsSidebarProps> = (props) => (
   <div
     role="tablist"
+    aria-label={props.label ?? 'Settings'}
     aria-orientation="vertical"
     data-slot="settings-sidebar"
     class={cn(
       'flex max-h-[38vh] w-full shrink-0 flex-col gap-4 overflow-y-auto border-b border-outline-gray-1 bg-surface-sidebar p-2',
-      'sm:max-h-none sm:w-[220px] sm:border-b-0 sm:border-r',
+      'max-sm:pe-12 sm:max-h-none sm:w-[220px] sm:border-b-0 sm:border-e',
       props.class,
     )}
   >
@@ -241,8 +249,9 @@ const NavItem: ParentComponent<SettingsNavItemProps> = (props) => {
       class={cn(
         'flex min-h-8 w-full items-center gap-2 rounded-control px-2 py-1 text-start text-interface text-ink-gray-7 transition-colors motion-reduce:transition-none',
         'focus-visible:focus-ring',
+        'min-h-10 sm:min-h-8',
         'data-[state=inactive]:hover:bg-surface-gray-2',
-        'data-[state=active]:bg-surface-elevation-3 data-[state=active]:shadow-sm',
+        'data-[state=active]:bg-surface-elevation-3 data-[state=active]:text-ink-gray-9 data-[state=active]:shadow-sm',
         'disabled:cursor-not-allowed disabled:text-ink-gray-4',
         local.class,
       )}
@@ -377,7 +386,7 @@ export interface SettingsHeaderProps {
 const Header: ParentComponent<SettingsHeaderProps> = (props) => (
   <div
     data-slot="settings-header"
-    class={cn('shrink-0 px-4 pt-6 sm:px-6', props.class)}
+    class={cn('shrink-0 ps-4 pe-12 pt-6 sm:ps-6', props.class)}
   >
     <Show
       when={props.children}

package/src/organisms/Sidebar/Sidebar.tsx

@@ -33,11 +33,14 @@ const COLLAPSE_QUERY = '(max-width: 639px)'
 interface SidebarContextValue {
   collapsed: Accessor<boolean>
   toggle: () => void
+  /** Whether `⌘B`/`Ctrl+B` is bound here, so chrome only advertises a real hint. */
+  shortcut: Accessor<boolean>
 }
 
 const SidebarContext = createContext<SidebarContextValue>({
   collapsed: () => false,
   toggle: () => {},
+  shortcut: () => false,
 })
 
 /** Collapsed state + toggle, shared with every part inside a `Sidebar`. */
@@ -83,6 +86,7 @@ export const Sidebar: ParentComponent<SidebarProps> = (props) => {
   const [internal, setInternal] = createSignal<boolean | null>(null)
 
   const collapsible = () => local.collapsible ?? true
+  const shortcut = () => local.shortcut !== false && collapsible()
   const shouldCollapse = () =>
     collapsible() &&
     (local.collapsed !== undefined
@@ -96,7 +100,7 @@ export const Sidebar: ParentComponent<SidebarProps> = (props) => {
   }
 
   onMount(() => {
-    if (local.shortcut === false || !collapsible()) return
+    if (!shortcut()) return
     const onKey = (event: KeyboardEvent) => {
       if (event.key.toLowerCase() !== 'b') return
       if (!event.metaKey && !event.ctrlKey) return
@@ -108,7 +112,9 @@ export const Sidebar: ParentComponent<SidebarProps> = (props) => {
   })
 
   return (
-    <SidebarContext.Provider value={{ collapsed: shouldCollapse, toggle }}>
+    <SidebarContext.Provider
+      value={{ collapsed: shouldCollapse, toggle, shortcut }}
+    >
       <nav
         data-slot="sidebar"
         data-state={shouldCollapse() ? 'collapsed' : 'expanded'}
@@ -162,7 +168,7 @@ export const SidebarHeader: ParentComponent<SidebarHeaderProps> = (props) => {
     <div
       data-slot="sidebar-header"
       class={cn(
-        'flex h-12 shrink-0 items-center justify-between gap-2 px-1',
+        'flex h-12 shrink-0 items-center justify-between gap-2 px-2',
         local.class,
       )}
     >
@@ -235,11 +241,11 @@ export const SidebarLabel: ParentComponent<SidebarLabelProps> = (props) => {
   return (
     <div
       data-slot="sidebar-label"
-      class={cn('relative flex h-7 items-center pl-2', local.class)}
+      class={cn('relative flex h-8 items-center px-2 pt-2', local.class)}
     >
       <div
         class={cn(
-          'text-base leading-tighter text-ink-gray-7',
+          'text-xs font-medium text-ink-gray-6',
           collapsed() ? 'w-0 overflow-hidden opacity-0' : 'w-auto opacity-100',
         )}
       >
@@ -319,9 +325,9 @@ export const SidebarItem: ParentComponent<SidebarItemProps> = (props) => {
 
   const rowClasses = () =>
     cn(
-      'relative flex h-8 w-full items-center rounded-control text-interface text-ink-gray-6',
+      'group relative flex h-8 w-full items-center rounded-control text-interface text-ink-gray-7',
       'transition-colors hover:bg-surface-gray-2 motion-reduce:transition-none',
-      'data-[active]:bg-surface-blue-1 data-[active]:text-ink-blue-8',
+      'data-[active]:bg-surface-blue-1 data-[active]:font-medium data-[active]:text-ink-blue-8',
       local.class,
     )
   const innerClasses = () =>
@@ -439,7 +445,7 @@ export function SidebarSearch(props: SidebarSearchProps): JSX.Element {
 }
 
 export interface SidebarTriggerProps {
-  /** Tooltip copy. Defaults to Collapse/Expand, per state. */
+  /** Tooltip and accessible copy. Defaults to Collapse sidebar/Expand sidebar. */
   label?: string
   class?: string
 }
@@ -453,9 +459,10 @@ export interface SidebarTriggerProps {
  * `SidebarItem` at the bottom of the list); this is the compact one.
  */
 export function SidebarTrigger(props: SidebarTriggerProps): JSX.Element {
-  const { collapsed, toggle } = useSidebar()
+  const { collapsed, toggle, shortcut } = useSidebar()
   const text = () =>
     props.label ?? (collapsed() ? 'Expand sidebar' : 'Collapse sidebar')
+  const hint = () => (shortcut() ? `${text()} · ⌘B` : text())
 
   return (
     <TooltipRoot placement="bottom" openDelay={300}>
@@ -478,7 +485,7 @@ export function SidebarTrigger(props: SidebarTriggerProps): JSX.Element {
           )}
         />
       </TooltipTrigger>
-      <TooltipContent>{`${text()} · ⌘B`}</TooltipContent>
+      <TooltipContent>{hint()}</TooltipContent>
     </TooltipRoot>
   )
 }

package/src/organisms/StatGrid/StatGrid.test.tsx

@@ -77,7 +77,19 @@ describe('StatGrid', () => {
     const className = container.querySelector(
       '[data-slot="stat-grid"]',
     )?.className
-    expect(className).toContain('sm:grid-cols-2')
+    expect(className).toContain('min-[360px]:grid-cols-2')
     expect(className).toContain('xl:grid-cols-3')
   })
+
+  it('compact cards use the tight padding and omit the icon tile', () => {
+    const { container } = render(() => (
+      <StatGrid
+        compact
+        stats={[{ label: 'One', value: '1', icon: 'lucide-house' }]}
+      />
+    ))
+    const card = container.querySelector('[data-slot="stat"]')
+    expect(card?.className).toContain('p-2.5')
+    expect(card?.querySelector('.bg-surface-gray-2')).toBeNull()
+  })
 })