@fabrika/ui 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@fabrika/ui",
-	"version": "0.4.0",
+	"version": "0.4.2",
 	"type": "module",
 	"description": "React component kit for the paved road: accessible admin components styled through CSS custom properties.",
 	"license": "MIT",

package/src/AppShell.tsx

@@ -15,14 +15,19 @@ export interface AppShellProps {
 	/** The signed-in caller, shown at the end of the top bar. */
 	readonly user?: ReactNode
 	readonly actions?: ReactNode
+	/** The top bar: shown when there is a `user` or `actions`, unless `false`. */
+	readonly topBar?: boolean
+	/** The current navigation item: a soft accent (the default), or `filled` with the accent and an inverted count. */
+	readonly navStyle?: 'soft' | 'filled'
 	readonly children: ReactNode
 	readonly navLabel?: string
 	readonly className?: string
 }
 
-export function AppShell({ brand, nav, user, actions, children, navLabel = 'Main', className }: AppShellProps) {
+export function AppShell({ brand, nav, user, actions, topBar, navStyle = 'soft', children, navLabel = 'Main', className }: AppShellProps) {
+	const showTopBar = topBar !== false && (user !== undefined || actions !== undefined)
 	return (
-		<div className={classNames('fui-app', 'fui-shell', className)}>
+		<div className={classNames('fui-app', 'fui-shell', navStyle === 'filled' && 'fui-shell--nav-filled', className)}>
 			<div className="fui-shell__sidebar">
 				<div className="fui-shell__brand">{brand}</div>
 				<nav className="fui-shell__nav" aria-label={navLabel}>
@@ -43,10 +48,12 @@ export function AppShell({ brand, nav, user, actions, children, navLabel = 'Main
 				</nav>
 			</div>
 			<div className="fui-shell__body">
-				<header className="fui-shell__topbar">
-					<div className="fui-shell__actions">{actions}</div>
-					{user !== undefined && <div className="fui-shell__user">{user}</div>}
-				</header>
+				{showTopBar && (
+					<header className="fui-shell__topbar">
+						<div className="fui-shell__actions">{actions}</div>
+						{user !== undefined && <div className="fui-shell__user">{user}</div>}
+					</header>
+				)}
 				<main className="fui-shell__main">{children}</main>
 			</div>
 		</div>

package/src/DataTable.tsx

@@ -10,8 +10,14 @@ export interface Column<Row> {
 	readonly align?: 'start' | 'end'
 	/** Takes the width the other columns leave; the remaining columns shrink to their content. */
 	readonly grow?: boolean
+	/** A width of the column scale (`--fui-column-width-<size>`), on its head and its cells. */
+	readonly width?: ColumnWidth
+	/** Its cells wrap their text instead of keeping it on one line. */
+	readonly wrap?: boolean
 }
 
+export type ColumnWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
 export interface TableSelection {
 	readonly selected: ReadonlySet<string>
 	readonly onChange: (next: ReadonlySet<string>) => void
@@ -99,7 +105,13 @@ export function DataTable<Row>({
 	}
 
 	const cellClassName = (column: Column<Row>) =>
-		classNames('fui-table__cell', column.align === 'end' && 'fui-table__cell--end', column.grow && 'fui-table__cell--grow')
+		classNames(
+			'fui-table__cell',
+			column.align === 'end' && 'fui-table__cell--end',
+			column.grow && 'fui-table__cell--grow',
+			column.width !== undefined && `fui-table__cell--width-${column.width}`,
+			column.wrap && 'fui-table__cell--wrap',
+		)
 
 	return (
 		<div className={classNames('fui-data-table', className)}>

package/src/StatusPill.tsx

@@ -4,14 +4,16 @@ import type { Tone } from './tone'
 
 export interface StatusPillProps {
 	readonly tone?: Tone
+	/** The tone's dot before the text; `false` leaves it out. */
+	readonly dot?: boolean
 	readonly children: ReactNode
 	readonly className?: string
 }
 
-export function StatusPill({ tone = 'neutral', children, className }: StatusPillProps) {
+export function StatusPill({ tone = 'neutral', dot = true, children, className }: StatusPillProps) {
 	return (
 		<span className={classNames('fui-pill', `fui-pill--${tone}`, className)}>
-			<span className="fui-pill__dot" aria-hidden="true" />
+			{dot && <span className="fui-pill__dot" aria-hidden="true" />}
 			{children}
 		</span>
 	)

package/src/Tabs.tsx

@@ -13,6 +13,8 @@ export interface TabsProps<K extends string> {
 	readonly items: readonly TabItem<K>[]
 	readonly active: K
 	readonly onChange: (key: K) => void
+	/** `underline` (the default) marks the active tab by a line under it; `boxed` puts each tab in a box, its count after a dot. */
+	readonly variant?: 'underline' | 'boxed'
 	readonly className?: string
 }
 
@@ -32,7 +34,7 @@ function targetIndex(key: string, current: number, length: number): number | und
 }
 
 /** A WAI-ARIA tab list with automatic activation: moving focus with the keyboard also selects. */
-export function Tabs<K extends string>({ label, items, active, onChange, className }: TabsProps<K>) {
+export function Tabs<K extends string>({ label, items, active, onChange, variant = 'underline', className }: TabsProps<K>) {
 	const tabs = useRef(new Map<K, HTMLButtonElement>())
 	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
 		const current = items.findIndex((item) => tabs.current.get(item.key) === event.target)
@@ -45,7 +47,12 @@ export function Tabs<K extends string>({ label, items, active, onChange, classNa
 		if (item.key !== active) onChange(item.key)
 	}
 	return (
-		<div className={classNames('fui-tabs', className)} role="tablist" aria-label={label} onKeyDown={handleKeyDown}>
+		<div
+			className={classNames('fui-tabs', variant === 'boxed' && 'fui-tabs--boxed', className)}
+			role="tablist"
+			aria-label={label}
+			onKeyDown={handleKeyDown}
+		>
 			{items.map((item) => {
 				const selected = item.key === active
 				return (

package/src/components.css

@@ -114,6 +114,20 @@
 	background: var(--fui-accent-soft);
 }
 
+.fui-app .fui-shell--nav-filled .fui-shell__nav-link--active,
+.fui-app .fui-shell--nav-filled .fui-shell__nav-link--active:hover,
+.fui-app.fui-shell--nav-filled .fui-shell__nav-link--active,
+.fui-app.fui-shell--nav-filled .fui-shell__nav-link--active:hover {
+	color: var(--fui-accent-contrast);
+	background: var(--fui-accent);
+}
+
+.fui-shell--nav-filled .fui-shell__nav-link--active .fui-count-badge {
+	color: var(--fui-accent);
+	background: var(--fui-accent-contrast);
+	border-color: var(--fui-accent-contrast);
+}
+
 .fui-shell__body {
 	display: flex;
 	flex-direction: column;
@@ -146,7 +160,7 @@
 .fui-shell__main {
 	width: 100%;
 	max-width: var(--fui-content-max-width);
-	padding: var(--fui-space-6);
+	padding: var(--fui-main-padding);
 }
 
 @media (max-width: 768px) {
@@ -177,7 +191,7 @@
 	}
 
 	.fui-shell__main {
-		padding: var(--fui-space-4);
+		padding: var(--fui-main-padding-narrow);
 	}
 }
 
@@ -278,6 +292,40 @@
 	border-bottom-color: var(--fui-accent);
 }
 
+/* Boxed tabs: each tab framed, the active one filled; the count follows a dot instead of a badge. */
+.fui-tabs--boxed {
+	gap: var(--fui-space-2);
+	border-bottom: 0;
+}
+
+.fui-tabs--boxed .fui-tabs__tab {
+	margin-bottom: 0;
+	background: var(--fui-surface);
+	border: var(--fui-border-width) solid var(--fui-border);
+	border-radius: var(--fui-radius-md);
+}
+
+.fui-tabs--boxed .fui-tabs__tab--active {
+	color: var(--fui-accent-contrast);
+	background: var(--fui-accent);
+	border-color: var(--fui-accent);
+}
+
+.fui-tabs--boxed .fui-count-badge {
+	min-width: 0;
+	padding: 0;
+	font-size: inherit;
+	font-weight: inherit;
+	color: inherit;
+	background: none;
+	border: 0;
+}
+
+.fui-tabs--boxed .fui-count-badge::before {
+	content: '·' / '';
+	margin-right: var(--fui-space-2);
+}
+
 /* FilterBar */
 
 .fui-filter-bar {
@@ -331,9 +379,9 @@
 }
 
 .fui-field__label {
-	font-size: var(--fui-text-sm);
-	font-weight: var(--fui-weight-medium);
-	color: var(--fui-text);
+	font-size: var(--fui-label-size);
+	font-weight: var(--fui-label-weight);
+	color: var(--fui-label-color);
 }
 
 .fui-field__required {
@@ -713,10 +761,12 @@
 	z-index: var(--fui-z-sticky);
 	height: var(--fui-row-height);
 	padding: 0 var(--fui-space-3);
-	font-size: var(--fui-text-sm);
-	font-weight: var(--fui-weight-medium);
-	color: var(--fui-text-muted);
+	font-size: var(--fui-table-head-size);
+	font-weight: var(--fui-table-head-weight);
+	color: var(--fui-table-head-color);
 	text-align: left;
+	text-transform: var(--fui-table-head-transform);
+	letter-spacing: var(--fui-table-head-tracking);
 	white-space: nowrap;
 	background: var(--fui-surface-muted);
 	border-bottom: var(--fui-border-width) solid var(--fui-border);
@@ -745,6 +795,31 @@
 	white-space: normal;
 }
 
+.fui-table__cell--wrap {
+	white-space: normal;
+	overflow-wrap: anywhere;
+}
+
+.fui-table__cell--width-xs {
+	width: var(--fui-column-width-xs);
+}
+
+.fui-table__cell--width-sm {
+	width: var(--fui-column-width-sm);
+}
+
+.fui-table__cell--width-md {
+	width: var(--fui-column-width-md);
+}
+
+.fui-table__cell--width-lg {
+	width: var(--fui-column-width-lg);
+}
+
+.fui-table__cell--width-xl {
+	width: var(--fui-column-width-xl);
+}
+
 .fui-table__select {
 	width: 1px;
 	padding-right: 0;

package/src/index.ts

@@ -4,6 +4,7 @@ export { Card, type CardProps, Section, type SectionProps } from './Card'
 export { Columns, type ColumnsProps, SidePanel, type SidePanelProps } from './Columns'
 export {
 	type Column,
+	type ColumnWidth,
 	DataTable,
 	type DataTableProps,
 	type LoadMore,

package/src/theme.css

@@ -69,6 +69,25 @@
 
 	--fui-sidebar-width: 232px;
 	--fui-shell-min-height: 100vh;
+	/* The main region's padding: wide screens, then below the breakpoint. */
+	--fui-main-padding: var(--fui-space-6);
+	--fui-main-padding-narrow: var(--fui-space-4);
+	/* A field's label. */
+	--fui-label-size: var(--fui-text-sm);
+	--fui-label-weight: var(--fui-weight-medium);
+	--fui-label-color: var(--fui-text);
+	/* A table's column heads: `uppercase` and a tracking such as 0.04em give small capitals. */
+	--fui-table-head-size: var(--fui-text-sm);
+	--fui-table-head-weight: var(--fui-weight-medium);
+	--fui-table-head-color: var(--fui-text-muted);
+	--fui-table-head-transform: none;
+	--fui-table-head-tracking: normal;
+	/* The widths a DataTable column takes by its `width`. */
+	--fui-column-width-xs: 64px;
+	--fui-column-width-sm: 120px;
+	--fui-column-width-md: 180px;
+	--fui-column-width-lg: 260px;
+	--fui-column-width-xl: 360px;
 	--fui-side-panel-width: 320px;
 	--fui-content-max-width: 1280px;
 	--fui-dialog-width: 480px;