qstd 0.2.16 → 0.2.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/dist/block/drawer.d.ts.map +1 -1
  2. package/dist/block/test-types.d.ts.map +1 -1
  3. package/dist/react/index.cjs +40 -25
  4. package/dist/react/index.css +20 -10
  5. package/dist/react/index.js +40 -25
  6. package/package.json +22 -20
  7. package/styled-system/css/conditions.mjs +36 -0
  8. package/styled-system/css/css.d.ts +22 -0
  9. package/styled-system/css/css.mjs +45 -0
  10. package/styled-system/css/cva.d.ts +6 -0
  11. package/styled-system/css/cva.mjs +87 -0
  12. package/styled-system/css/cx.d.ts +5 -0
  13. package/styled-system/css/cx.mjs +15 -0
  14. package/styled-system/css/index.d.ts +5 -0
  15. package/styled-system/css/index.mjs +4 -0
  16. package/styled-system/css/sva.d.ts +4 -0
  17. package/styled-system/css/sva.mjs +46 -0
  18. package/styled-system/helpers.mjs +328 -0
  19. package/styled-system/jsx/aspect-ratio.d.ts +10 -0
  20. package/styled-system/jsx/aspect-ratio.mjs +14 -0
  21. package/styled-system/jsx/bleed.d.ts +10 -0
  22. package/styled-system/jsx/bleed.mjs +14 -0
  23. package/styled-system/jsx/box.d.ts +10 -0
  24. package/styled-system/jsx/box.mjs +14 -0
  25. package/styled-system/jsx/center.d.ts +10 -0
  26. package/styled-system/jsx/center.mjs +14 -0
  27. package/styled-system/jsx/circle.d.ts +10 -0
  28. package/styled-system/jsx/circle.mjs +14 -0
  29. package/styled-system/jsx/container.d.ts +10 -0
  30. package/styled-system/jsx/container.mjs +14 -0
  31. package/styled-system/jsx/cq.d.ts +10 -0
  32. package/styled-system/jsx/cq.mjs +14 -0
  33. package/styled-system/jsx/create-style-context.d.ts +54 -0
  34. package/styled-system/jsx/create-style-context.mjs +98 -0
  35. package/styled-system/jsx/divider.d.ts +10 -0
  36. package/styled-system/jsx/divider.mjs +14 -0
  37. package/styled-system/jsx/factory-helper.mjs +22 -0
  38. package/styled-system/jsx/factory.d.ts +3 -0
  39. package/styled-system/jsx/factory.mjs +89 -0
  40. package/styled-system/jsx/flex.d.ts +10 -0
  41. package/styled-system/jsx/flex.mjs +14 -0
  42. package/styled-system/jsx/float.d.ts +10 -0
  43. package/styled-system/jsx/float.mjs +14 -0
  44. package/styled-system/jsx/grid-item.d.ts +10 -0
  45. package/styled-system/jsx/grid-item.mjs +14 -0
  46. package/styled-system/jsx/grid.d.ts +10 -0
  47. package/styled-system/jsx/grid.mjs +14 -0
  48. package/styled-system/jsx/hstack.d.ts +10 -0
  49. package/styled-system/jsx/hstack.mjs +14 -0
  50. package/styled-system/jsx/index.d.ts +25 -0
  51. package/styled-system/jsx/index.mjs +23 -0
  52. package/styled-system/jsx/is-valid-prop.d.ts +11 -0
  53. package/styled-system/jsx/is-valid-prop.mjs +17 -0
  54. package/styled-system/jsx/link-overlay.d.ts +10 -0
  55. package/styled-system/jsx/link-overlay.mjs +14 -0
  56. package/styled-system/jsx/spacer.d.ts +10 -0
  57. package/styled-system/jsx/spacer.mjs +14 -0
  58. package/styled-system/jsx/square.d.ts +10 -0
  59. package/styled-system/jsx/square.mjs +14 -0
  60. package/styled-system/jsx/stack.d.ts +10 -0
  61. package/styled-system/jsx/stack.mjs +14 -0
  62. package/styled-system/jsx/visually-hidden.d.ts +10 -0
  63. package/styled-system/jsx/visually-hidden.mjs +14 -0
  64. package/styled-system/jsx/vstack.d.ts +10 -0
  65. package/styled-system/jsx/vstack.mjs +14 -0
  66. package/styled-system/jsx/wrap.d.ts +10 -0
  67. package/styled-system/jsx/wrap.mjs +14 -0
  68. package/styled-system/patterns/aspect-ratio.d.ts +20 -0
  69. package/styled-system/patterns/aspect-ratio.mjs +38 -0
  70. package/styled-system/patterns/bleed.d.ts +21 -0
  71. package/styled-system/patterns/bleed.mjs +24 -0
  72. package/styled-system/patterns/box.d.ts +20 -0
  73. package/styled-system/patterns/box.mjs +15 -0
  74. package/styled-system/patterns/center.d.ts +20 -0
  75. package/styled-system/patterns/center.mjs +21 -0
  76. package/styled-system/patterns/circle.d.ts +20 -0
  77. package/styled-system/patterns/circle.mjs +25 -0
  78. package/styled-system/patterns/container.d.ts +20 -0
  79. package/styled-system/patterns/container.mjs +21 -0
  80. package/styled-system/patterns/cq.d.ts +21 -0
  81. package/styled-system/patterns/cq.mjs +21 -0
  82. package/styled-system/patterns/divider.d.ts +22 -0
  83. package/styled-system/patterns/divider.mjs +25 -0
  84. package/styled-system/patterns/flex.d.ts +26 -0
  85. package/styled-system/patterns/flex.mjs +26 -0
  86. package/styled-system/patterns/float.d.ts +23 -0
  87. package/styled-system/patterns/float.mjs +52 -0
  88. package/styled-system/patterns/grid-item.d.ts +25 -0
  89. package/styled-system/patterns/grid-item.mjs +25 -0
  90. package/styled-system/patterns/grid.d.ts +24 -0
  91. package/styled-system/patterns/grid.mjs +27 -0
  92. package/styled-system/patterns/hstack.d.ts +21 -0
  93. package/styled-system/patterns/hstack.mjs +24 -0
  94. package/styled-system/patterns/index.d.ts +21 -0
  95. package/styled-system/patterns/index.mjs +20 -0
  96. package/styled-system/patterns/link-overlay.d.ts +20 -0
  97. package/styled-system/patterns/link-overlay.mjs +24 -0
  98. package/styled-system/patterns/spacer.d.ts +20 -0
  99. package/styled-system/patterns/spacer.mjs +21 -0
  100. package/styled-system/patterns/square.d.ts +20 -0
  101. package/styled-system/patterns/square.mjs +24 -0
  102. package/styled-system/patterns/stack.d.ts +23 -0
  103. package/styled-system/patterns/stack.mjs +24 -0
  104. package/styled-system/patterns/visually-hidden.d.ts +20 -0
  105. package/styled-system/patterns/visually-hidden.mjs +18 -0
  106. package/styled-system/patterns/vstack.d.ts +21 -0
  107. package/styled-system/patterns/vstack.mjs +24 -0
  108. package/styled-system/patterns/wrap.d.ts +24 -0
  109. package/styled-system/patterns/wrap.mjs +25 -0
  110. package/styled-system/styles.css +1749 -0
  111. package/styled-system/tokens/index.d.ts +9 -0
  112. package/styled-system/tokens/index.mjs +1976 -0
  113. package/styled-system/tokens/tokens.d.ts +60 -0
  114. package/styled-system/types/composition.d.ts +224 -0
  115. package/styled-system/types/conditions.d.ts +348 -0
  116. package/styled-system/types/csstype.d.ts +21298 -0
  117. package/styled-system/types/global.d.ts +20 -0
  118. package/styled-system/types/index.d.ts +8 -0
  119. package/styled-system/types/jsx.d.ts +67 -0
  120. package/styled-system/types/parts.d.ts +8 -0
  121. package/styled-system/types/pattern.d.ts +78 -0
  122. package/styled-system/types/prop-type.d.ts +277 -0
  123. package/styled-system/types/recipe.d.ts +181 -0
  124. package/styled-system/types/selectors.d.ts +59 -0
  125. package/styled-system/types/static-css.d.ts +56 -0
  126. package/styled-system/types/style-props.d.ts +7639 -0
  127. package/styled-system/types/system-types.d.ts +269 -0
@@ -0,0 +1,98 @@
1
+ 'use client'
2
+
3
+ import { cx, css, sva } from '../css/index.mjs';
4
+ import { styled } from './factory.mjs';
5
+ import { getDisplayName } from './factory-helper.mjs';
6
+ import { createContext, useContext, createElement, forwardRef } from 'react'
7
+
8
+ export function createStyleContext(recipe) {
9
+ const StyleContext = createContext({})
10
+ const isConfigRecipe = '__recipe__' in recipe
11
+ const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
12
+
13
+ const getResolvedProps = (props, slotStyles) => {
14
+ const { unstyled, ...restProps } = props
15
+ if (unstyled) return restProps
16
+ if (isConfigRecipe) {
17
+ return { ...restProps, className: cx(slotStyles, restProps.className) }
18
+ }
19
+ return { ...slotStyles, ...restProps }
20
+ }
21
+
22
+ const withRootProvider = (Component, options) => {
23
+ const WithRootProvider = (props) => {
24
+ const [variantProps, otherProps] = svaFn.splitVariantProps(props)
25
+
26
+ const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
27
+ slotStyles._classNameMap = svaFn.classNameMap
28
+
29
+ const mergedProps = options?.defaultProps
30
+ ? { ...options.defaultProps, ...otherProps }
31
+ : otherProps
32
+
33
+ return createElement(StyleContext.Provider, {
34
+ value: slotStyles,
35
+ children: createElement(Component, mergedProps)
36
+ })
37
+ }
38
+
39
+ const componentName = getDisplayName(Component)
40
+ WithRootProvider.displayName = `withRootProvider(${componentName})`
41
+
42
+ return WithRootProvider
43
+ }
44
+
45
+ const withProvider = (Component, slot, options) => {
46
+ const StyledComponent = styled(Component, {}, options)
47
+
48
+ const WithProvider = forwardRef((props, ref) => {
49
+ const [variantProps, restProps] = svaFn.splitVariantProps(props)
50
+
51
+ const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
52
+ slotStyles._classNameMap = svaFn.classNameMap
53
+
54
+ const propsWithClass = { ...restProps, className: restProps.className ?? options?.defaultProps?.className }
55
+ const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
56
+ return createElement(StyleContext.Provider, {
57
+ value: slotStyles,
58
+ children: createElement(StyledComponent, {
59
+ ...resolvedProps,
60
+ className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
61
+ ref,
62
+ })
63
+ })
64
+ })
65
+
66
+ const componentName = getDisplayName(Component)
67
+ WithProvider.displayName = `withProvider(${componentName})`
68
+
69
+ return WithProvider
70
+ }
71
+
72
+ const withContext = (Component, slot, options) => {
73
+ const StyledComponent = styled(Component, {}, options)
74
+
75
+ const WithContext = forwardRef((props, ref) => {
76
+ const slotStyles = useContext(StyleContext)
77
+
78
+ const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
79
+ const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
80
+ return createElement(StyledComponent, {
81
+ ...resolvedProps,
82
+ className: cx(resolvedProps.className, slotStyles._classNameMap[slot]),
83
+ ref,
84
+ })
85
+ })
86
+
87
+ const componentName = getDisplayName(Component)
88
+ WithContext.displayName = `withContext(${componentName})`
89
+
90
+ return WithContext
91
+ }
92
+
93
+ return {
94
+ withRootProvider,
95
+ withProvider,
96
+ withContext,
97
+ }
98
+ }
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { DividerProperties } from '../patterns/divider';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface DividerProps extends DividerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof DividerProperties > {}
8
+
9
+
10
+ export declare const Divider: FunctionComponent<DividerProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getDividerStyle } from '../patterns/divider.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["orientation","thickness","color"])
9
+
10
+ const styleProps = getDividerStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,22 @@
1
+ import { isCssProperty } from './is-valid-prop.mjs';
2
+
3
+ export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
4
+
5
+ export const composeShouldForwardProps = (tag, shouldForwardProp) =>
6
+ tag.__shouldForwardProps__ && shouldForwardProp
7
+ ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName)
8
+ : shouldForwardProp
9
+
10
+ export const composeCvaFn = (cvaA, cvaB) => {
11
+ if (cvaA && !cvaB) return cvaA
12
+ if (!cvaA && cvaB) return cvaB
13
+ if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB)
14
+ const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
15
+ TypeError.captureStackTrace?.(error)
16
+ throw error
17
+ }
18
+
19
+ export const getDisplayName = (Component) => {
20
+ if (typeof Component === 'string') return Component
21
+ return Component?.displayName || Component?.name || 'Component'
22
+ }
@@ -0,0 +1,3 @@
1
+ /* eslint-disable */
2
+ import type { Styled } from '../types/jsx';
3
+ export declare const styled: Styled
@@ -0,0 +1,89 @@
1
+ import { createElement, forwardRef, useMemo } from 'react'
2
+ import { css, cx, cva } from '../css/index.mjs';
3
+ import { defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName } from './factory-helper.mjs';
4
+ import { splitProps, normalizeHTMLProps } from '../helpers.mjs';
5
+ import { isCssProperty } from './is-valid-prop.mjs';
6
+
7
+ function styledFn(Dynamic, configOrCva = {}, options = {}) {
8
+ const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
9
+
10
+ const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
11
+ const shouldForwardProp = (prop) => {
12
+ if (options.forwardProps?.includes(prop)) return true
13
+ return forwardFn(prop, cvaFn.variantKeys)
14
+ }
15
+
16
+ const defaultProps = Object.assign(
17
+ options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
18
+ options.defaultProps,
19
+ )
20
+
21
+ const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
22
+ const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
23
+ const __base__ = Dynamic.__base__ || Dynamic
24
+
25
+ const StyledComponent = /* @__PURE__ */ forwardRef(function StyledComponent(props, ref) {
26
+ const { as: Element = __base__, unstyled, children, ...restProps } = props
27
+
28
+ const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
29
+
30
+ const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => {
31
+ return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty)
32
+ }, [combinedProps])
33
+
34
+ function recipeClass() {
35
+ const { css: cssStyles, ...propStyles } = styleProps
36
+ const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
37
+ return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
38
+ }
39
+
40
+ function cvaClass() {
41
+ const { css: cssStyles, ...propStyles } = styleProps
42
+ const cvaStyles = __cvaFn__.raw(variantProps)
43
+ return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
44
+ }
45
+
46
+ const classes = () => {
47
+ if (unstyled) {
48
+ const { css: cssStyles, ...propStyles } = styleProps
49
+ return cx(css(propStyles, cssStyles), combinedProps.className)
50
+ }
51
+ return configOrCva.__recipe__ ? recipeClass() : cvaClass()
52
+ }
53
+
54
+ return createElement(Element, {
55
+ ref,
56
+ ...forwardedProps,
57
+ ...elementProps,
58
+ ...normalizeHTMLProps(htmlProps),
59
+ className: classes(),
60
+ }, children ?? combinedProps.children)
61
+ })
62
+
63
+ const name = getDisplayName(__base__)
64
+
65
+ StyledComponent.displayName = `styled.${name}`
66
+ StyledComponent.__cva__ = __cvaFn__
67
+ StyledComponent.__base__ = __base__
68
+ StyledComponent.__shouldForwardProps__ = shouldForwardProp
69
+
70
+ return StyledComponent
71
+ }
72
+
73
+ function createJsxFactory() {
74
+ const cache = new Map()
75
+
76
+ return new Proxy(styledFn, {
77
+ apply(_, __, args) {
78
+ return styledFn(...args)
79
+ },
80
+ get(_, el) {
81
+ if (!cache.has(el)) {
82
+ cache.set(el, styledFn(el))
83
+ }
84
+ return cache.get(el)
85
+ },
86
+ })
87
+ }
88
+
89
+ export const styled = /* @__PURE__ */ createJsxFactory()
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { FlexProperties } from '../patterns/flex';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface FlexProps extends FlexProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FlexProperties > {}
8
+
9
+
10
+ export declare const Flex: FunctionComponent<FlexProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getFlexStyle } from '../patterns/flex.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["align","justify","direction","wrap","basis","grow","shrink"])
9
+
10
+ const styleProps = getFlexStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { FloatProperties } from '../patterns/float';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface FloatProps extends FloatProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof FloatProperties > {}
8
+
9
+
10
+ export declare const Float: FunctionComponent<FloatProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getFloatStyle } from '../patterns/float.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["offsetX","offsetY","offset","placement"])
9
+
10
+ const styleProps = getFloatStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { GridItemProperties } from '../patterns/grid-item';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface GridItemProps extends GridItemProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof GridItemProperties > {}
8
+
9
+
10
+ export declare const GridItem: FunctionComponent<GridItemProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getGridItemStyle } from '../patterns/grid-item.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["colSpan","rowSpan","colStart","rowStart","colEnd","rowEnd"])
9
+
10
+ const styleProps = getGridItemStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { GridProperties } from '../patterns/grid';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface GridProps extends GridProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof GridProperties > {}
8
+
9
+
10
+ export declare const Grid: FunctionComponent<GridProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getGridStyle } from '../patterns/grid.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["gap","columnGap","rowGap","columns","minChildWidth"])
9
+
10
+ const styleProps = getGridStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { HstackProperties } from '../patterns/hstack';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface HstackProps extends HstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof HstackProperties > {}
8
+
9
+
10
+ export declare const HStack: FunctionComponent<HstackProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getHstackStyle } from '../patterns/hstack.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["justify","gap"])
9
+
10
+ const styleProps = getHstackStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,25 @@
1
+ /* eslint-disable */
2
+ export * from './factory';
3
+ export * from './is-valid-prop';
4
+ export * from './create-style-context';
5
+ export * from './box';
6
+ export * from './flex';
7
+ export * from './stack';
8
+ export * from './vstack';
9
+ export * from './hstack';
10
+ export * from './spacer';
11
+ export * from './square';
12
+ export * from './circle';
13
+ export * from './center';
14
+ export * from './link-overlay';
15
+ export * from './aspect-ratio';
16
+ export * from './grid';
17
+ export * from './grid-item';
18
+ export * from './wrap';
19
+ export * from './container';
20
+ export * from './divider';
21
+ export * from './float';
22
+ export * from './bleed';
23
+ export * from './visually-hidden';
24
+ export * from './cq';
25
+ export type { HTMLStyledProps, StyledComponent } from '../types/jsx';
@@ -0,0 +1,23 @@
1
+ export * from './factory.mjs';
2
+ export * from './is-valid-prop.mjs';
3
+ export * from './create-style-context.mjs';
4
+ export * from './box.mjs';
5
+ export * from './flex.mjs';
6
+ export * from './stack.mjs';
7
+ export * from './vstack.mjs';
8
+ export * from './hstack.mjs';
9
+ export * from './spacer.mjs';
10
+ export * from './square.mjs';
11
+ export * from './circle.mjs';
12
+ export * from './center.mjs';
13
+ export * from './link-overlay.mjs';
14
+ export * from './aspect-ratio.mjs';
15
+ export * from './grid.mjs';
16
+ export * from './grid-item.mjs';
17
+ export * from './wrap.mjs';
18
+ export * from './container.mjs';
19
+ export * from './divider.mjs';
20
+ export * from './float.mjs';
21
+ export * from './bleed.mjs';
22
+ export * from './visually-hidden.mjs';
23
+ export * from './cq.mjs';
@@ -0,0 +1,11 @@
1
+ /* eslint-disable */
2
+ import type { DistributiveOmit, HTMLPandaProps, JsxStyleProps, Pretty } from '../types';
3
+
4
+ declare const isCssProperty: (value: string) => boolean;
5
+
6
+ type CssPropKey = keyof JsxStyleProps
7
+ type OmittedCssProps<T> = Pretty<DistributiveOmit<T, CssPropKey>>
8
+
9
+ declare const splitCssProps: <T>(props: T) => [JsxStyleProps, OmittedCssProps<T>]
10
+
11
+ export { isCssProperty, splitCssProps };
@@ -0,0 +1,17 @@
1
+ import { splitProps } from '../helpers.mjs';
2
+ import { memo } from '../helpers.mjs';
3
+ // src/index.ts
4
+ var userGeneratedStr = "css,ar,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,colStart,colEnd,autoCols,rowG,colG,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,bgLinear,bgRadial,bgConic,br,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,z,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,rowStart,rowEnd,rounded,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,inset,insetInline,insetBlock,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,spaceX,spaceY,outlineWidth,outlineColor,outline,outlineOffset,focusRing,focusVisibleRing,focusRingColor,focusRingOffset,focusRingWidth,focusRingStyle,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,boxSize,color,fontFamily,fontSize,fontSizeAdjust,fontPalette,fontKerning,fontFeatureSettings,fontWeight,fontSmoothing,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariationSettings,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,listStyle,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,backgroundLinear,backgroundRadial,backgroundConic,textGradient,gradientFromPosition,gradientToPosition,gradientFrom,gradientTo,gradientVia,gradientViaPosition,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderBlockStartWidth,borderBlockEndWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationTimingFunction,animationDuration,animationDelay,animationPlayState,animationComposition,animationFillMode,animationDirection,animationIterationCount,animationRange,animationState,animationRangeStart,animationRangeEnd,animationTimeline,transformOrigin,transformBox,transformStyle,transform,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,touchAction,userSelect,overflow,overflowWrap,overflowX,overflowY,overflowAnchor,overflowBlock,overflowInline,overflowClipBox,overflowClipMargin,overscrollBehaviorBlock,overscrollBehaviorInline,fill,stroke,strokeWidth,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,cursor,grid,center,relative,absolute,fixed,sticky,size,pointer,strokeColor,cols,rows,placeI,placeC,placeS,alignI,alignC,alignS,justifyI,justifyC,justifyS,colN,spaceBetween,rowN,gridRowStart,gridRowEnd,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_activeMouse,_activeKeyboard,_checkbox,_radioLabel,_radioDisabled,_radioSelected,_radioCircleOuter,_radioCircleInner,_radioFocusRing,_path,_svg,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,xsToSm,xsToMd,xsToLg,xsToXl,xsTo2xl,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle"
5
+ var userGenerated = userGeneratedStr.split(",");
6
+ var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,WebkitUserSelect,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,anchorName,anchorScope,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimeline,animationTimingFunction,appearance,aspectRatio,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBlockStyle,borderBlockWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineColor,borderInlineEnd,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderInlineStyle,borderInlineWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,clipRule,color,colorInterpolationFilters,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,cx,cy,d,direction,display,dominantBaseline,emptyCells,fieldSizing,fill,fillOpacity,fillRule,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,floodColor,floodOpacity,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontVariationSettings,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,interpolateSize,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lightingColor,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,marker,markerEnd,markerMid,markerStart,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,positionAnchor,positionArea,positionTry,positionTryFallbacks,positionTryOrder,positionVisibility,printColorAdjust,quotes,r,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,rx,ry,scale,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginBottom,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockEnd,scrollPaddingBlockStart,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,scrollbarColor,scrollbarGutter,scrollbarWidth,shapeImageThreshold,shapeMargin,shapeOutside,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,tabSize,tableLayout,textAlign,textAlignLast,textAnchor,textBox,textBoxEdge,textBoxTrim,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textSpacingTrim,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,textWrapMode,textWrapStyle,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,vectorEffect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,x,y,zIndex,zoom,alignmentBaseline,baselineShift,colorInterpolation,colorRendering,glyphOrientationVertical";
7
+ var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);
8
+ var properties = new Map(allCssProperties.map((prop) => [prop, true]));
9
+ var cssPropertySelectorRegex = /&|@/;
10
+ var isCssProperty = /* @__PURE__ */ memo((prop) => {
11
+ return properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop);
12
+ });
13
+ export {
14
+ allCssProperties,
15
+ isCssProperty
16
+ };
17
+ export const splitCssProps = (props) => splitProps(props, isCssProperty)
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { LinkOverlayProperties } from '../patterns/link-overlay';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit<HTMLStyledProps<'a'>, keyof LinkOverlayProperties > {}
8
+
9
+
10
+ export declare const LinkOverlay: FunctionComponent<LinkOverlayProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, [])
9
+
10
+ const styleProps = getLinkOverlayStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.a, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { SpacerProperties } from '../patterns/spacer';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface SpacerProps extends SpacerProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SpacerProperties > {}
8
+
9
+
10
+ export declare const Spacer: FunctionComponent<SpacerProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getSpacerStyle } from '../patterns/spacer.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["size"])
9
+
10
+ const styleProps = getSpacerStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { SquareProperties } from '../patterns/square';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface SquareProps extends SquareProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof SquareProperties > {}
8
+
9
+
10
+ export declare const Square: FunctionComponent<SquareProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getSquareStyle } from '../patterns/square.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["size"])
9
+
10
+ const styleProps = getSquareStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { StackProperties } from '../patterns/stack';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface StackProps extends StackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof StackProperties > {}
8
+
9
+
10
+ export declare const Stack: FunctionComponent<StackProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getStackStyle } from '../patterns/stack.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, ["align","justify","direction","gap"])
9
+
10
+ const styleProps = getStackStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { VisuallyHiddenProperties } from '../patterns/visually-hidden';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VisuallyHiddenProperties > {}
8
+
9
+
10
+ export declare const VisuallyHidden: FunctionComponent<VisuallyHiddenProps>
@@ -0,0 +1,14 @@
1
+ import { createElement, forwardRef } from 'react'
2
+
3
+ import { splitProps } from '../helpers.mjs';
4
+ import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
5
+ import { styled } from './factory.mjs';
6
+
7
+ export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
8
+ const [patternProps, restProps] = splitProps(props, [])
9
+
10
+ const styleProps = getVisuallyHiddenStyle(patternProps)
11
+ const mergedProps = { ref, ...styleProps, ...restProps }
12
+
13
+ return createElement(styled.div, mergedProps)
14
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ import type { FunctionComponent } from 'react'
3
+ import type { VstackProperties } from '../patterns/vstack';
4
+ import type { HTMLStyledProps } from '../types/jsx';
5
+ import type { DistributiveOmit } from '../types/system-types';
6
+
7
+ export interface VstackProps extends VstackProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof VstackProperties > {}
8
+
9
+
10
+ export declare const VStack: FunctionComponent<VstackProps>