@polderlabs/bizar 6.3.0 → 7.0.1

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

@@ -0,0 +1,95 @@
+/*
+ * NavGroup.tsx — Collapsible group of NavLinks (Wave 2B).
+ *
+ * Header is a labelled bar that toggles the open state on click. When
+ * `collapsible={false}` the header becomes a static label (no chevron, no
+ * click, no pointer-events). Open/closed is uncontrolled by default
+ * (`defaultOpen`) but switches to controlled when `open` is passed. The
+ * children are rendered via a wrapped <NavGroup.Items> approach — to keep
+ * the public surface simple we accept `items` as NavLinkProps[] and project
+ * them through NavLink internally.
+ */
+
+import { useState, type ReactNode } from 'react';
+import { ChevronRight } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { cx } from '../utils/cx';
+import { NavLink, type NavLinkProps } from './NavLink';
+
+export type NavGroupProps = {
+  label: string;
+  icon?: LucideIcon;
+  items: NavLinkProps[];
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  collapsible?: boolean;
+  children?: ReactNode;
+  className?: string;
+};
+
+export function NavGroup({
+  label,
+  icon: Icon,
+  items,
+  defaultOpen = true,
+  open: controlledOpen,
+  onOpenChange,
+  collapsible = true,
+  children,
+  className,
+}: NavGroupProps): React.JSX.Element {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen! : internalOpen;
+
+  const toggle = (): void => {
+    if (!collapsible) return;
+    const next = !isOpen;
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <section
+      className={cx(
+        'bd-nav-group',
+        isOpen && 'bd-nav-group--open',
+        !collapsible && 'bd-nav-group--non-collapsible',
+        className,
+      )}
+    >
+      <button
+        type="button"
+        className="bd-nav-group__header"
+        onClick={toggle}
+        aria-expanded={collapsible ? isOpen : undefined}
+      >
+        {Icon && (
+          <span className="bd-nav-group__header-icon" aria-hidden="true">
+            <Icon size={14} />
+          </span>
+        )}
+        <span className="bd-nav-group__label">{label}</span>
+        {collapsible && (
+          <ChevronRight
+            size={12}
+            className="bd-nav-group__chevron"
+            aria-hidden="true"
+          />
+        )}
+      </button>
+      <div className="bd-nav-group__items" role="group">
+        {items.map((item, i) => (
+          <NavLink key={`${item.label}-${i}`} {...item} />
+        ))}
+        {/*
+          Reserved escape hatch for callers that want to inject custom
+          content (e.g. a divider or a footer link) below the auto
+          -projected items.
+        */}
+        {typeof children !== 'undefined' && <>{children}</>}
+      </div>
+    </section>
+  );
+}

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>
+  );
+}