@mirohq/design-system-stitches 3.2.0-fix-stitches-types.0 → 3.2.0-fix-stitches-types.1

package/dist/types.d.ts

@@ -1,10 +1,180 @@
 import * as React$1 from 'react';
 import React__default, { ElementType, ComponentPropsWithRef, ExoticComponent, JSXElementConstructor, ComponentType } from 'react';
+import { CSS as CSS$2, VariantProps } from '@stitches/react';
 import { OnlyHTMLAttributes, ExtractValidKeys } from '@mirohq/design-system-types';
-import * as _mirohq_design_system_themes_web from '@mirohq/design-system-themes/web';
+import * as _mirohq_design_system_themes_web from '@mirohq/design-tokens';
 import * as _mirohq_design_system_themes from '@mirohq/design-system-themes';
 import { Theme as Theme$1 } from '@mirohq/design-system-themes';
 
+interface ScaleValue {
+	token: number | string
+	value: number | string
+	scale: string
+	prefix: string
+}
+
+interface Token<
+	/** Token name. */
+	NameType extends number | string = string,
+
+	/** Token value. */
+	ValueType extends number | string = string,
+
+	/** Token scale. */
+	ScaleType extends string | void = void,
+
+	/** Token prefix. */
+	PrefixType extends string | void = void,
+> extends ScaleValue {
+	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']
+}
+
+/* Utilities */
+/* ========================================================================== */
+
+/** Returns a string with the given prefix followed by the given values. */
+type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
+
+/** Returns a widened value from the given value. */
+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. */
+type String = string & Record<never, never>
+
+/** Narrowed number or string. */
+type Index = (number | string) & Record<never, never>
+
+/** Narrowed function. */
+type Function = (...args: any[]) => unknown
+
+/** Widened object. */
+type WideObject = { [name in number | string]: boolean | number | string | undefined | WideObject }
+
+/** Returns a new CSS Component. */
+interface CssComponent<
+	Type = 'span',
+	Props = {},
+	Media = {},
+	CSS = {}
+> {
+	(
+		props?:
+			& TransformProps<Props, Media>
+			& {
+				css?: CSS
+			}
+			& {
+				[name in number | string]: any
+			}
+	): string & {
+		className: string
+		selector: string
+		props: {}
+	}
+
+	className: string
+	selector: string
+
+	[$$StyledComponentType]: Type
+	[$$StyledComponentProps]: Props
+	[$$StyledComponentMedia]: Media
+}
+
+type TransformProps<Props, Media> = {
+	[K in keyof Props]: (
+		| Props[K]
+		| (
+			& {
+				[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
+			}
+			& {
+				[KMedia in string]: Props[K]
+			}
+		)
+	)
+}
+
+/** Unique symbol used to reference the type of a Styled Component. */
+declare const $$StyledComponentType: unique symbol
+
+/** Unique symbol used to reference the type of a Styled Component. */
+type $$StyledComponentType = typeof $$StyledComponentType
+
+/** Unique symbol used to reference the props of a Styled Component. */
+declare const $$StyledComponentProps: unique symbol
+
+/** Unique symbol used to reference the props of a Styled Component. */
+type $$StyledComponentProps = typeof $$StyledComponentProps
+
+/** Unique symbol used to reference the media passed into a Styled Component. */
+declare const $$StyledComponentMedia: unique symbol
+
+/** Unique symbol used to reference the media passed into a Styled Component. */
+type $$StyledComponentMedia = typeof $$StyledComponentMedia
+
+/** Returns the first Styled Component type from the given array of compositions. */
+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. */
+type StyledComponentProps$1<T extends any[]> = (
+	& (
+		$$StyledComponentProps extends keyof T[0]
+			? T[0][$$StyledComponentProps]
+		: T[0] extends { variants: { [name: string]: unknown } }
+			? {
+				[K in keyof T[0]['variants']]?: Widen<keyof T[0]['variants'][K]>
+			}
+		: {}
+	)
+	& (
+		T extends [lead: any, ...tail: infer V]
+			? StyledComponentProps$1<V>
+		: {}
+	)
+)
+
 /** @license MIT License
  * Copyright (c) 2017-present, Fredrik Nicol
  * Copyright (c) 2021-present, Jonathan Neal
@@ -5827,80 +5997,6 @@ interface DefaultThemeMap {
 	zIndex: 'zIndices'
 }
 
-interface ScaleValue {
-	token: number | string
-	value: number | string
-	scale: string
-	prefix: string
-}
-
-interface Token<
-	/** Token name. */
-	NameType extends number | string = string,
-
-	/** Token value. */
-	ValueType extends number | string = string,
-
-	/** Token scale. */
-	ScaleType extends string | void = void,
-
-	/** Token prefix. */
-	PrefixType extends string | void = void,
-> extends ScaleValue {
-	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']
-}
-
-/* Utilities */
-/* ========================================================================== */
-
-/** Returns a string with the given prefix followed by the given values. */
-type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
-
-/** Returns a widened value from the given value. */
-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. */
-type String = string & Record<never, never>
-
-/** Narrowed number or string. */
-type Index = (number | string) & Record<never, never>
-
-/** Narrowed function. */
-type Function = (...args: any[]) => unknown
-
-/** Widened object. */
-type WideObject = { [name in number | string]: boolean | number | string | undefined | WideObject }
-
 /** CSS style declaration object. */
 interface CSSProperties$1 extends StandardLonghandProperties, StandardShorthandProperties, SvgProperties {}
 
@@ -5911,7 +6007,7 @@ type TokenByPropertyName<PropertyName, Theme, ThemeMap> = PropertyName extends k
 type TokenByScaleName<ScaleName, Theme> = ScaleName extends keyof Theme ? Prefixed<'$', keyof Theme[ScaleName]> : never
 
 /** Returns a Style interface, leveraging the given media and style map. */
-type CSS$2<
+type CSS$1<
 	Media = {},
 	Theme = {},
 	ThemeMap = DefaultThemeMap,
@@ -5919,7 +6015,7 @@ type CSS$2<
 > = (
 	// nested at-rule css styles
 	& {
-		[K in Prefixed<'@', keyof Media>]?: CSS$2<Media, Theme, ThemeMap, Utils>
+		[K in Prefixed<'@', keyof Media>]?: CSS$1<Media, Theme, ThemeMap, Utils>
 	}
 	// known property styles
 	& {
@@ -6015,101 +6111,6 @@ type WithPropertyValue<T> = {
  readonly [K in $$PropertyValue]: T
 }
 
-/** Returns a new CSS Component. */
-interface CssComponent<
-	Type = 'span',
-	Props = {},
-	Media = {},
-	CSS = {}
-> {
-	(
-		props?:
-			& TransformProps<Props, Media>
-			& {
-				css?: CSS
-			}
-			& {
-				[name in number | string]: any
-			}
-	): string & {
-		className: string
-		selector: string
-		props: {}
-	}
-
-	className: string
-	selector: string
-
-	[$$StyledComponentType]: Type
-	[$$StyledComponentProps]: Props
-	[$$StyledComponentMedia]: Media
-}
-
-type TransformProps<Props, Media> = {
-	[K in keyof Props]: (
-		| Props[K]
-		| (
-			& {
-				[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
-			}
-			& {
-				[KMedia in string]: Props[K]
-			}
-		)
-	)
-}
-
-/** Unique symbol used to reference the type of a Styled Component. */
-declare const $$StyledComponentType: unique symbol
-
-/** Unique symbol used to reference the type of a Styled Component. */
-type $$StyledComponentType = typeof $$StyledComponentType
-
-/** Unique symbol used to reference the props of a Styled Component. */
-declare const $$StyledComponentProps: unique symbol
-
-/** Unique symbol used to reference the props of a Styled Component. */
-type $$StyledComponentProps = typeof $$StyledComponentProps
-
-/** Unique symbol used to reference the media passed into a Styled Component. */
-declare const $$StyledComponentMedia: unique symbol
-
-/** Unique symbol used to reference the media passed into a Styled Component. */
-type $$StyledComponentMedia = typeof $$StyledComponentMedia
-
-/** Returns the first Styled Component type from the given array of compositions. */
-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. */
-type StyledComponentProps$1<T extends any[]> = (
-	& (
-		$$StyledComponentProps extends keyof T[0]
-			? T[0][$$StyledComponentProps]
-		: T[0] extends { variants: { [name: string]: unknown } }
-			? {
-				[K in keyof T[0]['variants']]?: Widen<keyof T[0]['variants'][K]>
-			}
-		: {}
-	)
-	& (
-		T extends [lead: any, ...tail: infer V]
-			? StyledComponentProps$1<V>
-		: {}
-	)
-)
-
 /** Remove an index signature from a type */
 type RemoveIndex<T> = {[k in keyof T as string extends k ? never : number extends k ? never : k]: T[k]}
 
@@ -6126,32 +6127,12 @@ type ThemeTokens<Values, Prefix> = {
 
 type CSSProperties = CSSProperties$1
 
-/** Returns a Style interface from a configuration, leveraging the given media and style map. */
-type CSS$1<
-	Config extends {
-		media?: {}
-		theme?: {}
-		themeMap?: {}
-		utils?: {}
-	} = {
-		media: {},
-		theme: {},
-		themeMap: {},
-		utils: {}
-	}
-> = CSS$2<
-	Config['media'],
-	Config['theme'],
-	Config['themeMap'],
-	Config['utils']
->
-
 /** Returns a type that expects a value to be a kind of CSS property value. */
 type PropertyValue<Property extends keyof CSSProperties$1, Config = null> = (
 	Config extends null
 		? WithPropertyValue<Property>
 	: Config extends { [K: string]: any }
-		? CSS$2<
+		? CSS$1<
 			Config['media'],
 			Config['theme'],
 			Config['themeMap'],
@@ -6160,9 +6141,6 @@ type PropertyValue<Property extends keyof CSSProperties$1, Config = null> = (
 	: never
 )
 
-/** Returns a type that suggests variants from a component as possible prop values. */
-type VariantProps<Component extends {[key: symbol | string]: any}> = TransformProps<Component[$$StyledComponentProps], Component[$$StyledComponentMedia]>
-
 declare const config: {
     prefix: "";
     media: {};
@@ -8819,7 +8797,7 @@ declare const createTheme: <Argument0 extends string | ({
 } & (Argument0 extends string ? ThemeTokens<Argument1, ""> : ThemeTokens<Argument0, "">);
 declare const css: <Composers extends (string | React.ExoticComponent<any> | React.JSXElementConstructor<any> | Function | {
     [name: string]: unknown;
-})[], CSS = CSS$2<{}, {
+})[], CSS = CSS$1<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -9819,7 +9797,7 @@ declare const globalCss: <Styles extends {
     '@import'?: unknown;
     '@font-face'?: unknown;
 } & { [K in keyof Styles]: K extends "@import" ? string | string[] : K extends "@font-face" ? AtRule.FontFace | AtRule.FontFace[] : K extends `@keyframes ${string}` ? {
-    [x: string]: CSS$2<{}, {
+    [x: string]: CSS$1<{}, {
         'border-widths': {
             readonly none: 0;
             readonly sm: "1px";
@@ -10801,7 +10779,7 @@ declare const globalCss: <Styles extends {
             '&:hover, &[data-hovered]': CSSProperties$1;
         };
     }>;
-} : K extends `@property ${string}` ? AtRule.Property : CSS$2<{}, {
+} : K extends `@property ${string}` ? AtRule.Property : CSS$1<{}, {
     'border-widths': {
         readonly none: 0;
         readonly sm: "1px";
@@ -11786,7 +11764,7 @@ declare const globalCss: <Styles extends {
     (): string;
 };
 declare const keyframes: (style: {
-    [offset: string]: CSS$2<{}, {
+    [offset: string]: CSS$1<{}, {
         'border-widths': {
             readonly none: 0;
             readonly sm: "1px";
@@ -12778,7 +12756,7 @@ declare const fontFace: (...fonts: FontFace[]) => string;
 type ForbiddenProps = 'className' | 'style' | 'as';
 type AllowedProps = 'css' | 'asChild' | 'UNSAFE_style' | 'children';
 type SafeProps<T> = Omit<T, ForbiddenProps>;
-type CSS = CSS$1<typeof config>;
+type CSS = CSS$2<typeof config>;
 /**
  * Build a type with all props from a element and Stitches CSS keys
  * and remove dangerous attributes that could cause styles issues

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirohq/design-system-stitches",
-  "version": "3.2.0-fix-stitches-types.0",
+  "version": "3.2.0-fix-stitches-types.1",
   "description": "",
   "author": "Miro",
   "source": "src/index.ts",
@@ -27,9 +27,9 @@
   },
   "dependencies": {
     "lodash.merge": "^4.6.2",
+    "@mirohq/design-system-themes": "^1.1.1",
     "@mirohq/design-system-types": "^1.0.1",
-    "@mirohq/design-tokens": "^7.0.1",
-    "@mirohq/design-system-themes": "^1.1.1"
+    "@mirohq/design-tokens": "^7.0.1"
   },
   "devDependencies": {
     "@types/lodash.merge": "^4.6.7"