@mezo-org/mezo-clay 0.1.0-dev.3 → 0.1.0-dev.4

package/README.md

@@ -29,6 +29,7 @@ Open [http://localhost:6006/](http://localhost:6006/) to view it in the browser.
 ```shell
 pnpm run format
 ```
+
 This will lint both config files and ts/tsx/js/jsx files. See the `package.json` for specific linting commands.
 
 #### Pre-commit
@@ -77,13 +78,12 @@ pnpm add styletron-engine-monolithic
 
 ### Adding Clay to your React app
 
-Wrap the root of your app with `StyletronProvider` and `BaseProvider` components, like so:
+Wrap the root of your app with `ClayProvider` component, like so:
 
 ```js
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import { Client as Styletron } from "styletron-engine-monolithic"
-import { BaseProvider, ClayLightTheme, StyletronProvider } from "mezo-clay"
+import { ClayLightTheme } from "mezo-clay"
 
 import "mezo-clay/dist/mezo-clay.css" // Font styles
 
@@ -93,11 +93,9 @@ const engine = new Styletron()
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>
-      <StyletronProvider value={engine}>
-        <BaseProvider theme={ClayLightTheme}>
+      <ClayProvider theme={ClayLightTheme}>
           <App />
-        </BaseProvider>
-      </StyletronProvider>
+      </ClayProvider>
     </StrictMode>
   ,
 )

package/dist/components/banner/banner.d.ts

@@ -0,0 +1,17 @@
+import { BannerProps, BannerVariantProps } from './types';
+export declare const useBannerContext: () => {
+    actionLabel: BannerProps["actionLabel"];
+    artworkType: BannerProps["artworkType"];
+    hierarchy: BannerProps["hierarchy"];
+    kind?: BannerProps["kind"];
+    onClick: BannerProps["onClick"];
+};
+export declare function BannerCloseIcon({ size }: {
+    size: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function BannerTrailingButtonContainer(): import("react/jsx-runtime").JSX.Element;
+export default function Banner({ actionIcon, actionLabel, artworkIcon, artworkType, children, hierarchy, kind, onClick, overrides, nested, title, }: BannerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BannerInfo({ artworkType, children, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;
+export declare function BannerNegative({ artworkType, children, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;
+export declare function BannerPositive({ artworkType, children, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;
+export declare function BannerWarning({ artworkType, children, ...restProps }: BannerVariantProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export { default as Banner, BannerInfo, BannerCloseIcon, BannerNegative, BannerPositive, BannerTrailingButtonContainer, BannerWarning, } from './banner';
+export * from './types';
+export { ARTWORK_TYPE as BANNER_ARTWORK_TYPE, StyledTrailingButtonContainer, } from 'baseui/banner';

package/dist/components/banner/types.d.ts

@@ -0,0 +1,10 @@
+import { BannerProps as BaseBannerProps, ActionContent as BaseActionContent, ArtworkContent as BaseArtworkContent } from 'baseui/banner';
+export interface BannerProps extends Omit<Omit<BaseBannerProps, "action">, "artwork"> {
+    actionIcon?: BaseActionContent["icon"];
+    actionLabel?: BaseActionContent["label"];
+    onClick?: BaseActionContent["onClick"];
+    artworkIcon?: BaseArtworkContent["icon"];
+    artworkType?: BaseArtworkContent["type"];
+}
+export interface BannerVariantProps extends Omit<Omit<BannerProps, "artworkIcon">, "kind"> {
+}

package/dist/components/banner/utils.d.ts

@@ -0,0 +1,256 @@
+import { ReactElement } from 'react';
+import { BannerCloseIcon, BannerVariantProps } from './index';
+type RenderFn = (args: BannerVariantProps) => ReactElement;
+export declare function getLowHierarchyStory(renderFn: RenderFn): {
+    args: {
+        actionIcon: any;
+        actionLabel: any;
+        artworkType: any;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        onClick: any;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getLowHierarchyWithActionButtonStory(renderFn: RenderFn): {
+    args: {
+        actionLabel: string;
+        onClick: () => void;
+        actionIcon: any;
+        artworkType: any;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getLowHierarchyWithActionIconStory(renderFn: RenderFn): {
+    args: {
+        actionLabel: string;
+        actionIcon: typeof BannerCloseIcon;
+        onClick: () => void;
+        artworkType: any;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getLowHierarchyWithArtworkWithBadgeStory(renderFn: RenderFn): {
+    args: {
+        artworkType: "badge";
+        actionIcon: any;
+        actionLabel: any;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        onClick: any;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getLowHierarchyWithArtworkWithBadgeAndButtonStory(renderFn: RenderFn): {
+    args: {
+        artworkType: "badge";
+        actionLabel: string;
+        onClick: () => void;
+        actionIcon: any;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getLowHierarchyWithArtworkWithBadgeAndCloseStory(renderFn: RenderFn): {
+    args: {
+        artworkType: "badge";
+        actionLabel: string;
+        actionIcon: typeof BannerCloseIcon;
+        onClick: () => void;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getLowHierarchyWithArtworkWithIconStory(renderFn: RenderFn): {
+    args: {
+        artworkType: "icon";
+        actionIcon: any;
+        actionLabel: any;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        onClick: any;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getLowHierarchyWithArtworkWithIconAndButtonStory(renderFn: RenderFn): {
+    args: {
+        artworkType: "icon";
+        actionLabel: string;
+        onClick: () => void;
+        actionIcon: any;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getLowHierarchyWithArtworkWithIconAndCloseStory(renderFn: RenderFn): {
+    args: {
+        artworkType: "icon";
+        actionLabel: string;
+        actionIcon: typeof BannerCloseIcon;
+        onClick: () => void;
+        children: string;
+        hierarchy: BannerVariantProps["hierarchy"];
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        actionIcon: any;
+        actionLabel: any;
+        artworkType: any;
+        children: string;
+        onClick: any;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyWithActionButtonStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        actionLabel: string;
+        onClick: () => void;
+        actionIcon: any;
+        artworkType: any;
+        children: string;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyWithActionIconStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        actionLabel: string;
+        actionIcon: typeof BannerCloseIcon;
+        onClick: () => void;
+        artworkType: any;
+        children: string;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyWithArtworkWithBadgeStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        artworkType: "badge";
+        actionIcon: any;
+        actionLabel: any;
+        children: string;
+        onClick: any;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyWithArtworkWithBadgeAndButtonStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        artworkType: "badge";
+        actionLabel: string;
+        onClick: () => void;
+        actionIcon: any;
+        children: string;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyWithArtworkWithBadgeAndCloseStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        artworkType: "badge";
+        actionLabel: string;
+        actionIcon: typeof BannerCloseIcon;
+        onClick: () => void;
+        children: string;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyWithArtworkWithIconStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        artworkType: "icon";
+        actionIcon: any;
+        actionLabel: any;
+        children: string;
+        onClick: any;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyWithArtworkWithIconAndButtonStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        artworkType: "icon";
+        actionLabel: string;
+        onClick: () => void;
+        actionIcon: any;
+        children: string;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export declare function getHighHierarchyWithArtworkWithIconAndCloseStory(renderFn: RenderFn): {
+    args: {
+        hierarchy: import('baseui/banner').Hierarchy;
+        artworkType: "icon";
+        actionLabel: string;
+        actionIcon: typeof BannerCloseIcon;
+        onClick: () => void;
+        children: string;
+        overrides: {};
+        nested: boolean;
+        title: string;
+    };
+    render: RenderFn;
+};
+export {};

package/dist/components/icons/alert-triangle/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+export declare const AlertTriangle: 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 AlertTriangleBadge: 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/check-circle/index.d.ts

@@ -1,9 +1,15 @@
 import * as React from "react";
-declare const CheckCircle: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+export declare const CheckCircle: 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 CheckCircleBadge: 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 CheckCircle;

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

@@ -1,11 +1,12 @@
 export { Icon } from 'baseui/icon';
 export type { IconProps } from 'baseui/icon';
 export { default as AlertCircle } from './alert-circle';
+export { AlertTriangle, AlertTriangleBadge } from './alert-triangle';
 export { default as Apple } from './apple';
 export { default as ArrowNarrowLeft } from './arrow-narrow-left';
 export { default as ArrowNarrowRight } from './arrow-narrow-right';
 export { Building02 } from './building';
-export { default as CheckCircle } from './check-circle';
+export { CheckCircle, CheckCircleBadge } from './check-circle';
 export { default as ChevronDown } from './chevron-down';
 export { default as ChevronLeft } from './chevron-left';
 export { default as ChevronRight } from './chevron-right';
@@ -22,7 +23,7 @@ export { default as EyeOff } from './eye-off';
 export { default as Google } from './google';
 export { default as Heart } from './heart';
 export { HomeSmile } from './home-smile';
-export { default as InfoCircle } from './info-circle';
+export { InfoCircle, InfoCircleBadge } from './info-circle';
 export { Lightning01 } from './lightning';
 export { LinkExternal02 } from './link-external';
 export { default as Loading } from './loading';

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

@@ -1,9 +1,15 @@
 import * as React from "react";
-declare const InfoCircle: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+export declare const InfoCircle: 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 InfoCircleBadge: 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 InfoCircle;

package/dist/components/index.d.ts

@@ -1,17 +1,21 @@
 export * from './accordion';
+export * from './badge';
+export * from './banner';
 export * from './block';
 export * from './button';
 export * from './button-group';
 export * from './button-icon';
+export * from './divider';
 export * from './flex-grid';
 export * from './form-control';
 export * from './icons';
 export * from './input';
+export * from './link';
+export * from './list';
 export * from './message-card';
 export * from './side-navigation';
+export * from './skeleton';
 export * from './tag';
 export * from './textarea';
 export * from './typography';
-export * from './skeleton';
-export * from './list';
-export * from './badge';
+export { Block } from 'baseui/block';

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

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+import { StyledLink } from 'baseui/link';
+export type LinkProps = ComponentProps<typeof StyledLink> & {
+    size?: "xsmall" | "small" | "medium" | "large";
+};
+export declare function Link({ children, size, ...restProps }: LinkProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export type { TabProps, TabsProps } from 'baseui/tabs-motion';
+export { Tab, Tabs } from 'baseui/tabs-motion';
+export { default as TabTitle } from './tab-title';

package/dist/components/tabs/tab-title.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ReactNode } from 'react';
+import { TabProps } from 'baseui/tabs-motion';
+export default function TabTitle({ title, badgeContent, }: {
+    title: TabProps["title"];
+    badgeContent: ReactNode;
+}): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;