From d7c12741e9609e5f9bf55bf7e6ed375e6c79189e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=99=8D=EC=84=9C=ED=98=84?= Date: Sun, 9 Jun 2024 22:14:06 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[Refactor]=20styled-system=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20=EC=82=AC=ED=95=AD=20=EC=95=88=20=EC=9E=A1=ED=9E=88?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=84=A4=EC=A0=95=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?(#38)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: root에 panda codegen, formatting 관련 스크립트 추가 * chore:formatting 관련 스크립트 수정 * chore: styled-system 폴더 포맷팅 * chore: build 스크립트 순서 수정 * chore: husky pre-push hook 추가 * chore: styled-system format 스크립트 styled-system만 적용되도록 수정 * fix : wow-docs 에서 codegen 하는 로직 삭제 --------- Co-authored-by: SeieunYoo --- .husky/pre-push | 4 + apps/wow-docs/app/page.module.css | 4 +- apps/wow-docs/package.json | 2 +- apps/wow-docs/styled-system/css/conditions.js | 48 +- apps/wow-docs/styled-system/css/css.d.ts | 22 +- apps/wow-docs/styled-system/css/css.js | 56 +- apps/wow-docs/styled-system/css/cva.d.ts | 6 +- apps/wow-docs/styled-system/css/cva.js | 74 +- apps/wow-docs/styled-system/css/cx.d.ts | 4 +- apps/wow-docs/styled-system/css/cx.js | 14 +- apps/wow-docs/styled-system/css/index.d.ts | 8 +- apps/wow-docs/styled-system/css/index.js | 8 +- apps/wow-docs/styled-system/css/sva.d.ts | 4 +- apps/wow-docs/styled-system/css/sva.js | 34 +- .../styled-system/patterns/aspect-ratio.d.ts | 25 +- .../styled-system/patterns/aspect-ratio.js | 67 +- .../styled-system/patterns/bleed.d.ts | 24 +- apps/wow-docs/styled-system/patterns/bleed.js | 40 +- apps/wow-docs/styled-system/patterns/box.d.ts | 24 +- apps/wow-docs/styled-system/patterns/box.js | 21 +- .../styled-system/patterns/center.d.ts | 22 +- .../wow-docs/styled-system/patterns/center.js | 33 +- .../styled-system/patterns/circle.d.ts | 22 +- .../wow-docs/styled-system/patterns/circle.js | 41 +- .../styled-system/patterns/container.d.ts | 24 +- .../styled-system/patterns/container.js | 33 +- apps/wow-docs/styled-system/patterns/cq.d.ts | 26 +- apps/wow-docs/styled-system/patterns/cq.js | 33 +- .../styled-system/patterns/divider.d.ts | 26 +- .../styled-system/patterns/divider.js | 45 +- .../wow-docs/styled-system/patterns/flex.d.ts | 34 +- apps/wow-docs/styled-system/patterns/flex.js | 52 +- .../styled-system/patterns/float.d.ts | 38 +- apps/wow-docs/styled-system/patterns/float.js | 95 +- .../styled-system/patterns/grid-item.d.ts | 32 +- .../styled-system/patterns/grid-item.js | 42 +- .../wow-docs/styled-system/patterns/grid.d.ts | 30 +- apps/wow-docs/styled-system/patterns/grid.js | 53 +- .../styled-system/patterns/hstack.d.ts | 24 +- .../wow-docs/styled-system/patterns/hstack.js | 39 +- .../styled-system/patterns/index.d.ts | 40 +- apps/wow-docs/styled-system/patterns/index.js | 40 +- .../styled-system/patterns/link-overlay.d.ts | 24 +- .../styled-system/patterns/link-overlay.js | 39 +- .../styled-system/patterns/spacer.d.ts | 22 +- .../wow-docs/styled-system/patterns/spacer.js | 33 +- .../styled-system/patterns/square.d.ts | 22 +- .../wow-docs/styled-system/patterns/square.js | 39 +- .../styled-system/patterns/stack.d.ts | 28 +- apps/wow-docs/styled-system/patterns/stack.js | 39 +- .../patterns/visually-hidden.d.ts | 24 +- .../styled-system/patterns/visually-hidden.js | 27 +- .../styled-system/patterns/vstack.d.ts | 24 +- .../wow-docs/styled-system/patterns/vstack.js | 39 +- .../wow-docs/styled-system/patterns/wrap.d.ts | 30 +- apps/wow-docs/styled-system/patterns/wrap.js | 48 +- apps/wow-docs/styled-system/tokens/index.d.ts | 10 +- .../styled-system/types/composition.d.ts | 206 +- .../styled-system/types/conditions.d.ts | 522 +-- .../wow-docs/styled-system/types/csstype.d.ts | 2871 ++++++++++++++--- apps/wow-docs/styled-system/types/global.d.ts | 56 +- apps/wow-docs/styled-system/types/parts.d.ts | 4 +- .../wow-docs/styled-system/types/pattern.d.ts | 63 +- apps/wow-docs/styled-system/types/recipe.d.ts | 174 +- .../styled-system/types/selectors.d.ts | 93 +- .../styled-system/types/static-css.d.ts | 28 +- .../styled-system/types/system-types.d.ts | 91 +- package.json | 11 +- .../wow-ui/styled-system/css/conditions.js | 48 +- packages/wow-ui/styled-system/css/css.d.ts | 22 +- packages/wow-ui/styled-system/css/css.js | 56 +- packages/wow-ui/styled-system/css/cva.d.ts | 6 +- packages/wow-ui/styled-system/css/cva.js | 74 +- packages/wow-ui/styled-system/css/cx.d.ts | 4 +- packages/wow-ui/styled-system/css/cx.js | 14 +- packages/wow-ui/styled-system/css/index.d.ts | 8 +- packages/wow-ui/styled-system/css/index.js | 8 +- packages/wow-ui/styled-system/css/sva.d.ts | 4 +- packages/wow-ui/styled-system/css/sva.js | 34 +- .../styled-system/patterns/aspect-ratio.d.ts | 25 +- .../styled-system/patterns/aspect-ratio.js | 67 +- .../wow-ui/styled-system/patterns/bleed.d.ts | 24 +- .../wow-ui/styled-system/patterns/bleed.js | 40 +- .../wow-ui/styled-system/patterns/box.d.ts | 24 +- packages/wow-ui/styled-system/patterns/box.js | 21 +- .../wow-ui/styled-system/patterns/center.d.ts | 22 +- .../wow-ui/styled-system/patterns/center.js | 33 +- .../wow-ui/styled-system/patterns/circle.d.ts | 22 +- .../wow-ui/styled-system/patterns/circle.js | 41 +- .../styled-system/patterns/container.d.ts | 24 +- .../styled-system/patterns/container.js | 33 +- .../wow-ui/styled-system/patterns/cq.d.ts | 26 +- packages/wow-ui/styled-system/patterns/cq.js | 33 +- .../styled-system/patterns/divider.d.ts | 26 +- .../wow-ui/styled-system/patterns/divider.js | 45 +- .../wow-ui/styled-system/patterns/flex.d.ts | 34 +- .../wow-ui/styled-system/patterns/flex.js | 52 +- .../wow-ui/styled-system/patterns/float.d.ts | 38 +- .../wow-ui/styled-system/patterns/float.js | 95 +- .../styled-system/patterns/grid-item.d.ts | 32 +- .../styled-system/patterns/grid-item.js | 42 +- .../wow-ui/styled-system/patterns/grid.d.ts | 30 +- .../wow-ui/styled-system/patterns/grid.js | 53 +- .../wow-ui/styled-system/patterns/hstack.d.ts | 24 +- .../wow-ui/styled-system/patterns/hstack.js | 39 +- .../wow-ui/styled-system/patterns/index.d.ts | 40 +- .../wow-ui/styled-system/patterns/index.js | 40 +- .../styled-system/patterns/link-overlay.d.ts | 24 +- .../styled-system/patterns/link-overlay.js | 39 +- .../wow-ui/styled-system/patterns/spacer.d.ts | 22 +- .../wow-ui/styled-system/patterns/spacer.js | 33 +- .../wow-ui/styled-system/patterns/square.d.ts | 22 +- .../wow-ui/styled-system/patterns/square.js | 39 +- .../wow-ui/styled-system/patterns/stack.d.ts | 28 +- .../wow-ui/styled-system/patterns/stack.js | 39 +- .../patterns/visually-hidden.d.ts | 24 +- .../styled-system/patterns/visually-hidden.js | 27 +- .../wow-ui/styled-system/patterns/vstack.d.ts | 24 +- .../wow-ui/styled-system/patterns/vstack.js | 39 +- .../wow-ui/styled-system/patterns/wrap.d.ts | 30 +- .../wow-ui/styled-system/patterns/wrap.js | 48 +- .../wow-ui/styled-system/tokens/index.d.ts | 10 +- .../styled-system/types/composition.d.ts | 206 +- .../styled-system/types/conditions.d.ts | 522 +-- .../wow-ui/styled-system/types/csstype.d.ts | 2871 ++++++++++++++--- .../wow-ui/styled-system/types/global.d.ts | 56 +- .../wow-ui/styled-system/types/parts.d.ts | 4 +- .../wow-ui/styled-system/types/pattern.d.ts | 63 +- .../wow-ui/styled-system/types/recipe.d.ts | 174 +- .../wow-ui/styled-system/types/selectors.d.ts | 93 +- .../styled-system/types/static-css.d.ts | 28 +- .../styled-system/types/system-types.d.ts | 91 +- 132 files changed, 7940 insertions(+), 3799 deletions(-) create mode 100755 .husky/pre-push diff --git a/.husky/pre-push b/.husky/pre-push new file mode 100755 index 00000000..d8762c63 --- /dev/null +++ b/.husky/pre-push @@ -0,0 +1,4 @@ +#!/usr/bin/env sh +. "$(dirname -- "$0")/_/husky.sh" + +pnpm codegen:build diff --git a/apps/wow-docs/app/page.module.css b/apps/wow-docs/app/page.module.css index 98481c6a..56dd6c26 100644 --- a/apps/wow-docs/app/page.module.css +++ b/apps/wow-docs/app/page.module.css @@ -94,7 +94,9 @@ border-radius: var(--border-radius); background: rgba(var(--card-rgb), 0); border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; + transition: + background 200ms, + border 200ms; } .card span { diff --git a/apps/wow-docs/package.json b/apps/wow-docs/package.json index 7ef4a8e9..c66b3f78 100644 --- a/apps/wow-docs/package.json +++ b/apps/wow-docs/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "private": true, "scripts": { - "dev": "pnpm panda codegen && rm -rf .next && next dev", + "dev": "rm -rf .next && next dev", "build": "next build", "start": "next start", "lint": "eslint . --max-warnings 0", diff --git a/apps/wow-docs/styled-system/css/conditions.js b/apps/wow-docs/styled-system/css/conditions.js index 42b2cb8e..33673f36 100644 --- a/apps/wow-docs/styled-system/css/conditions.js +++ b/apps/wow-docs/styled-system/css/conditions.js @@ -1,34 +1,36 @@ -import { withoutSpace } from '../helpers.js'; +import { withoutSpace } from "../helpers.js"; -const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_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,base" -const conditions = new Set(conditionsStr.split(',')) +const conditionsStr = + "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_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,base"; +const conditions = new Set(conditionsStr.split(",")); -export function isCondition(value){ - return conditions.has(value) || /^@|&|&$/.test(value) +export function isCondition(value) { + return conditions.has(value) || /^@|&|&$/.test(value); } -const underscoreRegex = /^_/ -const conditionsSelectorRegex = /&|@/ +const underscoreRegex = /^_/; +const conditionsSelectorRegex = /&|@/; -export function finalizeConditions(paths){ +export function finalizeConditions(paths) { return paths.map((path) => { - if (conditions.has(path)){ - return path.replace(underscoreRegex, '') + if (conditions.has(path)) { + return path.replace(underscoreRegex, ""); } - if (conditionsSelectorRegex.test(path)){ - return `[${withoutSpace(path.trim())}]` + if (conditionsSelectorRegex.test(path)) { + return `[${withoutSpace(path.trim())}]`; } - return path - })} + return path; + }); +} - export function sortConditions(paths){ - return paths.sort((a, b) => { - const aa = isCondition(a) - const bb = isCondition(b) - if (aa && !bb) return 1 - if (!aa && bb) return -1 - return 0 - }) - } \ No newline at end of file +export function sortConditions(paths) { + return paths.sort((a, b) => { + const aa = isCondition(a); + const bb = isCondition(b); + if (aa && !bb) return 1; + if (!aa && bb) return -1; + return 0; + }); +} diff --git a/apps/wow-docs/styled-system/css/css.d.ts b/apps/wow-docs/styled-system/css/css.d.ts index 175f9747..cff6b0e2 100644 --- a/apps/wow-docs/styled-system/css/css.d.ts +++ b/apps/wow-docs/styled-system/css/css.d.ts @@ -1,18 +1,18 @@ /* eslint-disable */ -import type { SystemStyleObject } from '../types/index'; +import type { SystemStyleObject } from "../types/index"; -type Styles = SystemStyleObject | undefined | null | false +type Styles = SystemStyleObject | undefined | null | false; interface CssFunction { - (styles: Styles): string - (styles: Styles[]): string - (...styles: Array): string - (styles: Styles): string + (styles: Styles): string; + (styles: Styles[]): string; + (...styles: Array): string; + (styles: Styles): string; - raw: (styles: Styles) => string - raw: (styles: Styles[]) => string - raw: (...styles: Array) => string - raw: (styles: Styles) => string + raw: (styles: Styles) => string; + raw: (styles: Styles[]) => string; + raw: (...styles: Array) => string; + raw: (styles: Styles) => string; } -export declare const css: CssFunction; \ No newline at end of file +export declare const css: CssFunction; diff --git a/apps/wow-docs/styled-system/css/css.js b/apps/wow-docs/styled-system/css/css.js index ad99a48c..1a2225fe 100644 --- a/apps/wow-docs/styled-system/css/css.js +++ b/apps/wow-docs/styled-system/css/css.js @@ -1,45 +1,49 @@ -import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.js'; -import { sortConditions, finalizeConditions } from './conditions.js'; +import { + createCss, + createMergeCss, + hypenateProperty, + withoutSpace, +} from "../helpers.js"; +import { sortConditions, finalizeConditions } from "./conditions.js"; -const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow-color/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle" +const utilities = + "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow-color/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle"; -const classNameByProp = new Map() -const shorthands = new Map() -utilities.split(',').forEach((utility) => { - const [prop, meta] = utility.split(':') - const [className, ...shorthandList] = meta.split('/') - classNameByProp.set(prop, className) +const classNameByProp = new Map(); +const shorthands = new Map(); +utilities.split(",").forEach((utility) => { + const [prop, meta] = utility.split(":"); + const [className, ...shorthandList] = meta.split("/"); + classNameByProp.set(prop, className); if (shorthandList.length) { shorthandList.forEach((shorthand) => { - shorthands.set(shorthand === '1' ? className : shorthand, prop) - }) + shorthands.set(shorthand === "1" ? className : shorthand, prop); + }); } -}) +}); -const resolveShorthand = (prop) => shorthands.get(prop) || prop +const resolveShorthand = (prop) => shorthands.get(prop) || prop; const context = { - conditions: { shift: sortConditions, finalize: finalizeConditions, - breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] } + breakpoints: { keys: ["base", "sm", "md", "lg", "xl", "2xl"] }, }, utility: { - transform: (prop, value) => { - const key = resolveShorthand(prop) - const propKey = classNameByProp.get(key) || hypenateProperty(key) - return { className: `${propKey}_${withoutSpace(value)}` } - }, + const key = resolveShorthand(prop); + const propKey = classNameByProp.get(key) || hypenateProperty(key); + return { className: `${propKey}_${withoutSpace(value)}` }; + }, hasShorthand: true, toHash: (path, hashFn) => hashFn(path.join(":")), resolveShorthand: resolveShorthand, - } -} + }, +}; -const cssFn = createCss(context) -export const css = (...styles) => cssFn(mergeCss(...styles)) -css.raw = (...styles) => mergeCss(...styles) +const cssFn = createCss(context); +export const css = (...styles) => cssFn(mergeCss(...styles)); +css.raw = (...styles) => mergeCss(...styles); -export const { mergeCss, assignCss } = createMergeCss(context) \ No newline at end of file +export const { mergeCss, assignCss } = createMergeCss(context); diff --git a/apps/wow-docs/styled-system/css/cva.d.ts b/apps/wow-docs/styled-system/css/cva.d.ts index ff433257..78f66403 100644 --- a/apps/wow-docs/styled-system/css/cva.d.ts +++ b/apps/wow-docs/styled-system/css/cva.d.ts @@ -1,6 +1,6 @@ /* eslint-disable */ -import type { RecipeCreatorFn } from '../types/recipe'; +import type { RecipeCreatorFn } from "../types/recipe"; -export declare const cva: RecipeCreatorFn +export declare const cva: RecipeCreatorFn; -export type { RecipeVariant, RecipeVariantProps } from '../types/recipe'; \ No newline at end of file +export type { RecipeVariant, RecipeVariantProps } from "../types/recipe"; diff --git a/apps/wow-docs/styled-system/css/cva.js b/apps/wow-docs/styled-system/css/cva.js index 64985937..b95e185c 100644 --- a/apps/wow-docs/styled-system/css/cva.js +++ b/apps/wow-docs/styled-system/css/cva.js @@ -1,5 +1,5 @@ -import { compact, mergeProps, memo, splitProps, uniq } from '../helpers.js'; -import { css, mergeCss } from './css.js'; +import { compact, mergeProps, memo, splitProps, uniq } from "../helpers.js"; +import { css, mergeCss } from "./css.js"; const defaults = (conf) => ({ base: {}, @@ -7,48 +7,60 @@ const defaults = (conf) => ({ defaultVariants: {}, compoundVariants: [], ...conf, -}) +}); export function cva(config) { - const { base, variants, defaultVariants, compoundVariants } = defaults(config) - const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) }) + const { base, variants, defaultVariants, compoundVariants } = + defaults(config); + const getVariantProps = (variants) => ({ + ...defaultVariants, + ...compact(variants), + }); function resolve(props = {}) { - const computedVariants = getVariantProps(props) - let variantCss = { ...base } + const computedVariants = getVariantProps(props); + let variantCss = { ...base }; for (const [key, value] of Object.entries(computedVariants)) { if (variants[key]?.[value]) { - variantCss = mergeCss(variantCss, variants[key][value]) + variantCss = mergeCss(variantCss, variants[key][value]); } } - const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants) - return mergeCss(variantCss, compoundVariantCss) + const compoundVariantCss = getCompoundVariantCss( + compoundVariants, + computedVariants + ); + return mergeCss(variantCss, compoundVariantCss); } function merge(__cva) { - const override = defaults(__cva.config) - const variantKeys = uniq(__cva.variantKeys, Object.keys(variants)) + const override = defaults(__cva.config); + const variantKeys = uniq(__cva.variantKeys, Object.keys(variants)); return cva({ base: mergeCss(base, override.base), variants: Object.fromEntries( - variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]), + variantKeys.map((key) => [ + key, + mergeCss(variants[key], override.variants[key]), + ]) ), defaultVariants: mergeProps(defaultVariants, override.defaultVariants), compoundVariants: [...compoundVariants, ...override.compoundVariants], - }) + }); } function cvaFn(props) { - return css(resolve(props)) + return css(resolve(props)); } - const variantKeys = Object.keys(variants) + const variantKeys = Object.keys(variants); function splitVariantProps(props) { - return splitProps(props, variantKeys) + return splitProps(props, variantKeys); } - const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])) + const variantMap = Object.fromEntries( + Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) + ); return Object.assign(memo(cvaFn), { __cva__: true, @@ -58,30 +70,32 @@ export function cva(config) { config, merge, splitVariantProps, - getVariantProps - }) + getVariantProps, + }); } export function getCompoundVariantCss(compoundVariants, variantMap) { - let result = {} + let result = {}; compoundVariants.forEach((compoundVariant) => { const isMatching = Object.entries(compoundVariant).every(([key, value]) => { - if (key === 'css') return true + if (key === "css") return true; - const values = Array.isArray(value) ? value : [value] - return values.some((value) => variantMap[key] === value) - }) + const values = Array.isArray(value) ? value : [value]; + return values.some((value) => variantMap[key] === value); + }); if (isMatching) { - result = mergeCss(result, compoundVariant.css) + result = mergeCss(result, compoundVariant.css); } - }) + }); - return result + return result; } export function assertCompoundVariant(name, compoundVariants, variants, prop) { - if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') { - throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`) + if (compoundVariants.length > 0 && typeof variants?.[prop] === "object") { + throw new Error( + `[recipe:${name}:${prop}] Conditions are not supported when using compound variants.` + ); } } diff --git a/apps/wow-docs/styled-system/css/cx.d.ts b/apps/wow-docs/styled-system/css/cx.d.ts index 892c90ca..8a876a0e 100644 --- a/apps/wow-docs/styled-system/css/cx.d.ts +++ b/apps/wow-docs/styled-system/css/cx.d.ts @@ -1,5 +1,5 @@ /* eslint-disable */ -type Argument = string | boolean | null | undefined +type Argument = string | boolean | null | undefined; /** Conditionally join classNames into a single string */ -export declare function cx(...args: Argument[]): string \ No newline at end of file +export declare function cx(...args: Argument[]): string; diff --git a/apps/wow-docs/styled-system/css/cx.js b/apps/wow-docs/styled-system/css/cx.js index 81bbdae3..bbc0718f 100644 --- a/apps/wow-docs/styled-system/css/cx.js +++ b/apps/wow-docs/styled-system/css/cx.js @@ -1,15 +1,15 @@ function cx() { - let str = '', + let str = "", i = 0, - arg + arg; for (; i < arguments.length; ) { - if ((arg = arguments[i++]) && typeof arg === 'string') { - str && (str += ' ') - str += arg + if ((arg = arguments[i++]) && typeof arg === "string") { + str && (str += " "); + str += arg; } } - return str + return str; } -export { cx } \ No newline at end of file +export { cx }; diff --git a/apps/wow-docs/styled-system/css/index.d.ts b/apps/wow-docs/styled-system/css/index.d.ts index 50a581d8..eb7cec86 100644 --- a/apps/wow-docs/styled-system/css/index.d.ts +++ b/apps/wow-docs/styled-system/css/index.d.ts @@ -1,5 +1,5 @@ /* eslint-disable */ -export * from './css'; -export * from './cx'; -export * from './cva'; -export * from './sva'; \ No newline at end of file +export * from "./css"; +export * from "./cx"; +export * from "./cva"; +export * from "./sva"; diff --git a/apps/wow-docs/styled-system/css/index.js b/apps/wow-docs/styled-system/css/index.js index 4c4c0818..b7d30a52 100644 --- a/apps/wow-docs/styled-system/css/index.js +++ b/apps/wow-docs/styled-system/css/index.js @@ -1,4 +1,4 @@ -export * from './css.js'; -export * from './cx.js'; -export * from './cva.js'; -export * from './sva.js'; \ No newline at end of file +export * from "./css.js"; +export * from "./cx.js"; +export * from "./cva.js"; +export * from "./sva.js"; diff --git a/apps/wow-docs/styled-system/css/sva.d.ts b/apps/wow-docs/styled-system/css/sva.d.ts index f97c42a3..d2593ec9 100644 --- a/apps/wow-docs/styled-system/css/sva.d.ts +++ b/apps/wow-docs/styled-system/css/sva.d.ts @@ -1,4 +1,4 @@ /* eslint-disable */ -import type { SlotRecipeCreatorFn } from '../types/recipe'; +import type { SlotRecipeCreatorFn } from "../types/recipe"; -export declare const sva: SlotRecipeCreatorFn \ No newline at end of file +export declare const sva: SlotRecipeCreatorFn; diff --git a/apps/wow-docs/styled-system/css/sva.js b/apps/wow-docs/styled-system/css/sva.js index 7621bd65..a402e211 100644 --- a/apps/wow-docs/styled-system/css/sva.js +++ b/apps/wow-docs/styled-system/css/sva.js @@ -1,21 +1,26 @@ -import { compact, getSlotRecipes, memo, splitProps } from '../helpers.js'; -import { cva } from './cva.js'; -import { cx } from './cx.js'; +import { compact, getSlotRecipes, memo, splitProps } from "../helpers.js"; +import { cva } from "./cva.js"; +import { cx } from "./cx.js"; -const slotClass = (className, slot) => className + '__' + slot +const slotClass = (className, slot) => className + "__" + slot; export function sva(config) { - const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)]) - const defaultVariants = config.defaultVariants ?? {} + const slots = Object.entries(getSlotRecipes(config)).map( + ([slot, slotCva]) => [slot, cva(slotCva)] + ); + const defaultVariants = config.defaultVariants ?? {}; function svaFn(props) { - const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))]) - return Object.fromEntries(result) + const result = slots.map(([slot, cvaFn]) => [ + slot, + cx(cvaFn(props), config.className && slotClass(config.className, slot)), + ]); + return Object.fromEntries(result); } function raw(props) { - const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]) - return Object.fromEntries(result) + const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]); + return Object.fromEntries(result); } const variants = config.variants ?? {}; @@ -24,7 +29,10 @@ export function sva(config) { function splitVariantProps(props) { return splitProps(props, variantKeys); } - const getVariantProps = (variants) => ({ ...(defaultVariants || {}), ...compact(variants) }) + const getVariantProps = (variants) => ({ + ...(defaultVariants || {}), + ...compact(variants), + }); const variantMap = Object.fromEntries( Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) @@ -37,5 +45,5 @@ export function sva(config) { variantKeys, splitVariantProps, getVariantProps, - }) -} \ No newline at end of file + }); +} diff --git a/apps/wow-docs/styled-system/patterns/aspect-ratio.d.ts b/apps/wow-docs/styled-system/patterns/aspect-ratio.d.ts index 666c374f..c07557c2 100644 --- a/apps/wow-docs/styled-system/patterns/aspect-ratio.d.ts +++ b/apps/wow-docs/styled-system/patterns/aspect-ratio.d.ts @@ -1,21 +1,24 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface AspectRatioProperties { - ratio?: ConditionalValue + ratio?: ConditionalValue; } - -interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit {} +interface AspectRatioStyles + extends AspectRatioProperties, + DistributiveOmit< + SystemStyleObject, + keyof AspectRatioProperties | "aspectRatio" + > {} interface AspectRatioPatternFn { - (styles?: AspectRatioStyles): string - raw: (styles?: AspectRatioStyles) => SystemStyleObject + (styles?: AspectRatioStyles): string; + raw: (styles?: AspectRatioStyles) => SystemStyleObject; } - export declare const aspectRatio: AspectRatioPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/aspect-ratio.js b/apps/wow-docs/styled-system/patterns/aspect-ratio.js index a56943fc..ab8cbbdb 100644 --- a/apps/wow-docs/styled-system/patterns/aspect-ratio.js +++ b/apps/wow-docs/styled-system/patterns/aspect-ratio.js @@ -1,38 +1,39 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const aspectRatioConfig = { -transform(props, { map }) { - const { ratio = 4 / 3, ...rest } = props; - return { - position: "relative", - _before: { - content: `""`, - display: "block", - height: "0", - paddingBottom: map(ratio, (r) => `${1 / r * 100}%`) - }, - "&>*": { - display: "flex", - justifyContent: "center", - alignItems: "center", - overflow: "hidden", - position: "absolute", - inset: "0", - width: "100%", - height: "100%" - }, - "&>img, &>video": { - objectFit: "cover" - }, - ...rest - }; -}} + transform(props, { map }) { + const { ratio = 4 / 3, ...rest } = props; + return { + position: "relative", + _before: { + content: `""`, + display: "block", + height: "0", + paddingBottom: map(ratio, (r) => `${(1 / r) * 100}%`), + }, + "&>*": { + display: "flex", + justifyContent: "center", + alignItems: "center", + overflow: "hidden", + position: "absolute", + inset: "0", + width: "100%", + height: "100%", + }, + "&>img, &>video": { + objectFit: "cover", + }, + ...rest, + }; + }, +}; export const getAspectRatioStyle = (styles = {}) => { - const _styles = getPatternStyles(aspectRatioConfig, styles) - return aspectRatioConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(aspectRatioConfig, styles); + return aspectRatioConfig.transform(_styles, patternFns); +}; -export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)) -aspectRatio.raw = getAspectRatioStyle \ No newline at end of file +export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)); +aspectRatio.raw = getAspectRatioStyle; diff --git a/apps/wow-docs/styled-system/patterns/bleed.d.ts b/apps/wow-docs/styled-system/patterns/bleed.d.ts index 6573c635..929dac9a 100644 --- a/apps/wow-docs/styled-system/patterns/bleed.d.ts +++ b/apps/wow-docs/styled-system/patterns/bleed.d.ts @@ -1,22 +1,22 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface BleedProperties { - inline?: SystemProperties["marginInline"] - block?: SystemProperties["marginBlock"] + inline?: SystemProperties["marginInline"]; + block?: SystemProperties["marginBlock"]; } - -interface BleedStyles extends BleedProperties, DistributiveOmit {} +interface BleedStyles + extends BleedProperties, + DistributiveOmit {} interface BleedPatternFn { - (styles?: BleedStyles): string - raw: (styles?: BleedStyles) => SystemStyleObject + (styles?: BleedStyles): string; + raw: (styles?: BleedStyles) => SystemStyleObject; } - export declare const bleed: BleedPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/bleed.js b/apps/wow-docs/styled-system/patterns/bleed.js index 17c7b95c..47e446b4 100644 --- a/apps/wow-docs/styled-system/patterns/bleed.js +++ b/apps/wow-docs/styled-system/patterns/bleed.js @@ -1,24 +1,26 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const bleedConfig = { -transform(props, { map, isCssUnit, isCssVar }) { - const { inline, block, ...rest } = props; - const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`; - return { - "--bleed-x": map(inline, valueFn), - "--bleed-y": map(block, valueFn), - marginInline: "calc(var(--bleed-x, 0) * -1)", - marginBlock: "calc(var(--bleed-y, 0) * -1)", - ...rest - }; -}, -defaultValues:{inline:'0',block:'0'}} + transform(props, { map, isCssUnit, isCssVar }) { + const { inline, block, ...rest } = props; + const valueFn = (v) => + isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`; + return { + "--bleed-x": map(inline, valueFn), + "--bleed-y": map(block, valueFn), + marginInline: "calc(var(--bleed-x, 0) * -1)", + marginBlock: "calc(var(--bleed-y, 0) * -1)", + ...rest, + }; + }, + defaultValues: { inline: "0", block: "0" }, +}; export const getBleedStyle = (styles = {}) => { - const _styles = getPatternStyles(bleedConfig, styles) - return bleedConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(bleedConfig, styles); + return bleedConfig.transform(_styles, patternFns); +}; -export const bleed = (styles) => css(getBleedStyle(styles)) -bleed.raw = getBleedStyle \ No newline at end of file +export const bleed = (styles) => css(getBleedStyle(styles)); +bleed.raw = getBleedStyle; diff --git a/apps/wow-docs/styled-system/patterns/box.d.ts b/apps/wow-docs/styled-system/patterns/box.d.ts index a7935007..348f80d9 100644 --- a/apps/wow-docs/styled-system/patterns/box.d.ts +++ b/apps/wow-docs/styled-system/patterns/box.d.ts @@ -1,21 +1,19 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; - -export interface BoxProperties { - -} +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; +export interface BoxProperties {} -interface BoxStyles extends BoxProperties, DistributiveOmit {} +interface BoxStyles + extends BoxProperties, + DistributiveOmit {} interface BoxPatternFn { - (styles?: BoxStyles): string - raw: (styles?: BoxStyles) => SystemStyleObject + (styles?: BoxStyles): string; + raw: (styles?: BoxStyles) => SystemStyleObject; } - export declare const box: BoxPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/box.js b/apps/wow-docs/styled-system/patterns/box.js index 9be49d99..b3c94ef0 100644 --- a/apps/wow-docs/styled-system/patterns/box.js +++ b/apps/wow-docs/styled-system/patterns/box.js @@ -1,15 +1,16 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const boxConfig = { -transform(props) { - return props; -}} + transform(props) { + return props; + }, +}; export const getBoxStyle = (styles = {}) => { - const _styles = getPatternStyles(boxConfig, styles) - return boxConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(boxConfig, styles); + return boxConfig.transform(_styles, patternFns); +}; -export const box = (styles) => css(getBoxStyle(styles)) -box.raw = getBoxStyle \ No newline at end of file +export const box = (styles) => css(getBoxStyle(styles)); +box.raw = getBoxStyle; diff --git a/apps/wow-docs/styled-system/patterns/center.d.ts b/apps/wow-docs/styled-system/patterns/center.d.ts index 8419f3c6..b03f66d1 100644 --- a/apps/wow-docs/styled-system/patterns/center.d.ts +++ b/apps/wow-docs/styled-system/patterns/center.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface CenterProperties { - inline?: ConditionalValue + inline?: ConditionalValue; } - -interface CenterStyles extends CenterProperties, DistributiveOmit {} +interface CenterStyles + extends CenterProperties, + DistributiveOmit {} interface CenterPatternFn { - (styles?: CenterStyles): string - raw: (styles?: CenterStyles) => SystemStyleObject + (styles?: CenterStyles): string; + raw: (styles?: CenterStyles) => SystemStyleObject; } - export declare const center: CenterPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/center.js b/apps/wow-docs/styled-system/patterns/center.js index 3eb743b5..ebf85ba4 100644 --- a/apps/wow-docs/styled-system/patterns/center.js +++ b/apps/wow-docs/styled-system/patterns/center.js @@ -1,21 +1,22 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const centerConfig = { -transform(props) { - const { inline, ...rest } = props; - return { - display: inline ? "inline-flex" : "flex", - alignItems: "center", - justifyContent: "center", - ...rest - }; -}} + transform(props) { + const { inline, ...rest } = props; + return { + display: inline ? "inline-flex" : "flex", + alignItems: "center", + justifyContent: "center", + ...rest, + }; + }, +}; export const getCenterStyle = (styles = {}) => { - const _styles = getPatternStyles(centerConfig, styles) - return centerConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(centerConfig, styles); + return centerConfig.transform(_styles, patternFns); +}; -export const center = (styles) => css(getCenterStyle(styles)) -center.raw = getCenterStyle \ No newline at end of file +export const center = (styles) => css(getCenterStyle(styles)); +center.raw = getCenterStyle; diff --git a/apps/wow-docs/styled-system/patterns/circle.d.ts b/apps/wow-docs/styled-system/patterns/circle.d.ts index d6759d86..76122a0d 100644 --- a/apps/wow-docs/styled-system/patterns/circle.d.ts +++ b/apps/wow-docs/styled-system/patterns/circle.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface CircleProperties { - size?: SystemProperties["width"] + size?: SystemProperties["width"]; } - -interface CircleStyles extends CircleProperties, DistributiveOmit {} +interface CircleStyles + extends CircleProperties, + DistributiveOmit {} interface CirclePatternFn { - (styles?: CircleStyles): string - raw: (styles?: CircleStyles) => SystemStyleObject + (styles?: CircleStyles): string; + raw: (styles?: CircleStyles) => SystemStyleObject; } - export declare const circle: CirclePatternFn; diff --git a/apps/wow-docs/styled-system/patterns/circle.js b/apps/wow-docs/styled-system/patterns/circle.js index 2082c7f3..a32616dc 100644 --- a/apps/wow-docs/styled-system/patterns/circle.js +++ b/apps/wow-docs/styled-system/patterns/circle.js @@ -1,25 +1,26 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const circleConfig = { -transform(props) { - const { size, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: "0 0 auto", - width: size, - height: size, - borderRadius: "9999px", - ...rest - }; -}} + transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + borderRadius: "9999px", + ...rest, + }; + }, +}; export const getCircleStyle = (styles = {}) => { - const _styles = getPatternStyles(circleConfig, styles) - return circleConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(circleConfig, styles); + return circleConfig.transform(_styles, patternFns); +}; -export const circle = (styles) => css(getCircleStyle(styles)) -circle.raw = getCircleStyle \ No newline at end of file +export const circle = (styles) => css(getCircleStyle(styles)); +circle.raw = getCircleStyle; diff --git a/apps/wow-docs/styled-system/patterns/container.d.ts b/apps/wow-docs/styled-system/patterns/container.d.ts index 978e59d3..c3ac83aa 100644 --- a/apps/wow-docs/styled-system/patterns/container.d.ts +++ b/apps/wow-docs/styled-system/patterns/container.d.ts @@ -1,21 +1,19 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; - -export interface ContainerProperties { - -} +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; +export interface ContainerProperties {} -interface ContainerStyles extends ContainerProperties, DistributiveOmit {} +interface ContainerStyles + extends ContainerProperties, + DistributiveOmit {} interface ContainerPatternFn { - (styles?: ContainerStyles): string - raw: (styles?: ContainerStyles) => SystemStyleObject + (styles?: ContainerStyles): string; + raw: (styles?: ContainerStyles) => SystemStyleObject; } - export declare const container: ContainerPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/container.js b/apps/wow-docs/styled-system/patterns/container.js index 6cba2235..967c6048 100644 --- a/apps/wow-docs/styled-system/patterns/container.js +++ b/apps/wow-docs/styled-system/patterns/container.js @@ -1,21 +1,22 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const containerConfig = { -transform(props) { - return { - position: "relative", - maxWidth: "8xl", - mx: "auto", - px: { base: "4", md: "6", lg: "8" }, - ...props - }; -}} + transform(props) { + return { + position: "relative", + maxWidth: "8xl", + mx: "auto", + px: { base: "4", md: "6", lg: "8" }, + ...props, + }; + }, +}; export const getContainerStyle = (styles = {}) => { - const _styles = getPatternStyles(containerConfig, styles) - return containerConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(containerConfig, styles); + return containerConfig.transform(_styles, patternFns); +}; -export const container = (styles) => css(getContainerStyle(styles)) -container.raw = getContainerStyle \ No newline at end of file +export const container = (styles) => css(getContainerStyle(styles)); +container.raw = getContainerStyle; diff --git a/apps/wow-docs/styled-system/patterns/cq.d.ts b/apps/wow-docs/styled-system/patterns/cq.d.ts index ee5ae932..3a52ab09 100644 --- a/apps/wow-docs/styled-system/patterns/cq.d.ts +++ b/apps/wow-docs/styled-system/patterns/cq.d.ts @@ -1,22 +1,24 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface CqProperties { - name?: ConditionalValue - type?: SystemProperties["containerType"] + name?: ConditionalValue< + Tokens["containerNames"] | Properties["containerName"] + >; + type?: SystemProperties["containerType"]; } - -interface CqStyles extends CqProperties, DistributiveOmit {} +interface CqStyles + extends CqProperties, + DistributiveOmit {} interface CqPatternFn { - (styles?: CqStyles): string - raw: (styles?: CqStyles) => SystemStyleObject + (styles?: CqStyles): string; + raw: (styles?: CqStyles) => SystemStyleObject; } - export declare const cq: CqPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/cq.js b/apps/wow-docs/styled-system/patterns/cq.js index 8d6031d4..c43fd390 100644 --- a/apps/wow-docs/styled-system/patterns/cq.js +++ b/apps/wow-docs/styled-system/patterns/cq.js @@ -1,21 +1,22 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const cqConfig = { -transform(props) { - const { name, type, ...rest } = props; - return { - containerType: type, - containerName: name, - ...rest - }; -}, -defaultValues:{type:'inline-size'}} + transform(props) { + const { name, type, ...rest } = props; + return { + containerType: type, + containerName: name, + ...rest, + }; + }, + defaultValues: { type: "inline-size" }, +}; export const getCqStyle = (styles = {}) => { - const _styles = getPatternStyles(cqConfig, styles) - return cqConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(cqConfig, styles); + return cqConfig.transform(_styles, patternFns); +}; -export const cq = (styles) => css(getCqStyle(styles)) -cq.raw = getCqStyle \ No newline at end of file +export const cq = (styles) => css(getCqStyle(styles)); +cq.raw = getCqStyle; diff --git a/apps/wow-docs/styled-system/patterns/divider.d.ts b/apps/wow-docs/styled-system/patterns/divider.d.ts index a6923c4d..c7e94fef 100644 --- a/apps/wow-docs/styled-system/patterns/divider.d.ts +++ b/apps/wow-docs/styled-system/patterns/divider.d.ts @@ -1,23 +1,23 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface DividerProperties { - orientation?: ConditionalValue<"horizontal" | "vertical"> - thickness?: ConditionalValue - color?: ConditionalValue + orientation?: ConditionalValue<"horizontal" | "vertical">; + thickness?: ConditionalValue; + color?: ConditionalValue; } - -interface DividerStyles extends DividerProperties, DistributiveOmit {} +interface DividerStyles + extends DividerProperties, + DistributiveOmit {} interface DividerPatternFn { - (styles?: DividerStyles): string - raw: (styles?: DividerStyles) => SystemStyleObject + (styles?: DividerStyles): string; + raw: (styles?: DividerStyles) => SystemStyleObject; } - export declare const divider: DividerPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/divider.js b/apps/wow-docs/styled-system/patterns/divider.js index 005e94af..7f10a043 100644 --- a/apps/wow-docs/styled-system/patterns/divider.js +++ b/apps/wow-docs/styled-system/patterns/divider.js @@ -1,25 +1,30 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const dividerConfig = { -transform(props, { map }) { - const { orientation, thickness, color, ...rest } = props; - return { - "--thickness": thickness, - width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"), - height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"), - borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0), - borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0), - borderColor: color, - ...rest - }; -}, -defaultValues:{orientation:'horizontal',thickness:'1px'}} + transform(props, { map }) { + const { orientation, thickness, color, ...rest } = props; + return { + "--thickness": thickness, + width: map(orientation, (v) => (v === "vertical" ? void 0 : "100%")), + height: map(orientation, (v) => (v === "horizontal" ? void 0 : "100%")), + borderBlockEndWidth: map(orientation, (v) => + v === "horizontal" ? "var(--thickness)" : void 0 + ), + borderInlineEndWidth: map(orientation, (v) => + v === "vertical" ? "var(--thickness)" : void 0 + ), + borderColor: color, + ...rest, + }; + }, + defaultValues: { orientation: "horizontal", thickness: "1px" }, +}; export const getDividerStyle = (styles = {}) => { - const _styles = getPatternStyles(dividerConfig, styles) - return dividerConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(dividerConfig, styles); + return dividerConfig.transform(_styles, patternFns); +}; -export const divider = (styles) => css(getDividerStyle(styles)) -divider.raw = getDividerStyle \ No newline at end of file +export const divider = (styles) => css(getDividerStyle(styles)); +divider.raw = getDividerStyle; diff --git a/apps/wow-docs/styled-system/patterns/flex.d.ts b/apps/wow-docs/styled-system/patterns/flex.d.ts index 71d5308b..e4b03bde 100644 --- a/apps/wow-docs/styled-system/patterns/flex.d.ts +++ b/apps/wow-docs/styled-system/patterns/flex.d.ts @@ -1,27 +1,27 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface FlexProperties { - align?: SystemProperties["alignItems"] - justify?: SystemProperties["justifyContent"] - direction?: SystemProperties["flexDirection"] - wrap?: SystemProperties["flexWrap"] - basis?: SystemProperties["flexBasis"] - grow?: SystemProperties["flexGrow"] - shrink?: SystemProperties["flexShrink"] + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; + direction?: SystemProperties["flexDirection"]; + wrap?: SystemProperties["flexWrap"]; + basis?: SystemProperties["flexBasis"]; + grow?: SystemProperties["flexGrow"]; + shrink?: SystemProperties["flexShrink"]; } - -interface FlexStyles extends FlexProperties, DistributiveOmit {} +interface FlexStyles + extends FlexProperties, + DistributiveOmit {} interface FlexPatternFn { - (styles?: FlexStyles): string - raw: (styles?: FlexStyles) => SystemStyleObject + (styles?: FlexStyles): string; + raw: (styles?: FlexStyles) => SystemStyleObject; } - export declare const flex: FlexPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/flex.js b/apps/wow-docs/styled-system/patterns/flex.js index 0f00537c..3605cb1f 100644 --- a/apps/wow-docs/styled-system/patterns/flex.js +++ b/apps/wow-docs/styled-system/patterns/flex.js @@ -1,26 +1,36 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const flexConfig = { -transform(props) { - const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props; - return { - display: "flex", - flexDirection: direction, - alignItems: align, - justifyContent: justify, - flexWrap: wrap2, - flexBasis: basis, - flexGrow: grow, - flexShrink: shrink, - ...rest - }; -}} + transform(props) { + const { + direction, + align, + justify, + wrap: wrap2, + basis, + grow, + shrink, + ...rest + } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + flexWrap: wrap2, + flexBasis: basis, + flexGrow: grow, + flexShrink: shrink, + ...rest, + }; + }, +}; export const getFlexStyle = (styles = {}) => { - const _styles = getPatternStyles(flexConfig, styles) - return flexConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(flexConfig, styles); + return flexConfig.transform(_styles, patternFns); +}; -export const flex = (styles) => css(getFlexStyle(styles)) -flex.raw = getFlexStyle \ No newline at end of file +export const flex = (styles) => css(getFlexStyle(styles)); +flex.raw = getFlexStyle; diff --git a/apps/wow-docs/styled-system/patterns/float.d.ts b/apps/wow-docs/styled-system/patterns/float.d.ts index 07ea9c36..f841cfec 100644 --- a/apps/wow-docs/styled-system/patterns/float.d.ts +++ b/apps/wow-docs/styled-system/patterns/float.d.ts @@ -1,24 +1,34 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface FloatProperties { - offsetX?: ConditionalValue - offsetY?: ConditionalValue - offset?: ConditionalValue - placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"> + offsetX?: ConditionalValue; + offsetY?: ConditionalValue; + offset?: ConditionalValue; + placement?: ConditionalValue< + | "bottom-end" + | "bottom-start" + | "top-end" + | "top-start" + | "bottom-center" + | "top-center" + | "middle-center" + | "middle-end" + | "middle-start" + >; } - -interface FloatStyles extends FloatProperties, DistributiveOmit {} +interface FloatStyles + extends FloatProperties, + DistributiveOmit {} interface FloatPatternFn { - (styles?: FloatStyles): string - raw: (styles?: FloatStyles) => SystemStyleObject + (styles?: FloatStyles): string; + raw: (styles?: FloatStyles) => SystemStyleObject; } - export declare const float: FloatPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/float.js b/apps/wow-docs/styled-system/patterns/float.js index a3d40546..dac187ec 100644 --- a/apps/wow-docs/styled-system/patterns/float.js +++ b/apps/wow-docs/styled-system/patterns/float.js @@ -1,52 +1,53 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const floatConfig = { -transform(props, { map }) { - const { offset, offsetX, offsetY, placement, ...rest } = props; - return { - display: "inline-flex", - justifyContent: "center", - alignItems: "center", - position: "absolute", - insetBlockStart: map(placement, (v) => { - const [side] = v.split("-"); - const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; - return map2[side]; - }), - insetBlockEnd: map(placement, (v) => { - const [side] = v.split("-"); - const map2 = { top: "auto", middle: "50%", bottom: offsetY }; - return map2[side]; - }), - insetInlineStart: map(placement, (v) => { - const [, align] = v.split("-"); - const map2 = { start: offsetX, center: "50%", end: "auto" }; - return map2[align]; - }), - insetInlineEnd: map(placement, (v) => { - const [, align] = v.split("-"); - const map2 = { start: "auto", center: "50%", end: offsetX }; - return map2[align]; - }), - translate: map(placement, (v) => { - const [side, align] = v.split("-"); - const mapX = { start: "-50%", center: "-50%", end: "50%" }; - const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; - return `${mapX[align]} ${mapY[side]}`; - }), - ...rest - }; -}, -defaultValues(props) { - const offset = props.offset || "0"; - return { offset, offsetX: offset, offsetY: offset, placement: "top-end" }; -}} + transform(props, { map }) { + const { offset, offsetX, offsetY, placement, ...rest } = props; + return { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + position: "absolute", + insetBlockStart: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; + return map2[side]; + }), + insetBlockEnd: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: "auto", middle: "50%", bottom: offsetY }; + return map2[side]; + }), + insetInlineStart: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: offsetX, center: "50%", end: "auto" }; + return map2[align]; + }), + insetInlineEnd: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: "auto", center: "50%", end: offsetX }; + return map2[align]; + }), + translate: map(placement, (v) => { + const [side, align] = v.split("-"); + const mapX = { start: "-50%", center: "-50%", end: "50%" }; + const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; + return `${mapX[align]} ${mapY[side]}`; + }), + ...rest, + }; + }, + defaultValues(props) { + const offset = props.offset || "0"; + return { offset, offsetX: offset, offsetY: offset, placement: "top-end" }; + }, +}; export const getFloatStyle = (styles = {}) => { - const _styles = getPatternStyles(floatConfig, styles) - return floatConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(floatConfig, styles); + return floatConfig.transform(_styles, patternFns); +}; -export const float = (styles) => css(getFloatStyle(styles)) -float.raw = getFloatStyle \ No newline at end of file +export const float = (styles) => css(getFloatStyle(styles)); +float.raw = getFloatStyle; diff --git a/apps/wow-docs/styled-system/patterns/grid-item.d.ts b/apps/wow-docs/styled-system/patterns/grid-item.d.ts index 2301ae59..1753e288 100644 --- a/apps/wow-docs/styled-system/patterns/grid-item.d.ts +++ b/apps/wow-docs/styled-system/patterns/grid-item.d.ts @@ -1,26 +1,26 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface GridItemProperties { - colSpan?: ConditionalValue - rowSpan?: ConditionalValue - colStart?: ConditionalValue - rowStart?: ConditionalValue - colEnd?: ConditionalValue - rowEnd?: ConditionalValue + colSpan?: ConditionalValue; + rowSpan?: ConditionalValue; + colStart?: ConditionalValue; + rowStart?: ConditionalValue; + colEnd?: ConditionalValue; + rowEnd?: ConditionalValue; } - -interface GridItemStyles extends GridItemProperties, DistributiveOmit {} +interface GridItemStyles + extends GridItemProperties, + DistributiveOmit {} interface GridItemPatternFn { - (styles?: GridItemStyles): string - raw: (styles?: GridItemStyles) => SystemStyleObject + (styles?: GridItemStyles): string; + raw: (styles?: GridItemStyles) => SystemStyleObject; } - export declare const gridItem: GridItemPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/grid-item.js b/apps/wow-docs/styled-system/patterns/grid-item.js index ca767a81..0962348d 100644 --- a/apps/wow-docs/styled-system/patterns/grid-item.js +++ b/apps/wow-docs/styled-system/patterns/grid-item.js @@ -1,25 +1,27 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const gridItemConfig = { -transform(props, { map }) { - const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props; - const spanFn = (v) => v === "auto" ? v : `span ${v}`; - return { - gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, - gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, - gridColumnStart: colStart, - gridColumnEnd: colEnd, - gridRowStart: rowStart, - gridRowEnd: rowEnd, - ...rest - }; -}} + transform(props, { map }) { + const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = + props; + const spanFn = (v) => (v === "auto" ? v : `span ${v}`); + return { + gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, + gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, + gridColumnStart: colStart, + gridColumnEnd: colEnd, + gridRowStart: rowStart, + gridRowEnd: rowEnd, + ...rest, + }; + }, +}; export const getGridItemStyle = (styles = {}) => { - const _styles = getPatternStyles(gridItemConfig, styles) - return gridItemConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(gridItemConfig, styles); + return gridItemConfig.transform(_styles, patternFns); +}; -export const gridItem = (styles) => css(getGridItemStyle(styles)) -gridItem.raw = getGridItemStyle \ No newline at end of file +export const gridItem = (styles) => css(getGridItemStyle(styles)); +gridItem.raw = getGridItemStyle; diff --git a/apps/wow-docs/styled-system/patterns/grid.d.ts b/apps/wow-docs/styled-system/patterns/grid.d.ts index 96180bda..95038cb5 100644 --- a/apps/wow-docs/styled-system/patterns/grid.d.ts +++ b/apps/wow-docs/styled-system/patterns/grid.d.ts @@ -1,25 +1,25 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface GridProperties { - gap?: SystemProperties["gap"] - columnGap?: SystemProperties["gap"] - rowGap?: SystemProperties["gap"] - columns?: ConditionalValue - minChildWidth?: ConditionalValue + gap?: SystemProperties["gap"]; + columnGap?: SystemProperties["gap"]; + rowGap?: SystemProperties["gap"]; + columns?: ConditionalValue; + minChildWidth?: ConditionalValue; } - -interface GridStyles extends GridProperties, DistributiveOmit {} +interface GridStyles + extends GridProperties, + DistributiveOmit {} interface GridPatternFn { - (styles?: GridStyles): string - raw: (styles?: GridStyles) => SystemStyleObject + (styles?: GridStyles): string; + raw: (styles?: GridStyles) => SystemStyleObject; } - export declare const grid: GridPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/grid.js b/apps/wow-docs/styled-system/patterns/grid.js index a7897a2d..d81ed5e9 100644 --- a/apps/wow-docs/styled-system/patterns/grid.js +++ b/apps/wow-docs/styled-system/patterns/grid.js @@ -1,27 +1,36 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const gridConfig = { -transform(props, { map, isCssUnit }) { - const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props; - const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`; - return { - display: "grid", - gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0, - gap, - columnGap, - rowGap, - ...rest - }; -}, -defaultValues(props) { - return { gap: props.columnGap || props.rowGap ? void 0 : "10px" }; -}} + transform(props, { map, isCssUnit }) { + const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props; + const getValue = (v) => (isCssUnit(v) ? v : `token(sizes.${v}, ${v})`); + return { + display: "grid", + gridTemplateColumns: + columns != null + ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) + : minChildWidth != null + ? map( + minChildWidth, + (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))` + ) + : void 0, + gap, + columnGap, + rowGap, + ...rest, + }; + }, + defaultValues(props) { + return { gap: props.columnGap || props.rowGap ? void 0 : "10px" }; + }, +}; export const getGridStyle = (styles = {}) => { - const _styles = getPatternStyles(gridConfig, styles) - return gridConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(gridConfig, styles); + return gridConfig.transform(_styles, patternFns); +}; -export const grid = (styles) => css(getGridStyle(styles)) -grid.raw = getGridStyle \ No newline at end of file +export const grid = (styles) => css(getGridStyle(styles)); +grid.raw = getGridStyle; diff --git a/apps/wow-docs/styled-system/patterns/hstack.d.ts b/apps/wow-docs/styled-system/patterns/hstack.d.ts index 05b0d670..6ccd4c40 100644 --- a/apps/wow-docs/styled-system/patterns/hstack.d.ts +++ b/apps/wow-docs/styled-system/patterns/hstack.d.ts @@ -1,22 +1,22 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface HstackProperties { - justify?: SystemProperties["justifyContent"] - gap?: SystemProperties["gap"] + justify?: SystemProperties["justifyContent"]; + gap?: SystemProperties["gap"]; } - -interface HstackStyles extends HstackProperties, DistributiveOmit {} +interface HstackStyles + extends HstackProperties, + DistributiveOmit {} interface HstackPatternFn { - (styles?: HstackStyles): string - raw: (styles?: HstackStyles) => SystemStyleObject + (styles?: HstackStyles): string; + raw: (styles?: HstackStyles) => SystemStyleObject; } - export declare const hstack: HstackPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/hstack.js b/apps/wow-docs/styled-system/patterns/hstack.js index a2603308..9e654636 100644 --- a/apps/wow-docs/styled-system/patterns/hstack.js +++ b/apps/wow-docs/styled-system/patterns/hstack.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const hstackConfig = { -transform(props) { - const { justify, gap, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: justify, - gap, - flexDirection: "row", - ...rest - }; -}, -defaultValues:{gap:'10px'}} + transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "row", + ...rest, + }; + }, + defaultValues: { gap: "10px" }, +}; export const getHstackStyle = (styles = {}) => { - const _styles = getPatternStyles(hstackConfig, styles) - return hstackConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(hstackConfig, styles); + return hstackConfig.transform(_styles, patternFns); +}; -export const hstack = (styles) => css(getHstackStyle(styles)) -hstack.raw = getHstackStyle \ No newline at end of file +export const hstack = (styles) => css(getHstackStyle(styles)); +hstack.raw = getHstackStyle; diff --git a/apps/wow-docs/styled-system/patterns/index.d.ts b/apps/wow-docs/styled-system/patterns/index.d.ts index 11168918..b8d39591 100644 --- a/apps/wow-docs/styled-system/patterns/index.d.ts +++ b/apps/wow-docs/styled-system/patterns/index.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -export * from './box'; -export * from './flex'; -export * from './stack'; -export * from './vstack'; -export * from './hstack'; -export * from './spacer'; -export * from './square'; -export * from './circle'; -export * from './center'; -export * from './link-overlay'; -export * from './aspect-ratio'; -export * from './grid'; -export * from './grid-item'; -export * from './wrap'; -export * from './container'; -export * from './divider'; -export * from './float'; -export * from './bleed'; -export * from './visually-hidden'; -export * from './cq'; \ No newline at end of file +export * from "./box"; +export * from "./flex"; +export * from "./stack"; +export * from "./vstack"; +export * from "./hstack"; +export * from "./spacer"; +export * from "./square"; +export * from "./circle"; +export * from "./center"; +export * from "./link-overlay"; +export * from "./aspect-ratio"; +export * from "./grid"; +export * from "./grid-item"; +export * from "./wrap"; +export * from "./container"; +export * from "./divider"; +export * from "./float"; +export * from "./bleed"; +export * from "./visually-hidden"; +export * from "./cq"; diff --git a/apps/wow-docs/styled-system/patterns/index.js b/apps/wow-docs/styled-system/patterns/index.js index 4cc24644..472c1175 100644 --- a/apps/wow-docs/styled-system/patterns/index.js +++ b/apps/wow-docs/styled-system/patterns/index.js @@ -1,20 +1,20 @@ -export * from './box.js'; -export * from './flex.js'; -export * from './stack.js'; -export * from './vstack.js'; -export * from './hstack.js'; -export * from './spacer.js'; -export * from './square.js'; -export * from './circle.js'; -export * from './center.js'; -export * from './link-overlay.js'; -export * from './aspect-ratio.js'; -export * from './grid.js'; -export * from './grid-item.js'; -export * from './wrap.js'; -export * from './container.js'; -export * from './divider.js'; -export * from './float.js'; -export * from './bleed.js'; -export * from './visually-hidden.js'; -export * from './cq.js'; \ No newline at end of file +export * from "./box.js"; +export * from "./flex.js"; +export * from "./stack.js"; +export * from "./vstack.js"; +export * from "./hstack.js"; +export * from "./spacer.js"; +export * from "./square.js"; +export * from "./circle.js"; +export * from "./center.js"; +export * from "./link-overlay.js"; +export * from "./aspect-ratio.js"; +export * from "./grid.js"; +export * from "./grid-item.js"; +export * from "./wrap.js"; +export * from "./container.js"; +export * from "./divider.js"; +export * from "./float.js"; +export * from "./bleed.js"; +export * from "./visually-hidden.js"; +export * from "./cq.js"; diff --git a/apps/wow-docs/styled-system/patterns/link-overlay.d.ts b/apps/wow-docs/styled-system/patterns/link-overlay.d.ts index 565005a8..b03eaf15 100644 --- a/apps/wow-docs/styled-system/patterns/link-overlay.d.ts +++ b/apps/wow-docs/styled-system/patterns/link-overlay.d.ts @@ -1,21 +1,19 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; - -export interface LinkOverlayProperties { - -} +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; +export interface LinkOverlayProperties {} -interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit {} +interface LinkOverlayStyles + extends LinkOverlayProperties, + DistributiveOmit {} interface LinkOverlayPatternFn { - (styles?: LinkOverlayStyles): string - raw: (styles?: LinkOverlayStyles) => SystemStyleObject + (styles?: LinkOverlayStyles): string; + raw: (styles?: LinkOverlayStyles) => SystemStyleObject; } - export declare const linkOverlay: LinkOverlayPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/link-overlay.js b/apps/wow-docs/styled-system/patterns/link-overlay.js index 01afd3d9..5ce7833b 100644 --- a/apps/wow-docs/styled-system/patterns/link-overlay.js +++ b/apps/wow-docs/styled-system/patterns/link-overlay.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const linkOverlayConfig = { -transform(props) { - return { - _before: { - content: '""', - position: "absolute", - inset: "0", - zIndex: "0", - ...props["_before"] - }, - ...props - }; -}} + transform(props) { + return { + _before: { + content: '""', + position: "absolute", + inset: "0", + zIndex: "0", + ...props["_before"], + }, + ...props, + }; + }, +}; export const getLinkOverlayStyle = (styles = {}) => { - const _styles = getPatternStyles(linkOverlayConfig, styles) - return linkOverlayConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(linkOverlayConfig, styles); + return linkOverlayConfig.transform(_styles, patternFns); +}; -export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)) -linkOverlay.raw = getLinkOverlayStyle \ No newline at end of file +export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)); +linkOverlay.raw = getLinkOverlayStyle; diff --git a/apps/wow-docs/styled-system/patterns/spacer.d.ts b/apps/wow-docs/styled-system/patterns/spacer.d.ts index 4fba408c..47331f26 100644 --- a/apps/wow-docs/styled-system/patterns/spacer.d.ts +++ b/apps/wow-docs/styled-system/patterns/spacer.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface SpacerProperties { - size?: ConditionalValue + size?: ConditionalValue; } - -interface SpacerStyles extends SpacerProperties, DistributiveOmit {} +interface SpacerStyles + extends SpacerProperties, + DistributiveOmit {} interface SpacerPatternFn { - (styles?: SpacerStyles): string - raw: (styles?: SpacerStyles) => SystemStyleObject + (styles?: SpacerStyles): string; + raw: (styles?: SpacerStyles) => SystemStyleObject; } - export declare const spacer: SpacerPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/spacer.js b/apps/wow-docs/styled-system/patterns/spacer.js index e6563fe6..5db15a6b 100644 --- a/apps/wow-docs/styled-system/patterns/spacer.js +++ b/apps/wow-docs/styled-system/patterns/spacer.js @@ -1,21 +1,22 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const spacerConfig = { -transform(props, { map }) { - const { size, ...rest } = props; - return { - alignSelf: "stretch", - justifySelf: "stretch", - flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`), - ...rest - }; -}} + transform(props, { map }) { + const { size, ...rest } = props; + return { + alignSelf: "stretch", + justifySelf: "stretch", + flex: map(size, (v) => (v == null ? "1" : `0 0 ${v}`)), + ...rest, + }; + }, +}; export const getSpacerStyle = (styles = {}) => { - const _styles = getPatternStyles(spacerConfig, styles) - return spacerConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(spacerConfig, styles); + return spacerConfig.transform(_styles, patternFns); +}; -export const spacer = (styles) => css(getSpacerStyle(styles)) -spacer.raw = getSpacerStyle \ No newline at end of file +export const spacer = (styles) => css(getSpacerStyle(styles)); +spacer.raw = getSpacerStyle; diff --git a/apps/wow-docs/styled-system/patterns/square.d.ts b/apps/wow-docs/styled-system/patterns/square.d.ts index fda193f5..99660d29 100644 --- a/apps/wow-docs/styled-system/patterns/square.d.ts +++ b/apps/wow-docs/styled-system/patterns/square.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface SquareProperties { - size?: SystemProperties["width"] + size?: SystemProperties["width"]; } - -interface SquareStyles extends SquareProperties, DistributiveOmit {} +interface SquareStyles + extends SquareProperties, + DistributiveOmit {} interface SquarePatternFn { - (styles?: SquareStyles): string - raw: (styles?: SquareStyles) => SystemStyleObject + (styles?: SquareStyles): string; + raw: (styles?: SquareStyles) => SystemStyleObject; } - export declare const square: SquarePatternFn; diff --git a/apps/wow-docs/styled-system/patterns/square.js b/apps/wow-docs/styled-system/patterns/square.js index 447cac90..0cb67c14 100644 --- a/apps/wow-docs/styled-system/patterns/square.js +++ b/apps/wow-docs/styled-system/patterns/square.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const squareConfig = { -transform(props) { - const { size, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: "0 0 auto", - width: size, - height: size, - ...rest - }; -}} + transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + ...rest, + }; + }, +}; export const getSquareStyle = (styles = {}) => { - const _styles = getPatternStyles(squareConfig, styles) - return squareConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(squareConfig, styles); + return squareConfig.transform(_styles, patternFns); +}; -export const square = (styles) => css(getSquareStyle(styles)) -square.raw = getSquareStyle \ No newline at end of file +export const square = (styles) => css(getSquareStyle(styles)); +square.raw = getSquareStyle; diff --git a/apps/wow-docs/styled-system/patterns/stack.d.ts b/apps/wow-docs/styled-system/patterns/stack.d.ts index 5a6c9cef..954a5a92 100644 --- a/apps/wow-docs/styled-system/patterns/stack.d.ts +++ b/apps/wow-docs/styled-system/patterns/stack.d.ts @@ -1,24 +1,24 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface StackProperties { - align?: SystemProperties["alignItems"] - justify?: SystemProperties["justifyContent"] - direction?: SystemProperties["flexDirection"] - gap?: SystemProperties["gap"] + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; + direction?: SystemProperties["flexDirection"]; + gap?: SystemProperties["gap"]; } - -interface StackStyles extends StackProperties, DistributiveOmit {} +interface StackStyles + extends StackProperties, + DistributiveOmit {} interface StackPatternFn { - (styles?: StackStyles): string - raw: (styles?: StackStyles) => SystemStyleObject + (styles?: StackStyles): string; + raw: (styles?: StackStyles) => SystemStyleObject; } - export declare const stack: StackPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/stack.js b/apps/wow-docs/styled-system/patterns/stack.js index b0b7a3b9..2aae1c96 100644 --- a/apps/wow-docs/styled-system/patterns/stack.js +++ b/apps/wow-docs/styled-system/patterns/stack.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const stackConfig = { -transform(props) { - const { align, justify, direction, gap, ...rest } = props; - return { - display: "flex", - flexDirection: direction, - alignItems: align, - justifyContent: justify, - gap, - ...rest - }; -}, -defaultValues:{direction:'column',gap:'10px'}} + transform(props) { + const { align, justify, direction, gap, ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + gap, + ...rest, + }; + }, + defaultValues: { direction: "column", gap: "10px" }, +}; export const getStackStyle = (styles = {}) => { - const _styles = getPatternStyles(stackConfig, styles) - return stackConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(stackConfig, styles); + return stackConfig.transform(_styles, patternFns); +}; -export const stack = (styles) => css(getStackStyle(styles)) -stack.raw = getStackStyle \ No newline at end of file +export const stack = (styles) => css(getStackStyle(styles)); +stack.raw = getStackStyle; diff --git a/apps/wow-docs/styled-system/patterns/visually-hidden.d.ts b/apps/wow-docs/styled-system/patterns/visually-hidden.d.ts index 76f5e886..5da04d75 100644 --- a/apps/wow-docs/styled-system/patterns/visually-hidden.d.ts +++ b/apps/wow-docs/styled-system/patterns/visually-hidden.d.ts @@ -1,21 +1,19 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; - -export interface VisuallyHiddenProperties { - -} +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; +export interface VisuallyHiddenProperties {} -interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit {} +interface VisuallyHiddenStyles + extends VisuallyHiddenProperties, + DistributiveOmit {} interface VisuallyHiddenPatternFn { - (styles?: VisuallyHiddenStyles): string - raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject + (styles?: VisuallyHiddenStyles): string; + raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject; } - export declare const visuallyHidden: VisuallyHiddenPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/visually-hidden.js b/apps/wow-docs/styled-system/patterns/visually-hidden.js index f23d1a2d..7bc5c84a 100644 --- a/apps/wow-docs/styled-system/patterns/visually-hidden.js +++ b/apps/wow-docs/styled-system/patterns/visually-hidden.js @@ -1,18 +1,19 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const visuallyHiddenConfig = { -transform(props) { - return { - srOnly: true, - ...props - }; -}} + transform(props) { + return { + srOnly: true, + ...props, + }; + }, +}; export const getVisuallyHiddenStyle = (styles = {}) => { - const _styles = getPatternStyles(visuallyHiddenConfig, styles) - return visuallyHiddenConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(visuallyHiddenConfig, styles); + return visuallyHiddenConfig.transform(_styles, patternFns); +}; -export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles)) -visuallyHidden.raw = getVisuallyHiddenStyle \ No newline at end of file +export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles)); +visuallyHidden.raw = getVisuallyHiddenStyle; diff --git a/apps/wow-docs/styled-system/patterns/vstack.d.ts b/apps/wow-docs/styled-system/patterns/vstack.d.ts index 4fb13221..35d2a9d9 100644 --- a/apps/wow-docs/styled-system/patterns/vstack.d.ts +++ b/apps/wow-docs/styled-system/patterns/vstack.d.ts @@ -1,22 +1,22 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface VstackProperties { - justify?: SystemProperties["justifyContent"] - gap?: SystemProperties["gap"] + justify?: SystemProperties["justifyContent"]; + gap?: SystemProperties["gap"]; } - -interface VstackStyles extends VstackProperties, DistributiveOmit {} +interface VstackStyles + extends VstackProperties, + DistributiveOmit {} interface VstackPatternFn { - (styles?: VstackStyles): string - raw: (styles?: VstackStyles) => SystemStyleObject + (styles?: VstackStyles): string; + raw: (styles?: VstackStyles) => SystemStyleObject; } - export declare const vstack: VstackPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/vstack.js b/apps/wow-docs/styled-system/patterns/vstack.js index 8f976887..a9b8195f 100644 --- a/apps/wow-docs/styled-system/patterns/vstack.js +++ b/apps/wow-docs/styled-system/patterns/vstack.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const vstackConfig = { -transform(props) { - const { justify, gap, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: justify, - gap, - flexDirection: "column", - ...rest - }; -}, -defaultValues:{gap:'10px'}} + transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "column", + ...rest, + }; + }, + defaultValues: { gap: "10px" }, +}; export const getVstackStyle = (styles = {}) => { - const _styles = getPatternStyles(vstackConfig, styles) - return vstackConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(vstackConfig, styles); + return vstackConfig.transform(_styles, patternFns); +}; -export const vstack = (styles) => css(getVstackStyle(styles)) -vstack.raw = getVstackStyle \ No newline at end of file +export const vstack = (styles) => css(getVstackStyle(styles)); +vstack.raw = getVstackStyle; diff --git a/apps/wow-docs/styled-system/patterns/wrap.d.ts b/apps/wow-docs/styled-system/patterns/wrap.d.ts index 36ba882c..29dd4541 100644 --- a/apps/wow-docs/styled-system/patterns/wrap.d.ts +++ b/apps/wow-docs/styled-system/patterns/wrap.d.ts @@ -1,25 +1,25 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface WrapProperties { - gap?: SystemProperties["gap"] - rowGap?: SystemProperties["gap"] - columnGap?: SystemProperties["gap"] - align?: SystemProperties["alignItems"] - justify?: SystemProperties["justifyContent"] + gap?: SystemProperties["gap"]; + rowGap?: SystemProperties["gap"]; + columnGap?: SystemProperties["gap"]; + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; } - -interface WrapStyles extends WrapProperties, DistributiveOmit {} +interface WrapStyles + extends WrapProperties, + DistributiveOmit {} interface WrapPatternFn { - (styles?: WrapStyles): string - raw: (styles?: WrapStyles) => SystemStyleObject + (styles?: WrapStyles): string; + raw: (styles?: WrapStyles) => SystemStyleObject; } - export declare const wrap: WrapPatternFn; diff --git a/apps/wow-docs/styled-system/patterns/wrap.js b/apps/wow-docs/styled-system/patterns/wrap.js index 80778180..b8323ed1 100644 --- a/apps/wow-docs/styled-system/patterns/wrap.js +++ b/apps/wow-docs/styled-system/patterns/wrap.js @@ -1,25 +1,33 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const wrapConfig = { -transform(props) { - const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props; - return { - display: "flex", - flexWrap: "wrap", - alignItems: align, - justifyContent: justify, - gap, - columnGap, - rowGap, - ...rest - }; -}} + transform(props) { + const { + columnGap, + rowGap, + gap = columnGap || rowGap ? void 0 : "10px", + align, + justify, + ...rest + } = props; + return { + display: "flex", + flexWrap: "wrap", + alignItems: align, + justifyContent: justify, + gap, + columnGap, + rowGap, + ...rest, + }; + }, +}; export const getWrapStyle = (styles = {}) => { - const _styles = getPatternStyles(wrapConfig, styles) - return wrapConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(wrapConfig, styles); + return wrapConfig.transform(_styles, patternFns); +}; -export const wrap = (styles) => css(getWrapStyle(styles)) -wrap.raw = getWrapStyle \ No newline at end of file +export const wrap = (styles) => css(getWrapStyle(styles)); +wrap.raw = getWrapStyle; diff --git a/apps/wow-docs/styled-system/tokens/index.d.ts b/apps/wow-docs/styled-system/tokens/index.d.ts index c398f48f..d4b2113d 100644 --- a/apps/wow-docs/styled-system/tokens/index.d.ts +++ b/apps/wow-docs/styled-system/tokens/index.d.ts @@ -1,9 +1,9 @@ /* eslint-disable */ -import type { Token } from './tokens'; +import type { Token } from "./tokens"; export declare const token: { - (path: Token, fallback?: string): string - var: (path: Token, fallback?: string) => string -} + (path: Token, fallback?: string): string; + var: (path: Token, fallback?: string) => string; +}; -export * from './tokens'; \ No newline at end of file +export * from "./tokens"; diff --git a/apps/wow-docs/styled-system/types/composition.d.ts b/apps/wow-docs/styled-system/types/composition.d.ts index 62d63dec..7e3eeeb3 100644 --- a/apps/wow-docs/styled-system/types/composition.d.ts +++ b/apps/wow-docs/styled-system/types/composition.d.ts @@ -1,13 +1,13 @@ /* eslint-disable */ -import type { CompositionStyleObject } from './system-types'; +import type { CompositionStyleObject } from "./system-types"; interface Token { - value: T - description?: string + value: T; + description?: string; } interface Recursive { - [key: string]: Recursive | T + [key: string]: Recursive | T; } /* ----------------------------------------------------------------------------- @@ -15,124 +15,124 @@ interface Recursive { * -----------------------------------------------------------------------------*/ type TextStyleProperty = - | 'font' - | 'fontFamily' - | 'fontFeatureSettings' - | 'fontKerning' - | 'fontLanguageOverride' - | 'fontOpticalSizing' - | 'fontPalette' - | 'fontSize' - | 'fontSizeAdjust' - | 'fontStretch' - | 'fontStyle' - | 'fontSynthesis' - | 'fontVariant' - | 'fontVariantAlternates' - | 'fontVariantCaps' - | 'fontVariantLigatures' - | 'fontVariantNumeric' - | 'fontVariantPosition' - | 'fontVariationSettings' - | 'fontWeight' - | 'hypens' - | 'hyphenateCharacter' - | 'hyphenateLimitChars' - | 'letterSpacing' - | 'lineBreak' - | 'lineHeight' - | 'quotes' - | 'overflowWrap' - | 'textCombineUpright' - | 'textDecoration' - | 'textDecorationColor' - | 'textDecorationLine' - | 'textDecorationSkipInk' - | 'textDecorationStyle' - | 'textDecorationThickness' - | 'textEmphasis' - | 'textEmphasisColor' - | 'textEmphasisPosition' - | 'textEmphasisStyle' - | 'textIndent' - | 'textJustify' - | 'textOrientation' - | 'textOverflow' - | 'textRendering' - | 'textShadow' - | 'textTransform' - | 'textUnderlineOffset' - | 'textUnderlinePosition' - | 'textWrap' - | 'textWrapMode' - | 'textWrapStyle' - | 'verticalAlign' - | 'whiteSpace' - | 'wordBreak' - | 'wordSpacing' + | "font" + | "fontFamily" + | "fontFeatureSettings" + | "fontKerning" + | "fontLanguageOverride" + | "fontOpticalSizing" + | "fontPalette" + | "fontSize" + | "fontSizeAdjust" + | "fontStretch" + | "fontStyle" + | "fontSynthesis" + | "fontVariant" + | "fontVariantAlternates" + | "fontVariantCaps" + | "fontVariantLigatures" + | "fontVariantNumeric" + | "fontVariantPosition" + | "fontVariationSettings" + | "fontWeight" + | "hypens" + | "hyphenateCharacter" + | "hyphenateLimitChars" + | "letterSpacing" + | "lineBreak" + | "lineHeight" + | "quotes" + | "overflowWrap" + | "textCombineUpright" + | "textDecoration" + | "textDecorationColor" + | "textDecorationLine" + | "textDecorationSkipInk" + | "textDecorationStyle" + | "textDecorationThickness" + | "textEmphasis" + | "textEmphasisColor" + | "textEmphasisPosition" + | "textEmphasisStyle" + | "textIndent" + | "textJustify" + | "textOrientation" + | "textOverflow" + | "textRendering" + | "textShadow" + | "textTransform" + | "textUnderlineOffset" + | "textUnderlinePosition" + | "textWrap" + | "textWrapMode" + | "textWrapStyle" + | "verticalAlign" + | "whiteSpace" + | "wordBreak" + | "wordSpacing"; -export type TextStyle = CompositionStyleObject +export type TextStyle = CompositionStyleObject; -export type TextStyles = Recursive> +export type TextStyles = Recursive>; /* ----------------------------------------------------------------------------- * Layer styles * -----------------------------------------------------------------------------*/ type Placement = - | 'Top' - | 'Right' - | 'Bottom' - | 'Left' - | 'Inline' - | 'Block' - | 'InlineStart' - | 'InlineEnd' - | 'BlockStart' - | 'BlockEnd' + | "Top" + | "Right" + | "Bottom" + | "Left" + | "Inline" + | "Block" + | "InlineStart" + | "InlineEnd" + | "BlockStart" + | "BlockEnd"; type Radius = - | `Top${'Right' | 'Left'}` - | `Bottom${'Right' | 'Left'}` - | `Start${'Start' | 'End'}` - | `End${'Start' | 'End'}` + | `Top${"Right" | "Left"}` + | `Bottom${"Right" | "Left"}` + | `Start${"Start" | "End"}` + | `End${"Start" | "End"}`; type LayerStyleProperty = - | 'background' - | 'backgroundColor' - | 'backgroundImage' - | 'borderRadius' - | 'border' - | 'borderWidth' - | 'borderColor' - | 'borderStyle' - | 'boxShadow' - | 'filter' - | 'backdropFilter' - | 'transform' - | 'color' - | 'opacity' - | 'backgroundBlendMode' - | 'backgroundAttachment' - | 'backgroundClip' - | 'backgroundOrigin' - | 'backgroundPosition' - | 'backgroundRepeat' - | 'backgroundSize' + | "background" + | "backgroundColor" + | "backgroundImage" + | "borderRadius" + | "border" + | "borderWidth" + | "borderColor" + | "borderStyle" + | "boxShadow" + | "filter" + | "backdropFilter" + | "transform" + | "color" + | "opacity" + | "backgroundBlendMode" + | "backgroundAttachment" + | "backgroundClip" + | "backgroundOrigin" + | "backgroundPosition" + | "backgroundRepeat" + | "backgroundSize" | `border${Placement}` | `border${Placement}Width` - | 'borderRadius' + | "borderRadius" | `border${Radius}Radius` | `border${Placement}Color` | `border${Placement}Style` - | 'padding' - | `padding${Placement}` + | "padding" + | `padding${Placement}`; -export type LayerStyle = CompositionStyleObject +export type LayerStyle = CompositionStyleObject; -export type LayerStyles = Recursive> +export type LayerStyles = Recursive>; export interface CompositionStyles { - textStyles: TextStyles - layerStyles: LayerStyles + textStyles: TextStyles; + layerStyles: LayerStyles; } diff --git a/apps/wow-docs/styled-system/types/conditions.d.ts b/apps/wow-docs/styled-system/types/conditions.d.ts index 7cff43ee..b2e811bb 100644 --- a/apps/wow-docs/styled-system/types/conditions.d.ts +++ b/apps/wow-docs/styled-system/types/conditions.d.ts @@ -1,274 +1,274 @@ /* eslint-disable */ -import type { AnySelector, Selectors } from './selectors'; +import type { AnySelector, Selectors } from "./selectors"; export interface Conditions { - /** `&:is(:hover, [data-hover])` */ - "_hover": string - /** `&:is(:focus, [data-focus])` */ - "_focus": string - /** `&:focus-within` */ - "_focusWithin": string - /** `&:is(:focus-visible, [data-focus-visible])` */ - "_focusVisible": string - /** `&:is(:disabled, [disabled], [data-disabled])` */ - "_disabled": string - /** `&:is(:active, [data-active])` */ - "_active": string - /** `&:visited` */ - "_visited": string - /** `&:target` */ - "_target": string - /** `&:is(:read-only, [data-read-only])` */ - "_readOnly": string - /** `&:read-write` */ - "_readWrite": string - /** `&:is(:empty, [data-empty])` */ - "_empty": string - /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ - "_checked": string - /** `&:enabled` */ - "_enabled": string - /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ - "_expanded": string - /** `&[data-highlighted]` */ - "_highlighted": string - /** `&::before` */ - "_before": string - /** `&::after` */ - "_after": string - /** `&::first-letter` */ - "_firstLetter": string - /** `&::first-line` */ - "_firstLine": string - /** `&::marker` */ - "_marker": string - /** `&::selection` */ - "_selection": string - /** `&::file-selector-button` */ - "_file": string - /** `&::backdrop` */ - "_backdrop": string - /** `&:first-child` */ - "_first": string - /** `&:last-child` */ - "_last": string - /** `&:only-child` */ - "_only": string - /** `&:nth-child(even)` */ - "_even": string - /** `&:nth-child(odd)` */ - "_odd": string - /** `&:first-of-type` */ - "_firstOfType": string - /** `&:last-of-type` */ - "_lastOfType": string - /** `&:only-of-type` */ - "_onlyOfType": string - /** `.peer:is(:focus, [data-focus]) ~ &` */ - "_peerFocus": string - /** `.peer:is(:hover, [data-hover]) ~ &` */ - "_peerHover": string - /** `.peer:is(:active, [data-active]) ~ &` */ - "_peerActive": string - /** `.peer:focus-within ~ &` */ - "_peerFocusWithin": string - /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ - "_peerFocusVisible": string - /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ - "_peerDisabled": string - /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ - "_peerChecked": string - /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ - "_peerInvalid": string - /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ - "_peerExpanded": string - /** `.peer:placeholder-shown ~ &` */ - "_peerPlaceholderShown": string - /** `.group:is(:focus, [data-focus]) &` */ - "_groupFocus": string - /** `.group:is(:hover, [data-hover]) &` */ - "_groupHover": string - /** `.group:is(:active, [data-active]) &` */ - "_groupActive": string - /** `.group:focus-within &` */ - "_groupFocusWithin": string - /** `.group:is(:focus-visible, [data-focus-visible]) &` */ - "_groupFocusVisible": string - /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ - "_groupDisabled": string - /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ - "_groupChecked": string - /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ - "_groupExpanded": string - /** `.group:invalid &` */ - "_groupInvalid": string - /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */ - "_indeterminate": string - /** `&:is(:required, [data-required], [aria-required=true])` */ - "_required": string - /** `&:is(:valid, [data-valid])` */ - "_valid": string - /** `&:is(:invalid, [data-invalid])` */ - "_invalid": string - /** `&:autofill` */ - "_autofill": string - /** `&:in-range` */ - "_inRange": string - /** `&:out-of-range` */ - "_outOfRange": string - /** `&::placeholder, &[data-placeholder]` */ - "_placeholder": string - /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ - "_placeholderShown": string - /** `&:is([aria-pressed=true], [data-pressed])` */ - "_pressed": string - /** `&:is([aria-selected=true], [data-selected])` */ - "_selected": string - /** `&:default` */ - "_default": string - /** `&:optional` */ - "_optional": string - /** `&:is([open], [data-open], [data-state="open"])` */ - "_open": string - /** `&:is([closed], [data-closed], [data-state="closed"])` */ - "_closed": string - /** `&:fullscreen` */ - "_fullscreen": string - /** `&:is([data-loading], [aria-busy=true])` */ - "_loading": string - /** `&[aria-current=page]` */ - "_currentPage": string - /** `&[aria-current=step]` */ - "_currentStep": string - /** `@media (prefers-reduced-motion: reduce)` */ - "_motionReduce": string - /** `@media (prefers-reduced-motion: no-preference)` */ - "_motionSafe": string - /** `@media print` */ - "_print": string - /** `@media (orientation: landscape)` */ - "_landscape": string - /** `@media (orientation: portrait)` */ - "_portrait": string - /** `.dark &` */ - "_dark": string - /** `.light &` */ - "_light": string - /** `@media (prefers-color-scheme: dark)` */ - "_osDark": string - /** `@media (prefers-color-scheme: light)` */ - "_osLight": string - /** `@media (forced-colors: active)` */ - "_highContrast": string - /** `@media (prefers-contrast: less)` */ - "_lessContrast": string - /** `@media (prefers-contrast: more)` */ - "_moreContrast": string - /** `[dir=ltr] &` */ - "_ltr": string - /** `[dir=rtl] &` */ - "_rtl": string - /** `&::-webkit-scrollbar` */ - "_scrollbar": string - /** `&::-webkit-scrollbar-thumb` */ - "_scrollbarThumb": string - /** `&::-webkit-scrollbar-track` */ - "_scrollbarTrack": string - /** `&[data-orientation=horizontal]` */ - "_horizontal": string - /** `&[data-orientation=vertical]` */ - "_vertical": string - /** `@starting-style` */ - "_starting": string - /** `@media screen and (min-width: 40rem)` */ - "sm": string - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ - "smOnly": string - /** `@media screen and (max-width: 39.9975rem)` */ - "smDown": string - /** `@media screen and (min-width: 48rem)` */ - "md": string - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ - "mdOnly": string - /** `@media screen and (max-width: 47.9975rem)` */ - "mdDown": string - /** `@media screen and (min-width: 64rem)` */ - "lg": string - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - "lgOnly": string - /** `@media screen and (max-width: 63.9975rem)` */ - "lgDown": string - /** `@media screen and (min-width: 80rem)` */ - "xl": string - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - "xlOnly": string - /** `@media screen and (max-width: 79.9975rem)` */ - "xlDown": string - /** `@media screen and (min-width: 96rem)` */ - "2xl": string - /** `@media screen and (min-width: 96rem)` */ - "2xlOnly": string - /** `@media screen and (max-width: 95.9975rem)` */ - "2xlDown": string - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ - "smToMd": string - /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ - "smToLg": string - /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ - "smToXl": string - /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ - "smTo2xl": string - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ - "mdToLg": string - /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ - "mdToXl": string - /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ - "mdTo2xl": string - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - "lgToXl": string - /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ - "lgTo2xl": string - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - "xlTo2xl": string - /** `@container (min-width: 20rem)` */ - "@/xs": string - /** `@container (min-width: 24rem)` */ - "@/sm": string - /** `@container (min-width: 28rem)` */ - "@/md": string - /** `@container (min-width: 32rem)` */ - "@/lg": string - /** `@container (min-width: 36rem)` */ - "@/xl": string - /** `@container (min-width: 42rem)` */ - "@/2xl": string - /** `@container (min-width: 48rem)` */ - "@/3xl": string - /** `@container (min-width: 56rem)` */ - "@/4xl": string - /** `@container (min-width: 64rem)` */ - "@/5xl": string - /** `@container (min-width: 72rem)` */ - "@/6xl": string - /** `@container (min-width: 80rem)` */ - "@/7xl": string - /** `@container (min-width: 90rem)` */ - "@/8xl": string - /** The base (=no conditions) styles to apply */ - "base": string + /** `&:is(:hover, [data-hover])` */ + _hover: string; + /** `&:is(:focus, [data-focus])` */ + _focus: string; + /** `&:focus-within` */ + _focusWithin: string; + /** `&:is(:focus-visible, [data-focus-visible])` */ + _focusVisible: string; + /** `&:is(:disabled, [disabled], [data-disabled])` */ + _disabled: string; + /** `&:is(:active, [data-active])` */ + _active: string; + /** `&:visited` */ + _visited: string; + /** `&:target` */ + _target: string; + /** `&:is(:read-only, [data-read-only])` */ + _readOnly: string; + /** `&:read-write` */ + _readWrite: string; + /** `&:is(:empty, [data-empty])` */ + _empty: string; + /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ + _checked: string; + /** `&:enabled` */ + _enabled: string; + /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ + _expanded: string; + /** `&[data-highlighted]` */ + _highlighted: string; + /** `&::before` */ + _before: string; + /** `&::after` */ + _after: string; + /** `&::first-letter` */ + _firstLetter: string; + /** `&::first-line` */ + _firstLine: string; + /** `&::marker` */ + _marker: string; + /** `&::selection` */ + _selection: string; + /** `&::file-selector-button` */ + _file: string; + /** `&::backdrop` */ + _backdrop: string; + /** `&:first-child` */ + _first: string; + /** `&:last-child` */ + _last: string; + /** `&:only-child` */ + _only: string; + /** `&:nth-child(even)` */ + _even: string; + /** `&:nth-child(odd)` */ + _odd: string; + /** `&:first-of-type` */ + _firstOfType: string; + /** `&:last-of-type` */ + _lastOfType: string; + /** `&:only-of-type` */ + _onlyOfType: string; + /** `.peer:is(:focus, [data-focus]) ~ &` */ + _peerFocus: string; + /** `.peer:is(:hover, [data-hover]) ~ &` */ + _peerHover: string; + /** `.peer:is(:active, [data-active]) ~ &` */ + _peerActive: string; + /** `.peer:focus-within ~ &` */ + _peerFocusWithin: string; + /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ + _peerFocusVisible: string; + /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ + _peerDisabled: string; + /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ + _peerChecked: string; + /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ + _peerInvalid: string; + /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ + _peerExpanded: string; + /** `.peer:placeholder-shown ~ &` */ + _peerPlaceholderShown: string; + /** `.group:is(:focus, [data-focus]) &` */ + _groupFocus: string; + /** `.group:is(:hover, [data-hover]) &` */ + _groupHover: string; + /** `.group:is(:active, [data-active]) &` */ + _groupActive: string; + /** `.group:focus-within &` */ + _groupFocusWithin: string; + /** `.group:is(:focus-visible, [data-focus-visible]) &` */ + _groupFocusVisible: string; + /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ + _groupDisabled: string; + /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ + _groupChecked: string; + /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ + _groupExpanded: string; + /** `.group:invalid &` */ + _groupInvalid: string; + /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */ + _indeterminate: string; + /** `&:is(:required, [data-required], [aria-required=true])` */ + _required: string; + /** `&:is(:valid, [data-valid])` */ + _valid: string; + /** `&:is(:invalid, [data-invalid])` */ + _invalid: string; + /** `&:autofill` */ + _autofill: string; + /** `&:in-range` */ + _inRange: string; + /** `&:out-of-range` */ + _outOfRange: string; + /** `&::placeholder, &[data-placeholder]` */ + _placeholder: string; + /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ + _placeholderShown: string; + /** `&:is([aria-pressed=true], [data-pressed])` */ + _pressed: string; + /** `&:is([aria-selected=true], [data-selected])` */ + _selected: string; + /** `&:default` */ + _default: string; + /** `&:optional` */ + _optional: string; + /** `&:is([open], [data-open], [data-state="open"])` */ + _open: string; + /** `&:is([closed], [data-closed], [data-state="closed"])` */ + _closed: string; + /** `&:fullscreen` */ + _fullscreen: string; + /** `&:is([data-loading], [aria-busy=true])` */ + _loading: string; + /** `&[aria-current=page]` */ + _currentPage: string; + /** `&[aria-current=step]` */ + _currentStep: string; + /** `@media (prefers-reduced-motion: reduce)` */ + _motionReduce: string; + /** `@media (prefers-reduced-motion: no-preference)` */ + _motionSafe: string; + /** `@media print` */ + _print: string; + /** `@media (orientation: landscape)` */ + _landscape: string; + /** `@media (orientation: portrait)` */ + _portrait: string; + /** `.dark &` */ + _dark: string; + /** `.light &` */ + _light: string; + /** `@media (prefers-color-scheme: dark)` */ + _osDark: string; + /** `@media (prefers-color-scheme: light)` */ + _osLight: string; + /** `@media (forced-colors: active)` */ + _highContrast: string; + /** `@media (prefers-contrast: less)` */ + _lessContrast: string; + /** `@media (prefers-contrast: more)` */ + _moreContrast: string; + /** `[dir=ltr] &` */ + _ltr: string; + /** `[dir=rtl] &` */ + _rtl: string; + /** `&::-webkit-scrollbar` */ + _scrollbar: string; + /** `&::-webkit-scrollbar-thumb` */ + _scrollbarThumb: string; + /** `&::-webkit-scrollbar-track` */ + _scrollbarTrack: string; + /** `&[data-orientation=horizontal]` */ + _horizontal: string; + /** `&[data-orientation=vertical]` */ + _vertical: string; + /** `@starting-style` */ + _starting: string; + /** `@media screen and (min-width: 40rem)` */ + sm: string; + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + smOnly: string; + /** `@media screen and (max-width: 39.9975rem)` */ + smDown: string; + /** `@media screen and (min-width: 48rem)` */ + md: string; + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + mdOnly: string; + /** `@media screen and (max-width: 47.9975rem)` */ + mdDown: string; + /** `@media screen and (min-width: 64rem)` */ + lg: string; + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + lgOnly: string; + /** `@media screen and (max-width: 63.9975rem)` */ + lgDown: string; + /** `@media screen and (min-width: 80rem)` */ + xl: string; + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + xlOnly: string; + /** `@media screen and (max-width: 79.9975rem)` */ + xlDown: string; + /** `@media screen and (min-width: 96rem)` */ + "2xl": string; + /** `@media screen and (min-width: 96rem)` */ + "2xlOnly": string; + /** `@media screen and (max-width: 95.9975rem)` */ + "2xlDown": string; + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + smToMd: string; + /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ + smToLg: string; + /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ + smToXl: string; + /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ + smTo2xl: string; + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + mdToLg: string; + /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ + mdToXl: string; + /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ + mdTo2xl: string; + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + lgToXl: string; + /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ + lgTo2xl: string; + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + xlTo2xl: string; + /** `@container (min-width: 20rem)` */ + "@/xs": string; + /** `@container (min-width: 24rem)` */ + "@/sm": string; + /** `@container (min-width: 28rem)` */ + "@/md": string; + /** `@container (min-width: 32rem)` */ + "@/lg": string; + /** `@container (min-width: 36rem)` */ + "@/xl": string; + /** `@container (min-width: 42rem)` */ + "@/2xl": string; + /** `@container (min-width: 48rem)` */ + "@/3xl": string; + /** `@container (min-width: 56rem)` */ + "@/4xl": string; + /** `@container (min-width: 64rem)` */ + "@/5xl": string; + /** `@container (min-width: 72rem)` */ + "@/6xl": string; + /** `@container (min-width: 80rem)` */ + "@/7xl": string; + /** `@container (min-width: 90rem)` */ + "@/8xl": string; + /** The base (=no conditions) styles to apply */ + base: string; } export type ConditionalValue = | V | Array | { - [K in keyof Conditions]?: ConditionalValue - } + [K in keyof Conditions]?: ConditionalValue; + }; export type Nested

= P & { - [K in Selectors]?: Nested

+ [K in Selectors]?: Nested

; } & { - [K in AnySelector]?: Nested

+ [K in AnySelector]?: Nested

; } & { - [K in keyof Conditions]?: Nested

-} + [K in keyof Conditions]?: Nested

; +}; diff --git a/apps/wow-docs/styled-system/types/csstype.d.ts b/apps/wow-docs/styled-system/types/csstype.d.ts index 2c9b3fcd..c64217c5 100644 --- a/apps/wow-docs/styled-system/types/csstype.d.ts +++ b/apps/wow-docs/styled-system/types/csstype.d.ts @@ -1,15 +1,21 @@ /* eslint-disable */ export {}; -export type PropertyValue = TValue extends Array - ? Array - : TValue extends infer TUnpacked & {} - ? TUnpacked - : TValue; - -export type Fallback = { [P in keyof T]: T[P] | readonly NonNullable[] }; - -export interface StandardLonghandProperties { +export type PropertyValue = + TValue extends Array + ? Array + : TValue extends infer TUnpacked & {} + ? TUnpacked + : TValue; + +export type Fallback = { + [P in keyof T]: T[P] | readonly NonNullable[]; +}; + +export interface StandardLonghandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. * @@ -648,7 +654,9 @@ export interface StandardLonghandProperties | undefined; + borderBottomRightRadius?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`. * @@ -1470,7 +1478,9 @@ export interface StandardLonghandProperties | undefined; + containIntrinsicBlockSize?: + | Property.ContainIntrinsicBlockSize + | undefined; /** * The **`contain-intrinsic-length`** CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment. * @@ -1498,7 +1508,9 @@ export interface StandardLonghandProperties | undefined; + containIntrinsicInlineSize?: + | Property.ContainIntrinsicInlineSize + | undefined; /** * The **`contain-intrinsic-width`** CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment. * @@ -4085,7 +4097,9 @@ export interface StandardLonghandProperties | undefined; + scrollMarginInlineStart?: + | Property.ScrollMarginInlineStart + | undefined; /** * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -4158,7 +4172,9 @@ export interface StandardLonghandProperties | undefined; + scrollPaddingBlockStart?: + | Property.ScrollPaddingBlockStart + | undefined; /** * The `scroll-padding-bottom` property defines offsets for the bottom of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -4200,7 +4216,9 @@ export interface StandardLonghandProperties | undefined; + scrollPaddingInlineStart?: + | Property.ScrollPaddingInlineStart + | undefined; /** * The `scroll-padding-left` property defines offsets for the left of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -4617,7 +4635,9 @@ export interface StandardLonghandProperties | undefined; + textDecorationThickness?: + | Property.TextDecorationThickness + | undefined; /** * The **`text-emphasis-color`** CSS property sets the color of emphasis marks. This value can also be set using the `text-emphasis` shorthand. * @@ -5283,7 +5303,10 @@ export interface StandardLonghandProperties { +export interface StandardShorthandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`all`** shorthand CSS property resets all of an element's properties except `unicode-bidi`, `direction`, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin. * @@ -6109,11 +6132,16 @@ export interface StandardShorthandProperties - extends StandardLonghandProperties, +export interface StandardProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardLonghandProperties, StandardShorthandProperties {} -export interface VendorLonghandProperties { +export interface VendorLonghandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. * @@ -6401,7 +6429,9 @@ export interface VendorLonghandProperties | undefined; + MozOutlineRadiusBottomleft?: + | Property.MozOutlineRadiusBottomleft + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-bottomright`** CSS property can be used to round the bottom-right corner of an element's `outline`. * @@ -6409,7 +6439,9 @@ export interface VendorLonghandProperties | undefined; + MozOutlineRadiusBottomright?: + | Property.MozOutlineRadiusBottomright + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-topleft`** CSS property can be used to round the top-left corner of an element's `outline`. * @@ -6417,7 +6449,9 @@ export interface VendorLonghandProperties | undefined; + MozOutlineRadiusTopleft?: + | Property.MozOutlineRadiusTopleft + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-topright`** CSS property can be used to round the top-right corner of an element's `outline`. * @@ -6425,7 +6459,9 @@ export interface VendorLonghandProperties | undefined; + MozOutlineRadiusTopright?: + | Property.MozOutlineRadiusTopright + | undefined; /** * The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. * @@ -7155,7 +7191,9 @@ export interface VendorLonghandProperties | undefined; + WebkitBorderBeforeWidth?: + | Property.WebkitBorderBeforeWidth + | undefined; /** * The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -7163,7 +7201,9 @@ export interface VendorLonghandProperties | undefined; + WebkitBorderBottomLeftRadius?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -7171,7 +7211,9 @@ export interface VendorLonghandProperties | undefined; + WebkitBorderBottomRightRadius?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-image-slice`** CSS property divides the image specified by `border-image-source` into regions. These regions form the components of an element's border image. * @@ -7195,7 +7237,9 @@ export interface VendorLonghandProperties | undefined; + WebkitBorderTopRightRadius?: + | Property.BorderTopRightRadius + | undefined; /** * The **`box-decoration-break`** CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages. * @@ -7843,7 +7887,9 @@ export interface VendorLonghandProperties { +export interface VendorShorthandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`animation`** shorthand CSS property applies an animation between styles. It is a shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`. * @@ -8021,9 +8070,16 @@ export interface VendorShorthandProperties | undefined; } -export interface VendorProperties extends VendorLonghandProperties, VendorShorthandProperties {} +export interface VendorProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends VendorLonghandProperties, + VendorShorthandProperties {} -export interface ObsoleteProperties { +export interface ObsoleteProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * In combination with `elevation`, the **`azimuth`** CSS property enables different audio sources to be positioned spatially for aural presentation. This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage. * @@ -8455,7 +8511,9 @@ export interface ObsoleteProperties | undefined; + MozBorderRadiusBottomleft?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -8465,7 +8523,9 @@ export interface ObsoleteProperties | undefined; + MozBorderRadiusBottomright?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-top-left-radius`** CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -9078,7 +9138,10 @@ export interface ObsoleteProperties { +export interface SvgProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { alignmentBaseline?: Property.AlignmentBaseline | undefined; baselineShift?: Property.BaselineShift | undefined; clip?: Property.Clip | undefined; @@ -9147,7 +9210,10 @@ export interface Properties ObsoleteProperties, SvgProperties {} -export interface StandardLonghandPropertiesHyphen { +export interface StandardLonghandPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. * @@ -9714,7 +9780,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-block-start-width"?: + | Property.BorderBlockStartWidth + | undefined; /** * The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -9771,7 +9839,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-bottom-left-radius"?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -9786,7 +9856,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-bottom-right-radius"?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`. * @@ -9856,7 +9928,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-end-start-radius"?: + | Property.BorderEndStartRadius + | undefined; /** * The **`border-image-outset`** CSS property sets the distance by which an element's border image is set out from its border box. * @@ -9985,7 +10059,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-inline-end-width"?: + | Property.BorderInlineEndWidth + | undefined; /** * The **`border-inline-start-color`** CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -10029,7 +10105,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-inline-start-width"?: + | Property.BorderInlineStartWidth + | undefined; /** * The **`border-inline-style`** CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -10169,7 +10247,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-start-end-radius"?: + | Property.BorderStartEndRadius + | undefined; /** * The **`border-start-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode. * @@ -10183,7 +10263,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-start-start-radius"?: + | Property.BorderStartStartRadius + | undefined; /** * The **`border-top-color`** CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties `border-color` or `border-top`. * @@ -10227,7 +10309,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-top-right-radius"?: + | Property.BorderTopRightRadius + | undefined; /** * The **`border-top-style`** CSS property sets the line style of an element's top `border`. * @@ -10608,7 +10692,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-block-size"?: + | Property.ContainIntrinsicBlockSize + | undefined; /** * The **`contain-intrinsic-length`** CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment. * @@ -10622,7 +10708,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-height"?: + | Property.ContainIntrinsicHeight + | undefined; /** * The **`contain-intrinsic-inline-size`** CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment. * @@ -10636,7 +10724,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-inline-size"?: + | Property.ContainIntrinsicInlineSize + | undefined; /** * The **`contain-intrinsic-width`** CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment. * @@ -10650,7 +10740,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-width"?: + | Property.ContainIntrinsicWidth + | undefined; /** * The **container-name** CSS property specifies a list of query container names used by the @container at-rule in a container query. A container query will apply styles to elements based on the size of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the `@container` at-rule instead of the nearest ancestor with containment. * @@ -13166,7 +13258,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-margin-block-end"?: + | Property.ScrollMarginBlockEnd + | undefined; /** * The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13180,7 +13274,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-margin-block-start"?: + | Property.ScrollMarginBlockStart + | undefined; /** * The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13209,7 +13305,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-margin-inline-end"?: + | Property.ScrollMarginInlineEnd + | undefined; /** * The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13223,7 +13321,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-margin-inline-start"?: + | Property.ScrollMarginInlineStart + | undefined; /** * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13282,7 +13382,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-padding-block-end"?: + | Property.ScrollPaddingBlockEnd + | undefined; /** * The `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -13296,7 +13398,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-padding-block-start"?: + | Property.ScrollPaddingBlockStart + | undefined; /** * The `scroll-padding-bottom` property defines offsets for the bottom of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -13324,7 +13428,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-padding-inline-end"?: + | Property.ScrollPaddingInlineEnd + | undefined; /** * The `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -13338,7 +13444,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-padding-inline-start"?: + | Property.ScrollPaddingInlineStart + | undefined; /** * The `scroll-padding-left` property defines offsets for the left of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -13409,7 +13517,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-snap-margin-bottom"?: + | Property.ScrollMarginBottom + | undefined; /** * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13755,7 +13865,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "text-decoration-thickness"?: + | Property.TextDecorationThickness + | undefined; /** * The **`text-emphasis-color`** CSS property sets the color of emphasis marks. This value can also be set using the `text-emphasis` shorthand. * @@ -14421,7 +14533,10 @@ export interface StandardLonghandPropertiesHyphen { +export interface StandardShorthandPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`all`** shorthand CSS property resets all of an element's properties except `unicode-bidi`, `direction`, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin. * @@ -15247,11 +15362,16 @@ export interface StandardShorthandPropertiesHyphen - extends StandardLonghandPropertiesHyphen, +export interface StandardPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardLonghandPropertiesHyphen, StandardShorthandPropertiesHyphen {} -export interface VendorLonghandPropertiesHyphen { +export interface VendorLonghandPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. * @@ -15291,7 +15411,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-moz-outline-radius-bottomleft"?: + | Property.MozOutlineRadiusBottomleft + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-bottomright`** CSS property can be used to round the bottom-right corner of an element's `outline`. * @@ -15547,7 +15673,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-moz-outline-radius-bottomright"?: + | Property.MozOutlineRadiusBottomright + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-topleft`** CSS property can be used to round the top-left corner of an element's `outline`. * @@ -15555,7 +15683,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-moz-outline-radius-topleft"?: + | Property.MozOutlineRadiusTopleft + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-topright`** CSS property can be used to round the top-right corner of an element's `outline`. * @@ -15563,7 +15693,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-moz-outline-radius-topright"?: + | Property.MozOutlineRadiusTopright + | undefined; /** * The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. * @@ -15803,7 +15935,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-ms-hyphenate-limit-zone"?: + | Property.MsHyphenateLimitZone + | undefined; /** * The **`hyphens`** CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate. * @@ -15971,7 +16105,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-before-width"?: + | Property.WebkitBorderBeforeWidth + | undefined; /** * The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -16301,7 +16447,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-bottom-left-radius"?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -16309,7 +16457,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-bottom-right-radius"?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-image-slice`** CSS property divides the image specified by `border-image-source` into regions. These regions form the components of an element's border image. * @@ -16325,7 +16475,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-top-left-radius"?: + | Property.BorderTopLeftRadius + | undefined; /** * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -16333,7 +16485,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-top-right-radius"?: + | Property.BorderTopRightRadius + | undefined; /** * The **`box-decoration-break`** CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages. * @@ -16589,7 +16743,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-mask-box-image-outset"?: + | Property.MaskBorderOutset + | undefined; /** * The **`mask-border-repeat`** CSS property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border. * @@ -16621,7 +16777,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-mask-box-image-width"?: + | Property.MaskBorderWidth + | undefined; /** * The **`mask-clip`** CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area. * @@ -16765,7 +16923,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-perspective-origin"?: + | Property.PerspectiveOrigin + | undefined; /** * The **`print-color-adjust`** CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device. * @@ -16909,7 +17069,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-text-stroke-width"?: + | Property.WebkitTextStrokeWidth + | undefined; /** * The **`text-underline-position`** CSS property specifies the position of the underline which is set using the `text-decoration` property's `underline` value. * @@ -16917,7 +17079,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-transition-duration"?: + | Property.TransitionDuration + | undefined; /** * The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied. * @@ -16981,7 +17147,9 @@ export interface VendorLonghandPropertiesHyphen { +export interface VendorShorthandPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`animation`** shorthand CSS property applies an animation between styles. It is a shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`. * @@ -17159,11 +17330,16 @@ export interface VendorShorthandPropertiesHyphen | undefined; } -export interface VendorPropertiesHyphen - extends VendorLonghandPropertiesHyphen, +export interface VendorPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends VendorLonghandPropertiesHyphen, VendorShorthandPropertiesHyphen {} -export interface ObsoletePropertiesHyphen { +export interface ObsoletePropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * In combination with `elevation`, the **`azimuth`** CSS property enables different audio sources to be positioned spatially for aural presentation. This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage. * @@ -17377,7 +17553,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "scroll-snap-destination"?: + | Property.ScrollSnapDestination + | undefined; /** * The **`scroll-snap-points-x`** CSS property defines the horizontal positioning of snap points within the content of the scroll container they are applied to. * @@ -17595,7 +17773,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "-moz-border-radius-bottomleft"?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -17605,7 +17785,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "-moz-border-radius-bottomright"?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-top-left-radius`** CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -17615,7 +17797,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "-moz-border-radius-topleft"?: + | Property.BorderTopLeftRadius + | undefined; /** * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -17625,7 +17809,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "-moz-border-radius-topright"?: + | Property.BorderTopRightRadius + | undefined; /** * The **`box-align`** CSS property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box. * @@ -17901,7 +18087,9 @@ export interface ObsoletePropertiesHyphen { +export interface SvgPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { "alignment-baseline"?: Property.AlignmentBaseline | undefined; "baseline-shift"?: Property.BaselineShift | undefined; clip?: Property.Clip | undefined; @@ -18281,60 +18474,110 @@ export interface SvgPropertiesHyphen - extends StandardPropertiesHyphen, +export interface PropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardPropertiesHyphen, VendorPropertiesHyphen, ObsoletePropertiesHyphen, SvgPropertiesHyphen {} -export type StandardLonghandPropertiesFallback = Fallback>; +export type StandardLonghandPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type StandardShorthandPropertiesFallback = Fallback>; +export type StandardShorthandPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface StandardPropertiesFallback - extends StandardLonghandPropertiesFallback, +export interface StandardPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardLonghandPropertiesFallback, StandardShorthandPropertiesFallback {} -export type VendorLonghandPropertiesFallback = Fallback>; +export type VendorLonghandPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type VendorShorthandPropertiesFallback = Fallback>; +export type VendorShorthandPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface VendorPropertiesFallback - extends VendorLonghandPropertiesFallback, +export interface VendorPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends VendorLonghandPropertiesFallback, VendorShorthandPropertiesFallback {} -export type ObsoletePropertiesFallback = Fallback>; +export type ObsoletePropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type SvgPropertiesFallback = Fallback>; +export type SvgPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface PropertiesFallback - extends StandardPropertiesFallback, +export interface PropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardPropertiesFallback, VendorPropertiesFallback, ObsoletePropertiesFallback, SvgPropertiesFallback {} -export type StandardLonghandPropertiesHyphenFallback = Fallback>; +export type StandardLonghandPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type StandardShorthandPropertiesHyphenFallback = Fallback>; +export type StandardShorthandPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface StandardPropertiesHyphenFallback - extends StandardLonghandPropertiesHyphenFallback, +export interface StandardPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardLonghandPropertiesHyphenFallback, StandardShorthandPropertiesHyphenFallback {} -export type VendorLonghandPropertiesHyphenFallback = Fallback>; +export type VendorLonghandPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type VendorShorthandPropertiesHyphenFallback = Fallback>; +export type VendorShorthandPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface VendorPropertiesHyphenFallback - extends VendorLonghandPropertiesHyphenFallback, +export interface VendorPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends VendorLonghandPropertiesHyphenFallback, VendorShorthandPropertiesHyphenFallback {} -export type ObsoletePropertiesHyphenFallback = Fallback>; +export type ObsoletePropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type SvgPropertiesHyphenFallback = Fallback>; +export type SvgPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface PropertiesHyphenFallback - extends StandardPropertiesHyphenFallback, +export interface PropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardPropertiesHyphenFallback, VendorPropertiesHyphenFallback, ObsoletePropertiesHyphenFallback, SvgPropertiesHyphenFallback {} @@ -18944,50 +19187,134 @@ export type SvgAttributes = | "[z]" | "[zoomAndPan]"; -export type Globals = "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset"; +export type Globals = + | "-moz-initial" + | "inherit" + | "initial" + | "revert" + | "revert-layer" + | "unset"; export namespace Property { export type AccentColor = Globals | DataType.Color | "auto"; - export type AlignContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {}); + export type AlignContent = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "baseline" + | "normal" + | (string & {}); - export type AlignItems = Globals | DataType.SelfPosition | "baseline" | "normal" | "stretch" | (string & {}); + export type AlignItems = + | Globals + | DataType.SelfPosition + | "baseline" + | "normal" + | "stretch" + | (string & {}); - export type AlignSelf = Globals | DataType.SelfPosition | "auto" | "baseline" | "normal" | "stretch" | (string & {}); + export type AlignSelf = + | Globals + | DataType.SelfPosition + | "auto" + | "baseline" + | "normal" + | "stretch" + | (string & {}); - export type AlignTracks = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {}); + export type AlignTracks = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "baseline" + | "normal" + | (string & {}); export type All = Globals; - export type Animation = Globals | DataType.SingleAnimation | (string & {}); + export type Animation = + | Globals + | DataType.SingleAnimation + | (string & {}); - export type AnimationComposition = Globals | DataType.SingleAnimationComposition | (string & {}); + export type AnimationComposition = + | Globals + | DataType.SingleAnimationComposition + | (string & {}); - export type AnimationDelay = Globals | TTime | (string & {}); + export type AnimationDelay = + | Globals + | TTime + | (string & {}); - export type AnimationDirection = Globals | DataType.SingleAnimationDirection | (string & {}); + export type AnimationDirection = + | Globals + | DataType.SingleAnimationDirection + | (string & {}); - export type AnimationDuration = Globals | TTime | (string & {}); + export type AnimationDuration = + | Globals + | TTime + | (string & {}); - export type AnimationFillMode = Globals | DataType.SingleAnimationFillMode | (string & {}); + export type AnimationFillMode = + | Globals + | DataType.SingleAnimationFillMode + | (string & {}); - export type AnimationIterationCount = Globals | "infinite" | (string & {}) | (number & {}); + export type AnimationIterationCount = + | Globals + | "infinite" + | (string & {}) + | (number & {}); export type AnimationName = Globals | "none" | (string & {}); - export type AnimationPlayState = Globals | "paused" | "running" | (string & {}); + export type AnimationPlayState = + | Globals + | "paused" + | "running" + | (string & {}); - export type AnimationRange = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {}); + export type AnimationRange = + | Globals + | DataType.TimelineRangeName + | TLength + | "normal" + | (string & {}); - export type AnimationRangeEnd = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {}); + export type AnimationRangeEnd = + | Globals + | DataType.TimelineRangeName + | TLength + | "normal" + | (string & {}); - export type AnimationRangeStart = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {}); + export type AnimationRangeStart = + | Globals + | DataType.TimelineRangeName + | TLength + | "normal" + | (string & {}); - export type AnimationTimeline = Globals | DataType.SingleAnimationTimeline | (string & {}); + export type AnimationTimeline = + | Globals + | DataType.SingleAnimationTimeline + | (string & {}); - export type AnimationTimingFunction = Globals | DataType.EasingFunction | (string & {}); + export type AnimationTimingFunction = + | Globals + | DataType.EasingFunction + | (string & {}); - export type Appearance = Globals | DataType.CompatAuto | "auto" | "menulist-button" | "none" | "textfield"; + export type Appearance = + | Globals + | DataType.CompatAuto + | "auto" + | "menulist-button" + | "none" + | "textfield"; export type AspectRatio = Globals | "auto" | (string & {}) | (number & {}); @@ -19011,11 +19338,20 @@ export namespace Property { export type BackfaceVisibility = Globals | "hidden" | "visible"; - export type Background = Globals | DataType.FinalBgLayer | (string & {}); + export type Background = + | Globals + | DataType.FinalBgLayer + | (string & {}); - export type BackgroundAttachment = Globals | DataType.Attachment | (string & {}); + export type BackgroundAttachment = + | Globals + | DataType.Attachment + | (string & {}); - export type BackgroundBlendMode = Globals | DataType.BlendMode | (string & {}); + export type BackgroundBlendMode = + | Globals + | DataType.BlendMode + | (string & {}); export type BackgroundClip = Globals | DataType.Box | (string & {}); @@ -19025,15 +19361,37 @@ export namespace Property { export type BackgroundOrigin = Globals | DataType.Box | (string & {}); - export type BackgroundPosition = Globals | DataType.BgPosition | (string & {}); + export type BackgroundPosition = + | Globals + | DataType.BgPosition + | (string & {}); - export type BackgroundPositionX = Globals | TLength | "center" | "left" | "right" | "x-end" | "x-start" | (string & {}); + export type BackgroundPositionX = + | Globals + | TLength + | "center" + | "left" + | "right" + | "x-end" + | "x-start" + | (string & {}); - export type BackgroundPositionY = Globals | TLength | "bottom" | "center" | "top" | "y-end" | "y-start" | (string & {}); + export type BackgroundPositionY = + | Globals + | TLength + | "bottom" + | "center" + | "top" + | "y-end" + | "y-start" + | (string & {}); export type BackgroundRepeat = Globals | DataType.RepeatStyle | (string & {}); - export type BackgroundSize = Globals | DataType.BgSize | (string & {}); + export type BackgroundSize = + | Globals + | DataType.BgSize + | (string & {}); export type BlockOverflow = Globals | "clip" | "ellipsis" | (string & {}); @@ -19049,131 +19407,272 @@ export namespace Property { | "min-content" | (string & {}); - export type Border = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type Border = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); - export type BorderBlock = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderBlock = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderBlockColor = Globals | DataType.Color | (string & {}); - export type BorderBlockEnd = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderBlockEnd = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderBlockEndColor = Globals | DataType.Color; export type BorderBlockEndStyle = Globals | DataType.LineStyle; - export type BorderBlockEndWidth = Globals | DataType.LineWidth; + export type BorderBlockEndWidth = + | Globals + | DataType.LineWidth; - export type BorderBlockStart = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderBlockStart = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderBlockStartColor = Globals | DataType.Color; export type BorderBlockStartStyle = Globals | DataType.LineStyle; - export type BorderBlockStartWidth = Globals | DataType.LineWidth; + export type BorderBlockStartWidth = + | Globals + | DataType.LineWidth; export type BorderBlockStyle = Globals | DataType.LineStyle; - export type BorderBlockWidth = Globals | DataType.LineWidth; + export type BorderBlockWidth = + | Globals + | DataType.LineWidth; - export type BorderBottom = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderBottom = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderBottomColor = Globals | DataType.Color; - export type BorderBottomLeftRadius = Globals | TLength | (string & {}); + export type BorderBottomLeftRadius = + | Globals + | TLength + | (string & {}); - export type BorderBottomRightRadius = Globals | TLength | (string & {}); + export type BorderBottomRightRadius = + | Globals + | TLength + | (string & {}); export type BorderBottomStyle = Globals | DataType.LineStyle; - export type BorderBottomWidth = Globals | DataType.LineWidth; + export type BorderBottomWidth = + | Globals + | DataType.LineWidth; export type BorderCollapse = Globals | "collapse" | "separate"; export type BorderColor = Globals | DataType.Color | (string & {}); - export type BorderEndEndRadius = Globals | TLength | (string & {}); + export type BorderEndEndRadius = + | Globals + | TLength + | (string & {}); - export type BorderEndStartRadius = Globals | TLength | (string & {}); + export type BorderEndStartRadius = + | Globals + | TLength + | (string & {}); - export type BorderImage = Globals | "none" | "repeat" | "round" | "space" | "stretch" | (string & {}) | (number & {}); + export type BorderImage = + | Globals + | "none" + | "repeat" + | "round" + | "space" + | "stretch" + | (string & {}) + | (number & {}); - export type BorderImageOutset = Globals | TLength | (string & {}) | (number & {}); + export type BorderImageOutset = + | Globals + | TLength + | (string & {}) + | (number & {}); - export type BorderImageRepeat = Globals | "repeat" | "round" | "space" | "stretch" | (string & {}); + export type BorderImageRepeat = + | Globals + | "repeat" + | "round" + | "space" + | "stretch" + | (string & {}); export type BorderImageSlice = Globals | (string & {}) | (number & {}); export type BorderImageSource = Globals | "none" | (string & {}); - export type BorderImageWidth = Globals | TLength | "auto" | (string & {}) | (number & {}); + export type BorderImageWidth = + | Globals + | TLength + | "auto" + | (string & {}) + | (number & {}); - export type BorderInline = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderInline = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderInlineColor = Globals | DataType.Color | (string & {}); - export type BorderInlineEnd = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderInlineEnd = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderInlineEndColor = Globals | DataType.Color; export type BorderInlineEndStyle = Globals | DataType.LineStyle; - export type BorderInlineEndWidth = Globals | DataType.LineWidth; + export type BorderInlineEndWidth = + | Globals + | DataType.LineWidth; - export type BorderInlineStart = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderInlineStart = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderInlineStartColor = Globals | DataType.Color; export type BorderInlineStartStyle = Globals | DataType.LineStyle; - export type BorderInlineStartWidth = Globals | DataType.LineWidth; + export type BorderInlineStartWidth = + | Globals + | DataType.LineWidth; export type BorderInlineStyle = Globals | DataType.LineStyle; - export type BorderInlineWidth = Globals | DataType.LineWidth; + export type BorderInlineWidth = + | Globals + | DataType.LineWidth; - export type BorderLeft = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderLeft = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderLeftColor = Globals | DataType.Color; export type BorderLeftStyle = Globals | DataType.LineStyle; - export type BorderLeftWidth = Globals | DataType.LineWidth; + export type BorderLeftWidth = + | Globals + | DataType.LineWidth; - export type BorderRadius = Globals | TLength | (string & {}); + export type BorderRadius = + | Globals + | TLength + | (string & {}); - export type BorderRight = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderRight = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderRightColor = Globals | DataType.Color; export type BorderRightStyle = Globals | DataType.LineStyle; - export type BorderRightWidth = Globals | DataType.LineWidth; + export type BorderRightWidth = + | Globals + | DataType.LineWidth; - export type BorderSpacing = Globals | TLength | (string & {}); + export type BorderSpacing = + | Globals + | TLength + | (string & {}); - export type BorderStartEndRadius = Globals | TLength | (string & {}); + export type BorderStartEndRadius = + | Globals + | TLength + | (string & {}); - export type BorderStartStartRadius = Globals | TLength | (string & {}); + export type BorderStartStartRadius = + | Globals + | TLength + | (string & {}); export type BorderStyle = Globals | DataType.LineStyle | (string & {}); - export type BorderTop = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderTop = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderTopColor = Globals | DataType.Color; - export type BorderTopLeftRadius = Globals | TLength | (string & {}); + export type BorderTopLeftRadius = + | Globals + | TLength + | (string & {}); - export type BorderTopRightRadius = Globals | TLength | (string & {}); + export type BorderTopRightRadius = + | Globals + | TLength + | (string & {}); export type BorderTopStyle = Globals | DataType.LineStyle; - export type BorderTopWidth = Globals | DataType.LineWidth; + export type BorderTopWidth = + | Globals + | DataType.LineWidth; - export type BorderWidth = Globals | DataType.LineWidth | (string & {}); + export type BorderWidth = + | Globals + | DataType.LineWidth + | (string & {}); - export type Bottom = Globals | TLength | "auto" | (string & {}); + export type Bottom = + | Globals + | TLength + | "auto" + | (string & {}); - export type BoxAlign = Globals | "baseline" | "center" | "end" | "start" | "stretch"; + export type BoxAlign = + | Globals + | "baseline" + | "center" + | "end" + | "start" + | "stretch"; export type BoxDecorationBreak = Globals | "clone" | "slice"; @@ -19187,7 +19686,13 @@ export namespace Property { export type BoxOrdinalGroup = Globals | (number & {}) | (string & {}); - export type BoxOrient = Globals | "block-axis" | "horizontal" | "inherit" | "inline-axis" | "vertical"; + export type BoxOrient = + | Globals + | "block-axis" + | "horizontal" + | "inherit" + | "inline-axis" + | "vertical"; export type BoxPack = Globals | "center" | "end" | "justify" | "start"; @@ -19229,59 +19734,145 @@ export namespace Property { | "right" | "verso"; - export type BreakInside = Globals | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region"; + export type BreakInside = + | Globals + | "auto" + | "avoid" + | "avoid-column" + | "avoid-page" + | "avoid-region"; - export type CaptionSide = Globals | "block-end" | "block-start" | "bottom" | "inline-end" | "inline-start" | "top"; + export type CaptionSide = + | Globals + | "block-end" + | "block-start" + | "bottom" + | "inline-end" + | "inline-start" + | "top"; - export type Caret = Globals | DataType.Color | "auto" | "bar" | "block" | "underscore" | (string & {}); + export type Caret = + | Globals + | DataType.Color + | "auto" + | "bar" + | "block" + | "underscore" + | (string & {}); export type CaretColor = Globals | DataType.Color | "auto"; export type CaretShape = Globals | "auto" | "bar" | "block" | "underscore"; - export type Clear = Globals | "both" | "inline-end" | "inline-start" | "left" | "none" | "right"; + export type Clear = + | Globals + | "both" + | "inline-end" + | "inline-start" + | "left" + | "none" + | "right"; export type Clip = Globals | "auto" | (string & {}); - export type ClipPath = Globals | DataType.GeometryBox | "none" | (string & {}); + export type ClipPath = + | Globals + | DataType.GeometryBox + | "none" + | (string & {}); export type Color = Globals | DataType.Color; export type PrintColorAdjust = Globals | "economy" | "exact"; - export type ColorScheme = Globals | "dark" | "light" | "normal" | (string & {}); + export type ColorScheme = + | Globals + | "dark" + | "light" + | "normal" + | (string & {}); export type ColumnCount = Globals | "auto" | (number & {}) | (string & {}); export type ColumnFill = Globals | "auto" | "balance" | "balance-all"; - export type ColumnGap = Globals | TLength | "normal" | (string & {}); + export type ColumnGap = + | Globals + | TLength + | "normal" + | (string & {}); - export type ColumnRule = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type ColumnRule = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type ColumnRuleColor = Globals | DataType.Color; export type ColumnRuleStyle = Globals | DataType.LineStyle | (string & {}); - export type ColumnRuleWidth = Globals | DataType.LineWidth | (string & {}); + export type ColumnRuleWidth = + | Globals + | DataType.LineWidth + | (string & {}); export type ColumnSpan = Globals | "all" | "none"; - export type ColumnWidth = Globals | TLength | "auto"; + export type ColumnWidth = + | Globals + | TLength + | "auto"; - export type Columns = Globals | TLength | "auto" | (string & {}) | (number & {}); + export type Columns = + | Globals + | TLength + | "auto" + | (string & {}) + | (number & {}); - export type Contain = Globals | "content" | "inline-size" | "layout" | "none" | "paint" | "size" | "strict" | "style" | (string & {}); + export type Contain = + | Globals + | "content" + | "inline-size" + | "layout" + | "none" + | "paint" + | "size" + | "strict" + | "style" + | (string & {}); - export type ContainIntrinsicBlockSize = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicBlockSize = + | Globals + | TLength + | "none" + | (string & {}); - export type ContainIntrinsicHeight = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicHeight = + | Globals + | TLength + | "none" + | (string & {}); - export type ContainIntrinsicInlineSize = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicInlineSize = + | Globals + | TLength + | "none" + | (string & {}); - export type ContainIntrinsicSize = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicSize = + | Globals + | TLength + | "none" + | (string & {}); - export type ContainIntrinsicWidth = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicWidth = + | Globals + | TLength + | "none" + | (string & {}); export type Container = Globals | "none" | (string & {}); @@ -19289,7 +19880,12 @@ export namespace Property { export type ContainerType = Globals | "inline-size" | "normal" | "size"; - export type Content = Globals | DataType.ContentList | "none" | "normal" | (string & {}); + export type Content = + | Globals + | DataType.ContentList + | "none" + | "normal" + | (string & {}); export type ContentVisibility = Globals | "auto" | "hidden" | "visible"; @@ -19358,7 +19954,17 @@ export namespace Property { export type Filter = Globals | "none" | (string & {}); - export type Flex = Globals | TLength | "auto" | "content" | "fit-content" | "max-content" | "min-content" | "none" | (string & {}) | (number & {}); + export type Flex = + | Globals + | TLength + | "auto" + | "content" + | "fit-content" + | "max-content" + | "min-content" + | "none" + | (string & {}) + | (number & {}); export type FlexBasis = | Globals @@ -19374,9 +19980,23 @@ export namespace Property { | "min-content" | (string & {}); - export type FlexDirection = Globals | "column" | "column-reverse" | "row" | "row-reverse"; + export type FlexDirection = + | Globals + | "column" + | "column-reverse" + | "row" + | "row-reverse"; - export type FlexFlow = Globals | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | (string & {}); + export type FlexFlow = + | Globals + | "column" + | "column-reverse" + | "nowrap" + | "row" + | "row-reverse" + | "wrap" + | "wrap-reverse" + | (string & {}); export type FlexGrow = Globals | (number & {}) | (string & {}); @@ -19384,9 +20004,23 @@ export namespace Property { export type FlexWrap = Globals | "nowrap" | "wrap" | "wrap-reverse"; - export type Float = Globals | "inline-end" | "inline-start" | "left" | "none" | "right"; + export type Float = + | Globals + | "inline-end" + | "inline-start" + | "left" + | "none" + | "right"; - export type Font = Globals | "caption" | "icon" | "menu" | "message-box" | "small-caption" | "status-bar" | (string & {}); + export type Font = + | Globals + | "caption" + | "icon" + | "menu" + | "message-box" + | "small-caption" + | "status-bar" + | (string & {}); export type FontFamily = Globals | DataType.GenericFamily | (string & {}); @@ -19398,19 +20032,53 @@ export namespace Property { export type FontOpticalSizing = Globals | "auto" | "none"; - export type FontPalette = Globals | "dark" | "light" | "normal" | (string & {}); + export type FontPalette = + | Globals + | "dark" + | "light" + | "normal" + | (string & {}); - export type FontSize = Globals | DataType.AbsoluteSize | TLength | "larger" | "smaller" | (string & {}); + export type FontSize = + | Globals + | DataType.AbsoluteSize + | TLength + | "larger" + | "smaller" + | (string & {}); - export type FontSizeAdjust = Globals | "from-font" | "none" | (string & {}) | (number & {}); + export type FontSizeAdjust = + | Globals + | "from-font" + | "none" + | (string & {}) + | (number & {}); - export type FontSmooth = Globals | DataType.AbsoluteSize | TLength | "always" | "auto" | "never"; + export type FontSmooth = + | Globals + | DataType.AbsoluteSize + | TLength + | "always" + | "auto" + | "never"; export type FontStretch = Globals | DataType.FontStretchAbsolute; - export type FontStyle = Globals | "italic" | "normal" | "oblique" | (string & {}); + export type FontStyle = + | Globals + | "italic" + | "normal" + | "oblique" + | (string & {}); - export type FontSynthesis = Globals | "none" | "position" | "small-caps" | "style" | "weight" | (string & {}); + export type FontSynthesis = + | Globals + | "none" + | "position" + | "small-caps" + | "style" + | "weight" + | (string & {}); export type FontSynthesisPosition = Globals | "auto" | "none"; @@ -19453,13 +20121,37 @@ export namespace Property { | "unicase" | (string & {}); - export type FontVariantAlternates = Globals | "historical-forms" | "normal" | (string & {}); + export type FontVariantAlternates = + | Globals + | "historical-forms" + | "normal" + | (string & {}); - export type FontVariantCaps = Globals | "all-petite-caps" | "all-small-caps" | "normal" | "petite-caps" | "small-caps" | "titling-caps" | "unicase"; + export type FontVariantCaps = + | Globals + | "all-petite-caps" + | "all-small-caps" + | "normal" + | "petite-caps" + | "small-caps" + | "titling-caps" + | "unicase"; - export type FontVariantEastAsian = Globals | DataType.EastAsianVariantValues | "full-width" | "normal" | "proportional-width" | "ruby" | (string & {}); + export type FontVariantEastAsian = + | Globals + | DataType.EastAsianVariantValues + | "full-width" + | "normal" + | "proportional-width" + | "ruby" + | (string & {}); - export type FontVariantEmoji = Globals | "emoji" | "normal" | "text" | "unicode"; + export type FontVariantEmoji = + | Globals + | "emoji" + | "normal" + | "text" + | "unicode"; export type FontVariantLigatures = | Globals @@ -19492,37 +20184,65 @@ export namespace Property { export type FontVariationSettings = Globals | "normal" | (string & {}); - export type FontWeight = Globals | DataType.FontWeightAbsolute | "bolder" | "lighter"; + export type FontWeight = + | Globals + | DataType.FontWeightAbsolute + | "bolder" + | "lighter"; export type ForcedColorAdjust = Globals | "auto" | "none"; - export type Gap = Globals | TLength | "normal" | (string & {}); + export type Gap = + | Globals + | TLength + | "normal" + | (string & {}); export type Grid = Globals | "none" | (string & {}); export type GridArea = Globals | DataType.GridLine | (string & {}); - export type GridAutoColumns = Globals | DataType.TrackBreadth | (string & {}); + export type GridAutoColumns = + | Globals + | DataType.TrackBreadth + | (string & {}); - export type GridAutoFlow = Globals | "column" | "dense" | "row" | (string & {}); + export type GridAutoFlow = + | Globals + | "column" + | "dense" + | "row" + | (string & {}); - export type GridAutoRows = Globals | DataType.TrackBreadth | (string & {}); + export type GridAutoRows = + | Globals + | DataType.TrackBreadth + | (string & {}); export type GridColumn = Globals | DataType.GridLine | (string & {}); export type GridColumnEnd = Globals | DataType.GridLine; - export type GridColumnGap = Globals | TLength | (string & {}); + export type GridColumnGap = + | Globals + | TLength + | (string & {}); export type GridColumnStart = Globals | DataType.GridLine; - export type GridGap = Globals | TLength | (string & {}); + export type GridGap = + | Globals + | TLength + | (string & {}); export type GridRow = Globals | DataType.GridLine | (string & {}); export type GridRowEnd = Globals | DataType.GridLine; - export type GridRowGap = Globals | TLength | (string & {}); + export type GridRowGap = + | Globals + | TLength + | (string & {}); export type GridRowStart = Globals | DataType.GridLine; @@ -19530,11 +20250,28 @@ export namespace Property { export type GridTemplateAreas = Globals | "none" | (string & {}); - export type GridTemplateColumns = Globals | DataType.TrackBreadth | "none" | "subgrid" | (string & {}); + export type GridTemplateColumns = + | Globals + | DataType.TrackBreadth + | "none" + | "subgrid" + | (string & {}); - export type GridTemplateRows = Globals | DataType.TrackBreadth | "none" | "subgrid" | (string & {}); + export type GridTemplateRows = + | Globals + | DataType.TrackBreadth + | "none" + | "subgrid" + | (string & {}); - export type HangingPunctuation = Globals | "allow-end" | "first" | "force-end" | "last" | "none" | (string & {}); + export type HangingPunctuation = + | Globals + | "allow-end" + | "first" + | "force-end" + | "last" + | "none" + | (string & {}); export type Height = | Globals @@ -19550,19 +20287,43 @@ export namespace Property { export type HyphenateCharacter = Globals | "auto" | (string & {}); - export type HyphenateLimitChars = Globals | "auto" | (string & {}) | (number & {}); + export type HyphenateLimitChars = + | Globals + | "auto" + | (string & {}) + | (number & {}); export type Hyphens = Globals | "auto" | "manual" | "none"; - export type ImageOrientation = Globals | "flip" | "from-image" | (string & {}); + export type ImageOrientation = + | Globals + | "flip" + | "from-image" + | (string & {}); - export type ImageRendering = Globals | "-moz-crisp-edges" | "-webkit-optimize-contrast" | "auto" | "crisp-edges" | "pixelated"; + export type ImageRendering = + | Globals + | "-moz-crisp-edges" + | "-webkit-optimize-contrast" + | "auto" + | "crisp-edges" + | "pixelated"; export type ImageResolution = Globals | "from-image" | (string & {}); - export type ImeMode = Globals | "active" | "auto" | "disabled" | "inactive" | "normal"; + export type ImeMode = + | Globals + | "active" + | "auto" + | "disabled" + | "inactive" + | "normal"; - export type InitialLetter = Globals | "normal" | (string & {}) | (number & {}); + export type InitialLetter = + | Globals + | "normal" + | (string & {}) + | (number & {}); export type InlineSize = | Globals @@ -19579,43 +20340,126 @@ export namespace Property { export type InputSecurity = Globals | "auto" | "none"; - export type Inset = Globals | TLength | "auto" | (string & {}); + export type Inset = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetBlock = Globals | TLength | "auto" | (string & {}); + export type InsetBlock = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetBlockEnd = Globals | TLength | "auto" | (string & {}); + export type InsetBlockEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetBlockStart = Globals | TLength | "auto" | (string & {}); + export type InsetBlockStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetInline = Globals | TLength | "auto" | (string & {}); + export type InsetInline = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetInlineEnd = Globals | TLength | "auto" | (string & {}); + export type InsetInlineEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetInlineStart = Globals | TLength | "auto" | (string & {}); + export type InsetInlineStart = + | Globals + | TLength + | "auto" + | (string & {}); export type Isolation = Globals | "auto" | "isolate"; - export type JustifyContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "left" | "normal" | "right" | (string & {}); + export type JustifyContent = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "left" + | "normal" + | "right" + | (string & {}); - export type JustifyItems = Globals | DataType.SelfPosition | "baseline" | "left" | "legacy" | "normal" | "right" | "stretch" | (string & {}); + export type JustifyItems = + | Globals + | DataType.SelfPosition + | "baseline" + | "left" + | "legacy" + | "normal" + | "right" + | "stretch" + | (string & {}); - export type JustifySelf = Globals | DataType.SelfPosition | "auto" | "baseline" | "left" | "normal" | "right" | "stretch" | (string & {}); + export type JustifySelf = + | Globals + | DataType.SelfPosition + | "auto" + | "baseline" + | "left" + | "normal" + | "right" + | "stretch" + | (string & {}); - export type JustifyTracks = Globals | DataType.ContentDistribution | DataType.ContentPosition | "left" | "normal" | "right" | (string & {}); + export type JustifyTracks = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "left" + | "normal" + | "right" + | (string & {}); - export type Left = Globals | TLength | "auto" | (string & {}); + export type Left = + | Globals + | TLength + | "auto" + | (string & {}); - export type LetterSpacing = Globals | TLength | "normal"; + export type LetterSpacing = + | Globals + | TLength + | "normal"; - export type LineBreak = Globals | "anywhere" | "auto" | "loose" | "normal" | "strict"; + export type LineBreak = + | Globals + | "anywhere" + | "auto" + | "loose" + | "normal" + | "strict"; export type LineClamp = Globals | "none" | (number & {}) | (string & {}); - export type LineHeight = Globals | TLength | "normal" | (string & {}) | (number & {}); + export type LineHeight = + | Globals + | TLength + | "normal" + | (string & {}) + | (number & {}); export type LineHeightStep = Globals | TLength; - export type ListStyle = Globals | "inside" | "none" | "outside" | (string & {}); + export type ListStyle = + | Globals + | "inside" + | "none" + | "outside" + | (string & {}); export type ListStyleImage = Globals | "none" | (string & {}); @@ -19623,49 +20467,128 @@ export namespace Property { export type ListStyleType = Globals | "none" | (string & {}); - export type Margin = Globals | TLength | "auto" | (string & {}); + export type Margin = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginBlock = Globals | TLength | "auto" | (string & {}); + export type MarginBlock = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginBlockEnd = Globals | TLength | "auto" | (string & {}); + export type MarginBlockEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginBlockStart = Globals | TLength | "auto" | (string & {}); + export type MarginBlockStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginBottom = Globals | TLength | "auto" | (string & {}); + export type MarginBottom = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginInline = Globals | TLength | "auto" | (string & {}); + export type MarginInline = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginInlineEnd = Globals | TLength | "auto" | (string & {}); + export type MarginInlineEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginInlineStart = Globals | TLength | "auto" | (string & {}); + export type MarginInlineStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginLeft = Globals | TLength | "auto" | (string & {}); + export type MarginLeft = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginRight = Globals | TLength | "auto" | (string & {}); + export type MarginRight = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginTop = Globals | TLength | "auto" | (string & {}); + export type MarginTop = + | Globals + | TLength + | "auto" + | (string & {}); export type MarginTrim = Globals | "all" | "in-flow" | "none"; - export type Mask = Globals | DataType.MaskLayer | (string & {}); + export type Mask = + | Globals + | DataType.MaskLayer + | (string & {}); - export type MaskBorder = Globals | "alpha" | "luminance" | "none" | "repeat" | "round" | "space" | "stretch" | (string & {}) | (number & {}); + export type MaskBorder = + | Globals + | "alpha" + | "luminance" + | "none" + | "repeat" + | "round" + | "space" + | "stretch" + | (string & {}) + | (number & {}); export type MaskBorderMode = Globals | "alpha" | "luminance"; - export type MaskBorderOutset = Globals | TLength | (string & {}) | (number & {}); + export type MaskBorderOutset = + | Globals + | TLength + | (string & {}) + | (number & {}); - export type MaskBorderRepeat = Globals | "repeat" | "round" | "space" | "stretch" | (string & {}); + export type MaskBorderRepeat = + | Globals + | "repeat" + | "round" + | "space" + | "stretch" + | (string & {}); export type MaskBorderSlice = Globals | (string & {}) | (number & {}); export type MaskBorderSource = Globals | "none" | (string & {}); - export type MaskBorderWidth = Globals | TLength | "auto" | (string & {}) | (number & {}); + export type MaskBorderWidth = + | Globals + | TLength + | "auto" + | (string & {}) + | (number & {}); - export type MaskClip = Globals | DataType.GeometryBox | "no-clip" | (string & {}); + export type MaskClip = + | Globals + | DataType.GeometryBox + | "no-clip" + | (string & {}); - export type MaskComposite = Globals | DataType.CompositingOperator | (string & {}); + export type MaskComposite = + | Globals + | DataType.CompositingOperator + | (string & {}); export type MaskImage = Globals | "none" | (string & {}); @@ -19673,15 +20596,27 @@ export namespace Property { export type MaskOrigin = Globals | DataType.GeometryBox | (string & {}); - export type MaskPosition = Globals | DataType.Position | (string & {}); + export type MaskPosition = + | Globals + | DataType.Position + | (string & {}); export type MaskRepeat = Globals | DataType.RepeatStyle | (string & {}); - export type MaskSize = Globals | DataType.BgSize | (string & {}); + export type MaskSize = + | Globals + | DataType.BgSize + | (string & {}); export type MaskType = Globals | "alpha" | "luminance"; - export type MasonryAutoFlow = Globals | "definite-first" | "next" | "ordered" | "pack" | (string & {}); + export type MasonryAutoFlow = + | Globals + | "definite-first" + | "next" + | "ordered" + | "pack" + | (string & {}); export type MathDepth = Globals | "auto-add" | (string & {}) | (number & {}); @@ -19809,21 +20744,45 @@ export namespace Property { export type MixBlendMode = Globals | DataType.BlendMode | "plus-lighter"; - export type Offset = Globals | DataType.Position | "auto" | "none" | "normal" | (string & {}); + export type Offset = + | Globals + | DataType.Position + | "auto" + | "none" + | "normal" + | (string & {}); - export type OffsetDistance = Globals | TLength | (string & {}); + export type OffsetDistance = + | Globals + | TLength + | (string & {}); export type OffsetPath = Globals | "none" | (string & {}); export type OffsetRotate = Globals | "auto" | "reverse" | (string & {}); - export type ObjectFit = Globals | "contain" | "cover" | "fill" | "none" | "scale-down"; + export type ObjectFit = + | Globals + | "contain" + | "cover" + | "fill" + | "none" + | "scale-down"; - export type ObjectPosition = Globals | DataType.Position; + export type ObjectPosition = + | Globals + | DataType.Position; - export type OffsetAnchor = Globals | DataType.Position | "auto"; + export type OffsetAnchor = + | Globals + | DataType.Position + | "auto"; - export type OffsetPosition = Globals | DataType.Position | "auto" | "normal"; + export type OffsetPosition = + | Globals + | DataType.Position + | "auto" + | "normal"; export type Opacity = Globals | (string & {}) | (number & {}); @@ -19831,37 +20790,93 @@ export namespace Property { export type Orphans = Globals | (number & {}) | (string & {}); - export type Outline = Globals | DataType.Color | DataType.LineStyle | DataType.LineWidth | "auto" | "invert" | (string & {}); + export type Outline = + | Globals + | DataType.Color + | DataType.LineStyle + | DataType.LineWidth + | "auto" + | "invert" + | (string & {}); export type OutlineColor = Globals | DataType.Color | "invert"; export type OutlineOffset = Globals | TLength; - export type OutlineStyle = Globals | DataType.LineStyle | "auto" | (string & {}); + export type OutlineStyle = + | Globals + | DataType.LineStyle + | "auto" + | (string & {}); - export type OutlineWidth = Globals | DataType.LineWidth; + export type OutlineWidth = + | Globals + | DataType.LineWidth; - export type Overflow = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible" | (string & {}); + export type Overflow = + | Globals + | "-moz-hidden-unscrollable" + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible" + | (string & {}); export type OverflowAnchor = Globals | "auto" | "none"; - export type OverflowBlock = Globals | "auto" | "clip" | "hidden" | "scroll" | "visible"; + export type OverflowBlock = + | Globals + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible"; export type OverflowClipBox = Globals | "content-box" | "padding-box"; - export type OverflowClipMargin = Globals | DataType.VisualBox | TLength | (string & {}); + export type OverflowClipMargin = + | Globals + | DataType.VisualBox + | TLength + | (string & {}); - export type OverflowInline = Globals | "auto" | "clip" | "hidden" | "scroll" | "visible"; + export type OverflowInline = + | Globals + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible"; export type OverflowWrap = Globals | "anywhere" | "break-word" | "normal"; - export type OverflowX = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible"; + export type OverflowX = + | Globals + | "-moz-hidden-unscrollable" + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible"; - export type OverflowY = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible"; + export type OverflowY = + | Globals + | "-moz-hidden-unscrollable" + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible"; export type Overlay = Globals | "auto" | "none"; - export type OverscrollBehavior = Globals | "auto" | "contain" | "none" | (string & {}); + export type OverscrollBehavior = + | Globals + | "auto" + | "contain" + | "none" + | (string & {}); export type OverscrollBehaviorBlock = Globals | "auto" | "contain" | "none"; @@ -19871,121 +20886,322 @@ export namespace Property { export type OverscrollBehaviorY = Globals | "auto" | "contain" | "none"; - export type Padding = Globals | TLength | (string & {}); + export type Padding = + | Globals + | TLength + | (string & {}); - export type PaddingBlock = Globals | TLength | (string & {}); + export type PaddingBlock = + | Globals + | TLength + | (string & {}); - export type PaddingBlockEnd = Globals | TLength | (string & {}); + export type PaddingBlockEnd = + | Globals + | TLength + | (string & {}); - export type PaddingBlockStart = Globals | TLength | (string & {}); + export type PaddingBlockStart = + | Globals + | TLength + | (string & {}); - export type PaddingBottom = Globals | TLength | (string & {}); + export type PaddingBottom = + | Globals + | TLength + | (string & {}); - export type PaddingInline = Globals | TLength | (string & {}); + export type PaddingInline = + | Globals + | TLength + | (string & {}); - export type PaddingInlineEnd = Globals | TLength | (string & {}); + export type PaddingInlineEnd = + | Globals + | TLength + | (string & {}); - export type PaddingInlineStart = Globals | TLength | (string & {}); + export type PaddingInlineStart = + | Globals + | TLength + | (string & {}); - export type PaddingLeft = Globals | TLength | (string & {}); + export type PaddingLeft = + | Globals + | TLength + | (string & {}); - export type PaddingRight = Globals | TLength | (string & {}); + export type PaddingRight = + | Globals + | TLength + | (string & {}); - export type PaddingTop = Globals | TLength | (string & {}); + export type PaddingTop = + | Globals + | TLength + | (string & {}); export type Page = Globals | "auto" | (string & {}); - export type PageBreakAfter = Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso"; + export type PageBreakAfter = + | Globals + | "always" + | "auto" + | "avoid" + | "left" + | "recto" + | "right" + | "verso"; - export type PageBreakBefore = Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso"; + export type PageBreakBefore = + | Globals + | "always" + | "auto" + | "avoid" + | "left" + | "recto" + | "right" + | "verso"; export type PageBreakInside = Globals | "auto" | "avoid"; - export type PaintOrder = Globals | "fill" | "markers" | "normal" | "stroke" | (string & {}); - - export type Perspective = Globals | TLength | "none"; + export type PaintOrder = + | Globals + | "fill" + | "markers" + | "normal" + | "stroke" + | (string & {}); - export type PerspectiveOrigin = Globals | DataType.Position; + export type Perspective = + | Globals + | TLength + | "none"; - export type PlaceContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {}); + export type PerspectiveOrigin = + | Globals + | DataType.Position; - export type PlaceItems = Globals | DataType.SelfPosition | "baseline" | "normal" | "stretch" | (string & {}); + export type PlaceContent = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "baseline" + | "normal" + | (string & {}); - export type PlaceSelf = Globals | DataType.SelfPosition | "auto" | "baseline" | "normal" | "stretch" | (string & {}); + export type PlaceItems = + | Globals + | DataType.SelfPosition + | "baseline" + | "normal" + | "stretch" + | (string & {}); - export type PointerEvents = Globals | "all" | "auto" | "fill" | "inherit" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"; + export type PlaceSelf = + | Globals + | DataType.SelfPosition + | "auto" + | "baseline" + | "normal" + | "stretch" + | (string & {}); - export type Position = Globals | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky"; + export type PointerEvents = + | Globals + | "all" + | "auto" + | "fill" + | "inherit" + | "none" + | "painted" + | "stroke" + | "visible" + | "visibleFill" + | "visiblePainted" + | "visibleStroke"; + + export type Position = + | Globals + | "-webkit-sticky" + | "absolute" + | "fixed" + | "relative" + | "static" + | "sticky"; export type Quotes = Globals | "auto" | "none" | (string & {}); - export type Resize = Globals | "block" | "both" | "horizontal" | "inline" | "none" | "vertical"; + export type Resize = + | Globals + | "block" + | "both" + | "horizontal" + | "inline" + | "none" + | "vertical"; - export type Right = Globals | TLength | "auto" | (string & {}); + export type Right = + | Globals + | TLength + | "auto" + | (string & {}); export type Rotate = Globals | "none" | (string & {}); - export type RowGap = Globals | TLength | "normal" | (string & {}); + export type RowGap = + | Globals + | TLength + | "normal" + | (string & {}); - export type RubyAlign = Globals | "center" | "space-around" | "space-between" | "start"; + export type RubyAlign = + | Globals + | "center" + | "space-around" + | "space-between" + | "start"; export type RubyMerge = Globals | "auto" | "collapse" | "separate"; - export type RubyPosition = Globals | "alternate" | "inter-character" | "over" | "under" | (string & {}); + export type RubyPosition = + | Globals + | "alternate" + | "inter-character" + | "over" + | "under" + | (string & {}); export type Scale = Globals | "none" | (string & {}) | (number & {}); export type ScrollBehavior = Globals | "auto" | "smooth"; - export type ScrollMargin = Globals | TLength | (string & {}); + export type ScrollMargin = + | Globals + | TLength + | (string & {}); - export type ScrollMarginBlock = Globals | TLength | (string & {}); + export type ScrollMarginBlock = + | Globals + | TLength + | (string & {}); - export type ScrollMarginBlockEnd = Globals | TLength; + export type ScrollMarginBlockEnd = + | Globals + | TLength; - export type ScrollMarginBlockStart = Globals | TLength; + export type ScrollMarginBlockStart = + | Globals + | TLength; - export type ScrollMarginBottom = Globals | TLength; + export type ScrollMarginBottom = + | Globals + | TLength; - export type ScrollMarginInline = Globals | TLength | (string & {}); + export type ScrollMarginInline = + | Globals + | TLength + | (string & {}); - export type ScrollMarginInlineEnd = Globals | TLength; + export type ScrollMarginInlineEnd = + | Globals + | TLength; - export type ScrollMarginInlineStart = Globals | TLength; + export type ScrollMarginInlineStart = + | Globals + | TLength; export type ScrollMarginLeft = Globals | TLength; - export type ScrollMarginRight = Globals | TLength; + export type ScrollMarginRight = + | Globals + | TLength; export type ScrollMarginTop = Globals | TLength; - export type ScrollPadding = Globals | TLength | "auto" | (string & {}); + export type ScrollPadding = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingBlock = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingBlock = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingBlockEnd = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingBlockEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingBlockStart = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingBlockStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingBottom = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingBottom = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingInline = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingInline = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingInlineEnd = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingInlineEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingInlineStart = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingInlineStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingLeft = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingLeft = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingRight = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingRight = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingTop = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingTop = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollSnapAlign = Globals | "center" | "end" | "none" | "start" | (string & {}); + export type ScrollSnapAlign = + | Globals + | "center" + | "end" + | "none" + | "start" + | (string & {}); - export type ScrollSnapCoordinate = Globals | DataType.Position | "none" | (string & {}); + export type ScrollSnapCoordinate = + | Globals + | DataType.Position + | "none" + | (string & {}); - export type ScrollSnapDestination = Globals | DataType.Position; + export type ScrollSnapDestination = + | Globals + | DataType.Position; export type ScrollSnapPointsX = Globals | "none" | (string & {}); @@ -19993,7 +21209,15 @@ export namespace Property { export type ScrollSnapStop = Globals | "always" | "normal"; - export type ScrollSnapType = Globals | "block" | "both" | "inline" | "none" | "x" | "y" | (string & {}); + export type ScrollSnapType = + | Globals + | "block" + | "both" + | "inline" + | "none" + | "x" + | "y" + | (string & {}); export type ScrollSnapTypeX = Globals | "mandatory" | "none" | "proximity"; @@ -20001,7 +21225,13 @@ export namespace Property { export type ScrollTimeline = Globals | "none" | (string & {}); - export type ScrollTimelineAxis = Globals | "block" | "inline" | "x" | "y" | (string & {}); + export type ScrollTimelineAxis = + | Globals + | "block" + | "inline" + | "x" + | "y" + | (string & {}); export type ScrollTimelineName = Globals | "none" | (string & {}); @@ -20013,17 +21243,46 @@ export namespace Property { export type ShapeImageThreshold = Globals | (string & {}) | (number & {}); - export type ShapeMargin = Globals | TLength | (string & {}); + export type ShapeMargin = + | Globals + | TLength + | (string & {}); - export type ShapeOutside = Globals | DataType.Box | "margin-box" | "none" | (string & {}); + export type ShapeOutside = + | Globals + | DataType.Box + | "margin-box" + | "none" + | (string & {}); - export type TabSize = Globals | TLength | (number & {}) | (string & {}); + export type TabSize = + | Globals + | TLength + | (number & {}) + | (string & {}); export type TableLayout = Globals | "auto" | "fixed"; - export type TextAlign = Globals | "-webkit-match-parent" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start"; + export type TextAlign = + | Globals + | "-webkit-match-parent" + | "center" + | "end" + | "justify" + | "left" + | "match-parent" + | "right" + | "start"; - export type TextAlignLast = Globals | "auto" | "center" | "end" | "justify" | "left" | "right" | "start"; + export type TextAlignLast = + | Globals + | "auto" + | "center" + | "end" + | "justify" + | "left" + | "right" + | "start"; export type TextCombineUpright = Globals | "all" | "none" | (string & {}); @@ -20049,49 +21308,140 @@ export namespace Property { export type TextDecorationColor = Globals | DataType.Color; - export type TextDecorationLine = Globals | "blink" | "grammar-error" | "line-through" | "none" | "overline" | "spelling-error" | "underline" | (string & {}); + export type TextDecorationLine = + | Globals + | "blink" + | "grammar-error" + | "line-through" + | "none" + | "overline" + | "spelling-error" + | "underline" + | (string & {}); - export type TextDecorationSkip = Globals | "box-decoration" | "edges" | "leading-spaces" | "none" | "objects" | "spaces" | "trailing-spaces" | (string & {}); + export type TextDecorationSkip = + | Globals + | "box-decoration" + | "edges" + | "leading-spaces" + | "none" + | "objects" + | "spaces" + | "trailing-spaces" + | (string & {}); export type TextDecorationSkipInk = Globals | "all" | "auto" | "none"; - export type TextDecorationStyle = Globals | "dashed" | "dotted" | "double" | "solid" | "wavy"; + export type TextDecorationStyle = + | Globals + | "dashed" + | "dotted" + | "double" + | "solid" + | "wavy"; - export type TextDecorationThickness = Globals | TLength | "auto" | "from-font" | (string & {}); + export type TextDecorationThickness = + | Globals + | TLength + | "auto" + | "from-font" + | (string & {}); - export type TextEmphasis = Globals | DataType.Color | "circle" | "dot" | "double-circle" | "filled" | "none" | "open" | "sesame" | "triangle" | (string & {}); + export type TextEmphasis = + | Globals + | DataType.Color + | "circle" + | "dot" + | "double-circle" + | "filled" + | "none" + | "open" + | "sesame" + | "triangle" + | (string & {}); export type TextEmphasisColor = Globals | DataType.Color; export type TextEmphasisPosition = Globals | (string & {}); - export type TextEmphasisStyle = Globals | "circle" | "dot" | "double-circle" | "filled" | "none" | "open" | "sesame" | "triangle" | (string & {}); + export type TextEmphasisStyle = + | Globals + | "circle" + | "dot" + | "double-circle" + | "filled" + | "none" + | "open" + | "sesame" + | "triangle" + | (string & {}); - export type TextIndent = Globals | TLength | (string & {}); + export type TextIndent = + | Globals + | TLength + | (string & {}); - export type TextJustify = Globals | "auto" | "inter-character" | "inter-word" | "none"; + export type TextJustify = + | Globals + | "auto" + | "inter-character" + | "inter-word" + | "none"; export type TextOrientation = Globals | "mixed" | "sideways" | "upright"; export type TextOverflow = Globals | "clip" | "ellipsis" | (string & {}); - export type TextRendering = Globals | "auto" | "geometricPrecision" | "optimizeLegibility" | "optimizeSpeed"; + export type TextRendering = + | Globals + | "auto" + | "geometricPrecision" + | "optimizeLegibility" + | "optimizeSpeed"; export type TextShadow = Globals | "none" | (string & {}); export type TextSizeAdjust = Globals | "auto" | "none" | (string & {}); - export type TextTransform = Globals | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "none" | "uppercase"; + export type TextTransform = + | Globals + | "capitalize" + | "full-size-kana" + | "full-width" + | "lowercase" + | "none" + | "uppercase"; - export type TextUnderlineOffset = Globals | TLength | "auto" | (string & {}); + export type TextUnderlineOffset = + | Globals + | TLength + | "auto" + | (string & {}); - export type TextUnderlinePosition = Globals | "auto" | "from-font" | "left" | "right" | "under" | (string & {}); + export type TextUnderlinePosition = + | Globals + | "auto" + | "from-font" + | "left" + | "right" + | "under" + | (string & {}); - export type TextWrap = Globals | "balance" | "nowrap" | "pretty" | "stable" | "wrap"; + export type TextWrap = + | Globals + | "balance" + | "nowrap" + | "pretty" + | "stable" + | "wrap"; export type TimelineScope = Globals | "none" | (string & {}); - export type Top = Globals | TLength | "auto" | (string & {}); + export type Top = + | Globals + | TLength + | "auto" + | (string & {}); export type TouchAction = | Globals @@ -20112,25 +21462,59 @@ export namespace Property { export type Transform = Globals | "none" | (string & {}); - export type TransformBox = Globals | "border-box" | "content-box" | "fill-box" | "stroke-box" | "view-box"; + export type TransformBox = + | Globals + | "border-box" + | "content-box" + | "fill-box" + | "stroke-box" + | "view-box"; - export type TransformOrigin = Globals | TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {}); + export type TransformOrigin = + | Globals + | TLength + | "bottom" + | "center" + | "left" + | "right" + | "top" + | (string & {}); export type TransformStyle = Globals | "flat" | "preserve-3d"; - export type Transition = Globals | DataType.SingleTransition | (string & {}); + export type Transition = + | Globals + | DataType.SingleTransition + | (string & {}); - export type TransitionBehavior = Globals | "allow-discrete" | "normal" | (string & {}); + export type TransitionBehavior = + | Globals + | "allow-discrete" + | "normal" + | (string & {}); - export type TransitionDelay = Globals | TTime | (string & {}); + export type TransitionDelay = + | Globals + | TTime + | (string & {}); - export type TransitionDuration = Globals | TTime | (string & {}); + export type TransitionDuration = + | Globals + | TTime + | (string & {}); export type TransitionProperty = Globals | "all" | "none" | (string & {}); - export type TransitionTimingFunction = Globals | DataType.EasingFunction | (string & {}); + export type TransitionTimingFunction = + | Globals + | DataType.EasingFunction + | (string & {}); - export type Translate = Globals | TLength | "none" | (string & {}); + export type Translate = + | Globals + | TLength + | "none" + | (string & {}); export type UnicodeBidi = | Globals @@ -20147,7 +21531,15 @@ export namespace Property { | "normal" | "plaintext"; - export type UserSelect = Globals | "-moz-none" | "all" | "auto" | "contain" | "element" | "none" | "text"; + export type UserSelect = + | Globals + | "-moz-none" + | "all" + | "auto" + | "contain" + | "element" + | "none" + | "text"; export type VerticalAlign = | Globals @@ -20164,9 +21556,19 @@ export namespace Property { export type ViewTimeline = Globals | "none" | (string & {}); - export type ViewTimelineAxis = Globals | "block" | "inline" | "x" | "y" | (string & {}); + export type ViewTimelineAxis = + | Globals + | "block" + | "inline" + | "x" + | "y" + | (string & {}); - export type ViewTimelineInset = Globals | TLength | "auto" | (string & {}); + export type ViewTimelineInset = + | Globals + | TLength + | "auto" + | (string & {}); export type ViewTimelineName = Globals | "none" | (string & {}); @@ -20198,9 +21600,22 @@ export namespace Property { | "wrap" | (string & {}); - export type WhiteSpaceCollapse = Globals | "break-spaces" | "collapse" | "discard" | "preserve" | "preserve-breaks" | "preserve-spaces"; + export type WhiteSpaceCollapse = + | Globals + | "break-spaces" + | "collapse" + | "discard" + | "preserve" + | "preserve-breaks" + | "preserve-spaces"; - export type WhiteSpaceTrim = Globals | "discard-after" | "discard-before" | "discard-inner" | "none" | (string & {}); + export type WhiteSpaceTrim = + | Globals + | "discard-after" + | "discard-before" + | "discard-inner" + | "none" + | (string & {}); export type Widows = Globals | (number & {}) | (string & {}); @@ -20220,19 +21635,42 @@ export namespace Property { | "min-intrinsic" | (string & {}); - export type WillChange = Globals | DataType.AnimateableFeature | "auto" | (string & {}); + export type WillChange = + | Globals + | DataType.AnimateableFeature + | "auto" + | (string & {}); - export type WordBreak = Globals | "break-all" | "break-word" | "keep-all" | "normal"; + export type WordBreak = + | Globals + | "break-all" + | "break-word" + | "keep-all" + | "normal"; - export type WordSpacing = Globals | TLength | "normal"; + export type WordSpacing = + | Globals + | TLength + | "normal"; export type WordWrap = Globals | "break-word" | "normal"; - export type WritingMode = Globals | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl"; + export type WritingMode = + | Globals + | "horizontal-tb" + | "sideways-lr" + | "sideways-rl" + | "vertical-lr" + | "vertical-rl"; export type ZIndex = Globals | "auto" | (number & {}) | (string & {}); - export type Zoom = Globals | "normal" | "reset" | (string & {}) | (number & {}); + export type Zoom = + | Globals + | "normal" + | "reset" + | (string & {}) + | (number & {}); export type MozAppearance = | Globals @@ -20349,47 +21787,114 @@ export namespace Property { export type MozBinding = Globals | "none" | (string & {}); - export type MozBorderBottomColors = Globals | DataType.Color | "none" | (string & {}); + export type MozBorderBottomColors = + | Globals + | DataType.Color + | "none" + | (string & {}); - export type MozBorderLeftColors = Globals | DataType.Color | "none" | (string & {}); + export type MozBorderLeftColors = + | Globals + | DataType.Color + | "none" + | (string & {}); - export type MozBorderRightColors = Globals | DataType.Color | "none" | (string & {}); + export type MozBorderRightColors = + | Globals + | DataType.Color + | "none" + | (string & {}); - export type MozBorderTopColors = Globals | DataType.Color | "none" | (string & {}); + export type MozBorderTopColors = + | Globals + | DataType.Color + | "none" + | (string & {}); - export type MozContextProperties = Globals | "fill" | "fill-opacity" | "none" | "stroke" | "stroke-opacity" | (string & {}); + export type MozContextProperties = + | Globals + | "fill" + | "fill-opacity" + | "none" + | "stroke" + | "stroke-opacity" + | (string & {}); - export type MozFloatEdge = Globals | "border-box" | "content-box" | "margin-box" | "padding-box"; + export type MozFloatEdge = + | Globals + | "border-box" + | "content-box" + | "margin-box" + | "padding-box"; export type MozForceBrokenImageIcon = Globals | 0 | (string & {}) | 1; export type MozImageRegion = Globals | "auto" | (string & {}); - export type MozOrient = Globals | "block" | "horizontal" | "inline" | "vertical"; + export type MozOrient = + | Globals + | "block" + | "horizontal" + | "inline" + | "vertical"; - export type MozOutlineRadius = Globals | TLength | (string & {}); + export type MozOutlineRadius = + | Globals + | TLength + | (string & {}); - export type MozOutlineRadiusBottomleft = Globals | TLength | (string & {}); + export type MozOutlineRadiusBottomleft = + | Globals + | TLength + | (string & {}); - export type MozOutlineRadiusBottomright = Globals | TLength | (string & {}); + export type MozOutlineRadiusBottomright = + | Globals + | TLength + | (string & {}); - export type MozOutlineRadiusTopleft = Globals | TLength | (string & {}); + export type MozOutlineRadiusTopleft = + | Globals + | TLength + | (string & {}); - export type MozOutlineRadiusTopright = Globals | TLength | (string & {}); + export type MozOutlineRadiusTopright = + | Globals + | TLength + | (string & {}); export type MozStackSizing = Globals | "ignore" | "stretch-to-fit"; export type MozTextBlink = Globals | "blink" | "none"; - export type MozUserFocus = Globals | "ignore" | "none" | "normal" | "select-after" | "select-all" | "select-before" | "select-menu" | "select-same"; + export type MozUserFocus = + | Globals + | "ignore" + | "none" + | "normal" + | "select-after" + | "select-all" + | "select-before" + | "select-menu" + | "select-same"; export type MozUserInput = Globals | "auto" | "disabled" | "enabled" | "none"; - export type MozUserModify = Globals | "read-only" | "read-write" | "write-only"; + export type MozUserModify = + | Globals + | "read-only" + | "read-write" + | "write-only"; export type MozWindowDragging = Globals | "drag" | "no-drag"; - export type MozWindowShadow = Globals | "default" | "menu" | "none" | "sheet" | "tooltip"; + export type MozWindowShadow = + | Globals + | "default" + | "menu" + | "none" + | "sheet" + | "tooltip"; export type MsAccelerator = Globals | "false" | "true"; @@ -20403,11 +21908,20 @@ export namespace Property { export type MsContentZoomLimitMin = Globals | (string & {}); - export type MsContentZoomSnap = Globals | "mandatory" | "none" | "proximity" | (string & {}); + export type MsContentZoomSnap = + | Globals + | "mandatory" + | "none" + | "proximity" + | (string & {}); export type MsContentZoomSnapPoints = Globals | (string & {}); - export type MsContentZoomSnapType = Globals | "mandatory" | "none" | "proximity"; + export type MsContentZoomSnapType = + | Globals + | "mandatory" + | "none" + | "proximity"; export type MsContentZooming = Globals | "none" | "zoom"; @@ -20417,33 +21931,67 @@ export namespace Property { export type MsFlowInto = Globals | "none" | (string & {}); - export type MsGridColumns = Globals | DataType.TrackBreadth | "none" | (string & {}); + export type MsGridColumns = + | Globals + | DataType.TrackBreadth + | "none" + | (string & {}); - export type MsGridRows = Globals | DataType.TrackBreadth | "none" | (string & {}); + export type MsGridRows = + | Globals + | DataType.TrackBreadth + | "none" + | (string & {}); export type MsHighContrastAdjust = Globals | "auto" | "none"; - export type MsHyphenateLimitChars = Globals | "auto" | (string & {}) | (number & {}); + export type MsHyphenateLimitChars = + | Globals + | "auto" + | (string & {}) + | (number & {}); - export type MsHyphenateLimitLines = Globals | "no-limit" | (number & {}) | (string & {}); + export type MsHyphenateLimitLines = + | Globals + | "no-limit" + | (number & {}) + | (string & {}); - export type MsHyphenateLimitZone = Globals | TLength | (string & {}); + export type MsHyphenateLimitZone = + | Globals + | TLength + | (string & {}); export type MsImeAlign = Globals | "after" | "auto"; - export type MsOverflowStyle = Globals | "-ms-autohiding-scrollbar" | "auto" | "none" | "scrollbar"; + export type MsOverflowStyle = + | Globals + | "-ms-autohiding-scrollbar" + | "auto" + | "none" + | "scrollbar"; export type MsScrollChaining = Globals | "chained" | "none"; export type MsScrollLimit = Globals | (string & {}); - export type MsScrollLimitXMax = Globals | TLength | "auto"; + export type MsScrollLimitXMax = + | Globals + | TLength + | "auto"; - export type MsScrollLimitXMin = Globals | TLength; + export type MsScrollLimitXMin = + | Globals + | TLength; - export type MsScrollLimitYMax = Globals | TLength | "auto"; + export type MsScrollLimitYMax = + | Globals + | TLength + | "auto"; - export type MsScrollLimitYMin = Globals | TLength; + export type MsScrollLimitYMin = + | Globals + | TLength; export type MsScrollRails = Globals | "none" | "railed"; @@ -20475,13 +22023,26 @@ export namespace Property { export type MsScrollbarTrackColor = Globals | DataType.Color; - export type MsTextAutospace = Globals | "ideograph-alpha" | "ideograph-numeric" | "ideograph-parenthesis" | "ideograph-space" | "none"; + export type MsTextAutospace = + | Globals + | "ideograph-alpha" + | "ideograph-numeric" + | "ideograph-parenthesis" + | "ideograph-space" + | "none"; export type MsTouchSelect = Globals | "grippers" | "none"; export type MsUserSelect = Globals | "element" | "none" | "text"; - export type MsWrapFlow = Globals | "auto" | "both" | "clear" | "end" | "maximum" | "start"; + export type MsWrapFlow = + | Globals + | "auto" + | "both" + | "clear" + | "end" + | "maximum" + | "start"; export type MsWrapMargin = Globals | TLength; @@ -20539,17 +22100,39 @@ export namespace Property { | "textarea" | "textfield"; - export type WebkitBorderBefore = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type WebkitBorderBefore = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type WebkitBorderBeforeColor = Globals | DataType.Color; - export type WebkitBorderBeforeStyle = Globals | DataType.LineStyle | (string & {}); + export type WebkitBorderBeforeStyle = + | Globals + | DataType.LineStyle + | (string & {}); - export type WebkitBorderBeforeWidth = Globals | DataType.LineWidth | (string & {}); + export type WebkitBorderBeforeWidth = + | Globals + | DataType.LineWidth + | (string & {}); - export type WebkitBoxReflect = Globals | TLength | "above" | "below" | "left" | "right" | (string & {}); + export type WebkitBoxReflect = + | Globals + | TLength + | "above" + | "below" + | "left" + | "right" + | (string & {}); - export type WebkitLineClamp = Globals | "none" | (number & {}) | (string & {}); + export type WebkitLineClamp = + | Globals + | "none" + | (number & {}) + | (string & {}); export type WebkitMask = | Globals @@ -20563,29 +22146,76 @@ export namespace Property { | "text" | (string & {}); - export type WebkitMaskAttachment = Globals | DataType.Attachment | (string & {}); + export type WebkitMaskAttachment = + | Globals + | DataType.Attachment + | (string & {}); - export type WebkitMaskClip = Globals | DataType.Box | "border" | "content" | "padding" | "text" | (string & {}); + export type WebkitMaskClip = + | Globals + | DataType.Box + | "border" + | "content" + | "padding" + | "text" + | (string & {}); - export type WebkitMaskComposite = Globals | DataType.CompositeStyle | (string & {}); + export type WebkitMaskComposite = + | Globals + | DataType.CompositeStyle + | (string & {}); export type WebkitMaskImage = Globals | "none" | (string & {}); - export type WebkitMaskOrigin = Globals | DataType.Box | "border" | "content" | "padding" | (string & {}); + export type WebkitMaskOrigin = + | Globals + | DataType.Box + | "border" + | "content" + | "padding" + | (string & {}); - export type WebkitMaskPosition = Globals | DataType.Position | (string & {}); + export type WebkitMaskPosition = + | Globals + | DataType.Position + | (string & {}); - export type WebkitMaskPositionX = Globals | TLength | "center" | "left" | "right" | (string & {}); + export type WebkitMaskPositionX = + | Globals + | TLength + | "center" + | "left" + | "right" + | (string & {}); - export type WebkitMaskPositionY = Globals | TLength | "bottom" | "center" | "top" | (string & {}); + export type WebkitMaskPositionY = + | Globals + | TLength + | "bottom" + | "center" + | "top" + | (string & {}); export type WebkitMaskRepeat = Globals | DataType.RepeatStyle | (string & {}); - export type WebkitMaskRepeatX = Globals | "no-repeat" | "repeat" | "round" | "space"; + export type WebkitMaskRepeatX = + | Globals + | "no-repeat" + | "repeat" + | "round" + | "space"; - export type WebkitMaskRepeatY = Globals | "no-repeat" | "repeat" | "round" | "space"; + export type WebkitMaskRepeatY = + | Globals + | "no-repeat" + | "repeat" + | "round" + | "space"; - export type WebkitMaskSize = Globals | DataType.BgSize | (string & {}); + export type WebkitMaskSize = + | Globals + | DataType.BgSize + | (string & {}); export type WebkitOverflowScrolling = Globals | "auto" | "touch"; @@ -20593,15 +22223,25 @@ export namespace Property { export type WebkitTextFillColor = Globals | DataType.Color; - export type WebkitTextStroke = Globals | DataType.Color | TLength | (string & {}); + export type WebkitTextStroke = + | Globals + | DataType.Color + | TLength + | (string & {}); export type WebkitTextStrokeColor = Globals | DataType.Color; - export type WebkitTextStrokeWidth = Globals | TLength; + export type WebkitTextStrokeWidth = + | Globals + | TLength; export type WebkitTouchCallout = Globals | "default" | "none"; - export type WebkitUserModify = Globals | "read-only" | "read-write" | "read-write-plaintext-only"; + export type WebkitUserModify = + | Globals + | "read-only" + | "read-write" + | "read-write-plaintext-only"; export type AlignmentBaseline = | Globals @@ -20618,13 +22258,23 @@ export namespace Property { | "text-after-edge" | "text-before-edge"; - export type BaselineShift = Globals | TLength | "baseline" | "sub" | "super" | (string & {}); + export type BaselineShift = + | Globals + | TLength + | "baseline" + | "sub" + | "super" + | (string & {}); export type ClipRule = Globals | "evenodd" | "nonzero"; export type ColorInterpolation = Globals | "auto" | "linearRGB" | "sRGB"; - export type ColorRendering = Globals | "auto" | "optimizeQuality" | "optimizeSpeed"; + export type ColorRendering = + | Globals + | "auto" + | "optimizeQuality" + | "optimizeSpeed"; export type DominantBaseline = | Globals @@ -20651,7 +22301,11 @@ export namespace Property { export type FloodOpacity = Globals | (number & {}) | (string & {}); - export type GlyphOrientationVertical = Globals | "auto" | (string & {}) | (number & {}); + export type GlyphOrientationVertical = + | Globals + | "auto" + | (string & {}) + | (number & {}); export type LightingColor = Globals | DataType.Color | "currentColor"; @@ -20663,7 +22317,12 @@ export namespace Property { export type MarkerStart = Globals | "none" | (string & {}); - export type ShapeRendering = Globals | "auto" | "crispEdges" | "geometricPrecision" | "optimizeSpeed"; + export type ShapeRendering = + | Globals + | "auto" + | "crispEdges" + | "geometricPrecision" + | "optimizeSpeed"; export type StopColor = Globals | DataType.Color | "currentColor"; @@ -20671,9 +22330,15 @@ export namespace Property { export type Stroke = Globals | DataType.Paint; - export type StrokeDasharray = Globals | DataType.Dasharray | "none"; + export type StrokeDasharray = + | Globals + | DataType.Dasharray + | "none"; - export type StrokeDashoffset = Globals | TLength | (string & {}); + export type StrokeDashoffset = + | Globals + | TLength + | (string & {}); export type StrokeLinecap = Globals | "butt" | "round" | "square"; @@ -20683,7 +22348,10 @@ export namespace Property { export type StrokeOpacity = Globals | (number & {}) | (string & {}); - export type StrokeWidth = Globals | TLength | (string & {}); + export type StrokeWidth = + | Globals + | TLength + | (string & {}); export type TextAnchor = Globals | "end" | "middle" | "start"; @@ -20691,7 +22359,10 @@ export namespace Property { } export namespace AtRule { - export interface CounterStyle { + export interface CounterStyle< + TLength = (string & {}) | 0, + TTime = string & {}, + > { additiveSymbols?: string | undefined; fallback?: string | undefined; negative?: string | undefined; @@ -20704,7 +22375,10 @@ export namespace AtRule { system?: System | undefined; } - export interface CounterStyleHyphen { + export interface CounterStyleHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { "additive-symbols"?: string | undefined; fallback?: string | undefined; negative?: string | undefined; @@ -20717,9 +22391,15 @@ export namespace AtRule { system?: System | undefined; } - export type CounterStyleFallback = Fallback>; + export type CounterStyleFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type CounterStyleHyphenFallback = Fallback>; + export type CounterStyleHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; export interface FontFace { MozFontFeatureSettings?: FontFeatureSettings | undefined; @@ -20739,7 +22419,10 @@ export namespace AtRule { unicodeRange?: string | undefined; } - export interface FontFaceHyphen { + export interface FontFaceHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { "-moz-font-feature-settings"?: FontFeatureSettings | undefined; "ascent-override"?: AscentOverride | undefined; "descent-override"?: DescentOverride | undefined; @@ -20757,25 +22440,43 @@ export namespace AtRule { "unicode-range"?: string | undefined; } - export type FontFaceFallback = Fallback>; + export type FontFaceFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type FontFaceHyphenFallback = Fallback>; + export type FontFaceHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export interface FontPaletteValues { + export interface FontPaletteValues< + TLength = (string & {}) | 0, + TTime = string & {}, + > { basePalette?: BasePalette | undefined; fontFamily?: string | undefined; overrideColors?: string | undefined; } - export interface FontPaletteValuesHyphen { + export interface FontPaletteValuesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { "base-palette"?: BasePalette | undefined; "font-family"?: string | undefined; "override-colors"?: string | undefined; } - export type FontPaletteValuesFallback = Fallback>; + export type FontPaletteValuesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type FontPaletteValuesHyphenFallback = Fallback>; + export type FontPaletteValuesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; export interface Page { bleed?: Bleed | undefined; @@ -20784,16 +22485,25 @@ export namespace AtRule { size?: Size | undefined; } - export interface PageHyphen { + export interface PageHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { bleed?: Bleed | undefined; marks?: Marks | undefined; "page-orientation"?: PageOrientation | undefined; size?: Size | undefined; } - export type PageFallback = Fallback>; + export type PageFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type PageHyphenFallback = Fallback>; + export type PageHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; export interface Property { inherits?: Inherits | undefined; @@ -20801,15 +22511,24 @@ export namespace AtRule { syntax?: string | undefined; } - export interface PropertyHyphen { + export interface PropertyHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { inherits?: Inherits | undefined; "initial-value"?: string | undefined; syntax?: string | undefined; } - export type PropertyFallback = Fallback>; + export type PropertyFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type PropertyHyphenFallback = Fallback>; + export type PropertyHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; export interface Viewport { height?: Height | undefined; @@ -20826,7 +22545,10 @@ export namespace AtRule { zoom?: Zoom | undefined; } - export interface ViewportHyphen { + export interface ViewportHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { height?: Height | undefined; "max-height"?: MaxHeight | undefined; "max-width"?: MaxWidth | undefined; @@ -20841,15 +22563,34 @@ export namespace AtRule { zoom?: Zoom | undefined; } - export type ViewportFallback = Fallback>; + export type ViewportFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type ViewportHyphenFallback = Fallback>; + export type ViewportHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; type Range = "auto" | (string & {}); - type SpeakAs = "auto" | "bullets" | "numbers" | "spell-out" | "words" | (string & {}); + type SpeakAs = + | "auto" + | "bullets" + | "numbers" + | "spell-out" + | "words" + | (string & {}); - type System = "additive" | "alphabetic" | "cyclic" | "fixed" | "numeric" | "symbolic" | (string & {}); + type System = + | "additive" + | "alphabetic" + | "cyclic" + | "fixed" + | "numeric" + | "symbolic" + | (string & {}); type FontFeatureSettings = "normal" | (string & {}); @@ -20909,7 +22650,13 @@ export namespace AtRule { type PageOrientation = "rotate-left" | "rotate-right" | "upright"; - type Size = DataType.PageSize | TLength | "auto" | "landscape" | "portrait" | (string & {}); + type Size = + | DataType.PageSize + | TLength + | "auto" + | "landscape" + | "portrait" + | (string & {}); type Inherits = "false" | "true"; @@ -20945,13 +22692,28 @@ export namespace AtRule { * update from `csstype` can break your typing if you're using the `DataType` namespace. */ export namespace DataType { - type AbsoluteSize = "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large"; + type AbsoluteSize = + | "large" + | "medium" + | "small" + | "x-large" + | "x-small" + | "xx-large" + | "xx-small" + | "xxx-large"; type AnimateableFeature = "contents" | "scroll-position" | (string & {}); type Attachment = "fixed" | "local" | "scroll"; - type BgPosition = TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {}); + type BgPosition = + | TLength + | "bottom" + | "center" + | "left" + | "right" + | "top" + | (string & {}); type BgSize = TLength | "auto" | "contain" | "cover" | (string & {}); @@ -20975,7 +22737,11 @@ export namespace DataType { type Box = "border-box" | "content-box" | "padding-box"; - type Color = NamedColor | DeprecatedSystemColor | "currentcolor" | (string & {}); + type Color = + | NamedColor + | DeprecatedSystemColor + | "currentcolor" + | (string & {}); type CompatAuto = | "button" @@ -21006,13 +22772,22 @@ export namespace DataType { type CompositingOperator = "add" | "exclude" | "intersect" | "subtract"; - type ContentDistribution = "space-around" | "space-between" | "space-evenly" | "stretch"; + type ContentDistribution = + | "space-around" + | "space-between" + | "space-evenly" + | "stretch"; type ContentList = Quote | "contents" | (string & {}); type ContentPosition = "center" | "end" | "flex-end" | "flex-start" | "start"; - type CubicBezierTimingFunction = "ease" | "ease-in" | "ease-in-out" | "ease-out" | (string & {}); + type CubicBezierTimingFunction = + | "ease" + | "ease-in" + | "ease-in-out" + | "ease-out" + | (string & {}); type Dasharray = TLength | (string & {}) | (number & {}); @@ -21046,7 +22821,16 @@ export namespace DataType { | "WindowFrame" | "WindowText"; - type DisplayInside = "-ms-flexbox" | "-ms-grid" | "-webkit-flex" | "flex" | "flow" | "flow-root" | "grid" | "ruby" | "table"; + type DisplayInside = + | "-ms-flexbox" + | "-ms-grid" + | "-webkit-flex" + | "flex" + | "flow" + | "flow-root" + | "grid" + | "ruby" + | "table"; type DisplayInternal = | "ruby-base" @@ -21062,15 +22846,39 @@ export namespace DataType { | "table-row" | "table-row-group"; - type DisplayLegacy = "-ms-inline-flexbox" | "-ms-inline-grid" | "-webkit-inline-flex" | "inline-block" | "inline-flex" | "inline-grid" | "inline-list-item" | "inline-table"; + type DisplayLegacy = + | "-ms-inline-flexbox" + | "-ms-inline-grid" + | "-webkit-inline-flex" + | "inline-block" + | "inline-flex" + | "inline-grid" + | "inline-list-item" + | "inline-table"; type DisplayOutside = "block" | "inline" | "run-in"; - type EasingFunction = CubicBezierTimingFunction | StepTimingFunction | "linear"; - - type EastAsianVariantValues = "jis04" | "jis78" | "jis83" | "jis90" | "simplified" | "traditional"; - - type FinalBgLayer = Color | BgPosition | RepeatStyle | Attachment | Box | "none" | (string & {}); + type EasingFunction = + | CubicBezierTimingFunction + | StepTimingFunction + | "linear"; + + type EastAsianVariantValues = + | "jis04" + | "jis78" + | "jis83" + | "jis90" + | "simplified" + | "traditional"; + + type FinalBgLayer = + | Color + | BgPosition + | RepeatStyle + | Attachment + | Box + | "none" + | (string & {}); type FontStretchAbsolute = | "condensed" @@ -21086,17 +22894,45 @@ export namespace DataType { type FontWeightAbsolute = "bold" | "normal" | (number & {}) | (string & {}); - type GenericFamily = "cursive" | "fantasy" | "monospace" | "sans-serif" | "serif"; + type GenericFamily = + | "cursive" + | "fantasy" + | "monospace" + | "sans-serif" + | "serif"; - type GeometryBox = Box | "fill-box" | "margin-box" | "stroke-box" | "view-box"; + type GeometryBox = + | Box + | "fill-box" + | "margin-box" + | "stroke-box" + | "view-box"; type GridLine = "auto" | (string & {}) | (number & {}); - type LineStyle = "dashed" | "dotted" | "double" | "groove" | "hidden" | "inset" | "none" | "outset" | "ridge" | "solid"; + type LineStyle = + | "dashed" + | "dotted" + | "double" + | "groove" + | "hidden" + | "inset" + | "none" + | "outset" + | "ridge" + | "solid"; type LineWidth = TLength | "medium" | "thick" | "thin"; - type MaskLayer = Position | RepeatStyle | GeometryBox | CompositingOperator | MaskingMode | "no-clip" | "none" | (string & {}); + type MaskLayer = + | Position + | RepeatStyle + | GeometryBox + | CompositingOperator + | MaskingMode + | "no-clip" + | "none" + | (string & {}); type MaskingMode = "alpha" | "luminance" | "match-source"; @@ -21251,17 +23087,58 @@ export namespace DataType { | "yellow" | "yellowgreen"; - type PageSize = "A3" | "A4" | "A5" | "B4" | "B5" | "JIS-B4" | "JIS-B5" | "ledger" | "legal" | "letter"; - - type Paint = Color | "child" | "context-fill" | "context-stroke" | "none" | (string & {}); - - type Position = TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {}); + type PageSize = + | "A3" + | "A4" + | "A5" + | "B4" + | "B5" + | "JIS-B4" + | "JIS-B5" + | "ledger" + | "legal" + | "letter"; + + type Paint = + | Color + | "child" + | "context-fill" + | "context-stroke" + | "none" + | (string & {}); - type Quote = "close-quote" | "no-close-quote" | "no-open-quote" | "open-quote"; + type Position = + | TLength + | "bottom" + | "center" + | "left" + | "right" + | "top" + | (string & {}); - type RepeatStyle = "no-repeat" | "repeat" | "repeat-x" | "repeat-y" | "round" | "space" | (string & {}); + type Quote = + | "close-quote" + | "no-close-quote" + | "no-open-quote" + | "open-quote"; + + type RepeatStyle = + | "no-repeat" + | "repeat" + | "repeat-x" + | "repeat-y" + | "round" + | "space" + | (string & {}); - type SelfPosition = "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start"; + type SelfPosition = + | "center" + | "end" + | "flex-end" + | "flex-start" + | "self-end" + | "self-start" + | "start"; type SingleAnimation = | EasingFunction @@ -21278,19 +23155,41 @@ export namespace DataType { type SingleAnimationComposition = "accumulate" | "add" | "replace"; - type SingleAnimationDirection = "alternate" | "alternate-reverse" | "normal" | "reverse"; + type SingleAnimationDirection = + | "alternate" + | "alternate-reverse" + | "normal" + | "reverse"; type SingleAnimationFillMode = "backwards" | "both" | "forwards" | "none"; type SingleAnimationTimeline = "auto" | "none" | (string & {}); - type SingleTransition = EasingFunction | TTime | "all" | "allow-discrete" | "none" | "normal" | (string & {}); + type SingleTransition = + | EasingFunction + | TTime + | "all" + | "allow-discrete" + | "none" + | "normal" + | (string & {}); type StepTimingFunction = "step-end" | "step-start" | (string & {}); - type TimelineRangeName = "contain" | "cover" | "entry" | "entry-crossing" | "exit" | "exit-crossing"; + type TimelineRangeName = + | "contain" + | "cover" + | "entry" + | "entry-crossing" + | "exit" + | "exit-crossing"; - type TrackBreadth = TLength | "auto" | "max-content" | "min-content" | (string & {}); + type TrackBreadth = + | TLength + | "auto" + | "max-content" + | "min-content" + | (string & {}); type ViewportLength = TLength | "auto" | (string & {}); diff --git a/apps/wow-docs/styled-system/types/global.d.ts b/apps/wow-docs/styled-system/types/global.d.ts index 6425b40b..35b52755 100644 --- a/apps/wow-docs/styled-system/types/global.d.ts +++ b/apps/wow-docs/styled-system/types/global.d.ts @@ -1,19 +1,43 @@ /* eslint-disable */ // @ts-nocheck -import type * as Panda from '@pandacss/dev' -import type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe'; -import type { Parts } from './parts'; -import type { PatternConfig, PatternProperties } from './pattern'; -import type { GlobalStyleObject, SystemStyleObject } from './system-types'; -import type { CompositionStyles } from './composition'; +import type * as Panda from "@pandacss/dev"; +import type { + RecipeVariantRecord, + RecipeConfig, + SlotRecipeVariantRecord, + SlotRecipeConfig, +} from "./recipe"; +import type { Parts } from "./parts"; +import type { PatternConfig, PatternProperties } from "./pattern"; +import type { GlobalStyleObject, SystemStyleObject } from "./system-types"; +import type { CompositionStyles } from "./composition"; -declare module '@pandacss/dev' { - export function defineRecipe(config: RecipeConfig): Panda.RecipeConfig - export function defineSlotRecipe>(config: SlotRecipeConfig): Panda.SlotRecipeConfig - export function defineStyles(definition: SystemStyleObject): SystemStyleObject - export function defineGlobalStyles(definition: GlobalStyleObject): Panda.GlobalStyleObject - export function defineTextStyles(definition: CompositionStyles['textStyles']): Panda.TextStyles - export function defineLayerStyles(definition: CompositionStyles['layerStyles']): Panda.LayerStyles - export function definePattern(config: PatternConfig): Panda.PatternConfig - export function defineParts(parts: T): (config: Partial>) => Partial> -} \ No newline at end of file +declare module "@pandacss/dev" { + export function defineRecipe( + config: RecipeConfig + ): Panda.RecipeConfig; + export function defineSlotRecipe< + S extends string, + V extends SlotRecipeVariantRecord, + >(config: SlotRecipeConfig): Panda.SlotRecipeConfig; + export function defineStyles( + definition: SystemStyleObject + ): SystemStyleObject; + export function defineGlobalStyles( + definition: GlobalStyleObject + ): Panda.GlobalStyleObject; + export function defineTextStyles( + definition: CompositionStyles["textStyles"] + ): Panda.TextStyles; + export function defineLayerStyles( + definition: CompositionStyles["layerStyles"] + ): Panda.LayerStyles; + export function definePattern( + config: PatternConfig + ): Panda.PatternConfig; + export function defineParts( + parts: T + ): ( + config: Partial> + ) => Partial>; +} diff --git a/apps/wow-docs/styled-system/types/parts.d.ts b/apps/wow-docs/styled-system/types/parts.d.ts index a1b3aeca..d34dc33e 100644 --- a/apps/wow-docs/styled-system/types/parts.d.ts +++ b/apps/wow-docs/styled-system/types/parts.d.ts @@ -1,8 +1,8 @@ /* eslint-disable */ export interface Part { - selector: string + selector: string; } export interface Parts { - [key: string]: Part + [key: string]: Part; } diff --git a/apps/wow-docs/styled-system/types/pattern.d.ts b/apps/wow-docs/styled-system/types/pattern.d.ts index a673055e..ddd72f5d 100644 --- a/apps/wow-docs/styled-system/types/pattern.d.ts +++ b/apps/wow-docs/styled-system/types/pattern.d.ts @@ -1,78 +1,87 @@ /* eslint-disable */ -import type { CssProperty, SystemStyleObject } from './system-types'; -import type { TokenCategory } from '../tokens/index'; +import type { CssProperty, SystemStyleObject } from "./system-types"; +import type { TokenCategory } from "../tokens/index"; -type Primitive = string | number | boolean | null | undefined -type LiteralUnion = T | (K & Record) +type Primitive = string | number | boolean | null | undefined; +type LiteralUnion = + | T + | (K & Record); export type PatternProperty = - | { type: 'property'; value: CssProperty } - | { type: 'enum'; value: string[] } - | { type: 'token'; value: TokenCategory; property?: CssProperty } - | { type: 'string' | 'boolean' | 'number' } + | { type: "property"; value: CssProperty } + | { type: "enum"; value: string[] } + | { type: "token"; value: TokenCategory; property?: CssProperty } + | { type: "string" | "boolean" | "number" }; export interface PatternHelpers { - map: (value: any, fn: (value: string) => string | undefined) => any - isCssUnit: (value: any) => boolean - isCssVar: (value: any) => boolean - isCssFunction: (value: any) => boolean + map: (value: any, fn: (value: string) => string | undefined) => any; + isCssUnit: (value: any) => boolean; + isCssVar: (value: any) => boolean; + isCssFunction: (value: any) => boolean; } export interface PatternProperties { - [key: string]: PatternProperty + [key: string]: PatternProperty; } -type InferProps = Record, any> +type InferProps = Record, any>; -export type PatternDefaultValue = Partial> +export type PatternDefaultValue = Partial>; -export type PatternDefaultValueFn = (props: InferProps) => PatternDefaultValue +export type PatternDefaultValueFn = ( + props: InferProps +) => PatternDefaultValue; -export interface PatternConfig { +export interface PatternConfig< + T extends PatternProperties = PatternProperties, +> { /** * The description of the pattern. This will be used in the JSDoc comment. */ - description?: string + description?: string; /** * The JSX element rendered by the pattern * @default 'div' */ - jsxElement?: string + jsxElement?: string; /** * The properties of the pattern. */ - properties?: T + properties?: T; /** * The default values of the pattern. */ - defaultValues?: PatternDefaultValue | PatternDefaultValueFn + defaultValues?: PatternDefaultValue | PatternDefaultValueFn; /** * The css object this pattern will generate. */ - transform?: (props: InferProps, helpers: PatternHelpers) => SystemStyleObject + transform?: ( + props: InferProps, + helpers: PatternHelpers + ) => SystemStyleObject; /** * Whether the pattern is deprecated. */ - deprecated?: boolean | string + deprecated?: boolean | string; /** * The jsx element name this pattern will generate. */ - jsxName?: string + jsxName?: string; /** * The jsx elements to track for this pattern. Can be string or Regexp. * * @default capitalize(pattern.name) * @example ['Button', 'Link', /Button$/] */ - jsx?: Array + jsx?: Array; /** * Whether to only generate types for the specified properties. * This will disallow css properties */ - strict?: boolean + strict?: boolean; /** * @experimental * Disallow certain css properties for this pattern */ - blocklist?: LiteralUnion[] + blocklist?: LiteralUnion[]; } diff --git a/apps/wow-docs/styled-system/types/recipe.d.ts b/apps/wow-docs/styled-system/types/recipe.d.ts index d9d3ac98..1875ac03 100644 --- a/apps/wow-docs/styled-system/types/recipe.d.ts +++ b/apps/wow-docs/styled-system/types/recipe.d.ts @@ -1,141 +1,166 @@ /* eslint-disable */ -import type { RecipeRule } from './static-css'; -import type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'; +import type { RecipeRule } from "./static-css"; +import type { + SystemStyleObject, + DistributiveOmit, + Pretty, +} from "./system-types"; -type StringToBoolean = T extends 'true' | 'false' ? boolean : T +type StringToBoolean = T extends "true" | "false" ? boolean : T; -export type RecipeVariantRecord = Record> +export type RecipeVariantRecord = Record>; -export type RecipeSelection = keyof any extends keyof T - ? {} - : { - [K in keyof T]?: StringToBoolean | undefined - } +export type RecipeSelection = + keyof any extends keyof T + ? {} + : { + [K in keyof T]?: StringToBoolean | undefined; + }; -export type RecipeVariantFn = (props?: RecipeSelection) => string +export type RecipeVariantFn = ( + props?: RecipeSelection +) => string; /** * Extract the variant as optional props from a `cva` function. * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type. */ export type RecipeVariantProps< - T extends RecipeVariantFn | SlotRecipeVariantFn>, -> = Pretty[0]> + T extends + | RecipeVariantFn + | SlotRecipeVariantFn>, +> = Pretty[0]>; /** * Extract the variants from a `cva` function. */ export type RecipeVariant< - T extends RecipeVariantFn | SlotRecipeVariantFn>, -> = Exclude>>, undefined> + T extends + | RecipeVariantFn + | SlotRecipeVariantFn>, +> = Exclude>>, undefined>; type RecipeVariantMap = { - [K in keyof T]: Array -} + [K in keyof T]: Array; +}; /* ----------------------------------------------------------------------------- * Recipe / Standard * -----------------------------------------------------------------------------*/ -export interface RecipeRuntimeFn extends RecipeVariantFn { - __type: RecipeSelection - variantKeys: (keyof T)[] - variantMap: RecipeVariantMap - raw: (props?: RecipeSelection) => SystemStyleObject - config: RecipeConfig +export interface RecipeRuntimeFn + extends RecipeVariantFn { + __type: RecipeSelection; + variantKeys: (keyof T)[]; + variantMap: RecipeVariantMap; + raw: (props?: RecipeSelection) => SystemStyleObject; + config: RecipeConfig; splitVariantProps>( - props: Props, - ): [RecipeSelection, Pretty>] - getVariantProps: (props?: RecipeSelection) => RecipeSelection + props: Props + ): [RecipeSelection, Pretty>]; + getVariantProps: (props?: RecipeSelection) => RecipeSelection; } -type OneOrMore = T | Array +type OneOrMore = T | Array; export type RecipeCompoundSelection = { - [K in keyof T]?: OneOrMore> | undefined -} + [K in keyof T]?: OneOrMore> | undefined; +}; export type RecipeCompoundVariant = T & { - css: SystemStyleObject -} + css: SystemStyleObject; +}; -export interface RecipeDefinition { +export interface RecipeDefinition< + T extends RecipeVariantRecord = RecipeVariantRecord, +> { /** * The base styles of the recipe. */ - base?: SystemStyleObject + base?: SystemStyleObject; /** * Whether the recipe is deprecated. */ - deprecated?: boolean | string + deprecated?: boolean | string; /** * The multi-variant styles of the recipe. */ - variants?: T + variants?: T; /** * The default variants of the recipe. */ - defaultVariants?: RecipeSelection + defaultVariants?: RecipeSelection; /** * The styles to apply when a combination of variants is selected. */ - compoundVariants?: Pretty>>[] + compoundVariants?: Pretty< + RecipeCompoundVariant> + >[]; } -export type RecipeCreatorFn = (config: RecipeDefinition) => RecipeRuntimeFn +export type RecipeCreatorFn = ( + config: RecipeDefinition +) => RecipeRuntimeFn; interface RecipeConfigMeta { /** * The class name of the recipe. */ - className: string + className: string; /** * The description of the recipe. This will be used in the JSDoc comment. */ - description?: string + description?: string; /** * The jsx elements to track for this recipe. Can be string or Regexp. * * @default capitalize(recipe.name) * @example ['Button', 'Link', /Button$/] */ - jsx?: Array + jsx?: Array; /** * Variants to pre-generate, will be include in the final `config.staticCss` */ - staticCss?: RecipeRule[] + staticCss?: RecipeRule[]; } -export interface RecipeConfig - extends RecipeDefinition, +export interface RecipeConfig< + T extends RecipeVariantRecord = RecipeVariantRecord, +> extends RecipeDefinition, RecipeConfigMeta {} /* ----------------------------------------------------------------------------- * Recipe / Slot * -----------------------------------------------------------------------------*/ -type SlotRecord = Partial> - -export type SlotRecipeVariantRecord = Record>> - -export type SlotRecipeVariantFn = ( - props?: RecipeSelection, -) => SlotRecord - -export interface SlotRecipeRuntimeFn> - extends SlotRecipeVariantFn { - raw: (props?: RecipeSelection) => Record - variantKeys: (keyof T)[] - variantMap: RecipeVariantMap +type SlotRecord = Partial>; + +export type SlotRecipeVariantRecord = Record< + any, + Record> +>; + +export type SlotRecipeVariantFn< + S extends string, + T extends RecipeVariantRecord, +> = (props?: RecipeSelection) => SlotRecord; + +export interface SlotRecipeRuntimeFn< + S extends string, + T extends SlotRecipeVariantRecord, +> extends SlotRecipeVariantFn { + raw: (props?: RecipeSelection) => Record; + variantKeys: (keyof T)[]; + variantMap: RecipeVariantMap; splitVariantProps>( - props: Props, - ): [RecipeSelection, Pretty>] - getVariantProps: (props?: RecipeSelection) => RecipeSelection + props: Props + ): [RecipeSelection, Pretty>]; + getVariantProps: (props?: RecipeSelection) => RecipeSelection; } export type SlotRecipeCompoundVariant = T & { - css: SlotRecord -} + css: SlotRecord; +}; export interface SlotRecipeDefinition< S extends string = string, @@ -144,38 +169,43 @@ export interface SlotRecipeDefinition< /** * An optional class name that can be used to target slots in the DOM. */ - className?: string + className?: string; /** * Whether the recipe is deprecated. */ - deprecated?: boolean | string + deprecated?: boolean | string; /** * The parts/slots of the recipe. */ - slots: S[] | Readonly + slots: S[] | Readonly; /** * The base styles of the recipe. */ - base?: SlotRecord + base?: SlotRecord; /** * The multi-variant styles of the recipe. */ - variants?: T + variants?: T; /** * The default variants of the recipe. */ - defaultVariants?: RecipeSelection + defaultVariants?: RecipeSelection; /** * The styles to apply when a combination of variants is selected. */ - compoundVariants?: Pretty>>[] + compoundVariants?: Pretty< + SlotRecipeCompoundVariant> + >[]; } -export type SlotRecipeCreatorFn = >( - config: SlotRecipeDefinition, -) => SlotRecipeRuntimeFn +export type SlotRecipeCreatorFn = < + S extends string, + T extends SlotRecipeVariantRecord, +>( + config: SlotRecipeDefinition +) => SlotRecipeRuntimeFn; export type SlotRecipeConfig< S extends string = string, T extends SlotRecipeVariantRecord = SlotRecipeVariantRecord, -> = SlotRecipeDefinition & RecipeConfigMeta +> = SlotRecipeDefinition & RecipeConfigMeta; diff --git a/apps/wow-docs/styled-system/types/selectors.d.ts b/apps/wow-docs/styled-system/types/selectors.d.ts index 0b36d984..059feeb0 100644 --- a/apps/wow-docs/styled-system/types/selectors.d.ts +++ b/apps/wow-docs/styled-system/types/selectors.d.ts @@ -1,59 +1,62 @@ /* eslint-disable */ -import type { Pseudos } from './csstype'; +import type { Pseudos } from "./csstype"; type AriaAttributes = - | '[aria-disabled]' - | '[aria-hidden]' - | '[aria-invalid]' - | '[aria-readonly]' - | '[aria-required]' - | '[aria-selected]' - | '[aria-checked]' - | '[aria-expanded]' - | '[aria-pressed]' - | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]` - | '[aria-invalid]' - | `[aria-sort=${'ascending' | 'descending'}]` + | "[aria-disabled]" + | "[aria-hidden]" + | "[aria-invalid]" + | "[aria-readonly]" + | "[aria-required]" + | "[aria-selected]" + | "[aria-checked]" + | "[aria-expanded]" + | "[aria-pressed]" + | `[aria-current=${"page" | "step" | "location" | "date" | "time"}]` + | "[aria-invalid]" + | `[aria-sort=${"ascending" | "descending"}]`; type DataAttributes = - | '[data-selected]' - | '[data-highlighted]' - | '[data-hover]' - | '[data-active]' - | '[data-checked]' - | '[data-disabled]' - | '[data-readonly]' - | '[data-focus]' - | '[data-focus-visible]' - | '[data-focus-visible-added]' - | '[data-invalid]' - | '[data-pressed]' - | '[data-expanded]' - | '[data-grabbed]' - | '[data-dragged]' - | '[data-orientation=horizontal]' - | '[data-orientation=vertical]' - | '[data-in-range]' - | '[data-out-of-range]' - | '[data-placeholder-shown]' + | "[data-selected]" + | "[data-highlighted]" + | "[data-hover]" + | "[data-active]" + | "[data-checked]" + | "[data-disabled]" + | "[data-readonly]" + | "[data-focus]" + | "[data-focus-visible]" + | "[data-focus-visible-added]" + | "[data-invalid]" + | "[data-pressed]" + | "[data-expanded]" + | "[data-grabbed]" + | "[data-dragged]" + | "[data-orientation=horizontal]" + | "[data-orientation=vertical]" + | "[data-in-range]" + | "[data-out-of-range]" + | "[data-placeholder-shown]" | `[data-part=${string}]` | `[data-attr=${string}]` | `[data-placement=${string}]` | `[data-theme=${string}]` | `[data-size=${string}]` | `[data-state=${string}]` - | '[data-empty]' - | '[data-loading]' - | '[data-loaded]' - | '[data-enter]' - | '[data-entering]' - | '[data-exited]' - | '[data-exiting]' + | "[data-empty]" + | "[data-loading]" + | "[data-loaded]" + | "[data-enter]" + | "[data-entering]" + | "[data-exited]" + | "[data-exiting]"; -type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}` -type ParentSelector = `${DataAttributes | AriaAttributes} &` +type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`; +type ParentSelector = `${DataAttributes | AriaAttributes} &`; -type AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page' +type AtRuleType = "media" | "layer" | "container" | "supports" | "page"; -export type AnySelector = `${string}&` | `&${string}` | `@${AtRuleType}${string}` -export type Selectors = AttributeSelector | ParentSelector +export type AnySelector = + | `${string}&` + | `&${string}` + | `@${AtRuleType}${string}`; +export type Selectors = AttributeSelector | ParentSelector; diff --git a/apps/wow-docs/styled-system/types/static-css.d.ts b/apps/wow-docs/styled-system/types/static-css.d.ts index 28f1cc68..1da29302 100644 --- a/apps/wow-docs/styled-system/types/static-css.d.ts +++ b/apps/wow-docs/styled-system/types/static-css.d.ts @@ -4,8 +4,8 @@ interface WithConditions { * The css conditions to generate for the rule. * @example ['hover', 'focus'] */ - conditions?: string[] - responsive?: boolean + conditions?: string[]; + responsive?: boolean; } export interface CssRule extends WithConditions { @@ -14,38 +14,38 @@ export interface CssRule extends WithConditions { * @example ['margin', 'padding'] */ properties: { - [property: string]: Array - } + [property: string]: Array; + }; } interface RecipeRuleVariants { - [variant: string]: boolean | string[] + [variant: string]: boolean | string[]; } -export type RecipeRule = '*' | (RecipeRuleVariants & WithConditions) -export type PatternRule = '*' | CssRule +export type RecipeRule = "*" | (RecipeRuleVariants & WithConditions); +export type PatternRule = "*" | CssRule; export interface StaticCssOptions { /** * The css utility classes to generate. */ - css?: CssRule[] + css?: CssRule[]; /** * The css recipes to generate. */ recipes?: - | '*' + | "*" | { - [recipe: string]: RecipeRule[] - } + [recipe: string]: RecipeRule[]; + }; /** * The css patterns to generate. */ patterns?: { - [pattern: string]: PatternRule[] - } + [pattern: string]: PatternRule[]; + }; /** * The CSS themes to generate */ - themes?: string[] + themes?: string[]; } diff --git a/apps/wow-docs/styled-system/types/system-types.d.ts b/apps/wow-docs/styled-system/types/system-types.d.ts index 0baf35be..5a0e6f6e 100644 --- a/apps/wow-docs/styled-system/types/system-types.d.ts +++ b/apps/wow-docs/styled-system/types/system-types.d.ts @@ -1,35 +1,39 @@ /* eslint-disable */ -import type { ConditionalValue, Nested } from './conditions'; -import type { PropertiesFallback } from './csstype'; -import type { SystemProperties, CssVarProperties } from './style-props'; +import type { ConditionalValue, Nested } from "./conditions"; +import type { PropertiesFallback } from "./csstype"; +import type { SystemProperties, CssVarProperties } from "./style-props"; -type String = string & {} -type Number = number & {} +type String = string & {}; +type Number = number & {}; -export type Pretty = { [K in keyof T]: T[K] } & {} +export type Pretty = { [K in keyof T]: T[K] } & {}; -export type DistributiveOmit = T extends unknown ? Omit : never +export type DistributiveOmit = T extends unknown + ? Omit + : never; export type DistributiveUnion = { - [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K] -} & DistributiveOmit + [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]; +} & DistributiveOmit; export type Assign = { - [K in keyof T]: K extends keyof U ? U[K] : T[K] -} & U + [K in keyof T]: K extends keyof U ? U[K] : T[K]; +} & U; /* ----------------------------------------------------------------------------- * Native css properties * -----------------------------------------------------------------------------*/ -export type CssProperty = keyof PropertiesFallback +export type CssProperty = keyof PropertiesFallback; -export interface CssProperties extends PropertiesFallback, CssVarProperties {} +export interface CssProperties + extends PropertiesFallback, + CssVarProperties {} export interface CssKeyframes { [name: string]: { - [time: string]: CssProperties - } + [time: string]: CssProperties; + }; } /* ----------------------------------------------------------------------------- @@ -37,53 +41,62 @@ export interface CssKeyframes { * -----------------------------------------------------------------------------*/ interface GenericProperties { - [key: string]: ConditionalValue + [key: string]: ConditionalValue; } /* ----------------------------------------------------------------------------- * Native css props * -----------------------------------------------------------------------------*/ -export type NestedCssProperties = Nested +export type NestedCssProperties = Nested; -export type SystemStyleObject = Nested +export type SystemStyleObject = Nested; export interface GlobalStyleObject { - [selector: string]: SystemStyleObject + [selector: string]: SystemStyleObject; } export interface ExtendableGlobalStyleObject { - [selector: string]: SystemStyleObject | undefined - extend?: GlobalStyleObject | undefined + [selector: string]: SystemStyleObject | undefined; + extend?: GlobalStyleObject | undefined; } type FilterStyleObject

= { - [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown -} + [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown; +}; -export type CompositionStyleObject = Nested & CssVarProperties> +export type CompositionStyleObject = Nested< + FilterStyleObject & CssVarProperties +>; /* ----------------------------------------------------------------------------- * Jsx style props * -----------------------------------------------------------------------------*/ interface WithCss { - css?: SystemStyleObject | SystemStyleObject[] + css?: SystemStyleObject | SystemStyleObject[]; } -type StyleProps = SystemStyleObject & WithCss +type StyleProps = SystemStyleObject & WithCss; -export type JsxStyleProps = StyleProps & WithCss +export type JsxStyleProps = StyleProps & WithCss; export interface PatchedHTMLProps { - htmlWidth?: string | number - htmlHeight?: string | number - htmlTranslate?: 'yes' | 'no' | undefined - htmlContent?: string + htmlWidth?: string | number; + htmlHeight?: string | number; + htmlTranslate?: "yes" | "no" | undefined; + htmlContent?: string; } -export type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content' - -type WithHTMLProps = DistributiveOmit & PatchedHTMLProps - -export type JsxHTMLProps, P extends Record = {}> = Assign< - WithHTMLProps, - P -> +export type OmittedHTMLProps = + | "color" + | "translate" + | "transition" + | "width" + | "height" + | "content"; + +type WithHTMLProps = DistributiveOmit & + PatchedHTMLProps; + +export type JsxHTMLProps< + T extends Record, + P extends Record = {}, +> = Assign, P>; diff --git a/package.json b/package.json index 30346fdb..08ad221a 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "private": true, "scripts": { "build": "turbo build", + "codegen:build": "pnpm wow-ui:codegen && pnpm wow-docs:codegen && pnpm styled-system:format && pnpm build", "tokens:build": "turbo run build --filter=wowds-tokens", "ui:build": "turbo run build --filter=wowds-ui", "icons:build": "turbo run build --filter=wowds-icons", @@ -12,7 +13,15 @@ "format": "prettier --write \"**/*.{ts,tsx,md}\"", "prerelease": "pnpm changeset version", "release": "pnpm publish -r --no-git-checks", - "prepare": "husky install" + "prepare": "husky install", + "wow-ui:codegen": "cd packages/wow-ui && pnpm panda codegen", + "wow-docs:codegen": "cd apps/wow-docs && pnpm panda codegen", + "styled-system:format": "prettier --write packages/wow-ui/styled-system/** apps/wow-docs/styled-system/**" + }, + "husky": { + "hooks": { + "pre-push": "pnpm codegen:build" + } }, "lint-staged": { "**/*.{js,jsx,ts,tsx}": [ diff --git a/packages/wow-ui/styled-system/css/conditions.js b/packages/wow-ui/styled-system/css/conditions.js index 42b2cb8e..33673f36 100644 --- a/packages/wow-ui/styled-system/css/conditions.js +++ b/packages/wow-ui/styled-system/css/conditions.js @@ -1,34 +1,36 @@ -import { withoutSpace } from '../helpers.js'; +import { withoutSpace } from "../helpers.js"; -const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_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,base" -const conditions = new Set(conditionsStr.split(',')) +const conditionsStr = + "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_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,base"; +const conditions = new Set(conditionsStr.split(",")); -export function isCondition(value){ - return conditions.has(value) || /^@|&|&$/.test(value) +export function isCondition(value) { + return conditions.has(value) || /^@|&|&$/.test(value); } -const underscoreRegex = /^_/ -const conditionsSelectorRegex = /&|@/ +const underscoreRegex = /^_/; +const conditionsSelectorRegex = /&|@/; -export function finalizeConditions(paths){ +export function finalizeConditions(paths) { return paths.map((path) => { - if (conditions.has(path)){ - return path.replace(underscoreRegex, '') + if (conditions.has(path)) { + return path.replace(underscoreRegex, ""); } - if (conditionsSelectorRegex.test(path)){ - return `[${withoutSpace(path.trim())}]` + if (conditionsSelectorRegex.test(path)) { + return `[${withoutSpace(path.trim())}]`; } - return path - })} + return path; + }); +} - export function sortConditions(paths){ - return paths.sort((a, b) => { - const aa = isCondition(a) - const bb = isCondition(b) - if (aa && !bb) return 1 - if (!aa && bb) return -1 - return 0 - }) - } \ No newline at end of file +export function sortConditions(paths) { + return paths.sort((a, b) => { + const aa = isCondition(a); + const bb = isCondition(b); + if (aa && !bb) return 1; + if (!aa && bb) return -1; + return 0; + }); +} diff --git a/packages/wow-ui/styled-system/css/css.d.ts b/packages/wow-ui/styled-system/css/css.d.ts index 175f9747..cff6b0e2 100644 --- a/packages/wow-ui/styled-system/css/css.d.ts +++ b/packages/wow-ui/styled-system/css/css.d.ts @@ -1,18 +1,18 @@ /* eslint-disable */ -import type { SystemStyleObject } from '../types/index'; +import type { SystemStyleObject } from "../types/index"; -type Styles = SystemStyleObject | undefined | null | false +type Styles = SystemStyleObject | undefined | null | false; interface CssFunction { - (styles: Styles): string - (styles: Styles[]): string - (...styles: Array): string - (styles: Styles): string + (styles: Styles): string; + (styles: Styles[]): string; + (...styles: Array): string; + (styles: Styles): string; - raw: (styles: Styles) => string - raw: (styles: Styles[]) => string - raw: (...styles: Array) => string - raw: (styles: Styles) => string + raw: (styles: Styles) => string; + raw: (styles: Styles[]) => string; + raw: (...styles: Array) => string; + raw: (styles: Styles) => string; } -export declare const css: CssFunction; \ No newline at end of file +export declare const css: CssFunction; diff --git a/packages/wow-ui/styled-system/css/css.js b/packages/wow-ui/styled-system/css/css.js index ad99a48c..1a2225fe 100644 --- a/packages/wow-ui/styled-system/css/css.js +++ b/packages/wow-ui/styled-system/css/css.js @@ -1,45 +1,49 @@ -import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.js'; -import { sortConditions, finalizeConditions } from './conditions.js'; +import { + createCss, + createMergeCss, + hypenateProperty, + withoutSpace, +} from "../helpers.js"; +import { sortConditions, finalizeConditions } from "./conditions.js"; -const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow-color/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle" +const utilities = + "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow-color/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle"; -const classNameByProp = new Map() -const shorthands = new Map() -utilities.split(',').forEach((utility) => { - const [prop, meta] = utility.split(':') - const [className, ...shorthandList] = meta.split('/') - classNameByProp.set(prop, className) +const classNameByProp = new Map(); +const shorthands = new Map(); +utilities.split(",").forEach((utility) => { + const [prop, meta] = utility.split(":"); + const [className, ...shorthandList] = meta.split("/"); + classNameByProp.set(prop, className); if (shorthandList.length) { shorthandList.forEach((shorthand) => { - shorthands.set(shorthand === '1' ? className : shorthand, prop) - }) + shorthands.set(shorthand === "1" ? className : shorthand, prop); + }); } -}) +}); -const resolveShorthand = (prop) => shorthands.get(prop) || prop +const resolveShorthand = (prop) => shorthands.get(prop) || prop; const context = { - conditions: { shift: sortConditions, finalize: finalizeConditions, - breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] } + breakpoints: { keys: ["base", "sm", "md", "lg", "xl", "2xl"] }, }, utility: { - transform: (prop, value) => { - const key = resolveShorthand(prop) - const propKey = classNameByProp.get(key) || hypenateProperty(key) - return { className: `${propKey}_${withoutSpace(value)}` } - }, + const key = resolveShorthand(prop); + const propKey = classNameByProp.get(key) || hypenateProperty(key); + return { className: `${propKey}_${withoutSpace(value)}` }; + }, hasShorthand: true, toHash: (path, hashFn) => hashFn(path.join(":")), resolveShorthand: resolveShorthand, - } -} + }, +}; -const cssFn = createCss(context) -export const css = (...styles) => cssFn(mergeCss(...styles)) -css.raw = (...styles) => mergeCss(...styles) +const cssFn = createCss(context); +export const css = (...styles) => cssFn(mergeCss(...styles)); +css.raw = (...styles) => mergeCss(...styles); -export const { mergeCss, assignCss } = createMergeCss(context) \ No newline at end of file +export const { mergeCss, assignCss } = createMergeCss(context); diff --git a/packages/wow-ui/styled-system/css/cva.d.ts b/packages/wow-ui/styled-system/css/cva.d.ts index ff433257..78f66403 100644 --- a/packages/wow-ui/styled-system/css/cva.d.ts +++ b/packages/wow-ui/styled-system/css/cva.d.ts @@ -1,6 +1,6 @@ /* eslint-disable */ -import type { RecipeCreatorFn } from '../types/recipe'; +import type { RecipeCreatorFn } from "../types/recipe"; -export declare const cva: RecipeCreatorFn +export declare const cva: RecipeCreatorFn; -export type { RecipeVariant, RecipeVariantProps } from '../types/recipe'; \ No newline at end of file +export type { RecipeVariant, RecipeVariantProps } from "../types/recipe"; diff --git a/packages/wow-ui/styled-system/css/cva.js b/packages/wow-ui/styled-system/css/cva.js index 64985937..b95e185c 100644 --- a/packages/wow-ui/styled-system/css/cva.js +++ b/packages/wow-ui/styled-system/css/cva.js @@ -1,5 +1,5 @@ -import { compact, mergeProps, memo, splitProps, uniq } from '../helpers.js'; -import { css, mergeCss } from './css.js'; +import { compact, mergeProps, memo, splitProps, uniq } from "../helpers.js"; +import { css, mergeCss } from "./css.js"; const defaults = (conf) => ({ base: {}, @@ -7,48 +7,60 @@ const defaults = (conf) => ({ defaultVariants: {}, compoundVariants: [], ...conf, -}) +}); export function cva(config) { - const { base, variants, defaultVariants, compoundVariants } = defaults(config) - const getVariantProps = (variants) => ({ ...defaultVariants, ...compact(variants) }) + const { base, variants, defaultVariants, compoundVariants } = + defaults(config); + const getVariantProps = (variants) => ({ + ...defaultVariants, + ...compact(variants), + }); function resolve(props = {}) { - const computedVariants = getVariantProps(props) - let variantCss = { ...base } + const computedVariants = getVariantProps(props); + let variantCss = { ...base }; for (const [key, value] of Object.entries(computedVariants)) { if (variants[key]?.[value]) { - variantCss = mergeCss(variantCss, variants[key][value]) + variantCss = mergeCss(variantCss, variants[key][value]); } } - const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants) - return mergeCss(variantCss, compoundVariantCss) + const compoundVariantCss = getCompoundVariantCss( + compoundVariants, + computedVariants + ); + return mergeCss(variantCss, compoundVariantCss); } function merge(__cva) { - const override = defaults(__cva.config) - const variantKeys = uniq(__cva.variantKeys, Object.keys(variants)) + const override = defaults(__cva.config); + const variantKeys = uniq(__cva.variantKeys, Object.keys(variants)); return cva({ base: mergeCss(base, override.base), variants: Object.fromEntries( - variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]), + variantKeys.map((key) => [ + key, + mergeCss(variants[key], override.variants[key]), + ]) ), defaultVariants: mergeProps(defaultVariants, override.defaultVariants), compoundVariants: [...compoundVariants, ...override.compoundVariants], - }) + }); } function cvaFn(props) { - return css(resolve(props)) + return css(resolve(props)); } - const variantKeys = Object.keys(variants) + const variantKeys = Object.keys(variants); function splitVariantProps(props) { - return splitProps(props, variantKeys) + return splitProps(props, variantKeys); } - const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])) + const variantMap = Object.fromEntries( + Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) + ); return Object.assign(memo(cvaFn), { __cva__: true, @@ -58,30 +70,32 @@ export function cva(config) { config, merge, splitVariantProps, - getVariantProps - }) + getVariantProps, + }); } export function getCompoundVariantCss(compoundVariants, variantMap) { - let result = {} + let result = {}; compoundVariants.forEach((compoundVariant) => { const isMatching = Object.entries(compoundVariant).every(([key, value]) => { - if (key === 'css') return true + if (key === "css") return true; - const values = Array.isArray(value) ? value : [value] - return values.some((value) => variantMap[key] === value) - }) + const values = Array.isArray(value) ? value : [value]; + return values.some((value) => variantMap[key] === value); + }); if (isMatching) { - result = mergeCss(result, compoundVariant.css) + result = mergeCss(result, compoundVariant.css); } - }) + }); - return result + return result; } export function assertCompoundVariant(name, compoundVariants, variants, prop) { - if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') { - throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`) + if (compoundVariants.length > 0 && typeof variants?.[prop] === "object") { + throw new Error( + `[recipe:${name}:${prop}] Conditions are not supported when using compound variants.` + ); } } diff --git a/packages/wow-ui/styled-system/css/cx.d.ts b/packages/wow-ui/styled-system/css/cx.d.ts index 892c90ca..8a876a0e 100644 --- a/packages/wow-ui/styled-system/css/cx.d.ts +++ b/packages/wow-ui/styled-system/css/cx.d.ts @@ -1,5 +1,5 @@ /* eslint-disable */ -type Argument = string | boolean | null | undefined +type Argument = string | boolean | null | undefined; /** Conditionally join classNames into a single string */ -export declare function cx(...args: Argument[]): string \ No newline at end of file +export declare function cx(...args: Argument[]): string; diff --git a/packages/wow-ui/styled-system/css/cx.js b/packages/wow-ui/styled-system/css/cx.js index 81bbdae3..bbc0718f 100644 --- a/packages/wow-ui/styled-system/css/cx.js +++ b/packages/wow-ui/styled-system/css/cx.js @@ -1,15 +1,15 @@ function cx() { - let str = '', + let str = "", i = 0, - arg + arg; for (; i < arguments.length; ) { - if ((arg = arguments[i++]) && typeof arg === 'string') { - str && (str += ' ') - str += arg + if ((arg = arguments[i++]) && typeof arg === "string") { + str && (str += " "); + str += arg; } } - return str + return str; } -export { cx } \ No newline at end of file +export { cx }; diff --git a/packages/wow-ui/styled-system/css/index.d.ts b/packages/wow-ui/styled-system/css/index.d.ts index 50a581d8..eb7cec86 100644 --- a/packages/wow-ui/styled-system/css/index.d.ts +++ b/packages/wow-ui/styled-system/css/index.d.ts @@ -1,5 +1,5 @@ /* eslint-disable */ -export * from './css'; -export * from './cx'; -export * from './cva'; -export * from './sva'; \ No newline at end of file +export * from "./css"; +export * from "./cx"; +export * from "./cva"; +export * from "./sva"; diff --git a/packages/wow-ui/styled-system/css/index.js b/packages/wow-ui/styled-system/css/index.js index 4c4c0818..b7d30a52 100644 --- a/packages/wow-ui/styled-system/css/index.js +++ b/packages/wow-ui/styled-system/css/index.js @@ -1,4 +1,4 @@ -export * from './css.js'; -export * from './cx.js'; -export * from './cva.js'; -export * from './sva.js'; \ No newline at end of file +export * from "./css.js"; +export * from "./cx.js"; +export * from "./cva.js"; +export * from "./sva.js"; diff --git a/packages/wow-ui/styled-system/css/sva.d.ts b/packages/wow-ui/styled-system/css/sva.d.ts index f97c42a3..d2593ec9 100644 --- a/packages/wow-ui/styled-system/css/sva.d.ts +++ b/packages/wow-ui/styled-system/css/sva.d.ts @@ -1,4 +1,4 @@ /* eslint-disable */ -import type { SlotRecipeCreatorFn } from '../types/recipe'; +import type { SlotRecipeCreatorFn } from "../types/recipe"; -export declare const sva: SlotRecipeCreatorFn \ No newline at end of file +export declare const sva: SlotRecipeCreatorFn; diff --git a/packages/wow-ui/styled-system/css/sva.js b/packages/wow-ui/styled-system/css/sva.js index 7621bd65..a402e211 100644 --- a/packages/wow-ui/styled-system/css/sva.js +++ b/packages/wow-ui/styled-system/css/sva.js @@ -1,21 +1,26 @@ -import { compact, getSlotRecipes, memo, splitProps } from '../helpers.js'; -import { cva } from './cva.js'; -import { cx } from './cx.js'; +import { compact, getSlotRecipes, memo, splitProps } from "../helpers.js"; +import { cva } from "./cva.js"; +import { cx } from "./cx.js"; -const slotClass = (className, slot) => className + '__' + slot +const slotClass = (className, slot) => className + "__" + slot; export function sva(config) { - const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)]) - const defaultVariants = config.defaultVariants ?? {} + const slots = Object.entries(getSlotRecipes(config)).map( + ([slot, slotCva]) => [slot, cva(slotCva)] + ); + const defaultVariants = config.defaultVariants ?? {}; function svaFn(props) { - const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))]) - return Object.fromEntries(result) + const result = slots.map(([slot, cvaFn]) => [ + slot, + cx(cvaFn(props), config.className && slotClass(config.className, slot)), + ]); + return Object.fromEntries(result); } function raw(props) { - const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]) - return Object.fromEntries(result) + const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]); + return Object.fromEntries(result); } const variants = config.variants ?? {}; @@ -24,7 +29,10 @@ export function sva(config) { function splitVariantProps(props) { return splitProps(props, variantKeys); } - const getVariantProps = (variants) => ({ ...(defaultVariants || {}), ...compact(variants) }) + const getVariantProps = (variants) => ({ + ...(defaultVariants || {}), + ...compact(variants), + }); const variantMap = Object.fromEntries( Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) @@ -37,5 +45,5 @@ export function sva(config) { variantKeys, splitVariantProps, getVariantProps, - }) -} \ No newline at end of file + }); +} diff --git a/packages/wow-ui/styled-system/patterns/aspect-ratio.d.ts b/packages/wow-ui/styled-system/patterns/aspect-ratio.d.ts index 666c374f..c07557c2 100644 --- a/packages/wow-ui/styled-system/patterns/aspect-ratio.d.ts +++ b/packages/wow-ui/styled-system/patterns/aspect-ratio.d.ts @@ -1,21 +1,24 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface AspectRatioProperties { - ratio?: ConditionalValue + ratio?: ConditionalValue; } - -interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit {} +interface AspectRatioStyles + extends AspectRatioProperties, + DistributiveOmit< + SystemStyleObject, + keyof AspectRatioProperties | "aspectRatio" + > {} interface AspectRatioPatternFn { - (styles?: AspectRatioStyles): string - raw: (styles?: AspectRatioStyles) => SystemStyleObject + (styles?: AspectRatioStyles): string; + raw: (styles?: AspectRatioStyles) => SystemStyleObject; } - export declare const aspectRatio: AspectRatioPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/aspect-ratio.js b/packages/wow-ui/styled-system/patterns/aspect-ratio.js index a56943fc..ab8cbbdb 100644 --- a/packages/wow-ui/styled-system/patterns/aspect-ratio.js +++ b/packages/wow-ui/styled-system/patterns/aspect-ratio.js @@ -1,38 +1,39 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const aspectRatioConfig = { -transform(props, { map }) { - const { ratio = 4 / 3, ...rest } = props; - return { - position: "relative", - _before: { - content: `""`, - display: "block", - height: "0", - paddingBottom: map(ratio, (r) => `${1 / r * 100}%`) - }, - "&>*": { - display: "flex", - justifyContent: "center", - alignItems: "center", - overflow: "hidden", - position: "absolute", - inset: "0", - width: "100%", - height: "100%" - }, - "&>img, &>video": { - objectFit: "cover" - }, - ...rest - }; -}} + transform(props, { map }) { + const { ratio = 4 / 3, ...rest } = props; + return { + position: "relative", + _before: { + content: `""`, + display: "block", + height: "0", + paddingBottom: map(ratio, (r) => `${(1 / r) * 100}%`), + }, + "&>*": { + display: "flex", + justifyContent: "center", + alignItems: "center", + overflow: "hidden", + position: "absolute", + inset: "0", + width: "100%", + height: "100%", + }, + "&>img, &>video": { + objectFit: "cover", + }, + ...rest, + }; + }, +}; export const getAspectRatioStyle = (styles = {}) => { - const _styles = getPatternStyles(aspectRatioConfig, styles) - return aspectRatioConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(aspectRatioConfig, styles); + return aspectRatioConfig.transform(_styles, patternFns); +}; -export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)) -aspectRatio.raw = getAspectRatioStyle \ No newline at end of file +export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)); +aspectRatio.raw = getAspectRatioStyle; diff --git a/packages/wow-ui/styled-system/patterns/bleed.d.ts b/packages/wow-ui/styled-system/patterns/bleed.d.ts index 6573c635..929dac9a 100644 --- a/packages/wow-ui/styled-system/patterns/bleed.d.ts +++ b/packages/wow-ui/styled-system/patterns/bleed.d.ts @@ -1,22 +1,22 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface BleedProperties { - inline?: SystemProperties["marginInline"] - block?: SystemProperties["marginBlock"] + inline?: SystemProperties["marginInline"]; + block?: SystemProperties["marginBlock"]; } - -interface BleedStyles extends BleedProperties, DistributiveOmit {} +interface BleedStyles + extends BleedProperties, + DistributiveOmit {} interface BleedPatternFn { - (styles?: BleedStyles): string - raw: (styles?: BleedStyles) => SystemStyleObject + (styles?: BleedStyles): string; + raw: (styles?: BleedStyles) => SystemStyleObject; } - export declare const bleed: BleedPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/bleed.js b/packages/wow-ui/styled-system/patterns/bleed.js index 17c7b95c..47e446b4 100644 --- a/packages/wow-ui/styled-system/patterns/bleed.js +++ b/packages/wow-ui/styled-system/patterns/bleed.js @@ -1,24 +1,26 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const bleedConfig = { -transform(props, { map, isCssUnit, isCssVar }) { - const { inline, block, ...rest } = props; - const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`; - return { - "--bleed-x": map(inline, valueFn), - "--bleed-y": map(block, valueFn), - marginInline: "calc(var(--bleed-x, 0) * -1)", - marginBlock: "calc(var(--bleed-y, 0) * -1)", - ...rest - }; -}, -defaultValues:{inline:'0',block:'0'}} + transform(props, { map, isCssUnit, isCssVar }) { + const { inline, block, ...rest } = props; + const valueFn = (v) => + isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`; + return { + "--bleed-x": map(inline, valueFn), + "--bleed-y": map(block, valueFn), + marginInline: "calc(var(--bleed-x, 0) * -1)", + marginBlock: "calc(var(--bleed-y, 0) * -1)", + ...rest, + }; + }, + defaultValues: { inline: "0", block: "0" }, +}; export const getBleedStyle = (styles = {}) => { - const _styles = getPatternStyles(bleedConfig, styles) - return bleedConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(bleedConfig, styles); + return bleedConfig.transform(_styles, patternFns); +}; -export const bleed = (styles) => css(getBleedStyle(styles)) -bleed.raw = getBleedStyle \ No newline at end of file +export const bleed = (styles) => css(getBleedStyle(styles)); +bleed.raw = getBleedStyle; diff --git a/packages/wow-ui/styled-system/patterns/box.d.ts b/packages/wow-ui/styled-system/patterns/box.d.ts index a7935007..348f80d9 100644 --- a/packages/wow-ui/styled-system/patterns/box.d.ts +++ b/packages/wow-ui/styled-system/patterns/box.d.ts @@ -1,21 +1,19 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; - -export interface BoxProperties { - -} +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; +export interface BoxProperties {} -interface BoxStyles extends BoxProperties, DistributiveOmit {} +interface BoxStyles + extends BoxProperties, + DistributiveOmit {} interface BoxPatternFn { - (styles?: BoxStyles): string - raw: (styles?: BoxStyles) => SystemStyleObject + (styles?: BoxStyles): string; + raw: (styles?: BoxStyles) => SystemStyleObject; } - export declare const box: BoxPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/box.js b/packages/wow-ui/styled-system/patterns/box.js index 9be49d99..b3c94ef0 100644 --- a/packages/wow-ui/styled-system/patterns/box.js +++ b/packages/wow-ui/styled-system/patterns/box.js @@ -1,15 +1,16 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const boxConfig = { -transform(props) { - return props; -}} + transform(props) { + return props; + }, +}; export const getBoxStyle = (styles = {}) => { - const _styles = getPatternStyles(boxConfig, styles) - return boxConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(boxConfig, styles); + return boxConfig.transform(_styles, patternFns); +}; -export const box = (styles) => css(getBoxStyle(styles)) -box.raw = getBoxStyle \ No newline at end of file +export const box = (styles) => css(getBoxStyle(styles)); +box.raw = getBoxStyle; diff --git a/packages/wow-ui/styled-system/patterns/center.d.ts b/packages/wow-ui/styled-system/patterns/center.d.ts index 8419f3c6..b03f66d1 100644 --- a/packages/wow-ui/styled-system/patterns/center.d.ts +++ b/packages/wow-ui/styled-system/patterns/center.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface CenterProperties { - inline?: ConditionalValue + inline?: ConditionalValue; } - -interface CenterStyles extends CenterProperties, DistributiveOmit {} +interface CenterStyles + extends CenterProperties, + DistributiveOmit {} interface CenterPatternFn { - (styles?: CenterStyles): string - raw: (styles?: CenterStyles) => SystemStyleObject + (styles?: CenterStyles): string; + raw: (styles?: CenterStyles) => SystemStyleObject; } - export declare const center: CenterPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/center.js b/packages/wow-ui/styled-system/patterns/center.js index 3eb743b5..ebf85ba4 100644 --- a/packages/wow-ui/styled-system/patterns/center.js +++ b/packages/wow-ui/styled-system/patterns/center.js @@ -1,21 +1,22 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const centerConfig = { -transform(props) { - const { inline, ...rest } = props; - return { - display: inline ? "inline-flex" : "flex", - alignItems: "center", - justifyContent: "center", - ...rest - }; -}} + transform(props) { + const { inline, ...rest } = props; + return { + display: inline ? "inline-flex" : "flex", + alignItems: "center", + justifyContent: "center", + ...rest, + }; + }, +}; export const getCenterStyle = (styles = {}) => { - const _styles = getPatternStyles(centerConfig, styles) - return centerConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(centerConfig, styles); + return centerConfig.transform(_styles, patternFns); +}; -export const center = (styles) => css(getCenterStyle(styles)) -center.raw = getCenterStyle \ No newline at end of file +export const center = (styles) => css(getCenterStyle(styles)); +center.raw = getCenterStyle; diff --git a/packages/wow-ui/styled-system/patterns/circle.d.ts b/packages/wow-ui/styled-system/patterns/circle.d.ts index d6759d86..76122a0d 100644 --- a/packages/wow-ui/styled-system/patterns/circle.d.ts +++ b/packages/wow-ui/styled-system/patterns/circle.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface CircleProperties { - size?: SystemProperties["width"] + size?: SystemProperties["width"]; } - -interface CircleStyles extends CircleProperties, DistributiveOmit {} +interface CircleStyles + extends CircleProperties, + DistributiveOmit {} interface CirclePatternFn { - (styles?: CircleStyles): string - raw: (styles?: CircleStyles) => SystemStyleObject + (styles?: CircleStyles): string; + raw: (styles?: CircleStyles) => SystemStyleObject; } - export declare const circle: CirclePatternFn; diff --git a/packages/wow-ui/styled-system/patterns/circle.js b/packages/wow-ui/styled-system/patterns/circle.js index 2082c7f3..a32616dc 100644 --- a/packages/wow-ui/styled-system/patterns/circle.js +++ b/packages/wow-ui/styled-system/patterns/circle.js @@ -1,25 +1,26 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const circleConfig = { -transform(props) { - const { size, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: "0 0 auto", - width: size, - height: size, - borderRadius: "9999px", - ...rest - }; -}} + transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + borderRadius: "9999px", + ...rest, + }; + }, +}; export const getCircleStyle = (styles = {}) => { - const _styles = getPatternStyles(circleConfig, styles) - return circleConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(circleConfig, styles); + return circleConfig.transform(_styles, patternFns); +}; -export const circle = (styles) => css(getCircleStyle(styles)) -circle.raw = getCircleStyle \ No newline at end of file +export const circle = (styles) => css(getCircleStyle(styles)); +circle.raw = getCircleStyle; diff --git a/packages/wow-ui/styled-system/patterns/container.d.ts b/packages/wow-ui/styled-system/patterns/container.d.ts index 978e59d3..c3ac83aa 100644 --- a/packages/wow-ui/styled-system/patterns/container.d.ts +++ b/packages/wow-ui/styled-system/patterns/container.d.ts @@ -1,21 +1,19 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; - -export interface ContainerProperties { - -} +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; +export interface ContainerProperties {} -interface ContainerStyles extends ContainerProperties, DistributiveOmit {} +interface ContainerStyles + extends ContainerProperties, + DistributiveOmit {} interface ContainerPatternFn { - (styles?: ContainerStyles): string - raw: (styles?: ContainerStyles) => SystemStyleObject + (styles?: ContainerStyles): string; + raw: (styles?: ContainerStyles) => SystemStyleObject; } - export declare const container: ContainerPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/container.js b/packages/wow-ui/styled-system/patterns/container.js index 6cba2235..967c6048 100644 --- a/packages/wow-ui/styled-system/patterns/container.js +++ b/packages/wow-ui/styled-system/patterns/container.js @@ -1,21 +1,22 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const containerConfig = { -transform(props) { - return { - position: "relative", - maxWidth: "8xl", - mx: "auto", - px: { base: "4", md: "6", lg: "8" }, - ...props - }; -}} + transform(props) { + return { + position: "relative", + maxWidth: "8xl", + mx: "auto", + px: { base: "4", md: "6", lg: "8" }, + ...props, + }; + }, +}; export const getContainerStyle = (styles = {}) => { - const _styles = getPatternStyles(containerConfig, styles) - return containerConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(containerConfig, styles); + return containerConfig.transform(_styles, patternFns); +}; -export const container = (styles) => css(getContainerStyle(styles)) -container.raw = getContainerStyle \ No newline at end of file +export const container = (styles) => css(getContainerStyle(styles)); +container.raw = getContainerStyle; diff --git a/packages/wow-ui/styled-system/patterns/cq.d.ts b/packages/wow-ui/styled-system/patterns/cq.d.ts index ee5ae932..3a52ab09 100644 --- a/packages/wow-ui/styled-system/patterns/cq.d.ts +++ b/packages/wow-ui/styled-system/patterns/cq.d.ts @@ -1,22 +1,24 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface CqProperties { - name?: ConditionalValue - type?: SystemProperties["containerType"] + name?: ConditionalValue< + Tokens["containerNames"] | Properties["containerName"] + >; + type?: SystemProperties["containerType"]; } - -interface CqStyles extends CqProperties, DistributiveOmit {} +interface CqStyles + extends CqProperties, + DistributiveOmit {} interface CqPatternFn { - (styles?: CqStyles): string - raw: (styles?: CqStyles) => SystemStyleObject + (styles?: CqStyles): string; + raw: (styles?: CqStyles) => SystemStyleObject; } - export declare const cq: CqPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/cq.js b/packages/wow-ui/styled-system/patterns/cq.js index 8d6031d4..c43fd390 100644 --- a/packages/wow-ui/styled-system/patterns/cq.js +++ b/packages/wow-ui/styled-system/patterns/cq.js @@ -1,21 +1,22 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const cqConfig = { -transform(props) { - const { name, type, ...rest } = props; - return { - containerType: type, - containerName: name, - ...rest - }; -}, -defaultValues:{type:'inline-size'}} + transform(props) { + const { name, type, ...rest } = props; + return { + containerType: type, + containerName: name, + ...rest, + }; + }, + defaultValues: { type: "inline-size" }, +}; export const getCqStyle = (styles = {}) => { - const _styles = getPatternStyles(cqConfig, styles) - return cqConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(cqConfig, styles); + return cqConfig.transform(_styles, patternFns); +}; -export const cq = (styles) => css(getCqStyle(styles)) -cq.raw = getCqStyle \ No newline at end of file +export const cq = (styles) => css(getCqStyle(styles)); +cq.raw = getCqStyle; diff --git a/packages/wow-ui/styled-system/patterns/divider.d.ts b/packages/wow-ui/styled-system/patterns/divider.d.ts index a6923c4d..c7e94fef 100644 --- a/packages/wow-ui/styled-system/patterns/divider.d.ts +++ b/packages/wow-ui/styled-system/patterns/divider.d.ts @@ -1,23 +1,23 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface DividerProperties { - orientation?: ConditionalValue<"horizontal" | "vertical"> - thickness?: ConditionalValue - color?: ConditionalValue + orientation?: ConditionalValue<"horizontal" | "vertical">; + thickness?: ConditionalValue; + color?: ConditionalValue; } - -interface DividerStyles extends DividerProperties, DistributiveOmit {} +interface DividerStyles + extends DividerProperties, + DistributiveOmit {} interface DividerPatternFn { - (styles?: DividerStyles): string - raw: (styles?: DividerStyles) => SystemStyleObject + (styles?: DividerStyles): string; + raw: (styles?: DividerStyles) => SystemStyleObject; } - export declare const divider: DividerPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/divider.js b/packages/wow-ui/styled-system/patterns/divider.js index 005e94af..7f10a043 100644 --- a/packages/wow-ui/styled-system/patterns/divider.js +++ b/packages/wow-ui/styled-system/patterns/divider.js @@ -1,25 +1,30 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const dividerConfig = { -transform(props, { map }) { - const { orientation, thickness, color, ...rest } = props; - return { - "--thickness": thickness, - width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"), - height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"), - borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0), - borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0), - borderColor: color, - ...rest - }; -}, -defaultValues:{orientation:'horizontal',thickness:'1px'}} + transform(props, { map }) { + const { orientation, thickness, color, ...rest } = props; + return { + "--thickness": thickness, + width: map(orientation, (v) => (v === "vertical" ? void 0 : "100%")), + height: map(orientation, (v) => (v === "horizontal" ? void 0 : "100%")), + borderBlockEndWidth: map(orientation, (v) => + v === "horizontal" ? "var(--thickness)" : void 0 + ), + borderInlineEndWidth: map(orientation, (v) => + v === "vertical" ? "var(--thickness)" : void 0 + ), + borderColor: color, + ...rest, + }; + }, + defaultValues: { orientation: "horizontal", thickness: "1px" }, +}; export const getDividerStyle = (styles = {}) => { - const _styles = getPatternStyles(dividerConfig, styles) - return dividerConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(dividerConfig, styles); + return dividerConfig.transform(_styles, patternFns); +}; -export const divider = (styles) => css(getDividerStyle(styles)) -divider.raw = getDividerStyle \ No newline at end of file +export const divider = (styles) => css(getDividerStyle(styles)); +divider.raw = getDividerStyle; diff --git a/packages/wow-ui/styled-system/patterns/flex.d.ts b/packages/wow-ui/styled-system/patterns/flex.d.ts index 71d5308b..e4b03bde 100644 --- a/packages/wow-ui/styled-system/patterns/flex.d.ts +++ b/packages/wow-ui/styled-system/patterns/flex.d.ts @@ -1,27 +1,27 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface FlexProperties { - align?: SystemProperties["alignItems"] - justify?: SystemProperties["justifyContent"] - direction?: SystemProperties["flexDirection"] - wrap?: SystemProperties["flexWrap"] - basis?: SystemProperties["flexBasis"] - grow?: SystemProperties["flexGrow"] - shrink?: SystemProperties["flexShrink"] + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; + direction?: SystemProperties["flexDirection"]; + wrap?: SystemProperties["flexWrap"]; + basis?: SystemProperties["flexBasis"]; + grow?: SystemProperties["flexGrow"]; + shrink?: SystemProperties["flexShrink"]; } - -interface FlexStyles extends FlexProperties, DistributiveOmit {} +interface FlexStyles + extends FlexProperties, + DistributiveOmit {} interface FlexPatternFn { - (styles?: FlexStyles): string - raw: (styles?: FlexStyles) => SystemStyleObject + (styles?: FlexStyles): string; + raw: (styles?: FlexStyles) => SystemStyleObject; } - export declare const flex: FlexPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/flex.js b/packages/wow-ui/styled-system/patterns/flex.js index 0f00537c..3605cb1f 100644 --- a/packages/wow-ui/styled-system/patterns/flex.js +++ b/packages/wow-ui/styled-system/patterns/flex.js @@ -1,26 +1,36 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const flexConfig = { -transform(props) { - const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props; - return { - display: "flex", - flexDirection: direction, - alignItems: align, - justifyContent: justify, - flexWrap: wrap2, - flexBasis: basis, - flexGrow: grow, - flexShrink: shrink, - ...rest - }; -}} + transform(props) { + const { + direction, + align, + justify, + wrap: wrap2, + basis, + grow, + shrink, + ...rest + } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + flexWrap: wrap2, + flexBasis: basis, + flexGrow: grow, + flexShrink: shrink, + ...rest, + }; + }, +}; export const getFlexStyle = (styles = {}) => { - const _styles = getPatternStyles(flexConfig, styles) - return flexConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(flexConfig, styles); + return flexConfig.transform(_styles, patternFns); +}; -export const flex = (styles) => css(getFlexStyle(styles)) -flex.raw = getFlexStyle \ No newline at end of file +export const flex = (styles) => css(getFlexStyle(styles)); +flex.raw = getFlexStyle; diff --git a/packages/wow-ui/styled-system/patterns/float.d.ts b/packages/wow-ui/styled-system/patterns/float.d.ts index 07ea9c36..f841cfec 100644 --- a/packages/wow-ui/styled-system/patterns/float.d.ts +++ b/packages/wow-ui/styled-system/patterns/float.d.ts @@ -1,24 +1,34 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface FloatProperties { - offsetX?: ConditionalValue - offsetY?: ConditionalValue - offset?: ConditionalValue - placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"> + offsetX?: ConditionalValue; + offsetY?: ConditionalValue; + offset?: ConditionalValue; + placement?: ConditionalValue< + | "bottom-end" + | "bottom-start" + | "top-end" + | "top-start" + | "bottom-center" + | "top-center" + | "middle-center" + | "middle-end" + | "middle-start" + >; } - -interface FloatStyles extends FloatProperties, DistributiveOmit {} +interface FloatStyles + extends FloatProperties, + DistributiveOmit {} interface FloatPatternFn { - (styles?: FloatStyles): string - raw: (styles?: FloatStyles) => SystemStyleObject + (styles?: FloatStyles): string; + raw: (styles?: FloatStyles) => SystemStyleObject; } - export declare const float: FloatPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/float.js b/packages/wow-ui/styled-system/patterns/float.js index a3d40546..dac187ec 100644 --- a/packages/wow-ui/styled-system/patterns/float.js +++ b/packages/wow-ui/styled-system/patterns/float.js @@ -1,52 +1,53 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const floatConfig = { -transform(props, { map }) { - const { offset, offsetX, offsetY, placement, ...rest } = props; - return { - display: "inline-flex", - justifyContent: "center", - alignItems: "center", - position: "absolute", - insetBlockStart: map(placement, (v) => { - const [side] = v.split("-"); - const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; - return map2[side]; - }), - insetBlockEnd: map(placement, (v) => { - const [side] = v.split("-"); - const map2 = { top: "auto", middle: "50%", bottom: offsetY }; - return map2[side]; - }), - insetInlineStart: map(placement, (v) => { - const [, align] = v.split("-"); - const map2 = { start: offsetX, center: "50%", end: "auto" }; - return map2[align]; - }), - insetInlineEnd: map(placement, (v) => { - const [, align] = v.split("-"); - const map2 = { start: "auto", center: "50%", end: offsetX }; - return map2[align]; - }), - translate: map(placement, (v) => { - const [side, align] = v.split("-"); - const mapX = { start: "-50%", center: "-50%", end: "50%" }; - const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; - return `${mapX[align]} ${mapY[side]}`; - }), - ...rest - }; -}, -defaultValues(props) { - const offset = props.offset || "0"; - return { offset, offsetX: offset, offsetY: offset, placement: "top-end" }; -}} + transform(props, { map }) { + const { offset, offsetX, offsetY, placement, ...rest } = props; + return { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + position: "absolute", + insetBlockStart: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; + return map2[side]; + }), + insetBlockEnd: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: "auto", middle: "50%", bottom: offsetY }; + return map2[side]; + }), + insetInlineStart: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: offsetX, center: "50%", end: "auto" }; + return map2[align]; + }), + insetInlineEnd: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: "auto", center: "50%", end: offsetX }; + return map2[align]; + }), + translate: map(placement, (v) => { + const [side, align] = v.split("-"); + const mapX = { start: "-50%", center: "-50%", end: "50%" }; + const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; + return `${mapX[align]} ${mapY[side]}`; + }), + ...rest, + }; + }, + defaultValues(props) { + const offset = props.offset || "0"; + return { offset, offsetX: offset, offsetY: offset, placement: "top-end" }; + }, +}; export const getFloatStyle = (styles = {}) => { - const _styles = getPatternStyles(floatConfig, styles) - return floatConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(floatConfig, styles); + return floatConfig.transform(_styles, patternFns); +}; -export const float = (styles) => css(getFloatStyle(styles)) -float.raw = getFloatStyle \ No newline at end of file +export const float = (styles) => css(getFloatStyle(styles)); +float.raw = getFloatStyle; diff --git a/packages/wow-ui/styled-system/patterns/grid-item.d.ts b/packages/wow-ui/styled-system/patterns/grid-item.d.ts index 2301ae59..1753e288 100644 --- a/packages/wow-ui/styled-system/patterns/grid-item.d.ts +++ b/packages/wow-ui/styled-system/patterns/grid-item.d.ts @@ -1,26 +1,26 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface GridItemProperties { - colSpan?: ConditionalValue - rowSpan?: ConditionalValue - colStart?: ConditionalValue - rowStart?: ConditionalValue - colEnd?: ConditionalValue - rowEnd?: ConditionalValue + colSpan?: ConditionalValue; + rowSpan?: ConditionalValue; + colStart?: ConditionalValue; + rowStart?: ConditionalValue; + colEnd?: ConditionalValue; + rowEnd?: ConditionalValue; } - -interface GridItemStyles extends GridItemProperties, DistributiveOmit {} +interface GridItemStyles + extends GridItemProperties, + DistributiveOmit {} interface GridItemPatternFn { - (styles?: GridItemStyles): string - raw: (styles?: GridItemStyles) => SystemStyleObject + (styles?: GridItemStyles): string; + raw: (styles?: GridItemStyles) => SystemStyleObject; } - export declare const gridItem: GridItemPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/grid-item.js b/packages/wow-ui/styled-system/patterns/grid-item.js index ca767a81..0962348d 100644 --- a/packages/wow-ui/styled-system/patterns/grid-item.js +++ b/packages/wow-ui/styled-system/patterns/grid-item.js @@ -1,25 +1,27 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const gridItemConfig = { -transform(props, { map }) { - const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props; - const spanFn = (v) => v === "auto" ? v : `span ${v}`; - return { - gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, - gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, - gridColumnStart: colStart, - gridColumnEnd: colEnd, - gridRowStart: rowStart, - gridRowEnd: rowEnd, - ...rest - }; -}} + transform(props, { map }) { + const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = + props; + const spanFn = (v) => (v === "auto" ? v : `span ${v}`); + return { + gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, + gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, + gridColumnStart: colStart, + gridColumnEnd: colEnd, + gridRowStart: rowStart, + gridRowEnd: rowEnd, + ...rest, + }; + }, +}; export const getGridItemStyle = (styles = {}) => { - const _styles = getPatternStyles(gridItemConfig, styles) - return gridItemConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(gridItemConfig, styles); + return gridItemConfig.transform(_styles, patternFns); +}; -export const gridItem = (styles) => css(getGridItemStyle(styles)) -gridItem.raw = getGridItemStyle \ No newline at end of file +export const gridItem = (styles) => css(getGridItemStyle(styles)); +gridItem.raw = getGridItemStyle; diff --git a/packages/wow-ui/styled-system/patterns/grid.d.ts b/packages/wow-ui/styled-system/patterns/grid.d.ts index 96180bda..95038cb5 100644 --- a/packages/wow-ui/styled-system/patterns/grid.d.ts +++ b/packages/wow-ui/styled-system/patterns/grid.d.ts @@ -1,25 +1,25 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface GridProperties { - gap?: SystemProperties["gap"] - columnGap?: SystemProperties["gap"] - rowGap?: SystemProperties["gap"] - columns?: ConditionalValue - minChildWidth?: ConditionalValue + gap?: SystemProperties["gap"]; + columnGap?: SystemProperties["gap"]; + rowGap?: SystemProperties["gap"]; + columns?: ConditionalValue; + minChildWidth?: ConditionalValue; } - -interface GridStyles extends GridProperties, DistributiveOmit {} +interface GridStyles + extends GridProperties, + DistributiveOmit {} interface GridPatternFn { - (styles?: GridStyles): string - raw: (styles?: GridStyles) => SystemStyleObject + (styles?: GridStyles): string; + raw: (styles?: GridStyles) => SystemStyleObject; } - export declare const grid: GridPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/grid.js b/packages/wow-ui/styled-system/patterns/grid.js index a7897a2d..d81ed5e9 100644 --- a/packages/wow-ui/styled-system/patterns/grid.js +++ b/packages/wow-ui/styled-system/patterns/grid.js @@ -1,27 +1,36 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const gridConfig = { -transform(props, { map, isCssUnit }) { - const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props; - const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`; - return { - display: "grid", - gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0, - gap, - columnGap, - rowGap, - ...rest - }; -}, -defaultValues(props) { - return { gap: props.columnGap || props.rowGap ? void 0 : "10px" }; -}} + transform(props, { map, isCssUnit }) { + const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props; + const getValue = (v) => (isCssUnit(v) ? v : `token(sizes.${v}, ${v})`); + return { + display: "grid", + gridTemplateColumns: + columns != null + ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) + : minChildWidth != null + ? map( + minChildWidth, + (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))` + ) + : void 0, + gap, + columnGap, + rowGap, + ...rest, + }; + }, + defaultValues(props) { + return { gap: props.columnGap || props.rowGap ? void 0 : "10px" }; + }, +}; export const getGridStyle = (styles = {}) => { - const _styles = getPatternStyles(gridConfig, styles) - return gridConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(gridConfig, styles); + return gridConfig.transform(_styles, patternFns); +}; -export const grid = (styles) => css(getGridStyle(styles)) -grid.raw = getGridStyle \ No newline at end of file +export const grid = (styles) => css(getGridStyle(styles)); +grid.raw = getGridStyle; diff --git a/packages/wow-ui/styled-system/patterns/hstack.d.ts b/packages/wow-ui/styled-system/patterns/hstack.d.ts index 05b0d670..6ccd4c40 100644 --- a/packages/wow-ui/styled-system/patterns/hstack.d.ts +++ b/packages/wow-ui/styled-system/patterns/hstack.d.ts @@ -1,22 +1,22 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface HstackProperties { - justify?: SystemProperties["justifyContent"] - gap?: SystemProperties["gap"] + justify?: SystemProperties["justifyContent"]; + gap?: SystemProperties["gap"]; } - -interface HstackStyles extends HstackProperties, DistributiveOmit {} +interface HstackStyles + extends HstackProperties, + DistributiveOmit {} interface HstackPatternFn { - (styles?: HstackStyles): string - raw: (styles?: HstackStyles) => SystemStyleObject + (styles?: HstackStyles): string; + raw: (styles?: HstackStyles) => SystemStyleObject; } - export declare const hstack: HstackPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/hstack.js b/packages/wow-ui/styled-system/patterns/hstack.js index a2603308..9e654636 100644 --- a/packages/wow-ui/styled-system/patterns/hstack.js +++ b/packages/wow-ui/styled-system/patterns/hstack.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const hstackConfig = { -transform(props) { - const { justify, gap, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: justify, - gap, - flexDirection: "row", - ...rest - }; -}, -defaultValues:{gap:'10px'}} + transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "row", + ...rest, + }; + }, + defaultValues: { gap: "10px" }, +}; export const getHstackStyle = (styles = {}) => { - const _styles = getPatternStyles(hstackConfig, styles) - return hstackConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(hstackConfig, styles); + return hstackConfig.transform(_styles, patternFns); +}; -export const hstack = (styles) => css(getHstackStyle(styles)) -hstack.raw = getHstackStyle \ No newline at end of file +export const hstack = (styles) => css(getHstackStyle(styles)); +hstack.raw = getHstackStyle; diff --git a/packages/wow-ui/styled-system/patterns/index.d.ts b/packages/wow-ui/styled-system/patterns/index.d.ts index 11168918..b8d39591 100644 --- a/packages/wow-ui/styled-system/patterns/index.d.ts +++ b/packages/wow-ui/styled-system/patterns/index.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -export * from './box'; -export * from './flex'; -export * from './stack'; -export * from './vstack'; -export * from './hstack'; -export * from './spacer'; -export * from './square'; -export * from './circle'; -export * from './center'; -export * from './link-overlay'; -export * from './aspect-ratio'; -export * from './grid'; -export * from './grid-item'; -export * from './wrap'; -export * from './container'; -export * from './divider'; -export * from './float'; -export * from './bleed'; -export * from './visually-hidden'; -export * from './cq'; \ No newline at end of file +export * from "./box"; +export * from "./flex"; +export * from "./stack"; +export * from "./vstack"; +export * from "./hstack"; +export * from "./spacer"; +export * from "./square"; +export * from "./circle"; +export * from "./center"; +export * from "./link-overlay"; +export * from "./aspect-ratio"; +export * from "./grid"; +export * from "./grid-item"; +export * from "./wrap"; +export * from "./container"; +export * from "./divider"; +export * from "./float"; +export * from "./bleed"; +export * from "./visually-hidden"; +export * from "./cq"; diff --git a/packages/wow-ui/styled-system/patterns/index.js b/packages/wow-ui/styled-system/patterns/index.js index 4cc24644..472c1175 100644 --- a/packages/wow-ui/styled-system/patterns/index.js +++ b/packages/wow-ui/styled-system/patterns/index.js @@ -1,20 +1,20 @@ -export * from './box.js'; -export * from './flex.js'; -export * from './stack.js'; -export * from './vstack.js'; -export * from './hstack.js'; -export * from './spacer.js'; -export * from './square.js'; -export * from './circle.js'; -export * from './center.js'; -export * from './link-overlay.js'; -export * from './aspect-ratio.js'; -export * from './grid.js'; -export * from './grid-item.js'; -export * from './wrap.js'; -export * from './container.js'; -export * from './divider.js'; -export * from './float.js'; -export * from './bleed.js'; -export * from './visually-hidden.js'; -export * from './cq.js'; \ No newline at end of file +export * from "./box.js"; +export * from "./flex.js"; +export * from "./stack.js"; +export * from "./vstack.js"; +export * from "./hstack.js"; +export * from "./spacer.js"; +export * from "./square.js"; +export * from "./circle.js"; +export * from "./center.js"; +export * from "./link-overlay.js"; +export * from "./aspect-ratio.js"; +export * from "./grid.js"; +export * from "./grid-item.js"; +export * from "./wrap.js"; +export * from "./container.js"; +export * from "./divider.js"; +export * from "./float.js"; +export * from "./bleed.js"; +export * from "./visually-hidden.js"; +export * from "./cq.js"; diff --git a/packages/wow-ui/styled-system/patterns/link-overlay.d.ts b/packages/wow-ui/styled-system/patterns/link-overlay.d.ts index 565005a8..b03eaf15 100644 --- a/packages/wow-ui/styled-system/patterns/link-overlay.d.ts +++ b/packages/wow-ui/styled-system/patterns/link-overlay.d.ts @@ -1,21 +1,19 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; - -export interface LinkOverlayProperties { - -} +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; +export interface LinkOverlayProperties {} -interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit {} +interface LinkOverlayStyles + extends LinkOverlayProperties, + DistributiveOmit {} interface LinkOverlayPatternFn { - (styles?: LinkOverlayStyles): string - raw: (styles?: LinkOverlayStyles) => SystemStyleObject + (styles?: LinkOverlayStyles): string; + raw: (styles?: LinkOverlayStyles) => SystemStyleObject; } - export declare const linkOverlay: LinkOverlayPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/link-overlay.js b/packages/wow-ui/styled-system/patterns/link-overlay.js index 01afd3d9..5ce7833b 100644 --- a/packages/wow-ui/styled-system/patterns/link-overlay.js +++ b/packages/wow-ui/styled-system/patterns/link-overlay.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const linkOverlayConfig = { -transform(props) { - return { - _before: { - content: '""', - position: "absolute", - inset: "0", - zIndex: "0", - ...props["_before"] - }, - ...props - }; -}} + transform(props) { + return { + _before: { + content: '""', + position: "absolute", + inset: "0", + zIndex: "0", + ...props["_before"], + }, + ...props, + }; + }, +}; export const getLinkOverlayStyle = (styles = {}) => { - const _styles = getPatternStyles(linkOverlayConfig, styles) - return linkOverlayConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(linkOverlayConfig, styles); + return linkOverlayConfig.transform(_styles, patternFns); +}; -export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)) -linkOverlay.raw = getLinkOverlayStyle \ No newline at end of file +export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)); +linkOverlay.raw = getLinkOverlayStyle; diff --git a/packages/wow-ui/styled-system/patterns/spacer.d.ts b/packages/wow-ui/styled-system/patterns/spacer.d.ts index 4fba408c..47331f26 100644 --- a/packages/wow-ui/styled-system/patterns/spacer.d.ts +++ b/packages/wow-ui/styled-system/patterns/spacer.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface SpacerProperties { - size?: ConditionalValue + size?: ConditionalValue; } - -interface SpacerStyles extends SpacerProperties, DistributiveOmit {} +interface SpacerStyles + extends SpacerProperties, + DistributiveOmit {} interface SpacerPatternFn { - (styles?: SpacerStyles): string - raw: (styles?: SpacerStyles) => SystemStyleObject + (styles?: SpacerStyles): string; + raw: (styles?: SpacerStyles) => SystemStyleObject; } - export declare const spacer: SpacerPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/spacer.js b/packages/wow-ui/styled-system/patterns/spacer.js index e6563fe6..5db15a6b 100644 --- a/packages/wow-ui/styled-system/patterns/spacer.js +++ b/packages/wow-ui/styled-system/patterns/spacer.js @@ -1,21 +1,22 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const spacerConfig = { -transform(props, { map }) { - const { size, ...rest } = props; - return { - alignSelf: "stretch", - justifySelf: "stretch", - flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`), - ...rest - }; -}} + transform(props, { map }) { + const { size, ...rest } = props; + return { + alignSelf: "stretch", + justifySelf: "stretch", + flex: map(size, (v) => (v == null ? "1" : `0 0 ${v}`)), + ...rest, + }; + }, +}; export const getSpacerStyle = (styles = {}) => { - const _styles = getPatternStyles(spacerConfig, styles) - return spacerConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(spacerConfig, styles); + return spacerConfig.transform(_styles, patternFns); +}; -export const spacer = (styles) => css(getSpacerStyle(styles)) -spacer.raw = getSpacerStyle \ No newline at end of file +export const spacer = (styles) => css(getSpacerStyle(styles)); +spacer.raw = getSpacerStyle; diff --git a/packages/wow-ui/styled-system/patterns/square.d.ts b/packages/wow-ui/styled-system/patterns/square.d.ts index fda193f5..99660d29 100644 --- a/packages/wow-ui/styled-system/patterns/square.d.ts +++ b/packages/wow-ui/styled-system/patterns/square.d.ts @@ -1,21 +1,21 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface SquareProperties { - size?: SystemProperties["width"] + size?: SystemProperties["width"]; } - -interface SquareStyles extends SquareProperties, DistributiveOmit {} +interface SquareStyles + extends SquareProperties, + DistributiveOmit {} interface SquarePatternFn { - (styles?: SquareStyles): string - raw: (styles?: SquareStyles) => SystemStyleObject + (styles?: SquareStyles): string; + raw: (styles?: SquareStyles) => SystemStyleObject; } - export declare const square: SquarePatternFn; diff --git a/packages/wow-ui/styled-system/patterns/square.js b/packages/wow-ui/styled-system/patterns/square.js index 447cac90..0cb67c14 100644 --- a/packages/wow-ui/styled-system/patterns/square.js +++ b/packages/wow-ui/styled-system/patterns/square.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const squareConfig = { -transform(props) { - const { size, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: "center", - flex: "0 0 auto", - width: size, - height: size, - ...rest - }; -}} + transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + ...rest, + }; + }, +}; export const getSquareStyle = (styles = {}) => { - const _styles = getPatternStyles(squareConfig, styles) - return squareConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(squareConfig, styles); + return squareConfig.transform(_styles, patternFns); +}; -export const square = (styles) => css(getSquareStyle(styles)) -square.raw = getSquareStyle \ No newline at end of file +export const square = (styles) => css(getSquareStyle(styles)); +square.raw = getSquareStyle; diff --git a/packages/wow-ui/styled-system/patterns/stack.d.ts b/packages/wow-ui/styled-system/patterns/stack.d.ts index 5a6c9cef..954a5a92 100644 --- a/packages/wow-ui/styled-system/patterns/stack.d.ts +++ b/packages/wow-ui/styled-system/patterns/stack.d.ts @@ -1,24 +1,24 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface StackProperties { - align?: SystemProperties["alignItems"] - justify?: SystemProperties["justifyContent"] - direction?: SystemProperties["flexDirection"] - gap?: SystemProperties["gap"] + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; + direction?: SystemProperties["flexDirection"]; + gap?: SystemProperties["gap"]; } - -interface StackStyles extends StackProperties, DistributiveOmit {} +interface StackStyles + extends StackProperties, + DistributiveOmit {} interface StackPatternFn { - (styles?: StackStyles): string - raw: (styles?: StackStyles) => SystemStyleObject + (styles?: StackStyles): string; + raw: (styles?: StackStyles) => SystemStyleObject; } - export declare const stack: StackPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/stack.js b/packages/wow-ui/styled-system/patterns/stack.js index b0b7a3b9..2aae1c96 100644 --- a/packages/wow-ui/styled-system/patterns/stack.js +++ b/packages/wow-ui/styled-system/patterns/stack.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const stackConfig = { -transform(props) { - const { align, justify, direction, gap, ...rest } = props; - return { - display: "flex", - flexDirection: direction, - alignItems: align, - justifyContent: justify, - gap, - ...rest - }; -}, -defaultValues:{direction:'column',gap:'10px'}} + transform(props) { + const { align, justify, direction, gap, ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + gap, + ...rest, + }; + }, + defaultValues: { direction: "column", gap: "10px" }, +}; export const getStackStyle = (styles = {}) => { - const _styles = getPatternStyles(stackConfig, styles) - return stackConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(stackConfig, styles); + return stackConfig.transform(_styles, patternFns); +}; -export const stack = (styles) => css(getStackStyle(styles)) -stack.raw = getStackStyle \ No newline at end of file +export const stack = (styles) => css(getStackStyle(styles)); +stack.raw = getStackStyle; diff --git a/packages/wow-ui/styled-system/patterns/visually-hidden.d.ts b/packages/wow-ui/styled-system/patterns/visually-hidden.d.ts index 76f5e886..5da04d75 100644 --- a/packages/wow-ui/styled-system/patterns/visually-hidden.d.ts +++ b/packages/wow-ui/styled-system/patterns/visually-hidden.d.ts @@ -1,21 +1,19 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; - -export interface VisuallyHiddenProperties { - -} +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; +export interface VisuallyHiddenProperties {} -interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit {} +interface VisuallyHiddenStyles + extends VisuallyHiddenProperties, + DistributiveOmit {} interface VisuallyHiddenPatternFn { - (styles?: VisuallyHiddenStyles): string - raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject + (styles?: VisuallyHiddenStyles): string; + raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject; } - export declare const visuallyHidden: VisuallyHiddenPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/visually-hidden.js b/packages/wow-ui/styled-system/patterns/visually-hidden.js index f23d1a2d..7bc5c84a 100644 --- a/packages/wow-ui/styled-system/patterns/visually-hidden.js +++ b/packages/wow-ui/styled-system/patterns/visually-hidden.js @@ -1,18 +1,19 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const visuallyHiddenConfig = { -transform(props) { - return { - srOnly: true, - ...props - }; -}} + transform(props) { + return { + srOnly: true, + ...props, + }; + }, +}; export const getVisuallyHiddenStyle = (styles = {}) => { - const _styles = getPatternStyles(visuallyHiddenConfig, styles) - return visuallyHiddenConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(visuallyHiddenConfig, styles); + return visuallyHiddenConfig.transform(_styles, patternFns); +}; -export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles)) -visuallyHidden.raw = getVisuallyHiddenStyle \ No newline at end of file +export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles)); +visuallyHidden.raw = getVisuallyHiddenStyle; diff --git a/packages/wow-ui/styled-system/patterns/vstack.d.ts b/packages/wow-ui/styled-system/patterns/vstack.d.ts index 4fb13221..35d2a9d9 100644 --- a/packages/wow-ui/styled-system/patterns/vstack.d.ts +++ b/packages/wow-ui/styled-system/patterns/vstack.d.ts @@ -1,22 +1,22 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface VstackProperties { - justify?: SystemProperties["justifyContent"] - gap?: SystemProperties["gap"] + justify?: SystemProperties["justifyContent"]; + gap?: SystemProperties["gap"]; } - -interface VstackStyles extends VstackProperties, DistributiveOmit {} +interface VstackStyles + extends VstackProperties, + DistributiveOmit {} interface VstackPatternFn { - (styles?: VstackStyles): string - raw: (styles?: VstackStyles) => SystemStyleObject + (styles?: VstackStyles): string; + raw: (styles?: VstackStyles) => SystemStyleObject; } - export declare const vstack: VstackPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/vstack.js b/packages/wow-ui/styled-system/patterns/vstack.js index 8f976887..a9b8195f 100644 --- a/packages/wow-ui/styled-system/patterns/vstack.js +++ b/packages/wow-ui/styled-system/patterns/vstack.js @@ -1,24 +1,25 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const vstackConfig = { -transform(props) { - const { justify, gap, ...rest } = props; - return { - display: "flex", - alignItems: "center", - justifyContent: justify, - gap, - flexDirection: "column", - ...rest - }; -}, -defaultValues:{gap:'10px'}} + transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "column", + ...rest, + }; + }, + defaultValues: { gap: "10px" }, +}; export const getVstackStyle = (styles = {}) => { - const _styles = getPatternStyles(vstackConfig, styles) - return vstackConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(vstackConfig, styles); + return vstackConfig.transform(_styles, patternFns); +}; -export const vstack = (styles) => css(getVstackStyle(styles)) -vstack.raw = getVstackStyle \ No newline at end of file +export const vstack = (styles) => css(getVstackStyle(styles)); +vstack.raw = getVstackStyle; diff --git a/packages/wow-ui/styled-system/patterns/wrap.d.ts b/packages/wow-ui/styled-system/patterns/wrap.d.ts index 36ba882c..29dd4541 100644 --- a/packages/wow-ui/styled-system/patterns/wrap.d.ts +++ b/packages/wow-ui/styled-system/patterns/wrap.d.ts @@ -1,25 +1,25 @@ /* eslint-disable */ -import type { SystemStyleObject, ConditionalValue } from '../types/index'; -import type { Properties } from '../types/csstype'; -import type { SystemProperties } from '../types/style-props'; -import type { DistributiveOmit } from '../types/system-types'; -import type { Tokens } from '../tokens/index'; +import type { SystemStyleObject, ConditionalValue } from "../types/index"; +import type { Properties } from "../types/csstype"; +import type { SystemProperties } from "../types/style-props"; +import type { DistributiveOmit } from "../types/system-types"; +import type { Tokens } from "../tokens/index"; export interface WrapProperties { - gap?: SystemProperties["gap"] - rowGap?: SystemProperties["gap"] - columnGap?: SystemProperties["gap"] - align?: SystemProperties["alignItems"] - justify?: SystemProperties["justifyContent"] + gap?: SystemProperties["gap"]; + rowGap?: SystemProperties["gap"]; + columnGap?: SystemProperties["gap"]; + align?: SystemProperties["alignItems"]; + justify?: SystemProperties["justifyContent"]; } - -interface WrapStyles extends WrapProperties, DistributiveOmit {} +interface WrapStyles + extends WrapProperties, + DistributiveOmit {} interface WrapPatternFn { - (styles?: WrapStyles): string - raw: (styles?: WrapStyles) => SystemStyleObject + (styles?: WrapStyles): string; + raw: (styles?: WrapStyles) => SystemStyleObject; } - export declare const wrap: WrapPatternFn; diff --git a/packages/wow-ui/styled-system/patterns/wrap.js b/packages/wow-ui/styled-system/patterns/wrap.js index 80778180..b8323ed1 100644 --- a/packages/wow-ui/styled-system/patterns/wrap.js +++ b/packages/wow-ui/styled-system/patterns/wrap.js @@ -1,25 +1,33 @@ -import { getPatternStyles, patternFns } from '../helpers.js'; -import { css } from '../css/index.js'; +import { getPatternStyles, patternFns } from "../helpers.js"; +import { css } from "../css/index.js"; const wrapConfig = { -transform(props) { - const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props; - return { - display: "flex", - flexWrap: "wrap", - alignItems: align, - justifyContent: justify, - gap, - columnGap, - rowGap, - ...rest - }; -}} + transform(props) { + const { + columnGap, + rowGap, + gap = columnGap || rowGap ? void 0 : "10px", + align, + justify, + ...rest + } = props; + return { + display: "flex", + flexWrap: "wrap", + alignItems: align, + justifyContent: justify, + gap, + columnGap, + rowGap, + ...rest, + }; + }, +}; export const getWrapStyle = (styles = {}) => { - const _styles = getPatternStyles(wrapConfig, styles) - return wrapConfig.transform(_styles, patternFns) -} + const _styles = getPatternStyles(wrapConfig, styles); + return wrapConfig.transform(_styles, patternFns); +}; -export const wrap = (styles) => css(getWrapStyle(styles)) -wrap.raw = getWrapStyle \ No newline at end of file +export const wrap = (styles) => css(getWrapStyle(styles)); +wrap.raw = getWrapStyle; diff --git a/packages/wow-ui/styled-system/tokens/index.d.ts b/packages/wow-ui/styled-system/tokens/index.d.ts index c398f48f..d4b2113d 100644 --- a/packages/wow-ui/styled-system/tokens/index.d.ts +++ b/packages/wow-ui/styled-system/tokens/index.d.ts @@ -1,9 +1,9 @@ /* eslint-disable */ -import type { Token } from './tokens'; +import type { Token } from "./tokens"; export declare const token: { - (path: Token, fallback?: string): string - var: (path: Token, fallback?: string) => string -} + (path: Token, fallback?: string): string; + var: (path: Token, fallback?: string) => string; +}; -export * from './tokens'; \ No newline at end of file +export * from "./tokens"; diff --git a/packages/wow-ui/styled-system/types/composition.d.ts b/packages/wow-ui/styled-system/types/composition.d.ts index 62d63dec..7e3eeeb3 100644 --- a/packages/wow-ui/styled-system/types/composition.d.ts +++ b/packages/wow-ui/styled-system/types/composition.d.ts @@ -1,13 +1,13 @@ /* eslint-disable */ -import type { CompositionStyleObject } from './system-types'; +import type { CompositionStyleObject } from "./system-types"; interface Token { - value: T - description?: string + value: T; + description?: string; } interface Recursive { - [key: string]: Recursive | T + [key: string]: Recursive | T; } /* ----------------------------------------------------------------------------- @@ -15,124 +15,124 @@ interface Recursive { * -----------------------------------------------------------------------------*/ type TextStyleProperty = - | 'font' - | 'fontFamily' - | 'fontFeatureSettings' - | 'fontKerning' - | 'fontLanguageOverride' - | 'fontOpticalSizing' - | 'fontPalette' - | 'fontSize' - | 'fontSizeAdjust' - | 'fontStretch' - | 'fontStyle' - | 'fontSynthesis' - | 'fontVariant' - | 'fontVariantAlternates' - | 'fontVariantCaps' - | 'fontVariantLigatures' - | 'fontVariantNumeric' - | 'fontVariantPosition' - | 'fontVariationSettings' - | 'fontWeight' - | 'hypens' - | 'hyphenateCharacter' - | 'hyphenateLimitChars' - | 'letterSpacing' - | 'lineBreak' - | 'lineHeight' - | 'quotes' - | 'overflowWrap' - | 'textCombineUpright' - | 'textDecoration' - | 'textDecorationColor' - | 'textDecorationLine' - | 'textDecorationSkipInk' - | 'textDecorationStyle' - | 'textDecorationThickness' - | 'textEmphasis' - | 'textEmphasisColor' - | 'textEmphasisPosition' - | 'textEmphasisStyle' - | 'textIndent' - | 'textJustify' - | 'textOrientation' - | 'textOverflow' - | 'textRendering' - | 'textShadow' - | 'textTransform' - | 'textUnderlineOffset' - | 'textUnderlinePosition' - | 'textWrap' - | 'textWrapMode' - | 'textWrapStyle' - | 'verticalAlign' - | 'whiteSpace' - | 'wordBreak' - | 'wordSpacing' + | "font" + | "fontFamily" + | "fontFeatureSettings" + | "fontKerning" + | "fontLanguageOverride" + | "fontOpticalSizing" + | "fontPalette" + | "fontSize" + | "fontSizeAdjust" + | "fontStretch" + | "fontStyle" + | "fontSynthesis" + | "fontVariant" + | "fontVariantAlternates" + | "fontVariantCaps" + | "fontVariantLigatures" + | "fontVariantNumeric" + | "fontVariantPosition" + | "fontVariationSettings" + | "fontWeight" + | "hypens" + | "hyphenateCharacter" + | "hyphenateLimitChars" + | "letterSpacing" + | "lineBreak" + | "lineHeight" + | "quotes" + | "overflowWrap" + | "textCombineUpright" + | "textDecoration" + | "textDecorationColor" + | "textDecorationLine" + | "textDecorationSkipInk" + | "textDecorationStyle" + | "textDecorationThickness" + | "textEmphasis" + | "textEmphasisColor" + | "textEmphasisPosition" + | "textEmphasisStyle" + | "textIndent" + | "textJustify" + | "textOrientation" + | "textOverflow" + | "textRendering" + | "textShadow" + | "textTransform" + | "textUnderlineOffset" + | "textUnderlinePosition" + | "textWrap" + | "textWrapMode" + | "textWrapStyle" + | "verticalAlign" + | "whiteSpace" + | "wordBreak" + | "wordSpacing"; -export type TextStyle = CompositionStyleObject +export type TextStyle = CompositionStyleObject; -export type TextStyles = Recursive> +export type TextStyles = Recursive>; /* ----------------------------------------------------------------------------- * Layer styles * -----------------------------------------------------------------------------*/ type Placement = - | 'Top' - | 'Right' - | 'Bottom' - | 'Left' - | 'Inline' - | 'Block' - | 'InlineStart' - | 'InlineEnd' - | 'BlockStart' - | 'BlockEnd' + | "Top" + | "Right" + | "Bottom" + | "Left" + | "Inline" + | "Block" + | "InlineStart" + | "InlineEnd" + | "BlockStart" + | "BlockEnd"; type Radius = - | `Top${'Right' | 'Left'}` - | `Bottom${'Right' | 'Left'}` - | `Start${'Start' | 'End'}` - | `End${'Start' | 'End'}` + | `Top${"Right" | "Left"}` + | `Bottom${"Right" | "Left"}` + | `Start${"Start" | "End"}` + | `End${"Start" | "End"}`; type LayerStyleProperty = - | 'background' - | 'backgroundColor' - | 'backgroundImage' - | 'borderRadius' - | 'border' - | 'borderWidth' - | 'borderColor' - | 'borderStyle' - | 'boxShadow' - | 'filter' - | 'backdropFilter' - | 'transform' - | 'color' - | 'opacity' - | 'backgroundBlendMode' - | 'backgroundAttachment' - | 'backgroundClip' - | 'backgroundOrigin' - | 'backgroundPosition' - | 'backgroundRepeat' - | 'backgroundSize' + | "background" + | "backgroundColor" + | "backgroundImage" + | "borderRadius" + | "border" + | "borderWidth" + | "borderColor" + | "borderStyle" + | "boxShadow" + | "filter" + | "backdropFilter" + | "transform" + | "color" + | "opacity" + | "backgroundBlendMode" + | "backgroundAttachment" + | "backgroundClip" + | "backgroundOrigin" + | "backgroundPosition" + | "backgroundRepeat" + | "backgroundSize" | `border${Placement}` | `border${Placement}Width` - | 'borderRadius' + | "borderRadius" | `border${Radius}Radius` | `border${Placement}Color` | `border${Placement}Style` - | 'padding' - | `padding${Placement}` + | "padding" + | `padding${Placement}`; -export type LayerStyle = CompositionStyleObject +export type LayerStyle = CompositionStyleObject; -export type LayerStyles = Recursive> +export type LayerStyles = Recursive>; export interface CompositionStyles { - textStyles: TextStyles - layerStyles: LayerStyles + textStyles: TextStyles; + layerStyles: LayerStyles; } diff --git a/packages/wow-ui/styled-system/types/conditions.d.ts b/packages/wow-ui/styled-system/types/conditions.d.ts index 7cff43ee..b2e811bb 100644 --- a/packages/wow-ui/styled-system/types/conditions.d.ts +++ b/packages/wow-ui/styled-system/types/conditions.d.ts @@ -1,274 +1,274 @@ /* eslint-disable */ -import type { AnySelector, Selectors } from './selectors'; +import type { AnySelector, Selectors } from "./selectors"; export interface Conditions { - /** `&:is(:hover, [data-hover])` */ - "_hover": string - /** `&:is(:focus, [data-focus])` */ - "_focus": string - /** `&:focus-within` */ - "_focusWithin": string - /** `&:is(:focus-visible, [data-focus-visible])` */ - "_focusVisible": string - /** `&:is(:disabled, [disabled], [data-disabled])` */ - "_disabled": string - /** `&:is(:active, [data-active])` */ - "_active": string - /** `&:visited` */ - "_visited": string - /** `&:target` */ - "_target": string - /** `&:is(:read-only, [data-read-only])` */ - "_readOnly": string - /** `&:read-write` */ - "_readWrite": string - /** `&:is(:empty, [data-empty])` */ - "_empty": string - /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ - "_checked": string - /** `&:enabled` */ - "_enabled": string - /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ - "_expanded": string - /** `&[data-highlighted]` */ - "_highlighted": string - /** `&::before` */ - "_before": string - /** `&::after` */ - "_after": string - /** `&::first-letter` */ - "_firstLetter": string - /** `&::first-line` */ - "_firstLine": string - /** `&::marker` */ - "_marker": string - /** `&::selection` */ - "_selection": string - /** `&::file-selector-button` */ - "_file": string - /** `&::backdrop` */ - "_backdrop": string - /** `&:first-child` */ - "_first": string - /** `&:last-child` */ - "_last": string - /** `&:only-child` */ - "_only": string - /** `&:nth-child(even)` */ - "_even": string - /** `&:nth-child(odd)` */ - "_odd": string - /** `&:first-of-type` */ - "_firstOfType": string - /** `&:last-of-type` */ - "_lastOfType": string - /** `&:only-of-type` */ - "_onlyOfType": string - /** `.peer:is(:focus, [data-focus]) ~ &` */ - "_peerFocus": string - /** `.peer:is(:hover, [data-hover]) ~ &` */ - "_peerHover": string - /** `.peer:is(:active, [data-active]) ~ &` */ - "_peerActive": string - /** `.peer:focus-within ~ &` */ - "_peerFocusWithin": string - /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ - "_peerFocusVisible": string - /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ - "_peerDisabled": string - /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ - "_peerChecked": string - /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ - "_peerInvalid": string - /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ - "_peerExpanded": string - /** `.peer:placeholder-shown ~ &` */ - "_peerPlaceholderShown": string - /** `.group:is(:focus, [data-focus]) &` */ - "_groupFocus": string - /** `.group:is(:hover, [data-hover]) &` */ - "_groupHover": string - /** `.group:is(:active, [data-active]) &` */ - "_groupActive": string - /** `.group:focus-within &` */ - "_groupFocusWithin": string - /** `.group:is(:focus-visible, [data-focus-visible]) &` */ - "_groupFocusVisible": string - /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ - "_groupDisabled": string - /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ - "_groupChecked": string - /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ - "_groupExpanded": string - /** `.group:invalid &` */ - "_groupInvalid": string - /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */ - "_indeterminate": string - /** `&:is(:required, [data-required], [aria-required=true])` */ - "_required": string - /** `&:is(:valid, [data-valid])` */ - "_valid": string - /** `&:is(:invalid, [data-invalid])` */ - "_invalid": string - /** `&:autofill` */ - "_autofill": string - /** `&:in-range` */ - "_inRange": string - /** `&:out-of-range` */ - "_outOfRange": string - /** `&::placeholder, &[data-placeholder]` */ - "_placeholder": string - /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ - "_placeholderShown": string - /** `&:is([aria-pressed=true], [data-pressed])` */ - "_pressed": string - /** `&:is([aria-selected=true], [data-selected])` */ - "_selected": string - /** `&:default` */ - "_default": string - /** `&:optional` */ - "_optional": string - /** `&:is([open], [data-open], [data-state="open"])` */ - "_open": string - /** `&:is([closed], [data-closed], [data-state="closed"])` */ - "_closed": string - /** `&:fullscreen` */ - "_fullscreen": string - /** `&:is([data-loading], [aria-busy=true])` */ - "_loading": string - /** `&[aria-current=page]` */ - "_currentPage": string - /** `&[aria-current=step]` */ - "_currentStep": string - /** `@media (prefers-reduced-motion: reduce)` */ - "_motionReduce": string - /** `@media (prefers-reduced-motion: no-preference)` */ - "_motionSafe": string - /** `@media print` */ - "_print": string - /** `@media (orientation: landscape)` */ - "_landscape": string - /** `@media (orientation: portrait)` */ - "_portrait": string - /** `.dark &` */ - "_dark": string - /** `.light &` */ - "_light": string - /** `@media (prefers-color-scheme: dark)` */ - "_osDark": string - /** `@media (prefers-color-scheme: light)` */ - "_osLight": string - /** `@media (forced-colors: active)` */ - "_highContrast": string - /** `@media (prefers-contrast: less)` */ - "_lessContrast": string - /** `@media (prefers-contrast: more)` */ - "_moreContrast": string - /** `[dir=ltr] &` */ - "_ltr": string - /** `[dir=rtl] &` */ - "_rtl": string - /** `&::-webkit-scrollbar` */ - "_scrollbar": string - /** `&::-webkit-scrollbar-thumb` */ - "_scrollbarThumb": string - /** `&::-webkit-scrollbar-track` */ - "_scrollbarTrack": string - /** `&[data-orientation=horizontal]` */ - "_horizontal": string - /** `&[data-orientation=vertical]` */ - "_vertical": string - /** `@starting-style` */ - "_starting": string - /** `@media screen and (min-width: 40rem)` */ - "sm": string - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ - "smOnly": string - /** `@media screen and (max-width: 39.9975rem)` */ - "smDown": string - /** `@media screen and (min-width: 48rem)` */ - "md": string - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ - "mdOnly": string - /** `@media screen and (max-width: 47.9975rem)` */ - "mdDown": string - /** `@media screen and (min-width: 64rem)` */ - "lg": string - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - "lgOnly": string - /** `@media screen and (max-width: 63.9975rem)` */ - "lgDown": string - /** `@media screen and (min-width: 80rem)` */ - "xl": string - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - "xlOnly": string - /** `@media screen and (max-width: 79.9975rem)` */ - "xlDown": string - /** `@media screen and (min-width: 96rem)` */ - "2xl": string - /** `@media screen and (min-width: 96rem)` */ - "2xlOnly": string - /** `@media screen and (max-width: 95.9975rem)` */ - "2xlDown": string - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ - "smToMd": string - /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ - "smToLg": string - /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ - "smToXl": string - /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ - "smTo2xl": string - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ - "mdToLg": string - /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ - "mdToXl": string - /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ - "mdTo2xl": string - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - "lgToXl": string - /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ - "lgTo2xl": string - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - "xlTo2xl": string - /** `@container (min-width: 20rem)` */ - "@/xs": string - /** `@container (min-width: 24rem)` */ - "@/sm": string - /** `@container (min-width: 28rem)` */ - "@/md": string - /** `@container (min-width: 32rem)` */ - "@/lg": string - /** `@container (min-width: 36rem)` */ - "@/xl": string - /** `@container (min-width: 42rem)` */ - "@/2xl": string - /** `@container (min-width: 48rem)` */ - "@/3xl": string - /** `@container (min-width: 56rem)` */ - "@/4xl": string - /** `@container (min-width: 64rem)` */ - "@/5xl": string - /** `@container (min-width: 72rem)` */ - "@/6xl": string - /** `@container (min-width: 80rem)` */ - "@/7xl": string - /** `@container (min-width: 90rem)` */ - "@/8xl": string - /** The base (=no conditions) styles to apply */ - "base": string + /** `&:is(:hover, [data-hover])` */ + _hover: string; + /** `&:is(:focus, [data-focus])` */ + _focus: string; + /** `&:focus-within` */ + _focusWithin: string; + /** `&:is(:focus-visible, [data-focus-visible])` */ + _focusVisible: string; + /** `&:is(:disabled, [disabled], [data-disabled])` */ + _disabled: string; + /** `&:is(:active, [data-active])` */ + _active: string; + /** `&:visited` */ + _visited: string; + /** `&:target` */ + _target: string; + /** `&:is(:read-only, [data-read-only])` */ + _readOnly: string; + /** `&:read-write` */ + _readWrite: string; + /** `&:is(:empty, [data-empty])` */ + _empty: string; + /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ + _checked: string; + /** `&:enabled` */ + _enabled: string; + /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ + _expanded: string; + /** `&[data-highlighted]` */ + _highlighted: string; + /** `&::before` */ + _before: string; + /** `&::after` */ + _after: string; + /** `&::first-letter` */ + _firstLetter: string; + /** `&::first-line` */ + _firstLine: string; + /** `&::marker` */ + _marker: string; + /** `&::selection` */ + _selection: string; + /** `&::file-selector-button` */ + _file: string; + /** `&::backdrop` */ + _backdrop: string; + /** `&:first-child` */ + _first: string; + /** `&:last-child` */ + _last: string; + /** `&:only-child` */ + _only: string; + /** `&:nth-child(even)` */ + _even: string; + /** `&:nth-child(odd)` */ + _odd: string; + /** `&:first-of-type` */ + _firstOfType: string; + /** `&:last-of-type` */ + _lastOfType: string; + /** `&:only-of-type` */ + _onlyOfType: string; + /** `.peer:is(:focus, [data-focus]) ~ &` */ + _peerFocus: string; + /** `.peer:is(:hover, [data-hover]) ~ &` */ + _peerHover: string; + /** `.peer:is(:active, [data-active]) ~ &` */ + _peerActive: string; + /** `.peer:focus-within ~ &` */ + _peerFocusWithin: string; + /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ + _peerFocusVisible: string; + /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ + _peerDisabled: string; + /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ + _peerChecked: string; + /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ + _peerInvalid: string; + /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ + _peerExpanded: string; + /** `.peer:placeholder-shown ~ &` */ + _peerPlaceholderShown: string; + /** `.group:is(:focus, [data-focus]) &` */ + _groupFocus: string; + /** `.group:is(:hover, [data-hover]) &` */ + _groupHover: string; + /** `.group:is(:active, [data-active]) &` */ + _groupActive: string; + /** `.group:focus-within &` */ + _groupFocusWithin: string; + /** `.group:is(:focus-visible, [data-focus-visible]) &` */ + _groupFocusVisible: string; + /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ + _groupDisabled: string; + /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ + _groupChecked: string; + /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ + _groupExpanded: string; + /** `.group:invalid &` */ + _groupInvalid: string; + /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */ + _indeterminate: string; + /** `&:is(:required, [data-required], [aria-required=true])` */ + _required: string; + /** `&:is(:valid, [data-valid])` */ + _valid: string; + /** `&:is(:invalid, [data-invalid])` */ + _invalid: string; + /** `&:autofill` */ + _autofill: string; + /** `&:in-range` */ + _inRange: string; + /** `&:out-of-range` */ + _outOfRange: string; + /** `&::placeholder, &[data-placeholder]` */ + _placeholder: string; + /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ + _placeholderShown: string; + /** `&:is([aria-pressed=true], [data-pressed])` */ + _pressed: string; + /** `&:is([aria-selected=true], [data-selected])` */ + _selected: string; + /** `&:default` */ + _default: string; + /** `&:optional` */ + _optional: string; + /** `&:is([open], [data-open], [data-state="open"])` */ + _open: string; + /** `&:is([closed], [data-closed], [data-state="closed"])` */ + _closed: string; + /** `&:fullscreen` */ + _fullscreen: string; + /** `&:is([data-loading], [aria-busy=true])` */ + _loading: string; + /** `&[aria-current=page]` */ + _currentPage: string; + /** `&[aria-current=step]` */ + _currentStep: string; + /** `@media (prefers-reduced-motion: reduce)` */ + _motionReduce: string; + /** `@media (prefers-reduced-motion: no-preference)` */ + _motionSafe: string; + /** `@media print` */ + _print: string; + /** `@media (orientation: landscape)` */ + _landscape: string; + /** `@media (orientation: portrait)` */ + _portrait: string; + /** `.dark &` */ + _dark: string; + /** `.light &` */ + _light: string; + /** `@media (prefers-color-scheme: dark)` */ + _osDark: string; + /** `@media (prefers-color-scheme: light)` */ + _osLight: string; + /** `@media (forced-colors: active)` */ + _highContrast: string; + /** `@media (prefers-contrast: less)` */ + _lessContrast: string; + /** `@media (prefers-contrast: more)` */ + _moreContrast: string; + /** `[dir=ltr] &` */ + _ltr: string; + /** `[dir=rtl] &` */ + _rtl: string; + /** `&::-webkit-scrollbar` */ + _scrollbar: string; + /** `&::-webkit-scrollbar-thumb` */ + _scrollbarThumb: string; + /** `&::-webkit-scrollbar-track` */ + _scrollbarTrack: string; + /** `&[data-orientation=horizontal]` */ + _horizontal: string; + /** `&[data-orientation=vertical]` */ + _vertical: string; + /** `@starting-style` */ + _starting: string; + /** `@media screen and (min-width: 40rem)` */ + sm: string; + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + smOnly: string; + /** `@media screen and (max-width: 39.9975rem)` */ + smDown: string; + /** `@media screen and (min-width: 48rem)` */ + md: string; + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + mdOnly: string; + /** `@media screen and (max-width: 47.9975rem)` */ + mdDown: string; + /** `@media screen and (min-width: 64rem)` */ + lg: string; + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + lgOnly: string; + /** `@media screen and (max-width: 63.9975rem)` */ + lgDown: string; + /** `@media screen and (min-width: 80rem)` */ + xl: string; + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + xlOnly: string; + /** `@media screen and (max-width: 79.9975rem)` */ + xlDown: string; + /** `@media screen and (min-width: 96rem)` */ + "2xl": string; + /** `@media screen and (min-width: 96rem)` */ + "2xlOnly": string; + /** `@media screen and (max-width: 95.9975rem)` */ + "2xlDown": string; + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + smToMd: string; + /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ + smToLg: string; + /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ + smToXl: string; + /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ + smTo2xl: string; + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + mdToLg: string; + /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ + mdToXl: string; + /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ + mdTo2xl: string; + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + lgToXl: string; + /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ + lgTo2xl: string; + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + xlTo2xl: string; + /** `@container (min-width: 20rem)` */ + "@/xs": string; + /** `@container (min-width: 24rem)` */ + "@/sm": string; + /** `@container (min-width: 28rem)` */ + "@/md": string; + /** `@container (min-width: 32rem)` */ + "@/lg": string; + /** `@container (min-width: 36rem)` */ + "@/xl": string; + /** `@container (min-width: 42rem)` */ + "@/2xl": string; + /** `@container (min-width: 48rem)` */ + "@/3xl": string; + /** `@container (min-width: 56rem)` */ + "@/4xl": string; + /** `@container (min-width: 64rem)` */ + "@/5xl": string; + /** `@container (min-width: 72rem)` */ + "@/6xl": string; + /** `@container (min-width: 80rem)` */ + "@/7xl": string; + /** `@container (min-width: 90rem)` */ + "@/8xl": string; + /** The base (=no conditions) styles to apply */ + base: string; } export type ConditionalValue = | V | Array | { - [K in keyof Conditions]?: ConditionalValue - } + [K in keyof Conditions]?: ConditionalValue; + }; export type Nested

= P & { - [K in Selectors]?: Nested

+ [K in Selectors]?: Nested

; } & { - [K in AnySelector]?: Nested

+ [K in AnySelector]?: Nested

; } & { - [K in keyof Conditions]?: Nested

-} + [K in keyof Conditions]?: Nested

; +}; diff --git a/packages/wow-ui/styled-system/types/csstype.d.ts b/packages/wow-ui/styled-system/types/csstype.d.ts index 2c9b3fcd..c64217c5 100644 --- a/packages/wow-ui/styled-system/types/csstype.d.ts +++ b/packages/wow-ui/styled-system/types/csstype.d.ts @@ -1,15 +1,21 @@ /* eslint-disable */ export {}; -export type PropertyValue = TValue extends Array - ? Array - : TValue extends infer TUnpacked & {} - ? TUnpacked - : TValue; - -export type Fallback = { [P in keyof T]: T[P] | readonly NonNullable[] }; - -export interface StandardLonghandProperties { +export type PropertyValue = + TValue extends Array + ? Array + : TValue extends infer TUnpacked & {} + ? TUnpacked + : TValue; + +export type Fallback = { + [P in keyof T]: T[P] | readonly NonNullable[]; +}; + +export interface StandardLonghandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. * @@ -648,7 +654,9 @@ export interface StandardLonghandProperties | undefined; + borderBottomRightRadius?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`. * @@ -1470,7 +1478,9 @@ export interface StandardLonghandProperties | undefined; + containIntrinsicBlockSize?: + | Property.ContainIntrinsicBlockSize + | undefined; /** * The **`contain-intrinsic-length`** CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment. * @@ -1498,7 +1508,9 @@ export interface StandardLonghandProperties | undefined; + containIntrinsicInlineSize?: + | Property.ContainIntrinsicInlineSize + | undefined; /** * The **`contain-intrinsic-width`** CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment. * @@ -4085,7 +4097,9 @@ export interface StandardLonghandProperties | undefined; + scrollMarginInlineStart?: + | Property.ScrollMarginInlineStart + | undefined; /** * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -4158,7 +4172,9 @@ export interface StandardLonghandProperties | undefined; + scrollPaddingBlockStart?: + | Property.ScrollPaddingBlockStart + | undefined; /** * The `scroll-padding-bottom` property defines offsets for the bottom of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -4200,7 +4216,9 @@ export interface StandardLonghandProperties | undefined; + scrollPaddingInlineStart?: + | Property.ScrollPaddingInlineStart + | undefined; /** * The `scroll-padding-left` property defines offsets for the left of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -4617,7 +4635,9 @@ export interface StandardLonghandProperties | undefined; + textDecorationThickness?: + | Property.TextDecorationThickness + | undefined; /** * The **`text-emphasis-color`** CSS property sets the color of emphasis marks. This value can also be set using the `text-emphasis` shorthand. * @@ -5283,7 +5303,10 @@ export interface StandardLonghandProperties { +export interface StandardShorthandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`all`** shorthand CSS property resets all of an element's properties except `unicode-bidi`, `direction`, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin. * @@ -6109,11 +6132,16 @@ export interface StandardShorthandProperties - extends StandardLonghandProperties, +export interface StandardProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardLonghandProperties, StandardShorthandProperties {} -export interface VendorLonghandProperties { +export interface VendorLonghandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. * @@ -6401,7 +6429,9 @@ export interface VendorLonghandProperties | undefined; + MozOutlineRadiusBottomleft?: + | Property.MozOutlineRadiusBottomleft + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-bottomright`** CSS property can be used to round the bottom-right corner of an element's `outline`. * @@ -6409,7 +6439,9 @@ export interface VendorLonghandProperties | undefined; + MozOutlineRadiusBottomright?: + | Property.MozOutlineRadiusBottomright + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-topleft`** CSS property can be used to round the top-left corner of an element's `outline`. * @@ -6417,7 +6449,9 @@ export interface VendorLonghandProperties | undefined; + MozOutlineRadiusTopleft?: + | Property.MozOutlineRadiusTopleft + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-topright`** CSS property can be used to round the top-right corner of an element's `outline`. * @@ -6425,7 +6459,9 @@ export interface VendorLonghandProperties | undefined; + MozOutlineRadiusTopright?: + | Property.MozOutlineRadiusTopright + | undefined; /** * The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. * @@ -7155,7 +7191,9 @@ export interface VendorLonghandProperties | undefined; + WebkitBorderBeforeWidth?: + | Property.WebkitBorderBeforeWidth + | undefined; /** * The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -7163,7 +7201,9 @@ export interface VendorLonghandProperties | undefined; + WebkitBorderBottomLeftRadius?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -7171,7 +7211,9 @@ export interface VendorLonghandProperties | undefined; + WebkitBorderBottomRightRadius?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-image-slice`** CSS property divides the image specified by `border-image-source` into regions. These regions form the components of an element's border image. * @@ -7195,7 +7237,9 @@ export interface VendorLonghandProperties | undefined; + WebkitBorderTopRightRadius?: + | Property.BorderTopRightRadius + | undefined; /** * The **`box-decoration-break`** CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages. * @@ -7843,7 +7887,9 @@ export interface VendorLonghandProperties { +export interface VendorShorthandProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`animation`** shorthand CSS property applies an animation between styles. It is a shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`. * @@ -8021,9 +8070,16 @@ export interface VendorShorthandProperties | undefined; } -export interface VendorProperties extends VendorLonghandProperties, VendorShorthandProperties {} +export interface VendorProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends VendorLonghandProperties, + VendorShorthandProperties {} -export interface ObsoleteProperties { +export interface ObsoleteProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * In combination with `elevation`, the **`azimuth`** CSS property enables different audio sources to be positioned spatially for aural presentation. This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage. * @@ -8455,7 +8511,9 @@ export interface ObsoleteProperties | undefined; + MozBorderRadiusBottomleft?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -8465,7 +8523,9 @@ export interface ObsoleteProperties | undefined; + MozBorderRadiusBottomright?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-top-left-radius`** CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -9078,7 +9138,10 @@ export interface ObsoleteProperties { +export interface SvgProperties< + TLength = (string & {}) | 0, + TTime = string & {}, +> { alignmentBaseline?: Property.AlignmentBaseline | undefined; baselineShift?: Property.BaselineShift | undefined; clip?: Property.Clip | undefined; @@ -9147,7 +9210,10 @@ export interface Properties ObsoleteProperties, SvgProperties {} -export interface StandardLonghandPropertiesHyphen { +export interface StandardLonghandPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. * @@ -9714,7 +9780,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-block-start-width"?: + | Property.BorderBlockStartWidth + | undefined; /** * The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -9771,7 +9839,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-bottom-left-radius"?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -9786,7 +9856,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-bottom-right-radius"?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`. * @@ -9856,7 +9928,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-end-start-radius"?: + | Property.BorderEndStartRadius + | undefined; /** * The **`border-image-outset`** CSS property sets the distance by which an element's border image is set out from its border box. * @@ -9985,7 +10059,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-inline-end-width"?: + | Property.BorderInlineEndWidth + | undefined; /** * The **`border-inline-start-color`** CSS property defines the color of the logical inline start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -10029,7 +10105,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-inline-start-width"?: + | Property.BorderInlineStartWidth + | undefined; /** * The **`border-inline-style`** CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`. * @@ -10169,7 +10247,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-start-end-radius"?: + | Property.BorderStartEndRadius + | undefined; /** * The **`border-start-start-radius`** CSS property defines a logical border radius on an element, which maps to a physical border radius that depends on the element's `writing-mode`, `direction`, and `text-orientation`. This is useful when building styles to work regardless of the text orientation and writing mode. * @@ -10183,7 +10263,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-start-start-radius"?: + | Property.BorderStartStartRadius + | undefined; /** * The **`border-top-color`** CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties `border-color` or `border-top`. * @@ -10227,7 +10309,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "border-top-right-radius"?: + | Property.BorderTopRightRadius + | undefined; /** * The **`border-top-style`** CSS property sets the line style of an element's top `border`. * @@ -10608,7 +10692,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-block-size"?: + | Property.ContainIntrinsicBlockSize + | undefined; /** * The **`contain-intrinsic-length`** CSS property sets the height of an element that a browser can use for layout when the element is subject to size containment. * @@ -10622,7 +10708,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-height"?: + | Property.ContainIntrinsicHeight + | undefined; /** * The **`contain-intrinsic-inline-size`** CSS logical property defines the inline-size of an element that a browser can use for layout when the element is subject to size containment. * @@ -10636,7 +10724,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-inline-size"?: + | Property.ContainIntrinsicInlineSize + | undefined; /** * The **`contain-intrinsic-width`** CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment. * @@ -10650,7 +10740,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "contain-intrinsic-width"?: + | Property.ContainIntrinsicWidth + | undefined; /** * The **container-name** CSS property specifies a list of query container names used by the @container at-rule in a container query. A container query will apply styles to elements based on the size of the nearest ancestor with a containment context. When a containment context is given a name, it can be specifically targeted using the `@container` at-rule instead of the nearest ancestor with containment. * @@ -13166,7 +13258,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-margin-block-end"?: + | Property.ScrollMarginBlockEnd + | undefined; /** * The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13180,7 +13274,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-margin-block-start"?: + | Property.ScrollMarginBlockStart + | undefined; /** * The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13209,7 +13305,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-margin-inline-end"?: + | Property.ScrollMarginInlineEnd + | undefined; /** * The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13223,7 +13321,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-margin-inline-start"?: + | Property.ScrollMarginInlineStart + | undefined; /** * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13282,7 +13382,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-padding-block-end"?: + | Property.ScrollPaddingBlockEnd + | undefined; /** * The `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -13296,7 +13398,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-padding-block-start"?: + | Property.ScrollPaddingBlockStart + | undefined; /** * The `scroll-padding-bottom` property defines offsets for the bottom of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -13324,7 +13428,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-padding-inline-end"?: + | Property.ScrollPaddingInlineEnd + | undefined; /** * The `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -13338,7 +13444,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-padding-inline-start"?: + | Property.ScrollPaddingInlineStart + | undefined; /** * The `scroll-padding-left` property defines offsets for the left of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport. * @@ -13409,7 +13517,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "scroll-snap-margin-bottom"?: + | Property.ScrollMarginBottom + | undefined; /** * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets. * @@ -13755,7 +13865,9 @@ export interface StandardLonghandPropertiesHyphen | undefined; + "text-decoration-thickness"?: + | Property.TextDecorationThickness + | undefined; /** * The **`text-emphasis-color`** CSS property sets the color of emphasis marks. This value can also be set using the `text-emphasis` shorthand. * @@ -14421,7 +14533,10 @@ export interface StandardLonghandPropertiesHyphen { +export interface StandardShorthandPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`all`** shorthand CSS property resets all of an element's properties except `unicode-bidi`, `direction`, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin. * @@ -15247,11 +15362,16 @@ export interface StandardShorthandPropertiesHyphen - extends StandardLonghandPropertiesHyphen, +export interface StandardPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardLonghandPropertiesHyphen, StandardShorthandPropertiesHyphen {} -export interface VendorLonghandPropertiesHyphen { +export interface VendorLonghandPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. * @@ -15291,7 +15411,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-moz-outline-radius-bottomleft"?: + | Property.MozOutlineRadiusBottomleft + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-bottomright`** CSS property can be used to round the bottom-right corner of an element's `outline`. * @@ -15547,7 +15673,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-moz-outline-radius-bottomright"?: + | Property.MozOutlineRadiusBottomright + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-topleft`** CSS property can be used to round the top-left corner of an element's `outline`. * @@ -15555,7 +15683,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-moz-outline-radius-topleft"?: + | Property.MozOutlineRadiusTopleft + | undefined; /** * In Mozilla applications, the **`-moz-outline-radius-topright`** CSS property can be used to round the top-right corner of an element's `outline`. * @@ -15563,7 +15693,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-moz-outline-radius-topright"?: + | Property.MozOutlineRadiusTopright + | undefined; /** * The **`padding-inline-end`** CSS property defines the logical inline end padding of an element, which maps to a physical padding depending on the element's writing mode, directionality, and text orientation. * @@ -15803,7 +15935,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-ms-hyphenate-limit-zone"?: + | Property.MsHyphenateLimitZone + | undefined; /** * The **`hyphens`** CSS property specifies how words should be hyphenated when text wraps across multiple lines. It can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate. * @@ -15971,7 +16105,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-before-width"?: + | Property.WebkitBorderBeforeWidth + | undefined; /** * The **`border-bottom-left-radius`** CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -16301,7 +16447,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-bottom-left-radius"?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -16309,7 +16457,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-bottom-right-radius"?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-image-slice`** CSS property divides the image specified by `border-image-source` into regions. These regions form the components of an element's border image. * @@ -16325,7 +16475,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-top-left-radius"?: + | Property.BorderTopLeftRadius + | undefined; /** * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -16333,7 +16485,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-border-top-right-radius"?: + | Property.BorderTopRightRadius + | undefined; /** * The **`box-decoration-break`** CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages. * @@ -16589,7 +16743,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-mask-box-image-outset"?: + | Property.MaskBorderOutset + | undefined; /** * The **`mask-border-repeat`** CSS property sets how the edge regions of a source image are adjusted to fit the dimensions of an element's mask border. * @@ -16621,7 +16777,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-mask-box-image-width"?: + | Property.MaskBorderWidth + | undefined; /** * The **`mask-clip`** CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area. * @@ -16765,7 +16923,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-perspective-origin"?: + | Property.PerspectiveOrigin + | undefined; /** * The **`print-color-adjust`** CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device. * @@ -16909,7 +17069,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-text-stroke-width"?: + | Property.WebkitTextStrokeWidth + | undefined; /** * The **`text-underline-position`** CSS property specifies the position of the underline which is set using the `text-decoration` property's `underline` value. * @@ -16917,7 +17079,9 @@ export interface VendorLonghandPropertiesHyphen | undefined; + "-webkit-transition-duration"?: + | Property.TransitionDuration + | undefined; /** * The **`transition-property`** CSS property sets the CSS properties to which a transition effect should be applied. * @@ -16981,7 +17147,9 @@ export interface VendorLonghandPropertiesHyphen { +export interface VendorShorthandPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * The **`animation`** shorthand CSS property applies an animation between styles. It is a shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`. * @@ -17159,11 +17330,16 @@ export interface VendorShorthandPropertiesHyphen | undefined; } -export interface VendorPropertiesHyphen - extends VendorLonghandPropertiesHyphen, +export interface VendorPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends VendorLonghandPropertiesHyphen, VendorShorthandPropertiesHyphen {} -export interface ObsoletePropertiesHyphen { +export interface ObsoletePropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { /** * In combination with `elevation`, the **`azimuth`** CSS property enables different audio sources to be positioned spatially for aural presentation. This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage. * @@ -17377,7 +17553,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "scroll-snap-destination"?: + | Property.ScrollSnapDestination + | undefined; /** * The **`scroll-snap-points-x`** CSS property defines the horizontal positioning of snap points within the content of the scroll container they are applied to. * @@ -17595,7 +17773,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "-moz-border-radius-bottomleft"?: + | Property.BorderBottomLeftRadius + | undefined; /** * The **`border-bottom-right-radius`** CSS property rounds the bottom-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -17605,7 +17785,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "-moz-border-radius-bottomright"?: + | Property.BorderBottomRightRadius + | undefined; /** * The **`border-top-left-radius`** CSS property rounds the top-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -17615,7 +17797,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "-moz-border-radius-topleft"?: + | Property.BorderTopLeftRadius + | undefined; /** * The **`border-top-right-radius`** CSS property rounds the top-right corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner. * @@ -17625,7 +17809,9 @@ export interface ObsoletePropertiesHyphen | undefined; + "-moz-border-radius-topright"?: + | Property.BorderTopRightRadius + | undefined; /** * The **`box-align`** CSS property specifies how an element aligns its contents across its layout in a perpendicular direction. The effect of the property is only visible if there is extra space in the box. * @@ -17901,7 +18087,9 @@ export interface ObsoletePropertiesHyphen { +export interface SvgPropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> { "alignment-baseline"?: Property.AlignmentBaseline | undefined; "baseline-shift"?: Property.BaselineShift | undefined; clip?: Property.Clip | undefined; @@ -18281,60 +18474,110 @@ export interface SvgPropertiesHyphen - extends StandardPropertiesHyphen, +export interface PropertiesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardPropertiesHyphen, VendorPropertiesHyphen, ObsoletePropertiesHyphen, SvgPropertiesHyphen {} -export type StandardLonghandPropertiesFallback = Fallback>; +export type StandardLonghandPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type StandardShorthandPropertiesFallback = Fallback>; +export type StandardShorthandPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface StandardPropertiesFallback - extends StandardLonghandPropertiesFallback, +export interface StandardPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardLonghandPropertiesFallback, StandardShorthandPropertiesFallback {} -export type VendorLonghandPropertiesFallback = Fallback>; +export type VendorLonghandPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type VendorShorthandPropertiesFallback = Fallback>; +export type VendorShorthandPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface VendorPropertiesFallback - extends VendorLonghandPropertiesFallback, +export interface VendorPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends VendorLonghandPropertiesFallback, VendorShorthandPropertiesFallback {} -export type ObsoletePropertiesFallback = Fallback>; +export type ObsoletePropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type SvgPropertiesFallback = Fallback>; +export type SvgPropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface PropertiesFallback - extends StandardPropertiesFallback, +export interface PropertiesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardPropertiesFallback, VendorPropertiesFallback, ObsoletePropertiesFallback, SvgPropertiesFallback {} -export type StandardLonghandPropertiesHyphenFallback = Fallback>; +export type StandardLonghandPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type StandardShorthandPropertiesHyphenFallback = Fallback>; +export type StandardShorthandPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface StandardPropertiesHyphenFallback - extends StandardLonghandPropertiesHyphenFallback, +export interface StandardPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardLonghandPropertiesHyphenFallback, StandardShorthandPropertiesHyphenFallback {} -export type VendorLonghandPropertiesHyphenFallback = Fallback>; +export type VendorLonghandPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type VendorShorthandPropertiesHyphenFallback = Fallback>; +export type VendorShorthandPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface VendorPropertiesHyphenFallback - extends VendorLonghandPropertiesHyphenFallback, +export interface VendorPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends VendorLonghandPropertiesHyphenFallback, VendorShorthandPropertiesHyphenFallback {} -export type ObsoletePropertiesHyphenFallback = Fallback>; +export type ObsoletePropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export type SvgPropertiesHyphenFallback = Fallback>; +export type SvgPropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> = Fallback>; -export interface PropertiesHyphenFallback - extends StandardPropertiesHyphenFallback, +export interface PropertiesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, +> extends StandardPropertiesHyphenFallback, VendorPropertiesHyphenFallback, ObsoletePropertiesHyphenFallback, SvgPropertiesHyphenFallback {} @@ -18944,50 +19187,134 @@ export type SvgAttributes = | "[z]" | "[zoomAndPan]"; -export type Globals = "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset"; +export type Globals = + | "-moz-initial" + | "inherit" + | "initial" + | "revert" + | "revert-layer" + | "unset"; export namespace Property { export type AccentColor = Globals | DataType.Color | "auto"; - export type AlignContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {}); + export type AlignContent = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "baseline" + | "normal" + | (string & {}); - export type AlignItems = Globals | DataType.SelfPosition | "baseline" | "normal" | "stretch" | (string & {}); + export type AlignItems = + | Globals + | DataType.SelfPosition + | "baseline" + | "normal" + | "stretch" + | (string & {}); - export type AlignSelf = Globals | DataType.SelfPosition | "auto" | "baseline" | "normal" | "stretch" | (string & {}); + export type AlignSelf = + | Globals + | DataType.SelfPosition + | "auto" + | "baseline" + | "normal" + | "stretch" + | (string & {}); - export type AlignTracks = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {}); + export type AlignTracks = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "baseline" + | "normal" + | (string & {}); export type All = Globals; - export type Animation = Globals | DataType.SingleAnimation | (string & {}); + export type Animation = + | Globals + | DataType.SingleAnimation + | (string & {}); - export type AnimationComposition = Globals | DataType.SingleAnimationComposition | (string & {}); + export type AnimationComposition = + | Globals + | DataType.SingleAnimationComposition + | (string & {}); - export type AnimationDelay = Globals | TTime | (string & {}); + export type AnimationDelay = + | Globals + | TTime + | (string & {}); - export type AnimationDirection = Globals | DataType.SingleAnimationDirection | (string & {}); + export type AnimationDirection = + | Globals + | DataType.SingleAnimationDirection + | (string & {}); - export type AnimationDuration = Globals | TTime | (string & {}); + export type AnimationDuration = + | Globals + | TTime + | (string & {}); - export type AnimationFillMode = Globals | DataType.SingleAnimationFillMode | (string & {}); + export type AnimationFillMode = + | Globals + | DataType.SingleAnimationFillMode + | (string & {}); - export type AnimationIterationCount = Globals | "infinite" | (string & {}) | (number & {}); + export type AnimationIterationCount = + | Globals + | "infinite" + | (string & {}) + | (number & {}); export type AnimationName = Globals | "none" | (string & {}); - export type AnimationPlayState = Globals | "paused" | "running" | (string & {}); + export type AnimationPlayState = + | Globals + | "paused" + | "running" + | (string & {}); - export type AnimationRange = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {}); + export type AnimationRange = + | Globals + | DataType.TimelineRangeName + | TLength + | "normal" + | (string & {}); - export type AnimationRangeEnd = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {}); + export type AnimationRangeEnd = + | Globals + | DataType.TimelineRangeName + | TLength + | "normal" + | (string & {}); - export type AnimationRangeStart = Globals | DataType.TimelineRangeName | TLength | "normal" | (string & {}); + export type AnimationRangeStart = + | Globals + | DataType.TimelineRangeName + | TLength + | "normal" + | (string & {}); - export type AnimationTimeline = Globals | DataType.SingleAnimationTimeline | (string & {}); + export type AnimationTimeline = + | Globals + | DataType.SingleAnimationTimeline + | (string & {}); - export type AnimationTimingFunction = Globals | DataType.EasingFunction | (string & {}); + export type AnimationTimingFunction = + | Globals + | DataType.EasingFunction + | (string & {}); - export type Appearance = Globals | DataType.CompatAuto | "auto" | "menulist-button" | "none" | "textfield"; + export type Appearance = + | Globals + | DataType.CompatAuto + | "auto" + | "menulist-button" + | "none" + | "textfield"; export type AspectRatio = Globals | "auto" | (string & {}) | (number & {}); @@ -19011,11 +19338,20 @@ export namespace Property { export type BackfaceVisibility = Globals | "hidden" | "visible"; - export type Background = Globals | DataType.FinalBgLayer | (string & {}); + export type Background = + | Globals + | DataType.FinalBgLayer + | (string & {}); - export type BackgroundAttachment = Globals | DataType.Attachment | (string & {}); + export type BackgroundAttachment = + | Globals + | DataType.Attachment + | (string & {}); - export type BackgroundBlendMode = Globals | DataType.BlendMode | (string & {}); + export type BackgroundBlendMode = + | Globals + | DataType.BlendMode + | (string & {}); export type BackgroundClip = Globals | DataType.Box | (string & {}); @@ -19025,15 +19361,37 @@ export namespace Property { export type BackgroundOrigin = Globals | DataType.Box | (string & {}); - export type BackgroundPosition = Globals | DataType.BgPosition | (string & {}); + export type BackgroundPosition = + | Globals + | DataType.BgPosition + | (string & {}); - export type BackgroundPositionX = Globals | TLength | "center" | "left" | "right" | "x-end" | "x-start" | (string & {}); + export type BackgroundPositionX = + | Globals + | TLength + | "center" + | "left" + | "right" + | "x-end" + | "x-start" + | (string & {}); - export type BackgroundPositionY = Globals | TLength | "bottom" | "center" | "top" | "y-end" | "y-start" | (string & {}); + export type BackgroundPositionY = + | Globals + | TLength + | "bottom" + | "center" + | "top" + | "y-end" + | "y-start" + | (string & {}); export type BackgroundRepeat = Globals | DataType.RepeatStyle | (string & {}); - export type BackgroundSize = Globals | DataType.BgSize | (string & {}); + export type BackgroundSize = + | Globals + | DataType.BgSize + | (string & {}); export type BlockOverflow = Globals | "clip" | "ellipsis" | (string & {}); @@ -19049,131 +19407,272 @@ export namespace Property { | "min-content" | (string & {}); - export type Border = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type Border = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); - export type BorderBlock = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderBlock = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderBlockColor = Globals | DataType.Color | (string & {}); - export type BorderBlockEnd = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderBlockEnd = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderBlockEndColor = Globals | DataType.Color; export type BorderBlockEndStyle = Globals | DataType.LineStyle; - export type BorderBlockEndWidth = Globals | DataType.LineWidth; + export type BorderBlockEndWidth = + | Globals + | DataType.LineWidth; - export type BorderBlockStart = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderBlockStart = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderBlockStartColor = Globals | DataType.Color; export type BorderBlockStartStyle = Globals | DataType.LineStyle; - export type BorderBlockStartWidth = Globals | DataType.LineWidth; + export type BorderBlockStartWidth = + | Globals + | DataType.LineWidth; export type BorderBlockStyle = Globals | DataType.LineStyle; - export type BorderBlockWidth = Globals | DataType.LineWidth; + export type BorderBlockWidth = + | Globals + | DataType.LineWidth; - export type BorderBottom = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderBottom = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderBottomColor = Globals | DataType.Color; - export type BorderBottomLeftRadius = Globals | TLength | (string & {}); + export type BorderBottomLeftRadius = + | Globals + | TLength + | (string & {}); - export type BorderBottomRightRadius = Globals | TLength | (string & {}); + export type BorderBottomRightRadius = + | Globals + | TLength + | (string & {}); export type BorderBottomStyle = Globals | DataType.LineStyle; - export type BorderBottomWidth = Globals | DataType.LineWidth; + export type BorderBottomWidth = + | Globals + | DataType.LineWidth; export type BorderCollapse = Globals | "collapse" | "separate"; export type BorderColor = Globals | DataType.Color | (string & {}); - export type BorderEndEndRadius = Globals | TLength | (string & {}); + export type BorderEndEndRadius = + | Globals + | TLength + | (string & {}); - export type BorderEndStartRadius = Globals | TLength | (string & {}); + export type BorderEndStartRadius = + | Globals + | TLength + | (string & {}); - export type BorderImage = Globals | "none" | "repeat" | "round" | "space" | "stretch" | (string & {}) | (number & {}); + export type BorderImage = + | Globals + | "none" + | "repeat" + | "round" + | "space" + | "stretch" + | (string & {}) + | (number & {}); - export type BorderImageOutset = Globals | TLength | (string & {}) | (number & {}); + export type BorderImageOutset = + | Globals + | TLength + | (string & {}) + | (number & {}); - export type BorderImageRepeat = Globals | "repeat" | "round" | "space" | "stretch" | (string & {}); + export type BorderImageRepeat = + | Globals + | "repeat" + | "round" + | "space" + | "stretch" + | (string & {}); export type BorderImageSlice = Globals | (string & {}) | (number & {}); export type BorderImageSource = Globals | "none" | (string & {}); - export type BorderImageWidth = Globals | TLength | "auto" | (string & {}) | (number & {}); + export type BorderImageWidth = + | Globals + | TLength + | "auto" + | (string & {}) + | (number & {}); - export type BorderInline = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderInline = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderInlineColor = Globals | DataType.Color | (string & {}); - export type BorderInlineEnd = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderInlineEnd = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderInlineEndColor = Globals | DataType.Color; export type BorderInlineEndStyle = Globals | DataType.LineStyle; - export type BorderInlineEndWidth = Globals | DataType.LineWidth; + export type BorderInlineEndWidth = + | Globals + | DataType.LineWidth; - export type BorderInlineStart = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderInlineStart = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderInlineStartColor = Globals | DataType.Color; export type BorderInlineStartStyle = Globals | DataType.LineStyle; - export type BorderInlineStartWidth = Globals | DataType.LineWidth; + export type BorderInlineStartWidth = + | Globals + | DataType.LineWidth; export type BorderInlineStyle = Globals | DataType.LineStyle; - export type BorderInlineWidth = Globals | DataType.LineWidth; + export type BorderInlineWidth = + | Globals + | DataType.LineWidth; - export type BorderLeft = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderLeft = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderLeftColor = Globals | DataType.Color; export type BorderLeftStyle = Globals | DataType.LineStyle; - export type BorderLeftWidth = Globals | DataType.LineWidth; + export type BorderLeftWidth = + | Globals + | DataType.LineWidth; - export type BorderRadius = Globals | TLength | (string & {}); + export type BorderRadius = + | Globals + | TLength + | (string & {}); - export type BorderRight = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderRight = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderRightColor = Globals | DataType.Color; export type BorderRightStyle = Globals | DataType.LineStyle; - export type BorderRightWidth = Globals | DataType.LineWidth; + export type BorderRightWidth = + | Globals + | DataType.LineWidth; - export type BorderSpacing = Globals | TLength | (string & {}); + export type BorderSpacing = + | Globals + | TLength + | (string & {}); - export type BorderStartEndRadius = Globals | TLength | (string & {}); + export type BorderStartEndRadius = + | Globals + | TLength + | (string & {}); - export type BorderStartStartRadius = Globals | TLength | (string & {}); + export type BorderStartStartRadius = + | Globals + | TLength + | (string & {}); export type BorderStyle = Globals | DataType.LineStyle | (string & {}); - export type BorderTop = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type BorderTop = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type BorderTopColor = Globals | DataType.Color; - export type BorderTopLeftRadius = Globals | TLength | (string & {}); + export type BorderTopLeftRadius = + | Globals + | TLength + | (string & {}); - export type BorderTopRightRadius = Globals | TLength | (string & {}); + export type BorderTopRightRadius = + | Globals + | TLength + | (string & {}); export type BorderTopStyle = Globals | DataType.LineStyle; - export type BorderTopWidth = Globals | DataType.LineWidth; + export type BorderTopWidth = + | Globals + | DataType.LineWidth; - export type BorderWidth = Globals | DataType.LineWidth | (string & {}); + export type BorderWidth = + | Globals + | DataType.LineWidth + | (string & {}); - export type Bottom = Globals | TLength | "auto" | (string & {}); + export type Bottom = + | Globals + | TLength + | "auto" + | (string & {}); - export type BoxAlign = Globals | "baseline" | "center" | "end" | "start" | "stretch"; + export type BoxAlign = + | Globals + | "baseline" + | "center" + | "end" + | "start" + | "stretch"; export type BoxDecorationBreak = Globals | "clone" | "slice"; @@ -19187,7 +19686,13 @@ export namespace Property { export type BoxOrdinalGroup = Globals | (number & {}) | (string & {}); - export type BoxOrient = Globals | "block-axis" | "horizontal" | "inherit" | "inline-axis" | "vertical"; + export type BoxOrient = + | Globals + | "block-axis" + | "horizontal" + | "inherit" + | "inline-axis" + | "vertical"; export type BoxPack = Globals | "center" | "end" | "justify" | "start"; @@ -19229,59 +19734,145 @@ export namespace Property { | "right" | "verso"; - export type BreakInside = Globals | "auto" | "avoid" | "avoid-column" | "avoid-page" | "avoid-region"; + export type BreakInside = + | Globals + | "auto" + | "avoid" + | "avoid-column" + | "avoid-page" + | "avoid-region"; - export type CaptionSide = Globals | "block-end" | "block-start" | "bottom" | "inline-end" | "inline-start" | "top"; + export type CaptionSide = + | Globals + | "block-end" + | "block-start" + | "bottom" + | "inline-end" + | "inline-start" + | "top"; - export type Caret = Globals | DataType.Color | "auto" | "bar" | "block" | "underscore" | (string & {}); + export type Caret = + | Globals + | DataType.Color + | "auto" + | "bar" + | "block" + | "underscore" + | (string & {}); export type CaretColor = Globals | DataType.Color | "auto"; export type CaretShape = Globals | "auto" | "bar" | "block" | "underscore"; - export type Clear = Globals | "both" | "inline-end" | "inline-start" | "left" | "none" | "right"; + export type Clear = + | Globals + | "both" + | "inline-end" + | "inline-start" + | "left" + | "none" + | "right"; export type Clip = Globals | "auto" | (string & {}); - export type ClipPath = Globals | DataType.GeometryBox | "none" | (string & {}); + export type ClipPath = + | Globals + | DataType.GeometryBox + | "none" + | (string & {}); export type Color = Globals | DataType.Color; export type PrintColorAdjust = Globals | "economy" | "exact"; - export type ColorScheme = Globals | "dark" | "light" | "normal" | (string & {}); + export type ColorScheme = + | Globals + | "dark" + | "light" + | "normal" + | (string & {}); export type ColumnCount = Globals | "auto" | (number & {}) | (string & {}); export type ColumnFill = Globals | "auto" | "balance" | "balance-all"; - export type ColumnGap = Globals | TLength | "normal" | (string & {}); + export type ColumnGap = + | Globals + | TLength + | "normal" + | (string & {}); - export type ColumnRule = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type ColumnRule = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type ColumnRuleColor = Globals | DataType.Color; export type ColumnRuleStyle = Globals | DataType.LineStyle | (string & {}); - export type ColumnRuleWidth = Globals | DataType.LineWidth | (string & {}); + export type ColumnRuleWidth = + | Globals + | DataType.LineWidth + | (string & {}); export type ColumnSpan = Globals | "all" | "none"; - export type ColumnWidth = Globals | TLength | "auto"; + export type ColumnWidth = + | Globals + | TLength + | "auto"; - export type Columns = Globals | TLength | "auto" | (string & {}) | (number & {}); + export type Columns = + | Globals + | TLength + | "auto" + | (string & {}) + | (number & {}); - export type Contain = Globals | "content" | "inline-size" | "layout" | "none" | "paint" | "size" | "strict" | "style" | (string & {}); + export type Contain = + | Globals + | "content" + | "inline-size" + | "layout" + | "none" + | "paint" + | "size" + | "strict" + | "style" + | (string & {}); - export type ContainIntrinsicBlockSize = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicBlockSize = + | Globals + | TLength + | "none" + | (string & {}); - export type ContainIntrinsicHeight = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicHeight = + | Globals + | TLength + | "none" + | (string & {}); - export type ContainIntrinsicInlineSize = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicInlineSize = + | Globals + | TLength + | "none" + | (string & {}); - export type ContainIntrinsicSize = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicSize = + | Globals + | TLength + | "none" + | (string & {}); - export type ContainIntrinsicWidth = Globals | TLength | "none" | (string & {}); + export type ContainIntrinsicWidth = + | Globals + | TLength + | "none" + | (string & {}); export type Container = Globals | "none" | (string & {}); @@ -19289,7 +19880,12 @@ export namespace Property { export type ContainerType = Globals | "inline-size" | "normal" | "size"; - export type Content = Globals | DataType.ContentList | "none" | "normal" | (string & {}); + export type Content = + | Globals + | DataType.ContentList + | "none" + | "normal" + | (string & {}); export type ContentVisibility = Globals | "auto" | "hidden" | "visible"; @@ -19358,7 +19954,17 @@ export namespace Property { export type Filter = Globals | "none" | (string & {}); - export type Flex = Globals | TLength | "auto" | "content" | "fit-content" | "max-content" | "min-content" | "none" | (string & {}) | (number & {}); + export type Flex = + | Globals + | TLength + | "auto" + | "content" + | "fit-content" + | "max-content" + | "min-content" + | "none" + | (string & {}) + | (number & {}); export type FlexBasis = | Globals @@ -19374,9 +19980,23 @@ export namespace Property { | "min-content" | (string & {}); - export type FlexDirection = Globals | "column" | "column-reverse" | "row" | "row-reverse"; + export type FlexDirection = + | Globals + | "column" + | "column-reverse" + | "row" + | "row-reverse"; - export type FlexFlow = Globals | "column" | "column-reverse" | "nowrap" | "row" | "row-reverse" | "wrap" | "wrap-reverse" | (string & {}); + export type FlexFlow = + | Globals + | "column" + | "column-reverse" + | "nowrap" + | "row" + | "row-reverse" + | "wrap" + | "wrap-reverse" + | (string & {}); export type FlexGrow = Globals | (number & {}) | (string & {}); @@ -19384,9 +20004,23 @@ export namespace Property { export type FlexWrap = Globals | "nowrap" | "wrap" | "wrap-reverse"; - export type Float = Globals | "inline-end" | "inline-start" | "left" | "none" | "right"; + export type Float = + | Globals + | "inline-end" + | "inline-start" + | "left" + | "none" + | "right"; - export type Font = Globals | "caption" | "icon" | "menu" | "message-box" | "small-caption" | "status-bar" | (string & {}); + export type Font = + | Globals + | "caption" + | "icon" + | "menu" + | "message-box" + | "small-caption" + | "status-bar" + | (string & {}); export type FontFamily = Globals | DataType.GenericFamily | (string & {}); @@ -19398,19 +20032,53 @@ export namespace Property { export type FontOpticalSizing = Globals | "auto" | "none"; - export type FontPalette = Globals | "dark" | "light" | "normal" | (string & {}); + export type FontPalette = + | Globals + | "dark" + | "light" + | "normal" + | (string & {}); - export type FontSize = Globals | DataType.AbsoluteSize | TLength | "larger" | "smaller" | (string & {}); + export type FontSize = + | Globals + | DataType.AbsoluteSize + | TLength + | "larger" + | "smaller" + | (string & {}); - export type FontSizeAdjust = Globals | "from-font" | "none" | (string & {}) | (number & {}); + export type FontSizeAdjust = + | Globals + | "from-font" + | "none" + | (string & {}) + | (number & {}); - export type FontSmooth = Globals | DataType.AbsoluteSize | TLength | "always" | "auto" | "never"; + export type FontSmooth = + | Globals + | DataType.AbsoluteSize + | TLength + | "always" + | "auto" + | "never"; export type FontStretch = Globals | DataType.FontStretchAbsolute; - export type FontStyle = Globals | "italic" | "normal" | "oblique" | (string & {}); + export type FontStyle = + | Globals + | "italic" + | "normal" + | "oblique" + | (string & {}); - export type FontSynthesis = Globals | "none" | "position" | "small-caps" | "style" | "weight" | (string & {}); + export type FontSynthesis = + | Globals + | "none" + | "position" + | "small-caps" + | "style" + | "weight" + | (string & {}); export type FontSynthesisPosition = Globals | "auto" | "none"; @@ -19453,13 +20121,37 @@ export namespace Property { | "unicase" | (string & {}); - export type FontVariantAlternates = Globals | "historical-forms" | "normal" | (string & {}); + export type FontVariantAlternates = + | Globals + | "historical-forms" + | "normal" + | (string & {}); - export type FontVariantCaps = Globals | "all-petite-caps" | "all-small-caps" | "normal" | "petite-caps" | "small-caps" | "titling-caps" | "unicase"; + export type FontVariantCaps = + | Globals + | "all-petite-caps" + | "all-small-caps" + | "normal" + | "petite-caps" + | "small-caps" + | "titling-caps" + | "unicase"; - export type FontVariantEastAsian = Globals | DataType.EastAsianVariantValues | "full-width" | "normal" | "proportional-width" | "ruby" | (string & {}); + export type FontVariantEastAsian = + | Globals + | DataType.EastAsianVariantValues + | "full-width" + | "normal" + | "proportional-width" + | "ruby" + | (string & {}); - export type FontVariantEmoji = Globals | "emoji" | "normal" | "text" | "unicode"; + export type FontVariantEmoji = + | Globals + | "emoji" + | "normal" + | "text" + | "unicode"; export type FontVariantLigatures = | Globals @@ -19492,37 +20184,65 @@ export namespace Property { export type FontVariationSettings = Globals | "normal" | (string & {}); - export type FontWeight = Globals | DataType.FontWeightAbsolute | "bolder" | "lighter"; + export type FontWeight = + | Globals + | DataType.FontWeightAbsolute + | "bolder" + | "lighter"; export type ForcedColorAdjust = Globals | "auto" | "none"; - export type Gap = Globals | TLength | "normal" | (string & {}); + export type Gap = + | Globals + | TLength + | "normal" + | (string & {}); export type Grid = Globals | "none" | (string & {}); export type GridArea = Globals | DataType.GridLine | (string & {}); - export type GridAutoColumns = Globals | DataType.TrackBreadth | (string & {}); + export type GridAutoColumns = + | Globals + | DataType.TrackBreadth + | (string & {}); - export type GridAutoFlow = Globals | "column" | "dense" | "row" | (string & {}); + export type GridAutoFlow = + | Globals + | "column" + | "dense" + | "row" + | (string & {}); - export type GridAutoRows = Globals | DataType.TrackBreadth | (string & {}); + export type GridAutoRows = + | Globals + | DataType.TrackBreadth + | (string & {}); export type GridColumn = Globals | DataType.GridLine | (string & {}); export type GridColumnEnd = Globals | DataType.GridLine; - export type GridColumnGap = Globals | TLength | (string & {}); + export type GridColumnGap = + | Globals + | TLength + | (string & {}); export type GridColumnStart = Globals | DataType.GridLine; - export type GridGap = Globals | TLength | (string & {}); + export type GridGap = + | Globals + | TLength + | (string & {}); export type GridRow = Globals | DataType.GridLine | (string & {}); export type GridRowEnd = Globals | DataType.GridLine; - export type GridRowGap = Globals | TLength | (string & {}); + export type GridRowGap = + | Globals + | TLength + | (string & {}); export type GridRowStart = Globals | DataType.GridLine; @@ -19530,11 +20250,28 @@ export namespace Property { export type GridTemplateAreas = Globals | "none" | (string & {}); - export type GridTemplateColumns = Globals | DataType.TrackBreadth | "none" | "subgrid" | (string & {}); + export type GridTemplateColumns = + | Globals + | DataType.TrackBreadth + | "none" + | "subgrid" + | (string & {}); - export type GridTemplateRows = Globals | DataType.TrackBreadth | "none" | "subgrid" | (string & {}); + export type GridTemplateRows = + | Globals + | DataType.TrackBreadth + | "none" + | "subgrid" + | (string & {}); - export type HangingPunctuation = Globals | "allow-end" | "first" | "force-end" | "last" | "none" | (string & {}); + export type HangingPunctuation = + | Globals + | "allow-end" + | "first" + | "force-end" + | "last" + | "none" + | (string & {}); export type Height = | Globals @@ -19550,19 +20287,43 @@ export namespace Property { export type HyphenateCharacter = Globals | "auto" | (string & {}); - export type HyphenateLimitChars = Globals | "auto" | (string & {}) | (number & {}); + export type HyphenateLimitChars = + | Globals + | "auto" + | (string & {}) + | (number & {}); export type Hyphens = Globals | "auto" | "manual" | "none"; - export type ImageOrientation = Globals | "flip" | "from-image" | (string & {}); + export type ImageOrientation = + | Globals + | "flip" + | "from-image" + | (string & {}); - export type ImageRendering = Globals | "-moz-crisp-edges" | "-webkit-optimize-contrast" | "auto" | "crisp-edges" | "pixelated"; + export type ImageRendering = + | Globals + | "-moz-crisp-edges" + | "-webkit-optimize-contrast" + | "auto" + | "crisp-edges" + | "pixelated"; export type ImageResolution = Globals | "from-image" | (string & {}); - export type ImeMode = Globals | "active" | "auto" | "disabled" | "inactive" | "normal"; + export type ImeMode = + | Globals + | "active" + | "auto" + | "disabled" + | "inactive" + | "normal"; - export type InitialLetter = Globals | "normal" | (string & {}) | (number & {}); + export type InitialLetter = + | Globals + | "normal" + | (string & {}) + | (number & {}); export type InlineSize = | Globals @@ -19579,43 +20340,126 @@ export namespace Property { export type InputSecurity = Globals | "auto" | "none"; - export type Inset = Globals | TLength | "auto" | (string & {}); + export type Inset = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetBlock = Globals | TLength | "auto" | (string & {}); + export type InsetBlock = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetBlockEnd = Globals | TLength | "auto" | (string & {}); + export type InsetBlockEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetBlockStart = Globals | TLength | "auto" | (string & {}); + export type InsetBlockStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetInline = Globals | TLength | "auto" | (string & {}); + export type InsetInline = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetInlineEnd = Globals | TLength | "auto" | (string & {}); + export type InsetInlineEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type InsetInlineStart = Globals | TLength | "auto" | (string & {}); + export type InsetInlineStart = + | Globals + | TLength + | "auto" + | (string & {}); export type Isolation = Globals | "auto" | "isolate"; - export type JustifyContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "left" | "normal" | "right" | (string & {}); + export type JustifyContent = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "left" + | "normal" + | "right" + | (string & {}); - export type JustifyItems = Globals | DataType.SelfPosition | "baseline" | "left" | "legacy" | "normal" | "right" | "stretch" | (string & {}); + export type JustifyItems = + | Globals + | DataType.SelfPosition + | "baseline" + | "left" + | "legacy" + | "normal" + | "right" + | "stretch" + | (string & {}); - export type JustifySelf = Globals | DataType.SelfPosition | "auto" | "baseline" | "left" | "normal" | "right" | "stretch" | (string & {}); + export type JustifySelf = + | Globals + | DataType.SelfPosition + | "auto" + | "baseline" + | "left" + | "normal" + | "right" + | "stretch" + | (string & {}); - export type JustifyTracks = Globals | DataType.ContentDistribution | DataType.ContentPosition | "left" | "normal" | "right" | (string & {}); + export type JustifyTracks = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "left" + | "normal" + | "right" + | (string & {}); - export type Left = Globals | TLength | "auto" | (string & {}); + export type Left = + | Globals + | TLength + | "auto" + | (string & {}); - export type LetterSpacing = Globals | TLength | "normal"; + export type LetterSpacing = + | Globals + | TLength + | "normal"; - export type LineBreak = Globals | "anywhere" | "auto" | "loose" | "normal" | "strict"; + export type LineBreak = + | Globals + | "anywhere" + | "auto" + | "loose" + | "normal" + | "strict"; export type LineClamp = Globals | "none" | (number & {}) | (string & {}); - export type LineHeight = Globals | TLength | "normal" | (string & {}) | (number & {}); + export type LineHeight = + | Globals + | TLength + | "normal" + | (string & {}) + | (number & {}); export type LineHeightStep = Globals | TLength; - export type ListStyle = Globals | "inside" | "none" | "outside" | (string & {}); + export type ListStyle = + | Globals + | "inside" + | "none" + | "outside" + | (string & {}); export type ListStyleImage = Globals | "none" | (string & {}); @@ -19623,49 +20467,128 @@ export namespace Property { export type ListStyleType = Globals | "none" | (string & {}); - export type Margin = Globals | TLength | "auto" | (string & {}); + export type Margin = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginBlock = Globals | TLength | "auto" | (string & {}); + export type MarginBlock = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginBlockEnd = Globals | TLength | "auto" | (string & {}); + export type MarginBlockEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginBlockStart = Globals | TLength | "auto" | (string & {}); + export type MarginBlockStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginBottom = Globals | TLength | "auto" | (string & {}); + export type MarginBottom = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginInline = Globals | TLength | "auto" | (string & {}); + export type MarginInline = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginInlineEnd = Globals | TLength | "auto" | (string & {}); + export type MarginInlineEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginInlineStart = Globals | TLength | "auto" | (string & {}); + export type MarginInlineStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginLeft = Globals | TLength | "auto" | (string & {}); + export type MarginLeft = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginRight = Globals | TLength | "auto" | (string & {}); + export type MarginRight = + | Globals + | TLength + | "auto" + | (string & {}); - export type MarginTop = Globals | TLength | "auto" | (string & {}); + export type MarginTop = + | Globals + | TLength + | "auto" + | (string & {}); export type MarginTrim = Globals | "all" | "in-flow" | "none"; - export type Mask = Globals | DataType.MaskLayer | (string & {}); + export type Mask = + | Globals + | DataType.MaskLayer + | (string & {}); - export type MaskBorder = Globals | "alpha" | "luminance" | "none" | "repeat" | "round" | "space" | "stretch" | (string & {}) | (number & {}); + export type MaskBorder = + | Globals + | "alpha" + | "luminance" + | "none" + | "repeat" + | "round" + | "space" + | "stretch" + | (string & {}) + | (number & {}); export type MaskBorderMode = Globals | "alpha" | "luminance"; - export type MaskBorderOutset = Globals | TLength | (string & {}) | (number & {}); + export type MaskBorderOutset = + | Globals + | TLength + | (string & {}) + | (number & {}); - export type MaskBorderRepeat = Globals | "repeat" | "round" | "space" | "stretch" | (string & {}); + export type MaskBorderRepeat = + | Globals + | "repeat" + | "round" + | "space" + | "stretch" + | (string & {}); export type MaskBorderSlice = Globals | (string & {}) | (number & {}); export type MaskBorderSource = Globals | "none" | (string & {}); - export type MaskBorderWidth = Globals | TLength | "auto" | (string & {}) | (number & {}); + export type MaskBorderWidth = + | Globals + | TLength + | "auto" + | (string & {}) + | (number & {}); - export type MaskClip = Globals | DataType.GeometryBox | "no-clip" | (string & {}); + export type MaskClip = + | Globals + | DataType.GeometryBox + | "no-clip" + | (string & {}); - export type MaskComposite = Globals | DataType.CompositingOperator | (string & {}); + export type MaskComposite = + | Globals + | DataType.CompositingOperator + | (string & {}); export type MaskImage = Globals | "none" | (string & {}); @@ -19673,15 +20596,27 @@ export namespace Property { export type MaskOrigin = Globals | DataType.GeometryBox | (string & {}); - export type MaskPosition = Globals | DataType.Position | (string & {}); + export type MaskPosition = + | Globals + | DataType.Position + | (string & {}); export type MaskRepeat = Globals | DataType.RepeatStyle | (string & {}); - export type MaskSize = Globals | DataType.BgSize | (string & {}); + export type MaskSize = + | Globals + | DataType.BgSize + | (string & {}); export type MaskType = Globals | "alpha" | "luminance"; - export type MasonryAutoFlow = Globals | "definite-first" | "next" | "ordered" | "pack" | (string & {}); + export type MasonryAutoFlow = + | Globals + | "definite-first" + | "next" + | "ordered" + | "pack" + | (string & {}); export type MathDepth = Globals | "auto-add" | (string & {}) | (number & {}); @@ -19809,21 +20744,45 @@ export namespace Property { export type MixBlendMode = Globals | DataType.BlendMode | "plus-lighter"; - export type Offset = Globals | DataType.Position | "auto" | "none" | "normal" | (string & {}); + export type Offset = + | Globals + | DataType.Position + | "auto" + | "none" + | "normal" + | (string & {}); - export type OffsetDistance = Globals | TLength | (string & {}); + export type OffsetDistance = + | Globals + | TLength + | (string & {}); export type OffsetPath = Globals | "none" | (string & {}); export type OffsetRotate = Globals | "auto" | "reverse" | (string & {}); - export type ObjectFit = Globals | "contain" | "cover" | "fill" | "none" | "scale-down"; + export type ObjectFit = + | Globals + | "contain" + | "cover" + | "fill" + | "none" + | "scale-down"; - export type ObjectPosition = Globals | DataType.Position; + export type ObjectPosition = + | Globals + | DataType.Position; - export type OffsetAnchor = Globals | DataType.Position | "auto"; + export type OffsetAnchor = + | Globals + | DataType.Position + | "auto"; - export type OffsetPosition = Globals | DataType.Position | "auto" | "normal"; + export type OffsetPosition = + | Globals + | DataType.Position + | "auto" + | "normal"; export type Opacity = Globals | (string & {}) | (number & {}); @@ -19831,37 +20790,93 @@ export namespace Property { export type Orphans = Globals | (number & {}) | (string & {}); - export type Outline = Globals | DataType.Color | DataType.LineStyle | DataType.LineWidth | "auto" | "invert" | (string & {}); + export type Outline = + | Globals + | DataType.Color + | DataType.LineStyle + | DataType.LineWidth + | "auto" + | "invert" + | (string & {}); export type OutlineColor = Globals | DataType.Color | "invert"; export type OutlineOffset = Globals | TLength; - export type OutlineStyle = Globals | DataType.LineStyle | "auto" | (string & {}); + export type OutlineStyle = + | Globals + | DataType.LineStyle + | "auto" + | (string & {}); - export type OutlineWidth = Globals | DataType.LineWidth; + export type OutlineWidth = + | Globals + | DataType.LineWidth; - export type Overflow = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible" | (string & {}); + export type Overflow = + | Globals + | "-moz-hidden-unscrollable" + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible" + | (string & {}); export type OverflowAnchor = Globals | "auto" | "none"; - export type OverflowBlock = Globals | "auto" | "clip" | "hidden" | "scroll" | "visible"; + export type OverflowBlock = + | Globals + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible"; export type OverflowClipBox = Globals | "content-box" | "padding-box"; - export type OverflowClipMargin = Globals | DataType.VisualBox | TLength | (string & {}); + export type OverflowClipMargin = + | Globals + | DataType.VisualBox + | TLength + | (string & {}); - export type OverflowInline = Globals | "auto" | "clip" | "hidden" | "scroll" | "visible"; + export type OverflowInline = + | Globals + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible"; export type OverflowWrap = Globals | "anywhere" | "break-word" | "normal"; - export type OverflowX = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible"; + export type OverflowX = + | Globals + | "-moz-hidden-unscrollable" + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible"; - export type OverflowY = Globals | "-moz-hidden-unscrollable" | "auto" | "clip" | "hidden" | "scroll" | "visible"; + export type OverflowY = + | Globals + | "-moz-hidden-unscrollable" + | "auto" + | "clip" + | "hidden" + | "scroll" + | "visible"; export type Overlay = Globals | "auto" | "none"; - export type OverscrollBehavior = Globals | "auto" | "contain" | "none" | (string & {}); + export type OverscrollBehavior = + | Globals + | "auto" + | "contain" + | "none" + | (string & {}); export type OverscrollBehaviorBlock = Globals | "auto" | "contain" | "none"; @@ -19871,121 +20886,322 @@ export namespace Property { export type OverscrollBehaviorY = Globals | "auto" | "contain" | "none"; - export type Padding = Globals | TLength | (string & {}); + export type Padding = + | Globals + | TLength + | (string & {}); - export type PaddingBlock = Globals | TLength | (string & {}); + export type PaddingBlock = + | Globals + | TLength + | (string & {}); - export type PaddingBlockEnd = Globals | TLength | (string & {}); + export type PaddingBlockEnd = + | Globals + | TLength + | (string & {}); - export type PaddingBlockStart = Globals | TLength | (string & {}); + export type PaddingBlockStart = + | Globals + | TLength + | (string & {}); - export type PaddingBottom = Globals | TLength | (string & {}); + export type PaddingBottom = + | Globals + | TLength + | (string & {}); - export type PaddingInline = Globals | TLength | (string & {}); + export type PaddingInline = + | Globals + | TLength + | (string & {}); - export type PaddingInlineEnd = Globals | TLength | (string & {}); + export type PaddingInlineEnd = + | Globals + | TLength + | (string & {}); - export type PaddingInlineStart = Globals | TLength | (string & {}); + export type PaddingInlineStart = + | Globals + | TLength + | (string & {}); - export type PaddingLeft = Globals | TLength | (string & {}); + export type PaddingLeft = + | Globals + | TLength + | (string & {}); - export type PaddingRight = Globals | TLength | (string & {}); + export type PaddingRight = + | Globals + | TLength + | (string & {}); - export type PaddingTop = Globals | TLength | (string & {}); + export type PaddingTop = + | Globals + | TLength + | (string & {}); export type Page = Globals | "auto" | (string & {}); - export type PageBreakAfter = Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso"; + export type PageBreakAfter = + | Globals + | "always" + | "auto" + | "avoid" + | "left" + | "recto" + | "right" + | "verso"; - export type PageBreakBefore = Globals | "always" | "auto" | "avoid" | "left" | "recto" | "right" | "verso"; + export type PageBreakBefore = + | Globals + | "always" + | "auto" + | "avoid" + | "left" + | "recto" + | "right" + | "verso"; export type PageBreakInside = Globals | "auto" | "avoid"; - export type PaintOrder = Globals | "fill" | "markers" | "normal" | "stroke" | (string & {}); - - export type Perspective = Globals | TLength | "none"; + export type PaintOrder = + | Globals + | "fill" + | "markers" + | "normal" + | "stroke" + | (string & {}); - export type PerspectiveOrigin = Globals | DataType.Position; + export type Perspective = + | Globals + | TLength + | "none"; - export type PlaceContent = Globals | DataType.ContentDistribution | DataType.ContentPosition | "baseline" | "normal" | (string & {}); + export type PerspectiveOrigin = + | Globals + | DataType.Position; - export type PlaceItems = Globals | DataType.SelfPosition | "baseline" | "normal" | "stretch" | (string & {}); + export type PlaceContent = + | Globals + | DataType.ContentDistribution + | DataType.ContentPosition + | "baseline" + | "normal" + | (string & {}); - export type PlaceSelf = Globals | DataType.SelfPosition | "auto" | "baseline" | "normal" | "stretch" | (string & {}); + export type PlaceItems = + | Globals + | DataType.SelfPosition + | "baseline" + | "normal" + | "stretch" + | (string & {}); - export type PointerEvents = Globals | "all" | "auto" | "fill" | "inherit" | "none" | "painted" | "stroke" | "visible" | "visibleFill" | "visiblePainted" | "visibleStroke"; + export type PlaceSelf = + | Globals + | DataType.SelfPosition + | "auto" + | "baseline" + | "normal" + | "stretch" + | (string & {}); - export type Position = Globals | "-webkit-sticky" | "absolute" | "fixed" | "relative" | "static" | "sticky"; + export type PointerEvents = + | Globals + | "all" + | "auto" + | "fill" + | "inherit" + | "none" + | "painted" + | "stroke" + | "visible" + | "visibleFill" + | "visiblePainted" + | "visibleStroke"; + + export type Position = + | Globals + | "-webkit-sticky" + | "absolute" + | "fixed" + | "relative" + | "static" + | "sticky"; export type Quotes = Globals | "auto" | "none" | (string & {}); - export type Resize = Globals | "block" | "both" | "horizontal" | "inline" | "none" | "vertical"; + export type Resize = + | Globals + | "block" + | "both" + | "horizontal" + | "inline" + | "none" + | "vertical"; - export type Right = Globals | TLength | "auto" | (string & {}); + export type Right = + | Globals + | TLength + | "auto" + | (string & {}); export type Rotate = Globals | "none" | (string & {}); - export type RowGap = Globals | TLength | "normal" | (string & {}); + export type RowGap = + | Globals + | TLength + | "normal" + | (string & {}); - export type RubyAlign = Globals | "center" | "space-around" | "space-between" | "start"; + export type RubyAlign = + | Globals + | "center" + | "space-around" + | "space-between" + | "start"; export type RubyMerge = Globals | "auto" | "collapse" | "separate"; - export type RubyPosition = Globals | "alternate" | "inter-character" | "over" | "under" | (string & {}); + export type RubyPosition = + | Globals + | "alternate" + | "inter-character" + | "over" + | "under" + | (string & {}); export type Scale = Globals | "none" | (string & {}) | (number & {}); export type ScrollBehavior = Globals | "auto" | "smooth"; - export type ScrollMargin = Globals | TLength | (string & {}); + export type ScrollMargin = + | Globals + | TLength + | (string & {}); - export type ScrollMarginBlock = Globals | TLength | (string & {}); + export type ScrollMarginBlock = + | Globals + | TLength + | (string & {}); - export type ScrollMarginBlockEnd = Globals | TLength; + export type ScrollMarginBlockEnd = + | Globals + | TLength; - export type ScrollMarginBlockStart = Globals | TLength; + export type ScrollMarginBlockStart = + | Globals + | TLength; - export type ScrollMarginBottom = Globals | TLength; + export type ScrollMarginBottom = + | Globals + | TLength; - export type ScrollMarginInline = Globals | TLength | (string & {}); + export type ScrollMarginInline = + | Globals + | TLength + | (string & {}); - export type ScrollMarginInlineEnd = Globals | TLength; + export type ScrollMarginInlineEnd = + | Globals + | TLength; - export type ScrollMarginInlineStart = Globals | TLength; + export type ScrollMarginInlineStart = + | Globals + | TLength; export type ScrollMarginLeft = Globals | TLength; - export type ScrollMarginRight = Globals | TLength; + export type ScrollMarginRight = + | Globals + | TLength; export type ScrollMarginTop = Globals | TLength; - export type ScrollPadding = Globals | TLength | "auto" | (string & {}); + export type ScrollPadding = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingBlock = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingBlock = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingBlockEnd = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingBlockEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingBlockStart = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingBlockStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingBottom = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingBottom = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingInline = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingInline = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingInlineEnd = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingInlineEnd = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingInlineStart = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingInlineStart = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingLeft = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingLeft = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingRight = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingRight = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollPaddingTop = Globals | TLength | "auto" | (string & {}); + export type ScrollPaddingTop = + | Globals + | TLength + | "auto" + | (string & {}); - export type ScrollSnapAlign = Globals | "center" | "end" | "none" | "start" | (string & {}); + export type ScrollSnapAlign = + | Globals + | "center" + | "end" + | "none" + | "start" + | (string & {}); - export type ScrollSnapCoordinate = Globals | DataType.Position | "none" | (string & {}); + export type ScrollSnapCoordinate = + | Globals + | DataType.Position + | "none" + | (string & {}); - export type ScrollSnapDestination = Globals | DataType.Position; + export type ScrollSnapDestination = + | Globals + | DataType.Position; export type ScrollSnapPointsX = Globals | "none" | (string & {}); @@ -19993,7 +21209,15 @@ export namespace Property { export type ScrollSnapStop = Globals | "always" | "normal"; - export type ScrollSnapType = Globals | "block" | "both" | "inline" | "none" | "x" | "y" | (string & {}); + export type ScrollSnapType = + | Globals + | "block" + | "both" + | "inline" + | "none" + | "x" + | "y" + | (string & {}); export type ScrollSnapTypeX = Globals | "mandatory" | "none" | "proximity"; @@ -20001,7 +21225,13 @@ export namespace Property { export type ScrollTimeline = Globals | "none" | (string & {}); - export type ScrollTimelineAxis = Globals | "block" | "inline" | "x" | "y" | (string & {}); + export type ScrollTimelineAxis = + | Globals + | "block" + | "inline" + | "x" + | "y" + | (string & {}); export type ScrollTimelineName = Globals | "none" | (string & {}); @@ -20013,17 +21243,46 @@ export namespace Property { export type ShapeImageThreshold = Globals | (string & {}) | (number & {}); - export type ShapeMargin = Globals | TLength | (string & {}); + export type ShapeMargin = + | Globals + | TLength + | (string & {}); - export type ShapeOutside = Globals | DataType.Box | "margin-box" | "none" | (string & {}); + export type ShapeOutside = + | Globals + | DataType.Box + | "margin-box" + | "none" + | (string & {}); - export type TabSize = Globals | TLength | (number & {}) | (string & {}); + export type TabSize = + | Globals + | TLength + | (number & {}) + | (string & {}); export type TableLayout = Globals | "auto" | "fixed"; - export type TextAlign = Globals | "-webkit-match-parent" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start"; + export type TextAlign = + | Globals + | "-webkit-match-parent" + | "center" + | "end" + | "justify" + | "left" + | "match-parent" + | "right" + | "start"; - export type TextAlignLast = Globals | "auto" | "center" | "end" | "justify" | "left" | "right" | "start"; + export type TextAlignLast = + | Globals + | "auto" + | "center" + | "end" + | "justify" + | "left" + | "right" + | "start"; export type TextCombineUpright = Globals | "all" | "none" | (string & {}); @@ -20049,49 +21308,140 @@ export namespace Property { export type TextDecorationColor = Globals | DataType.Color; - export type TextDecorationLine = Globals | "blink" | "grammar-error" | "line-through" | "none" | "overline" | "spelling-error" | "underline" | (string & {}); + export type TextDecorationLine = + | Globals + | "blink" + | "grammar-error" + | "line-through" + | "none" + | "overline" + | "spelling-error" + | "underline" + | (string & {}); - export type TextDecorationSkip = Globals | "box-decoration" | "edges" | "leading-spaces" | "none" | "objects" | "spaces" | "trailing-spaces" | (string & {}); + export type TextDecorationSkip = + | Globals + | "box-decoration" + | "edges" + | "leading-spaces" + | "none" + | "objects" + | "spaces" + | "trailing-spaces" + | (string & {}); export type TextDecorationSkipInk = Globals | "all" | "auto" | "none"; - export type TextDecorationStyle = Globals | "dashed" | "dotted" | "double" | "solid" | "wavy"; + export type TextDecorationStyle = + | Globals + | "dashed" + | "dotted" + | "double" + | "solid" + | "wavy"; - export type TextDecorationThickness = Globals | TLength | "auto" | "from-font" | (string & {}); + export type TextDecorationThickness = + | Globals + | TLength + | "auto" + | "from-font" + | (string & {}); - export type TextEmphasis = Globals | DataType.Color | "circle" | "dot" | "double-circle" | "filled" | "none" | "open" | "sesame" | "triangle" | (string & {}); + export type TextEmphasis = + | Globals + | DataType.Color + | "circle" + | "dot" + | "double-circle" + | "filled" + | "none" + | "open" + | "sesame" + | "triangle" + | (string & {}); export type TextEmphasisColor = Globals | DataType.Color; export type TextEmphasisPosition = Globals | (string & {}); - export type TextEmphasisStyle = Globals | "circle" | "dot" | "double-circle" | "filled" | "none" | "open" | "sesame" | "triangle" | (string & {}); + export type TextEmphasisStyle = + | Globals + | "circle" + | "dot" + | "double-circle" + | "filled" + | "none" + | "open" + | "sesame" + | "triangle" + | (string & {}); - export type TextIndent = Globals | TLength | (string & {}); + export type TextIndent = + | Globals + | TLength + | (string & {}); - export type TextJustify = Globals | "auto" | "inter-character" | "inter-word" | "none"; + export type TextJustify = + | Globals + | "auto" + | "inter-character" + | "inter-word" + | "none"; export type TextOrientation = Globals | "mixed" | "sideways" | "upright"; export type TextOverflow = Globals | "clip" | "ellipsis" | (string & {}); - export type TextRendering = Globals | "auto" | "geometricPrecision" | "optimizeLegibility" | "optimizeSpeed"; + export type TextRendering = + | Globals + | "auto" + | "geometricPrecision" + | "optimizeLegibility" + | "optimizeSpeed"; export type TextShadow = Globals | "none" | (string & {}); export type TextSizeAdjust = Globals | "auto" | "none" | (string & {}); - export type TextTransform = Globals | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "none" | "uppercase"; + export type TextTransform = + | Globals + | "capitalize" + | "full-size-kana" + | "full-width" + | "lowercase" + | "none" + | "uppercase"; - export type TextUnderlineOffset = Globals | TLength | "auto" | (string & {}); + export type TextUnderlineOffset = + | Globals + | TLength + | "auto" + | (string & {}); - export type TextUnderlinePosition = Globals | "auto" | "from-font" | "left" | "right" | "under" | (string & {}); + export type TextUnderlinePosition = + | Globals + | "auto" + | "from-font" + | "left" + | "right" + | "under" + | (string & {}); - export type TextWrap = Globals | "balance" | "nowrap" | "pretty" | "stable" | "wrap"; + export type TextWrap = + | Globals + | "balance" + | "nowrap" + | "pretty" + | "stable" + | "wrap"; export type TimelineScope = Globals | "none" | (string & {}); - export type Top = Globals | TLength | "auto" | (string & {}); + export type Top = + | Globals + | TLength + | "auto" + | (string & {}); export type TouchAction = | Globals @@ -20112,25 +21462,59 @@ export namespace Property { export type Transform = Globals | "none" | (string & {}); - export type TransformBox = Globals | "border-box" | "content-box" | "fill-box" | "stroke-box" | "view-box"; + export type TransformBox = + | Globals + | "border-box" + | "content-box" + | "fill-box" + | "stroke-box" + | "view-box"; - export type TransformOrigin = Globals | TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {}); + export type TransformOrigin = + | Globals + | TLength + | "bottom" + | "center" + | "left" + | "right" + | "top" + | (string & {}); export type TransformStyle = Globals | "flat" | "preserve-3d"; - export type Transition = Globals | DataType.SingleTransition | (string & {}); + export type Transition = + | Globals + | DataType.SingleTransition + | (string & {}); - export type TransitionBehavior = Globals | "allow-discrete" | "normal" | (string & {}); + export type TransitionBehavior = + | Globals + | "allow-discrete" + | "normal" + | (string & {}); - export type TransitionDelay = Globals | TTime | (string & {}); + export type TransitionDelay = + | Globals + | TTime + | (string & {}); - export type TransitionDuration = Globals | TTime | (string & {}); + export type TransitionDuration = + | Globals + | TTime + | (string & {}); export type TransitionProperty = Globals | "all" | "none" | (string & {}); - export type TransitionTimingFunction = Globals | DataType.EasingFunction | (string & {}); + export type TransitionTimingFunction = + | Globals + | DataType.EasingFunction + | (string & {}); - export type Translate = Globals | TLength | "none" | (string & {}); + export type Translate = + | Globals + | TLength + | "none" + | (string & {}); export type UnicodeBidi = | Globals @@ -20147,7 +21531,15 @@ export namespace Property { | "normal" | "plaintext"; - export type UserSelect = Globals | "-moz-none" | "all" | "auto" | "contain" | "element" | "none" | "text"; + export type UserSelect = + | Globals + | "-moz-none" + | "all" + | "auto" + | "contain" + | "element" + | "none" + | "text"; export type VerticalAlign = | Globals @@ -20164,9 +21556,19 @@ export namespace Property { export type ViewTimeline = Globals | "none" | (string & {}); - export type ViewTimelineAxis = Globals | "block" | "inline" | "x" | "y" | (string & {}); + export type ViewTimelineAxis = + | Globals + | "block" + | "inline" + | "x" + | "y" + | (string & {}); - export type ViewTimelineInset = Globals | TLength | "auto" | (string & {}); + export type ViewTimelineInset = + | Globals + | TLength + | "auto" + | (string & {}); export type ViewTimelineName = Globals | "none" | (string & {}); @@ -20198,9 +21600,22 @@ export namespace Property { | "wrap" | (string & {}); - export type WhiteSpaceCollapse = Globals | "break-spaces" | "collapse" | "discard" | "preserve" | "preserve-breaks" | "preserve-spaces"; + export type WhiteSpaceCollapse = + | Globals + | "break-spaces" + | "collapse" + | "discard" + | "preserve" + | "preserve-breaks" + | "preserve-spaces"; - export type WhiteSpaceTrim = Globals | "discard-after" | "discard-before" | "discard-inner" | "none" | (string & {}); + export type WhiteSpaceTrim = + | Globals + | "discard-after" + | "discard-before" + | "discard-inner" + | "none" + | (string & {}); export type Widows = Globals | (number & {}) | (string & {}); @@ -20220,19 +21635,42 @@ export namespace Property { | "min-intrinsic" | (string & {}); - export type WillChange = Globals | DataType.AnimateableFeature | "auto" | (string & {}); + export type WillChange = + | Globals + | DataType.AnimateableFeature + | "auto" + | (string & {}); - export type WordBreak = Globals | "break-all" | "break-word" | "keep-all" | "normal"; + export type WordBreak = + | Globals + | "break-all" + | "break-word" + | "keep-all" + | "normal"; - export type WordSpacing = Globals | TLength | "normal"; + export type WordSpacing = + | Globals + | TLength + | "normal"; export type WordWrap = Globals | "break-word" | "normal"; - export type WritingMode = Globals | "horizontal-tb" | "sideways-lr" | "sideways-rl" | "vertical-lr" | "vertical-rl"; + export type WritingMode = + | Globals + | "horizontal-tb" + | "sideways-lr" + | "sideways-rl" + | "vertical-lr" + | "vertical-rl"; export type ZIndex = Globals | "auto" | (number & {}) | (string & {}); - export type Zoom = Globals | "normal" | "reset" | (string & {}) | (number & {}); + export type Zoom = + | Globals + | "normal" + | "reset" + | (string & {}) + | (number & {}); export type MozAppearance = | Globals @@ -20349,47 +21787,114 @@ export namespace Property { export type MozBinding = Globals | "none" | (string & {}); - export type MozBorderBottomColors = Globals | DataType.Color | "none" | (string & {}); + export type MozBorderBottomColors = + | Globals + | DataType.Color + | "none" + | (string & {}); - export type MozBorderLeftColors = Globals | DataType.Color | "none" | (string & {}); + export type MozBorderLeftColors = + | Globals + | DataType.Color + | "none" + | (string & {}); - export type MozBorderRightColors = Globals | DataType.Color | "none" | (string & {}); + export type MozBorderRightColors = + | Globals + | DataType.Color + | "none" + | (string & {}); - export type MozBorderTopColors = Globals | DataType.Color | "none" | (string & {}); + export type MozBorderTopColors = + | Globals + | DataType.Color + | "none" + | (string & {}); - export type MozContextProperties = Globals | "fill" | "fill-opacity" | "none" | "stroke" | "stroke-opacity" | (string & {}); + export type MozContextProperties = + | Globals + | "fill" + | "fill-opacity" + | "none" + | "stroke" + | "stroke-opacity" + | (string & {}); - export type MozFloatEdge = Globals | "border-box" | "content-box" | "margin-box" | "padding-box"; + export type MozFloatEdge = + | Globals + | "border-box" + | "content-box" + | "margin-box" + | "padding-box"; export type MozForceBrokenImageIcon = Globals | 0 | (string & {}) | 1; export type MozImageRegion = Globals | "auto" | (string & {}); - export type MozOrient = Globals | "block" | "horizontal" | "inline" | "vertical"; + export type MozOrient = + | Globals + | "block" + | "horizontal" + | "inline" + | "vertical"; - export type MozOutlineRadius = Globals | TLength | (string & {}); + export type MozOutlineRadius = + | Globals + | TLength + | (string & {}); - export type MozOutlineRadiusBottomleft = Globals | TLength | (string & {}); + export type MozOutlineRadiusBottomleft = + | Globals + | TLength + | (string & {}); - export type MozOutlineRadiusBottomright = Globals | TLength | (string & {}); + export type MozOutlineRadiusBottomright = + | Globals + | TLength + | (string & {}); - export type MozOutlineRadiusTopleft = Globals | TLength | (string & {}); + export type MozOutlineRadiusTopleft = + | Globals + | TLength + | (string & {}); - export type MozOutlineRadiusTopright = Globals | TLength | (string & {}); + export type MozOutlineRadiusTopright = + | Globals + | TLength + | (string & {}); export type MozStackSizing = Globals | "ignore" | "stretch-to-fit"; export type MozTextBlink = Globals | "blink" | "none"; - export type MozUserFocus = Globals | "ignore" | "none" | "normal" | "select-after" | "select-all" | "select-before" | "select-menu" | "select-same"; + export type MozUserFocus = + | Globals + | "ignore" + | "none" + | "normal" + | "select-after" + | "select-all" + | "select-before" + | "select-menu" + | "select-same"; export type MozUserInput = Globals | "auto" | "disabled" | "enabled" | "none"; - export type MozUserModify = Globals | "read-only" | "read-write" | "write-only"; + export type MozUserModify = + | Globals + | "read-only" + | "read-write" + | "write-only"; export type MozWindowDragging = Globals | "drag" | "no-drag"; - export type MozWindowShadow = Globals | "default" | "menu" | "none" | "sheet" | "tooltip"; + export type MozWindowShadow = + | Globals + | "default" + | "menu" + | "none" + | "sheet" + | "tooltip"; export type MsAccelerator = Globals | "false" | "true"; @@ -20403,11 +21908,20 @@ export namespace Property { export type MsContentZoomLimitMin = Globals | (string & {}); - export type MsContentZoomSnap = Globals | "mandatory" | "none" | "proximity" | (string & {}); + export type MsContentZoomSnap = + | Globals + | "mandatory" + | "none" + | "proximity" + | (string & {}); export type MsContentZoomSnapPoints = Globals | (string & {}); - export type MsContentZoomSnapType = Globals | "mandatory" | "none" | "proximity"; + export type MsContentZoomSnapType = + | Globals + | "mandatory" + | "none" + | "proximity"; export type MsContentZooming = Globals | "none" | "zoom"; @@ -20417,33 +21931,67 @@ export namespace Property { export type MsFlowInto = Globals | "none" | (string & {}); - export type MsGridColumns = Globals | DataType.TrackBreadth | "none" | (string & {}); + export type MsGridColumns = + | Globals + | DataType.TrackBreadth + | "none" + | (string & {}); - export type MsGridRows = Globals | DataType.TrackBreadth | "none" | (string & {}); + export type MsGridRows = + | Globals + | DataType.TrackBreadth + | "none" + | (string & {}); export type MsHighContrastAdjust = Globals | "auto" | "none"; - export type MsHyphenateLimitChars = Globals | "auto" | (string & {}) | (number & {}); + export type MsHyphenateLimitChars = + | Globals + | "auto" + | (string & {}) + | (number & {}); - export type MsHyphenateLimitLines = Globals | "no-limit" | (number & {}) | (string & {}); + export type MsHyphenateLimitLines = + | Globals + | "no-limit" + | (number & {}) + | (string & {}); - export type MsHyphenateLimitZone = Globals | TLength | (string & {}); + export type MsHyphenateLimitZone = + | Globals + | TLength + | (string & {}); export type MsImeAlign = Globals | "after" | "auto"; - export type MsOverflowStyle = Globals | "-ms-autohiding-scrollbar" | "auto" | "none" | "scrollbar"; + export type MsOverflowStyle = + | Globals + | "-ms-autohiding-scrollbar" + | "auto" + | "none" + | "scrollbar"; export type MsScrollChaining = Globals | "chained" | "none"; export type MsScrollLimit = Globals | (string & {}); - export type MsScrollLimitXMax = Globals | TLength | "auto"; + export type MsScrollLimitXMax = + | Globals + | TLength + | "auto"; - export type MsScrollLimitXMin = Globals | TLength; + export type MsScrollLimitXMin = + | Globals + | TLength; - export type MsScrollLimitYMax = Globals | TLength | "auto"; + export type MsScrollLimitYMax = + | Globals + | TLength + | "auto"; - export type MsScrollLimitYMin = Globals | TLength; + export type MsScrollLimitYMin = + | Globals + | TLength; export type MsScrollRails = Globals | "none" | "railed"; @@ -20475,13 +22023,26 @@ export namespace Property { export type MsScrollbarTrackColor = Globals | DataType.Color; - export type MsTextAutospace = Globals | "ideograph-alpha" | "ideograph-numeric" | "ideograph-parenthesis" | "ideograph-space" | "none"; + export type MsTextAutospace = + | Globals + | "ideograph-alpha" + | "ideograph-numeric" + | "ideograph-parenthesis" + | "ideograph-space" + | "none"; export type MsTouchSelect = Globals | "grippers" | "none"; export type MsUserSelect = Globals | "element" | "none" | "text"; - export type MsWrapFlow = Globals | "auto" | "both" | "clear" | "end" | "maximum" | "start"; + export type MsWrapFlow = + | Globals + | "auto" + | "both" + | "clear" + | "end" + | "maximum" + | "start"; export type MsWrapMargin = Globals | TLength; @@ -20539,17 +22100,39 @@ export namespace Property { | "textarea" | "textfield"; - export type WebkitBorderBefore = Globals | DataType.LineWidth | DataType.LineStyle | DataType.Color | (string & {}); + export type WebkitBorderBefore = + | Globals + | DataType.LineWidth + | DataType.LineStyle + | DataType.Color + | (string & {}); export type WebkitBorderBeforeColor = Globals | DataType.Color; - export type WebkitBorderBeforeStyle = Globals | DataType.LineStyle | (string & {}); + export type WebkitBorderBeforeStyle = + | Globals + | DataType.LineStyle + | (string & {}); - export type WebkitBorderBeforeWidth = Globals | DataType.LineWidth | (string & {}); + export type WebkitBorderBeforeWidth = + | Globals + | DataType.LineWidth + | (string & {}); - export type WebkitBoxReflect = Globals | TLength | "above" | "below" | "left" | "right" | (string & {}); + export type WebkitBoxReflect = + | Globals + | TLength + | "above" + | "below" + | "left" + | "right" + | (string & {}); - export type WebkitLineClamp = Globals | "none" | (number & {}) | (string & {}); + export type WebkitLineClamp = + | Globals + | "none" + | (number & {}) + | (string & {}); export type WebkitMask = | Globals @@ -20563,29 +22146,76 @@ export namespace Property { | "text" | (string & {}); - export type WebkitMaskAttachment = Globals | DataType.Attachment | (string & {}); + export type WebkitMaskAttachment = + | Globals + | DataType.Attachment + | (string & {}); - export type WebkitMaskClip = Globals | DataType.Box | "border" | "content" | "padding" | "text" | (string & {}); + export type WebkitMaskClip = + | Globals + | DataType.Box + | "border" + | "content" + | "padding" + | "text" + | (string & {}); - export type WebkitMaskComposite = Globals | DataType.CompositeStyle | (string & {}); + export type WebkitMaskComposite = + | Globals + | DataType.CompositeStyle + | (string & {}); export type WebkitMaskImage = Globals | "none" | (string & {}); - export type WebkitMaskOrigin = Globals | DataType.Box | "border" | "content" | "padding" | (string & {}); + export type WebkitMaskOrigin = + | Globals + | DataType.Box + | "border" + | "content" + | "padding" + | (string & {}); - export type WebkitMaskPosition = Globals | DataType.Position | (string & {}); + export type WebkitMaskPosition = + | Globals + | DataType.Position + | (string & {}); - export type WebkitMaskPositionX = Globals | TLength | "center" | "left" | "right" | (string & {}); + export type WebkitMaskPositionX = + | Globals + | TLength + | "center" + | "left" + | "right" + | (string & {}); - export type WebkitMaskPositionY = Globals | TLength | "bottom" | "center" | "top" | (string & {}); + export type WebkitMaskPositionY = + | Globals + | TLength + | "bottom" + | "center" + | "top" + | (string & {}); export type WebkitMaskRepeat = Globals | DataType.RepeatStyle | (string & {}); - export type WebkitMaskRepeatX = Globals | "no-repeat" | "repeat" | "round" | "space"; + export type WebkitMaskRepeatX = + | Globals + | "no-repeat" + | "repeat" + | "round" + | "space"; - export type WebkitMaskRepeatY = Globals | "no-repeat" | "repeat" | "round" | "space"; + export type WebkitMaskRepeatY = + | Globals + | "no-repeat" + | "repeat" + | "round" + | "space"; - export type WebkitMaskSize = Globals | DataType.BgSize | (string & {}); + export type WebkitMaskSize = + | Globals + | DataType.BgSize + | (string & {}); export type WebkitOverflowScrolling = Globals | "auto" | "touch"; @@ -20593,15 +22223,25 @@ export namespace Property { export type WebkitTextFillColor = Globals | DataType.Color; - export type WebkitTextStroke = Globals | DataType.Color | TLength | (string & {}); + export type WebkitTextStroke = + | Globals + | DataType.Color + | TLength + | (string & {}); export type WebkitTextStrokeColor = Globals | DataType.Color; - export type WebkitTextStrokeWidth = Globals | TLength; + export type WebkitTextStrokeWidth = + | Globals + | TLength; export type WebkitTouchCallout = Globals | "default" | "none"; - export type WebkitUserModify = Globals | "read-only" | "read-write" | "read-write-plaintext-only"; + export type WebkitUserModify = + | Globals + | "read-only" + | "read-write" + | "read-write-plaintext-only"; export type AlignmentBaseline = | Globals @@ -20618,13 +22258,23 @@ export namespace Property { | "text-after-edge" | "text-before-edge"; - export type BaselineShift = Globals | TLength | "baseline" | "sub" | "super" | (string & {}); + export type BaselineShift = + | Globals + | TLength + | "baseline" + | "sub" + | "super" + | (string & {}); export type ClipRule = Globals | "evenodd" | "nonzero"; export type ColorInterpolation = Globals | "auto" | "linearRGB" | "sRGB"; - export type ColorRendering = Globals | "auto" | "optimizeQuality" | "optimizeSpeed"; + export type ColorRendering = + | Globals + | "auto" + | "optimizeQuality" + | "optimizeSpeed"; export type DominantBaseline = | Globals @@ -20651,7 +22301,11 @@ export namespace Property { export type FloodOpacity = Globals | (number & {}) | (string & {}); - export type GlyphOrientationVertical = Globals | "auto" | (string & {}) | (number & {}); + export type GlyphOrientationVertical = + | Globals + | "auto" + | (string & {}) + | (number & {}); export type LightingColor = Globals | DataType.Color | "currentColor"; @@ -20663,7 +22317,12 @@ export namespace Property { export type MarkerStart = Globals | "none" | (string & {}); - export type ShapeRendering = Globals | "auto" | "crispEdges" | "geometricPrecision" | "optimizeSpeed"; + export type ShapeRendering = + | Globals + | "auto" + | "crispEdges" + | "geometricPrecision" + | "optimizeSpeed"; export type StopColor = Globals | DataType.Color | "currentColor"; @@ -20671,9 +22330,15 @@ export namespace Property { export type Stroke = Globals | DataType.Paint; - export type StrokeDasharray = Globals | DataType.Dasharray | "none"; + export type StrokeDasharray = + | Globals + | DataType.Dasharray + | "none"; - export type StrokeDashoffset = Globals | TLength | (string & {}); + export type StrokeDashoffset = + | Globals + | TLength + | (string & {}); export type StrokeLinecap = Globals | "butt" | "round" | "square"; @@ -20683,7 +22348,10 @@ export namespace Property { export type StrokeOpacity = Globals | (number & {}) | (string & {}); - export type StrokeWidth = Globals | TLength | (string & {}); + export type StrokeWidth = + | Globals + | TLength + | (string & {}); export type TextAnchor = Globals | "end" | "middle" | "start"; @@ -20691,7 +22359,10 @@ export namespace Property { } export namespace AtRule { - export interface CounterStyle { + export interface CounterStyle< + TLength = (string & {}) | 0, + TTime = string & {}, + > { additiveSymbols?: string | undefined; fallback?: string | undefined; negative?: string | undefined; @@ -20704,7 +22375,10 @@ export namespace AtRule { system?: System | undefined; } - export interface CounterStyleHyphen { + export interface CounterStyleHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { "additive-symbols"?: string | undefined; fallback?: string | undefined; negative?: string | undefined; @@ -20717,9 +22391,15 @@ export namespace AtRule { system?: System | undefined; } - export type CounterStyleFallback = Fallback>; + export type CounterStyleFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type CounterStyleHyphenFallback = Fallback>; + export type CounterStyleHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; export interface FontFace { MozFontFeatureSettings?: FontFeatureSettings | undefined; @@ -20739,7 +22419,10 @@ export namespace AtRule { unicodeRange?: string | undefined; } - export interface FontFaceHyphen { + export interface FontFaceHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { "-moz-font-feature-settings"?: FontFeatureSettings | undefined; "ascent-override"?: AscentOverride | undefined; "descent-override"?: DescentOverride | undefined; @@ -20757,25 +22440,43 @@ export namespace AtRule { "unicode-range"?: string | undefined; } - export type FontFaceFallback = Fallback>; + export type FontFaceFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type FontFaceHyphenFallback = Fallback>; + export type FontFaceHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export interface FontPaletteValues { + export interface FontPaletteValues< + TLength = (string & {}) | 0, + TTime = string & {}, + > { basePalette?: BasePalette | undefined; fontFamily?: string | undefined; overrideColors?: string | undefined; } - export interface FontPaletteValuesHyphen { + export interface FontPaletteValuesHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { "base-palette"?: BasePalette | undefined; "font-family"?: string | undefined; "override-colors"?: string | undefined; } - export type FontPaletteValuesFallback = Fallback>; + export type FontPaletteValuesFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type FontPaletteValuesHyphenFallback = Fallback>; + export type FontPaletteValuesHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; export interface Page { bleed?: Bleed | undefined; @@ -20784,16 +22485,25 @@ export namespace AtRule { size?: Size | undefined; } - export interface PageHyphen { + export interface PageHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { bleed?: Bleed | undefined; marks?: Marks | undefined; "page-orientation"?: PageOrientation | undefined; size?: Size | undefined; } - export type PageFallback = Fallback>; + export type PageFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type PageHyphenFallback = Fallback>; + export type PageHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; export interface Property { inherits?: Inherits | undefined; @@ -20801,15 +22511,24 @@ export namespace AtRule { syntax?: string | undefined; } - export interface PropertyHyphen { + export interface PropertyHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { inherits?: Inherits | undefined; "initial-value"?: string | undefined; syntax?: string | undefined; } - export type PropertyFallback = Fallback>; + export type PropertyFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type PropertyHyphenFallback = Fallback>; + export type PropertyHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; export interface Viewport { height?: Height | undefined; @@ -20826,7 +22545,10 @@ export namespace AtRule { zoom?: Zoom | undefined; } - export interface ViewportHyphen { + export interface ViewportHyphen< + TLength = (string & {}) | 0, + TTime = string & {}, + > { height?: Height | undefined; "max-height"?: MaxHeight | undefined; "max-width"?: MaxWidth | undefined; @@ -20841,15 +22563,34 @@ export namespace AtRule { zoom?: Zoom | undefined; } - export type ViewportFallback = Fallback>; + export type ViewportFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; - export type ViewportHyphenFallback = Fallback>; + export type ViewportHyphenFallback< + TLength = (string & {}) | 0, + TTime = string & {}, + > = Fallback>; type Range = "auto" | (string & {}); - type SpeakAs = "auto" | "bullets" | "numbers" | "spell-out" | "words" | (string & {}); + type SpeakAs = + | "auto" + | "bullets" + | "numbers" + | "spell-out" + | "words" + | (string & {}); - type System = "additive" | "alphabetic" | "cyclic" | "fixed" | "numeric" | "symbolic" | (string & {}); + type System = + | "additive" + | "alphabetic" + | "cyclic" + | "fixed" + | "numeric" + | "symbolic" + | (string & {}); type FontFeatureSettings = "normal" | (string & {}); @@ -20909,7 +22650,13 @@ export namespace AtRule { type PageOrientation = "rotate-left" | "rotate-right" | "upright"; - type Size = DataType.PageSize | TLength | "auto" | "landscape" | "portrait" | (string & {}); + type Size = + | DataType.PageSize + | TLength + | "auto" + | "landscape" + | "portrait" + | (string & {}); type Inherits = "false" | "true"; @@ -20945,13 +22692,28 @@ export namespace AtRule { * update from `csstype` can break your typing if you're using the `DataType` namespace. */ export namespace DataType { - type AbsoluteSize = "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large"; + type AbsoluteSize = + | "large" + | "medium" + | "small" + | "x-large" + | "x-small" + | "xx-large" + | "xx-small" + | "xxx-large"; type AnimateableFeature = "contents" | "scroll-position" | (string & {}); type Attachment = "fixed" | "local" | "scroll"; - type BgPosition = TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {}); + type BgPosition = + | TLength + | "bottom" + | "center" + | "left" + | "right" + | "top" + | (string & {}); type BgSize = TLength | "auto" | "contain" | "cover" | (string & {}); @@ -20975,7 +22737,11 @@ export namespace DataType { type Box = "border-box" | "content-box" | "padding-box"; - type Color = NamedColor | DeprecatedSystemColor | "currentcolor" | (string & {}); + type Color = + | NamedColor + | DeprecatedSystemColor + | "currentcolor" + | (string & {}); type CompatAuto = | "button" @@ -21006,13 +22772,22 @@ export namespace DataType { type CompositingOperator = "add" | "exclude" | "intersect" | "subtract"; - type ContentDistribution = "space-around" | "space-between" | "space-evenly" | "stretch"; + type ContentDistribution = + | "space-around" + | "space-between" + | "space-evenly" + | "stretch"; type ContentList = Quote | "contents" | (string & {}); type ContentPosition = "center" | "end" | "flex-end" | "flex-start" | "start"; - type CubicBezierTimingFunction = "ease" | "ease-in" | "ease-in-out" | "ease-out" | (string & {}); + type CubicBezierTimingFunction = + | "ease" + | "ease-in" + | "ease-in-out" + | "ease-out" + | (string & {}); type Dasharray = TLength | (string & {}) | (number & {}); @@ -21046,7 +22821,16 @@ export namespace DataType { | "WindowFrame" | "WindowText"; - type DisplayInside = "-ms-flexbox" | "-ms-grid" | "-webkit-flex" | "flex" | "flow" | "flow-root" | "grid" | "ruby" | "table"; + type DisplayInside = + | "-ms-flexbox" + | "-ms-grid" + | "-webkit-flex" + | "flex" + | "flow" + | "flow-root" + | "grid" + | "ruby" + | "table"; type DisplayInternal = | "ruby-base" @@ -21062,15 +22846,39 @@ export namespace DataType { | "table-row" | "table-row-group"; - type DisplayLegacy = "-ms-inline-flexbox" | "-ms-inline-grid" | "-webkit-inline-flex" | "inline-block" | "inline-flex" | "inline-grid" | "inline-list-item" | "inline-table"; + type DisplayLegacy = + | "-ms-inline-flexbox" + | "-ms-inline-grid" + | "-webkit-inline-flex" + | "inline-block" + | "inline-flex" + | "inline-grid" + | "inline-list-item" + | "inline-table"; type DisplayOutside = "block" | "inline" | "run-in"; - type EasingFunction = CubicBezierTimingFunction | StepTimingFunction | "linear"; - - type EastAsianVariantValues = "jis04" | "jis78" | "jis83" | "jis90" | "simplified" | "traditional"; - - type FinalBgLayer = Color | BgPosition | RepeatStyle | Attachment | Box | "none" | (string & {}); + type EasingFunction = + | CubicBezierTimingFunction + | StepTimingFunction + | "linear"; + + type EastAsianVariantValues = + | "jis04" + | "jis78" + | "jis83" + | "jis90" + | "simplified" + | "traditional"; + + type FinalBgLayer = + | Color + | BgPosition + | RepeatStyle + | Attachment + | Box + | "none" + | (string & {}); type FontStretchAbsolute = | "condensed" @@ -21086,17 +22894,45 @@ export namespace DataType { type FontWeightAbsolute = "bold" | "normal" | (number & {}) | (string & {}); - type GenericFamily = "cursive" | "fantasy" | "monospace" | "sans-serif" | "serif"; + type GenericFamily = + | "cursive" + | "fantasy" + | "monospace" + | "sans-serif" + | "serif"; - type GeometryBox = Box | "fill-box" | "margin-box" | "stroke-box" | "view-box"; + type GeometryBox = + | Box + | "fill-box" + | "margin-box" + | "stroke-box" + | "view-box"; type GridLine = "auto" | (string & {}) | (number & {}); - type LineStyle = "dashed" | "dotted" | "double" | "groove" | "hidden" | "inset" | "none" | "outset" | "ridge" | "solid"; + type LineStyle = + | "dashed" + | "dotted" + | "double" + | "groove" + | "hidden" + | "inset" + | "none" + | "outset" + | "ridge" + | "solid"; type LineWidth = TLength | "medium" | "thick" | "thin"; - type MaskLayer = Position | RepeatStyle | GeometryBox | CompositingOperator | MaskingMode | "no-clip" | "none" | (string & {}); + type MaskLayer = + | Position + | RepeatStyle + | GeometryBox + | CompositingOperator + | MaskingMode + | "no-clip" + | "none" + | (string & {}); type MaskingMode = "alpha" | "luminance" | "match-source"; @@ -21251,17 +23087,58 @@ export namespace DataType { | "yellow" | "yellowgreen"; - type PageSize = "A3" | "A4" | "A5" | "B4" | "B5" | "JIS-B4" | "JIS-B5" | "ledger" | "legal" | "letter"; - - type Paint = Color | "child" | "context-fill" | "context-stroke" | "none" | (string & {}); - - type Position = TLength | "bottom" | "center" | "left" | "right" | "top" | (string & {}); + type PageSize = + | "A3" + | "A4" + | "A5" + | "B4" + | "B5" + | "JIS-B4" + | "JIS-B5" + | "ledger" + | "legal" + | "letter"; + + type Paint = + | Color + | "child" + | "context-fill" + | "context-stroke" + | "none" + | (string & {}); - type Quote = "close-quote" | "no-close-quote" | "no-open-quote" | "open-quote"; + type Position = + | TLength + | "bottom" + | "center" + | "left" + | "right" + | "top" + | (string & {}); - type RepeatStyle = "no-repeat" | "repeat" | "repeat-x" | "repeat-y" | "round" | "space" | (string & {}); + type Quote = + | "close-quote" + | "no-close-quote" + | "no-open-quote" + | "open-quote"; + + type RepeatStyle = + | "no-repeat" + | "repeat" + | "repeat-x" + | "repeat-y" + | "round" + | "space" + | (string & {}); - type SelfPosition = "center" | "end" | "flex-end" | "flex-start" | "self-end" | "self-start" | "start"; + type SelfPosition = + | "center" + | "end" + | "flex-end" + | "flex-start" + | "self-end" + | "self-start" + | "start"; type SingleAnimation = | EasingFunction @@ -21278,19 +23155,41 @@ export namespace DataType { type SingleAnimationComposition = "accumulate" | "add" | "replace"; - type SingleAnimationDirection = "alternate" | "alternate-reverse" | "normal" | "reverse"; + type SingleAnimationDirection = + | "alternate" + | "alternate-reverse" + | "normal" + | "reverse"; type SingleAnimationFillMode = "backwards" | "both" | "forwards" | "none"; type SingleAnimationTimeline = "auto" | "none" | (string & {}); - type SingleTransition = EasingFunction | TTime | "all" | "allow-discrete" | "none" | "normal" | (string & {}); + type SingleTransition = + | EasingFunction + | TTime + | "all" + | "allow-discrete" + | "none" + | "normal" + | (string & {}); type StepTimingFunction = "step-end" | "step-start" | (string & {}); - type TimelineRangeName = "contain" | "cover" | "entry" | "entry-crossing" | "exit" | "exit-crossing"; + type TimelineRangeName = + | "contain" + | "cover" + | "entry" + | "entry-crossing" + | "exit" + | "exit-crossing"; - type TrackBreadth = TLength | "auto" | "max-content" | "min-content" | (string & {}); + type TrackBreadth = + | TLength + | "auto" + | "max-content" + | "min-content" + | (string & {}); type ViewportLength = TLength | "auto" | (string & {}); diff --git a/packages/wow-ui/styled-system/types/global.d.ts b/packages/wow-ui/styled-system/types/global.d.ts index 6425b40b..35b52755 100644 --- a/packages/wow-ui/styled-system/types/global.d.ts +++ b/packages/wow-ui/styled-system/types/global.d.ts @@ -1,19 +1,43 @@ /* eslint-disable */ // @ts-nocheck -import type * as Panda from '@pandacss/dev' -import type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe'; -import type { Parts } from './parts'; -import type { PatternConfig, PatternProperties } from './pattern'; -import type { GlobalStyleObject, SystemStyleObject } from './system-types'; -import type { CompositionStyles } from './composition'; +import type * as Panda from "@pandacss/dev"; +import type { + RecipeVariantRecord, + RecipeConfig, + SlotRecipeVariantRecord, + SlotRecipeConfig, +} from "./recipe"; +import type { Parts } from "./parts"; +import type { PatternConfig, PatternProperties } from "./pattern"; +import type { GlobalStyleObject, SystemStyleObject } from "./system-types"; +import type { CompositionStyles } from "./composition"; -declare module '@pandacss/dev' { - export function defineRecipe(config: RecipeConfig): Panda.RecipeConfig - export function defineSlotRecipe>(config: SlotRecipeConfig): Panda.SlotRecipeConfig - export function defineStyles(definition: SystemStyleObject): SystemStyleObject - export function defineGlobalStyles(definition: GlobalStyleObject): Panda.GlobalStyleObject - export function defineTextStyles(definition: CompositionStyles['textStyles']): Panda.TextStyles - export function defineLayerStyles(definition: CompositionStyles['layerStyles']): Panda.LayerStyles - export function definePattern(config: PatternConfig): Panda.PatternConfig - export function defineParts(parts: T): (config: Partial>) => Partial> -} \ No newline at end of file +declare module "@pandacss/dev" { + export function defineRecipe( + config: RecipeConfig + ): Panda.RecipeConfig; + export function defineSlotRecipe< + S extends string, + V extends SlotRecipeVariantRecord, + >(config: SlotRecipeConfig): Panda.SlotRecipeConfig; + export function defineStyles( + definition: SystemStyleObject + ): SystemStyleObject; + export function defineGlobalStyles( + definition: GlobalStyleObject + ): Panda.GlobalStyleObject; + export function defineTextStyles( + definition: CompositionStyles["textStyles"] + ): Panda.TextStyles; + export function defineLayerStyles( + definition: CompositionStyles["layerStyles"] + ): Panda.LayerStyles; + export function definePattern( + config: PatternConfig + ): Panda.PatternConfig; + export function defineParts( + parts: T + ): ( + config: Partial> + ) => Partial>; +} diff --git a/packages/wow-ui/styled-system/types/parts.d.ts b/packages/wow-ui/styled-system/types/parts.d.ts index a1b3aeca..d34dc33e 100644 --- a/packages/wow-ui/styled-system/types/parts.d.ts +++ b/packages/wow-ui/styled-system/types/parts.d.ts @@ -1,8 +1,8 @@ /* eslint-disable */ export interface Part { - selector: string + selector: string; } export interface Parts { - [key: string]: Part + [key: string]: Part; } diff --git a/packages/wow-ui/styled-system/types/pattern.d.ts b/packages/wow-ui/styled-system/types/pattern.d.ts index a673055e..ddd72f5d 100644 --- a/packages/wow-ui/styled-system/types/pattern.d.ts +++ b/packages/wow-ui/styled-system/types/pattern.d.ts @@ -1,78 +1,87 @@ /* eslint-disable */ -import type { CssProperty, SystemStyleObject } from './system-types'; -import type { TokenCategory } from '../tokens/index'; +import type { CssProperty, SystemStyleObject } from "./system-types"; +import type { TokenCategory } from "../tokens/index"; -type Primitive = string | number | boolean | null | undefined -type LiteralUnion = T | (K & Record) +type Primitive = string | number | boolean | null | undefined; +type LiteralUnion = + | T + | (K & Record); export type PatternProperty = - | { type: 'property'; value: CssProperty } - | { type: 'enum'; value: string[] } - | { type: 'token'; value: TokenCategory; property?: CssProperty } - | { type: 'string' | 'boolean' | 'number' } + | { type: "property"; value: CssProperty } + | { type: "enum"; value: string[] } + | { type: "token"; value: TokenCategory; property?: CssProperty } + | { type: "string" | "boolean" | "number" }; export interface PatternHelpers { - map: (value: any, fn: (value: string) => string | undefined) => any - isCssUnit: (value: any) => boolean - isCssVar: (value: any) => boolean - isCssFunction: (value: any) => boolean + map: (value: any, fn: (value: string) => string | undefined) => any; + isCssUnit: (value: any) => boolean; + isCssVar: (value: any) => boolean; + isCssFunction: (value: any) => boolean; } export interface PatternProperties { - [key: string]: PatternProperty + [key: string]: PatternProperty; } -type InferProps = Record, any> +type InferProps = Record, any>; -export type PatternDefaultValue = Partial> +export type PatternDefaultValue = Partial>; -export type PatternDefaultValueFn = (props: InferProps) => PatternDefaultValue +export type PatternDefaultValueFn = ( + props: InferProps +) => PatternDefaultValue; -export interface PatternConfig { +export interface PatternConfig< + T extends PatternProperties = PatternProperties, +> { /** * The description of the pattern. This will be used in the JSDoc comment. */ - description?: string + description?: string; /** * The JSX element rendered by the pattern * @default 'div' */ - jsxElement?: string + jsxElement?: string; /** * The properties of the pattern. */ - properties?: T + properties?: T; /** * The default values of the pattern. */ - defaultValues?: PatternDefaultValue | PatternDefaultValueFn + defaultValues?: PatternDefaultValue | PatternDefaultValueFn; /** * The css object this pattern will generate. */ - transform?: (props: InferProps, helpers: PatternHelpers) => SystemStyleObject + transform?: ( + props: InferProps, + helpers: PatternHelpers + ) => SystemStyleObject; /** * Whether the pattern is deprecated. */ - deprecated?: boolean | string + deprecated?: boolean | string; /** * The jsx element name this pattern will generate. */ - jsxName?: string + jsxName?: string; /** * The jsx elements to track for this pattern. Can be string or Regexp. * * @default capitalize(pattern.name) * @example ['Button', 'Link', /Button$/] */ - jsx?: Array + jsx?: Array; /** * Whether to only generate types for the specified properties. * This will disallow css properties */ - strict?: boolean + strict?: boolean; /** * @experimental * Disallow certain css properties for this pattern */ - blocklist?: LiteralUnion[] + blocklist?: LiteralUnion[]; } diff --git a/packages/wow-ui/styled-system/types/recipe.d.ts b/packages/wow-ui/styled-system/types/recipe.d.ts index d9d3ac98..1875ac03 100644 --- a/packages/wow-ui/styled-system/types/recipe.d.ts +++ b/packages/wow-ui/styled-system/types/recipe.d.ts @@ -1,141 +1,166 @@ /* eslint-disable */ -import type { RecipeRule } from './static-css'; -import type { SystemStyleObject, DistributiveOmit, Pretty } from './system-types'; +import type { RecipeRule } from "./static-css"; +import type { + SystemStyleObject, + DistributiveOmit, + Pretty, +} from "./system-types"; -type StringToBoolean = T extends 'true' | 'false' ? boolean : T +type StringToBoolean = T extends "true" | "false" ? boolean : T; -export type RecipeVariantRecord = Record> +export type RecipeVariantRecord = Record>; -export type RecipeSelection = keyof any extends keyof T - ? {} - : { - [K in keyof T]?: StringToBoolean | undefined - } +export type RecipeSelection = + keyof any extends keyof T + ? {} + : { + [K in keyof T]?: StringToBoolean | undefined; + }; -export type RecipeVariantFn = (props?: RecipeSelection) => string +export type RecipeVariantFn = ( + props?: RecipeSelection +) => string; /** * Extract the variant as optional props from a `cva` function. * Intended to be used with a JSX component, prefer `RecipeVariant` for a more strict type. */ export type RecipeVariantProps< - T extends RecipeVariantFn | SlotRecipeVariantFn>, -> = Pretty[0]> + T extends + | RecipeVariantFn + | SlotRecipeVariantFn>, +> = Pretty[0]>; /** * Extract the variants from a `cva` function. */ export type RecipeVariant< - T extends RecipeVariantFn | SlotRecipeVariantFn>, -> = Exclude>>, undefined> + T extends + | RecipeVariantFn + | SlotRecipeVariantFn>, +> = Exclude>>, undefined>; type RecipeVariantMap = { - [K in keyof T]: Array -} + [K in keyof T]: Array; +}; /* ----------------------------------------------------------------------------- * Recipe / Standard * -----------------------------------------------------------------------------*/ -export interface RecipeRuntimeFn extends RecipeVariantFn { - __type: RecipeSelection - variantKeys: (keyof T)[] - variantMap: RecipeVariantMap - raw: (props?: RecipeSelection) => SystemStyleObject - config: RecipeConfig +export interface RecipeRuntimeFn + extends RecipeVariantFn { + __type: RecipeSelection; + variantKeys: (keyof T)[]; + variantMap: RecipeVariantMap; + raw: (props?: RecipeSelection) => SystemStyleObject; + config: RecipeConfig; splitVariantProps>( - props: Props, - ): [RecipeSelection, Pretty>] - getVariantProps: (props?: RecipeSelection) => RecipeSelection + props: Props + ): [RecipeSelection, Pretty>]; + getVariantProps: (props?: RecipeSelection) => RecipeSelection; } -type OneOrMore = T | Array +type OneOrMore = T | Array; export type RecipeCompoundSelection = { - [K in keyof T]?: OneOrMore> | undefined -} + [K in keyof T]?: OneOrMore> | undefined; +}; export type RecipeCompoundVariant = T & { - css: SystemStyleObject -} + css: SystemStyleObject; +}; -export interface RecipeDefinition { +export interface RecipeDefinition< + T extends RecipeVariantRecord = RecipeVariantRecord, +> { /** * The base styles of the recipe. */ - base?: SystemStyleObject + base?: SystemStyleObject; /** * Whether the recipe is deprecated. */ - deprecated?: boolean | string + deprecated?: boolean | string; /** * The multi-variant styles of the recipe. */ - variants?: T + variants?: T; /** * The default variants of the recipe. */ - defaultVariants?: RecipeSelection + defaultVariants?: RecipeSelection; /** * The styles to apply when a combination of variants is selected. */ - compoundVariants?: Pretty>>[] + compoundVariants?: Pretty< + RecipeCompoundVariant> + >[]; } -export type RecipeCreatorFn = (config: RecipeDefinition) => RecipeRuntimeFn +export type RecipeCreatorFn = ( + config: RecipeDefinition +) => RecipeRuntimeFn; interface RecipeConfigMeta { /** * The class name of the recipe. */ - className: string + className: string; /** * The description of the recipe. This will be used in the JSDoc comment. */ - description?: string + description?: string; /** * The jsx elements to track for this recipe. Can be string or Regexp. * * @default capitalize(recipe.name) * @example ['Button', 'Link', /Button$/] */ - jsx?: Array + jsx?: Array; /** * Variants to pre-generate, will be include in the final `config.staticCss` */ - staticCss?: RecipeRule[] + staticCss?: RecipeRule[]; } -export interface RecipeConfig - extends RecipeDefinition, +export interface RecipeConfig< + T extends RecipeVariantRecord = RecipeVariantRecord, +> extends RecipeDefinition, RecipeConfigMeta {} /* ----------------------------------------------------------------------------- * Recipe / Slot * -----------------------------------------------------------------------------*/ -type SlotRecord = Partial> - -export type SlotRecipeVariantRecord = Record>> - -export type SlotRecipeVariantFn = ( - props?: RecipeSelection, -) => SlotRecord - -export interface SlotRecipeRuntimeFn> - extends SlotRecipeVariantFn { - raw: (props?: RecipeSelection) => Record - variantKeys: (keyof T)[] - variantMap: RecipeVariantMap +type SlotRecord = Partial>; + +export type SlotRecipeVariantRecord = Record< + any, + Record> +>; + +export type SlotRecipeVariantFn< + S extends string, + T extends RecipeVariantRecord, +> = (props?: RecipeSelection) => SlotRecord; + +export interface SlotRecipeRuntimeFn< + S extends string, + T extends SlotRecipeVariantRecord, +> extends SlotRecipeVariantFn { + raw: (props?: RecipeSelection) => Record; + variantKeys: (keyof T)[]; + variantMap: RecipeVariantMap; splitVariantProps>( - props: Props, - ): [RecipeSelection, Pretty>] - getVariantProps: (props?: RecipeSelection) => RecipeSelection + props: Props + ): [RecipeSelection, Pretty>]; + getVariantProps: (props?: RecipeSelection) => RecipeSelection; } export type SlotRecipeCompoundVariant = T & { - css: SlotRecord -} + css: SlotRecord; +}; export interface SlotRecipeDefinition< S extends string = string, @@ -144,38 +169,43 @@ export interface SlotRecipeDefinition< /** * An optional class name that can be used to target slots in the DOM. */ - className?: string + className?: string; /** * Whether the recipe is deprecated. */ - deprecated?: boolean | string + deprecated?: boolean | string; /** * The parts/slots of the recipe. */ - slots: S[] | Readonly + slots: S[] | Readonly; /** * The base styles of the recipe. */ - base?: SlotRecord + base?: SlotRecord; /** * The multi-variant styles of the recipe. */ - variants?: T + variants?: T; /** * The default variants of the recipe. */ - defaultVariants?: RecipeSelection + defaultVariants?: RecipeSelection; /** * The styles to apply when a combination of variants is selected. */ - compoundVariants?: Pretty>>[] + compoundVariants?: Pretty< + SlotRecipeCompoundVariant> + >[]; } -export type SlotRecipeCreatorFn = >( - config: SlotRecipeDefinition, -) => SlotRecipeRuntimeFn +export type SlotRecipeCreatorFn = < + S extends string, + T extends SlotRecipeVariantRecord, +>( + config: SlotRecipeDefinition +) => SlotRecipeRuntimeFn; export type SlotRecipeConfig< S extends string = string, T extends SlotRecipeVariantRecord = SlotRecipeVariantRecord, -> = SlotRecipeDefinition & RecipeConfigMeta +> = SlotRecipeDefinition & RecipeConfigMeta; diff --git a/packages/wow-ui/styled-system/types/selectors.d.ts b/packages/wow-ui/styled-system/types/selectors.d.ts index 0b36d984..059feeb0 100644 --- a/packages/wow-ui/styled-system/types/selectors.d.ts +++ b/packages/wow-ui/styled-system/types/selectors.d.ts @@ -1,59 +1,62 @@ /* eslint-disable */ -import type { Pseudos } from './csstype'; +import type { Pseudos } from "./csstype"; type AriaAttributes = - | '[aria-disabled]' - | '[aria-hidden]' - | '[aria-invalid]' - | '[aria-readonly]' - | '[aria-required]' - | '[aria-selected]' - | '[aria-checked]' - | '[aria-expanded]' - | '[aria-pressed]' - | `[aria-current=${'page' | 'step' | 'location' | 'date' | 'time'}]` - | '[aria-invalid]' - | `[aria-sort=${'ascending' | 'descending'}]` + | "[aria-disabled]" + | "[aria-hidden]" + | "[aria-invalid]" + | "[aria-readonly]" + | "[aria-required]" + | "[aria-selected]" + | "[aria-checked]" + | "[aria-expanded]" + | "[aria-pressed]" + | `[aria-current=${"page" | "step" | "location" | "date" | "time"}]` + | "[aria-invalid]" + | `[aria-sort=${"ascending" | "descending"}]`; type DataAttributes = - | '[data-selected]' - | '[data-highlighted]' - | '[data-hover]' - | '[data-active]' - | '[data-checked]' - | '[data-disabled]' - | '[data-readonly]' - | '[data-focus]' - | '[data-focus-visible]' - | '[data-focus-visible-added]' - | '[data-invalid]' - | '[data-pressed]' - | '[data-expanded]' - | '[data-grabbed]' - | '[data-dragged]' - | '[data-orientation=horizontal]' - | '[data-orientation=vertical]' - | '[data-in-range]' - | '[data-out-of-range]' - | '[data-placeholder-shown]' + | "[data-selected]" + | "[data-highlighted]" + | "[data-hover]" + | "[data-active]" + | "[data-checked]" + | "[data-disabled]" + | "[data-readonly]" + | "[data-focus]" + | "[data-focus-visible]" + | "[data-focus-visible-added]" + | "[data-invalid]" + | "[data-pressed]" + | "[data-expanded]" + | "[data-grabbed]" + | "[data-dragged]" + | "[data-orientation=horizontal]" + | "[data-orientation=vertical]" + | "[data-in-range]" + | "[data-out-of-range]" + | "[data-placeholder-shown]" | `[data-part=${string}]` | `[data-attr=${string}]` | `[data-placement=${string}]` | `[data-theme=${string}]` | `[data-size=${string}]` | `[data-state=${string}]` - | '[data-empty]' - | '[data-loading]' - | '[data-loaded]' - | '[data-enter]' - | '[data-entering]' - | '[data-exited]' - | '[data-exiting]' + | "[data-empty]" + | "[data-loading]" + | "[data-loaded]" + | "[data-enter]" + | "[data-entering]" + | "[data-exited]" + | "[data-exiting]"; -type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}` -type ParentSelector = `${DataAttributes | AriaAttributes} &` +type AttributeSelector = `&${Pseudos | DataAttributes | AriaAttributes}`; +type ParentSelector = `${DataAttributes | AriaAttributes} &`; -type AtRuleType = 'media' | 'layer' | 'container' | 'supports' | 'page' +type AtRuleType = "media" | "layer" | "container" | "supports" | "page"; -export type AnySelector = `${string}&` | `&${string}` | `@${AtRuleType}${string}` -export type Selectors = AttributeSelector | ParentSelector +export type AnySelector = + | `${string}&` + | `&${string}` + | `@${AtRuleType}${string}`; +export type Selectors = AttributeSelector | ParentSelector; diff --git a/packages/wow-ui/styled-system/types/static-css.d.ts b/packages/wow-ui/styled-system/types/static-css.d.ts index 28f1cc68..1da29302 100644 --- a/packages/wow-ui/styled-system/types/static-css.d.ts +++ b/packages/wow-ui/styled-system/types/static-css.d.ts @@ -4,8 +4,8 @@ interface WithConditions { * The css conditions to generate for the rule. * @example ['hover', 'focus'] */ - conditions?: string[] - responsive?: boolean + conditions?: string[]; + responsive?: boolean; } export interface CssRule extends WithConditions { @@ -14,38 +14,38 @@ export interface CssRule extends WithConditions { * @example ['margin', 'padding'] */ properties: { - [property: string]: Array - } + [property: string]: Array; + }; } interface RecipeRuleVariants { - [variant: string]: boolean | string[] + [variant: string]: boolean | string[]; } -export type RecipeRule = '*' | (RecipeRuleVariants & WithConditions) -export type PatternRule = '*' | CssRule +export type RecipeRule = "*" | (RecipeRuleVariants & WithConditions); +export type PatternRule = "*" | CssRule; export interface StaticCssOptions { /** * The css utility classes to generate. */ - css?: CssRule[] + css?: CssRule[]; /** * The css recipes to generate. */ recipes?: - | '*' + | "*" | { - [recipe: string]: RecipeRule[] - } + [recipe: string]: RecipeRule[]; + }; /** * The css patterns to generate. */ patterns?: { - [pattern: string]: PatternRule[] - } + [pattern: string]: PatternRule[]; + }; /** * The CSS themes to generate */ - themes?: string[] + themes?: string[]; } diff --git a/packages/wow-ui/styled-system/types/system-types.d.ts b/packages/wow-ui/styled-system/types/system-types.d.ts index 0baf35be..5a0e6f6e 100644 --- a/packages/wow-ui/styled-system/types/system-types.d.ts +++ b/packages/wow-ui/styled-system/types/system-types.d.ts @@ -1,35 +1,39 @@ /* eslint-disable */ -import type { ConditionalValue, Nested } from './conditions'; -import type { PropertiesFallback } from './csstype'; -import type { SystemProperties, CssVarProperties } from './style-props'; +import type { ConditionalValue, Nested } from "./conditions"; +import type { PropertiesFallback } from "./csstype"; +import type { SystemProperties, CssVarProperties } from "./style-props"; -type String = string & {} -type Number = number & {} +type String = string & {}; +type Number = number & {}; -export type Pretty = { [K in keyof T]: T[K] } & {} +export type Pretty = { [K in keyof T]: T[K] } & {}; -export type DistributiveOmit = T extends unknown ? Omit : never +export type DistributiveOmit = T extends unknown + ? Omit + : never; export type DistributiveUnion = { - [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K] -} & DistributiveOmit + [K in keyof T]: K extends keyof U ? U[K] | T[K] : T[K]; +} & DistributiveOmit; export type Assign = { - [K in keyof T]: K extends keyof U ? U[K] : T[K] -} & U + [K in keyof T]: K extends keyof U ? U[K] : T[K]; +} & U; /* ----------------------------------------------------------------------------- * Native css properties * -----------------------------------------------------------------------------*/ -export type CssProperty = keyof PropertiesFallback +export type CssProperty = keyof PropertiesFallback; -export interface CssProperties extends PropertiesFallback, CssVarProperties {} +export interface CssProperties + extends PropertiesFallback, + CssVarProperties {} export interface CssKeyframes { [name: string]: { - [time: string]: CssProperties - } + [time: string]: CssProperties; + }; } /* ----------------------------------------------------------------------------- @@ -37,53 +41,62 @@ export interface CssKeyframes { * -----------------------------------------------------------------------------*/ interface GenericProperties { - [key: string]: ConditionalValue + [key: string]: ConditionalValue; } /* ----------------------------------------------------------------------------- * Native css props * -----------------------------------------------------------------------------*/ -export type NestedCssProperties = Nested +export type NestedCssProperties = Nested; -export type SystemStyleObject = Nested +export type SystemStyleObject = Nested; export interface GlobalStyleObject { - [selector: string]: SystemStyleObject + [selector: string]: SystemStyleObject; } export interface ExtendableGlobalStyleObject { - [selector: string]: SystemStyleObject | undefined - extend?: GlobalStyleObject | undefined + [selector: string]: SystemStyleObject | undefined; + extend?: GlobalStyleObject | undefined; } type FilterStyleObject

= { - [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown -} + [K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown; +}; -export type CompositionStyleObject = Nested & CssVarProperties> +export type CompositionStyleObject = Nested< + FilterStyleObject & CssVarProperties +>; /* ----------------------------------------------------------------------------- * Jsx style props * -----------------------------------------------------------------------------*/ interface WithCss { - css?: SystemStyleObject | SystemStyleObject[] + css?: SystemStyleObject | SystemStyleObject[]; } -type StyleProps = SystemStyleObject & WithCss +type StyleProps = SystemStyleObject & WithCss; -export type JsxStyleProps = StyleProps & WithCss +export type JsxStyleProps = StyleProps & WithCss; export interface PatchedHTMLProps { - htmlWidth?: string | number - htmlHeight?: string | number - htmlTranslate?: 'yes' | 'no' | undefined - htmlContent?: string + htmlWidth?: string | number; + htmlHeight?: string | number; + htmlTranslate?: "yes" | "no" | undefined; + htmlContent?: string; } -export type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content' - -type WithHTMLProps = DistributiveOmit & PatchedHTMLProps - -export type JsxHTMLProps, P extends Record = {}> = Assign< - WithHTMLProps, - P -> +export type OmittedHTMLProps = + | "color" + | "translate" + | "transition" + | "width" + | "height" + | "content"; + +type WithHTMLProps = DistributiveOmit & + PatchedHTMLProps; + +export type JsxHTMLProps< + T extends Record, + P extends Record = {}, +> = Assign, P>; From fd0be3d6d372a442e0cd38c3418bdc0977032a43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=ED=99=8D=EC=84=9C=ED=98=84?= Date: Mon, 10 Jun 2024 12:49:54 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[Feature]=20TextField=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#40)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: TextField 컴포넌트 구현 * chore: 텍스트 필드 자잘한 수정 사항 반영 * feat: 텍스트 필드 컴포넌트 스토리 코드 작성 * fix: max length 관련 onChange 로직 수정 * test: 텍스트필드 컴포넌트 테스트 코드 작성 * chore: 토큰 변경 * feat: TextField 빌드 세팅 * fix: a11y violation, incomplete 사항 해결 * feat: 반응형 관련 breakpoint 추가 * chore: token에서 breakpoint 가져오도록 변경 * chore: label2 자간 수정사항 반영 * chore: breakpoint 네이밍 변경 * refactor: 텍스트필드 반응형 토큰 사용 * chore: 불필요한 useEffect 삭제 * chore: panda codegen 실행 * design: 글자 색 변경 * chore: useTextareaAutosize 훅에 useEffect 추가 * fix: 텍스트필드 색상 대조 관련 웹 접근성 테스트 끄도록 설정 변경 * chore: 포커스된 경우도 typing으로 처리하도록 변경 * chore: 스토리북 테스트 러너 a11y rule 관련 설정 추가 * chore: 변경된 빌드 설정 반영 * chore: placeholder 여러 줄인 경우도 수용하도록 수정 * fix: 머지 에러 해결 * refactor: 상수값 따로 분리 * chore: props style로 네이밍 변경 * chore: codegen 반영 --- apps/wow-docs/styled-system/tokens/index.js | 6 +- packages/theme/src/tokens/breakpoint.ts | 8 + packages/theme/src/tokens/index.ts | 2 + packages/wow-tokens/src/breakpoint.ts | 4 + packages/wow-tokens/src/color.ts | 6 +- packages/wow-tokens/src/index.ts | 1 + packages/wow-tokens/src/typography.ts | 1 + packages/wow-ui/package.json | 5 + packages/wow-ui/panda.config.ts | 3 +- packages/wow-ui/rollup.config.js | 1 + packages/wow-ui/src/components/Chip/index.tsx | 3 +- .../TextField/TextField.stories.tsx | 246 +++++++++++++ .../components/TextField/TextField.test.tsx | 157 ++++++++ .../wow-ui/src/components/TextField/index.tsx | 339 ++++++++++++++++++ .../wow-ui/src/hooks/useTextareaAutosize.ts | 42 +++ .../wow-ui/styled-system/css/conditions.js | 2 +- packages/wow-ui/styled-system/css/css.js | 2 +- .../wow-ui/styled-system/jsx/is-valid-prop.js | 2 +- packages/wow-ui/styled-system/tokens/index.js | 40 +-- .../wow-ui/styled-system/tokens/tokens.d.ts | 13 +- .../styled-system/types/conditions.d.ts | 62 ++-- 21 files changed, 864 insertions(+), 81 deletions(-) create mode 100644 packages/theme/src/tokens/breakpoint.ts create mode 100644 packages/wow-tokens/src/breakpoint.ts create mode 100644 packages/wow-ui/src/components/TextField/TextField.stories.tsx create mode 100644 packages/wow-ui/src/components/TextField/TextField.test.tsx create mode 100644 packages/wow-ui/src/components/TextField/index.tsx create mode 100644 packages/wow-ui/src/hooks/useTextareaAutosize.ts diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js index f64f4759..94ca0846 100644 --- a/apps/wow-docs/styled-system/tokens/index.js +++ b/apps/wow-docs/styled-system/tokens/index.js @@ -384,11 +384,11 @@ const tokens = { variable: "var(--colors-primary)", }, "colors.success": { - value: "#34A853", + value: "#2A8642", variable: "var(--colors-success)", }, "colors.error": { - value: "#EA4335", + value: "#BB362A", variable: "var(--colors-error)", }, "colors.backgroundNormal": { @@ -404,7 +404,7 @@ const tokens = { variable: "var(--colors-background-dimmer)", }, "colors.sub": { - value: "#8F8F8F", + value: "#6B6B6B", variable: "var(--colors-sub)", }, "colors.outline": { diff --git a/packages/theme/src/tokens/breakpoint.ts b/packages/theme/src/tokens/breakpoint.ts new file mode 100644 index 00000000..4d348061 --- /dev/null +++ b/packages/theme/src/tokens/breakpoint.ts @@ -0,0 +1,8 @@ +import { breakpoint } from "wowds-tokens"; + +export const breakpoints = { + xs: breakpoint.xs, + sm: breakpoint.sm, + md: breakpoint.md, + lg: breakpoint.lg, +}; diff --git a/packages/theme/src/tokens/index.ts b/packages/theme/src/tokens/index.ts index 6f4d9c8f..55ddf098 100644 --- a/packages/theme/src/tokens/index.ts +++ b/packages/theme/src/tokens/index.ts @@ -1,5 +1,7 @@ +export * from "./breakpoint.ts"; export * from "./color.ts"; export * from "./typography.ts"; + import { defineTokens } from "@pandacss/dev"; import { colors, gradients } from "./color.ts"; diff --git a/packages/wow-tokens/src/breakpoint.ts b/packages/wow-tokens/src/breakpoint.ts new file mode 100644 index 00000000..dcfc17e2 --- /dev/null +++ b/packages/wow-tokens/src/breakpoint.ts @@ -0,0 +1,4 @@ +export const xs = "360px"; +export const sm = "600px"; +export const md = "900px"; +export const lg = "1280px"; diff --git a/packages/wow-tokens/src/color.ts b/packages/wow-tokens/src/color.ts index 4bf97d44..dbe30d4e 100644 --- a/packages/wow-tokens/src/color.ts +++ b/packages/wow-tokens/src/color.ts @@ -90,14 +90,14 @@ export const blackOpacity80 = "rgba(0, 0, 0, 0.8)"; // 시맨틱 토큰 export const primary = blue500; -export const success = green500; -export const error = red500; +export const success = green600; +export const error = red600; export const backgroundNormal = white; export const backgroundAlternative = mono50; export const backgroundDimmer = blackOpacity80; -export const sub = mono600; +export const sub = mono700; export const outline = mono400; export const textBlack = black; export const textWhite = white; diff --git a/packages/wow-tokens/src/index.ts b/packages/wow-tokens/src/index.ts index 430ffe95..2b62e05a 100644 --- a/packages/wow-tokens/src/index.ts +++ b/packages/wow-tokens/src/index.ts @@ -1,3 +1,4 @@ +export * as breakpoint from "./breakpoint.ts"; export * as color from "./color.ts"; export * as radius from "./radius.ts"; export * as space from "./space.ts"; diff --git a/packages/wow-tokens/src/typography.ts b/packages/wow-tokens/src/typography.ts index 0ed14205..04a17c02 100644 --- a/packages/wow-tokens/src/typography.ts +++ b/packages/wow-tokens/src/typography.ts @@ -64,6 +64,7 @@ export const label2 = { fontSize: "0.875rem", lineHeight: "100%", fontWeight: 600, + letterSpacing: "-0.01rem", }; export const label3 = { diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index a025674e..5a269302 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -40,6 +40,11 @@ "require": "./dist/Switch.cjs", "import": "./dist/Switch.js" }, + "./TextField": { + "types": "./dist/components/TextField/index.d.ts", + "require": "./dist/TextField.cjs", + "import": "./dist/TextField.js" + }, "./Chip": { "types": "./dist/components/Chip/index.d.ts", "require": "./dist/Chip.cjs", diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts index 98f2c6b8..fb17f32f 100644 --- a/packages/wow-ui/panda.config.ts +++ b/packages/wow-ui/panda.config.ts @@ -1,5 +1,5 @@ import { defineConfig, defineGlobalStyles } from "@pandacss/dev"; -import { semanticTokens, textStyles, tokens } from "theme"; +import { semanticTokens, textStyles, tokens, breakpoints } from "theme"; import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils"; const globalCss = defineGlobalStyles({ @@ -32,5 +32,6 @@ export default defineConfig({ tokens, textStyles, semanticTokens, + breakpoints, }, }); diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 4db4d471..bac0b983 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -24,6 +24,7 @@ export default { Checkbox: "./src/components/Checkbox", Chip: "./src/components/Chip", Switch: "./src/components/Switch", + TextField: "./src/components/TextField", }, output: [ { diff --git a/packages/wow-ui/src/components/Chip/index.tsx b/packages/wow-ui/src/components/Chip/index.tsx index bd9d4145..5a3747f3 100644 --- a/packages/wow-ui/src/components/Chip/index.tsx +++ b/packages/wow-ui/src/components/Chip/index.tsx @@ -74,6 +74,7 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef( isChecked: checkedProp = false, defaultChecked = false, disabled = false, + style, ...rest }: ChipProps, ref: any @@ -110,7 +111,7 @@ const Chip: ChipComponent & { displayName?: string } = forwardRef( aria-label={`chip ${isChecked ? "activated" : "inactivated"}`} data-selected={isChecked} ref={ref} - style={rest.customStyle} + style={style} className={chip({ clickable: disabled ? false : clickable, disabled: disabled, diff --git a/packages/wow-ui/src/components/TextField/TextField.stories.tsx b/packages/wow-ui/src/components/TextField/TextField.stories.tsx new file mode 100644 index 00000000..0df9f750 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/TextField.stories.tsx @@ -0,0 +1,246 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; + +import TextField from "@/components/TextField"; + +const meta = { + title: "UI/TextField", + component: TextField, + tags: ["autodocs"], + parameters: { + componentSubtitle: "텍스트필드 컴포넌트", + a11y: { + config: { + rules: [{ id: "color-contrast", enabled: false }], + }, + }, + }, + argTypes: { + label: { + description: "텍스트필드의 라벨입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + type: { + name: "string", + required: true, + }, + }, + placeholder: { + description: "텍스트필드의 플레이스홀더 텍스트입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + defaultValue: { + description: "텍스트필드의 기본 값입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + value: { + description: "외부에서 제어할 활성 상태입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + maxLength: { + description: "텍스트필드의 최대 입력 길이입니다.", + table: { + type: { summary: "number" }, + defaultValue: { summary: null }, + }, + control: { + type: "number", + }, + }, + error: { + description: "텍스트필드의 오류 상태 여부입니다.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + success: { + description: "텍스트필드의 성공 상태 여부입니다.", + table: { + type: { summary: "boolean" }, + defaultValue: { summary: false }, + }, + control: { + type: "boolean", + }, + }, + helperText: { + description: "텍스트필드 아래 추가적인 텍스트입니다.", + table: { + type: { summary: "ReactNode" }, + defaultValue: { summary: null }, + }, + control: { + type: "text", + }, + }, + onChange: { + description: "외부 활성 상태가 변경될 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "(value: string) => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + onBlur: { + description: "텍스트필드가 포커스를 잃을 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + onFocus: { + description: "텍스트필드가 포커스됐을 때 호출될 콜백 함수입니다.", + table: { + type: { summary: "() => void" }, + defaultValue: { summary: null }, + control: { + type: "function", + }, + }, + }, + textareaProps: { + description: "텍스트필드에 전달할 추가 textarea 속성입니다.", + table: { + type: { summary: "TextareaHTMLAttributes" }, + defaultValue: { summary: null }, + control: { + type: "object", + }, + }, + }, + style: { + description: "텍스트필드의 커스텀 스타일 속성입니다.", + table: { + type: { summary: "CSSProperties" }, + defaultValue: { summary: null }, + control: { + type: "object", + }, + }, + }, + className: { + description: "텍스트필드에 전달하는 커스텀 클래스명입니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: null }, + control: { + type: "text", + }, + }, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + label: "Label", + }, +}; + +export const WithMaxLength: Story = { + args: { + label: "Label", + maxLength: 10, + }, +}; + +export const WithPlaceholder: Story = { + args: { + label: "Label", + placeholder: + "PlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholderPlaceholder", + }, +}; + +export const WithDefaultValue: Story = { + args: { + label: "Label", + defaultValue: "Text", + }, +}; + +export const WithHelperText: Story = { + args: { + label: "Label", + helperText: "*Caption", + }, +}; + +export const WithMaxLengthAndHelperText: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + }, +}; + +export const Success: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + success: true, + }, +}; + +export const Error: Story = { + args: { + label: "Label", + maxLength: 100, + helperText: "*Caption", + error: true, + }, +}; + +const ControlledTextField = () => { + const [value, setValue] = useState(""); + + const handleChange = (value: string) => { + setValue(value); + }; + + return ; +}; + +export const ControlledState: Story = { + render: () => , + args: { + label: "Label", + }, +}; diff --git a/packages/wow-ui/src/components/TextField/TextField.test.tsx b/packages/wow-ui/src/components/TextField/TextField.test.tsx new file mode 100644 index 00000000..abdc2035 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/TextField.test.tsx @@ -0,0 +1,157 @@ +import { fireEvent, render, waitFor } from "@testing-library/react"; +import { useState } from "react"; + +import TextField from "@/components/TextField"; + +describe("TextField component", () => { + it("should render label and placeholder", () => { + const { getByLabelText, getByPlaceholderText } = render( + + ); + const labelText = getByLabelText("Label"); + const placeholderText = getByPlaceholderText("Placeholder"); + + expect(labelText).toBeInTheDocument(); + expect(placeholderText).toBeInTheDocument(); + }); + + it("should render with default value", () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + expect(textField).toHaveValue("textField"); + }); + + it("should render helperText", () => { + const { getByText } = render( + + ); + const helperText = getByText("HelperText"); + + expect(helperText).toBeInTheDocument(); + }); + + it("should handle max length correctly", async () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label") as HTMLTextAreaElement; + + fireEvent.change(textField, { target: { value: "12345678910" } }); + + await waitFor(() => { + expect(textField.value).toHaveLength(5); + }); + }); + + it("should apply typing style while typing", async () => { + const { getByLabelText, getByText } = render(); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + fireEvent.change(textField, { target: { value: "12345" } }); + + await waitFor(() => { + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: primary"); + expect(textField).toHaveStyle("color: textBlack"); + }); + }); + + it("should apply typed style after typing", async () => { + const { getByLabelText, getByText } = render(); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + fireEvent.change(textField, { target: { value: "12345" } }); + fireEvent.blur(textField); + + await waitFor(() => { + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: sub"); + expect(textField).toHaveStyle("color: textBlack"); + }); + }); + + it("should apply success style if success is true", () => { + const { getByLabelText, getByText } = render( + + ); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: success"); + expect(textField).toHaveStyle("color: textBlack"); + }); + + it("should apply error style if error is true", () => { + const { getByLabelText, getByText } = render( + + ); + const textField = getByLabelText("Label"); + const label = getByText("Label"); + + expect(label).toHaveStyle("color: textBlack"); + expect(textField).toHaveStyle("borderColor: error"); + expect(textField).toHaveStyle("color: textBlack"); + }); + + it("should display error message with proper aria-describedBy", () => { + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + expect(textField).toHaveAttribute( + "aria-describedby", + expect.stringContaining("error-message") + ); + }); + + it("should fire onFocus event when focused", () => { + const handleFocus = jest.fn(); + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + fireEvent.focus(textField); + + expect(handleFocus).toHaveBeenCalledTimes(1); + }); + + it("should fire onBlur event when focus is lost", () => { + const handleBlur = jest.fn(); + const { getByLabelText } = render( + + ); + const textField = getByLabelText("Label"); + + fireEvent.click(textField); + fireEvent.blur(textField); + + expect(handleBlur).toHaveBeenCalledTimes(1); + }); +}); + +describe("external control and events", () => { + it("should fire external onChange event", () => { + const Component = () => { + const [value, setValue] = useState("initial value"); + const handleChange = (newValue: string) => setValue(newValue); + + return ; + }; + const { getByLabelText } = render(); + const textField = getByLabelText("Label"); + + expect(textField).toHaveValue("initial value"); + + fireEvent.change(textField, { target: { value: "updated value" } }); + + expect(textField).toHaveValue("updated value"); + }); +}); diff --git a/packages/wow-ui/src/components/TextField/index.tsx b/packages/wow-ui/src/components/TextField/index.tsx new file mode 100644 index 00000000..b84d3da6 --- /dev/null +++ b/packages/wow-ui/src/components/TextField/index.tsx @@ -0,0 +1,339 @@ +"use client"; + +import { cva } from "@styled-system/css"; +import { Flex, styled } from "@styled-system/jsx"; +import type { + ChangeEvent, + CSSProperties, + FocusEvent, + ReactNode, + RefObject, + TextareaHTMLAttributes, +} from "react"; +import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react"; + +import { useTextareaAutosize } from "@/hooks/useTextareaAutosize"; + +type VariantType = "default" | "typing" | "typed" | "success" | "error"; + +/** + * @description 사용자가 텍스트를 입력할 수 있는 텍스트필드 컴포넌트입니다. + * + * @param {string} label 텍스트필드의 라벨. + * @param {string} [placeholder] 텍스트필드의 플레이스홀더 텍스트. + * @param {string} [defaultValue] 텍스트필드의 기본 값. + * @param {string} [value] 외부에서 제어할 활성 상태. + * @param {number} [maxLength] 텍스트필드의 최대 입력 길이. + * @param {boolean} [error] 텍스트필드의 오류 상태 여부. + * @param {boolean} [success] 텍스트필드의 성공 상태 여부. + * @param {ReactNode} [helperText] 텍스트필드 아래 추가적인 텍스트. + * @param {(value: string) => void} [onChange] 외부 활성 상태가 변경될 때 호출될 콜백 함수. + * @param {() => void} [onBlur] 텍스트필드가 포커스를 잃을 때 호출될 콜백 함수. + * @param {() => void} [onFocus] 텍스트필드가 포커스됐을 때 호출될 콜백 함수. + * @param {TextareaHTMLAttributes} [textareaProps] 텍스트필드에 전달할 추가 textarea 속성. + * @param {CSSProperties} [style] 텍스트필드의 커스텀 스타일 속성. + * @param {string} [className] 텍스트필드에 전달하는 커스텀 클래스명. + * @param {ComponentPropsWithoutRef} rest 렌더링된 요소 또는 컴포넌트에 전달할 추가 props. + * @param {ComponentPropsWithRef["ref"]} ref 렌더링된 요소 또는 컴포넌트에 연결할 ref. + */ +export interface TextFieldProps { + label: string; + placeholder?: string; + defaultValue?: string; + value?: string; + maxLength?: number; + error?: boolean; + success?: boolean; + helperText?: ReactNode; + onChange?: (value: string) => void; + onBlur?: () => void; + onFocus?: () => void; + textareaProps?: TextareaHTMLAttributes; + style?: CSSProperties; + className?: string; +} + +const TextField = forwardRef( + ( + { + helperText, + label, + onBlur, + onChange, + onFocus, + placeholder = "", + defaultValue, + value: valueProp, + maxLength, + error = false, + success = false, + textareaProps, + ...rest + }, + ref + ) => { + const id = useId(); + const textareaId = textareaProps?.id || id; + const errorMessageId = `${textareaId}-error-message`; + const helperTextId = `${textareaId}-helper-text`; + const descriptionId = error ? `${errorMessageId}` : `${helperTextId}`; + + const textareaRef = useRef(null); + const textareaElementRef = ref || textareaRef; + + const [value, setValue] = useState(valueProp ?? defaultValue ?? ""); + const [variant, setVariant] = useState("default"); + + useLayoutEffect(() => { + if (success) { + setVariant("success"); + } else if (error) { + setVariant("error"); + } else if (defaultValue) { + setVariant("typed"); + } + }, [defaultValue, error, success]); + + useTextareaAutosize(textareaElementRef as RefObject); + + const handleChange = (e: ChangeEvent) => { + const textareaValue = e.target.value; + setVariant("typing"); + + if (maxLength && textareaValue.length > maxLength) { + setValue(textareaValue.slice(0, maxLength)); + } else { + setValue(textareaValue); + onChange?.(textareaValue); + } + }; + + const handleBlur = (e: FocusEvent) => { + const inputValue = e.target.value; + + if (variant !== "success" && variant !== "error") { + setVariant(inputValue ? "typed" : "default"); + } + onBlur?.(); + }; + + const handleFocus = () => { + if (variant !== "typing") { + setVariant("typing"); + } + onFocus?.(); + }; + + return ( + + + + {maxLength && ( + + )} + + + {helperText && {helperText}} + + ); + } +); + +TextField.displayName = "TextField"; +export default TextField; + +const Label = ({ + variant, + children, + textareaId, +}: { + variant: VariantType; + children: string; + textareaId: string; +}) => ( + + {children} + +); + +const TextLength = ({ + variant, + maxLength, + length, +}: { + variant: VariantType; + maxLength: number; + length: number; +}) => ( + + {length}/{maxLength} + +); + +const HelperText = ({ + variant, + children, +}: { + variant: VariantType; + children: ReactNode; +}) => ( + + {children} + +); + +const containerStyle = cva({ + base: { + lg: { + minWidth: "19.75rem", + maxWidth: "40.75rem", + }, + smDown: { + width: "100%", + }, + }, +}); + +const labelStyle = cva({ + base: { + textStyle: "label2", + }, + variants: { + type: { + default: { + color: "sub", + }, + focused: { + color: "textBlack", + }, + }, + }, +}); + +const textLengthStyle = cva({ + base: { + textStyle: "label3", + }, + variants: { + type: { + default: { + color: "sub", + }, + typing: { + color: "primary", + }, + typed: { + color: "sub", + }, + success: { + color: "success", + }, + error: { + color: "error", + }, + }, + }, +}); + +const textareaStyle = cva({ + base: { + borderRadius: "sm", + borderWidth: "button", + paddingX: "sm", + paddingY: "xs", + textStyle: "body1", + height: "2.625rem", + maxHeight: "7.5rem", + overflowY: "hidden", + resize: "none", + _placeholder: { + color: "outline", + }, + _focus: { + outline: "none", + }, + _scrollbar: { + width: "2px", + }, + _scrollbarThumb: { + width: "2px", + height: "65px", + borderRadius: "sm", + backgroundColor: "outline", + }, + _scrollbarTrack: { + marginTop: "2px", + marginBottom: "2px", + }, + }, + variants: { + type: { + default: { + borderColor: "outline", + color: "outline", + }, + typing: { + borderColor: "primary", + color: "textBlack", + }, + typed: { + borderColor: "sub", + color: "textBlack", + }, + success: { + borderColor: "success", + color: "textBlack", + }, + error: { + borderColor: "error", + color: "textBlack", + }, + }, + }, +}); + +const helperTextStyle = cva({ + base: { + textStyle: "body3", + }, + variants: { + type: { + default: { color: "sub" }, + typing: { color: "sub" }, + typed: { color: "sub" }, + success: { color: "success" }, + error: { color: "error" }, + }, + }, +}); diff --git a/packages/wow-ui/src/hooks/useTextareaAutosize.ts b/packages/wow-ui/src/hooks/useTextareaAutosize.ts new file mode 100644 index 00000000..5d472afd --- /dev/null +++ b/packages/wow-ui/src/hooks/useTextareaAutosize.ts @@ -0,0 +1,42 @@ +import { type RefObject, useEffect } from "react"; + +const TEXTAREA_LINE_HEIGHT = 2.625; +const MAX_TEXTAREA_HEIGHT = 120; + +export const useTextareaAutosize = (ref: RefObject) => { + useEffect(() => { + const textareaElement = ref.current; + if (!textareaElement) return; + + const placeholderLines = textareaElement.placeholder.split("\n").length; + const placeholderHeight = placeholderLines * TEXTAREA_LINE_HEIGHT; + + const setInitialHeight = () => { + textareaElement.style.height = `${placeholderHeight}rem`; + }; + + const handleResize = () => { + textareaElement.style.height = "auto"; + textareaElement.style.height = `${Math.max(placeholderHeight, textareaElement.scrollHeight)}px`; + }; + + const handleOverflow = () => { + textareaElement.style.overflowY = + textareaElement.scrollHeight > MAX_TEXTAREA_HEIGHT + ? "scroll" + : "hidden"; + }; + + setInitialHeight(); + handleResize(); + handleOverflow(); + + textareaElement.addEventListener("input", handleResize); + textareaElement.addEventListener("input", handleOverflow); + + return () => { + textareaElement.removeEventListener("input", handleResize); + textareaElement.removeEventListener("input", handleOverflow); + }; + }, [ref]); +}; diff --git a/packages/wow-ui/styled-system/css/conditions.js b/packages/wow-ui/styled-system/css/conditions.js index 33673f36..df6eed4e 100644 --- a/packages/wow-ui/styled-system/css/conditions.js +++ b/packages/wow-ui/styled-system/css/conditions.js @@ -1,7 +1,7 @@ import { withoutSpace } from "../helpers.js"; const conditionsStr = - "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_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,base"; + "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xsToSm,xsToMd,xsToLg,smToMd,smToLg,mdToLg,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base"; const conditions = new Set(conditionsStr.split(",")); export function isCondition(value) { diff --git a/packages/wow-ui/styled-system/css/css.js b/packages/wow-ui/styled-system/css/css.js index 1a2225fe..26dbe225 100644 --- a/packages/wow-ui/styled-system/css/css.js +++ b/packages/wow-ui/styled-system/css/css.js @@ -28,7 +28,7 @@ const context = { conditions: { shift: sortConditions, finalize: finalizeConditions, - breakpoints: { keys: ["base", "sm", "md", "lg", "xl", "2xl"] }, + breakpoints: { keys: ["base", "xs", "sm", "md", "lg"] }, }, utility: { transform: (prop, value) => { diff --git a/packages/wow-ui/styled-system/jsx/is-valid-prop.js b/packages/wow-ui/styled-system/jsx/is-valid-prop.js index 0cb2bac4..7ea7b401 100644 --- a/packages/wow-ui/styled-system/jsx/is-valid-prop.js +++ b/packages/wow-ui/styled-system/jsx/is-valid-prop.js @@ -2,7 +2,7 @@ import { splitProps } from "../helpers.js"; import { memo } from "../helpers.js"; // src/index.ts 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,insetInline,insetBlock,inset,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,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,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,transformOrigin,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,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,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_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"; + "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,insetInline,insetBlock,inset,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,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,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,transformOrigin,rotate,rotateX,rotateY,rotateZ,scale,scaleX,scaleY,translate,translateX,translateY,translateZ,accentColor,caretColor,scrollBehavior,scrollbar,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,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_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,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xsToSm,xsToMd,xsToLg,smToMd,smToLg,mdToLg,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle"; var userGenerated = userGeneratedStr.split(","); 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"; diff --git a/packages/wow-ui/styled-system/tokens/index.js b/packages/wow-ui/styled-system/tokens/index.js index f64f4759..13fd81a0 100644 --- a/packages/wow-ui/styled-system/tokens/index.js +++ b/packages/wow-ui/styled-system/tokens/index.js @@ -339,56 +339,48 @@ const tokens = { value: "1.2px", variable: "var(--border-widths-arrow)", }, + "breakpoints.xs": { + value: "360px", + variable: "var(--breakpoints-xs)", + }, "breakpoints.sm": { - value: "640px", + value: "600px", variable: "var(--breakpoints-sm)", }, "breakpoints.md": { - value: "768px", + value: "900px", variable: "var(--breakpoints-md)", }, "breakpoints.lg": { - value: "1024px", - variable: "var(--breakpoints-lg)", - }, - "breakpoints.xl": { value: "1280px", - variable: "var(--breakpoints-xl)", + variable: "var(--breakpoints-lg)", }, - "breakpoints.2xl": { - value: "1536px", - variable: "var(--breakpoints-2xl)", + "sizes.breakpoint-xs": { + value: "360px", + variable: "var(--sizes-breakpoint-xs)", }, "sizes.breakpoint-sm": { - value: "640px", + value: "600px", variable: "var(--sizes-breakpoint-sm)", }, "sizes.breakpoint-md": { - value: "768px", + value: "900px", variable: "var(--sizes-breakpoint-md)", }, "sizes.breakpoint-lg": { - value: "1024px", - variable: "var(--sizes-breakpoint-lg)", - }, - "sizes.breakpoint-xl": { value: "1280px", - variable: "var(--sizes-breakpoint-xl)", - }, - "sizes.breakpoint-2xl": { - value: "1536px", - variable: "var(--sizes-breakpoint-2xl)", + variable: "var(--sizes-breakpoint-lg)", }, "colors.primary": { value: "#368FF7", variable: "var(--colors-primary)", }, "colors.success": { - value: "#34A853", + value: "#2A8642", variable: "var(--colors-success)", }, "colors.error": { - value: "#EA4335", + value: "#BB362A", variable: "var(--colors-error)", }, "colors.backgroundNormal": { @@ -404,7 +396,7 @@ const tokens = { variable: "var(--colors-background-dimmer)", }, "colors.sub": { - value: "#8F8F8F", + value: "#6B6B6B", variable: "var(--colors-sub)", }, "colors.outline": { diff --git a/packages/wow-ui/styled-system/tokens/tokens.d.ts b/packages/wow-ui/styled-system/tokens/tokens.d.ts index 0b1546dc..73c94022 100644 --- a/packages/wow-ui/styled-system/tokens/tokens.d.ts +++ b/packages/wow-ui/styled-system/tokens/tokens.d.ts @@ -85,16 +85,14 @@ export type Token = | "radii.full" | "borderWidths.button" | "borderWidths.arrow" + | "breakpoints.xs" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" - | "breakpoints.xl" - | "breakpoints.2xl" + | "sizes.breakpoint-xs" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" - | "sizes.breakpoint-xl" - | "sizes.breakpoint-2xl" | "colors.primary" | "colors.success" | "colors.error" @@ -304,14 +302,13 @@ export type RadiusToken = "sm" | "md" | "full"; export type BorderWidthToken = "button" | "arrow"; -export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"; +export type BreakpointToken = "xs" | "sm" | "md" | "lg"; export type SizeToken = + | "breakpoint-xs" | "breakpoint-sm" | "breakpoint-md" - | "breakpoint-lg" - | "breakpoint-xl" - | "breakpoint-2xl"; + | "breakpoint-lg"; export type Tokens = { colors: ColorToken; diff --git a/packages/wow-ui/styled-system/types/conditions.d.ts b/packages/wow-ui/styled-system/types/conditions.d.ts index b2e811bb..c31b9f52 100644 --- a/packages/wow-ui/styled-system/types/conditions.d.ts +++ b/packages/wow-ui/styled-system/types/conditions.d.ts @@ -180,56 +180,42 @@ export interface Conditions { _vertical: string; /** `@starting-style` */ _starting: string; - /** `@media screen and (min-width: 40rem)` */ + /** `@media screen and (min-width: 22.5rem)` */ + xs: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 37.4975rem)` */ + xsOnly: string; + /** `@media screen and (max-width: 22.4975rem)` */ + xsDown: string; + /** `@media screen and (min-width: 37.5rem)` */ sm: string; - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + /** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */ smOnly: string; - /** `@media screen and (max-width: 39.9975rem)` */ + /** `@media screen and (max-width: 37.4975rem)` */ smDown: string; - /** `@media screen and (min-width: 48rem)` */ + /** `@media screen and (min-width: 56.25rem)` */ md: string; - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + /** `@media screen and (min-width: 56.25rem) and (max-width: 79.9975rem)` */ mdOnly: string; - /** `@media screen and (max-width: 47.9975rem)` */ + /** `@media screen and (max-width: 56.2475rem)` */ mdDown: string; - /** `@media screen and (min-width: 64rem)` */ + /** `@media screen and (min-width: 80rem)` */ lg: string; - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - lgOnly: string; - /** `@media screen and (max-width: 63.9975rem)` */ - lgDown: string; /** `@media screen and (min-width: 80rem)` */ - xl: string; - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - xlOnly: string; + lgOnly: string; /** `@media screen and (max-width: 79.9975rem)` */ - xlDown: string; - /** `@media screen and (min-width: 96rem)` */ - "2xl": string; - /** `@media screen and (min-width: 96rem)` */ - "2xlOnly": string; - /** `@media screen and (max-width: 95.9975rem)` */ - "2xlDown": string; - /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + lgDown: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 37.4975rem)` */ + xsToSm: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 56.2475rem)` */ + xsToMd: string; + /** `@media screen and (min-width: 22.5rem) and (max-width: 79.9975rem)` */ + xsToLg: string; + /** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */ smToMd: string; - /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ + /** `@media screen and (min-width: 37.5rem) and (max-width: 79.9975rem)` */ smToLg: string; - /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ - smToXl: string; - /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ - smTo2xl: string; - /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + /** `@media screen and (min-width: 56.25rem) and (max-width: 79.9975rem)` */ mdToLg: string; - /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ - mdToXl: string; - /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ - mdTo2xl: string; - /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ - lgToXl: string; - /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ - lgTo2xl: string; - /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ - xlTo2xl: string; /** `@container (min-width: 20rem)` */ "@/xs": string; /** `@container (min-width: 24rem)` */ From df5a7e9638f78a606fd0b8f9c2637b50a128d80c Mon Sep 17 00:00:00 2001 From: SeieunYoo <101736358+SeieunYoo@users.noreply.github.com> Date: Mon, 10 Jun 2024 19:52:05 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[Fix]=20:=20Checkbox=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20pressed,=20cursor=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20(#47)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: data-pressed 수정, cursor 수정 * fix : pressed 값에 따라 스프레드 연산자 사용 --- packages/wow-ui/src/components/Checkbox/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/Checkbox/index.tsx b/packages/wow-ui/src/components/Checkbox/index.tsx index 1f723d4f..9ccf41f2 100644 --- a/packages/wow-ui/src/components/Checkbox/index.tsx +++ b/packages/wow-ui/src/components/Checkbox/index.tsx @@ -103,7 +103,7 @@ const Checkbox = forwardRef( aria-checked={checked} aria-disabled={disabled} aria-label={inputProps?.["aria-label"] ?? "checkbox"} - data-pressed={pressed} + {...(pressed && { "data-pressed": true })} id={id} ref={ref} tabIndex={0} @@ -148,6 +148,7 @@ const checkboxStyle = cva({ alignItems: "center", outline: "none", position: "relative", + cursor: "inherit", }, variants: { type: {