@compiled/react 0.14.0 → 0.16.0

package/dist/esm/runtime/ax.js.flow

@@ -1,27 +0,0 @@
-/**
- * Flowtype definitions for ax
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Joins classes together and ensures atomic declarations of a single group exist.
- * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore),
- * where both `group` and `value` are hashes **four characters long**.
- * Class names can be of any length,
- * this function can take both atomic declarations and class names.
- *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
- * ```
- *
- * Output:
- *
- * ```
- * '_aaaacccc'
- * ```
- * @param classes
- */
-declare export default function ax(classNames: (string | void | false)[]): string | void;

package/dist/esm/runtime/cache.js.flow

@@ -1,18 +0,0 @@
-/**
- * Flowtype definitions for cache
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Returns `true` when caching should be disabled, else `false`.
- *
- * Any code within this check will be removed in the output bundles:
- *
- * ```js
- * if (isCacheDisabled()) {
- *   // This code will be removed from the output bundles
- * }
- * ```
- */
-declare export var isCacheDisabled: () => boolean;

package/dist/esm/runtime/css-custom-property.js.flow

@@ -1,19 +0,0 @@
-/**
- * Flowtype definitions for css-custom-property
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Returns a CSS custom property value with an optional suffix & prefix.
- * Prefix will only be added if there is a suffix.
- * If the value is undefined a fallback value will be returned to prevent children inheriting parent values.
- * @param value
- * @param suffix
- * @param prefix
- */
-declare export default function cssCustomPropertyValue(
-  value: string | number | null | void,
-  suffix?: string | void | null,
-  prefix?: string | void | null
-): string | number;

package/dist/esm/runtime/dev-warnings.js.flow

@@ -1,7 +0,0 @@
-/**
- * Flowtype definitions for dev-warnings
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-declare export var analyzeCssInDev: (sheet: string) => void;

package/dist/esm/runtime/index.js.flow

@@ -1,11 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-declare export { default as CS } from './style';
-declare export { default as CC } from './style-cache';
-declare export { default as ax } from './ax';
-declare export { default as ac, clearCache as clearAcCache } from './ac';
-declare export { default as ix } from './css-custom-property';

package/dist/esm/runtime/is-server-environment.js.flow

@@ -1,19 +0,0 @@
-/**
- * Flowtype definitions for is-server-environment
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Returns `true` when inside a node environment,
- * else `false`.
- *
- * When using this it will remove any node code from the browser bundle - for example:
- *
- * ```js
- * if (isServerEnvironment()) {
- *   // This code will be removed from the browser bundle
- * }
- * ```
- */
-declare export var isServerEnvironment: () => boolean;

package/dist/esm/runtime/sheet.js.flow

@@ -1,36 +0,0 @@
-/**
- * Flowtype definitions for sheet
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { Bucket, StyleSheetOpts } from './types';
-/**
- * Ordered style buckets using their short psuedo name.
- * If changes are needed make sure that it aligns with the definition in `sort-at-rule-pseudos.tsx`.
- */
-declare export var styleBucketOrdering: Bucket[];
-/**
- * Gets the bucket depending on the sheet.
- * This function makes assumptions as to the form of the input class name.
- *
- * Input:
- *
- * ```
- * "._a1234567:hover{ color: red; }"
- * ```
- *
- * Output:
- *
- * ```
- * "h"
- * ```
- * @param sheet styles for which we are getting the bucket
- */
-declare export var getStyleBucketName: (sheet: string) => Bucket;
-/**
- * Used to move styles to the head of the application during runtime.
- * @param css string
- * @param opts StyleSheetOpts
- */
-declare export default function insertRule(css: string, opts: StyleSheetOpts): void;

package/dist/esm/runtime/style-cache.js.flow

@@ -1,19 +0,0 @@
-/**
- * Flowtype definitions for style-cache
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { ProviderComponent, UseCacheHook } from './types';
-/**
- * Hook using the cache created on the server or client.
- */
-declare export var useCache: UseCacheHook;
-/**
- * On the server this ensures the minimal amount of styles will be rendered
- * safely using React Context.
- *
- * On the browser this turns into a fragment with no React Context.
- */
-declare var StyleCacheProvider: ProviderComponent;
-declare export default typeof StyleCacheProvider;

package/dist/esm/runtime/style.js.flow

@@ -1,16 +0,0 @@
-/**
- * Flowtype definitions for style
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { StyleSheetOpts } from './types';
-declare type StyleProps = {
-  /**
-   * CSS Rules.
-   * Ensure each rule is a separate element in the array.
-   */
-  children: string[],
-  ...
-} & StyleSheetOpts;
-declare export default function Style(props: StyleProps): React$Node | null;

package/dist/esm/runtime/types.js.flow

@@ -1,23 +0,0 @@
-/**
- * Flowtype definitions for types
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-export interface StyleSheetOpts {
-  /**
-   * Used to set a nonce on the style element.
-   * This is needed when using a strict CSP and should be a random hash generated every server load.
-   * Check out https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src for more information.
-   */
-  nonce?: string;
-}
-/**
- * Buckets under which we will group our stylesheets
- */
-export type Bucket = '' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'm';
-export type UseCacheHook = () => { [key: string]: true };
-export type ProviderComponent = (props: {
-  children: React$Node[] | React$Node,
-  ...
-}) => React$Node;

package/dist/esm/runtime.js.flow

@@ -1,7 +0,0 @@
-/**
- * Flowtype definitions for runtime
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-declare export { CC, CS, ax, ac, clearAcCache, ix } from './runtime/index';

package/dist/esm/styled/index.js.flow

@@ -1,66 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { ComponentType } from 'react';
-import type { CssType, CssFunction } from '../types';
-/**
- * Extra props added to the output Styled Component.
- */
-export type StyledProps = {
-  as?: $Keys<$JSXIntrinsics>,
-};
-export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
-export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-export interface StyledComponent<ComponentProps> {
-  <TProps>(
-    ...css: ObjectInterpolation<TProps>[]
-  ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
-  <TProps>(
-    template: $ReadOnlyArray<string>,
-    ...interpolations: TemplateStringsInterpolation<TProps>[]
-  ): React$ComponentType<{ ...TProps, ...ComponentProps, ...StyledProps }>;
-}
-export type StyledComponentMap = $ObjMapi<$JSXIntrinsics, <Tag>(Tag) => StyledComponent<mixed>>;
-export type CreateStyledComponent = {
-  <TInheritedProps>(Component: ComponentType<TInheritedProps>): StyledComponent<TInheritedProps>,
-  ...
-} & StyledComponentMap;
-/**
- * ## Styled component
- *
- * Create a component that styles a JSX element which comes with built-in behavior such as `ref` and `as` prop support.
- * For further details [read the documentation](https://compiledcssinjs.com/docs/api-styled).
- *
- * ### Style with objects
- * @example ```
- * styled.div({
- *   fontSize: 12,
- * });
- * ```
- *
- * ### Style with template literals
- * @example ```
- * styled.div`
- *   font-size: 12px
- * `;
- * ```
- *
- * ### Compose styles with arrays
- * @example ```
- * import type { css } from '@compiled/react';
- *
- * styled.div([
- *   { fontSize: 12 },
- *   css`font-size: 12px;`
- * ]);
- *
- * styled.div(
- *   { fontSize: 12 },
- *   css`font-size: 12px`
- * );
- * ```
- */
-declare export var styled: CreateStyledComponent;

package/dist/esm/types.js.flow

@@ -1,31 +0,0 @@
-/**
- * Flowtype definitions for types
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import * as CSS from 'csstype';
-/**
- * Typing for the interpolations.
- */
-export type BasicTemplateInterpolations = string | number;
-export interface FunctionInterpolation<TProps> {
-  (props: TProps): CssFunction<TProps>;
-}
-/**
- * Possible types for a CSS value
- */
-export type CssType<TProps> = CssObject<TProps> | FunctionInterpolation<TProps> | string;
-/**
- * These are all the CSS props that will exist.
- */
-export type CSSProps<TProps> = $ReadOnly<CSS.Properties<CssFunction<TProps>>>;
-export type CssObject<TProps> = $ReadOnly<{
-  ...CSSProps<TProps>,
-  [key: string]: CssFunction<TProps>,
-}>;
-export type CssFunction<TProps = mixed> =
-  | CssType<TProps>
-  | BasicTemplateInterpolations
-  | boolean
-  | void;

package/dist/esm/utils/error.js.flow

@@ -1,7 +0,0 @@
-/**
- * Flowtype definitions for error
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-declare export var createSetupError: () => Error;

package/src/class-names/__tests__/types.test.js.flow

@@ -1,35 +0,0 @@
-// @flow strict-local
-import React, { type Node } from 'react';
-import { ClassNames, type CssType } from '@compiled/react';
-
-// Object call expression
-({ children }: { children: Node }): React$Element<typeof ClassNames> => (
-  <ClassNames>{({ css }) => <span className={css({ fontSize: 12 })}>{children}</span>}</ClassNames>
-);
-
-// Tagged template expression
-({ children }: { children: Node }): React$Element<typeof ClassNames> => (
-  <ClassNames>
-    {({ css }) => (
-      <span
-        className={css`
-          font-size: 12px;
-        `}>
-        {children}
-      </span>
-    )}
-  </ClassNames>
-);
-
-// Array
-({ children }: { children: Node }): React$Element<typeof ClassNames> => {
-  return (
-    <ClassNames>
-      {({ css }) => (
-        <span className={css(([{ fontSize: 12 }, `font-size: 12px`]: CssType<void>[]))}>
-          {children}
-        </span>
-      )}
-    </ClassNames>
-  );
-};

package/src/class-names/index.js.flow

@@ -1,53 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { Node } from 'react';
-import type { CssType, CssFunction } from '../types';
-export type ObjectInterpolation<TProps> = CssType<TProps> | CssType<TProps>[];
-export type TemplateStringsInterpolation<TProps> = CssFunction<TProps> | CssFunction<TProps>[];
-declare interface CssSignature<TProps> {
-  (...interpolations: ObjectInterpolation<TProps>[]): string;
-  (
-    template: $ReadOnlyArray<string>,
-    ...interpolations: TemplateStringsInterpolation<TProps>[]
-  ): string;
-}
-export interface ClassNamesProps<TProps> {
-  children: (opts: {
-    css: CssSignature<TProps>,
-    style: $Shape<CSSStyleDeclaration>,
-    ...
-  }) => Node;
-}
-/**
- * ## Class names
- *
- * Use a component where styles are not necessarily used on a JSX element.
- * For further details [read the documentation](https://compiledcssinjs.com/docs/api-class-names).
- *
- * ### Style with objects
- * @example ```
- * <ClassNames>
- *   {({ css, style }) => children({ className: css({ fontSize: 12 }) })}
- * </ClassNames>
- * ```
- *
- * ### Style with template literals
- * @example ```
- * <ClassNames>
- *   {({ css, style }) => children({ className: css`font-size: 12px;` })}
- * </ClassNames>
- * ```
- *
- * ### Compose styles with arrays
- * @example ```
- * <ClassNames>
- *   {({ css, style }) =>
- *    children({ className: css([{ fontSize: 12 }, css`font-size: 12px`]) })}
- * </ClassNames>
- * ```
- */
-declare export function ClassNames<TProps>(x: ClassNamesProps<TProps>): React$Node;

package/src/css/__tests__/types.test.js.flow

@@ -1,42 +0,0 @@
-// @flow strict-local
-import React from 'react';
-import { css } from '@compiled/react';
-
-// Tagged template expression
-(): React$Element<'div'> => {
-  const styles = css`
-    color: red;
-  `;
-  return <div css={styles}>red text</div>;
-};
-
-// Object call expression
-(): React$Element<'div'> => {
-  const styles = css({ color: 'red' });
-  return <div css={styles}>red text</div>;
-};
-
-// Object call with function call
-(): React$Element<'div'> => {
-  const styles = css({
-    backgroundColor: token('elevation.surface', 'white'),
-    zIndex: layers.modal(),
-  });
-  return <div css={styles}>red text</div>;
-};
-
-// Media query selector
-css({
-  /* Style only for Google Chrome */
-  '@media screen and (-webkit-min-device-pixel-ratio: 0)': {
-    wordBreak: 'break-word',
-  },
-  /* Style only for Safari */
-  '@media screen and (-webkit-transition)': {
-    wordBreak: 'break-word',
-  },
-  /* Style only for Mozilla Firefox */
-  '@-moz-document url-prefix()': {
-    overflowWrap: 'anywhere',
-  },
-});

package/src/css/index.js.flow

@@ -1,36 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { CSSProps, CssObject, CssFunction } from '../types';
-/**
- * ## CSS
- *
- * Define styles that are statically typed and useable with other Compiled APIs.
- * For further details [read the documentation](https://compiledcssinjs.com/docs/api-css).
- *
- * ### Style with objects
- * @example ```
- * const redText = css({
- *   color: 'red',
- * });
- *
- * <div css={redText} />
- * ```
- *
- * ### Style with template literals
- * @example ```
- * const redText = css`
- *   color: red;
- * `;
- *
- * <div css={redText} />
- * ```
- */
-declare export default function css<TProps>(
-  styles: $ReadOnlyArray<string>,
-  ...interpolations: CssFunction<TProps>[]
-): CSSProps<TProps>;
-declare export default function css<T>(styles: CssObject<T> | CssObject<T>[]): CSSProps<T>;

package/src/css-map/index.js.flow

@@ -1,26 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { CSSProps, CssObject } from '../types';
-/**
- * ## cssMap
- *
- * Creates a collection of named CSS rules that are statically typed and useable with other Compiled APIs.
- * For further details [read the documentation](https://compiledcssinjs.com/docs/api-cssmap).
- * @example ```
- * const borderStyleMap = cssMap({
- *     none: { borderStyle: 'none' },
- *     solid: { borderStyle: 'solid' },
- * });
- * const Component = ({ borderStyle }) => <div css={css(borderStyleMap[borderStyle])} />
- *
- * <Component borderStyle="solid" />
- * ```
- */
-declare type returnType<T: string, P> = { [key: T]: CSSProps<P> };
-declare export default function cssMap<T: string, TProps>(_styles: {
-  [key: T]: CssObject<TProps> | CssObject<TProps>[],
-}): $ReadOnly<returnType<T, TProps>>;

package/src/index.js.flow

@@ -1,13 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { CssFunction, CSSProps, CssType } from './types';
-export type { CSSProps, CssFunction, CssType };
-declare export { keyframes } from './keyframes';
-declare export { styled } from './styled';
-declare export { ClassNames } from './class-names';
-declare export { default as css } from './css';
-declare export { default as cssMap } from './css-map';

package/src/keyframes/__tests__/types.test.js.flow

@@ -1,31 +0,0 @@
-// @flow strict-local
-import React from 'react';
-import { css, ClassNames, styled, keyframes } from '@compiled/react';
-
-// Tagged template expression
-(): React$Element<'div'> => {
-  const fadeOut = keyframes`
-    from { opacity: 1; }
-    to   { opacity: 0; }
-  `;
-  return <div css={{ animationName: fadeOut }}>hello world</div>;
-};
-
-// Object call expression
-(): React$Element<'div'> => {
-  const fadeOut = keyframes({
-    from: {
-      opacity: 1,
-    },
-    to: {
-      opacity: 0,
-    },
-  });
-  return <div css={{ animationName: fadeOut }}>hello world</div>;
-};
-
-// String call expression
-(): React$Element<'div'> => {
-  const fadeOut = keyframes('from { opacity: 1; } to { opacity: 0; }');
-  return <div css={{ animationName: fadeOut }}>hello world</div>;
-};

package/src/keyframes/index.js.flow

@@ -1,48 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { BasicTemplateInterpolations, CSSProps } from '../types';
-export type KeyframeSteps = string | { [key: string]: CSSProps<void> };
-/**
- * ## Keyframes
- *
- * Define keyframes to be used in a [CSS animation](https://developer.mozilla.org/en-US/docs/Web/CSS/animation).
- * For further details [read the API documentation](https://compiledcssinjs.com/docs/api-keyframes).
- *
- * ### Style with objects
- * @example ```
- * const fadeOut = keyframes({
- *   from: {
- *     opacity: 1,
- *   },
- *   to: {
- *     opacity: 0,
- *   },
- * });
- *
- * <div css={{ animation: `${fadeOut} 2s` }} />
- * ```
- *
- * ### Style with template literals
- * @example ```
- * const fadeOut = keyframes`
- *   from {
- *     opacity: 1;
- *   }
- *
- *   to {
- *     opacity: 0;
- *   }
- * `;
- *
- * <div css={{ animation: `${fadeOut} 2s` }} />
- * ```
- */
-declare export function keyframes(steps: KeyframeSteps): string;
-declare export function keyframes(
-  strings: $ReadOnlyArray<string>,
-  ...interpolations: BasicTemplateInterpolations[]
-): string;

package/src/runtime/ac.js.flow

@@ -1,56 +0,0 @@
-/**
- * Flowtype definitions for ac
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-/**
- * Memoize the result of ac so if it is called with the same args, it returns immediately.
- * Also, to prevent useless React rerenders
- */
-declare var cache: Map<any, any>;
-/**
- * `ac` returns an instance of AtomicGroups. The instance holds the knowledge of Atomic Group so we can chain `ac`.
- * e.g. <div className={ax([ax(['_aaaa_b']), '_aaaa_c'])} />
- */
-declare class AtomicGroups {
-  values: Map<string, string>;
-  constructor(values: Map<string, string>): this;
-  toString(): string;
-}
-/**
- * Joins classes together and ensures atomic declarations of a single group exist.
- * Atomic declarations take the form of `_{group}{value}` (always prefixed with an underscore),
- * where both `group` and `value` are hashes **four characters long**.
- * Class names can be of any length,
- * this function can take both atomic declarations and class names.
- *
- * Input:
- *
- * ```
- * ax(['_aaaabbbb', '_aaaacccc'])
- * ```
- *
- * Output:
- *
- * ```
- * '_aaaacccc'
- * ```
- * @param classes
- */
-declare export function ac(
-  classNames: (AtomicGroups | string | void | false)[]
-): AtomicGroups | void;
-declare export function memoizedAc(
-  classNames: (AtomicGroups | string | void | false)[]
-): AtomicGroups | void;
-declare var _default: typeof ac;
-declare export default typeof _default;
-/**
- * Provide an opportunity to clear the cache to prevent memory leak.
- */
-declare export function clearCache(): void;
-/**
- * Expose cache
- */
-declare export function getCache(): typeof cache;