@mezo-org/mezo-clay 0.1.0-dev.8 → 0.2.0-dev.1

package/dist/components/top-navigation/top-navigation.d.ts

@@ -0,0 +1,14 @@
+import { default as React, ReactNode } from 'react';
+import { UserMenuProps, NavItem } from 'baseui/app-nav-bar';
+import { TopNavigationOverrides } from './types';
+export type TopNavigationProps = {
+    appName: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    mapUserItemToNode?: (a: NavItem) => React.ReactNode;
+    mobileBreakpoint?: number;
+    mobileMenuChildren: ReactNode;
+    overrides?: TopNavigationOverrides;
+    pageTitle?: ReactNode;
+} & UserMenuProps;
+export declare function TopNavigation({ appName, children, id, mapUserItemToNode, mobileBreakpoint, mobileMenuChildren, overrides, pageTitle, userItems, username, usernameSubtitle, userImgUrl, onUserItemSelect, }: TopNavigationProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/top-navigation/top-navigation.js

@@ -0,0 +1,100 @@
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { Children as R } from "react";
+import { StyledAppName as G } from "baseui/app-nav-bar";
+import { Block as p } from "baseui/block";
+import { getOverrides as r } from "baseui/helpers/overrides";
+import { useStyletron as $ } from "baseui";
+import O from "../../themes/clay-light-theme.js";
+import { StyledRoot as U, StyledNavContainer as q, StyledPageTitle as z, StyledPrimaryMenuContainer as D, StyledPrimaryMenuItem as E } from "./styled-components.js";
+import F from "./mobile-menu.js";
+import H from "./user-menu.js";
+function k({
+  appName: c,
+  children: s,
+  id: d,
+  mapUserItemToNode: y = (a) => a.label,
+  mobileBreakpoint: t = O.breakpoints.large,
+  mobileMenuChildren: f,
+  overrides: e,
+  pageTitle: i,
+  userItems: o,
+  username: u,
+  usernameSubtitle: P,
+  userImgUrl: h,
+  onUserItemSelect: M
+}) {
+  const [a] = $(), [C, N] = r(e.Root, U), [g, x] = r(
+    e.NavContainer,
+    q
+  ), [S, w] = r(
+    e.AppName,
+    G
+  ), [b, I] = r(
+    e.PageTitle,
+    z
+  ), [T, j] = r(
+    e.PrimaryMenuContainer,
+    D
+  ), [v, A] = r(
+    e.PrimaryMenuItem,
+    E
+  );
+  return /* @__PURE__ */ n(C, { ...N, "data-baseweb": "top-nav-bar", id: d, children: /* @__PURE__ */ l(g, { ...x, children: [
+    /* @__PURE__ */ n(S, { ...w, children: c }),
+    !!t && /* @__PURE__ */ n(
+      p,
+      {
+        className: a({
+          [`@media screen and (min-width: ${t}px)`]: {
+            display: "none"
+          },
+          flexGrow: 1
+        }),
+        children: /* @__PURE__ */ n(F, { children: f })
+      }
+    ),
+    /* @__PURE__ */ l(
+      p,
+      {
+        className: a({
+          ...t && {
+            [`@media screen and (max-width: ${t - 1}px)`]: {
+              display: "none"
+            }
+          },
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          flexGrow: 1
+        }),
+        children: [
+          i && /* @__PURE__ */ n(b, { ...I, children: i }),
+          /* @__PURE__ */ n(
+            T,
+            {
+              role: "navigation",
+              "aria-label": "Main navigation",
+              ...j,
+              children: R.map(s, (m) => m ? /* @__PURE__ */ n(v, { ...A, children: m }) : null)
+            }
+          )
+        ]
+      }
+    ),
+    o && o.length ? /* @__PURE__ */ n(
+      H,
+      {
+        mapItemToNode: y,
+        onItemSelect: M,
+        overrides: e,
+        username: u,
+        usernameSubtitle: P,
+        userImgUrl: h,
+        userItems: o
+      }
+    ) : null
+  ] }) });
+}
+export {
+  k as TopNavigation
+};

package/dist/components/top-navigation/types.d.ts

@@ -0,0 +1,16 @@
+import { Override } from 'baseui/helpers/overrides';
+export type TopNavigationOverrides = {
+    Root?: Override;
+    NavContainer?: Override;
+    AppName?: Override;
+    PageTitle?: Override;
+    PrimaryMenuContainer?: Override;
+    PrimaryMenuItem?: Override;
+    MobileMenuContentContainer?: Override;
+    UserMenuProfileListItem?: Override;
+    UserProfileInfoContainer?: Override;
+    UserProfilePictureContainer?: Override;
+    UserProfileTileContainer?: Override;
+    UserMenuButton?: Override;
+    UserMenu?: Override;
+};

package/dist/components/top-navigation/user-menu.d.ts

@@ -0,0 +1,7 @@
+import { UserMenuProps, NavItem, AppNavBarOverrides } from 'baseui/app-nav-bar';
+import * as React from "react";
+export default function UserMenuComponent(props: {
+    mapItemToNode: (a: NavItem) => React.ReactNode;
+    onItemSelect: (a: NavItem) => unknown;
+    overrides: AppNavBarOverrides;
+} & UserMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/top-navigation/user-menu.js

@@ -0,0 +1,112 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import * as i from "react";
+import { getOverrides as f, mergeOverrides as I } from "baseui/helpers/overrides";
+import { MenuAdapter as O, ARTWORK_SIZES as R, ListItemLabel as E } from "baseui/list";
+import { StatefulMenu as w, StyledList as B } from "baseui/menu";
+import { StatefulPopover as C, PLACEMENT as g, TRIGGER_TYPE as x } from "baseui/popover";
+import { StyledUserMenuProfileListItem as y, StyledUserMenuButton as A } from "baseui/app-nav-bar";
+import { defaultMapItemToNode as N } from "baseui/app-nav-bar/utils";
+import { Button as b } from "baseui/button";
+import k from "./user-profile-tile.js";
+import { IconAvatar as z } from "../avatar/avatar.js";
+import _ from "../icons/solid/chevron-up/index.js";
+import G from "../icons/solid/chevron-down/index.js";
+const j = "275px", D = i.forwardRef((s, m) => {
+  const { item: t, mapItemToNode: u = N } = s;
+  return /* @__PURE__ */ e(
+    O,
+    {
+      ...s,
+      ref: m,
+      artwork: t.icon || null,
+      artworkSize: R.LARGE,
+      children: /* @__PURE__ */ e(E, { children: u(t) })
+    }
+  );
+});
+function ee(s) {
+  const [m, t] = i.useState(!1), {
+    userItems: u = [],
+    username: a,
+    userImgUrl: d,
+    usernameSubtitle: M,
+    mapItemToNode: U,
+    onItemSelect: L,
+    overrides: n = {}
+  } = s, [S, v] = f(
+    n.UserMenuProfileListItem,
+    y
+  ), [P, l] = f(
+    n.UserMenuButton,
+    b
+  );
+  l.overrides = I(
+    { BaseButton: { component: A } },
+    l.overrides
+  );
+  const [T, p] = f(
+    n.UserMenu,
+    w
+  );
+  return p.overrides = I(
+    {
+      List: {
+        // eslint-disable-next-line react/display-name
+        component: i.forwardRef(
+          ({ children: r, ...o }, h) => /* @__PURE__ */ c(B, { ...o, ref: h, children: [
+            /* @__PURE__ */ e(S, { ...v, children: /* @__PURE__ */ e(
+              k,
+              {
+                username: a,
+                usernameSubtitle: M,
+                userImgUrl: d,
+                overrides: n
+              }
+            ) }),
+            r
+          ] })
+        ),
+        style: { width: j }
+      },
+      // eslint-disable-next-line react/display-name
+      ListItem: i.forwardRef((r, o) => /* @__PURE__ */ e(
+        D,
+        {
+          ref: o,
+          ...r,
+          mapItemToNode: U
+        }
+      ))
+    },
+    p.overrides
+  ), /* @__PURE__ */ e(
+    C,
+    {
+      content: ({ close: r }) => /* @__PURE__ */ e(
+        T,
+        {
+          items: u,
+          onItemSelect: ({ item: o }) => {
+            L(o), r();
+          },
+          ...p
+        }
+      ),
+      autoFocus: !1,
+      dismissOnEsc: !0,
+      dismissOnClickOutside: !0,
+      onOpen: () => t(!0),
+      onClose: () => t(!1),
+      placement: g.bottomRight,
+      popperOptions: { modifiers: { flip: { enabled: !1 } } },
+      triggerType: x.click,
+      children: /* @__PURE__ */ c(P, { ...l, children: [
+        /* @__PURE__ */ e(z, { name: a, src: d, size: "medium" }),
+        m ? /* @__PURE__ */ e(_, { size: 24, title: "Collapse" }) : /* @__PURE__ */ e(G, { size: 24, title: "expand" })
+      ] })
+    }
+  );
+}
+export {
+  ee as default
+};

package/dist/components/top-navigation/user-profile-tile.d.ts

@@ -0,0 +1,4 @@
+import { AppNavBarOverrides, UserMenuProps } from 'baseui/app-nav-bar';
+export default function UserProfileTile(props: {
+    overrides: AppNavBarOverrides;
+} & UserMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/top-navigation/user-profile-tile.js

@@ -0,0 +1,27 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { getOverrides as i } from "baseui/helpers/overrides";
+import { StyledUserProfileTileContainer as d, StyledUserProfilePictureContainer as C, StyledUserProfileInfoContainer as p } from "baseui/app-nav-bar";
+import { IconAvatar as U } from "../avatar/avatar.js";
+import { LabelMedium as h, ParagraphSmall as I } from "baseui/typography";
+function y(l) {
+  const { overrides: e = {}, username: o, usernameSubtitle: n, userImgUrl: s } = l, [a, f] = i(
+    e.UserProfileTileContainer,
+    d
+  ), [m, P] = i(
+    e.UserProfilePictureContainer,
+    C
+  ), [u, c] = i(
+    e.UserProfileInfoContainer,
+    p
+  );
+  return /* @__PURE__ */ t(a, { ...f, children: [
+    /* @__PURE__ */ r(m, { ...P, children: /* @__PURE__ */ r(U, { name: o, src: s, size: "medium" }) }),
+    /* @__PURE__ */ t(u, { ...c, children: [
+      /* @__PURE__ */ r(h, { children: o }),
+      n ? /* @__PURE__ */ r(I, { marginTop: "0", marginBottom: "0", children: n }) : null
+    ] })
+  ] });
+}
+export {
+  y as default
+};

package/dist/components/typography/index.js

@@ -0,0 +1,39 @@
+import { DisplayLarge as e, DisplayMedium as o, DisplaySmall as g, DisplayXSmall as n, HeadingLarge as r, HeadingMedium as i, HeadingSmall as M, HeadingXLarge as m, HeadingXSmall as d, HeadingXXLarge as L, LabelLarge as p, LabelMedium as S, LabelSmall as X, LabelXSmall as H, MonoDisplayLarge as b, MonoDisplayMedium as h, MonoDisplaySmall as s, MonoDisplayXSmall as u, MonoHeadingLarge as y, MonoHeadingMedium as D, MonoHeadingSmall as P, MonoHeadingXLarge as f, MonoHeadingXSmall as t, MonoHeadingXXLarge as x, MonoLabelLarge as c, MonoLabelMedium as j, MonoLabelSmall as k, MonoLabelXSmall as q, MonoParagraphLarge as v, MonoParagraphMedium as w, MonoParagraphSmall as z, MonoParagraphXSmall as A, ParagraphLarge as B, ParagraphMedium as C, ParagraphSmall as E, ParagraphXSmall as F } from "baseui/typography";
+export {
+  e as DisplayLarge,
+  o as DisplayMedium,
+  g as DisplaySmall,
+  n as DisplayXSmall,
+  r as HeadingLarge,
+  i as HeadingMedium,
+  M as HeadingSmall,
+  m as HeadingXLarge,
+  d as HeadingXSmall,
+  L as HeadingXXLarge,
+  p as LabelLarge,
+  S as LabelMedium,
+  X as LabelSmall,
+  H as LabelXSmall,
+  b as MonoDisplayLarge,
+  h as MonoDisplayMedium,
+  s as MonoDisplaySmall,
+  u as MonoDisplayXSmall,
+  y as MonoHeadingLarge,
+  D as MonoHeadingMedium,
+  P as MonoHeadingSmall,
+  f as MonoHeadingXLarge,
+  t as MonoHeadingXSmall,
+  x as MonoHeadingXXLarge,
+  c as MonoLabelLarge,
+  j as MonoLabelMedium,
+  k as MonoLabelSmall,
+  q as MonoLabelXSmall,
+  v as MonoParagraphLarge,
+  w as MonoParagraphMedium,
+  z as MonoParagraphSmall,
+  A as MonoParagraphXSmall,
+  B as ParagraphLarge,
+  C as ParagraphMedium,
+  E as ParagraphSmall,
+  F as ParagraphXSmall
+};

package/dist/docs/guides/animations.d.ts

@@ -0,0 +1,2 @@
+export declare function Animations(): import("react/jsx-runtime").JSX.Element;
+export default Animations;

package/dist/docs/guides/borders.d.ts

@@ -0,0 +1,2 @@
+export declare function Borders(): import("react/jsx-runtime").JSX.Element;
+export default Borders;

package/dist/docs/guides/breakpoints.d.ts

@@ -0,0 +1,2 @@
+export declare function Breakpoints(): import("react/jsx-runtime").JSX.Element;
+export default Breakpoints;

package/dist/docs/guides/colors.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+export declare function ColorDocs({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export declare function ColorLegend(): import("react/jsx-runtime").JSX.Element;

package/dist/docs/guides/grid.d.ts

@@ -0,0 +1,2 @@
+export declare function GridProperties(): import("react/jsx-runtime").JSX.Element;
+export default GridProperties;

package/dist/docs/guides/lighting.d.ts

@@ -0,0 +1,2 @@
+export declare function Lighting(): import("react/jsx-runtime").JSX.Element;
+export default Lighting;

package/dist/docs/guides/media-queries.d.ts

@@ -0,0 +1,2 @@
+export declare function MediaQueries(): import("react/jsx-runtime").JSX.Element;
+export default MediaQueries;

package/dist/docs/guides/sizing.d.ts

@@ -0,0 +1,2 @@
+export declare function Sizing(): import("react/jsx-runtime").JSX.Element;
+export default Sizing;

package/dist/docs/guides/theme-property.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { BlockProps } from 'baseui/block';
+type ThemePropertyProps = {
+    propertyName: string;
+    value: string;
+    example?: ReactNode;
+    exampleProps?: BlockProps;
+    width?: string;
+    maxWidth?: string;
+    flexDirection?: "row" | "column";
+};
+export default function ThemeProperty({ propertyName, value, example, exampleProps, width, maxWidth, flexDirection, }: ThemePropertyProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/docs/guides/typography.d.ts

@@ -0,0 +1,2 @@
+export declare function TypographyGuide(): import("react/jsx-runtime").JSX.Element;
+export default TypographyGuide;

package/dist/docs/index.d.ts

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+/**
+ * This hook checks if Storybook docs are in dark mode. Though the hook
+ * `useDarkMode` exists, it only works in the Storybook decorator and
+ * story functions, not in the docs pages.
+ */
+export declare function useDocsInDarkMode(): boolean;
+/**
+ * This component provides the Clay theme to jsx in Storybook's unattached doc pages.
+ * It uses the current Storybook theme to determine whether to use the light or
+ * dark Clay theme. Without this, jsx in mdx has no access to the Clay theme.
+ */
+export declare function DocsClayProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './components';
+export * from './ssr';
 export * from './styles';
 export * from './themes';
 export * from './utils';