@tempots/ui

Ticker

A property that can be used to force an update. Internally, it's a number that is incremented by one on each tick. Extends the Prop class with a number value.

It can be used as a counter Signal.

Anchor(hrefOrOptions, children)

Creates an anchor element with the specified href and children. When the anchor element is clicked, the location is updated to the specified href.

areLocationsEqual(a, b)

Compares two location objects and returns true if they are equal, false otherwise.

AsyncResultView(result, options)

Renders the view based on the result of an asynchronous operation.

AutoFocus(delay)

Creates a renderable function that focuses on the element after a specified delay.

AutoSelect(delay)

Creates a renderable function that automatically selects the content of an input element after a specified delay.

ElementSize(fn)

Creates a renderable function that monitors the size of an element and provides it as a signal.

handleAnchorClick(callback, options)

Handles anchor click events, optionally checking for external URLs and file extensions.

HTMLTitle(title)

Creates an HTML title element with the specified title.

InViewport(mode, fn)

Creates a renderable component that tracks whether the element is in the viewport.

locationFromURL(url, baseUrl)

Converts a URL string into a LocationData object.

makeNowSignal(frequency)

Creates a signal that automatically updates with the current time at a specified frequency. The signal will clean up its interval when disposed.

makeRelativeTime(date, options)

Creates a signal that computes a human-readable relative time string between a target date and a reference date.

makeRelativeTimeMillisSignal(date, { now, frequency })

Creates a signal that computes the time difference in milliseconds between a target date and a reference date.

makeRelativeTimeSignal(date, options)

Creates a signal that computes a human-readable relative time string between a target date and a reference date.

makeResource({ request, load, convertError, })

Creates an asynchronous resource that can be loaded, reloaded, and disposed of.

R - The type of the request. V - The type of the value when the resource is successfully loaded. E - The type of the error when the resource fails to load.

makeTicker(initial)

Creates a new Ticker instance with an optional initial value.

matchesRoute(route, path)

Matches a path against a route.

PopOver({ content, open, placement, offset: { mainAxis, crossAxis }, })

Renders a PopOver component.

ProvideAppearance(child)

Provides a child component with an appearance context, which can be used to determine the current appearance (light or dark) based on the user's system preferences.

The appearance context is updated whenever the user's system preferences change, and the component is cleaned up when it is no longer needed.

ProvideLocation(child)

Provides the location context to the child component.

Resource(options)

Creates and displays an asynchronous resource.

R - The type of the request. V - The type of the value when the resource is successfully loaded. E - The type of the error when the resource fails to load.

ResourceDisplay(resource, options)

Component to display an asynchronous resource based on its current status.

V - The type of the value when the resource is successfully loaded. E - The type of the error when the resource fails to load.

ResultView(result, options)

Renders a view based on the result of a computation.

Router(routes)

Creates a router that maps routes to corresponding renderable components.

SelectOnFocus()

Selects the text inside an input element when it receives focus.

setLocationFromUrl(prop, url)

Sets the location from the given URL and updates the specified property.

timeDiffToString(diffInMillis)

Converts a time difference in milliseconds to a human-readable relative time string.

urlFromLocation(location)

Returns the full URL based on the provided location data.

UseAppearance(fn)

Makes the AppearanceType available to the child component by consuming the signal provided by the parent. The result of the function is returned as the final output.

UseLocation(fn)

A hook that provides the current location data to the given function.

WhenInViewport(mode, then, otherwise)

Executes the provided then function when the element is in the viewport. Optionally, executes the otherwise function when the element is not in the viewport.

WindowSize(fn)

Creates a renderable function that monitors the window size and invokes the provided function with the current size.

AsyncResource

Represents an asynchronous resource with its current status, value, error, and loading state. Provides methods to reload the resource and dispose of it.

V - The type of the value when the resource is successfully loaded. E - The type of the error when the resource fails to load.

MakeResourceOptions

Options for creating a resource, including the request signal, load function, and error converter.

R - The type of the request. V - The type of the value when the resource is successfully loaded. E - The type of the error when the resource fails to load.

ResourceDisplayOptions

Options for displaying the different states of an asynchronous resource.

V - The type of the value when the resource is successfully loaded. E - The type of the error when the resource fails to load.

ResourceLoadOptions

Options for loading a resource, including the request, abort signal, and previous result.

R - The type of the request. V - The type of the value when the resource is successfully loaded. E - The type of the error when the resource fails to load.

ResourceOptions

Options for creating and displaying an asynchronous resource.

R - The type of the request. V - The type of the value when the resource is successfully loaded. E - The type of the error when the resource fails to load.

appearanceMarker

A provider mark for a signal representing the current appearance type.

HiddenWhenEmpty

Hides the element when it is empty and restores its initial state when necessary.

LocationProviderMarker

Marker for the LocationProvider.

AnchorOptions

Options for configuring an anchor element.

AppearanceType

Defines the possible appearance types for the application.

AsyncResultViewOptions

Represents the options for rendering an asynchronous result view.

ExtractParams

Extracts the parameters from a string literal representing a route path.

ExtractParamsFromTuple

Extracts the parameter names from a tuple type.

HandleAnchorClickOptions

Options for handling anchor click events.

HrefOrAnchorOptions

Represents either a string value (or Signal of string) for the href, or a full AnchorOptions object.

This type is used as the first parameter of the Anchor function, allowing for flexible configuration of anchor elements.

InViewportMode

Represents the mode for determining if an element is in the viewport.

• partial: Indicates that the element is considered in the viewport if any part of it is visible. - full: Indicates that the element is considered in the viewport only if it is fully visible.

LocationData

Represents the data for a location.

MakeParams

Represents a type that transforms a tuple of strings into an object with string keys. If the input type is a tuple, each element of the tuple will become a key in the resulting object, with the corresponding value being a string. If the input type is not a tuple, the resulting type will be never.

MatchResult

The result of a route match.

MatchResultWithRoute

The result of a route match with the matched route.

Placement

Represents the placement options for a pop-over.

PopOverOptions

Represents the properties for a PopOver component.

ResultViewOptions

Represents the signal for a result.

Route

Represents a route in the application.

RouteCatchAll

Represents a catch-all route.

RouteInfo

Represents information about a route.

RouteLiteral

Represents a literal route.

RouteParam

Represents a route parameter.

RouteSegment

Represents a segment of a route.