chromia 0.0.1 → 0.0.2

package/src/icons/CheckCircleIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckCircleIconProps = typeof __propDef.props;
+export type CheckCircleIconEvents = typeof __propDef.events;
+export type CheckCircleIconSlots = typeof __propDef.slots;
+export default class CheckCircleIcon extends SvelteComponent<CheckCircleIconProps, CheckCircleIconEvents, CheckCircleIconSlots> {
+}
+export {};

package/src/icons/CheckIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Check">
+      <path
+        id="icon_Check"
+        d="M12.25 2.9165L4.41928 11.0832L1.75 8.29938"
+        stroke="url(#grad-Check)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Check"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Check">
+      <path
+        id="icon_Check"
+        d="M12.25 2.9165L4.41928 11.0832L1.75 8.29938"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/CheckIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CheckIconProps = typeof __propDef.props;
+export type CheckIconEvents = typeof __propDef.events;
+export type CheckIconSlots = typeof __propDef.slots;
+export default class CheckIcon extends SvelteComponent<CheckIconProps, CheckIconEvents, CheckIconSlots> {
+}
+export {};

package/src/icons/ChevronDownIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_ChevronDown">
+      <path
+        id="icon_ChevronDown"
+        d="M9.7998 5.59999L6.9998 8.39999L4.19981 5.59999"
+        stroke="url(#grad-ChevronDown)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-ChevronDown"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_ChevronDown">
+      <path
+        id="icon_ChevronDown"
+        d="M9.7998 5.59999L6.9998 8.39999L4.19981 5.59999"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/ChevronDownIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChevronDownIconProps = typeof __propDef.props;
+export type ChevronDownIconEvents = typeof __propDef.events;
+export type ChevronDownIconSlots = typeof __propDef.slots;
+export default class ChevronDownIcon extends SvelteComponent<ChevronDownIconProps, ChevronDownIconEvents, ChevronDownIconSlots> {
+}
+export {};

package/src/icons/ChevronUpIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <g id="id_ChevronUp">
+      <path
+        id="icon_ChevronUp"
+        d="M5.39999 10.8L8.99999 7.19995L12.6 10.8"
+        stroke="url(#grad-ChevronUp)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-ChevronUp"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 18 18"
+    fill="none"
+  >
+    <g id="id_ChevronUp">
+      <path
+        id="icon_ChevronUp"
+        d="M5.39999 10.8L8.99999 7.19995L12.6 10.8"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/ChevronUpIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChevronUpIconProps = typeof __propDef.props;
+export type ChevronUpIconEvents = typeof __propDef.events;
+export type ChevronUpIconSlots = typeof __propDef.slots;
+export default class ChevronUpIcon extends SvelteComponent<ChevronUpIconProps, ChevronUpIconEvents, ChevronUpIconSlots> {
+}
+export {};

package/src/icons/ClockIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Clock">
+      <path
+        id="icon_Clock"
+        d="M11.9695 6.9999C11.9695 10.0927 9.46165 12.5999 6.36805 12.5999C3.27446 12.5999 0.766602 10.0927 0.766602 6.9999C0.766602 3.90711 3.27446 1.3999 6.36805 1.3999C8.44138 1.3999 10.2516 2.52606 11.2201 4.1999M10.4329 7.61444L11.8332 6.21444L13.2336 7.61444M8.4666 8.52692L6.3666 7.82692V4.8999"
+        stroke="url(#grad-Clock)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Clock"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 14 14"
+    fill="none"
+  >
+    <g id="id_Clock">
+      <path
+        id="icon_Clock"
+        d="M11.9695 6.9999C11.9695 10.0927 9.46165 12.5999 6.36805 12.5999C3.27446 12.5999 0.766602 10.0927 0.766602 6.9999C0.766602 3.90711 3.27446 1.3999 6.36805 1.3999C8.44138 1.3999 10.2516 2.52606 11.2201 4.1999M10.4329 7.61444L11.8332 6.21444L13.2336 7.61444M8.4666 8.52692L6.3666 7.82692V4.8999"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/ClockIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ClockIconProps = typeof __propDef.props;
+export type ClockIconEvents = typeof __propDef.events;
+export type ClockIconSlots = typeof __propDef.slots;
+export default class ClockIcon extends SvelteComponent<ClockIconProps, ClockIconEvents, ClockIconSlots> {
+}
+export {};

package/src/icons/CloseIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 10 10"
+    fill="none"
+  >
+    <g id="id_Close">
+      <path
+        id="icon_Close"
+        d="M9 1L1 9M9 9L1 1"
+        stroke="url(#grad-Close)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Close"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 10 10"
+    fill="none"
+  >
+    <g id="id_Close">
+      <path
+        id="icon_Close"
+        d="M9 1L1 9M9 9L1 1"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+  

package/src/icons/CloseIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        color?: string | undefined;
+        gradient?: {
+            colors: [string, string];
+            direction: "top" | "right" | "bottom" | "left";
+        } | undefined;
+        size?: string | undefined;
+        weight?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CloseIconProps = typeof __propDef.props;
+export type CloseIconEvents = typeof __propDef.events;
+export type CloseIconSlots = typeof __propDef.slots;
+export default class CloseIcon extends SvelteComponent<CloseIconProps, CloseIconEvents, CloseIconSlots> {
+}
+export {};

package/src/icons/CollectionIcon.svelte

@@ -0,0 +1,88 @@
+
+  <script lang="ts">
+  interface GradientObj {
+    colors: [string, string];
+    direction: "top" | "right" | "bottom" | "left";
+  }
+  export let color = "#000";
+  export let gradient: GradientObj = {
+    colors: ["", ""],
+    direction: "bottom",
+  };
+  export let size: string = "1rem";
+  export let weight: number = 1;
+
+  const getGradientDirection = (direction: string) => {
+    switch (direction) {
+      case "top":
+        return { x1: "0%", y1: "100%", x2: "0%", y2: "0%" };
+      case "right":
+        return { x1: "0%", y1: "0%", x2: "100%", y2: "0%" };
+      case "bottom":
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+      case "left":
+        return { x1: "100%", y1: "0%", x2: "0%", y2: "0%" };
+      default:
+        return { x1: "0%", y1: "0%", x2: "0%", y2: "100%" };
+    }
+  };
+</script>
+
+{#if gradient !== undefined}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g id="id_Collection">
+      <path
+        id="icon_Collection"
+        d="M11.5556 14.4C10.8012 14.4 10.0777 14.1003 9.54423 13.5669C9.0108 13.0334 8.71112 12.31 8.71112 11.5556V3.02223C8.71112 2.64503 8.86096 2.28328 9.12768 2.01657C9.39439 1.74985 9.75614 1.60001 10.1333 1.60001H12.9778C13.355 1.60001 13.7167 1.74985 13.9834 2.01657C14.2502 2.28328 14.4 2.64503 14.4 3.02223V11.5556C14.4 12.31 14.1003 13.0334 13.5669 13.5669C13.0334 14.1003 12.31 14.4 11.5556 14.4ZM11.5556 14.4H3.02223C2.64503 14.4 2.28328 14.2502 2.01657 13.9834C1.74985 13.7167 1.60001 13.355 1.60001 12.9778V10.1333C1.60001 9.75614 1.74985 9.39439 2.01657 9.12768C2.28328 8.86096 2.64503 8.71112 3.02223 8.71112H4.65778M8.71112 4.69334L7.28889 3.27112C7.02219 3.00449 6.66051 2.85471 6.28338 2.85471C5.90626 2.85471 5.54458 3.00449 5.27787 3.27112L3.26685 5.28214C3.00022 5.54885 2.85044 5.91053 2.85044 6.28765C2.85044 6.66477 3.00022 7.02645 3.26685 7.29316L9.66685 13.6932M11.5556 11.5556V11.5627"
+        stroke="url(#grad-Collection)"
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+
+    <defs>
+      <linearGradient
+        id="grad-Collection"
+        x1={getGradientDirection(gradient.direction).x1}
+        y1={getGradientDirection(gradient.direction).y1}
+        x2={getGradientDirection(gradient.direction).x2}
+        y2={getGradientDirection(gradient.direction).y2}
+      >
+        <stop
+          offset="0%"
+          style="stop-color:{gradient.colors[0]};stop-opacity:1"
+        />
+        <stop
+          offset="100%"
+          style="stop-color:{gradient.colors[1]};stop-opacity:1"
+        />
+      </linearGradient>
+    </defs>
+  </svg>
+{:else}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style="width: {size}; height: {size};"
+    viewBox="0 0 16 16"
+    fill="none"
+  >
+    <g id="id_Collection">
+      <path
+        id="icon_Collection"
+        d="M11.5556 14.4C10.8012 14.4 10.0777 14.1003 9.54423 13.5669C9.0108 13.0334 8.71112 12.31 8.71112 11.5556V3.02223C8.71112 2.64503 8.86096 2.28328 9.12768 2.01657C9.39439 1.74985 9.75614 1.60001 10.1333 1.60001H12.9778C13.355 1.60001 13.7167 1.74985 13.9834 2.01657C14.2502 2.28328 14.4 2.64503 14.4 3.02223V11.5556C14.4 12.31 14.1003 13.0334 13.5669 13.5669C13.0334 14.1003 12.31 14.4 11.5556 14.4ZM11.5556 14.4H3.02223C2.64503 14.4 2.28328 14.2502 2.01657 13.9834C1.74985 13.7167 1.60001 13.355 1.60001 12.9778V10.1333C1.60001 9.75614 1.74985 9.39439 2.01657 9.12768C2.28328 8.86096 2.64503 8.71112 3.02223 8.71112H4.65778M8.71112 4.69334L7.28889 3.27112C7.02219 3.00449 6.66051 2.85471 6.28338 2.85471C5.90626 2.85471 5.54458 3.00449 5.27787 3.27112L3.26685 5.28214C3.00022 5.54885 2.85044 5.91053 2.85044 6.28765C2.85044 6.66477 3.00022 7.02645 3.26685 7.29316L9.66685 13.6932M11.5556 11.5556V11.5627"
+        stroke={color}
+        stroke-width={weight}
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+{/if}
+
+