@tuuject/koi-react 0.0.0-stage → 0.1.0

package/styled-system/recipes/select-panel.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const selectPanelConfig = {"name":"selectPanel","className":"koi-select-panel","slots":["trigger","value","icon","positioner","popup","search","searchInput","list","empty","item","itemText","itemIndicator","group","groupLabel","separator"],"defaultVariants":{"size":"md"},"variantMap":{"size":["lg","md","sm"]}}
+
+export const selectPanel = /* @__PURE__ */ createSlotRecipe(selectPanelConfig)

package/styled-system/recipes/select.d.ts

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type SelectVariant = {
+  size?: "lg" | "md" | "sm"
+}
+
+export type SelectVariantProps = {
+  [K in keyof SelectVariant]?: ConditionalValue<SelectVariant[K]>
+}
+
+export type SelectVariantMap = RecipeVariantMap<SelectVariant>
+
+export type SelectSlot = "root" | "el" | "chevron"
+
+export type SelectRecipe = SlotRecipeRuntimeFn<SelectSlot, SelectVariantProps, SelectVariantMap>
+
+export declare const select: SelectRecipe;

package/styled-system/recipes/select.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const selectConfig = {"name":"select","className":"koi-select","slots":["root","el","chevron"],"defaultVariants":{"size":"md"},"variantMap":{"size":["lg","md","sm"]}}
+
+export const select = /* @__PURE__ */ createSlotRecipe(selectConfig)

package/styled-system/recipes/separator.d.ts

@@ -0,0 +1,16 @@
+import type { ConditionalValue } from '../types/system';
+import type { RecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type SeparatorVariant = {
+  kind?: "label" | "line" | "vertical"
+}
+
+export type SeparatorVariantProps = {
+  [K in keyof SeparatorVariant]?: ConditionalValue<SeparatorVariant[K]>
+}
+
+export type SeparatorVariantMap = RecipeVariantMap<SeparatorVariant>
+
+export type SeparatorRecipe = RecipeRuntimeFn<SeparatorVariantProps, SeparatorVariantMap>
+
+export declare const separator: SeparatorRecipe;

package/styled-system/recipes/separator.js

@@ -0,0 +1,5 @@
+import { createRecipe } from './runtime';
+
+const separatorConfig = {"name":"separator","className":"koi-divider","defaultVariants":{"kind":"line"},"variantMap":{"kind":["label","line","vertical"]}}
+
+export const separator = /* @__PURE__ */ createRecipe(separatorConfig)

package/styled-system/recipes/skeleton.d.ts

@@ -0,0 +1,14 @@
+import type { ConditionalValue } from '../types/system';
+import type { RecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type SkeletonVariant = {}
+
+export type SkeletonVariantProps = {
+  [K in keyof SkeletonVariant]?: ConditionalValue<SkeletonVariant[K]>
+}
+
+export type SkeletonVariantMap = RecipeVariantMap<SkeletonVariant>
+
+export type SkeletonRecipe = RecipeRuntimeFn<SkeletonVariantProps, SkeletonVariantMap>
+
+export declare const skeleton: SkeletonRecipe;

package/styled-system/recipes/skeleton.js

@@ -0,0 +1,5 @@
+import { createRecipe } from './runtime';
+
+const skeletonConfig = {"name":"skeleton","className":"koi-skeleton"}
+
+export const skeleton = /* @__PURE__ */ createRecipe(skeletonConfig)

package/styled-system/recipes/spinner.d.ts

@@ -0,0 +1,16 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type SpinnerVariant = {}
+
+export type SpinnerVariantProps = {
+  [K in keyof SpinnerVariant]?: ConditionalValue<SpinnerVariant[K]>
+}
+
+export type SpinnerVariantMap = RecipeVariantMap<SpinnerVariant>
+
+export type SpinnerSlot = "root" | "svg"
+
+export type SpinnerRecipe = SlotRecipeRuntimeFn<SpinnerSlot, SpinnerVariantProps, SpinnerVariantMap>
+
+export declare const spinner: SpinnerRecipe;

package/styled-system/recipes/spinner.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const spinnerConfig = {"name":"spinner","className":"koi-spinner","slots":["root","svg"]}
+
+export const spinner = /* @__PURE__ */ createSlotRecipe(spinnerConfig)

package/styled-system/recipes/switch-recipe.d.ts

@@ -0,0 +1,16 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type SwitchRecipeVariant = {}
+
+export type SwitchRecipeVariantProps = {
+  [K in keyof SwitchRecipeVariant]?: ConditionalValue<SwitchRecipeVariant[K]>
+}
+
+export type SwitchRecipeVariantMap = RecipeVariantMap<SwitchRecipeVariant>
+
+export type SwitchRecipeSlot = "root" | "control" | "thumb" | "label"
+
+export type SwitchRecipeRecipe = SlotRecipeRuntimeFn<SwitchRecipeSlot, SwitchRecipeVariantProps, SwitchRecipeVariantMap>
+
+export declare const switchRecipe: SwitchRecipeRecipe;

package/styled-system/recipes/switch-recipe.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const switchRecipeConfig = {"name":"switchRecipe","className":"koi-switch","slots":["root","control","thumb","label"]}
+
+export const switchRecipe = /* @__PURE__ */ createSlotRecipe(switchRecipeConfig)

package/styled-system/recipes/table.d.ts

@@ -0,0 +1,20 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type TableVariant = {
+  align?: "center" | "end" | "start"
+  layout?: "auto" | "fixed"
+  paddingBlock?: "default" | "none"
+}
+
+export type TableVariantProps = {
+  [K in keyof TableVariant]?: ConditionalValue<TableVariant[K]>
+}
+
+export type TableVariantMap = RecipeVariantMap<TableVariant>
+
+export type TableSlot = "container" | "root" | "header" | "body" | "footer" | "row" | "headerCell" | "cell" | "sortButton" | "empty" | "caption" | "skeleton"
+
+export type TableRecipe = SlotRecipeRuntimeFn<TableSlot, TableVariantProps, TableVariantMap>
+
+export declare const table: TableRecipe;

package/styled-system/recipes/table.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const tableConfig = {"name":"table","className":"koi-table","slots":["container","root","header","body","footer","row","headerCell","cell","sortButton","empty","caption","skeleton"],"defaultVariants":{"align":"start","layout":"auto","paddingBlock":"default"},"variantMap":{"align":["center","end","start"],"layout":["auto","fixed"],"paddingBlock":["default","none"]}}
+
+export const table = /* @__PURE__ */ createSlotRecipe(tableConfig)

package/styled-system/recipes/tabs.d.ts

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type TabsVariant = {
+  fullWidth?: boolean
+}
+
+export type TabsVariantProps = {
+  [K in keyof TabsVariant]?: ConditionalValue<TabsVariant[K]>
+}
+
+export type TabsVariantMap = RecipeVariantMap<TabsVariant>
+
+export type TabsSlot = "root" | "list" | "tab" | "indicator" | "panel"
+
+export type TabsRecipe = SlotRecipeRuntimeFn<TabsSlot, TabsVariantProps, TabsVariantMap>
+
+export declare const tabs: TabsRecipe;

package/styled-system/recipes/tabs.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const tabsConfig = {"name":"tabs","className":"koi-tabs","slots":["root","list","tab","indicator","panel"],"defaultVariants":{"fullWidth":false},"variantMap":{"fullWidth":["false","true"]}}
+
+export const tabs = /* @__PURE__ */ createSlotRecipe(tabsConfig)

package/styled-system/recipes/tag.d.ts

@@ -0,0 +1,18 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type TagVariant = {
+  selected?: boolean
+}
+
+export type TagVariantProps = {
+  [K in keyof TagVariant]?: ConditionalValue<TagVariant[K]>
+}
+
+export type TagVariantMap = RecipeVariantMap<TagVariant>
+
+export type TagSlot = "root" | "toggle" | "icon" | "label" | "remove"
+
+export type TagRecipe = SlotRecipeRuntimeFn<TagSlot, TagVariantProps, TagVariantMap>
+
+export declare const tag: TagRecipe;

package/styled-system/recipes/tag.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const tagConfig = {"name":"tag","className":"koi-tag","slots":["root","toggle","icon","label","remove"],"defaultVariants":{"selected":false},"variantMap":{"selected":["false","true"]}}
+
+export const tag = /* @__PURE__ */ createSlotRecipe(tagConfig)

package/styled-system/recipes/textarea.d.ts

@@ -0,0 +1,14 @@
+import type { ConditionalValue } from '../types/system';
+import type { RecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type TextareaVariant = {}
+
+export type TextareaVariantProps = {
+  [K in keyof TextareaVariant]?: ConditionalValue<TextareaVariant[K]>
+}
+
+export type TextareaVariantMap = RecipeVariantMap<TextareaVariant>
+
+export type TextareaRecipe = RecipeRuntimeFn<TextareaVariantProps, TextareaVariantMap>
+
+export declare const textarea: TextareaRecipe;

package/styled-system/recipes/textarea.js

@@ -0,0 +1,5 @@
+import { createRecipe } from './runtime';
+
+const textareaConfig = {"name":"textarea","className":"koi-textarea"}
+
+export const textarea = /* @__PURE__ */ createRecipe(textareaConfig)

package/styled-system/recipes/toast.d.ts

@@ -0,0 +1,20 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type ToastVariant = {
+  closable?: boolean
+  position?: "bottom" | "static" | "top"
+  tone?: "error" | "info" | "success" | "warning"
+}
+
+export type ToastVariantProps = {
+  [K in keyof ToastVariant]?: ConditionalValue<ToastVariant[K]>
+}
+
+export type ToastVariantMap = RecipeVariantMap<ToastVariant>
+
+export type ToastSlot = "viewport" | "root" | "icon" | "content" | "title" | "description" | "action" | "close"
+
+export type ToastRecipe = SlotRecipeRuntimeFn<ToastSlot, ToastVariantProps, ToastVariantMap>
+
+export declare const toast: ToastRecipe;

package/styled-system/recipes/toast.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const toastConfig = {"name":"toast","className":"koi-toast","slots":["viewport","root","icon","content","title","description","action","close"],"defaultVariants":{"closable":false,"position":"static","tone":"info"},"variantMap":{"closable":["false","true"],"position":["bottom","static","top"],"tone":["error","info","success","warning"]}}
+
+export const toast = /* @__PURE__ */ createSlotRecipe(toastConfig)

package/styled-system/recipes/tooltip.d.ts

@@ -0,0 +1,16 @@
+import type { ConditionalValue } from '../types/system';
+import type { SlotRecipeRuntimeFn, RecipeVariantMap } from '../types/recipe';
+
+export type TooltipVariant = {}
+
+export type TooltipVariantProps = {
+  [K in keyof TooltipVariant]?: ConditionalValue<TooltipVariant[K]>
+}
+
+export type TooltipVariantMap = RecipeVariantMap<TooltipVariant>
+
+export type TooltipSlot = "positioner" | "popup"
+
+export type TooltipRecipe = SlotRecipeRuntimeFn<TooltipSlot, TooltipVariantProps, TooltipVariantMap>
+
+export declare const tooltip: TooltipRecipe;

package/styled-system/recipes/tooltip.js

@@ -0,0 +1,5 @@
+import { createSlotRecipe } from './runtime';
+
+const tooltipConfig = {"name":"tooltip","className":"koi-tooltip","slots":["positioner","popup"]}
+
+export const tooltip = /* @__PURE__ */ createSlotRecipe(tooltipConfig)

package/styled-system/tokens/index.d.ts

@@ -0,0 +1,8 @@
+import type { Token, TokenPath } from '../types/tokens';
+
+interface TokenFn {
+  (path: TokenPath, fallback?: string): string
+  var: (path: Token, fallback?: string) => string
+}
+
+export declare const token: TokenFn;

package/styled-system/tokens/index.js

@@ -0,0 +1,18 @@
+import { colorMix, toCssVar } from '../helpers';
+
+const tokens = {"blurs.float":"40px","blurs.panel":"24px","breakpoints.md":"768px","colors.accent-edge":"","colors.accent-fg":"","colors.accent-soft":"","colors.accent-soft-hover":"","colors.accent-solid":"var(--colors-accent-400)","colors.accent-solid-hover":"var(--colors-accent-300)","colors.accent.100":"","colors.accent.200":"","colors.accent.300":"","colors.accent.400":"","colors.accent.50":"","colors.accent.500":"","colors.accent.600":"","colors.accent.700":"","colors.accent.800":"","colors.accent.900":"","colors.accent.950":"","colors.action":"var(--colors-primary-700)","colors.action-hover":"var(--colors-primary-800)","colors.action-subtle":"","colors.action-subtle-hover":"","colors.backdrop":"","colors.black":"#000000","colors.border":"","colors.border-control":"var(--colors-secondary-500)","colors.border-control-hover":"","colors.code-block-bg":"var(--colors-secondary-800)","colors.code-block-text":"","colors.colorPalette":"","colors.colorPalette.100":"","colors.colorPalette.200":"","colors.colorPalette.300":"","colors.colorPalette.400":"","colors.colorPalette.50":"","colors.colorPalette.500":"","colors.colorPalette.600":"","colors.colorPalette.700":"","colors.colorPalette.800":"","colors.colorPalette.900":"","colors.colorPalette.950":"","colors.control-checked":"","colors.danger":"var(--colors-error-600)","colors.danger-hover":"var(--colors-error-700)","colors.divider":"","colors.error-border":"","colors.error-control":"","colors.error-edge":"","colors.error-fg":"","colors.error-soft":"","colors.error-soft-hover":"","colors.error-solid":"var(--colors-danger)","colors.error-solid-hover":"var(--colors-danger-hover)","colors.error-surface":"","colors.error-text":"","colors.error.100":"oklch(93.6% 0.032 17.717)","colors.error.200":"oklch(88.5% 0.062 18.334)","colors.error.300":"oklch(80.8% 0.114 19.571)","colors.error.400":"oklch(70.4% 0.191 22.216)","colors.error.50":"oklch(97.1% 0.013 17.38)","colors.error.500":"oklch(63.7% 0.237 25.331)","colors.error.600":"oklch(57.7% 0.245 27.325)","colors.error.700":"oklch(50.5% 0.213 27.518)","colors.error.800":"oklch(44.4% 0.177 26.899)","colors.error.900":"oklch(39.6% 0.141 25.723)","colors.error.950":"oklch(25.8% 0.092 26.042)","colors.focus-ring":"","colors.highlight":"","colors.info-border":"","colors.info-surface":"","colors.info-text":"","colors.link":"","colors.link-border":"","colors.link-hover-bg":"","colors.link-hover-border":"","colors.nav-item-active":"","colors.nav-item-hover":"","colors.nav-item-text":"","colors.on-accent-soft":"","colors.on-accent-solid":"var(--colors-accent-950)","colors.on-action":"var(--colors-white)","colors.on-action-subtle":"","colors.on-error-soft":"","colors.on-error-solid":"var(--colors-on-action)","colors.on-highlight":"","colors.on-primary-soft":"var(--colors-on-action-subtle)","colors.on-primary-solid":"var(--colors-on-action)","colors.on-secondary-soft":"","colors.on-secondary-solid":"","colors.on-warning-soft":"","colors.on-warning-solid":"var(--colors-warning-950)","colors.page-bg":"","colors.primary-edge":"","colors.primary-fg":"var(--colors-text-brand)","colors.primary-soft":"var(--colors-action-subtle)","colors.primary-soft-hover":"var(--colors-action-subtle-hover)","colors.primary-solid":"var(--colors-action)","colors.primary-solid-hover":"var(--colors-action-hover)","colors.primary.100":"","colors.primary.200":"","colors.primary.300":"","colors.primary.400":"","colors.primary.50":"","colors.primary.500":"","colors.primary.600":"","colors.primary.700":"","colors.primary.800":"","colors.primary.900":"","colors.primary.950":"","colors.prose-text":"","colors.secondary-edge":"var(--colors-secondary-500)","colors.secondary-fg":"","colors.secondary-soft":"","colors.secondary-soft-hover":"","colors.secondary-solid":"","colors.secondary-solid-hover":"","colors.secondary.100":"oklch(96.7% 0.003 264.542)","colors.secondary.200":"oklch(92.8% 0.006 264.531)","colors.secondary.300":"oklch(87.2% 0.01 258.338)","colors.secondary.400":"oklch(70.7% 0.022 261.325)","colors.secondary.50":"oklch(98.5% 0.002 247.839)","colors.secondary.500":"oklch(55.1% 0.027 264.364)","colors.secondary.600":"oklch(44.6% 0.03 256.802)","colors.secondary.700":"oklch(37.3% 0.034 259.733)","colors.secondary.800":"oklch(27.8% 0.033 256.848)","colors.secondary.900":"oklch(21% 0.034 264.665)","colors.secondary.950":"oklch(13% 0.028 261.692)","colors.skeleton":"","colors.skeleton-highlight":"","colors.surface":"","colors.surface-glass":"","colors.surface-glass-tint":"","colors.surface-muted":"","colors.table-row-hover":"","colors.text":"","colors.text-brand":"","colors.text-disabled":"","colors.text-muted":"","colors.tooltip-bg":"","colors.tooltip-text":"","colors.warning-border":"","colors.warning-edge":"","colors.warning-fg":"","colors.warning-soft":"","colors.warning-soft-hover":"","colors.warning-solid":"var(--colors-warning-400)","colors.warning-solid-hover":"var(--colors-warning-300)","colors.warning-surface":"","colors.warning-text":"","colors.warning.100":"oklch(97.3% 0.071 103.193)","colors.warning.200":"oklch(94.5% 0.129 101.54)","colors.warning.300":"oklch(90.5% 0.182 98.111)","colors.warning.400":"oklch(85.2% 0.199 91.936)","colors.warning.50":"oklch(98.7% 0.026 102.212)","colors.warning.500":"oklch(79.5% 0.184 86.047)","colors.warning.600":"oklch(68.1% 0.162 75.834)","colors.warning.700":"oklch(55.4% 0.135 66.442)","colors.warning.800":"oklch(47.6% 0.114 61.907)","colors.warning.900":"oklch(42.1% 0.095 57.708)","colors.warning.950":"oklch(28.6% 0.066 53.813)","colors.white":"#ffffff","durations.check":"250ms","durations.dialog":"300ms","durations.fast":"150ms","durations.indeterminate":"1.2s","durations.overlay":"200ms","durations.pulse":"2s","durations.ripple":"600ms","durations.shimmer":"1.6s","durations.spin":"800ms","durations.spin-slow":"1.6s","durations.spring":"400ms","easings.out":"cubic-bezier(0, 0, .2, 1)","easings.spring":"cubic-bezier(.47,1.64,.41,.8)","fonts.sans":"","radii.2xl":"16px","radii.bar":"36px","radii.dialog":"32px","radii.full":"9999px","radii.lg":"8px","radii.panel":"24px","radii.sm":"6px","radii.xl":"12px","shadows.float":"0 25px 50px -12px rgba(0, 0, 0, 0.25)","shadows.float-soft":"0 25px 50px -12px rgba(0, 0, 0, 0.15)","shadows.raised":"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)","sizes.breakpoint-md":"768px","sizes.content-max":"56rem","sizes.control-lg":"44px","sizes.control-md":"36px","sizes.control-sm":"28px","sizes.icon":"16px","sizes.icon-lg":"18px","sizes.icon-sm":"14px","sizes.icon-xs":"12px","spacing.-1":"calc(var(--spacing-1) * -1)","spacing.-10":"calc(var(--spacing-10) * -1)","spacing.-12":"calc(var(--spacing-12) * -1)","spacing.-16":"calc(var(--spacing-16) * -1)","spacing.-2":"calc(var(--spacing-2) * -1)","spacing.-3":"calc(var(--spacing-3) * -1)","spacing.-4":"calc(var(--spacing-4) * -1)","spacing.-5":"calc(var(--spacing-5) * -1)","spacing.-6":"calc(var(--spacing-6) * -1)","spacing.-8":"calc(var(--spacing-8) * -1)","spacing.1":"4px","spacing.10":"40px","spacing.12":"48px","spacing.16":"64px","spacing.2":"8px","spacing.3":"12px","spacing.4":"16px","spacing.5":"20px","spacing.6":"24px","spacing.8":"32px","zIndex.dialog":"900","zIndex.popup":"950","zIndex.toast":"1000","zIndex.tooltip":"1000"}
+
+const tokenVars = {"spacing.-1":"var(--spacing-1)","spacing.-10":"var(--spacing-10)","spacing.-12":"var(--spacing-12)","spacing.-16":"var(--spacing-16)","spacing.-2":"var(--spacing-2)","spacing.-3":"var(--spacing-3)","spacing.-4":"var(--spacing-4)","spacing.-5":"var(--spacing-5)","spacing.-6":"var(--spacing-6)","spacing.-8":"var(--spacing-8)"}
+const resolveVar = (path) => tokenVars[path] || toCssVar(path)
+
+export const token = /* @__PURE__ */ Object.assign(
+  function token(path, fallback) {
+    const value = tokens[path]
+    return value === undefined ? colorMix(tokens, path, resolveVar) || fallback : value || resolveVar(path)
+  },
+  {
+    var: function tokenVar(path, fallback) {
+      return tokens[path] === undefined ? fallback : resolveVar(path)
+    },
+  },
+)

package/styled-system/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './tokens';
+export * from './system';
+export * from './pattern';
+export * from './recipe';
+export * from './jsx';

package/styled-system/types/jsx.d.ts

@@ -0,0 +1,80 @@
+import type { ElementType, JSX } from 'react';
+import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe';
+import type { Assign, JsxHTMLProps, JsxStyleProps } from './system';
+
+interface AnyProps {
+  [k: string]: unknown
+}
+
+export type DataAttrs = Record<`data-${string}`, unknown>
+
+export interface UnstyledProps {
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  as?: ElementType | undefined
+}
+
+export type ComponentProps<T extends ElementType> = T extends keyof JSX.IntrinsicElements
+  ? JSX.IntrinsicElements[T]
+  : T extends { (props: infer Props): any }
+    ? Props
+    : T extends abstract new (props: infer Props) => any
+      ? Props
+      : {}
+
+type BaseComponentProps<T extends ElementType> = ComponentProps<T> & UnstyledProps & AsProps
+
+export type StyledComponentProps<T extends ElementType, P extends AnyProps = {}> = JsxHTMLProps<
+  BaseComponentProps<T>,
+  Assign<JsxStyleProps, P>
+>
+
+export interface StyledComponent<T extends ElementType, P extends AnyProps = {}> {
+  (props: StyledComponentProps<T, P>): JSX.Element
+  displayName?: string | undefined
+}
+
+interface RuntimeRecipeFn {
+  __type: any
+}
+
+export interface JsxFactoryOptions<TProps extends AnyProps, F extends string = string> {
+  dataAttr?: boolean
+  defaultProps?: Partial<TProps> & DataAttrs
+  shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
+  forwardProps?: readonly F[]
+}
+
+// Distributes over the few forwarded keys; never intersects the large key unions.
+type ForwardedStyleKeys<T extends ElementType, F extends string> = F extends keyof JsxStyleProps
+  ? F extends keyof ComponentProps<T> ? F : never
+  : never
+
+/** Props `S`, with each forwarded prop that shares a style prop's name typed from the component. */
+export type WithForwardedProps<S, T extends ElementType, F extends string> = [ForwardedStyleKeys<T, F>] extends [never]
+  ? S
+  : Assign<S, Pick<ComponentProps<T>, ForwardedStyleKeys<T, F>>>
+
+export type JsxRecipeProps<T extends ElementType, P extends AnyProps> = JsxHTMLProps<BaseComponentProps<T>, Assign<JsxStyleProps, P>>
+
+export type JsxElement<T extends ElementType, P extends AnyProps> = T extends StyledComponent<infer A, infer B>
+  ? StyledComponent<A, Assign<B, P>>
+  : StyledComponent<T, P>
+
+export interface JsxFactory {
+  <T extends ElementType>(component: T): StyledComponent<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord = {}, F extends string = never>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>, F>): JsxElement<T, WithForwardedProps<RecipeSelection<P>, T, F>>
+  <T extends ElementType, P extends RuntimeRecipeFn, F extends string = never>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P["__type"]>, F>): JsxElement<T, WithForwardedProps<P["__type"], T, F>>
+}
+
+export type JsxElements = {
+  [K in keyof JSX.IntrinsicElements]: StyledComponent<K, {}>
+}
+
+export type Styled = JsxFactory & JsxElements
+
+export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<BaseComponentProps<T>, JsxStyleProps>
+
+export type StyledVariantProps<T extends StyledComponent<any, any>> = T extends StyledComponent<any, infer Props> ? Props : never

package/styled-system/types/pattern.d.ts

@@ -0,0 +1,26 @@
+import type { ConditionalValue, SystemProperties, SystemStyleObject } from './system';
+
+export type PatternPrimitive = string | number | boolean
+
+export type PatternPropertyValue<Property extends keyof SystemProperties> = SystemProperties[Property]
+
+export type PatternTokenValue<Value> = ConditionalValue<Value>
+
+export interface PatternHelpers {
+  map(value: unknown, fn: (value: string) => string | undefined): unknown
+  isCssUnit(value: unknown): boolean
+  isCssVar(value: unknown): boolean
+  isCssFunction(value: unknown): boolean
+}
+
+export interface PatternConfig<Props extends object = object> {
+  properties?: Props
+  defaultValues?: Partial<Props> | ((props: Props) => Partial<Props>)
+  transform?: (props: Props, helpers: PatternHelpers) => SystemStyleObject
+  strict?: boolean
+  blocklist?: Array<keyof SystemProperties>
+}
+
+export interface PatternRuntimeConfig<Props extends object = object> extends PatternConfig<Props> {
+  transform: (props: Props, helpers: PatternHelpers) => SystemStyleObject
+}

package/styled-system/types/recipe.d.ts

@@ -0,0 +1,77 @@
+import type { SystemStyleObject } from './system';
+
+export type RecipeVariantProps<T> = T extends (props?: infer Props) => unknown ? Props : never
+
+export type RecipeVariant<T> = Required<NonNullable<RecipeVariantProps<T>>>
+
+export type RecipeVariantMap<Variant extends object> = {
+  [K in keyof Variant]-?: Array<Exclude<Variant[K], undefined>>
+}
+
+export type RecipeConfigVariantMap<T> = {
+  [K in keyof T]: Array<keyof T[K]>
+}
+
+export interface RecipeRuntimeFn<Props extends object = object, Map extends object = object> {
+  (props?: Props): string
+  __type: Props
+  variantMap: Map
+  variantKeys: Array<keyof Props>
+  raw: (props?: Props) => SystemStyleObject
+  splitVariantProps<T extends Record<string, any>>(props: T): [Props, Omit<T, keyof Props>]
+  getVariantProps: (props?: Props) => Props
+  merge(recipe: RecipeRuntimeFn): RecipeRuntimeFn
+}
+
+export type SlotRecord<Slot extends string, Value> = Partial<Record<Slot, Value>>
+
+export interface SlotRecipeRuntimeFn<Slot extends string, Props extends object = object, Map extends object = object> {
+  (props?: Props): Record<Slot, string>
+  __type: Props
+  __slot: Slot
+  variantMap: Map
+  variantKeys: Array<keyof Props>
+  raw: (props?: Props) => Record<Slot, SystemStyleObject>
+  splitVariantProps<T extends Record<string, any>>(props: T): [Props, Omit<T, keyof Props>]
+  getVariantProps: (props?: Props) => Props
+}
+
+export type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
+
+export type RecipeVariantRecord = Record<string, Record<string, SystemStyleObject>>
+
+export type RecipeSelection<T extends RecipeVariantRecord> = string extends keyof T
+  ? {}
+  : {
+      [K in keyof T]?: StringToBoolean<keyof T[K]> | undefined
+    }
+
+export type RecipeCompoundSelection<T> = {
+  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>> | undefined
+}
+
+export interface RecipeDefinition<T extends RecipeVariantRecord = RecipeVariantRecord> {
+  base?: SystemStyleObject
+  variants?: T
+  defaultVariants?: RecipeSelection<T>
+  compoundVariants?: Array<RecipeCompoundSelection<T> & { css: SystemStyleObject }>
+}
+
+export interface RecipeCreatorFn {
+  <T extends RecipeVariantRecord>(config: RecipeDefinition<T>): RecipeRuntimeFn<RecipeSelection<T>, RecipeConfigVariantMap<T>>
+}
+
+export type SlotRecipeVariantRecord<Slot extends string> = Record<string, Record<string, SlotRecord<Slot, SystemStyleObject>>>
+
+export interface SlotRecipeDefinition<Slot extends string = string, T extends SlotRecipeVariantRecord<Slot> = SlotRecipeVariantRecord<Slot>> {
+  className?: string
+  slots: readonly Slot[]
+  base?: SlotRecord<Slot, SystemStyleObject>
+  variants?: T
+  defaultVariants?: RecipeSelection<T>
+  compoundVariants?: Array<RecipeCompoundSelection<T> & { css: SlotRecord<Slot, SystemStyleObject> }>
+}
+
+export interface SlotRecipeCreatorFn {
+  <Slot extends string, T extends SlotRecipeVariantRecord<Slot>>(config: SlotRecipeDefinition<Slot, T>): SlotRecipeRuntimeFn<Slot, RecipeSelection<T>, RecipeConfigVariantMap<T>>
+}