@k2b/ui 0.27.0 → 0.28.0

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

@@ -1,5 +1,14 @@
 import { type JSX } from "solid-js";
 export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * A status ring around the avatar: `"success"` for an active state such as someone working on a task, or an explicit
+ * color, for example a collaborator's cursor color.
+ */
+export type AvatarRing = "success" | {
+    color: string;
+};
+/** `square` marks an agent or service account; people stay round. */
+export type AvatarShape = "circle" | "square";
 export type AvatarProps = {
     name: string;
     src?: string | null;
@@ -7,6 +16,9 @@ export type AvatarProps = {
     alt?: string;
     fallback?: string;
     size?: AvatarSize;
+    /** Draws a ring with a small transparent gap inside the avatar's own box, so the avatar keeps its size and no container clips the ring. */
+    ring?: AvatarRing;
+    shape?: AvatarShape;
     loading?: "eager" | "lazy";
     class?: string;
     style?: JSX.CSSProperties | string;

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

@@ -0,0 +1,41 @@
+import { type JSX } from "solid-js";
+import { type AvatarShape } from "./Avatar";
+export type AvatarStackPerson = {
+    /** Stable key, such as the account id. */
+    id: string;
+    name: string;
+    src?: string | null;
+    /** Shown instead of initials when there is no picture. */
+    icon?: string;
+    /** `square` for agents and service accounts. */
+    shape?: AvatarShape;
+    /** A short tag after the name, such as "Agent". */
+    badge?: JSX.Element;
+    /** One line below the name; it ends with an ellipsis instead of wrapping. */
+    detail?: JSX.Element;
+    /** Icon class before `detail`. */
+    detailIcon?: string;
+    /** Short text at the end of the row, such as "2 tabs". */
+    trailing?: JSX.Element;
+    /** The person viewing: listed last, below a gap, and never in the stack. */
+    self?: boolean;
+    /** Makes the row a button. The list closes first. */
+    onSelect?: () => void;
+};
+export type AvatarStackProps = {
+    people: readonly AvatarStackPerson[];
+    /** Title of the list that the stack opens, such as "Here now". */
+    title: string;
+    /** Accessible name of the stack button, such as "Here now: Jana Berger and 2 more". */
+    label: string;
+    /** One quiet line below the list. */
+    hint?: JSX.Element;
+    /** Faces before "+n". Defaults to 3. */
+    max?: number;
+    class?: string;
+};
+/**
+ * A few overlapping faces, then "+n", as one button. It opens the full list of people beside it, or as a bottom sheet
+ * on phones. People with `self` are listed last and never shown in the stack.
+ */
+export declare function AvatarStack(props: AvatarStackProps): JSX.Element;

package/dist/types/surfaces/avatar-messages.d.ts

@@ -3,6 +3,9 @@ declare const avatarMessages: import("@k2b/stdlib").Catalog<{
         name: string;
     }) => string;
     unknownUser: string;
+    moreCount: ({ count }: {
+        count: number;
+    }) => string;
 }>;
 export type AvatarMessages = ReturnType<(typeof avatarMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -1,5 +1,7 @@
-export type { AvatarProps, AvatarSize } from "./Avatar";
+export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize } from "./Avatar";
 export { Avatar } from "./Avatar";
+export type { AvatarStackPerson, AvatarStackProps } from "./AvatarStack";
+export { AvatarStack } from "./AvatarStack";
 export type { DescriptionListItem, DescriptionListProps } from "./DescriptionList";
 export { DescriptionList } from "./DescriptionList";
 export type { LinkCardColor, LinkCardProps } from "./LinkCard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -26,6 +26,11 @@
     "./styles.css": "./dist/styles.css",
     "./fonts/plex.css": "./dist/plex.css",
     "./icons/tabler.css": "./dist/tabler.css",
+    "./chart-inspection": {
+      "types": "./dist/types/chart-inspection.d.ts",
+      "browser": "./dist/browser/chart-inspection.js",
+      "default": "./dist/browser/chart-inspection.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [