@fairfox/polly 0.25.1 → 0.26.1

package/dist/src/polly-ui/Badge.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Badge — small inline status chip.
+ *
+ * Renders as a passive <span> with tinted background and on-tint text
+ * from the `--polly-status-*` token family. The default variant uses
+ * surface-sunken + muted text for a neutral pill. Consumers style
+ * placement via className; the primitive owns size, shape, and colour.
+ */
+import type { ComponentChildren, JSX } from "preact";
+export type BadgeVariant = "default" | "info" | "success" | "warning" | "danger";
+export type BadgeProps = {
+    children: ComponentChildren;
+    variant?: BadgeVariant;
+    className?: string;
+    id?: string;
+};
+export declare function Badge(props: BadgeProps): JSX.Element;

package/dist/src/polly-ui/Button.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Button — interactive control with tier, semantic colour, and size.
+ *
+ * Renders as a <button> by default; switches to an <a> when given an
+ * `href`. Tier sets visual importance (primary/secondary/tertiary),
+ * color overlays semantic meaning (info/success/warning/danger),
+ * size picks the padding + font scale (small/normal/large). Icon +
+ * label are arranged with a nested inline <Layout>.
+ *
+ * Action wiring is declared via data-* attributes consumed by the
+ * global event delegator in @fairfox/polly/actions — Button does not
+ * accept an onClick prop.
+ */
+import type { ComponentChildren, JSX, VNode } from "preact";
+export type ButtonTier = "primary" | "secondary" | "tertiary";
+export type ButtonColor = "default" | "info" | "success" | "warning" | "danger";
+export type ButtonSize = "small" | "normal" | "large";
+type BaseButtonProps = {
+    id?: string;
+    tier?: ButtonTier;
+    color?: ButtonColor;
+    size?: ButtonSize;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    circle?: boolean;
+    className?: string;
+    title?: string;
+    icon?: VNode;
+    label: ComponentChildren;
+    "data-action"?: string;
+    "aria-label"?: string;
+};
+type ButtonAsButton = BaseButtonProps & {
+    href?: never;
+    target?: never;
+    rel?: never;
+    type?: "button" | "submit" | "reset";
+};
+type ButtonAsLink = BaseButtonProps & {
+    href: string;
+    target?: string;
+    rel?: string;
+    type?: never;
+};
+export type ButtonProps = ButtonAsButton | ButtonAsLink;
+export declare function Button(props: ButtonProps): JSX.Element;
+export {};

package/dist/src/polly-ui/Checkbox.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Checkbox — native checkbox wrapped in a label.
+ *
+ * Pass a plain boolean for controlled use (caller listens elsewhere),
+ * or a Signal<boolean> to have the primitive bind its own change
+ * listener and mutate the signal directly. The label wraps the input
+ * so clicks anywhere in the target area toggle it.
+ */
+import type { Signal } from "@preact/signals";
+import type { JSX } from "preact";
+export type CheckboxProps = {
+    checked?: boolean | Signal<boolean>;
+    defaultChecked?: boolean;
+    name?: string;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+    id?: string;
+};
+export declare function Checkbox(props: CheckboxProps): JSX.Element;

package/dist/src/polly-ui/Collapsible.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Collapsible — native <details>/<summary> wrapper.
+ *
+ * Uses the browser's built-in disclosure semantics so keyboard and
+ * screen-reader behaviour come free. A ::before arrow rotates on open.
+ * Colors, spacing, and motion come from tokens; `prefers-reduced-motion`
+ * zeroes the rotation via the motion token.
+ */
+import type { ComponentChildren, JSX } from "preact";
+export type CollapsibleProps = {
+    summary: string;
+    children: ComponentChildren;
+    defaultOpen?: boolean;
+    className?: string;
+    id?: string;
+};
+export declare function Collapsible(props: CollapsibleProps): JSX.Element;

package/dist/src/polly-ui/Dropdown.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Dropdown — trigger button + popover menu using the native Popover API.
+ *
+ * The menu element gets `popover="auto"` and a unique `data-overlay-id`.
+ * `closeTopOverlay()` from @fairfox/polly/actions finds the topmost
+ * `[data-overlay-id]` element and dispatches `overlay:close` — the
+ * Dropdown listens for that event and mirrors it onto the `isOpen`
+ * signal. In single-select mode, clicking the menu closes it; in
+ * multi-select mode, the menu stays open so the consumer can pick
+ * several items.
+ */
+import { type Signal } from "@preact/signals";
+import type { ComponentChildren, JSX } from "preact";
+export type DropdownProps = {
+    isOpen: Signal<boolean>;
+    trigger: ComponentChildren;
+    children: ComponentChildren;
+    align?: "left" | "right";
+    multiSelect?: boolean;
+    className?: string;
+    id?: string;
+};
+export declare function Dropdown(props: DropdownProps): JSX.Element;

package/dist/src/polly-ui/Layout.d.ts

@@ -38,6 +38,8 @@ export type LayoutProps = {
     alignSelf?: string;
     /** Collapse to a single column at ≤640px. */
     stackOnMobile?: boolean;
+    /** Render as display: inline-grid so the Layout flows inline with surrounding text/controls. */
+    inline?: boolean;
     className?: string;
     onClick?: JSX.MouseEventHandler<HTMLElement>;
     onKeyDown?: JSX.KeyboardEventHandler<HTMLElement>;

package/dist/src/polly-ui/Select.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Select — dropdown of options with single- or multi-select semantics.
+ *
+ * Composes Dropdown for the menu and a native checkbox in each option
+ * row for multi-select. The `selected` state is a Signal<Set<T>>;
+ * single-select replaces the set, multi-select toggles membership.
+ * Multi-select mode also shows Select All / Clear action buttons at
+ * the top of the menu.
+ */
+import { type Signal } from "@preact/signals";
+import type { JSX } from "preact";
+export type SelectOption<T = string> = {
+    value: T;
+    label: string;
+};
+export type SelectProps<T = string> = {
+    options: SelectOption<T>[];
+    selected: Signal<Set<T>>;
+    label?: string;
+    placeholder?: string;
+    multiSelect?: boolean;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+};
+export declare function Select<T = string>(props: SelectProps<T>): JSX.Element;

package/dist/src/polly-ui/Skeleton.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Skeleton — shimmering placeholder for loading states.
+ *
+ * Three variants: text (full-width, 1em tall), rect (full-width, 100px
+ * tall), circle (40x40). A CSS gradient animates left-to-right over
+ * 1.5s. `prefers-reduced-motion` zeroes the animation via the token
+ * system. Consumers size via width/height props (px numbers or CSS
+ * strings); default sizing comes from the variant.
+ */
+import type { JSX } from "preact";
+export type SkeletonVariant = "text" | "rect" | "circle";
+export type SkeletonProps = {
+    variant?: SkeletonVariant;
+    width?: string | number;
+    height?: string | number;
+    className?: string;
+};
+export declare function Skeleton(props: SkeletonProps): JSX.Element;

package/dist/src/polly-ui/Tabs.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Tabs — horizontal nav with active-tab accent.
+ *
+ * Each button carries `data-action` (the consumer-provided action name)
+ * and `data-action-id={tab.id}` so the event delegator resolves the
+ * activated tab. The active tab gets `aria-current="page"` and a
+ * bottom-border accent. The nav scrolls horizontally with a hidden
+ * scrollbar for overflow. Internal arrangement uses <Layout>.
+ */
+import type { JSX } from "preact";
+export type Tab = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+export type TabsProps = {
+    tabs: Tab[];
+    activeTab: string;
+    action?: string;
+    className?: string;
+    id?: string;
+    "aria-label"?: string;
+};
+export declare function Tabs(props: TabsProps): JSX.Element;

package/dist/src/polly-ui/Toggle.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Toggle — switch-role checkbox.
+ *
+ * A visually-hidden <input role="switch"> paired with a styled track
+ * and thumb inside a <label>. Passive: the caller drives `checked` and
+ * handles state changes via the action registry (wrap the Toggle in a
+ * <label data-action="..."> or bind a parent form's submit). a11y
+ * attributes come from the native input; the label wraps so clicks
+ * anywhere in the control toggle the input.
+ */
+import type { JSX } from "preact";
+export type ToggleProps = {
+    checked?: boolean;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+    className?: string;
+    id?: string;
+};
+export declare function Toggle(props: ToggleProps): JSX.Element;