@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,95 +0,0 @@
-/*
- * 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

@@ -1,93 +0,0 @@
-/*
- * 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

@@ -1,17 +0,0 @@
-/*
- * 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

@@ -1,343 +0,0 @@
-/*
- * 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

@@ -1,91 +0,0 @@
-/*
- * 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

@@ -1,49 +0,0 @@
-/*
- * 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>
-  );
-}