@pyck/styled-system 0.0.1

package/dist/jsx/bleed.mjs

@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from 'react'
+
+import { splitProps } from '../helpers.mjs';
+import { getBleedStyle } from '../patterns/bleed.mjs';
+import { styled } from './factory.mjs';
+
+export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["inline","block"])
+
+const styleProps = getBleedStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(styled.div, mergedProps)
+  })

package/dist/jsx/box.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { BoxProperties } from '../patterns/box';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface BoxProps extends BoxProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof BoxProperties > {}
+
+
+export declare const Box: FunctionComponent<BoxProps>

package/dist/jsx/box.mjs

@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from 'react'
+
+import { splitProps } from '../helpers.mjs';
+import { getBoxStyle } from '../patterns/box.mjs';
+import { styled } from './factory.mjs';
+
+export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) {
+  const [patternProps, restProps] = splitProps(props, [])
+
+const styleProps = getBoxStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(styled.div, mergedProps)
+  })

package/dist/jsx/center.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import type { FunctionComponent } from 'react'
+import type { CenterProperties } from '../patterns/center';
+import type { HTMLStyledProps } from '../types/jsx';
+import type { DistributiveOmit } from '../types/system-types';
+
+export interface CenterProps extends CenterProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof CenterProperties > {}
+
+
+export declare const Center: FunctionComponent<CenterProps>

package/dist/jsx/center.mjs

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

package/dist/jsx/circle.d.ts

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

package/dist/jsx/circle.mjs

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

package/dist/jsx/container.d.ts

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

package/dist/jsx/container.mjs

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

package/dist/jsx/cq.d.ts

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

package/dist/jsx/cq.mjs

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

package/dist/jsx/create-style-context.d.ts

@@ -0,0 +1,54 @@
+/* eslint-disable */
+import type { SlotRecipeRuntimeFn, RecipeVariantProps } from '../types/recipe';
+import type { JsxHTMLProps, JsxStyleProps, Assign } from '../types/system-types';
+import type { JsxFactoryOptions, ComponentProps, DataAttrs, AsProps } from '../types/jsx';
+import type { ComponentType, ElementType } from 'react'
+
+interface UnstyledProps {
+  unstyled?: boolean | undefined
+}
+
+type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
+interface SlotRecipeFn {
+  __type: any
+  __slot: string
+  (props?: any): any
+}
+type SlotRecipe = SvaFn | SlotRecipeFn
+
+type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
+
+interface WithProviderOptions<P = {}> {
+  defaultProps?: (Partial<P> & DataAttrs) | undefined
+}
+
+type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+>
+
+type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
+  ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
+>
+
+type StyleContextConsumer<T extends ElementType> = ComponentType<
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
+>
+
+export interface StyleContext<R extends SlotRecipe> {
+  withRootProvider: <T extends ElementType>(
+    Component: T,
+    options?: WithProviderOptions<ComponentProps<T>> | undefined
+  ) => StyleContextRootProvider<T, R>
+  withProvider: <T extends ElementType>(
+    Component: T,
+    slot: InferSlot<R>,
+    options?: JsxFactoryOptions<ComponentProps<T>> | undefined
+  ) => StyleContextProvider<T, R>
+  withContext: <T extends ElementType>(
+    Component: T,
+    slot: InferSlot<R>,
+    options?: JsxFactoryOptions<ComponentProps<T>> | undefined
+  ) => StyleContextConsumer<T>
+}
+
+export declare function createStyleContext<R extends SlotRecipe>(recipe: R): StyleContext<R>

package/dist/jsx/create-style-context.mjs

@@ -0,0 +1,118 @@
+'use client'
+
+import { cx, css, sva } from '../css/index.mjs';
+import { styled } from './factory.mjs';
+import { getDisplayName } from './factory-helper.mjs';
+import { createContext, useContext, createElement, forwardRef } from 'react'
+
+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]
+}
+
+export function createStyleContext(recipe) {
+  const isConfigRecipe = '__recipe__' in recipe
+  const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+  const contextName = recipeName ? `createStyleContext("${recipeName}")` : 'createStyleContext'
+  
+  const [StyleContext, useStyleContext] = createSafeContext(contextName)
+  const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
+
+  const getResolvedProps = (props, slotStyles) => {
+    const { unstyled, ...restProps } = props
+    if (unstyled) return restProps
+    if (isConfigRecipe) {
+       return { ...restProps, className: cx(slotStyles, restProps.className) }
+    }
+    return { ...slotStyles, ...restProps }
+  }
+
+  const withRootProvider = (Component, options) => {
+    const WithRootProvider = (props) => {
+      const [variantProps, otherProps] = svaFn.splitVariantProps(props)
+      
+      const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
+      slotStyles._classNameMap = svaFn.classNameMap
+
+      const mergedProps = options?.defaultProps 
+        ? { ...options.defaultProps, ...otherProps } 
+        : otherProps
+
+      return createElement(StyleContext.Provider, {
+        value: slotStyles,
+        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((props, ref) => {
+      const [variantProps, restProps] = svaFn.splitVariantProps(props)
+      
+      const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
+      slotStyles._classNameMap = svaFn.classNameMap
+
+      const propsWithClass = { ...restProps, className: restProps.className ?? options?.defaultProps?.className }
+      const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
+      return createElement(StyleContext.Provider, {
+        value: slotStyles,
+        children: createElement(StyledComponent, {
+          ...resolvedProps,
+          className: cx(resolvedProps.className, slotStyles._classNameMap[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((props, ref) => {
+      const slotStyles = useStyleContext(componentName, slot)
+
+      const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
+      const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
+      return createElement(StyledComponent, {
+        ...resolvedProps,
+        className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
+        ref,
+      })
+    })
+    
+    WithContext.displayName = `withContext(${componentName})`
+    
+    return WithContext
+  }
+
+  return {
+    withRootProvider,
+    withProvider,
+    withContext,
+  }
+}

package/dist/jsx/divider.d.ts

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

package/dist/jsx/divider.mjs

@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from 'react'
+
+import { splitProps } from '../helpers.mjs';
+import { getDividerStyle } from '../patterns/divider.mjs';
+import { styled } from './factory.mjs';
+
+export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["orientation","thickness","color"])
+
+const styleProps = getDividerStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(styled.div, mergedProps)
+  })

package/dist/jsx/factory-helper.mjs

@@ -0,0 +1,22 @@
+import { isCssProperty } from './is-valid-prop.mjs';
+
+export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+
+export const composeShouldForwardProps = (tag, shouldForwardProp) =>
+  tag.__shouldForwardProps__ && shouldForwardProp
+    ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
+    : shouldForwardProp
+
+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)
+  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'
+}

package/dist/jsx/factory.d.ts

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

package/dist/jsx/factory.mjs

@@ -0,0 +1,89 @@
+import { createElement, forwardRef, useMemo } from 'react'
+import { css, cx, cva } from '../css/index.mjs';
+import { defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName } from './factory-helper.mjs';
+import { splitProps, normalizeHTMLProps } from '../helpers.mjs';
+import { isCssProperty } from './is-valid-prop.mjs';
+
+function styledFn(Dynamic, configOrCva = {}, options = {}) {
+  const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
+
+  const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
+  const shouldForwardProp = (prop) => {
+    if (options.forwardProps?.includes(prop)) return true
+    return forwardFn(prop, cvaFn.variantKeys)
+  }
+  
+  const defaultProps = Object.assign(
+    options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
+    options.defaultProps,
+  )
+
+  const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
+  const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+  const __base__ = Dynamic.__base__ || Dynamic
+
+  const StyledComponent = /* @__PURE__ */ forwardRef(function StyledComponent(props, ref) {
+    const { as: Element = __base__, unstyled, children, ...restProps } = props
+
+    const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
+
+    const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
+      return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
+    }, [combinedProps])
+
+    function recipeClass() {
+      const { css: cssStyles, ...propStyles } = styleProps
+      const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
+      return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
+    }
+
+    function cvaClass() {
+      const { css: cssStyles, ...propStyles } = styleProps
+      const cvaStyles = __cvaFn__.raw(variantProps)
+      return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
+    }
+
+    const classes = () => {
+      if (unstyled) {
+        const { css: cssStyles, ...propStyles } = styleProps
+        return cx(css(propStyles, cssStyles), combinedProps.className)
+      }
+      return configOrCva.__recipe__ ? recipeClass() : cvaClass()
+    }
+
+    return createElement(Element, {
+      ref,
+      ...forwardedProps,
+      ...elementProps,
+      ...normalizeHTMLProps(htmlProps),
+      className: classes(),
+    }, children ?? combinedProps.children)
+  })
+
+  const name = getDisplayName(__base__)
+
+  StyledComponent.displayName = `styled.${name}`
+  StyledComponent.__cva__ = __cvaFn__
+  StyledComponent.__base__ = __base__
+  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/dist/jsx/flex.d.ts

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

package/dist/jsx/flex.mjs

@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from 'react'
+
+import { splitProps } from '../helpers.mjs';
+import { getFlexStyle } from '../patterns/flex.mjs';
+import { styled } from './factory.mjs';
+
+export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["align","justify","direction","wrap","basis","grow","shrink"])
+
+const styleProps = getFlexStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(styled.div, mergedProps)
+  })

package/dist/jsx/float.d.ts

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

package/dist/jsx/float.mjs

@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from 'react'
+
+import { splitProps } from '../helpers.mjs';
+import { getFloatStyle } from '../patterns/float.mjs';
+import { styled } from './factory.mjs';
+
+export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["offsetX","offsetY","offset","placement"])
+
+const styleProps = getFloatStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(styled.div, mergedProps)
+  })

package/dist/jsx/grid-item.d.ts

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

package/dist/jsx/grid-item.mjs

@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from 'react'
+
+import { splitProps } from '../helpers.mjs';
+import { getGridItemStyle } from '../patterns/grid-item.mjs';
+import { styled } from './factory.mjs';
+
+export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["colSpan","rowSpan","colStart","rowStart","colEnd","rowEnd"])
+
+const styleProps = getGridItemStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(styled.div, mergedProps)
+  })

package/dist/jsx/grid.d.ts

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

package/dist/jsx/grid.mjs

@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from 'react'
+
+import { splitProps } from '../helpers.mjs';
+import { getGridStyle } from '../patterns/grid.mjs';
+import { styled } from './factory.mjs';
+
+export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["gap","columnGap","rowGap","columns","minChildWidth"])
+
+const styleProps = getGridStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(styled.div, mergedProps)
+  })

package/dist/jsx/hstack.d.ts

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

package/dist/jsx/hstack.mjs

@@ -0,0 +1,14 @@
+import { createElement, forwardRef } from 'react'
+
+import { splitProps } from '../helpers.mjs';
+import { getHstackStyle } from '../patterns/hstack.mjs';
+import { styled } from './factory.mjs';
+
+export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
+  const [patternProps, restProps] = splitProps(props, ["justify","gap"])
+
+const styleProps = getHstackStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(styled.div, mergedProps)
+  })

package/dist/jsx/index.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+export * from './factory';
+export * from './is-valid-prop';
+export * from './create-style-context';
+export * from './box';
+export * from './flex';
+export * from './stack';
+export * from './vstack';
+export * from './hstack';
+export * from './spacer';
+export * from './square';
+export * from './circle';
+export * from './center';
+export * from './link-overlay';
+export * from './aspect-ratio';
+export * from './grid';
+export * from './grid-item';
+export * from './wrap';
+export * from './container';
+export * from './divider';
+export * from './float';
+export * from './bleed';
+export * from './visually-hidden';
+export * from './cq';
+export type { HTMLStyledProps, StyledComponent } from '../types/jsx';

package/dist/jsx/index.mjs

@@ -0,0 +1,23 @@
+export * from './factory.mjs';
+export * from './is-valid-prop.mjs';
+export * from './create-style-context.mjs';
+export * from './box.mjs';
+export * from './flex.mjs';
+export * from './stack.mjs';
+export * from './vstack.mjs';
+export * from './hstack.mjs';
+export * from './spacer.mjs';
+export * from './square.mjs';
+export * from './circle.mjs';
+export * from './center.mjs';
+export * from './link-overlay.mjs';
+export * from './aspect-ratio.mjs';
+export * from './grid.mjs';
+export * from './grid-item.mjs';
+export * from './wrap.mjs';
+export * from './container.mjs';
+export * from './divider.mjs';
+export * from './float.mjs';
+export * from './bleed.mjs';
+export * from './visually-hidden.mjs';
+export * from './cq.mjs';