@pollinations/ui 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,340 @@
+export { B as Button, a as ButtonProps } from './Button-DMJ2K6Gr.js';
+import * as react from 'react';
+import { FC, ReactNode, ButtonHTMLAttributes, ComponentPropsWithoutRef, PropsWithChildren, CSSProperties } from 'react';
+export { C as Chip } from './Chip-BS8ronOu.js';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Dialog as Dialog$1 } from '@ark-ui/react/dialog';
+import { T as ThemeName } from './theme-DfHMjWB7.js';
+export { t as themeColors, a as themes } from './theme-DfHMjWB7.js';
+export { Field } from '@ark-ui/react/field';
+
+/** Class merge for apps consuming the unprefixed Tailwind bridge in app.css. */
+declare function cn(...inputs: (string | undefined | null | false)[]): string;
+
+type PeriodGranularity = "day" | "week" | "month";
+type PeriodSelection = {
+    granularity: PeriodGranularity;
+    period: string;
+};
+declare function currentPeriod(): PeriodSelection;
+declare function getPeriodBucketKeys(selection: PeriodSelection): string[];
+declare function periodBucketKeyToDate(bucketKey: string, granularity: PeriodGranularity): Date;
+
+/**
+ * Locks page scroll while enabled and restores the original overflow values on
+ * cleanup.
+ */
+declare function useScrollLock(enabled?: boolean): void;
+
+type ChevronIconProps = {
+    /** Rotate 180° when expanded/open. */
+    expanded?: boolean;
+    className?: string;
+};
+/**
+ * Canonical chevron used for collapsibles, dropdown triggers, and select pills
+ * across the app. One icon everywhere.
+ */
+declare const ChevronIcon: FC<ChevronIconProps>;
+
+type CollapsibleProps = {
+    /** Header content (label, hint, etc). */
+    label: ReactNode;
+    expanded: boolean;
+    onToggle: () => void;
+    children: ReactNode;
+    disabled?: boolean;
+    /** Outer wrapper classes — base bg, border, etc. */
+    wrapperClassName?: string;
+    /** Trigger hover classes. Defaults to `polli:hover:bg-theme-bg-active`. */
+    hoverClassName?: string;
+    /** Trigger focus classes. */
+    focusClassName?: string;
+    /** Expanded panel classes. Defaults to a top border separator. */
+    panelClassName?: string;
+    /** Accessible label for the toggle button when label is non-text. */
+    ariaLabel?: string;
+};
+/**
+ * Collapsible row primitive. One chevron, one hover/rounded behaviour for
+ * every collapsible in the UI. Use this for any "click to reveal nested
+ * content" UI — nested settings, grouped controls, optional details.
+ *
+ * For dropdown/popover triggers (date pickers, menus) use a button with
+ * <ChevronIcon /> directly — that's a different interaction.
+ */
+declare const Collapsible: FC<CollapsibleProps>;
+
+type CopyValue = string | (() => string | Promise<string>);
+type CopyButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className" | "onClick" | "type" | "value"> & {
+    value: CopyValue;
+    children: ReactNode | ((copied: boolean) => ReactNode);
+    copiedTimeoutMs?: number;
+    tooltip?: ReactNode;
+    copiedTooltip?: ReactNode;
+    tooltipClassName?: string;
+    className?: string | ((copied: boolean) => string);
+    onCopied?: () => void;
+    onCopyError?: (error: unknown) => void;
+};
+declare function CopyButton({ value, children, copiedTimeoutMs, tooltip, copiedTooltip, tooltipClassName, className, onCopied, onCopyError, ...buttonProps }: CopyButtonProps): react_jsx_runtime.JSX.Element;
+
+declare const sizeClasses: {
+    readonly sm: "polli:max-w-md";
+    readonly md: "polli:max-w-xl";
+    readonly lg: "polli:max-w-2xl";
+};
+type DialogProps = {
+    open: boolean;
+    onOpenChange?: (open: boolean) => void;
+    trigger?: ReactNode;
+    triggerAsChild?: boolean;
+    triggerClassName?: string;
+    title?: ReactNode;
+    titleClassName?: string;
+    ariaLabel?: string;
+    labelledBy?: string;
+    theme?: ThemeName;
+    size?: keyof typeof sizeClasses;
+    showBackdrop?: boolean;
+    backdropClassName?: string;
+    positionerClassName?: string;
+    contentClassName?: string;
+    children: ReactNode;
+};
+declare const Dialog: FC<DialogProps>;
+declare const DialogTitle: react.ForwardRefExoticComponent<Dialog$1.TitleProps & react.RefAttributes<HTMLHeadingElement>>;
+
+type DropdownProps = {
+    theme: ThemeName;
+    /** Trigger element; receives the current open state (e.g. to rotate a chevron). */
+    trigger: (open: boolean) => ReactNode;
+    /** Panel content. As a function, receives `close` to dismiss after a selection. */
+    children: ReactNode | ((close: () => void) => ReactNode);
+    /** Panel placement relative to the trigger. */
+    align?: "start" | "end";
+    /** Controlled open state. Omit to let the Dropdown manage its own. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Replaces the default themed surface (e.g. a differently-coloured menu). */
+    panelClassName?: string;
+    /** Appended after the surface (widths, padding, max-height…). */
+    className?: string;
+};
+declare const Dropdown: FC<DropdownProps>;
+
+type ExternalLinkButtonProps = {
+    theme: ThemeName;
+    href: string;
+    size?: "small" | "medium" | "large";
+    className?: string;
+    children: ReactNode;
+};
+declare const ExternalLinkButton: FC<ExternalLinkButtonProps>;
+
+/** IconButton only supports `danger` (delete icons). */
+type IconButtonIntent = "danger";
+type IconButtonProps = {
+    intent?: IconButtonIntent;
+    title?: string;
+    onClick: () => void;
+    children: ReactNode;
+    className?: string;
+};
+declare const IconButton: FC<IconButtonProps>;
+
+type InfoTipProps = {
+    text?: ReactNode;
+    content?: ReactNode;
+    label?: string;
+};
+/**
+ * Small "i" badge that opens a tooltip on hover, click, or focus.
+ *
+ * Both the badge and the popup follow the page theme: badge reads
+ * `bg-theme-bg-active`; popup uses the universal recipe via `<Tooltip>`
+ * (`bg-theme-bg-pale` + `border-theme-border` + `text-theme-text-strong`,
+ * viewport-clamped). Cursor on the badge is `cursor-help`.
+ */
+declare const InfoTip: FC<InfoTipProps>;
+
+type InputProps = React.ComponentPropsWithoutRef<"input"> & {
+    error?: boolean;
+    hideNumberSteppers?: boolean;
+};
+declare const Input: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    error?: boolean;
+    hideNumberSteppers?: boolean;
+} & react.RefAttributes<HTMLInputElement>>;
+
+/** Icons inherit color via currentColor and size via className or SVG props. */
+type IconProps = ComponentPropsWithoutRef<"svg">;
+
+declare function AppIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function BeakerIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function BookIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function CheckIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function ClipboardIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function ClockIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function DiscordIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function DownloadIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function ExternalLinkIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function GenApiIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function GitHubIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function ImageIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function LockIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function MailIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function McpIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function MenuIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function TerminalIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function TokensIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function TrendUpIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function WalletIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+declare function XIcon(props: IconProps): react_jsx_runtime.JSX.Element;
+
+type MultiSelectOption = {
+    value: string;
+    label: string;
+};
+type MultiSelectProps = {
+    options: MultiSelectOption[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    placeholder: string;
+    disabled?: boolean;
+    disabledText?: string;
+    align?: "start" | "end";
+    label?: string;
+    theme: ThemeName;
+};
+declare const MultiSelect: FC<MultiSelectProps>;
+
+type PeriodPickerProps = {
+    value: PeriodSelection;
+    onChange: (value: PeriodSelection) => void;
+    theme: ThemeName;
+    minDate?: Date;
+    maxDate?: Date;
+};
+declare const PeriodPicker: FC<PeriodPickerProps>;
+
+type ScrollAxis = "y" | "x" | "both";
+type ScrollAreaOwnProps = {
+    /** Override the ambient cascade theme for this scroller's thumb. */
+    theme?: ThemeName;
+    /** Scroll direction. Default `y`. */
+    axis?: ScrollAxis;
+    /** Idle time before the thumb fades out, in ms. Default `2000`. */
+    hideDelayMs?: number;
+    className?: string;
+};
+type ScrollAreaProps = PropsWithChildren<ScrollAreaOwnProps & Omit<ComponentPropsWithoutRef<"div">, keyof ScrollAreaOwnProps>>;
+/**
+ * Themed auto-hide scroll container. Thumb color follows the nearest
+ * `[data-theme="..."]` ancestor; pass `theme` to override locally.
+ */
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaOwnProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ScrollAreaOwnProps> & {
+    children?: react.ReactNode | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
+type SectionProps = {
+    title: string;
+    theme: ThemeName;
+    id?: string;
+    framed?: boolean;
+    action?: ReactNode;
+    actionClassName?: string;
+    children: ReactNode;
+    className?: string;
+};
+declare const Section: FC<SectionProps>;
+
+type SliderProps = Omit<React.ComponentPropsWithoutRef<"input">, "type"> & {
+    /** Fill percentage from 0-100. Falls back to value/min/max when omitted. */
+    progress?: number;
+};
+declare const Slider: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "type"> & {
+    /** Fill percentage from 0-100. Falls back to value/min/max when omitted. */
+    progress?: number;
+} & react.RefAttributes<HTMLInputElement>>;
+
+type StatCardProps = {
+    label: ReactNode;
+    value: ReactNode;
+    detail?: ReactNode;
+    theme?: ThemeName;
+    className?: string;
+    labelClassName?: string;
+    valueClassName?: string;
+    detailClassName?: string;
+};
+declare const StatCard: FC<StatCardProps>;
+
+type SurfaceVariant = "panel" | "card" | "card-themed";
+type SurfaceOwnProps = {
+    /** Override the cascade theme for this surface's subtree. */
+    theme?: ThemeName;
+    /**
+     * Visual role.
+     * - `panel` — outer container: bordered, semi-transparent theme bg
+     * - `card` — borderless white inner (default)
+     * - `card-themed` — borderless theme-tinted inner (deeper than panel)
+     */
+    variant?: SurfaceVariant;
+    className?: string;
+};
+type SurfaceProps = PropsWithChildren<SurfaceOwnProps & Omit<ComponentPropsWithoutRef<"div">, keyof SurfaceOwnProps | "color">>;
+declare const Surface: FC<SurfaceProps>;
+
+type SwitchStatus = "off" | "on" | "invalid";
+type SwitchProps = {
+    checked: boolean;
+    onChange: (next: boolean) => void;
+    /** Visual status. Drives track colour only. Defaults to `checked ? "on" : "off"`. */
+    status?: SwitchStatus;
+    /** Accessible label (aria-label). Not rendered visibly. */
+    ariaLabel?: string;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * Binary toggle primitive. Universal palette — does NOT follow the page
+ * theme. Three states: off (white), on (soft green), invalid (soft red,
+ * for "enabled but needs attention").
+ *
+ * `checked` drives thumb position; `status` drives track colour. So
+ * `checked={true} status="invalid"` renders thumb-right with a red track.
+ */
+declare const Switch: FC<SwitchProps>;
+
+type TabButtonProps = {
+    active: boolean;
+    onClick: () => void;
+    children: ReactNode;
+    /** Optional cascade override; defaults to inherited [data-theme]. */
+    theme?: ThemeName;
+    size?: "medium" | "small";
+    ariaLabel?: string;
+    disabled?: boolean;
+    className?: string;
+};
+declare const TabButton: FC<TabButtonProps>;
+
+type TooltipProps = {
+    children: ReactNode;
+    content: ReactNode;
+    ariaLabel?: string;
+    className?: string;
+    onClick?: () => void;
+    style?: CSSProperties;
+    triggerAs?: "button" | "span";
+    /**
+     * When true, the inner cursor wrapper uses display:contents so the
+     * trigger's flex/grid layout applies directly to the caller's children
+     * without an inline wrapper in the way.
+     */
+    displayContents?: boolean;
+};
+declare const Tooltip: FC<TooltipProps>;
+
+export { AppIcon, BeakerIcon, BookIcon, CheckIcon, ChevronIcon, ClipboardIcon, ClockIcon, Collapsible, type CollapsibleProps, CopyButton, type CopyButtonProps, Dialog, type DialogProps, DialogTitle, DiscordIcon, DownloadIcon, Dropdown, type DropdownProps, ExternalLinkButton, type ExternalLinkButtonProps, ExternalLinkIcon, GenApiIcon, GitHubIcon, IconButton, type IconProps, ImageIcon, InfoTip, Input, type InputProps, LockIcon, MailIcon, McpIcon, MenuIcon, MultiSelect, type MultiSelectProps, type PeriodGranularity, PeriodPicker, type PeriodPickerProps, type PeriodSelection, ScrollArea, type ScrollAreaProps, Section, type SectionProps, Slider, type SliderProps, StatCard, type StatCardProps, Surface, Switch, type SwitchProps, type SwitchStatus, TabButton, type TabButtonProps, TerminalIcon, ThemeName, TokensIcon, Tooltip, TrendUpIcon, WalletIcon, XIcon, cn, currentPeriod, getPeriodBucketKeys, periodBucketKeyToDate, useScrollLock };