@polderlabs/bizar 6.3.0 → 7.0.0

package/bizar-dash/src/web/ui/navigation/NavLink.tsx

@@ -0,0 +1,93 @@
+/*
+ * NavLink.tsx — Single sidebar nav item (Wave 2B).
+ *
+ * Renders as <a>, <button> or <div> depending on whether the caller wired
+ * `href`, `onClick`, or neither. This matches the three affordances callers
+ * actually need: a real navigation link, a click-triggered action (e.g. open
+ * a modal) and a decorative marker (sub-item shown but not interactive).
+ * The active row gets a 2px accent left-border + subtle background tint.
+ *
+ * The `to` prop is reserved for future client-side router wiring
+ * (e.g. react-router) — left on the prop type so call-sites can pass
+ * `to={...}` without TypeScript errors when the router is introduced. The
+ * `_ = to` assignment immediately below is the no-op placeholder that
+ * silences `noUnusedParameters` without touching the runtime.
+ */
+
+import type { LucideIcon } from 'lucide-react';
+import { cx } from '../utils/cx';
+
+export type NavLinkProps = {
+  href?: string;
+  to?: string;
+  icon?: LucideIcon;
+  label: string;
+  badge?: string | number;
+  active?: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function NavLink({
+  href,
+  to,
+  icon: Icon,
+  label,
+  badge,
+  active = false,
+  onClick,
+  disabled = false,
+  className,
+}: NavLinkProps): React.JSX.Element {
+  const _ = to; // reserved for future router; see file header.
+  void _;
+  const classes = cx(
+    'bd-nav-link',
+    active && 'bd-nav-link--active',
+    disabled && 'bd-nav-link--disabled',
+    className,
+  );
+
+  const content = (
+    <>
+      {Icon && (
+        <span className="bd-nav-link__icon" aria-hidden="true">
+          <Icon size={16} />
+        </span>
+      )}
+      <span className="bd-nav-link__label">{label}</span>
+      {badge !== undefined && badge !== null && (
+        <span className="bd-nav-link__badge">{badge}</span>
+      )}
+    </>
+  );
+
+  if (href !== undefined) {
+    return (
+      <a
+        href={disabled ? undefined : href}
+        className={classes}
+        aria-current={active ? 'page' : undefined}
+        onClick={onClick}
+        aria-disabled={disabled || undefined}
+      >
+        {content}
+      </a>
+    );
+  }
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        className={classes}
+        onClick={onClick}
+        disabled={disabled}
+        aria-current={active ? 'page' : undefined}
+      >
+        {content}
+      </button>
+    );
+  }
+  return <div className={classes}>{content}</div>;
+}

package/bizar-dash/src/web/ui/navigation/index.ts

@@ -0,0 +1,17 @@
+/*
+ * index.ts — Barrel for the Navigation component family (Wave 2B).
+ *
+ * Imports navigation.css as a side-effect so consumers only need a single
+ * `import { NavLink } from '../ui/navigation'` to ship the styles.
+ */
+
+import './navigation.css';
+
+export { NavLink, type NavLinkProps } from './NavLink';
+export { NavGroup, type NavGroupProps } from './NavGroup';
+export {
+  CommandPalette,
+  type CommandPaletteProps,
+  type CommandPaletteItem,
+  type CommandPaletteItemType,
+} from './CommandPalette';

package/bizar-dash/src/web/ui/navigation/navigation.css

@@ -0,0 +1,343 @@
+/*
+ * navigation.css — Styles for the Navigation component family (Wave 2B).
+ *
+ * One file for NavLink, NavGroup and CommandPalette. Tokens come from
+ * ui/styles/tokens.css — every colour, spacing, radius and shadow below is
+ * a `var(--...)` reference. Sidebar nav uses a subtle accent left-border to
+ * signal the active route (matches Supabase's nav visual language).
+ */
+
+/* ============ NavLink ============ */
+
+.bd-nav-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-base);
+  font-weight: var(--weight-medium);
+  color: var(--text-secondary);
+  background: transparent;
+  border: 0;
+  border-left: 2px solid transparent;
+  border-radius: 0;
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
+  width: 100%;
+  text-align: left;
+  transition: background-color var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out);
+}
+
+.bd-nav-link:hover:not(.bd-nav-link--disabled):not(.bd-nav-link--active) {
+  background: var(--surface-overlay);
+  color: var(--text-primary);
+  text-decoration: none;
+}
+
+.bd-nav-link:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+.bd-nav-link--active {
+  background: var(--accent-subtle);
+  color: var(--text-primary);
+  border-left-color: var(--accent);
+  font-weight: var(--weight-semibold);
+}
+
+.bd-nav-link--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.bd-nav-link__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bd-nav-link__label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bd-nav-link__badge {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 18px;
+  padding: 0 var(--space-2);
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  font-variant-numeric: tabular-nums;
+  background: var(--surface-3);
+  color: var(--text-primary);
+  border-radius: var(--radius-full);
+}
+
+.bd-nav-link--active .bd-nav-link__badge {
+  background: var(--accent);
+  color: var(--accent-fg);
+}
+
+/* ============ NavGroup ============ */
+
+.bd-nav-group {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--space-3);
+}
+
+.bd-nav-group__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  color: var(--text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  background: transparent;
+  border: 0;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.bd-nav-group__header:hover {
+  color: var(--text-secondary);
+}
+
+.bd-nav-group__header:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+
+.bd-nav-group--non-collapsible .bd-nav-group__header {
+  cursor: default;
+  pointer-events: none;
+}
+
+.bd-nav-group__header-icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.bd-nav-group__label {
+  flex: 1;
+}
+
+.bd-nav-group__chevron {
+  flex-shrink: 0;
+  transition: transform var(--duration-fast) var(--ease-out);
+}
+
+.bd-nav-group--open .bd-nav-group__chevron {
+  transform: rotate(90deg);
+}
+
+.bd-nav-group__items {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height var(--duration-normal) var(--ease-out),
+    opacity var(--duration-fast) var(--ease-out);
+}
+
+.bd-nav-group--open .bd-nav-group__items {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+/* ============ CommandPalette ============ */
+
+.bd-cmdk-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.32);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+  z-index: var(--z-modal);
+  animation: bd-cmdk-fade-in var(--duration-fast) var(--ease-out);
+}
+
+.bd-cmdk {
+  width: min(640px, calc(100vw - var(--space-7)));
+  max-height: 70vh;
+  background: var(--surface-0);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-overlay);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--font-sans);
+  overflow: hidden;
+  animation: bd-cmdk-slide-in var(--duration-normal) var(--ease-out);
+}
+
+.bd-cmdk__input-wrap {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-tertiary);
+}
+
+.bd-cmdk__input {
+  flex: 1;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  font-size: var(--text-md);
+  color: var(--text-primary);
+  font-family: inherit;
+}
+
+.bd-cmdk__input::placeholder {
+  color: var(--text-tertiary);
+}
+
+.bd-cmdk__kbd-hint {
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--text-tertiary);
+  background: var(--surface-2);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-subtle);
+}
+
+.bd-cmdk__results {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-2) 0;
+}
+
+.bd-cmdk__empty {
+  padding: var(--space-7);
+  text-align: center;
+  color: var(--text-tertiary);
+  font-size: var(--text-sm);
+}
+
+.bd-cmdk__group {
+  padding: var(--space-2) 0;
+}
+
+.bd-cmdk__group-header {
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-tertiary);
+}
+
+.bd-cmdk__item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  cursor: pointer;
+  color: var(--text-primary);
+  background: transparent;
+  border: 0;
+  width: 100%;
+  text-align: left;
+  font-family: inherit;
+  font-size: var(--text-base);
+}
+
+.bd-cmdk__item:hover {
+  background: var(--surface-overlay);
+}
+
+.bd-cmdk__item--active {
+  background: var(--accent-subtle);
+  color: var(--text-primary);
+}
+
+.bd-cmdk__item-icon {
+  flex-shrink: 0;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+}
+
+.bd-cmdk__item--active .bd-cmdk__item-icon {
+  color: var(--accent);
+}
+
+.bd-cmdk__item-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bd-cmdk__item-label {
+  font-weight: var(--weight-medium);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bd-cmdk__item-description {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bd-cmdk__item-shortcut {
+  flex-shrink: 0;
+  display: inline-flex;
+  gap: 2px;
+}
+
+.bd-cmdk__item-shortcut kbd {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-2);
+  border: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+}
+
+.bd-cmdk__item--active .bd-cmdk__item-shortcut kbd {
+  background: var(--surface-0);
+  border-color: var(--accent);
+  color: var(--text-primary);
+}
+
+@keyframes bd-cmdk-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes bd-cmdk-slide-in {
+  from { transform: translateY(-8px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}

package/bizar-dash/src/web/ui/primitives/Box.tsx

@@ -0,0 +1,91 @@
+/*
+ * Box.tsx — polymorphic layout primitive (Wave 2A).
+ *
+ * The single source of truth for "I just want a div with padding / margin /
+ * background / border / radius / shadow / display / position." Renders one of
+ * eight semantic tags (div/section/article/aside/header/footer/main/nav) via
+ * the `as` prop and composes utility classes from primitives.css. Every prop
+ * maps 1:1 to a CSS class (e.g. `p={3}` → `box-p-3`), keeping styles in CSS
+ * and the component surface narrow. `0` is a valid value — use explicit
+ * `undefined` checks so falsy zero is not skipped.
+ */
+
+import { createElement, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type BoxAs =
+  | 'div'
+  | 'section'
+  | 'article'
+  | 'aside'
+  | 'header'
+  | 'footer'
+  | 'main'
+  | 'nav';
+export type BoxSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type BoxBg = '0' | '1' | '2' | '3' | 'overlay';
+export type BoxBorder = 'none' | 'subtle' | 'default' | 'strong';
+export type BoxRounded = 'none' | 'sm' | 'md' | 'lg' | 'full';
+export type BoxShadow = 'none' | 'hairline' | 'overlay' | 'tooltip';
+export type BoxDisplay = 'block' | 'flex' | 'inline-flex' | 'grid' | 'inline-block' | 'none';
+export type BoxPosition = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+
+export type BoxProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+  as?: BoxAs;
+  p?: BoxSpace;
+  px?: BoxSpace;
+  py?: BoxSpace;
+  m?: BoxSpace;
+  mx?: BoxSpace;
+  my?: BoxSpace;
+  bg?: BoxBg;
+  border?: BoxBorder;
+  rounded?: BoxRounded;
+  shadow?: BoxShadow;
+  display?: BoxDisplay;
+  position?: BoxPosition;
+  children?: ReactNode;
+};
+
+export function Box({
+  as = 'div',
+  p,
+  px,
+  py,
+  m,
+  mx,
+  my,
+  bg,
+  border,
+  rounded,
+  shadow,
+  display,
+  position,
+  className,
+  children,
+  ...rest
+}: BoxProps): React.JSX.Element {
+  return createElement(
+    as,
+    {
+      ...rest,
+      className: cx(
+        'box',
+        p !== undefined && `box-p-${p}`,
+        px !== undefined && `box-px-${px}`,
+        py !== undefined && `box-py-${py}`,
+        m !== undefined && `box-m-${m}`,
+        mx !== undefined && `box-mx-${mx}`,
+        my !== undefined && `box-my-${my}`,
+        bg && `box-bg-${bg}`,
+        border && `box-border-${border}`,
+        rounded && `box-rounded-${rounded}`,
+        shadow && `box-shadow-${shadow}`,
+        display && `box-d-${display}`,
+        position && `box-pos-${position}`,
+        className,
+      ),
+    },
+    children,
+  );
+}

package/bizar-dash/src/web/ui/primitives/Grid.tsx

@@ -0,0 +1,49 @@
+/*
+ * Grid.tsx — CSS grid primitive (Wave 2A).
+ *
+ * Use the explicit `cols` prop (1..12) for fixed-column layouts, or set
+ * `autoFit` to flow as many `minmax(180px, 1fr)` columns as fit the
+ * container — useful for responsive card walls. `gap` follows the same
+ * 0..8 spacing scale as Stack/Inline. `style` is reserved for free-form
+ * custom-property overrides (e.g. per-instance --cols-token) — no
+ * inline numerics.
+ */
+
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type GridSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+
+export type GridProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+  cols?: number;
+  gap?: GridSpace;
+  autoFit?: boolean;
+  children?: ReactNode;
+  style?: CSSProperties;
+};
+
+export function Grid({
+  cols = 1,
+  gap = 3,
+  autoFit = false,
+  className,
+  children,
+  style,
+  ...rest
+}: GridProps): React.JSX.Element {
+  return (
+    <div
+      {...rest}
+      className={cx(
+        'grid',
+        !autoFit && `cols-${cols}`,
+        autoFit && 'grid-autofit',
+        `gap-${gap}`,
+        className,
+      )}
+      style={style}
+    >
+      {children}
+    </div>
+  );
+}

package/bizar-dash/src/web/ui/primitives/Inline.tsx

@@ -0,0 +1,55 @@
+/*
+ * Inline.tsx — horizontal flex container with gap (Wave 2A).
+ *
+ * Mirror of Stack tuned for horizontal layouts: defaults to
+ * flex-direction:row with wrap-on overflow (rows of chips / tags /
+ * buttons). Switch direction to column by setting `direction='column'`.
+ * All gap / align / justify modifiers share the same utility classes
+ * as Stack so a single className namespace covers both.
+ */
+
+import { createElement, type HTMLAttributes, type ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type InlineSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+export type InlineAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type InlineJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+
+export type InlineProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+  direction?: 'row' | 'column';
+  gap?: InlineSpace;
+  align?: InlineAlign;
+  justify?: InlineJustify;
+  wrap?: boolean;
+  as?: 'div' | 'span' | 'ul' | 'ol' | 'p';
+  children?: ReactNode;
+};
+
+export function Inline({
+  direction = 'row',
+  gap = 3,
+  align,
+  justify,
+  wrap = true,
+  as = 'div',
+  className,
+  children,
+  ...rest
+}: InlineProps): React.JSX.Element {
+  return createElement(
+    as,
+    {
+      ...rest,
+      className: cx(
+        'inline',
+        direction === 'column' && 'inline-col',
+        `gap-${gap}`,
+        align && `align-${align}`,
+        justify && `justify-${justify}`,
+        wrap ? 'wrap' : 'nowrap',
+        className,
+      ),
+    },
+    children,
+  );
+}

package/bizar-dash/src/web/ui/primitives/Separator.tsx

@@ -0,0 +1,46 @@
+/*
+ * Separator.tsx — visual divider (Wave 2A).
+ *
+ * Renders a true <hr> for the bare case (semantic + accessible) and a
+ * div+role=separator with hairline ::before/::after rules when an
+ * optional centered label is supplied. Vertical orientation produces
+ * a 1px-left-bordered column-suitable rule (caller controls height via
+ * parent flex). `label`, if provided, is the label shown between the
+ * two hairline halves of a horizontal separator.
+ */
+
+import type { ReactNode } from 'react';
+import { cx } from '../utils/cx';
+
+export type SeparatorProps = {
+  orientation?: 'horizontal' | 'vertical';
+  label?: ReactNode;
+  className?: string;
+};
+
+export function Separator({
+  orientation = 'horizontal',
+  label,
+  className,
+}: SeparatorProps): React.JSX.Element {
+  if (label !== undefined) {
+    return (
+      <div
+        role="separator"
+        aria-orientation={orientation}
+        className={cx('separator-with-label', className)}
+      >
+        <span className="separator-label">{label}</span>
+      </div>
+    );
+  }
+  return (
+    <hr
+      className={cx(
+        'separator',
+        orientation === 'vertical' && 'separator-vertical',
+        className,
+      )}
+    />
+  );
+}