@stoplight/mosaic - npm Package Compare versions

Comparing version 1.0.0-beta.6 to 1.0.0-beta.7

components/Box/types.d.ts

 import { HTMLAttributes } from 'react';
-import { IBackgroundColorProps, IBorderProps, IFlexProps, IFontSizeProps, IHeightProps, IInteractivityProps, ILayoutProps, IMarginProps, IPaddingProps, IPositionProps, IRingProps, IRoundedProps, IShadowProps, ITextColorProps, IWidthProps } from '../../enhancers';
+import { IBorderProps, IColorProps, IFlexProps, IInteractivityProps, ILayoutProps, IMarginProps, IPaddingProps, IPositionProps, IRingProps, IShadowProps, ISizeProps, ITypographyProps } from '../../enhancers';
 /**
@@ -8,3 +8,3 @@ * Generic component props with "as" prop
  */
-export declare type BoxOwnProps<E extends React.ElementType = React.ElementType> = IFontSizeProps & IWidthProps & IHeightProps & IMarginProps & IPaddingProps & IRoundedProps & IShadowProps & ITextColorProps & IBackgroundColorProps & IBorderProps & IRingProps & IInteractivityProps & IFlexProps & IPositionProps & ILayoutProps & {
+export declare type BoxOwnProps<E extends React.ElementType = React.ElementType> = ITypographyProps & ISizeProps & IMarginProps & IPaddingProps & IShadowProps & IColorProps & IBorderProps & IRingProps & IInteractivityProps & IFlexProps & IPositionProps & ILayoutProps & {
     /**
@@ -18,3 +18,3 @@ * Replaces the underlying element
  * Box supports standard HTML attributes
- * Box re-defines color, so omit here to prevent clash
+ * Box re-defines some props like color, so omit here to prevent clash
  */
@@ -21,0 +21,0 @@ export interface IBoxHTMLAttributes<C = HTMLDivElement> extends Omit<HTMLAttributes<C>, 'color'> {

components/EntityName/EntityName.d.ts

@@ -9,2 +9,3 @@ import React from 'react';
     size?: 'md' | 'lg';
+    avatar?: AvatarProps;
 };
@@ -11,0 +12,0 @@ declare type IconEntityNameProps = BaseEntityNameProps & {

components/Flex/Flex.d.ts

 import React from 'react';
 import { IFlexShorthandProps } from '../../enhancers/flex';
 import { PolymorphicComponentProps } from '../Box';
-export declare type FlexOwnProps = IFlexShorthandProps;
+export declare type FlexOwnProps = IFlexShorthandProps & {
+    /**
+     * If `true`, will render as `inline-flex` rather than `flex`
+     */
+    inline?: boolean;
+};
 export declare type FlexProps<E extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<E, FlexOwnProps>;
@@ -6,0 +11,0 @@ declare const defaultElement = "div";

components/Input/Input.d.ts

@@ -15,2 +15,2 @@ import React from 'react';
 }
-export declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<IInputProps, "form" | "p" | "slot" | "select" | "style" | "title" | "pattern" | "width" | "height" | "color" | "size" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "cursor" | "display" | "fontFamily" | "fontSize" | "fontWeight" | "opacity" | "ring" | "px" | "appearance" | "intent" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml" | "lineHeight" | "minWidth" | "overflowX" | "maxHeight" | "minHeight" | "overflowY" | "py" | "pt" | "pr" | "pb" | "pl" | "rounded" | "boxShadow" | "bg" | "borderColor" | "border" | "borderTop" | "borderRight" | "borderLeft" | "borderBottom" | "ringColor" | "ringOpacity" | "flex" | "flexDirection" | "flexWrap" | "flexGrow" | "flexShrink" | "justifyContent" | "justifyItems" | "justifySelf" | "alignContent" | "alignItems" | "alignSelf" | "position" | "inset" | "insetY" | "insetX" | "top" | "left" | "right" | "bottom" | "zIndex" | "as"> & React.RefAttributes<HTMLInputElement>>>;
+export declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<IInputProps, "form" | "p" | "slot" | "style" | "title" | "pattern" | "color" | "size" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "cursor" | "display" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "opacity" | "pointerEvents" | "textDecoration" | "ring" | "px" | "appearance" | "intent" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml" | "lineHeight" | "textAlign" | "textTransform" | "textOverflow" | "verticalAlign" | "whitespace" | "wordBreak" | "h" | "maxH" | "minH" | "w" | "maxW" | "minW" | "py" | "pt" | "pr" | "pb" | "pl" | "boxShadow" | "placeholderColor" | "bg" | "borderColor" | "border" | "borderT" | "borderR" | "borderL" | "borderB" | "rounded" | "ringColor" | "ringOpacity" | "resize" | "userSelect" | "flex" | "flexDirection" | "flexWrap" | "flexGrow" | "flexShrink" | "justifyContent" | "justifyItems" | "justifySelf" | "alignContent" | "alignItems" | "alignSelf" | "pos" | "pin" | "pinY" | "pinX" | "top" | "left" | "right" | "bottom" | "zIndex" | "overflowY" | "overflowX" | "as"> & React.RefAttributes<HTMLInputElement>>>;

components/Stack/Stack.d.ts

@@ -18,2 +18,6 @@ import './style.css';
     divider?: true | React.ReactElement;
+    /**
+     * If `true`, will render as `inline-flex` rather than `flex`
+     */
+    inline?: boolean;
 };
@@ -20,0 +24,0 @@ export declare type StackProps<E extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<E, StackOwnProps>;

components/Text/Text.d.ts

 import React from 'react';
-import { FontSizeVals, IFontSizeProps, IMarginProps, IPaddingProps, ITextColorProps, ParagraphSizes } from '../../enhancers';
+import { FontSizeVals, IMarginProps, IPaddingProps, ITextColorProps, ITypographyProps, ParagraphSizes } from '../../enhancers';
 export declare type TextSizeVals = FontSizeVals | ParagraphSizes;
-export interface ITextProps extends IMarginProps, IPaddingProps, IFontSizeProps, ITextColorProps {
+export interface ITextProps extends IMarginProps, IPaddingProps, ITypographyProps, ITextColorProps {
     children: React.ReactNode;
@@ -6,0 +6,0 @@ size?: TextSizeVals;

enhancers/border.d.ts

 import { SemanticColorVals } from './color';
 import { OpacityVals } from './interactivity';
-import { Variants } from './variants';
+import { Pseudo } from './pseudo';
+import { EnhancerFn } from './types';
 export declare type BorderColorVals = 'light' | 'dark' | 'button' | 'input' | 'transparent' | SemanticColorVals;
-export declare type BorderWidthVals = true | 0 | 1 | 2 | 4 | 8;
+export declare type BorderWidthVals = true | 0 | 2 | 4 | 8;
+export declare type RoundedVals = true | 'none' | 'lg' | 'xl' | 'full' | 'b' | 't' | 'l' | 'r' | 'b-none' | 't-none' | 'l-none' | 'r-none' | 'b-lg' | 't-lg' | 'l-lg' | 'r-lg' | 'b-xl' | 't-xl' | 'l-xl' | 'r-xl' | 'b-full' | 't-full' | 'l-full' | 'r-full';
 export interface IBorderProps {
-    borderColor?: BorderColorVals | Variants<BorderColorVals>;
-    border?: BorderWidthVals | Variants<BorderWidthVals>;
-    borderTop?: BorderWidthVals | Variants<BorderWidthVals>;
-    borderRight?: BorderWidthVals | Variants<BorderWidthVals>;
-    borderLeft?: BorderWidthVals | Variants<BorderWidthVals>;
-    borderBottom?: BorderWidthVals | Variants<BorderWidthVals>;
+    borderColor?: BorderColorVals | Pseudo<BorderColorVals, 'hover' | 'focus'>;
+    border?: BorderWidthVals;
+    borderT?: BorderWidthVals;
+    borderR?: BorderWidthVals;
+    borderL?: BorderWidthVals;
+    borderB?: BorderWidthVals;
+    rounded?: RoundedVals;
 }
 export declare const borderPropNames: Array<keyof IBorderProps>;
-export declare const borderProps: (props: IBorderProps) => {
-    props: {};
-    className: string;
-};
+export declare const borderProps: EnhancerFn<IBorderProps>;
 export declare type RingWidthVals = true;
@@ -23,10 +23,7 @@ export declare type RingColorVals = 'primary' | 'success' | 'warning' | 'danger';
 export interface IRingProps {
-    ring?: RingWidthVals | Variants<RingWidthVals>;
-    ringColor?: RingColorVals | Variants<RingColorVals>;
-    ringOpacity?: RingOpacityVals | Variants<RingOpacityVals>;
+    ring?: RingWidthVals | Pseudo<RingWidthVals, 'focus'>;
+    ringColor?: RingColorVals | Pseudo<RingColorVals, 'focus'>;
+    ringOpacity?: RingOpacityVals | Pseudo<RingOpacityVals, 'focus'>;
 }
 export declare const ringPropNames: Array<keyof IRingProps>;
-export declare const ringProps: (props: IRingProps) => {
-    props: {};
-    className: string;
-};
+export declare const ringProps: EnhancerFn<IRingProps>;

enhancers/color.d.ts

@@ -1,21 +0,20 @@
-import { Variants } from './variants';
+import { Pseudo } from './pseudo';
+import { EnhancerFn } from './types';
 export declare type IntentVals = 'default' | 'success' | 'warning' | 'danger';
 export declare type SemanticColorVals = 'lighten-100' | 'darken-100' | 'link' | 'link-dark' | 'code' | 'on-code' | 'primary' | 'primary-tint' | 'primary-light' | 'primary-dark' | 'on-primary' | 'success' | 'success-tint' | 'success-light' | 'success-dark' | 'on-success' | 'warning' | 'warning-tint' | 'warning-light' | 'warning-dark' | 'on-warning' | 'danger' | 'danger-tint' | 'danger-light' | 'danger-dark' | 'on-danger';
-export declare type GrayColorVals = 'gray-100' | 'gray-200' | 'gray-300' | 'gray-400' | 'gray-500' | 'gray-600' | 'gray-700' | 'gray-800' | 'gray-900';
-export declare type LiteralColorVals = GrayColorVals;
 export declare type TextColorVals = 'body' | 'body-muted' | 'body-light' | 'body-heading' | 'body-paragraph' | SemanticColorVals;
+export declare type PlaceholderColorVals = true | 'primary' | 'success' | 'warning' | 'danger';
 export interface ITextColorProps {
-    color?: TextColorVals | Variants<TextColorVals>;
+    color?: TextColorVals | Pseudo<TextColorVals, 'hover' | 'focus'>;
 }
-export declare const textColorProps: (props: ITextColorProps) => {
-    props: {};
-    className: string;
-};
+export interface IPlaceholderProps {
+    placeholderColor?: PlaceholderColorVals;
+}
 export declare type BackgroundColorVals = 'canvas' | 'canvas-100' | 'canvas-200' | 'canvas-300' | 'transparent' | SemanticColorVals;
 export interface IBackgroundColorProps {
-    bg?: BackgroundColorVals | Variants<BackgroundColorVals>;
+    bg?: BackgroundColorVals | Pseudo<BackgroundColorVals, 'hover' | 'focus' | 'active'>;
 }
-export declare const bgColorProps: (props: IBackgroundColorProps) => {
-    props: {};
-    className: string;
-};
+export interface IColorProps extends ITextColorProps, IPlaceholderProps, IBackgroundColorProps {
+}
+export declare const colorPropNames: Array<keyof IColorProps>;
+export declare const colorProps: EnhancerFn<IColorProps>;

enhancers/flex.d.ts

@@ -0,1 +1,2 @@
+import { EnhancerFn } from './types';
 export declare type FlexVals = 1 | 'auto' | 'initial' | 'none';
@@ -34,5 +35,2 @@ export declare type FlexDirectionVals = 'row' | 'row-reverse' | 'col' | 'col-reverse';
 export declare const flexPropNames: Array<keyof IFlexProps>;
-export declare const flexProps: (props: IFlexProps) => {
-    props: {};
-    className: string;
-};
+export declare const flexProps: EnhancerFn<IFlexProps>;

enhancers/index.d.ts

@@ -7,3 +7,2 @@ export * from './border';
 export * from './position';
-export * from './rounded';
 export * from './shadow';
@@ -10,0 +9,0 @@ export * from './size';

enhancers/interactivity.d.ts

@@ -1,13 +0,16 @@
-import { Variants } from './variants';
+import { Pseudo } from './pseudo';
+import { EnhancerFn } from './types';
 export declare type Cursor = 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'not-allowed';
 export declare type UserSelect = 'none' | 'text' | 'all' | 'auto';
+export declare type Resize = true | 'none' | 'y' | 'x';
+export declare type PointerEvents = 'none' | 'auto';
 export declare type OpacityVals = 0 | 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;
 export interface IInteractivityProps {
     cursor?: Cursor;
-    select?: UserSelect;
-    opacity?: Variants<OpacityVals>;
+    opacity?: Pseudo<OpacityVals, 'hover' | 'focus' | 'active'>;
+    pointerEvents?: PointerEvents;
+    resize?: Resize;
+    userSelect?: UserSelect;
 }
-export declare const interactivityProps: (props: IInteractivityProps) => {
-    props: {};
-    className: string;
-};
+export declare const interactivityPropNames: Array<keyof IInteractivityProps>;
+export declare const interactivityProps: EnhancerFn<IInteractivityProps>;

enhancers/layout.d.ts

@@ -0,10 +1,11 @@
+import { EnhancerFn } from './types';
 declare type DisplayVals = 'block' | 'inline-block' | 'inline' | 'flex' | 'inline-flex' | 'hidden';
+declare type OverflowVals = 'auto' | 'scroll' | 'hidden' | 'visible';
 export interface ILayoutProps {
     display?: DisplayVals;
+    overflowY?: OverflowVals;
+    overflowX?: OverflowVals;
 }
 export declare const layoutPropNames: Array<keyof ILayoutProps>;
-export declare const layoutProps: (props: ILayoutProps) => {
-    props: {};
-    className: string;
-};
+export declare const layoutProps: EnhancerFn<ILayoutProps>;
 export {};

enhancers/position.d.ts

@@ -0,20 +1,20 @@
+import { NegativeSpaceVals, SpaceVals } from './spacing';
+import { EnhancerFn } from './types';
 declare type PositionVals = 'static' | 'fixed' | 'absolute' | 'relative' | 'sticky';
-declare type InsetVals = 'auto' | true;
-declare type PinVals = 'auto' | 0;
+declare type PositionLocVals = 'auto' | SpaceVals | NegativeSpaceVals;
+declare type PinVals = true | PositionLocVals;
 declare type ZIndexVals = 0 | 10 | 20 | 40 | 50 | 'auto';
 export interface IPositionProps {
-    position?: PositionVals;
-    inset?: InsetVals;
-    insetY?: InsetVals;
-    insetX?: InsetVals;
-    top?: PinVals;
-    left?: PinVals;
-    right?: PinVals;
-    bottom?: PinVals;
+    pos?: PositionVals;
+    pin?: PinVals;
+    pinY?: PinVals;
+    pinX?: PinVals;
+    top?: PositionLocVals;
+    left?: PositionLocVals;
+    right?: PositionLocVals;
+    bottom?: PositionLocVals;
     zIndex?: ZIndexVals;
 }
-export declare const positionProps: (props: IPositionProps) => {
-    props: {};
-    className: string;
-};
+export declare const positionPropNames: Array<keyof IPositionProps>;
+export declare const positionProps: EnhancerFn<IPositionProps>;
 export {};

enhancers/shadow.d.ts

@@ -1,9 +0,8 @@
-import { Variants } from './variants';
-export declare type BoxShadowVals = true | false | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl' | '2xl' | 'outline-primary' | 'outline-success' | 'outline-warning' | 'outline-danger';
+import { Pseudo } from './pseudo';
+import { EnhancerFn } from './types';
+export declare type BoxShadowVals = true | false | 'sm' | 'md' | 'lg' | 'xl' | 'xl' | '2xl';
 export interface IShadowProps {
-    boxShadow?: BoxShadowVals | Variants<BoxShadowVals>;
+    boxShadow?: BoxShadowVals | Pseudo<BoxShadowVals, 'hover' | 'focus'>;
 }
-export declare const shadowProps: (props: IShadowProps) => {
-    props: {};
-    className: string;
-};
+export declare const shadowPropNames: Array<keyof IShadowProps>;
+export declare const shadowProps: EnhancerFn<IShadowProps>;

enhancers/size.d.ts

 import { SpaceVals } from './spacing';
-export declare type HeightVals = 'auto' | 'px' | 'xs' | 'sm' | 'md' | 'lg' | 'full' | 'screen';
+import { EnhancerFn } from './types';
+export declare type HeightVals = SpaceVals | 'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' | 'screen';
 export declare type MaxHeightVals = 'full' | 'screen';
 export declare type MinHeightVals = 'full' | 'screen';
-export declare type WidthVals = SpaceVals | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12' | 'full' | 'screen';
-export declare type MinWidthVals = 'full';
-declare type OverflowVals = 'auto' | 'scroll' | 'hidden' | 'visible';
+export declare type WidthVals = SpaceVals | 'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | 'full' | 'screen' | 'min' | 'max';
+export declare type MaxWidthVals = 'none' | 'full' | 'min' | 'max' | 'prose';
+export declare type MinWidthVals = 'full' | 'min' | 'max';
 export interface IHeightProps {
-    height?: HeightVals;
-    maxHeight?: MaxHeightVals;
-    minHeight?: MinHeightVals;
-    overflowY?: OverflowVals;
+    h?: HeightVals;
+    maxH?: MaxHeightVals;
+    minH?: MinHeightVals;
 }
 export interface IWidthProps {
-    width?: WidthVals;
-    minWidth?: MinWidthVals;
-    overflowX?: OverflowVals;
+    w?: WidthVals;
+    maxW?: MaxWidthVals;
+    minW?: MinWidthVals;
 }
-export declare const heightProps: (props: IHeightProps) => {
-    props: {};
-    className: string;
-};
-export declare const widthProps: (props: IWidthProps) => {
-    props: {};
-    className: string;
-};
-export {};
+export interface ISizeProps extends IHeightProps, IWidthProps {
+}
+export declare const sizePropNames: Array<keyof ISizeProps>;
+export declare const sizeProps: EnhancerFn<ISizeProps>;

enhancers/spacing.d.ts

@@ -0,1 +1,2 @@
+import { EnhancerFn } from './types';
 export declare type SpaceVals = 'auto' | 'px' | 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 16 | 20 | 24 | 32 | 40 | 60 | 80;
@@ -13,17 +14,14 @@ export declare type NegativeSpaceVals = '-px' | -0 | -0.5 | -1 | -1.5 | -2 | -2.5 | -3 | -3.5 | -4 | -5 | -6 | -7 | -8 | -9 | -10 | -11 | -12 | -14 | -16 | -20 | -24 | -32 | -40 | -60 | -80;
 export interface IPaddingProps {
-    p?: SpaceVals | NegativeSpaceVals;
-    px?: SpaceVals | NegativeSpaceVals;
-    py?: SpaceVals | NegativeSpaceVals;
-    pt?: SpaceVals | NegativeSpaceVals;
-    pr?: SpaceVals | NegativeSpaceVals;
-    pb?: SpaceVals | NegativeSpaceVals;
-    pl?: SpaceVals | NegativeSpaceVals;
+    p?: SpaceVals;
+    px?: SpaceVals;
+    py?: SpaceVals;
+    pt?: SpaceVals;
+    pr?: SpaceVals;
+    pb?: SpaceVals;
+    pl?: SpaceVals;
 }
-export declare const marginProps: (props: IMarginProps) => {
-    props: {};
-    className: string;
-};
-export declare const paddingProps: (props: IPaddingProps) => {
-    props: {};
-    className: string;
-};
+export interface ISpacingProps extends IMarginProps, IPaddingProps {
+}
+export declare const spacingPropNames: Array<keyof ISpacingProps>;
+export declare const marginProps: EnhancerFn<IMarginProps>;
+export declare const paddingProps: EnhancerFn<IPaddingProps>;

enhancers/typography.d.ts

@@ -0,15 +1,32 @@
+import { EnhancerFn } from './types';
 export declare type FontSizeVals = '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
 export declare type LineHeights = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose';
+export declare type LetterSpacing = 'tight' | 'normal' | 'wide';
 export declare type ParagraphSizes = 'paragraph-leading' | 'paragraph' | 'paragraph-small' | 'paragraph-tiny';
 export declare type FontFamilyVals = 'ui' | 'prose' | 'mono';
 export declare type FontWeightVals = 'normal' | 'light' | 'medium' | 'semibold' | 'bold';
-export interface IFontSizeProps {
+export declare type FontStyleVals = 'italic' | 'non-italic';
+export declare type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export declare type TextDecoration = 'underline' | 'line-through' | 'no-underline';
+export declare type TextTransform = 'uppercase' | 'lowercase' | 'capitalize' | 'normal-case';
+export declare type TextOverflow = 'truncate' | 'overflow-ellipsis' | 'overflow-clip';
+export declare type VerticalAlign = 'baseline' | 'top' | 'middle' | 'bottom' | 'text-top' | 'text-bottom';
+export declare type Whitespace = 'normal' | 'nowrap' | 'pre' | 'pre-line' | 'pre-wrap';
+export declare type WordBreak = 'normal' | 'words' | 'all';
+export interface ITypographyProps {
     fontSize?: FontSizeVals | ParagraphSizes;
     lineHeight?: LineHeights | ParagraphSizes;
+    letterSpacing?: LetterSpacing;
     fontFamily?: FontFamilyVals;
     fontWeight?: FontWeightVals;
+    fontStyle?: FontStyleVals;
+    textAlign?: TextAlign;
+    textDecoration?: TextDecoration;
+    textTransform?: TextTransform;
+    textOverflow?: TextOverflow;
+    verticalAlign?: VerticalAlign;
+    whitespace?: Whitespace;
+    wordBreak?: WordBreak;
 }
-export declare const typographyProps: (props: IFontSizeProps) => {
-    props: {};
-    className: string;
-};
+export declare const typographyPropNames: Array<keyof ITypographyProps>;
+export declare const typographyProps: EnhancerFn<ITypographyProps>;

package.json

 {
   "name": "@stoplight/mosaic",
-  "version": "1.0.0-beta.6",
+  "version": "1.0.0-beta.7",
   "sideEffects": false,
@@ -5,0 +5,0 @@ "peerDependencies": {

utils/split-box-props.d.ts

@@ -1,3 +0,3 @@
-import { IFlexProps } from '../enhancers/flex';
-interface IEnhancerProps extends IFlexProps {
+import { IBorderProps, IColorProps, IFlexProps, IInteractivityProps, ILayoutProps, IPositionProps, IShadowProps, ISizeProps, ISpacingProps, ITypographyProps } from '../enhancers';
+interface IEnhancerProps extends IBorderProps, IColorProps, IFlexProps, IInteractivityProps, ILayoutProps, IPositionProps, IShadowProps, ISizeProps, ISpacingProps, ITypographyProps {
 }
@@ -4,0 +4,0 @@ interface SplitBoxProps<P extends IEnhancerProps> {

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

337762

decreased by-1.68%

Lines of code

4962

decreased by-1.47%

No dependency changes