@mezo-org/mezo-clay 0.1.0-dev.2 → 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/accordion/accordion.d.ts

@@ -0,0 +1,2 @@
+import { AccordionProps } from './types';
+export default function Accordion({ accordion, children, disabled, initialState, onChange, overrides, size, stateReducer, renderAll, toggleIcon, }: AccordionProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const ACCORDION_SIZE: {
+    compact: string;
+    standard: string;
+};
+export declare const PANEL_ARTWORK_SIZE: {
+    CUSTOM: string;
+    SMALL: "SMALL";
+    MEDIUM: "MEDIUM";
+    LARGE: "LARGE";
+};

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

@@ -0,0 +1,4 @@
+export { default as Accordion } from './accordion';
+export { Panel, PanelTitle } from './panel';
+export * from './types';
+export * from './constants';

package/dist/components/accordion/panel.d.ts

@@ -0,0 +1,3 @@
+import { PanelTitleProps } from './types';
+export declare function PanelTitle({ artwork, artworkSize, title, subtitle, }: PanelTitleProps): import("react/jsx-runtime").JSX.Element;
+export { Panel } from 'baseui/accordion';

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { AccordionProps as BaseAccordionProps } from 'baseui/accordion';
+import { Icon } from '../icons';
+import { ACCORDION_SIZE, PANEL_ARTWORK_SIZE } from './constants';
+export interface AccordionProps extends BaseAccordionProps {
+    size: keyof typeof ACCORDION_SIZE;
+    toggleIcon?: React.ReactElement<typeof Icon>;
+}
+export type { PanelProps } from 'baseui/accordion';
+export interface PanelTitleProps {
+    artwork?: React.ReactNode;
+    artworkSize?: keyof typeof PANEL_ARTWORK_SIZE;
+    subtitle?: React.ReactNode;
+    title: React.ReactNode;
+}

package/dist/components/badge/hint.d.ts

@@ -0,0 +1,6 @@
+import { HintDotProps } from 'baseui/badge';
+import { BadgeStyle } from './types';
+export type HintBadgeProps = {
+    style?: BadgeStyle;
+} & Omit<HintDotProps, "color">;
+export default function HintBadge({ style, overrides, ...restProps }: HintBadgeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export { default as HintBadge } from './hint';
+export type { HintBadgeProps } from './hint';
+export { default as NotificationBadge } from './notification';
+export type { NotificationBadgeProps } from './notification';
+export * from './types';

package/dist/components/badge/notification.d.ts

@@ -0,0 +1,9 @@
+import { NotificationCircleProps } from 'baseui/badge';
+import { BadgeStyle } from './types';
+type NotificationBadgeSize = "small" | "medium";
+export type NotificationBadgeProps = {
+    size?: NotificationBadgeSize;
+    style?: BadgeStyle;
+} & Omit<NotificationCircleProps, "color">;
+export default function NotificationBadge({ size, style, overrides, ...restProps }: NotificationBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import { Color } from 'baseui/badge';
+export type BadgeStyle = Exclude<Color, "primary">;

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/divider/index.d.ts

@@ -0,0 +1,9 @@
+export declare const DIVIDER_SIZE: {
+    readonly cell: "cell";
+    readonly section: "section";
+    readonly module: "module";
+};
+export type DividerProps = {
+    $size: keyof typeof DIVIDER_SIZE;
+};
+export declare function Divider({ $size }: DividerProps): import("react/jsx-runtime").JSX.Element;

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,15 +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 { Block } from 'baseui/block';

package/dist/components/input/input.d.ts

@@ -1,4 +1,4 @@
 import { SIZE } from './constants';
 import { InputProps } from './types';
-export declare function getBaseInputSize(size: keyof typeof SIZE): "mini" | "compact" | "default" | "large";
+export declare function getBaseInputSize(size: keyof typeof SIZE): "compact" | "default" | "large" | "mini";
 export default function Input({ value, onChange, disabled, error, positive, incomplete, complete, loading, readOnly, size, type, clearable, clearOnEscape, startEnhancer, endEnhancer, inputMode, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, adjoined, autoComplete, autoFocus, pattern, placeholder, id, inputRef, name, min, max, step, maxLength, onBlur, onKeyDown, onKeyPress, onKeyUp, onFocus, required, overrides, }: InputProps): import("react/jsx-runtime").JSX.Element;

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/message-card/message-card.d.ts

@@ -1,2 +1,5 @@
-import { MessageCardProps } from 'baseui/message-card';
-export default function MessageCard({ onClick, onDismiss, heading, paragraph, buttonLabel, buttonKind, backgroundColor, backgroundColorType, image, overrides, }: MessageCardProps): import("react/jsx-runtime").JSX.Element;
+import { MessageCardProps as MessageCardPropsBaseUi } from 'baseui/message-card';
+export type MessageCardProps = MessageCardPropsBaseUi & {
+    isLoading?: boolean;
+};
+export default function MessageCard({ onClick, onDismiss, heading, paragraph, buttonLabel, buttonKind, backgroundColor, backgroundColorType, image, overrides, isLoading, }: MessageCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/message-card/overrides.d.ts

@@ -1,7 +1,11 @@
-export declare function getMessageCardOverrides({ overrides, image, buttonKind, backgroundColor, backgroundColorType, }: {
-    overrides: any;
-    image: any;
-    buttonKind: any;
-    backgroundColor: any;
-    backgroundColorType: any;
-}): import('baseui/helpers/overrides').Overrides<any>;
+import { MessageCardOverrides as MessageCardOverridesBaseUi, MessageCardProps } from 'baseui/message-card';
+type MessageCardOverrides = {
+    overrides: MessageCardOverridesBaseUi;
+    buttonKind: "secondary" | "tertiary";
+    backgroundColor: string;
+    backgroundColorType: "light" | "dark";
+    isLoading?: boolean;
+    image: MessageCardProps["image"];
+};
+export declare function getMessageCardOverrides({ overrides, image, buttonKind, backgroundColor, backgroundColorType, isLoading, }: MessageCardOverrides): import('baseui/helpers/overrides').Overrides<any>;
+export {};

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;