@orangecheck/app-design 0.5.10 → 0.5.11

package/dist/components.mjs

@@ -1,4 +1,4 @@
-import { forwardRef, createContext, createElement, useRef, useState, useEffect, useContext, Children, isValidElement, cloneElement, useCallback } from 'react';
+import { forwardRef, createContext, createElement, useRef, useState, useEffect, useContext, Children, isValidElement, cloneElement, useCallback, Component } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -419,7 +419,13 @@ function StepGrid({ items, look = "cards", className }) {
     ] }) }, i)
   ) });
 }
-function ScrollFade({ fade = "var(--card)", className, innerClassName, children, ...props }) {
+function ScrollFade({
+  fade = "var(--card)",
+  className,
+  innerClassName,
+  children,
+  ...props
+}) {
   const ref = useRef(null);
   const [edges, setEdges] = useState({ left: false, right: false });
   const measure = useCallback(() => {
@@ -427,7 +433,9 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
     if (!el) return;
     const left = el.scrollLeft > 1;
     const right = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setEdges((e) => e.left === left && e.right === right ? e : { left, right });
+    setEdges(
+      (e) => e.left === left && e.right === right ? e : { left, right }
+    );
   }, []);
   useEffect(() => {
     const el = ref.current;
@@ -440,7 +448,19 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
     return () => ro.disconnect();
   }, [measure]);
   return /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0", className), ...props, children: [
-    /* @__PURE__ */ jsx("div", { ref, onScroll: measure, className: cn("overflow-x-auto overscroll-x-contain", innerClassName), children }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        onScroll: measure,
+        tabIndex: edges.left || edges.right ? 0 : void 0,
+        className: cn(
+          "overflow-x-auto overscroll-x-contain rounded-[inherit] outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          innerClassName
+        ),
+        children
+      }
+    ),
     /* @__PURE__ */ jsx(
       "span",
       {
@@ -449,7 +469,9 @@ function ScrollFade({ fade = "var(--card)", className, innerClassName, children,
           "pointer-events-none absolute inset-y-0 left-0 w-8 transition-opacity duration-150",
           edges.left ? "opacity-100" : "opacity-0"
         ),
-        style: { background: `linear-gradient(to right, ${fade}, transparent)` }
+        style: {
+          background: `linear-gradient(to right, ${fade}, transparent)`
+        }
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1390,7 +1412,45 @@ function Monogram({
     }
   );
 }
+var ErrorBoundary = class extends Component {
+  constructor() {
+    super(...arguments);
+    this.state = { failed: false, key: this.props.resetKey };
+    this.reset = () => this.setState({ failed: false });
+  }
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  static getDerivedStateFromProps(props, state) {
+    return props.resetKey === state.key ? null : { failed: false, key: props.resetKey };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  render() {
+    if (!this.state.failed) return this.props.children;
+    if (this.props.fallback) return this.props.fallback(this.reset);
+    return /* @__PURE__ */ jsx("div", { className: "oca-container py-16", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "Something on this page broke.",
+        action: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { onClick: this.reset, children: "Try again" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              onClick: () => window.location.reload(),
+              children: "Reload the page"
+            }
+          )
+        ] }),
+        children: "Nothing you saved is affected. If it keeps happening, tell us at hello@ochk.io."
+      }
+    ) });
+  }
+};
 
-export { Accent, ActivityList, BrowserFrame, CodeBlock, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, Eyebrow, FloatChip, Footnote, HashChip, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, Prose, Reveal, Sats, SatsFigure, ScrollStory, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, Ticker, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
+export { Accent, ActivityList, BrowserFrame, CodeBlock, Container, CopyButton, DataTable, Display, DocHeader, DocLayout, EmptyLine, EmptyState, ErrorBoundary, Eyebrow, FloatChip, Footnote, HashChip, KeyValueList, Lead, LoadingBlock, Monogram, Notice, PackageCard, PageHeader, PageHero, PhoneFrame, ProgressSteps, Prose, Reveal, Sats, SatsFigure, ScrollStory, Section, SectionIntro, SplitBar, StatCard, StatGrid, StepGrid, Ticker, TruthTable, UsdApprox, monogramGround, monogramLetter, satsText, sectionVariants, useCopy, useInView };
 //# sourceMappingURL=components.mjs.map
 //# sourceMappingURL=components.mjs.map