@storybook/react-native-theming 8.2.0-alpha.0 → 8.3.0-alpha.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as RN from 'react-native';
-import { TextStyle, ShadowStyleIOS, ViewStyle } from 'react-native';
+import { TextStyle } from 'react-native';
 import * as React$1 from 'react';
 
 declare const color: {
@@ -74,14 +74,26 @@ interface Brand {
     target: string | null | undefined;
 }
 interface StorybookThemeWeb {
+    base: 'light' | 'dark';
     color: Color;
     background: Background;
     typography: Typography;
+    textMutedColor: string;
     input: {
         border: string;
         background: string;
         color: string;
         borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    button: {
+        background: string;
+        border: string;
+    };
+    boolean: {
+        background: string;
+        selectedBackground: string;
     };
     layoutMargin: number;
     appBorderColor: string;
@@ -91,204 +103,89 @@ interface StorybookThemeWeb {
     barSelectedColor: string;
     barBg: string;
     brand: Brand;
-    [key: string]: any;
 }
 
-type ShadowStyle = ShadowStyleIOS | Pick<ViewStyle, 'elevation'>;
-type FontWeight = TextStyle['fontWeight'];
-/**
- * Primitive tokens used to build the theme.
- *
- * Ideally components should not use these values directly, and should prefer
- * to use more semantic values from the theme.
- */
-interface ThemeTokens {
-    spacing1: number;
-    spacing2: number;
-    spacing3: number;
-    spacing4: number;
-    spacing5: number;
-    spacing6: number;
-    fontSize: {
-        small: number;
-        smaller: number;
-        normal: number;
-    };
-    color: {
-        navy: string;
-        offBlack: string;
-        black: string;
-        white: string;
-        grey200: string;
-        grey700: string;
-        grey800: string;
-        red500: string;
-        blue100: string;
-        blue200: string;
-        blue250: string;
-        blue300: string;
-        blue400: string;
-        blue600: string;
-        green500: string;
-    };
-    borderRadius: {
-        small: number;
-        medium: number;
-        large: number;
-        round: number;
-    };
-    borderWidthNormal: number;
-    /** Elevation shadows */
-    elevation: {
-        floating: ShadowStyle;
-    };
-}
-interface ThemeButton {
-    textColor: string;
-    backgroundColor: string;
-    borderColor: string;
-    borderWidth: number;
-    borderRadius: number;
-}
-interface StorybookTheme extends StorybookThemeWeb {
-    tokens: ThemeTokens;
-    backgroundColor: string;
-    text: {
-        primaryColor: string;
-        secondaryColor: string;
-        linkColor: string;
-    };
-    preview: {
-        containerBackgroundColor: string;
-        backgroundColor: string;
-    };
-    /** Navigation bar and related area */
-    navigation: {
-        backgroundColor: string;
-        borderColor: string;
-        borderWidth: number;
-        visibilityBorderRadius: number;
-        visibilityInnerBorderColor: string;
-        visibilityOuterBorderColor: string;
-    };
-    /** Side panels (Story list, addons) */
-    panel: {
-        backgroundColor: string;
-        borderWidth: number;
-        borderColor: string;
-        paddingVertical: number;
-        paddingHorizontal: number;
-    };
-    /** Story list and list items */
-    storyList: {
-        fontSize: number;
-        headerPaddingHorizontal: number;
-        headerPaddingVertical: number;
-        headerTextColor: string;
-        headerFontWeight: FontWeight;
-        storyPaddingHorizontal: number;
-        storyPaddingVertical: number;
-        storyIndent: number;
-        storyTextColor: string;
-        storyFontWeight: FontWeight;
-        storySelectedBackgroundColor: string;
-        storySelectedTextColor: string;
-        storySelectedFontWeight: FontWeight;
-        sectionSpacing: number;
-        sectionActiveBackgroundColor: string;
-        sectionBorderRadius: number;
-        search: {
-            fontSize: number;
-            textColor: string;
-            placeholderTextColor: string;
-            borderRadius: number;
-            borderColor: string;
-            borderWidth: number;
-            backgroundColor: string;
-            paddingVertical: number;
-            paddingHorizontal: number;
-        };
-    };
-    /** Buttons */
-    button: {
-        fontSize: number;
-        fontWeight: FontWeight;
-        paddingVertical: number;
-        paddingHorizontal: number;
-        primary: ThemeButton;
-        secondary: ThemeButton;
-    };
-    /** Tabs (navigation and addons) */
-    tabs: {
-        fontSize: number;
-        fontWeight: FontWeight;
-        paddingVertical: number;
-        paddingHorizontal: number;
-        borderWidth: number;
-        borderRadius: number;
-        activeBorderColor: string;
-        activeBackgroundColor: string;
-        activeTextColor: string;
-        inactiveBorderColor: string;
-        inactiveBackgroundColor: string;
-        inactiveTextColor: string;
-    };
-    /** Inputs (text, radio, slider, etc.) */
-    inputs: {
-        errorTextColor: string;
-        labelFontSize: number;
-        labelTextColor: string;
-        text: {
-            fontSize: number;
-            textColor: string;
-            borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
-            borderRadius: number;
-            paddingVertical: number;
-            paddingHorizontal: number;
-        };
-        radio: {
-            fontSize: number;
-            height: number;
-            borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
-            paddingVertical: number;
-            paddingHorizontal: number;
-            activeBackgroundColor: string;
-            itemSpacing: number;
-            labelSpacing: number;
-        };
-        swatch: {
-            fontSize: number;
-            height: number;
-            borderWidth: number;
-            borderColor: string;
-            backgroundColor: string;
-            outerBorderRadius: number;
-            innerBorderRadius: number;
-            paddingVertical: number;
-            paddingHorizontal: number;
-            nameTextWeight: FontWeight;
-        };
-        slider: {
-            fontSize: number;
-            labelTextColor: string;
-            valueTextColor: string;
-        };
-    };
+type StorybookTheme = StorybookThemeWeb;
+declare const theme: StorybookThemeWeb;
+declare const darkTheme: StorybookThemeWeb;
+
+type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length']
+  ? true
+  : false
+
+// unpack all here to avoid infinite self-referencing when defining our own JSX namespace for the pre-React 19 case
+type ReactJSXElement = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.Element
+  : /** @ts-ignore */
+    React.JSX.Element
+type ReactJSXElementClass = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementClass
+  : /** @ts-ignore */
+    React.JSX.ElementClass
+type ReactJSXElementAttributesProperty = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementAttributesProperty
+  : /** @ts-ignore */
+    React.JSX.ElementAttributesProperty
+type ReactJSXElementChildrenAttribute = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.ElementChildrenAttribute
+  : /** @ts-ignore */
+    React.JSX.ElementChildrenAttribute
+type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.LibraryManagedAttributes<C, P>
+  : /** @ts-ignore */
+    React.JSX.LibraryManagedAttributes<C, P>
+type ReactJSXIntrinsicAttributes = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicAttributes
+  : /** @ts-ignore */
+    React.JSX.IntrinsicAttributes
+type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicClassAttributes<T>
+  : /** @ts-ignore */
+    React.JSX.IntrinsicClassAttributes<T>
+type ReactJSXIntrinsicElements = true extends IsPreReact19
+  ? /** @ts-ignore */
+    JSX.IntrinsicElements
+  : /** @ts-ignore */
+    React.JSX.IntrinsicElements
+
+type ReactJSXElementType = true extends IsPreReact19
+  ? // based on the code from @types/react@18.2.8
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
+    string | React.JSXElementConstructor<any>
+  : /** @ts-ignore */
+    React.JSX.ElementType
+
+declare namespace ReactJSX {
+  type ElementType = ReactJSXElementType
+  interface Element extends ReactJSXElement {}
+  interface ElementClass extends ReactJSXElementClass {}
+  interface ElementAttributesProperty
+    extends ReactJSXElementAttributesProperty {}
+  interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
+
+  type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>
+
+  interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T>
+    extends ReactJSXIntrinsicClassAttributes<T> {}
+
+  type IntrinsicElements = ReactJSXIntrinsicElements
 }
-declare const theme: StorybookTheme;
-declare const darkTheme: StorybookTheme;
 
 /**
  * @desc Utility type for getting props type of React component.
  * It takes `defaultProps` into an account - making props with defaults optional.
  */
 type PropsOf<
-  C extends keyof JSX.IntrinsicElements | React$1.JSXElementConstructor<any>
-> = JSX.LibraryManagedAttributes<C, React$1.ComponentProps<C>>
+  C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>
+> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>
 
 // We need to use this version of Omit as it's distributive (Will preserve unions)
 type DistributiveOmit<T, U> = T extends any