Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ui-box

Package Overview
Dependencies
Maintainers
225
Versions
61
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ui-box - npm Package Compare versions

Comparing version 5.2.1 to 5.3.0

dist/src/enhancers/animation.d.ts
dist/src/enhancers/animation.js
dist/src/keyframes.d.ts
dist/src/keyframes.js
dist/src/types/keyframes.d.ts
dist/src/types/keyframes.js
dist/src/utils/flatten-object.d.ts
dist/src/utils/flatten-object.js
dist/src/utils/is-production.d.ts
dist/src/utils/is-production.js

4

dist/src/enhance-props.d.ts

@@ -5,7 +5,7 @@ /// <reference types="react" />

declare type PreservedProps = Without<React.ComponentProps<any>, keyof EnhancerProps>;
interface EnhancedPropsResult {
interface EnhancePropsResult {
className: string;
enhancedProps: PreservedProps;
}
export default function enhanceProps(props: EnhancerProps & React.ComponentPropsWithoutRef<any>, selectorHead?: string, parentProperty?: string): EnhancedPropsResult;
export default function enhanceProps(props: EnhancerProps & React.ComponentPropsWithoutRef<any>, selectorHead?: string, parentProperty?: string): EnhancePropsResult;
export {};

3

dist/src/enhancers/index.d.ts

@@ -0,1 +1,2 @@

import * as animation from './animation';
import * as background from './background';

@@ -21,3 +22,3 @@ import * as borderRadius from './border-radius';

import { PropValidators, PropEnhancers, PropAliases, PropTypesMapping } from '../types/enhancers';
export { background, borderRadius, borders, boxShadow, dimensions, flex, grid, interaction, layout, list, opacity, outline, overflow, position, resize, spacing, text, transform, transition };
export { animation, background, borderRadius, borders, boxShadow, dimensions, flex, grid, interaction, layout, list, opacity, outline, overflow, position, resize, spacing, text, transform, transition };
export declare const propTypes: PropTypesMapping;

@@ -24,0 +25,0 @@ export declare const propNames: string[];

10

dist/src/enhancers/index.js

@@ -10,2 +10,4 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
const animation = __importStar(require("./animation"));
exports.animation = animation;
const background = __importStar(require("./background"));

@@ -49,6 +51,6 @@ exports.background = background;

exports.transition = transition;
exports.propTypes = Object.assign({}, background.propTypes, borderRadius.propTypes, borders.propTypes, boxShadow.propTypes, dimensions.propTypes, flex.propTypes, grid.propTypes, interaction.propTypes, layout.propTypes, list.propTypes, opacity.propTypes, outline.propTypes, overflow.propTypes, position.propTypes, resize.propTypes, spacing.propTypes, text.propTypes, transform.propTypes, transition.propTypes);
exports.propTypes = Object.assign({}, animation.propTypes, background.propTypes, borderRadius.propTypes, borders.propTypes, boxShadow.propTypes, dimensions.propTypes, flex.propTypes, grid.propTypes, interaction.propTypes, layout.propTypes, list.propTypes, opacity.propTypes, outline.propTypes, overflow.propTypes, position.propTypes, resize.propTypes, spacing.propTypes, text.propTypes, transform.propTypes, transition.propTypes);
exports.propNames = Object.keys(exports.propTypes);
exports.propAliases = Object.assign({}, background.propAliases, borderRadius.propAliases, borders.propAliases, boxShadow.propAliases, dimensions.propAliases, flex.propAliases, grid.propAliases, interaction.propAliases, layout.propAliases, list.propAliases, opacity.propAliases, outline.propAliases, overflow.propAliases, position.propAliases, resize.propAliases, spacing.propAliases, text.propAliases, transform.propAliases, transition.propAliases);
exports.propValidators = Object.assign({}, background.propValidators, borderRadius.propValidators, borders.propValidators, boxShadow.propValidators, dimensions.propValidators, flex.propValidators, grid.propValidators, interaction.propValidators, layout.propValidators, list.propValidators, opacity.propValidators, outline.propValidators, overflow.propValidators, position.propValidators, resize.propValidators, spacing.propValidators, text.propValidators, transform.propValidators, transition.propValidators);
exports.propEnhancers = Object.assign({}, background.propEnhancers, borderRadius.propEnhancers, borders.propEnhancers, boxShadow.propEnhancers, dimensions.propEnhancers, flex.propEnhancers, grid.propEnhancers, interaction.propEnhancers, layout.propEnhancers, list.propEnhancers, opacity.propEnhancers, outline.propEnhancers, overflow.propEnhancers, position.propEnhancers, resize.propEnhancers, spacing.propEnhancers, text.propEnhancers, transform.propEnhancers, transition.propEnhancers);
exports.propAliases = Object.assign({}, animation.propAliases, background.propAliases, borderRadius.propAliases, borders.propAliases, boxShadow.propAliases, dimensions.propAliases, flex.propAliases, grid.propAliases, interaction.propAliases, layout.propAliases, list.propAliases, opacity.propAliases, outline.propAliases, overflow.propAliases, position.propAliases, resize.propAliases, spacing.propAliases, text.propAliases, transform.propAliases, transition.propAliases);
exports.propValidators = Object.assign({}, animation.propValidators, background.propValidators, borderRadius.propValidators, borders.propValidators, boxShadow.propValidators, dimensions.propValidators, flex.propValidators, grid.propValidators, interaction.propValidators, layout.propValidators, list.propValidators, opacity.propValidators, outline.propValidators, overflow.propValidators, position.propValidators, resize.propValidators, spacing.propValidators, text.propValidators, transform.propValidators, transition.propValidators);
exports.propEnhancers = Object.assign({}, animation.propEnhancers, background.propEnhancers, borderRadius.propEnhancers, borders.propEnhancers, boxShadow.propEnhancers, dimensions.propEnhancers, flex.propEnhancers, grid.propEnhancers, interaction.propEnhancers, layout.propEnhancers, list.propEnhancers, opacity.propEnhancers, outline.propEnhancers, overflow.propEnhancers, position.propEnhancers, resize.propEnhancers, spacing.propEnhancers, text.propEnhancers, transform.propEnhancers, transition.propEnhancers);

29

dist/src/enhancers/layout.js

@@ -13,2 +13,3 @@ "use strict";

clearfix: prop_types_1.default.bool,
content: prop_types_1.default.string,
display: prop_types_1.default.string,

@@ -52,14 +53,24 @@ float: prop_types_1.default.string,

};
const clearfix = () => {
const className = `${get_class_name_1.getClassNamePrefix()}clearfix`;
const rules = [
{ property: 'display', value: 'table' },
{ property: 'clear', value: 'both' },
{ property: 'content', value: '""' }
];
const concatenatedRules = rules.map(rule => ` ${rule.property}: ${rule.value};`).join('\n');
const styles = `\n.${className}:before, .${className}:after {\n${concatenatedRules}\n}`;
return { className, rules, styles };
};
const content = {
className: 'cnt',
cssName: 'content',
jsName: 'content',
complexValue: true
};
exports.propEnhancers = {
boxSizing: (value, selector) => get_css_1.default(boxSizing, value, selector),
clear: (value, selector) => get_css_1.default(clear, value, selector),
clearfix: () => ({
className: `${get_class_name_1.getClassNamePrefix()}clearfix`,
styles: `
.${get_class_name_1.getClassNamePrefix()}clearfix:before, .${get_class_name_1.getClassNamePrefix()}clearfix:after {
display: table;
clear: both;
content: "";
}`
}),
clearfix,
content: (value, selector) => get_css_1.default(content, value, selector),
display: (value, selector) => get_css_1.default(display, value, selector),

@@ -66,0 +77,0 @@ float: (value, selector) => get_css_1.default(float, value, selector),

5

dist/src/get-css.js

@@ -9,2 +9,3 @@ "use strict";

const get_class_name_1 = __importDefault(require("./get-class-name"));
const is_production_1 = __importDefault(require("./utils/is-production"));
function getCss(propertyInfo, value, selector = '') {

@@ -30,3 +31,3 @@ let rules;

let styles;
if (process.env.NODE_ENV === 'production') {
if (is_production_1.default()) {
const rulesString = rules.map(rule => `${rule.property}:${rule.value}`).join(';');

@@ -42,4 +43,4 @@ styles = `.${className}${selector}{${rulesString}}`;

}
return { className, styles };
return { className, styles, rules };
}
exports.default = getCss;

2

dist/src/index.d.ts
import * as cache from './cache';
export { default } from './box';
export { default as keyframes } from './keyframes';
export { default as splitProps } from './utils/split-props';

@@ -8,2 +9,3 @@ export { default as splitBoxProps } from './utils/split-box-props';

export { BoxProps, BoxOwnProps, EnhancerProps, PropsOf, PolymorphicBoxProps, BoxComponent } from './types/box-types';
export { KeyframesPercentageKey, KeyframesPositionalKey, KeyframesTimeline, KeyframesTimelineKey } from './types/keyframes';
export { background, borderRadius, borders, boxShadow, dimensions, flex, interaction, layout, list, opacity, overflow, position, spacing, text, transform, propTypes, propNames, propAliases, propEnhancers } from './enhancers/index';

@@ -10,0 +12,0 @@ export declare const hydrate: typeof cache.hydrate;

2

dist/src/index.js

@@ -14,2 +14,4 @@ "use strict";

exports.default = box_1.default;
var keyframes_1 = require("./keyframes");
exports.keyframes = keyframes_1.default;
var split_props_1 = require("./utils/split-props");

@@ -16,0 +18,0 @@ exports.splitProps = split_props_1.default;

7

dist/src/types/enhancers.d.ts
import PropTypes from 'prop-types';
import * as CSS from 'csstype';
declare type CssProps = Pick<CSS.StandardProperties, 'alignContent' | 'alignItems' | 'alignSelf' | 'background' | 'backgroundBlendMode' | 'backgroundClip' | 'backgroundColor' | 'backgroundImage' | 'backgroundOrigin' | 'backgroundPosition' | 'backgroundRepeat' | 'backgroundSize' | 'border' | 'borderBottom' | 'borderBottomColor' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderColor' | 'borderLeft' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth' | 'borderRadius' | 'borderRight' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderStyle' | 'borderTop' | 'borderTopColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderTopStyle' | 'borderTopWidth' | 'borderWidth' | 'bottom' | 'boxShadow' | 'boxSizing' | 'clear' | 'color' | 'columnGap' | 'cursor' | 'display' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexFlow' | 'flexGrow' | 'flexShrink' | 'flexWrap' | 'float' | 'font' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontVariant' | 'fontWeight' | 'gap' | 'grid' | 'gridArea' | 'gridAutoColumns' | 'gridAutoFlow' | 'gridAutoRows' | 'gridColumn' | 'gridColumnEnd' | 'gridColumnStart' | 'gridRow' | 'gridRowEnd' | 'gridRowStart' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows' | 'height' | 'justifyContent' | 'justifyItems' | 'justifySelf' | 'left' | 'letterSpacing' | 'lineHeight' | 'listStyle' | 'listStyleImage' | 'listStylePosition' | 'listStyleType' | 'margin' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginTop' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'opacity' | 'order' | 'outline' | 'overflow' | 'overflowX' | 'overflowY' | 'padding' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'placeContent' | 'placeItems' | 'placeSelf' | 'pointerEvents' | 'position' | 'resize' | 'right' | 'rowGap' | 'textAlign' | 'textDecoration' | 'textOverflow' | 'textShadow' | 'textTransform' | 'top' | 'transform' | 'transformOrigin' | 'transition' | 'transitionDelay' | 'transitionDuration' | 'transitionProperty' | 'transitionTimingFunction' | 'userSelect' | 'verticalAlign' | 'visibility' | 'whiteSpace' | 'width' | 'wordBreak' | 'wordWrap' | 'zIndex'> & Pick<CSS.ObsoleteProperties, 'gridColumnGap' | 'gridGap' | 'gridRowGap'>;
declare type BoxCssProps<CP> = {
import { Rule } from '../prefixer';
export declare type CssProps = Pick<CSS.StandardProperties, 'alignContent' | 'alignItems' | 'alignSelf' | 'animation' | 'animationDelay' | 'animationDirection' | 'animationDuration' | 'animationFillMode' | 'animationIterationCount' | 'animationName' | 'animationPlayState' | 'animationTimingFunction' | 'background' | 'backgroundBlendMode' | 'backgroundClip' | 'backgroundColor' | 'backgroundImage' | 'backgroundOrigin' | 'backgroundPosition' | 'backgroundRepeat' | 'backgroundSize' | 'border' | 'borderBottom' | 'borderBottomColor' | 'borderBottomLeftRadius' | 'borderBottomRightRadius' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderColor' | 'borderLeft' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth' | 'borderRadius' | 'borderRight' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderStyle' | 'borderTop' | 'borderTopColor' | 'borderTopLeftRadius' | 'borderTopRightRadius' | 'borderTopStyle' | 'borderTopWidth' | 'borderWidth' | 'bottom' | 'boxShadow' | 'boxSizing' | 'clear' | 'color' | 'columnGap' | 'content' | 'cursor' | 'display' | 'flex' | 'flexBasis' | 'flexDirection' | 'flexFlow' | 'flexGrow' | 'flexShrink' | 'flexWrap' | 'float' | 'font' | 'fontFamily' | 'fontSize' | 'fontStyle' | 'fontVariant' | 'fontWeight' | 'gap' | 'grid' | 'gridArea' | 'gridAutoColumns' | 'gridAutoFlow' | 'gridAutoRows' | 'gridColumn' | 'gridColumnEnd' | 'gridColumnStart' | 'gridRow' | 'gridRowEnd' | 'gridRowStart' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows' | 'height' | 'justifyContent' | 'justifyItems' | 'justifySelf' | 'left' | 'letterSpacing' | 'lineHeight' | 'listStyle' | 'listStyleImage' | 'listStylePosition' | 'listStyleType' | 'margin' | 'marginBottom' | 'marginLeft' | 'marginRight' | 'marginTop' | 'maxHeight' | 'maxWidth' | 'minHeight' | 'minWidth' | 'opacity' | 'order' | 'outline' | 'overflow' | 'overflowX' | 'overflowY' | 'padding' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'placeContent' | 'placeItems' | 'placeSelf' | 'pointerEvents' | 'position' | 'resize' | 'right' | 'rowGap' | 'textAlign' | 'textDecoration' | 'textOverflow' | 'textShadow' | 'textTransform' | 'top' | 'transform' | 'transformOrigin' | 'transition' | 'transitionDelay' | 'transitionDuration' | 'transitionProperty' | 'transitionTimingFunction' | 'userSelect' | 'verticalAlign' | 'visibility' | 'whiteSpace' | 'width' | 'wordBreak' | 'wordWrap' | 'zIndex'> & Pick<CSS.ObsoleteProperties, 'gridColumnGap' | 'gridGap' | 'gridRowGap'>;
export declare type BoxCssProps<CP> = {
[P in keyof CP]: CP[P] | number | false | null | undefined;

@@ -33,4 +34,4 @@ };

className: string;
rules: Rule[];
styles: string;
}
export {};

9

dist/src/utils/style-sheet.js
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const is_production_1 = __importDefault(require("./is-production"));
const isBrowser = typeof window !== 'undefined';

@@ -31,5 +35,3 @@ function last(arr) {

this.injected = false;
this.isSpeedy = options.speedy === undefined
? process.env.NODE_ENV === 'production'
: options.speedy;
this.isSpeedy = options.speedy === undefined ? is_production_1.default() : options.speedy;
this.maxLength = options.maxLength || 65000;

@@ -51,2 +53,3 @@ }

insertRule: (rule) => {
;
this.sheet.cssRules.push({ cssText: rule });

@@ -53,0 +56,0 @@ }

4

package.json
{
"name": "ui-box",
"version": "5.2.1",
"version": "5.3.0",
"description": "Blazing Fast React UI Primitive",

@@ -164,3 +164,3 @@ "contributors": [

"path": "dist/src/index.js",
"limit": "50 KB",
"limit": "55 KB",
"running": false,

@@ -167,0 +167,0 @@ "gzip": false

40

README.md

@@ -96,2 +96,11 @@ <div align="center">

- `alignSelf`
- `animation`
- `animationDelay`
- `animationDirection`
- `animationDuration`
- `animationFillMode`
- `animationIterationCount`
- `animationName`
- `animationPlayState`
- `animationTimingFunction`
- `background`

@@ -137,2 +146,3 @@ - `backgroundBlendMode`

- `columnGap`
- `content`
- `cursor`

@@ -274,2 +284,31 @@ - `display`

#### keyframes(name, timeline)
Function for generating an animation keyframe name and injecting the provided styles into the stylesheet. The `timeline` object is in the shape of `{ 'from' | 'to' | [0-100]: CssProps }` which define the styles to apply at each position of the animation. Returns the generated name for use with the `animation` or `animationName` props.
```tsx
import Box, { keyframes } from 'ui-box'
const openAnimation = keyframes('openAnimation', {
from: {
opacity: 0,
transform: 'translateY(-120%)'
},
to: {
transform: 'translateY(0)'
}
})
const AnimatedBox = () => <Box animation={`${openAnimation} 240ms cubic-bezier(0.175, 0.885, 0.320, 1.175)`} />
// Equivalent using individual props:
const AnimatedBox = () => (
<Box
animationName={openAnimation}
animationDuration={240}
animationTimingFunction="cubic-bezier(0.175, 0.885, 0.320, 1.175)"
/>
)
```
#### propTypes

@@ -295,2 +334,3 @@

- `animation`
- `background`

@@ -297,0 +337,0 @@ - `borderRadius`

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc