@polderlabs/bizar 7.0.2 → 8.0.0

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

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

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

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

@@ -1,54 +0,0 @@
-/*
- * Stack.tsx — vertical flex container with gap (Wave 2A).
- *
- * Defaults to flex-direction:column with gap=3. Switch to row by setting
- * `direction='row'` (renders the same `stack-row` class). gap / align /
- * justify / wrap all map to single-purpose utility classes so the React
- * layer stays declarative and CSS holds the visual truth.
- */
-
-import { createElement, type HTMLAttributes, type ReactNode } from 'react';
-import { cx } from '../utils/cx';
-
-export type StackSpace = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-export type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
-
-export type StackProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
-  direction?: 'row' | 'column';
-  gap?: StackSpace;
-  align?: StackAlign;
-  justify?: StackJustify;
-  wrap?: boolean;
-  as?: 'div' | 'section' | 'article' | 'main' | 'ul' | 'ol' | 'li';
-  children?: ReactNode;
-};
-
-export function Stack({
-  direction = 'column',
-  gap = 3,
-  align,
-  justify,
-  wrap,
-  as = 'div',
-  className,
-  children,
-  ...rest
-}: StackProps): React.JSX.Element {
-  return createElement(
-    as,
-    {
-      ...rest,
-      className: cx(
-        'stack',
-        direction === 'row' && 'stack-row',
-        `gap-${gap}`,
-        align && `align-${align}`,
-        justify && `justify-${justify}`,
-        wrap === true && 'wrap',
-        className,
-      ),
-    },
-    children,
-  );
-}

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

@@ -1,26 +0,0 @@
-/*
- * VisuallyHidden.tsx — screen-reader-only span (Wave 2A).
- *
- * Renders content that is invisible to sighted users but still announced
- * by assistive tech. Use for: skip-link targets, descriptive labels on
- * icon-only buttons that already use aria-label redundantly, hidden form
- * instructions, and decorative text that still carries semantic meaning
- * (e.g. status changes announced without a visible toast).
- */
-
-import type { HTMLAttributes, ReactNode } from 'react';
-
-export type VisuallyHiddenProps = HTMLAttributes<HTMLSpanElement> & {
-  children?: ReactNode;
-};
-
-export function VisuallyHidden({
-  children,
-  ...rest
-}: VisuallyHiddenProps): React.JSX.Element {
-  return (
-    <span className="vh" {...rest}>
-      {children}
-    </span>
-  );
-}

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

@@ -1,23 +0,0 @@
-/*
- * index.ts — Barrel for the layout primitives (Wave 2A).
- *
- * Side-effect import of primitives.css ships the stylesheet to any
- * consumer that imports from this module graph. Wave 2's ui/index.ts
- * re-exports the exports below — leaving the CSS wiring in place means
- * styles arrive without an additional integration step.
- */
-
-import './primitives.css';
-
-export { Box } from './Box';
-export type { BoxProps, BoxAs, BoxBg, BoxBorder, BoxRounded, BoxShadow, BoxDisplay, BoxPosition, BoxSpace } from './Box';
-export { Stack } from './Stack';
-export type { StackProps, StackSpace, StackAlign, StackJustify } from './Stack';
-export { Inline } from './Inline';
-export type { InlineProps, InlineSpace, InlineAlign, InlineJustify } from './Inline';
-export { Grid } from './Grid';
-export type { GridProps, GridSpace } from './Grid';
-export { Separator } from './Separator';
-export type { SeparatorProps } from './Separator';
-export { VisuallyHidden } from './VisuallyHidden';
-export type { VisuallyHiddenProps } from './VisuallyHidden';

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

@@ -1,183 +0,0 @@
-/* primitives.css — Visual styles for layout primitives (Wave 2A). */
-.box { box-sizing: border-box; }
-
-/* padding all */
-.box-p-0 { padding: 0; } .box-p-1 { padding: var(--space-1); } .box-p-2 { padding: var(--space-2); }
-.box-p-3 { padding: var(--space-3); } .box-p-4 { padding: var(--space-4); } .box-p-5 { padding: var(--space-5); }
-.box-p-6 { padding: var(--space-6); } .box-p-7 { padding: var(--space-7); } .box-p-8 { padding: var(--space-8); }
-/* padding x/y */
-.box-px-0 { padding-left: 0; padding-right: 0; }
-.box-px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
-.box-px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
-.box-px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
-.box-px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
-.box-px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
-.box-px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
-.box-px-7 { padding-left: var(--space-7); padding-right: var(--space-7); }
-.box-px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
-.box-py-0 { padding-top: 0; padding-bottom: 0; }
-.box-py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
-.box-py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
-.box-py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
-.box-py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
-.box-py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
-.box-py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
-.box-py-7 { padding-top: var(--space-7); padding-bottom: var(--space-7); }
-.box-py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
-
-/* margin all */
-.box-m-0 { margin: 0; } .box-m-1 { margin: var(--space-1); } .box-m-2 { margin: var(--space-2); }
-.box-m-3 { margin: var(--space-3); } .box-m-4 { margin: var(--space-4); } .box-m-5 { margin: var(--space-5); }
-.box-m-6 { margin: var(--space-6); } .box-m-7 { margin: var(--space-7); } .box-m-8 { margin: var(--space-8); }
-.box-mx-0 { margin-left: 0; margin-right: 0; }
-.box-mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
-.box-mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
-.box-mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
-.box-mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
-.box-mx-5 { margin-left: var(--space-5); margin-right: var(--space-5); }
-.box-mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
-.box-mx-7 { margin-left: var(--space-7); margin-right: var(--space-7); }
-.box-mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
-.box-my-0 { margin-top: 0; margin-bottom: 0; }
-.box-my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
-.box-my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
-.box-my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
-.box-my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
-.box-my-5 { margin-top: var(--space-5); margin-bottom: var(--space-5); }
-.box-my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
-.box-my-7 { margin-top: var(--space-7); margin-bottom: var(--space-7); }
-.box-my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
-
-/* background surfaces */
-.box-bg-0 { background-color: var(--surface-0); }
-.box-bg-1 { background-color: var(--surface-1); }
-.box-bg-2 { background-color: var(--surface-2); }
-.box-bg-3 { background-color: var(--surface-3); }
-.box-bg-overlay { background-color: var(--surface-overlay); }
-
-/* borders */
-.box-border-none { border: 0; }
-.box-border-subtle { border: 1px solid var(--border-subtle); }
-.box-border-default { border: 1px solid var(--border-default); }
-.box-border-strong { border: 1px solid var(--border-strong); }
-
-/* radii */
-.box-rounded-none { border-radius: 0; }
-.box-rounded-sm { border-radius: var(--radius-sm); }
-.box-rounded-md { border-radius: var(--radius-md); }
-.box-rounded-lg { border-radius: var(--radius-lg); }
-.box-rounded-full { border-radius: var(--radius-full); }
-
-/* shadows */
-.box-shadow-none { box-shadow: none; }
-.box-shadow-hairline { box-shadow: var(--shadow-hairline); }
-.box-shadow-overlay { box-shadow: var(--shadow-overlay); }
-.box-shadow-tooltip { box-shadow: var(--shadow-tooltip); }
-
-/* display */
-.box-d-block { display: block; }
-.box-d-flex { display: flex; }
-.box-d-inline-flex { display: inline-flex; }
-.box-d-grid { display: grid; }
-.box-d-inline-block { display: inline-block; }
-.box-d-none { display: none; }
-
-/* position */
-.box-pos-static { position: static; }
-.box-pos-relative { position: relative; }
-.box-pos-absolute { position: absolute; }
-.box-pos-fixed { position: fixed; }
-.box-pos-sticky { position: sticky; }
-
-/* ===== Stack / Inline — flex containers with gap ===== */
-.stack,
-.inline {
-  display: flex;
-  box-sizing: border-box;
-}
-.stack { flex-direction: column; }
-.inline { flex-direction: row; flex-wrap: wrap; }
-.stack-row { flex-direction: row; }
-.inline-row { flex-direction: row; }
-.stack-col { flex-direction: column; }
-.inline-col { flex-direction: column; }
-
-/* gap 0..8 */
-.gap-0 { gap: 0; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
-.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-5 { gap: var(--space-5); }
-.gap-6 { gap: var(--space-6); } .gap-7 { gap: var(--space-7); } .gap-8 { gap: var(--space-8); }
-
-/* alignment */
-.align-start { align-items: flex-start; }
-.align-center { align-items: center; }
-.align-end { align-items: flex-end; }
-.align-stretch { align-items: stretch; }
-.align-baseline { align-items: baseline; }
-
-.justify-start { justify-content: flex-start; }
-.justify-center { justify-content: center; }
-.justify-end { justify-content: flex-end; }
-.justify-between { justify-content: space-between; }
-.justify-around { justify-content: space-around; }
-
-.wrap { flex-wrap: wrap; }
-.nowrap { flex-wrap: nowrap; }
-
-/* ===== Grid ===== */
-.grid {
-  display: grid;
-  box-sizing: border-box;
-}
-.cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
-.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-.cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
-.grid-autofit { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
-
-/* ===== Separator ===== */
-.separator {
-  border: 0;
-  border-top: 1px solid var(--border-subtle);
-  margin: var(--space-5) 0;
-}
-.separator-vertical {
-  border: 0;
-  border-left: 1px solid var(--border-subtle);
-  margin: 0 var(--space-5);
-  width: 1px;
-  align-self: stretch;
-  min-height: 100%;
-}
-.separator-with-label {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-  border: 0;
-  margin: var(--space-5) 0;
-}
-.separator-with-label::before,
-.separator-with-label::after {
-  content: "";
-  flex: 1;
-  border-top: 1px solid var(--border-subtle);
-}
-.separator-label {
-  color: var(--text-tertiary);
-  font-size: var(--text-sm);
-}
-
-/* ===== VisuallyHidden ===== */
-.vh {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/bizar-dash/src/web/ui/styles/globals.css

@@ -1,86 +0,0 @@
-/*
- * globals.css — Base element styles for the Bizar design system (Wave 1).
- *
- * Import order is load-bearing:
- *   1. tokens.css — defines every CSS custom property the reset + base
- *      element styles below reference.
- *   2. reset.css — zeroes out UA defaults (box-sizing, margins, body bg).
- * This file is a third layer that re-establishes sane defaults for common
- * form / typography / horizontal-rule / link elements that the tight reset
- * intentionally left alone.
- */
-
-@import './tokens.css';
-@import './reset.css';
-
-button {
-  cursor: pointer;
-  font-family: inherit;
-  color: inherit;
-  background: transparent;
-  border: 0;
-  padding: 0;
-}
-
-input,
-select,
-textarea {
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  line-height: var(--leading-normal);
-  color: var(--text-primary);
-  background-color: var(--surface-1);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-md);
-  padding: var(--space-2) var(--space-3);
-  transition: border-color var(--duration-fast) var(--ease-out),
-    box-shadow var(--duration-fast) var(--ease-out);
-}
-
-input:focus,
-select:focus,
-textarea:focus {
-  border-color: var(--border-focus);
-  outline: none;
-  box-shadow: 0 0 0 2px var(--accent-subtle);
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: var(--text-tertiary);
-}
-
-code,
-pre,
-kbd,
-samp {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-}
-
-pre {
-  background-color: var(--surface-1);
-  padding: var(--space-4);
-  border-radius: var(--radius-md);
-  overflow-x: auto;
-}
-
-hr {
-  border: 0;
-  border-top: 1px solid var(--border-subtle);
-  margin: var(--space-5) 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-::selection {
-  background-color: var(--accent);
-  color: var(--accent-fg);
-}

package/bizar-dash/src/web/ui/styles/reset.css

@@ -1,125 +0,0 @@
-/*
- * reset.css — Modern, minimal CSS reset for the Bizar design system.
- *
- * Tighter than Andy Bell's "modern CSS reset": focused on what a
- * Supabase-style data-dense UI actually needs (tabular numbers on body,
- * hairline-bordered focus ring, themed thin scrollbar, no default margins
- * on prose elements). Imported by globals.css; do not import directly.
- */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  margin: 0;
-}
-
-html,
-body,
-#root {
-  height: 100%;
-}
-
-body {
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  line-height: var(--leading-normal);
-  font-variant-numeric: tabular-nums;
-  background-color: var(--surface-0);
-  color: var(--text-primary);
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-img,
-picture,
-video,
-canvas,
-svg {
-  display: block;
-  max-width: 100%;
-}
-
-input,
-button,
-textarea,
-select {
-  font: inherit;
-  color: inherit;
-  line-height: inherit;
-}
-
-button {
-  background: none;
-  border: 0;
-  padding: 0;
-  cursor: pointer;
-}
-
-p,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-figure,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
-
-ul[role='list'],
-ol[role='list'] {
-  list-style: none;
-  padding: 0;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-:focus {
-  outline: none;
-}
-
-:focus-visible {
-  outline: 2px solid var(--border-focus);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
-}
-
-::selection {
-  background-color: var(--accent);
-  color: var(--accent-fg);
-}
-
-/* Themed, thin scrollbar — only WebKit/Blink; Firefox falls back to thin. */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-strong) transparent;
-}
-
-*::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-*::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-*::-webkit-scrollbar-thumb {
-  background: var(--border-default);
-  border-radius: var(--radius-full);
-}
-
-*::-webkit-scrollbar-thumb:hover {
-  background: var(--border-strong);
-}