@mirohq/design-system-tag 0.2.2 → 0.3.1

package/dist/module.js

@@ -1,23 +1,39 @@
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
+import { useNewDesignLanguage } from '@mirohq/design-system-experiments';
 import { styled } from '@mirohq/design-system-stitches';
 import { Primitive } from '@mirohq/design-system-primitive';
+import { addPropsToChildren } from '@mirohq/design-system-utils';
+import { isIconComponent } from '@mirohq/design-system-base-icon';
 
 const StyledTag = styled(Primitive.div, {
   display: "inline-flex",
-  textTransform: "uppercase",
   width: "fit-content",
   paddingY: "$0",
   paddingX: "$50",
-  borderRadius: "$25",
-  fontSize: "$125",
-  lineHeight: 1.6,
-  fontWeight: "bold",
   letterSpacing: 0.25,
   "::selection": {
     backgroundColor: "transparent"
   },
   variants: {
+    v1: {
+      true: {
+        textTransform: "capitalize",
+        fontSize: "$150",
+        lineHeight: "$500",
+        fontWeight: "$semibold",
+        height: "$5",
+        alignItems: "center",
+        borderRadius: "$50"
+      },
+      false: {
+        textTransform: "uppercase",
+        fontSize: "$125",
+        lineHeight: 1.6,
+        fontWeight: "bold",
+        borderRadius: "$25"
+      }
+    },
     variant: {
       "beta-prominent": {
         backgroundColor: "$background-neutrals-inverted",
@@ -51,29 +67,649 @@ const StyledTag = styled(Primitive.div, {
         backgroundColor: "$background-success",
         color: "$text-success"
       },
-      error: {
+      danger: {
         backgroundColor: "$background-danger-prominent",
         color: "$text-danger-inverted"
       },
       "error-subtle": {
         backgroundColor: "$background-danger-subtle",
         color: "$text-danger"
+      },
+      ghost: {
+        backgroundColor: "$background-neutrals",
+        color: "$text-neutrals"
+      },
+      lime: {},
+      orange: {},
+      sunshine: {},
+      coral: {},
+      moss: {},
+      teal: {},
+      cyan: {},
+      ocean: {},
+      lilac: {},
+      pink: {},
+      coal: {}
+    },
+    shade: {
+      subtle: {},
+      mild: {},
+      prominent: {}
+    },
+    border: {
+      true: {
+        boxSizing: "border-box",
+        paddingX: "3px",
+        border: "1px solid transparent"
       }
     }
   },
-  defaultVariants: {
-    variant: "primary-prominent"
-  }
+  compoundVariants: [
+    {
+      v1: true,
+      variant: "neutral",
+      css: {
+        color: "$coal-text"
+      }
+    },
+    {
+      v1: true,
+      variant: "warning",
+      css: {
+        color: "$text-warning"
+      }
+    },
+    /** Lime variant */
+    {
+      variant: "lime",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$lime-background-subtle",
+        color: "$lime-text"
+      }
+    },
+    {
+      variant: "lime",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$lime-border-subtle"
+      }
+    },
+    {
+      variant: "lime",
+      shade: "mild",
+      css: {
+        backgroundColor: "$lime-background-mild",
+        color: "$lime-text"
+      }
+    },
+    {
+      variant: "lime",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$lime-border"
+      }
+    },
+    {
+      variant: "lime",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$lime-background-prominent",
+        color: "$lime-text-subtle"
+      }
+    },
+    {
+      variant: "lime",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$lime-border-prominent"
+      }
+    },
+    /** Orange variant */
+    {
+      variant: "orange",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$orange-background-subtle",
+        color: "$orange-text"
+      }
+    },
+    {
+      variant: "orange",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$orange-border-subtle"
+      }
+    },
+    {
+      variant: "orange",
+      shade: "mild",
+      css: {
+        backgroundColor: "$orange-background-mild",
+        color: "$orange-text"
+      }
+    },
+    {
+      variant: "orange",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$orange-border"
+      }
+    },
+    {
+      variant: "orange",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$orange-background-prominent",
+        color: "$orange-text-subtle"
+      }
+    },
+    {
+      variant: "orange",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$orange-border-prominent"
+      }
+    },
+    /** Sunshine variant */
+    {
+      variant: "sunshine",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$sunshine-background-subtle",
+        color: "$sunshine-text"
+      }
+    },
+    {
+      variant: "sunshine",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$sunshine-border-subtle"
+      }
+    },
+    {
+      variant: "sunshine",
+      shade: "mild",
+      css: {
+        backgroundColor: "$sunshine-background-mild",
+        color: "$sunshine-text"
+      }
+    },
+    {
+      variant: "sunshine",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$sunshine-border"
+      }
+    },
+    {
+      variant: "sunshine",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$sunshine-background-prominent",
+        color: "$sunshine-text-subtle"
+      }
+    },
+    {
+      variant: "sunshine",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$sunshine-border-prominent"
+      }
+    },
+    /** Coral variant */
+    {
+      variant: "coral",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$coral-background-subtle",
+        color: "$coral-text"
+      }
+    },
+    {
+      variant: "coral",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$coral-border-subtle"
+      }
+    },
+    {
+      variant: "coral",
+      shade: "mild",
+      css: {
+        backgroundColor: "$coral-background-mild",
+        color: "$coral-text"
+      }
+    },
+    {
+      variant: "coral",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$coral-border"
+      }
+    },
+    {
+      variant: "coral",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$coral-background-prominent",
+        color: "$coral-text-subtle"
+      }
+    },
+    {
+      variant: "coral",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$coral-border-prominent"
+      }
+    },
+    /** Moss variant */
+    {
+      variant: "moss",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$moss-background-subtle",
+        color: "$moss-text"
+      }
+    },
+    {
+      variant: "moss",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$moss-border-subtle"
+      }
+    },
+    {
+      variant: "moss",
+      shade: "mild",
+      css: {
+        backgroundColor: "$moss-background-mild",
+        color: "$moss-text"
+      }
+    },
+    {
+      variant: "moss",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$moss-border"
+      }
+    },
+    {
+      variant: "moss",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$moss-background-prominent",
+        color: "$moss-text-subtle"
+      }
+    },
+    {
+      variant: "moss",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$moss-border-prominent"
+      }
+    },
+    /** Teal variant */
+    {
+      variant: "teal",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$teal-background-subtle",
+        color: "$teal-text"
+      }
+    },
+    {
+      variant: "teal",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$teal-border-subtle"
+      }
+    },
+    {
+      variant: "teal",
+      shade: "mild",
+      css: {
+        backgroundColor: "$teal-background-mild",
+        color: "$teal-text"
+      }
+    },
+    {
+      variant: "teal",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$teal-border"
+      }
+    },
+    {
+      variant: "teal",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$teal-background-prominent",
+        color: "$teal-text-subtle"
+      }
+    },
+    {
+      variant: "teal",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$teal-border-prominent"
+      }
+    },
+    /** Cyan variant */
+    {
+      variant: "cyan",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$cyan-background-subtle",
+        color: "$cyan-text"
+      }
+    },
+    {
+      variant: "cyan",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$cyan-border-subtle"
+      }
+    },
+    {
+      variant: "cyan",
+      shade: "mild",
+      css: {
+        backgroundColor: "$cyan-background-mild",
+        color: "$cyan-text"
+      }
+    },
+    {
+      variant: "cyan",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$cyan-border"
+      }
+    },
+    {
+      variant: "cyan",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$cyan-background-prominent",
+        color: "$cyan-text-subtle"
+      }
+    },
+    {
+      variant: "cyan",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$cyan-border-prominent"
+      }
+    },
+    /** Ocean variant */
+    {
+      variant: "ocean",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$ocean-background-subtle",
+        color: "$ocean-text"
+      }
+    },
+    {
+      variant: "ocean",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$ocean-border-subtle"
+      }
+    },
+    {
+      variant: "ocean",
+      shade: "mild",
+      css: {
+        backgroundColor: "$ocean-background-mild",
+        color: "$ocean-text"
+      }
+    },
+    {
+      variant: "ocean",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$ocean-border"
+      }
+    },
+    {
+      variant: "ocean",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$ocean-background-prominent",
+        color: "$ocean-text-subtle"
+      }
+    },
+    {
+      variant: "ocean",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$ocean-border-prominent"
+      }
+    },
+    /** Lilac variant */
+    {
+      variant: "lilac",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$lilac-background-subtle",
+        color: "$lilac-text"
+      }
+    },
+    {
+      variant: "lilac",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$lilac-border-subtle"
+      }
+    },
+    {
+      variant: "lilac",
+      shade: "mild",
+      css: {
+        backgroundColor: "$lilac-background-mild",
+        color: "$lilac-text"
+      }
+    },
+    {
+      variant: "lilac",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$lilac-border"
+      }
+    },
+    {
+      variant: "lilac",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$lilac-background-prominent",
+        color: "$lilac-text-subtle"
+      }
+    },
+    {
+      variant: "lilac",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$lilac-border-prominent"
+      }
+    },
+    /** Pink variant */
+    {
+      variant: "pink",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$pink-background-subtle",
+        color: "$pink-text"
+      }
+    },
+    {
+      variant: "pink",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$pink-border-subtle"
+      }
+    },
+    {
+      variant: "pink",
+      shade: "mild",
+      css: {
+        backgroundColor: "$pink-background-mild",
+        color: "$pink-text"
+      }
+    },
+    {
+      variant: "pink",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$pink-border"
+      }
+    },
+    {
+      variant: "pink",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$pink-background-prominent",
+        color: "$pink-text-subtle"
+      }
+    },
+    {
+      variant: "pink",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$pink-border-prominent"
+      }
+    },
+    /** Coal variant */
+    {
+      variant: "coal",
+      shade: "subtle",
+      css: {
+        backgroundColor: "$coal-background-subtle",
+        color: "$coal-text"
+      }
+    },
+    {
+      variant: "coal",
+      shade: "subtle",
+      border: true,
+      css: {
+        borderColor: "$coal-border-subtle"
+      }
+    },
+    {
+      variant: "coal",
+      shade: "mild",
+      css: {
+        backgroundColor: "$coal-background-mild",
+        color: "$coal-text"
+      }
+    },
+    {
+      variant: "coal",
+      shade: "mild",
+      border: true,
+      css: {
+        borderColor: "$coal-border"
+      }
+    },
+    {
+      variant: "coal",
+      shade: "prominent",
+      css: {
+        backgroundColor: "$coal-background-prominent",
+        color: "$coal-text-subtle"
+      }
+    },
+    {
+      variant: "coal",
+      shade: "prominent",
+      border: true,
+      css: {
+        borderColor: "$coal-border-prominent"
+      }
+    }
+  ]
 });
 const StyledInner = styled(Primitive.span, {
   whiteSpace: "nowrap",
   overflow: "hidden",
-  textOverflow: "ellipsis"
+  textOverflow: "ellipsis",
+  variants: {
+    v1: {
+      true: {
+        paddingBottom: "1px"
+      }
+    }
+  }
+});
+
+const StyledIconSlot = styled(Primitive.span, {
+  paddingInlineEnd: "$25",
+  "& svg": {
+    transform: "translateY(0.5px)"
+  }
+});
+
+const IconSlot = React.forwardRef(({ children, ...restProps }, forwardRef) => {
+  const formattedChildren = addPropsToChildren(
+    children,
+    (child) => isIconComponent(child),
+    {
+      "data-icon-component": "",
+      size: "small",
+      weight: "thin"
+    }
+  );
+  return /* @__PURE__ */ jsx(StyledIconSlot, { ...restProps, ref: forwardRef, children: formattedChildren });
 });
 
 const Tag = React.forwardRef(
-  ({ variant = "primary", children, ...props }, forwardRef) => /* @__PURE__ */ jsx(StyledTag, { ...props, variant, ref: forwardRef, children: /* @__PURE__ */ jsx(StyledInner, { children }) })
+  ({ variant = "primary", shade = "mild", children, ...restProps }, forwardRef) => {
+    const [v1] = useNewDesignLanguage();
+    return /* @__PURE__ */ jsx(
+      StyledTag,
+      {
+        ...restProps,
+        variant,
+        shade,
+        v1,
+        ref: forwardRef,
+        children: /* @__PURE__ */ jsx(StyledInner, { v1, children })
+      }
+    );
+  }
 );
+Tag.IconSlot = IconSlot;
 
 export { Tag };
 //# sourceMappingURL=module.js.map