@clickhouse/click-ui 0.0.1 → 0.0.3

package/src/components/icons/Email.tsx

@@ -0,0 +1,33 @@
+import { SVGAttributes } from "react";
+
+const Email = (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="m6.998 10 3.083 2.376a3.001 3.001 0 0 0 3.602.047L17.003 10"
+    />
+    <rect
+      width={18.008}
+      height={17.007}
+      x={2.996}
+      y={3.497}
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      rx={5}
+    />
+  </svg>
+);
+
+export default Email;

package/src/components/icons/Empty.tsx

@@ -0,0 +1,14 @@
+import { SVGAttributes } from "react";
+
+const Empty = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  ></svg>
+);
+
+export default Empty;

package/src/components/icons/FilterIcon.tsx

@@ -1,24 +1,37 @@
 import { SVGAttributes } from "react";
 
-function FilterIcon(props: SVGAttributes<SVGElement>) {
-  return (
+const FilterIcon = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
     <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
-      fill='none'
-      viewBox='0 0 24 24'
-      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        stroke='#fff'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth='1.5'
-        d='M14.5 13.5l5.207-5.207A1 1 0 0020 7.586V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2.586c0 .265.105.52.293.707L9.5 13.5M9.5 13.5v6.249c0 .813.764 1.41 1.553 1.213l2.5-.625a1.25 1.25 0 00.947-1.213V13.5'
-      ></path>
+        d="M14.5 13.5L19.707 8.293C19.895 8.105 20 7.851 20 7.586V5C20 4.448 19.552 4 19 4H5C4.448 4 4 4.448 4 5V7.586C4 7.851 4.105 8.106 4.293 8.293L9.5 13.5"
+        stroke="#161517"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9.5 13.5V19.749C9.5 20.562 10.264 21.159 11.053 20.962L13.553 20.337C14.109 20.198 14.5 19.698 14.5 19.124V13.5"
+        stroke="#161517"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
     </svg>
-  );
-}
+  </svg>
+);
 
 export default FilterIcon;

package/src/components/icons/Fire.tsx

@@ -0,0 +1,23 @@
+import { SVGAttributes } from "react";
+
+const Fire = (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="m6.198 7.56 3.483-4.063 3.755 4.38 2.43-2.834 1.936 2.26a8.01 8.01 0 0 1 1.928 5.212v.258a7.73 7.73 0 0 1-7.73 7.73v0a7.73 7.73 0 0 1-7.73-7.73v0A8.01 8.01 0 0 1 6.198 7.56Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default Fire;

package/src/components/icons/Folder.tsx

@@ -0,0 +1,20 @@
+import { SVGAttributes } from "react";
+
+const Folder = (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"
+      strokeWidth={1.5}
+      d="M20 19H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h3.629a1 1 0 0 1 .869.506l.846 1.488a1 1 0 0 0 .87.506H20a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1ZM11 7.5H3"
+    />
+  </svg>
+);
+
+export default Folder;

package/src/components/icons/Gift.tsx

@@ -0,0 +1,21 @@
+import { SVGAttributes } from "react";
+
+const Gift = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#161517"
+      stroke="#161517"
+      strokeWidth={0.6}
+      d="M19.306 6.276h-3.704a2.52 2.52 0 0 0 .752-1.805C16.354 3.11 15.296 2 13.997 2c-.937 0-1.745.578-2.125 1.41-.386-.56-1.013-.928-1.722-.928-1.172 0-2.126 1-2.126 2.23 0 .61.234 1.161.612 1.564H4.694C3.76 6.276 3 7.073 3 8.053v1.285c0 .919.67 1.677 1.523 1.767v8.64c0 1.244.964 2.255 2.15 2.255h10.655c1.185 0 2.149-1.011 2.149-2.254v-8.641c.854-.09 1.523-.848 1.523-1.767V8.052c0-.979-.76-1.776-1.694-1.776Zm-7.03-1.805c0-.995.772-1.804 1.721-1.804.949 0 1.72.81 1.72 1.804 0 .996-.771 1.805-1.72 1.805h-1.72V4.471Zm-3.617.242c0-.862.669-1.564 1.49-1.564.823 0 1.492.702 1.492 1.564v1.563H10.15c-.822 0-1.49-.701-1.49-1.563ZM3.635 9.338V8.052c0-.611.475-1.11 1.058-1.11h5.457l1.532.001v3.504H4.693c-.583 0-1.058-.498-1.058-1.11ZM5.16 19.746v-8.632h6.523v10.22h-5.01c-.834 0-1.513-.713-1.513-1.588Zm13.682 0c0 .875-.679 1.588-1.514 1.588h-5.01v-10.22h6.525v8.632Zm1.523-10.408c0 .612-.474 1.11-1.057 1.11h-6.99V6.942h6.99c.583 0 1.058.498 1.058 1.11v1.285Z"
+    />
+  </svg>
+);
+
+export default Gift;

package/src/components/icons/HistoryIcon.tsx

@@ -2,26 +2,26 @@ import { SVGAttributes } from "react";
 
 const HistoryIcon = (props: SVGAttributes<SVGElement>) => (
   <svg
-    xmlns='http://www.w3.org/2000/svg'
-    width='24'
-    height='24'
-    viewBox='0 0 24 24'
-    fill='none'
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
     {...props}
   >
     <path
-      stroke='currentColor'
-      strokeLinecap='round'
-      strokeLinejoin='round'
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       strokeWidth={1.5}
-      d='M12 4.997H4.997M12 4.997A8.003 8.003 0 1 1 3.997 13M7.998 1.996l-3 3.001M7.998 7.998l-3-3'
+      d="M12 4.997H4.997M12 4.997A8.003 8.003 0 1 1 3.997 13M7.998 1.996l-3 3.001M7.998 7.998l-3-3"
     />
     <path
-      stroke='currentColor'
-      strokeLinecap='round'
-      strokeLinejoin='round'
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
       strokeWidth={1.5}
-      d='M15.001 13.75h-3.81V9.834'
+      d="M15.001 13.75h-3.81V9.834"
     />
   </svg>
 );

package/src/components/icons/Home.tsx

@@ -0,0 +1,29 @@
+import { SVGAttributes } from "react";
+
+const Home = (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="M4 8.6V21h16V8.6"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m2 10 10-7 10 7M15 21v-6a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v6"
+    />
+  </svg>
+);
+
+export default Home;

package/src/components/icons/Http.tsx

@@ -0,0 +1,22 @@
+import { SVGAttributes } from "react";
+
+const Http = (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="M3 13.8v-3.6M5.88 10.2v3.6M5.88 12H3M10.92 10.2H8.04M9.48 10.2v3.6M18.12 10.2v3.6M15.96 10.2h-2.88M14.52 10.2v3.6M18.12 10.2h1.755c.621 0 1.125.504 1.125 1.125v0c0 .621-.504 1.125-1.125 1.125H18.12M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2"
+    />
+  </svg>
+);
+
+export default Http;

package/src/components/icons/Icons.mdx

@@ -1,36 +1,39 @@
-import { Icon } from "../Icon/Icon";
+import { Icon, ICONS_MAP } from "../Icon/Icon";
+import Flags from "./Flags";
+import Payments from './Payments'
 import { Meta, IconGallery, IconItem } from "@storybook/blocks";
 import { ThemeProvider } from "../../theme";
 
-<Meta title="Icons" />
+<Meta title='Display/Icon/Icons' />
 
-# Icons
+# Glyphs
 
-<ThemeProvider theme="light">
+<ThemeProvider theme='light'>
   <IconGallery>
-    <IconItem name="chat">
-      <Icon name="chat" />
-    </IconItem>
-    <IconItem name="chevron-right">
-      <Icon name="chevron-right" />
-    </IconItem>
-    <IconItem name="chevron-down">
-      <Icon name="chevron-down" />
-    </IconItem>
-    <IconItem name="database">
-      <Icon name="database" />
-    </IconItem>
-    <IconItem name="filter">
-      <Icon name="filter" />
-    </IconItem>
-    <IconItem name="history">
-      <Icon name="history" />
-    </IconItem>
-    <IconItem name="user">
-      <Icon name="user" />
-    </IconItem>
-    <IconItem name="users">
-      <Icon name="users" />
-    </IconItem>
+    {Object.keys(ICONS_MAP).map((iconName) => (
+      <IconItem name={iconName}>
+        <Icon name={iconName} />
+      </IconItem>
+    ))}
   </IconGallery>
 </ThemeProvider>
+
+# Flags
+
+<IconGallery>
+  {["usa", "de", "sg", "uk", "ie", "eu", "in", "nl"].map((iconName) => (
+    <IconItem name={iconName}>
+      <Flags name={iconName} />
+    </IconItem>
+  ))}
+</IconGallery>
+
+# Payments
+
+<IconGallery>
+  {["visa", "mastercard", "amex", "paypal"].map((iconName) => (
+    <IconItem name={iconName}>
+      <Payments name={iconName} />
+    </IconItem>
+  ))}
+</IconGallery>

package/src/components/icons/InfoInCircleIcon.tsx

@@ -0,0 +1,37 @@
+import { SVGAttributes } from "react";
+
+const InfoInCircleIcon = (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="M11.999 8a.25.25 0 1 0 .002.5A.25.25 0 0 0 12 8"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12 21v0a9 9 0 0 1-9-9v0a9 9 0 0 1 9-9v0a9 9 0 0 1 9 9v0a9 9 0 0 1-9 9Z"
+      clipRule="evenodd"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M12 12v5"
+    />
+  </svg>
+);
+
+export default InfoInCircleIcon;

package/src/components/icons/InformationIcon.tsx

@@ -0,0 +1,34 @@
+import { SVGAttributes } from "react";
+
+const InformationIcon = (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"
+      d="M10.854 11.877h1.15v4.252M10.845 16.128h2.31"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M11.946 7.872a.25.25 0 1 1-.25-.25"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M11.695 8.623a.25.25 0 0 1 .25.25"
+    />
+  </svg>
+);
+
+export default InformationIcon;

package/src/components/icons/InsertRowIcon.tsx

@@ -1,36 +1,34 @@
 import { SVGAttributes } from "react";
 
-function InsertRowIcon(props: SVGAttributes<SVGElement>) {
-  return (
-    <svg
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
-      viewBox='0 0 24 24'
-      fill='none'
-      {...props}
-    >
-      <path
-        stroke='currentColor'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth={1.5}
-        d='M8 4h12M3 4h1M3 8h1M3 12h1M8 8h12M8 12h2'
-      />
-      <path
-        stroke='currentColor'
-        strokeWidth={1.5}
-        d='M17 21a5 5 0 0 1-5-5c0-2.704 2.3-5.003 5.004-5A5 5 0 0 1 17 21'
-      />
-      <path
-        stroke='currentColor'
-        strokeLinecap='round'
-        strokeLinejoin='round'
-        strokeWidth={1.5}
-        d='M17 14v4M19 16h-4'
-      />
-    </svg>
-  );
-}
+const InsertRowIcon = (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 4h12M3 4h1M3 8h1M3 12h1M8 8h12M8 12h2"
+    />
+    <path
+      stroke="#161517"
+      strokeWidth={1.5}
+      d="M17 21a5 5 0 0 1-5-5c0-2.704 2.3-5.003 5.004-5A5 5 0 0 1 17 21"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M17 14v4M19 16h-4"
+    />
+  </svg>
+);
 
 export default InsertRowIcon;

package/src/components/icons/Integrations.tsx

@@ -0,0 +1,29 @@
+import { SVGAttributes } from "react";
+
+const Integrations = (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="M10 9.056C9.094 7.818 7.652 7 6 7v0a5 5 0 0 0-5 5v0a5 5 0 0 0 5 5v0a5.299 5.299 0 0 0 4.543-2.572L12 12l1.457-2.428A5.299 5.299 0 0 1 18 7v0a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5v0c-1.652 0-3.094-.818-4-2.056"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m9.93 6.028.521 2.954-2.954.52"
+    />
+  </svg>
+);
+
+export default Integrations;

package/src/components/icons/LightBulb.tsx

@@ -0,0 +1,40 @@
+import { SVGAttributes } from "react";
+
+const LightBulb = (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="M10.249 15.502h3.502M11 18.003h2"
+    />
+    <rect
+      width={18.008}
+      height={18.008}
+      x={2.996}
+      y={2.997}
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      rx={5}
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M15.386 13.316a4.251 4.251 0 1 0-6.772 0"
+    />
+  </svg>
+);
+
+export default LightBulb;

package/src/components/icons/Lightening.tsx

@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Lightening = (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="m13 8-3 3 4 2-3 3"
+    />
+    <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 Lightening;

package/src/components/icons/Loading.tsx

@@ -0,0 +1,57 @@
+import { SVGAttributes } from "react";
+import styled, { keyframes } from "styled-components";
+
+const spin = keyframes`
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+`;
+
+const LoadingIcon = styled.svg`
+  animation: ${spin} 1s infinite linear;
+`;
+
+const Loading = (props: SVGAttributes<SVGElement>) => (
+  <LoadingIcon
+    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.25}
+      d="M7.625 8.875H4.5V5.75"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M19.5 12A7.495 7.495 0 0 0 5.188 8.875"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.25}
+      d="M16.375 15.125H19.5v3.125"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M4.5 12a7.495 7.495 0 0 0 14.312 3.125"
+    />
+  </LoadingIcon>
+);
+
+export default Loading;

package/src/components/icons/Metrics.tsx

@@ -0,0 +1,38 @@
+import { SVGAttributes } from "react";
+
+const Metrics = (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={19.503}
+      cy={4.497}
+      r={2.501}
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m16.002 10-2.72 3.626L9.999 11l-3.001 4.002"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M21.004 10v7.002a4.002 4.002 0 0 1-4.002 4.002H6.998a4.002 4.002 0 0 1-4.002-4.002V6.998a4.002 4.002 0 0 1 4.002-4.001H14"
+    />
+  </svg>
+);
+
+export default Metrics;