@shipfox/client-workspace-settings 21.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workspace-settings",
   "license": "MIT",
-  "version": "21.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -29,10 +29,10 @@
     "@tanstack/react-form": "^1.32.0",
     "@shipfox/api-workspaces-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "21.0.0",
-    "@shipfox/client-shell": "21.0.0",
-    "@shipfox/react-ui": "2.0.0",
-    "@shipfox/client-ui": "21.0.0"
+    "@shipfox/client-auth": "22.0.0",
+    "@shipfox/client-shell": "22.0.0",
+    "@shipfox/react-ui": "2.1.0",
+    "@shipfox/client-ui": "22.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/members/workspace-members-section.tsx

@@ -82,10 +82,12 @@ function MembersSection({
         </Text>
       </div>
 
-      {query.isPending ? <TableSkeleton rows={3} cols={3} /> : null}
+      {query.isPending ? <TableSkeleton rows={3} cols={3} label="Loading members" /> : null}
 
       {query.isError && query.data === undefined ? (
-        <QueryLoadError query={query} subject="members" />
+        <Panel>
+          <QueryLoadError query={query} subject="members" variant="panel" />
+        </Panel>
       ) : null}
 
       {members.length > 0 ? (
@@ -227,13 +229,19 @@ function PendingInvitationsSection({
         />
       </div>
 
-      {query.isPending ? <TableSkeleton rows={2} cols={3} /> : null}
+      {query.isPending ? <TableSkeleton rows={2} cols={3} label="Loading invitations" /> : null}
 
       {query.isError && query.data === undefined ? (
-        <QueryLoadError query={query} subject="invitations" />
+        <Panel>
+          <QueryLoadError query={query} subject="invitations" variant="panel" />
+        </Panel>
       ) : null}
 
-      {query.data !== undefined && invitations.length === 0 ? <EmptyInvitations /> : null}
+      {query.data !== undefined && invitations.length === 0 ? (
+        <Panel>
+          <EmptyInvitations />
+        </Panel>
+      ) : null}
 
       {invitations.length > 0 ? (
         <Panel>
@@ -458,22 +466,26 @@ function EmptyInvitations() {
       icon="mailLine"
       title="No pending invitations."
       description="Invite someone above to grow your workspace."
+      variant="panel"
     />
   );
 }
 
-function TableSkeleton({rows, cols}: {rows: number; cols: number}) {
+function TableSkeleton({rows, cols, label}: {rows: number; cols: number; label: string}) {
   return (
-    <div className="flex flex-col gap-cluster">
+    <Panel role="status" aria-label={label} className="divide-y">
       {Array.from({length: rows}).map((_, rowIdx) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder rows
-        <div key={rowIdx} className="grid grid-cols-3 gap-group">
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder rows
+          key={rowIdx}
+          className="grid min-h-44 grid-cols-3 gap-group px-row py-row"
+        >
           {Array.from({length: cols}).map((__, colIdx) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder cells
             <Skeleton key={colIdx} className="h-20" />
           ))}
         </div>
       ))}
-    </div>
+    </Panel>
   );
 }