@orangecheck/design 0.29.1 → 0.30.1

package/dist/components.d.mts

@@ -1,4 +1,4 @@
-export { AccentList, AccentListItem, AccentListProps, AccentNote, AccentNoteProps, BrandBand, Callout, CalloutProps, CalloutTone, CheckList, CheckListProps, ComparisonRow, ComparisonTable, ComparisonTableProps, DataRow, DataRowProps, DefinitionItem, DefinitionList, DefinitionListProps, EmailCapture, EmailCaptureProps, EmptyState, EmptyStateCta, EmptyStateProps, Faq, FaqItem, FaqProps, FeatureCard, FeatureCardProps, HelpHint, HelpHintProps, MarketingHeading, MarketingHeadingProps, NumberedStep, NumberedStepProps, Panel, PanelProps, Section, SectionHeader, SectionHeaderProps, SectionProps, StatCard, StatCardProps, StatGrid, StatGridProps, StatItem, StatTile, Step, StepList, StepListProps, TwoToneHeading, TwoToneHeadingProps, VerifiedChip, VerifiedChipProps } from './composites.mjs';
+export { AccentList, AccentListItem, AccentListProps, AccentNote, AccentNoteProps, BrandBand, Callout, CalloutProps, CalloutTone, CheckList, CheckListProps, ComparisonRow, ComparisonTable, ComparisonTableProps, DataRow, DataRowProps, DefinitionItem, DefinitionList, DefinitionListProps, EmailCapture, EmailCaptureProps, EmptyState, EmptyStateCta, EmptyStateProps, Faq, FaqItem, FaqProps, FeatureCard, FeatureCardProps, HelpHint, HelpHintProps, MarketingHeading, MarketingHeadingProps, NumberedStep, NumberedStepProps, OcErrorPage, OcErrorPageProps, OcErrorVariant, Panel, PanelProps, Section, SectionHeader, SectionHeaderProps, SectionProps, StatCard, StatCardProps, StatGrid, StatGridProps, StatItem, StatTile, Step, StepList, StepListProps, TwoToneHeading, TwoToneHeadingProps, VerifiedChip, VerifiedChipProps } from './composites.mjs';
 export { AppShell, AppShellProps, EcosystemSlug, EcosystemSwitcher, EcosystemSwitcherProps, FAMILY_PROPERTIES, FamilyCategory, FamilyProperty, FooterColumn, FooterLink, LayoutSubHeader, LayoutSubHeaderProps, LayoutSubHeaderTag, OcAccountMenu, OcAccountMenuBuildInfo, OcAccountMenuItem, OcAccountMenuProps, OcAccountMenuSession, OcAccountMenuView, OcAccountMenuViewProps, OcAppBar, OcAppBarProps, OcDashboardHub, OcDashboardHubProps, OcDashboardShell, OcDashboardShellProps, OcDashboardTool, OcFamilyFooter, OcFamilyFooterBrand, OcFamilyFooterProps, OcLogoDropdown, OcLogoDropdownProps, OcPrimaryNav, OcPrimaryNavLink, OcPrimaryNavProps, SITE_STATE_LABEL, SiteState, findFamilyProperty } from './chrome.mjs';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components.d.ts

@@ -1,4 +1,4 @@
-export { AccentList, AccentListItem, AccentListProps, AccentNote, AccentNoteProps, BrandBand, Callout, CalloutProps, CalloutTone, CheckList, CheckListProps, ComparisonRow, ComparisonTable, ComparisonTableProps, DataRow, DataRowProps, DefinitionItem, DefinitionList, DefinitionListProps, EmailCapture, EmailCaptureProps, EmptyState, EmptyStateCta, EmptyStateProps, Faq, FaqItem, FaqProps, FeatureCard, FeatureCardProps, HelpHint, HelpHintProps, MarketingHeading, MarketingHeadingProps, NumberedStep, NumberedStepProps, Panel, PanelProps, Section, SectionHeader, SectionHeaderProps, SectionProps, StatCard, StatCardProps, StatGrid, StatGridProps, StatItem, StatTile, Step, StepList, StepListProps, TwoToneHeading, TwoToneHeadingProps, VerifiedChip, VerifiedChipProps } from './composites.js';
+export { AccentList, AccentListItem, AccentListProps, AccentNote, AccentNoteProps, BrandBand, Callout, CalloutProps, CalloutTone, CheckList, CheckListProps, ComparisonRow, ComparisonTable, ComparisonTableProps, DataRow, DataRowProps, DefinitionItem, DefinitionList, DefinitionListProps, EmailCapture, EmailCaptureProps, EmptyState, EmptyStateCta, EmptyStateProps, Faq, FaqItem, FaqProps, FeatureCard, FeatureCardProps, HelpHint, HelpHintProps, MarketingHeading, MarketingHeadingProps, NumberedStep, NumberedStepProps, OcErrorPage, OcErrorPageProps, OcErrorVariant, Panel, PanelProps, Section, SectionHeader, SectionHeaderProps, SectionProps, StatCard, StatCardProps, StatGrid, StatGridProps, StatItem, StatTile, Step, StepList, StepListProps, TwoToneHeading, TwoToneHeadingProps, VerifiedChip, VerifiedChipProps } from './composites.js';
 export { AppShell, AppShellProps, EcosystemSlug, EcosystemSwitcher, EcosystemSwitcherProps, FAMILY_PROPERTIES, FamilyCategory, FamilyProperty, FooterColumn, FooterLink, LayoutSubHeader, LayoutSubHeaderProps, LayoutSubHeaderTag, OcAccountMenu, OcAccountMenuBuildInfo, OcAccountMenuItem, OcAccountMenuProps, OcAccountMenuSession, OcAccountMenuView, OcAccountMenuViewProps, OcAppBar, OcAppBarProps, OcDashboardHub, OcDashboardHubProps, OcDashboardShell, OcDashboardShellProps, OcDashboardTool, OcFamilyFooter, OcFamilyFooterBrand, OcFamilyFooterProps, OcLogoDropdown, OcLogoDropdownProps, OcPrimaryNav, OcPrimaryNavLink, OcPrimaryNavProps, SITE_STATE_LABEL, SiteState, findFamilyProperty } from './chrome.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/components.js

@@ -5,10 +5,10 @@ var lucideReact = require('lucide-react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var Link6 = require('next/link');
-var React2 = require('react');
+var Link7 = require('next/link');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
+var React2 = require('react');
 require('@radix-ui/react-label');
 require('@radix-ui/react-checkbox');
 require('@radix-ui/react-radio-group');
@@ -45,7 +45,7 @@ function _interopNamespace(e) {
 }
 
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
-var Link6__default = /*#__PURE__*/_interopDefault(Link6);
+var Link7__default = /*#__PURE__*/_interopDefault(Link7);
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
@@ -121,6 +121,153 @@ function SectionHeader({
     meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/70 font-mono text-[10px] tracking-widest uppercase", children: meta })
   ] });
 }
+var buttonVariants = classVarianceAuthority.cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
+        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        // For CTAs placed ON a saturated brand band or a dark section
+        // (e.g. a terracotta hero / footer / a forced-dark block) where
+        // the surface is dark+light-text in either mode. A neutral white
+        // pill + a translucent-white ghost read on any such surface;
+        // hardcoded white is deliberate (cf. destructive's text-white).
+        onBrand: "bg-white text-neutral-900 shadow-sm hover:bg-white/90",
+        onBrandOutline: "border border-white/40 bg-transparent text-white hover:bg-white/10"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var VARIANTS = {
+  "not-found": {
+    code: 404,
+    title: "no such route",
+    detail: "the page you're looking for doesn't exist, or has been moved.",
+    tone: "text-primary",
+    label: "not found",
+    actions: []
+  },
+  "server-error": {
+    code: 500,
+    title: "internal error",
+    detail: "something went wrong on our end.",
+    tone: "text-destructive",
+    label: "server error",
+    actions: [
+      "try refreshing the page",
+      "wait a few minutes, try again",
+      "return home and start over"
+    ]
+  }
+};
+function OcErrorPage({
+  variant = "not-found",
+  code,
+  title,
+  detail,
+  actions,
+  homeHref = "/",
+  children,
+  className = ""
+}) {
+  const v = VARIANTS[variant];
+  const shownCode = code ?? v.code;
+  const shownActions = actions ?? [...v.actions];
+  const isServerError = variant === "server-error";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `container flex min-h-[60vh] flex-col items-center justify-center ${className}`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `label-mono mb-4 ${v.tone}`, children: [
+          "\xA7 ",
+          shownCode,
+          " // ",
+          v.label
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h1",
+          {
+            className: `font-display text-7xl font-bold tracking-tight tabular-nums sm:text-8xl ${v.tone}`,
+            children: shownCode
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display mt-2 text-2xl font-bold tracking-tight sm:text-3xl", children: title ?? v.title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-muted-foreground mt-3 font-mono text-xs", children: [
+          "// ",
+          detail ?? v.detail
+        ] }),
+        shownActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 border", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b px-4 py-2 font-mono text-[11px] tracking-widest uppercase", children: "what can you do" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y font-mono text-xs", children: shownActions.map((a, i) => (
+            // Index keys: items are nodes and the list is
+            // static per variant, so there is nothing
+            // better to key on and nothing reorders.
+            /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "px-4 py-2", children: [
+              ">> ",
+              a
+            ] }, i)
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 flex flex-wrap gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Button, { asChild: true, className: "font-mono", children: /* @__PURE__ */ jsxRuntime.jsxs(Link7__default.default, { href: homeHref, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "mr-2 h-3 w-3" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] tracking-widest uppercase", children: "go home" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "outline",
+              onClick: () => {
+                if (typeof window === "undefined") return;
+                if (isServerError) window.location.reload();
+                else window.history.back();
+              },
+              className: "font-mono",
+              children: [
+                isServerError ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "mr-2 h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "mr-2 h-3 w-3" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] tracking-widest uppercase", children: isServerError ? "retry" : "go back" })
+              ]
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children })
+      ] })
+    }
+  );
+}
 var TONE_CLASS2 = {
   info: "border-primary/30 bg-primary/5",
   warning: "border-warning/40 bg-warning/5",
@@ -162,7 +309,7 @@ function CtaLink({
   if (external) {
     return /* @__PURE__ */ jsxRuntime.jsx("a", { href, target: "_blank", rel: "noreferrer", className: cls, children: text });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href, className: cls, children: text });
+  return /* @__PURE__ */ jsxRuntime.jsx(Link7__default.default, { href, className: cls, children: text });
 }
 var TONE_CLASS3 = {
   default: "",
@@ -389,55 +536,6 @@ function MarketingHeading({
     )
   ] });
 }
-var buttonVariants = classVarianceAuthority.cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white",
-        outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-        // For CTAs placed ON a saturated brand band or a dark section
-        // (e.g. a terracotta hero / footer / a forced-dark block) where
-        // the surface is dark+light-text in either mode. A neutral white
-        // pill + a translucent-white ghost read on any such surface;
-        // hardcoded white is deliberate (cf. destructive's text-white).
-        onBrand: "bg-white text-neutral-900 shadow-sm hover:bg-white/90",
-        onBrandOutline: "border border-white/40 bg-transparent text-white hover:bg-white/10"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? reactSlot.Slot : "button";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
 classVarianceAuthority.cva(
   "focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
   {
@@ -1244,7 +1342,7 @@ function EcosystemSwitcher({
           /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "py-1", children: [...ENTRIES, ...showOwnerEntries ? OWNER_ENTRIES : []].map((e) => {
             const isActive2 = e.slug === current;
             return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-              Link6__default.default,
+              Link7__default.default,
               {
                 href: e.href,
                 onClick: () => setOpen(false),
@@ -1265,7 +1363,7 @@ function EcosystemSwitcher({
             ) }, e.slug);
           }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-4 py-2 font-mono text-[10px] tracking-widest uppercase", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Link6__default.default,
+            Link7__default.default,
             {
               href: "https://docs.ochk.io",
               onClick: () => setOpen(false),
@@ -1612,7 +1710,7 @@ function OcLogoDropdown({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
-          Link6__default.default,
+          Link7__default.default,
           {
             href: homeHref,
             "aria-label": "go to " + homeHref + " (this site's home)",
@@ -1662,7 +1760,7 @@ function OcLogoDropdown({
                     const isActive2 = e.slug === current;
                     const href = isActive2 ? homeHref : e.origin;
                     return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                      Link6__default.default,
+                      Link7__default.default,
                       {
                         href,
                         role: "menuitem",
@@ -1694,7 +1792,7 @@ function OcLogoDropdown({
                 ] }, category);
               }) }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t px-4 py-2 font-mono text-[10px] tracking-widest uppercase", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Link6__default.default,
+                Link7__default.default,
                 {
                   href: "https://docs.ochk.io",
                   onClick: () => setOpen(false),
@@ -2124,7 +2222,7 @@ function MobileMenu({
                 },
                 l.href
               ) : /* @__PURE__ */ jsxRuntime.jsxs(
-                Link6__default.default,
+                Link7__default.default,
                 {
                   href: l.href,
                   role: "menuitem",
@@ -2359,7 +2457,7 @@ function OcAccountMenuView({
                   },
                   item.href
                 ) : /* @__PURE__ */ jsxRuntime.jsx(
-                  Link6__default.default,
+                  Link7__default.default,
                   {
                     href: item.href,
                     onClick,
@@ -2580,7 +2678,7 @@ function PopoverSection({
             },
             item.href
           ) : /* @__PURE__ */ jsxRuntime.jsxs(
-            Link6__default.default,
+            Link7__default.default,
             {
               href: item.href,
               onClick: onItemClick,
@@ -2683,7 +2781,7 @@ function OcPrimaryNav({
           },
           link.href
         ) : /* @__PURE__ */ jsxRuntime.jsx(
-          Link6__default.default,
+          Link7__default.default,
           {
             href: link.href,
             "aria-current": active ? "page" : void 0,
@@ -2758,7 +2856,7 @@ function OcDashboardShell({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                Link6__default.default,
+                Link7__default.default,
                 {
                   href: rootHref,
                   className: "text-primary font-mono text-[11px] tracking-widest uppercase",
@@ -2830,7 +2928,7 @@ function Sidebar({
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b px-4 py-3", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              Link6__default.default,
+              Link7__default.default,
               {
                 href: rootHref,
                 onClick: onClose,
@@ -2890,7 +2988,7 @@ function Sidebar({
                 children: content
               }
             ) : /* @__PURE__ */ jsxRuntime.jsx(
-              Link6__default.default,
+              Link7__default.default,
               {
                 href: tool.href,
                 onClick: onClose,
@@ -2952,7 +3050,7 @@ function OcDashboardHub({ tools, className }) {
             className: cls,
             children: content
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(Link6__default.default, { href: tool.href, className: cls, children: content }) }, tool.id);
+        ) : /* @__PURE__ */ jsxRuntime.jsx(Link7__default.default, { href: tool.href, className: cls, children: content }) }, tool.id);
       })
     }
   );
@@ -3054,7 +3152,7 @@ function FooterLinkItem({ link }) {
       " \u2197"
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Link6__default.default, { href: link.href, className: LINK_CLS, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Link7__default.default, { href: link.href, className: LINK_CLS, children: [
     "> ",
     link.label
   ] });
@@ -3165,6 +3263,7 @@ exports.OcAccountMenuView = OcAccountMenuView;
 exports.OcAppBar = OcAppBar;
 exports.OcDashboardHub = OcDashboardHub;
 exports.OcDashboardShell = OcDashboardShell;
+exports.OcErrorPage = OcErrorPage;
 exports.OcFamilyFooter = OcFamilyFooter;
 exports.OcLogoDropdown = OcLogoDropdown;
 exports.OcPrimaryNav = OcPrimaryNav;