@discourser/design-system 0.1.0
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/LICENSE +21 -0
- package/README.md +213 -0
- package/dist/index.cjs +1250 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +456 -0
- package/dist/index.d.ts +456 -0
- package/dist/index.js +1234 -0
- package/dist/index.js.map +1 -0
- package/package.json +123 -0
- 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 +41 -0
- package/styled-system/helpers.mjs +336 -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/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 +80 -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 +24 -0
- package/styled-system/jsx/index.mjs +22 -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 +21 -0
- package/styled-system/patterns/aspect-ratio.mjs +38 -0
- package/styled-system/patterns/bleed.d.ts +22 -0
- package/styled-system/patterns/bleed.mjs +24 -0
- package/styled-system/patterns/box.d.ts +21 -0
- package/styled-system/patterns/box.mjs +15 -0
- package/styled-system/patterns/center.d.ts +21 -0
- package/styled-system/patterns/center.mjs +21 -0
- package/styled-system/patterns/circle.d.ts +21 -0
- package/styled-system/patterns/circle.mjs +25 -0
- package/styled-system/patterns/container.d.ts +21 -0
- package/styled-system/patterns/container.mjs +21 -0
- package/styled-system/patterns/cq.d.ts +22 -0
- package/styled-system/patterns/cq.mjs +21 -0
- package/styled-system/patterns/divider.d.ts +23 -0
- package/styled-system/patterns/divider.mjs +25 -0
- package/styled-system/patterns/flex.d.ts +27 -0
- package/styled-system/patterns/flex.mjs +26 -0
- package/styled-system/patterns/float.d.ts +24 -0
- package/styled-system/patterns/float.mjs +52 -0
- package/styled-system/patterns/grid-item.d.ts +26 -0
- package/styled-system/patterns/grid-item.mjs +25 -0
- package/styled-system/patterns/grid.d.ts +25 -0
- package/styled-system/patterns/grid.mjs +27 -0
- package/styled-system/patterns/hstack.d.ts +22 -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 +21 -0
- package/styled-system/patterns/link-overlay.mjs +24 -0
- package/styled-system/patterns/spacer.d.ts +21 -0
- package/styled-system/patterns/spacer.mjs +21 -0
- package/styled-system/patterns/square.d.ts +21 -0
- package/styled-system/patterns/square.mjs +24 -0
- package/styled-system/patterns/stack.d.ts +24 -0
- package/styled-system/patterns/stack.mjs +24 -0
- package/styled-system/patterns/visually-hidden.d.ts +21 -0
- package/styled-system/patterns/visually-hidden.mjs +18 -0
- package/styled-system/patterns/vstack.d.ts +22 -0
- package/styled-system/patterns/vstack.mjs +24 -0
- package/styled-system/patterns/wrap.d.ts +25 -0
- package/styled-system/patterns/wrap.mjs +25 -0
- package/styled-system/recipes/button.d.ts +39 -0
- package/styled-system/recipes/button.mjs +40 -0
- package/styled-system/recipes/card.d.ts +39 -0
- package/styled-system/recipes/card.mjs +36 -0
- package/styled-system/recipes/create-recipe.mjs +82 -0
- package/styled-system/recipes/dialog.d.ts +35 -0
- package/styled-system/recipes/dialog.mjs +63 -0
- package/styled-system/recipes/icon-button.d.ts +39 -0
- package/styled-system/recipes/icon-button.mjs +39 -0
- package/styled-system/recipes/index.d.ts +7 -0
- package/styled-system/recipes/index.mjs +6 -0
- package/styled-system/recipes/input.d.ts +40 -0
- package/styled-system/recipes/input.mjs +40 -0
- package/styled-system/recipes/switch-control.d.ts +35 -0
- package/styled-system/recipes/switch-control.mjs +53 -0
- package/styled-system/recipes/switch.d.ts +35 -0
- package/styled-system/recipes/switch.mjs +53 -0
- package/styled-system/tokens/index.d.ts +9 -0
- package/styled-system/tokens/index.mjs +924 -0
- package/styled-system/tokens/tokens.d.ts +48 -0
- package/styled-system/types/composition.d.ts +164 -0
- package/styled-system/types/conditions.d.ts +306 -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 +52 -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 +224 -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 +7468 -0
- package/styled-system/types/system-types.d.ts +109 -0
|
@@ -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,24 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
export * from './factory';
|
|
3
|
+
export * from './is-valid-prop';
|
|
4
|
+
export * from './box';
|
|
5
|
+
export * from './flex';
|
|
6
|
+
export * from './stack';
|
|
7
|
+
export * from './vstack';
|
|
8
|
+
export * from './hstack';
|
|
9
|
+
export * from './spacer';
|
|
10
|
+
export * from './square';
|
|
11
|
+
export * from './circle';
|
|
12
|
+
export * from './center';
|
|
13
|
+
export * from './link-overlay';
|
|
14
|
+
export * from './aspect-ratio';
|
|
15
|
+
export * from './grid';
|
|
16
|
+
export * from './grid-item';
|
|
17
|
+
export * from './wrap';
|
|
18
|
+
export * from './container';
|
|
19
|
+
export * from './divider';
|
|
20
|
+
export * from './float';
|
|
21
|
+
export * from './bleed';
|
|
22
|
+
export * from './visually-hidden';
|
|
23
|
+
export * from './cq';
|
|
24
|
+
export type { HTMLStyledProps, StyledComponent } from '../types/jsx';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export * from './factory.mjs';
|
|
2
|
+
export * from './is-valid-prop.mjs';
|
|
3
|
+
export * from './box.mjs';
|
|
4
|
+
export * from './flex.mjs';
|
|
5
|
+
export * from './stack.mjs';
|
|
6
|
+
export * from './vstack.mjs';
|
|
7
|
+
export * from './hstack.mjs';
|
|
8
|
+
export * from './spacer.mjs';
|
|
9
|
+
export * from './square.mjs';
|
|
10
|
+
export * from './circle.mjs';
|
|
11
|
+
export * from './center.mjs';
|
|
12
|
+
export * from './link-overlay.mjs';
|
|
13
|
+
export * from './aspect-ratio.mjs';
|
|
14
|
+
export * from './grid.mjs';
|
|
15
|
+
export * from './grid-item.mjs';
|
|
16
|
+
export * from './wrap.mjs';
|
|
17
|
+
export * from './container.mjs';
|
|
18
|
+
export * from './divider.mjs';
|
|
19
|
+
export * from './float.mjs';
|
|
20
|
+
export * from './bleed.mjs';
|
|
21
|
+
export * from './visually-hidden.mjs';
|
|
22
|
+
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,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,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,rounded,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,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,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,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,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,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,colorPalette,_light,_dark,_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,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,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,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,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,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,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,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,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,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect";
|
|
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>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { createElement, forwardRef } from 'react'
|
|
2
|
+
|
|
3
|
+
import { splitProps } from '../helpers.mjs';
|
|
4
|
+
import { getVstackStyle } from '../patterns/vstack.mjs';
|
|
5
|
+
import { styled } from './factory.mjs';
|
|
6
|
+
|
|
7
|
+
export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
|
|
8
|
+
const [patternProps, restProps] = splitProps(props, ["justify","gap"])
|
|
9
|
+
|
|
10
|
+
const styleProps = getVstackStyle(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 { WrapProperties } from '../patterns/wrap';
|
|
4
|
+
import type { HTMLStyledProps } from '../types/jsx';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
|
|
7
|
+
export interface WrapProps extends WrapProperties, DistributiveOmit<HTMLStyledProps<'div'>, keyof WrapProperties > {}
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
export declare const Wrap: FunctionComponent<WrapProps>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { createElement, forwardRef } from 'react'
|
|
2
|
+
|
|
3
|
+
import { splitProps } from '../helpers.mjs';
|
|
4
|
+
import { getWrapStyle } from '../patterns/wrap.mjs';
|
|
5
|
+
import { styled } from './factory.mjs';
|
|
6
|
+
|
|
7
|
+
export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) {
|
|
8
|
+
const [patternProps, restProps] = splitProps(props, ["gap","rowGap","columnGap","align","justify"])
|
|
9
|
+
|
|
10
|
+
const styleProps = getWrapStyle(patternProps)
|
|
11
|
+
const mergedProps = { ref, ...styleProps, ...restProps }
|
|
12
|
+
|
|
13
|
+
return createElement(styled.div, mergedProps)
|
|
14
|
+
})
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface AspectRatioProperties {
|
|
9
|
+
ratio?: ConditionalValue<number>
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit<SystemStyleObject, keyof AspectRatioProperties | 'aspectRatio'> {}
|
|
14
|
+
|
|
15
|
+
interface AspectRatioPatternFn {
|
|
16
|
+
(styles?: AspectRatioStyles): string
|
|
17
|
+
raw: (styles?: AspectRatioStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const aspectRatio: AspectRatioPatternFn;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const aspectRatioConfig = {
|
|
5
|
+
transform(props, { map }) {
|
|
6
|
+
const { ratio = 4 / 3, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
position: "relative",
|
|
9
|
+
_before: {
|
|
10
|
+
content: `""`,
|
|
11
|
+
display: "block",
|
|
12
|
+
height: "0",
|
|
13
|
+
paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
|
|
14
|
+
},
|
|
15
|
+
"&>*": {
|
|
16
|
+
display: "flex",
|
|
17
|
+
justifyContent: "center",
|
|
18
|
+
alignItems: "center",
|
|
19
|
+
overflow: "hidden",
|
|
20
|
+
position: "absolute",
|
|
21
|
+
inset: "0",
|
|
22
|
+
width: "100%",
|
|
23
|
+
height: "100%"
|
|
24
|
+
},
|
|
25
|
+
"&>img, &>video": {
|
|
26
|
+
objectFit: "cover"
|
|
27
|
+
},
|
|
28
|
+
...rest
|
|
29
|
+
};
|
|
30
|
+
}}
|
|
31
|
+
|
|
32
|
+
export const getAspectRatioStyle = (styles = {}) => {
|
|
33
|
+
const _styles = getPatternStyles(aspectRatioConfig, styles)
|
|
34
|
+
return aspectRatioConfig.transform(_styles, patternFns)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
|
|
38
|
+
aspectRatio.raw = getAspectRatioStyle
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface BleedProperties {
|
|
9
|
+
inline?: SystemProperties["marginInline"]
|
|
10
|
+
block?: SystemProperties["marginBlock"]
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
interface BleedStyles extends BleedProperties, DistributiveOmit<SystemStyleObject, keyof BleedProperties > {}
|
|
15
|
+
|
|
16
|
+
interface BleedPatternFn {
|
|
17
|
+
(styles?: BleedStyles): string
|
|
18
|
+
raw: (styles?: BleedStyles) => SystemStyleObject
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
export declare const bleed: BleedPatternFn;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const bleedConfig = {
|
|
5
|
+
transform(props, { map, isCssUnit, isCssVar }) {
|
|
6
|
+
const { inline, block, ...rest } = props;
|
|
7
|
+
const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
|
|
8
|
+
return {
|
|
9
|
+
"--bleed-x": map(inline, valueFn),
|
|
10
|
+
"--bleed-y": map(block, valueFn),
|
|
11
|
+
marginInline: "calc(var(--bleed-x, 0) * -1)",
|
|
12
|
+
marginBlock: "calc(var(--bleed-y, 0) * -1)",
|
|
13
|
+
...rest
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
defaultValues:{inline:'0',block:'0'}}
|
|
17
|
+
|
|
18
|
+
export const getBleedStyle = (styles = {}) => {
|
|
19
|
+
const _styles = getPatternStyles(bleedConfig, styles)
|
|
20
|
+
return bleedConfig.transform(_styles, patternFns)
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export const bleed = (styles) => css(getBleedStyle(styles))
|
|
24
|
+
bleed.raw = getBleedStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface BoxProperties {
|
|
9
|
+
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
interface BoxStyles extends BoxProperties, DistributiveOmit<SystemStyleObject, keyof BoxProperties > {}
|
|
14
|
+
|
|
15
|
+
interface BoxPatternFn {
|
|
16
|
+
(styles?: BoxStyles): string
|
|
17
|
+
raw: (styles?: BoxStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const box: BoxPatternFn;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const boxConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
return props;
|
|
7
|
+
}}
|
|
8
|
+
|
|
9
|
+
export const getBoxStyle = (styles = {}) => {
|
|
10
|
+
const _styles = getPatternStyles(boxConfig, styles)
|
|
11
|
+
return boxConfig.transform(_styles, patternFns)
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const box = (styles) => css(getBoxStyle(styles))
|
|
15
|
+
box.raw = getBoxStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CenterProperties {
|
|
9
|
+
inline?: ConditionalValue<boolean>
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
interface CenterStyles extends CenterProperties, DistributiveOmit<SystemStyleObject, keyof CenterProperties > {}
|
|
14
|
+
|
|
15
|
+
interface CenterPatternFn {
|
|
16
|
+
(styles?: CenterStyles): string
|
|
17
|
+
raw: (styles?: CenterStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const center: CenterPatternFn;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { getPatternStyles, patternFns } from '../helpers.mjs';
|
|
2
|
+
import { css } from '../css/index.mjs';
|
|
3
|
+
|
|
4
|
+
const centerConfig = {
|
|
5
|
+
transform(props) {
|
|
6
|
+
const { inline, ...rest } = props;
|
|
7
|
+
return {
|
|
8
|
+
display: inline ? "inline-flex" : "flex",
|
|
9
|
+
alignItems: "center",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
...rest
|
|
12
|
+
};
|
|
13
|
+
}}
|
|
14
|
+
|
|
15
|
+
export const getCenterStyle = (styles = {}) => {
|
|
16
|
+
const _styles = getPatternStyles(centerConfig, styles)
|
|
17
|
+
return centerConfig.transform(_styles, patternFns)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export const center = (styles) => css(getCenterStyle(styles))
|
|
21
|
+
center.raw = getCenterStyle
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* eslint-disable */
|
|
2
|
+
import type { SystemStyleObject, ConditionalValue } from '../types/index';
|
|
3
|
+
import type { Properties } from '../types/csstype';
|
|
4
|
+
import type { SystemProperties } from '../types/style-props';
|
|
5
|
+
import type { DistributiveOmit } from '../types/system-types';
|
|
6
|
+
import type { Tokens } from '../tokens/index';
|
|
7
|
+
|
|
8
|
+
export interface CircleProperties {
|
|
9
|
+
size?: SystemProperties["width"]
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
interface CircleStyles extends CircleProperties, DistributiveOmit<SystemStyleObject, keyof CircleProperties > {}
|
|
14
|
+
|
|
15
|
+
interface CirclePatternFn {
|
|
16
|
+
(styles?: CircleStyles): string
|
|
17
|
+
raw: (styles?: CircleStyles) => SystemStyleObject
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
export declare const circle: CirclePatternFn;
|