@platformatic/ui-components 0.1.48 → 0.1.50

package/src/components/icons/CreatedWorkspaceIcon.jsx

@@ -1,70 +1,70 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const CreatedWorkspaceIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = <></>
-  switch (size) {
-    case 'extra-large':
-      icon = (
-        <svg
-          width={120}
-          height={120}
-          viewBox='0 0 120 120'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-        >
-          <rect
-            x={15}
-            y={15}
-            width={37.5}
-            height={37.5}
-            rx={1}
-            stroke='none'
-            strokeWidth={6.5}
-          />
-          <rect
-            x={45}
-            y={105}
-            width={30}
-            height={37.7622}
-            rx={1}
-            transform='rotate(-180 45 105)'
-            stroke='none'
-            strokeWidth={6.5}
-          />
-          <rect
-            x={105}
-            y={105}
-            width={45}
-            height={37.7622}
-            rx={1}
-            transform='rotate(-180 105 105)'
-            stroke='none'
-            strokeWidth={6.5}
-          />
-          <circle
-            cx={86.25}
-            cy={33.75}
-            r={18.75}
-            stroke='none'
-            strokeWidth={6.5}
-          />
-          <path
-            d='M76.875 33.7499L84.6875 39.9999L93.75 30'
-            stroke='none'
-            strokeWidth={6.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default CreatedWorkspaceIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CreatedWorkspaceIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect
+            x={15}
+            y={15}
+            width={37.5}
+            height={37.5}
+            rx={1}
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <rect
+            x={45}
+            y={105}
+            width={30}
+            height={37.7622}
+            rx={1}
+            transform='rotate(-180 45 105)'
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <rect
+            x={105}
+            y={105}
+            width={45}
+            height={37.7622}
+            rx={1}
+            transform='rotate(-180 105 105)'
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <circle
+            cx={86.25}
+            cy={33.75}
+            r={18.75}
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <path
+            d='M76.875 33.7499L84.6875 39.9999L93.75 30'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CreatedWorkspaceIcon

package/src/components/icons/DynamicWorkspaceIcon.jsx

@@ -1,125 +1,125 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-
-const DynamicWorkspaceIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
-  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
-  let icon = (
-    <svg
-      width={40}
-      height={40}
-      viewBox='0 0 40 40'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-      data-tip={tip}
-    >
-      <rect
-        x={5}
-        y={5}
-        width={10}
-        height={12.5874}
-        rx={1}
-        stroke='none'
-        strokeWidth={2}
-      />
-      <path
-        d='M20 5L27.5 11.25L20 17.5V5Z'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <rect
-        x={35}
-        y={35}
-        width={10}
-        height={12.5874}
-        rx={1}
-        transform='rotate(-180 35 35)'
-        stroke='none'
-        strokeWidth={2}
-      />
-      <rect
-        x={20}
-        y={35}
-        width={15}
-        height={12.5874}
-        rx={1}
-        transform='rotate(-180 20 35)'
-        stroke='none'
-        strokeWidth={2}
-      />
-      <path
-        d='M27.5 15V17.5L35 11.25L27.5 5V7.5'
-        stroke='none'
-        strokeWidth={2}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-  switch (size) {
-    case 'small':
-      icon = (
-        <svg
-          width={24}
-          height={25}
-          viewBox='0 0 24 25'
-          fill='none'
-          xmlns='http://www.w3.org/2000/svg'
-          className={className}
-          data-tip={tip}
-        >
-          <rect
-            x={3}
-            y={3.5}
-            width={6}
-            height={7.55245}
-            rx={1}
-            stroke='none'
-            strokeWidth={1.5}
-          />
-          <path
-            d='M12 3.5L16.5 7.25L12 11V3.5Z'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <rect
-            x={21}
-            y={21.5}
-            width={6}
-            height={7.55245}
-            rx={1}
-            transform='rotate(-180 21 21.5)'
-            stroke='none'
-            strokeWidth={1.5}
-          />
-          <rect
-            x={12}
-            y={21.5}
-            width={9}
-            height={7.55245}
-            rx={1}
-            transform='rotate(-180 12 21.5)'
-            stroke='none'
-            strokeWidth={1.5}
-          />
-          <path
-            d='M16.5 9.5V11L21 7.25L16.5 3.5V5'
-            stroke='none'
-            strokeWidth={1.5}
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default DynamicWorkspaceIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const DynamicWorkspaceIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = (
+    <svg
+      width={40}
+      height={40}
+      viewBox='0 0 40 40'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      data-tip={tip}
+    >
+      <rect
+        x={5}
+        y={5}
+        width={10}
+        height={12.5874}
+        rx={1}
+        stroke='none'
+        strokeWidth={2}
+      />
+      <path
+        d='M20 5L27.5 11.25L20 17.5V5Z'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <rect
+        x={35}
+        y={35}
+        width={10}
+        height={12.5874}
+        rx={1}
+        transform='rotate(-180 35 35)'
+        stroke='none'
+        strokeWidth={2}
+      />
+      <rect
+        x={20}
+        y={35}
+        width={15}
+        height={12.5874}
+        rx={1}
+        transform='rotate(-180 20 35)'
+        stroke='none'
+        strokeWidth={2}
+      />
+      <path
+        d='M27.5 15V17.5L35 11.25L27.5 5V7.5'
+        stroke='none'
+        strokeWidth={2}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={24}
+          height={25}
+          viewBox='0 0 24 25'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+          data-tip={tip}
+        >
+          <rect
+            x={3}
+            y={3.5}
+            width={6}
+            height={7.55245}
+            rx={1}
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <path
+            d='M12 3.5L16.5 7.25L12 11V3.5Z'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <rect
+            x={21}
+            y={21.5}
+            width={6}
+            height={7.55245}
+            rx={1}
+            transform='rotate(-180 21 21.5)'
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <rect
+            x={12}
+            y={21.5}
+            width={9}
+            height={7.55245}
+            rx={1}
+            transform='rotate(-180 12 21.5)'
+            stroke='none'
+            strokeWidth={1.5}
+          />
+          <path
+            d='M16.5 9.5V11L21 7.25L16.5 3.5V5'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default DynamicWorkspaceIcon

package/src/components/icons/EditIcon.jsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const EditIcon = ({ 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={10.0554}
+            y={4.50607}
+            width={2.11765}
+            height={7.76471}
+            transform='rotate(45 10.0554 4.50607)'
+            stroke='none'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M6.06234 11.4939L4.56494 9.99654L3.81624 12.2426L6.06234 11.4939Z'
+            stroke='none'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M10.8456 3.71577C11.2362 3.32525 11.8693 3.32525 12.2598 3.71577L12.343 3.79896C12.7336 4.18949 12.7336 4.82265 12.343 5.21318L11.5527 6.00347L10.0553 4.50607L10.8456 3.71577Z'
+            stroke='none'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default EditIcon

package/src/components/icons/GearIcon.jsx

@@ -1,40 +1,40 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const GearIcon = ({ color = 'green', size = 'normal' }) => {
-  const className = styles[`${color}`]
-  let dimension = 33
-  switch (size) {
-    case 'small':
-      dimension = 16
-      break
-    default:
-      break
-  }
-  return (
-    <svg
-      width={dimension}
-      height={dimension}
-      viewBox='0 0 33 32'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-      className={className}
-    >
-      <path
-        d='M16.5016 20.6575C19.011 20.6575 21.0452 18.6574 21.0452 16.1901C21.0452 13.7228 19.011 11.7227 16.5016 11.7227C13.9922 11.7227 11.958 13.7228 11.958 16.1901C11.958 18.6574 13.9922 20.6575 16.5016 20.6575Z'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-      <path
-        d='M18.9391 4.69606V6.21219C18.9391 6.50074 19.1219 6.76144 19.3974 6.86269L21.3641 7.59418C21.6318 7.69289 21.9356 7.62455 22.1312 7.417L23.076 6.41974C23.354 6.12613 23.8277 6.1236 24.1083 6.41721L26.3891 8.79139C26.6439 9.05716 26.6465 9.46973 26.3968 9.73803L25.1818 11.0491C24.9887 11.2567 24.9423 11.5579 25.0633 11.811L25.8871 13.5575C26.003 13.803 26.2552 13.9625 26.5307 13.9625H27.7921C28.1834 13.9625 28.5 14.2738 28.5 14.6585V17.5895C28.5 17.9743 28.1834 18.2856 27.7921 18.2856H26.4663C26.16 18.2856 25.8871 18.4805 25.7919 18.7665L25.1225 20.7838C25.0427 21.0217 25.0994 21.2824 25.2719 21.4672L26.3608 22.6492C26.6259 22.9378 26.6002 23.3858 26.3016 23.6414L23.7916 25.8005C23.5033 26.0485 23.0657 26.0257 22.8057 25.7498L21.9304 24.8235C21.7399 24.621 21.4439 24.5476 21.1788 24.6387L19.351 25.2664C19.0653 25.3651 18.8748 25.6283 18.8748 25.9245V27.3039C18.8748 27.6887 18.5581 28 18.1668 28H14.8306C14.4393 28 14.1227 27.6887 14.1227 27.3039V25.9245C14.1227 25.6283 13.9322 25.3651 13.6464 25.2664L11.8187 24.6387C11.5535 24.5476 11.2575 24.6184 11.067 24.8235L10.1917 25.7498C9.93173 26.0257 9.4941 26.0485 9.20578 25.8005L6.69586 23.6414C6.39724 23.3858 6.3715 22.9378 6.63665 22.6492L7.72557 21.4672C7.89547 21.2824 7.95211 21.0217 7.87488 20.7838L7.20557 18.7665C7.11032 18.4805 6.83745 18.2856 6.53111 18.2856H5.20793C4.81664 18.2856 4.5 17.9743 4.5 17.5895V14.6585C4.5 14.2738 4.81664 13.9625 5.20793 13.9625H6.46932C6.74477 13.9625 6.99705 13.8055 7.11289 13.5575L7.93666 11.811C8.05765 11.5554 8.00874 11.2567 7.81825 11.0491L6.60319 9.73803C6.35348 9.46973 6.35605 9.05463 6.61091 8.79139L8.89172 6.41721C9.17232 6.12613 9.64598 6.12613 9.92401 6.41974L10.8688 7.417C11.0644 7.62455 11.3682 7.69289 11.6359 7.59418L13.6026 6.86269C13.8781 6.76144 14.0609 6.50074 14.0609 6.21219V4.69606C14.0609 4.31133 14.3775 4 14.7688 4H18.2312C18.6225 4 18.9391 4.31133 18.9391 4.69606Z'
-        stroke='none'
-        strokeWidth={1.5}
-        strokeLinecap='round'
-        strokeLinejoin='round'
-      />
-    </svg>
-  )
-}
-
-export default GearIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const GearIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = styles[`${color}`]
+  let dimension = 33
+  switch (size) {
+    case 'small':
+      dimension = 16
+      break
+    default:
+      break
+  }
+  return (
+    <svg
+      width={dimension}
+      height={dimension}
+      viewBox='0 0 33 32'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <path
+        d='M16.5016 20.6575C19.011 20.6575 21.0452 18.6574 21.0452 16.1901C21.0452 13.7228 19.011 11.7227 16.5016 11.7227C13.9922 11.7227 11.958 13.7228 11.958 16.1901C11.958 18.6574 13.9922 20.6575 16.5016 20.6575Z'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M18.9391 4.69606V6.21219C18.9391 6.50074 19.1219 6.76144 19.3974 6.86269L21.3641 7.59418C21.6318 7.69289 21.9356 7.62455 22.1312 7.417L23.076 6.41974C23.354 6.12613 23.8277 6.1236 24.1083 6.41721L26.3891 8.79139C26.6439 9.05716 26.6465 9.46973 26.3968 9.73803L25.1818 11.0491C24.9887 11.2567 24.9423 11.5579 25.0633 11.811L25.8871 13.5575C26.003 13.803 26.2552 13.9625 26.5307 13.9625H27.7921C28.1834 13.9625 28.5 14.2738 28.5 14.6585V17.5895C28.5 17.9743 28.1834 18.2856 27.7921 18.2856H26.4663C26.16 18.2856 25.8871 18.4805 25.7919 18.7665L25.1225 20.7838C25.0427 21.0217 25.0994 21.2824 25.2719 21.4672L26.3608 22.6492C26.6259 22.9378 26.6002 23.3858 26.3016 23.6414L23.7916 25.8005C23.5033 26.0485 23.0657 26.0257 22.8057 25.7498L21.9304 24.8235C21.7399 24.621 21.4439 24.5476 21.1788 24.6387L19.351 25.2664C19.0653 25.3651 18.8748 25.6283 18.8748 25.9245V27.3039C18.8748 27.6887 18.5581 28 18.1668 28H14.8306C14.4393 28 14.1227 27.6887 14.1227 27.3039V25.9245C14.1227 25.6283 13.9322 25.3651 13.6464 25.2664L11.8187 24.6387C11.5535 24.5476 11.2575 24.6184 11.067 24.8235L10.1917 25.7498C9.93173 26.0257 9.4941 26.0485 9.20578 25.8005L6.69586 23.6414C6.39724 23.3858 6.3715 22.9378 6.63665 22.6492L7.72557 21.4672C7.89547 21.2824 7.95211 21.0217 7.87488 20.7838L7.20557 18.7665C7.11032 18.4805 6.83745 18.2856 6.53111 18.2856H5.20793C4.81664 18.2856 4.5 17.9743 4.5 17.5895V14.6585C4.5 14.2738 4.81664 13.9625 5.20793 13.9625H6.46932C6.74477 13.9625 6.99705 13.8055 7.11289 13.5575L7.93666 11.811C8.05765 11.5554 8.00874 11.2567 7.81825 11.0491L6.60319 9.73803C6.35348 9.46973 6.35605 9.05463 6.61091 8.79139L8.89172 6.41721C9.17232 6.12613 9.64598 6.12613 9.92401 6.41974L10.8688 7.417C11.0644 7.62455 11.3682 7.69289 11.6359 7.59418L13.6026 6.86269C13.8781 6.76144 14.0609 6.50074 14.0609 6.21219V4.69606C14.0609 4.31133 14.3775 4 14.7688 4H18.2312C18.6225 4 18.9391 4.31133 18.9391 4.69606Z'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default GearIcon

package/src/components/icons/Icons.module.css

@@ -1,30 +1,30 @@
-.green > circle,
-.green > rect, 
-.green > path {
-  @apply stroke-main-green;
-}
-.red > circle,
-.red > rect,
-.red > path {
-  @apply stroke-error-red;
-}
-.white > circle,
-.white > rect,
-.white > path {
-  @apply stroke-white;
-}
-.main-dark-blue > circle,
-.main-dark-blue > rect,
-.main-dark-blue > path {
-  @apply stroke-main-dark-blue;
-}
-.fill-circle-green > circle {
-  @apply fill-white;
-}
-.fill-circle-main-dark-blue > circle {
-  @apply fill-main-dark-blue;
-}
-
-.noShrinkForFlex {
-  @apply shrink-0
+.green > circle,
+.green > rect, 
+.green > path {
+  @apply stroke-main-green;
+}
+.red > circle,
+.red > rect,
+.red > path {
+  @apply stroke-error-red;
+}
+.white > circle,
+.white > rect,
+.white > path {
+  @apply stroke-white;
+}
+.main-dark-blue > circle,
+.main-dark-blue > rect,
+.main-dark-blue > path {
+  @apply stroke-main-dark-blue;
+}
+.fill-circle-green > circle {
+  @apply fill-white;
+}
+.fill-circle-main-dark-blue > circle {
+  @apply fill-main-dark-blue;
+}
+
+.noShrinkForFlex {
+  @apply shrink-0
 }

package/src/components/icons/LiveIcon.jsx

@@ -1,43 +1,43 @@
-import * as React from 'react'
-import styles from './Icons.module.css'
-const LiveIcon = ({ 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}
-        >
-          <circle cx={8} cy={8.75137} r={1.5} fill='none' />
-          <path
-            d='M6 6.51529C5.38625 7.06461 5 7.8629 5 8.7514C5 9.6399 5.38625 10.4382 6 10.9875M10 6.51529C10.6137 7.06461 11 7.8629 11 8.7514C11 9.6399 10.6137 10.4382 10 10.9875'
-            stroke='none'
-            strokeLinecap='round'
-            strokeLinejoin='round'
-          />
-          <path
-            d='M11 5.39722C11.9206 6.2212 12.5 7.41863 12.5 8.75138C12.5 10.0841 11.9206 11.2816 11 12.1055M5 5.39722C4.07938 6.2212 3.5 7.41863 3.5 8.75138C3.5 10.0841 4.07938 11.2816 5 12.1055'
-            stroke='none'
-            strokeLinecap='round'
-          />
-          <path
-            d='M12 4.27916C13.2275 5.3778 14 6.97437 14 8.75137C14 10.6328 13.134 12.312 11.779 13.412M4.33558 4C2.91494 5.09726 2 6.81747 2 8.75137C2 10.5434 2.78563 12.152 4.03126 13.2514'
-            stroke='none'
-            strokeLinecap='round'
-          />
-        </svg>
-      )
-      break
-    default:
-      break
-  }
-  return icon
-}
-
-export default LiveIcon
+import * as React from 'react'
+import styles from './Icons.module.css'
+const LiveIcon = ({ 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}
+        >
+          <circle cx={8} cy={8.75137} r={1.5} fill='none' />
+          <path
+            d='M6 6.51529C5.38625 7.06461 5 7.8629 5 8.7514C5 9.6399 5.38625 10.4382 6 10.9875M10 6.51529C10.6137 7.06461 11 7.8629 11 8.7514C11 9.6399 10.6137 10.4382 10 10.9875'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M11 5.39722C11.9206 6.2212 12.5 7.41863 12.5 8.75138C12.5 10.0841 11.9206 11.2816 11 12.1055M5 5.39722C4.07938 6.2212 3.5 7.41863 3.5 8.75138C3.5 10.0841 4.07938 11.2816 5 12.1055'
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M12 4.27916C13.2275 5.3778 14 6.97437 14 8.75137C14 10.6328 13.134 12.312 11.779 13.412M4.33558 4C2.91494 5.09726 2 6.81747 2 8.75137C2 10.5434 2.78563 12.152 4.03126 13.2514'
+            stroke='none'
+            strokeLinecap='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default LiveIcon