next-yak/dist/index.d.ts

next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration

import React$1, { ReactNode } from "react";

//#region runtime/context/index.d.ts
interface YakTheme {}
/**
 * Returns the current yak theme context
 *
 * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md
 */
declare const useTheme: () => YakTheme;
/**
 * Yak theme context provider
 *
 * @see https://github.com/DigitecGalaxus/next-yak/blob/main/packages/next-yak/runtime/context/README.md
 */
declare const YakThemeProvider: ({
  children,
  theme
}: {
  children: ReactNode;
  theme?: YakTheme;
}) => React$1.JSX.Element;
//#endregion
//#region runtime/cssLiteral.d.ts
declare const yakComponentSymbol: unique symbol;
type ComponentStyles<TProps> = (props: TProps) => {
  className: string;
  style?: {
    [key: string]: string;
  };
};
type CSSInterpolation<TProps> = string | number | undefined | null | false | ComponentStyles<TProps> | {
  [yakComponentSymbol]: any;
} | ((props: TProps) => CSSInterpolation<TProps>);
/**
 * css() runtime factory of css``
 *
 * /!\ next-yak transpiles css`` and styled``
 *
 * This changes the typings of the css`` and styled`` functions.
 * During development the user of next-yak wants to work with the
 * typings BEFORE compilation.
 *
 * Therefore this is only an internal function only and it must be cast to any
 * before exported to the user.
 *
 * The internal functioning of css`` is to return a single callback function that runs all functions
 * (or creates new ones if needed) that are passed as arguments. These functions receive the props, classNames, and style object as arguments
 * and operate directly on the classNames and style objects.
 */
declare function css$1<TProps>(styles: TemplateStringsArray, ...values: CSSInterpolation<NoInfer<TProps> & {
  theme: YakTheme;
}>[]): ComponentStyles<TProps>;
//#endregion
//#region runtime/publicStyledApi.d.ts
/**
 * Main styled interface that combines HTML tag mappings with the styled function.
 * This is the primary entry point for creating styled components.
 */
interface Styled extends MappedHtmlTags, StyledFn {}
/**
 * Function interface for creating styled components from any component or HTML tag.
 * Supports React components, HTML tags, and custom web components.
 */
interface StyledFn {
  <TProps extends object = React$1.DOMAttributes<Element> & React$1.RefAttributes<Element>>(Component: HtmlTags | React$1.FunctionComponent<TProps> | CustomWebComponentTag): LiteralWithAttrs<TProps>;
}
/**
 * A yak component with a special symbol that allows component targeting
 * and proper attrs function handling.
 * @example styled.svg`${Button}:hover & { fill: red; }` or styled(Button)`color: red;`
 */
interface YakComponent<T> extends React$1.FunctionComponent<T> {
  [yakComponentSymbol]: [unknown, unknown, unknown];
}
/**
 * Styled component with attrs method for adding default props.
 * Extends StyledLiteral with the ability to specify default attributes.
 */
interface LiteralWithAttrs<T extends object> extends StyledLiteral<T> {
  attrs: <TAttrsIn extends object = {}, TAttrsOut extends AttrsMerged<T, TAttrsIn> = AttrsMerged<T, TAttrsIn>>(attrs: Attrs<T, TAttrsIn, TAttrsOut>) => StyledLiteral<Substitute<T, TAttrsIn>>;
}
/**
 * Template literal function for defining CSS styles with interpolation support.
 * Accepts CSS template strings and interpolated values with proper typing.
 */
interface StyledLiteral<T> {
  <TCSSProps>(styles: TemplateStringsArray, ...values: Array<CSSInterpolation<T & NoInfer<TCSSProps> & {
    theme: YakTheme;
  }>>): YakComponent<TCSSProps & T>;
}
/**
 * Function variant of attrs that receives current props and returns additional props.
 * Allows for dynamic prop generation based on component state.
 */
interface AttrsFunction<TBaseProps, TIn extends object = {}, TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>> {
  (p: Substitute<TBaseProps & {
    theme: YakTheme;
  }, TIn>): Partial<TOut>;
}
/**
 * Merges provided props with initial props, making specified props optional.
 * Includes theme support for styled components.
 */
type AttrsMerged<TBaseProps, TIn extends object = {}> = Substitute<TBaseProps & {
  theme?: YakTheme;
}, TIn>;
/**
 * Maps all HTML tag names to their corresponding styled component types with attributes support.
 * Provides typed access to all standard HTML elements through the styled interface.
 */
type MappedHtmlTags = { [Tag in HtmlTags]: LiteralWithAttrs<React$1.JSX.IntrinsicElements[Tag]> };
/**
 * The attrs function allows adding additional props to a styled component.
 * Props can be specified as an object or as a function that receives current props.
 */
type Attrs<TBaseProps, TIn extends object = {}, TOut extends AttrsMerged<TBaseProps, TIn> = AttrsMerged<TBaseProps, TIn>> = Partial<TOut> | AttrsFunction<TBaseProps, TIn, TOut>;
/**
 * Utility type to merge two object types, with properties from B taking precedence.
 * If a property exists in both A and B, the property from B is used.
 */
type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
/**
 * Union type of all valid HTML element tag names.
 * Derived from React's JSX intrinsic elements.
 */
type HtmlTags = keyof React$1.JSX.IntrinsicElements;
/**
 * Custom web component tag pattern that must contain at least one hyphen.
 * Follows the web component naming convention.
 */
type CustomWebComponentTag = `${string}-${string}`;
/**
 * Utility type to efficiently remove properties from an object type.
 * More performant than the built-in Omit type for large object types.
 */
type FastOmit<T extends object, U extends string | number | symbol> = { [K in keyof T as K extends U ? never : K]: T[K] };
/**
 * Type of all functions that can be passed to manipulate styles
 */
type RuntimeStyleProcessor<T> = (props: T, classNames: Set<string>, style: React$1.CSSProperties) => void;
/**
 * Utility type to keep the generic API of a component while still being able to use it in a selector
 */
type GenericYakComponentOf<T, P = {}> = T & YakComponent<P> & {
  <G = {}>(props: P & G): React$1.ReactElement | null;
};
//#endregion
//#region runtime/atoms.d.ts
/**
 * Allows to use atomic CSS classes in a styled or css block
 *
 * @usage
 *
 * ```tsx
 * import { styled, atoms } from "next-yak";
 *
 * const Button = styled.button<{ $primary?: boolean }>`
 *  ${atoms("text-teal-600", "text-base", "rounded-md")}
 *  ${props => props.$primary && atoms("shadow-md")}
 * `;
 * ```
 */
declare const atoms: <T>(...atoms: (string | RuntimeStyleProcessor<T> | false)[]) => ComponentStyles<T>;
//#endregion
//#region runtime/mocks/cssLiteral.d.ts
/**
 * Allows to use CSS styles in a styled or css block
 *
 * e.g.
 *
 * ```tsx
 * const Component = styled.div`
 *  color: black;
 *  ${({$active}) => $active && css`color: red;`}
 * `;
 * ```
 */
declare const css: typeof css$1;
//#endregion
//#region runtime/keyframes.d.ts
/**
 * Allows to use CSS keyframe animations in a styled or css block
 *
 * @usage
 *
 * ```tsx
 * import { styled, keyframes } from "next-yak";
 *
 * const rotate = keyframes`
 *  from {
 *   transform: rotate(0deg);
 *  }
 *  to {
 *   transform: rotate(360deg);
 *  }
 * `;
 *
 * const Spinner = styled.div`
 *   animation: ${rotate} 1s linear infinite;
 * `;
 * ```
 */
declare const keyframes$1: <T extends (string | number | bigint)[] = never>(styles: TemplateStringsArray, ..._dynamic: T) => string;
//#endregion
//#region runtime/mocks/keyframes.d.ts
/**
 * Allows to use CSS keyframe animations in a styled or css block
 *
 * @usage
 *
 * ```tsx
 * import { styled, keyframes } from "next-yak";
 *
 * const rotate = keyframes`
 *  from {
 *   transform: rotate(0deg);
 *  }
 *  to {
 *   transform: rotate(360deg);
 *  }
 * `;
 *
 * const Spinner = styled.div`
 *   animation: ${rotate} 1s linear infinite;
 * `;
 * ```
 */
declare const keyframes: typeof keyframes$1;
//#endregion
//#region runtime/styled.d.ts
/**
 * The `styled` method works perfectly on all of your own or any third-party component,
 * as long as they attach the passed className prop to a DOM element.
 *
 * @usage
 *
 * ```tsx
 * const StyledLink = styled(Link)`
 *  color: #BF4F74;
 *  font-weight: bold;
 * `;
 * ```
 */
declare const styled$1: Styled;
//#endregion
//#region runtime/mocks/styled.d.ts
declare const styled: typeof styled$1;
//#endregion
export { type GenericYakComponentOf, type YakComponent, type YakTheme, YakThemeProvider, atoms, css, keyframes, styled, useTheme };