@mezo-org/mezo-clay 0.1.0-dev.21 → 0.1.0-dev.23

package/README.md

@@ -62,6 +62,36 @@ pnpm run build:lib
 
 The library is output as the /dist directory.
 
+### Publishing to NPM
+
+Before you build and publish to NPM, you'll want to increment the version in `package.json`.
+
+#### Build the library (same as above)
+
+```shell
+pnpm run build:lib
+```
+
+#### Login to NPM
+
+```shell
+pnpm login
+```
+
+#### Test the Built Package Locally
+
+Use `pnpm pack` to build a `.tgz` file that you can link to from your test application.
+
+#### Publish
+
+```shell
+pnpm publish --access public
+```
+
+__Note__: You can use the `--dry-run` flag on `publish` if you want to preview what will be included in the release package without actually publishing.
+
+Check out your new release on the [npm page](https://www.npmjs.com/package/@mezo-org/mezo-clay).
+
 ## Using Clay
 
 ### Install
@@ -78,27 +108,25 @@ pnpm add styletron-engine-monolithic
 
 ### Adding Clay to your React app
 
-Wrap the root of your app with `ClayProvider` component, like so:
+Wrap the root of your app with the `ClayProvider` component, like so:
 
 ```js
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import { ClayLightTheme } from "mezo-clay"
+import { ClayLightTheme, ClayProvider } from "@mezo-org/mezo-clay"
 
-import "mezo-clay/dist/mezo-clay.css" // Font styles
+import "@mezo-org/mezo-clay/dist/mezo-clay.css" // Font styles
 
 import App from "./App.tsx"
 
-const engine = new Styletron()
-
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <ClayProvider theme={ClayLightTheme}>
-          <App />
+        <App />
       </ClayProvider>
     </StrictMode>
   ,
 )
 ```
 
-Import the `mezo-clay/dist/mezo-clay.css` to ensure that the proper fonts are included.
+Import the `@mezo-org/mezo-clay/dist/mezo-clay.css` to ensure that the proper fonts are included.

package/dist/components/icons/bell/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+declare const Bell01: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import('baseui/icon').Size;
+    color?: import('baseui/icon').Color;
+    title?: string | null;
+    overrides?: import('baseui/icon').IconOverrides;
+} & import('baseui/icon').StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;
+export default Bell01;

package/dist/components/icons/dots/index.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export declare const DotsVertical: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import('baseui/icon').Size;
+    color?: import('baseui/icon').Color;
+    title?: string | null;
+    overrides?: import('baseui/icon').IconOverrides;
+} & import('baseui/icon').StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;

package/dist/components/icons/dots-grid/index.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+declare const DotsGrid: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import('baseui/icon').Size;
+    color?: import('baseui/icon').Color;
+    title?: string | null;
+    overrides?: import('baseui/icon').IconOverrides;
+} & import('baseui/icon').StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;
+export default DotsGrid;

package/dist/components/icons/help-circle/index.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+export declare const HelpCircleLine: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import('baseui/icon').Size;
+    color?: import('baseui/icon').Color;
+    title?: string | null;
+    overrides?: import('baseui/icon').IconOverrides;
+} & import('baseui/icon').StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;
+export declare const HelpCircle: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import('baseui/icon').Size;
+    color?: import('baseui/icon').Color;
+    title?: string | null;
+    overrides?: import('baseui/icon').IconOverrides;
+} & import('baseui/icon').StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;

package/dist/components/icons/index.d.ts

@@ -7,6 +7,7 @@ export { default as ArrowLeft } from './arrow-left';
 export { default as ArrowNarrowLeft } from './arrow-narrow-left';
 export { default as ArrowNarrowRight } from './arrow-narrow-right';
 export { default as ArrowRight } from './arrow-right';
+export { default as Bell01 } from './bell';
 export * from './bitcoin-circle';
 export { Building02 } from './building';
 export { CheckCircle } from './check-circle';
@@ -24,6 +25,8 @@ export { Copy03 } from './copy';
 export { Cryptocurrency04 } from './cryptocurrency';
 export { Cube01 } from './cube';
 export { default as Discord } from './discord';
+export * from './dots';
+export { default as DotsGrid } from './dots-grid';
 export { Email01 } from './email';
 export * from './eth-circle';
 export { default as Eye } from './eye';
@@ -32,6 +35,7 @@ export { default as GasFee } from './gas-fee';
 export { default as Google } from './google';
 export { default as Handshake } from './handshake';
 export { default as Heart } from './heart';
+export * from './help-circle';
 export { HomeSmile } from './home-smile';
 export { InfoCircle, InfoCircleBadge } from './info-circle';
 export { Lightning01 } from './lightning';

package/dist/components/index.d.ts

@@ -5,6 +5,7 @@ export * from './breadcrumbs';
 export * from './button';
 export * from './button-group';
 export * from './button-icon';
+export * from './card';
 export * from './checkbox';
 export * from './divider';
 export * from './flex-grid';
@@ -18,6 +19,7 @@ export * from './message-card';
 export * from './mobile-header';
 export * from './modal';
 export * from './progress-bar';
+export * from './progress-steps';
 export * from './radio';
 export * from './section-heading';
 export * from './segmented-control';
@@ -26,14 +28,13 @@ export * from './skeleton';
 export * from './snackbar';
 export * from './spinner';
 export * from './stepper';
+export * from './table';
 export * from './tabs';
 export * from './tag';
 export * from './textarea';
 export * from './tooltip';
+export * from './top-navigation';
 export * from './typography';
-export * from './card';
-export * from './table';
-export * from './progress-steps';
 export { Block } from 'baseui/block';
 export type { BlockProps } from 'baseui/block';
 export { Icon } from 'baseui/icon';

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

@@ -0,0 +1,3 @@
+export type { NavItem as TopNavItem } from 'baseui/app-nav-bar';
+export { setItemActive as setTopNavItemActive } from 'baseui/app-nav-bar';
+export * from './top-navigation';

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { TopNavigationOverrides } from './types';
+export type MobileMenuProps = {
+    children: ReactNode;
+    overrides?: TopNavigationOverrides;
+};
+export default function MobileMenu({ children, overrides, }: MobileMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export declare const StyledRoot: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledNavContainer: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledPrimaryMenuContainer: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledPrimaryMenuItem: import('styletron-react').StyletronComponent<"div", {}>;
+export declare const StyledPageTitle: import('styletron-react').StyletronComponent<"h1", {}>;
+export declare const StyledMobileMenuContentContainer: import('styletron-react').StyletronComponent<"div", {}>;

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/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-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;