@shipfox/client-auth 13.0.0 → 14.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-auth",
   "license": "MIT",
-  "version": "13.0.0",
+  "version": "14.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -39,10 +39,10 @@
     "@shipfox/api-auth-dto": "12.0.0",
     "@shipfox/api-workspaces-dto": "12.0.0",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-invitations": "13.0.0",
-    "@shipfox/client-shell": "13.0.0",
-    "@shipfox/client-ui": "13.0.0",
-    "@shipfox/react-ui": "0.4.0"
+    "@shipfox/client-invitations": "14.0.1",
+    "@shipfox/client-shell": "14.0.1",
+    "@shipfox/client-ui": "14.0.1",
+    "@shipfox/react-ui": "1.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/email-code-verification.tsx

@@ -127,7 +127,7 @@ export function EmailCodeVerification({
           This verification code has expired. Use another email to try again.
         </Callout>
       ) : null}
-      <form className="flex flex-col gap-8" noValidate onSubmit={submit}>
+      <form className="flex flex-col gap-inline" noValidate onSubmit={submit}>
         <FormField label="Verification code" id="verification-code" error={codeError}>
           <FormFieldInput
             autoComplete="one-time-code"

package/src/components/password-login-form.tsx

@@ -74,7 +74,7 @@ export function PasswordLoginForm({children, invitationEmail}: PasswordLoginForm
 
   return (
     <form
-      className="flex flex-col gap-18"
+      className="flex flex-col gap-group"
       noValidate
       onSubmit={(event) => {
         event.preventDefault();

package/src/components/workspace-switcher.tsx

@@ -45,7 +45,7 @@ export function WorkspaceSwitcher({activeWorkspaceId, onSelect}: WorkspaceSwitch
     <Command>
       <CommandInput placeholder="Search workspaces..." />
       <CommandList className="max-h-none overflow-visible overflow-y-visible p-0">
-        <div className="max-h-300 overflow-y-auto overflow-x-hidden p-4 scrollbar">
+        <div className="max-h-300 overflow-y-auto overflow-x-hidden p-menu-surface scrollbar">
           <CommandEmpty>No workspaces found.</CommandEmpty>
           <CommandGroup heading="Workspaces">
             {workspaces.map((workspace) => (
@@ -57,7 +57,7 @@ export function WorkspaceSwitcher({activeWorkspaceId, onSelect}: WorkspaceSwitch
               >
                 <Icon
                   name="check"
-                  className={`size-16 mr-8 ${
+                  className={`size-16 ${
                     activeWorkspaceId === workspace.id ? 'opacity-100' : 'opacity-0'
                   }`}
                 />
@@ -67,7 +67,7 @@ export function WorkspaceSwitcher({activeWorkspaceId, onSelect}: WorkspaceSwitch
           </CommandGroup>
         </div>
         <CommandSeparator alwaysRender className="mx-0" />
-        <CommandGroup forceMount className="p-4">
+        <CommandGroup forceMount className="p-menu-surface">
           <CommandItem value="__create" onSelect={handleCreate} forceMount>
             <Icon name="addLine" className="size-16" />
             Create workspace

package/src/pages/login-page.tsx

@@ -28,7 +28,7 @@ export function LoginPage() {
   return (
     <AuthShell title={headerTitle} description={headerDescription}>
       <PasswordLoginForm invitationEmail={invitationPending?.email}>
-        <ButtonLink asChild variant="subtle" className="-mt-8 self-end">
+        <ButtonLink asChild variant="subtle" className="-mt-inline self-end">
           <Link to="/auth/reset">Forgot password?</Link>
         </ButtonLink>
       </PasswordLoginForm>

package/src/pages/password-reset-page.tsx

@@ -95,7 +95,7 @@ function PasswordResetRequest() {
   return (
     <AuthShell title="Reset your password" description="Enter your email to get a reset link.">
       <form
-        className="flex flex-col gap-18"
+        className="flex flex-col gap-group"
         noValidate
         onSubmit={(event) => {
           event.preventDefault();
@@ -174,7 +174,7 @@ function PasswordResetConfirm({token}: {token: string}) {
   return (
     <AuthShell title="Set a new password" description="Choose a password for your Shipfox account.">
       <form
-        className="flex flex-col gap-18"
+        className="flex flex-col gap-group"
         noValidate
         onSubmit={(event) => {
           event.preventDefault();

package/src/pages/signup-page.tsx

@@ -206,7 +206,7 @@ export function SignupPage() {
         description="Your account was created, but we could not finish signing you in."
       >
         <Callout role="alert" type="error">
-          <div className="flex flex-col gap-8">
+          <div className="flex flex-col gap-inline">
             <Text size="sm">
               Try again to finish joining your workspace. You can safely retry this step.
             </Text>
@@ -285,7 +285,7 @@ export function SignupPage() {
   return (
     <AuthShell title={headerTitle} description={headerDescription}>
       <form
-        className="flex flex-col gap-18"
+        className="flex flex-col gap-group"
         noValidate
         onSubmit={(event) => {
           event.preventDefault();

package/src/pages/workspace-onboarding-page.tsx

@@ -78,10 +78,10 @@ export function WorkspaceOnboardingPage() {
   });
 
   return (
-    <main className="min-h-screen bg-background-subtle-base px-24 py-32 max-[520px]:px-16">
-      <div className="mx-auto flex min-h-[calc(100vh-64px)] w-full max-w-[1120px] flex-col gap-24">
+    <main className="min-h-screen bg-background-subtle-base px-frame py-frame max-[520px]:px-row">
+      <div className="mx-auto flex min-h-[calc(100vh-64px)] w-full max-w-[1120px] flex-col gap-section">
         <header className="flex items-center justify-between">
-          <div className="flex items-center gap-10">
+          <div className="flex items-center gap-inline">
             <div className="flex size-36 items-center justify-center rounded-8 border border-border-neutral-base bg-background-neutral-base shadow-button-neutral">
               <Icon name="shipfox" className="size-24 text-background-highlight-interactive" />
             </div>
@@ -91,7 +91,7 @@ export function WorkspaceOnboardingPage() {
           </div>
         </header>
 
-        <section className="grid flex-1 items-center gap-32 lg:grid-cols-[minmax(0,440px)_minmax(0,1fr)]">
+        <section className="grid flex-1 items-center gap-region lg:grid-cols-[minmax(0,440px)_minmax(0,1fr)]">
           <form
             className="relative z-10 w-full"
             noValidate
@@ -102,8 +102,8 @@ export function WorkspaceOnboardingPage() {
               void form.handleSubmit();
             }}
           >
-            <Card className="gap-20 p-24 shadow-button-neutral">
-              <CardHeader className="gap-8">
+            <Card className="gap-section p-panel shadow-button-neutral">
+              <CardHeader className="gap-inline">
                 <CardTitle id="workspace-onboarding-title" variant="h1">
                   Create your workspace
                 </CardTitle>
@@ -116,7 +116,7 @@ export function WorkspaceOnboardingPage() {
                 </Callout>
               ) : null}
 
-              <CardContent className="flex flex-col gap-8">
+              <CardContent className="flex flex-col gap-inline">
                 <form.Field
                   name="name"
                   validators={{
@@ -201,11 +201,11 @@ export function WorkspaceOnboardingPage() {
             </Card>
           </form>
 
-          <div className="hidden flex-col gap-18 lg:flex" aria-hidden="true">
-            <div className="grid grid-cols-4 gap-12">
+          <div className="hidden flex-col gap-group lg:flex" aria-hidden="true">
+            <div className="grid grid-cols-4 gap-cluster">
               {previewMetrics.map((metric) => (
                 <div
-                  className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-14 shadow-button-neutral"
+                  className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact shadow-button-neutral"
                   key={metric.label}
                 >
                   <Text size="xs" className="text-foreground-neutral-muted">
@@ -217,18 +217,18 @@ export function WorkspaceOnboardingPage() {
                 </div>
               ))}
             </div>
-            <div className="grid grid-cols-2 gap-18">
+            <div className="grid grid-cols-2 gap-group">
               <PreviewPanel title="Performance over time" />
               <PreviewPanel title="Duration distribution" bars />
             </div>
-            <div className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 shadow-button-neutral">
+            <div className="flex flex-col gap-cluster rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact shadow-button-neutral">
               <Text size="sm" bold>
                 Jobs breakdown
               </Text>
-              <div className="mt-14 flex flex-col gap-10">
+              <div className="flex flex-col gap-inline">
                 {[0, 1, 2, 3].map((row) => (
                   <div
-                    className="grid grid-cols-[1fr_80px_80px] gap-12 border-t border-border-neutral-base pt-10"
+                    className="grid grid-cols-[1fr_80px_80px] gap-cluster border-t border-border-neutral-base pt-[10px]"
                     key={row}
                   >
                     <div className="h-12 rounded-full bg-background-neutral-disabled" />
@@ -247,11 +247,11 @@ export function WorkspaceOnboardingPage() {
 
 function PreviewPanel({title, bars = false}: {title: string; bars?: boolean}) {
   return (
-    <div className="rounded-8 border border-border-neutral-base bg-background-neutral-base p-16 shadow-button-neutral">
+    <div className="flex flex-col gap-group rounded-8 border border-border-neutral-base bg-background-neutral-base p-panel-compact shadow-button-neutral">
       <Text size="sm" bold>
         {title}
       </Text>
-      <div className="mt-16 flex h-[220px] items-end gap-8 border-b border-l border-border-neutral-base px-12 pb-10">
+      <div className="flex h-[220px] items-end gap-inline border-b border-l border-border-neutral-base px-row pb-[10px]">
         {previewBars.map((bar) => (
           <div
             className={