@kaakao-ui/styled-mixins - npm Package Compare versions

Comparing version 0.0.7 to 0.0.8

dist/index.cjs.js

@@ -7,2 +7,20 @@ 'use strict';
 
+function BorderRadius(props) {
+  var theme = styledComponents.useTheme();
+  var r = {
+    bl: props.borderBottomLeftRadius || props.borderBottomRadius || props.borderLeftRadius,
+    br: props.borderBottomRightRadius || props.borderBottomRadius || props.borderRightRadius,
+    r: props.borderRadius,
+    tl: props.borderTopLeftRadius || props.borderTopRadius || props.borderLeftRadius,
+    tr: props.borderTopRightRadius || props.borderTopRadius || props.borderRightRadius
+  };
+  if (!Object.keys(r)) return undefined;
+  r.bl = r.bl && r.bl !== r.r ? theme !== null && theme !== void 0 && theme.radii ? theme.radii[r.bl] : r.bl : '';
+  r.br = r.br && r.br !== r.r ? theme !== null && theme !== void 0 && theme.radii ? theme.radii[r.br] : r.br : '';
+  r.tl = r.tl && r.tl !== r.r ? theme !== null && theme !== void 0 && theme.radii ? theme.radii[r.tl] : r.tl : '';
+  r.tr = r.tr && r.tr !== r.r ? theme !== null && theme !== void 0 && theme.radii ? theme.radii[r.tr] : r.tr : '';
+  r.r = r.r ? theme.radii ? theme.radii[r.r] : r.r : '';
+  return styledComponents.css(["border-end-end-radius:", ";border-end-start-radius:", ";border-radius:", ";border-start-end-radius:", ";border-start-start-radius:", ";@supports not (border-end-end-radius:1rem){border-bottom-left-radius:", ";border-bottom-right-radius:", ";border-top-left-radius:", ";border-top-right-radius:", ";}"], r.br, r.bl, r.r, r.tr, r.tl, r.bl, r.br, r.tl, r.tr);
+}
+
 function Margin(props) {
@@ -18,7 +36,7 @@ var theme = styledComponents.useTheme();
   if (!Object.keys(m)) return undefined;
-  m.b = m.b && m.b !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(m.b)] : m.b : '';
-  m.l = m.l && m.l !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(m.l)] : m.l : '';
-  m.r = m.r && m.r !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(m.r)] : m.r : '';
-  m.t = m.t && m.t !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(m.t)] : m.t : '';
-  m.m = m.m ? theme.space ? theme.space[Number(m.m)] : m.m : '';
+  m.b = m.b && m.b !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[m.b] : m.b : '';
+  m.l = m.l && m.l !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[m.l] : m.l : '';
+  m.r = m.r && m.r !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[m.r] : m.r : '';
+  m.t = m.t && m.t !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[m.t] : m.t : '';
+  m.m = m.m ? theme.space ? theme.space[m.m] : m.m : '';
   return styledComponents.css(["margin:", ";margin-block-end:", ";margin-block-start:", ";margin-inline-end:", ";margin-inline-start:", ";@supports not (margin-block-end:1rem){margin-bottom:", ";margin-left:", ";margin-right:", ";margin-top:", ";}"], m.m, m.b, m.t, m.r, m.l, m.b, m.t, m.r, m.l);
@@ -37,10 +55,30 @@ }
   if (!Object.keys(p)) return undefined;
-  p.b = p.b && p.b !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.b)] : p.b : '';
-  p.l = p.l && p.l !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.l)] : p.l : '';
-  p.r = p.r && p.r !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.r)] : p.r : '';
-  p.t = p.t && p.t !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.t)] : p.t : '';
-  p.p = p.p ? theme.space ? theme.space[Number(p.p)] : p.p : '';
+  p.b = p.b && p.b !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[p.b] : p.b : '';
+  p.l = p.l && p.l !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[p.b] : p.l : '';
+  p.r = p.r && p.r !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[p.b] : p.r : '';
+  p.t = p.t && p.t !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[p.b] : p.t : '';
+  p.p = p.p ? theme.space ? theme.space[p.p] : p.p : '';
   return styledComponents.css(["padding:", ";padding-block-end:", ";padding-block-start:", ";padding-inline-end:", ";padding-inline-start:", ";@supports not (padding-block-end:1rem){padding-bottom:", ";padding-left:", ";padding-right:", ";padding-top:", ";}"], p.p, p.b, p.t, p.r, p.l, p.b, p.t, p.r, p.l);
 }
 
+function Position(props) {
+  var theme = styledComponents.useTheme();
+  var bottom = props.bottom,
+      left = props.left,
+      position = props.position,
+      right = props.right,
+      top = props.top,
+      z = props.z;
+  var p = {
+    b: bottom,
+    l: left,
+    p: position,
+    r: right,
+    t: top,
+    z: z
+  };
+  if (!props.position || !Object.keys(p)) return undefined;
+  return styledComponents.css(["inset-block-end:", ";inset-block-start:", ";inset-inline-end:", ";inset-inline-start:", ";position:", ";z-index:", ";@supports not (inset-block-end:1rem){bottom:", ";}@supports not (inset-block-start:1rem){top:", ";}@supports not (inset-inline-end:1rem){right:", ";}@supports not (inset-inline-start:1rem){left:", ";}"], p.b ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.b)] : p.b : '', p.t ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.t)] : p.t : '', p.r ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.r)] : p.r : '', p.l ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.l)] : p.l : '', p.p, p.z, p.b ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.b)] : p.b : '', p.t ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.t)] : p.t : '', p.r ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.r)] : p.r : '', p.l ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.l)] : p.l : '');
+}
+
 function Space(props) {
@@ -50,4 +88,6 @@ return styledComponents.css(["", ";", ";"], Margin(props), Padding(props));
 
+exports.BorderRadius = BorderRadius;
 exports.Margin = Margin;
 exports.Padding = Padding;
+exports.Position = Position;
 exports.Space = Space;

dist/index.esm.js

 import { useTheme, css } from 'styled-components';
 
+function BorderRadius(props) {
+  var theme = useTheme();
+  var r = {
+    bl: props.borderBottomLeftRadius || props.borderBottomRadius || props.borderLeftRadius,
+    br: props.borderBottomRightRadius || props.borderBottomRadius || props.borderRightRadius,
+    r: props.borderRadius,
+    tl: props.borderTopLeftRadius || props.borderTopRadius || props.borderLeftRadius,
+    tr: props.borderTopRightRadius || props.borderTopRadius || props.borderRightRadius
+  };
+  if (!Object.keys(r)) return undefined;
+  r.bl = r.bl && r.bl !== r.r ? theme !== null && theme !== void 0 && theme.radii ? theme.radii[r.bl] : r.bl : '';
+  r.br = r.br && r.br !== r.r ? theme !== null && theme !== void 0 && theme.radii ? theme.radii[r.br] : r.br : '';
+  r.tl = r.tl && r.tl !== r.r ? theme !== null && theme !== void 0 && theme.radii ? theme.radii[r.tl] : r.tl : '';
+  r.tr = r.tr && r.tr !== r.r ? theme !== null && theme !== void 0 && theme.radii ? theme.radii[r.tr] : r.tr : '';
+  r.r = r.r ? theme.radii ? theme.radii[r.r] : r.r : '';
+  return css(["border-end-end-radius:", ";border-end-start-radius:", ";border-radius:", ";border-start-end-radius:", ";border-start-start-radius:", ";@supports not (border-end-end-radius:1rem){border-bottom-left-radius:", ";border-bottom-right-radius:", ";border-top-left-radius:", ";border-top-right-radius:", ";}"], r.br, r.bl, r.r, r.tr, r.tl, r.bl, r.br, r.tl, r.tr);
+}
+
 function Margin(props) {
@@ -13,7 +31,7 @@ var theme = useTheme();
   if (!Object.keys(m)) return undefined;
-  m.b = m.b && m.b !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(m.b)] : m.b : '';
-  m.l = m.l && m.l !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(m.l)] : m.l : '';
-  m.r = m.r && m.r !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(m.r)] : m.r : '';
-  m.t = m.t && m.t !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(m.t)] : m.t : '';
-  m.m = m.m ? theme.space ? theme.space[Number(m.m)] : m.m : '';
+  m.b = m.b && m.b !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[m.b] : m.b : '';
+  m.l = m.l && m.l !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[m.l] : m.l : '';
+  m.r = m.r && m.r !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[m.r] : m.r : '';
+  m.t = m.t && m.t !== m.m ? theme !== null && theme !== void 0 && theme.space ? theme.space[m.t] : m.t : '';
+  m.m = m.m ? theme.space ? theme.space[m.m] : m.m : '';
   return css(["margin:", ";margin-block-end:", ";margin-block-start:", ";margin-inline-end:", ";margin-inline-start:", ";@supports not (margin-block-end:1rem){margin-bottom:", ";margin-left:", ";margin-right:", ";margin-top:", ";}"], m.m, m.b, m.t, m.r, m.l, m.b, m.t, m.r, m.l);
@@ -32,10 +50,30 @@ }
   if (!Object.keys(p)) return undefined;
-  p.b = p.b && p.b !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.b)] : p.b : '';
-  p.l = p.l && p.l !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.l)] : p.l : '';
-  p.r = p.r && p.r !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.r)] : p.r : '';
-  p.t = p.t && p.t !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.t)] : p.t : '';
-  p.p = p.p ? theme.space ? theme.space[Number(p.p)] : p.p : '';
+  p.b = p.b && p.b !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[p.b] : p.b : '';
+  p.l = p.l && p.l !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[p.b] : p.l : '';
+  p.r = p.r && p.r !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[p.b] : p.r : '';
+  p.t = p.t && p.t !== p.p ? theme !== null && theme !== void 0 && theme.space ? theme.space[p.b] : p.t : '';
+  p.p = p.p ? theme.space ? theme.space[p.p] : p.p : '';
   return css(["padding:", ";padding-block-end:", ";padding-block-start:", ";padding-inline-end:", ";padding-inline-start:", ";@supports not (padding-block-end:1rem){padding-bottom:", ";padding-left:", ";padding-right:", ";padding-top:", ";}"], p.p, p.b, p.t, p.r, p.l, p.b, p.t, p.r, p.l);
 }
 
+function Position(props) {
+  var theme = useTheme();
+  var bottom = props.bottom,
+      left = props.left,
+      position = props.position,
+      right = props.right,
+      top = props.top,
+      z = props.z;
+  var p = {
+    b: bottom,
+    l: left,
+    p: position,
+    r: right,
+    t: top,
+    z: z
+  };
+  if (!props.position || !Object.keys(p)) return undefined;
+  return css(["inset-block-end:", ";inset-block-start:", ";inset-inline-end:", ";inset-inline-start:", ";position:", ";z-index:", ";@supports not (inset-block-end:1rem){bottom:", ";}@supports not (inset-block-start:1rem){top:", ";}@supports not (inset-inline-end:1rem){right:", ";}@supports not (inset-inline-start:1rem){left:", ";}"], p.b ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.b)] : p.b : '', p.t ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.t)] : p.t : '', p.r ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.r)] : p.r : '', p.l ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.l)] : p.l : '', p.p, p.z, p.b ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.b)] : p.b : '', p.t ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.t)] : p.t : '', p.r ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.r)] : p.r : '', p.l ? theme !== null && theme !== void 0 && theme.space ? theme.space[Number(p.l)] : p.l : '');
+}
+
 function Space(props) {
@@ -45,2 +83,2 @@ return css(["", ";", ";"], Margin(props), Padding(props));
 
-export { Margin, Padding, Space };
+export { BorderRadius, Margin, Padding, Position, Space };

dist/types/index.d.ts

@@ -0,3 +1,5 @@
+export * from './mixins/BorderRadius';
 export * from './mixins/Margin';
 export * from './mixins/Padding';
+export * from './mixins/Position';
 export * from './mixins/Space';

dist/types/mixins/Margin/Margin.types.d.ts

@@ -0,9 +1,10 @@
+import { DefaultTheme } from 'styled-components';
 export interface IMargin {
-    m?: string | number;
-    mb?: string | number;
-    ml?: string | number;
-    mr?: string | number;
-    mt?: string | number;
-    mx?: string | number;
-    my?: string | number;
+    m?: keyof DefaultTheme['space'] | string | number;
+    mb?: keyof DefaultTheme['space'] | string | number;
+    ml?: keyof DefaultTheme['space'] | string | number;
+    mr?: keyof DefaultTheme['space'] | string | number;
+    mt?: keyof DefaultTheme['space'] | string | number;
+    mx?: keyof DefaultTheme['space'] | string | number;
+    my?: keyof DefaultTheme['space'] | string | number;
 }

dist/types/mixins/Padding/Padding.types.d.ts

@@ -0,9 +1,10 @@
+import { DefaultTheme } from 'styled-components';
 export interface IPadding {
-    p?: string | number;
-    pb?: string | number;
-    pl?: string | number;
-    pr?: string | number;
-    pt?: string | number;
-    px?: string | number;
-    py?: string | number;
+    p?: keyof DefaultTheme['space'] | string | number;
+    pb?: keyof DefaultTheme['space'] | string | number;
+    pl?: keyof DefaultTheme['space'] | string | number;
+    pr?: keyof DefaultTheme['space'] | string | number;
+    pt?: keyof DefaultTheme['space'] | string | number;
+    px?: keyof DefaultTheme['space'] | string | number;
+    py?: keyof DefaultTheme['space'] | string | number;
 }

package.json

 {
   "name": "@kaakao-ui/styled-mixins",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "A framework-agnostic collection of Styled Components mixins for creating logical CSS styles with appropriate fallbacks.",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -32,6 +32,8 @@ <img alt="Kaakao-UI" src="kaakao.jpg" width="100%">
 
-| Mixin                          | Theme Key   | Props                                       | CSS Map                                                                                                                                                                                                                                                                            |
-| ------------------------------ | ----------- | ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [Margin](/src/mixins/Margin)   | theme.space | m<br />b<br />l<br />r<br />t<br />x<br />y | margin<br /> margin-block-end / margin-bottom<br /> margin-inline-start / margin-left<br /> margin-inline-end / margin-right<br /> margin-block-start / margin-top<br /> margin-inline-start:end / margin-left:right<br /> margin-block-start:end / margin-top:bottom              |
-| [Padding](/src/mixins/Padding) | theme.space | p<br />b<br />l<br />r<br />t<br />x<br />y | padding<br /> padding-block-end / padding-bottom<br /> padding-inline-start / padding-left<br /> padding-inline-end / padding-right<br /> padding-block-start / padding-top<br /> padding-inline-start:end / padding-left:right<br /> padding-block-start:end / padding-top:bottom |
-| [Space](/src/mixins/Space)     | theme.space | m<br />p                                    | See [Margin](../Margin)<br />See [Padding](../Padding)                                                                                                                                                                                                                             |
+| Mixin                                     | Theme Key   | Props                                                     | CSS Map                                                                                                                                                                                                                                                                            |
+| ----------------------------------------- | ----------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Border Radius](/src/mixins/BorderRadius) | theme.radii |                                                           |                                                                                                                                                                                                                                                                                    |
+| [Margin](/src/mixins/Margin)              | theme.space | m<br />mb<br />ml<br />mr<br />mt<br />mx<br />my         | margin<br /> margin-block-end / margin-bottom<br /> margin-inline-start / margin-left<br /> margin-inline-end / margin-right<br /> margin-block-start / margin-top<br /> margin-inline-start:end / margin-left:right<br /> margin-block-start:end / margin-top:bottom              |
+| [Padding](/src/mixins/Padding)            | theme.space | p<br />pb<br />pl<br />pr<br />pt<br />px<br />py         | padding<br /> padding-block-end / padding-bottom<br /> padding-inline-start / padding-left<br /> padding-inline-end / padding-right<br /> padding-block-start / padding-top<br /> padding-inline-start:end / padding-left:right<br /> padding-block-start:end / padding-top:bottom |
+| [Position](/src/mixins/Position)          | theme.space | bottom<br />left<br />position<br />right<br />top<br />z | inset-block-end / bottom<br />inset-inline-start / left<br />position<br />inset-inline-end / right<br />inset-block-start / top<br />z-index                                                                                                                                      |
+| [Space](/src/mixins/Space)                | theme.space |                                                           | See [Margin](../Margin)<br />See [Padding](../Padding)                                                                                                                                                                                                                             |

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

20430

increased by82.52%

Number of package files

21

increased by50%

Lines of code

251

increased by96.09%

Number of lines in readme file

39

increased by5.41%

No dependency changes