@tuuject/koi-react 0.0.0-stage → 0.1.0

package/styled-system/jsx/center.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { center } from '../patterns/center';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) {
+  const [patternProps, restProps] = splitProps(props, center.propKeys)
+  const styleProps = center.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { CircleProperties } from '../patterns/circle';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface CircleProps extends CircleProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CircleProperties> {}
+export declare const Circle: FunctionComponent<CircleProps>;

package/styled-system/jsx/circle.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { circle } from '../patterns/circle';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) {
+  const [patternProps, restProps] = splitProps(props, circle.propKeys)
+  const styleProps = circle.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { ContainerProperties } from '../patterns/container';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface ContainerProps extends ContainerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof ContainerProperties> {}
+export declare const Container: FunctionComponent<ContainerProps>;

package/styled-system/jsx/container.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { container } from '../patterns/container';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) {
+  const [patternProps, restProps] = splitProps(props, container.propKeys)
+  const styleProps = container.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { CqProperties } from '../patterns/cq';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface CqProps extends CqProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CqProperties> {}
+export declare const Cq: FunctionComponent<CqProps>;

package/styled-system/jsx/cq.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { cq } from '../patterns/cq';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Cq = /* @__PURE__ */ forwardRef(function Cq(props, ref) {
+  const [patternProps, restProps] = splitProps(props, cq.propKeys)
+  const styleProps = cq.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/jsx/create-recipe-context.d.ts

@@ -0,0 +1,32 @@
+import type { RecipeDefinition, RecipeRuntimeFn, RecipeSelection, RecipeVariantRecord } from '../types/recipe';
+import type { Assign, JsxHTMLProps, JsxStyleProps } from '../types/system';
+import type { AsProps, ComponentProps, DataAttrs, JsxFactoryOptions, UnstyledProps, WithForwardedProps } from '../types/jsx';
+import type { ElementType, JSX, Provider } from 'react';
+
+type AnyRecipeDefinition = RecipeDefinition<RecipeVariantRecord>;
+interface RuntimeRecipeFn {
+  __type: unknown;
+  (props?: never): string;
+}
+type RecipeContextRecipe = RecipeRuntimeFn<any, any> | RuntimeRecipeFn | AnyRecipeDefinition;
+type RecipePropsOf<R extends RecipeContextRecipe> = R extends RuntimeRecipeFn ? R['__type'] : R extends RecipeRuntimeFn<infer P, any> ? P : R extends RecipeDefinition<infer T> ? RecipeSelection<T> : never;
+type RecipeContextComponentProps<
+  T extends ElementType,
+  R extends RecipeContextRecipe,
+  F extends string
+> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, WithForwardedProps<Assign<RecipePropsOf<R>, JsxStyleProps>, T, F>>;
+type RecipeContextComponent<
+  T extends ElementType,
+  R extends RecipeContextRecipe,
+  F extends string = never
+> = (props: RecipeContextComponentProps<T, R, F>) => JSX.Element;
+export interface RecipeContext<R extends RecipeContextRecipe> {
+  withContext: <
+    T extends ElementType,
+    F extends string = never
+  >(Component: T, options?: JsxFactoryOptions<ComponentProps<T>, F> | undefined) => RecipeContextComponent<T, R, F>;
+  PropsProvider: Provider<Partial<RecipePropsOf<R>> & DataAttrs>;
+  usePropsContext: () => RecipePropsOf<R> | undefined;
+}
+export declare function createRecipeContext<R extends RecipeContextRecipe>(recipeInput: R): RecipeContext<R>;
+export {};

package/styled-system/jsx/create-recipe-context.js

@@ -0,0 +1,38 @@
+"use client";
+
+import { createContext, useContext, createElement, forwardRef } from 'react';
+import { styled } from './factory';
+import { getDisplayName } from './helper';
+
+function resolveRecipe(recipe) {
+  if (recipe == null) throw new Error('createRecipeContext requires a recipe')
+  if (recipe.__recipe__ === true || recipe.__cva__ === true) return recipe
+  if (recipe.base || recipe.variants || recipe.defaultVariants || recipe.compoundVariants) return recipe
+  throw new Error('createRecipeContext requires a recipe')
+}
+
+export function createRecipeContext(recipeInput) {
+  const recipe = resolveRecipe(recipeInput)
+  const PropsContext = createContext(undefined)
+  const usePropsContext = () => useContext(PropsContext)
+
+  const withContext = (Component, options) => {
+    const StyledComponent = styled(Component, recipe, options)
+    const componentName = getDisplayName(Component)
+
+    const WithContext = forwardRef(function WithContext(inProps, ref) {
+      const propsContext = usePropsContext()
+      const props = propsContext ? Object.assign({}, propsContext, inProps) : inProps
+      return createElement(StyledComponent, { ...props, ref })
+    })
+
+    WithContext.displayName = `withContext(${componentName})`
+    return WithContext
+  }
+
+  return {
+    withContext,
+    PropsProvider: PropsContext.Provider,
+    usePropsContext,
+  }
+}

package/styled-system/jsx/create-slot-recipe-context.d.ts

@@ -0,0 +1,48 @@
+import type { RecipeSelection, SlotRecipeDefinition, SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '../types/recipe';
+import type { Assign, JsxHTMLProps, JsxStyleProps } from '../types/system';
+import type { AsProps, ComponentProps, DataAttrs, JsxFactoryOptions, UnstyledProps, WithForwardedProps } from '../types/jsx';
+import type { ElementType, JSX } from 'react';
+
+type AnySlotRecipeDefinition = SlotRecipeDefinition<string, SlotRecipeVariantRecord<string>>;
+interface RuntimeSlotRecipeFn {
+  __type: unknown;
+  __slot: string;
+  (props?: never): unknown;
+}
+type SlotRecipeContextInput = SlotRecipeRuntimeFn<string, any, any> | RuntimeSlotRecipeFn | AnySlotRecipeDefinition;
+type SlotNameOf<R extends SlotRecipeContextInput> = R extends RuntimeSlotRecipeFn ? R['__slot'] : R extends SlotRecipeRuntimeFn<infer S, any, any> ? S : R extends SlotRecipeDefinition<infer S, any> ? S : string;
+type SlotRecipePropsOf<R extends SlotRecipeContextInput> = R extends RuntimeSlotRecipeFn ? R['__type'] : R extends SlotRecipeRuntimeFn<any, infer P, any> ? P : R extends SlotRecipeDefinition<any, infer T> ? RecipeSelection<T> : never;
+interface WithProviderOptions<P = {}> {
+  defaultProps?: (Partial<P> & DataAttrs) | undefined;
+}
+type SlotRecipeProviderProps<
+  T extends ElementType,
+  R extends SlotRecipeContextInput,
+  F extends string
+> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, WithForwardedProps<Assign<SlotRecipePropsOf<R>, JsxStyleProps>, T, F>>;
+type SlotRecipeProviderComponent<
+  T extends ElementType,
+  R extends SlotRecipeContextInput,
+  F extends string = never
+> = (props: SlotRecipeProviderProps<T, R, F>) => JSX.Element;
+type SlotRecipeRootProviderComponent<
+  T extends ElementType,
+  R extends SlotRecipeContextInput
+> = (props: ComponentProps<T> & UnstyledProps & SlotRecipePropsOf<R>) => JSX.Element;
+type SlotRecipeConsumerComponent<
+  T extends ElementType,
+  F extends string = never
+> = (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, WithForwardedProps<JsxStyleProps, T, F>>) => JSX.Element;
+export interface SlotRecipeContext<R extends SlotRecipeContextInput> {
+  withRootProvider: <T extends ElementType>(Component: T, options?: WithProviderOptions<ComponentProps<T>> | undefined) => SlotRecipeRootProviderComponent<T, R>;
+  withProvider: <
+    T extends ElementType,
+    F extends string = never
+  >(Component: T, slot: SlotNameOf<R>, options?: JsxFactoryOptions<ComponentProps<T>, F> | undefined) => SlotRecipeProviderComponent<T, R, F>;
+  withContext: <
+    T extends ElementType,
+    F extends string = never
+  >(Component: T, slot: SlotNameOf<R>, options?: JsxFactoryOptions<ComponentProps<T>, F> | undefined) => SlotRecipeConsumerComponent<T, F>;
+}
+export declare function createSlotRecipeContext<R extends SlotRecipeContextInput>(recipeInput: R): SlotRecipeContext<R>;
+export {};

package/styled-system/jsx/create-slot-recipe-context.js

@@ -0,0 +1,116 @@
+"use client";
+
+import { createContext, useContext, createElement, forwardRef } from 'react';
+import { cx, css, sva } from '../css/index';
+import { styled } from './factory';
+import { getDisplayName } from './helper';
+
+function createSafeContext(contextName) {
+  const Context = createContext(undefined)
+  const useStyleContext = (componentName, slot) => {
+    const context = useContext(Context)
+    if (context === undefined) {
+      const componentInfo = componentName ? `Component "${componentName}"` : 'A component'
+      const slotInfo = slot ? ` (slot: "${slot}")` : ''
+      throw new Error(`${componentInfo}${slotInfo} cannot access ${contextName} because it's missing its Provider.`)
+    }
+    return context
+  }
+  return [Context, useStyleContext]
+}
+
+function resolveSlotRecipe(recipe) {
+  if (recipe == null) throw new Error('createSlotRecipeContext requires a slot recipe')
+  if (typeof recipe.splitVariantProps === 'function') return recipe
+  if (recipe.slots) return recipe
+  throw new Error('createSlotRecipeContext requires a slot recipe')
+}
+
+export function createSlotRecipeContext(recipeInput) {
+  const recipe = resolveSlotRecipe(recipeInput)
+  const isRuntimeRecipe = typeof recipe.splitVariantProps === 'function'
+  const isConfigRecipe = isRuntimeRecipe && recipe.__recipe__ !== undefined
+  const recipeName = isRuntimeRecipe && recipe.__name__ ? recipe.__name__ : undefined
+  const contextName = recipeName ? `createSlotRecipeContext("${recipeName}")` : 'createSlotRecipeContext'
+  const [SlotStylesContext, useSlotStylesContext] = createSafeContext(contextName)
+  const slotRecipeFn = isRuntimeRecipe ? recipe : sva(recipe.config ?? recipe)
+
+  const resolveProps = (props, slotStyles) => {
+    const { unstyled, ...restProps } = props
+    if (unstyled) return restProps
+    if (isConfigRecipe) return { ...restProps, className: cx(slotStyles, restProps.className) }
+    return { ...restProps, className: cx(css(slotStyles), restProps.className) }
+  }
+
+  const resolveSlots = (variantProps) => {
+    const styles = isConfigRecipe ? slotRecipeFn(variantProps) : slotRecipeFn.raw(variantProps)
+    if (!isConfigRecipe) styles._classNameMap = slotRecipeFn.classNameMap
+    return styles
+  }
+
+  const withRootProvider = (Component, options) => {
+    const WithRootProvider = (props) => {
+      const [variantProps, otherProps] = slotRecipeFn.splitVariantProps(props)
+      const resolvedSlots = resolveSlots(variantProps)
+      const mergedProps = options?.defaultProps ? Object.assign({}, options.defaultProps, otherProps) : otherProps
+      return createElement(SlotStylesContext.Provider, {
+        value: resolvedSlots,
+        children: createElement(Component, mergedProps),
+      })
+    }
+    const componentName = getDisplayName(Component)
+    WithRootProvider.displayName = `withRootProvider(${componentName})`
+    return WithRootProvider
+  }
+
+  const withProvider = (Component, slot, options) => {
+    const StyledComponent = styled(Component, {}, options)
+    const WithProvider = forwardRef(function WithProvider(props, ref) {
+      const [variantProps, restProps] = slotRecipeFn.splitVariantProps(props)
+      const resolvedSlots = resolveSlots(variantProps)
+      if (restProps.className == null && options?.defaultProps?.className) restProps.className = options.defaultProps.className
+      const resolvedProps = resolveProps(restProps, resolvedSlots[slot])
+      options?.forwardProps?.forEach((key) => {
+        if (key in variantProps) resolvedProps[key] = variantProps[key]
+      })
+      return createElement(SlotStylesContext.Provider, {
+        value: resolvedSlots,
+        children: createElement(StyledComponent, {
+          ...resolvedProps,
+          className: cx(resolvedProps.className, resolvedSlots._classNameMap?.[slot]),
+          'data-slot': slot,
+          ref,
+        }),
+      })
+    })
+    const componentName = getDisplayName(Component)
+    WithProvider.displayName = `withProvider(${componentName})`
+    return WithProvider
+  }
+
+  const withContext = (Component, slot, options) => {
+    const StyledComponent = styled(Component, {}, options)
+    const componentName = getDisplayName(Component)
+    const WithContext = forwardRef(function WithContext(props, ref) {
+      const resolvedSlots = useSlotStylesContext(componentName, slot)
+      const nextProps = props.className == null && options?.defaultProps?.className
+        ? { ...props, className: options.defaultProps.className }
+        : props
+      const resolvedProps = resolveProps(nextProps, resolvedSlots[slot])
+      return createElement(StyledComponent, {
+        ...resolvedProps,
+        className: cx(resolvedProps.className, resolvedSlots._classNameMap?.[slot]),
+        'data-slot': slot,
+        ref,
+      })
+    })
+    WithContext.displayName = `withContext(${componentName})`
+    return WithContext
+  }
+
+  return {
+    withRootProvider,
+    withProvider,
+    withContext,
+  }
+}

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { DividerProperties } from '../patterns/divider';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof DividerProperties> {}
+export declare const Divider: FunctionComponent<DividerProps>;

package/styled-system/jsx/divider.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { divider } from '../patterns/divider';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) {
+  const [patternProps, restProps] = splitProps(props, divider.propKeys)
+  const styleProps = divider.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

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

@@ -0,0 +1,3 @@
+import type { Styled } from '../types/jsx';
+
+export declare const styled: Styled;

package/styled-system/jsx/factory.js

@@ -0,0 +1,91 @@
+import { createElement, forwardRef } from 'react';
+import { cx, cva } from '../css/index';
+import { composeCvaFn, composeShouldForwardProps, getDisplayName, serializeSplitStyles, splitJsxProps } from './helper';
+import { isCssProperty } from './is-valid-prop';
+
+function styledFn(BaseComponent, recipeOrConfig = {}, options = {}) {
+  const recipeFn = recipeOrConfig.__cva__ || recipeOrConfig.__recipe__ ? recipeOrConfig : cva(recipeOrConfig)
+  const composedRecipeFn = composeCvaFn(BaseComponent.__cva__, recipeFn)
+  const getRaw = composedRecipeFn.__memoizedRaw__ || composedRecipeFn.raw
+  const variantKeys = composedRecipeFn.variantKeys
+  const variantSet = new Set(variantKeys)
+  const forwardFn = options.shouldForwardProp || ((prop) => !variantSet.has(prop) && !isCssProperty(prop))
+  const forwardProps = options.forwardProps
+  const forwardPropSet = forwardProps?.length ? new Set(forwardProps) : void 0
+  const shouldForwardProp = forwardPropSet
+    ? (prop) => forwardPropSet.has(prop) || forwardFn(prop, variantKeys)
+    : (prop) => forwardFn(prop, variantKeys)
+
+  const dataProps = options.dataAttr && recipeOrConfig.__name__ ? { 'data-recipe': recipeOrConfig.__name__ } : {}
+  const defaultProps = Object.assign(dataProps, options.defaultProps)
+  const hasDefaultProps = Object.keys(defaultProps).length > 0
+
+  const shouldForward = composeShouldForwardProps(BaseComponent, shouldForwardProp)
+  const DefaultElement = BaseComponent.__base__ || BaseComponent
+
+  const StyledComponent = /* @__PURE__ */ forwardRef(function StyledComponent(props, ref) {
+    const Element = props.as === void 0 ? DefaultElement : props.as
+    const unstyled = props.unstyled
+    const children = props.children
+    let combinedProps = props
+    if (hasDefaultProps) {
+      const { as, unstyled, children, ...restProps } = props
+      combinedProps = Object.assign({}, defaultProps, restProps)
+    }
+    const [htmlProps, forwardedProps, variantProps, propStyles, cssStyles, elementProps] = splitJsxProps(
+      combinedProps,
+      shouldForward,
+      variantSet,
+      isCssProperty,
+    )
+    const hasStyles = propStyles || cssStyles !== void 0
+    let className
+    if (unstyled) {
+      className = cx(hasStyles && serializeSplitStyles(propStyles, cssStyles), combinedProps.className)
+    } else if (recipeOrConfig.__recipe__) {
+      const compoundVariantClasses = composedRecipeFn.__getCompoundVariantClasses__?.(variantProps)
+      className = cx(
+        composedRecipeFn(variantProps, false),
+        compoundVariantClasses,
+        hasStyles && serializeSplitStyles(propStyles, cssStyles),
+        combinedProps.className,
+      )
+    } else {
+      className = cx(
+        hasStyles ? serializeSplitStyles(propStyles, cssStyles, getRaw(variantProps)) : composedRecipeFn(variantProps),
+        combinedProps.className,
+      )
+    }
+
+    return createElement(Element, {
+      ref,
+      ...forwardedProps,
+      ...elementProps,
+      ...htmlProps,
+      className,
+    }, children ?? combinedProps.children)
+  })
+
+  const name = getDisplayName(DefaultElement)
+  StyledComponent.displayName = `styled.${name}`
+  StyledComponent.__cva__ = composedRecipeFn
+  StyledComponent.__base__ = DefaultElement
+  StyledComponent.__shouldForwardProps__ = shouldForwardProp
+
+  return StyledComponent
+}
+
+function createJsxFactory() {
+  const cache = new Map()
+  return new Proxy(styledFn, {
+    apply(_, __, args) {
+      return styledFn(...args)
+    },
+    get(_, el) {
+      if (!cache.has(el)) cache.set(el, styledFn(el))
+      return cache.get(el)
+    },
+  })
+}
+
+export const styled = /* @__PURE__ */ createJsxFactory()

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { FlexProperties } from '../patterns/flex';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface FlexProps extends FlexProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FlexProperties> {}
+export declare const Flex: FunctionComponent<FlexProps>;

package/styled-system/jsx/flex.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { flex } from '../patterns/flex';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) {
+  const [patternProps, restProps] = splitProps(props, flex.propKeys)
+  const styleProps = flex.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { FloatProperties } from '../patterns/float';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface FloatProps extends FloatProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FloatProperties> {}
+export declare const Float: FunctionComponent<FloatProps>;

package/styled-system/jsx/float.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { float } from '../patterns/float';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) {
+  const [patternProps, restProps] = splitProps(props, float.propKeys)
+  const styleProps = float.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

package/styled-system/jsx/grid-item.d.ts

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { GridItemProperties } from '../patterns/grid-item';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface GridItemProps extends GridItemProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof GridItemProperties> {}
+export declare const GridItem: FunctionComponent<GridItemProps>;

package/styled-system/jsx/grid-item.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { gridItem } from '../patterns/grid-item';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) {
+  const [patternProps, restProps] = splitProps(props, gridItem.propKeys)
+  const styleProps = gridItem.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { GridProperties } from '../patterns/grid';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface GridProps extends GridProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof GridProperties> {}
+export declare const Grid: FunctionComponent<GridProps>;

package/styled-system/jsx/grid.js

@@ -0,0 +1,11 @@
+import { createElement, forwardRef } from 'react';
+import { grid } from '../patterns/grid';
+import { splitProps } from '../helpers';
+import { styled } from './factory';
+
+export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) {
+  const [patternProps, restProps] = splitProps(props, grid.propKeys)
+  const styleProps = grid.raw(patternProps)
+  const mergedProps = { ref, ...restProps, css: styleProps }
+  return createElement(styled["div"], mergedProps)
+})

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

@@ -0,0 +1,34 @@
+import type { RecipeCreatorFn } from '../types/recipe';
+import type { SystemStyleObject } from '../types/system';
+
+type Props = Record<string, unknown>;
+export type ShouldForwardProp = (prop: string, variantKeys?: string[]) => boolean;
+/** A `cva` or config recipe function, as the JSX runtime reads it. */
+export interface JsxRecipeFn {
+  (props?: Props, withCompoundVariants?: boolean): string;
+  raw(props?: Props): SystemStyleObject;
+  merge(other: JsxRecipeFn, cvaFn: RecipeCreatorFn): JsxRecipeFn;
+  variantKeys: string[];
+  __cva__?: boolean;
+  __recipe__?: boolean;
+  __name__?: string;
+  __memoizedRaw__?: (props?: Props) => SystemStyleObject;
+  __getCompoundVariantClasses__?: (props: Props) => string;
+}
+/** Markers the factory sets on the components it creates. */
+export interface StyledMarkers {
+  __cva__?: JsxRecipeFn;
+  __base__?: unknown;
+  __shouldForwardProps__?: ShouldForwardProp;
+}
+export declare const composeShouldForwardProps: (tag: StyledMarkers, shouldForwardProp: ShouldForwardProp) => ShouldForwardProp;
+export declare const composeCvaFn: (cvaA: JsxRecipeFn | undefined, cvaB: JsxRecipeFn) => JsxRecipeFn;
+export declare const getDisplayName: (Component: string | {
+  displayName?: string;
+  name?: string;
+} | undefined) => string;
+export type SplitJsxProps = [htmlProps: Props | undefined, forwardedProps: Props | undefined, variantProps: Props, propStyles: SystemStyleObject | undefined, cssStyles: SystemStyleObject | undefined, elementProps: Props | undefined];
+export declare function splitJsxProps(props: Props, shouldForwardProp: (prop: string) => boolean, variantSet: Set<string>, isCssProperty: (prop: string) => boolean, skipClass?: boolean): SplitJsxProps;
+export declare function serializeSplitStyles(propStyles: SystemStyleObject | undefined, cssStyles: SystemStyleObject | undefined, baseStyles?: SystemStyleObject): string;
+export declare function splitStyleProps(styleProps: Props): [propStyles: SystemStyleObject | undefined, cssStyles: SystemStyleObject | undefined];
+export {};

package/styled-system/jsx/helper.js

@@ -0,0 +1,83 @@
+import { css, cva } from '../css/index';
+
+export const composeShouldForwardProps = (tag, shouldForwardProp) => {
+  if (!tag.__shouldForwardProps__ || !shouldForwardProp) return shouldForwardProp
+  return (prop) => tag.__shouldForwardProps__(prop) && shouldForwardProp(prop)
+}
+
+export const composeCvaFn = (cvaA, cvaB) => {
+  if (cvaA && !cvaB) return cvaA
+  if (!cvaA && cvaB) return cvaB
+  if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB, cva)
+  const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
+  TypeError.captureStackTrace?.(error)
+  throw error
+}
+
+export const getDisplayName = (Component) => {
+  if (typeof Component === 'string') return Component
+  return Component?.displayName || Component?.name || 'Component'
+}
+
+const htmlPropsMap = {
+  htmlWidth: 'width',
+  htmlHeight: 'height',
+  htmlTranslate: 'translate',
+  htmlContent: 'content',
+}
+const hasOwn = Object.prototype.hasOwnProperty
+
+export function splitJsxProps(props, shouldForwardProp, variantSet, isCssProperty, skipClass) {
+  let htmlProps
+  let forwardedProps
+  let variantProps
+  let propStyles
+  let cssStyles
+  let elementProps
+  const keys = Object.keys(props)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const value = props[key]
+    if (value === void 0) continue
+    if (key === 'className' || (skipClass && key === 'class') || key === 'as' || key === 'unstyled' || key === 'children') continue
+    if (hasOwn.call(htmlPropsMap, key)) {
+      htmlProps ||= Object.create(null)
+      htmlProps[htmlPropsMap[key]] = value
+    } else if (shouldForwardProp(key)) {
+      forwardedProps ||= Object.create(null)
+      forwardedProps[key] = value
+    } else if (variantSet.has(key)) {
+      variantProps ||= Object.create(null)
+      variantProps[key] = value
+    } else if (key === 'css') {
+      cssStyles = value
+    } else if (isCssProperty(key)) {
+      (propStyles ||= {})[key] = value
+    } else {
+      elementProps ||= Object.create(null)
+      elementProps[key] = value
+    }
+  }
+  return [htmlProps, forwardedProps, variantProps || {}, propStyles, cssStyles, elementProps]
+}
+
+export function serializeSplitStyles(propStyles, cssStyles, baseStyles) {
+  if (baseStyles !== void 0) {
+    return propStyles ? cssStyles !== void 0 ? css(baseStyles, propStyles, cssStyles) : css(baseStyles, propStyles) : css(baseStyles, cssStyles)
+  }
+  return propStyles ? cssStyles !== void 0 ? css(propStyles, cssStyles) : css(propStyles) : css(cssStyles)
+}
+
+export function splitStyleProps(styleProps) {
+  let propStyles
+  let cssStyles
+  const keys = Object.keys(styleProps)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const value = styleProps[key]
+    if (value === void 0) continue
+    if (key === 'css') cssStyles = value
+    else (propStyles ||= {})[key] = value
+  }
+  return [propStyles, cssStyles]
+}

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

@@ -0,0 +1,7 @@
+import type { FunctionComponent } from 'react';
+import type { HstackProperties } from '../patterns/hstack';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system';
+
+export interface HstackProps extends HstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof HstackProperties> {}
+export declare const HStack: FunctionComponent<HstackProps>;