@shipfox/client-secrets 14.0.0 → 16.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-secrets",
   "license": "MIT",
-  "version": "14.0.0",
+  "version": "16.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,11 +27,11 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/client-api": "6.0.1",
     "@shipfox/api-secrets-dto": "12.0.0",
-    "@shipfox/client-ui": "14.0.0",
-    "@shipfox/react-ui": "0.5.0",
-    "@shipfox/client-shell": "14.0.0"
+    "@shipfox/client-api": "6.0.1",
+    "@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/delete-entry-dialog.tsx

@@ -33,7 +33,7 @@ export function DeleteEntryDialog({
             Delete <strong>{entryKey}</strong>?
           </ModalTitle>
         </ModalHeader>
-        <ModalBody className="gap-16">
+        <ModalBody className="gap-group">
           <Text size="sm">
             Workflows that reference <strong>{entryKey}</strong> will fail at their next run.
           </Text>

package/src/components/form-shell.tsx

@@ -10,7 +10,7 @@ export function FormBody({children, className}: {children: ReactNode; className?
   return (
     <div
       className={cn(
-        'flex w-full flex-col items-start gap-16 bg-background-neutral-base px-24 pt-16 pb-24',
+        'flex w-full flex-col items-start gap-group bg-background-neutral-base px-frame pt-[16px] pb-panel',
         className,
       )}
     >
@@ -23,7 +23,7 @@ export function FormFooter({children}: {children: ReactNode}) {
   return (
     <div className="flex w-full shrink-0 flex-col">
       <div className="h-[1px] w-full bg-border-neutral-strong" />
-      <div className="flex w-full items-center justify-end gap-16 bg-background-neutral-base px-24 py-16">
+      <div className="flex w-full items-center justify-end gap-group bg-background-neutral-base px-frame py-[16px]">
         {children}
       </div>
     </div>

package/src/components/secret-form.tsx

@@ -76,7 +76,7 @@ export function SecretForm({
       <FormBody>
         <form
           id={SECRET_FORM_ID}
-          className="flex w-full flex-col gap-16"
+          className="flex w-full flex-col gap-group"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();
@@ -125,7 +125,9 @@ export function SecretForm({
                 <div className="relative">
                   <FormFieldTextarea
                     className={
-                      showValue ? 'pr-32 font-code' : 'pr-32 font-code [-webkit-text-security:disc]'
+                      showValue
+                        ? 'pr-[32px] font-code'
+                        : 'pr-[32px] font-code [-webkit-text-security:disc]'
                     }
                     autoComplete="off"
                     spellCheck={false}

package/src/components/store-section-shell.tsx

@@ -10,7 +10,7 @@ export function StoreRowsSkeleton({label}: {label: string}) {
     <div role="status" aria-label={label} className={STORE_SURFACE_CLASS}>
       <ul className="divide-y divide-border-neutral-base">
         {[0, 1, 2].map((row) => (
-          <li key={row} className="flex items-center gap-12 px-16 py-12">
+          <li key={row} className="flex items-center gap-cluster px-row py-row">
             <Skeleton className="h-16 w-140" />
             <Skeleton className="h-16 w-96" />
             <Skeleton className="ml-auto h-14 w-80 shrink-0" />

package/src/components/variable-form.tsx

@@ -94,7 +94,7 @@ export function VariableForm({
       <FormBody>
         <form
           id={VARIABLE_FORM_ID}
-          className="flex w-full flex-col gap-16"
+          className="flex w-full flex-col gap-group"
           noValidate
           onSubmit={(event) => {
             event.preventDefault();

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

@@ -54,9 +54,9 @@ export function WorkspaceSecretsSection({workspaceId}: {workspaceId: string}) {
 
   return (
     <RelativeTimeProvider>
-      <section className="flex flex-col gap-16" aria-label="Secrets">
-        <div className="flex items-start justify-between gap-16">
-          <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-group" aria-label="Secrets">
+        <div className="flex items-start justify-between gap-group">
+          <div className="flex flex-col gap-tight">
             <Header variant="h3">Secrets</Header>
             <Text size="sm" className="text-foreground-neutral-muted">
               {SECRETS_DESCRIPTION}
@@ -70,13 +70,13 @@ export function WorkspaceSecretsSection({workspaceId}: {workspaceId: string}) {
         {secretsQuery.isPending ? <StoreRowsSkeleton label="Loading secrets" /> : null}
 
         {secretsQuery.isError && secretsQuery.data === undefined ? (
-          <StoreSurface className="px-16">
+          <StoreSurface className="px-row">
             <QueryLoadError query={secretsQuery} subject="secrets" />
           </StoreSurface>
         ) : null}
 
         {secretsQuery.data !== undefined && secrets.length === 0 ? (
-          <StoreSurface className="px-16">
+          <StoreSurface className="px-row">
             <EmptyState
               icon="keyLine"
               title="No secrets yet"

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

@@ -54,9 +54,9 @@ export function WorkspaceVariablesSection({workspaceId}: {workspaceId: string})
 
   return (
     <RelativeTimeProvider>
-      <section className="flex flex-col gap-16" aria-label="Variables">
-        <div className="flex items-start justify-between gap-16">
-          <div className="flex flex-col gap-4">
+      <section className="flex flex-col gap-group" aria-label="Variables">
+        <div className="flex items-start justify-between gap-group">
+          <div className="flex flex-col gap-tight">
             <Header variant="h3">Variables</Header>
             <Text size="sm" className="text-foreground-neutral-muted">
               {VARIABLES_DESCRIPTION}
@@ -70,13 +70,13 @@ export function WorkspaceVariablesSection({workspaceId}: {workspaceId: string})
         {variablesQuery.isPending ? <StoreRowsSkeleton label="Loading variables" /> : null}
 
         {variablesQuery.isError && variablesQuery.data === undefined ? (
-          <StoreSurface className="px-16">
+          <StoreSurface className="px-row">
             <QueryLoadError query={variablesQuery} subject="variables" />
           </StoreSurface>
         ) : null}
 
         {variablesQuery.data !== undefined && variables.length === 0 ? (
-          <StoreSurface className="px-16">
+          <StoreSurface className="px-row">
             <EmptyState
               icon="bracesLine"
               title="No variables yet"