teacss 0.1.20 → 0.2.0-alpha.1

package/types/index.d.ts

@@ -0,0 +1,80 @@
+import type * as Config from "./config";
+import type * as CSSUtil from "./css-util";
+import type Stitches from "./stitches";
+import type * as StyledComponent from "./styled-component";
+
+export { $$PropertyValue, $$ScaleValue, $$ThemeValue } from "./css-util";
+export { StyledComponent } from "./styled-component";
+
+export type CreateStitches = Config.CreateStitches;
+export type CSSProperties = CSSUtil.CSSProperties;
+export type DefaultThemeMap = Config.DefaultThemeMap;
+
+/** Returns a Style interface from a configuration, leveraging the given media and style map. */
+export type CSS<
+  Config extends {
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    media?: {};
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    theme?: {};
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    themeMap?: {};
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    utils?: {};
+  } = {
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    media: {};
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    theme: {};
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    themeMap: {};
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    utils: {};
+  },
+> = CSSUtil.CSS<Config["media"], Config["theme"], Config["themeMap"], Config["utils"]>;
+
+/** Returns the properties, attributes, and children expected by a component. */
+export type ComponentProps<Component> = Component extends (...args: any[]) => any ? Parameters<Component>[0] : never;
+
+/** Returns a type that expects a value to be a kind of CSS property value. */
+export type PropertyValue<Property extends keyof CSSUtil.CSSProperties, Config = null> = Config extends null
+  ? { readonly [K in CSSUtil.$$PropertyValue]: Property }
+  : Config extends { [K: string]: any }
+    ? CSSUtil.CSS<Config["media"], Config["theme"], Config["themeMap"], Config["utils"]>[Property]
+    : never;
+
+/** Returns a type that expects a value to be a kind of theme scale value. */
+export type ScaleValue<Scale, Config = null> = Config extends null
+  ? { readonly [K in CSSUtil.$$ScaleValue]: Scale }
+  : Config extends { [K: string]: any }
+    ? Scale extends keyof Config["theme"]
+      ? `$${string & keyof Config["theme"][Scale]}`
+      : never
+    : never;
+
+/** Returns a type that suggests variants from a component as possible prop values. */
+export type VariantProps<Component extends { [key: symbol | string]: any }> = StyledComponent.TransformProps<
+  Component[StyledComponent.$$StyledComponentProps],
+  Component[StyledComponent.$$StyledComponentMedia]
+>;
+
+/** Map of CSS properties to token scales. */
+export declare const defaultThemeMap: DefaultThemeMap;
+
+/** Returns a library used to create styles. */
+export declare const createStitches: CreateStitches;
+
+/** Returns an object representing a theme. */
+export declare const createTheme: Stitches["createTheme"];
+
+/** Returns a function that applies globalCss styles. */
+export declare const globalCss: Stitches["globalCss"];
+
+/** Returns an object that applies `@keyframes` styles. */
+export declare const keyframes: Stitches["keyframes"];
+
+/** Returns a function that applies styles and variants for a specific class. */
+export declare const css: Stitches["css"];
+
+/** Returns a function that applies styles and variants for a specific class. */
+export declare const styled: Stitches["styled"];

package/types/stitches.d.ts

@@ -0,0 +1,197 @@
+import type * as CSSUtil from "./css-util";
+import type * as StyledComponent from "./styled-component";
+import type * as ThemeUtil from "./theme";
+import type * as Util from "./util";
+
+/** Remove an index signature from a type */
+export type RemoveIndex<T> = { [k in keyof T as string extends k ? never : number extends k ? never : k]: T[k] };
+
+/** Stitches interface. */
+// biome-ignore lint/complexity/noBannedTypes: <explanation>
+export default interface Stitches<Prefix extends string = "", Media extends {} = {}, Theme extends {} = {}, ThemeMap extends {} = {}, Utils extends {} = {}> {
+  config: {
+    prefix: Prefix;
+    media: Media;
+    theme: Theme;
+    themeMap: ThemeMap;
+    utils: Utils;
+  };
+  prefix: Prefix;
+  /** The **prefix** property defined.
+   *
+   * [Read Documentation](https://stitches.dev/docs/variants)
+   */
+  globalCss: <Styles extends { [K: string]: any }>(
+    ...styles: ({
+      /** The **@import** CSS at-rule imports style rules from other style sheets. */
+      "@import"?: unknown;
+
+      /** The **@font-face** CSS at-rule specifies a custom font with which to display text. */
+      "@font-face"?: unknown;
+    } & {
+      [K in keyof Styles]: K extends "@import"
+        ? string | string[]
+        : K extends "@font-face"
+          ? CSSUtil.Native.AtRule.FontFace | Array<CSSUtil.Native.AtRule.FontFace>
+          : K extends `@keyframes ${string}`
+            ? {
+                [KeyFrame in string]: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>;
+              }
+            : K extends `@property ${string}`
+              ? CSSUtil.Native.AtRule.Property
+              : CSSUtil.CSS<Media, Theme, ThemeMap, Utils>;
+    })[]
+  ) => () => string;
+  keyframes: (style: {
+    [offset: string]: CSSUtil.CSS<Media, Theme, ThemeMap, Utils>;
+  }) => {
+    (): string;
+    name: string;
+  };
+  createTheme: <
+    Argument0 extends
+      | string
+      | ({
+          [Scale in keyof Theme]?: {
+            [Token in keyof Theme[Scale]]?: boolean | number | string;
+          };
+        } & {
+          [scale in string]: {
+            [token in number | string]: boolean | number | string;
+          };
+        }),
+    Argument1 extends
+      | string
+      | ({
+          [Scale in keyof Theme]?: {
+            [Token in keyof Theme[Scale]]?: boolean | number | string;
+          };
+        } & {
+          [scale in string]: {
+            [token in number | string]: boolean | number | string;
+          };
+        }),
+  >(
+    nameOrScalesArg0: Argument0,
+    nameOrScalesArg1?: Argument1,
+  ) => string & {
+    className: string;
+    selector: string;
+  } & (Argument0 extends string ? ThemeTokens<Argument1, Prefix> : ThemeTokens<Argument0, Prefix>);
+  theme: string & {
+    className: string;
+    selector: string;
+  } & {
+    [Scale in keyof Theme]: {
+      // biome-ignore lint/suspicious/noConfusingVoidType: <explanation>
+      [Token in keyof Theme[Scale]]: ThemeUtil.Token<Extract<Token, string | number>, string, Extract<Scale, string | void>, Extract<Prefix, string | void>>;
+    };
+  };
+  reset: () => void;
+  getCssText: () => string;
+  css: <
+    Composers extends (string | React.ExoticComponent<any> | React.JSXElementConstructor<any> | Util.Function | { [name: string]: unknown })[],
+    CSS = CSSUtil.CSS<Media, Theme, ThemeMap, Utils>,
+  >(
+    ...composers: {
+      [K in keyof Composers]: // Strings, React Components, and Functions can be skipped over
+      string extends Composers[K]
+        ? Composers[K]
+        : Composers[K] extends string | React.ExoticComponent<any> | React.JSXElementConstructor<any> | Util.Function
+          ? Composers[K]
+          : RemoveIndex<CSS> & {
+              /** The **variants** property lets you set a subclass of styles based on a key-value pair.
+               *
+               * [Read Documentation](https://stitches.dev/docs/variants)
+               */
+              variants?: {
+                [Name in string]: {
+                  [Pair in number | string]: CSS;
+                };
+              };
+              /** The **compoundVariants** property lets you to set a subclass of styles based on a combination of active variants.
+               *
+               * [Read Documentation](https://stitches.dev/docs/variants#compound-variants)
+               */
+              compoundVariants?: (("variants" extends keyof Composers[K]
+                ? {
+                    [Name in keyof Composers[K]["variants"]]?: Util.Widen<keyof Composers[K]["variants"][Name]> | Util.String;
+                  }
+                : Util.WideObject) & {
+                css: CSS;
+              })[];
+              /** The **defaultVariants** property allows you to predefine the active key-value pairs of variants.
+               *
+               * [Read Documentation](https://stitches.dev/docs/variants#default-variants)
+               */
+              defaultVariants?: "variants" extends keyof Composers[K]
+                ? {
+                    [Name in keyof Composers[K]["variants"]]?: Util.Widen<keyof Composers[K]["variants"][Name]> | Util.String;
+                  }
+                : Util.WideObject;
+            } & CSS & {
+                [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown;
+              };
+    }
+  ) => StyledComponent.CssComponent<StyledComponent.StyledComponentType<Composers>, StyledComponent.StyledComponentProps<Composers>, Media, CSS>;
+  styled: <
+    Type extends keyof JSX.IntrinsicElements | React.ComponentType<any> | Util.Function,
+    Composers extends (string | React.ComponentType<any> | Util.Function | { [name: string]: unknown })[],
+    CSS = CSSUtil.CSS<Media, Theme, ThemeMap, Utils>,
+  >(
+    type: Type,
+    ...composers: {
+      [K in keyof Composers]: // Strings, React Components, and Functions can be skipped over
+      string extends Composers[K]
+        ? Composers[K]
+        : Composers[K] extends string | React.ComponentType<any> | Util.Function
+          ? Composers[K]
+          : RemoveIndex<CSS> & {
+              /** The **variants** property lets you set a subclass of styles based on a key-value pair.
+               *
+               * [Read Documentation](https://stitches.dev/docs/variants)
+               */
+              variants?: {
+                [Name in string]: {
+                  [Pair in number | string]: CSS;
+                };
+              };
+              /** The **compoundVariants** property lets you to set a subclass of styles based on a combination of active variants.
+               *
+               * [Read Documentation](https://stitches.dev/docs/variants#compound-variants)
+               */
+              compoundVariants?: (("variants" extends keyof Composers[K]
+                ? {
+                    [Name in keyof Composers[K]["variants"]]?: Util.Widen<keyof Composers[K]["variants"][Name]> | Util.String;
+                  }
+                : Util.WideObject) & {
+                css: CSS;
+              })[];
+              /** The **defaultVariants** property allows you to predefine the active key-value pairs of variants.
+               *
+               * [Read Documentation](https://stitches.dev/docs/variants#default-variants)
+               */
+              defaultVariants?: "variants" extends keyof Composers[K]
+                ? {
+                    [Name in keyof Composers[K]["variants"]]?: Util.Widen<keyof Composers[K]["variants"][Name]> | Util.String;
+                  }
+                : Util.WideObject;
+            } & CSS & {
+                [K2 in keyof Composers[K]]: K2 extends "compoundVariants" | "defaultVariants" | "variants" ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown;
+              };
+    }
+  ) => StyledComponent.StyledComponent<Type, StyledComponent.StyledComponentProps<Composers>, Media, CSSUtil.CSS<Media, Theme, ThemeMap, Utils>>;
+}
+
+export type ThemeTokens<Values, Prefix> = {
+  [Scale in keyof Values]: {
+    [Token in keyof Values[Scale]]: ThemeUtil.Token<
+      Extract<Token, number | string>,
+      Values[Scale][Token] & (string | number),
+      // biome-ignore lint/suspicious/noConfusingVoidType: <explanation>
+      Extract<Scale, string | void>,
+      // biome-ignore lint/suspicious/noConfusingVoidType: <explanation>
+      Extract<Prefix, string | void>
+    >;
+  };
+};

package/types/styled-component.d.ts

@@ -0,0 +1,146 @@
+import type * as React from "react";
+import type * as Util from "./util";
+
+export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements;
+
+/** Returns a new Styled Component. */
+export interface StyledComponent<
+  Type = "span",
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  Props = {},
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  Media = {},
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  CSS = {},
+> extends React.ForwardRefExoticComponent<
+    Util.Assign<
+      Type extends IntrinsicElementsKeys | React.ComponentType<any> ? React.ComponentPropsWithRef<Type> : never,
+      TransformProps<Props, Media> & { css?: CSS }
+    >
+  > {
+  (
+    props: Util.Assign<
+      // biome-ignore lint/complexity/noBannedTypes: <explanation>
+      Type extends IntrinsicElementsKeys | React.ComponentType<any> ? React.ComponentPropsWithRef<Type> : {},
+      TransformProps<Props, Media> & {
+        as?: never;
+        css?: CSS;
+      }
+    >,
+  ): React.ReactElement | null;
+
+  <
+    C extends CSS,
+    As extends string | React.ComponentType<any> = Type extends string | React.ComponentType<any> ? Type : any,
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    InnerProps = Type extends StyledComponent<any, infer IP, any, any> ? IP : {},
+  >(
+    props: Util.Assign<
+      React.ComponentPropsWithRef<As extends IntrinsicElementsKeys | React.ComponentType<any> ? As : never>,
+      TransformProps<Util.Assign<InnerProps, Props>, Media> & {
+        as?: As;
+        css?: {
+          [K in keyof C]: K extends keyof CSS ? CSS[K] : never;
+        };
+      }
+    >,
+  ): React.ReactElement | null;
+
+  className: string;
+  selector: string;
+
+  // biome-ignore lint/correctness/noInvalidUseBeforeDeclaration: <explanation>
+  [$$StyledComponentType]: Type;
+  // biome-ignore lint/correctness/noInvalidUseBeforeDeclaration: <explanation>
+  [$$StyledComponentProps]: Props;
+  // biome-ignore lint/correctness/noInvalidUseBeforeDeclaration: <explanation>
+  [$$StyledComponentMedia]: Media;
+}
+
+/** Returns a new CSS Component. */
+// biome-ignore lint/complexity/noBannedTypes: <explanation>
+export interface CssComponent<Type = "span", Props = {}, Media = {}, CSS = {}> {
+  (
+    props?: TransformProps<Props, Media> & {
+      css?: CSS;
+    } & {
+      [name in number | string]: any;
+    },
+  ): string & {
+    className: string;
+    selector: string;
+    // biome-ignore lint/complexity/noBannedTypes: <explanation>
+    props: {};
+  };
+
+  className: string;
+  selector: string;
+
+  // biome-ignore lint/correctness/noInvalidUseBeforeDeclaration: <explanation>
+  [$$StyledComponentType]: Type;
+  // biome-ignore lint/correctness/noInvalidUseBeforeDeclaration: <explanation>
+  [$$StyledComponentProps]: Props;
+  // biome-ignore lint/correctness/noInvalidUseBeforeDeclaration: <explanation>
+  [$$StyledComponentMedia]: Media;
+}
+
+export type TransformProps<Props, Media> = {
+  [K in keyof Props]:
+    | Props[K]
+    | ({
+        [KMedia in Util.Prefixed<"@", "initial" | keyof Media>]?: Props[K];
+      } & {
+        [KMedia in string]: Props[K];
+      });
+};
+
+/** Unique symbol used to reference the type of a Styled Component. */
+export declare const $$StyledComponentType: unique symbol;
+
+/** Unique symbol used to reference the type of a Styled Component. */
+export type $$StyledComponentType = typeof $$StyledComponentType;
+
+/** Unique symbol used to reference the props of a Styled Component. */
+export declare const $$StyledComponentProps: unique symbol;
+
+/** Unique symbol used to reference the props of a Styled Component. */
+export type $$StyledComponentProps = typeof $$StyledComponentProps;
+
+/** Unique symbol used to reference the media passed into a Styled Component. */
+export declare const $$StyledComponentMedia: unique symbol;
+
+/** Unique symbol used to reference the media passed into a Styled Component. */
+export type $$StyledComponentMedia = typeof $$StyledComponentMedia;
+
+/** Returns a narrowed JSX element from the given tag name. */
+type IntrinsicElement<TagName> = TagName extends IntrinsicElementsKeys ? TagName : never;
+
+/** Returns a ForwardRef component. */
+type ForwardRefExoticComponent<Type, Props> = React.ForwardRefExoticComponent<
+  Util.Assign<Type extends React.ElementType ? React.ComponentPropsWithRef<Type> : never, Props & { as?: Type }>
+>;
+
+/** Returns the first Styled Component type from the given array of compositions. */
+export type StyledComponentType<T extends any[]> = T[0] extends never
+  ? "span"
+  : T[0] extends string
+    ? T[0]
+    : T[0] extends (props: any) => any
+      ? T[0]
+      : T[0] extends { [$$StyledComponentType]: unknown }
+        ? T[0][$$StyledComponentType]
+        : T extends [lead: any, ...tail: infer V]
+          ? StyledComponentType<V>
+          : never;
+
+/** Returns the cumulative variants from the given array of compositions. */
+export type StyledComponentProps<T extends any[]> = ($$StyledComponentProps extends keyof T[0]
+  ? T[0][$$StyledComponentProps]
+  : T[0] extends { variants: { [name: string]: unknown } }
+    ? {
+        [K in keyof T[0]["variants"]]?: Util.Widen<keyof T[0]["variants"][K]>;
+      }
+    : // biome-ignore lint/complexity/noBannedTypes: <explanation>
+      {}) &
+  // biome-ignore lint/complexity/noBannedTypes: <explanation>
+  (T extends [lead: any, ...tail: infer V] ? StyledComponentProps<V> : {});

package/types/theme.d.ts

@@ -0,0 +1,43 @@
+export interface ScaleValue {
+  token: number | string;
+  value: number | string;
+  scale: string;
+  prefix: string;
+}
+
+export interface Token<
+  /** Token name. */
+  NameType extends number | string = string,
+  /** Token value. */
+  ValueType extends number | string = string,
+  /** Token scale. */
+  // biome-ignore lint/suspicious/noConfusingVoidType: <explanation>
+  ScaleType extends string | void = void,
+  /** Token prefix. */
+  // biome-ignore lint/suspicious/noConfusingVoidType: <explanation>
+  PrefixType extends string | void = void,
+> extends ScaleValue {
+  // biome-ignore lint/suspicious/noMisleadingInstantiator: <explanation>
+  new (name: NameType, value: ValueType, scale?: ScaleType, prefix?: PrefixType): this;
+
+  /** Name of the token. */
+  token: NameType;
+
+  /** Value of the token. */
+  value: ValueType;
+
+  /** Category of interface the token applies to. */
+  scale: ScaleType extends string ? ScaleType : "";
+
+  /** Prefix added before the serialized custom property. */
+  prefix: PrefixType extends string ? PrefixType : "";
+
+  /** Serialized custom property representing the token. */
+  variable: `--${this["prefix"] extends "" ? "" : `${this["prefix"]}-`}${this["scale"] extends "" ? "" : `${this["scale"]}-`}${this["token"]}`;
+
+  /** Serialized CSS var() representing the token. */
+  computedValue: `var(${this["variable"]})`;
+
+  /** Returns a serialized CSS var() representing the token. */
+  toString(): this["computedValue"];
+}

package/types/util.d.ts

@@ -0,0 +1,32 @@
+/* Utilities */
+/* ========================================================================== */
+
+/** Returns a string with the given prefix followed by the given values. */
+export type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`;
+
+/** Returns an object from the given object assigned with the values of another given object. */
+// biome-ignore lint/complexity/noBannedTypes: <explanation>
+export type Assign<T1 = {}, T2 = {}> = T1 extends any ? Omit<T1, keyof T2> & T2 : never;
+
+/** Returns a widened value from the given value. */
+export type Widen<T> = T extends number
+  ? `${T}` | T
+  : T extends "true"
+    ? boolean | T
+    : T extends "false"
+      ? boolean | T
+      : T extends `${number}`
+        ? number | T
+        : T;
+
+/** Narrowed string. */
+export type String = string & Record<never, never>;
+
+/** Narrowed number or string. */
+export type Index = (number | string) & Record<never, never>;
+
+/** Narrowed function. */
+export type Function = (...args: any[]) => unknown;
+
+/** Widened object. */
+export type WideObject = { [name in number | string]: boolean | number | string | undefined | WideObject };