@orangecheck/design 0.13.0 → 0.14.0

package/dist/chrome.d.mts

@@ -96,7 +96,7 @@ interface OcPrimaryNavProps {
     links: ReadonlyArray<OcPrimaryNavLink>;
     className?: string;
 }
-declare function OcPrimaryNav({ activePath, links, className }: OcPrimaryNavProps): react_jsx_runtime.JSX.Element;
+declare function OcPrimaryNav({ activePath, links, className, }: OcPrimaryNavProps): react_jsx_runtime.JSX.Element;
 
 interface OcDashboardTool {
     id: string;
@@ -147,4 +147,14 @@ interface LayoutSubHeaderProps {
 }
 declare function LayoutSubHeader({ product, status, tags, noHeartbeat, className, }: LayoutSubHeaderProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, type EcosystemSlug, EcosystemSwitcher, type EcosystemSwitcherProps, FAMILY_PROPERTIES, type FamilyCategory, type FamilyProperty, LayoutSubHeader, type LayoutSubHeaderProps, type LayoutSubHeaderTag, OcAccountMenu, type OcAccountMenuBuildInfo, type OcAccountMenuItem, type OcAccountMenuProps, type OcAccountMenuSession, OcAccountMenuView, type OcAccountMenuViewProps, OcDashboardHub, type OcDashboardHubProps, OcDashboardShell, type OcDashboardShellProps, type OcDashboardTool, OcLogoDropdown, type OcLogoDropdownProps, OcPrimaryNav, type OcPrimaryNavLink, type OcPrimaryNavProps, SITE_STATE_LABEL, type SiteState, findFamilyProperty };
+interface OcAppBarProps {
+    variant?: 'full' | 'contained';
+    start?: ReactNode;
+    center?: ReactNode;
+    end?: ReactNode;
+    sticky?: boolean;
+    className?: string;
+}
+declare function OcAppBar({ variant, start, center, end, sticky, className, }: OcAppBarProps): react_jsx_runtime.JSX.Element;
+
+export { AppShell, type AppShellProps, type EcosystemSlug, EcosystemSwitcher, type EcosystemSwitcherProps, FAMILY_PROPERTIES, type FamilyCategory, type FamilyProperty, LayoutSubHeader, type LayoutSubHeaderProps, type LayoutSubHeaderTag, OcAccountMenu, type OcAccountMenuBuildInfo, type OcAccountMenuItem, type OcAccountMenuProps, type OcAccountMenuSession, OcAccountMenuView, type OcAccountMenuViewProps, OcAppBar, type OcAppBarProps, OcDashboardHub, type OcDashboardHubProps, OcDashboardShell, type OcDashboardShellProps, type OcDashboardTool, OcLogoDropdown, type OcLogoDropdownProps, OcPrimaryNav, type OcPrimaryNavLink, type OcPrimaryNavProps, SITE_STATE_LABEL, type SiteState, findFamilyProperty };

package/dist/chrome.d.ts

@@ -96,7 +96,7 @@ interface OcPrimaryNavProps {
     links: ReadonlyArray<OcPrimaryNavLink>;
     className?: string;
 }
-declare function OcPrimaryNav({ activePath, links, className }: OcPrimaryNavProps): react_jsx_runtime.JSX.Element;
+declare function OcPrimaryNav({ activePath, links, className, }: OcPrimaryNavProps): react_jsx_runtime.JSX.Element;
 
 interface OcDashboardTool {
     id: string;
@@ -147,4 +147,14 @@ interface LayoutSubHeaderProps {
 }
 declare function LayoutSubHeader({ product, status, tags, noHeartbeat, className, }: LayoutSubHeaderProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, type EcosystemSlug, EcosystemSwitcher, type EcosystemSwitcherProps, FAMILY_PROPERTIES, type FamilyCategory, type FamilyProperty, LayoutSubHeader, type LayoutSubHeaderProps, type LayoutSubHeaderTag, OcAccountMenu, type OcAccountMenuBuildInfo, type OcAccountMenuItem, type OcAccountMenuProps, type OcAccountMenuSession, OcAccountMenuView, type OcAccountMenuViewProps, OcDashboardHub, type OcDashboardHubProps, OcDashboardShell, type OcDashboardShellProps, type OcDashboardTool, OcLogoDropdown, type OcLogoDropdownProps, OcPrimaryNav, type OcPrimaryNavLink, type OcPrimaryNavProps, SITE_STATE_LABEL, type SiteState, findFamilyProperty };
+interface OcAppBarProps {
+    variant?: 'full' | 'contained';
+    start?: ReactNode;
+    center?: ReactNode;
+    end?: ReactNode;
+    sticky?: boolean;
+    className?: string;
+}
+declare function OcAppBar({ variant, start, center, end, sticky, className, }: OcAppBarProps): react_jsx_runtime.JSX.Element;
+
+export { AppShell, type AppShellProps, type EcosystemSlug, EcosystemSwitcher, type EcosystemSwitcherProps, FAMILY_PROPERTIES, type FamilyCategory, type FamilyProperty, LayoutSubHeader, type LayoutSubHeaderProps, type LayoutSubHeaderTag, OcAccountMenu, type OcAccountMenuBuildInfo, type OcAccountMenuItem, type OcAccountMenuProps, type OcAccountMenuSession, OcAccountMenuView, type OcAccountMenuViewProps, OcAppBar, type OcAppBarProps, OcDashboardHub, type OcDashboardHubProps, OcDashboardShell, type OcDashboardShellProps, type OcDashboardTool, OcLogoDropdown, type OcLogoDropdownProps, OcPrimaryNav, type OcPrimaryNavLink, type OcPrimaryNavProps, SITE_STATE_LABEL, type SiteState, findFamilyProperty };

package/dist/chrome.js

@@ -1510,7 +1510,11 @@ function isActive(pathname, link) {
   if (link.href === "/") return pathname === "/";
   return pathname === link.href || pathname.startsWith(link.href + "/");
 }
-function OcPrimaryNav({ activePath, links, className }) {
+function OcPrimaryNav({
+  activePath,
+  links,
+  className
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "nav",
     {
@@ -1519,7 +1523,7 @@ function OcPrimaryNav({ activePath, links, className }) {
       "data-oc-primary-nav": "",
       children: links.map((link) => {
         const active = isActive(activePath, link);
-        const className2 = "font-display relative shrink-0 px-2 py-1 sm:px-3 text-[11px] sm:text-[12px] font-semibold tracking-wider uppercase transition-colors " + (active ? 'text-primary after:bg-primary after:absolute after:inset-x-2 after:-bottom-[13px] after:h-px after:content-[""]' : "text-muted-foreground hover:text-foreground");
+        const className2 = "font-display shrink-0 px-2 py-1 sm:px-3 text-[11px] sm:text-[12px] font-semibold tracking-wider uppercase transition-colors " + (active ? "text-primary" : "text-muted-foreground hover:text-foreground");
         const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           link.label,
           link.external ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -1859,6 +1863,39 @@ function LayoutSubHeader({
     tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground flex flex-wrap items-center gap-x-4 gap-y-1 tracking-widest uppercase", children: tags.map((tag, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: tag.hideBelow ? HIDE[tag.hideBelow] : void 0, children: tag.label }, i)) })
   ] }) });
 }
+function OcAppBar({
+  variant = "full",
+  start,
+  center,
+  end,
+  sticky = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      className: cn(
+        "bg-background/90 supports-[backdrop-filter]:bg-background/70 w-full border-b backdrop-blur",
+        sticky && "sticky top-0 z-50",
+        className
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            variant === "full" ? "app-bar" : "container",
+            "flex h-12 items-center justify-between gap-4"
+          ),
+          children: [
+            start,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 justify-center px-2", children: center }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: end })
+          ]
+        }
+      )
+    }
+  );
+}
 
 exports.AppShell = AppShell;
 exports.EcosystemSwitcher = EcosystemSwitcher;
@@ -1866,6 +1903,7 @@ exports.FAMILY_PROPERTIES = FAMILY_PROPERTIES;
 exports.LayoutSubHeader = LayoutSubHeader;
 exports.OcAccountMenu = OcAccountMenu;
 exports.OcAccountMenuView = OcAccountMenuView;
+exports.OcAppBar = OcAppBar;
 exports.OcDashboardHub = OcDashboardHub;
 exports.OcDashboardShell = OcDashboardShell;
 exports.OcLogoDropdown = OcLogoDropdown;