@david-richard/notify-ds 1.0.2 → 1.0.4

package/dist/index.d.mts

@@ -180,13 +180,17 @@ interface SelectorGroupProps {
 declare function SelectorGroup({ children, className }: SelectorGroupProps): react_jsx_runtime.JSX.Element;
 
 /**
- * TabBar — Qu Notify segmented tab selector.
+ * TabBar — Qu Notify top-level tab selector (L1).
  *
  * Visual spec:
- *   Container: gray-100 (#DEDEDE) pill, 4px padding all sides, full-radius
- *   Selected tab: black fill, white text, full-radius pill
- *   Unselected tab: transparent, primary text
- *   Font: Inter Medium 14px
+ *   Layout: standalone pills sitting in a row with gaps (no outer container).
+ *   Selected tab:   black fill, white text, full-radius pill.
+ *   Unselected tab: gray-100 fill, primary text, full-radius pill.
+ *   Font: Inter Medium 14px.
+ *
+ * Differs from Switcher: TabBar is for primary page-level navigation where
+ * each tab reads as its own standalone affordance. Switcher is for inline
+ * filters where the segments share an outer track.
  *
  * Usage (uncontrolled):
  *   <TabBar tabs={["Sales", "Labor", "Store"]} defaultValue="Sales" />
@@ -236,18 +240,18 @@ interface TabPanelProps {
 declare function TabPanel({ children, className }: TabPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Switcher — Qu Notify segmented control (iOS-style).
+ * Switcher — Qu Notify segmented control (L2 — inline data filter).
  *
  * Visual spec:
- *   Container: gray-100 (#DEDEDE) bg, 8px corner radius, 3px padding
- *   Selected segment: black fill, white text, 6px corner radius
- *   Unselected segment: transparent, secondary text (gray)
+ *   Container: gray-100 (#DEDEDE) bg, full-radius pill, 3px padding
+ *   Selected segment: black fill, white text, full-radius pill
+ *   Unselected segment: transparent, primary text (black)
  *   Font: Inter Medium 14px
  *
  * Differs from TabBar:
- *   - TabBar: full-radius pill, used for primary page-level navigation
- *   - Switcher: square-ish corners (8px), used for inline data filters
- *     (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
+ *   - TabBar: standalone pill tabs, no outer container — primary page navigation
+ *   - Switcher: outer pill container holding inner pill segments — inline
+ *     data filters (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
  *
  * Usage (uncontrolled):
  *   <Switcher segments={["Day", "Week", "Month"]} defaultValue="Week" />
@@ -364,21 +368,26 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
 }
 declare function Badge({ variant, size, icon, children, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 /**
- * TrendBadge — convenience wrapper that picks variant from sign of the value.
+ * TrendBadge — inline trend indicator. Bare colored text + arrow, no pill bg.
+ *
+ * Used inside MetricTile and anywhere a percent delta needs to appear next to
+ * a primary value. The bare style keeps the trend visually subordinate to the
+ * value above it (the headline number is the hero; the trend is supporting
+ * commentary). For a pill-shaped status label, use <Badge> directly.
  *
  * Usage:
- *   <TrendBadge value={11.8} />   → green "+11.8%"
- *   <TrendBadge value={-5.6} />   → red "−5.6%"
+ *   <TrendBadge value={11.8} />   → green "↗ +11.8%"
+ *   <TrendBadge value={-5.6} />   → red "↘ −5.6%"
  *   <TrendBadge value={0} />      → neutral "0.0%"
  */
-interface TrendBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+interface TrendBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     value: number;
     /** Number of decimal places (default: 1) */
     decimals?: number;
     /** Show arrow icon (default: true) */
     showArrow?: boolean;
 }
-declare function TrendBadge({ value, decimals, showArrow, ...props }: TrendBadgeProps): react_jsx_runtime.JSX.Element;
+declare function TrendBadge({ value, decimals, showArrow, className, ...props }: TrendBadgeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MetricTile — the core data display unit of the Qu Notify dashboard.

package/dist/index.d.ts

@@ -180,13 +180,17 @@ interface SelectorGroupProps {
 declare function SelectorGroup({ children, className }: SelectorGroupProps): react_jsx_runtime.JSX.Element;
 
 /**
- * TabBar — Qu Notify segmented tab selector.
+ * TabBar — Qu Notify top-level tab selector (L1).
  *
  * Visual spec:
- *   Container: gray-100 (#DEDEDE) pill, 4px padding all sides, full-radius
- *   Selected tab: black fill, white text, full-radius pill
- *   Unselected tab: transparent, primary text
- *   Font: Inter Medium 14px
+ *   Layout: standalone pills sitting in a row with gaps (no outer container).
+ *   Selected tab:   black fill, white text, full-radius pill.
+ *   Unselected tab: gray-100 fill, primary text, full-radius pill.
+ *   Font: Inter Medium 14px.
+ *
+ * Differs from Switcher: TabBar is for primary page-level navigation where
+ * each tab reads as its own standalone affordance. Switcher is for inline
+ * filters where the segments share an outer track.
  *
  * Usage (uncontrolled):
  *   <TabBar tabs={["Sales", "Labor", "Store"]} defaultValue="Sales" />
@@ -236,18 +240,18 @@ interface TabPanelProps {
 declare function TabPanel({ children, className }: TabPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Switcher — Qu Notify segmented control (iOS-style).
+ * Switcher — Qu Notify segmented control (L2 — inline data filter).
  *
  * Visual spec:
- *   Container: gray-100 (#DEDEDE) bg, 8px corner radius, 3px padding
- *   Selected segment: black fill, white text, 6px corner radius
- *   Unselected segment: transparent, secondary text (gray)
+ *   Container: gray-100 (#DEDEDE) bg, full-radius pill, 3px padding
+ *   Selected segment: black fill, white text, full-radius pill
+ *   Unselected segment: transparent, primary text (black)
  *   Font: Inter Medium 14px
  *
  * Differs from TabBar:
- *   - TabBar: full-radius pill, used for primary page-level navigation
- *   - Switcher: square-ish corners (8px), used for inline data filters
- *     (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
+ *   - TabBar: standalone pill tabs, no outer container — primary page navigation
+ *   - Switcher: outer pill container holding inner pill segments — inline
+ *     data filters (e.g. Day / Week / Month, Net / Gross, All / Open / Closed)
  *
  * Usage (uncontrolled):
  *   <Switcher segments={["Day", "Week", "Month"]} defaultValue="Week" />
@@ -364,21 +368,26 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
 }
 declare function Badge({ variant, size, icon, children, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 /**
- * TrendBadge — convenience wrapper that picks variant from sign of the value.
+ * TrendBadge — inline trend indicator. Bare colored text + arrow, no pill bg.
+ *
+ * Used inside MetricTile and anywhere a percent delta needs to appear next to
+ * a primary value. The bare style keeps the trend visually subordinate to the
+ * value above it (the headline number is the hero; the trend is supporting
+ * commentary). For a pill-shaped status label, use <Badge> directly.
  *
  * Usage:
- *   <TrendBadge value={11.8} />   → green "+11.8%"
- *   <TrendBadge value={-5.6} />   → red "−5.6%"
+ *   <TrendBadge value={11.8} />   → green "↗ +11.8%"
+ *   <TrendBadge value={-5.6} />   → red "↘ −5.6%"
  *   <TrendBadge value={0} />      → neutral "0.0%"
  */
-interface TrendBadgeProps extends Omit<BadgeProps, "variant" | "children"> {
+interface TrendBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     value: number;
     /** Number of decimal places (default: 1) */
     decimals?: number;
     /** Show arrow icon (default: true) */
     showArrow?: boolean;
 }
-declare function TrendBadge({ value, decimals, showArrow, ...props }: TrendBadgeProps): react_jsx_runtime.JSX.Element;
+declare function TrendBadge({ value, decimals, showArrow, className, ...props }: TrendBadgeProps): react_jsx_runtime.JSX.Element;
 
 /**
  * MetricTile — the core data display unit of the Qu Notify dashboard.

package/dist/index.js

@@ -518,7 +518,7 @@ var Toggle = React4__namespace.forwardRef(
 Toggle.displayName = "Toggle";
 var selectorVariants = classVarianceAuthority.cva(
   [
-    "inline-flex items-center gap-1.5 rounded-full select-none cursor-pointer",
+    "inline-flex items-center gap-1.5 rounded-xl select-none cursor-pointer",
     "py-2 pl-3.5 pr-2.5",
     "font-['Red_Hat_Text'] text-[14px] font-medium leading-tight",
     "border-[1.5px] transition-colors duration-[120ms]",
@@ -639,8 +639,7 @@ function TabBar({
       role: "tablist",
       "aria-label": "Tabs",
       className: cn(
-        "inline-flex items-center gap-1 rounded-full p-1",
-        "bg-[var(--color-inactive,#DEDEDE)]",
+        "inline-flex items-center gap-2",
         stretch && "w-full",
         className
       ),
@@ -659,7 +658,7 @@ function TabBar({
               "outline-none transition-colors duration-[120ms]",
               "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-1",
               stretch && "flex-1 text-center",
-              isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-text-primary,#000)] hover:bg-black/5"
+              isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-[var(--color-inactive,#DEDEDE)] text-[var(--color-text-primary,#000)] hover:brightness-95"
             ),
             children: tab
           },
@@ -710,7 +709,7 @@ function Switcher({
     {
       role: "group",
       className: cn(
-        "inline-flex items-center gap-0.5 rounded-[8px] p-[3px]",
+        "inline-flex items-center gap-0.5 rounded-full p-[3px]",
         "bg-[var(--color-inactive,#DEDEDE)]",
         stretch && "w-full",
         className
@@ -728,13 +727,13 @@ function Switcher({
             "aria-checked": isSelected,
             onClick: () => handleSelect(val),
             className: cn(
-              "inline-flex items-center justify-center gap-1.5 rounded-[6px]",
+              "inline-flex items-center justify-center gap-1.5 rounded-full",
               "px-4 py-[7px] cursor-pointer select-none",
               "font-['Inter'] text-[14px] font-medium leading-tight",
               "outline-none transition-colors duration-[120ms]",
               "focus-visible:ring-2 focus-visible:ring-[var(--color-ring,#40CCF2)] focus-visible:ring-offset-1",
               stretch && "flex-1",
-              isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-text-secondary,#6B7280)] hover:text-[var(--color-text-primary,#000)]"
+              isSelected ? "bg-[var(--color-foreground,#000)] text-white" : "bg-transparent text-[var(--color-text-primary,#000)] hover:bg-black/5"
             ),
             children: [
               icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 [&_svg]:size-[14px]", children: icon }),
@@ -874,11 +873,27 @@ function Badge({ variant, size, icon, children, className, ...props }) {
     children
   ] });
 }
-function TrendBadge({ value, decimals = 1, showArrow = true, ...props }) {
-  const variant = value > 0 ? "success" : value < 0 ? "error" : "neutral";
+function TrendBadge({ value, decimals = 1, showArrow = true, className, ...props }) {
+  const colorClass = value > 0 ? "text-[var(--color-success,#16A34A)]" : value < 0 ? "text-[var(--color-destructive,#EF2149)]" : "text-[var(--color-text-tertiary,#6B7280)]";
   const formatted = `${value > 0 ? "+" : ""}${value.toFixed(decimals)}%`;
   const arrow = showArrow ? value > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ArrowUpIcon, {}) : value < 0 ? /* @__PURE__ */ jsxRuntime.jsx(ArrowDownIcon, {}) : null : null;
-  return /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant, icon: arrow, ...props, children: formatted });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1 whitespace-nowrap select-none",
+        "font-['Inter'] text-[12px] font-medium leading-tight",
+        "[&_svg]:size-3",
+        colorClass,
+        className
+      ),
+      ...props,
+      children: [
+        arrow,
+        formatted
+      ]
+    }
+  );
 }
 function ArrowUpIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2,7 5,3 8,7" }) });
@@ -943,7 +958,7 @@ function MetricTile({
               children: !loading && label
             }
           ),
-          icon && !loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[var(--color-text-tertiary,#6B7280)] [&_svg]:size-4", "aria-hidden": "true", children: icon })
+          !loading && (icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[var(--color-text-tertiary,#6B7280)] [&_svg]:size-4", "aria-hidden": "true", children: icon }) : onClick ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[var(--color-text-tertiary,#6B7280)] [&_svg]:size-3.5", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}) }) : null)
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
@@ -958,8 +973,8 @@ function MetricTile({
           }
         ),
         (trend !== void 0 || trendLabel) && !loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-          trend !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(TrendBadge, { value: trend, size: "sm" }),
-          trendLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['Inter'] text-[11px] text-[var(--color-text-tertiary,#6B7280)]", children: trendLabel })
+          trendLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-['Inter'] text-[12px] text-[var(--color-text-tertiary,#6B7280)]", children: trendLabel }),
+          trend !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(TrendBadge, { value: trend })
         ] }),
         loading && trend !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 h-4 w-16 rounded bg-gray-200" })
       ]
@@ -975,6 +990,9 @@ function MetricTileGrid({ cols = 2, children, className }) {
   }[cols];
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-3", colClass, className), children });
 }
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "5,3 9,7 5,11" }) });
+}
 
 exports.Badge = Badge;
 exports.BottomNav = BottomNav;