@openwarelabs/ui 0.1.0 → 0.2.0

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 }),