@mieweb/ui 0.10.0-dev.4 → 0.10.0-dev.41

package/dist/chunk-XDIMTPZU.cjs

@@ -0,0 +1,202 @@
+'use strict';
+
+var chunk4NCDU5IG_cjs = require('./chunk-4NCDU5IG.cjs');
+var chunkL7L5S2HO_cjs = require('./chunk-L7L5S2HO.cjs');
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var VIEW_META = {
+  overview: { label: "Overview", icon: chunkL7L5S2HO_cjs.LayoutGrid },
+  list: { label: "List", icon: chunkL7L5S2HO_cjs.List },
+  board: { label: "Board", icon: chunkL7L5S2HO_cjs.Columns },
+  calendar: { label: "Calendar", icon: chunkL7L5S2HO_cjs.Calendar },
+  gantt: { label: "Gantt", icon: chunkL7L5S2HO_cjs.BarChart3 },
+  roadmap: { label: "Roadmap", icon: chunkL7L5S2HO_cjs.BarChart3 },
+  table: { label: "Table", icon: chunkL7L5S2HO_cjs.Table }
+};
+var viewSwitcherVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex items-center gap-0.5",
+    "rounded-lg border border-border bg-muted p-0.5",
+    "overflow-x-auto"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var optionVariants = classVarianceAuthority.cva(
+  [
+    "inline-flex shrink-0 items-center gap-1.5 rounded-md font-medium",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        // 40px tall on touch, tighter once a pointer is likely.
+        sm: "min-h-10 px-2 py-2 sm:min-h-0 sm:px-2 sm:py-1",
+        md: "min-h-10 px-2.5 py-2 sm:min-h-0 sm:px-3 sm:py-1.5"
+      },
+      active: {
+        // A raised surface rather than tinted ink: an accent colour as text on
+        // its own wash fails AA contrast. Same treatment as Tabs' pills.
+        true: "bg-background text-foreground shadow-sm",
+        false: "text-muted-foreground hover:text-foreground"
+      }
+    },
+    defaultVariants: { size: "md", active: false }
+  }
+);
+var ViewSwitcher = React__namespace.forwardRef(
+  function ViewSwitcher2({
+    views,
+    value,
+    onValueChange,
+    label = chunk4NCDU5IG_cjs.defaultViewLabels.viewSwitcher,
+    showLabels = "responsive",
+    size,
+    className,
+    classNames,
+    ...rest
+  }, ref) {
+    const options = React__namespace.useMemo(
+      () => views.map((v) => typeof v === "string" ? { id: v } : v),
+      [views]
+    );
+    const refs = React__namespace.useRef({});
+    const select = (next) => {
+      if (!next || next.id === value) return;
+      onValueChange(next.id);
+      requestAnimationFrame(
+        () => refs.current[next.id]?.focus({ preventScroll: true })
+      );
+    };
+    const step = (delta) => {
+      const enabled = options.filter((o) => !o.disabled);
+      if (enabled.length === 0) return;
+      const current = enabled.findIndex((o) => o.id === value);
+      const from = current === -1 ? delta > 0 ? -1 : 0 : current;
+      select(enabled[(from + delta + enabled.length) % enabled.length]);
+    };
+    const onKeyDown = (event) => {
+      const enabled = options.filter((o) => !o.disabled);
+      const forward = getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1;
+      switch (event.key) {
+        case "ArrowRight":
+          event.preventDefault();
+          step(forward);
+          break;
+        case "ArrowLeft":
+          event.preventDefault();
+          step(-forward);
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          step(1);
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          step(-1);
+          break;
+        case "Home":
+          event.preventDefault();
+          select(enabled[0]);
+          break;
+        case "End":
+          event.preventDefault();
+          select(enabled[enabled.length - 1]);
+          break;
+      }
+    };
+    const tabStopId = options.find((o) => o.id === value && !o.disabled)?.id ?? options.find((o) => !o.disabled)?.id;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": label,
+        "data-slot": "view-switcher",
+        className: chunkS5RVSXDV_cjs.cn(viewSwitcherVariants({ size }), className),
+        ...rest,
+        children: options.map((option) => {
+          const meta = VIEW_META[option.id];
+          const Icon = option.icon ?? meta.icon;
+          const text = option.label ?? meta.label;
+          const active = option.id === value;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: (node) => {
+                refs.current[option.id] = node;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": active,
+              "aria-label": showLabels === true ? void 0 : text,
+              title: text,
+              disabled: option.disabled,
+              tabIndex: option.id === tabStopId ? 0 : -1,
+              "data-slot": "view-switcher-option",
+              "data-view": option.id,
+              className: chunkS5RVSXDV_cjs.cn(
+                optionVariants({ size, active }),
+                classNames?.option,
+                active && classNames?.activeOption
+              ),
+              onClick: () => onValueChange(option.id),
+              onKeyDown,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4 shrink-0", "aria-hidden": true }),
+                showLabels !== false && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-slot": "view-switcher-label",
+                    className: chunkS5RVSXDV_cjs.cn(
+                      showLabels === "responsive" && "hidden sm:inline"
+                    ),
+                    children: text
+                  }
+                )
+              ]
+            },
+            option.id
+          );
+        })
+      }
+    );
+  }
+);
+
+exports.ViewSwitcher = ViewSwitcher;
+exports.viewSwitcherVariants = viewSwitcherVariants;
+//# sourceMappingURL=chunk-XDIMTPZU.cjs.map
+//# sourceMappingURL=chunk-XDIMTPZU.cjs.map

package/dist/chunk-XDIMTPZU.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ViewSwitcher/ViewSwitcher.tsx"],"names":["LayoutGrid","List","Columns","Calendar","BarChart3","Table","cva","React","ViewSwitcher","defaultViewLabels","jsx","cn","jsxs"],"mappings":"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","file":"chunk-XDIMTPZU.cjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport {\n  CalendarIcon,\n  ChartIcon,\n  ColumnsIcon,\n  GridIcon,\n  ListIcon,\n  TableIcon,\n} from '../Icons';\nimport { defaultViewLabels, type ViewId } from '../../views/types';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface ViewOption {\n  id: ViewId;\n  /** Overrides the built-in English label. */\n  label?: string;\n  /** Overrides the built-in icon. */\n  icon?: React.ComponentType<{ className?: string; 'aria-hidden'?: boolean }>;\n  disabled?: boolean;\n}\n\nexport interface ViewSwitcherProps extends VariantProps<\n  typeof viewSwitcherVariants\n> {\n  /** Views to offer, in order. Accepts bare ids or `ViewOption`s. */\n  views: readonly (ViewId | ViewOption)[];\n  value: ViewId;\n  onValueChange: (view: ViewId) => void;\n  /** Accessible name of the group. */\n  label?: string;\n  /** Show labels beside the icons. `responsive` hides them below `sm`. */\n  showLabels?: boolean | 'responsive';\n  className?: string;\n  classNames?: Partial<Record<'option' | 'activeOption', string>>;\n}\n\n// =============================================================================\n// Defaults\n// =============================================================================\n\nconst VIEW_META: Record<\n  ViewId,\n  {\n    label: string;\n    icon: React.ComponentType<{ className?: string; 'aria-hidden'?: boolean }>;\n  }\n> = {\n  overview: { label: 'Overview', icon: GridIcon },\n  list: { label: 'List', icon: ListIcon },\n  board: { label: 'Board', icon: ColumnsIcon },\n  calendar: { label: 'Calendar', icon: CalendarIcon },\n  gantt: { label: 'Gantt', icon: ChartIcon },\n  roadmap: { label: 'Roadmap', icon: ChartIcon },\n  table: { label: 'Table', icon: TableIcon },\n};\n\n// =============================================================================\n// Variants\n// =============================================================================\n\nconst viewSwitcherVariants = cva(\n  [\n    'inline-flex items-center gap-0.5',\n    'rounded-lg border border-border bg-muted p-0.5',\n    'overflow-x-auto',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        md: 'text-sm',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  }\n);\n\nconst optionVariants = cva(\n  [\n    'inline-flex shrink-0 items-center gap-1.5 rounded-md font-medium',\n    'transition-colors',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        // 40px tall on touch, tighter once a pointer is likely.\n        sm: 'min-h-10 px-2 py-2 sm:min-h-0 sm:px-2 sm:py-1',\n        md: 'min-h-10 px-2.5 py-2 sm:min-h-0 sm:px-3 sm:py-1.5',\n      },\n      active: {\n        // A raised surface rather than tinted ink: an accent colour as text on\n        // its own wash fails AA contrast. Same treatment as Tabs' pills.\n        true: 'bg-background text-foreground shadow-sm',\n        false: 'text-muted-foreground hover:text-foreground',\n      },\n    },\n    defaultVariants: { size: 'md', active: false },\n  }\n);\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Keyboard model is a radio group: one tab stop, arrows move *and* select.\n * Every option is visible, so moving the selection is the whole interaction —\n * there is nothing to \"commit\" afterwards.\n */\nexport const ViewSwitcher = React.forwardRef<HTMLDivElement, ViewSwitcherProps>(\n  function ViewSwitcher(\n    {\n      views,\n      value,\n      onValueChange,\n      label = defaultViewLabels.viewSwitcher,\n      showLabels = 'responsive',\n      size,\n      className,\n      classNames,\n      ...rest\n    },\n    ref\n  ) {\n    const options = React.useMemo<ViewOption[]>(\n      () => views.map((v) => (typeof v === 'string' ? { id: v } : v)),\n      [views]\n    );\n    const refs = React.useRef<Record<string, HTMLButtonElement | null>>({});\n\n    const select = (next: ViewOption | undefined) => {\n      if (!next || next.id === value) return;\n      onValueChange(next.id);\n      // The selection owns the tab stop, so focus has to follow it.\n      requestAnimationFrame(() =>\n        refs.current[next.id]?.focus({ preventScroll: true })\n      );\n    };\n\n    // Stepping is relative to the selected view, not to whichever button received\n    // the key: focus moves asynchronously, and the two would drift apart.\n    const step = (delta: number) => {\n      const enabled = options.filter((o) => !o.disabled);\n      if (enabled.length === 0) return;\n      const current = enabled.findIndex((o) => o.id === value);\n      const from = current === -1 ? (delta > 0 ? -1 : 0) : current;\n      select(enabled[(from + delta + enabled.length) % enabled.length]);\n    };\n\n    const onKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n      const enabled = options.filter((o) => !o.disabled);\n      // Logical, not physical: ArrowRight moves to the visually next option,\n      // which is the previous one under RTL.\n      const forward =\n        getComputedStyle(event.currentTarget).direction === 'rtl' ? -1 : 1;\n      switch (event.key) {\n        case 'ArrowRight':\n          event.preventDefault();\n          step(forward);\n          break;\n        case 'ArrowLeft':\n          event.preventDefault();\n          step(-forward);\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          step(1);\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          step(-1);\n          break;\n        case 'Home':\n          event.preventDefault();\n          select(enabled[0]);\n          break;\n        case 'End':\n          event.preventDefault();\n          select(enabled[enabled.length - 1]);\n          break;\n        default:\n          break;\n      }\n    };\n\n    // The roving tab stop has to land on an option the browser will actually\n    // focus. A disabled `<button>` is unfocusable, so if the active option is\n    // also disabled — a controlled caller, or a `defaultView` that later got\n    // disabled — putting the only `tabIndex={0}` on it leaves the radiogroup\n    // with no keyboard entry point at all. Fall back to the first enabled\n    // option; arrows then move from there.\n    const tabStopId =\n      options.find((o) => o.id === value && !o.disabled)?.id ??\n      options.find((o) => !o.disabled)?.id;\n\n    return (\n      <div\n        ref={ref}\n        role=\"radiogroup\"\n        aria-label={label}\n        data-slot=\"view-switcher\"\n        className={cn(viewSwitcherVariants({ size }), className)}\n        {...rest}\n      >\n        {options.map((option) => {\n          const meta = VIEW_META[option.id];\n          const Icon = option.icon ?? meta.icon;\n          const text = option.label ?? meta.label;\n          const active = option.id === value;\n          return (\n            <button\n              key={option.id}\n              ref={(node) => {\n                refs.current[option.id] = node;\n              }}\n              type=\"button\"\n              role=\"radio\"\n              aria-checked={active}\n              aria-label={showLabels === true ? undefined : text}\n              title={text}\n              disabled={option.disabled}\n              tabIndex={option.id === tabStopId ? 0 : -1}\n              data-slot=\"view-switcher-option\"\n              data-view={option.id}\n              className={cn(\n                optionVariants({ size, active }),\n                classNames?.option,\n                active && classNames?.activeOption\n              )}\n              onClick={() => onValueChange(option.id)}\n              onKeyDown={onKeyDown}\n            >\n              <Icon className=\"size-4 shrink-0\" aria-hidden />\n              {showLabels !== false && (\n                <span\n                  data-slot=\"view-switcher-label\"\n                  className={cn(\n                    showLabels === 'responsive' && 'hidden sm:inline'\n                  )}\n                >\n                  {text}\n                </span>\n              )}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nexport { viewSwitcherVariants };\n"]}

package/dist/chunk-XDU65GLW.js

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from 'react';
+
+// src/hooks/usePrefersReducedMotion.ts
+function usePrefersReducedMotion() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+var QUERY = "(prefers-reduced-motion: reduce)";
+var canQuery = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
+function subscribe(onStoreChange) {
+  if (!canQuery()) return () => {
+  };
+  const mediaQuery = window.matchMedia(QUERY);
+  mediaQuery.addEventListener("change", onStoreChange);
+  return () => mediaQuery.removeEventListener("change", onStoreChange);
+}
+var getSnapshot = () => canQuery() && window.matchMedia(QUERY).matches;
+var getServerSnapshot = () => false;
+
+export { usePrefersReducedMotion };
+//# sourceMappingURL=chunk-XDU65GLW.js.map
+//# sourceMappingURL=chunk-XDU65GLW.js.map

package/dist/chunk-XDU65GLW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/usePrefersReducedMotion.ts"],"names":[],"mappings":";;;AAkBO,SAAS,uBAAA,GAAmC;AAIjD,EAAA,OAAO,oBAAA,CAAqB,SAAA,EAAW,WAAA,EAAa,iBAAiB,CAAA;AACvE;AAEA,IAAM,KAAA,GAAQ,kCAAA;AAEd,IAAM,WAAW,MACf,OAAO,WAAW,WAAA,IAAe,OAAO,OAAO,UAAA,KAAe,UAAA;AAEhE,SAAS,UAAU,aAAA,EAAuC;AACxD,EAAA,IAAI,CAAC,QAAA,EAAS,EAAG,OAAO,MAAM;AAAA,EAAC,CAAA;AAC/B,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA;AAC1C,EAAA,UAAA,CAAW,gBAAA,CAAiB,UAAU,aAAa,CAAA;AACnD,EAAA,OAAO,MAAM,UAAA,CAAW,mBAAA,CAAoB,QAAA,EAAU,aAAa,CAAA;AACrE;AAEA,IAAM,cAAc,MAAM,QAAA,MAAc,MAAA,CAAO,UAAA,CAAW,KAAK,CAAA,CAAE,OAAA;AAEjE,IAAM,oBAAoB,MAAM,KAAA","file":"chunk-XDU65GLW.js","sourcesContent":["import { useSyncExternalStore } from 'react';\n\n/**\n * Hook that detects if the user prefers reduced motion.\n * Useful for disabling animations for accessibility.\n *\n * @example\n * ```tsx\n * function AnimatedComponent() {\n *   const prefersReducedMotion = usePrefersReducedMotion();\n *   return (\n *     <div className={prefersReducedMotion ? '' : 'animate-fade-in'}>\n *       Content\n *     </div>\n *   );\n * }\n * ```\n */\nexport function usePrefersReducedMotion(): boolean {\n  // External-store pattern: the server snapshot is always `false`, so SSR\n  // markup and the hydration pass agree; React then re-renders immediately\n  // from the client snapshot for reduced-motion users.\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n}\n\nconst QUERY = '(prefers-reduced-motion: reduce)';\n\nconst canQuery = () =>\n  typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\nfunction subscribe(onStoreChange: () => void): () => void {\n  if (!canQuery()) return () => {};\n  const mediaQuery = window.matchMedia(QUERY);\n  mediaQuery.addEventListener('change', onStoreChange);\n  return () => mediaQuery.removeEventListener('change', onStoreChange);\n}\n\nconst getSnapshot = () => canQuery() && window.matchMedia(QUERY).matches;\n\nconst getServerSnapshot = () => false;\n"]}

package/dist/chunk-XI74P5F2.cjs

@@ -0,0 +1,424 @@
+'use strict';
+
+var chunkDXEPYK3I_cjs = require('./chunk-DXEPYK3I.cjs');
+var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
+var React2 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+var defaultMetricStatusLabels = {
+  live: "Live data",
+  modeled: "Modeled",
+  maturing: "Data maturing"
+};
+var dotClass = {
+  live: "bg-success",
+  modeled: "bg-info",
+  maturing: "bg-warning"
+};
+var MetricStatusBadge = React2__namespace.forwardRef(({ status, label, onDark, className, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "span",
+  {
+    ref,
+    "data-slot": "metric-status-badge",
+    "data-status": status,
+    className: chunkS5RVSXDV_cjs.cn(
+      "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium",
+      onDark ? "border-white/20 bg-white/10 text-white" : "border-border bg-card text-foreground",
+      className
+    ),
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: chunkS5RVSXDV_cjs.cn("size-1.5 rounded-full", dotClass[status])
+        }
+      ),
+      label ?? defaultMetricStatusLabels[status]
+    ]
+  }
+));
+MetricStatusBadge.displayName = "MetricStatusBadge";
+
+// src/utils/own.ts
+function ownProperty(map, key) {
+  return map != null && Object.hasOwn(map, key) ? map[key] : void 0;
+}
+var templateIcons = {
+  activity: lucideReact.Activity,
+  award: lucideReact.Award,
+  "badge-check": lucideReact.BadgeCheck,
+  bell: lucideReact.Bell,
+  briefcase: lucideReact.Briefcase,
+  building: lucideReact.Building2,
+  calendar: lucideReact.Calendar,
+  "calendar-check": lucideReact.CalendarCheck,
+  "chart-column": lucideReact.ChartColumn,
+  "chart-line": lucideReact.ChartLine,
+  "circle-check": lucideReact.CircleCheck,
+  "clipboard-check": lucideReact.ClipboardCheck,
+  clock: lucideReact.Clock,
+  cloud: lucideReact.Cloud,
+  database: lucideReact.Database,
+  "dollar-sign": lucideReact.DollarSign,
+  factory: lucideReact.Factory,
+  "file-text": lucideReact.FileText,
+  flask: lucideReact.FlaskConical,
+  globe: lucideReact.Globe,
+  "graduation-cap": lucideReact.GraduationCap,
+  handshake: lucideReact.Handshake,
+  "hard-hat": lucideReact.HardHat,
+  headset: lucideReact.Headset,
+  "heart-pulse": lucideReact.HeartPulse,
+  hospital: lucideReact.Hospital,
+  layers: lucideReact.Layers,
+  leaf: lucideReact.Leaf,
+  lightbulb: lucideReact.Lightbulb,
+  lock: lucideReact.Lock,
+  mail: lucideReact.Mail,
+  "map-pin": lucideReact.MapPin,
+  "message-square": lucideReact.MessageSquare,
+  microscope: lucideReact.Microscope,
+  phone: lucideReact.Phone,
+  plane: lucideReact.Plane,
+  plug: lucideReact.Plug,
+  rocket: lucideReact.Rocket,
+  scale: lucideReact.Scale,
+  search: lucideReact.Search,
+  settings: lucideReact.Settings,
+  shield: lucideReact.Shield,
+  "shield-check": lucideReact.ShieldCheck,
+  smartphone: lucideReact.Smartphone,
+  sparkles: lucideReact.Sparkles,
+  stethoscope: lucideReact.Stethoscope,
+  syringe: lucideReact.Syringe,
+  target: lucideReact.Target,
+  timer: lucideReact.Timer,
+  "trending-up": lucideReact.TrendingUp,
+  truck: lucideReact.Truck,
+  "user-check": lucideReact.UserCheck,
+  users: lucideReact.Users,
+  workflow: lucideReact.Workflow,
+  wrench: lucideReact.Wrench,
+  zap: lucideReact.Zap
+};
+function TemplateIcon({ name, icons, className }) {
+  const Icon = ownProperty(icons, name) ?? ownProperty(templateIcons, name);
+  if (Icon)
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Icon,
+      {
+        "aria-hidden": "true",
+        strokeWidth: 1.75,
+        className: chunkS5RVSXDV_cjs.cn("size-5", className)
+      }
+    );
+  if (name.length <= 4)
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: chunkS5RVSXDV_cjs.cn("text-xs font-bold tracking-wide", className),
+        children: name
+      }
+    );
+  return null;
+}
+var toneSurface = {
+  default: "bg-background text-foreground",
+  muted: "bg-muted text-foreground",
+  brand: "bg-primary-900 text-white"
+};
+var toneClass = (tone) => toneSurface[tone];
+var cardClass = (tone) => tone === "brand" ? "border border-white/15 bg-white/5 text-white" : "border border-border bg-card text-card-foreground";
+var mutedTextClass = (tone) => tone === "brand" ? "text-white/80" : tone === "muted" ? "text-foreground/80" : "text-muted-foreground";
+var headingTextClass = (tone) => tone === "brand" ? "text-white" : "text-foreground";
+var accentTextClass = (tone) => tone === "brand" ? "text-white" : "text-primary-800 dark:text-primary-300";
+var containerClass = (width = "wide") => chunkS5RVSXDV_cjs.cn(
+  "mx-auto w-full px-4 sm:px-6 lg:px-8",
+  width === "narrow" ? "max-w-3xl" : "max-w-7xl"
+);
+var SAFE_HREF_SCHEME = /^(?:https?|mailto|tel):/i;
+function safeHref(href) {
+  if (href == null) return void 0;
+  const stripped = href.replace(/[\u0000-\u0020]/g, "");
+  if (!stripped) return void 0;
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(stripped)) return href;
+  return SAFE_HREF_SCHEME.test(stripped) ? href : void 0;
+}
+function TemplateAnchor({
+  components,
+  trackingId,
+  children,
+  ...props
+}) {
+  const Link = components?.Link;
+  const href = safeHref(props.href);
+  const all = { ...props, href, "data-track": trackingId };
+  return Link && href != null ? /* @__PURE__ */ jsxRuntime.jsx(Link, { ...all, href, children }) : /* @__PURE__ */ jsxRuntime.jsx("a", { ...all, children });
+}
+var fetchPriorityHigh = React2__namespace.version.startsWith("18.") ? { fetchpriority: "high" } : { fetchPriority: "high" };
+function TemplateImg({
+  components,
+  priority,
+  ...image
+}) {
+  const Image = components?.Image;
+  if (Image) return /* @__PURE__ */ jsxRuntime.jsx(Image, { ...image, priority });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ...image,
+      alt: image.alt,
+      loading: priority ? void 0 : "lazy",
+      ...priority ? fetchPriorityHigh : {},
+      decoding: "async"
+    }
+  );
+}
+function SectionHeading({
+  eyebrow,
+  title,
+  description,
+  as: Heading = "h2",
+  size = "section",
+  align = "start",
+  tone = "default",
+  titleId,
+  className
+}) {
+  if (!eyebrow && !title && !description) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "section-heading",
+      className: chunkS5RVSXDV_cjs.cn(
+        "max-w-3xl",
+        align === "center" && "mx-auto text-center",
+        className
+      ),
+      children: [
+        eyebrow && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: chunkS5RVSXDV_cjs.cn(
+              "mb-3 text-sm font-semibold tracking-wider uppercase",
+              accentTextClass(tone)
+            ),
+            children: eyebrow
+          }
+        ),
+        title && /* @__PURE__ */ jsxRuntime.jsx(
+          Heading,
+          {
+            id: titleId,
+            className: chunkS5RVSXDV_cjs.cn(
+              "font-bold tracking-tight text-balance",
+              headingTextClass(tone),
+              size === "hero" ? "text-4xl sm:text-5xl lg:text-6xl" : "text-3xl sm:text-4xl"
+            ),
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            className: chunkS5RVSXDV_cjs.cn(
+              "mt-4 text-pretty",
+              size === "hero" ? "text-lg sm:text-xl" : "text-lg",
+              mutedTextClass(tone)
+            ),
+            children: description
+          }
+        )
+      ]
+    }
+  );
+}
+var SectionShell = React2__namespace.forwardRef(
+  ({
+    eyebrow,
+    title,
+    description,
+    tone = "default",
+    align = "start",
+    width = "wide",
+    spacing = "default",
+    status,
+    statusLabels,
+    className,
+    children,
+    components,
+    ...rest
+  }, ref) => {
+    const titleId = React2__namespace.useId();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        ref,
+        "data-slot": "landing-section",
+        "data-tone": tone,
+        "aria-labelledby": title ? titleId : void 0,
+        className: chunkS5RVSXDV_cjs.cn(
+          spacing === "compact" ? "py-10 sm:py-14" : "py-16 sm:py-24",
+          toneClass(tone),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass(width), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SectionHeading,
+            {
+              eyebrow,
+              title,
+              description,
+              align,
+              tone,
+              titleId,
+              className: chunkS5RVSXDV_cjs.cn(width === "narrow" && "max-w-none")
+            }
+          ),
+          status && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: chunkS5RVSXDV_cjs.cn(
+                "mt-4 flex",
+                align === "center" && "justify-center"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                MetricStatusBadge,
+                {
+                  status,
+                  label: statusLabels?.[status],
+                  onDark: tone === "brand"
+                }
+              )
+            }
+          ),
+          children
+        ] })
+      }
+    );
+  }
+);
+SectionShell.displayName = "SectionShell";
+function CtaLinks({
+  primary,
+  secondary,
+  tone = "default",
+  align = "start",
+  className,
+  components
+}) {
+  if (!primary && !secondary) return null;
+  const onBrand = tone === "brand";
+  const wrap = "h-auto min-h-12 py-3 whitespace-normal text-center";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "cta-links",
+      className: chunkS5RVSXDV_cjs.cn(
+        "flex flex-col gap-3 sm:flex-row sm:flex-wrap",
+        align === "center" && "sm:justify-center",
+        className
+      ),
+      children: [
+        primary && /* @__PURE__ */ jsxRuntime.jsxs(
+          TemplateAnchor,
+          {
+            href: primary.href,
+            trackingId: primary.trackingId,
+            components,
+            "data-slot": "cta-primary",
+            className: chunkS5RVSXDV_cjs.cn(
+              chunkDXEPYK3I_cjs.buttonVariants({ variant: "primary", size: "lg" }),
+              wrap,
+              onBrand && "text-primary-900 hover:bg-primary-50 active:bg-primary-100 bg-white"
+            ),
+            children: [
+              primary.label,
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { "aria-hidden": "true", className: "size-5 rtl:-scale-x-100" })
+            ]
+          }
+        ),
+        secondary && /* @__PURE__ */ jsxRuntime.jsx(
+          TemplateAnchor,
+          {
+            href: secondary.href,
+            trackingId: secondary.trackingId,
+            components,
+            "data-slot": "cta-secondary",
+            className: chunkS5RVSXDV_cjs.cn(
+              chunkDXEPYK3I_cjs.buttonVariants({ variant: "outline", size: "lg" }),
+              wrap,
+              onBrand && "border-white/70 text-white hover:bg-white/10 hover:text-white dark:border-white/70 dark:text-white dark:hover:bg-white/10"
+            ),
+            children: secondary.label
+          }
+        )
+      ]
+    }
+  );
+}
+function IconTile({
+  name,
+  icons,
+  tone = "default",
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "data-slot": "icon-tile",
+      className: chunkS5RVSXDV_cjs.cn(
+        "inline-flex size-11 shrink-0 items-center justify-center rounded-xl",
+        tone === "brand" ? "bg-white/10 text-white" : "bg-primary-100 text-primary-900 dark:bg-primary-900/60 dark:text-primary-200",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx(TemplateIcon, { name, icons })
+    }
+  );
+}
+
+exports.CtaLinks = CtaLinks;
+exports.IconTile = IconTile;
+exports.MetricStatusBadge = MetricStatusBadge;
+exports.SectionHeading = SectionHeading;
+exports.SectionShell = SectionShell;
+exports.TemplateAnchor = TemplateAnchor;
+exports.TemplateIcon = TemplateIcon;
+exports.TemplateImg = TemplateImg;
+exports.accentTextClass = accentTextClass;
+exports.cardClass = cardClass;
+exports.containerClass = containerClass;
+exports.defaultMetricStatusLabels = defaultMetricStatusLabels;
+exports.headingTextClass = headingTextClass;
+exports.mutedTextClass = mutedTextClass;
+exports.ownProperty = ownProperty;
+exports.safeHref = safeHref;
+exports.templateIcons = templateIcons;
+exports.toneClass = toneClass;
+//# sourceMappingURL=chunk-XI74P5F2.cjs.map
+//# sourceMappingURL=chunk-XI74P5F2.cjs.map