-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
126 changed files
with
34,183 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { withoutSpace } from '../helpers.mjs'; | ||
|
||
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,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) | ||
} | ||
|
||
const underscoreRegex = /^_/ | ||
const conditionsSelectorRegex = /&|@/ | ||
|
||
export function finalizeConditions(paths){ | ||
return paths.map((path) => { | ||
if (conditions.has(path)){ | ||
return path.replace(underscoreRegex, '') | ||
} | ||
|
||
if (conditionsSelectorRegex.test(path)){ | ||
return `[${withoutSpace(path.trim())}]` | ||
} | ||
|
||
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 | ||
}) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
/* eslint-disable */ | ||
import type { SystemStyleObject } from '../types/index'; | ||
|
||
interface CssFunction { | ||
(...styles: Array<SystemStyleObject | undefined | null | false>): string | ||
raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject | ||
} | ||
|
||
export declare const css: CssFunction; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs'; | ||
import { sortConditions, finalizeConditions } from './conditions.mjs'; | ||
|
||
const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:object,objectFit:object,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,outlineWidth:ring/ringWidth,outlineColor:ring/ringColor,outline:ring/1,outlineOffset:ring/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide,divideStyle:divide,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:font,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text,textDecoration:text-decor,textDecorationColor:text-decor,textEmphasisColor:text-emphasis,textDecorationStyle:decoration,textDecorationThickness:decoration,textUnderlineOffset:underline-offset,textTransform:text,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text,verticalAlign:align,wordBreak:break,textWrap:text,truncate:truncate,lineClamp:clamp,listStyleType:list,listStylePosition:list,listStyleImage:list-img,backgroundPosition:bg/bgPosition,backgroundPositionX:bg-x/bgPositionX,backgroundPositionY:bg-y/bgPositionY,backgroundAttachment:bg/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/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFrom:from,gradientTo:to,gradientVia:via,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/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,animationDelay:animation-delay,transformOrigin:origin,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,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,scrollSnapStop:snap,scrollSnapType:snap,scrollSnapStrictness: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-size-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) | ||
if (shorthandList.length) { | ||
shorthandList.forEach((shorthand) => { | ||
shorthands.set(shorthand === '1' ? className : shorthand, prop) | ||
}) | ||
} | ||
}) | ||
|
||
const resolveShorthand = (prop) => shorthands.get(prop) || prop | ||
|
||
const context = { | ||
|
||
conditions: { | ||
shift: sortConditions, | ||
finalize: finalizeConditions, | ||
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)}` } | ||
}, | ||
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) | ||
|
||
export const { mergeCss, assignCss } = createMergeCss(context) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/* eslint-disable */ | ||
import type { RecipeCreatorFn } from '../types/recipe'; | ||
|
||
export declare const cva: RecipeCreatorFn | ||
|
||
export type { RecipeVariant, RecipeVariantProps } from '../types/recipe'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,85 @@ | ||
import { compact, mergeProps, memo, splitProps, uniq } from '../helpers.mjs'; | ||
import { css, mergeCss } from './css.mjs'; | ||
|
||
const defaults = (conf) => ({ | ||
base: {}, | ||
variants: {}, | ||
defaultVariants: {}, | ||
compoundVariants: [], | ||
...conf, | ||
}) | ||
|
||
export function cva(config) { | ||
const { base, variants, defaultVariants, compoundVariants } = defaults(config) | ||
|
||
function resolve(props = {}) { | ||
const computedVariants = { ...defaultVariants, ...compact(props) } | ||
let variantCss = { ...base } | ||
for (const [key, value] of Object.entries(computedVariants)) { | ||
if (variants[key]?.[value]) { | ||
variantCss = mergeCss(variantCss, variants[key][value]) | ||
} | ||
} | ||
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)) | ||
return cva({ | ||
base: mergeCss(base, override.base), | ||
variants: Object.fromEntries( | ||
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)) | ||
} | ||
|
||
const variantKeys = Object.keys(variants) | ||
|
||
function splitVariantProps(props) { | ||
return splitProps(props, variantKeys) | ||
} | ||
|
||
const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])) | ||
|
||
return Object.assign(memo(cvaFn), { | ||
__cva__: true, | ||
variantMap, | ||
variantKeys, | ||
raw: resolve, | ||
config, | ||
merge, | ||
splitVariantProps, | ||
}) | ||
} | ||
|
||
export function getCompoundVariantCss(compoundVariants, variantMap) { | ||
let result = {} | ||
compoundVariants.forEach((compoundVariant) => { | ||
const isMatching = Object.entries(compoundVariant).every(([key, value]) => { | ||
if (key === 'css') return true | ||
|
||
const values = Array.isArray(value) ? value : [value] | ||
return values.some((value) => variantMap[key] === value) | ||
}) | ||
|
||
if (isMatching) { | ||
result = mergeCss(result, compoundVariant.css) | ||
} | ||
}) | ||
|
||
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.`) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/* eslint-disable */ | ||
type Argument = string | boolean | null | undefined | ||
|
||
/** Conditionally join classNames into a single string */ | ||
export declare function cx(...args: Argument[]): string |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
function cx() { | ||
let str = '', | ||
i = 0, | ||
arg | ||
|
||
for (; i < arguments.length; ) { | ||
if ((arg = arguments[i++]) && typeof arg === 'string') { | ||
str && (str += ' ') | ||
str += arg | ||
} | ||
} | ||
return str | ||
} | ||
|
||
export { cx } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
/* eslint-disable */ | ||
export * from './css'; | ||
export * from './cx'; | ||
export * from './cva'; | ||
export * from './sva'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export * from './css.mjs'; | ||
export * from './cx.mjs'; | ||
export * from './cva.mjs'; | ||
export * from './sva.mjs'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
/* eslint-disable */ | ||
import type { SlotRecipeCreatorFn } from '../types/recipe'; | ||
|
||
export declare const sva: SlotRecipeCreatorFn |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { getSlotRecipes, memo, splitProps } from '../helpers.mjs'; | ||
import { cva } from './cva.mjs'; | ||
import { cx } from './cx.mjs'; | ||
|
||
const slotClass = (className, slot) => className + '__' + slot | ||
|
||
export function sva(config) { | ||
const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)]) | ||
|
||
function svaFn(props) { | ||
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 variants = config.variants ?? {}; | ||
const variantKeys = Object.keys(variants); | ||
|
||
function splitVariantProps(props) { | ||
return splitProps(props, variantKeys); | ||
} | ||
|
||
const variantMap = Object.fromEntries( | ||
Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) | ||
); | ||
|
||
return Object.assign(memo(svaFn), { | ||
__cva__: false, | ||
raw, | ||
variantMap, | ||
variantKeys, | ||
splitVariantProps, | ||
}) | ||
} |
Oops, something went wrong.