@flytedan/flytebot-design-system 0.25.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flytedan/flytebot-design-system",
-  "version": "0.25.0",
+  "version": "0.27.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,67 @@
   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 are the spacing scale's own sm/md/lg/xl
+ * steps (tokens/space.css) — each class name is that token's tier, so
+ * `fd-gap-md` is always `var(--s-md)`, never a value only that class knows
+ * about. There is no bare `fd-gap-xs`: the scale's xs step (4px) hasn't had a
+ * consumer yet, so it isn't exposed as an unused utility (add it, at
+ * `var(--s-xs)`, the day something needs it). min-width sizes are named, not
+ * arbitrary, so a consumer picks "sm"/"md" rather than inventing a pixel
+ * value. */
+.fd-gap-sm {
+  gap: var(--s-sm);
+}
+.fd-gap-md {
+  gap: var(--s-md);
+}
+.fd-gap-lg {
+  gap: var(--s-lg);
+}
+.fd-gap-xl {
+  gap: var(--s-xl);
+}
+.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. Pure alignment only: a screen
+ * that also needs padding around the row applies it itself (a spacing token
+ * inline, e.g. `padding: var(--s-lg) var(--s-lg) 0`), since that padding is
+ * that screen's own layout choice, not something every consumer of this
+ * class wants baked in. */
+.fd-toolbar-end {
+  display: flex;
+  justify-content: flex-end;
+}
 .fd-grid-stats {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 175px), 1fr));