@ahrowe/ui 0.35.0 → 0.37.0

package/dist/cjs-types/common/planCanvas/planCanvas.types.d.ts

@@ -0,0 +1,64 @@
+import { CSSProperties, ReactNode, Ref } from 'react';
+import { DerivedRoom, PlanFloor, PlanRoom, PlanSelection, PlanView } from '../floorPlan/index.js';
+import { SlotClassNames, SlotStyles } from '../types/slots.types.js';
+export type PlanCanvasSlots = 'canvas' | 'grid' | 'underlay' | 'rooms' | 'roomFill' | 'roomLabel' | 'walls' | 'wallBody' | 'openings' | 'opening' | 'overlay';
+export interface PlanCanvasProps {
+    floor: PlanFloor;
+    /**
+     * A floor traced faintly behind this one, normally the storey below, so walls can be
+     * lined up between storeys. Drawn as wall centrelines only: it is a reference, not a
+     * second plan, and it takes no pointer events.
+     */
+    underlay?: PlanFloor | null;
+    /**
+     * Derived rooms, passed in rather than computed here so the parent controls
+     * memoisation and both components share one derivation per render.
+     */
+    rooms: DerivedRoom[];
+    view: PlanView;
+    /** Everything currently selected. A single selection is a one-element array. */
+    selection?: readonly PlanSelection[];
+    hovered?: PlanSelection | null;
+    /** Makes room fills focusable, clickable and screen-reader labelled. */
+    interactiveRooms?: boolean;
+    interactiveOpenings?: boolean;
+    showGrid?: boolean;
+    /** Grid spacing in millimetres. */
+    gridSize?: number;
+    showRoomLabels?: boolean;
+    /** Door leaves, swing arcs and window panes. `false` leaves plain gaps. */
+    showOpeningSymbols?: boolean;
+    getRoomColor?: (room: PlanRoom, area: number) => string | undefined;
+    renderRoomLabel?: (room: PlanRoom | null, context: {
+        area: number;
+        faceId: string;
+    }) => ReactNode;
+    /** Accessible name for a room. */
+    getRoomLabel?: (room: PlanRoom | null, context: {
+        area: number;
+    }) => string;
+    formatArea?: (areaMm2: number) => string;
+    onRoomActivate?: (roomId: string) => void;
+    onOpeningActivate?: (openingId: string) => void;
+    onBackgroundActivate?: () => void;
+    onHoverChange?: (target: PlanSelection | null) => void;
+    /**
+     * Extra SVG drawn above everything, in SCREEN space: handles, previews, badges.
+     * The drawer supplies its editing chrome through this.
+     */
+    overlay?: ReactNode;
+    /** Extra SVG drawn in WORLD space, below the screen-space overlay. */
+    worldOverlay?: ReactNode;
+    /** Width and height of the canvas in CSS pixels, measured by the parent. */
+    size: {
+        width: number;
+        height: number;
+    };
+    'aria-label'?: string;
+    /** Ref to the rendered `<svg>` root. */
+    ref?: Ref<SVGSVGElement>;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<PlanCanvasSlots>;
+    styles?: SlotStyles<PlanCanvasSlots>;
+}

package/dist/cjs-types/common/popover/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './popover.js';
+export * from './popover.types.js';

package/dist/cjs-types/common/popover/popover.d.ts

@@ -0,0 +1,3 @@
+import { PopoverProps } from './popover.types.js';
+declare function Popover(props: PopoverProps): import("react").JSX.Element;
+export default Popover;

package/dist/cjs-types/common/popover/popover.types.d.ts

@@ -0,0 +1,94 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+import { Presentation } from '../configProvider/presentation.types.js';
+/** Preferred side of the trigger the panel opens on. Flips to the opposite side when there's no room. */
+export declare enum PopoverPlacement {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+/** Alignment along the trigger's cross axis (horizontal for top/bottom, vertical for left/right). */
+export declare enum PopoverAlign {
+    Start = "start",
+    Center = "center",
+    End = "end"
+}
+/** What opens the popover. */
+export declare enum PopoverTrigger {
+    Click = "click",
+    Hover = "hover",
+    Focus = "focus"
+}
+export type PopoverSlots = 'root' | 'trigger' | 'floating' | 'panel' | 'arrow' | 'backdrop';
+export interface PopoverProps extends Omit<HtmlProps, 'content'> {
+    /** The trigger element. */
+    children?: ReactNode;
+    /** The popover body. */
+    content?: ReactNode;
+    /** Preferred side (default `Bottom`). */
+    placement?: PopoverPlacement;
+    /** Cross-axis alignment (default `Center`). */
+    align?: PopoverAlign;
+    /** What opens the popover (default `Click`). */
+    trigger?: PopoverTrigger;
+    /** Controlled open state. Omit for uncontrolled. */
+    isOpen?: boolean;
+    /** Initial open state when uncontrolled (default `false`). */
+    defaultOpen?: boolean;
+    /**
+     * Fires whenever the popover wants to open or close. `fromKeyboard` says
+     * whether a key caused it, which is what a menu needs in order to put the
+     * focus on an entry only when the pointer was not what opened it.
+     */
+    onOpenChange?: (isOpen: boolean, meta: {
+        fromKeyboard: boolean;
+    }) => void;
+    /** Gap in px between trigger and panel (default `10`). */
+    offset?: number;
+    /** Render the arrow pointing at the trigger (default `true`). */
+    withArrow?: boolean;
+    /** Close when clicking outside the panel (default `true`). */
+    closeOnOutsideClick?: boolean;
+    /** Close when pressing Escape (default `true`). */
+    closeOnEscape?: boolean;
+    /** Delay in ms before a hover-triggered popover opens (default `100`). */
+    openDelay?: number;
+    /** Delay in ms before a hover-triggered popover closes (default `120`). */
+    closeDelay?: number;
+    /** Prevent the popover from opening. */
+    disabled?: boolean;
+    /**
+     * Move focus into the panel when it opens, and claim `role="dialog"` with it.
+     * `'keyboard'` (the default) does it only when the open came from the
+     * keyboard: the panel is portaled to the end of the document, so Tab never
+     * reaches it on its own, while a click leaves the focus where the pointer
+     * already put it. `true` always, `false` never.
+     */
+    focusOnOpen?: boolean | 'keyboard';
+    /**
+     * Whether clicking the trigger while the panel is open closes it (default
+     * `true`). A menu button should toggle; a text field that opens a picker
+     * should not, or clicking into it to place the caret would close the panel.
+     */
+    closeOnTriggerClick?: boolean;
+    /**
+     * `'trigger'` gives the panel at least the trigger's width, for a list that
+     * should line up with the field it belongs to. `'auto'` (the default) lets it
+     * size to its own content.
+     */
+    width?: 'auto' | 'trigger';
+    /**
+     * Cap the panel at a readable measure (default `true`). Off for a panel with
+     * its own width, a calendar or a media grid.
+     */
+    constrainWidth?: boolean;
+    /** Where the panel opens: anchored to the trigger (`Default`), pinned to the bottom of the
+     * screen, or the latter only on a small touch screen. Only a `Click` trigger presents as a
+     * sheet. */
+    presentation?: Presentation;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<PopoverSlots>;
+    styles?: SlotStyles<PopoverSlots>;
+}

package/dist/cjs-types/common/popover/usePopoverPosition.d.ts

@@ -0,0 +1,45 @@
+import { RefObject } from 'react';
+import { PopoverPlacement, PopoverAlign } from './popover.types.js';
+export declare function supportsAnchoring(): boolean;
+export interface UsePopoverPositionArgs {
+    isOpen: boolean;
+    placement: PopoverPlacement;
+    align: PopoverAlign;
+    offset: number;
+    triggerRef: RefObject<HTMLElement | null>;
+    /** `position: fixed` wrapper that receives top/left/visibility and the resolved-placement data attribute. */
+    floatingRef: RefObject<HTMLElement | null>;
+    /** Visible panel, measured to decide flip and shift. */
+    panelRef: RefObject<HTMLElement | null>;
+    /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */
+    arrowRef: RefObject<HTMLElement | null>;
+    /**
+     * Give the panel at least the trigger's width, for a list that lines up with
+     * the field it belongs to. A minimum rather than a fixed width: a menu on a
+     * narrow icon button still sizes to its own content.
+     */
+    matchTriggerWidth?: boolean;
+    /**
+     * When the panel does not fit on the side its alignment puts it, narrow it
+     * rather than sliding it away from the trigger. Sliding keeps the panel
+     * on-screen but detaches it: an end-aligned bubble stops ending where its
+     * trigger ends, and its arrow stops pointing at anything. Off by default, since
+     * a panel whose width is its content, a menu or a list, would rather overhang
+     * its trigger than wrap.
+     *
+     * Only down to `MIN_SHRINK_WIDTH`. Past that the panel is narrower than it is
+     * readable, and a trigger that close to the screen edge is better served by a
+     * panel that overhangs it.
+     */
+    shrinkToFit?: boolean;
+}
+/**
+ * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with
+ * start/center/end cross-axis alignment. Flips to the opposite side when the preferred one has no
+ * room, shifts back on-screen along the cross axis, points the arrow at the trigger centre, and
+ * hides (not closes) the panel once the trigger scrolls behind a clipping ancestor.
+ *
+ * `useAnchorTracking` supplies the lifecycle around this: mount wait, ancestor resolution, and
+ * re-running on scroll, viewport resize and panel size changes.
+ */
+export declare function usePopoverPosition({ isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef, matchTriggerWidth, shrinkToFit, }: UsePopoverPositionArgs): void;

package/dist/cjs-types/common/progressBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './progressBar.js';
+export * from './progressBar.types.js';

package/dist/cjs-types/common/progressBar/progressBar.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+import { ProgressBarProps } from './progressBar.types.js';
+export declare function getContrastColor(hexColor: string): string;
+declare function ProgressBar({ className, total, progress, style, classNames, styles: slotStyles, ...rest }: ProgressBarProps): ReactElement;
+export default ProgressBar;

package/dist/cjs-types/common/progressBar/progressBar.types.d.ts

@@ -0,0 +1,18 @@
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export interface Progress {
+    amount: number;
+    label?: string;
+    color?: string;
+    class?: string;
+}
+export type ProgressBarSlots = 'root' | 'fill' | 'label';
+export interface ProgressBarProps extends HtmlProps {
+    className?: string | undefined;
+    total?: number;
+    progress?: number | Progress | Progress[];
+    style?: React.CSSProperties | undefined;
+    /** Classes for the inner elements. See `ProgressBarSlots`. */
+    classNames?: SlotClassNames<ProgressBarSlots>;
+    /** Inline styles for the inner elements. See `ProgressBarSlots`. */
+    styles?: SlotStyles<ProgressBarSlots>;
+}

package/dist/cjs-types/common/radioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './radioGroup.js';
+export * from './radioGroup.types.js';

package/dist/cjs-types/common/radioGroup/radioGroup.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { RadioGroupProps } from './radioGroup.types.js';
+declare function RadioGroup(props: RadioGroupProps): ReactElement;
+export default RadioGroup;

package/dist/cjs-types/common/radioGroup/radioGroup.types.d.ts

@@ -0,0 +1,45 @@
+import { CSSProperties, ReactNode } from 'react';
+import { FormValidator } from '../../services/formValidation/index.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type RadioValue = string | number;
+export declare enum RadioGroupOrientation {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}
+export interface RadioOption {
+    value: RadioValue;
+    /** Visible label; falls back to `value` when omitted. */
+    label?: ReactNode;
+    /** Secondary description shown under the label. */
+    description?: ReactNode;
+    /** Disable just this option. */
+    disabled?: boolean;
+}
+export type RadioGroupSlots = 'root' | 'option' | 'radio' | 'dot' | 'label' | 'description';
+export interface RadioGroupProps extends Omit<HtmlProps, 'onChange'> {
+    /** The selectable options. */
+    options: RadioOption[];
+    /** Controlled selected value. Omit for uncontrolled. */
+    value?: RadioValue;
+    /** Initial value when uncontrolled. */
+    defaultValue?: RadioValue;
+    /** Fires with the newly selected value. */
+    onChange?: (value: RadioValue, event?: React.MouseEvent | React.KeyboardEvent) => void;
+    /** Layout direction (default `Vertical`). */
+    orientation?: RadioGroupOrientation;
+    /** Disable the whole group. */
+    disabled?: boolean;
+    /** Diameter of the radio circle. Defaults to `1.125em` of `--default-font-size`, 18px at a 16px base. */
+    size?: string;
+    /** Tab index of the active (roving) option. */
+    tabIndex?: number;
+    formValidator?: FormValidator | null;
+    /** Manual error message shown in a tooltip (used when there's no `formValidator`, or to force one). */
+    errorMessage?: string;
+    /** Manual valid state when not using a `formValidator` (default `true`). */
+    isValid?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<RadioGroupSlots>;
+    styles?: SlotStyles<RadioGroupSlots>;
+}

package/dist/cjs-types/common/rating/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './rating.js';
+export * from './rating.types.js';

package/dist/cjs-types/common/rating/rating.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { RatingProps } from './rating.types.js';
+declare function Rating(props: RatingProps): ReactElement;
+export default Rating;

package/dist/cjs-types/common/rating/rating.types.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type RatingSlots = 'root' | 'item' | 'iconEmpty' | 'iconFilled';
+export interface RatingProps extends Omit<HtmlProps, 'onChange'> {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    allowHalf?: boolean;
+    allowClear?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    icon?: IconContent;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<RatingSlots>;
+    styles?: SlotStyles<RatingSlots>;
+}

package/dist/cjs-types/common/revealLens/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './revealLens.js';
+export * from './revealLens.types.js';

package/dist/cjs-types/common/revealLens/revealLens.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { RevealLensProps } from './revealLens.types.js';
+declare function RevealLens(props: RevealLensProps): ReactElement;
+export default RevealLens;

package/dist/cjs-types/common/revealLens/revealLens.types.d.ts

@@ -0,0 +1,24 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type RevealLensShape = 'circle' | 'custom';
+export type RevealLensSlots = 'root' | 'background' | 'overlay';
+export interface RevealLensProps extends HtmlProps {
+    /** Bottom layer, revealed in an area around the pointer. */
+    background: ReactNode;
+    /** Top layer, covers `background` by default. */
+    overlay: ReactNode;
+    /** Reveal radius in px (used when `shape` is `'circle'`). @default 120 */
+    radius?: number;
+    /** Soft edge width in px; `0` gives a hard edge. @default 24 */
+    feather?: number;
+    /** @default 'circle' */
+    shape?: RevealLensShape;
+    /** Raw CSS `mask-image` value, used verbatim instead of the built-in circle gradient. */
+    maskImage?: string;
+    /** Disables pointer tracking, `overlay` stays fully opaque. @default false */
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<RevealLensSlots>;
+    styles?: SlotStyles<RevealLensSlots>;
+}

package/dist/cjs-types/common/ripple/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ripple.js';
+export * from './ripple.types.js';

package/dist/cjs-types/common/ripple/ripple.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { RippleProps, RippleHandle } from './ripple.types.js';
+export type { RippleProps, RippleHandle };
+declare function Ripple({ disabled, children, className, style, overflowHidden, rippleAnimationLength, rippleBackground, manualOnly, ref, ...rest }: RippleProps): React.JSX.Element;
+export default Ripple;

package/dist/cjs-types/common/ripple/ripple.types.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { HtmlProps } from '../types/slots.types.js';
+export interface RippleProps extends HtmlProps {
+    disabled?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    overflowHidden?: boolean;
+    rippleAnimationLength?: number;
+    rippleBackground?: string;
+    manualOnly?: boolean;
+    ref?: React.Ref<RippleHandle>;
+}
+export interface RippleHandle {
+    addRipple: () => void;
+}

package/dist/cjs-types/common/roomDrawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './roomDrawer.js';
+export * from './roomDrawer.types.js';

package/dist/cjs-types/common/roomDrawer/roomDrawer.d.ts

@@ -0,0 +1,3 @@
+import { RoomDrawerProps } from './roomDrawer.types.js';
+declare function RoomDrawer(props: RoomDrawerProps): import("react").JSX.Element;
+export default RoomDrawer;