extract ui to lib

.gitignore

@@ -0,0 +1,50 @@
+# Dependencies
+node_modules/
+
+# Builds
+dist/
+build/
+coverage/
+
+# Vite / tooling caches
+.vite/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+bun-debug.log*
+
+# Env files (keep .env.example committed)
+.env
+.env.*
+!.env.example
+
+# TypeScript incremental build info
+*.tsbuildinfo
+
+# OS / editor cruft
+.DS_Store
+Thumbs.db
+
+# JetBrains (either ignore all, or see "optional" note below)
+.idea/
+*.iml
+
+# CMake
+cmake-build-*/
+
+# IntelliJ
+out/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based HTTP Client
+http-client.private.env.json

.npmrc

@@ -0,0 +1,2 @@
+registry=https://nexus.beatrice.wtf/repository/npm-group/
+@panic:registry=https://nexus.beatrice.wtf/repository/npm-hosted/

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@panic/web-ui",
+  "version": "0.1.2",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./components/MDXEditorField": {
+      "types": "./dist/components/MDXEditorField.d.ts",
+      "import": "./dist/components/MDXEditorField.js"
+    },
+    "./styles/base.css": "./dist/styles/base.css",
+    "./styles/components.css": "./dist/styles/components.css",
+    "./styles/utilities.css": "./dist/styles/utilities.css",
+    "./tailwind-preset": "./dist/tailwind-preset.cjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "yarn clean && vite build && tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/base.css dist/styles/base.css && tailwindcss -c tailwind.build.config.cjs -i src/styles/components.css -o dist/styles/components.css --minify && tailwindcss -c tailwind.build.config.cjs -i src/styles/utilities.css -o dist/styles/utilities.css --minify && cp tailwind-preset.cjs dist/tailwind-preset.cjs",
+    "prepublishOnly": "yarn build",
+    "publish:nexus": "npm publish --registry ${NEXUS_NPM_REGISTRY:-https://nexus.beatrice.wtf/repository/npm-hosted/}"
+  },
+  "publishConfig": {
+    "registry": "https://nexus.beatrice.wtf/repository/npm-hosted/",
+    "access": "restricted"
+  },
+  "peerDependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@mdxeditor/editor": "^3.52.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@mdxeditor/editor": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@mdxeditor/editor": "^3.52.4",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0",
+    "tailwindcss": "^3.4.16",
+    "typescript": "^5.6.2",
+    "vite": "^7.0.0"
+  }
+}

src/components/Button.tsx

@@ -0,0 +1,137 @@
+import type { ElementType, MouseEventHandler } from 'react';
+import { Link } from 'react-router-dom';
+import type { ComponentSize } from './types';
+
+type ButtonType = 'solid' | 'outlined' | 'noborder';
+type ButtonVariant = 'primary' | 'secondary' | 'important';
+type NativeButtonType = 'button' | 'submit' | 'reset';
+
+type ButtonProps = {
+  label?: string;
+  type: ButtonType;
+  variant?: ButtonVariant;
+  size?: ComponentSize;
+  to?: string;
+  htmlType?: NativeButtonType;
+  onClick?: MouseEventHandler<HTMLElement>;
+  disabled?: boolean;
+  icon?: ElementType;
+  ariaLabel?: string;
+  className?: string;
+};
+
+const SIZE_CLASS: Record<ComponentSize, string> = {
+  sm: 'h-8 px-3 text-xs',
+  md: 'h-10 px-4 text-sm',
+  lg: 'h-12 px-5 text-base',
+  full: 'h-10 w-full px-4 text-sm'
+};
+
+const ICON_ONLY_SIZE_CLASS: Record<ComponentSize, string> = {
+  sm: 'h-8 w-8 !p-0',
+  md: 'h-10 w-10 !p-0',
+  lg: 'h-12 w-12 !p-0',
+  full: 'h-10 w-full !p-0'
+};
+
+const ICON_CLASS: Record<ComponentSize, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-4 w-4',
+  lg: 'h-5 w-5',
+  full: 'h-4 w-4'
+};
+
+const ICON_ONLY_CLASS: Record<ComponentSize, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+  full: 'h-5 w-5'
+};
+
+const TYPE_CLASS: Record<ButtonType, string> = {
+  solid: 'btn-solid',
+  outlined: 'btn-outlined',
+  noborder: 'btn-noborder'
+};
+
+const VARIANT_CLASS: Record<ButtonVariant, string> = {
+  primary: 'btn-primary',
+  secondary: 'btn-secondary',
+  important: 'btn-important'
+};
+
+function resolveVariant(type: ButtonType, variant?: ButtonVariant): ButtonVariant {
+  if (variant) {
+    return variant;
+  }
+
+  return type === 'solid' ? 'primary' : 'secondary';
+}
+
+export function Button({
+  label,
+  type,
+  variant,
+  size = 'md',
+  to,
+  htmlType = 'button',
+  onClick,
+  disabled = false,
+  icon: Icon,
+  ariaLabel,
+  className = ''
+}: Readonly<ButtonProps>) {
+  const isIconOnly = Icon != null && !label;
+  const resolvedVariant = resolveVariant(type, variant);
+  const composedClassName = [
+    TYPE_CLASS[type],
+    VARIANT_CLASS[resolvedVariant],
+    isIconOnly ? ICON_ONLY_SIZE_CLASS[size] : SIZE_CLASS[size],
+    Icon && label ? 'gap-1.5' : '',
+    disabled ? 'pointer-events-none cursor-not-allowed opacity-45 saturate-50' : '',
+    className
+  ].join(' ').trim();
+  const computedAriaLabel = ariaLabel ?? label;
+  const iconClass = `${isIconOnly ? ICON_ONLY_CLASS[size] : ICON_CLASS[size]} shrink-0`;
+  const content = (
+    <>
+      {Icon ? <Icon className={iconClass} aria-hidden="true" /> : null}
+      {label ?? null}
+    </>
+  );
+
+  const handleLinkClick: MouseEventHandler<HTMLElement> = (event) => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    onClick?.(event);
+  };
+
+  if (to) {
+    return (
+      <Link
+        to={to}
+        onClick={handleLinkClick}
+        aria-disabled={disabled}
+        aria-label={computedAriaLabel}
+        tabIndex={disabled ? -1 : undefined}
+        className={composedClassName}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      type={htmlType}
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={computedAriaLabel}
+      className={composedClassName}
+    >
+      {content}
+    </button>
+  );
+}

src/components/Chip.tsx

@@ -0,0 +1,36 @@
+import type { ElementType, ReactNode } from 'react';
+
+type ChipVariant = 'solid' | 'outlined';
+type ChipTone = 'neutral' | 'indigo' | 'cyan';
+
+type ChipProps<T extends ElementType> = {
+  variant?: ChipVariant;
+  tone?: ChipTone;
+  as?: T;
+  className?: string;
+  children: ReactNode;
+};
+
+const variantClassMap: Record<ChipVariant, string> = {
+  solid: 'chip-solid',
+  outlined: 'chip-outlined'
+};
+
+const toneClassMap: Record<ChipTone, string> = {
+  neutral: 'chip-neutral',
+  indigo: 'chip-indigo',
+  cyan: 'chip-cyan'
+};
+
+export function Chip<T extends ElementType = 'span'>({
+  variant = 'solid',
+  tone = 'neutral',
+  as,
+  className = '',
+  children
+}: Readonly<ChipProps<T>>) {
+  const Component = as ?? 'span' as ElementType;
+  const classes = `chip-root ${variantClassMap[variant]} ${toneClassMap[tone]} ${className}`.trim();
+
+  return <Component className={classes}>{children}</Component>;
+}

src/components/Dropdown.tsx

@@ -0,0 +1,88 @@
+import type { ChangeEventHandler } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
+import type { ComponentSize } from './types';
+
+type DropdownLayout = 'stacked' | 'inline';
+
+type DropdownChoice = {
+  label: string;
+  id: string;
+};
+
+type DropdownProps = {
+  label?: string;
+  value: string;
+  choices: DropdownChoice[];
+  size?: ComponentSize;
+  layout?: DropdownLayout;
+  disabled?: boolean;
+  required?: boolean;
+  onChange?: (value: string) => void;
+  error?: string;
+  className?: string;
+  selectClassName?: string;
+};
+
+export function Dropdown({
+  label,
+  value,
+  choices,
+  size = 'md',
+  layout = 'stacked',
+  disabled = false,
+  required = false,
+  onChange,
+  error,
+  className = '',
+  selectClassName = ''
+}: Readonly<DropdownProps>) {
+  const containerSizeClass = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    full: 'max-w-none'
+  }[size];
+
+  const selectSizeClass = {
+    sm: 'h-8 text-xs',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-sm',
+    full: 'h-10 text-sm'
+  }[size];
+
+  const handleChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
+    onChange?.(event.target.value);
+  };
+
+  const wrapperClass = layout === 'inline'
+    ? 'inline-flex w-auto items-center gap-2'
+    : 'block w-full gap-1';
+
+  const selectWrapperClass = 'relative';
+  const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
+
+  return (
+    <label className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}>
+      {label ? <span className={labelClass}>{label}</span> : null}
+      <div className={selectWrapperClass}>
+        <select
+          value={value}
+          onChange={handleChange}
+          disabled={disabled}
+          required={required}
+          className={`field w-full appearance-none pr-9 disabled:opacity-100 ${selectSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${selectClassName}`.trim()}
+        >
+          {choices.map((choice) => (
+            <option key={choice.id} value={choice.id}>
+              {choice.label}
+            </option>
+          ))}
+        </select>
+        <span className={`pointer-events-none absolute inset-y-0 right-3 flex items-center ${disabled ? 'ui-label-disabled' : 'ui-body-secondary'}`}>
+          <ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
+        </span>
+      </div>
+      {error ? <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>{error}</span> : null}
+    </label>
+  );
+}

src/components/Form.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import { Label } from './Label';
+
+type FormProps = {
+  title: string;
+  titleBarRight?: ReactNode;
+  children: ReactNode;
+  className?: string;
+};
+
+export function Form({ title, titleBarRight, children, className = '' }: Readonly<FormProps>) {
+  return (
+    <div className={`surface overflow-hidden rounded-xl ${className}`.trim()}>
+      <div className="flex items-center justify-between border-b px-4 py-3 sm:px-5" style={{ borderColor: 'var(--surface-divider)' }}>
+        <Label variant="h4">{title}</Label>
+        {titleBarRight ? <div>{titleBarRight}</div> : null}
+      </div>
+
+      <div className="grid grid-cols-1 gap-4 p-4 sm:p-5 lg:grid-cols-3">
+        {children}
+      </div>
+    </div>
+  );
+}

src/components/InputField.tsx

@@ -0,0 +1,106 @@
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
+import { useState } from 'react';
+import type { ChangeEventHandler, FocusEventHandler, ReactNode, Ref } from 'react';
+import type { ComponentSize } from './types';
+import { Button } from './Button';
+
+type InputKind = 'text' | 'password' | 'email';
+type Layout = 'stacked' | 'inline';
+
+type InputFieldProps = {
+  label?: string;
+  placeholder?: string;
+  type: InputKind;
+  size?: ComponentSize;
+  layout?: Layout;
+  value: string;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  onBlur?: FocusEventHandler<HTMLInputElement>;
+  inputRef?: Ref<HTMLInputElement>;
+  disabled?: boolean;
+  required?: boolean;
+  error?: string;
+  rightIcon?: ReactNode;
+  className?: string;
+  inputClassName?: string;
+};
+
+export function InputField({
+  label,
+  placeholder = '',
+  type,
+  size = 'md',
+  layout = 'stacked',
+  value,
+  name,
+  onChange,
+  onBlur,
+  inputRef,
+  disabled = false,
+  required = false,
+  error,
+  rightIcon,
+  className = '',
+  inputClassName = ''
+}: Readonly<InputFieldProps>) {
+  const [showPassword, setShowPassword] = useState(false);
+  const containerSizeClass = {
+    sm: 'max-w-xs',
+    md: 'max-w-sm',
+    lg: 'max-w-md',
+    full: 'max-w-none'
+  }[size];
+
+  const inputSizeClass = {
+    sm: 'h-8 text-xs',
+    md: 'h-10 text-sm',
+    lg: 'h-12 text-sm',
+    full: 'h-10 text-sm'
+  }[size];
+
+  const wrapperClass = layout === 'inline'
+    ? 'inline-flex w-auto items-center gap-2'
+    : 'block w-full gap-1';
+  const labelClass = layout === 'inline' ? 'text-xs ui-body-secondary' : '';
+  const isPasswordType = type === 'password';
+  const resolvedType: InputKind = isPasswordType && showPassword ? 'text' : type;
+  const hasTrailingIcon = isPasswordType || Boolean(rightIcon);
+  const inputWrapperClass = layout === 'inline' ? 'relative' : 'relative mt-1';
+
+  return (
+    <label className={`${wrapperClass} text-sm font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'} ${containerSizeClass} ${className}`.trim()}>
+      {label ? <span className={labelClass}>{label}</span> : null}
+      <div className={inputWrapperClass}>
+        <input
+          type={resolvedType}
+          value={value}
+          name={name}
+          onChange={onChange}
+          onBlur={onBlur}
+          ref={inputRef}
+          placeholder={placeholder}
+          disabled={disabled}
+          required={required}
+          className={`field w-full ${hasTrailingIcon ? 'pr-10' : ''} ${inputSizeClass} ${error ? 'border-red-400/70 focus:border-red-400 focus:ring-red-400/30' : ''} ${inputClassName}`.trim()}
+        />
+        {isPasswordType ? (
+          <Button
+            type="noborder"
+            size="sm"
+            icon={showPassword ? EyeSlashIcon : EyeIcon}
+            onClick={() => setShowPassword((prev) => !prev)}
+            disabled={disabled}
+            className="absolute inset-y-0 right-2 my-auto !h-6 !w-6 !rounded-md !p-0 ui-body-secondary transition hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60"
+            ariaLabel={showPassword ? 'Hide password' : 'Show password'}
+          />
+        ) : rightIcon ? (
+          <span className="pointer-events-none absolute inset-y-0 right-2 inline-flex items-center justify-center px-1">
+            {rightIcon}
+          </span>
+        ) : null}
+      </div>
+      {error ? <span className="mt-1 block text-xs" style={{ color: 'var(--error-text)' }}>{error}</span> : null}
+    </label>
+  );
+}

src/components/Label.tsx

@@ -0,0 +1,55 @@
+import type { ElementType, ReactNode } from 'react';
+
+type LabelVariant =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'body'
+  | 'body2'
+  | 'caption'
+  | 'error'
+  | 'code';
+
+type LabelProps<T extends ElementType> = {
+  variant?: LabelVariant;
+  as?: T;
+  className?: string;
+  children: ReactNode;
+};
+
+const variantClassMap: Record<LabelVariant, string> = {
+  h1: 'ui-title text-3xl font-bold',
+  h2: 'ui-title text-2xl font-semibold',
+  h3: 'ui-title text-xl font-semibold',
+  h4: 'ui-title text-base font-semibold',
+  body: 'ui-body-primary text-sm',
+  body2: 'ui-body-secondary text-sm',
+  caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
+  error: 'ui-error text-sm',
+  code: 'ui-code text-sm font-mono'
+};
+
+const variantTagMap: Record<LabelVariant, ElementType> = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h3',
+  body: 'p',
+  body2: 'p',
+  caption: 'p',
+  error: 'p',
+  code: 'code'
+};
+
+export function Label<T extends ElementType = 'p'>({
+  variant = 'body',
+  as,
+  className = '',
+  children
+}: Readonly<LabelProps<T>>) {
+  const Component = as ?? variantTagMap[variant];
+  const classes = `${variantClassMap[variant]} ${className}`.trim();
+
+  return <Component className={classes}>{children}</Component>;
+}

src/components/MDXEditorField.tsx

@@ -0,0 +1,65 @@
+import { MDXEditor, type MDXEditorMethods, type MDXEditorProps } from '@mdxeditor/editor';
+import type { CSSProperties, Ref } from 'react';
+import { Label } from './Label';
+
+type MDXEditorFieldProps = {
+  label?: string;
+  markdown: string;
+  readOnly?: boolean;
+  disabled?: boolean;
+  onChange?: (markdown: string) => void;
+  editorRef?: Ref<MDXEditorMethods | null>;
+  themeClassName: string;
+  plugins: MDXEditorProps['plugins'];
+  contentEditableClassName?: string;
+  className?: string;
+  editorWrapperClassName?: string;
+  editorWrapperStyle?: CSSProperties;
+  editorClassName?: string;
+  error?: string;
+};
+
+export function MDXEditorField({
+  label,
+  markdown,
+  readOnly = false,
+  disabled = false,
+  onChange,
+  editorRef,
+  themeClassName,
+  plugins,
+  contentEditableClassName = 'mdx-content',
+  className = '',
+  editorWrapperClassName = 'post-mdx-editor mt-2 overflow-hidden rounded-xl border',
+  editorWrapperStyle,
+  editorClassName = '',
+  error
+}: Readonly<MDXEditorFieldProps>) {
+  const resolvedEditorClassName = `${themeClassName} ${editorClassName}`.trim();
+  const editorModeKey = disabled || readOnly ? 'read-only' : 'editable';
+  const resolvedEditorWrapperClassName = `${editorWrapperClassName} ${disabled ? 'post-mdx-editor--disabled' : 'post-mdx-editor--enabled'}`.trim();
+  const resolvedEditorWrapperStyle: CSSProperties = {
+    backgroundColor: disabled ? 'var(--field-disabled-bg)' : 'var(--field-bg)',
+    borderColor: disabled ? 'var(--field-disabled-border)' : 'var(--field-border)',
+    ...editorWrapperStyle
+  };
+
+  return (
+    <div className={className}>
+      {label ? <Label variant="body" className={`font-medium ${disabled ? 'ui-label-disabled' : 'ui-label'}`}>{label}</Label> : null}
+      <div className={resolvedEditorWrapperClassName} style={resolvedEditorWrapperStyle}>
+        <MDXEditor
+          key={editorModeKey}
+          ref={editorRef}
+          markdown={markdown}
+          onChange={disabled || readOnly ? undefined : onChange}
+          readOnly={disabled || readOnly}
+          className={resolvedEditorClassName}
+          contentEditableClassName={contentEditableClassName}
+          plugins={plugins}
+        />
+      </div>
+      {error ? <Label variant="error" className="mt-2 ui-error">{error}</Label> : null}
+    </div>
+  );
+}

src/components/SidebarNavItem.tsx

@@ -0,0 +1,33 @@
+import type { ComponentType, SVGProps } from 'react';
+import { NavLink } from 'react-router-dom';
+
+type IconType = ComponentType<SVGProps<SVGSVGElement>>;
+
+type SidebarNavItemProps = {
+  to: string;
+  label: string;
+  icon: IconType;
+  collapsed: boolean;
+  onClick?: () => void;
+};
+
+export function SidebarNavItem({ to, label, icon: Icon, collapsed, onClick }: Readonly<SidebarNavItemProps>) {
+  const layoutClass = collapsed
+    ? 'px-2 justify-start lg:mx-auto lg:w-8 lg:justify-center lg:px-0'
+    : 'px-2 lg:w-full lg:justify-start';
+
+  return (
+    <NavLink
+      to={to}
+      onClick={onClick}
+      className={({ isActive }) => (
+        `inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${
+          isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15'
+        }`
+      )}
+    >
+      <Icon className="h-4 w-4 shrink-0" />
+      {!collapsed ? <span className="ml-2 truncate leading-none">{label}</span> : <span className="ml-2 lg:hidden">{label}</span>}
+    </NavLink>
+  );
+}

src/components/Table.tsx

@@ -0,0 +1,180 @@
+import type { ReactNode } from 'react';
+import { ArrowPathIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
+import { ArrowsUpDownIcon } from '@heroicons/react/24/outline';
+import { Button } from './Button';
+import { Dropdown } from './Dropdown';
+import { Label } from './Label';
+import type { SortState } from '../types/sort';
+
+type HeaderValue<T> = ReactNode | ((row: T) => ReactNode);
+
+export type TableHeader<T> = {
+  label: string;
+  id: string;
+  value: HeaderValue<T>;
+  sortable?: boolean;
+  sortField?: string;
+  headerClassName?: string;
+  cellClassName?: string;
+};
+
+type TableProps<T> = {
+  headers: TableHeader<T>[];
+  data: T[];
+  rowKey: (row: T, index: number) => string;
+  isLoading?: boolean;
+  emptyMessage?: string;
+  className?: string;
+  sorting?: SortState | null;
+  onSortChange?: (field: string) => void;
+  pagination?: {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+  };
+};
+
+export function Table<T>({
+  headers,
+  data,
+  rowKey,
+  isLoading = false,
+  emptyMessage = 'No data to show.',
+  className = '',
+  sorting = null,
+  onSortChange,
+  pagination
+}: Readonly<TableProps<T>>) {
+  const canGoPrev = pagination != null && pagination.page > 1;
+  const canGoNext = pagination != null && pagination.page < pagination.totalPages;
+
+  return (
+    <div className={`table-shell ${className}`.trim()}>
+      <div className="table-scroll">
+        <table className="table-root">
+          <thead className="table-head">
+            <tr>
+              {headers.map((header) => {
+                const canSort = header.sortable === true
+                  && typeof onSortChange === 'function'
+                  && typeof header.sortField === 'string'
+                  && header.sortField.length > 0;
+                const isActiveSort = canSort && sorting?.field === header.sortField;
+                const sortDirection = isActiveSort ? sorting?.direction : null;
+
+                return (
+                  <th key={header.id} className={`table-head-cell ${header.headerClassName ?? ''}`.trim()}>
+                    {canSort ? (
+                      <button
+                        type="button"
+                        className="table-sort-button"
+                        onClick={() => onSortChange(header.sortField as string)}
+                        aria-label={`Sort by ${header.label}`}
+                      >
+                        <span>{header.label}</span>
+                        <span className="table-sort-icon" aria-hidden="true" data-sort-state={sortDirection ?? 'none'}>
+                          {sortDirection === 'asc' ? (
+                            <ChevronUpIcon className="h-4 w-4" />
+                          ) : null}
+                          {sortDirection === 'desc' ? (
+                            <ChevronDownIcon className="h-4 w-4" />
+                          ) : null}
+                          {sortDirection == null ? (
+                            <ArrowsUpDownIcon className="h-4 w-4" />
+                          ) : null}
+                        </span>
+                      </button>
+                    ) : (
+                      header.label
+                    )}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading ? (
+              <tr className="table-body-row">
+                <td colSpan={headers.length} className="px-4 py-6 text-center">
+                  <Label as="span" variant="body2" className="inline-flex items-center justify-center ui-loading">
+                    <ArrowPathIcon className="h-5 w-5 animate-spin" aria-hidden="true" />
+                  </Label>
+                </td>
+              </tr>
+            ) : null}
+            {!isLoading && data.length === 0 ? (
+              <tr className="table-body-row">
+                <td colSpan={headers.length} className="px-4 py-6 text-center">
+                  <Label variant="body2" className="ui-empty">
+                    {emptyMessage}
+                  </Label>
+                </td>
+              </tr>
+            ) : null}
+            {!isLoading && data.map((row, index) => (
+              <tr key={rowKey(row, index)} className="table-body-row">
+                {headers.map((header) => {
+                  const content = typeof header.value === 'function'
+                    ? (header.value as (item: T) => ReactNode)(row)
+                    : header.value;
+                  return (
+                    <td key={`${header.id}-${index}`} className={`table-cell-secondary ${header.cellClassName ?? ''}`.trim()}>
+                      {content}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {pagination ? (
+        <div className="flex flex-col gap-3 border-t border-zinc-500/20 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">
+          <Label variant="body2">
+            {pagination.total} results
+          </Label>
+          <div className="flex flex-wrap items-center gap-2">
+            {pagination.onPageSizeChange ? (
+              <Dropdown
+                label="Rows"
+                value={String(pagination.pageSize)}
+                choices={[5, 10, 20, 50, 100].map((size) => ({
+                  id: String(size),
+                  label: String(size)
+                }))}
+                size="sm"
+                layout="inline"
+                className="max-w-none"
+                selectClassName="rounded-lg px-2"
+                disabled={isLoading}
+                onChange={(value) => pagination.onPageSizeChange?.(Number(value))}
+              />
+            ) : null}
+            <Button
+              type="outlined"
+              size="sm"
+              icon={ChevronLeftIcon}
+              ariaLabel="Previous page"
+              disabled={!canGoPrev || isLoading}
+              onClick={() => pagination.onPageChange(pagination.page - 1)}
+            />
+            <Label variant="body2" className="px-1 text-xs ui-body-secondary">
+              Page {pagination.page} of {Math.max(pagination.totalPages, 1)}
+            </Label>
+            <Button
+              type="outlined"
+              size="sm"
+              icon={ChevronRightIcon}
+              ariaLabel="Next page"
+              disabled={!canGoNext || isLoading}
+              onClick={() => pagination.onPageChange(pagination.page + 1)}
+            />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/types.ts

@@ -0,0 +1 @@
+export type ComponentSize = 'sm' | 'md' | 'lg' | 'full';

src/index.ts

@@ -0,0 +1,12 @@
+export { Button } from './components/Button';
+export { Chip } from './components/Chip';
+export { Dropdown } from './components/Dropdown';
+export { Form } from './components/Form';
+export { InputField } from './components/InputField';
+export { Label } from './components/Label';
+export { SidebarNavItem } from './components/SidebarNavItem';
+export { Table } from './components/Table';
+
+export type { TableHeader } from './components/Table';
+export type { ComponentSize } from './components/types';
+export type { SortDirection, SortState } from './types/sort';

src/styles/base.css

@@ -0,0 +1,94 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+  --bg-page: #16121a;
+  --surface-bg: rgba(24, 24, 27, 0.45);
+  --surface-bg-strong: rgba(24, 24, 27, 0.62);
+  --surface-border: rgba(82, 82, 91, 0.6);
+  --surface-divider: rgba(63, 63, 70, 0.85);
+  --text-primary: #d5cfdf;
+  --text-secondary: #bcb7c8;
+  --text-muted: #a1a1aa;
+  --text-soft: #8f8b9c;
+  --field-bg: rgba(24, 24, 27, 0.6);
+  --field-border: #3f3f46;
+  --field-disabled-bg: rgba(24, 24, 27, 0.5);
+  --field-disabled-border: #3f3f46;
+  --field-disabled-text: #bbb6c3;
+  --field-disabled-placeholder: #71717a;
+  --ghost-bg: rgba(24, 24, 27, 0.5);
+  --ghost-border: #3f3f46;
+  --ghost-hover: rgba(39, 39, 42, 0.7);
+  --ghost-disabled-bg: rgba(24, 24, 27, 0.3);
+  --ghost-disabled-border: #27272a;
+  --ghost-disabled-text: #71717a;
+  --primary-disabled-bg: #3f3f46;
+  --primary-disabled-text: #a1a1aa;
+  --table-head-bg: rgba(24, 24, 27, 0.8);
+  --table-row-divider: #27272a;
+  --auth-chrome-bg: rgba(24, 24, 27, 0.7);
+  --auth-glass-blur: 22px;
+  --auth-sidebar-mobile-width: min(86vw, 320px);
+  --auth-right-sidebar-mobile-width: min(86vw, 340px);
+  --error-border: rgba(252, 165, 165, 0.3);
+  --error-bg: rgba(239, 68, 68, 0.1);
+  --error-text: #fecaca;
+  --mdx-link: #7d6f98;
+  --mdx-link-hover: #9587ad;
+  --mdx-inline-code-bg: #27272a;
+  --mdx-inline-code-border: #3f3f46;
+  --mdx-codeblock-bg: #18181b;
+  --mdx-codeblock-border: #3f3f46;
+  --mdx-codeblock-text: #e4e4e7;
+  --mdx-codeblock-gutter: #a1a1aa;
+  --mdx-codeblock-active: #27272a;
+  --mdx-codeblock-selection: rgba(125, 111, 152, 0.35);
+  --mdx-codeblock-bracket: rgba(125, 111, 152, 0.45);
+  --shadow-glow: 0 0 0 1px rgba(63, 63, 70, 0.65), 0 18px 44px rgba(0, 0, 0, 0.45);
+}
+
+:root[data-theme='light'] {
+  --bg-page: #f7f7fb;
+  --surface-bg: rgba(255, 255, 255, 0.9);
+  --surface-bg-strong: rgba(255, 255, 255, 0.98);
+  --surface-border: rgba(161, 161, 170, 0.45);
+  --surface-divider: rgba(212, 212, 216, 0.9);
+  --text-primary: #52485c;
+  --text-secondary: #514e60;
+  --text-muted: #52525b;
+  --text-soft: #71717a;
+  --field-bg: rgba(253, 253, 253, 0.8);
+  --field-border: #d4d4d8;
+  --field-disabled-bg: rgba(248, 248, 248, 0.8);
+  --field-disabled-border: #d7d7d7;
+  --field-disabled-text: #71717a;
+  --field-disabled-placeholder: #a1a1aa;
+  --ghost-bg: rgba(255, 255, 255, 0.88);
+  --ghost-border: #d4d4d8;
+  --ghost-hover: #f4f4f5;
+  --ghost-disabled-bg: #f4f4f5;
+  --ghost-disabled-border: #e4e4e7;
+  --ghost-disabled-text: #a1a1aa;
+  --primary-disabled-bg: #e4e4e7;
+  --primary-disabled-text: #a1a1aa;
+  --table-head-bg: #f4f4f5;
+  --table-row-divider: #e4e4e7;
+  --auth-chrome-bg: rgba(255, 255, 255, 0.7);
+  --auth-glass-blur: 15px;
+  --error-border: rgba(248, 113, 113, 0.35);
+  --error-bg: rgba(254, 226, 226, 0.8);
+  --error-text: #991b1b;
+  --mdx-link: #7d6f98;
+  --mdx-link-hover: #6a5d84;
+  --mdx-inline-code-bg: #f4f4f5;
+  --mdx-inline-code-border: #d4d4d8;
+  --mdx-codeblock-bg: #ffffff;
+  --mdx-codeblock-border: #d4d4d8;
+  --mdx-codeblock-text: #18181b;
+  --mdx-codeblock-gutter: #71717a;
+  --mdx-codeblock-active: #f4f4f5;
+  --mdx-codeblock-selection: rgba(125, 111, 152, 0.22);
+  --mdx-codeblock-bracket: rgba(125, 111, 152, 0.32);
+  --shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08);
+}
+

src/styles/components.css

@@ -0,0 +1,313 @@
+.surface {
+  border: 1px solid var(--surface-border);
+  background-color: var(--surface-bg);
+  box-shadow: var(--shadow-glow);
+  @apply rounded-2xl backdrop-blur-xl;
+}
+
+.field {
+  border: 1px solid var(--field-border);
+  background-color: var(--field-bg);
+  color: var(--text-primary);
+  @apply w-full rounded-xl px-3 py-2 text-sm outline-none transition focus:border-accent-400 focus:ring-2 focus:ring-accent-400/30;
+}
+
+.field::placeholder {
+  color: var(--text-soft);
+}
+
+.field:disabled {
+  border-color: var(--field-disabled-border);
+  background-color: var(--field-disabled-bg);
+  color: var(--field-disabled-text);
+}
+
+.field:disabled::placeholder {
+  color: var(--field-disabled-placeholder);
+}
+
+.btn-solid,
+.btn-outlined,
+.btn-noborder {
+  @apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-semibold transition;
+}
+
+.btn-solid {
+  border: 1px solid transparent;
+}
+
+.btn-outlined {
+  border: 1px solid var(--ghost-border);
+}
+
+.btn-noborder {
+  border: 1px solid transparent;
+}
+
+.btn-solid.btn-primary {
+  @apply bg-accent-500 text-white hover:bg-accent-400 disabled:opacity-100;
+}
+
+.btn-solid.btn-primary:disabled {
+  background-color: var(--primary-disabled-bg);
+  color: var(--primary-disabled-text);
+}
+
+.btn-solid.btn-secondary {
+  border-color: var(--ghost-border);
+  background-color: var(--ghost-border);
+  color: var(--text-primary);
+}
+
+.btn-solid.btn-secondary:hover {
+  background-color: var(--ghost-hover);
+}
+
+.btn-solid.btn-secondary:disabled {
+  border-color: var(--ghost-disabled-border);
+  background-color: var(--ghost-disabled-bg);
+  color: var(--ghost-disabled-text);
+}
+
+.btn-solid.btn-important {
+  border-color: #dc2626;
+  @apply bg-red-600 text-white hover:bg-red-500 disabled:opacity-100;
+}
+
+.btn-solid.btn-important:disabled {
+  border-color: #7f1d1d;
+  background-color: #7f1d1d;
+  color: #fecaca;
+}
+
+.btn-outlined.btn-secondary {
+  border-color: var(--ghost-border);
+  background-color: var(--ghost-bg);
+  color: var(--text-secondary);
+}
+
+.btn-outlined.btn-secondary:hover {
+  background-color: var(--ghost-hover);
+}
+
+.btn-outlined.btn-secondary:disabled {
+  border-color: var(--ghost-disabled-border);
+  background-color: var(--ghost-disabled-bg);
+  color: var(--ghost-disabled-text);
+}
+
+.btn-outlined.btn-primary {
+  @apply border-accent-500 text-accent-300;
+  background-color: transparent;
+}
+
+.btn-outlined.btn-primary:hover {
+  @apply bg-accent-500/15 text-accent-300;
+}
+
+.btn-outlined.btn-primary:disabled {
+  @apply border-accent-500/40 text-accent-300/60;
+  background-color: transparent;
+}
+
+.btn-outlined.btn-important {
+  @apply border-red-500 text-red-400;
+  background-color: transparent;
+}
+
+.btn-outlined.btn-important:hover {
+  @apply bg-red-500/10 text-red-300;
+}
+
+.btn-outlined.btn-important:disabled {
+  @apply border-red-900 text-red-900;
+  background-color: transparent;
+}
+
+.btn-noborder.btn-secondary {
+  background-color: transparent;
+  color: var(--text-secondary);
+}
+
+.btn-noborder.btn-secondary:hover {
+  background-color: var(--ghost-hover);
+}
+
+.btn-noborder.btn-secondary:disabled {
+  background-color: transparent;
+  color: var(--ghost-disabled-text);
+}
+
+.btn-noborder.btn-primary {
+  @apply text-accent-300;
+  background-color: transparent;
+}
+
+.btn-noborder.btn-primary:hover {
+  @apply bg-accent-500/15 text-accent-300;
+}
+
+.btn-noborder.btn-primary:disabled {
+  @apply text-accent-300/60;
+  background-color: transparent;
+}
+
+.btn-noborder.btn-important {
+  @apply text-red-400;
+  background-color: transparent;
+}
+
+.btn-noborder.btn-important:hover {
+  @apply bg-red-500/10 text-red-300;
+}
+
+.btn-noborder.btn-important:disabled {
+  @apply text-red-900;
+  background-color: transparent;
+}
+
+.ui-kicker {
+  color: var(--text-muted);
+}
+
+.ui-title {
+  color: var(--text-primary);
+}
+
+.ui-body-secondary {
+  color: var(--text-muted);
+}
+
+.ui-code {
+  border: 1px solid var(--surface-divider);
+  background-color: var(--ghost-bg);
+  color: var(--text-primary);
+  @apply rounded-md px-1.5 py-0.5;
+}
+
+.ui-body-primary {
+  color: var(--text-secondary);
+}
+
+.ui-loading {
+  color: var(--text-muted);
+}
+
+.ui-empty {
+  color: var(--text-soft);
+}
+
+.ui-link {
+  color: var(--text-secondary);
+  @apply font-semibold transition;
+}
+
+.ui-link:hover {
+  color: var(--text-primary);
+}
+
+.ui-label {
+  color: var(--text-secondary);
+}
+
+.ui-label-disabled {
+  color: var(--text-soft);
+}
+
+.ui-error {
+  color: var(--error-text);
+}
+
+.chip-root {
+  @apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none;
+}
+
+.chip-solid {
+  color: #ffffff;
+}
+
+.chip-outlined {
+  background-color: transparent;
+}
+
+.chip-neutral.chip-solid {
+  border-color: var(--ghost-border);
+  background-color: var(--ghost-border);
+  color: var(--text-primary);
+}
+
+.chip-neutral.chip-outlined {
+  border-color: var(--ghost-border);
+  color: var(--text-secondary);
+}
+
+.chip-indigo.chip-solid {
+  @apply border-indigo-700 bg-indigo-700 text-white;
+}
+
+.chip-indigo.chip-outlined {
+  @apply border-indigo-700 text-indigo-300;
+}
+
+.chip-cyan.chip-solid {
+  @apply border-cyan-700 bg-cyan-700 text-white;
+}
+
+.chip-cyan.chip-outlined {
+  @apply border-cyan-700 text-cyan-300;
+}
+
+.alert-error {
+  border: 1px solid var(--error-border);
+  background-color: var(--error-bg);
+  color: var(--error-text);
+  @apply rounded-lg px-3 py-2 text-sm;
+}
+
+.table-shell {
+  border: 1px solid var(--surface-divider);
+  background-color: var(--surface-bg-strong);
+  @apply overflow-hidden rounded-xl;
+}
+
+.table-scroll {
+  @apply overflow-x-auto;
+}
+
+.table-root {
+  @apply min-w-full;
+}
+
+.table-head {
+  background-color: var(--table-head-bg);
+  border-bottom: 1px solid var(--surface-divider);
+}
+
+.table-head-cell {
+  color: var(--text-primary);
+  @apply px-4 py-3 text-left text-sm font-semibold tracking-wider;
+}
+
+.table-sort-button {
+  @apply inline-flex items-center gap-1.5 text-left;
+}
+
+.table-sort-icon {
+  color: var(--text-muted);
+  @apply inline-flex items-center;
+}
+
+.table-body-row {
+  border-top: 1px solid var(--table-row-divider);
+}
+
+.table-cell-primary {
+  color: var(--text-primary);
+  @apply px-4 py-3 text-sm;
+}
+
+.table-cell-secondary {
+  color: var(--text-secondary);
+  @apply px-4 py-3 text-sm;
+}
+

src/styles/utilities.css

@@ -0,0 +1 @@
+@tailwind utilities;

src/types/sort.ts

@@ -0,0 +1,6 @@
+export type SortDirection = 'asc' | 'desc';
+
+export type SortState = {
+  field: string;
+  direction: SortDirection;
+};

tailwind-preset.cjs

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        accent: {
+          300: '#a89bbf',
+          400: '#9587ad',
+          500: '#7d6f98',
+          600: '#6a5d84'
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif']
+      },
+      boxShadow: {
+        glow: '0 0 0 1px rgba(63,63,70,0.65), 0 18px 44px rgba(0,0,0,0.45)'
+      }
+    }
+  }
+};

tailwind.build.config.cjs

@@ -0,0 +1,16 @@
+const webUiPreset = require('./tailwind-preset.cjs');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [webUiPreset],
+  content: [
+    './src/**/*.{ts,tsx,js,jsx}'
+  ],
+  corePlugins: {
+    preflight: false
+  },
+  theme: {
+    extend: {}
+  },
+  plugins: []
+};

tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "rootDir": "src",
+    "outDir": "dist",
+    "declarationMap": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowImportingTsExtensions": false,
+    "noEmit": true,
+    "types": ["react", "react-dom"]
+  },
+  "include": ["src"]
+}

vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        'components/MDXEditorField': resolve(__dirname, 'src/components/MDXEditorField.tsx')
+      },
+      name: 'PanicWebUi',
+      formats: ['es'],
+      fileName: (_format, entryName) => `${entryName}.js`
+    },
+    rollupOptions: {
+      external: [
+        'react',
+        'react-dom',
+        'react-router-dom',
+        '@heroicons/react',
+        '@mdxeditor/editor'
+      ]
+    }
+  }
+});