@openwarelabs/ui 0.1.1 → 0.2.0

package/dist/components/Avatar/Avatar.d.cts

@@ -1,14 +1,25 @@
+import { type CSSProperties } from "react";
 export interface AvatarProps {
     /** The person's name; its initials show when there's no image. */
     name: string;
     /** A photo URL. If it fails to load, the initials show instead. */
     src?: string;
-    /** sm 24px, md 28px, lg 36px.
+    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
      * @default "md" */
-    size?: "sm" | "md" | "lg";
+    size?: AvatarSize;
     /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
     label?: string;
     className?: string;
 }
+export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;
+/**
+ * The class and style that size an avatar: a named size's class, or a pixel size through --ow-avatar-size.
+ * @internal
+ */
+export declare function avatarSize(size: AvatarSize): {
+    className: string;
+    style?: CSSProperties;
+    pixels: number;
+};
 /** A round picture of a person: their photo, else their initials on the brand colour, else a person icon. */
 export declare function Avatar({ name, src, size, label, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/Avatar.d.ts

@@ -1,14 +1,25 @@
+import { type CSSProperties } from "react";
 export interface AvatarProps {
     /** The person's name; its initials show when there's no image. */
     name: string;
     /** A photo URL. If it fails to load, the initials show instead. */
     src?: string;
-    /** sm 24px, md 28px, lg 36px.
+    /** sm 24px, md 28px, lg 36px, xl 48px, or any size in pixels, such as 96 for a team page. The initials scale with it.
      * @default "md" */
-    size?: "sm" | "md" | "lg";
+    size?: AvatarSize;
     /** Give it when the avatar stands alone; beside the name, leave it out and it's hidden from screen readers. */
     label?: string;
     className?: string;
 }
+export type AvatarSize = "sm" | "md" | "lg" | "xl" | number;
+/**
+ * The class and style that size an avatar: a named size's class, or a pixel size through --ow-avatar-size.
+ * @internal
+ */
+export declare function avatarSize(size: AvatarSize): {
+    className: string;
+    style?: CSSProperties;
+    pixels: number;
+};
 /** A round picture of a person: their photo, else their initials on the brand colour, else a person icon. */
 export declare function Avatar({ name, src, size, label, className }: AvatarProps): import("react").JSX.Element;

package/dist/components/Avatar/AvatarGroup.d.cts

@@ -1,14 +1,14 @@
 import { type ReactNode } from "react";
-import { type AvatarProps } from "./Avatar.cjs";
+import { type AvatarSize } from "./Avatar.cjs";
 export interface AvatarGroupProps {
     /** Avatars. */
     children: ReactNode;
     /** Shows this many, then a "+3" count.
      * @default 4 */
     max?: number;
-    /** Applied to every avatar in the group.
+    /** Applied to every avatar in the group: a named size or pixels.
      * @default "md" */
-    size?: AvatarProps["size"];
+    size?: AvatarSize;
     /** Names the group for screen readers, e.g. "5 people on this project". */
     label?: string;
     className?: string;
@@ -20,8 +20,9 @@ export interface UserProps {
     /** A second line: an email, a role. */
     description?: ReactNode;
     src?: string;
-    /** @default "md" */
-    size?: AvatarProps["size"];
+    /** The avatar's size; the name and gap grow with it from xl (48px) up.
+     * @default "md" */
+    size?: AvatarSize;
     className?: string;
 }
 /** A person: avatar, name and a line about them, as in an account menu. */

package/dist/components/Avatar/AvatarGroup.d.ts

@@ -1,14 +1,14 @@
 import { type ReactNode } from "react";
-import { type AvatarProps } from "./Avatar.js";
+import { type AvatarSize } from "./Avatar.js";
 export interface AvatarGroupProps {
     /** Avatars. */
     children: ReactNode;
     /** Shows this many, then a "+3" count.
      * @default 4 */
     max?: number;
-    /** Applied to every avatar in the group.
+    /** Applied to every avatar in the group: a named size or pixels.
      * @default "md" */
-    size?: AvatarProps["size"];
+    size?: AvatarSize;
     /** Names the group for screen readers, e.g. "5 people on this project". */
     label?: string;
     className?: string;
@@ -20,8 +20,9 @@ export interface UserProps {
     /** A second line: an email, a role. */
     description?: ReactNode;
     src?: string;
-    /** @default "md" */
-    size?: AvatarProps["size"];
+    /** The avatar's size; the name and gap grow with it from xl (48px) up.
+     * @default "md" */
+    size?: AvatarSize;
     className?: string;
 }
 /** A person: avatar, name and a line about them, as in an account menu. */

package/dist/components/Steps/Steps.d.cts

@@ -3,7 +3,7 @@ export interface StepItem {
     title: ReactNode;
     /** A line under the title. Hidden once the step is done, in the vertical layout. */
     description?: ReactNode;
-    /** A control on the right of the current step, such as a small Button. */
+    /** A control on the right of the step while it's the current one, such as a small Button. Other steps don't show it. */
     action?: ReactNode;
     /** Overrides the status worked out from `current`. */
     status?: "done" | "current" | "upcoming";

package/dist/components/Steps/Steps.d.ts

@@ -3,7 +3,7 @@ export interface StepItem {
     title: ReactNode;
     /** A line under the title. Hidden once the step is done, in the vertical layout. */
     description?: ReactNode;
-    /** A control on the right of the current step, such as a small Button. */
+    /** A control on the right of the step while it's the current one, such as a small Button. Other steps don't show it. */
     action?: ReactNode;
     /** Overrides the status worked out from `current`. */
     status?: "done" | "current" | "upcoming";

package/dist/components/Table/Table.d.cts

@@ -41,6 +41,11 @@ export interface TableProps<Row> {
     selectedKeys?: Key[];
     defaultSelectedKeys?: Key[];
     onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
     /** Shown in place of the rows when there are none, such as an EmptyState. */
     emptyContent?: ReactNode;
     /** `compact` rows are 36px; `comfortable` 44px.
@@ -52,4 +57,4 @@ export interface TableProps<Row> {
     className?: string;
 }
 /** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -41,6 +41,11 @@ export interface TableProps<Row> {
     selectedKeys?: Key[];
     defaultSelectedKeys?: Key[];
     onSelectionChange?(keys: Key[]): void;
+    /**
+     * Names a row for its checkbox, read out as "Select …": the person, the file, the project. Defaults to the
+     * first column's value when it's text or a number, else "row 3".
+     */
+    rowLabel?(row: Row): string;
     /** Shown in place of the rows when there are none, such as an EmptyState. */
     emptyContent?: ReactNode;
     /** `compact` rows are 36px; `comfortable` 44px.
@@ -52,4 +57,4 @@ export interface TableProps<Row> {
     className?: string;
 }
 /** Rows of records with sortable columns and optional selection, in a bordered card. */
-export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, sort, defaultSort, onSortChange, manualSort, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, rowLabel, emptyContent, density, stickyHeader, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Tooltip/Tooltip.d.cts

@@ -4,15 +4,15 @@ export interface TooltipProps {
     label: ReactNode;
     /** The thing it explains: usually an icon-only Button with the same words as its aria-label. */
     children: ReactNode;
-    /** Which side it prefers; it flips when there's no room.
+    /** Which side it prefers; it flips to the opposite side when there's no room. `right` suits icons in a folded sidebar.
      * @default "top" */
-    placement?: "top" | "bottom";
+    placement?: "top" | "bottom" | "left" | "right";
     /** Milliseconds of hovering before it shows. Moving to a neighbour while one is showing skips the wait.
      * @default 400 */
     delay?: number;
 }
 /**
- * A small dark label above its child on hover or keyboard focus. It's for sighted users only: the child
+ * A small dark label beside its child (above, unless `placement` says otherwise) on hover or keyboard focus. It's for sighted users only: the child
  * carries the same words for screen readers (an aria-label, or visually hidden text), so they aren't read twice.
  * It sits in the top layer, so scroll areas and dialogs can't clip it.
  */

package/dist/components/Tooltip/Tooltip.d.ts

@@ -4,15 +4,15 @@ export interface TooltipProps {
     label: ReactNode;
     /** The thing it explains: usually an icon-only Button with the same words as its aria-label. */
     children: ReactNode;
-    /** Which side it prefers; it flips when there's no room.
+    /** Which side it prefers; it flips to the opposite side when there's no room. `right` suits icons in a folded sidebar.
      * @default "top" */
-    placement?: "top" | "bottom";
+    placement?: "top" | "bottom" | "left" | "right";
     /** Milliseconds of hovering before it shows. Moving to a neighbour while one is showing skips the wait.
      * @default 400 */
     delay?: number;
 }
 /**
- * A small dark label above its child on hover or keyboard focus. It's for sighted users only: the child
+ * A small dark label beside its child (above, unless `placement` says otherwise) on hover or keyboard focus. It's for sighted users only: the child
  * carries the same words for screen readers (an aria-label, or visually hidden text), so they aren't read twice.
  * It sits in the top layer, so scroll areas and dialogs can't clip it.
  */

package/dist/components.css

@@ -39,6 +39,7 @@
    back into it. useFloating sets data-side and --ow-floating-origin; usePresence sets data-state. */
 .ow-floating {
     --ow-floating-shift: -4px;
+    --ow-floating-shift-x: 0px;
     transform-origin: var(--ow-floating-origin, top center);
 }
 
@@ -46,6 +47,16 @@
     --ow-floating-shift: 4px;
 }
 
+.ow-floating[data-side="left"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: 4px;
+}
+
+.ow-floating[data-side="right"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: -4px;
+}
+
 .ow-floating[data-state="open"] {
     animation: ow-floating-in var(--ow-duration-base) var(--ow-ease-emphasized);
 }
@@ -58,14 +69,14 @@
 @keyframes ow-floating-in {
     from {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.96);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.96);
     }
 }
 
 @keyframes ow-floating-out {
     to {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.97);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.97);
     }
 }
 
@@ -494,6 +505,8 @@
     border-radius: var(--ow-radius-container);
     background: var(--ow-track);
     padding: var(--ow-space-2xs);
+    /* A hairline edge, so the well shows on the canvas as well as on a surface. */
+    box-shadow: inset 0 0 0 1px var(--ow-border);
 }
 
 .ow-segmented--full {
@@ -797,6 +810,8 @@
 .ow-input-group {
     display: flex;
     width: 100%;
+    /* Shrink in a narrow grid or flex column instead of pushing past it. */
+    min-width: 0;
     height: 40px;
     align-items: center;
     gap: var(--ow-space-sm);
@@ -843,6 +858,8 @@
 }
 
 .ow-input-group__input {
+    /* A percentage width lets the field's minimum size come from its start and end content alone. */
+    width: 100%;
     min-width: 0;
     height: 100%;
     flex: 1;
@@ -1449,7 +1466,7 @@
     width: 16px;
     height: 16px;
     border-radius: var(--ow-radius-pill);
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: var(--ow-shadow-control);
     transform: translateX(2px);
     transition:
@@ -1471,7 +1488,7 @@
 }
 
 /* components/Slider/Slider.css */
-/* Slider: native range inputs over a drawn track. The thumb is the switch's knob: white, round, with a soft shadow. */
+/* Slider: native range inputs over a drawn track. The thumb is the switch's knob (ow-knob): round, with a soft shadow. */
 .ow-slider {
     display: grid;
     gap: var(--ow-space-sm);
@@ -1562,7 +1579,7 @@
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -1575,7 +1592,7 @@
     height: 18px;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -2185,7 +2202,7 @@
 }
 
 /* components/Tooltip/Tooltip.css */
-/* Tooltip: a small dark label in the top layer, above the child (or below when there's no room). */
+/* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
 .ow-tooltip {
     display: inline-flex;
 }
@@ -3989,6 +4006,19 @@
     font-size: 13px;
 }
 
+.ow-avatar--xl {
+    width: 48px;
+    height: 48px;
+    font-size: 17px;
+}
+
+/* Any size in pixels, through --ow-avatar-size: the initials stay in proportion. */
+.ow-avatar--custom {
+    width: var(--ow-avatar-size);
+    height: var(--ow-avatar-size);
+    font-size: calc(var(--ow-avatar-size) * 0.36);
+}
+
 .ow-avatar__image {
     width: 100%;
     height: 100%;
@@ -4025,6 +4055,18 @@
     gap: var(--ow-space-md);
 }
 
+.ow-user--xl {
+    gap: var(--ow-space-lg);
+}
+
+.ow-user--xl .ow-user__name {
+    font-size: 15px;
+}
+
+.ow-user--xl .ow-user__description {
+    font-size: 13px;
+}
+
 .ow-user__text {
     display: grid;
     min-width: 0;

package/dist/hooks/useFloating.d.cts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type RefObject } from "react";
-export type Placement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top";
+export type Placement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top" | "left" | "right";
 interface Options {
     open: boolean;
     anchorRef: RefObject<HTMLElement | null>;
@@ -14,7 +14,7 @@ interface Options {
 }
 /**
  * Positions a floating element (a popover, a listbox) against its anchor with fixed coordinates, flips it above
- * or below when there's no room, keeps it on screen, and follows the anchor when the page scrolls or resizes.
+ * or below (or, for "left" and "right", to the other side) when there's no room, keeps it on screen, and follows the anchor when the page scrolls or resizes.
  * It also puts the element in the browser's top layer (popover="manual"), so dialogs and overflow can't clip it.
  * Pass the element's `mounted` from usePresence as `open`, so it stays placed while it animates out.
  */

package/dist/hooks/useFloating.d.ts

@@ -1,5 +1,5 @@
 import { type CSSProperties, type RefObject } from "react";
-export type Placement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top";
+export type Placement = "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top" | "left" | "right";
 interface Options {
     open: boolean;
     anchorRef: RefObject<HTMLElement | null>;
@@ -14,7 +14,7 @@ interface Options {
 }
 /**
  * Positions a floating element (a popover, a listbox) against its anchor with fixed coordinates, flips it above
- * or below when there's no room, keeps it on screen, and follows the anchor when the page scrolls or resizes.
+ * or below (or, for "left" and "right", to the other side) when there's no room, keeps it on screen, and follows the anchor when the page scrolls or resizes.
  * It also puts the element in the browser's top layer (popover="manual"), so dialogs and overflow can't clip it.
  * Pass the element's `mounted` from usePresence as `open`, so it stays placed while it animates out.
  */

package/dist/index.cjs

@@ -1172,6 +1172,25 @@ function useFloating({
     const rect = anchor.getBoundingClientRect();
     const width = Math.max(floating.offsetWidth, matchWidth ? rect.width : 0);
     const height = floating.scrollHeight;
+    if (placement === "left" || placement === "right") {
+      const roomLeft = rect.left - offset - margin;
+      const roomRight = window.innerWidth - rect.right - offset - margin;
+      const onLeft = placement === "left" ? width <= roomLeft || roomLeft > roomRight : width > roomRight && roomLeft > roomRight;
+      const top2 = Math.min(Math.max(margin, rect.top + rect.height / 2 - height / 2), window.innerHeight - height - margin);
+      floating.dataset.side = onLeft ? "left" : "right";
+      setStyle({
+        position: "fixed",
+        inset: "auto",
+        margin: 0,
+        left: onLeft ? "auto" : rect.right + offset,
+        right: onLeft ? window.innerWidth - rect.left + offset : "auto",
+        top: top2,
+        bottom: "auto",
+        maxHeight: Math.max(120, Math.min(maxHeight, window.innerHeight - 2 * margin)),
+        ["--ow-floating-origin"]: `${onLeft ? "right" : "left"} center`
+      });
+      return;
+    }
     const below = window.innerHeight - rect.bottom - offset - margin;
     const above = rect.top - offset - margin;
     const wantsTop = placement.startsWith("top");
@@ -3643,7 +3662,7 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
             ] }),
             item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__description", children: item.description }) : null
           ] }),
-          item.action && status !== "done" && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__action", children: item.action }) : null
+          item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "ow-steps__action", children: item.action }) : null
         ]
       },
       index
@@ -3726,6 +3745,7 @@ function Table({
   selectedKeys,
   defaultSelectedKeys = [],
   onSelectionChange,
+  rowLabel,
   emptyContent = "Nothing here yet.",
   density = "comfortable",
   stickyHeader = false,
@@ -3735,6 +3755,11 @@ function Table({
   const [currentSort, setSort] = useControllableState(sort, defaultSort, onSortChange);
   const [selected, setSelected] = useControllableState(selectedKeys, defaultSelectedKeys, onSelectionChange);
   const keyOf = (row) => typeof rowKey === "function" ? rowKey(row) : row[rowKey];
+  const labelOf = (row, index) => {
+    if (rowLabel) return rowLabel(row);
+    const first = columns[0] ? row[columns[0].key] : void 0;
+    return typeof first === "string" || typeof first === "number" ? String(first) : `row ${index + 1}`;
+  };
   const field = (row, key) => row[key];
   const sorted = (0, import_react41.useMemo)(() => {
     if (!currentSort || manualSort) return rows;
@@ -3791,7 +3816,7 @@ function Table({
             );
           })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row) => {
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row, index) => {
           const key = keyOf(row);
           const isSelected = selected.includes(key);
           return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
@@ -3799,7 +3824,7 @@ function Table({
               Checkbox,
               {
                 size: "sm",
-                "aria-label": "Select row",
+                "aria-label": `Select ${labelOf(row, index)}`,
                 checked: isSelected,
                 onChange: (event) => setSelected(
                   event.target.checked ? [...selected, key] : selected.filter((k) => k !== key)
@@ -4029,16 +4054,25 @@ function ColorSwatch({ color, name, value, size = "md", shape = "square", classN
 // src/components/Avatar/Avatar.tsx
 var import_react43 = require("react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
+var namedSizes = { sm: 24, md: 28, lg: 36, xl: 48 };
+function avatarSize(size) {
+  if (typeof size === "number") {
+    return { className: "ow-avatar--custom", style: { "--ow-avatar-size": `${size}px` }, pixels: size };
+  }
+  return { className: `ow-avatar--${size}`, pixels: namedSizes[size] };
+}
 function Avatar({ name, src, size = "md", label, className }) {
   const initials = getInitials(name);
   const [failedImage, setFailedImage] = (0, import_react43.useState)();
   const showImage = src && src !== failedImage;
+  const sizing = avatarSize(size);
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "span",
     {
-      className: cx("ow-avatar", `ow-avatar--${size}`, !initials && !showImage && "ow-avatar--empty", className),
+      className: cx("ow-avatar", sizing.className, !initials && !showImage && "ow-avatar--empty", className),
+      style: sizing.style,
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
-      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(UserIcon, { size: size === "sm" ? 13 : size === "lg" ? 18 : 15 })
+      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
     }
   );
 }
@@ -4048,11 +4082,12 @@ var import_react44 = require("react");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function AvatarGroup({ children, max = 4, size = "md", label, className }) {
   const avatars = import_react44.Children.toArray(children).filter(import_react44.isValidElement);
+  const sizing = avatarSize(size);
   const shown = avatars.slice(0, max);
   const hidden = avatars.length - shown.length;
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
     shown.map((avatar) => (0, import_react44.cloneElement)(avatar, { size })),
-    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: cx("ow-avatar", `ow-avatar--${size}`, "ow-avatar--count"), children: [
+    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { "aria-hidden": "true", children: [
         "+",
         hidden
@@ -4065,8 +4100,12 @@ function AvatarGroup({ children, max = 4, size = "md", label, className }) {
     ] }) : null
   ] });
 }
+function userSize(size) {
+  if (typeof size !== "number") return `ow-user--${size}`;
+  return size >= 48 ? "ow-user--xl" : size >= 36 ? "ow-user--lg" : size >= 28 ? "ow-user--md" : "ow-user--sm";
+}
 function User({ name, description, src, size = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cx("ow-user", `ow-user--${size}`, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cx("ow-user", userSize(size), className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Avatar, { name, src, size }),
     /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ow-user__text", children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ow-user__name", children: name }),