@x-plat/design-system 0.1.2 → 0.1.4

package/dist/components/Tag/index.css

@@ -0,0 +1,498 @@
+/* src/components/Tag/tag.scss */
+.lib-xplat-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0.125rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 12px;
+  line-height: 1.5;
+  border: 1px solid;
+}
+.lib-xplat-tag.xplat-red-50 {
+  color: #FFF0F0;
+  border-color: #FFF0F0;
+  background-color: color-mix(in srgb, #FFF0F0 8%, white);
+}
+.lib-xplat-tag.xplat-red-100 {
+  color: #FFDDDE;
+  border-color: #FFDDDE;
+  background-color: color-mix(in srgb, #FFDDDE 8%, white);
+}
+.lib-xplat-tag.xplat-red-200 {
+  color: #FFC1C2;
+  border-color: #FFC1C2;
+  background-color: color-mix(in srgb, #FFC1C2 8%, white);
+}
+.lib-xplat-tag.xplat-red-300 {
+  color: #FF9698;
+  border-color: #FF9698;
+  background-color: color-mix(in srgb, #FF9698 8%, white);
+}
+.lib-xplat-tag.xplat-red-400 {
+  color: #FF5A5D;
+  border-color: #FF5A5D;
+  background-color: color-mix(in srgb, #FF5A5D 8%, white);
+}
+.lib-xplat-tag.xplat-red-500 {
+  color: #FF272B;
+  border-color: #FF272B;
+  background-color: color-mix(in srgb, #FF272B 8%, white);
+}
+.lib-xplat-tag.xplat-red-600 {
+  color: #F80409;
+  border-color: #F80409;
+  background-color: color-mix(in srgb, #F80409 8%, white);
+}
+.lib-xplat-tag.xplat-red-700 {
+  color: #D40105;
+  border-color: #D40105;
+  background-color: color-mix(in srgb, #D40105 8%, white);
+}
+.lib-xplat-tag.xplat-red-800 {
+  color: #AE0609;
+  border-color: #AE0609;
+  background-color: color-mix(in srgb, #AE0609 8%, white);
+}
+.lib-xplat-tag.xplat-red-900 {
+  color: #900C0F;
+  border-color: #900C0F;
+  background-color: color-mix(in srgb, #900C0F 8%, white);
+}
+.lib-xplat-tag.xplat-green-50 {
+  color: #E5F6EA;
+  border-color: #E5F6EA;
+  background-color: color-mix(in srgb, #E5F6EA 8%, white);
+}
+.lib-xplat-tag.xplat-green-100 {
+  color: #C1E7CC;
+  border-color: #C1E7CC;
+  background-color: color-mix(in srgb, #C1E7CC 8%, white);
+}
+.lib-xplat-tag.xplat-green-200 {
+  color: #98D8AC;
+  border-color: #98D8AC;
+  background-color: color-mix(in srgb, #98D8AC 8%, white);
+}
+.lib-xplat-tag.xplat-green-300 {
+  color: #6CCA8B;
+  border-color: #6CCA8B;
+  background-color: color-mix(in srgb, #6CCA8B 8%, white);
+}
+.lib-xplat-tag.xplat-green-400 {
+  color: #47BE72;
+  border-color: #47BE72;
+  background-color: color-mix(in srgb, #47BE72 8%, white);
+}
+.lib-xplat-tag.xplat-green-500 {
+  color: #10B259;
+  border-color: #10B259;
+  background-color: color-mix(in srgb, #10B259 8%, white);
+}
+.lib-xplat-tag.xplat-green-600 {
+  color: #00A34F;
+  border-color: #00A34F;
+  background-color: color-mix(in srgb, #00A34F 8%, white);
+}
+.lib-xplat-tag.xplat-green-700 {
+  color: #009143;
+  border-color: #009143;
+  background-color: color-mix(in srgb, #009143 8%, white);
+}
+.lib-xplat-tag.xplat-green-800 {
+  color: #007F38;
+  border-color: #007F38;
+  background-color: color-mix(in srgb, #007F38 8%, white);
+}
+.lib-xplat-tag.xplat-green-900 {
+  color: #006024;
+  border-color: #006024;
+  background-color: color-mix(in srgb, #006024 8%, white);
+}
+.lib-xplat-tag.xplat-orange-50 {
+  color: #FFF8EC;
+  border-color: #FFF8EC;
+  background-color: color-mix(in srgb, #FFF8EC 8%, white);
+}
+.lib-xplat-tag.xplat-orange-100 {
+  color: #FFF0D3;
+  border-color: #FFF0D3;
+  background-color: color-mix(in srgb, #FFF0D3 8%, white);
+}
+.lib-xplat-tag.xplat-orange-200 {
+  color: #FFDDA5;
+  border-color: #FFDDA5;
+  background-color: color-mix(in srgb, #FFDDA5 8%, white);
+}
+.lib-xplat-tag.xplat-orange-300 {
+  color: #FFC46D;
+  border-color: #FFC46D;
+  background-color: color-mix(in srgb, #FFC46D 8%, white);
+}
+.lib-xplat-tag.xplat-orange-400 {
+  color: #FF9F32;
+  border-color: #FF9F32;
+  background-color: color-mix(in srgb, #FF9F32 8%, white);
+}
+.lib-xplat-tag.xplat-orange-500 {
+  color: #FF820A;
+  border-color: #FF820A;
+  background-color: color-mix(in srgb, #FF820A 8%, white);
+}
+.lib-xplat-tag.xplat-orange-600 {
+  color: #FF6900;
+  border-color: #FF6900;
+  background-color: color-mix(in srgb, #FF6900 8%, white);
+}
+.lib-xplat-tag.xplat-orange-700 {
+  color: #CC4B02;
+  border-color: #CC4B02;
+  background-color: color-mix(in srgb, #CC4B02 8%, white);
+}
+.lib-xplat-tag.xplat-orange-800 {
+  color: #A13A0B;
+  border-color: #A13A0B;
+  background-color: color-mix(in srgb, #A13A0B 8%, white);
+}
+.lib-xplat-tag.xplat-orange-900 {
+  color: #82320C;
+  border-color: #82320C;
+  background-color: color-mix(in srgb, #82320C 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-50 {
+  color: #FFFDE7;
+  border-color: #FFFDE7;
+  background-color: color-mix(in srgb, #FFFDE7 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-100 {
+  color: #FFFAC1;
+  border-color: #FFFAC1;
+  background-color: color-mix(in srgb, #FFFAC1 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-200 {
+  color: #FFF186;
+  border-color: #FFF186;
+  background-color: color-mix(in srgb, #FFF186 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-300 {
+  color: #FFE041;
+  border-color: #FFE041;
+  background-color: color-mix(in srgb, #FFE041 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-400 {
+  color: #FFCC0D;
+  border-color: #FFCC0D;
+  background-color: color-mix(in srgb, #FFCC0D 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-500 {
+  color: #F0B100;
+  border-color: #F0B100;
+  background-color: color-mix(in srgb, #F0B100 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-600 {
+  color: #D18800;
+  border-color: #D18800;
+  background-color: color-mix(in srgb, #D18800 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-700 {
+  color: #A66002;
+  border-color: #A66002;
+  background-color: color-mix(in srgb, #A66002 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-800 {
+  color: #894B0A;
+  border-color: #894B0A;
+  background-color: color-mix(in srgb, #894B0A 8%, white);
+}
+.lib-xplat-tag.xplat-yellow-900 {
+  color: #743D0F;
+  border-color: #743D0F;
+  background-color: color-mix(in srgb, #743D0F 8%, white);
+}
+.lib-xplat-tag.xplat-blue-50 {
+  color: #F1F4FD;
+  border-color: #F1F4FD;
+  background-color: color-mix(in srgb, #F1F4FD 8%, white);
+}
+.lib-xplat-tag.xplat-blue-100 {
+  color: #DFE7FA;
+  border-color: #DFE7FA;
+  background-color: color-mix(in srgb, #DFE7FA 8%, white);
+}
+.lib-xplat-tag.xplat-blue-200 {
+  color: #C5D4F8;
+  border-color: #C5D4F8;
+  background-color: color-mix(in srgb, #C5D4F8 8%, white);
+}
+.lib-xplat-tag.xplat-blue-300 {
+  color: #9EB8F2;
+  border-color: #9EB8F2;
+  background-color: color-mix(in srgb, #9EB8F2 8%, white);
+}
+.lib-xplat-tag.xplat-blue-400 {
+  color: #7093EA;
+  border-color: #7093EA;
+  background-color: color-mix(in srgb, #7093EA 8%, white);
+}
+.lib-xplat-tag.xplat-blue-500 {
+  color: #4D6DE3;
+  border-color: #4D6DE3;
+  background-color: color-mix(in srgb, #4D6DE3 8%, white);
+}
+.lib-xplat-tag.xplat-blue-600 {
+  color: #3950D7;
+  border-color: #3950D7;
+  background-color: color-mix(in srgb, #3950D7 8%, white);
+}
+.lib-xplat-tag.xplat-blue-700 {
+  color: #303EC5;
+  border-color: #303EC5;
+  background-color: color-mix(in srgb, #303EC5 8%, white);
+}
+.lib-xplat-tag.xplat-blue-800 {
+  color: #2D35A0;
+  border-color: #2D35A0;
+  background-color: color-mix(in srgb, #2D35A0 8%, white);
+}
+.lib-xplat-tag.xplat-blue-900 {
+  color: #29317F;
+  border-color: #29317F;
+  background-color: color-mix(in srgb, #29317F 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-50 {
+  color: #EEFAFF;
+  border-color: #EEFAFF;
+  background-color: color-mix(in srgb, #EEFAFF 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-100 {
+  color: #D9F4FF;
+  border-color: #D9F4FF;
+  background-color: color-mix(in srgb, #D9F4FF 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-200 {
+  color: #BBEDFF;
+  border-color: #BBEDFF;
+  background-color: color-mix(in srgb, #BBEDFF 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-300 {
+  color: #8DE3FF;
+  border-color: #8DE3FF;
+  background-color: color-mix(in srgb, #8DE3FF 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-400 {
+  color: #57D0FF;
+  border-color: #57D0FF;
+  background-color: color-mix(in srgb, #57D0FF 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-500 {
+  color: #30B6FF;
+  border-color: #30B6FF;
+  background-color: color-mix(in srgb, #30B6FF 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-600 {
+  color: #1999F7;
+  border-color: #1999F7;
+  background-color: color-mix(in srgb, #1999F7 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-700 {
+  color: #1280E3;
+  border-color: #1280E3;
+  background-color: color-mix(in srgb, #1280E3 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-800 {
+  color: #1566B8;
+  border-color: #1566B8;
+  background-color: color-mix(in srgb, #1566B8 8%, white);
+}
+.lib-xplat-tag.xplat-lightblue-900 {
+  color: #175791;
+  border-color: #175791;
+  background-color: color-mix(in srgb, #175791 8%, white);
+}
+.lib-xplat-tag.xplat-purple-50 {
+  color: #FBF6FE;
+  border-color: #FBF6FE;
+  background-color: color-mix(in srgb, #FBF6FE 8%, white);
+}
+.lib-xplat-tag.xplat-purple-100 {
+  color: #F5EAFD;
+  border-color: #F5EAFD;
+  background-color: color-mix(in srgb, #F5EAFD 8%, white);
+}
+.lib-xplat-tag.xplat-purple-200 {
+  color: #EDD8FC;
+  border-color: #EDD8FC;
+  background-color: color-mix(in srgb, #EDD8FC 8%, white);
+}
+.lib-xplat-tag.xplat-purple-300 {
+  color: #E0BAF8;
+  border-color: #E0BAF8;
+  background-color: color-mix(in srgb, #E0BAF8 8%, white);
+}
+.lib-xplat-tag.xplat-purple-400 {
+  color: #CD8DF3;
+  border-color: #CD8DF3;
+  background-color: color-mix(in srgb, #CD8DF3 8%, white);
+}
+.lib-xplat-tag.xplat-purple-500 {
+  color: #B961EB;
+  border-color: #B961EB;
+  background-color: color-mix(in srgb, #B961EB 8%, white);
+}
+.lib-xplat-tag.xplat-purple-600 {
+  color: #A541DC;
+  border-color: #A541DC;
+  background-color: color-mix(in srgb, #A541DC 8%, white);
+}
+.lib-xplat-tag.xplat-purple-700 {
+  color: #9230C5;
+  border-color: #9230C5;
+  background-color: color-mix(in srgb, #9230C5 8%, white);
+}
+.lib-xplat-tag.xplat-purple-800 {
+  color: #782B9E;
+  border-color: #782B9E;
+  background-color: color-mix(in srgb, #782B9E 8%, white);
+}
+.lib-xplat-tag.xplat-purple-900 {
+  color: #62247F;
+  border-color: #62247F;
+  background-color: color-mix(in srgb, #62247F 8%, white);
+}
+.lib-xplat-tag.xplat-pink-50 {
+  color: #FFF4FE;
+  border-color: #FFF4FE;
+  background-color: color-mix(in srgb, #FFF4FE 8%, white);
+}
+.lib-xplat-tag.xplat-pink-100 {
+  color: #FFE7FD;
+  border-color: #FFE7FD;
+  background-color: color-mix(in srgb, #FFE7FD 8%, white);
+}
+.lib-xplat-tag.xplat-pink-200 {
+  color: #FFCFFA;
+  border-color: #FFCFFA;
+  background-color: color-mix(in srgb, #FFCFFA 8%, white);
+}
+.lib-xplat-tag.xplat-pink-300 {
+  color: #FEA9F1;
+  border-color: #FEA9F1;
+  background-color: color-mix(in srgb, #FEA9F1 8%, white);
+}
+.lib-xplat-tag.xplat-pink-400 {
+  color: #FD75E7;
+  border-color: #FD75E7;
+  background-color: color-mix(in srgb, #FD75E7 8%, white);
+}
+.lib-xplat-tag.xplat-pink-500 {
+  color: #F553DA;
+  border-color: #F553DA;
+  background-color: color-mix(in srgb, #F553DA 8%, white);
+}
+.lib-xplat-tag.xplat-pink-600 {
+  color: #D821B6;
+  border-color: #D821B6;
+  background-color: color-mix(in srgb, #D821B6 8%, white);
+}
+.lib-xplat-tag.xplat-pink-700 {
+  color: #B31892;
+  border-color: #B31892;
+  background-color: color-mix(in srgb, #B31892 8%, white);
+}
+.lib-xplat-tag.xplat-pink-800 {
+  color: #921676;
+  border-color: #921676;
+  background-color: color-mix(in srgb, #921676 8%, white);
+}
+.lib-xplat-tag.xplat-pink-900 {
+  color: #781761;
+  border-color: #781761;
+  background-color: color-mix(in srgb, #781761 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-50 {
+  color: #FAFAFA;
+  border-color: #FAFAFA;
+  background-color: color-mix(in srgb, #FAFAFA 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-100 {
+  color: #F5F5F5;
+  border-color: #F5F5F5;
+  background-color: color-mix(in srgb, #F5F5F5 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-200 {
+  color: #E5E5E5;
+  border-color: #E5E5E5;
+  background-color: color-mix(in srgb, #E5E5E5 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-300 {
+  color: #D4D4D4;
+  border-color: #D4D4D4;
+  background-color: color-mix(in srgb, #D4D4D4 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-400 {
+  color: #A1A1A1;
+  border-color: #A1A1A1;
+  background-color: color-mix(in srgb, #A1A1A1 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-500 {
+  color: #737373;
+  border-color: #737373;
+  background-color: color-mix(in srgb, #737373 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-600 {
+  color: #525252;
+  border-color: #525252;
+  background-color: color-mix(in srgb, #525252 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-700 {
+  color: #404040;
+  border-color: #404040;
+  background-color: color-mix(in srgb, #404040 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-800 {
+  color: #262626;
+  border-color: #262626;
+  background-color: color-mix(in srgb, #262626 8%, white);
+}
+.lib-xplat-tag.xplat-neutral-900 {
+  color: #171717;
+  border-color: #171717;
+  background-color: color-mix(in srgb, #171717 8%, white);
+}
+.lib-xplat-tag.xplat-black {
+  color: #000000;
+  border-color: #000000;
+  background-color: color-mix(in srgb, #000000 8%, white);
+}
+.lib-xplat-tag.xplat-white {
+  color: #FFFFFF;
+  border-color: #FFFFFF;
+  background-color: color-mix(in srgb, #FFFFFF 8%, white);
+}
+.lib-xplat-tag.test-default {
+  color: #ffffff;
+  border-color: #ffffff;
+  background-color: color-mix(in srgb, #ffffff 8%, white);
+}
+.lib-xplat-tag .tag-label {
+  white-space: nowrap;
+}
+.lib-xplat-tag .tag-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+.lib-xplat-tag .tag-close svg {
+  width: 12px;
+  height: 12px;
+}
+.lib-xplat-tag .tag-close:hover {
+  opacity: 1;
+}

package/dist/components/Tag/index.d.cts

@@ -0,0 +1,131 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { C as ColorNamespace, a as ColorName, d as ColorProps } from '../../colors-BG91q_uV.cjs';
+
+interface TagProps<N extends ColorNamespace, C extends ColorName<N> = ColorName<N>> extends ColorProps<N, C> {
+    children: React.ReactNode;
+    onClose?: () => void;
+    className?: string;
+}
+declare const Tag: {
+    <N extends ColorNamespace = "xplat", C extends ColorName<N> = keyof {
+        readonly xplat: {
+            readonly red: {
+                readonly 50: "#FFF0F0";
+                readonly 100: "#FFDDDE";
+                readonly 200: "#FFC1C2";
+                readonly 300: "#FF9698";
+                readonly 400: "#FF5A5D";
+                readonly 500: "#FF272B";
+                readonly 600: "#F80409";
+                readonly 700: "#D40105";
+                readonly 800: "#AE0609";
+                readonly 900: "#900C0F";
+            };
+            readonly green: {
+                readonly 50: "#E5F6EA";
+                readonly 100: "#C1E7CC";
+                readonly 200: "#98D8AC";
+                readonly 300: "#6CCA8B";
+                readonly 400: "#47BE72";
+                readonly 500: "#10B259";
+                readonly 600: "#00A34F";
+                readonly 700: "#009143";
+                readonly 800: "#007F38";
+                readonly 900: "#006024";
+            };
+            readonly orange: {
+                readonly 50: "#FFF8EC";
+                readonly 100: "#FFF0D3";
+                readonly 200: "#FFDDA5";
+                readonly 300: "#FFC46D";
+                readonly 400: "#FF9F32";
+                readonly 500: "#FF820A";
+                readonly 600: "#FF6900";
+                readonly 700: "#CC4B02";
+                readonly 800: "#A13A0B";
+                readonly 900: "#82320C";
+            };
+            readonly yellow: {
+                readonly 50: "#FFFDE7";
+                readonly 100: "#FFFAC1";
+                readonly 200: "#FFF186";
+                readonly 300: "#FFE041";
+                readonly 400: "#FFCC0D";
+                readonly 500: "#F0B100";
+                readonly 600: "#D18800";
+                readonly 700: "#A66002";
+                readonly 800: "#894B0A";
+                readonly 900: "#743D0F";
+            };
+            readonly blue: {
+                readonly 50: "#F1F4FD";
+                readonly 100: "#DFE7FA";
+                readonly 200: "#C5D4F8";
+                readonly 300: "#9EB8F2";
+                readonly 400: "#7093EA";
+                readonly 500: "#4D6DE3";
+                readonly 600: "#3950D7";
+                readonly 700: "#303EC5";
+                readonly 800: "#2D35A0";
+                readonly 900: "#29317F";
+            };
+            readonly lightblue: {
+                readonly 50: "#EEFAFF";
+                readonly 100: "#D9F4FF";
+                readonly 200: "#BBEDFF";
+                readonly 300: "#8DE3FF";
+                readonly 400: "#57D0FF";
+                readonly 500: "#30B6FF";
+                readonly 600: "#1999F7";
+                readonly 700: "#1280E3";
+                readonly 800: "#1566B8";
+                readonly 900: "#175791";
+            };
+            readonly purple: {
+                readonly 50: "#FBF6FE";
+                readonly 100: "#F5EAFD";
+                readonly 200: "#EDD8FC";
+                readonly 300: "#E0BAF8";
+                readonly 400: "#CD8DF3";
+                readonly 500: "#B961EB";
+                readonly 600: "#A541DC";
+                readonly 700: "#9230C5";
+                readonly 800: "#782B9E";
+                readonly 900: "#62247F";
+            };
+            readonly pink: {
+                readonly 50: "#FFF4FE";
+                readonly 100: "#FFE7FD";
+                readonly 200: "#FFCFFA";
+                readonly 300: "#FEA9F1";
+                readonly 400: "#FD75E7";
+                readonly 500: "#F553DA";
+                readonly 600: "#D821B6";
+                readonly 700: "#B31892";
+                readonly 800: "#921676";
+                readonly 900: "#781761";
+            };
+            readonly neutral: {
+                readonly 50: "#FAFAFA";
+                readonly 100: "#F5F5F5";
+                readonly 200: "#E5E5E5";
+                readonly 300: "#D4D4D4";
+                readonly 400: "#A1A1A1";
+                readonly 500: "#737373";
+                readonly 600: "#525252";
+                readonly 700: "#404040";
+                readonly 800: "#262626";
+                readonly 900: "#171717";
+            };
+            readonly black: "#000000";
+            readonly white: "#FFFFFF";
+        };
+        readonly test: {
+            readonly default: "#ffffff";
+        };
+    }[N]>(props: TagProps<N, C>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Tag };