@nimbus-ds/box 2.1.0 → 2.2.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/index.d.ts +54 -7
- package/dist/index.js +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
A low-level utility component that accepts styled system props to enable custom theme-aware styling
|
|
4
4
|
|
|
5
|
+
## 2023-02-08 `2.2.0`
|
|
6
|
+
|
|
7
|
+
### 🎉 New features
|
|
8
|
+
|
|
9
|
+
- Added polymorphic typing support to component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
10
|
+
- Added `as` property to the Component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
11
|
+
- Added `auto` margin properties to the Component. ([#81](https://github.com/TiendaNube/nimbus-design-system/pull/81) by [@juniorconquista](https://github.com/juniorconquista))
|
|
12
|
+
|
|
5
13
|
## 2023-01-31 `2.1.0`
|
|
6
14
|
|
|
7
15
|
### 🎉 New features
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,34 @@
|
|
|
1
1
|
// Generated by dts-bundle-generator v7.1.0
|
|
2
2
|
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import {
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
5
5
|
|
|
6
|
+
export type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2;
|
|
7
|
+
export type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {
|
|
8
|
+
as?: E;
|
|
9
|
+
}>>;
|
|
10
|
+
export interface PolymorphicForwardRefComponent<IntrinsicElementString, OwnProps = {}
|
|
11
|
+
/**
|
|
12
|
+
* Extends original type to ensure built in React types play nice
|
|
13
|
+
* with polymorphic components still e.g. `React.ElementRef` etc.
|
|
14
|
+
*/
|
|
15
|
+
> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
|
|
16
|
+
/**
|
|
17
|
+
* When `as` prop is passed, use this overload.
|
|
18
|
+
* Merges original own props (without DOM props) and the inferred props
|
|
19
|
+
* from `as` element with the own props taking precendence.
|
|
20
|
+
*
|
|
21
|
+
* We explicitly avoid `React.ElementType` and manually narrow the prop types
|
|
22
|
+
* so that events are typed when using JSX.IntrinsicElements.
|
|
23
|
+
*/
|
|
24
|
+
<As = IntrinsicElementString>(props: As extends "" ? {
|
|
25
|
+
as: keyof JSX.IntrinsicElements;
|
|
26
|
+
} : As extends React.ComponentType<infer P> ? Merge<P, OwnProps & {
|
|
27
|
+
as: As;
|
|
28
|
+
}> : As extends keyof JSX.IntrinsicElements ? Merge<JSX.IntrinsicElements[As], OwnProps & {
|
|
29
|
+
as: As;
|
|
30
|
+
}> : never): React.ReactElement | null;
|
|
31
|
+
}
|
|
6
32
|
export interface Conditions<T> {
|
|
7
33
|
xs?: T;
|
|
8
34
|
md?: T;
|
|
@@ -73,6 +99,23 @@ declare const propertiesBox: {
|
|
|
73
99
|
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
74
100
|
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
75
101
|
};
|
|
102
|
+
margin: {
|
|
103
|
+
none: string;
|
|
104
|
+
"0,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
105
|
+
"1": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
106
|
+
"2": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
107
|
+
"2,5": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
108
|
+
"4": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
109
|
+
"6": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
110
|
+
"8": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
111
|
+
"10": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
112
|
+
"12": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
113
|
+
"14": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
114
|
+
"16": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
115
|
+
"18": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
116
|
+
"20": `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
|
|
117
|
+
auto: string;
|
|
118
|
+
};
|
|
76
119
|
position: Position[];
|
|
77
120
|
overflow: Overflow[];
|
|
78
121
|
overflowX: Overflow[];
|
|
@@ -81,6 +124,7 @@ declare const propertiesBox: {
|
|
|
81
124
|
export type BoxBorderColorProperties = keyof typeof propertiesBox.borderColor;
|
|
82
125
|
export type BoxBackgroundColorProperties = keyof typeof propertiesBox.backgroundColor;
|
|
83
126
|
export type BoxSpaceProperties = keyof typeof propertiesBox.space;
|
|
127
|
+
export type BoxMarginProperties = keyof typeof propertiesBox.margin;
|
|
84
128
|
export interface BoxSprinkle {
|
|
85
129
|
width?: string | Conditions<string>;
|
|
86
130
|
height?: string | Conditions<string>;
|
|
@@ -106,7 +150,7 @@ export interface BoxSprinkle {
|
|
|
106
150
|
paddingBottom?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
107
151
|
paddingLeft?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
108
152
|
paddingRight?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
109
|
-
margin?:
|
|
153
|
+
margin?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
110
154
|
marginTop?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
111
155
|
marginBottom?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
112
156
|
marginLeft?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
@@ -122,7 +166,7 @@ export interface BoxSprinkle {
|
|
|
122
166
|
py?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
123
167
|
marginX?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
124
168
|
marginY?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
125
|
-
m?:
|
|
169
|
+
m?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
126
170
|
mr?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
127
171
|
ml?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
128
172
|
mt?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
@@ -130,12 +174,15 @@ export interface BoxSprinkle {
|
|
|
130
174
|
mx?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
131
175
|
my?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
132
176
|
}
|
|
133
|
-
export
|
|
134
|
-
|
|
177
|
+
export interface BoxProps extends BoxSprinkle {
|
|
178
|
+
className?: string;
|
|
179
|
+
style?: CSSProperties;
|
|
135
180
|
/** Element to be rendered inside the Box component */
|
|
136
181
|
children?: ReactNode;
|
|
182
|
+
/** The underlying element to render — either a HTML element name or a React component. */
|
|
183
|
+
as?: any;
|
|
137
184
|
}
|
|
138
|
-
export declare const Box:
|
|
185
|
+
export declare const Box: PolymorphicForwardRefComponent<"div", BoxProps>;
|
|
139
186
|
|
|
140
187
|
export {
|
|
141
188
|
Box as default,
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles"],t):"object"==typeof exports?exports["@nimbus-ds/box"]=t(require("react"),require("@nimbus-ds/styles")):e["@nimbus-ds/box"]=t(e.react,e["@nimbus-ds/styles"])}(self,((e,t)=>(()=>{"use strict";var r={521:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Box=void 0;const n=r(15).
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/styles")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/styles"],t):"object"==typeof exports?exports["@nimbus-ds/box"]=t(require("react"),require("@nimbus-ds/styles")):e["@nimbus-ds/box"]=t(e.react,e["@nimbus-ds/styles"])}(self,((e,t)=>(()=>{"use strict";var r={521:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Box=void 0;const n=r(15).__importStar(r(156)),o=r(990),a=(0,n.forwardRef)((({className:e,style:t,as:r="div",...a},i)=>{const{className:c,style:u,otherProps:l}=o.box.sprinkle(a);return n.default.createElement(r,{ref:i,className:c,style:u,...l})}));t.Box=a,a.displayName="Box"},15:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>O,__asyncGenerator:()=>m,__asyncValues:()=>j,__await:()=>w,__awaiter:()=>f,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>E,__createBinding:()=>p,__decorate:()=>c,__exportStar:()=>y,__extends:()=>o,__generator:()=>s,__importDefault:()=>S,__importStar:()=>P,__makeTemplateObject:()=>g,__metadata:()=>l,__param:()=>u,__read:()=>b,__rest:()=>i,__spread:()=>v,__spreadArray:()=>_,__spreadArrays:()=>h,__values:()=>d});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function o(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function c(e,t,r,n){var o,a=arguments.length,i=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,n);else for(var c=e.length-1;c>=0;c--)(o=e[c])&&(i=(a<3?o(i):a>3?o(t,r,i):o(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function u(e,t){return function(r,n){t(r,n,e)}}function l(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function f(e,t,r,n){return new(r||(r=Promise))((function(o,a){function i(e){try{u(n.next(e))}catch(e){a(e)}}function c(e){try{u(n.throw(e))}catch(e){a(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,c)}u((n=n.apply(e,t||[])).next())}))}function s(e,t){var r,n,o,a,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(a){return function(c){return function(a){if(r)throw new TypeError("Generator is already executing.");for(;i;)try{if(r=1,n&&(o=2&a[0]?n.return:a[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,a[1])).done)return o;switch(n=0,o&&(a=[2&a[0],o.value]),a[0]){case 0:case 1:o=a;break;case 4:return i.label++,{value:a[1],done:!1};case 5:i.label++,n=a[1],a=[0];continue;case 7:a=i.ops.pop(),i.trys.pop();continue;default:if(!(o=i.trys,(o=o.length>0&&o[o.length-1])||6!==a[0]&&2!==a[0])){i=0;continue}if(3===a[0]&&(!o||a[1]>o[0]&&a[1]<o[3])){i.label=a[1];break}if(6===a[0]&&i.label<o[1]){i.label=o[1],o=a;break}if(o&&i.label<o[2]){i.label=o[2],i.ops.push(a);break}o[2]&&i.ops.pop(),i.trys.pop();continue}a=t.call(e,i)}catch(e){a=[6,e],n=0}finally{r=o=0}if(5&a[0])throw a[1];return{value:a[0]?a[1]:void 0,done:!0}}([a,c])}}}var p=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function y(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||p(t,e,r)}function d(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function b(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)i.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return i}function v(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(b(arguments[t]));return e}function h(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,c=a.length;i<c;i++,o++)n[o]=a[i];return n}function _(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function w(e){return this instanceof w?(this.v=e,this):new w(e)}function m(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},i("next"),i("throw"),i("return"),n[Symbol.asyncIterator]=function(){return this},n;function i(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||c(e,t)}))})}function c(e,t){try{(r=o[e](t)).value instanceof w?Promise.resolve(r.value.v).then(u,l):f(a[0][2],r)}catch(e){f(a[0][3],e)}var r}function u(e){c("next",e)}function l(e){c("throw",e)}function f(e,t){e(t),a.shift(),a.length&&c(a[0][0],a[0][1])}}function O(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:w(e[n](t)),done:"return"===n}:o?o(t):t}:o}}function j(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=d(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function g(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var x=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function P(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&p(t,e,r);return x(t,e),t}function S(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function E(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},990:e=>{e.exports=t},156:t=>{t.exports=e}},n={};function o(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={exports:{}};return r[e](a,a.exports,o),a.exports}o.d=(e,t)=>{for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{var e=a;Object.defineProperty(e,"__esModule",{value:!0}),e.Box=void 0;const t=o(521);var r=o(521);Object.defineProperty(e,"Box",{enumerable:!0,get:function(){return r.Box}}),e.default=t.Box})(),a})()));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nimbus-ds/box",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0-rc.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -28,5 +28,6 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@vanilla-extract/dynamic": "^2.0.2",
|
|
30
30
|
"webpack": "^5.74.0"
|
|
31
|
-
}
|
|
31
|
+
},
|
|
32
|
+
"stableVersion": "2.1.0"
|
|
32
33
|
}
|