@orangecheck/design 0.21.0 → 0.23.0

package/dist/composites.d.mts

@@ -101,6 +101,16 @@ interface DataRowProps {
 }
 declare function DataRow({ children, meta, action, as, className }: DataRowProps): react_jsx_runtime.JSX.Element;
 
+interface PanelProps {
+    label?: ReactNode;
+    title?: ReactNode;
+    action?: ReactNode;
+    flush?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare function Panel({ label, title, action, flush, className, children }: PanelProps): react_jsx_runtime.JSX.Element;
+
 interface TwoToneHeadingProps {
     lead: ReactNode;
     muted?: ReactNode;
@@ -242,4 +252,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, 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, 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

@@ -101,6 +101,16 @@ interface DataRowProps {
 }
 declare function DataRow({ children, meta, action, as, className }: DataRowProps): react_jsx_runtime.JSX.Element;
 
+interface PanelProps {
+    label?: ReactNode;
+    title?: ReactNode;
+    action?: ReactNode;
+    flush?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+declare function Panel({ label, title, action, flush, className, children }: PanelProps): react_jsx_runtime.JSX.Element;
+
 interface TwoToneHeadingProps {
     lead: ReactNode;
     muted?: ReactNode;
@@ -242,4 +252,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, 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, 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

@@ -177,11 +177,11 @@ var COL_CLASS = {
   4: "md:grid-cols-2 lg:grid-cols-4"
 };
 function StatGrid({ items, columns = 3, className = "" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `bg-border grid gap-px border ${COL_CLASS[columns]} ${className}`, children: items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(Tile, { item: it }, `${it.label}-${i}`)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `oc-stat-grid bg-border grid gap-px border ${COL_CLASS[columns]} ${className}`, children: items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx(Tile, { item: it }, `${it.label}-${i}`)) });
 }
 function Tile({ item }) {
   const tone = item.tone ?? (item.accent ? "primary" : "default");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background p-5", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oc-stat-tile bg-background p-5", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground/80 font-mono text-[10px] tracking-widest uppercase", children: item.label }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -234,7 +234,7 @@ function StatBlock({ label, value, sub, delta, tone = "default", className }) {
   ] });
 }
 function StatCard({ pad = "default", className, ...stat }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("border bg-card", pad === "sm" ? "p-3 md:p-4" : "p-5", className), children: /* @__PURE__ */ jsxRuntime.jsx(StatBlock, { ...stat }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("oc-stat-card border bg-card", pad === "sm" ? "p-3 md:p-4" : "p-5", className), children: /* @__PURE__ */ jsxRuntime.jsx(StatBlock, { ...stat }) });
 }
 var FRAME = {
   info: "border-primary/30 bg-primary/5",
@@ -271,7 +271,7 @@ function DefinitionList({ items, className }) {
     "dl",
     {
       className: cn(
-        "grid gap-x-5 gap-y-2 text-sm sm:grid-cols-[auto_1fr] sm:items-baseline",
+        "oc-deflist grid gap-x-5 gap-y-2 text-sm sm:grid-cols-[auto_1fr] sm:items-baseline",
         className
       ),
       children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(React3.Fragment, { children: [
@@ -287,7 +287,7 @@ function DataRow({ children, meta, action, as, className }) {
     Tag,
     {
       className: cn(
-        "flex flex-col gap-1 py-3 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4",
+        "oc-data-row flex flex-col gap-1 py-3 sm:flex-row sm:items-baseline sm:justify-between sm:gap-4",
         className
       ),
       children: [
@@ -300,6 +300,19 @@ function DataRow({ children, meta, action, as, className }) {
     }
   );
 }
+function Panel({ label, title, action, flush, className, children }) {
+  const hasHeader = label || title || action;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cn("oc-panel py-8", !flush && "border-t", className), children: [
+    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-start justify-between gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "label-mono text-primary mb-1", children: label }),
+        title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-display text-lg font-bold tracking-tight", children: title })
+      ] }),
+      action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action })
+    ] }),
+    children
+  ] });
+}
 function TwoToneHeading({
   lead,
   muted,
@@ -309,7 +322,7 @@ function TwoToneHeading({
 }) {
   const Tag = as ?? "h2";
   const leadColor = tone === "onBrand" ? "text-primary-foreground" : "text-foreground";
-  const mutedColor = tone === "onBrand" ? "text-primary-foreground/60" : "text-foreground/40";
+  const mutedColor = tone === "onBrand" ? "text-primary-foreground/75" : "text-foreground/40";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Tag,
     {
@@ -924,6 +937,7 @@ exports.FeatureCard = FeatureCard;
 exports.HelpHint = HelpHint;
 exports.MarketingHeading = MarketingHeading;
 exports.NumberedStep = NumberedStep;
+exports.Panel = Panel;
 exports.Section = Section;
 exports.SectionHeader = SectionHeader;
 exports.StatCard = StatCard;