UIInternal UI

Utilities

13 lib helpers and tokens — the non-visual half of the kit, shown with live values.

utils (cn)

clsx + tailwind-merge. Every conditional class in the kit flows through cn.

@general-design-company/internal-ui/lib/utils

cn("px-2", "px-4") → "px-4" (tailwind-merge keeps the winner)

format

Money (cents in) and short dates (ISO in) for invoices and plans.

@general-design-company/internal-ui/lib/format
$2,500.00$1,500.00Sep 20

friendly-error

Maps operator/API failures to one safe line. Backs ErrorState. Promoted from the console.

@general-design-company/internal-ui/lib/friendly-error

describeFriendlyError(E('relation "tickets" does not exist'), "Tickets").message → "Tickets is temporarily unavailable"

color-math

CSS color parsing, luminance, and contrast ratios. Backs ColorContrast.

@general-design-company/internal-ui/lib/color-math

contrastRatio("#1a1914", "#fcfcf9") → 17.124776802287585

motion

Shared motion presets — one easing vocabulary for every animated component.

@general-design-company/internal-ui/lib/motion

LIFT

{"type":"spring","stiffness":380,"damping":26,"mass":0.7}

SETTLE

{"type":"spring","stiffness":260,"damping":34,"mass":0.8}

CROSSFADE

{"type":"spring","stiffness":260,"damping":34,"mass":0.8}

STILL

{"duration":0}

themes

Theme registry, init script, and document appliers. Built-ins below; the full registry is in code.

@general-design-company/internal-ui/lib/themes
lightdarksystem3 definitions in registry

tracking

Analytics event helpers (lead tracking). Fire-and-forget, safe without a provider.

@general-design-company/internal-ui/lib/tracking

trackLead() — called on lead-form success.

overlay-sheet

The shared layer table for popups that present as bottom sheets on touch.

@general-design-company/internal-ui/lib/overlay-sheet
ui-overlay-sheet-positionerui-overlay-sheet-backdroprelative w-full max-w-none min-w-0 max-h-[70svh] rounded-t-xl rounded-b-none border-x-0 border-b-0 pt-3 pb-[calc(var(--safe-bottom)+--spacing(4))] before:pointer-events-none before:absolute before:inset-x-0 before:top-1.5 before:z-10 before:mx-auto before:h-1.5 before:w-12 before:rounded-full before:bg-border before:content-['']

keep-portaled-combobox

Escape/outside-press guards that keep portaled comboboxes inside dialogs.

@general-design-company/internal-ui/lib/keep-portaled-combobox

Guards used by DialogForm + Combobox. Behavior demo lives on those pages.

useRestoreFocusOnClose

Focus restoration for overlays. Live demo on the Hooks page.

@general-design-company/internal-ui/lib/use-restore-focus-on-close

See Hooks → useRestoreFocusOnClose for the live demo.

tokens/palette

Raw palette values for JS consumers (email can't read CSS vars). Mirror changes in global.css.

@general-design-company/internal-ui/tokens/palette

light

dark