@flytedan/flytebot-design-system 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "flytedesk Design System — shared component library, tokens, and business-logic kits for flytedesk apps.",
   "type": "module",
   "license": "UNLICENSED",

package/styles/components.css

@@ -1789,6 +1789,9 @@
 .fd-stat-delta-down {
   color: var(--danger-text);
 }
+.fd-stat-delta-neutral {
+  color: var(--text-muted);
+}
 
 /* ============ Meter / progress ============ */
 .fd-meterbar {
@@ -3161,6 +3164,60 @@
   display: flex;
   align-items: center;
 }
+/* Layout utility modifiers for .fd-stack/.fd-row (SMS-7 Q1): the gap/wrap/
+ * align/min-width/flex values every consumer app was reaching for inline —
+ * pulled out here once so no app hand-rolls `style={{ gap, flexWrap,
+ * alignItems, ... }}` again. Gap sizes match the kit's existing spacing
+ * scale's smaller steps (8/12/16/20px); min-width sizes are named, not
+ * arbitrary, so a consumer picks "sm"/"md" rather than inventing a pixel
+ * value. */
+.fd-gap-xs {
+  gap: 8px;
+}
+.fd-gap-sm {
+  gap: 12px;
+}
+.fd-gap-md {
+  gap: 16px;
+}
+.fd-gap-lg {
+  gap: 20px;
+}
+.fd-wrap {
+  flex-wrap: wrap;
+}
+.fd-align-start {
+  align-items: flex-start;
+}
+.fd-align-center {
+  align-items: center;
+}
+.fd-align-end {
+  align-items: flex-end;
+}
+.fd-flex-1 {
+  flex: 1 1 0%;
+}
+.fd-min-w-sm {
+  min-width: 200px;
+}
+.fd-min-w-md {
+  min-width: 280px;
+}
+/* A full-viewport centered region — the loading/error shell around a
+ * signed-in app's auth gate, before the real chrome (Shell/Topbar) mounts. */
+.fd-center-viewport {
+  display: grid;
+  place-items: center;
+  height: 100vh;
+}
+/* An actions row above a page's main content, right-aligned — e.g. a single
+ * secondary action sitting above an EmptyState. */
+.fd-toolbar-end {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 16px 0;
+}
 .fd-grid-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));