@cube-dev/ui-kit 0.7.4 → 0.7.8

package/dist/cjs/shared/form.d.ts

@@ -50,11 +50,13 @@ export interface FormFieldProps extends FormBaseProps {
     label?: ReactNode;
     /** Custom label props */
     labelProps?: Props;
-    /** Message for the field. Some additional information or error notice. */
+    /** Message for the field. Some additional information or error notice */
     message?: ReactNode;
+    /** Description for the field. Will be placed below the label */
+    description?: ReactNode;
     /** A tooltip that is shown inside the label */
     tooltip?: ReactNode;
-    /** Whether the element should receive focus on render. */
+    /** Whether the element should receive focus on render */
     autoFocus?: boolean;
 }
 export declare type ValidationRuleBase = {

package/dist/cjs/stories/FormFieldArgs.d.ts

@@ -20,6 +20,12 @@ export declare const LABEL_ARG: {
         description: string;
     };
 };
+export declare const DESCRIPTION_ARG: {
+    description: {
+        control: string;
+        description: string;
+    };
+};
 export declare const NECESSITY_INDICATOR_ARG: {
     necessityIndicator: {
         description: string;

package/dist/cjs/styles/styledScrollbar.d.ts

@@ -9,25 +9,9 @@ export declare function styledScrollbarStyle({ styledScrollbar: val }: {
     $?: undefined;
     display?: undefined;
 })[] | ({
-    '--local-scrollbar-thumb-color': string;
-    '--local-scrollbar-border-color': string;
-    '--local-scrollbar-bg-color': string;
-    $?: undefined;
-    width?: undefined;
-    height?: undefined;
-    'background-color'?: undefined;
-    'border-radius'?: undefined;
-    border?: undefined;
-    'background-clip'?: undefined;
-    'scrollbar-width'?: undefined;
-    'scrollbar-color'?: undefined;
-} | {
     $: string;
     width: string;
     height: string;
-    '--local-scrollbar-thumb-color'?: undefined;
-    '--local-scrollbar-border-color'?: undefined;
-    '--local-scrollbar-bg-color'?: undefined;
     'background-color'?: undefined;
     'border-radius'?: undefined;
     border?: undefined;
@@ -37,9 +21,6 @@ export declare function styledScrollbarStyle({ styledScrollbar: val }: {
 } | {
     $: string;
     'background-color': string;
-    '--local-scrollbar-thumb-color'?: undefined;
-    '--local-scrollbar-border-color'?: undefined;
-    '--local-scrollbar-bg-color'?: undefined;
     width?: undefined;
     height?: undefined;
     'border-radius'?: undefined;
@@ -53,9 +34,6 @@ export declare function styledScrollbarStyle({ styledScrollbar: val }: {
     'border-radius': string;
     border: string;
     'background-clip': string;
-    '--local-scrollbar-thumb-color'?: undefined;
-    '--local-scrollbar-border-color'?: undefined;
-    '--local-scrollbar-bg-color'?: undefined;
     width?: undefined;
     height?: undefined;
     'scrollbar-width'?: undefined;
@@ -63,9 +41,6 @@ export declare function styledScrollbarStyle({ styledScrollbar: val }: {
 } | {
     'scrollbar-width': string;
     'scrollbar-color': string;
-    '--local-scrollbar-thumb-color'?: undefined;
-    '--local-scrollbar-border-color'?: undefined;
-    '--local-scrollbar-bg-color'?: undefined;
     $?: undefined;
     width?: undefined;
     height?: undefined;

package/dist/cjs/tokens.d.ts

@@ -148,5 +148,12 @@ declare const TOKENS: {
     'default-line-height': string;
     'default-letter-spacing': string;
     'default-font-weight': string;
+    'scrollbar-width': string;
+    'scrollbar-outline-width': string;
+    'scrollbar-radius': string;
+    'scrollbar-thumb-color': string;
+    'scrollbar-outline-color': string;
+    'scrollbar-bg-color': string;
+    'scrollbar-corner-color': string;
 };
 export { TOKENS };

package/dist/cjs/utils/react/index.d.ts

@@ -5,3 +5,4 @@ export { modAttrs } from './modAttrs';
 export { useSlotProps, SlotProvider, ClearSlots } from './Slots';
 export { useLayoutEffect } from './useLayoutEffect';
 export { useCombinedRefs } from './useCombinedRefs';
+export { wrapNodeIfPlain } from './wrapNodeIfPlain';

package/dist/cjs/utils/react/wrapNodeIfPlain.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare function wrapNodeIfPlain(children: ReactNode, render: () => ReactNode): ReactNode;

package/dist/mjs/components/Root.d.ts

@@ -4,10 +4,14 @@ export interface CubeRootProps extends BaseProps {
     tokens?: {
         [key: string]: string;
     };
+    bodyStyles?: {
+        [key: string]: string;
+    };
     fonts?: boolean;
     publicUrl?: string;
     router?: any;
     font?: string;
     monospaceFont?: string;
+    applyLegacyTokens?: boolean;
 }
 export declare const Root: (allProps: CubeRootProps) => JSX.Element;

package/dist/mjs/components/content/Result/Result.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { BaseProps, ContainerStyleProps } from '../../types';
+export interface CubeResultProps extends BaseProps, ContainerStyleProps {
+    /** Additional block content. For example, a set of buttons */
+    children?: ReactNode;
+    /** Custom icon element */
+    icon?: ReactNode;
+    /**
+     * Result status from ready-made templates
+     * @default 'info'
+     */
+    status?: CubeResultStatus;
+    /** The subTitle */
+    subTitle?: ReactNode;
+    /** The title */
+    title?: ReactNode;
+}
+export declare type CubeResultStatus = 'success' | 'error' | 'info' | 'warning' | 404 | 403 | 500;
+export declare const Result: import("react").ForwardRefExoticComponent<CubeResultProps & import("react").RefAttributes<HTMLElement>>;

package/dist/mjs/components/forms/FieldWrapper.d.ts

@@ -5,15 +5,21 @@ export declare type CubeFieldWrapperProps = {
     as: string;
     labelPosition: LabelPosition;
     label?: string;
+    labelStyles?: Styles;
     styles?: Styles;
+    /** Whether the input is required */
     isRequired?: boolean;
+    /** Whether the input is disabled */
     isDisabled?: boolean;
-    labelStyles?: Styles;
     necessityIndicator?: NecessityIndicator;
     labelProps?: any;
     fieldProps?: any;
+    /** Custom message for the field. It will be placed below the label and the input */
     message?: string | ReactNode;
+    /** Styles for the message */
     messageStyles?: Styles;
+    /** The description for the field. It will be placed below the label */
+    description?: string;
     Component?: JSX.Element;
     validationState?: ValidationState;
     requiredMark?: boolean;

package/dist/mjs/components/forms/Form/Field.d.ts

@@ -19,6 +19,8 @@ export interface CubeFieldProps extends OptionalFieldBaseProps {
     form?: CubeFormInstance;
     /** The message for the field or text for the error */
     message?: string;
+    /** The description for the field */
+    description?: ReactNode;
     /** Tooltip for the label that explains something. */
     tooltip?: ReactNode;
     /** Field name. It's used as a key the form data. */

package/dist/mjs/components/forms/Form/Form.d.ts

@@ -2,6 +2,7 @@ import { FormHTMLAttributes } from 'react';
 import { CubeFormInstance, CubeFormData } from './useForm';
 import { BaseProps, ContainerStyleProps } from '../../types';
 import { FormBaseProps } from '../../../shared';
+import { Styles } from '../../../styles/types';
 export declare const FormContext: import("react").Context<{}>;
 export declare function useFormProps(props: any): any;
 export interface CubeFormProps extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {
@@ -19,6 +20,8 @@ export interface CubeFormProps extends FormBaseProps, BaseProps, ContainerStyleP
     onSubmitFailed?: (any?: any) => void | Promise<any>;
     /** Set form instance created by useForm */
     form?: CubeFormInstance;
+    /** The size of the side area with labels. Only for `labelPosition="side"` */
+    labelWidth?: Styles['width'];
 }
 /**
  * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.

package/dist/mjs/index.d.ts

@@ -47,6 +47,8 @@ export { Header } from './components/content/Header';
 export type { CubeHeaderProps } from './components/content/Header';
 export { Footer } from './components/content/Footer';
 export type { CubeFooterProps } from './components/content/Footer';
+export { Result } from './components/content/Result/Result';
+export type { CubeResultProps, CubeResultStatus, } from './components/content/Result/Result';
 export { FieldWrapper } from './components/forms/FieldWrapper';
 export type { CubeFieldWrapperProps } from './components/forms/FieldWrapper';
 export { LoadingAnimation } from './components/status/LoadingAnimation/LoadingAnimation';