@azmr/ui 0.1.0 → 0.2.0

package/dist/transition.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ComponentType } from 'react';
+
+interface CountUpProps extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
+    /** The number to show. When it changes, the display counts to the new value. */
+    value: number;
+    /** Where to start when `animateOnMount` is on. Default 0. */
+    from?: number;
+    /** Count up from `from` when first shown, not only when `value` changes. Default false. */
+    animateOnMount?: boolean;
+    /** Milliseconds to count over. Default 800. */
+    duration?: number;
+    /** `Intl.NumberFormat` options: currency, percent, decimals. */
+    format?: Intl.NumberFormatOptions;
+    locale?: string | string[];
+}
+/**
+ * A number that counts to its new value. Screen readers are given the **final value at once** (the
+ * counting is hidden from them, so nobody hears a stream of numbers), the digits are tabular so the
+ * width does not jitter, and under reduced motion it jumps straight to the value.
+ */
+declare function CountUp({ value, from, animateOnMount, duration, format, locale, className, ...props }: CountUpProps): react.JSX.Element;
+
+type TransitionClass = string | Record<string, string>;
+interface TransitionProps {
+    children?: ReactNode;
+    /** Gives the element a name, so the same name on another page or list item morphs between them. */
+    name?: string;
+    /** The animation when none of the more specific ones below apply. `"none"` turns it off. */
+    default?: TransitionClass;
+    enter?: TransitionClass;
+    exit?: TransitionClass;
+    update?: TransitionClass;
+    /** Used when this and another element share a `name` (the shared-element morph). */
+    share?: TransitionClass;
+}
+type ViewTransitionComponent = ComponentType<TransitionProps>;
+/**
+ * React's `ViewTransition`, if this React has it. It is not in a stable React yet (the spec expects
+ * 19.3), so it is looked up by name at render time, under both the stable and the experimental name.
+ */
+declare function findViewTransition(react?: Record<string, unknown>): ViewTransitionComponent | undefined;
+/**
+ * Animates a route change, a list change or a shared element with React's `ViewTransition`. Where
+ * React does not have it yet, or the person prefers reduced motion, it renders its children and
+ * nothing else, so it is safe to add today and switches on when you upgrade React. The cross-fade
+ * itself is in `@azmr/ui/styles.css` (opacity only).
+ */
+declare const Transition: (props: TransitionProps) => react.JSX.Element;
+
+export { CountUp, type CountUpProps, Transition, type TransitionProps, findViewTransition };

package/dist/transition.js

@@ -0,0 +1,79 @@
+"use client";
+import {
+  useReducedMotion
+} from "./chunk-WVE2E37B.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/motion/transition/count-up.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var easeOutCubic = (t) => 1 - (1 - t) ** 3;
+function CountUp({
+  value,
+  from = 0,
+  animateOnMount = false,
+  duration = 800,
+  format,
+  locale,
+  className,
+  ...props
+}) {
+  const reduced = useReducedMotion();
+  const [display, setDisplay] = useState(animateOnMount ? from : value);
+  const current = useRef(display);
+  useEffect(() => {
+    if (reduced || !Number.isFinite(value)) {
+      current.current = value;
+      setDisplay(value);
+      return;
+    }
+    const start = current.current;
+    if (start === value) return;
+    const t0 = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const progress = Math.min((now - t0) / duration, 1);
+      const next = progress >= 1 ? value : start + (value - start) * easeOutCubic(progress);
+      current.current = next;
+      setDisplay(next);
+      if (progress < 1) frame = requestAnimationFrame(tick);
+    };
+    frame = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(frame);
+  }, [value, reduced, duration]);
+  const options = {
+    ...Number.isInteger(value) && { maximumFractionDigits: 0 },
+    ...format?.minimumFractionDigits !== void 0 && {
+      maximumFractionDigits: format.minimumFractionDigits
+    },
+    ...format
+  };
+  const text = (n) => new Intl.NumberFormat(locale, options).format(n);
+  return /* @__PURE__ */ jsxs("span", { className: cn("tabular-nums", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: text(display) }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: text(value) })
+  ] });
+}
+
+// src/motion/transition/transition.tsx
+import * as React from "react";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+function findViewTransition(react = React) {
+  return react.ViewTransition ?? react.unstable_ViewTransition;
+}
+function createTransition(find) {
+  return function Transition2(props) {
+    const reduced = useReducedMotion();
+    const ViewTransition = find();
+    if (!ViewTransition || reduced) return /* @__PURE__ */ jsx2(Fragment, { children: props.children });
+    return /* @__PURE__ */ jsx2(ViewTransition, { ...props });
+  };
+}
+var Transition = createTransition(findViewTransition);
+export {
+  CountUp,
+  Transition,
+  findViewTransition
+};

package/dist/types-BBudf463.d.ts

@@ -0,0 +1,39 @@
+import { SVGProps, ComponentType } from 'react';
+
+/** 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;
+}
+
+export type { IconProps as I, IconComponent as a, IconRenderProps as b, IconSize as c };

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

@@ -0,0 +1,91 @@
+import { T as TypographyVariant } from '../variants-De0c0ucO.js';
+
+/**
+ * How MUI `Typography` maps to `@azmr/ui` `Typography`. Pure data for the migration codemod, which
+ * rewrites what is exact and flags what is `approximate` for a human to look at. Imports nothing
+ * but a type.
+ */
+interface MuiVariantTarget {
+    /** The `@azmr/ui` variant to use. */
+    variant: TypographyVariant;
+    /** True when the look differs a little (weight, case), so the codemod should flag it. */
+    approximate?: true;
+    note?: string;
+}
+declare const muiTypographyMap: {
+    readonly variants: {
+        readonly h1: {
+            readonly variant: "h1";
+        };
+        readonly h2: {
+            readonly variant: "h2";
+        };
+        readonly h3: {
+            readonly variant: "h3";
+        };
+        readonly h4: {
+            readonly variant: "h4";
+        };
+        readonly h5: {
+            readonly variant: "h5";
+        };
+        readonly h6: {
+            readonly variant: "h6";
+        };
+        readonly subtitle1: {
+            readonly variant: "lead";
+            readonly approximate: true;
+            readonly note: "`lead` is muted text; MUI subtitle1 uses the normal text colour. Add className=\"text-foreground\" to match.";
+        };
+        readonly subtitle2: {
+            readonly variant: "small";
+            readonly approximate: true;
+            readonly note: "MUI subtitle2 is medium weight; use <Text size=\"sm\" weight=\"medium\"> to match exactly.";
+        };
+        readonly body1: {
+            readonly variant: "body";
+        };
+        readonly body2: {
+            readonly variant: "small";
+        };
+        readonly caption: {
+            readonly variant: "caption";
+            readonly approximate: true;
+            readonly note: "`caption` is muted text; MUI caption uses the normal text colour. Add className=\"text-foreground\" to match.";
+        };
+        readonly overline: {
+            readonly variant: "overline";
+            readonly approximate: true;
+            readonly note: "`overline` is muted text; MUI overline uses the normal text colour. Add className=\"text-foreground\" to match.";
+        };
+        readonly button: {
+            readonly variant: "small";
+            readonly approximate: true;
+            readonly note: "MUI `button` is uppercase medium text; use <Text size=\"sm\" weight=\"medium\" className=\"uppercase\">.";
+        };
+        readonly inherit: {
+            readonly variant: "body";
+            readonly approximate: true;
+            readonly note: "MUI `inherit` takes the parent's font; use <Text as=\"span\" size=\"base\" className=\"text-inherit\"> if that is the intent.";
+        };
+    };
+    /** MUI prop name -> what to do. A prop name means "same prop"; other strings are instructions. */
+    readonly props: {
+        readonly variant: "variant";
+        readonly component: "as";
+        readonly gutterBottom: "gutterBottom";
+        readonly noWrap: "noWrap";
+        readonly align: "align";
+        readonly paragraph: "Use <Text> (a paragraph) instead of paragraph.";
+        readonly color: "Use tone (muted, destructive, success, warning, info) or a text-* class.";
+        readonly sx: "Use className with Tailwind utilities.";
+    };
+};
+type MuiTypographyVariant = keyof typeof muiTypographyMap.variants;
+/**
+ * Resolves a MUI Typography `variant` prop. `undefined` is MUI's own default, `body1`. Returns
+ * `undefined` for a name MUI does not have.
+ */
+declare function resolveMuiTypography(variant: string | undefined): MuiVariantTarget | undefined;
+
+export { type MuiTypographyVariant, type MuiVariantTarget, muiTypographyMap, resolveMuiTypography };

package/dist/typography/mui-map.js

@@ -0,0 +1,62 @@
+// src/components/typography/mui-map.ts
+var muiTypographyMap = {
+  variants: {
+    h1: { variant: "h1" },
+    h2: { variant: "h2" },
+    h3: { variant: "h3" },
+    h4: { variant: "h4" },
+    h5: { variant: "h5" },
+    h6: { variant: "h6" },
+    subtitle1: {
+      variant: "lead",
+      approximate: true,
+      note: '`lead` is muted text; MUI subtitle1 uses the normal text colour. Add className="text-foreground" to match.'
+    },
+    subtitle2: {
+      variant: "small",
+      approximate: true,
+      note: 'MUI subtitle2 is medium weight; use <Text size="sm" weight="medium"> to match exactly.'
+    },
+    body1: { variant: "body" },
+    body2: { variant: "small" },
+    caption: {
+      variant: "caption",
+      approximate: true,
+      note: '`caption` is muted text; MUI caption uses the normal text colour. Add className="text-foreground" to match.'
+    },
+    overline: {
+      variant: "overline",
+      approximate: true,
+      note: '`overline` is muted text; MUI overline uses the normal text colour. Add className="text-foreground" to match.'
+    },
+    button: {
+      variant: "small",
+      approximate: true,
+      note: 'MUI `button` is uppercase medium text; use <Text size="sm" weight="medium" className="uppercase">.'
+    },
+    inherit: {
+      variant: "body",
+      approximate: true,
+      note: 'MUI `inherit` takes the parent\'s font; use <Text as="span" size="base" className="text-inherit"> if that is the intent.'
+    }
+  },
+  /** MUI prop name -> what to do. A prop name means "same prop"; other strings are instructions. */
+  props: {
+    variant: "variant",
+    component: "as",
+    gutterBottom: "gutterBottom",
+    noWrap: "noWrap",
+    align: "align",
+    paragraph: "Use <Text> (a paragraph) instead of paragraph.",
+    color: "Use tone (muted, destructive, success, warning, info) or a text-* class.",
+    sx: "Use className with Tailwind utilities."
+  }
+};
+function resolveMuiTypography(variant) {
+  const name = variant ?? "body1";
+  return Object.hasOwn(muiTypographyMap.variants, name) ? muiTypographyMap.variants[name] : void 0;
+}
+export {
+  muiTypographyMap,
+  resolveMuiTypography
+};

package/dist/typography.d.ts

@@ -0,0 +1,90 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ElementType, ComponentPropsWithoutRef, Ref, ReactElement } from 'react';
+import { T as TypographyVariant, a as TypographyAlign } from './variants-De0c0ucO.js';
+export { t as typographyVariants } from './variants-De0c0ucO.js';
+
+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>>;
+
+export { Code, Heading, type HeadingProps, Kbd, Link, type LinkOwnProps, type LinkProps, Text, type TextProps, Typography, TypographyAlign, type TypographyOwnProps, type TypographyProps, TypographyVariant };

package/dist/typography.js

@@ -0,0 +1,193 @@
+import {
+  cn
+} from "./chunk-7EOSDFS3.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
+    }
+  );
+});
+export {
+  Code,
+  Heading,
+  Kbd,
+  Link,
+  Text,
+  Typography,
+  typographyVariants
+};

package/dist/useSignal-C-3ZGURN.d.ts

@@ -0,0 +1,21 @@
+import { Signal } from '@azmr/core';
+
+/**
+ * React hook that subscribes to a Signal and triggers re-renders on change.
+ *
+ * Built on `useSyncExternalStore` rather than `useState` + `useEffect`, so
+ * concurrent rendering can't tear: React reads the current value via
+ * `Signal.peek()` (which never registers a dependency) for both the initial
+ * render and any snapshot check mid-render, and only uses the subscription
+ * to know when to ask again — it does not rely on `Signal.subscribe()`
+ * firing immediately with the current value on subscribe (it deliberately
+ * doesn't; read the value separately, as this hook does, rather than wait
+ * for the first callback).
+ *
+ * `subscribe` and `getSnapshot` are memoised on `signal`, so an unrelated
+ * re-render does not tear down and re-create the subscription; passing a
+ * different signal resubscribes exactly once.
+ */
+declare function useSignal<T>(signal: Signal<T>): T;
+
+export { useSignal as u };