@pandacss/studio 0.0.0-dev-20230613163214

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { SpacerProperties } from '../patterns/spacer'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type SpacerProps = SpacerProperties & Omit<HTMLPandaProps<'div'>, keyof SpacerProperties >
+
+
+export declare const Spacer: FunctionComponent<SpacerProps>

package/styled-system/jsx/spacer.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getSpacerStyle } from '../patterns/spacer.mjs'
+
+export const Spacer = forwardRef(function Spacer(props, ref) {
+  const { size, ...restProps } = props
+  const styleProps = getSpacerStyle({ size })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { SquareProperties } from '../patterns/square'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type SquareProps = SquareProperties & Omit<HTMLPandaProps<'div'>, keyof SquareProperties >
+
+
+export declare const Square: FunctionComponent<SquareProps>

package/styled-system/jsx/square.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getSquareStyle } from '../patterns/square.mjs'
+
+export const Square = forwardRef(function Square(props, ref) {
+  const { size, ...restProps } = props
+  const styleProps = getSquareStyle({ size })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { StackProperties } from '../patterns/stack'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type StackProps = StackProperties & Omit<HTMLPandaProps<'div'>, keyof StackProperties >
+
+
+export declare const Stack: FunctionComponent<StackProps>

package/styled-system/jsx/stack.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getStackStyle } from '../patterns/stack.mjs'
+
+export const Stack = forwardRef(function Stack(props, ref) {
+  const { align, justify, direction, gap, ...restProps } = props
+  const styleProps = getStackStyle({ align, justify, direction, gap })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { StyledLinkProperties } from '../patterns/styled-link'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type StyledLinkProps = StyledLinkProperties & Omit<HTMLPandaProps<'div'>, keyof StyledLinkProperties >
+
+
+export declare const StyledLink: FunctionComponent<StyledLinkProps>

package/styled-system/jsx/styled-link.mjs

@@ -0,0 +1,8 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getStyledLinkStyle } from '../patterns/styled-link.mjs'
+
+export const StyledLink = forwardRef(function StyledLink(props, ref) {
+  const styleProps = getStyledLinkStyle()
+  return createElement(panda.div, { ref, ...styleProps, ...props })
+})

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { VstackProperties } from '../patterns/vstack'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type VstackProps = VstackProperties & Omit<HTMLPandaProps<'div'>, keyof VstackProperties >
+
+
+export declare const VStack: FunctionComponent<VstackProps>

package/styled-system/jsx/vstack.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getVstackStyle } from '../patterns/vstack.mjs'
+
+export const VStack = forwardRef(function VStack(props, ref) {
+  const { justify, gap, ...restProps } = props
+  const styleProps = getVstackStyle({ justify, gap })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { WrapProperties } from '../patterns/wrap'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type WrapProps = WrapProperties & Omit<HTMLPandaProps<'div'>, keyof WrapProperties >
+
+
+export declare const Wrap: FunctionComponent<WrapProps>

package/styled-system/jsx/wrap.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getWrapStyle } from '../patterns/wrap.mjs'
+
+export const Wrap = forwardRef(function Wrap(props, ref) {
+  const { gap, rowGap, columnGap, align, justify, ...restProps } = props
+  const styleProps = getWrapStyle({ gap, rowGap, columnGap, align, justify })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/patterns/absolute-center.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type AbsoluteCenterProperties = {
+   axis?: ConditionalValue<"x" | "y" | "both">
+}
+
+
+type AbsoluteCenterOptions = AbsoluteCenterProperties & Omit<SystemStyleObject, keyof AbsoluteCenterProperties >
+
+
+export declare function absoluteCenter(options?: AbsoluteCenterOptions): string

package/styled-system/patterns/absolute-center.mjs

@@ -0,0 +1,23 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const absoluteCenterConfig = {
+  transform(props, { map }) {
+    const { axis = 'both', ...rest } = props
+    return {
+      position: 'absolute',
+      insetBlockStart: map(axis, (v) => (v === 'x' ? 'auto' : '50%')),
+      insetInlineStart: map(axis, (v) => (v === 'y' ? 'auto' : '50%')),
+      transform: map(axis, (v) =>
+        v === 'both' ? 'translate(-50%, -50%)' : v === 'x' ? 'translateX(-50%)' : 'translateY(-50%)',
+      ),
+      maxWidth: '100%',
+      maxHeight: '100%',
+      ...rest,
+    }
+  },
+}
+
+export const getAbsoluteCenterStyle = (styles = {}) => absoluteCenterConfig.transform(styles, { map: mapObject })
+
+export const absoluteCenter = (styles) => css(getAbsoluteCenterStyle(styles))

package/styled-system/patterns/aspect-ratio.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type AspectRatioProperties = {
+   ratio?: ConditionalValue<number>
+}
+
+
+type AspectRatioOptions = AspectRatioProperties & Omit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'>
+
+
+export declare function aspectRatio(options?: AspectRatioOptions): string

package/styled-system/patterns/aspect-ratio.mjs

@@ -0,0 +1,25 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const aspectRatioConfig = {
+  transform(props) {
+    const { ratio, ...rest } = props
+    return {
+      aspectRatio: ratio,
+      overflow: 'hidden',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      '&>img, &>video': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover',
+      },
+      ...rest,
+    }
+  },
+}
+
+export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
+
+export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))

package/styled-system/patterns/box.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type BoxProperties = {
+   
+}
+
+
+type BoxOptions = BoxProperties & Omit<SystemStyleObject, keyof BoxProperties >
+
+
+export declare function box(options?: BoxOptions): string

package/styled-system/patterns/box.mjs

@@ -0,0 +1,12 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const boxConfig = {
+  transform(props) {
+    return props
+  },
+}
+
+export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
+
+export const box = (styles) => css(getBoxStyle(styles))

package/styled-system/patterns/center.d.ts

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type CenterProperties = {
+   inline?: ConditionalValue<boolean>
+}
+
+
+type CenterOptions = CenterProperties & Omit<SystemStyleObject, keyof CenterProperties >
+
+
+export declare function center(options?: CenterOptions): string

package/styled-system/patterns/center.mjs

@@ -0,0 +1,18 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const centerConfig = {
+  transform(props) {
+    const { inline, ...rest } = props
+    return {
+      display: inline ? 'inline-flex' : 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...rest,
+    }
+  },
+}
+
+export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
+
+export const center = (styles) => css(getCenterStyle(styles))

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

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type CircleProperties = {
+   size?: PropertyValue<'width'>
+}
+
+
+type CircleOptions = CircleProperties & Omit<SystemStyleObject, keyof CircleProperties >
+
+
+export declare function circle(options?: CircleOptions): string

package/styled-system/patterns/circle.mjs

@@ -0,0 +1,22 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const circleConfig = {
+  transform(props) {
+    const { size, ...rest } = props
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flex: '0 0 auto',
+      width: size,
+      height: size,
+      borderRadius: '9999px',
+      ...rest,
+    }
+  },
+}
+
+export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
+
+export const circle = (styles) => css(getCircleStyle(styles))

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

@@ -0,0 +1,14 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type ContainerProperties = {
+   
+}
+
+
+type ContainerOptions = ContainerProperties & Omit<SystemStyleObject, keyof ContainerProperties >
+
+
+export declare function container(options?: ContainerOptions): string

package/styled-system/patterns/container.mjs

@@ -0,0 +1,18 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const containerConfig = {
+  transform(props) {
+    return {
+      position: 'relative',
+      maxWidth: '8xl',
+      mx: 'auto',
+      px: { base: '4', md: '6', lg: '8' },
+      ...props,
+    }
+  },
+}
+
+export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
+
+export const container = (styles) => css(getContainerStyle(styles))

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

@@ -0,0 +1,16 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type DividerProperties = {
+   orientation?: ConditionalValue<"horizontal" | "vertical">
+	thickness?: ConditionalValue<Tokens["sizes"] | Properties["borderWidth"]>
+	color?: ConditionalValue<Tokens["colors"] | Properties["borderColor"]>
+}
+
+
+type DividerOptions = DividerProperties & Omit<SystemStyleObject, keyof DividerProperties >
+
+
+export declare function divider(options?: DividerOptions): string

package/styled-system/patterns/divider.mjs

@@ -0,0 +1,21 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const dividerConfig = {
+  transform(props, { map }) {
+    const { orientation = 'horizontal', thickness = '1px', color, ...rest } = props
+    return {
+      '--thickness': thickness,
+      width: map(orientation, (v) => (v === 'vertical' ? void 0 : '100%')),
+      height: map(orientation, (v) => (v === 'horizontal' ? void 0 : '100%')),
+      borderInlineStartWidth: map(orientation, (v) => (v === 'horizontal' ? 'var(--thickness)' : void 0)),
+      borderInlineEndWidth: map(orientation, (v) => (v === 'vertical' ? 'var(--thickness)' : void 0)),
+      borderColor: color,
+      ...rest,
+    }
+  },
+}
+
+export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
+
+export const divider = (styles) => css(getDividerStyle(styles))

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

@@ -0,0 +1,20 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type FlexProperties = {
+   align?: PropertyValue<'alignItems'>
+	justify?: PropertyValue<'justifyContent'>
+	direction?: PropertyValue<'flexDirection'>
+	wrap?: PropertyValue<'flexWrap'>
+	basis?: PropertyValue<'flexBasis'>
+	grow?: PropertyValue<'flexGrow'>
+	shrink?: PropertyValue<'flexShrink'>
+}
+
+
+type FlexOptions = FlexProperties & Omit<SystemStyleObject, keyof FlexProperties >
+
+
+export declare function flex(options?: FlexOptions): string

package/styled-system/patterns/flex.mjs

@@ -0,0 +1,23 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const flexConfig = {
+  transform(props) {
+    const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props
+    return {
+      display: 'flex',
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      flexWrap: wrap2,
+      flexBasis: basis,
+      flexGrow: grow,
+      flexShrink: shrink,
+      ...rest,
+    }
+  },
+}
+
+export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject })
+
+export const flex = (styles) => css(getFlexStyle(styles))

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

@@ -0,0 +1,17 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type FloatProperties = {
+   offsetX?: ConditionalValue<Tokens["spacing"] | Properties["left"]>
+	offsetY?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
+	offset?: ConditionalValue<Tokens["spacing"] | Properties["top"]>
+	placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start">
+}
+
+
+type FloatOptions = FloatProperties & Omit<SystemStyleObject, keyof FloatProperties >
+
+
+export declare function float(options?: FloatOptions): string

package/styled-system/patterns/float.mjs

@@ -0,0 +1,45 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const floatConfig = {
+  transform(props, { map }) {
+    const { offset = '0', offsetX = offset, offsetY = offset, placement = 'top-end', ...rest } = props
+    return {
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+      insetBlockStart: map(placement, (v) => {
+        const [side] = v.split('-')
+        const map2 = { top: offsetY, middle: '50%', bottom: 'auto' }
+        return map2[side]
+      }),
+      insetBlockEnd: map(placement, (v) => {
+        const [side] = v.split('-')
+        const map2 = { top: 'auto', middle: '50%', bottom: offsetY }
+        return map2[side]
+      }),
+      insetInlineStart: map(placement, (v) => {
+        const [, align] = v.split('-')
+        const map2 = { start: offsetX, center: '50%', end: 'auto' }
+        return map2[align]
+      }),
+      insetInlineEnd: map(placement, (v) => {
+        const [, align] = v.split('-')
+        const map2 = { start: 'auto', center: '50%', end: offsetX }
+        return map2[align]
+      }),
+      translate: map(placement, (v) => {
+        const [side, align] = v.split('-')
+        const mapX = { start: '-50%', center: '-50%', end: '50%' }
+        const mapY = { top: '-50%', middle: '-50%', bottom: '50%' }
+        return `${mapX[align]} ${mapY[side]}`
+      }),
+      ...rest,
+    }
+  },
+}
+
+export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
+
+export const float = (styles) => css(getFloatStyle(styles))

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

@@ -0,0 +1,19 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type GridItemProperties = {
+   colSpan?: ConditionalValue<number>
+	rowSpan?: ConditionalValue<number>
+	colStart?: ConditionalValue<number>
+	rowStart?: ConditionalValue<number>
+	colEnd?: ConditionalValue<number>
+	rowEnd?: ConditionalValue<number>
+}
+
+
+type GridItemOptions = GridItemProperties & Omit<SystemStyleObject, keyof GridItemProperties >
+
+
+export declare function gridItem(options?: GridItemOptions): string

package/styled-system/patterns/grid-item.mjs

@@ -0,0 +1,20 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const gridItemConfig = {
+  transform(props, { map }) {
+    const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props
+    const spanFn = (v) => (v === 'auto' ? v : `span ${v}`)
+    return {
+      gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
+      gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,
+      gridColumnEnd: colEnd,
+      gridRowEnd: rowEnd,
+      ...rest,
+    }
+  },
+}
+
+export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject })
+
+export const gridItem = (styles) => css(getGridItemStyle(styles))

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

@@ -0,0 +1,18 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type GridProperties = {
+   gap?: PropertyValue<'gap'>
+	columnGap?: PropertyValue<'gap'>
+	rowGap?: PropertyValue<'gap'>
+	columns?: ConditionalValue<number>
+	minChildWidth?: ConditionalValue<Tokens["sizes"] | Properties["width"]>
+}
+
+
+type GridOptions = GridProperties & Omit<SystemStyleObject, keyof GridProperties >
+
+
+export declare function grid(options?: GridOptions): string

package/styled-system/patterns/grid.mjs

@@ -0,0 +1,25 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const gridConfig = {
+  transform(props, { map }) {
+    const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : '10px', columns, minChildWidth, ...rest } = props
+    return {
+      display: 'grid',
+      gridTemplateColumns:
+        columns != null
+          ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`)
+          : minChildWidth != null
+          ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${v}, 1fr))`)
+          : void 0,
+      gap,
+      columnGap,
+      rowGap,
+      ...rest,
+    }
+  },
+}
+
+export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
+
+export const grid = (styles) => css(getGridStyle(styles))

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

@@ -0,0 +1,15 @@
+import type { SystemStyleObject, ConditionalValue } from '../types'
+import type { PropertyValue } from '../types/prop-type'
+import type { Properties } from '../types/csstype'
+import type { Tokens } from '../tokens'
+
+export type HstackProperties = {
+   justify?: PropertyValue<'justifyContent'>
+	gap?: PropertyValue<'gap'>
+}
+
+
+type HstackOptions = HstackProperties & Omit<SystemStyleObject, keyof HstackProperties >
+
+
+export declare function hstack(options?: HstackOptions): string

package/styled-system/patterns/hstack.mjs

@@ -0,0 +1,20 @@
+import { mapObject } from '../helpers.mjs'
+import { css } from '../css/index.mjs'
+
+const hstackConfig = {
+  transform(props) {
+    const { justify, gap = '10px', ...rest } = props
+    return {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: justify,
+      gap,
+      flexDirection: 'row',
+      ...rest,
+    }
+  },
+}
+
+export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
+
+export const hstack = (styles) => css(getHstackStyle(styles))

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

@@ -0,0 +1,18 @@
+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 './absolute-center'
+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 './styled-link'