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.
- package/dist/block/drawer.d.ts.map +1 -1
- package/dist/block/test-types.d.ts.map +1 -1
- package/dist/react/index.cjs +40 -25
- package/dist/react/index.css +20 -10
- package/dist/react/index.js +40 -25
- package/package.json +22 -20
- package/styled-system/css/conditions.mjs +36 -0
- package/styled-system/css/css.d.ts +22 -0
- package/styled-system/css/css.mjs +45 -0
- package/styled-system/css/cva.d.ts +6 -0
- package/styled-system/css/cva.mjs +87 -0
- package/styled-system/css/cx.d.ts +5 -0
- package/styled-system/css/cx.mjs +15 -0
- package/styled-system/css/index.d.ts +5 -0
- package/styled-system/css/index.mjs +4 -0
- package/styled-system/css/sva.d.ts +4 -0
- package/styled-system/css/sva.mjs +46 -0
- package/styled-system/helpers.mjs +328 -0
- package/styled-system/jsx/aspect-ratio.d.ts +10 -0
- package/styled-system/jsx/aspect-ratio.mjs +14 -0
- package/styled-system/jsx/bleed.d.ts +10 -0
- package/styled-system/jsx/bleed.mjs +14 -0
- package/styled-system/jsx/box.d.ts +10 -0
- package/styled-system/jsx/box.mjs +14 -0
- package/styled-system/jsx/center.d.ts +10 -0
- package/styled-system/jsx/center.mjs +14 -0
- package/styled-system/jsx/circle.d.ts +10 -0
- package/styled-system/jsx/circle.mjs +14 -0
- package/styled-system/jsx/container.d.ts +10 -0
- package/styled-system/jsx/container.mjs +14 -0
- package/styled-system/jsx/cq.d.ts +10 -0
- package/styled-system/jsx/cq.mjs +14 -0
- package/styled-system/jsx/create-style-context.d.ts +54 -0
- package/styled-system/jsx/create-style-context.mjs +98 -0
- package/styled-system/jsx/divider.d.ts +10 -0
- package/styled-system/jsx/divider.mjs +14 -0
- package/styled-system/jsx/factory-helper.mjs +22 -0
- package/styled-system/jsx/factory.d.ts +3 -0
- package/styled-system/jsx/factory.mjs +89 -0
- package/styled-system/jsx/flex.d.ts +10 -0
- package/styled-system/jsx/flex.mjs +14 -0
- package/styled-system/jsx/float.d.ts +10 -0
- package/styled-system/jsx/float.mjs +14 -0
- package/styled-system/jsx/grid-item.d.ts +10 -0
- package/styled-system/jsx/grid-item.mjs +14 -0
- package/styled-system/jsx/grid.d.ts +10 -0
- package/styled-system/jsx/grid.mjs +14 -0
- package/styled-system/jsx/hstack.d.ts +10 -0
- package/styled-system/jsx/hstack.mjs +14 -0
- package/styled-system/jsx/index.d.ts +25 -0
- package/styled-system/jsx/index.mjs +23 -0
- package/styled-system/jsx/is-valid-prop.d.ts +11 -0
- package/styled-system/jsx/is-valid-prop.mjs +17 -0
- package/styled-system/jsx/link-overlay.d.ts +10 -0
- package/styled-system/jsx/link-overlay.mjs +14 -0
- package/styled-system/jsx/spacer.d.ts +10 -0
- package/styled-system/jsx/spacer.mjs +14 -0
- package/styled-system/jsx/square.d.ts +10 -0
- package/styled-system/jsx/square.mjs +14 -0
- package/styled-system/jsx/stack.d.ts +10 -0
- package/styled-system/jsx/stack.mjs +14 -0
- package/styled-system/jsx/visually-hidden.d.ts +10 -0
- package/styled-system/jsx/visually-hidden.mjs +14 -0
- package/styled-system/jsx/vstack.d.ts +10 -0
- package/styled-system/jsx/vstack.mjs +14 -0
- package/styled-system/jsx/wrap.d.ts +10 -0
- package/styled-system/jsx/wrap.mjs +14 -0
- package/styled-system/patterns/aspect-ratio.d.ts +20 -0
- package/styled-system/patterns/aspect-ratio.mjs +38 -0
- package/styled-system/patterns/bleed.d.ts +21 -0
- package/styled-system/patterns/bleed.mjs +24 -0
- package/styled-system/patterns/box.d.ts +20 -0
- package/styled-system/patterns/box.mjs +15 -0
- package/styled-system/patterns/center.d.ts +20 -0
- package/styled-system/patterns/center.mjs +21 -0
- package/styled-system/patterns/circle.d.ts +20 -0
- package/styled-system/patterns/circle.mjs +25 -0
- package/styled-system/patterns/container.d.ts +20 -0
- package/styled-system/patterns/container.mjs +21 -0
- package/styled-system/patterns/cq.d.ts +21 -0
- package/styled-system/patterns/cq.mjs +21 -0
- package/styled-system/patterns/divider.d.ts +22 -0
- package/styled-system/patterns/divider.mjs +25 -0
- package/styled-system/patterns/flex.d.ts +26 -0
- package/styled-system/patterns/flex.mjs +26 -0
- package/styled-system/patterns/float.d.ts +23 -0
- package/styled-system/patterns/float.mjs +52 -0
- package/styled-system/patterns/grid-item.d.ts +25 -0
- package/styled-system/patterns/grid-item.mjs +25 -0
- package/styled-system/patterns/grid.d.ts +24 -0
- package/styled-system/patterns/grid.mjs +27 -0
- package/styled-system/patterns/hstack.d.ts +21 -0
- package/styled-system/patterns/hstack.mjs +24 -0
- package/styled-system/patterns/index.d.ts +21 -0
- package/styled-system/patterns/index.mjs +20 -0
- package/styled-system/patterns/link-overlay.d.ts +20 -0
- package/styled-system/patterns/link-overlay.mjs +24 -0
- package/styled-system/patterns/spacer.d.ts +20 -0
- package/styled-system/patterns/spacer.mjs +21 -0
- package/styled-system/patterns/square.d.ts +20 -0
- package/styled-system/patterns/square.mjs +24 -0
- package/styled-system/patterns/stack.d.ts +23 -0
- package/styled-system/patterns/stack.mjs +24 -0
- package/styled-system/patterns/visually-hidden.d.ts +20 -0
- package/styled-system/patterns/visually-hidden.mjs +18 -0
- package/styled-system/patterns/vstack.d.ts +21 -0
- package/styled-system/patterns/vstack.mjs +24 -0
- package/styled-system/patterns/wrap.d.ts +24 -0
- package/styled-system/patterns/wrap.mjs +25 -0
- package/styled-system/styles.css +1749 -0
- package/styled-system/tokens/index.d.ts +9 -0
- package/styled-system/tokens/index.mjs +1976 -0
- package/styled-system/tokens/tokens.d.ts +60 -0
- package/styled-system/types/composition.d.ts +224 -0
- package/styled-system/types/conditions.d.ts +348 -0
- package/styled-system/types/csstype.d.ts +21298 -0
- package/styled-system/types/global.d.ts +20 -0
- package/styled-system/types/index.d.ts +8 -0
- package/styled-system/types/jsx.d.ts +67 -0
- package/styled-system/types/parts.d.ts +8 -0
- package/styled-system/types/pattern.d.ts +78 -0
- package/styled-system/types/prop-type.d.ts +277 -0
- package/styled-system/types/recipe.d.ts +181 -0
- package/styled-system/types/selectors.d.ts +59 -0
- package/styled-system/types/static-css.d.ts +56 -0
- package/styled-system/types/style-props.d.ts +7639 -0
- 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,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>
|