@compiled/react 0.15.0 → 0.16.1

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,125 +0,0 @@
-/**
- * Flowtype definitions for index
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-import type { Properties, AtRules } from 'csstype';
-import type { Pseudos } from './pseudos';
-/**
- * These are all the CSS props that will exist.
- * Only 'string' and 'number' are valid CSS values.
- * @example ```
- * const style: CssProps = {
- *  color: 'red',
- *  margin: 10,
- * };
- * ```
- */
-declare type CssProps = $ReadOnly<Properties<string | number>>;
-declare type AllPseudos = $ObjMapi<
-  { [k: Pseudos]: any },
-  <key>(key) => { ...CssProps, ...AllPseudos }
->;
-declare type AtRuleSecondHalf = string;
-declare type WhitelistedAtRule = $ObjMapi<
-  { [k: AtRules]: any },
-  <atRuleFirstHalf>(atRuleFirstHalf) => $ObjMapi<
-    { [k: AtRuleSecondHalf]: any },
-    <atRuleSecondHalf>(atRuleSecondHalf) => {
-      ...CssProps,
-      ...AllPseudos,
-      ...WhitelistedAtRule,
-    }
-  >
->;
-declare type WhitelistedSelector = { ...AllPseudos, ...WhitelistedAtRule };
-declare type ExtendedSelector = {
-  ...{
-    [key: string]: CssProps | ExtendedSelector,
-  },
-  ...{
-    /**
-     * Using `selectors` is not valid here - you cannot nest a `selectors` object
-     * inside another `selectors` object.
-     */
-    selectors?: empty,
-    ...
-  },
-};
-declare type ExtendedSelectors = {
-  /**
-   * Provides a way to use selectors that have not been explicitly whitelisted
-   * in cssMap.
-   *
-   * This does not provide any type-checking for the selectors (thus allowing
-   * more expressive selectors), though this is more flexible and allows
-   * nesting selectors in other selectors.
-   *
-   * A selector defined both outside of the `selectors` object and
-   * inside the `selectors` object is a runtime error.
-   *
-   * Note that you cannot nest a `selectors` object inside another
-   * `selectors` object.
-   *
-   * Only use if absolutely necessary.
-   * @example ```
-   * const myMap = cssMap({
-   *   danger: {
-   *     color: 'red',
-   *     '@media': {
-   *       '(min-width: 100px)': {
-   *         font-size: '1.5em',
-   *       },
-   *     },
-   *     '&:hover': {
-   *       color: 'pink',
-   *     },
-   *     selectors: {
-   *       '&:not(:active)': {
-   *         backgroundColor: 'yellow',
-   *       }
-   *     },
-   *   },
-   *   success: {
-   *     color: 'green',
-   *     '@media': {
-   *       '(min-width: 100px)': {
-   *         font-size: '1.3em',
-   *       },
-   *     },
-   *     '&:hover': {
-   *       color: '#8f8',
-   *     },
-   *     selectors: {
-   *       '&:not(:active)': {
-   *         backgroundColor: 'white',
-   *       }
-   *     },
-   *   },
-   * });
-   * ```
-   */
-  selectors?: ExtendedSelector,
-  ...
-};
-declare type Variants<VariantName: string> = {
-  [key: VariantName]: { ...CssProps, ...WhitelistedSelector, ...ExtendedSelectors },
-};
-declare type ReturnType<VariantName: string> = { [key: VariantName]: CssProps };
-/**
- * ## 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 export default function cssMap<T: string>(_styles: Variants<T>): $ReadOnly<ReturnType<T>>;

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

@@ -1,57 +0,0 @@
-/**
- * Flowtype definitions for pseudos
- * Generated by Flowgen from a Typescript Definition
- * Flowgen v1.21.0
- * @flow
- */
-export type Pseudos =
-  | '&::after'
-  | '&::backdrop'
-  | '&::before'
-  | '&::cue'
-  | '&::cue-region'
-  | '&::first-letter'
-  | '&::first-line'
-  | '&::grammar-error'
-  | '&::marker'
-  | '&::placeholder'
-  | '&::selection'
-  | '&::spelling-error'
-  | '&::target-text'
-  | '&::view-transition'
-  | '&:active'
-  | '&:autofill'
-  | '&:blank'
-  | '&:checked'
-  | '&:default'
-  | '&:defined'
-  | '&:disabled'
-  | '&:empty'
-  | '&:enabled'
-  | '&:first'
-  | '&:focus'
-  | '&:focus-visible'
-  | '&:focus-within'
-  | '&:fullscreen'
-  | '&:hover'
-  | '&:in-range'
-  | '&:indeterminate'
-  | '&:invalid'
-  | '&:left'
-  | '&:link'
-  | '&:local-link'
-  | '&:optional'
-  | '&:out-of-range'
-  | '&:paused'
-  | '&:picture-in-picture'
-  | '&:placeholder-shown'
-  | '&:playing'
-  | '&:read-only'
-  | '&:read-write'
-  | '&:required'
-  | '&:right'
-  | '&:target'
-  | '&:user-invalid'
-  | '&:user-valid'
-  | '&:valid'
-  | '&:visited';

package/src/css-map/pseudos.ts

@@ -1,59 +0,0 @@
-// List of pseudo-classes and pseudo-elements are from csstype
-// but with & added in the front, so that we target the current element
-// (instead of a child element)
-
-// We also exclude anything that requires providing an argument
-// (e.g. &:not(...) ), and anything that uses information from elements
-// outside of the current element (e.g. &:first-of-type)
-
-export type Pseudos =
-  | '&::after'
-  | '&::backdrop'
-  | '&::before'
-  | '&::cue'
-  | '&::cue-region'
-  | '&::first-letter'
-  | '&::first-line'
-  | '&::grammar-error'
-  | '&::marker'
-  | '&::placeholder'
-  | '&::selection'
-  | '&::spelling-error'
-  | '&::target-text'
-  | '&::view-transition'
-  | '&:active'
-  | '&:autofill'
-  | '&:blank'
-  | '&:checked'
-  | '&:default'
-  | '&:defined'
-  | '&:disabled'
-  | '&:empty'
-  | '&:enabled'
-  | '&:first'
-  | '&:focus'
-  | '&:focus-visible'
-  | '&:focus-within'
-  | '&:fullscreen'
-  | '&:hover'
-  | '&:in-range'
-  | '&:indeterminate'
-  | '&:invalid'
-  | '&:left'
-  | '&:link'
-  | '&:local-link'
-  | '&:optional'
-  | '&:out-of-range'
-  | '&:paused'
-  | '&:picture-in-picture'
-  | '&:placeholder-shown'
-  | '&:playing'
-  | '&:read-only'
-  | '&:read-write'
-  | '&:required'
-  | '&:right'
-  | '&:target'
-  | '&:user-invalid'
-  | '&:user-valid'
-  | '&:valid'
-  | '&:visited';

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;