@openwarelabs/ui 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -88,7 +88,7 @@ export type { EmptyStateProps } from "./components/EmptyState/EmptyState.cjs";
 export { Tag, TagGroup, ColorSwatch } from "./components/Tag/Tag.cjs";
 export type { TagProps, TagGroupProps, ColorSwatchProps } from "./components/Tag/Tag.cjs";
 export { Avatar } from "./components/Avatar/Avatar.cjs";
-export type { AvatarProps } from "./components/Avatar/Avatar.cjs";
+export type { AvatarProps, AvatarSize } from "./components/Avatar/Avatar.cjs";
 export { AvatarGroup, User } from "./components/Avatar/AvatarGroup.cjs";
 export type { AvatarGroupProps, UserProps } from "./components/Avatar/AvatarGroup.cjs";
 export { Kbd, Code } from "./components/Kbd/Kbd.cjs";

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export type { EmptyStateProps } from "./components/EmptyState/EmptyState.js";
 export { Tag, TagGroup, ColorSwatch } from "./components/Tag/Tag.js";
 export type { TagProps, TagGroupProps, ColorSwatchProps } from "./components/Tag/Tag.js";
 export { Avatar } from "./components/Avatar/Avatar.js";
-export type { AvatarProps } from "./components/Avatar/Avatar.js";
+export type { AvatarProps, AvatarSize } from "./components/Avatar/Avatar.js";
 export { AvatarGroup, User } from "./components/Avatar/AvatarGroup.js";
 export type { AvatarGroupProps, UserProps } from "./components/Avatar/AvatarGroup.js";
 export { Kbd, Code } from "./components/Kbd/Kbd.js";

package/dist/index.js

@@ -1042,6 +1042,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");
@@ -3556,7 +3575,7 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
             ] }),
             item.description && (orientation === "horizontal" || status !== "done") ? /* @__PURE__ */ jsx38("span", { className: "ow-steps__description", children: item.description }) : null
           ] }),
-          item.action && status !== "done" && orientation === "vertical" ? /* @__PURE__ */ jsx38("span", { className: "ow-steps__action", children: item.action }) : null
+          item.action && status === "current" && orientation === "vertical" ? /* @__PURE__ */ jsx38("span", { className: "ow-steps__action", children: item.action }) : null
         ]
       },
       index
@@ -3639,6 +3658,7 @@ function Table({
   selectedKeys,
   defaultSelectedKeys = [],
   onSelectionChange,
+  rowLabel,
   emptyContent = "Nothing here yet.",
   density = "comfortable",
   stickyHeader = false,
@@ -3648,6 +3668,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 = useMemo5(() => {
     if (!currentSort || manualSort) return rows;
@@ -3704,7 +3729,7 @@ function Table({
             );
           })
         ] }) }),
-        /* @__PURE__ */ jsx40("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ jsx40("tr", { children: /* @__PURE__ */ jsx40("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row) => {
+        /* @__PURE__ */ jsx40("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ jsx40("tr", { children: /* @__PURE__ */ jsx40("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__ */ jsxs34("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
@@ -3712,7 +3737,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)
@@ -3942,16 +3967,25 @@ function ColorSwatch({ color, name, value, size = "md", shape = "square", classN
 // src/components/Avatar/Avatar.tsx
 import { useState as useState18 } from "react";
 import { jsx as jsx45 } from "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] = useState18();
   const showImage = src && src !== failedImage;
+  const sizing = avatarSize(size);
   return /* @__PURE__ */ jsx45(
     "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__ */ jsx45("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ jsx45(UserIcon, { size: size === "sm" ? 13 : size === "lg" ? 18 : 15 })
+      children: showImage ? /* @__PURE__ */ jsx45("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials || /* @__PURE__ */ jsx45(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
     }
   );
 }
@@ -3961,11 +3995,12 @@ import { Children, cloneElement as cloneElement4, isValidElement as isValidEleme
 import { jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
 function AvatarGroup({ children, max = 4, size = "md", label, className }) {
   const avatars = Children.toArray(children).filter(isValidElement4);
+  const sizing = avatarSize(size);
   const shown = avatars.slice(0, max);
   const hidden = avatars.length - shown.length;
   return /* @__PURE__ */ jsxs39("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
     shown.map((avatar) => cloneElement4(avatar, { size })),
-    hidden > 0 ? /* @__PURE__ */ jsxs39("span", { className: cx("ow-avatar", `ow-avatar--${size}`, "ow-avatar--count"), children: [
+    hidden > 0 ? /* @__PURE__ */ jsxs39("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
       /* @__PURE__ */ jsxs39("span", { "aria-hidden": "true", children: [
         "+",
         hidden
@@ -3978,8 +4013,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__ */ jsxs39("div", { className: cx("ow-user", `ow-user--${size}`, className), children: [
+  return /* @__PURE__ */ jsxs39("div", { className: cx("ow-user", userSize(size), className), children: [
     /* @__PURE__ */ jsx46(Avatar, { name, src, size }),
     /* @__PURE__ */ jsxs39("div", { className: "ow-user__text", children: [
       /* @__PURE__ */ jsx46("span", { className: "ow-user__name", children: name }),