@platformatic/ui-components 0.1.49 → 0.1.51

package/src/components/icons/Calendar1DayIcon.jsx

@@ -0,0 +1,90 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const Calendar1DayIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path d='M2 7H5M14 7H11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={4.5} y1={5.5} x2={4.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <line x1={11.5} y1={5.5} x2={11.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <path d='M7.59712 13V6.5L8.21223 7.09L7.59712 8H7.5L6.5 9V7L7.5 6H9V13H7.59712Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={6} width={18} height={15} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M3 10.5H7.5M21 10.5H16.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={6.75} y1={8.25} x2={6.75} y2={3.75} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={17.25} y1={8.25} x2={17.25} y2={3.75} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M11.3957 19.5V9.75L12.3183 10.635L11.3957 12H11.25L9.75 13.5V10.5L11.25 9H13.5V19.5H11.3957Z' fill='none' className={filledClassName} />
+
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={5} y={10} width={30} height={25} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M5 17.5H12.5M35 17.5H27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={11.5} y1={14} x2={11.5} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={29} y1={14} x2={29} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M18.9928 32.5V16.25L20.5306 17.725L18.9928 20H18.75L16.25 22.5V17.5L18.75 15H22.5V32.5H18.9928Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+Calendar1DayIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+Calendar1DayIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default Calendar1DayIcon

package/src/components/icons/Calendar7DaysIcon.jsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const Calendar7DaysIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path d='M2 7H4M14 7H12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={4.5} y1={5.5} x2={4.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <line x1={11.5} y1={5.5} x2={11.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <path d='M6.46691 13L9.65441 6.52L10.0294 7.1H5.65074L6.33456 6.47V8.29H5V6H11V6.87L8 13H6.46691Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={6} width={18} height={15} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M3 10.5H6M21 10.5H18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={6.75} y1={8.25} x2={6.75} y2={3.75} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <line x1={17.25} y1={8.25} x2={17.25} y2={3.75} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M9.70037 19.5L14.4816 9.78L15.0441 10.65H8.4761L9.50184 9.705V12.435H7.5V9H16.5V10.305L12 19.5H9.70037Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        ><rect x={5} y={10} width={30} height={25} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M5 17.5H10M35 17.5H30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={11.5} y1={14} x2={11.5} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={29} y1={14} x2={29} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M16.1673 32.5L24.136 16.3L25.0735 17.75H14.1268L15.8364 16.175V20.725H12.5V15H27.5V17.175L20 32.5H16.1673Z' fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+Calendar7DaysIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+Calendar7DaysIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default Calendar7DaysIcon

package/src/components/icons/CalendarIcon.jsx

@@ -1,56 +1,102 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CalendarIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = <></>
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg
-          width={16}
-          height={16}
-          viewBox='0 0 16 16'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
-          <path
-            d='M2 7H14'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <line
-            x1={4.5}
-            y1={5.5}
-            x2={4.5}
-            y2={2.5}
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <line
-            x1={11.5}
-            y1={5.5}
-            x2={11.5}
-            y2={2.5}
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <rect x={4} y={8} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={4} y={11} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={7} y={8} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={10} y={8} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={7} y={11} width={2} height={2} rx={0.5} fill='none' />
-          <rect x={10} y={11} width={2} height={2} rx={0.5} fill='none' />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CalendarIcon
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CalendarIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  const filledClassName = styles[`filled-${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path d='M2 7H14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={4.5} y1={5.5} x2={4.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <line x1={11.5} y1={5.5} x2={11.5} y2={2.5} stroke='none' strokeLinecap='round' />
+          <rect x={4} y={8} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={4} y={11} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={7} y={8} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10} y={8} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={7} y={11} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10} y={11} width={2} height={2} rx={0.5} fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={3} y={6} width={18} height={15} rx={1} stroke='none' strokeWidth={1.5} />
+          <path d='M3 10.5H21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={6.75} y1={8.25} x2={6.75} y2={3.75} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <line x1={17.25} y1={8.25} x2={17.25} y2={3.75} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <rect x={6} y={12} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={6} y={16.5} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10.5} y={12} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={15} y={12} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10.5} y={16.5} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={15} y={16.5} width={3} height={3} rx={0.5} fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        ><rect x={5} y={10} width={30} height={25} rx={1} stroke='none' strokeWidth={2} />
+          <path d='M5 17.5H35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <line x1={11.5} y1={14} x2={11.5} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={29} y1={14} x2={29} y2={6} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <rect x={10} y={20} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={10} y={27.5} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={17.5} y={20} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={25} y={20} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={17.5} y={27.5} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+          <rect x={25} y={27.5} width={5} height={5} rx={0.5} fill='none' className={filledClassName} />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CalendarIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+CalendarIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default CalendarIcon

package/src/components/icons/CircleAddIcon.jsx

@@ -1,40 +1,81 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CircleAddIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = <></>
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg
-          width={18}
-          height={18}
-          viewBox='0 0 18 18'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <circle cx={9} cy={9} r={8} stroke='none' />
-          <path
-            d='M4 9H14'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M9 14L9 4.00002'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CircleAddIcon
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CircleAddIcon = ({ color, size }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={8} cy={8} r={6} stroke='none' />
+          <line x1={8} y1={5} x2={8} y2={11} stroke='none' strokeLinecap='round' />
+          <line x1={5} y1={8} x2={11} y2={8} stroke='none' strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'normal':
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+          <line x1={12} y1={7.5} x2={12} y2={16.5} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <line x1={7.5} y1={12} x2={16.5} y2={12} stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={20} cy={20} r={15} stroke='none' strokeWidth={2} />
+          <line x1={19.75} y1={12.25} x2={19.75} y2={27.75} stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <line x1={12.25} y1={20.25} x2={27.75} y2={20.25} stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CircleAddIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['green', 'white', 'main-dark-blue', 'red']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large'])
+}
+
+CircleAddIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default CircleAddIcon

package/src/components/icons/CircleBackIcon.jsx

@@ -1,51 +1,51 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CircleBackIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = (
-    <svg
-      width={26}
-      height={26}
-      viewBox='0 0 26 26'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <circle cx={13} cy={13} r={12} fill='none' stroke='none' />
-      <path
-        d='M14.5 7L8.5 13L14.5 19'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg
-          width={18}
-          height={18}
-          viewBox='0 0 18 18'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <circle cx={9} cy={9} r={8} stroke='none' />
-          <path
-            d='M10 5L6 9L10 13'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CircleBackIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleBackIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = (
+    <svg
+      width={26}
+      height={26}
+      viewBox='0 0 26 26'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <circle cx={13} cy={13} r={12} fill='none' stroke='none' />
+      <path
+        d='M14.5 7L8.5 13L14.5 19'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={18}
+          height={18}
+          viewBox='0 0 18 18'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={9} cy={9} r={8} stroke='none' />
+          <path
+            d='M10 5L6 9L10 13'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CircleBackIcon