@spree/dashboard-ui 1.0.0-rc.6 → 6.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 Spree Dashboard design system. Shadcn primitives + headless composed components + design tokens.
 
-> **Developer Preview.** APIs may change between 0.x releases. Docs: [React Dashboard](https://spreecommerce.org/docs/developer/dashboard/overview).
+Docs: [React Dashboard](https://spreecommerce.org/docs/developer/dashboard/overview).
 
 ## What's inside
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@spree/dashboard-ui",
   "license": "MIT",
-  "version": "1.0.0-rc.6",
-  "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup. Developer Preview.",
+  "version": "6.0.0",
+  "description": "Spree Dashboard design system — shadcn primitives, headless composed components, and design tokens. Source-only package; consumers compile via their own Vite/Tailwind setup.",
   "author": "Vendo Connect Inc.",
   "homepage": "https://spreecommerce.org",
   "repository": {
@@ -86,7 +86,7 @@
     "shadcn": "4.22.1",
     "tailwind-merge": "3.7.0",
     "tw-animate-css": "1.4.0",
-    "@spree/core": "^0.3.0"
+    "@spree/core": "^6.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/spree/form-actions.tsx

@@ -39,9 +39,11 @@ export function FormSaveButton<TFieldValues extends FieldValues>({
   return (
     <Button type="submit" disabled={!(isDirty || dirty) || isSubmitting}>
       {isSubmitting && <Loader2Icon className="animate-spin" />}
-      {isSubmitting
-        ? (savingLabel ?? t('admin.actions.saving'))
-        : (label ?? t('admin.actions.save'))}
+      <span>
+        {isSubmitting
+          ? (savingLabel ?? t('admin.actions.saving'))
+          : (label ?? t('admin.actions.save'))}
+      </span>
     </Button>
   )
 }

package/src/spree/icons.ts

@@ -169,6 +169,7 @@ export {
   UsersRoundIcon,
   WarehouseIcon,
   WebhookIcon,
+  WrenchIcon,
   X,
   XCircleIcon,
   XIcon,

package/src/ui/badge.tsx

@@ -188,6 +188,15 @@ const statusToneMap: Record<string, StatusTone> = {
   // same green/red the rest of the app uses saves them parsing the word.
   true: 'success',
   false: 'destructive',
+  // Maintenance task runs: amber while a worker holds or is about to release
+  // the run, blue while it waits for one.
+  enqueued: 'info',
+  running: 'warning',
+  interrupted: 'info',
+  cancelling: 'warning',
+  cancelled: 'destructive',
+  succeeded: 'success',
+  errored: 'destructive',
 } satisfies Record<BuiltInStatus, StatusTone> & Record<string, StatusTone>
 
 // Dot fills, by tone. These read the same `--status-*` ramps the tinted Badge

package/src/ui/tabs.tsx

@@ -41,7 +41,17 @@ function TabsList({
   )
 }
 
-function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Tab>) {
+/**
+ * A tab. Pass `count` to append a tally — the number of steps outstanding, or
+ * of records in the panel — which is what tells an operator whether a tab is
+ * worth opening before they open it.
+ */
+function TabsTrigger({
+  className,
+  children,
+  count,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Tab> & { count?: number }) {
   return (
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
@@ -67,7 +77,12 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
         className,
       )}
       {...props}
-    />
+    >
+      {children}
+      {count !== undefined && (
+        <span className="rounded-full bg-muted px-1.5 py-0.5 text-xs tabular-nums">{count}</span>
+      )}
+    </TabsPrimitive.Tab>
   )
 }