Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
magic-components
Advanced tools
magic-components - npm Package Compare versions
Comparing version 0.0.1-beta.9 to 0.0.1-beta.10
@@ -0,1 +1,119 @@ | ||
| const elements = [ | ||
| "a", | ||
| "abbr", | ||
| "address", | ||
| "area", | ||
| "article", | ||
| "aside", | ||
| "audio", | ||
| "b", | ||
| "base", | ||
| "bdi", | ||
| "bdo", | ||
| "big", | ||
| "blockquote", | ||
| "body", | ||
| "br", | ||
| "button", | ||
| "canvas", | ||
| "caption", | ||
| "cite", | ||
| "code", | ||
| "col", | ||
| "colgroup", | ||
| "data", | ||
| "datalist", | ||
| "dd", | ||
| "del", | ||
| "details", | ||
| "dfn", | ||
| "dialog", | ||
| "div", | ||
| "dl", | ||
| "dt", | ||
| "em", | ||
| "embed", | ||
| "fieldset", | ||
| "figcaption", | ||
| "figure", | ||
| "footer", | ||
| "form", | ||
| "h1", | ||
| "h2", | ||
| "h3", | ||
| "h4", | ||
| "h5", | ||
| "h6", | ||
| "head", | ||
| "header", | ||
| "hgroup", | ||
| "hr", | ||
| "html", | ||
| "i", | ||
| "iframe", | ||
| "img", | ||
| "input", | ||
| "ins", | ||
| "kbd", | ||
| "keygen", | ||
| "label", | ||
| "legend", | ||
| "li", | ||
| "link", | ||
| "main", | ||
| "map", | ||
| "mark", | ||
| "menu", | ||
| "menuitem", | ||
| "meta", | ||
| "meter", | ||
| "nav", | ||
| "noscript", | ||
| "object", | ||
| "ol", | ||
| "optgroup", | ||
| "option", | ||
| "output", | ||
| "p", | ||
| "param", | ||
| "picture", | ||
| "pre", | ||
| "progress", | ||
| "q", | ||
| "rp", | ||
| "rt", | ||
| "ruby", | ||
| "s", | ||
| "svg", | ||
| "samp", | ||
| "script", | ||
| "section", | ||
| "select", | ||
| "small", | ||
| "source", | ||
| "span", | ||
| "strong", | ||
| "style", | ||
| "sub", | ||
| "summary", | ||
| "sup", | ||
| "table", | ||
| "tbody", | ||
| "td", | ||
| "textarea", | ||
| "tfoot", | ||
| "th", | ||
| "thead", | ||
| "time", | ||
| "title", | ||
| "tr", | ||
| "track", | ||
| "u", | ||
| "ul", | ||
| "var", | ||
| "video", | ||
| "wbr", | ||
| "webview", | ||
| ]; | ||
| module.exports = function babelMagic(babel) { | ||
@@ -28,3 +146,3 @@ const { types: t } = babel; | ||
| t.isJSXIdentifier(path.node.name) && | ||
| // elements.includes(path.node.name.name) && | ||
| elements.includes(path.node.name.name) && | ||
| isLower(path.node.name.name.charAt(0)) | ||
@@ -31,0 +149,0 @@ ); |
@@ -15,11 +15,419 @@ import * as CSS from "csstype"; | ||
| export declare function px(value: string | number, scale: any): string; | ||
| export declare const background: ConfigObject; | ||
| export declare const border: ConfigObject; | ||
| export declare const color: ConfigObject; | ||
| export declare const typography: ConfigObject; | ||
| export declare const flexbox: ConfigObject; | ||
| export declare const grid: ConfigObject; | ||
| export declare const layout: ConfigObject; | ||
| export declare const others: ConfigObject; | ||
| export declare const position: ConfigObject; | ||
| export declare const background: { | ||
| bg: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| bgColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| background: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| backgroundColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| backgroundImage: boolean; | ||
| backgroundSize: boolean; | ||
| backgroundPosition: boolean; | ||
| backgroundRepeat: boolean; | ||
| backgroundAttachment: boolean; | ||
| bgImage: { | ||
| property: string; | ||
| }; | ||
| bgSize: { | ||
| property: string; | ||
| }; | ||
| bgPosition: { | ||
| property: string; | ||
| }; | ||
| bgRepeat: { | ||
| property: string; | ||
| }; | ||
| bgAttachment: { | ||
| property: string; | ||
| }; | ||
| }; | ||
| export declare const border: { | ||
| border: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderTop: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderTopLeftRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderTopRightRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderRight: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderBottom: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderBottomLeftRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderBottomRightRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderLeft: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderX: { | ||
| properties: string[]; | ||
| scale: string; | ||
| }; | ||
| borderY: { | ||
| properties: string[]; | ||
| scale: string; | ||
| }; | ||
| borderTopWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderTopColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderTopStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderBottomWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderBottomColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderBottomStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderLeftWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderLeftColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderLeftStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderRightWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderRightColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderRightStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderTopRadius: { | ||
| properties: string[]; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderBottomRadius: { | ||
| properties: string[]; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderLeftRadius: { | ||
| properties: string[]; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderRightRadius: { | ||
| properties: string[]; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| }; | ||
| export declare const color: { | ||
| color: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| textColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| opacity: boolean; | ||
| fill: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| stroke: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| outline: boolean; | ||
| outlineOffset: boolean; | ||
| outlineColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| }; | ||
| export declare const typography: { | ||
| fontFamily: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| fontSize: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof px; | ||
| }; | ||
| fontWeight: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| lineHeight: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| letterSpacing: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| textAlign: boolean; | ||
| fontStyle: boolean; | ||
| wordBreak: boolean; | ||
| overflowWrap: boolean; | ||
| textOverflow: boolean; | ||
| textTransform: boolean; | ||
| whiteSpace: boolean; | ||
| textDecoration: { | ||
| property: string; | ||
| }; | ||
| textDecor: { | ||
| property: string; | ||
| }; | ||
| }; | ||
| export declare const flexbox: { | ||
| alignItems: boolean; | ||
| alignContent: boolean; | ||
| justifyItems: boolean; | ||
| justifyContent: boolean; | ||
| flexWrap: boolean; | ||
| flexDirection: boolean; | ||
| flex: boolean; | ||
| flexGrow: boolean; | ||
| flexShrink: boolean; | ||
| flexBasis: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| justifySelf: boolean; | ||
| alignSelf: boolean; | ||
| order: boolean; | ||
| flexDir: { | ||
| property: string; | ||
| }; | ||
| }; | ||
| export declare const grid: { | ||
| gridGap: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof px; | ||
| }; | ||
| gridColumnGap: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof px; | ||
| }; | ||
| gridRowGap: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof px; | ||
| }; | ||
| gridColumn: boolean; | ||
| gridRow: boolean; | ||
| gridAutoFlow: boolean; | ||
| gridAutoColumns: boolean; | ||
| gridAutoRows: boolean; | ||
| gridTemplateColumns: boolean; | ||
| gridTemplateRows: boolean; | ||
| gridTemplateAreas: boolean; | ||
| gridArea: boolean; | ||
| placeItems: boolean; | ||
| }; | ||
| declare function transformPercentageOrPx(value: any, scale: any): string | { | ||
| [x: string]: any; | ||
| }; | ||
| export declare const layout: { | ||
| width: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof transformPercentageOrPx; | ||
| }; | ||
| w: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof transformPercentageOrPx; | ||
| }; | ||
| height: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| h: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| minWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| minW: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| minHeight: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| minH: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| maxWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| maxW: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| maxHeight: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| maxH: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| overflow: boolean; | ||
| overflowX: boolean; | ||
| overflowY: boolean; | ||
| display: boolean; | ||
| verticalAlign: boolean; | ||
| boxSizing: boolean; | ||
| }; | ||
| export declare const others: { | ||
| animation: boolean; | ||
| appearance: boolean; | ||
| transform: boolean; | ||
| transformOrigin: boolean; | ||
| visibility: boolean; | ||
| userSelect: boolean; | ||
| pointerEvents: boolean; | ||
| cursor: boolean; | ||
| resize: boolean; | ||
| transition: boolean; | ||
| objectFit: boolean; | ||
| objectPosition: boolean; | ||
| float: boolean; | ||
| willChange: boolean; | ||
| listStyleType: boolean; | ||
| listStylePosition: boolean; | ||
| listStyleImage: boolean; | ||
| }; | ||
| export declare const position: { | ||
| position: boolean; | ||
| pos: { | ||
| property: string; | ||
| }; | ||
| zIndex: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| top: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| right: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| bottom: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| left: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| }; | ||
| export declare const shadow: { | ||
@@ -35,4 +443,341 @@ boxShadow: { | ||
| }; | ||
| export declare const space: ConfigObject; | ||
| export declare const space: { | ||
| margin: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| m: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginTop: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| mt: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginRight: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| mr: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginBottom: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| mb: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginLeft: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| ml: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginX: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| mx: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginY: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| my: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| padding: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| p: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingTop: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| pt: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingRight: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| pr: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingBottom: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| pb: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingLeft: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| pl: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingX: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof px; | ||
| }; | ||
| px: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof px; | ||
| }; | ||
| paddingY: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof px; | ||
| }; | ||
| py: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof px; | ||
| }; | ||
| }; | ||
| export declare const allConfig: { | ||
| margin: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| m: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginTop: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| mt: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginRight: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| mr: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginBottom: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| mb: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginLeft: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| ml: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginX: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| mx: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| marginY: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| my: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| padding: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| p: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingTop: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| pt: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingRight: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| pr: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingBottom: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| pb: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingLeft: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| pl: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| property: string; | ||
| transform: typeof px; | ||
| }; | ||
| paddingX: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof px; | ||
| }; | ||
| px: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof px; | ||
| }; | ||
| paddingY: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof px; | ||
| }; | ||
| py: { | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| properties: string[]; | ||
| transform: typeof px; | ||
| }; | ||
| boxShadow: { | ||
@@ -46,2 +791,400 @@ property: string; | ||
| }; | ||
| position: boolean; | ||
| pos: { | ||
| property: string; | ||
| }; | ||
| zIndex: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| top: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| right: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| bottom: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| left: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof positiveOrNegativePx; | ||
| }; | ||
| animation: boolean; | ||
| appearance: boolean; | ||
| transform: boolean; | ||
| transformOrigin: boolean; | ||
| visibility: boolean; | ||
| userSelect: boolean; | ||
| pointerEvents: boolean; | ||
| cursor: boolean; | ||
| resize: boolean; | ||
| transition: boolean; | ||
| objectFit: boolean; | ||
| objectPosition: boolean; | ||
| float: boolean; | ||
| willChange: boolean; | ||
| listStyleType: boolean; | ||
| listStylePosition: boolean; | ||
| listStyleImage: boolean; | ||
| width: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof transformPercentageOrPx; | ||
| }; | ||
| w: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof transformPercentageOrPx; | ||
| }; | ||
| height: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| h: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| minWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| minW: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| minHeight: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| minH: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| maxWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| maxW: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| maxHeight: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| maxH: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| overflow: boolean; | ||
| overflowX: boolean; | ||
| overflowY: boolean; | ||
| display: boolean; | ||
| verticalAlign: boolean; | ||
| boxSizing: boolean; | ||
| gridGap: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof px; | ||
| }; | ||
| gridColumnGap: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof px; | ||
| }; | ||
| gridRowGap: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof px; | ||
| }; | ||
| gridColumn: boolean; | ||
| gridRow: boolean; | ||
| gridAutoFlow: boolean; | ||
| gridAutoColumns: boolean; | ||
| gridAutoRows: boolean; | ||
| gridTemplateColumns: boolean; | ||
| gridTemplateRows: boolean; | ||
| gridTemplateAreas: boolean; | ||
| gridArea: boolean; | ||
| placeItems: boolean; | ||
| alignItems: boolean; | ||
| alignContent: boolean; | ||
| justifyItems: boolean; | ||
| justifyContent: boolean; | ||
| flexWrap: boolean; | ||
| flexDirection: boolean; | ||
| flex: boolean; | ||
| flexGrow: boolean; | ||
| flexShrink: boolean; | ||
| flexBasis: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| justifySelf: boolean; | ||
| alignSelf: boolean; | ||
| order: boolean; | ||
| flexDir: { | ||
| property: string; | ||
| }; | ||
| fontFamily: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| fontSize: { | ||
| property: string; | ||
| scale: string; | ||
| fallbackScale: number[]; | ||
| transform: typeof px; | ||
| }; | ||
| fontWeight: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| lineHeight: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| letterSpacing: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| textAlign: boolean; | ||
| fontStyle: boolean; | ||
| wordBreak: boolean; | ||
| overflowWrap: boolean; | ||
| textOverflow: boolean; | ||
| textTransform: boolean; | ||
| whiteSpace: boolean; | ||
| textDecoration: { | ||
| property: string; | ||
| }; | ||
| textDecor: { | ||
| property: string; | ||
| }; | ||
| color: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| textColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| opacity: boolean; | ||
| fill: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| stroke: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| outline: boolean; | ||
| outlineOffset: boolean; | ||
| outlineColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| border: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderTop: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderTopLeftRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderTopRightRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderRight: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderBottom: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderBottomLeftRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderBottomRightRadius: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderLeft: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderX: { | ||
| properties: string[]; | ||
| scale: string; | ||
| }; | ||
| borderY: { | ||
| properties: string[]; | ||
| scale: string; | ||
| }; | ||
| borderTopWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderTopColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderTopStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderBottomWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderBottomColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderBottomStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderLeftWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderLeftColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderLeftStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderRightWidth: { | ||
| property: string; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderRightColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderRightStyle: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| borderTopRadius: { | ||
| properties: string[]; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderBottomRadius: { | ||
| properties: string[]; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderLeftRadius: { | ||
| properties: string[]; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| borderRightRadius: { | ||
| properties: string[]; | ||
| scale: string; | ||
| transform: typeof px; | ||
| }; | ||
| bg: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| bgColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| background: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| backgroundColor: { | ||
| property: string; | ||
| scale: string; | ||
| }; | ||
| backgroundImage: boolean; | ||
| backgroundSize: boolean; | ||
| backgroundPosition: boolean; | ||
| backgroundRepeat: boolean; | ||
| backgroundAttachment: boolean; | ||
| bgImage: { | ||
| property: string; | ||
| }; | ||
| bgSize: { | ||
| property: string; | ||
| }; | ||
| bgPosition: { | ||
| property: string; | ||
| }; | ||
| bgRepeat: { | ||
| property: string; | ||
| }; | ||
| bgAttachment: { | ||
| property: string; | ||
| }; | ||
| }; | ||
| export declare type StyleProps = keyof typeof allConfig; | ||
| export {}; |
| import * as CSS from "csstype"; | ||
| import { MotionProps } from 'framer-motion'; | ||
| import * as Other from 'react'; | ||
| import { MotionProps } from "framer-motion"; | ||
| import * as Other from "react"; | ||
| import { StyleProps } from "./style-config"; | ||
| declare global { | ||
@@ -13,5 +14,8 @@ type ResponsiveValue<T> = T | T[]; | ||
| }; | ||
| interface HTMLAttributes<T> extends CSSPropertiesWithMultiValues, Motion<T> { | ||
| type HTMLStyleProps = { | ||
| [K in Exclude<StyleProps, keyof CSS.Properties<any>>]?: string | number | string[] | number[]; | ||
| }; | ||
| interface HTMLAttributes<T> extends CSSPropertiesWithMultiValues, Motion<T>, HTMLStyleProps { | ||
| } | ||
| } | ||
| } |
| { | ||
| "name": "magic-components", | ||
| "version": "0.0.1-beta.9", | ||
| "version": "0.0.1-beta.10", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "repository": "Nikhil Saraf/magic-components", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by9.94%
288273
- Lines of code
- increased by100.72%
2519
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes