@shipfox/client-workspace-settings 14.0.0 → 16.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workspace-settings",
   "license": "MIT",
-  "version": "14.0.0",
+  "version": "16.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": "14.0.0",
-    "@shipfox/client-shell": "14.0.0",
-    "@shipfox/client-ui": "14.0.0",
-    "@shipfox/react-ui": "0.5.0"
+    "@shipfox/client-auth": "16.0.0",
+    "@shipfox/client-shell": "16.0.0",
+    "@shipfox/client-ui": "16.0.0",
+    "@shipfox/react-ui": "1.1.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

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

@@ -52,7 +52,7 @@ export function WorkspaceMembersSettingsSection({
   workspaceName: string;
 }) {
   return (
-    <div className="flex min-w-0 flex-col gap-32">
+    <div className="flex min-w-0 flex-col gap-region">
       <MembersSection workspaceId={workspaceId} workspaceName={workspaceName} />
       <PendingInvitationsSection workspaceId={workspaceId} workspaceName={workspaceName} />
     </div>
@@ -71,8 +71,8 @@ function MembersSection({
   const members = query.data ?? [];
 
   return (
-    <section className="flex flex-col gap-16">
-      <div className="flex flex-col gap-4">
+    <section className="flex flex-col gap-group">
+      <div className="flex flex-col gap-tight">
         <Header variant="h3">Members</Header>
         <Text size="sm" className="text-foreground-neutral-muted">
           {query.isPending
@@ -206,9 +206,9 @@ function PendingInvitationsSection({
   const [inviteOpen, setInviteOpen] = useState(false);
 
   return (
-    <section className="flex flex-col gap-16">
-      <div className="flex items-center justify-between gap-16">
-        <div className="flex flex-col gap-4">
+    <section className="flex flex-col gap-group">
+      <div className="flex items-center justify-between gap-group">
+        <div className="flex flex-col gap-tight">
           <Header variant="h3">Pending invitations</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             {query.isPending
@@ -285,7 +285,7 @@ function InvitationRow({
       </TableCell>
       <TableCell>{invitation.invitedByDisplay ?? 'N/A'}</TableCell>
       <TableCell>
-        <div className="flex items-center gap-8">
+        <div className="flex items-center gap-inline">
           <Text size="sm">{formatDate(invitation.expiresAt)}</Text>
           {expiry === 'expires-soon' ? <Badge variant="warning">Soon</Badge> : null}
           {expiry === 'expired' ? <Badge variant="error">Expired</Badge> : null}
@@ -390,7 +390,7 @@ function InviteMemberModal({
         <ModalHeader>
           <Text size="lg">Invite a member</Text>
         </ModalHeader>
-        <ModalBody className="gap-16">
+        <ModalBody className="gap-group">
           {formError ? (
             <Callout role="alert" type="error">
               {formError}
@@ -398,7 +398,7 @@ function InviteMemberModal({
           ) : null}
           <form
             id="invite-member-form"
-            className="flex flex-col gap-16"
+            className="flex flex-col gap-group"
             noValidate
             onSubmit={(event) => {
               event.preventDefault();
@@ -459,10 +459,10 @@ function EmptyInvitations() {
 
 function TableSkeleton({rows, cols}: {rows: number; cols: number}) {
   return (
-    <div className="flex flex-col gap-12">
+    <div className="flex flex-col gap-cluster">
       {Array.from({length: rows}).map((_, rowIdx) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder rows
-        <div key={rowIdx} className="grid grid-cols-3 gap-16">
+        <div key={rowIdx} className="grid grid-cols-3 gap-group">
           {Array.from({length: cols}).map((__, colIdx) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder cells
             <Skeleton key={colIdx} className="h-20" />

package/src/pages/general-settings-page.tsx

@@ -94,8 +94,8 @@ function WorkspaceGeneralForm({workspace}: {workspace: ReturnType<typeof useActi
 
   return (
     <>
-      <div className="flex min-w-0 flex-col gap-24">
-        <header className="flex flex-col gap-6">
+      <div className="flex min-w-0 flex-col gap-section">
+        <header className="flex flex-col gap-inline">
           <Header variant="h1">General</Header>
           <Text size="sm" className="text-foreground-neutral-muted">
             Update the workspace name and the slug used in its URLs.
@@ -109,7 +109,7 @@ function WorkspaceGeneralForm({workspace}: {workspace: ReturnType<typeof useActi
         ) : null}
 
         <form
-          className="flex max-w-[560px] flex-col gap-16"
+          className="flex max-w-[560px] flex-col gap-group"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();