@k2b/ui 0.7.0 → 0.8.0

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

@@ -12,6 +12,18 @@ export type ChoiceOption<T extends string = 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;
+/**
+ * Counts the leading pills that fit into `available` pixels and measures the
+ * whole row. When not all of them fit, the rest collapse into a summary pill
+ * of width `more`; the first pill always stays and truncates when even it does
+ * not fit. Without a measured width (no layout yet) every pill stays. Half a
+ * pixel of slack absorbs layout rounding, so a row given exactly its own
+ * `rowWidth` always fits.
+ */
+export declare const fitChoicePills: (available: number, widths: readonly number[], gap: number, more: number) => {
+    visible: number;
+    rowWidth: number;
+};
 export declare function createChoiceLoader<T extends string>(loader: () => ChoiceOptionsLoader<T> | undefined, debounceMs: () => number): {
     options: () => readonly ChoiceOption<T>[];
     loading: () => boolean;

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

@@ -334,6 +334,9 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
         index: number;
         total: number;
     }) => string;
+    moreSelected: ({ count }: {
+        count: number;
+    }) => string;
     removeNamed: ({ name }: {
         name: string;
     }) => string;

package/dist/types/surfaces/Placeholder.d.ts

@@ -2,7 +2,8 @@ import { type JSX } from "solid-js";
 export type PlaceholderAlign = "center" | "left";
 export type PlaceholderSurface = "none" | "paper";
 export type PlaceholderState = "empty" | "loading" | "error";
-export type PlaceholderVariant = "compact" | "panel";
+/** `compact` stacks inside a section, `inline` is one row in a list or sidebar, `panel` fills a work area. */
+export type PlaceholderVariant = "compact" | "inline" | "panel";
 export type PlaceholderProps = {
     title?: JSX.Element;
     description?: JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",