@anyknown/ui 0.1.0

package/dist/components/label/Field.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useId, useMemo } from "react";
+import { styled } from "../../lib/styled.js";
+import { color, font, space, text } from "../../tokens.stylex.js";
+import { FieldContext } from "./fieldContext.js";
+import { Label } from "./Label.js";
+const styles = stylex.create({
+    group: { display: "grid", gap: space.xxs },
+    dimmed: { opacity: { default: 1, ":has(:disabled)": 0.5 } },
+    help: { margin: 0, fontFamily: font.body, fontSize: text.xs, color: color.textMuted },
+    error: { margin: 0, fontFamily: font.body, fontSize: text.xs, color: color.danger },
+});
+export function Field({ label, help, error, required = false, optional, disabled = false, children, ...props }) {
+    const base = useId();
+    const controlId = `${base}control`;
+    const helpId = `${base}help`;
+    const errorId = `${base}error`;
+    const describedBy = [error ? errorId : null, help ? helpId : null].filter(Boolean).join(" ");
+    const value = useMemo(() => ({
+        controlId,
+        describedBy: describedBy || undefined,
+        invalid: Boolean(error),
+        required,
+        disabled,
+    }), [controlId, describedBy, error, required, disabled]);
+    return (_jsx("div", { ...props, ...styled(props, styles.group, styles.dimmed), children: _jsxs(FieldContext, { value: value, children: [label != null && (_jsx(Label, { htmlFor: controlId, required: required, optional: optional, children: label })), children, error != null && (_jsx("p", { id: errorId, role: "alert", ...stylex.props(styles.error), children: error })), help != null && (_jsx("p", { id: helpId, ...stylex.props(styles.help), children: help }))] }) }));
+}

package/dist/components/label/Label.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from "react";
+export type LabelProps = ComponentProps<"label"> & {
+    required?: boolean;
+    optional?: boolean;
+    optionalLabel?: string;
+};
+export declare function Label({ required, optional, optionalLabel, children, ...props }: LabelProps): import("react").JSX.Element;

package/dist/components/label/Label.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { styled } from "../../lib/styled.js";
+import { color, font, text } from "../../tokens.stylex.js";
+const styles = stylex.create({
+    base: {
+        display: "flex",
+        alignItems: "baseline",
+        gap: "0.35rem",
+        fontFamily: font.body,
+        fontSize: text.sm,
+        fontWeight: 500,
+        lineHeight: text.leadingSnug,
+        color: color.text,
+    },
+    required: { color: color.danger },
+    optional: { fontWeight: 400, fontSize: text.xs, color: color.textFaint },
+});
+export function Label({ required, optional, optionalLabel = "選填", children, ...props }) {
+    return (_jsxs("label", { ...props, ...styled(props, styles.base), children: [children, required && (_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.required), children: "*" })), optional && _jsxs("span", { ...stylex.props(styles.optional), children: [" ", optionalLabel] })] }));
+}

package/dist/components/label/fieldContext.d.ts

@@ -0,0 +1,26 @@
+import { type AriaAttributes } from "react";
+export type FieldContextValue = {
+    controlId: string;
+    describedBy?: string;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+};
+export declare const FieldContext: import("react").Context<FieldContextValue | null>;
+type ControlProps = {
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+    required?: boolean;
+    disabled?: boolean;
+};
+export type FieldControlProps = {
+    id?: string;
+    "aria-describedby"?: string;
+    required?: boolean;
+    disabled?: boolean;
+};
+/** A Field owns its control's id, so a caller-supplied `id` is ignored inside one. */
+export declare function useFieldControl(props: ControlProps): FieldControlProps & {
+    invalid: boolean;
+};
+export {};

package/dist/components/label/fieldContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+export const FieldContext = createContext(null);
+/** A Field owns its control's id, so a caller-supplied `id` is ignored inside one. */
+export function useFieldControl(props) {
+    const field = useContext(FieldContext);
+    const ownInvalid = props["aria-invalid"] === true || props["aria-invalid"] === "true";
+    if (!field)
+        return { invalid: ownInvalid };
+    return {
+        id: field.controlId,
+        "aria-describedby": props["aria-describedby"] ?? field.describedBy,
+        required: props.required ?? field.required,
+        disabled: props.disabled ?? field.disabled,
+        invalid: ownInvalid || field.invalid,
+    };
+}

package/dist/components/message/Message.d.ts

@@ -0,0 +1,29 @@
+import type { CSSProperties } from "react";
+import { type ReactNode, type Ref } from "react";
+export declare function useMessageBody(): {
+    current: HTMLElement | null;
+} | null;
+export type ThreadProps = {
+    children: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+};
+export declare function Thread({ children, ...rest }: ThreadProps): import("react").JSX.Element;
+export type UserMessageProps = {
+    children: ReactNode;
+    authorLabel?: string;
+};
+export declare function UserMessage({ children, authorLabel }: UserMessageProps): import("react").JSX.Element;
+export type AssistantMessageProps = {
+    streaming?: boolean;
+    pending?: boolean;
+    pendingLabel?: string;
+    authorLabel?: string;
+    children?: ReactNode;
+};
+export declare function AssistantMessage({ streaming, pending, pendingLabel, authorLabel, children, }: AssistantMessageProps): import("react").JSX.Element;
+export type TextPartProps = {
+    children: ReactNode;
+};
+export declare function TextPart({ children }: TextPartProps): import("react").JSX.Element;

package/dist/components/message/Message.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { Children, createContext, isValidElement, useContext, useRef } from "react";
+import { styled } from "../../lib/styled.js";
+import { color, radius, space, text } from "../../tokens.stylex.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const blink = stylex.keyframes({ "50%": { opacity: 0 } });
+const pulse = stylex.keyframes({ "50%": { opacity: 0.3, scale: 0.8 } });
+const styles = stylex.create({
+    thread: {
+        display: "flex",
+        flexDirection: "column",
+        gap: space.lg,
+        paddingInline: space.md,
+        paddingBlock: space.lg,
+    },
+    turn: { display: "flex", flexDirection: "column", gap: space.xs },
+    userTurn: { alignItems: "flex-end" },
+    bubble: {
+        maxWidth: "85%",
+        backgroundColor: `color-mix(in srgb, ${color.border} 45%, ${color.surface})`,
+        borderRadius: radius.xl,
+        borderEndEndRadius: radius.sm,
+        paddingBlock: space.xs,
+        paddingInline: space.sm,
+        fontSize: text.sm,
+        lineHeight: text.leadingRelaxed,
+        color: color.text,
+    },
+    assistant: {
+        position: "relative",
+        paddingBottom: space.xl,
+        marginBottom: `calc(${space.xl} * -1)`,
+        contentVisibility: "auto",
+        containIntrinsicSize: "auto 200px",
+        "--ak-action-bar-opacity": { default: "0", ":hover": "1" },
+    },
+    part: { margin: 0, fontSize: text.sm, lineHeight: text.leadingRelaxed, color: color.text },
+    cursor: {
+        display: "inline-block",
+        width: 1,
+        height: "1.05em",
+        backgroundColor: color.text,
+        verticalAlign: "text-bottom",
+        marginInlineStart: 1,
+        animationName: { default: blink, [REDUCED]: "none" },
+        animationDuration: "1s",
+        animationTimingFunction: "steps(2, start)",
+        animationIterationCount: "infinite",
+    },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+    pending: {
+        display: "inline-block",
+        width: "0.5rem",
+        height: "0.5rem",
+        borderRadius: radius.full,
+        backgroundColor: color.textMuted,
+        animationName: { default: pulse, [REDUCED]: "none" },
+        animationDuration: "1.2s",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+    },
+});
+const StreamingContext = createContext(false);
+const MessageBodyContext = createContext(null);
+export function useMessageBody() {
+    return useContext(MessageBodyContext);
+}
+export function Thread({ children, ...rest }) {
+    return (_jsx("div", { ...rest, ...styled(rest, styles.thread), children: children }));
+}
+export function UserMessage({ children, authorLabel = "你說:" }) {
+    return (_jsxs("div", { ...stylex.props(styles.turn, styles.userTurn), children: [_jsx("span", { ...stylex.props(styles.srOnly), children: authorLabel }), _jsx("div", { ...stylex.props(styles.bubble), children: children })] }));
+}
+export function AssistantMessage({ streaming = false, pending = false, pendingLabel = "回覆中", authorLabel = "助理說:", children, }) {
+    const body = useRef(null);
+    const parts = Children.toArray(children);
+    const lastText = parts.reduce((found, part, index) => (isValidElement(part) && part.type === TextPart ? index : found), -1);
+    return (_jsx(MessageBodyContext, { value: body, children: _jsxs("div", { ref: body, ...stylex.props(styles.turn, styles.assistant), children: [_jsx("span", { ...stylex.props(styles.srOnly), children: authorLabel }), pending ? (_jsxs("span", { role: "status", children: [_jsx("span", { "aria-hidden": "true", ...stylex.props(styles.pending) }), _jsx("span", { ...stylex.props(styles.srOnly), children: pendingLabel })] })) : (parts.map((part, index) => (_jsx(StreamingContext, { value: streaming && index === lastText, children: part }, isValidElement(part) && part.key != null ? part.key : index))))] }) }));
+}
+export function TextPart({ children }) {
+    const streaming = useContext(StreamingContext);
+    return (_jsxs("p", { "data-ak-message-text": "", ...stylex.props(styles.part), children: [children, streaming && _jsx("span", { "aria-hidden": "true", ...stylex.props(styles.cursor) })] }));
+}

package/dist/components/password-input/PasswordInput.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentProps } from "react";
+/** Length thresholds (8 / 12 / 20) × character classes. 12 matches storage's MIN_LENGTH. */
+export declare function defaultScorer(value: string): number;
+export type PasswordInputProps = Omit<ComponentProps<"input">, "type" | "size" | "value"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    meter?: boolean;
+    scorer?: (value: string) => number;
+    levelLabels?: string[];
+    capsLockWarning?: boolean;
+    capsLockLabel?: string;
+    confirmOf?: string;
+    mismatchLabel?: string;
+    showLabel?: string;
+    hideLabel?: string;
+    shownStatus?: string;
+    invalid?: boolean;
+};
+export declare function PasswordInput({ value, defaultValue, onValueChange, meter, scorer, levelLabels, capsLockWarning, capsLockLabel, confirmOf, mismatchLabel, showLabel, hideLabel, shownStatus, invalid, autoComplete, ...props }: PasswordInputProps): import("react").JSX.Element;

package/dist/components/password-input/PasswordInput.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as stylex from "@stylexjs/stylex";
+import { useId, useState } from "react";
+import { reset, styled } from "../../lib/styled.js";
+import { useControllableState } from "../../lib/useControllableState.js";
+import { color, font, radius, space, text } from "../../tokens.stylex.js";
+import { controlStyles } from "../input/Input.js";
+import { useFieldControl } from "../label/fieldContext.js";
+const REDUCED = "@media (prefers-reduced-motion: reduce)";
+const styles = stylex.create({
+    field: { position: "relative" },
+    input: { paddingInlineEnd: "2.4rem" },
+    toggle: {
+        position: "absolute",
+        insetInlineEnd: space.xxs,
+        insetBlockStart: "50%",
+        translate: "0 -50%",
+        display: "grid",
+        placeItems: "center",
+        width: "1.75rem",
+        height: "1.75rem",
+        borderRadius: radius.sm,
+        color: color.textMuted,
+        backgroundColor: { default: "transparent", ":hover": color.accentSubtle },
+        cursor: "pointer",
+        outline: { default: "none", ":focus-visible": `2px solid ${color.focusRing}` },
+    },
+    meter: { display: "grid", gap: space.xxs, marginTop: space.xxs },
+    bars: { display: "flex", gap: space.xxs },
+    bar: {
+        height: "0.25rem",
+        flex: 1,
+        borderRadius: radius.full,
+        backgroundColor: color.border,
+        transitionProperty: "background-color",
+        transitionDuration: { default: "160ms", [REDUCED]: "0s" },
+    },
+    barWeak: { backgroundColor: color.danger },
+    barFair: { backgroundColor: color.warning },
+    barStrong: { backgroundColor: color.accent },
+    label: { fontFamily: font.body, fontSize: text.xs, color: color.textMuted, minHeight: "1.2em", margin: 0 },
+    labelWeak: { color: color.danger },
+    warningIcon: { color: color.warning, flex: "none" },
+    caps: {
+        display: "flex",
+        alignItems: "center",
+        gap: space.xxs,
+        backgroundColor: color.warningSubtle,
+        color: color.text,
+        borderRadius: radius.sm,
+        paddingBlock: space.xxs,
+        paddingInline: space.xs,
+        fontFamily: font.body,
+        fontSize: text.xs,
+        marginTop: space.xxs,
+    },
+    error: { fontFamily: font.body, fontSize: text.xs, color: color.danger, margin: 0, marginTop: space.xxs },
+    srOnly: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clipPath: "inset(50%)",
+        whiteSpace: "nowrap",
+        borderWidth: 0,
+    },
+});
+const LEVEL_LABELS = [
+    "passphrase 無法找回,忘了就只能靠復原金鑰。",
+    "弱 — 再長一點。",
+    "可 — 建議混入更多種字元。",
+    "強",
+    "很強",
+];
+/** Length thresholds (8 / 12 / 20) × character classes. 12 matches storage's MIN_LENGTH. */
+export function defaultScorer(value) {
+    if (!value)
+        return 0;
+    let classes = 0;
+    for (const pattern of [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/])
+        if (pattern.test(value))
+            classes += 1;
+    if (value.length < 8)
+        return 1;
+    if (value.length < 12)
+        return classes >= 3 ? 2 : 1;
+    if (value.length < 20)
+        return classes >= 3 ? 3 : 2;
+    return classes >= 2 ? 4 : 3;
+}
+const BAR_TONE = [null, styles.barWeak, styles.barFair, styles.barStrong, styles.barStrong];
+function EyeIcon({ off }) {
+    return off ? (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: _jsx("path", { d: "M2 12s3.5-7 10-7c1.8 0 3.4.5 4.7 1.3M22 12s-3.5 7-10 7c-1.8 0-3.4-.5-4.7-1.3M3 3l18 18" }) })) : (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }));
+}
+function WarningIcon() {
+    return (_jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: [_jsx("path", { d: "m12 3 10 18H2L12 3Z" }), _jsx("path", { d: "M12 10v4m0 3h.01" })] }));
+}
+export function PasswordInput({ value, defaultValue = "", onValueChange, meter = false, scorer = defaultScorer, levelLabels = LEVEL_LABELS, capsLockWarning = true, capsLockLabel = "Caps Lock 開著。", confirmOf, mismatchLabel = "兩次輸入的 passphrase 不一樣。", showLabel = "顯示 passphrase", hideLabel = "隱藏 passphrase", shownStatus = "passphrase 已顯示", invalid, autoComplete = "new-password", ...props }) {
+    const base = useId();
+    const meterId = `${base}meter`;
+    const capsId = `${base}caps`;
+    const errorId = `${base}error`;
+    const { invalid: fieldInvalid, ...field } = useFieldControl(props);
+    const [current, setCurrent] = useControllableState(value, defaultValue, onValueChange);
+    const [revealed, setRevealed] = useState(false);
+    const [capsOn, setCapsOn] = useState(false);
+    const mismatched = confirmOf != null && current.length > 0 && current !== confirmOf;
+    const isInvalid = invalid ?? (mismatched || fieldInvalid);
+    const level = meter ? scorer(current) : 0;
+    const describedBy = [
+        meter ? meterId : null,
+        capsLockWarning && capsOn ? capsId : null,
+        mismatched ? errorId : null,
+        field["aria-describedby"],
+    ]
+        .filter(Boolean)
+        .join(" ");
+    function readCapsLock(event) {
+        if (!capsLockWarning || typeof event.getModifierState !== "function")
+            return;
+        setCapsOn(event.getModifierState("CapsLock"));
+    }
+    return (_jsxs("div", { children: [_jsxs("div", { ...stylex.props(styles.field), children: [_jsx("input", { ...props, ...field, type: revealed ? "text" : "password", autoComplete: autoComplete, value: current, "aria-invalid": isInvalid || undefined, "aria-describedby": describedBy || undefined, onChange: (event) => {
+                            setCurrent(event.currentTarget.value);
+                            props.onChange?.(event);
+                        }, onKeyDown: (event) => {
+                            readCapsLock(event);
+                            props.onKeyDown?.(event);
+                        }, onKeyUp: (event) => {
+                            readCapsLock(event);
+                            props.onKeyUp?.(event);
+                        }, onBlur: (event) => {
+                            setCapsOn(false);
+                            props.onBlur?.(event);
+                        }, ...styled(props, controlStyles.base, controlStyles.md, styles.input, isInvalid && controlStyles.invalid) }), _jsx("button", { type: "button", "aria-label": revealed ? hideLabel : showLabel, "aria-pressed": revealed, onClick: (event) => {
+                            setRevealed((shown) => !shown);
+                            event.currentTarget.parentElement?.querySelector("input")?.focus();
+                        }, ...stylex.props(reset.control, styles.toggle), children: _jsx(EyeIcon, { off: revealed }) })] }), meter && (_jsxs("div", { id: meterId, ...stylex.props(styles.meter), children: [_jsx("div", { "aria-hidden": "true", ...stylex.props(styles.bars), children: [0, 1, 2, 3].map((index) => (_jsx("i", { ...stylex.props(styles.bar, index < level && BAR_TONE[level]) }, index))) }), _jsx("p", { "aria-live": "polite", ...stylex.props(styles.label, level === 1 && styles.labelWeak), children: levelLabels[level] ?? "" })] })), capsLockWarning && (_jsx("p", { id: capsId, role: "status", ...stylex.props(capsOn ? styles.caps : styles.srOnly), children: capsOn && (_jsxs(_Fragment, { children: [_jsx(WarningIcon, {}), capsLockLabel] })) })), _jsx("p", { id: errorId, ...stylex.props(mismatched ? styles.error : styles.srOnly), children: mismatched ? mismatchLabel : "" }), _jsx("span", { role: "status", ...stylex.props(styles.srOnly), children: revealed ? shownStatus : "" })] }));
+}

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,38 @@
+import type { ReactElement, ReactNode } from "react";
+export type PopoverProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    children: ReactNode;
+};
+export declare function Popover({ children, ...props }: PopoverProps): import("react").JSX.Element;
+export declare function PopoverTrigger({ children }: {
+    children: ReactElement;
+}): import("react").JSX.Element;
+export declare const PopoverTitle: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const PopoverDescription: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const PopoverClose: ({ children }: {
+    children: ReactElement;
+}) => import("react").JSX.Element;
+type PopoverContentBase = {
+    side?: "top" | "bottom" | "left" | "right";
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+    className?: string;
+    children: ReactNode;
+};
+/** role="dialog" needs a name: pass `aria-label`, or render a `PopoverTitle` inside. */
+export type PopoverContentProps = PopoverContentBase & ({
+    "aria-label": string;
+    titled?: never;
+} | {
+    "aria-label"?: never;
+    titled: true;
+});
+export declare function PopoverContent({ side, align, sideOffset, children, ...props }: PopoverContentProps): import("react").JSX.Element;
+export {};

package/dist/components/popover/Popover.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import * as stylex from "@stylexjs/stylex";
+import { popupStyles } from "../../lib/popup.js";
+import { styled } from "../../lib/styled.js";
+import { color, font, space, text } from "../../tokens.stylex.js";
+const styles = stylex.create({
+    panel: {
+        minWidth: "11rem",
+        padding: space.sm,
+        fontFamily: font.body,
+        fontSize: text.sm,
+        color: color.text,
+    },
+    title: {
+        fontFamily: font.display,
+        fontSize: text.base,
+        fontWeight: 500,
+        lineHeight: text.leadingSnug,
+        margin: 0,
+        marginBottom: space.xxs,
+    },
+    description: { color: color.textMuted, margin: 0 },
+});
+export function Popover({ children, ...props }) {
+    return _jsx(BasePopover.Root, { ...props, children: children });
+}
+export function PopoverTrigger({ children }) {
+    return _jsx(BasePopover.Trigger, { render: children });
+}
+export const PopoverTitle = ({ children }) => (_jsx(BasePopover.Title, { ...stylex.props(styles.title), children: children }));
+export const PopoverDescription = ({ children }) => (_jsx(BasePopover.Description, { ...stylex.props(styles.description), children: children }));
+export const PopoverClose = ({ children }) => (_jsx(BasePopover.Close, { render: children }));
+export function PopoverContent({ side = "bottom", align = "center", sideOffset = 8, children, ...props }) {
+    const { titled: _titled, ...rest } = props;
+    return (_jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { side: side, align: align, sideOffset: sideOffset, ...stylex.props(popupStyles.positioner), children: _jsx(BasePopover.Popup, { ...rest, ...styled(rest, popupStyles.surface, styles.panel), children: children }) }) }));
+}

package/dist/components/progress/Progress.d.ts

@@ -0,0 +1,36 @@
+declare const SPINNER_SIZES: {
+    readonly sm: 18;
+    readonly md: 28;
+    readonly lg: 40;
+};
+export type SpinnerProps = {
+    size?: keyof typeof SPINNER_SIZES;
+    label?: string;
+};
+export declare function Spinner({ size, label }: SpinnerProps): import("react").JSX.Element;
+export type ProgressProps = {
+    value?: number;
+    /** Human-readable reading, e.g. "3 則訊息交接中 · 64%". Required by NOTES for determinate progress. */
+    valueText: string;
+    stages?: string[];
+    className?: string;
+    "aria-label": string;
+};
+export declare function Progress({ value, valueText, stages, ...rest }: ProgressProps): import("react").JSX.Element;
+export type ProgressBallProps = {
+    value: number;
+    size?: number;
+    valueText: string;
+    className?: string;
+    "aria-label": string;
+};
+export declare function ProgressBall({ value, size, valueText, ...rest }: ProgressBallProps): import("react").JSX.Element;
+export type ProgressRingProps = {
+    value: number;
+    size?: number;
+    valueText: string;
+    className?: string;
+    "aria-label": string;
+};
+export declare function ProgressRing({ value, size, valueText, ...rest }: ProgressRingProps): import("react").JSX.Element;
+export {};