@k2b/ui 0.1.0-rc.0 → 0.1.1

package/dist/types/inputs/TagsInput.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from "solid-js";
+import type { ValueFieldProps } from "./field-contract";
+export type TagsInputProps = ValueFieldProps<string[]> & {
+    placeholder?: string;
+    icon?: string;
+    activeIcon?: string;
+    maxTags?: number;
+    name?: string;
+};
+export declare function TagsInput(props: TagsInputProps): JSX.Element;
+export default TagsInput;

package/dist/types/inputs/TemplateEditor.d.ts

@@ -0,0 +1,28 @@
+import { type JSX } from "solid-js";
+import { type PanesLayout } from "../layout/panes-layout";
+import { type AutocompleteEditorProps } from "./AutocompleteEditor";
+export type TemplateVariableKind = "string" | "email" | "url" | "number" | "boolean" | "array" | "object";
+export type TemplateVariable = {
+    name: string;
+    kind?: TemplateVariableKind;
+    description?: string;
+};
+export type TemplateEditorProps = Omit<AutocompleteEditorProps, "completions" | "highlight"> & {
+    variables: readonly TemplateVariable[];
+};
+export type TemplatePreviewProps = {
+    html: string;
+    title?: string;
+    class?: string;
+};
+export type TemplateSampleDataProps = {
+    variables: readonly TemplateVariable[];
+    values: Readonly<Record<string, string>>;
+    onValueChange: (name: string, value: string) => void;
+    class?: string;
+};
+export type TemplateEditorLayout = PanesLayout;
+export declare const createTemplateEditorPanesLayout: () => TemplateEditorLayout;
+export declare function TemplateEditor(props: TemplateEditorProps): JSX.Element;
+export declare function TemplatePreview(props: TemplatePreviewProps): JSX.Element;
+export declare function TemplateSampleData(props: TemplateSampleDataProps): JSX.Element;

package/dist/types/inputs/TextInput.d.ts

@@ -0,0 +1,26 @@
+import { type JSX } from "solid-js";
+import type { Completion } from "./completion";
+import type { ValueFieldProps } from "./field-contract";
+export type TextInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onInput" | "prefix" | "suffix" | "type" | "value" | keyof ValueFieldProps<string>> & ValueFieldProps<string> & {
+    minLength?: number;
+    maxLength?: number;
+    type?: "text" | "search" | "email" | "url" | "tel";
+    variant?: "default" | "ai";
+    icon?: string;
+    activeIcon?: string;
+    prefix?: JSX.Element;
+    suffix?: JSX.Element;
+    clearable?: boolean;
+    onClear?: () => void;
+    clearLabel?: string;
+    multiline?: boolean;
+    monospace?: boolean;
+    password?: boolean;
+    markdown?: boolean;
+    onSubmit?: () => void;
+    lines?: number;
+    abbreviations?: Record<string, string>;
+    completions?: readonly Completion[];
+};
+export declare function TextInput(props: TextInputProps): JSX.Element;
+export default TextInput;

package/dist/types/inputs/choice.d.ts

@@ -0,0 +1,32 @@
+import { type Setter } from "solid-js";
+export type ChoiceOption<T extends string = string> = {
+    value: T;
+    label: string;
+    description?: string;
+    icon?: string;
+    color?: string;
+    disabled?: boolean;
+    /** Optional overlapping groups used by choice controls that expose group filtering. */
+    groups?: readonly string[];
+};
+export type ChoiceOptionsLoader<T extends string = string> = (query: string, signal: AbortSignal) => Promise<readonly ChoiceOption<T>[]>;
+export declare const filterChoiceOptions: <T extends string>(options: readonly ChoiceOption<T>[], query: string) => readonly ChoiceOption<T>[];
+export declare const nextEnabledChoiceIndex: <T extends string>(options: readonly ChoiceOption<T>[], current: number, direction: 1 | -1) => number;
+export declare function createChoiceLoader<T extends string>(loader: () => ChoiceOptionsLoader<T> | undefined, debounceMs: () => number): {
+    options: () => readonly ChoiceOption<T>[];
+    loading: () => boolean;
+    error: () => string | undefined;
+    load: (query: string, immediate?: boolean) => void;
+    retry: () => void;
+    cancel: () => void;
+};
+export declare const placeChoicePopover: (trigger: HTMLElement, popover: HTMLElement) => void;
+export declare function createChoicePopover(disabled: () => boolean): {
+    open: () => boolean;
+    setTrigger: Setter<HTMLElement | undefined>;
+    setPopover: Setter<HTMLElement | undefined>;
+    show: () => void;
+    hide: (restoreFocus?: boolean) => void;
+    toggle: () => void;
+    trigger: () => HTMLElement | undefined;
+};

package/dist/types/inputs/completion/behaviors.d.ts

@@ -0,0 +1,13 @@
+import { type Completion, type QueryContext, type Suggestion } from "./engine";
+export type TryExpandOptions = {
+    isExcluded?: (text: string, position: number) => boolean;
+};
+/** Keeps abbreviation restoration isolated to one editor instance. */
+export declare const createCompletionBehaviorState: () => {
+    applySuggestion: (textarea: HTMLTextAreaElement, context: QueryContext, suggestion: Suggestion, options?: {
+        trackExpansion?: boolean;
+    }) => boolean;
+    reset: () => void;
+    tryExpand: (textarea: HTMLTextAreaElement, completions: readonly Completion[] | undefined, options?: TryExpandOptions) => boolean;
+    tryRestore: (textarea: HTMLTextAreaElement) => boolean;
+};

package/dist/types/inputs/completion/engine.d.ts

@@ -0,0 +1,54 @@
+export type Suggestion = {
+    text: string;
+    label?: string;
+    expansion?: string;
+    appendSpace?: boolean;
+    hint?: string;
+    textEdit?: {
+        start: number;
+        end: number;
+        text: string;
+    };
+};
+export type SuggestContext = {
+    fullText: string;
+    caret: number;
+    tokenStart: number;
+};
+export type Completion = {
+    trigger?: string;
+    suggest: (query: string, context: SuggestContext, signal: AbortSignal) => readonly Suggestion[] | Promise<readonly Suggestion[]>;
+    /** Static labels used by editor highlighting. Providers are never invoked to derive metadata. */
+    knownLabels?: readonly string[];
+    debounceMs?: number;
+    dropdown?: boolean;
+    allowAfterWord?: boolean;
+};
+export type QueryContext = {
+    start: number;
+    end: number;
+    text: string;
+    query: string;
+    completion: Completion;
+};
+export type DetectOptions = {
+    isExcluded?: (text: string, position: number) => boolean;
+};
+export type ResolveResult = {
+    kind: "sync";
+    data: readonly Suggestion[];
+} | {
+    kind: "async";
+    promise: Promise<readonly Suggestion[]>;
+};
+export declare const TRIGGER_CHARS: Set<string>;
+export declare const WORD_CHAR: RegExp;
+export declare const GHOST_SENTINEL: string;
+export declare const abbreviations: (dictionary: Record<string, string>) => Completion;
+export declare const detectQuery: (textarea: HTMLTextAreaElement, completions: readonly Completion[] | undefined, options?: DetectOptions) => QueryContext | null;
+export declare const resolveSuggestions: (completion: Completion, query: string, context: SuggestContext, signal: AbortSignal) => ResolveResult;
+export declare const suggestSync: (completion: Completion, query: string, context: SuggestContext) => readonly Suggestion[] | null;
+export declare const pickGhost: (suggestions: readonly Suggestion[], typed: string) => Suggestion | null;
+export declare const collectKnownLabels: (completions: readonly Completion[] | undefined) => Set<string>;
+export declare const displayLabel: (suggestion: Suggestion, completion: Completion) => string;
+export declare const buildSuggestContext: (textarea: HTMLTextAreaElement, context: QueryContext) => SuggestContext;

package/dist/types/inputs/completion/index.d.ts

@@ -0,0 +1,3 @@
+export { createCompletionBehaviorState, type TryExpandOptions, } from "./behaviors";
+export { abbreviations, buildSuggestContext, type Completion, collectKnownLabels, type DetectOptions, detectQuery, displayLabel, GHOST_SENTINEL, pickGhost, type QueryContext, type ResolveResult, resolveSuggestions, type SuggestContext, type Suggestion, suggestSync, TRIGGER_CHARS, WORD_CHAR, } from "./engine";
+export { plainTextHighlight, type RenderOptions, renderWithOverlay, } from "./overlay";

package/dist/types/inputs/completion/overlay.d.ts

@@ -0,0 +1,11 @@
+export declare const plainTextHighlight: (value: string) => string;
+export type RenderOptions = {
+    ghost?: {
+        at: number;
+        text: string;
+    };
+    anchor?: {
+        at: number;
+    };
+};
+export declare const renderWithOverlay: (text: string, highlighter: (text: string) => string, options?: RenderOptions) => string;

package/dist/types/inputs/date-picker.d.ts

@@ -0,0 +1,42 @@
+import { type DateContext } from "@k2b/stdlib";
+export type DateRangeValue = {
+    start: string | null;
+    end: string | null;
+};
+export declare const pickerContext: (context?: DateContext) => DateContext;
+export declare const hasInstantOffset: (value: string) => boolean;
+export declare const dateKey: (date: Date | string, context?: DateContext) => string;
+/**
+ * Short month names for the month panel. `dates.months()` only returns the long
+ * form ("September"), which overflows the three-column month grid, so the short
+ * form is derived here while staying locale aware.
+ */
+export declare const monthNames: (context?: DateContext) => string[];
+/**
+ * Picks the roving-tabindex day for a rendered month grid. The preferred day is
+ * used when the grid actually contains it, otherwise the first day of the
+ * visible month keeps exactly one cell reachable by Tab.
+ */
+export declare const resolveFocusDay: (monthDayKeys: readonly string[], preferred: string | null | undefined) => string | undefined;
+export declare const yearMonth: (date: Date, context?: DateContext) => {
+    year: number;
+    month: number;
+};
+export declare const monthDate: (year: number, month: number, context?: DateContext) => Date;
+export declare const parseDateValue: (value: string | null | undefined, context?: DateContext) => Date;
+export declare const displayDate: (value: string | null | undefined, context?: DateContext) => string;
+export declare const dateTimeInput: (value: string | null | undefined, context?: DateContext) => string;
+export declare const splitDateTime: (value: string | null | undefined, context?: DateContext) => {
+    date: string;
+    time: string;
+};
+export declare const isCompleteTime: (value: string) => boolean;
+export declare const toDateTimeValue: (date: string, time: string, context?: DateContext) => string | null;
+export declare const formatDateTimeValue: (value: string | null | undefined, context?: DateContext) => string;
+export declare const normalizeTimeInput: (value: string) => string;
+export declare const filterTimeInput: (value: string) => string;
+export declare const orderedRange: (start: string, end: string) => DateRangeValue;
+export declare const previewRange: (range: DateRangeValue, preview: string | null) => DateRangeValue;
+export declare const inRange: (day: string, range: DateRangeValue) => boolean;
+export declare const isRangeEdge: (day: string, range: DateRangeValue) => boolean;
+export declare const formatDateOnlyRangeDuration: (range: DateRangeValue, context?: DateContext) => string;

package/dist/types/inputs/editor-dom.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Replaces one textarea range while preserving the browser's native undo path
+ * where possible. The fallback emits the input event that the editing command
+ * would have emitted, so callers never need a second dispatch.
+ */
+export declare const replaceTextareaRange: (textarea: HTMLTextAreaElement, start: number, end: number, replacement: string) => boolean;

package/dist/types/inputs/field-contract.d.ts

@@ -0,0 +1,24 @@
+import type { DateContext as StdlibDateContext } from "@k2b/stdlib";
+import type { JSX } from "solid-js";
+export type DateContext = StdlibDateContext;
+export type MaybeAccessor<T> = T | (() => T);
+export type FieldProps = {
+    id?: string;
+    class?: string;
+    label?: JSX.Element;
+    description?: JSX.Element;
+    error?: MaybeAccessor<JSX.Element | undefined>;
+    required?: boolean;
+    disabled?: boolean;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+};
+export type ValueFieldProps<T> = FieldProps & {
+    value: MaybeAccessor<T>;
+    onValueChange?: (value: T) => void;
+    onValueCommit?: (value: T) => void;
+};
+/** Reports one atomic edit as both the current and committed field value. */
+export declare const commitFieldValue: <T>(owner: Pick<ValueFieldProps<T>, "onValueChange" | "onValueCommit">, value: T) => void;
+export declare function resolveMaybeAccessor<T>(value: MaybeAccessor<T>): T;
+export declare function resolveMaybeAccessor<T>(value: MaybeAccessor<T> | undefined): T | undefined;

package/dist/types/inputs/icon-options.d.ts

@@ -0,0 +1,37 @@
+import type { IconOption } from "./SpecialInputs";
+export declare const DEFAULT_ICON_GROUPS: readonly [{
+    readonly value: "recommended";
+    readonly label: "Recommended";
+}, {
+    readonly value: "people";
+    readonly label: "People";
+}, {
+    readonly value: "work";
+    readonly label: "Work";
+}, {
+    readonly value: "communication";
+    readonly label: "Communication";
+}, {
+    readonly value: "files";
+    readonly label: "Files";
+}, {
+    readonly value: "data";
+    readonly label: "Data & tech";
+}, {
+    readonly value: "commerce";
+    readonly label: "Commerce";
+}, {
+    readonly value: "places";
+    readonly label: "Places";
+}, {
+    readonly value: "food";
+    readonly label: "Food";
+}, {
+    readonly value: "media";
+    readonly label: "Media";
+}, {
+    readonly value: "devices";
+    readonly label: "Devices";
+}];
+/** A curated, application-neutral Tabler catalogue for IconInput. */
+export declare const DEFAULT_ICON_OPTIONS: readonly IconOption[];

package/dist/types/inputs/image-crop.d.ts

@@ -0,0 +1,44 @@
+export type ImageCropAspect = "free" | {
+    width: number;
+    height: number;
+};
+export type ImageCropRotation = 0 | 90 | 180 | 270;
+export type ImageCropRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type ImageCropState = {
+    crop: ImageCropRect;
+    rotation: ImageCropRotation;
+};
+export type ImageCropSource = File | Blob | HTMLImageElement | HTMLCanvasElement | string;
+export type ImageCropOutput = {
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    format?: "webp" | "jpeg" | "png";
+    quality?: number;
+};
+export type ImageCropSize = {
+    width: number;
+    height: number;
+};
+export type ImageCropResizeHandle = "nw" | "ne" | "sw" | "se";
+export declare const normalizeImageCropRotation: (rotation: number) => ImageCropRotation;
+export declare const rotateImageCropRight: (rotation: ImageCropRotation) => ImageCropRotation;
+export declare const getInitialImageCropRect: (imageSize: ImageCropSize, aspect?: ImageCropAspect) => ImageCropRect;
+export declare const clampImageCropRect: (rect: ImageCropRect, imageSize: ImageCropSize, aspect?: ImageCropAspect) => ImageCropRect;
+export declare const resizeImageCropAroundCenter: (rect: ImageCropRect, imageSize: ImageCropSize, aspect: ImageCropAspect, scale: number) => ImageCropRect;
+/** Resizes a crop from one corner while keeping the opposite corner anchored. */
+export declare const resizeImageCropFromCorner: (rect: ImageCropRect, imageSize: ImageCropSize, aspect: ImageCropAspect, handle: ImageCropResizeHandle, dx: number, dy: number) => ImageCropRect;
+export declare const imageCropRectToPixels: (rect: ImageCropRect, imageSize: ImageCropSize) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare const createCroppedImageCanvas: (source: ImageCropSource, state: ImageCropState, output?: ImageCropOutput) => Promise<HTMLCanvasElement>;
+export declare const createCroppedImageDataUrl: (source: ImageCropSource, state: ImageCropState, output?: ImageCropOutput) => Promise<string>;

package/dist/types/inputs/index.d.ts

@@ -0,0 +1,45 @@
+export type { AutocompleteEditorProps } from "./AutocompleteEditor";
+export { AutocompleteEditor } from "./AutocompleteEditor";
+export type { AutocompleteSelectOption, AutocompleteSelectProps, AutocompleteSelectSearchResult, } from "./AutocompleteSelect";
+export { AutocompleteSelect } from "./AutocompleteSelect";
+export type { CheckboxProps } from "./Checkbox";
+export { Checkbox } from "./Checkbox";
+export type { CheckboxCardProps } from "./CheckboxCard";
+export { CheckboxCard } from "./CheckboxCard";
+export type { ColorInputProps, PinInputProps, SliderProps, } from "./ChoiceInputs";
+export { ColorInput, PinInput, Slider } from "./ChoiceInputs";
+export type { ComboboxOption, ComboboxProps } from "./Combobox";
+export { Combobox } from "./Combobox";
+export type { ChoiceOption, ChoiceOptionsLoader } from "./choice";
+export type { Completion, QueryContext, SuggestContext, Suggestion, } from "./completion";
+export { abbreviations } from "./completion";
+export type { DatePickerBaseProps, DatePickerProps, DatePreset, DateRangePickerProps, DateRangeValue, DateTimePickerProps, DurationPreset, } from "./DatePicker";
+export { DatePicker, DateRangePicker, DateTimePicker } from "./DatePicker";
+export type { FileDropzoneProps, ImageCropperProps, ImageInputProps } from "./FileInputs";
+export { FileDropzone, ImageCropper, ImageInput } from "./FileInputs";
+export type { DateContext, FieldProps, MaybeAccessor, ValueFieldProps } from "./field-contract";
+export { DEFAULT_ICON_GROUPS, DEFAULT_ICON_OPTIONS } from "./icon-options";
+export type { ImageCropAspect, ImageCropOutput, ImageCropRect, ImageCropRotation, ImageCropSize, ImageCropSource, ImageCropState, } from "./image-crop";
+export { clampImageCropRect, createCroppedImageCanvas, createCroppedImageDataUrl, getInitialImageCropRect, imageCropRectToPixels, normalizeImageCropRotation, resizeImageCropAroundCenter, rotateImageCropRight, } from "./image-crop";
+export type { MultiSelectFetchDataFn, MultiSelectInputProps, MultiSelectOption, } from "./MultiSelectInput";
+export { MultiSelectInput } from "./MultiSelectInput";
+export type { MarkdownEditorProps } from "./markdown/MarkdownEditor";
+export { MarkdownEditor } from "./markdown/MarkdownEditor";
+export type { NumberInputProps } from "./NumberInput";
+export { NumberInput } from "./NumberInput";
+export type { SelectGridSize, SelectGroup, SelectOption, SelectProps, SelectSourceOption, SelectView } from "./Select";
+export { Select } from "./Select";
+export type { SelectChipOption, SelectChipProps } from "./SelectChip";
+export { SelectChip } from "./SelectChip";
+export type { IconInputProps, IconOption } from "./SpecialInputs";
+export { IconInput } from "./SpecialInputs";
+export type { SwitchProps } from "./Switch";
+export { Switch } from "./Switch";
+export type { TagEditorItem, TagEditorLabels, TagEditorProps, TagEditorValue } from "./TagEditor";
+export { TagEditor } from "./TagEditor";
+export type { TagsInputProps } from "./TagsInput";
+export { TagsInput } from "./TagsInput";
+export type { TemplateEditorLayout, TemplateEditorProps, TemplatePreviewProps, TemplateSampleDataProps, TemplateVariable, TemplateVariableKind, } from "./TemplateEditor";
+export { createTemplateEditorPanesLayout, TemplateEditor, TemplatePreview, TemplateSampleData, } from "./TemplateEditor";
+export type { TextInputProps } from "./TextInput";
+export { TextInput } from "./TextInput";

package/dist/types/inputs/markdown/MarkdownEditor.d.ts

@@ -0,0 +1,25 @@
+import { type JSX } from "solid-js";
+import { type Completion } from "../completion";
+import type { ValueFieldProps } from "../field-contract";
+export type MarkdownEditorProps = ValueFieldProps<string> & {
+    onSubmit?: () => void;
+    placeholder?: string;
+    lines?: number;
+    noToolbar?: boolean;
+    spellcheck?: boolean;
+    name?: string;
+    maxLength?: number;
+    textareaRef?: (element: HTMLTextAreaElement) => void;
+    abbreviations?: Record<string, string>;
+    completions?: readonly Completion[];
+    showStats?: boolean;
+    variant?: "default" | "paper";
+    fill?: boolean;
+    onSave?: () => void;
+    saveDisabled?: boolean;
+    saving?: boolean;
+    toolbarTrailing?: JSX.Element;
+};
+export declare function MarkdownEditor(props: MarkdownEditorProps): JSX.Element;
+export type { Completion, SuggestContext, Suggestion } from "../completion";
+export { abbreviations } from "../completion";

package/dist/types/inputs/markdown/Toolbar.d.ts

@@ -0,0 +1,9 @@
+import { type JSX } from "solid-js";
+type ToolbarProps = {
+    textarea: () => HTMLTextAreaElement | null;
+    activeFormats?: () => Set<string>;
+    disabled?: boolean;
+    trailing?: JSX.Element;
+};
+export default function Toolbar(props: ToolbarProps): JSX.Element;
+export {};

package/dist/types/inputs/markdown/actions.d.ts

@@ -0,0 +1,8 @@
+export declare const toggleBold: (textarea: HTMLTextAreaElement) => void;
+export declare const toggleItalic: (textarea: HTMLTextAreaElement) => void;
+export declare const toggleCode: (textarea: HTMLTextAreaElement) => void;
+export declare const insertLink: (textarea: HTMLTextAreaElement, url?: string) => void;
+export declare const toggleHeading: (textarea: HTMLTextAreaElement, level: 1 | 2 | 3) => void;
+export declare const toggleBulletList: (textarea: HTMLTextAreaElement) => void;
+export declare const toggleQuote: (textarea: HTMLTextAreaElement) => void;
+export declare const toggleNumberedList: (textarea: HTMLTextAreaElement) => void;

package/dist/types/inputs/markdown/active-formats.d.ts

@@ -0,0 +1 @@
+export declare const computeActiveFormats: (textarea: HTMLTextAreaElement) => Set<string>;

package/dist/types/inputs/markdown/behaviors.d.ts

@@ -0,0 +1,3 @@
+export declare const handleShortcut: (event: KeyboardEvent, textarea: HTMLTextAreaElement) => boolean;
+export declare const handleListContinuation: (textarea: HTMLTextAreaElement) => boolean;
+export declare const handleSmartPaste: (event: ClipboardEvent, textarea: HTMLTextAreaElement) => boolean;

package/dist/types/inputs/markdown/code-zone.d.ts

@@ -0,0 +1 @@
+export declare const isInCodeZone: (text: string, position: number) => boolean;

package/dist/types/internal/color.d.ts

@@ -0,0 +1,4 @@
+import type { JSX } from "solid-js";
+export declare const normalizeHexColor: (value: string | null | undefined) => string | undefined;
+export declare const hexWithAlpha: (value: string, alpha: string) => string;
+export declare const colorTintStyle: (value: string | null | undefined) => JSX.CSSProperties | undefined;

package/dist/types/internal/field.d.ts

@@ -0,0 +1,27 @@
+import { type JSX } from "solid-js";
+import type { FieldProps } from "../inputs/field-contract";
+export type FieldMeta = {
+    controlId: string;
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+};
+export declare const createFieldMeta: (id?: string) => FieldMeta;
+type FieldLayoutProps = {
+    children: JSX.Element;
+    meta: FieldMeta;
+    fill?: boolean;
+    /** Composite controls use aria-labelledby instead of an HTML label target. */
+    labelFor?: string | false;
+} & Pick<FieldProps, "class" | "description" | "error" | "label" | "required" | "disabled">;
+export declare function Field(props: FieldLayoutProps): JSX.Element;
+type FieldAriaOwner = Pick<FieldProps, "aria-describedby" | "aria-label" | "description" | "error" | "label" | "required">;
+export declare const fieldDescribedBy: (meta: FieldMeta, owner: FieldAriaOwner) => string | undefined;
+export declare const fieldControlAria: (meta: FieldMeta, owner: FieldAriaOwner) => {
+    readonly "aria-label": string | undefined;
+    readonly "aria-labelledby": string | undefined;
+    readonly "aria-describedby": string | undefined;
+    readonly "aria-invalid": "true" | undefined;
+    readonly "aria-required": true | undefined;
+};
+export {};

package/dist/types/internal/portal.d.ts

@@ -0,0 +1 @@
+export declare const getK2bPortalRoot: (scope?: HTMLElement | null) => HTMLElement;

package/dist/types/intl/Format.d.ts

@@ -0,0 +1,84 @@
+import { type ByteMode } from "@k2b/stdlib";
+import { type JSX } from "solid-js";
+type SpanProps = JSX.HTMLAttributes<HTMLSpanElement>;
+type TimeElementProps = Omit<JSX.HTMLAttributes<HTMLElement>, "ref">;
+type LocaleProp = {
+    /** Explicit locale override; defaults to the inherited render locale. */
+    locale?: string;
+};
+type FallbackProp = {
+    /** Text rendered for null or invalid input. Defaults to `"—"`. */
+    fallback?: string;
+};
+export type FormatNumberProps = SpanProps & LocaleProp & FallbackProp & {
+    value: number | null | undefined;
+    /** Use deterministic compact suffixes (`k`, `M`, `B`, `T`). */
+    compact?: boolean;
+    /** Fixed fraction digits. */
+    decimals?: number;
+};
+export type FormatPercentProps = SpanProps & LocaleProp & FallbackProp & {
+    /** Ratio input: `0.12` renders as `12%`. */
+    value: number | null | undefined;
+    /** Fixed fraction digits. Defaults to 0. */
+    decimals?: number;
+    /** Clamp the ratio to 0..1 before formatting. */
+    clamp?: boolean;
+};
+export type FormatCurrencyProps = SpanProps & LocaleProp & FallbackProp & {
+    value: number | null | undefined;
+    /** ISO 4217 currency code, e.g. `"EUR"` or `"USD"`. */
+    currency: string;
+    /** Fixed fraction digits. Defaults to the currency's standard digits. */
+    decimals?: number;
+};
+export type FormatBytesProps = SpanProps & LocaleProp & FallbackProp & {
+    value: number | null | undefined;
+    /** `"iec"` (default, 1024-base) or `"si"` (1000-base). */
+    mode?: ByteMode;
+};
+export type FormatDateProps = TimeElementProps & LocaleProp & FallbackProp & {
+    value: Date | string | null | undefined;
+    /** IANA timezone. Defaults to `"UTC"` so server and browser text agree. */
+    timeZone?: string;
+};
+export type FormatTimeProps = FormatDateProps;
+export type FormatDateTimeProps = FormatDateProps;
+export type FormatRelativeTimeProps = TimeElementProps & LocaleProp & FallbackProp & {
+    value: Date | string | null | undefined;
+    /** Deterministic base timestamp; defaults to now. */
+    base?: Date | string;
+    /** IANA timezone used to select calendar-relative labels. Defaults to `"UTC"`. */
+    timeZone?: string;
+};
+export type FormatDurationProps = TimeElementProps & LocaleProp & FallbackProp & {
+    from: Date | string | null | undefined;
+    to: Date | string | null | undefined;
+};
+export type FormatDurationMsProps = TimeElementProps & LocaleProp & FallbackProp & {
+    /** Duration in milliseconds. */
+    value: number | null | undefined;
+};
+/**
+ * Unstyled semantic formatter components backed by `@k2b/stdlib`.
+ *
+ * Numeric components render a plain `<span>`; date/time components render
+ * `<time>` with a canonical `datetime` attribute. All components inherit the
+ * render locale (see `LocaleProvider` / `useLocale`) and accept an explicit
+ * `locale` override. Date, Time, and DateTime format in UTC unless an
+ * explicit `timeZone` is given, so server and browser output never diverge
+ * with the runtime timezone.
+ */
+export declare const Format: {
+    readonly Number: (props: FormatNumberProps) => JSX.Element;
+    readonly Percent: (props: FormatPercentProps) => JSX.Element;
+    readonly Currency: (props: FormatCurrencyProps) => JSX.Element;
+    readonly Bytes: (props: FormatBytesProps) => JSX.Element;
+    readonly Date: (props: FormatDateProps) => JSX.Element;
+    readonly Time: (props: FormatDateProps) => JSX.Element;
+    readonly DateTime: (props: FormatDateProps) => JSX.Element;
+    readonly RelativeTime: (props: FormatRelativeTimeProps) => JSX.Element;
+    readonly Duration: (props: FormatDurationProps) => JSX.Element;
+    readonly DurationMs: (props: FormatDurationMsProps) => JSX.Element;
+};
+export {};

package/dist/types/intl/index.d.ts

@@ -0,0 +1,4 @@
+export type { FormatBytesProps, FormatCurrencyProps, FormatDateProps, FormatDateTimeProps, FormatDurationMsProps, FormatDurationProps, FormatNumberProps, FormatPercentProps, FormatRelativeTimeProps, FormatTimeProps, } from "./Format";
+export { Format } from "./Format";
+export type { LocaleProviderProps } from "./locale";
+export { LocaleProvider, useLocale } from "./locale";

package/dist/types/intl/locale.d.ts

@@ -0,0 +1,42 @@
+import type { DateContext } from "@k2b/stdlib";
+import { type JSX } from "solid-js";
+/**
+ * Deterministic fallback locale used when neither a `LocaleProvider` nor a
+ * browser `<html lang>` value is available.
+ */
+export declare const DEFAULT_LOCALE = "en";
+export type LocaleProviderProps = {
+    /** BCP 47 locale tag, e.g. `"en"`, `"de"`, or `"de-AT"`. */
+    locale: string;
+    children?: JSX.Element;
+};
+/**
+ * Provides the render locale to all descendant `@k2b/ui` components.
+ *
+ * On the server this is the only locale source, so SSR consumers wrap their
+ * page in a provider and emit a matching `<html lang>` attribute. A browser
+ * island is an independent Solid root: an outer server-side provider does not
+ * survive the island's browser re-render, which instead falls back to
+ * `document.documentElement.lang`. Keeping `<html lang>` equal to the server
+ * provider locale therefore keeps both passes coherent.
+ */
+export declare const LocaleProvider: (props: LocaleProviderProps) => JSX.Element;
+/**
+ * Resolves the effective render locale as a reactive accessor.
+ *
+ * Precedence: nearest `LocaleProvider`, then the browser's
+ * `document.documentElement.lang`, then `"en"`. Components with an explicit
+ * `locale` prop apply it before consulting this hook.
+ */
+export declare const useLocale: () => (() => string);
+/**
+ * Effective date config for date surfaces: an explicit `dateConfig.locale`
+ * wins, otherwise the inherited render locale fills the gap. Timezone and
+ * week-start configuration pass through untouched.
+ */
+export declare const useDateConfigLocale: (config: () => DateContext | undefined) => (() => DateContext);
+/**
+ * The decimal separator `Intl.NumberFormat` uses for a locale, e.g. `"."`
+ * for English and `","` for German.
+ */
+export declare const decimalSeparator: (locale: string) => string;