@azmr/ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,5 +1,172 @@
+export { a as Button, b as ButtonProps, c as buttonVariants } from './button-CYt2Zw3D.js';
+export { Input, InputProps } from './input.js';
 import * as react from 'react';
+import { SVGProps, HTMLAttributes, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, ReactElement, ComponentType } from 'react';
 import { Signal } from '@azmr/core';
+import { ClassValue } from 'clsx';
+export { ClassValue } from 'clsx';
+export { u as useSignal } from './useSignal-C-3ZGURN.js';
+import 'class-variance-authority';
+import '@base-ui/react/button';
+import 'class-variance-authority/types';
+import '@base-ui/react/input';
+
+interface SpinnerProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /**
+     * Accessible name. When set the spinner is announced as a status ("Loading customers");
+     * when omitted it is decorative and hidden from assistive technology (use that when the
+     * surrounding control already says it is busy, as `Button loading` does).
+     */
+    label?: string;
+}
+/**
+ * An indeterminate progress indicator. It keeps spinning under `prefers-reduced-motion`
+ * (`data-motion="essential"`) because a frozen spinner reads as a hung page.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<SVGSVGElement>>;
+
+/**
+ * The type scale: every variant's semantic element and its classes, in one place. Colours are
+ * tokens only. Classes are spelled out in full so the Tailwind scanner finds them in `dist`.
+ */
+declare const typographyVariants: {
+    readonly h1: {
+        readonly element: "h1";
+        readonly classes: "scroll-m-20 text-4xl font-bold tracking-tight text-foreground";
+    };
+    readonly h2: {
+        readonly element: "h2";
+        readonly classes: "scroll-m-20 text-3xl font-semibold tracking-tight text-foreground";
+    };
+    readonly h3: {
+        readonly element: "h3";
+        readonly classes: "scroll-m-20 text-2xl font-semibold tracking-tight text-foreground";
+    };
+    readonly h4: {
+        readonly element: "h4";
+        readonly classes: "scroll-m-20 text-xl font-semibold tracking-tight text-foreground";
+    };
+    readonly h5: {
+        readonly element: "h5";
+        readonly classes: "scroll-m-20 text-lg font-semibold text-foreground";
+    };
+    readonly h6: {
+        readonly element: "h6";
+        readonly classes: "scroll-m-20 text-base font-semibold text-foreground";
+    };
+    readonly lead: {
+        readonly element: "p";
+        readonly classes: "text-lg text-muted-foreground";
+    };
+    readonly body: {
+        readonly element: "p";
+        readonly classes: "text-base";
+    };
+    readonly small: {
+        readonly element: "p";
+        readonly classes: "text-sm";
+    };
+    readonly caption: {
+        readonly element: "span";
+        readonly classes: "text-xs text-muted-foreground";
+    };
+    readonly overline: {
+        readonly element: "span";
+        readonly classes: "text-xs font-medium uppercase tracking-wider text-muted-foreground";
+    };
+};
+type TypographyVariant = keyof typeof typographyVariants;
+declare const ALIGN_CLASSES: {
+    readonly left: "text-left";
+    readonly center: "text-center";
+    readonly right: "text-right";
+    readonly justify: "text-justify";
+};
+type TypographyAlign = keyof typeof ALIGN_CLASSES;
+
+interface TypographyOwnProps {
+    /** The type-scale step. It picks the semantic element and the look. Default `body`. */
+    variant?: TypographyVariant;
+    align?: TypographyAlign;
+    /** Truncate to one line with an ellipsis. */
+    noWrap?: boolean;
+    /** Add a small bottom margin (MUI's `gutterBottom`). */
+    gutterBottom?: boolean;
+}
+type TypographyProps<T extends ElementType = "p"> = TypographyOwnProps & {
+    /** Render a different element or component, keeping the look: `variant="h1" as="h2"`. */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof TypographyOwnProps | "as">;
+/**
+ * Text with a type-scale variant. The variant decides the semantic element (`h1` to `h6`, `p`,
+ * `span`), and `as` overrides it without changing the look. Server-safe.
+ */
+declare const Typography: <T extends ElementType = "p">(props: TypographyProps<T> & {
+    ref?: Ref<HTMLElement>;
+}) => ReactElement | null;
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingSize = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface HeadingProps extends Omit<HTMLAttributes<HTMLHeadingElement>, "children">, Omit<TypographyOwnProps, "variant"> {
+    /** The semantic level (`<h2>`). Default 2. */
+    level?: HeadingLevel;
+    /** The visual size when it should differ from the level, e.g. a quiet `<h2>`. */
+    size?: HeadingSize;
+    children?: ReactNode;
+}
+/** A heading whose semantic level and visual size are separate decisions. */
+declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const TONE_CLASSES: {
+    readonly muted: "text-muted-foreground";
+    readonly destructive: "text-destructive";
+    readonly success: "text-success";
+    readonly warning: "text-warning-text";
+    readonly info: "text-info";
+};
+declare const SIZE_CLASSES: {
+    readonly sm: "text-sm";
+    readonly base: "text-base";
+    readonly lg: "text-lg";
+};
+declare const WEIGHT_CLASSES: {
+    readonly normal: "font-normal";
+    readonly medium: "font-medium";
+    readonly semibold: "font-semibold";
+    readonly bold: "font-bold";
+};
+interface TextProps extends HTMLAttributes<HTMLElement> {
+    as?: "p" | "span" | "div" | "label" | "strong" | "em" | "small";
+    size?: keyof typeof SIZE_CLASSES;
+    tone?: keyof typeof TONE_CLASSES;
+    weight?: keyof typeof WEIGHT_CLASSES;
+}
+/** Running text. A paragraph by default; `tone` uses semantic colour tokens. */
+declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
+declare const UNDERLINE_CLASSES: {
+    readonly always: "underline";
+    readonly hover: "hover:underline focus-visible:underline";
+    readonly none: "no-underline";
+};
+interface LinkOwnProps {
+    /**
+     * `always` (default) keeps links distinguishable without relying on colour alone;
+     * `hover` underlines on hover and focus; `none` removes it.
+     */
+    underline?: keyof typeof UNDERLINE_CLASSES;
+    /** Opens in a new tab with `rel="noopener noreferrer"` and tells screen readers. */
+    external?: boolean;
+}
+type LinkProps<T extends ElementType = "a"> = LinkOwnProps & {
+    /** Render a router link: `<Link as={NextLink} href="/x">`. */
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, keyof LinkOwnProps | "as">;
+/** A link. Underlined by default, with a full-strength focus ring. Server-safe. */
+declare const Link: <T extends ElementType = "a">(props: LinkProps<T> & {
+    ref?: Ref<HTMLAnchorElement>;
+}) => ReactElement | null;
+/** Inline code. */
+declare const Code: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
+/** A keyboard key, for documenting shortcuts. */
+declare const Kbd: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & react.RefAttributes<HTMLElement>>;
 
 interface GridProps<T extends Record<string, unknown>> {
     signal: Signal<T[]>;
@@ -15,9 +182,77 @@ interface GridProps<T extends Record<string, unknown>> {
  */
 declare function Grid<T extends Record<string, unknown>>({ signal, columns, labels, emptyMessage, }: GridProps<T>): react.JSX.Element;
 
+/** The size scale. A number is a literal pixel size (width and height). */
+type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | number;
+/**
+ * The props the Icon passes to the icon component it renders. Lucide, Tabler and plain
+ * `(props: SVGProps<SVGSVGElement>) => <svg />` components all accept these, so any of them
+ * can be used as an icon. Every prop is optional so the library components assign to it.
+ */
+interface IconRenderProps {
+    className?: string;
+    width?: number | string;
+    height?: number | string;
+    strokeWidth?: number | string;
+    role?: string;
+    "aria-hidden"?: boolean | "true" | "false";
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "data-motion"?: string;
+}
+type IconComponent = ComponentType<IconRenderProps>;
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref" | "size" | "children"> {
+    /** The icon to render: a Lucide or Tabler icon, or your own SVG component. */
+    icon?: IconComponent;
+    /** Looks the icon up in the registry (`registerIcons`). `icon` wins when both are given. */
+    name?: string;
+    /** `xs` .. `xl` follow the size tokens; a number is a pixel size. Default `md`. */
+    size?: IconSize;
+    /** Turns the icon into a loading indicator. It keeps spinning under reduced motion. */
+    spin?: boolean;
+    /**
+     * Decorative by default (`aria-hidden`). Give `aria-label` or `aria-labelledby` to make the
+     * icon meaningful: it then has `role="img"` and an accessible name.
+     */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+}
+
+/**
+ * Builds an `<Icon name="...">` bound to a fixed set of icons, with the names type-checked.
+ * Unlike `registerIcons`, nothing is global and only the icons you list are bundled.
+ *
+ * ```tsx
+ * const { Icon } = createIconSet({ check: Check, "my-logo": MyLogo });
+ * <Icon name="check" />
+ * ```
+ */
+declare function createIconSet<const T extends Record<string, IconComponent>>(icons: T): {
+    Icon: react.ForwardRefExoticComponent<Omit<IconProps, "name" | "icon"> & {
+        name: keyof T & string;
+    } & react.RefAttributes<SVGSVGElement>>;
+    names: readonly (keyof T & string)[];
+};
+
+/**
+ * Renders an icon component (Lucide, Tabler or your own SVG) with consistent size, stroke,
+ * motion and accessibility. Server-safe: no hooks, no `"use client"`.
+ *
+ * Decorative by default; `aria-label` / `aria-labelledby` make it a labelled image.
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+
+/**
+ * Registers custom icons for `<Icon name="..." />`. A later registration replaces an earlier one
+ * with the same name. Validated up front and atomic: if any entry is invalid, none is registered.
+ */
+declare function registerIcons(icons: Record<string, IconComponent>): void;
+
 /**
- * React hook that subscribes to a Signal and triggers re-renders on change.
+ * Merge class names, resolving conflicting Tailwind utilities so the last one
+ * wins (`cn("p-2", "p-4")` → `"p-4"`). Every component accepts `className` and
+ * passes it through `cn` last, so callers can always override a default.
  */
-declare function useSignal<T>(signal: Signal<T>): T;
+declare function cn(...inputs: ClassValue[]): string;
 
-export { Grid, useSignal };
+export { Code, Grid, Heading, type HeadingProps, Icon, type IconComponent, type IconProps, type IconSize, Kbd, Link, type LinkProps, Spinner, type SpinnerProps, Text, type TextProps, Typography, type TypographyProps, type TypographyVariant, cn, createIconSet, registerIcons };

package/dist/index.js

@@ -1,16 +1,211 @@
-// src/useSignal.ts
-import { useEffect, useState } from "react";
-function useSignal(signal) {
-  const [value, setValue] = useState(() => signal.get());
-  useEffect(() => {
-    setValue(signal.get());
-    return signal.subscribe(setValue);
-  }, [signal]);
-  return value;
+"use client";
+import {
+  Icon,
+  assertIconEntry,
+  registerIcons,
+  warnMissingIcon
+} from "./chunk-XRZHP6BD.js";
+import {
+  useSignal
+} from "./chunk-CAJLW6K2.js";
+import "./chunk-NIIDYIZA.js";
+import "./chunk-CZJZYN54.js";
+import {
+  Button,
+  Spinner,
+  buttonVariants
+} from "./chunk-C2HKIPLQ.js";
+import "./chunk-EE4V6XMB.js";
+import {
+  Input
+} from "./chunk-GX2YEJ43.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/typography/typography.tsx
+import {
+  forwardRef
+} from "react";
+
+// src/components/typography/variants.ts
+var typographyVariants = {
+  h1: { element: "h1", classes: "scroll-m-20 text-4xl font-bold tracking-tight text-foreground" },
+  h2: {
+    element: "h2",
+    classes: "scroll-m-20 text-3xl font-semibold tracking-tight text-foreground"
+  },
+  h3: {
+    element: "h3",
+    classes: "scroll-m-20 text-2xl font-semibold tracking-tight text-foreground"
+  },
+  h4: {
+    element: "h4",
+    classes: "scroll-m-20 text-xl font-semibold tracking-tight text-foreground"
+  },
+  h5: { element: "h5", classes: "scroll-m-20 text-lg font-semibold text-foreground" },
+  h6: { element: "h6", classes: "scroll-m-20 text-base font-semibold text-foreground" },
+  lead: { element: "p", classes: "text-lg text-muted-foreground" },
+  body: { element: "p", classes: "text-base" },
+  small: { element: "p", classes: "text-sm" },
+  caption: { element: "span", classes: "text-xs text-muted-foreground" },
+  overline: {
+    element: "span",
+    classes: "text-xs font-medium uppercase tracking-wider text-muted-foreground"
+  }
+};
+var ALIGN_CLASSES = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right",
+  justify: "text-justify"
+};
+
+// src/components/typography/typography.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TypographyImpl({
+  variant = "body",
+  as,
+  align,
+  noWrap,
+  gutterBottom,
+  className,
+  ...props
+}, ref) {
+  const definition = typographyVariants[variant];
+  const Component = as ?? definition.element;
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        definition.classes,
+        align && ALIGN_CLASSES[align],
+        // `truncate` needs a block-level box: on an inline span (caption, overline, or any
+        // `as="span"`) the ellipsis would never show and the text would overflow.
+        noWrap && cn("truncate", Component === "span" && "block"),
+        gutterBottom && "mb-[0.35em]",
+        className
+      ),
+      ...props
+    }
+  );
 }
+var Typography = forwardRef(TypographyImpl);
+var Heading = forwardRef(function Heading2({ level = 2, size, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      ref,
+      as: `h${level}`,
+      variant: size ?? `h${level}`,
+      ...props
+    }
+  );
+});
+var TONE_CLASSES = {
+  muted: "text-muted-foreground",
+  destructive: "text-destructive",
+  success: "text-success",
+  warning: "text-warning-text",
+  info: "text-info"
+};
+var SIZE_CLASSES = { sm: "text-sm", base: "text-base", lg: "text-lg" };
+var WEIGHT_CLASSES = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var Text = forwardRef(function Text2({ as: Component = "p", size = "base", tone, weight, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: cn(
+        SIZE_CLASSES[size],
+        tone && TONE_CLASSES[tone],
+        weight && WEIGHT_CLASSES[weight],
+        className
+      ),
+      ...props
+    }
+  );
+});
+var UNDERLINE_CLASSES = {
+  always: "underline",
+  hover: "hover:underline focus-visible:underline",
+  none: "no-underline"
+};
+function LinkImpl({
+  as: Component = "a",
+  underline = "always",
+  external,
+  target: targetProp,
+  rel: relProp,
+  className,
+  children,
+  ...props
+}, ref) {
+  const target = targetProp ?? (external ? "_blank" : void 0);
+  const opensNewTab = target === "_blank";
+  const rel = opensNewTab ? safeRel(relProp) : relProp;
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ref,
+      className: cn(
+        "rounded-sm font-medium text-primary underline-offset-4 outline-none",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        UNDERLINE_CLASSES[underline],
+        className
+      ),
+      target,
+      rel,
+      ...props,
+      children: [
+        children,
+        opensNewTab && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(opens in a new tab)" })
+      ]
+    }
+  );
+}
+function safeRel(rel) {
+  const tokens = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+  tokens.add("noopener");
+  tokens.add("noreferrer");
+  return [...tokens].join(" ");
+}
+var Link = forwardRef(LinkImpl);
+var Code = forwardRef(function Code2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "code",
+    {
+      ref,
+      className: cn(
+        "rounded bg-muted px-[0.3em] py-[0.15em] font-mono text-[0.875em] text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var Kbd = forwardRef(function Kbd2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ref,
+      className: cn(
+        "rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+});
 
 // src/Grid.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Grid({
   signal,
   columns,
@@ -19,11 +214,11 @@ function Grid({
 }) {
   const data = useSignal(signal);
   if (data.length === 0) {
-    return /* @__PURE__ */ jsx("p", { style: { color: "#888", fontStyle: "italic" }, children: emptyMessage });
+    return /* @__PURE__ */ jsx2("p", { style: { color: "#888", fontStyle: "italic" }, children: emptyMessage });
   }
   const cols = columns ?? Object.keys(data[0]);
-  return /* @__PURE__ */ jsxs("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [
-    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((col) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("table", { style: { borderCollapse: "collapse", width: "100%" }, children: [
+    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { children: cols.map((col) => /* @__PURE__ */ jsx2(
       "th",
       {
         style: {
@@ -38,9 +233,9 @@ function Grid({
       },
       String(col)
     )) }) }),
-    /* @__PURE__ */ jsx("tbody", { children: data.map((row, rowIndex) => (
+    /* @__PURE__ */ jsx2("tbody", { children: data.map((row, rowIndex) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: row has no guaranteed unique ID at this layer
-      /* @__PURE__ */ jsx("tr", { style: { backgroundColor: rowIndex % 2 === 0 ? "#fff" : "#f9fafb" }, children: cols.map((col) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2("tr", { style: { backgroundColor: rowIndex % 2 === 0 ? "#fff" : "#f9fafb" }, children: cols.map((col) => /* @__PURE__ */ jsx2(
         "td",
         {
           style: {
@@ -56,7 +251,39 @@ function Grid({
     )) })
   ] });
 }
+
+// src/icons/create-icon-set.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function createIconSet(icons) {
+  for (const [name, component] of Object.entries(icons)) assertIconEntry(name, component);
+  const own = Object.freeze({ ...icons });
+  const names = Object.freeze(Object.keys(own));
+  const SetIcon = forwardRef2(function SetIcon2({ name, ...props }, ref) {
+    const icon = Object.hasOwn(own, name) ? own[name] : void 0;
+    if (!icon) {
+      warnMissingIcon(name);
+      return null;
+    }
+    return /* @__PURE__ */ jsx3(Icon, { ref, icon, ...props });
+  });
+  return { Icon: SetIcon, names };
+}
 export {
+  Button,
+  Code,
   Grid,
+  Heading,
+  Icon,
+  Input,
+  Kbd,
+  Link,
+  Spinner,
+  Text,
+  Typography,
+  buttonVariants,
+  cn,
+  createIconSet,
+  registerIcons,
   useSignal
 };

package/dist/input.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { InputProps as InputProps$1 } from '@base-ui/react/input';
+
+interface InputProps extends Omit<InputProps$1, "className"> {
+    className?: string;
+}
+/**
+ * A text input. `ref` is the real `<input>`, so `react-hook-form`'s `register()` works with
+ * no `Controller`. Height and horizontal padding follow the density tokens. Native `onChange`
+ * and the typed `onValueChange(value)` both fire.
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps };

package/dist/input.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  Input
+} from "./chunk-GX2YEJ43.js";
+import "./chunk-2TQSHVXA.js";
+export {
+  Input
+};

package/dist/layout/mui-map.d.ts

@@ -0,0 +1,80 @@
+import { c as ContainerSize, B as Breakpoint, G as Gap } from '../responsive-YJBnvsjt.js';
+import 'react';
+
+/**
+ * How MUI `Grid`, `Stack` and `Container` map to `@azmr/ui` layout components. Pure data and
+ * pure functions for the migration codemod, which rewrites what is exact and flags what returns
+ * `undefined` or `approximate`. Imports only types.
+ */
+declare const muiLayoutMap: {
+    readonly grid: {
+        readonly container: "Use <Grid cols={12}>. It is a CSS grid, not MUI's flex-based container.";
+        readonly item: "Use <GridItem span={{ base, sm, md, lg, xl }}> with the same numbers.";
+        readonly props: {
+            readonly spacing: "gap (MUI unit 8px, ours 4px: spacing 2 is gap 4). See muiSpacingToGap.";
+            readonly rowSpacing: "No separate row gap: use gap, or className=\"gap-y-*\".";
+            readonly columnSpacing: "No separate column gap: use gap, or className=\"gap-x-*\".";
+            readonly direction: "Not needed: GridItem placement is by column span.";
+            readonly alignItems: "align";
+            readonly justifyContent: "justify (justifyItems semantics in a grid).";
+            readonly columns: "cols (the number of columns, default 12 in MUI).";
+            readonly xs: "GridItem span.base";
+            readonly sm: "GridItem span.sm";
+            readonly md: "GridItem span.md";
+            readonly lg: "GridItem span.lg";
+            readonly xl: "GridItem span.xl";
+        };
+    };
+    readonly stack: {
+        readonly props: {
+            readonly spacing: "gap (MUI unit 8px, ours 4px). See muiSpacingToGap.";
+            readonly direction: "direction (accepts a responsive object).";
+            readonly divider: "divider";
+            readonly alignItems: "align";
+            readonly justifyContent: "justify";
+            readonly useFlexGap: "Not needed: Stack always uses flex gap.";
+        };
+    };
+    readonly container: {
+        readonly props: {
+            readonly maxWidth: "size (see muiContainerSize).";
+            readonly disableGutters: "gutters={false}";
+            readonly fixed: "Not supported: use size.";
+        };
+    };
+    readonly breakpoints: {
+        readonly xs: "base";
+        readonly sm: "sm";
+        readonly md: "md";
+        readonly lg: "lg";
+        readonly xl: "xl";
+        readonly note: "MUI breakpoints are 0/600/900/1200/1536px; Tailwind's are 0/640/768/1024/1280px, so layouts shift a little near the boundaries. Check them in the browser.";
+    };
+};
+/** The gap step for a MUI `spacing` value, or `undefined` when there is no equivalent step. */
+declare function muiSpacingToGap(spacing: number): Gap | undefined;
+declare function muiBreakpoint(key: string): Breakpoint | undefined;
+interface ContainerSizeTarget {
+    size: ContainerSize;
+    /** True when the width is only close, so the codemod should flag it. */
+    approximate?: true;
+}
+/** `maxWidth` of a MUI Container. `undefined` is MUI's default (`lg`); `false` removes the limit. */
+declare function muiContainerSize(maxWidth: "xs" | "sm" | "md" | "lg" | "xl" | false | undefined): ContainerSizeTarget | undefined;
+type MuiColumns = number | "auto" | boolean;
+interface MuiGridItemSpan {
+    /** The responsive span for `GridItem`, or `undefined` when none of the props could be mapped. */
+    span: Partial<Record<Breakpoint, number>> | undefined;
+    /** Props that have no equivalent (`auto`, `true`, out of range), as `prop=value`, for flagging. */
+    unsupported: string[];
+}
+/** Converts MUI `Grid` item props (`xs`, `sm`, ...) to a `GridItem` span. */
+declare function muiGridItemSpan(props: {
+    xs?: MuiColumns;
+    sm?: MuiColumns;
+    md?: MuiColumns;
+    lg?: MuiColumns;
+    xl?: MuiColumns;
+}): MuiGridItemSpan;
+
+export { type ContainerSizeTarget, type MuiGridItemSpan, muiBreakpoint, muiContainerSize, muiGridItemSpan, muiLayoutMap, muiSpacingToGap };