@openwarelabs/ui 0.0.0-stage → 0.1.1

package/dist/fonts.css

@@ -0,0 +1,3 @@
+/* Inter and Geist Mono, self-hosted variable fonts (SIL Open Font License 1.1). */
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/geist-mono";

package/dist/hooks/useControllableState.d.cts

@@ -0,0 +1,5 @@
+/**
+ * State that a parent may control (`value` + `onChange`) or leave to the component (`defaultValue`).
+ * Returns the current value and a setter that calls `onChange` either way.
+ */
+export declare function useControllableState<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void): [T, (next: T | ((previous: T) => T)) => void];

package/dist/hooks/useControllableState.d.ts

@@ -0,0 +1,5 @@
+/**
+ * State that a parent may control (`value` + `onChange`) or leave to the component (`defaultValue`).
+ * Returns the current value and a setter that calls `onChange` either way.
+ */
+export declare function useControllableState<T>(value: T | undefined, defaultValue: T, onChange?: (next: T) => void): [T, (next: T | ((previous: T) => T)) => void];

package/dist/hooks/useFloating.d.cts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type RefObject } from "react";
+export type Placement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top";
+interface Options {
+    open: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    floatingRef: RefObject<HTMLElement | null>;
+    placement?: Placement;
+    /** Distance from the anchor in pixels. */
+    offset?: number;
+    /** Make the floating element at least as wide as the anchor. */
+    matchWidth?: boolean;
+    /** The tallest it gets before scrolling. */
+    maxHeight?: number;
+}
+/**
+ * Positions a floating element (a popover, a listbox) against its anchor with fixed coordinates, flips it above
+ * or below when there's no room, keeps it on screen, and follows the anchor when the page scrolls or resizes.
+ * It also puts the element in the browser's top layer (popover="manual"), so dialogs and overflow can't clip it.
+ * Pass the element's `mounted` from usePresence as `open`, so it stays placed while it animates out.
+ */
+export declare function useFloating({ open, anchorRef, floatingRef, placement, offset, matchWidth, maxHeight, }: Options): CSSProperties;
+/** Calls `onDismiss` on a press outside every given element, or on Escape. */
+export declare function useDismiss(open: boolean, refs: Array<RefObject<HTMLElement | null>>, onDismiss: (reason: "outside" | "escape") => void): void;
+/** The attribute that makes an element a manual popover, typed loosely for React 18. */
+export declare const manualPopover: Record<string, string>;
+export {};

package/dist/hooks/useFloating.d.ts

@@ -0,0 +1,26 @@
+import { type CSSProperties, type RefObject } from "react";
+export type Placement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top";
+interface Options {
+    open: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    floatingRef: RefObject<HTMLElement | null>;
+    placement?: Placement;
+    /** Distance from the anchor in pixels. */
+    offset?: number;
+    /** Make the floating element at least as wide as the anchor. */
+    matchWidth?: boolean;
+    /** The tallest it gets before scrolling. */
+    maxHeight?: number;
+}
+/**
+ * Positions a floating element (a popover, a listbox) against its anchor with fixed coordinates, flips it above
+ * or below when there's no room, keeps it on screen, and follows the anchor when the page scrolls or resizes.
+ * It also puts the element in the browser's top layer (popover="manual"), so dialogs and overflow can't clip it.
+ * Pass the element's `mounted` from usePresence as `open`, so it stays placed while it animates out.
+ */
+export declare function useFloating({ open, anchorRef, floatingRef, placement, offset, matchWidth, maxHeight, }: Options): CSSProperties;
+/** Calls `onDismiss` on a press outside every given element, or on Escape. */
+export declare function useDismiss(open: boolean, refs: Array<RefObject<HTMLElement | null>>, onDismiss: (reason: "outside" | "escape") => void): void;
+/** The attribute that makes an element a manual popover, typed loosely for React 18. */
+export declare const manualPopover: Record<string, string>;
+export {};

package/dist/hooks/useIndicator.d.cts

@@ -0,0 +1,8 @@
+import { type RefObject } from "react";
+/**
+ * Measures the selected child of `containerRef` (the first match of `selector`) and writes its box to the
+ * container as --ow-indicator-x, -y, -w and -h, so one absolutely placed element (.ow-indicator) can slide
+ * between choices. The container gets data-indicator="placed" on the first measure (no animation) and "ready"
+ * a frame later (animated from then on). It re-measures when `key` changes or anything resizes.
+ */
+export declare function useIndicator(containerRef: RefObject<HTMLElement | null>, selector: string, key: unknown): void;

package/dist/hooks/useIndicator.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from "react";
+/**
+ * Measures the selected child of `containerRef` (the first match of `selector`) and writes its box to the
+ * container as --ow-indicator-x, -y, -w and -h, so one absolutely placed element (.ow-indicator) can slide
+ * between choices. The container gets data-indicator="placed" on the first measure (no animation) and "ready"
+ * a frame later (animated from then on). It re-measures when `key` changes or anything resizes.
+ */
+export declare function useIndicator(containerRef: RefObject<HTMLElement | null>, selector: string, key: unknown): void;

package/dist/hooks/useMenuKeyboard.d.cts

@@ -0,0 +1,12 @@
+import { type KeyboardEvent, type RefObject } from "react";
+/**
+ * Keyboard use for a `role="menu"` popup, as people expect from menus: opening it moves focus to its first item,
+ * the arrow keys (and Home and End) move between items, wrapping round, and Escape closes it and puts focus
+ * back on the button that opened it. Attach the returned handler to the menu's `onKeyDown`.
+ */
+export declare function useMenuKeyboard({ open, menuRef, triggerRef, onClose, }: {
+    open: boolean;
+    menuRef: RefObject<HTMLElement | null>;
+    triggerRef?: RefObject<HTMLElement | null> | undefined;
+    onClose(): void;
+}): (event: KeyboardEvent<HTMLElement>) => void;

package/dist/hooks/useMenuKeyboard.d.ts

@@ -0,0 +1,12 @@
+import { type KeyboardEvent, type RefObject } from "react";
+/**
+ * Keyboard use for a `role="menu"` popup, as people expect from menus: opening it moves focus to its first item,
+ * the arrow keys (and Home and End) move between items, wrapping round, and Escape closes it and puts focus
+ * back on the button that opened it. Attach the returned handler to the menu's `onKeyDown`.
+ */
+export declare function useMenuKeyboard({ open, menuRef, triggerRef, onClose, }: {
+    open: boolean;
+    menuRef: RefObject<HTMLElement | null>;
+    triggerRef?: RefObject<HTMLElement | null> | undefined;
+    onClose(): void;
+}): (event: KeyboardEvent<HTMLElement>) => void;

package/dist/hooks/useModalDialog.d.cts

@@ -0,0 +1,9 @@
+/**
+ * Shows a <dialog> as a modal while `open` is true, and keeps it mounted long enough for its exit animation
+ * once `open` turns false. Escape and a click on the backdrop fire the dialog's `cancel` event; the hook turns
+ * that into `onCancel`, so a dialog that must stay open while it works can ignore it.
+ */
+export declare function useModalDialog(open: boolean, onCancel: () => void): {
+    dialogRef: import("react").RefObject<HTMLDialogElement>;
+    mounted: boolean;
+};

package/dist/hooks/useModalDialog.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shows a <dialog> as a modal while `open` is true, and keeps it mounted long enough for its exit animation
+ * once `open` turns false. Escape and a click on the backdrop fire the dialog's `cancel` event; the hook turns
+ * that into `onCancel`, so a dialog that must stay open while it works can ignore it.
+ */
+export declare function useModalDialog(open: boolean, onCancel: () => void): {
+    dialogRef: import("react").RefObject<HTMLDialogElement>;
+    mounted: boolean;
+};

package/dist/hooks/usePresence.d.cts

@@ -0,0 +1,13 @@
+/** How long a closing layer stays mounted for its exit animation (base.css: ow-floating-out). */
+export declare const exitDuration = 140;
+export interface Presence {
+    /** Render the element while this is true: it stays true through the exit animation. */
+    mounted: boolean;
+    /** Put this on the element as data-state, so CSS can run the enter or the exit animation. */
+    state: "open" | "closed";
+}
+/**
+ * Keeps an element mounted for a moment after `open` turns false, so it can animate out instead of vanishing.
+ * With reduced motion it unmounts at once.
+ */
+export declare function usePresence(open: boolean, exitMs?: number): Presence;

package/dist/hooks/usePresence.d.ts

@@ -0,0 +1,13 @@
+/** How long a closing layer stays mounted for its exit animation (base.css: ow-floating-out). */
+export declare const exitDuration = 140;
+export interface Presence {
+    /** Render the element while this is true: it stays true through the exit animation. */
+    mounted: boolean;
+    /** Put this on the element as data-state, so CSS can run the enter or the exit animation. */
+    state: "open" | "closed";
+}
+/**
+ * Keeps an element mounted for a moment after `open` turns false, so it can animate out instead of vanishing.
+ * With reduced motion it unmounts at once.
+ */
+export declare function usePresence(open: boolean, exitMs?: number): Presence;

package/dist/icons.d.cts

@@ -0,0 +1,33 @@
+import type { SVGProps } from "react";
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    size?: number;
+}
+export declare const CheckIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronDownIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const SearchIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CornerDownLeftIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const XIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const UserIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const TrashIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CircleCheckIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CircleAlertIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronRightIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronLeftIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronUpIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const MinusIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const PlusIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const InfoIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const TriangleAlertIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const PipetteIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CopyIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CalendarIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const FileIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const FolderIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const FolderOpenIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const UploadIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ArrowUpRightIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ArrowUpIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ArrowDownIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronsUpDownIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const InboxIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const EllipsisIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;

package/dist/icons.d.ts

@@ -0,0 +1,33 @@
+import type { SVGProps } from "react";
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    size?: number;
+}
+export declare const CheckIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronDownIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const SearchIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CornerDownLeftIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const XIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const UserIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const TrashIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CircleCheckIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CircleAlertIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronRightIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronLeftIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronUpIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const MinusIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const PlusIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const InfoIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const TriangleAlertIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const PipetteIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CopyIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const CalendarIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const FileIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const FolderIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const FolderOpenIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const UploadIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ArrowUpRightIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ArrowUpIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ArrowDownIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const ChevronsUpDownIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const InboxIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;
+export declare const EllipsisIcon: ({ size, strokeWidth, ...props }: IconProps) => import("react").JSX.Element;