@leef-l/macos-ui-kit 0.0.0-stage → 0.1.1

package/dist/controls/numberfield.d.ts

@@ -0,0 +1,60 @@
+import { Component } from "../component";
+import { type Child } from "../dom";
+import "./numberfield.css";
+export interface NumberFieldOptions {
+    /** Label rendered above the field; it is wired to the input through `for`/`id`. */
+    label?: Child;
+    /** Smallest accepted value; also bounds the native spinner. */
+    min?: number;
+    /** Largest accepted value; also bounds the native spinner. */
+    max?: number;
+    /** Increment used by the stepper buttons and the arrow keys. Default 1. */
+    step?: number;
+    /** Initial value; defaults to `min`, then 0. */
+    value?: number;
+    /**
+     * Fires only for a legal value — a finite number inside `min`/`max`.
+     * A blank or out-of-range entry stays in the field but is not committed.
+     */
+    onChange?: (value: number) => void;
+}
+/**
+ * A numeric field on a native `<input type="number">`.
+ *
+ * Validation runs on every `input` event: a blank, non-numeric or out-of-range
+ * entry is left exactly as typed but never committed, because handing the
+ * caller a number the field itself rejects would put its state at odds with
+ * what is on screen. `getValue()` therefore reports the last committed value,
+ * never a half-typed one.
+ *
+ * The native spinner cannot be themed, so it is hidden and replaced by two
+ * chevron buttons that step by `step` and disable themselves at the bounds.
+ */
+export declare class NumberField extends Component<HTMLElement> {
+    protected readonly root: HTMLElement;
+    private readonly input;
+    private readonly stepUp;
+    private readonly stepDown;
+    private readonly min?;
+    private readonly max?;
+    private readonly step?;
+    private readonly onChange?;
+    private committed;
+    constructor(options?: NumberFieldOptions);
+    /** The last committed value. A blank or illegal entry is not reported. */
+    get value(): number;
+    /** Replace the value; out-of-range input is clamped rather than committed as-is. */
+    setValue(value: number): void;
+    /** Enable or disable the field and its stepper buttons. */
+    setDisabled(disabled: boolean): void;
+    /** Validate on every keystroke; only legal values are committed. */
+    private handleInput;
+    /** Step from the committed value and commit the result. */
+    private nudge;
+    /** True when a value sits inside the field's bounds. */
+    private isInRange;
+    /** Fold a value back into the bounds. */
+    private clamp;
+    /** Disable a stepper button at the edge of the range, or with the field. */
+    private syncStepperState;
+}

package/dist/controls/progress.d.ts

@@ -0,0 +1,33 @@
+import { Component } from "../component";
+import "./progress.css";
+export interface ProgressOptions {
+    /** Progress from 0 to 100. Ignored while `indeterminate` is set. */
+    value?: number;
+    /** Show the barber-pole used when the duration is unknown. */
+    indeterminate?: boolean;
+}
+/**
+ * A progress bar with a determinate and an indeterminate face.
+ *
+ * Both states are the same element; only the `is-` class and the ARIA surface
+ * change. Indeterminate removes `aria-valuenow` outright — a stale value would
+ * tell a screen reader a percentage that does not exist — while
+ * `aria-valuemin`/`aria-valuemax` stay, so the widget still describes its scale.
+ */
+export declare class Progress extends Component<HTMLElement> {
+    protected readonly root: HTMLElement;
+    private readonly fill;
+    private indeterminate;
+    private current;
+    constructor(options?: ProgressOptions);
+    /** The percentage currently shown, 0–100. */
+    get value(): number;
+    /** Set the percentage; values outside 0–100 are folded into the range. */
+    setValue(value: number): void;
+    /** Switch between the determinate bar and the barber-pole. */
+    setIndeterminate(indeterminate: boolean): void;
+    /** Apply the ARIA surface and the class that match the current state. */
+    private syncState;
+    /** Fold a value into 0–100. */
+    private constrain;
+}

package/dist/controls/segmented.d.ts

@@ -0,0 +1,64 @@
+import { Component } from "../component";
+import "./segmented.css";
+export interface SegmentedOption {
+    label: string;
+    value: string;
+    /** Optional leading SVG path data. */
+    icon?: string;
+    disabled?: boolean;
+}
+export interface SegmentedControlOptions {
+    options: SegmentedOption[];
+    /** Initially selected value. Defaults to the first enabled option. */
+    value?: string;
+    /** Stretch to the container's width. */
+    block?: boolean;
+    onChange?: (value: string) => void;
+}
+/**
+ * A macOS segmented control.
+ *
+ * Semantics follow the native control: it is a radio group, so it exposes
+ * `role="radiogroup"` with one `role="radio"` per segment, arrow keys move the
+ * selection, and only the selected segment is in the tab order (roving
+ * tabindex). That is what a screen-reader user expects from this widget.
+ *
+ * The selection pill is a single element moved with `transform`, so switching
+ * segments never re-lays-out the buttons themselves.
+ */
+export declare class SegmentedControl extends Component<HTMLDivElement> {
+    protected readonly root: HTMLDivElement;
+    private readonly thumb;
+    private readonly buttons;
+    private readonly options;
+    private readonly onChange?;
+    private current;
+    constructor(options: SegmentedControlOptions);
+    /**
+     * Apply a selection.
+     *
+     * `notify` is true only for a user-initiated change (click or arrow key), so
+     * the programmatic `setValue` below stays silent — the same contract every
+     * other setter in the kit has.
+     */
+    private applySelection;
+    /**
+     * Position the selection pill.
+     *
+     * Uses `offsetLeft`/`offsetWidth` (layout reads) once per change, then
+     * writes only transform and a width variable, so the animation stays on the
+     * compositor.
+     *
+     * The measurement is skipped when the control has no layout box: a segmented
+     * control built inside a hidden tab panel reports 0 for every offset, which
+     * would collapse the pill to zero width and leave it at the far left. A
+     * ResizeObserver re-measures when the control finally gets a size.
+     */
+    private moveThumb;
+    /** The selected value. */
+    get value(): string;
+    /** Change the selection programmatically. */
+    setValue(value: string): void;
+    /** Disable every segment. */
+    setDisabled(disabled: boolean): void;
+}

package/dist/controls/select.d.ts

@@ -0,0 +1,42 @@
+import { Component } from "../component";
+import "./select.css";
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectOptions {
+    options: SelectOption[];
+    /** Initially selected value. Defaults to the first enabled option. */
+    value?: string;
+    disabled?: boolean;
+    /** Stretch to the container's width. */
+    block?: boolean;
+    /** Accessible name, since the control has no visible label. */
+    ariaLabel?: string;
+    onChange?: (value: string) => void;
+}
+/**
+ * A macOS pop-up button.
+ *
+ * Built on a real `<select>`. Replacing it with a custom listbox would mean
+ * reimplementing type-ahead, mobile wheel pickers, screen-reader announcement
+ * and the OS popup — a lot of behaviour to lose for a styling win. Only the
+ * appearance is replaced (`appearance: none` plus our own chevron).
+ */
+export declare class Select extends Component<HTMLDivElement> {
+    protected readonly root: HTMLDivElement;
+    private readonly control;
+    private readonly onChange?;
+    constructor(options: SelectOptions);
+    /** The small dropdown chevron drawn over the select. */
+    private makeChevron;
+    /** Replace the option list. */
+    setOptions(options: SelectOption[], value?: string): void;
+    /** The selected value. */
+    get value(): string;
+    /** Change the selection programmatically. */
+    setValue(value: string): void;
+    /** Enable or disable the control. */
+    setDisabled(disabled: boolean): void;
+}

package/dist/controls/slider.d.ts

@@ -0,0 +1,49 @@
+import { Component } from "../component";
+import { type Child } from "../dom";
+import "./slider.css";
+export interface SliderOptions {
+    /** Label rendered above the track; it is wired to the input through `for`/`id`. */
+    label?: Child;
+    /** Smallest value. Default 0. */
+    min?: number;
+    /** Largest value. Default 100. */
+    max?: number;
+    /** Increment between stops. Default 1. */
+    step?: number;
+    /** Initial value; defaults to `min`. */
+    value?: number;
+    /** Show the current value at the trailing edge. */
+    showValue?: boolean;
+    /** Fires on every move with the new number. */
+    onChange?: (value: number) => void;
+}
+/**
+ * A horizontal slider on a native `<input type="range">`.
+ *
+ * The range input already handles pointer capture, dragging, Home/End and the
+ * arrow keys, so the component only adds the macOS look and an optional
+ * read-out. The filled part of the track is a gradient stop driven by
+ * `--mac-slider-value`, so a move costs one custom-property write instead of a
+ * second element to resize.
+ */
+export declare class Slider extends Component<HTMLElement> {
+    protected readonly root: HTMLElement;
+    private readonly input;
+    private readonly valueNode;
+    private readonly onChange?;
+    private readonly min;
+    private readonly max;
+    constructor(options?: SliderOptions);
+    /** The current value, clamped to the configured range. */
+    get value(): number;
+    /** Replace the value; out-of-range input is clamped rather than committed as-is. */
+    setValue(value: number): void;
+    /** Enable or disable the slider, using the native attribute. */
+    setDisabled(disabled: boolean): void;
+    /** Paint the filled part of the track up to the current value. */
+    private syncFill;
+    /** Keep the read-out in step with the value. */
+    private renderValue;
+    /** Fold a value back into the bounds. */
+    private clamp;
+}

package/dist/controls/spinner.d.ts

@@ -0,0 +1,24 @@
+import { Component } from "../component";
+import "./spinner.css";
+export type SpinnerSize = "small" | "default" | "large";
+export interface SpinnerOptions {
+    /** Optional caption beside the ring. */
+    label?: string;
+    size?: SpinnerSize;
+    /** Accessible name. Defaults to the label, then to a generic busy message. */
+    ariaLabel?: string;
+}
+/**
+ * An indeterminate activity indicator.
+ *
+ * Semantics matter here: the spinner is announced through `role="progressbar"`
+ * with no `aria-valuenow`, which is the standard way to say "busy, duration
+ * unknown". Setting a value would tell a screen reader the work is measurable.
+ */
+export declare class Spinner extends Component<HTMLSpanElement> {
+    protected readonly root: HTMLSpanElement;
+    private readonly labelNode;
+    constructor(options?: SpinnerOptions);
+    /** Replace the visible caption. */
+    setLabel(label: string): void;
+}

package/dist/controls/splitview.d.ts

@@ -0,0 +1,76 @@
+import { Component } from "../component";
+import "./splitview.css";
+/** Split direction: `horizontal` places the panes side by side. */
+export type SplitViewOrientation = "horizontal" | "vertical";
+export interface SplitViewOptions {
+    /** `horizontal` puts the panes left/right, `vertical` stacks them. */
+    orientation: SplitViewOrientation;
+    /** Content of the leading pane (left or top). */
+    primary?: Node;
+    /** Content of the trailing pane (right or bottom); it takes the remainder. */
+    secondary?: Node;
+    /** Initial primary size: pixels as a number, or any CSS length e.g. "40%". */
+    primarySize?: number | string;
+    /** Smallest allowed primary size in pixels. Default 0. */
+    minPrimary?: number;
+    /** Smallest allowed secondary size in pixels. Default 0. */
+    minSecondary?: number;
+    /** Fires while dragging and on keyboard resize, with the new size in pixels. */
+    onResize?: (size: number) => void;
+}
+/**
+ * A draggable two-pane split view.
+ *
+ * The primary pane carries an explicit `flex-basis` driven by a custom property
+ * (`--mac-splitview-primary`), so a drag writes one number instead of touching
+ * both panes' styles; the secondary pane simply takes the remainder. That also
+ * means a resize never re-enters layout twice per pointer event.
+ *
+ * The divider is a real focus stop: `role="separator"` with
+ * `aria-orientation`, `aria-valuenow/min/max` and arrow-key resizing, which is
+ * what assistive tech needs to expose an adjustable split.
+ *
+ * Dragging uses pointer capture, so a fast drag that outruns the one-pixel
+ * divider keeps delivering moves to it instead of losing the gesture.
+ */
+export declare class SplitView extends Component<HTMLDivElement> {
+    protected readonly root: HTMLDivElement;
+    private readonly orientation;
+    private readonly primaryPane;
+    private readonly secondaryPane;
+    private readonly divider;
+    private readonly minPrimary;
+    private readonly minSecondary;
+    private readonly onResize?;
+    private dragging;
+    private dragPointer;
+    /** Pointer coordinate when the drag started. */
+    private dragStart;
+    /** Primary pane extent when the drag started. */
+    private dragOrigin;
+    constructor(options: SplitViewOptions);
+    /**
+     * Set the primary pane's size: a pixel number or any CSS length ("40%").
+     *
+     * A number is clamped like a drag would be, so the panes never violate the
+     * declared minimums. Silent — the caller already knows, and a programmatic
+     * resize is not a user gesture.
+     */
+    setPrimarySize(size: number | string): void;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    private endDrag;
+    private onKeyDown;
+    /** Clamp, write and (optionally) report a new primary size in pixels. */
+    private applySize;
+    /** One write to the custom property; the flex basis picks it up. */
+    private writeSize;
+    /** Fold a pixel size into the min/max the options declare. */
+    private clampSize;
+    private availableExtent;
+    private paneExtent;
+    private pointerAxis;
+    /** Keep `aria-valuenow/min/max` in step with the pixels actually on screen. */
+    private syncAria;
+}

package/dist/controls/switch.d.ts

@@ -0,0 +1,47 @@
+import { Component } from "../component";
+import "./switch.css";
+export interface SwitchOptions {
+    /** Initial on/off state. Default off. */
+    checked?: boolean;
+    disabled?: boolean;
+    /**
+     * Accessible name, exposed as `aria-label`. A switch is drawn as a bare
+     * track, so the label cannot sit inside the control itself.
+     */
+    label?: string;
+    /** Fires with the new state after a user toggle; setters stay silent. */
+    onChange?: (checked: boolean) => void;
+}
+/**
+ * A macOS switch on a native `<button role="switch">`.
+ *
+ * The track and the knob are two elements, and the knob travels with
+ * `transform` only: animating `left` or `width` would lay the control out on
+ * every frame (design rule 7). Pointer activation arrives as a `click`, while
+ * Space and Enter are handled on `keydown` so the state flips once per press
+ * and Space never scrolls the pane behind the switch.
+ */
+export declare class Switch extends Component<HTMLElement> {
+    protected readonly root: HTMLButtonElement;
+    private readonly onChange?;
+    private isOn;
+    constructor(options?: SwitchOptions);
+    /** The current state. */
+    get checked(): boolean;
+    /** Set the state; a write that changes nothing is skipped, and `onChange` stays silent. */
+    setChecked(checked: boolean): void;
+    /** Enable or disable the switch, using the native attribute. */
+    setDisabled(disabled: boolean): void;
+    /** Move keyboard focus onto the switch. */
+    focus(): void;
+    /** Flip the state from a user gesture and report it. */
+    private toggle;
+    /**
+     * Write the state to `aria-checked`.
+     *
+     * That attribute is what the stylesheet slides the knob on and what a
+     * screen reader announces, so one write keeps the picture and the
+     * semantics in step.
+     */
+    private syncState;
+}

package/dist/controls/table.d.ts

@@ -0,0 +1,103 @@
+import { Component } from "../component";
+import "./table.css";
+/** Horizontal alignment of a column's header and cells. */
+export type TableAlign = "left" | "center" | "right";
+/** One column definition. */
+export interface TableColumn {
+    /** Property name read from each row object. */
+    key: string;
+    /** Header label. */
+    title: string;
+    /** Fixed width in CSS pixels; columns without one share the rest. */
+    width?: number;
+    /** Alignment for the header and every cell in the column. Default `left`. */
+    align?: TableAlign;
+    /**
+     * Custom cell renderer — the main extension point.
+     *
+     * Called once per cell during a render with the value at `column.key`, the
+     * whole row and the row index. Returning a `Node` lets the cell hold live
+     * UI (a badge, a button, a switch); returning a string renders as text.
+     * Omit it to get the default `String(value)` treatment.
+     */
+    render?: (value: any, row: any, index: number) => Node | string;
+}
+export interface TableOptions {
+    columns: TableColumn[];
+    rows: any[];
+    /**
+     * Stable identity per row, used by selection and by the `is-selected`
+     * class. Defaults to a primitive `row.id` when present, otherwise the row
+     * index — so pass one if rows are reordered or paginated.
+     */
+    rowKey?: (row: any, index: number) => string;
+    /** Render a leading checkbox column with select-all in the header. */
+    selectable?: boolean;
+    /** Keys selected on first paint; only meaningful with `selectable`. */
+    selectedKeys?: string[];
+    /** Fires after a user-driven selection change, with the new key list. */
+    onSelectionChange?: (keys: string[]) => void;
+    /** Text shown in place of rows when `rows` is empty. */
+    emptyText?: string;
+}
+/**
+ * A macOS data table.
+ *
+ * Built on a real `<table>` (`th scope="col"`, a body of `<tr>`s) so screen
+ * readers, header associations and text selection behave; the styling and the
+ * independent horizontal scroller are what this component adds.
+ *
+ * Rendering strategy: every row is built into a `DocumentFragment` and the
+ * body is swapped in one `replaceChildren()` call. Appending row by row would
+ * re-run layout once per row, which on a few hundred rows is the difference
+ * between one frame and a visible stall.
+ *
+ * Events are delegated from the (stable) body element, so re-rendering rows
+ * never leaks listeners.
+ */
+export declare class Table extends Component<HTMLDivElement> {
+    protected readonly root: HTMLDivElement;
+    private readonly body;
+    private readonly columns;
+    private readonly rowKey;
+    private readonly selectable;
+    private readonly emptyText;
+    private readonly onSelectionChange?;
+    /** Selected row keys, in selection order. */
+    private readonly selected;
+    /** Select-all box in the header; null when the table is not selectable. */
+    private headerCheck;
+    /** Row checkboxes, index-aligned with `rowKeys`. */
+    private rowChecks;
+    /** Keys of the currently rendered rows, in row order. */
+    private rowKeys;
+    private rows;
+    constructor(options: TableOptions);
+    /**
+     * Replace the row data.
+     *
+     * Existing selection is kept for keys that still exist and dropped for
+     * keys that do not; like every setter in the kit, this does not raise
+     * `onSelectionChange`.
+     */
+    setRows(rows: any[]): void;
+    /** Keys of the selected rows, in the order they were selected. */
+    get selectedKeys(): string[];
+    /** Drop the selection without raising `onSelectionChange`. */
+    clearSelection(): void;
+    /** `<col>` per column, so `width` is only ever a hint on one element. */
+    private makeColGroup;
+    private makeHeaderRow;
+    /** Rebuild the whole body in one insertion. */
+    private renderRows;
+    private makeRow;
+    private makeCell;
+    private makeEmptyRow;
+    private onBodyChange;
+    /** Header box: check selects everything, uncheck clears everything. */
+    private toggleAll;
+    private syncRowChecks;
+    /** Header box state: unchecked, checked, or the mixed dash. */
+    private syncHeaderCheck;
+    private emitSelection;
+}

package/dist/controls/textarea.d.ts

@@ -0,0 +1,49 @@
+import { Component } from "../component";
+import { type Child } from "../dom";
+import "./textarea.css";
+export interface TextAreaOptions {
+    /** Label rendered above the field. */
+    label?: Child;
+    placeholder?: string;
+    /** Initial text. */
+    value?: string;
+    /** Visible rows; drives the initial height. */
+    rows?: number;
+    /** Hard limit; shows a counter when set. */
+    maxLength?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+}
+/**
+ * A multi-line text field.
+ *
+ * Built on a real `<textarea>` for the same reason TextField uses a real input:
+ * caret navigation, IME composition, undo and selection are the browser's, and a
+ * `div[contenteditable]` would mean reimplementing them badly.
+ *
+ * Like TextField, `onInput` fires per keystroke and `onChange` only on commit
+ * (blur), which is what the DOM's own event means.
+ */
+export declare class TextArea extends Component<HTMLDivElement> {
+    protected readonly root: HTMLDivElement;
+    private readonly control;
+    private readonly counter;
+    private readonly maxLength?;
+    private readonly onChange?;
+    constructor(options?: TextAreaOptions);
+    /** The current text. */
+    get value(): string;
+    /** Replace the text. */
+    setValue(value: string): void;
+    /** Enable or disable the editor. */
+    setDisabled(disabled: boolean): void;
+    /** Move keyboard focus into the editor. */
+    focus(): void;
+    /**
+     * Keep the character counter in step, and flag the field when it is at or
+     * over the limit.
+     */
+    private updateCounter;
+}

package/dist/controls/textfield.d.ts

@@ -0,0 +1,63 @@
+import { Component } from "../component";
+import { type Child } from "../dom";
+import "./textfield.css";
+export interface TextFieldOptions {
+    /** Label rendered above the field; it is wired to the input through `for`/`id`. */
+    label?: Child;
+    /** Placeholder shown while the field is empty. */
+    placeholder?: string;
+    /** Leading SVG path data, drawn at the control's icon size. */
+    icon?: string;
+    /** Show a clear button at the trailing edge once the field holds text. */
+    clearable?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Initial value. */
+    value?: string;
+    /** Fires on every keystroke with the current value. */
+    onInput?: (value: string) => void;
+    /**
+     * Fires when the value is committed: blur, Enter, or the clear button.
+     * Typing alone only raises `onInput`.
+     */
+    onChange?: (value: string) => void;
+}
+/**
+ * A single-line text field on a native `<input type="text">`.
+ *
+ * The input is the real element rather than a styled `div`, so the caret,
+ * selection, IME composition and `readOnly` come from the browser. The label
+ * gets a generated id and is linked with `for`/`id`, so clicking it focuses the
+ * field without a line of JS.
+ *
+ * `onInput` reports every keystroke; `onChange` reports committed values only,
+ * which is what the DOM's own `change` event means.
+ */
+export declare class TextField extends Component<HTMLElement> {
+    protected readonly root: HTMLElement;
+    private readonly input;
+    private readonly clearButton;
+    private readonly onInput?;
+    private readonly onChange?;
+    /** True while the value has changed since the last commit. */
+    private dirty;
+    constructor(options?: TextFieldOptions);
+    /** The current value. */
+    get value(): string;
+    /** Replace the value; does not raise the callbacks, as a DOM write would not. */
+    setValue(value: string): void;
+    /** Enable or disable the input, using the native attribute. */
+    setDisabled(disabled: boolean): void;
+    /** Move keyboard focus into the input. */
+    focus(): void;
+    /**
+     * Report the value once per edit.
+     *
+     * Enter can be followed by a native `change` on blur, so a commit only fires
+     * while the field is dirty; `force` is for the clear button, which must raise
+     * `onChange` even when nothing was typed.
+     */
+    private commit;
+    /** The clear button only appears when there is something to clear. */
+    private syncClearState;
+}

package/dist/dom.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Small DOM helpers shared by every macOS UI Kit component.
+ *
+ * The kit builds elements imperatively instead of shipping a framework: a
+ * desktop window creates its UI once and then updates small pieces of it, which
+ * is exactly the workload where direct DOM work is fastest and a framework
+ * runtime is pure overhead.
+ */
+/** Anything that can be placed inside an element. */
+export type Child = Node | string | number | null | undefined | false;
+/**
+ * Create an element with attributes and children in one call.
+ *
+ * Attributes are assigned as properties when the name is a known property on
+ * the element (so `value`, `checked`, `disabled` behave correctly) and as
+ * attributes otherwise. `class`, `dataset`, `style`, `on*` handlers and
+ * `textContent` get special treatment.
+ */
+export declare function el<K extends keyof HTMLElementTagNameMap>(tag: K, attrs?: Attrs, ...children: Child[]): HTMLElementTagNameMap[K];
+export type Attrs = Record<string, unknown>;
+/** Append children, skipping null/undefined/false and stringifying numbers. */
+export declare function append(parent: Element, children: Child[]): void;
+/** Remove every child of a node. */
+export declare function clear(node: Element): void;
+/** Create an SVG element from a path definition, sized for a control icon. */
+export declare function svgIcon(path: string, size?: number, viewBox?: string): SVGSVGElement;
+/**
+ * Run `fn` on the next animation frame, coalescing repeated calls.
+ *
+ * Scroll and resize handlers use this so a burst of events produces one layout
+ * read instead of dozens.
+ */
+export declare function rafThrottle(fn: () => void): () => void;
+/** Generate a unique id, used to link labels to controls. */
+export declare function uid(prefix?: string): string;