@omniviewdev/ui 0.1.0

package/dist/tokens.css

@@ -0,0 +1,252 @@
+/*
+ * Omniview Design Tokens
+ *
+ * Three-tier token architecture:
+ *   Tier 1 — Primitives: raw scale values (colors, spacing units)
+ *   Tier 2 — Semantic: purpose-named tokens that reference primitives
+ *   Tier 3 — Component: scoped to specific UI regions (deferred)
+ *
+ * Naming convention: --ov-{category}-{role}-{modifier}
+ */
+
+:root {
+  /* ================================================================
+   * TIER 1 — PRIMITIVES
+   * Raw scale values. Never use these directly in components.
+   * ================================================================ */
+
+  /* Neutral scale (14-step, cool-tinted) */
+  --ov-scale-gray-0:  #0D1117;
+  --ov-scale-gray-1:  #10141A;
+  --ov-scale-gray-2:  #151B23;
+  --ov-scale-gray-3:  #1A2130;
+  --ov-scale-gray-4:  #1F2937;
+  --ov-scale-gray-5:  #253345;
+  --ov-scale-gray-6:  #2D3D52;
+  --ov-scale-gray-7:  #364559;
+  --ov-scale-gray-8:  #3E4F66;
+  --ov-scale-gray-9:  #6B7D96;
+  --ov-scale-gray-10: #8B9BB5;
+  --ov-scale-gray-11: #ABB8CC;
+  --ov-scale-gray-12: #CBD5E1;
+  --ov-scale-gray-13: #ECF0F6;
+
+  /* ================================================================
+   * TIER 2 — SEMANTIC TOKENS (default: dark theme)
+   * ================================================================ */
+
+  /* --- Backgrounds --- */
+  --ov-bg-base:             var(--ov-scale-gray-0);
+  --ov-bg-surface:          var(--ov-scale-gray-2);
+  --ov-bg-surface-raised:   var(--ov-scale-gray-3);
+  --ov-bg-surface-overlay:  var(--ov-scale-gray-4);
+  --ov-bg-surface-inset:    var(--ov-scale-gray-1);
+
+  /* --- Foreground / text --- */
+  --ov-fg-base:     #ECF0F6;
+  --ov-fg-default:  rgba(236, 240, 246, 0.92);
+  --ov-fg-muted:    rgba(236, 240, 246, 0.64);
+  --ov-fg-faint:    rgba(236, 240, 246, 0.44);
+  --ov-fg-disabled: rgba(236, 240, 246, 0.28);
+  --ov-fg-accent:   #79C0FF;
+
+  /* --- Borders --- */
+  --ov-border-default:  var(--ov-scale-gray-8);
+  --ov-border-muted:    var(--ov-scale-gray-7);
+  --ov-border-emphasis: var(--ov-scale-gray-9);
+
+  /* --- Accent --- */
+  --ov-accent:        #58A6FF;
+  --ov-accent-muted:  rgba(88, 166, 255, 0.20);
+  --ov-accent-subtle: rgba(88, 166, 255, 0.10);
+  --ov-accent-fg:     #79C0FF;
+
+  /* --- Status: Success --- */
+  --ov-success-emphasis: #1A7F37;
+  --ov-success-default:  #56D364;
+  --ov-success-muted:    rgba(86, 211, 100, 0.12);
+
+  /* --- Status: Warning --- */
+  --ov-warning-emphasis: #9A6700;
+  --ov-warning-default:  #E3B341;
+  --ov-warning-muted:    rgba(227, 179, 65, 0.12);
+
+  /* --- Status: Danger --- */
+  --ov-danger-emphasis: #CF222E;
+  --ov-danger-default:  #F47067;
+  --ov-danger-muted:    rgba(244, 112, 103, 0.12);
+
+  /* --- Status: Info --- */
+  --ov-info-emphasis: #1F6FEB;
+  --ov-info-default:  #58A6FF;
+  --ov-info-muted:    rgba(88, 166, 255, 0.12);
+
+  /* --- Typography --- */
+  --ov-font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
+                  Helvetica, Arial, sans-serif;
+  --ov-font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code",
+                  Menlo, Consolas, "Liberation Mono", monospace;
+
+  --ov-text-xs:   0.6875rem;   /* 11px */
+  --ov-text-sm:   0.75rem;     /* 12px */
+  --ov-text-base: 0.875rem;    /* 14px */
+  --ov-text-md:   0.9375rem;   /* 15px */
+  --ov-text-lg:   1rem;        /* 16px */
+  --ov-text-xl:   1.25rem;     /* 20px */
+  --ov-text-2xl:  1.5rem;      /* 24px */
+
+  --ov-weight-regular:  400;
+  --ov-weight-medium:   500;
+  --ov-weight-semibold: 600;
+
+  --ov-mono-size:    13px;
+  --ov-mono-leading: 1.54;
+  --ov-mono-weight:  400;
+
+  /* --- Spacing (4px grid) --- */
+  --ov-space-0:  0px;
+  --ov-space-1:  4px;
+  --ov-space-2:  8px;
+  --ov-space-3:  12px;
+  --ov-space-4:  16px;
+  --ov-space-5:  20px;
+  --ov-space-6:  24px;
+  --ov-space-8:  32px;
+  --ov-space-10: 40px;
+  --ov-space-12: 48px;
+
+  /* --- Layout dimensions --- */
+  --ov-header-height:        38px;
+  --ov-footer-height:        24px;
+  --ov-sidenav-width:        42px;
+  --ov-sidebar-width:        260px;
+  --ov-sidebar-min-width:    200px;
+  --ov-sidebar-max-width:    400px;
+  --ov-detail-panel-width:   560px;
+  --ov-detail-panel-min:     400px;
+  --ov-detail-panel-max:     800px;
+  --ov-bottom-drawer-height: 280px;
+
+  /* --- Elevation: Shadows --- */
+  --ov-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
+  --ov-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
+  --ov-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.40), 0 4px 8px rgba(0, 0, 0, 0.30);
+  --ov-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);
+
+  /* --- Elevation: Radius --- */
+  --ov-radius-none: 0;
+  --ov-radius-sm:   4px;
+  --ov-radius-md:   6px;
+  --ov-radius-lg:   8px;
+  --ov-radius-xl:   12px;
+  --ov-radius-full: 9999px;
+
+  /* --- Motion: Durations --- */
+  --ov-duration-instant: 0ms;
+  --ov-duration-fast:    100ms;
+  --ov-duration-normal:  200ms;
+  --ov-duration-slow:    300ms;
+
+  /* --- Motion: Easing --- */
+  --ov-ease-default: cubic-bezier(0.2, 0, 0, 1);
+  --ov-ease-in:      cubic-bezier(0.4, 0, 1, 1);
+  --ov-ease-out:     cubic-bezier(0, 0, 0.2, 1);
+
+  /* --- Interactive states --- */
+  --ov-state-hover:    rgba(255, 255, 255, 0.04);
+  --ov-state-active:   rgba(255, 255, 255, 0.07);
+  --ov-state-selected: var(--ov-accent-subtle);
+  --ov-state-focus:    0 0 0 2px var(--ov-accent);
+}
+
+/* ================================================================
+ * LIGHT THEME OVERRIDES
+ * ================================================================ */
+[data-ov-theme="light"] {
+  --ov-bg-base:             #FFFFFF;
+  --ov-bg-surface:          #F6F8FA;
+  --ov-bg-surface-raised:   #FFFFFF;
+  --ov-bg-surface-overlay:  #FFFFFF;
+  --ov-bg-surface-inset:    #EFF2F5;
+
+  --ov-fg-base:     #1F2328;
+  --ov-fg-default:  rgba(31, 35, 40, 0.92);
+  --ov-fg-muted:    rgba(31, 35, 40, 0.64);
+  --ov-fg-faint:    rgba(31, 35, 40, 0.44);
+  --ov-fg-disabled: rgba(31, 35, 40, 0.28);
+  --ov-fg-accent:   #0969DA;
+
+  --ov-border-default: #D0D7DE;
+  --ov-border-muted:   #D8DEE4;
+  --ov-border-emphasis: #636C76;
+
+  --ov-accent:        #0969DA;
+  --ov-accent-muted:  rgba(9, 105, 218, 0.20);
+  --ov-accent-subtle: rgba(9, 105, 218, 0.10);
+  --ov-accent-fg:     #0550AE;
+
+  --ov-success-emphasis: #1A7F37;
+  --ov-success-default:  #1A7F37;
+  --ov-success-muted:    rgba(26, 127, 55, 0.10);
+
+  --ov-warning-emphasis: #9A6700;
+  --ov-warning-default:  #9A6700;
+  --ov-warning-muted:    rgba(154, 103, 0, 0.10);
+
+  --ov-danger-emphasis: #CF222E;
+  --ov-danger-default:  #CF222E;
+  --ov-danger-muted:    rgba(207, 34, 46, 0.10);
+
+  --ov-info-emphasis: #0969DA;
+  --ov-info-default:  #0969DA;
+  --ov-info-muted:    rgba(9, 105, 218, 0.10);
+
+  --ov-shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.10), 0 1px 2px rgba(31, 35, 40, 0.06);
+  --ov-shadow-md: 0 4px 12px rgba(31, 35, 40, 0.12), 0 2px 4px rgba(31, 35, 40, 0.08);
+  --ov-shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.16), 0 4px 8px rgba(31, 35, 40, 0.10);
+  --ov-shadow-xl: 0 16px 48px rgba(31, 35, 40, 0.20);
+
+  --ov-state-hover:    rgba(31, 35, 40, 0.04);
+  --ov-state-active:   rgba(31, 35, 40, 0.07);
+  --ov-state-selected: var(--ov-accent-subtle);
+  --ov-state-focus:    0 0 0 2px var(--ov-accent);
+}
+
+/* ================================================================
+ * HIGH CONTRAST THEME OVERRIDES
+ * ================================================================ */
+[data-ov-theme="high-contrast"] {
+  --ov-bg-base:             #010409;
+  --ov-bg-surface:          #0D1117;
+  --ov-bg-surface-raised:   #161B22;
+  --ov-bg-surface-overlay:  #1F2937;
+  --ov-bg-surface-inset:    #010409;
+
+  --ov-fg-base:     #FFFFFF;
+  --ov-fg-default:  #F0F6FC;
+  --ov-fg-muted:    #C9D1D9;
+  --ov-fg-faint:    #8B949E;
+  --ov-fg-disabled: #484F58;
+  --ov-fg-accent:   #79C0FF;
+
+  --ov-border-default: #6E7681;
+  --ov-border-muted:   #3D444D;
+  --ov-border-emphasis: #F0F6FC;
+
+  --ov-accent:        #58A6FF;
+  --ov-accent-muted:  rgba(88, 166, 255, 0.30);
+  --ov-accent-subtle: rgba(88, 166, 255, 0.15);
+  --ov-accent-fg:     #79C0FF;
+}
+
+/* ================================================================
+ * REDUCED MOTION
+ * ================================================================ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --ov-duration-instant: 0ms;
+    --ov-duration-fast:    0ms;
+    --ov-duration-normal:  0ms;
+    --ov-duration-slow:    0ms;
+  }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @omniviewdev/ui type system
+ *
+ * Re-exports all variant types and mapping utilities.
+ */
+export type { SemanticColor, Emphasis, ComponentSize, Density, Shape, Elevation, Status, } from './variants';
+export { toMuiColor, toMuiVariant, toMuiSize, toMuiInputSize, sizeOverrideSx, toBorderRadius, toCssColor, statusToColor, INPUT_HEIGHTS, } from './maps';

package/dist/types/maps.d.ts

@@ -0,0 +1,25 @@
+import { SemanticColor, Emphasis, ComponentSize, Shape, Status } from './variants';
+/** Maps our SemanticColor to a MUI palette color prop value */
+export declare function toMuiColor(color: SemanticColor): string;
+/** Maps our Emphasis to a MUI variant prop value */
+export declare function toMuiVariant(emphasis: Emphasis): string;
+/** Maps our ComponentSize to a MUI size prop value */
+export declare function toMuiSize(size: ComponentSize): 'small' | 'medium' | 'large';
+/**
+ * Returns sx overrides for sizes that MUI doesn't natively support (xs, xl).
+ * Returns undefined if no override is needed.
+ */
+export declare function sizeOverrideSx(size: ComponentSize): Record<string, unknown> | undefined;
+/** Height tokens for input components (Select, Autocomplete, TextField, TextArea). */
+export declare const INPUT_HEIGHTS: Record<ComponentSize, string>;
+/**
+ * Maps ComponentSize to the MUI size for FormControl / InputLabel internals.
+ * xs/sm → 'small' (compact label font), md/lg/xl → 'medium' (standard label font).
+ */
+export declare function toMuiInputSize(size: ComponentSize): 'small' | 'medium';
+/** Maps our Shape to a CSS border-radius value */
+export declare function toBorderRadius(shape: Shape): string | number;
+/** Maps our SemanticColor to a --ov-* CSS custom property */
+export declare function toCssColor(color: SemanticColor): string;
+/** Maps a Status value to the corresponding SemanticColor */
+export declare function statusToColor(status: Status): SemanticColor;

package/dist/types/variants.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Global Variant Type System
+ *
+ * Canonical types used by every component in @omniviewdev/ui.
+ * Consumers use our API (emphasis, SemanticColor, ComponentSize) —
+ * MUI prop names are hidden behind the mapping layer in maps.ts.
+ */
+/** Consistent color prop across all components */
+export type SemanticColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'accent' | 'danger' | 'muted';
+/** Visual weight / fill style */
+export type Emphasis = 'solid' | 'soft' | 'outline' | 'ghost' | 'link';
+/** Consistent sizing */
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Density for tables/forms */
+export type Density = 'compact' | 'comfortable' | 'spacious';
+/** Border radius presets */
+export type Shape = 'rounded' | 'pill' | 'square';
+/** Surface depth */
+export type Elevation = 'flat' | 'raised' | 'overlay';
+/** Status values for indicators */
+export type Status = 'healthy' | 'warning' | 'degraded' | 'error' | 'unknown' | 'pending';

package/dist/types.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={primary:"primary",secondary:"secondary",success:"success",warning:"warning",error:"error",info:"info",neutral:"default",accent:"primary",danger:"error",muted:"inherit"};function n(r){return e[r]}const o={solid:"contained",soft:"soft",outline:"outlined",ghost:"text",link:"link"};function t(r){return o[r]}const a={xs:"small",sm:"small",md:"medium",lg:"large",xl:"large"};function i(r){return a[r]}function u(r){if(r==="xs")return{minHeight:"1.5rem",padding:"2px 8px",fontSize:"0.6875rem"};if(r==="xl")return{minHeight:"3.25rem",padding:"12px 24px",fontSize:"1rem"}}const s={xs:"1.75rem",sm:"2.25rem",md:"2.75rem",lg:"3.25rem",xl:"3.75rem"};function d(r){return r==="xs"||r==="sm"?"small":"medium"}const l={rounded:"var(--ov-radius-md, 6px)",pill:999,square:0};function c(r){return l[r]}const m={primary:"var(--ov-accent)",secondary:"var(--ov-fg-muted)",success:"var(--ov-success-default)",warning:"var(--ov-warning-default)",error:"var(--ov-danger-default)",info:"var(--ov-info-default)",neutral:"var(--ov-fg-default)",accent:"var(--ov-accent)",danger:"var(--ov-danger-default)",muted:"var(--ov-fg-muted)"};function f(r){return m[r]}const g={healthy:"success",warning:"warning",degraded:"warning",error:"error",unknown:"neutral",pending:"info"};function v(r){return g[r]}exports.INPUT_HEIGHTS=s;exports.sizeOverrideSx=u;exports.statusToColor=v;exports.toBorderRadius=c;exports.toCssColor=f;exports.toMuiColor=n;exports.toMuiInputSize=d;exports.toMuiSize=i;exports.toMuiVariant=t;

package/dist/types.js

@@ -0,0 +1,96 @@
+const n = {
+  primary: "primary",
+  secondary: "secondary",
+  success: "success",
+  warning: "warning",
+  error: "error",
+  info: "info",
+  neutral: "default",
+  accent: "primary",
+  danger: "error",
+  muted: "inherit"
+};
+function u(r) {
+  return n[r];
+}
+const e = {
+  solid: "contained",
+  soft: "soft",
+  outline: "outlined",
+  ghost: "text",
+  link: "link"
+};
+function s(r) {
+  return e[r];
+}
+const o = {
+  xs: "small",
+  sm: "small",
+  md: "medium",
+  lg: "large",
+  xl: "large"
+};
+function d(r) {
+  return o[r];
+}
+function c(r) {
+  if (r === "xs")
+    return { minHeight: "1.5rem", padding: "2px 8px", fontSize: "0.6875rem" };
+  if (r === "xl")
+    return { minHeight: "3.25rem", padding: "12px 24px", fontSize: "1rem" };
+}
+const l = {
+  xs: "1.75rem",
+  sm: "2.25rem",
+  md: "2.75rem",
+  lg: "3.25rem",
+  xl: "3.75rem"
+};
+function m(r) {
+  return r === "xs" || r === "sm" ? "small" : "medium";
+}
+const t = {
+  rounded: "var(--ov-radius-md, 6px)",
+  pill: 999,
+  square: 0
+};
+function f(r) {
+  return t[r];
+}
+const a = {
+  primary: "var(--ov-accent)",
+  secondary: "var(--ov-fg-muted)",
+  success: "var(--ov-success-default)",
+  warning: "var(--ov-warning-default)",
+  error: "var(--ov-danger-default)",
+  info: "var(--ov-info-default)",
+  neutral: "var(--ov-fg-default)",
+  accent: "var(--ov-accent)",
+  danger: "var(--ov-danger-default)",
+  muted: "var(--ov-fg-muted)"
+};
+function g(r) {
+  return a[r];
+}
+const i = {
+  healthy: "success",
+  warning: "warning",
+  degraded: "warning",
+  error: "error",
+  unknown: "neutral",
+  pending: "info"
+};
+function v(r) {
+  return i[r];
+}
+export {
+  l as INPUT_HEIGHTS,
+  c as sizeOverrideSx,
+  v as statusToColor,
+  f as toBorderRadius,
+  g as toCssColor,
+  u as toMuiColor,
+  m as toMuiInputSize,
+  d as toMuiSize,
+  s as toMuiVariant
+};

package/dist/typography/CodeBlock.d.ts

@@ -0,0 +1,15 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface CodeBlockProps {
+    children: string;
+    language?: string;
+    lineNumbers?: boolean;
+    copy?: boolean;
+    maxHeight?: number | string;
+    wrap?: boolean;
+    sx?: SxProps<Theme>;
+}
+declare function CodeBlock({ children, lineNumbers, copy, maxHeight, wrap, sx, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CodeBlock {
+    var displayName: string;
+}
+export default CodeBlock;

package/dist/typography/CodeInline.d.ts

@@ -0,0 +1,10 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface CodeInlineProps {
+    children: string;
+    sx?: SxProps<Theme>;
+}
+declare function CodeInline({ children, sx }: CodeInlineProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CodeInline {
+    var displayName: string;
+}
+export default CodeInline;

package/dist/typography/Heading.d.ts

@@ -0,0 +1,13 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface HeadingProps {
+    children: React.ReactNode;
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    id?: string;
+    copyLink?: boolean;
+    sx?: SxProps<Theme>;
+}
+declare function Heading({ children, level, id, copyLink, sx, }: HeadingProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Heading {
+    var displayName: string;
+}
+export default Heading;

package/dist/typography/Link.d.ts

@@ -0,0 +1,18 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { SemanticColor } from '../types';
+import { ReactNode, MouseEventHandler } from 'react';
+export interface LinkProps {
+    children: ReactNode;
+    href?: string;
+    color?: SemanticColor;
+    underline?: 'always' | 'hover' | 'none';
+    /** Opens in new tab with rel="noopener noreferrer" */
+    external?: boolean;
+    onClick?: MouseEventHandler;
+    sx?: SxProps<Theme>;
+}
+declare function Link({ children, href, color, underline, external, onClick, sx, }: LinkProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Link {
+    var displayName: string;
+}
+export default Link;

package/dist/typography/Text.d.ts

@@ -0,0 +1,22 @@
+import { SxProps, Theme } from '@mui/material/styles';
+import { SemanticColor, ComponentSize } from '../types';
+export type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+export interface TextProps {
+    children: React.ReactNode;
+    variant?: 'body' | 'caption' | 'overline' | 'mono' | 'code';
+    color?: SemanticColor;
+    size?: ComponentSize;
+    weight?: TextWeight;
+    truncate?: boolean;
+    noWrap?: boolean;
+    lines?: number;
+    muted?: boolean;
+    inline?: boolean;
+    component?: React.ElementType;
+    sx?: SxProps<Theme>;
+}
+declare function Text({ children, variant, color, size, weight, truncate, noWrap, lines, muted, inline: _inline, component, sx, }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Text {
+    var displayName: string;
+}
+export default Text;

package/dist/typography/index.d.ts

@@ -0,0 +1,10 @@
+export { default as Text } from './Text';
+export type { TextProps } from './Text';
+export { default as Heading } from './Heading';
+export type { HeadingProps } from './Heading';
+export { default as CodeInline } from './CodeInline';
+export type { CodeInlineProps } from './CodeInline';
+export { default as CodeBlock } from './CodeBlock';
+export type { CodeBlockProps } from './CodeBlock';
+export { default as Link } from './Link';
+export type { LinkProps } from './Link';

package/dist/typography.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("./Text-Mk6Uyg1w.cjs"),i=require("react/jsx-runtime"),v=require("@mui/material/Typography"),s=require("@mui/material/Box"),y=require("@mui/icons-material/Link"),h=require("./CodeBlock-CIyG0DbW.cjs"),m=require("@mui/material/Link"),x=require("./types.cjs"),b={1:"h1",2:"h2",3:"h3",4:"h4",5:"h5",6:"h6"};function l({children:n,level:o=2,id:e,copyLink:t=!1,sx:r}){const a=typeof o=="string"?parseInt(o.replace("h",""),10):o,c=b[a],u=()=>{if(e){const f=`${window.location.origin}${window.location.pathname}#${e}`;navigator.clipboard.writeText(f)}};return i.jsxs(v,{variant:c,id:e,sx:{color:"var(--ov-fg-base)",fontWeight:"var(--ov-weight-semibold)",display:"flex",alignItems:"center",gap:.5,"&:hover .ov-heading-anchor":{opacity:1},...typeof r=="object"&&!Array.isArray(r)?r:{}},children:[n,t&&e&&i.jsx(s,{component:"button",className:"ov-heading-anchor",onClick:u,sx:{opacity:0,transition:"opacity 150ms",background:"none",border:"none",cursor:"pointer",color:"var(--ov-fg-faint)",display:"inline-flex",p:0,"&:hover":{color:"var(--ov-fg-default)"}},children:i.jsx(y,{sx:{fontSize:"0.7em"}})})]})}l.displayName="Heading";function d({children:n,sx:o}){return i.jsx(s,{component:"code",sx:{fontFamily:"var(--ov-font-mono)",fontSize:"0.85em",backgroundColor:"var(--ov-bg-surface-inset)",color:"var(--ov-fg-default)",padding:"2px 6px",borderRadius:"3px",whiteSpace:"nowrap",...typeof o=="object"&&!Array.isArray(o)?o:{}},children:n})}d.displayName="CodeInline";function p({children:n,href:o,color:e="primary",underline:t="hover",external:r=!1,onClick:a,sx:c}){return i.jsx(m,{href:o,color:x.toMuiColor(e),underline:t,onClick:a,...r?{target:"_blank",rel:"noopener noreferrer"}:{},sx:c,children:n})}p.displayName="Link";exports.Text=g.Text;exports.CodeBlock=h.CodeBlock;exports.CodeInline=d;exports.Heading=l;exports.Link=p;

package/dist/typography.js

@@ -0,0 +1,120 @@
+import { T as A } from "./Text-By4P3in5.js";
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import m from "@mui/material/Typography";
+import c from "@mui/material/Box";
+import d from "@mui/icons-material/Link";
+import { C as S } from "./CodeBlock-B1iQO7zU.js";
+import h from "@mui/material/Link";
+import { toMuiColor as v } from "./types.js";
+const g = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+function y({
+  children: n,
+  level: o = 2,
+  id: r,
+  copyLink: i = !1,
+  sx: e
+}) {
+  const t = typeof o == "string" ? parseInt(o.replace("h", ""), 10) : o, p = g[t], l = () => {
+    if (r) {
+      const f = `${window.location.origin}${window.location.pathname}#${r}`;
+      navigator.clipboard.writeText(f);
+    }
+  };
+  return /* @__PURE__ */ s(
+    m,
+    {
+      variant: p,
+      id: r,
+      sx: {
+        color: "var(--ov-fg-base)",
+        fontWeight: "var(--ov-weight-semibold)",
+        display: "flex",
+        alignItems: "center",
+        gap: 0.5,
+        "&:hover .ov-heading-anchor": { opacity: 1 },
+        ...typeof e == "object" && !Array.isArray(e) ? e : {}
+      },
+      children: [
+        n,
+        i && r && /* @__PURE__ */ a(
+          c,
+          {
+            component: "button",
+            className: "ov-heading-anchor",
+            onClick: l,
+            sx: {
+              opacity: 0,
+              transition: "opacity 150ms",
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "var(--ov-fg-faint)",
+              display: "inline-flex",
+              p: 0,
+              "&:hover": { color: "var(--ov-fg-default)" }
+            },
+            children: /* @__PURE__ */ a(d, { sx: { fontSize: "0.7em" } })
+          }
+        )
+      ]
+    }
+  );
+}
+y.displayName = "Heading";
+function u({ children: n, sx: o }) {
+  return /* @__PURE__ */ a(
+    c,
+    {
+      component: "code",
+      sx: {
+        fontFamily: "var(--ov-font-mono)",
+        fontSize: "0.85em",
+        backgroundColor: "var(--ov-bg-surface-inset)",
+        color: "var(--ov-fg-default)",
+        padding: "2px 6px",
+        borderRadius: "3px",
+        whiteSpace: "nowrap",
+        ...typeof o == "object" && !Array.isArray(o) ? o : {}
+      },
+      children: n
+    }
+  );
+}
+u.displayName = "CodeInline";
+function x({
+  children: n,
+  href: o,
+  color: r = "primary",
+  underline: i = "hover",
+  external: e = !1,
+  onClick: t,
+  sx: p
+}) {
+  return /* @__PURE__ */ a(
+    h,
+    {
+      href: o,
+      color: v(r),
+      underline: i,
+      onClick: t,
+      ...e ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      sx: p,
+      children: n
+    }
+  );
+}
+x.displayName = "Link";
+export {
+  S as CodeBlock,
+  u as CodeInline,
+  y as Heading,
+  x as Link,
+  A as Text
+};