feat(site): new home page, docs, and design system (#566)

Co-authored-by: Darius Cepulis <dcepulis@mux.com>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

site/src/components/ToggleGroup.tsx

@@ -1,7 +1,8 @@
 import { Toggle } from '@base-ui/react/toggle';
 import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
 import clsx from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Fragment } from 'react';
+import { twMerge } from '@/utils/twMerge';
 
 export interface ToggleOption<T = string> {
   value: T;
@@ -19,6 +20,7 @@ export interface ToggleGroupProps<T = string> {
   disabled?: boolean;
   'aria-label'?: string;
   multiple?: boolean;
+  minimal?: boolean;
 }
 
 export default function ToggleGroup<T extends string = string>({
@@ -30,6 +32,7 @@ export default function ToggleGroup<T extends string = string>({
   disabled,
   'aria-label': ariaLabel,
   multiple = false,
+  minimal,
 }: ToggleGroupProps<T>) {
   return (
     <BaseToggleGroup
@@ -37,38 +40,51 @@ export default function ToggleGroup<T extends string = string>({
       onValueChange={onChange}
       disabled={disabled}
       className={twMerge(
-        'inline-flex items-center gap-1 bg-light-60 dark:bg-dark-90 dark:text-light-100 border border-light-40 dark:border-dark-80 rounded-lg p-1',
+        minimal ? 'flex gap-0' : 'grid max-w-95 mx-auto',
+        'w-full items-stretch p-0.75 border rounded-xs',
         className
       )}
       aria-label={ariaLabel}
       multiple={multiple}
+      style={{ gridTemplateColumns: '1fr auto 1fr' }}
     >
-      {options.map((option) => {
+      {options.map((option, index) => {
         const isPressed = value.includes(option.value as T);
         const isDisabled = disabled || option.disabled;
+        const isLast = index === options.length - 1;
 
         return (
-          <Toggle
-            key={option.value}
-            value={option.value}
-            disabled={isDisabled}
-            className={twMerge(
-              clsx(
-                'relative',
-                'flex items-center gap-1.5 px-2.5 py-1.5 rounded text-sm',
-                isDisabled ? 'cursor-wait opacity-50' : 'cursor-pointer',
-                isPressed
-                  ? 'bg-light-80 dark:bg-dark-100'
-                  : !isDisabled
-                    ? 'intent:bg-light-80/50 dark:intent:bg-dark-100/50'
-                    : ''
-              ),
-              toggleClassName
+          <Fragment key={option.value as string}>
+            <Toggle
+              value={option.value}
+              disabled={isDisabled}
+              className={twMerge(
+                clsx(
+                  'relative',
+                  'flex items-center justify-center font-display tracking-normal leading-none uppercase font-bold',
+                  minimal ? 'px-3 py-2' : 'px-4 py-3',
+                  'text-(length:--text) md:text-h4',
+                  isDisabled ? 'cursor-wait opacity-50' : 'cursor-pointer',
+                  isPressed
+                    ? 'bg-faded-black dark:bg-manila-light text-manila-light dark:text-faded-black'
+                    : 'bg-transparent'
+                ),
+                toggleClassName
+              )}
+              style={{ '--text': '0.75rem' } as React.CSSProperties}
+              aria-label={option['aria-label']}
+            >
+              {option.label}
+            </Toggle>
+            {!isLast && minimal && <span className="block h-full w-px bg-faded-black dark:bg-manila-light" />}
+            {!isLast && !minimal && (
+              <span className="flex px-0.75 gap-0.75 h-full">
+                <span className="block h-full w-px bg-faded-black dark:bg-manila-light" />
+                <span className="block h-full w-px bg-faded-black dark:bg-manila-light" />
+                <span className="block h-full w-px bg-faded-black dark:bg-manila-light" />
+              </span>
             )}
-            aria-label={option['aria-label']}
-          >
-            {option.label}
-          </Toggle>
+          </Fragment>
         );
       })}
     </BaseToggleGroup>