@platformatic/ui-components 0.1.49 → 0.1.51

package/src/components/icons/{Calendar1Icon.jsx → CircleCheckMarkIcon.jsx}

@@ -1,54 +1,66 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const Calendar1Icon = ({ 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 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'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default Calendar1Icon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleCheckMarkIcon = ({ color = 'green', size = 'small' }) => {
+  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'
+          />
+          <path
+            d='M5 8L7.5 10L11 6'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    case 'large':
+      icon = (
+        <svg
+          width={40}
+          height={41}
+          viewBox='0 0 40 41'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle
+            cx={20}
+            cy={20.3334}
+            r={15}
+            stroke='none'
+            strokeWidth={2.5}
+          />
+          <path
+            d='M12.5 20.3334L18.75 25.3334L27.5 15.3334'
+            stroke='none'
+            strokeWidth={2.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CircleCheckMarkIcon

package/src/components/icons/CircleCloseHoverIcon.jsx

@@ -1,42 +1,42 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CircleCloseHoverIcon = ({ color = 'green' }) => {
-  const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
-  return (
-    <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={11.25}
-        fill='none'
-        fillOpacity={0.2}
-        stroke='none'
-        strokeWidth={1.5}
-      />
-      <path
-        d='M6 6L18 18'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M6 18L18 6'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default CircleCloseHoverIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleCloseHoverIcon = ({ color = 'green' }) => {
+  const className = styles[`${color}`] + ' ' + styles[`fill-circle-${color}`]
+  return (
+    <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={11.25}
+        fill='none'
+        fillOpacity={0.2}
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <path
+        d='M6 6L18 18'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6 18L18 6'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default CircleCloseHoverIcon

package/src/components/icons/CircleCloseIcon.jsx

@@ -1,32 +1,32 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CircleCloseIcon = ({ color = 'green' }) => {
-  const className = styles[`${color}`]
-  return (
-    <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={11.5} stroke='none' />
-      <path
-        d='M6 6L18 18'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M6 18L18 6'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default CircleCloseIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CircleCloseIcon = ({ color = 'green' }) => {
+  const className = styles[`${color}`]
+  return (
+    <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={11.5} stroke='none' />
+      <path
+        d='M6 6L18 18'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M6 18L18 6'
+        stroke='none'
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default CircleCloseIcon

package/src/components/icons/CircleExclamationIcon.jsx

@@ -1,29 +1,29 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const CircleExclamationIcon = ({ color = 'white', tip = '' }) => {
-  const className = styles[`${color}`]
-
-  return (
-    <svg
-      width={24}
-      height={24}
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-      data-tip={tip}
-    >
-      <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
-      <path
-        d='M12 8.25V13.5'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <circle cx={12} cy={15.75} r={0.75} fill='none' />
-    </svg>
-  )
-}
-
-export default CircleExclamationIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const CircleExclamationIcon = ({ color = 'white', tip = '' }) => {
+  const className = styles[`${color}`]
+
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      data-tip={tip}
+    >
+      <circle cx={12} cy={12} r={9} stroke='none' strokeWidth={1.5} />
+      <path
+        d='M12 8.25V13.5'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle cx={12} cy={15.75} r={0.75} fill='none' />
+    </svg>
+  )
+}
+
+export default CircleExclamationIcon

package/src/components/icons/CloseIcon.jsx

@@ -1,31 +1,79 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CloseIcon = ({ color = 'main-dark-blue' }) => {
-  const className = styles[`${color}`]
-  return (
-    <svg
-      width={16}
-      height={16}
-      viewBox='0 0 16 16'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <path
-        d='M2 2L14 14'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M2 14L14 2'
-        stroke='none'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default CloseIcon
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CloseIcon = ({ 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}
+        >
+          <path d='M2 2L14 14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M2 14L14 2' stroke='none' strokeLinecap='round' strokeLinejoin='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}
+        >
+          <path d='M3 3L21 21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M3 21L21 3' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='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}
+        >
+          <path d='M5 5L35 35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M5 35L35 5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CloseIcon.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'])
+}
+
+CloseIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default CloseIcon

package/src/components/icons/CopyPasteIcon.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const CopyPasteIcon = ({ 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}
+        >
+          <path d='M6 13.5V4.94497C6 4.66882 6.22386 4.44497 6.5 4.44497H10.5365C10.6594 4.44497 10.7779 4.4902 10.8696 4.57203L13.833 7.21859C13.9393 7.31345 14 7.44911 14 7.59152V13.5C14 13.7761 13.7761 14 13.5 14H6.5C6.22386 14 6 13.7761 6 13.5Z' stroke='none' strokeLinecap='round' />
+          <path d='M10.5 7.78923V4.44497L14 7.78923H10.5Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M9.5 3.96723L7.36816 2.12196C7.27729 2.0433 7.16112 2.00001 7.04093 2.00001H4.61364H2.5C2.22386 2.00001 2 2.22386 2 2.50001L2.00001 10.6335C2.00001 10.9096 2.22386 11.1335 2.50001 11.1335H5.50001' 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}
+        >
+          <path d='M9 20.5V7.16745C9 6.8913 9.22386 6.66745 9.5 6.66745H15.9001C16.023 6.66745 16.1416 6.71268 16.2332 6.79451L20.833 10.9024C20.9393 10.9973 21 11.1329 21 11.2754V20.5C21 20.7761 20.7761 21 20.5 21H9.5C9.22386 21 9 20.7761 9 20.5Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M15.75 11.6838V6.66745L21 11.6838H15.75Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14.25 5.95084L10.9818 3.12196C10.8909 3.0433 10.7748 3.00001 10.6546 3.00001H6.92045H3.5C3.22386 3.00001 3 3.22387 3 3.50001L3.00001 16.2002C3.00001 16.4764 3.22387 16.7002 3.50001 16.7002H8.25001' 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}
+        >
+          <path d='M15 34.5V11.6124C15 11.3363 15.2239 11.1124 15.5 11.1124H26.6274C26.7503 11.1124 26.8688 11.1576 26.9605 11.2395L34.833 18.2701C34.9393 18.365 35 18.5006 35 18.643V34.5C35 34.7761 34.7761 35 34.5 35H15.5C15.2239 35 15 34.7761 15 34.5Z' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M26.25 19.4731V11.1124L35 19.4731H26.25Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M23.75 9.91807L18.2091 5.12197C18.1182 5.04331 18.002 5.00001 17.8818 5.00001H11.5341H5.5C5.22386 5.00001 5 5.22387 5 5.50002L5.00002 27.3337C5.00002 27.6099 5.22387 27.8337 5.50002 27.8337H13.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+CopyPasteIcon.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'])
+}
+
+CopyPasteIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default CopyPasteIcon

package/src/components/icons/DatabaseIcon.jsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+
+const DatabaseIcon = ({ 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}
+        >
+          <path d='M8 6.8072C11.3137 6.8072 14 5.73107 14 4.4036C14 3.07613 11.3137 2 8 2C4.68629 2 2 3.07613 2 4.4036C2 5.73107 4.68629 6.8072 8 6.8072Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14 8.08533C14 9.41275 11.3133 10.4889 8 10.4889C4.68667 10.4889 2 9.41275 2 8.08533' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M14 4.40356V11.5964C14 12.9238 11.3133 14 8 14C4.68667 14 2 12.9238 2 11.5964V4.40356' stroke='none' strokeLinecap='round' strokeLinejoin='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}
+        >
+          <path d='M12 10.2108C16.9706 10.2108 21 8.59661 21 6.6054C21 4.61419 16.9706 3 12 3C7.02944 3 3 4.61419 3 6.6054C3 8.59661 7.02944 10.2108 12 10.2108Z' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21 12.128C21 14.1191 16.97 15.7334 12 15.7334C7.03 15.7334 3 14.1191 3 12.128' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M21 6.60535V17.3945C21 19.3857 16.97 21 12 21C7.03 21 3 19.3857 3 17.3945V6.60535' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='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}
+        >
+          <path d='M20 17.018C28.2843 17.018 35 14.3277 35 11.009C35 7.69032 28.2843 5 20 5C11.7157 5 5 7.69032 5 11.009C5 14.3277 11.7157 17.018 20 17.018Z' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M35 20.2133C35 23.5319 28.2833 26.2223 20 26.2223C11.7167 26.2223 5 23.5319 5 20.2133' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M35 11.0089V28.9909C35 32.3095 28.2833 34.9999 20 34.9999C11.7167 34.9999 5 32.3095 5 28.9909V11.0089' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+DatabaseIcon.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'])
+}
+
+DatabaseIcon.defaultProps = {
+  color: 'main-dark-blue',
+  size: 'normal'
+}
+
+export default DatabaseIcon