@cube-dev/ui-kit 0.1.5 → 0.2.0

package/README.md

@@ -14,7 +14,9 @@ You will also see any lint errors in the console.
 
 Run storybook with all the components of UI Kit.
 
-### yarn run build
+Deployed version of the Storybook from the `main` branch is here: https://cube-uikit-storybook.netlify.app/ 
+
+### yarn build
 
 Builds a static copy of UIKit to the `dist/` folder.
 Your app is ready to be deployed!

package/dist/cjs/components/actions/Action.d.ts

@@ -1,7 +1,7 @@
 import { MouseEventHandler } from 'react';
-import { BaseProps, ContainerStyleProps, TagNameProps, TextStyleProps } from '../types';
+import { BaseProps, BaseStyleProps, ContainerStyleProps, TagNameProps, TextStyleProps } from '../types';
 import { AriaButtonProps } from '@react-types/button';
-export interface CubeActionProps extends BaseProps, TagNameProps, ContainerStyleProps, TextStyleProps, Omit<AriaButtonProps, 'type'> {
+export interface CubeActionProps extends BaseProps, TagNameProps, BaseStyleProps, ContainerStyleProps, TextStyleProps, Omit<AriaButtonProps, 'type'> {
     to?: string;
     label?: string;
     skipWarnings?: boolean;

package/dist/cjs/components/content/Tag/Tag.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import THEMES from '../../../data/themes';
+import { BaseProps, ContainerStyleProps } from '../../types';
+export interface CubeTagProps extends BaseProps, ContainerStyleProps {
+    type?: keyof typeof THEMES;
+    isClosable?: boolean;
+    onClose?: () => void;
+}
+declare const _Tag: import("react").ForwardRefExoticComponent<CubeTagProps & import("react").RefAttributes<unknown>>;
+export { _Tag as Tag };

package/dist/cjs/components/content/Text.d.ts

@@ -18,7 +18,7 @@ export interface CubeTextProps extends BaseProps, TagNameProps, TextStyleProps,
      * Whether the text has italic style
      */
     italic?: ResponsiveStyleValue<CSSProperties['fontStyle']>;
-    weight?: ResponsiveStyleValue<CSSProperties['fontWeight']>;
+    weight?: string | number;
     align?: ResponsiveStyleValue<CSSProperties['textAlign']>;
     transform?: ResponsiveStyleValue<CSSProperties['textTransform']>;
 }

package/dist/cjs/components/content/Title.d.ts

@@ -1,12 +1,9 @@
 /// <reference types="react" />
 import { CubeTextProps } from './Text';
-import { ResponsiveStyleValue } from '../../utils/styles';
-import { BlockStyleProps, PositionStyleProps, TagNameProps } from '../types';
-export interface CubeTitleProps extends CubeTextProps, TagNameProps, BlockStyleProps, PositionStyleProps {
+import { BaseProps, BlockStyleProps, PositionStyleProps, TagNameProps } from '../types';
+export interface CubeTitleProps extends BaseProps, CubeTextProps, TagNameProps, BlockStyleProps, PositionStyleProps {
     /** The level of the heading **/
     level?: 1 | 2 | 3 | 4 | 5 | 6;
-    /** The size style for the heading **/
-    size?: ResponsiveStyleValue<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | string>;
 }
 declare const Title: import("react").ForwardRefExoticComponent<CubeTitleProps & import("react").RefAttributes<unknown>> & {
     Danger: import("react").ForwardRefExoticComponent<CubeTitleProps & import("react").RefAttributes<unknown>>;

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

@@ -1,4 +1,4 @@
-import { AllHTMLAttributes, CSSProperties, JSXElementConstructor, ReactElement, ReactNodeArray, ReactPortal } from 'react';
+import { AllHTMLAttributes, CSSProperties } from 'react';
 import { Styles } from '../styles/types';
 import { BASE_STYLES, BLOCK_STYLES, COLOR_STYLES, CONTAINER_STYLES, DIMENSION_STYLES, FLOW_STYLES, OUTER_STYLES, POSITION_STYLES, TEXT_STYLES } from '../styles/list';
 export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLElement>, 'className' | 'role' | 'id'> {
@@ -34,11 +34,10 @@ export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLEle
         [key: string]: string | number | null;
     });
 }
-export interface BaseProps extends BasePropsWithoutChildren {
-    children?: ReactElement<any, string | JSXElementConstructor<any>> | string | number | {} | ReactNodeArray | ReactPortal | boolean | null | undefined;
+export interface BaseProps extends BasePropsWithoutChildren, Pick<AllHTMLAttributes<HTMLElementTagNameMap['div']>, 'children'> {
 }
 export interface AllBaseProps<K extends keyof HTMLElementTagNameMap = 'div'> extends BaseProps, Omit<AllHTMLAttributes<HTMLElementTagNameMap[K]>, 'style'> {
-    as?: K;
+    as?: string;
 }
 export declare type BaseStyleProps = Pick<Styles, typeof BASE_STYLES[number]>;
 export declare type PositionStyleProps = Pick<Styles, typeof POSITION_STYLES[number]>;

package/dist/cjs/css-properties.d.ts

@@ -17,6 +17,7 @@ declare const PROPS: {
     'minor-color': string;
     'success-bg-color': string;
     'note-bg-color': string;
+    'note-text-color': string;
     'danger-bg-color': string;
     'danger-bg-hover-color': string;
     'primary-1': string;
@@ -64,15 +65,76 @@ declare const PROPS: {
     'h1-font-size': string;
     'h1-line-height': string;
     'h1-letter-spacing': string;
+    'h1-font-weight': string;
     'h2-font-size': string;
     'h2-line-height': string;
+    'h2-letter-spacing': string;
+    'h2-font-weight': string;
     'h3-font-size': string;
     'h3-line-height': string;
+    'h3-letter-spacing': string;
+    'h3-font-weight': string;
     'h4-font-size': string;
     'h4-line-height': string;
+    'h4-letter-spacing': string;
+    'h4-font-weight': string;
     'h5-font-size': string;
     'h5-line-height': string;
+    'h5-letter-spacing': string;
+    'h5-font-weight': string;
+    'h5s-font-size': string;
+    'h5s-line-height': string;
+    'h5s-letter-spacing': string;
+    'h5s-font-weight': string;
+    'h5m-font-size': string;
+    'h5m-line-height': string;
+    'h5m-letter-spacing': string;
+    'h5m-font-weight': string;
     'h6-font-size': string;
     'h6-line-height': string;
+    't1-font-size': string;
+    't1-line-height': string;
+    't1-letter-spacing': string;
+    't1-font-weight': string;
+    't2-font-size': string;
+    't2-line-height': string;
+    't2-letter-spacing': string;
+    't2-font-weight': string;
+    't3-font-size': string;
+    't3-line-height': string;
+    't3-letter-spacing': string;
+    't3-font-weight': string;
+    't4-font-size': string;
+    't4-line-height': string;
+    't4-letter-spacing': string;
+    't4-font-weight': string;
+    't4m-font-size': string;
+    't4m-line-height': string;
+    't4m-letter-spacing': string;
+    't4m-font-weight': string;
+    'p1-font-size': string;
+    'p1-line-height': string;
+    'p1-letter-spacing': string;
+    'p1-font-weight': string;
+    'p2-font-size': string;
+    'p2-line-height': string;
+    'p2-letter-spacing': string;
+    'p2-font-weight': string;
+    'p3-font-size': string;
+    'p3-line-height': string;
+    'p3-letter-spacing': string;
+    'p3-font-weight': string;
+    'p4-font-size': string;
+    'p4-line-height': string;
+    'p4-letter-spacing': string;
+    'p4-font-weight': string;
+    'tag-font-size': string;
+    'tag-line-height': string;
+    'tag-letter-spacing': string;
+    'tag-font-weight': string;
+    'default-font-size': string;
+    'default-line-height': string;
+    'default-letter-spacing': string;
+    'default-font-weight': string;
 };
 export default PROPS;

package/dist/cjs/data/themes.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
     };
     readonly note: {
         readonly fill: "#note-bg";
-        readonly color: "#note";
+        readonly color: "#note-text";
         readonly border: "#note.40";
     };
     readonly disabled: {

package/dist/cjs/index.d.ts

@@ -64,6 +64,8 @@ export type { CubeSkeletonProps } from './components/content/Skeleton/Skeleton';
 export { CloudLogo } from './components/other/CloudLogo/CloudLogo';
 export { Badge } from './components/content/Badge/Badge';
 export type { CubeBadgeProps } from './components/content/Badge/Badge';
+export { Tag } from './components/content/Tag/Tag';
+export type { CubeTagProps } from './components/content/Tag/Tag';
 export { SearchInput } from './components/forms/SearchInput/SearchInput';
 export type { CubeSearchInputProps } from './components/forms/SearchInput/SearchInput';
 export { Submit } from './components/actions/Button/Submit';