@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/popover.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn, stateClassName } from "../internal/classes.js";
+export const popoverContentSizeNames = [
+    "default",
+    "menu",
+    "picker",
+    "panel",
+    "work-list",
+    "app-actions",
+    "bud",
+];
+export function Popover(props) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+export function PopoverTrigger(props) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+/**
+ * The floating panel. It renders its own portal and positioner, so place it
+ * directly inside `Popover`.
+ */
+export function PopoverContent({ align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, collisionPadding = 8, collisionAvoidance, sticky, positionMethod, anchor, size = "default", keepMounted = false, container, className, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { keepMounted: keepMounted, container: container, children: _jsx(PopoverPrimitive.Positioner, { className: "sprout-popover-positioner", anchor: anchor, align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, collisionPadding: collisionPadding, collisionAvoidance: collisionAvoidance, sticky: sticky, positionMethod: positionMethod, children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", "data-size": size, ...props, className: stateClassName(cn("sprout-popover-content", `sprout-popover-${size}`), className) }) }) }));
+}
+export function PopoverHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-header", ...props, className: cn("sprout-popover-header", className) }));
+}
+export function PopoverTitle({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", ...props, className: stateClassName("sprout-popover-title", className) }));
+}
+export function PopoverDescription({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", ...props, className: stateClassName("sprout-popover-description", className) }));
+}

package/dist/components/progress.d.ts

@@ -0,0 +1,27 @@
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+export type ProgressProps = BaseProgress.Root.Props;
+/**
+ * A bar that shows how far a task has come. Pass a number to `value`, or
+ * `null` while the amount is unknown. Children, such as `ProgressLabel` and
+ * `ProgressValue`, sit on one row above the track. Name it with a
+ * `ProgressLabel` or `aria-label`.
+ */
+export declare function Progress({ className, children, ...props }: ProgressProps): import("react").JSX.Element;
+export type ProgressTrackProps = BaseProgress.Track.Props;
+/** The 4px rail behind the indicator. `Progress` renders one for you. */
+export declare function ProgressTrack({ className, ...props }: ProgressTrackProps): import("react").JSX.Element;
+export type ProgressIndicatorProps = BaseProgress.Indicator.Props;
+/**
+ * The filled part of the track. Its width follows the value; with a `null`
+ * value it slides across the track instead.
+ */
+export declare function ProgressIndicator({ className, ...props }: ProgressIndicatorProps): import("react").JSX.Element;
+export type ProgressLabelProps = BaseProgress.Label.Props;
+/** A visible name for the bar. It labels the `progressbar` for you. */
+export declare function ProgressLabel({ className, ...props }: ProgressLabelProps): import("react").JSX.Element;
+export type ProgressValueProps = BaseProgress.Value.Props;
+/**
+ * The formatted value, such as “40%”, at the end of the label row. It is
+ * empty while the value is `null`. Pass a function child to show other text.
+ */
+export declare function ProgressValue({ className, ...props }: ProgressValueProps): import("react").JSX.Element;

package/dist/components/progress.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Progress as BaseProgress } from "@base-ui/react/progress";
+import { stateClassName } from "../internal/classes.js";
+/**
+ * A bar that shows how far a task has come. Pass a number to `value`, or
+ * `null` while the amount is unknown. Children, such as `ProgressLabel` and
+ * `ProgressValue`, sit on one row above the track. Name it with a
+ * `ProgressLabel` or `aria-label`.
+ */
+export function Progress({ className, children, ...props }) {
+    return (_jsxs(BaseProgress.Root, { "data-slot": "progress", ...props, className: stateClassName("sprout-progress", className), children: [children, _jsx(ProgressTrack, { children: _jsx(ProgressIndicator, {}) })] }));
+}
+/** The 4px rail behind the indicator. `Progress` renders one for you. */
+export function ProgressTrack({ className, ...props }) {
+    return (_jsx(BaseProgress.Track, { "data-slot": "progress-track", ...props, className: stateClassName("sprout-progress-track", className) }));
+}
+/**
+ * The filled part of the track. Its width follows the value; with a `null`
+ * value it slides across the track instead.
+ */
+export function ProgressIndicator({ className, ...props }) {
+    return (_jsx(BaseProgress.Indicator, { "data-slot": "progress-indicator", ...props, className: stateClassName("sprout-progress-indicator", className) }));
+}
+/** A visible name for the bar. It labels the `progressbar` for you. */
+export function ProgressLabel({ className, ...props }) {
+    return (_jsx(BaseProgress.Label, { "data-slot": "progress-label", ...props, className: stateClassName("sprout-progress-label", className) }));
+}
+/**
+ * The formatted value, such as “40%”, at the end of the label row. It is
+ * empty while the value is `null`. Pass a function child to show other text.
+ */
+export function ProgressValue({ className, ...props }) {
+    return (_jsx(BaseProgress.Value, { "data-slot": "progress-value", ...props, className: stateClassName("sprout-progress-value", className) }));
+}

package/dist/components/prompt-list.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentProps, type ReactNode } from "react";
+import { type BrandStackItem } from "./brand-icon.js";
+export interface PromptListItem {
+    id: string;
+    /** One line. Long labels are cut with an ellipsis and shown in full on hover. */
+    label: string;
+    /** A 16px icon shown before the label. */
+    icon: ReactNode;
+    /** Apps the prompt uses, shown as overlapping tiles with tooltips. */
+    brands?: readonly BrandStackItem[] | undefined;
+}
+export interface PromptListProps extends Omit<ComponentProps<"section">, "title" | "children" | "onSelect"> {
+    /** Names the list. Shown as a small heading unless `showTitle` is false. */
+    title: string;
+    /** Hide the heading but keep `title` as the list's accessible name. */
+    showTitle?: boolean | undefined;
+    items: readonly PromptListItem[];
+    onSelect: (id: string) => void;
+    /** Locks every row, for example while a message is sending. */
+    disabled?: boolean | undefined;
+}
+/** A titled list of one-line prompts. Choosing a row calls `onSelect` with its id. */
+export declare function PromptList({ title, showTitle, items, onSelect, disabled, className, ...props }: PromptListProps): import("react").JSX.Element;

package/dist/components/prompt-list.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from "react";
+import { ArrowRight } from "reicon-react/icons/ArrowRight";
+import { cn } from "../internal/classes.js";
+import { BrandStack } from "./brand-icon.js";
+/** A titled list of one-line prompts. Choosing a row calls `onSelect` with its id. */
+export function PromptList({ title, showTitle = true, items, onSelect, disabled = false, className, ...props }) {
+    const heading = useId();
+    return (_jsxs("section", { "data-slot": "prompt-list", "data-disabled": disabled || undefined, ...props, "aria-labelledby": showTitle ? heading : undefined, "aria-label": showTitle ? undefined : title, className: cn("sprout-prompt-list", className), children: [showTitle && (_jsx("h3", { id: heading, className: "sprout-prompt-list-title", children: title })), _jsx("ul", { className: "sprout-prompt-list-items", children: items.map((item, index) => (_jsxs("li", { "data-slot": "prompt-list-item", className: "sprout-prompt-list-item", style: { "--sprout-prompt-index": index }, children: [_jsx("span", { "aria-hidden": "true", className: "sprout-prompt-list-icon", children: item.icon }), _jsx("button", { type: "button", disabled: disabled, title: item.label, onClick: () => onSelect(item.id), className: "sprout-prompt-list-button", children: item.label }), !!item.brands?.length && (_jsx(BrandStack, { brands: item.brands, className: "sprout-prompt-list-brands" })), _jsx(ArrowRight, { "aria-hidden": "true", className: "sprout-prompt-list-arrow" })] }, item.id))) })] }));
+}

package/dist/components/questionnaire.d.ts

@@ -0,0 +1,148 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type ChangeEventHandler, type ComponentProps } from "react";
+import { type ButtonSize, type ButtonVariant } from "./button.js";
+export declare const questionnaireItemStatusNames: readonly ["unanswered", "answered", "skipped"];
+export declare const questionnaireShortcutModeNames: readonly ["letters", "numbers"];
+export type QuestionnaireItemStatus = (typeof questionnaireItemStatusNames)[number];
+export type QuestionnaireShortcutMode = (typeof questionnaireShortcutModeNames)[number];
+export interface QuestionnaireChoiceDefinition {
+    value: string;
+    disabled?: boolean | undefined;
+}
+export interface QuestionnaireItemDefinition {
+    name: string;
+    choices?: readonly QuestionnaireChoiceDefinition[] | undefined;
+    disabled?: boolean | undefined;
+    required?: boolean | undefined;
+}
+export type QuestionnaireInputType = "date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week";
+export interface QuestionnaireState extends Record<string, unknown> {
+    current: number;
+    first: boolean;
+    last: boolean;
+    total: number;
+}
+export type QuestionnaireProps = Omit<ComponentProps<"form">, "defaultValue" | "value"> & {
+    /** The item shown first when uncontrolled. Falls back to the first enabled item. */
+    defaultItem?: string | undefined;
+    /** The shown item, when controlled. */
+    item?: string | undefined;
+    /**
+     * The ordered list of items and choices. Sets the step order, progress
+     * total, and which letters or numbers each choice gets as a shortcut.
+     * Without it, rendered items are used in document order.
+     */
+    items?: readonly QuestionnaireItemDefinition[] | undefined;
+    onItemChange?: ((item: string) => void) | undefined;
+    /** Press a letter or number to pick a choice. Off by default. */
+    shortcuts?: QuestionnaireShortcutMode | undefined;
+};
+/**
+ * A form that asks one question at a time. It moves between items with
+ * Next, Previous, and Skip, checks required answers before moving on, and
+ * submits after the last item.
+ */
+export declare function Questionnaire({ className, defaultItem, item, items, noValidate, onItemChange, onReset, onSubmit, ref, shortcuts, ...props }: QuestionnaireProps): import("react").JSX.Element;
+export type QuestionnaireProgressProps = useRender.ComponentProps<"div", QuestionnaireState>;
+/** "Question 2 of 3", announced politely as the step changes. */
+export declare function QuestionnaireProgress({ children, className, render, ...props }: QuestionnaireProgressProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface QuestionnaireItemState extends Record<string, unknown> {
+    active: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    multiple: boolean;
+    required: boolean;
+    status: QuestionnaireItemStatus;
+}
+export type QuestionnaireItemProps = Omit<ComponentProps<"fieldset">, "name" | "value"> & {
+    name: string;
+    /** Checkbox choices instead of radios. */
+    multiple?: boolean | undefined;
+    /** Must be answered; hides Skip. */
+    required?: boolean | undefined;
+    /** Shows the error even after an answer, such as for a server-side check. */
+    invalid?: boolean | undefined;
+    onStatusChange?: ((status: QuestionnaireItemStatus) => void) | undefined;
+};
+/** One question. Only the current item is shown; the rest are hidden and inert. */
+export declare function QuestionnaireItem({ "aria-describedby": ariaDescribedBy, "aria-keyshortcuts": ariaKeyShortcuts, children, className, disabled, invalid, multiple, name, onStatusChange, ref, required, ...props }: QuestionnaireItemProps): import("react").JSX.Element;
+export type QuestionnaireTitleProps = useRender.ComponentProps<"legend">;
+/** The question, as the item's `legend`. */
+export declare function QuestionnaireTitle({ className, render, ...props }: QuestionnaireTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type QuestionnaireDescriptionProps = useRender.ComponentProps<"p">;
+/** Help text under the question. The item references it with `aria-describedby`. */
+export declare function QuestionnaireDescription({ className, id, render, ...props }: QuestionnaireDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface QuestionnaireChoicesState extends Record<string, unknown> {
+    shortcuts: QuestionnaireShortcutMode | null;
+}
+export type QuestionnaireChoicesProps = useRender.ComponentProps<"div", QuestionnaireChoicesState>;
+/** Stacks the item's choices. */
+export declare function QuestionnaireChoices({ className, render, ...props }: QuestionnaireChoicesProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export interface QuestionnaireChoiceState extends Record<string, unknown> {
+    checked: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    shortcut: string | null;
+    type: "checkbox" | "radio";
+}
+export type QuestionnaireChoiceProps = Omit<useRender.ComponentProps<"label", QuestionnaireChoiceState>, "onChange"> & {
+    value: string;
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+};
+/**
+ * One answer row. A radio in single-answer items and a checkbox in
+ * `multiple` items; the whole row is the hit area.
+ */
+export declare function QuestionnaireChoice({ checked, children, className, defaultChecked, disabled: ownDisabled, onChange, render, value, ...props }: QuestionnaireChoiceProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type QuestionnaireChoiceDescriptionProps = ComponentProps<"span">;
+/** A muted second line inside a choice. */
+export declare function QuestionnaireChoiceDescription({ className, ...props }: QuestionnaireChoiceDescriptionProps): import("react").JSX.Element;
+export interface QuestionnaireInputState extends Record<string, unknown> {
+    disabled: boolean;
+    filled: boolean;
+    invalid: boolean;
+}
+export type QuestionnaireInputProps = Omit<useRender.ComponentProps<"input", QuestionnaireInputState>, "form" | "name" | "type"> & {
+    type?: QuestionnaireInputType | undefined;
+};
+/**
+ * A typed answer. It counts as answered once it has text, and is only sent
+ * with the form while it does.
+ */
+export declare function QuestionnaireInput({ className, defaultValue, disabled: ownDisabled, onChange, ref, render, type, value, ...props }: QuestionnaireInputProps): import("react").JSX.Element;
+export interface QuestionnaireErrorState extends Record<string, unknown> {
+    invalid: boolean;
+}
+export type QuestionnaireErrorProps = useRender.ComponentProps<"p", QuestionnaireErrorState>;
+/** Shown after someone tries to move on without a valid answer. */
+export declare function QuestionnaireError({ children, className, id, render, ...props }: QuestionnaireErrorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type QuestionnaireActionsProps = ComponentProps<"div">;
+/** Previous on the start side; Skip and Next or Submit on the end side. */
+export declare function QuestionnaireActions({ className, ...props }: QuestionnaireActionsProps): import("react").JSX.Element;
+export interface QuestionnaireNavigationState extends Record<string, unknown> {
+    disabled: boolean;
+    shortcut: "Enter" | null;
+    status: QuestionnaireItemStatus | null;
+    visible: boolean;
+}
+export type QuestionnaireNavigationProps = useRender.ComponentProps<"button", QuestionnaireNavigationState> & {
+    /** A Button variant. */
+    variant?: ButtonVariant | undefined;
+    /** A Button size. */
+    size?: ButtonSize | undefined;
+};
+export type QuestionnairePreviousProps = QuestionnaireNavigationProps;
+export type QuestionnaireSkipProps = QuestionnaireNavigationProps;
+export type QuestionnaireNextProps = QuestionnaireNavigationProps;
+export type QuestionnaireSubmitProps = QuestionnaireNavigationProps;
+/** Goes back one item. Hidden on the first item. */
+export declare function QuestionnairePrevious(props: QuestionnairePreviousProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Clears the answer and moves on. Shown only on optional items; submits on the last one. */
+export declare function QuestionnaireSkip(props: QuestionnaireSkipProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Checks the answer and moves on. Hidden on the last item. */
+export declare function QuestionnaireNext(props: QuestionnaireNextProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Submits the form. Shown only on the last item. */
+export declare function QuestionnaireSubmit(props: QuestionnaireSubmitProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;