@upbound/monarch-blocks 0.1.0

package/dist/section-header.js

@@ -0,0 +1,123 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/section-header.tsx
+import { jsx } from "react/jsx-runtime";
+function SectionHeader(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "section-header",
+      className: cn("flex w-full items-start justify-between gap-4", className)
+    }, props), {
+      children
+    })
+  );
+}
+function SectionHeaderContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "section-header-content", className: cn("flex flex-col gap-1", className) }, props));
+}
+function SectionHeaderTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("h2", __spreadValues({ "data-slot": "section-header-title", className: cn("text-h3 text-foreground", className) }, props));
+}
+function SectionHeaderDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("p", __spreadValues({ "data-slot": "section-header-description", className: cn("text-body text-muted-foreground", className) }, props));
+}
+function SectionHeaderMeta(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "section-header-meta",
+      className: cn(
+        "text-body text-muted-foreground flex flex-wrap items-center gap-4",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-default)",
+        className
+      )
+    }, props)
+  );
+}
+function SectionHeaderActions(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "section-header-actions", className: cn("flex items-center gap-2", className) }, props));
+}
+function SectionHeaderTabs(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "section-header-tabs", className: cn("border-b", className) }, props));
+}
+export {
+  SectionHeader,
+  SectionHeaderActions,
+  SectionHeaderContent,
+  SectionHeaderDescription,
+  SectionHeaderMeta,
+  SectionHeaderTabs,
+  SectionHeaderTitle
+};
+//# sourceMappingURL=section-header.js.map

package/dist/section-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/section-header.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import { cn } from '@/lib/utils';\n\nfunction SectionHeader({ className, children, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"section-header\"\n      className={cn('flex w-full items-start justify-between gap-4', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction SectionHeaderContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"section-header-content\" className={cn('flex flex-col gap-1', className)} {...props} />;\n}\n\nfunction SectionHeaderTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n  return <h2 data-slot=\"section-header-title\" className={cn('text-h3 text-foreground', className)} {...props} />;\n}\n\nfunction SectionHeaderDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <p data-slot=\"section-header-description\" className={cn('text-body text-muted-foreground', className)} {...props} />\n  );\n}\n\nfunction SectionHeaderMeta({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"section-header-meta\"\n      className={cn(\n        'text-body text-muted-foreground flex flex-wrap items-center gap-4',\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-default)\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction SectionHeaderActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"section-header-actions\" className={cn('flex items-center gap-2', className)} {...props} />;\n}\n\nfunction SectionHeaderTabs({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"section-header-tabs\" className={cn('border-b', className)} {...props} />;\n}\n\nexport {\n  SectionHeader,\n  SectionHeaderContent,\n  SectionHeaderTitle,\n  SectionHeaderDescription,\n  SectionHeaderMeta,\n  SectionHeaderActions,\n  SectionHeaderTabs,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AC5BI;AAFJ,SAAS,cAAc,IAAgE;AAAhE,eAAE,aAAW,SAFpC,IAEuB,IAA0B,kBAA1B,IAA0B,CAAxB,aAAW;AAClC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,iDAAiD,SAAS;AAAA,OACpE,QAHL;AAAA,MAKE;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,qBAAqB,IAAsD;AAAtD,eAAE,YAdhC,IAc8B,IAAgB,kBAAhB,IAAgB,CAAd;AAC9B,SAAO,oBAAC,wBAAI,aAAU,0BAAyB,WAAW,GAAG,uBAAuB,SAAS,KAAO,MAAO;AAC7G;AAEA,SAAS,mBAAmB,IAAqD;AAArD,eAAE,YAlB9B,IAkB4B,IAAgB,kBAAhB,IAAgB,CAAd;AAC5B,SAAO,oBAAC,uBAAG,aAAU,wBAAuB,WAAW,GAAG,2BAA2B,SAAS,KAAO,MAAO;AAC9G;AAEA,SAAS,yBAAyB,IAAoD;AAApD,eAAE,YAtBpC,IAsBkC,IAAgB,kBAAhB,IAAgB,CAAd;AAClC,SACE,oBAAC,sBAAE,aAAU,8BAA6B,WAAW,GAAG,mCAAmC,SAAS,KAAO,MAAO;AAEtH;AAEA,SAAS,kBAAkB,IAAsD;AAAtD,eAAE,YA5B7B,IA4B2B,IAAgB,kBAAhB,IAAgB,CAAd;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;AAEA,SAAS,qBAAqB,IAAsD;AAAtD,eAAE,YA1ChC,IA0C8B,IAAgB,kBAAhB,IAAgB,CAAd;AAC9B,SAAO,oBAAC,wBAAI,aAAU,0BAAyB,WAAW,GAAG,2BAA2B,SAAS,KAAO,MAAO;AACjH;AAEA,SAAS,kBAAkB,IAAsD;AAAtD,eAAE,YA9C7B,IA8C2B,IAAgB,kBAAhB,IAAgB,CAAd;AAC3B,SAAO,oBAAC,wBAAI,aAAU,uBAAsB,WAAW,GAAG,YAAY,SAAS,KAAO,MAAO;AAC/F;","names":[]}

package/dist/section-nav.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * SectionNav — vertical navigation for in-page section routing.
+ *
+ * Distinct from `Sidebar`: Sidebar is the app-level chrome (org switcher,
+ * primary nav, user menu, mobile drawer). SectionNav is a context-free
+ * navigation list that lives inside a page or section — settings sub-nav,
+ * resource detail tabs (route-based), profile sub-pages, etc.
+ *
+ * Distinct from `Tabs (vertical orientation)`: Tabs swap views within a
+ * single route (UI state); SectionNav navigates between routes (URL changes,
+ * `aria-current="page"` on the active item).
+ *
+ * Composition:
+ *
+ *   <SectionNav>
+ *     <SectionNavList>
+ *       <SectionNavItem href="/settings" isActive>Account</SectionNavItem>
+ *       <SectionNavItem href="/settings/notifications">
+ *         Notifications
+ *       </SectionNavItem>
+ *     </SectionNavList>
+ *   </SectionNav>
+ *
+ * Wrap with Next `<Link>` via `asChild`:
+ *
+ *   <SectionNavItem asChild isActive>
+ *     <Link href="/settings">Account</Link>
+ *   </SectionNavItem>
+ */
+declare function SectionNav({ className, ...props }: React.ComponentProps<'nav'>): react_jsx_runtime.JSX.Element;
+declare function SectionNavList({ className, ...props }: React.ComponentProps<'ul'>): react_jsx_runtime.JSX.Element;
+declare function SectionNavGroup({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SectionNavGroupLabel({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+interface SectionNavItemProps extends React.ComponentProps<'a'> {
+    /**
+     * Marks the item as the current page. Applies active styling and sets
+     * `aria-current="page"`. Active state is fully controlled — wire to your
+     * router's pathname match.
+     */
+    isActive?: boolean;
+    asChild?: boolean;
+}
+declare function SectionNavItem({ className, isActive, asChild, children, ...props }: SectionNavItemProps): react_jsx_runtime.JSX.Element;
+declare function SectionNavItemDescription({ className, ...props }: React.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+declare function SectionNavSub({ className, ...props }: React.ComponentProps<'ul'>): react_jsx_runtime.JSX.Element;
+
+export { SectionNav, SectionNavGroup, SectionNavGroupLabel, SectionNavItem, SectionNavItemDescription, SectionNavList, SectionNavSub };

package/dist/section-nav.js

@@ -0,0 +1,143 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/section-nav.tsx
+import { Slot } from "radix-ui";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/section-nav.tsx
+import { jsx } from "react/jsx-runtime";
+function SectionNav(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("nav", __spreadValues({ "data-slot": "section-nav", className: cn("flex flex-col gap-4", className) }, props));
+}
+function SectionNavList(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("ul", __spreadValues({ "data-slot": "section-nav-list", className: cn("flex flex-col gap-px", className) }, props));
+}
+function SectionNavGroup(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "section-nav-group", className: cn("flex flex-col gap-2", className) }, props));
+}
+function SectionNavGroupLabel(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "section-nav-group-label",
+      className: cn("text-caption text-muted-foreground px-3 font-medium tracking-wide uppercase", className)
+    }, props)
+  );
+}
+function SectionNavItem(_a) {
+  var _b = _a, { className, isActive, asChild, children } = _b, props = __objRest(_b, ["className", "isActive", "asChild", "children"]);
+  const Comp = asChild ? Slot.Root : "a";
+  return /* @__PURE__ */ jsx("li", { "data-slot": "section-nav-item", children: /* @__PURE__ */ jsx(
+    Comp,
+    __spreadProps(__spreadValues({
+      "data-active": isActive || void 0,
+      "aria-current": isActive ? "page" : void 0,
+      className: cn(
+        "group/section-nav-item text-body text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground flex w-full items-center gap-2 rounded-md px-3 py-1.5 font-medium outline-hidden motion-safe:transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-default) [&_svg:not([class*='size-'])]:w-(--icon-default)!",
+        className
+      )
+    }, props), {
+      children
+    })
+  ) });
+}
+function SectionNavItemDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "span",
+    __spreadValues({
+      "data-slot": "section-nav-item-description",
+      className: cn(
+        "text-body-sm text-muted-foreground group-hover/section-nav-item:text-accent-foreground/80 group-data-[active=true]/section-nav-item:text-accent-foreground/80 block font-normal",
+        className
+      )
+    }, props)
+  );
+}
+function SectionNavSub(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "ul",
+    __spreadValues({
+      "data-slot": "section-nav-sub",
+      className: cn("border-border mt-1 ml-7 flex flex-col gap-px border-l pl-2", className)
+    }, props)
+  );
+}
+export {
+  SectionNav,
+  SectionNavGroup,
+  SectionNavGroupLabel,
+  SectionNavItem,
+  SectionNavItemDescription,
+  SectionNavList,
+  SectionNavSub
+};
+//# sourceMappingURL=section-nav.js.map

package/dist/section-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section-nav.tsx","../src/lib/utils.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Slot } from 'radix-ui';\n\nimport { cn } from '@/lib/utils';\n\n/**\n * SectionNav — vertical navigation for in-page section routing.\n *\n * Distinct from `Sidebar`: Sidebar is the app-level chrome (org switcher,\n * primary nav, user menu, mobile drawer). SectionNav is a context-free\n * navigation list that lives inside a page or section — settings sub-nav,\n * resource detail tabs (route-based), profile sub-pages, etc.\n *\n * Distinct from `Tabs (vertical orientation)`: Tabs swap views within a\n * single route (UI state); SectionNav navigates between routes (URL changes,\n * `aria-current=\"page\"` on the active item).\n *\n * Composition:\n *\n *   <SectionNav>\n *     <SectionNavList>\n *       <SectionNavItem href=\"/settings\" isActive>Account</SectionNavItem>\n *       <SectionNavItem href=\"/settings/notifications\">\n *         Notifications\n *       </SectionNavItem>\n *     </SectionNavList>\n *   </SectionNav>\n *\n * Wrap with Next `<Link>` via `asChild`:\n *\n *   <SectionNavItem asChild isActive>\n *     <Link href=\"/settings\">Account</Link>\n *   </SectionNavItem>\n */\n\n// ── Root ──────────────────────────────────────────────\n\nfunction SectionNav({ className, ...props }: React.ComponentProps<'nav'>) {\n  return <nav data-slot=\"section-nav\" className={cn('flex flex-col gap-4', className)} {...props} />;\n}\n\n// ── List ──────────────────────────────────────────────\n\nfunction SectionNavList({ className, ...props }: React.ComponentProps<'ul'>) {\n  return <ul data-slot=\"section-nav-list\" className={cn('flex flex-col gap-px', className)} {...props} />;\n}\n\n// ── Group (heading + list pair) ───────────────────────\n\nfunction SectionNavGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"section-nav-group\" className={cn('flex flex-col gap-2', className)} {...props} />;\n}\n\nfunction SectionNavGroupLabel({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"section-nav-group-label\"\n      className={cn('text-caption text-muted-foreground px-3 font-medium tracking-wide uppercase', className)}\n      {...props}\n    />\n  );\n}\n\n// ── Item ──────────────────────────────────────────────\n\ninterface SectionNavItemProps extends React.ComponentProps<'a'> {\n  /**\n   * Marks the item as the current page. Applies active styling and sets\n   * `aria-current=\"page\"`. Active state is fully controlled — wire to your\n   * router's pathname match.\n   */\n  isActive?: boolean;\n  asChild?: boolean;\n}\n\nfunction SectionNavItem({ className, isActive, asChild, children, ...props }: SectionNavItemProps) {\n  const Comp = asChild ? Slot.Root : 'a';\n  return (\n    <li data-slot=\"section-nav-item\">\n      <Comp\n        data-active={isActive || undefined}\n        aria-current={isActive ? 'page' : undefined}\n        className={cn(\n          \"group/section-nav-item text-body text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground data-[active=true]:bg-accent data-[active=true]:text-accent-foreground flex w-full items-center gap-2 rounded-md px-3 py-1.5 font-medium outline-hidden motion-safe:transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-(--icon-default) [&_svg:not([class*='size-'])]:w-(--icon-default)!\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </Comp>\n    </li>\n  );\n}\n\n// ── Item description (for rich items with label + sub-text) ────\n\nfunction SectionNavItemDescription({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"section-nav-item-description\"\n      className={cn(\n        'text-body-sm text-muted-foreground group-hover/section-nav-item:text-accent-foreground/80 group-data-[active=true]/section-nav-item:text-accent-foreground/80 block font-normal',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ── Sub navigation (nested under an item) ─────────────\n\nfunction SectionNavSub({ className, ...props }: React.ComponentProps<'ul'>) {\n  return (\n    <ul\n      data-slot=\"section-nav-sub\"\n      className={cn('border-border mt-1 ml-7 flex flex-col gap-px border-l pl-2', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  SectionNav,\n  SectionNavList,\n  SectionNavGroup,\n  SectionNavGroupLabel,\n  SectionNavItem,\n  SectionNavItemDescription,\n  SectionNavSub,\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,SAAS,YAAY;;;ACHrB,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;ADQS;AADT,SAAS,WAAW,IAAsD;AAAtD,eAAE,YAvCtB,IAuCoB,IAAgB,kBAAhB,IAAgB,CAAd;AACpB,SAAO,oBAAC,wBAAI,aAAU,eAAc,WAAW,GAAG,uBAAuB,SAAS,KAAO,MAAO;AAClG;AAIA,SAAS,eAAe,IAAqD;AAArD,eAAE,YA7C1B,IA6CwB,IAAgB,kBAAhB,IAAgB,CAAd;AACxB,SAAO,oBAAC,uBAAG,aAAU,oBAAmB,WAAW,GAAG,wBAAwB,SAAS,KAAO,MAAO;AACvG;AAIA,SAAS,gBAAgB,IAAsD;AAAtD,eAAE,YAnD3B,IAmDyB,IAAgB,kBAAhB,IAAgB,CAAd;AACzB,SAAO,oBAAC,wBAAI,aAAU,qBAAoB,WAAW,GAAG,uBAAuB,SAAS,KAAO,MAAO;AACxG;AAEA,SAAS,qBAAqB,IAAsD;AAAtD,eAAE,YAvDhC,IAuD8B,IAAgB,kBAAhB,IAAgB,CAAd;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,+EAA+E,SAAS;AAAA,OAClG;AAAA,EACN;AAEJ;AAcA,SAAS,eAAe,IAA2E;AAA3E,eAAE,aAAW,UAAU,SAAS,SA7ExD,IA6EwB,IAA6C,kBAA7C,IAA6C,CAA3C,aAAW,YAAU,WAAS;AACtD,QAAM,OAAO,UAAU,KAAK,OAAO;AACnC,SACE,oBAAC,QAAG,aAAU,oBACZ;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,gBAAc,WAAW,SAAS;AAAA,MAClC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI,QAPL;AAAA,MASE;AAAA;AAAA,EACH,GACF;AAEJ;AAIA,SAAS,0BAA0B,IAAuD;AAAvD,eAAE,YAlGrC,IAkGmC,IAAgB,kBAAhB,IAAgB,CAAd;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,OACI;AAAA,EACN;AAEJ;AAIA,SAAS,cAAc,IAAqD;AAArD,eAAE,YAjHzB,IAiHuB,IAAgB,kBAAhB,IAAgB,CAAd;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8DAA8D,SAAS;AAAA,OACjF;AAAA,EACN;AAEJ;","names":[]}

package/dist/timeline.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ItemGroup, Item } from '@upbound/monarch-core';
+
+declare function Timeline({ className, ...props }: React.ComponentProps<typeof ItemGroup>): react_jsx_runtime.JSX.Element;
+declare function TimelineItem({ className, children, ...props }: React.ComponentProps<typeof Item>): react_jsx_runtime.JSX.Element;
+
+export { Timeline, TimelineItem };

package/dist/timeline.js

@@ -0,0 +1,95 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/timeline.tsx
+import { Icon } from "@upbound/monarch-core";
+import { Item, ItemGroup } from "@upbound/monarch-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Timeline(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(ItemGroup, __spreadValues({ "data-slot": "timeline", className: cn(className) }, props));
+}
+function TimelineItem(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs(Item, __spreadProps(__spreadValues({ "data-slot": "timeline-item", className: cn("group/timeline-item gap-3 py-4", className) }, props), { children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col items-center self-stretch", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "circle-dot", size: "sm", className: "text-primary shrink-0" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "bg-timeline-connector absolute top-5 w-px group-last/timeline-item:hidden",
+          style: { bottom: "-1rem" }
+        }
+      )
+    ] }),
+    children
+  ] }));
+}
+export {
+  Timeline,
+  TimelineItem
+};
+//# sourceMappingURL=timeline.js.map

package/dist/timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/timeline.tsx"],"sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { Icon } from '@upbound/monarch-core';\nimport { Item, ItemGroup } from '@upbound/monarch-core';\n\nfunction Timeline({ className, ...props }: React.ComponentProps<typeof ItemGroup>) {\n  return <ItemGroup data-slot=\"timeline\" className={cn(className)} {...props} />;\n}\n\nfunction TimelineItem({ className, children, ...props }: React.ComponentProps<typeof Item>) {\n  return (\n    <Item data-slot=\"timeline-item\" className={cn('group/timeline-item gap-3 py-4', className)} {...props}>\n      <div className=\"relative flex flex-col items-center self-stretch\">\n        <Icon name=\"circle-dot\" size=\"sm\" className=\"text-primary shrink-0\" />\n        <span\n          aria-hidden=\"true\"\n          className=\"bg-timeline-connector absolute top-5 w-px group-last/timeline-item:hidden\"\n          style={{ bottom: '-1rem' }}\n        />\n      </div>\n      {children}\n    </Item>\n  );\n}\n\nexport { Timeline, TimelineItem };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAA6B;AACtC,SAAS,2BAA2B;AAEpC,IAAM,UAAU,oBAAoB;AAAA,EAClC,QAAQ;AAAA,IACN,aAAa;AAAA,MACX,aAAa;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;AAEM,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;;AC7BA,SAAS,YAAY;AACrB,SAAS,MAAM,iBAAiB;AAGvB,cAMH,YANG;AADT,SAAS,SAAS,IAAiE;AAAjE,eAAE,YANpB,IAMkB,IAAgB,kBAAhB,IAAgB,CAAd;AAClB,SAAO,oBAAC,4BAAU,aAAU,YAAW,WAAW,GAAG,SAAS,KAAO,MAAO;AAC9E;AAEA,SAAS,aAAa,IAAsE;AAAtE,eAAE,aAAW,SAVnC,IAUsB,IAA0B,kBAA1B,IAA0B,CAAxB,aAAW;AACjC,SACE,qBAAC,qCAAK,aAAU,iBAAgB,WAAW,GAAG,kCAAkC,SAAS,KAAO,QAA/F,EACC;AAAA,yBAAC,SAAI,WAAU,oDACb;AAAA,0BAAC,QAAK,MAAK,cAAa,MAAK,MAAK,WAAU,yBAAwB;AAAA,MACpE;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,UACV,OAAO,EAAE,QAAQ,QAAQ;AAAA;AAAA,MAC3B;AAAA,OACF;AAAA,IACC;AAAA,MACH;AAEJ;","names":[]}

package/dist/types-BULiU2qC.d.ts

@@ -0,0 +1,170 @@
+/** Stable operator ids used in code and tests. UI labels come from `getOperatorLabel`. */
+type CelOperator = 'is' | 'is_not' | 'contains' | 'does_not_contain' | 'starts_with' | 'ends_with' | 'matches' | 'is_before' | 'is_after' | 'is_on_or_before' | 'is_on_or_after' | 'is_between' | 'is_not_between' | 'key_exists' | 'key_does_not_exist' | 'has_value' | 'does_not_have_value';
+type CelFilterType = 'checkbox' | 'radio' | 'text' | 'multiText' | 'date' | 'keyValue' | 'static';
+/** When a valid compiled expression may be emitted to consumers (API, URL, etc.). */
+type CelEmitOn = 'change' | 'commit';
+/**
+ * Resolved shape used by the compiler / dispatcher to pick a value variant and
+ * operator set. Columns map to their `filterType`; map fields resolve to `map`.
+ */
+type CelFilterShape = CelFilterType | 'map';
+type CelColumnOption = {
+    /** Human-readable text shown in the UI and collapsed pill display. Never compiled into CEL. */
+    label: string;
+    /** Canonical CEL literal stored on the condition and emitted in compiled CEL. */
+    value: string;
+    /** When set, selecting this option also sets the condition operator (e.g. `'is_not'` for a negated choice). */
+    operator?: CelOperator;
+    /** When true, the option cannot be toggled; hosts may handle the click via `onRestrictedOptionSelect`. */
+    disabled?: boolean;
+};
+/** Payload for clicks on disabled checkbox/radio options. */
+type CelRestrictedOptionSelectPayload = {
+    columnId: string;
+    value: string;
+    label: string;
+};
+type CelColumnDefinition = {
+    /** Must match the API column id when targeting server-side resources. */
+    id: string;
+    /** Display name in the add-filter menu. */
+    title: string;
+    /**
+     * Section heading this column is listed under in the add-filter menu. Sections appear in the
+     * order each group name first occurs in `columns`; columns without a group are listed last
+     * under no heading. Omit on every column to get a single flat alphabetical list.
+     *
+     * Group names are searchable: a phrase matching one keeps that entire section, on top of any
+     * columns matched by title.
+     */
+    group?: string;
+    /** Lowercase natural plural for consolidated multi-value pill copy (e.g. "2 control planes"). */
+    pluralTitle: string;
+    filterType: CelFilterType;
+    /** Enum columns (checkbox / radio); static options only in v1. */
+    options?: CelColumnOption[];
+    /** Optional override; defaults from `filterType`. */
+    allowedOperators?: CelOperator[];
+    /** When true, hides the operator UI when only one operator is allowed. Defaults to `false`. */
+    hideOnSingleOperator?: boolean;
+    /** Pre-fill value when the condition is first added. Skips the initial "pick a value" step. */
+    defaultValue?: CelConditionValue;
+    /** When a valid compiled expression may be emitted. Defaults by `filterType`. */
+    emitOn?: CelEmitOn;
+};
+/** Host-provided schema describing which columns are filterable for a given filter bar. */
+type CelFilterSchema = {
+    columns: CelColumnDefinition[];
+};
+type CheckboxCelValue = string[];
+type RadioCelValue = string;
+type TextCelValue = string;
+type MultiTextCelValue = {
+    tokens: string[];
+    /** Required when `tokens.length > 1`; defaults to `any` in the UI when omitted. */
+    quantifier?: 'any' | 'all';
+};
+/** Trusted preset durations emitted as fixed literals in compiled CEL. */
+type RelativeDurationPreset = '24h' | '168h' | '720h';
+type DateCelValue = {
+    /** RFC3339 UTC; required for single-point comparators. Mutually exclusive with `preset`. */
+    instant?: string;
+    /** Required for the range operators (`is_between` / `is_not_between`). Mutually exclusive with `preset`. */
+    range?: {
+        start: string;
+        end: string;
+    };
+    /** Relative duration preset; mutually exclusive with `instant` / `range`. */
+    preset?: RelativeDurationPreset;
+    /**
+     * True once the user edits a boundary time. While false the operator's default
+     * day boundary applies, so an untouched condition compiles exactly as it did
+     * before times were selectable. Never set without `instant` / `range` — the
+     * `isDateCelValue` guard keys off those fields. Never compiled into CEL; a
+     * future parser would need to re-derive it from the instants in the expression.
+     */
+    hasTime?: boolean;
+};
+type MapKeyCelValue = {
+    key: string;
+    /** Required when operator is `has_value` / `does_not_have_value`. */
+    value?: string;
+};
+/**
+ * Union of all condition value shapes. The active variant is determined by the
+ * condition's `columnId` + schema `filterType`, not a discriminant on the value.
+ */
+type CelConditionValue = CheckboxCelValue | RadioCelValue | TextCelValue | MultiTextCelValue | DateCelValue | MapKeyCelValue;
+/**
+ * v1 always `and`; the shape is forward-compatible with `or` and nesting.
+ * See `CelFilterGroup.children`, kept recursive so a future nested/OR-group UI
+ * is additive rather than a breaking type change.
+ */
+type CelCombinator = 'and';
+type CelFilterGroup = {
+    id: string;
+    type: 'group';
+    combinator: CelCombinator;
+    /** Root group is `0`. */
+    depth: number;
+    children: CelFilterNode[];
+};
+type CelFilterCondition = {
+    id: string;
+    type: 'condition';
+    columnId: string;
+    operator: CelOperator;
+    /** Undefined on a newly added row until the user edits. */
+    value?: CelConditionValue;
+};
+type CelFilterNode = CelFilterGroup | CelFilterCondition;
+type CelFilterTree = {
+    root: CelFilterGroup;
+};
+/** Closed union — `validateCondition` and `compileCelFilterTree` emit only these codes. */
+type ValidationIssueCode = 'missing_column' | 'missing_value' | 'missing_key' | 'missing_tokens' | 'missing_quantifier' | 'missing_instant' | 'missing_range' | 'missing_duration' | 'unknown_column' | 'illegal_operator' | 'invalid_date_mode' | 'regex_too_long' | 'invalid_timestamp' | 'invalid_date_range' | 'nesting_depth_exceeded';
+type ValidationSeverity = 'incomplete' | 'invalid';
+type ValidationIssue = {
+    code: ValidationIssueCode;
+    message: string;
+    severity: ValidationSeverity;
+    nodeId: string;
+    nodeType: 'condition' | 'group';
+    /** Sub-target within the condition (e.g. `value`, `key`, `instant`). */
+    field?: string;
+};
+type CompileStatus = 'valid' | 'incomplete' | 'invalid';
+type CompileResult = {
+    status: CompileStatus;
+    /** Present when `status === 'valid'` (may be `""`). */
+    expression?: string;
+    issues: ValidationIssue[];
+    /** True iff the raw compile status is `valid`; the API / parent emission gate. */
+    isEmitReady: boolean;
+};
+type CelValidationMeta = {
+    editingConditionId: string | null;
+    committedConditionIds: Set<string>;
+};
+/** Which pill sub-surface is open: operator picker, multiText quantifier, or the value editor. */
+type PillActiveSurface = 'operator' | 'quantifier' | 'value';
+type CelFilterBarProps = {
+    tree: CelFilterTree;
+    onChange: (tree: CelFilterTree) => void;
+    schema: CelFilterSchema;
+    onCompileResultChange?: (result: CompileResult) => void;
+    /** Invoked when the user clicks a disabled option (instead of toggling the filter value). */
+    onRestrictedOptionSelect?: (payload: CelRestrictedOptionSelectPayload) => void;
+    /** Default `false`. */
+    showClearButton?: boolean;
+    className?: string;
+};
+declare const isCelFilterGroup: (node: CelFilterNode) => node is CelFilterGroup;
+declare const isCelFilterCondition: (node: CelFilterNode) => node is CelFilterCondition;
+/** Checkbox values are arrays of option value strings. */
+declare const isCheckboxCelValue: (value: unknown) => value is CheckboxCelValue;
+declare const isMultiTextCelValue: (value: unknown) => value is MultiTextCelValue;
+declare const isDateCelValue: (value: unknown) => value is DateCelValue;
+declare const isMapKeyCelValue: (value: unknown) => value is MapKeyCelValue;
+
+export { type CelColumnDefinition as C, type DateCelValue as D, type MapKeyCelValue as M, type PillActiveSurface as P, type RadioCelValue as R, type ValidationIssue as V, type CelColumnOption as a, type CelConditionValue as b, type CelFilterBarProps as c, type CelFilterCondition as d, type CelFilterGroup as e, type CelFilterSchema as f, type CelFilterTree as g, type CelOperator as h, type CelRestrictedOptionSelectPayload as i, type CheckboxCelValue as j, type CompileResult as k, type MultiTextCelValue as l, type RelativeDurationPreset as m, isCelFilterCondition as n, isCelFilterGroup as o, isCheckboxCelValue as p, isDateCelValue as q, isMapKeyCelValue as r, isMultiTextCelValue as s, type CelValidationMeta as t, type CelFilterType as u, type CelFilterShape as v, type CelEmitOn as w };