@nimbus-ds/box 2.1.0 → 2.2.0-rc.2
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 +63 -18
- 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
3
|
import React from 'react';
|
|
4
|
-
import {
|
|
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,11 +150,11 @@ export interface BoxSprinkle {
|
|
|
106
150
|
paddingBottom?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
107
151
|
paddingLeft?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
108
152
|
paddingRight?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
109
|
-
margin?:
|
|
110
|
-
marginTop?:
|
|
111
|
-
marginBottom?:
|
|
112
|
-
marginLeft?:
|
|
113
|
-
marginRight?:
|
|
153
|
+
margin?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
154
|
+
marginTop?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
155
|
+
marginBottom?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
156
|
+
marginLeft?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
157
|
+
marginRight?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
114
158
|
paddingX?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
115
159
|
paddingY?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
116
160
|
p?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
@@ -120,22 +164,23 @@ export interface BoxSprinkle {
|
|
|
120
164
|
pb?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
121
165
|
px?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
122
166
|
py?: BoxSpaceProperties | Conditions<BoxSpaceProperties>;
|
|
123
|
-
marginX?:
|
|
124
|
-
marginY?:
|
|
125
|
-
m?:
|
|
126
|
-
mr?:
|
|
127
|
-
ml?:
|
|
128
|
-
mt?:
|
|
129
|
-
mb?:
|
|
130
|
-
mx?:
|
|
131
|
-
my?:
|
|
167
|
+
marginX?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
168
|
+
marginY?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
169
|
+
m?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
170
|
+
mr?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
171
|
+
ml?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
172
|
+
mt?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
173
|
+
mb?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
174
|
+
mx?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
175
|
+
my?: BoxMarginProperties | Conditions<BoxMarginProperties>;
|
|
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;
|
|
137
182
|
}
|
|
138
|
-
export declare const Box:
|
|
183
|
+
export declare const Box: PolymorphicForwardRefComponent<"div", BoxProps>;
|
|
139
184
|
|
|
140
185
|
export {
|
|
141
186
|
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.2",
|
|
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
|
}
|