@ahrowe/ui 0.35.0 → 0.36.0

package/dist/cjs-types/common/slider/slider.types.d.ts

@@ -0,0 +1,68 @@
+import { CSSProperties, ReactNode } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export interface SliderMark {
+    /** Position of the mark, in the same units as `value`. */
+    value: number;
+    /** Optional label rendered under the mark. */
+    label?: ReactNode;
+}
+export type SliderSlots = 'root' | 'track' | 'range' | 'thumb' | 'mark' | 'markLabel' | 'value';
+interface SliderBaseProps extends Omit<HtmlProps, 'onChange' | 'defaultValue'> {
+    /** Minimum value (default `0`). */
+    min?: number;
+    /** Maximum value (default `100`). */
+    max?: number;
+    /** Step increment; values snap to it (default `1`). */
+    step?: number;
+    /** Disable interaction. */
+    disabled?: boolean;
+    /** Tick marks along the track, optionally labelled. */
+    marks?: SliderMark[];
+    /** Show the current value in a bubble above the thumb. */
+    showValue?: boolean;
+    /** Format the value shown in the bubble and announced to assistive tech. */
+    formatValue?: (value: number) => ReactNode;
+    /** Thumb diameter, any CSS length. Sets `--slider-thumb-size`, which defaults to `1.125em` of `--default-font-size`, 18px at a 16px base. */
+    size?: string;
+    /** Tab index of the thumb (default `0`). */
+    tabIndex?: number;
+    /** Accessible label for the slider. In range mode it names the group. */
+    'aria-label'?: string;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<SliderSlots>;
+    styles?: SlotStyles<SliderSlots>;
+}
+export interface SingleSliderProps extends SliderBaseProps {
+    range?: false;
+    /** Controlled value. Omit for uncontrolled. */
+    value?: number;
+    /** Initial value when uncontrolled (default `min`). */
+    defaultValue?: number;
+    /** Fires on every value change (drag, keyboard, click). */
+    onChange?: (value: number) => void;
+    /** Fires once when the value is committed: pointer release or a keyboard step. */
+    onChangeEnd?: (value: number) => void;
+}
+export interface RangeSliderProps extends SliderBaseProps {
+    /** Render two thumbs and work in `[from, to]` pairs. */
+    range: true;
+    /** Controlled pair. Omit for uncontrolled. */
+    value?: [number, number];
+    /** Initial pair when uncontrolled (default `[min, max]`). */
+    defaultValue?: [number, number];
+    /** Fires on every change, always with both ends in order. */
+    onChange?: (value: [number, number]) => void;
+    /** Fires once when a thumb is released or stepped with the keyboard. */
+    onChangeEnd?: (value: [number, number]) => void;
+    /** Smallest gap the two thumbs may be pushed to (default `0`). */
+    minRange?: number;
+    /** Accessible label for each thumb, in order. Falls back to `'From'` and `'To'`. */
+    thumbLabels?: [string, string];
+}
+/**
+ * Discriminated on `range` rather than widening `value`, so an existing
+ * `onChange={(v: number) => …}` keeps compiling.
+ */
+export type SliderProps = SingleSliderProps | RangeSliderProps;
+export {};

package/dist/cjs-types/common/splitButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './splitButton.js';
+export * from './splitButton.types.js';

package/dist/cjs-types/common/splitButton/splitButton.d.ts

@@ -0,0 +1,3 @@
+import { SplitButtonProps } from './splitButton.types.js';
+declare function SplitButton(props: SplitButtonProps): import("react").JSX.Element;
+export default SplitButton;

package/dist/cjs-types/common/splitButton/splitButton.types.d.ts

@@ -0,0 +1,35 @@
+import { PopoverAlign } from '../popover/popover.types.js';
+import { CSSProperties, ReactNode } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { ButtonStyleType, ButtonSize } from '../button/button.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export interface SplitButtonAction {
+    id: string;
+    label: ReactNode;
+    onClick: () => void;
+    disabled?: boolean;
+    icon?: IconContent;
+}
+export type SplitButtonSlots = 'root' | 'primaryButton' | 'triggerButton' | 'menu' | 'menuItem';
+/** Text SplitButton renders of its own, for translating it. */
+export interface SplitButtonLabels {
+    /** The button opening the menu, read out by screen readers. */
+    moreActions?: string;
+}
+export interface SplitButtonProps extends HtmlProps {
+    children?: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => Promise<void> | void;
+    actions: SplitButtonAction[];
+    styleType?: ButtonStyleType;
+    size?: ButtonSize;
+    disabled?: boolean;
+    isLoading?: boolean;
+    /** Alignment of the actions menu relative to the trigger button (default `PopoverAlign.End`) */
+    align?: PopoverAlign;
+    className?: string;
+    style?: CSSProperties;
+    classNames?: SlotClassNames<SplitButtonSlots>;
+    styles?: SlotStyles<SplitButtonSlots>;
+    /** Overrides the text SplitButton renders of its own. Merged per key. */
+    labels?: SplitButtonLabels;
+}

package/dist/cjs-types/common/stepper/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './stepper.js';
+export * from './stepper.types.js';

package/dist/cjs-types/common/stepper/stepper.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { StepperProps } from './stepper.types.js';
+export default function Stepper({ steps, currentStep, alignment, onStepClicked, nonLinear, hideLabels, styleType, collapse, labelPlacement, className, style, classNames, styles: slotStyles, ...rest }: StepperProps): React.JSX.Element;

package/dist/cjs-types/common/stepper/stepper.types.d.ts

@@ -0,0 +1,77 @@
+import { default as React } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+/** Layout direction of the stepper. */
+export declare enum StepperAlignment {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+/** Visual preset for the step markers and connectors. */
+export declare enum StepperStyleType {
+    /** Numbered markers, filled solid on completion (the default look). */
+    Default = "default",
+    /** Numbered markers that stay ringed when completed (a coloured check, no solid fill). */
+    Outlined = "outlined",
+    /** Minimal dots without numbers, for a compact onboarding or carousel style. */
+    Dots = "dots"
+}
+/**
+ * Which step bodies (`step.content`) are expanded. Only affects vertical
+ * steppers with per-step `content`; ignored otherwise.
+ */
+export declare enum StepperCollapse {
+    /** Every step body stays expanded. */
+    None = "none",
+    /** Only the current step's body is expanded (classic vertical wizard). */
+    ActiveOnly = "activeOnly",
+    /** Completed (past) step bodies collapse; current and upcoming stay expanded. */
+    Completed = "completed"
+}
+/**
+ * Where the label block sits relative to the marker. Horizontal steppers use
+ * `Top`/`Bottom`; vertical steppers use `Left`/`Right`. An out-of-orientation
+ * value falls back to that orientation's default.
+ */
+export declare enum StepperLabelPlacement {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+export type StepperSlots = 'root' | 'entry' | 'entryNumber' | 'entryLabel' | 'connector' | 'description' | 'content' | 'optional' | 'icon';
+export interface StepperStep {
+    /** Primary label for the step. */
+    label: React.ReactNode;
+    /** Secondary line shown under the label. */
+    description?: React.ReactNode;
+    /** Collapsible body content, rendered under the label (vertical only). */
+    content?: React.ReactNode;
+    /** Icon shown in the marker instead of the step number — a FontAwesome icon or any node. */
+    icon?: IconContent;
+    /** Marks the step as errored, recolouring the marker with `--stepper-error-color`. */
+    error?: boolean;
+    /** `true` renders an "Optional" hint; a node renders custom hint text. */
+    optional?: boolean | React.ReactNode;
+    /** Disables this step: never clickable, dimmed. */
+    disabled?: boolean;
+}
+export interface StepperProps extends HtmlProps {
+    steps?: StepperStep[];
+    currentStep?: number;
+    alignment?: StepperAlignment | 'horizontal' | 'vertical';
+    onStepClicked?: ((index: number) => void) | null;
+    /** Allow clicking any step, not just completed ones. */
+    nonLinear?: boolean;
+    /** Hide the label text (and description) beneath each step entry. */
+    hideLabels?: boolean;
+    /** Visual preset for markers and connectors (default `Default`). */
+    styleType?: StepperStyleType;
+    /** Which step bodies are expanded. Vertical `content` only (default `None`). */
+    collapse?: StepperCollapse;
+    /** Label position relative to the marker (default: horizontal `Bottom`, vertical `Right`). */
+    labelPlacement?: StepperLabelPlacement;
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: SlotClassNames<StepperSlots>;
+    styles?: SlotStyles<StepperSlots>;
+}

package/dist/cjs-types/common/sticky/index.d.ts

@@ -0,0 +1 @@
+export { default } from './sticky.js';

package/dist/cjs-types/common/sticky/sticky.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { StickyProps } from './sticky.types.js';
+export default function Sticky({ children, offsetTop, offsetElement, stickToScrollParent, zIndex, disabled, onStuckChange, className, style, classNames, styles: slotStyles, ...rest }: StickyProps): React.JSX.Element;

package/dist/cjs-types/common/sticky/sticky.types.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type StickySlots = 'root' | 'placeholder' | 'content';
+export interface StickyProps extends HtmlProps {
+    children?: React.ReactNode;
+    /** Distance (px) from the top of the viewport the content sticks to. Default 0. Ignored if `offsetElement` is set. */
+    offsetTop?: number;
+    /** Element (e.g. a pinned header) to stick below instead of a fixed `offsetTop` — its live height is used as the offset. */
+    offsetElement?: React.RefObject<HTMLElement | null>;
+    /** Stick to the top of the nearest scrollable ancestor instead of the browser viewport. Falls back to the viewport if no scrollable ancestor is found. */
+    stickToScrollParent?: boolean;
+    /** z-index applied to the content while stuck. Default 20. */
+    zIndex?: number;
+    /** Disable sticking entirely — content stays in normal flow. */
+    disabled?: boolean;
+    /** Fired whenever the stuck state flips. */
+    onStuckChange?: (isStuck: boolean) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: SlotClassNames<StickySlots>;
+    styles?: SlotStyles<StickySlots>;
+}

package/dist/cjs-types/common/sticky/stickyStack.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Coordinates every mounted `Sticky` so ones that overlap horizontally stack
+ * underneath each other (in DOM order) instead of pinning to the same spot.
+ * Non-overlapping ones (e.g. side-by-side halves under a full-width one) land
+ * at the same top instead of being pushed down by each other.
+ */
+export interface StickyStackMetrics {
+    /** Current (unstuck-flow) top of the root element, from getBoundingClientRect. */
+    top: number;
+    left: number;
+    width: number;
+    contentHeight: number;
+    /** The element this entry sticks relative to (its scroll parent), or null for the viewport.
+     *  Stacking only considers overlap between entries sharing the same container — two Stickies
+     *  in unrelated scroll panels should never push each other down just because they happen to
+     *  share horizontal DOM coordinates. */
+    container: HTMLElement | null;
+}
+export interface StickyStackEntry {
+    node: HTMLElement;
+    offsetTop: number;
+    disabled: boolean;
+    getMetrics: () => StickyStackMetrics | null;
+}
+export interface StickyStackResult {
+    isStuck: boolean;
+    /** Effective `top` to pin at while stuck — offsetTop plus the height of any stuck, overlapping entries above it. */
+    top: number;
+}
+type ResultListener = (result: StickyStackResult) => void;
+declare class StickyStack {
+    private entries;
+    private listeners;
+    private results;
+    private rafId;
+    private listenerCount;
+    schedule: () => void;
+    register(entry: StickyStackEntry, onChange: ResultListener): symbol;
+    updateEntry(id: symbol, patch: Partial<Pick<StickyStackEntry, 'offsetTop' | 'disabled'>>): void;
+    unregister(id: symbol): void;
+    recompute: () => void;
+    private startListening;
+    private stopListening;
+}
+export declare const stickyStack: StickyStack;
+export {};

package/dist/cjs-types/common/switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './switch.js';
+export * from './switch.types.js';

package/dist/cjs-types/common/switch/switch.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { SwitchProps } from './switch.types.js';
+declare function Switch(props: SwitchProps): ReactElement;
+export default Switch;

package/dist/cjs-types/common/switch/switch.types.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties, ReactNode, Ref } from 'react';
+import { FormValidator } from '../../services/formValidation/index.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type SwitchSlots = 'track' | 'thumb' | 'label';
+export interface SwitchProps extends Omit<HtmlProps, 'onToggle'> {
+    label?: string;
+    selected?: boolean;
+    onToggle?: (isToggled: boolean, event?: React.MouseEvent | React.KeyboardEvent) => void;
+    /** Applied to the root wrapper element */
+    className?: string;
+    style?: CSSProperties;
+    disabled?: boolean;
+    title?: string;
+    tabIndex?: number;
+    formValidator?: FormValidator | null;
+    children?: ReactNode;
+    /** Ref to the root element. */
+    ref?: Ref<HTMLDivElement>;
+    classNames?: SlotClassNames<SwitchSlots>;
+    styles?: SlotStyles<SwitchSlots>;
+}

package/dist/cjs-types/common/tabHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './tabHeader.js';
+export * from './tabHeader.types.js';

package/dist/cjs-types/common/tabHeader/tabHeader.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { TabHeaderProps } from './tabHeader.types.js';
+declare function TabHeader({ tabs, currentTab, onChange, className, style, classNames, styles: slotStyles, ...rest }: TabHeaderProps): React.JSX.Element;
+export default TabHeader;

package/dist/cjs-types/common/tabHeader/tabHeader.types.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { IconContent } from '../types/icon.types.js';
+import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
+export type TabHeaderSlots = 'root' | 'tab' | 'icon' | 'labels' | 'title' | 'subtitle';
+export interface TabHeaderTab {
+    id: string;
+    icon: IconContent;
+    title?: string;
+    subtitle?: string;
+    disabled?: boolean;
+}
+export interface TabHeaderProps extends Omit<HtmlProps, 'onChange'> {
+    tabs: TabHeaderTab[];
+    currentTab: string;
+    onChange: (id: string) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    classNames?: SlotClassNames<TabHeaderSlots>;
+    styles?: SlotStyles<TabHeaderSlots>;
+}

package/dist/cjs-types/common/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './textarea.js';
+export * from './textarea.types.js';

package/dist/cjs-types/common/textarea/textarea.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { TextareaProps } from './textarea.types.js';
+export default function Textarea(props: TextareaProps): React.JSX.Element;

package/dist/cjs-types/common/textarea/textarea.types.d.ts

@@ -0,0 +1,2 @@
+import { InputProps } from '../input/input.types.js';
+export type TextareaProps = Omit<InputProps, 'multiline' | 'type' | 'min' | 'max'>;

package/dist/cjs-types/common/themeProvider/defaultTheme.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from './theme.types.js';
+/**
+ * Built-in default theme used by ThemeProvider when no `themes` prop is
+ * supplied. Provides a complete set of CSS variables so the component
+ * library renders correctly out of the box.
+ */
+export declare const defaultTheme: Theme;

package/dist/cjs-types/common/themeProvider/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './themeProvider.js';
+export { defaultTheme } from './defaultTheme.js';
+export { lightTheme } from './lightTheme.js';
+export type { Theme, ThemeVariables } from './theme.types.js';

package/dist/cjs-types/common/themeProvider/lightTheme.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from './theme.types.js';
+/**
+ * The light sibling of {@link defaultTheme}, which is dark. Same brand, inverted surfaces:
+ * it declares only what has to flip, and inherits the rest through `baseThemeId`, so a change
+ * to the palette or the type scale reaches both themes at once.
+ *
+ * ```tsx
+ * <ThemeProvider themes={[defaultTheme, lightTheme]} activeThemeId='light'>
+ * ```
+ *
+ * `--primary-color` is deliberately untouched: it is the brand, and it reads on both.
+ */
+export declare const lightTheme: Theme;