@orangecheck/design 0.29.1 → 0.30.0

package/dist/composites.d.mts

@@ -14,6 +14,19 @@ interface SectionHeaderProps {
 }
 declare function SectionHeader({ label, meta, hint, tone, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
 
+type OcErrorVariant = 'not-found' | 'server-error';
+interface OcErrorPageProps {
+    variant?: OcErrorVariant;
+    code?: number | string;
+    title?: string;
+    detail?: string;
+    actions?: string[];
+    homeHref?: string;
+    children?: ReactNode;
+    className?: string;
+}
+declare function OcErrorPage({ variant, code, title, detail, actions, homeHref, children, className, }: OcErrorPageProps): react_jsx_runtime.JSX.Element;
+
 interface EmptyStateCta {
     label: string;
     href: string;
@@ -252,4 +265,4 @@ interface VerifiedChipProps {
 }
 declare function VerifiedChip({ icon, iconTone, label, className }: VerifiedChipProps): react_jsx_runtime.JSX.Element;
 
-export { AccentList, type AccentListItem, type AccentListProps, AccentNote, type AccentNoteProps, BrandBand, Callout, type CalloutProps, type CalloutTone, CheckList, type CheckListProps, type ComparisonRow, ComparisonTable, type ComparisonTableProps, DataRow, type DataRowProps, type DefinitionItem, DefinitionList, type DefinitionListProps, EmailCapture, type EmailCaptureProps, EmptyState, type EmptyStateCta, type EmptyStateProps, Faq, type FaqItem, type FaqProps, FeatureCard, type FeatureCardProps, HelpHint, type HelpHintProps, MarketingHeading, type MarketingHeadingProps, NumberedStep, type NumberedStepProps, Panel, type PanelProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatCard, type StatCardProps, StatGrid, type StatGridProps, type StatItem, StatTile, type Step, StepList, type StepListProps, TwoToneHeading, type TwoToneHeadingProps, VerifiedChip, type VerifiedChipProps };
+export { AccentList, type AccentListItem, type AccentListProps, AccentNote, type AccentNoteProps, BrandBand, Callout, type CalloutProps, type CalloutTone, CheckList, type CheckListProps, type ComparisonRow, ComparisonTable, type ComparisonTableProps, DataRow, type DataRowProps, type DefinitionItem, DefinitionList, type DefinitionListProps, EmailCapture, type EmailCaptureProps, EmptyState, type EmptyStateCta, type EmptyStateProps, Faq, type FaqItem, type FaqProps, FeatureCard, type FeatureCardProps, HelpHint, type HelpHintProps, MarketingHeading, type MarketingHeadingProps, NumberedStep, type NumberedStepProps, OcErrorPage, type OcErrorPageProps, type OcErrorVariant, Panel, type PanelProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatCard, type StatCardProps, StatGrid, type StatGridProps, type StatItem, StatTile, type Step, StepList, type StepListProps, TwoToneHeading, type TwoToneHeadingProps, VerifiedChip, type VerifiedChipProps };

package/dist/composites.d.ts

@@ -14,6 +14,19 @@ interface SectionHeaderProps {
 }
 declare function SectionHeader({ label, meta, hint, tone, className, }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
 
+type OcErrorVariant = 'not-found' | 'server-error';
+interface OcErrorPageProps {
+    variant?: OcErrorVariant;
+    code?: number | string;
+    title?: string;
+    detail?: string;
+    actions?: string[];
+    homeHref?: string;
+    children?: ReactNode;
+    className?: string;
+}
+declare function OcErrorPage({ variant, code, title, detail, actions, homeHref, children, className, }: OcErrorPageProps): react_jsx_runtime.JSX.Element;
+
 interface EmptyStateCta {
     label: string;
     href: string;
@@ -252,4 +265,4 @@ interface VerifiedChipProps {
 }
 declare function VerifiedChip({ icon, iconTone, label, className }: VerifiedChipProps): react_jsx_runtime.JSX.Element;
 
-export { AccentList, type AccentListItem, type AccentListProps, AccentNote, type AccentNoteProps, BrandBand, Callout, type CalloutProps, type CalloutTone, CheckList, type CheckListProps, type ComparisonRow, ComparisonTable, type ComparisonTableProps, DataRow, type DataRowProps, type DefinitionItem, DefinitionList, type DefinitionListProps, EmailCapture, type EmailCaptureProps, EmptyState, type EmptyStateCta, type EmptyStateProps, Faq, type FaqItem, type FaqProps, FeatureCard, type FeatureCardProps, HelpHint, type HelpHintProps, MarketingHeading, type MarketingHeadingProps, NumberedStep, type NumberedStepProps, Panel, type PanelProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatCard, type StatCardProps, StatGrid, type StatGridProps, type StatItem, StatTile, type Step, StepList, type StepListProps, TwoToneHeading, type TwoToneHeadingProps, VerifiedChip, type VerifiedChipProps };
+export { AccentList, type AccentListItem, type AccentListProps, AccentNote, type AccentNoteProps, BrandBand, Callout, type CalloutProps, type CalloutTone, CheckList, type CheckListProps, type ComparisonRow, ComparisonTable, type ComparisonTableProps, DataRow, type DataRowProps, type DefinitionItem, DefinitionList, type DefinitionListProps, EmailCapture, type EmailCaptureProps, EmptyState, type EmptyStateCta, type EmptyStateProps, Faq, type FaqItem, type FaqProps, FeatureCard, type FeatureCardProps, HelpHint, type HelpHintProps, MarketingHeading, type MarketingHeadingProps, NumberedStep, type NumberedStepProps, OcErrorPage, type OcErrorPageProps, type OcErrorVariant, Panel, type PanelProps, Section, SectionHeader, type SectionHeaderProps, type SectionProps, StatCard, type StatCardProps, StatGrid, type StatGridProps, type StatItem, StatTile, type Step, StepList, type StepListProps, TwoToneHeading, type TwoToneHeadingProps, VerifiedChip, type VerifiedChipProps };

package/dist/composites.js

@@ -6,9 +6,9 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 var Link = require('next/link');
-var React3 = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
+var React3 = require('react');
 require('@radix-ui/react-label');
 require('@radix-ui/react-checkbox');
 require('@radix-ui/react-radio-group');
@@ -119,6 +119,142 @@ 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) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "px-4 py-2", children: [
+            ">> ",
+            a
+          ] }, a)) })
+        ] }),
+        /* @__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.jsx(Link__default.default, { href: homeHref, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] tracking-widest uppercase", children: "go home" }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: () => {
+                if (typeof window === "undefined") return;
+                if (isServerError) window.location.reload();
+                else window.history.back();
+              },
+              className: "font-mono",
+              children: /* @__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",
@@ -387,55 +523,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",
   {
@@ -937,6 +1024,7 @@ exports.FeatureCard = FeatureCard;
 exports.HelpHint = HelpHint;
 exports.MarketingHeading = MarketingHeading;
 exports.NumberedStep = NumberedStep;
+exports.OcErrorPage = OcErrorPage;
 exports.Panel = Panel;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;