@clickhouse/click-ui 0.0.0 → 0.0.2

package/src/components/icons/CheckInCircle.tsx

@@ -0,0 +1,39 @@
+import { SVGAttributes } from "react";
+
+const CheckInCircle = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12 20.6284V20.6284C7.029 20.6284 3 16.5994 3 11.6284V11.6284C3 6.65742 7.029 2.62842 12 2.62842V2.62842C16.971 2.62842 21 6.65742 21 11.6284V11.6284C21 16.5994 16.971 20.6284 12 20.6284Z"
+        stroke="#161517"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M16 9.62842L11 14.6284L8 11.6284"
+        stroke="#161517"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </svg>
+);
+
+export default CheckInCircle;

package/src/components/icons/ChevronDown.tsx

@@ -1,6 +1,20 @@
-import styled from "styled-components";
-import { ChevronRight } from "./ChevronRight";
+import { SVGAttributes } from "react";
 
-export const ChevronDown = styled(ChevronRight)`
-  transform: rotate(90deg);
-`;
+export const ChevronDown = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m8 10 4 4 4-4"
+    />
+  </svg>
+);

package/src/components/icons/ChevronLeft.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const ChevronLeft = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m14 16-4-4 4-4"
+    />
+  </svg>
+);
+
+export default ChevronLeft;

package/src/components/icons/ChevronRight.tsx

@@ -10,11 +10,11 @@ export const ChevronRight = (props: SVGAttributes<SVGElement>) => (
     {...props}
   >
     <path
-      d="M10 16L14 12L10 8"
-      stroke="#242325"
-      strokeWidth="1.25"
+      stroke="#161517"
       strokeLinecap="round"
       strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m10 16 4-4-4-4"
     />
   </svg>
 );

package/src/components/icons/ChevronUp.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const ChevronUp = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m16 14-4-4-4 4"
+    />
+  </svg>
+);
+
+export default ChevronUp;

package/src/components/icons/Clock.tsx

@@ -0,0 +1,37 @@
+import { SVGAttributes } from "react";
+
+const Clock = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12 21c4.95 0 9-4.05 9-9s-4.05-9-9-9M12 21c-2.93 0-5.538-1.426-7.184-3.612"
+    />
+    <path
+      stroke="#161517"
+      strokeDasharray={0}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M4.816 17.388A8.931 8.931 0 0 1 3 12c0-4.95 4.05-9 9-9"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m7.36 15.639 4.921-2.936V6.375"
+    />
+  </svg>
+);
+
+export default Clock;

package/src/components/icons/Cloud.tsx

@@ -0,0 +1,23 @@
+import { SVGAttributes } from "react";
+
+const Cloud = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M8 19h10.56c1.928 0 3.5-1.572 3.5-3.5s-1.572-3.5-3.5-3.5h-.435v-1c0-3.31-2.69-6-6-6-2.977 0-5.445 2.178-5.913 5.023-2.377.121-4.272 2.07-4.272 4.477a4.5 4.5 0 0 0 4.5 4.5H8Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default Cloud;

package/src/components/icons/Code.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const Code = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m17.445 12.778 2.333-2.333a4.401 4.401 0 0 0 0-6.223v0a4.401 4.401 0 0 0-6.223 0l-2.333 2.333M8.89 15.11l6.22-6.22M6.555 11.222l-2.333 2.333a4.401 4.401 0 0 0 0 6.223v0a4.401 4.401 0 0 0 6.223 0l2.333-2.333"
+    />
+  </svg>
+);
+
+export default Code;

package/src/components/icons/CodeInSquare.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const CodeInSquare = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m12.952 8.661-1.905 6.67M8.903 12.948l-1.905-1.905 1.905-1.905M15.098 14.854l1.904-1.905-1.904-1.905"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M7.998 2.992h8.003a5.002 5.002 0 0 1 5.003 5.002v8.004A5.002 5.002 0 0 1 16 21H7.998a5.002 5.002 0 0 1-5.002-5.002V7.994a5.002 5.002 0 0 1 5.002-5.002Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default CodeInSquare;

package/src/components/icons/Connect.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const Connect = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M21 8.072c-5.249-4.097-12.751-4.097-18 0M6.751 13.314c3.062-2.388 7.437-2.388 10.499 0M12 18.25a.372.372 0 0 0-.373.375.374.374 0 1 0 .748 0A.375.375 0 0 0 12 18.25"
+    />
+  </svg>
+);
+
+export default Connect;

package/src/components/icons/ConnectAlt.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const ConnectAlt = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12 15.704a.3.3 0 0 1 .305.294.3.3 0 0 1-.305.294.3.3 0 0 1-.305-.294.3.3 0 0 1 .305-.294M16.875 10.373c-2.843-2.219-6.907-2.219-9.75 0M9.157 13.212a4.654 4.654 0 0 1 5.687 0"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M18 21H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default ConnectAlt;

package/src/components/icons/Console.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Console = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M21 9H3M8.62 9v12"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default Console;

package/src/components/icons/Copy.tsx

@@ -0,0 +1,33 @@
+import { SVGAttributes } from "react";
+
+const Copy = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <rect
+      width={14.006}
+      height={14.006}
+      x={6.998}
+      y={6.998}
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      rx={2}
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M6.998 17.002H4.997a2 2 0 0 1-2-2V4.997a2 2 0 0 1 2-2H15a2 2 0 0 1 2 2v2.001"
+    />
+  </svg>
+);
+
+export default Copy;

package/src/components/icons/CrossIcon.tsx

@@ -0,0 +1,29 @@
+import { SVGAttributes } from "react";
+
+const CrossIcon = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8 8L16 16"
+      stroke="#161517"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16 8L8 16"
+      stroke="#161517"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default CrossIcon;

package/src/components/icons/Data.tsx

@@ -0,0 +1,36 @@
+import { SVGAttributes } from "react";
+
+const Data = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m11.617 14.408 1.5 1.5-1.5 1.5M9.598 11.617l-1.5 1.5-1.5-1.5"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M8.369 15.643C8.938 19.362 10.349 22 12.005 22c2.158 0 3.908-4.477 3.908-10s-1.75-10-3.908-10-3.907 4.477-3.907 10v1.117"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M13.117 15.908H12c-5.523 0-10-1.75-10-3.908s4.477-3.908 10-3.908S22 9.842 22 12c0 1.655-2.638 3.067-6.357 3.636"
+    />
+  </svg>
+);
+
+export default Data;

package/src/components/icons/DatabaseIcon.tsx

@@ -1,33 +1,31 @@
 import { SVGAttributes } from "react";
 
-function DatabaseIcon(props: SVGAttributes<SVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='25'
-      fill='none'
-      viewBox='0 0 24 25'
-      {...props}
-    >
-      <path
-        fill='currentColor'
-        fillRule='evenodd'
-        stroke='currentColor'
-        strokeWidth='0.5'
-        d='M5.5 13.993c0 1.776 2.934 3.033 6.498 3.033 3.565 0 6.499-1.257 6.499-3.033a.433.433 0 10-.867 0c0 1.096-2.497 2.166-5.632 2.166s-5.632-1.07-5.632-2.166a.433.433 0 10-.866 0h0zM5.5 10.311c0 1.557 2.919 2.6 6.498 2.6 3.58 0 6.499-1.043 6.499-2.6a.433.433 0 10-.867 0c0 .836-2.512 1.733-5.632 1.733-3.12 0-5.632-.897-5.632-1.733a.433.433 0 10-.866 0h0zM17.63 6.412c0 .836-2.512 1.733-5.632 1.733-3.12 0-5.632-.897-5.632-1.733 0-.836 2.513-1.733 5.632-1.733 3.12 0 5.632.897 5.632 1.733zm.867 0c0-1.557-2.919-2.6-6.499-2.6-3.58 0-6.498 1.043-6.498 2.6 0 1.557 2.919 2.6 6.498 2.6 3.58 0 6.499-1.043 6.499-2.6z'
-        clipRule='evenodd'
-      ></path>
-      <path
-        fill='currentColor'
-        fillRule='evenodd'
-        stroke='currentColor'
-        strokeWidth='0.5'
-        d='M17.63 6.413V18.11c0 .284-.578.833-1.53 1.288-1.147.549-2.61.88-4.101.878-1.494.003-2.956-.33-4.102-.878-.953-.455-1.53-1.004-1.53-1.288V6.413a.433.433 0 10-.867 0V18.11c0 1.483 3.253 3.038 6.499 3.032 3.245.006 6.498-1.55 6.498-3.032V6.413a.433.433 0 00-.867 0h0z'
-        clipRule='evenodd'
-      ></path>
-    </svg>
-  );
-}
+const DatabaseIcon = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="25"
+    fill="none"
+    viewBox="0 0 24 25"
+    {...props}
+  >
+    <path
+      fill="#161517"
+      fillRule="evenodd"
+      stroke="#161517"
+      strokeWidth={0.5}
+      d="M5.5 13.18c0 1.776 2.934 3.033 6.498 3.033 3.565 0 6.499-1.257 6.499-3.032a.433.433 0 1 0-.867 0c0 1.096-2.497 2.166-5.632 2.166s-5.632-1.07-5.632-2.166a.433.433 0 1 0-.866 0ZM5.5 9.499c0 1.557 2.919 2.6 6.498 2.6 3.58 0 6.499-1.043 6.499-2.6a.433.433 0 1 0-.867 0c0 .835-2.512 1.733-5.632 1.733-3.12 0-5.632-.898-5.632-1.733a.433.433 0 0 0-.866 0ZM17.631 5.6c0 .835-2.512 1.732-5.632 1.732-3.12 0-5.632-.897-5.632-1.733 0-.835 2.513-1.733 5.632-1.733 3.12 0 5.632.898 5.632 1.733Zm.867 0c0-1.558-2.919-2.6-6.499-2.6-3.58 0-6.498 1.042-6.498 2.6 0 1.556 2.919 2.599 6.498 2.599 3.58 0 6.499-1.043 6.499-2.6Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#161517"
+      fillRule="evenodd"
+      stroke="#161517"
+      strokeWidth={0.5}
+      d="M17.63 5.6v11.697c0 .285-.578.833-1.53 1.289-1.147.548-2.61.88-4.101.877-1.494.003-2.956-.329-4.102-.877-.953-.456-1.53-1.004-1.53-1.289V5.6a.433.433 0 1 0-.867 0v11.697c0 1.483 3.253 3.039 6.499 3.033 3.245.006 6.498-1.55 6.498-3.033V5.6a.433.433 0 0 0-.867 0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
 
 export default DatabaseIcon;

package/src/components/icons/Disk.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Disk = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M16.164 3H5.007a2 2 0 0 0-2 2.015l.104 14a2 2 0 0 0 2 1.985h13.88a2 2 0 0 0 2-2V7.828a2 2 0 0 0-.585-1.414l-2.828-2.828A1.999 1.999 0 0 0 16.164 3Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M15.993 3v3.909a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V3M7 21v-7.714C7 12.576 7.576 12 8.286 12h7.429c.709 0 1.285.576 1.285 1.286V21"
+    />
+  </svg>
+);
+
+export default Disk;

package/src/components/icons/Display.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Display = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M20.003 16.002H3.997a1 1 0 0 1-1-1V4.996a1 1 0 0 1 1-1h16.006a1 1 0 0 1 1 1v10.004a1 1 0 0 1-1 1Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12 16.002v5.002M12 7.998V12M7.998 8.999v3M16.001 9.999v2M8.999 21.004h6.002M12 3.904v-.908"
+    />
+  </svg>
+);
+
+export default Display;

package/src/components/icons/Document.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Document = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M18.003 21.004H5.998a2 2 0 0 1-2-2V4.996a2 2 0 0 1 2-2h12.005a2 2 0 0 1 2 2v14.006a2 2 0 0 1-2 2.001Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M8.999 7.999h7.003M8.999 16.002h7.003M8.999 12h7.003"
+    />
+  </svg>
+);
+
+export default Document;

package/src/components/icons/DotsHorizontal.tsx

@@ -0,0 +1,36 @@
+import { SVGAttributes } from "react";
+
+const DotsHorizontal = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <circle
+      cx={7}
+      cy={12}
+      r={1.5}
+      fill="#161517"
+      transform="rotate(-90 7 12)"
+    />
+    <circle
+      cx={12.5}
+      cy={12}
+      r={1.5}
+      fill="#161517"
+      transform="rotate(-90 12.5 12)"
+    />
+    <circle
+      cx={18}
+      cy={12}
+      r={1.5}
+      fill="#161517"
+      transform="rotate(-90 18 12)"
+    />
+  </svg>
+);
+
+export default DotsHorizontal;

package/src/components/icons/DotsVertical.tsx

@@ -0,0 +1,33 @@
+import { SVGAttributes } from "react";
+
+const DotsVertical = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <circle
+      cx={12.5}
+      cy={6.5}
+      r={1.5}
+      fill="#161517"
+    />
+    <circle
+      cx={12.5}
+      cy={12}
+      r={1.5}
+      fill="#161517"
+    />
+    <circle
+      cx={12.5}
+      cy={17.5}
+      r={1.5}
+      fill="#161517"
+    />
+  </svg>
+);
+
+export default DotsVertical;